/* ===========================================================
   PURO DRAMA · LAB
   Identidad propia, distinta al resto del sitio.
   Paleta: negro #191919 · crema #F7F5EC · azul #3366CC
           coral #E8676F · amarillo #F9BA45 · morado #5A6099
           lila #6677C8
   Tipografía: Montserrat, mezclando 300 con 800/900, cursivas
   en palabras clave. Un solo caso por titular: todo en altas.
   =========================================================== */

:root{
  --lab-black:#191919;
  --lab-cream:#F7F5EC;
  --lab-blue:#3366CC;
  --lab-coral:#E8676F;
  --lab-yellow:#F9BA45;
  --lab-purple:#5A6099;
  --lab-lilac:#6677C8;

  --lab-cream-dim:rgba(247,245,236,.72);
  --lab-cream-faint:rgba(247,245,236,.45);
  --lab-black-dim:rgba(25,25,25,.72);
  --lab-black-faint:rgba(25,25,25,.45);
  --lab-line-on-dark:rgba(247,245,236,.16);
  --lab-line-on-light:rgba(25,25,25,.14);

  --lab-font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --lab-wrap:1180px;
  --lab-pad-y:clamp(3.5rem,7vw,6.5rem);
  --lab-radius:999px;
}

.lab-page{
  margin:0;
  background:var(--lab-cream);
  color:var(--lab-black);
  font-family:var(--lab-font);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.lab-page *,.lab-page *::before,.lab-page *::after{box-sizing:border-box}
.lab-page img{max-width:100%;display:block;height:auto}
.lab-page a:not(.lab-btn){color:inherit}

.lab-page h1,.lab-page h2,.lab-page h3{
  font-family:var(--lab-font);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  text-transform:uppercase;
}
.lab-page p{margin:0 0 1.1em}
.lab-page p:last-child{margin-bottom:0}

.lab-thin{font-weight:300}
.lab-black{font-weight:900}
.lab-i{font-style:italic}
.lab-i.lab-black{font-weight:800}

.lab-wrap{width:min(100% - 2.4rem,var(--lab-wrap));margin-inline:auto}
@media (max-width:640px){.lab-wrap{width:min(100% - 1.7rem,var(--lab-wrap))}}

.lab-section{position:relative;isolation:isolate;padding-block:var(--lab-pad-y);overflow:hidden}
.lab-section[id]{scroll-margin-top:90px}

/* ---------- patrón decorativo de fondo ----------
   background-image en vez de mask-image a propósito: con mask, este
   motor compone el pseudo-elemento por encima del contenido pase lo
   que pase con z-index (visible sin importar isolation/z-index, aunque
   el hit-testing de eventos sí respeta el orden correcto — discrepancia
   de compositing). background-image no tiene ese problema: se pinta
   detrás de los hijos del elemento por definición, sin ambigüedad. */
.lab-section::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("../assets/img/lab-pattern-dark.svg");
  background-repeat:repeat;
  background-size:210px;
  opacity:.05;
  pointer-events:none;
}
.lab-on-dark::before{background-image:url("../assets/img/lab-pattern-light.svg")}

/* ---------- círculos de acento en las esquinas ---------- */
.lab-dot{
  position:absolute;
  width:90px;height:90px;
  border-radius:50%;
  pointer-events:none;
}
.lab-dot--tl{top:-30px;left:-30px}
.lab-dot--tr{top:-30px;right:-30px}
.lab-dot--bl{bottom:-30px;left:-30px}
.lab-dot--br{bottom:-30px;right:-30px}
@media (max-width:640px){
  .lab-dot{width:60px;height:60px}
  .lab-dot--tl,.lab-dot--tr{top:-20px}
  .lab-dot--bl,.lab-dot--br{bottom:-20px}
  .lab-dot--tl,.lab-dot--bl{left:-20px}
  .lab-dot--tr,.lab-dot--br{right:-20px}
}

/* ===================== HEADER ===================== */
.lab-header{
  position:sticky;top:0;z-index:60;
  background:rgba(247,245,236,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--lab-line-on-light);
}
.lab-header .lab-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.lab-header .lab-logo{width:126px;height:auto}
.lab-header nav{display:flex;align-items:center;gap:1.6rem}
.lab-header nav a{
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--lab-black-dim);
  transition:color .2s ease;
}
.lab-header nav a:hover{color:var(--lab-blue)}
.lab-header nav a.lab-back{color:var(--lab-black-faint)}
.lab-header nav a.lab-back::before{content:"← ";}
@media (max-width:640px){
  .lab-header nav{gap:1rem}
  .lab-header nav a:not(.lab-back):not(.lab-hub){display:none}
  .lab-header .lab-logo{width:98px}
}

