/* ════════════════════════════════════════════════════════════
   Landing MASK-CICA — v2 corta · estética B2B SkinLab
   Cinco bloques · Inter 400/600/700/800
   Paleta terrosa de b2bskinlab. Del producto, solo el verde CICA
   (en la cifra del precio y su filete). Todo lo demás es B2B SkinLab.
   ════════════════════════════════════════════════════════════ */

:root{
  /* Paleta B2B SkinLab (tokens tomados de b2bskinlab.com) */
  --bone:        #fafaf8;   /* fondo base, hueso cálido */
  --arena:       #e8ddd0;   /* arena, el tono cálido (bloque 5, caja del vídeo) */
  --negro:       #0a0a0a;   /* texto y bloque 4 */
  --oliva:       #4a5540;
  --terracota:   #b85a3c;   /* acento cálido (nudge de sonido) */
  --terracota-dk:#9a4a2f;   /* terracota oscura de b2bskinlab (eyebrow sobre hueso, AA) */
  --terracota-cl:#d59173;   /* terracota clara, para eyebrow sobre negro */
  --gris:        #524d46;   /* texto secundario — oscurecido para AA sobre arena */
  --gris-suave:  #6b6560;   /* legal — oscurecido para AA sobre hueso */
  --linea:       #d3cdc6;   /* bordes cálidos */

  /* Único color del producto: el verde CICA del sobre. Solo en el precio. */
  --cica:        #9eb701;
  --cica-claro:  #b6cc3e;

  --texto-claro: #fafaf8;   /* texto sobre negro */

  --col:         620px;
  --lado:        22px;

  --s-xs:  0.5rem;
  --s-sm:  0.75rem;
  --s-md:  1.15rem;
  --s-lg:  1.75rem;
  --s-xl:  2.5rem;
  --s-2xl: 3.25rem;

  --aire-seccion: clamp(4.5rem, 4vw + 2.75rem, 6.5rem);

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bone);
  color:var(--negro);
  /* Inter: la misma familia que usa b2bskinlab.com para todo */
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:18px;
  line-height:1.6;
  letter-spacing:-0.003em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:641px){ body{ font-size:19px; } }

button,input,select,textarea{ font:inherit; color:inherit; }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; }

/* Titulares: Inter 800, apretados. Como en b2bskinlab. */
h1,h2,h3{
  font-weight:800;
  line-height:1.14;
  letter-spacing:-0.032em;
  color:var(--negro);
  margin:0 0 0.7em;
  text-wrap:balance;
}
h1{ font-size:clamp(2rem, 6vw, 2.7rem); }
h2{ font-size:clamp(1.5rem, 4.6vw, 2.05rem); margin-bottom:0.85em; }
h3{ font-size:1.1rem; letter-spacing:-0.02em; margin-bottom:0.55em; }

/* Eyebrow: la etiqueta pequeña en mayúsculas sobre el titular.
   La firma de b2bskinlab. En terracota (su acento), no en verde. */
.eyebrow{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--terracota-dk);
  margin:0 0 0.9em;
  line-height:1.2;
}
.eyebrow--claro{ color:var(--terracota-cl); }   /* sobre el bloque negro */

a{ color:inherit; }
::selection{ background:var(--cica); color:var(--negro); }
img{ max-width:100%; }

#pedido{ scroll-margin-top:8px; }

/* Contenedor */
.col{
  width:100%; max-width:var(--col);
  margin-inline:auto; padding-inline:var(--lado);
}
section{ padding-block:var(--aire-seccion); }

.salto{
  position:absolute; left:-9999px; top:0;
  background:var(--negro); color:var(--bone);
  padding:12px 18px; z-index:100; text-decoration:none;
}
.salto:focus{ left:8px; top:8px; }

/* Barra de marca */
.marca-bar{
  height:56px;
  display:flex; align-items:center; justify-content:center;
  padding-inline:var(--lado);
  border-bottom:1px solid var(--linea);
}
.marca-logo{ height:30px; width:auto; display:block; }

/* ── CTA (estilo B2B SkinLab: negro, casi recto, MAYÚSCULAS) ── */