/* ===================== BOTONES PÍLDORA ===================== */
.lab-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border-radius:var(--lab-radius);
  font-family:var(--lab-font);
  font-size:.82rem;font-weight:800;letter-spacing:.03em;
  padding:1rem 1.9rem;
  text-decoration:none;
  border:2px solid transparent;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  cursor:pointer;
}
.lab-btn:hover{transform:translateY(-2px)}
.lab-btn--dark{background:var(--lab-black);color:var(--lab-cream)}
.lab-btn--dark:hover{background:var(--lab-blue)}
.lab-btn--cream{background:var(--lab-cream);color:var(--lab-black)}
.lab-btn--cream:hover{background:var(--lab-black);color:var(--lab-cream)}
.lab-btn--blue{background:var(--lab-blue);color:var(--lab-cream)}
.lab-btn--blue:hover{background:var(--lab-black)}
.lab-btn--outline{background:transparent;border-color:currentColor}
.lab-btn--soon{
  background:rgba(25,25,25,.08);color:var(--lab-black-faint);
  cursor:not-allowed;pointer-events:none;
}
.lab-btn--soon:hover{transform:none}

/* ===================== 1 · PORTADA ===================== */
.lab-hero{
  text-align:center;
  padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);
}

.lab-hero-logo{width:min(340px,68vw);margin-inline:auto;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.lab-hero h1{
  font-size:clamp(1.9rem,4.6vw,3.3rem);
  max-width:20ch;margin-inline:auto;
}
.lab-hero .lab-lede{
  margin:clamp(1.4rem,3vw,2rem) auto 0;
  max-width:46ch;
  font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);
  font-weight:400;
  color:var(--lab-black-dim);
}
.lab-hero .lab-lede em{font-style:italic;font-weight:800}
.lab-hero .lab-lede em.c-coral{color:var(--lab-coral)}
.lab-hero .lab-lede em.c-yellow{color:var(--lab-yellow)}
.lab-hero .lab-lede em.c-blue{color:var(--lab-blue)}

/* ===================== 2 · MANIFIESTO ===================== */
.lab-manifiesto{
  background:var(--lab-blue);
  color:var(--lab-cream);
  text-align:center;
}
.lab-manifiesto .lab-dot--tl{background:var(--lab-yellow)}
.lab-manifiesto .lab-dot--br{background:var(--lab-coral)}

.lab-manifiesto p{
  font-size:clamp(1.5rem,3.6vw,2.6rem);
  line-height:1.28;
  letter-spacing:-.01em;
  max-width:22ch;
  margin-inline:auto;
}
.lab-manifiesto p + p{margin-top:clamp(1.2rem,2.5vw,1.8rem)}
.lab-manifiesto strong{font-weight:800}
.lab-manifiesto em{font-style:italic;font-weight:800}
.lab-manifiesto .lab-thin{font-weight:300}

/* ===================== 3 · CATÁLOGO ===================== */
.lab-catalogo{background:var(--lab-black);color:var(--lab-cream)}
.lab-catalogo .lab-dot--tr{background:var(--lab-lilac)}
.lab-catalogo .lab-dot--bl{background:var(--lab-yellow)}

.lab-catalogo-head{text-align:center;margin-bottom:clamp(2.6rem,5vw,3.8rem)}
.lab-catalogo-head h2{
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  max-width:20ch;margin-inline:auto;
}
.lab-catalogo-head h2 em{font-style:italic}
.lab-catalogo-head h2 .c-coral{color:var(--lab-coral)}
.lab-catalogo-head h2 .c-yellow{color:var(--lab-yellow)}
.lab-catalogo-head h2 .c-blue{color:var(--lab-lilac)}
.lab-catalogo-head .lab-sub{
  margin-top:1rem;font-size:1.02rem;font-weight:300;color:var(--lab-cream-dim);
}