.cta{
  display:block;
  width:100%;
  margin-top:var(--s-2xl);
  padding:17px 28px;
  background:var(--negro);
  color:var(--texto-claro);
  font-size:0.82rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0.09em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  border-radius:2px;
  border:1px solid var(--negro);
  transition:background .16s ease, color .16s ease, transform .1s ease;
}
/* Hover: el botón invierte (relleno ↔ contorno). Crujiente y plano,
   como los dos estilos de botón de b2bskinlab. */
.cta:hover{ background:var(--bone); color:var(--negro); }
.cta:active{ transform:translateY(1px); }
.cta:focus-visible{ outline:3px solid var(--negro); outline-offset:3px; }

/* Sobre el bloque 4 (negro): invertido, hueso con texto negro */
.cta--inversa{
  background:var(--bone);
  color:var(--negro);
  border-color:var(--bone);
}
.cta--inversa:hover{ background:var(--negro); color:var(--bone); }
.cta--inversa:focus-visible{ outline-color:var(--bone); }

@media (min-width:641px){
  .cta{ width:auto; display:inline-block; min-width:290px; }
}

/* Legal */
.legal{
  font-size:0.8rem; line-height:1.5;
  color:var(--gris-suave); margin:0;
  letter-spacing:0;
}
.legal--video{ margin-top:12px; }

/* Fotos reales del producto dentro de la columna. Recorte controlado
   con object-fit para no disparar el alto en una página corta. */
.foto{ margin:var(--s-lg) 0; }
.foto:first-child{ margin-top:0; }
.foto img{
  display:block; width:100%; height:auto;
  border-radius:3px;
  background:var(--arena);
}
.foto--producto img{ aspect-ratio:4/5; object-fit:cover; object-position:center 42%; }
.foto--experiencia img{ aspect-ratio:4/5; object-fit:cover; object-position:center 32%; }


/* ═══════════ 1 — Vídeo (hero vertical 9:16) ═══════════ */

.b1{ padding-block:0; }
.b1__inner{
  min-height:calc(100svh - 56px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  width:100%; max-width:var(--col);
  margin-inline:auto;
  padding:clamp(12px,2.6vw,22px) var(--lado) clamp(18px,3.4vw,30px);
  text-align:center;
}
.b1__texto{ flex:0 0 auto; }
.b1 h1{ margin-bottom:0.3em; }
.b1__remate{
  font-weight:700;
  color:var(--negro);
  font-size:clamp(1rem, 3.1vw, 1.18rem);
  line-height:1.32;
  letter-spacing:-0.01em;
  margin:0;
  text-wrap:balance;
}

.video{
  flex:0 0 auto;
  align-self:center;
  aspect-ratio:9/16;
  height:clamp(258px, 47svh, 430px);
  width:auto;
  max-width:82vw;
  margin:clamp(14px,2.8vw,22px) auto clamp(6px,1.4vw,10px);
  position:relative;
  display:flex;
  background:var(--arena);
  border-radius:3px;
  overflow:hidden;
  container-type:inline-size;   /* para poder ocultar el volumen según el ancho del vídeo */
}
.video video,
.video__fallback{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.video__fallback[hidden]{ display:none; }

.video__pendiente{ margin:auto; padding:14px 18px; font-size:0.9rem; text-align:center; }

/* En vertical 9:16 los subtítulos quemados van abajo. Los controles se
   colocan ARRIBA a la derecha para no taparlos. */
.video__controles{
  position:absolute; right:8px; top:8px;
  display:flex; align-items:center; gap:6px;
}
.video__controles[hidden]{ display:none; }

.video__vol{
  display:flex; align-items:center;
  height:42px; overflow:hidden;
  width:0; opacity:0; padding:0;
  border-radius:21px;
  background:rgba(10,10,10,.62);
  backdrop-filter:blur(4px);
  transition:width .22s ease, opacity .22s ease, padding .22s ease;
}
.video__vol.abierto{ width:88px; opacity:1; padding:0 12px; }
.video__vol[hidden]{ display:none; }
.video__vol-input{
  width:100%; height:4px; margin:0; cursor:pointer;
  accent-color:var(--bone);
}
.video__vol-input:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

.video__btn{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:0; border-radius:50%;
  background:rgba(10,10,10,.62);
  color:#fff; cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .15s ease, transform .12s ease;
}
.video__btn:hover{ background:rgba(10,10,10,.82); }
.video__btn:active{ transform:scale(.94); }
.video__btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.video__btn svg{ width:20px; height:20px; fill:currentColor; }

#video-toggle .ico-play{ display:none; margin-left:2px; }
#video-toggle[data-paused="true"] .ico-pausa{ display:none; }
#video-toggle[data-paused="true"] .ico-play{ display:block; }

/* El nudge de "activar sonido" en terracota (acento cálido de b2bskinlab) */
#video-sonido .ico-sound{ display:none; }
#video-sonido[data-muted="false"] .ico-mute{ display:none; }
#video-sonido[data-muted="false"] .ico-sound{ display:block; }
#video-sonido[data-muted="true"]{ background:var(--terracota); color:#fff; }
#video-sonido[data-muted="true"]:hover{ background:#a04d31; }

/* Si el vídeo es demasiado estrecho para la barra abierta (pantallas
   cortas, donde el 9:16 se estrecha), se oculta y quedan silencio + pausa. */
@container (max-width:210px){ .video__vol{ display:none; } }

@media (max-height:670px){
  .b1 h1{ font-size:1.6rem; }
  .b1__remate{ font-size:0.98rem; }
  .video{ height:clamp(230px, 44svh, 360px); }
  .cta{ margin-top:1.2em; padding:14px 24px; }
}
@media (min-width:641px){
  .b1__inner{ padding-bottom:clamp(30px,4vw,50px); }
  .video{ height:clamp(300px, 50svh, 440px); max-width:none; }
}

/* PC: hero a dos columnas. Texto a la izquierda, vídeo grande a la derecha.
   Las filas 1fr de arriba y abajo absorben el alto del vídeo, así el texto
   queda empaquetado y centrado, y el 9:16 puede ser mucho mayor sin que el
   botón caiga del pliegue. */
@media (min-width:900px){
  .b1__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:1fr min-content min-content min-content 1fr;
    justify-content:center;
    text-align:left;
    max-width:1060px;
    column-gap:clamp(48px,5vw,84px);
    row-gap:0;
    padding:28px var(--lado);
  }
  .b1__texto{ grid-column:1; grid-row:2; }
  .b1 h1{ margin-bottom:0.28em; }
  .b1__remate{ font-size:clamp(1.05rem,1.5vw,1.3rem); }
  .legal--video{ grid-column:1; grid-row:3; margin-top:22px; }
  .b1 .cta{ grid-column:1; grid-row:4; margin-top:28px; align-self:start; justify-self:start; }
  .video{
    grid-column:2; grid-row:1 / 6;
    align-self:center;
    height:min(82svh, 720px);
    max-width:none;
    margin:0;
  }
}


/* ═══════════ 2 — Qué es ═══════════ */

.destacado{
  font-weight:700;
  color:var(--negro);
  margin-top:1.3em;
  text-wrap:pretty;
}


/* ═══════════ 3 — Dónde encaja ═══════════ */

/* Filas con filete, como una hoja de datos de b2bskinlab. */
.protocolo{
  margin:0;
  padding:0.85em 0;
  border-top:1px solid var(--linea);
  text-wrap:pretty;
}
.protocolo strong{ color:var(--negro); }

.subtitulo-corte{
  margin-top:var(--s-xl);
  padding-top:var(--s-md);
  border-top:1px solid var(--linea);
}


/* ═══════════ 4 — Precio y pedido (fondo negro) ═══════════ */

.b4{
  background:var(--negro);
  color:#e7e4df;
}
.b4 h2{ color:#fff; }

.precio{
  margin:var(--s-md) 0 var(--s-lg);
  padding:var(--s-xs) 0 var(--s-xs) 18px;
  border-left:3px solid var(--cica);
}
.precio__linea{
  font-size:clamp(1.2rem, 3.8vw, 1.5rem);
  font-weight:700; line-height:1.2; color:#fff;
  margin-bottom:0.2em;
  letter-spacing:-0.01em;
}
.precio__cifra{
  font-size:clamp(2.2rem, 8vw, 3.2rem);
  font-weight:800;
  color:var(--cica);         /* el único verde de producto */
  display:inline-block; vertical-align:-0.05em;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.precio__linea,.sticky__precio{ font-variant-numeric:tabular-nums; }
.precio__uso{ font-size:1rem; color:#b7b2ab; margin-bottom:0; }

.b4 .destacado{ color:#fff; }


/* ═══════════ 5 — Ficha plegada (fondo arena) ═══════════ */

.b5{ background:var(--arena); }

.ficha-plegada{ border-block:1px solid var(--linea); }
.ficha-plegada > summary{
  font-weight:800;
  color:var(--negro);
  cursor:pointer;
  padding:1em 34px 1em 0;
  position:relative; list-style:none;
  font-size:1rem;
  letter-spacing:-0.01em;
}
.ficha-plegada > summary::-webkit-details-marker{ display:none; }
.ficha-plegada > summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:9px; height:9px;
  border-right:2px solid var(--gris);
  border-bottom:2px solid var(--gris);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
}
.ficha-plegada[open] > summary::after{ transform:translateY(-20%) rotate(-135deg); }
.ficha-plegada > summary:hover{ color:var(--terracota); }
.ficha-plegada > summary:focus-visible{ outline:3px solid var(--negro); outline-offset:2px; }

.ficha-plegada__cuerpo{ padding-bottom:1.4em; }

.ficha{
  margin:0 0 var(--s-lg);
  display:grid; grid-template-columns:1fr; gap:0;
  font-size:0.95rem;
}
.ficha dt{ font-weight:700; padding-top:0.8em; color:var(--negro); }
.ficha dd{ margin:0; padding-bottom:0.8em; border-bottom:1px solid var(--linea); color:var(--gris); }
@media (min-width:520px){
  .ficha{ grid-template-columns:minmax(140px,0.4fr) minmax(0,1fr); column-gap:24px; }
  .ficha dt{ border-bottom:1px solid var(--linea); padding-bottom:0.8em; }
}

.inci{ border-block:1px solid var(--linea); margin-bottom:var(--s-lg); }
.inci summary{
  font-weight:700; cursor:pointer;
  padding:0.8em 30px 0.8em 0; position:relative; list-style:none;
}
.inci summary::-webkit-details-marker{ display:none; }
.inci summary::after{
  content:""; position:absolute; right:4px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--gris);
  border-bottom:2px solid var(--gris);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
}
.inci[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.inci summary:focus-visible{ outline:3px solid var(--negro); outline-offset:2px; }
.inci__texto{
  font-size:0.84rem; line-height:1.55;
  color:var(--gris); padding-bottom:1.1em;
  word-break:break-word; margin:0;
}

.faq-lista p{ margin-bottom:1.05em; color:var(--gris); }
.faq-lista strong{ color:var(--negro); }


/* Pie */
.pie{ padding:0 0 clamp(40px,8vw,68px); text-align:center; }
.pie .legal{ text-wrap:pretty; }


/* ═══════════ Sticky ═══════════ */

.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,250,248,.97);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--linea);
  box-shadow:0 -6px 20px rgba(10,10,10,.06);
  transform:translateY(102%);
  visibility:hidden;
  transition:transform .26s ease, visibility 0s linear .26s;
}
.sticky.visible{
  transform:translateY(0); visibility:visible;
  transition:transform .26s ease, visibility 0s;
}
body.con-sticky{ padding-bottom:78px; }

.sticky__precio{
  margin:0; font-size:0.82rem; font-weight:700; line-height:1.25;
  flex:0 1 auto; min-width:0; color:var(--negro);
  letter-spacing:-0.01em;
}
.cta--sticky{
  margin:0; width:auto; flex:1 1 auto;
  padding:13px 14px; font-size:0.76rem; white-space:nowrap;
}
@media (max-width:380px){
  .sticky{ gap:8px; padding-inline:10px; }
  .sticky__precio{ font-size:0.74rem; }
  .cta--sticky{ font-size:0.72rem; padding:12px 10px; }
}
@media (min-width:641px){ .sticky{ display:none; } }


/* Marcadores pendientes: sin resalte */
.pendiente{ /* deliberadamente sin estilos */ }


/* ═══════════ Animaciones de entrada (GSAP) ═══════════ */

html.anim [data-anim],
html.anim [data-anim-stagger] > *{
  opacity:0;
  transform:translateY(22px);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  html.anim [data-anim],
  html.anim [data-anim-stagger] > *{ opacity:1; transform:none; }
}


/* Impresión */
@media print{
  .sticky,.video__controles,.cta{ display:none !important; }
  body{ font-size:11pt; }
}