.lab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,2.6vw,2rem)}
@media (max-width:900px){.lab-cards{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

.lab-card{
  background:var(--lab-cream);color:var(--lab-black);
  border-radius:26px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.lab-card-media{
  position:relative;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.lab-card-media img{width:100%;height:100%;object-fit:cover}
.lab-card-media.ph{
  background:var(--lab-ph,var(--lab-coral));
  color:var(--lab-cream);text-align:center;
  padding:1.5rem;
}
.lab-card-media.ph span:not(.lab-tag){
  font-weight:900;font-size:1.3rem;text-transform:uppercase;letter-spacing:-.01em;line-height:1.2;
}
.lab-card-media.ph--dark{color:var(--lab-black)}
.lab-card-media.ph svg{width:40px;height:40px;margin-bottom:.7rem;opacity:.85}
.lab-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:999px;
  background:var(--lab-black);color:var(--lab-cream);
}
.lab-tag--soon{background:rgba(25,25,25,.55);color:var(--lab-cream)}
.lab-media-badge{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:var(--lab-blue);color:var(--lab-cream);text-align:center;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.6rem 1rem;
}
.lab-media-badge--coral{background:var(--lab-coral)}
.lab-card-body{padding:1.6rem 1.5rem 1.8rem;display:flex;flex-direction:column;flex:1}
.lab-card-kicker{
  font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lab-blue);margin-bottom:.5rem;
}
.lab-card-body h3{
  font-size:1.18rem;font-weight:800;text-transform:none;letter-spacing:-.01em;
  margin-bottom:.6rem;line-height:1.22;
}
.lab-card-body p{
  font-size:.9rem;font-weight:300;color:var(--lab-black-dim);
  margin-bottom:1.2rem;flex:1;
}
.lab-card-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.lab-price{font-size:1.05rem;font-weight:900}
.lab-card-foot .lab-btn{padding:.75rem 1.4rem;font-size:.74rem}

/* ===================== 4 · BLOQUE CORAL ===================== */
.lab-coral-block{
  background:var(--lab-coral);color:var(--lab-cream);
  text-align:center;
}
.lab-coral-block .lab-wrap{max-width:44ch;margin-inline:auto}
.lab-coral-block p{
  font-size:clamp(1.4rem,3.2vw,2.15rem);
  line-height:1.34;letter-spacing:-.008em;
}
.lab-coral-block p + p{margin-top:1rem}
.lab-coral-block strong{font-weight:800}
.lab-coral-block em{font-style:italic;font-weight:800}
.lab-coral-block .lab-thin{font-weight:300}

/* ===================== 5 · CIERRE ===================== */
.lab-cierre{
  background:var(--lab-yellow);color:var(--lab-cream);
  text-align:right;
}
.lab-cierre .lab-dot--tl{background:var(--lab-lilac)}
.lab-cierre .lab-dot--bl{background:var(--lab-blue)}

.lab-cierre p{
  font-size:clamp(2.1rem,6.5vw,4.4rem);
  line-height:1.02;letter-spacing:-.02em;
  margin:0;
}
.lab-cierre p + p{margin-top:.15em}
.lab-cierre .c-cream{color:var(--lab-cream)}
.lab-cierre .c-blue{color:var(--lab-blue);font-style:italic}
.lab-cierre .c-blue.lab-thin{font-weight:300}
.lab-cierre .c-blue.lab-black{font-weight:900}
.lab-cierre-actions{margin-top:clamp(1.8rem,4vw,2.6rem);display:flex;justify-content:flex-end}
@media (max-width:560px){
  .lab-cierre{text-align:center}
  .lab-cierre-actions{justify-content:center}
}

/* ===================== 6 · PIE ===================== */
.lab-footer{
  background:var(--lab-black);color:var(--lab-blue);
  text-align:center;padding-block:2.2rem;
}
.lab-footer p{
  margin:0;font-size:.8rem;font-weight:800;letter-spacing:.32em;text-transform:uppercase;
}
.lab-footer a{text-decoration:none;color:var(--lab-cream-faint);font-weight:500;letter-spacing:0;text-transform:none;font-size:.78rem;display:block;margin-top:.6rem}
.lab-footer a:hover{color:var(--lab-cream)}

/* ===================== reveal ===================== */
.lab-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.lab-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.lab-reveal{opacity:1;transform:none}}

.lab-page :focus-visible{outline:3px solid var(--lab-blue);outline-offset:3px}
.lab-page ::selection{background:var(--lab-blue);color:var(--lab-cream)}