/* ============================================================
   DC Medical Aesthetics — Presentación de consulta
   Liberación de Celulitis Fibrosa · Técnica Dr. Daniel Consuegra
   Fase 1 · Motor vertical (tablet portrait first)
   Paleta: manual de marca (navy + plata + taupe) — sin oro.
   ============================================================ */
:root{
  --bg:#2B2F37;
  --bg-deep:#21242B;
  --surface:rgba(255,255,255,.045);
  --hairline:rgba(244,240,233,.10);
  --hairline-strong:rgba(244,240,233,.16);
  --text:#F4F0E9;
  --text-dim:rgba(244,240,233,.58);
  --text-faint:rgba(244,240,233,.34);
  --accent:#C7CBD0;
  --accent-soft:rgba(199,203,208,.12);
  --accent-glow:rgba(199,203,208,.28);
  --rail-idle:rgba(244,240,233,.5);   /* ≥3:1 sobre navy (WCAG 1.4.11) */
  --taupe:#ADA8A1;
  --ink:#23262D;
  --grad-metal:linear-gradient(120deg,#FFFFFF 0%,#D7DADD 30%,#9DA1A6 62%,#7E8388 100%);
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Jost',system-ui,-apple-system,sans-serif;
  --ease-strong:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --pad:clamp(24px,6vw,72px);

  /* Ilustración médica (tejido) — tonos piel/taupe del manual, sin rosados */
  --il-air:#262A32;
  --il-skin:#C9AC97;
  --il-skin-deep:#B69682;
  --il-epi:#BE9F8A;
  --il-derm:#A78C79;
  --il-derm-deep:#947967;
  --il-fat:#EAE3D4;
  --il-fat-line:#CDC2AD;
  --il-septo:#54453B;
  --il-label:#DDE0E3;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg-deep)}
body{
  font-family:var(--font-sans);
  font-weight:300;
  color:var(--text);
  font-size:17px;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- Atmósfera ---- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 42% at 82% -6%, rgba(173,168,161,.10), transparent 70%),
    radial-gradient(52% 40% at 8% 108%, rgba(137,141,145,.09), transparent 70%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gridlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.32;
  background-image:repeating-linear-gradient(90deg,
    transparent 0,transparent calc(100%/4 - 1px),
    var(--hairline) calc(100%/4 - 1px),var(--hairline) calc(100%/4));
}
@media(min-width:1100px){
  .gridlines{background-image:repeating-linear-gradient(90deg,
    transparent 0,transparent calc(100%/6 - 1px),
    var(--hairline) calc(100%/6 - 1px),var(--hairline) calc(100%/6))}
}

/* ---- Chrome: progreso + rail + reset ---- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:rgba(244,240,233,.07)}
.progress i{
  display:block;height:100%;background:var(--grad-metal);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}
.rail{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:14px;
}
.rail button{
  appearance:none;border:0;cursor:pointer;background:none;
  padding:12px 0;min-height:48px;min-width:44px;
  display:flex;align-items:center;justify-content:flex-end;
}
.rail .bar{
  display:block;width:22px;height:2px;background:var(--rail-idle);
  /* difference = visible tanto sobre secciones oscuras como sobre la sección blanca */
  mix-blend-mode:difference;
  transition:width .45s var(--ease-out),background .45s var(--ease-out);
}
.rail button.on .bar{width:38px;background:var(--accent)}
/* riel adaptable en capítulo claro (pilares): marcas oscuras, sin blend */
.rail.on-light .bar{mix-blend-mode:normal;background:rgba(40,44,52,.5)}
.rail.on-light button.on .bar{background:#3f444c}
.rail button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.reset{
  position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--hairline-strong);color:var(--text-dim);
  cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease-out),visibility .5s,color .3s;
}
.reset.show{opacity:.8;visibility:visible;pointer-events:auto}
.reset:active{color:var(--accent)}
.reset svg{width:19px;height:19px}
/* Botón de recorrido automático (play/pause) — siempre visible, abajo-izquierda */
.playpause{
  position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom) + 58px);z-index:60;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--hairline-strong);color:var(--text-dim);
  cursor:pointer;opacity:.82;transition:opacity .3s,color .3s,background .3s,transform .12s;
}
.playpause:hover{opacity:1}
.playpause:active{transform:scale(.96)}
.playpause.playing{color:var(--accent);background:rgba(199,203,208,.12);opacity:1}
.playpause:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.playpause .ic{width:20px;height:20px;display:block}
.playpause .ic-pause,.playpause.playing .ic-play{display:none}
.playpause.playing .ic-pause{display:block}

/* ---- Capítulos ---- */
.cap{position:relative;min-height:100vh;min-height:100svh;z-index:2;overflow:clip}
.cap-inner{
  position:relative;z-index:4;min-height:inherit;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);padding-bottom:calc(var(--pad) + 3svh);
  max-width:860px;
}

/* Tipos */
.eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
h1,h2{
  font-family:var(--font-display);font-weight:430;line-height:1.02;
  letter-spacing:-.02em;text-wrap:balance;
}
h1{font-size:clamp(48px,10.5vw,104px);margin:18px 0 14px}
h2{font-size:clamp(36px,7.4vw,72px);margin:16px 0 14px}
h1 em,h2 em{
  font-style:italic;font-weight:400;
  background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--taupe);
}
@supports not (background-clip:text){h1 em,h2 em{background:none;-webkit-text-fill-color:currentColor;color:var(--taupe)}}
.sub{font-size:clamp(16px,2.4vw,20px);color:var(--text-dim);max-width:56ch}
.meta{
  display:flex;align-items:center;gap:14px;padding-top:14px;
  border-top:1px solid var(--hairline-strong);width:min(100%,520px);
}
.meta-num{font-family:var(--font-display);font-size:14px;color:var(--taupe)}
.meta-tag{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-dim);display:flex;align-items:center;gap:9px;
}
.meta-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* Reveals (solo con JS activo) */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--d,0)*90ms);
  will-change:opacity,transform;
}
.js [data-reveal].revealed{opacity:1;transform:none}

/* ---- Portada (hero con doctor recortado, estilo editorial) ---- */
.cap-portada{
  background:
    linear-gradient(rgba(24,27,33,.74),rgba(19,22,28,.85)),
    url("../assets/img/bg-crestas.png") 80% 16% / cover no-repeat,
    radial-gradient(125% 85% at 50% 6%, #2a2e37 0%, #20232b 46%, #16181d 100%);
}
.hero{position:relative;height:100svh;height:100vh;overflow:hidden}
.hero-eyebrow{
  position:absolute;top:12.5svh;left:var(--pad);right:var(--pad);z-index:4;text-align:left;
  font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
}
.hero-title{
  position:absolute;top:16.5svh;left:var(--pad);right:auto;z-index:1;text-align:left;
  max-width:min(66%,600px);
  font-family:var(--font-display);font-weight:430;font-size:clamp(44px,11.8vw,104px);
  line-height:.98;letter-spacing:-.022em;text-wrap:balance;
}
.hero-title em{
  font-style:italic;font-weight:400;
  background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--taupe);
}
@supports not (background-clip:text){.hero-title em{background:none;-webkit-text-fill-color:currentColor;color:var(--taupe)}}
.hero-dr{
  position:absolute;bottom:0;left:61%;transform:translateX(-50%);z-index:2;margin:0;
  height:84svh;width:auto;pointer-events:none;
  filter:drop-shadow(-14px 10px 40px rgba(13,15,19,.5));
  /* aparición SOLO por opacidad (no data-reveal): así no se pisa el translateX(-50%) que lo centra */
  animation:heroDrIn 1.3s var(--ease-out) both;
}
@keyframes heroDrIn{from{opacity:0}to{opacity:1}}
.hero-dr img{
  height:100%;width:auto;display:block;
  /* feather del canto izquierdo (donde el título cruza al doctor) + base inferior:
     el recorte del título lee como decisión de diseño y no como texto truncado */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%),linear-gradient(180deg,#000 80%,transparent 99%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%),linear-gradient(180deg,#000 80%,transparent 99%);
  mask-composite:intersect;
  /* grade cinematográfico: funde al doctor en la atmósfera plata-carbón (solo tono) */
  filter:contrast(1.05) saturate(.93) brightness(1.02);
}
.hero-foot{
  position:absolute;bottom:0;left:0;right:0;z-index:3;text-align:center;
  padding:0 var(--pad) calc(var(--pad) + 1svh);
  background:linear-gradient(180deg,transparent 0%,rgba(19,22,28,.44) 24%,rgba(19,22,28,.86) 52%,var(--bg-deep) 90%);
  padding-top:11svh;
}
.hero-sub{
  font-size:clamp(15px,2.4vw,19px);color:rgba(244,240,233,.82);max-width:40ch;margin:0 auto;
  text-shadow:0 1px 16px rgba(11,13,17,.7);
}
.cap-portada .hint{flex-direction:column-reverse;justify-content:center;gap:11px;margin-top:20px}
.brand-lockup{
  position:absolute;top:calc(var(--pad) * .8);left:var(--pad);right:var(--pad);
  height:26px;display:block;
  background:var(--text);
  -webkit-mask:url("/assets/brand/dc-lockup.svg") left center/contain no-repeat;
  mask:url("/assets/brand/dc-lockup.svg") left center/contain no-repeat;
  opacity:.92;z-index:5;
}
.hint{
  margin-top:34px;display:flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  transition:opacity .6s var(--ease-out);
}
.hint i{
  position:relative;display:block;width:1.5px;height:54px;border-radius:2px;
  background:rgba(244,240,233,.16);overflow:hidden;
}
.hint i::after{
  content:"";position:absolute;left:0;top:-65%;width:100%;height:65%;
  background:linear-gradient(180deg,transparent,var(--text));
  animation:hintslide 1.9s var(--ease-strong) infinite;
}
@keyframes hintslide{0%{transform:translateY(0)}100%{transform:translateY(320%)}}
.js .hint.gone[data-reveal],.hint.gone{opacity:0!important}

/* ---- Bajo la piel (scrollytelling con escena fija) ---- */
.cap-derm{height:380vh;height:380svh;background:var(--bg-deep)}
.derm-stage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;flex-direction:column;overflow:clip;
}
.derm-copy{
  position:relative;z-index:5;padding:calc(var(--pad) * .9) var(--pad) 0;
  height:34svh;min-height:250px;
}
.dstep{
  position:absolute;inset:calc(var(--pad) * .9) var(--pad) 0;
  opacity:0;visibility:hidden;max-width:760px;
}
.dstep h2{font-size:clamp(30px,5.8vw,54px);margin:12px 0 10px}
.dstep .sub{font-size:clamp(15px,2.2vw,18px)}
/* Fallback estático (sin GSAP · reduced-motion · sin JS): la escena deja de
   ser sticky con scrub y se convierte en un capítulo apilado y legible. */
.no-js .cap-derm,.reduced .cap-derm{height:auto;min-height:0}
.no-js .derm-stage,.reduced .derm-stage{position:static;height:auto;min-height:0;overflow:visible;padding-bottom:calc(var(--pad) + 3svh)}
.no-js .derm-copy,.reduced .derm-copy{position:static;height:auto;min-height:0}
.no-js .dstep,.reduced .dstep{position:relative;inset:auto;opacity:1;visibility:visible;margin-bottom:22px}
.no-js .derm-fade,.reduced .derm-fade{display:none}
.no-js .derm-canvas,.reduced .derm-canvas{position:relative;inset:auto;height:min(62svh,540px);margin-top:8px}
.no-js #cam,.reduced #cam{transform:none!important}
.derm-canvas{
  position:absolute;left:0;right:0;bottom:0;top:30svh;z-index:2;overflow:hidden;
}
/* fundir la base de la dermis a oscuro → transición imperceptible hacia el blanco de pilares */
.derm-canvas::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22svh;z-index:2;pointer-events:none;
  /* fundir la base del dermis a un oscuro CÁLIDO-neutro (no navy frío) → puentea mejor
     el marrón del tejido con el plata de pilares; más corto = menos banda muerta */
  background:linear-gradient(180deg,transparent,rgba(36,32,27,.6) 50%,#221f1a 92%);
}
.derm-cam{
  position:absolute;inset:0;will-change:transform;transform-origin:50% 44%;
}
.derm-img{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block;
}
/* Infografía: etiquetas de capas (overlay nítido sobre la imagen) */
.callouts{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none}
.callout{
  position:absolute;display:flex;align-items:center;gap:11px;
  width:min(46%,300px);transform:translateY(-50%);
}
.cl-left{left:clamp(16px,4vw,40px);justify-content:flex-start}
.cl-right{right:clamp(16px,4vw,40px);justify-content:flex-end}
.c-text{
  font-family:var(--font-sans);font-weight:500;font-size:clamp(11px,1.6vw,14px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);white-space:nowrap;
  background:rgba(28,31,38,.66);
  -webkit-backdrop-filter:blur(12px) saturate(135%);backdrop-filter:blur(12px) saturate(135%);
  border:1px solid rgba(199,203,208,.26);
  padding:7px 14px;border-radius:999px;
  box-shadow:0 8px 22px -8px rgba(10,12,16,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.c-line{flex:1;height:1px;min-width:22px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent))}
.cl-left .c-line{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 20%,transparent),var(--accent))}
.c-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(199,203,208,.18),0 0 10px rgba(199,203,208,.4);
}
.derm-fade{
  position:absolute;left:0;right:0;top:26svh;height:14svh;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,var(--bg-deep),transparent);
}

/* ---- Lo que sigue ---- */
.cap-teaser .cap-inner{justify-content:center;max-width:900px}
.next-list{list-style:none;margin:26px 0 34px;width:min(100%,640px)}
.next-list li{
  display:flex;align-items:baseline;gap:20px;
  padding:17px 2px;border-bottom:1px solid var(--hairline);
}
.next-list li:first-child{border-top:1px solid var(--hairline)}
.next-num{font-family:var(--font-display);font-size:20px;color:var(--taupe);min-width:30px}
.next-t{font-size:clamp(17px,2.6vw,21px);font-weight:400}
.next-d{margin-left:auto;font-size:12.5px;color:var(--text-dim);letter-spacing:.06em;text-align:right}
.dr-card{
  display:flex;align-items:center;gap:18px;margin-top:8px;
  padding:16px;border:1px solid var(--hairline-strong);border-radius:18px;
  background:var(--surface);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  width:min(100%,480px);
}
.dr-card img{
  width:88px;height:110px;object-fit:cover;object-position:center 12%;
  border-radius:12px;display:block;
}
.dr-card strong{display:block;font-weight:500;font-size:16px;letter-spacing:.02em}
.dr-card span{font-size:13px;color:var(--text-dim)}
.fase-tag{
  margin-top:34px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);
}

/* ---- Intro al procedimiento (divisor compacto, sin pantalla vacía) ---- */
/* Intro al procedimiento: MISMO fondo navy que las escenas (Paso 1 Evaluación) + más baja
   → se siente parte de una sola sesión con "Evaluación y marcaje" */
.cap-intro{min-height:44svh;
  background:radial-gradient(130% 95% at 50% 42%, #2b2f37 0%, #21242b 56%, #191c22 100%);
}
.cap-intro .cap-inner{justify-content:center;min-height:44svh;padding-top:5svh;padding-bottom:5svh}

/* ---- Tranquila · resuelve objeciones (convierte) ---- */
/* Tranquila toma la ALTURA DE SU CONTENIDO (no 100svh forzado) → sin espacio muerto
   ni antes (Progresivos) ni después (Antes/Después) */
.cap-assure{background:radial-gradient(120% 80% at 50% 0%, #30343d 0%, #24272f 52%, #1c1f25 100%);min-height:auto}
.cap-assure .cap-inner{justify-content:flex-start;min-height:auto;
  padding-top:calc(var(--pad) + 6svh);padding-bottom:calc(var(--pad) + 7svh);max-width:940px}
.assure-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;width:100%;
}
.assure{
  display:flex;flex-direction:column;gap:9px;padding:24px;border-radius:18px;
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--hairline-strong);
}
.assure-q{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(22px,3.4vw,29px);line-height:1.08;letter-spacing:-.01em;color:var(--text);
}
.assure-a{font-size:clamp(15px,2vw,17px);line-height:1.55;color:rgba(244,240,233,.75)}
@media(max-width:560px){.assure-grid{grid-template-columns:1fr;gap:12px}}

/* ---- Pasos: numeración y copy (contenedores .step legacy retirados) ---- */
.step-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.step-num{
  font-family:var(--font-display);font-weight:430;font-size:clamp(48px,12vw,92px);line-height:.78;
  background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--taupe);
}
@supports not (background-clip:text){.step-num{background:none;-webkit-text-fill-color:currentColor;color:var(--taupe)}}
.step-rule{flex:0 0 42px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.step-of{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,240,233,.74)}
.step-title{
  font-family:var(--font-display);font-weight:430;font-size:clamp(30px,6.2vw,60px);
  line-height:1.02;letter-spacing:-.02em;text-wrap:balance;margin-bottom:12px;
}
.step-title em{
  font-style:italic;font-weight:400;
  background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--taupe);
}
@supports not (background-clip:text){.step-title em{background:none;-webkit-text-fill-color:currentColor;color:var(--taupe)}}
.step-desc{font-size:clamp(15px,2.3vw,19px);line-height:1.55;color:var(--text-dim);max-width:52ch}

/* Etiqueta nítida sobre el frasco de Sculptra (viaja con el parallax) */
.sculptra-lbl{
  position:absolute;left:34%;top:60%;width:15%;text-align:center;z-index:2;
  transform:translate(-50%,-50%);
}
.sculptra-lbl b{
  display:block;font-family:var(--font-sans);font-weight:600;
  font-size:clamp(8px,1.5vw,13px);letter-spacing:.05em;color:#23262d;
}
.sculptra-lbl span{
  display:block;font-size:clamp(5px,.95vw,8px);letter-spacing:.02em;color:#5a5f66;margin-top:2px;
}

/* ---- Cierre ---- */
.cap-cierre .cap-inner{justify-content:flex-end}
.cap-cierre .cap-bg img{object-position:center 18%}

/* ============================================================
   Sistema de PROFUNDIDAD (capas flotantes + parallax multivelocidad)
   ============================================================ */
.cap-depth{
  position:relative;min-height:100svh;min-height:100vh;overflow:hidden;
  background:
    radial-gradient(72% 46% at 74% 16%, rgba(126,146,186,.22), transparent 62%),
    radial-gradient(66% 44% at 22% 82%, rgba(168,156,196,.16), transparent 62%),
    radial-gradient(130% 95% at 50% 42%, #30343e 0%, #24272f 52%, #191c22 100%);
  display:flex;align-items:center;justify-content:center;
}
/* Floaters decorativos (ADN de vidrio + gotas de agua) — negro→transparente
   vía alpha-por-luminancia; algunos con blur para sensación de profundidad. */
.glass-floaters{position:absolute;inset:0;z-index:1;pointer-events:none}
.gfloat{position:absolute;will-change:transform}
.gf-in{display:block;animation:floaty 9s ease-in-out infinite}
.gfloat img{width:100%;height:auto;display:block}
.gf-dna{width:27vw;max-width:240px;top:5%;left:-3%;opacity:.95}
.gf-dna .gf-in{animation-delay:-3s}
.gf-water{width:42vw;max-width:376px;top:1%;right:-10%;opacity:.9}
.gf-water .gf-in{animation-delay:-1s}
.gf-water2{width:24vw;max-width:200px;bottom:3%;left:-3%;opacity:.66}
.gf-water2 .gf-in{animation-delay:-5s;filter:blur(2.5px)}

/* ---- Floaters decorativos reutilizables (ADN/agua) para el resto del deck ---- */
.sec-floaters{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sf{position:absolute;opacity:.5}
.sf .gf-in{display:block;animation:floaty 11s ease-in-out infinite;will-change:transform}
.sf img{width:100%;height:auto;display:block}
.sf.tl{top:4%;left:-5%}
.sf.tr{top:5%;right:-6%}
.sf.bl{bottom:5%;left:-5%}
.sf.br{bottom:6%;right:-5%}
.sf.sz-dna{width:20vw;max-width:176px}
.sf.sz-lg{width:26vw;max-width:214px}
.sf.sz-md{width:18vw;max-width:150px}
.sf.blur .gf-in{filter:blur(2.5px)}
.sf.d1 .gf-in{animation-delay:-3s}
.sf.d2 .gf-in{animation-delay:-6s}
.depth-layer{position:absolute;inset:0;will-change:transform;pointer-events:none}

/* Capa fondo: glows grandes desenfocados */
.glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.glow-a{width:60vw;height:60vw;left:-14vw;top:8%;
  background:radial-gradient(circle,rgba(173,168,161,.28),transparent 68%)}
.glow-b{width:52vw;height:52vw;right:-12vw;bottom:2%;
  background:radial-gradient(circle,rgba(137,141,145,.26),transparent 68%)}

/* Capa polvo: partículas suaves desenfocadas */
.dust{position:absolute;border-radius:50%;background:rgba(244,240,233,.5);filter:blur(1px)}
.dust.d1{width:6px;height:6px;left:18%;top:24%;opacity:.5}
.dust.d2{width:4px;height:4px;left:74%;top:30%;opacity:.4;filter:blur(2px)}
.dust.d3{width:9px;height:9px;left:30%;top:70%;opacity:.3;filter:blur(3px)}
.dust.d4{width:5px;height:5px;left:82%;top:62%;opacity:.5}
.dust.d5{width:3px;height:3px;left:50%;top:16%;opacity:.6}
.dust.d6{width:7px;height:7px;left:12%;top:52%;opacity:.35;filter:blur(2px)}
.dust.d7{width:4px;height:4px;left:64%;top:78%;opacity:.5}
.dust.d8{width:5px;height:5px;left:44%;top:86%;opacity:.4;filter:blur(2px)}

/* Capa protagonista: elemento recortado flotando */
.depth-hero{display:flex;align-items:center;justify-content:center}
.depth-hero img{
  height:52svh;width:auto;
  filter:drop-shadow(0 30px 60px rgba(13,15,19,.6)) drop-shadow(0 0 40px rgba(199,203,208,.12));
  animation:floaty 7s ease-in-out infinite;
}
/* Frasco HD protagonista (wrapper hace parallax, figure hace zoom de entrada) */
.depth-vial-wrap{display:flex;align-items:center;justify-content:center}
.depth-hero-hd{position:relative;display:flex;align-items:center;justify-content:center;will-change:transform}
.depth-hero-hd img{height:62svh;filter:drop-shadow(0 40px 70px rgba(8,10,14,.7)) drop-shadow(0 0 60px rgba(199,203,208,.14))}
.depth-hero-hd .sculptra-float-lbl{
  position:absolute;left:50%;top:calc(50% + 8svh);transform:translate(-50%,-50%);
  width:auto;min-width:0;text-align:center;z-index:3;pointer-events:none;
}
.depth-hero-hd .sculptra-float-lbl b{font-size:clamp(11px,1.7vw,16px);letter-spacing:.14em;color:#23262d}
.depth-hero-hd .sculptra-float-lbl span{font-size:clamp(6px,1vw,9px);letter-spacing:.06em;color:#5a5f66;margin-top:2px}
@keyframes floaty{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* Copy centrado detrás del elemento */
.depth-copy{
  position:absolute;z-index:2;text-align:center;width:min(90%,720px);
  top:15svh;left:50%;transform:translateX(-50%);
}
.depth-copy .eyebrow{justify-content:center}
.depth-copy h2{font-size:clamp(40px,9vw,86px);margin-top:12px}

/* Variante split: elemento a un lado, texto al otro (abajo) */
.depth-split{align-items:flex-end}
.depth-hero-right{justify-content:flex-end;align-items:center}
.depth-hero-right img{height:70svh;transform:translateX(6%)}
.depth-copy-left{
  position:relative;z-index:4;text-align:left;left:auto;top:auto;transform:none;
  width:100%;max-width:680px;margin-right:auto;
  padding:var(--pad);padding-bottom:calc(var(--pad) + 3svh);
}
.depth-split::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(25,28,34,.55) 74%,var(--bg-deep) 100%);
}
.depth-copy-left .meta{width:min(100%,420px)}

/* variante espejo: elemento a la izquierda, texto a la derecha */
.depth-hero-left{justify-content:flex-start;align-items:center}
.depth-hero-left img{height:70svh;transform:translateX(-6%)}
.depth-copy-right{
  position:relative;z-index:4;text-align:left;left:auto;top:auto;transform:none;
  width:100%;max-width:680px;margin-left:auto;
  padding:var(--pad);padding-bottom:calc(var(--pad) + 3svh);
}

/* panel flotante para escenas de tejido (ilustración en tarjeta) */
.depth-panel{display:flex;align-items:center}
.depth-panel.depth-hero-right{justify-content:flex-end}
.depth-panel.depth-hero-left{justify-content:flex-start}
.panel-card{
  display:block;width:min(60vw,440px);aspect-ratio:864/1020;border-radius:22px;overflow:hidden;
  box-shadow:0 34px 72px -18px rgba(10,12,16,.82), 0 0 0 1px rgba(199,203,208,.16), inset 0 1px 0 rgba(255,255,255,.12);
  animation:floaty 7.5s ease-in-out infinite;transform:translateX(4%);
}
.depth-hero-left .panel-card{transform:translateX(-4%)}
.panel-card img{width:100%;height:100%;object-fit:cover;object-position:center 32%}

/* número/encabezado del paso dentro del copy de profundidad */
.depth-copy .step-head{justify-content:flex-start}
.depth-copy .step-title{font-family:var(--font-display);font-weight:430;font-size:clamp(30px,6vw,58px);line-height:1.02;letter-spacing:-.02em;margin-bottom:12px}
.depth-copy .step-title em{font-style:italic;font-weight:400;background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--taupe)}
.depth-copy .step-desc{font-size:clamp(15px,2.3vw,19px);line-height:1.55;color:var(--text-dim);max-width:46ch}

/* Etiqueta Sculptra sobre el frasco flotante recortado */
.depth-hero .sculptra-float-lbl{
  position:absolute;z-index:3;width:12%;min-width:74px;text-align:center;
  left:50%;top:58%;transform:translate(-50%,-50%);
}
.depth-hero-right .sculptra-float-lbl{left:auto;right:11%}
.sculptra-float-lbl b{display:block;font-family:var(--font-sans);font-weight:600;font-size:clamp(8px,1.3vw,12px);letter-spacing:.05em;color:#23262d}
.sculptra-float-lbl span{display:block;font-size:clamp(5px,.85vw,7px);color:#5a5f66;margin-top:1px}

/* Touch points: chips de vidrio 3D flotando */
.depth-points{z-index:3}
.tpoint{
  position:absolute;display:flex;align-items:center;gap:12px;width:max-content;max-width:30vw;
  padding:13px 18px 13px 13px;border-radius:16px;
  /* Fondo casi sólido en vez de backdrop-filter: estos chips se mueven por scrub
     (data-depth) y un backdrop se recomputa cada frame → jank en Safari iPad. */
  background:linear-gradient(150deg,rgba(70,76,86,.95),rgba(38,42,50,.93));
  border:1px solid rgba(199,203,208,.3);
  box-shadow:0 22px 46px -14px rgba(10,12,16,.8), 0 0 0 1px rgba(13,15,19,.3), inset 0 1px 0 rgba(255,255,255,.18);
}
/* línea-guía + punto: cada pilar "apunta" al frasco (concepto: pilares del producto) */
.tpoint::before{content:"";position:absolute;top:50%;width:clamp(22px,5vw,54px);height:1px}
.tpoint::after{content:"";position:absolute;top:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.tp-a::before,.tp-c::before{left:100%;background:linear-gradient(90deg,var(--accent-glow),transparent)}
.tp-b::before,.tp-d::before{right:100%;background:linear-gradient(270deg,var(--accent-glow),transparent)}
.tp-a::after,.tp-c::after{left:calc(100% + clamp(22px,5vw,54px) - 2px)}
.tp-b::after,.tp-d::after{right:calc(100% + clamp(22px,5vw,54px) - 2px)}
.tpoint.tp-a{left:5%;top:33%}
.tpoint.tp-b{right:5%;top:29%}
.tpoint.tp-c{left:5%;top:72%}
.tpoint.tp-d{right:5%;top:76%}
.tp-ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(199,203,208,.22),rgba(199,203,208,.06));
  border:1px solid rgba(244,240,233,.16);color:var(--accent);
}
.tp-ico svg{width:20px;height:20px}
.tp-txt b{display:block;font-family:var(--font-sans);font-weight:500;font-size:14px;letter-spacing:.01em;color:var(--text)}
.tp-txt span{display:block;font-size:11.5px;color:var(--text-dim);margin-top:2px;letter-spacing:.02em}

@media(max-width:520px){
  .tpoint{max-width:66vw;padding:10px 13px 10px 10px}
  .tp-txt b{font-size:13px}.tp-txt span{font-size:11px}
}

/* Copy arriba centrado (antes/después) */
.depth-copy-top{top:11svh}
.depth-copy-top h2{font-size:clamp(38px,8vw,74px)}

/* ============================================================
   TEMA CLARO — Cuatro pilares con fondo blanco estudio.
   Deja el ADN/agua/frasco más limpios (como el feed) y suaviza
   la transición de contraste con las secciones oscuras vecinas.
   ============================================================ */
.cap-light{
  background:radial-gradient(125% 92% at 50% 30%, #F5F6F8 0%, #E9EBEE 52%, #DBDEE2 100%);
}
/* bandas de transición dark→blanco→dark: altas y con curva multi-stop (fade largo y suave) */
.cap-light::before,.cap-light::after{content:"";position:absolute;left:0;right:0;height:30svh;z-index:2;pointer-events:none}
.cap-light::before{top:0;height:24svh;background:linear-gradient(180deg,
  #221f1a 0%, rgba(36,32,27,.9) 16%, rgba(36,32,27,.6) 40%,
  rgba(36,32,27,.3) 64%, rgba(36,32,27,.1) 84%, rgba(36,32,27,0) 100%)}
.cap-light::after{bottom:0;background:linear-gradient(0deg,
  var(--bg-deep) 0%, rgba(33,36,43,.9) 16%, rgba(33,36,43,.62) 38%,
  rgba(33,36,43,.32) 62%, rgba(33,36,43,.12) 82%, rgba(33,36,43,0) 100%)}
/* glows/dust son para fondo oscuro → ocultar en claro */
.cap-light .depth-back,.cap-light .depth-dust{display:none}
/* tipografía en oscuro */
/* eyebrow como pill glassmorfismo centrado */
.cap-light .eyebrow{
  display:inline-flex;align-items:center;
  color:#3f444c;font-size:12.5px;font-weight:600;letter-spacing:.18em;
  padding:8px 20px;border-radius:999px;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 8px 22px -10px rgba(70,64,56,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
.cap-light .eyebrow::after{display:none}
.cap-light h2{color:var(--ink)}
.cap-light h2 em{
  background:linear-gradient(118deg,#23262d 0%,#40454d 55%,#2a2e35 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#23262d;
}
/* chips claros (frosted) */
.cap-light .tpoint{
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(245,243,237,.9));
  border:1px solid rgba(30,34,42,.1);
  box-shadow:0 20px 44px -16px rgba(70,64,56,.3), inset 0 1px 0 rgba(255,255,255,.85);
}
.cap-light .tp-ico{
  background:linear-gradient(150deg,rgba(30,34,42,.08),rgba(30,34,42,.03));
  border:1px solid rgba(30,34,42,.1);color:#454a52;
}
.cap-light .tp-txt b{color:var(--ink)}
.cap-light .tp-txt span{color:#767a82}
/* conectores oscuros hacia el frasco */
.cap-light .tp-a::before,.cap-light .tp-c::before{background:linear-gradient(90deg,rgba(30,34,42,.34),transparent)}
.cap-light .tp-b::before,.cap-light .tp-d::before{background:linear-gradient(270deg,rgba(30,34,42,.34),transparent)}
.cap-light .tpoint::after{background:#6b7078;box-shadow:0 0 8px rgba(60,55,48,.22)}
/* Blobs plata (feed) como fondo orgánico de la sección — reemplaza el ADN */
.pil-dna-bg{
  position:absolute;inset:0;margin:0;z-index:0;pointer-events:none;opacity:1;
}
.pil-dna-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* clear-space: calma los blobs detrás del título (banda superior) y del frasco (centro) */
.pil-dna-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 24% at 50% 20%, rgba(242,244,246,.66), rgba(242,244,246,0) 72%),
    radial-gradient(48% 42% at 50% 48%, rgba(242,244,246,.5), rgba(242,244,246,0) 72%);
}
/* líneas swimlane del frasco a cada tarjeta + círculos con pulso */
.pil-connectors{position:absolute;inset:0;z-index:1;pointer-events:none}
.pil-connectors svg{position:absolute;inset:0;width:100%;height:100%}
.pil-connectors line{stroke:rgba(58,64,72,.32);stroke-width:1.1px;vector-effect:non-scaling-stroke}
.pil-pulse{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#565b63;box-shadow:0 0 0 3px rgba(244,242,237,.6)}
.pil-pulse::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(86,91,99,.55);animation:ppulse 2.2s var(--ease-out) infinite}
@keyframes ppulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.4);opacity:0}}
.pp-a{left:26%;top:31%}
.pp-b{left:74%;top:31%}
.pp-c{left:26%;top:69%}
.pp-d{left:74%;top:69%}
.pp-b::after{animation-delay:.55s}
.pp-c::after{animation-delay:1.1s}
.pp-d::after{animation-delay:1.65s}
/* orden de capas en la sección clara: ADN(0) < agua(1) < frasco(2) < tarjetas(3) < título(4) */
.cap-light .depth-vial-wrap{z-index:2}
.cap-light .depth-copy{z-index:4}
/* frasco un poco menor para dar aire a las tarjetas */
.cap-light .depth-hero-hd img{height:52svh}

/* ---- Tarjetas de imagen de los pilares (imagen dominante + label, tipo referencia) ---- */
.pcard{
  position:absolute;width:clamp(150px,23vw,198px);border-radius:16px;overflow:hidden;
  background:#fff;
  box-shadow:0 26px 54px -20px rgba(70,64,56,.42), 0 0 0 1px rgba(30,34,42,.06);
}
.pcard-img{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:#eceae4}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-txt{padding:12px 15px 14px}
.pcard-txt b{display:block;font-family:var(--font-sans);font-weight:600;font-size:17.5px;letter-spacing:.01em;color:var(--ink);line-height:1.15}
.pcard-txt span{display:block;font-size:14px;color:#5f636b;margin-top:3px;line-height:1.32}
.pc-a{left:2.5%;top:12%}
.pc-b{right:2.5%;top:12%}
.pc-c{left:2.5%;bottom:10%}
.pc-d{right:2.5%;bottom:10%}
/* ---- PILARES EN MÓVIL: frasco+título arriba, tarjetas en fila con scroll horizontal abajo ---- */
@media(max-width:640px){
  .cap-light .depth-copy{top:6svh}
  .cap-light .depth-vial-wrap{top:16svh;bottom:34svh}  /* centra el frasco entre el título y el strip */
  .cap-light .depth-hero-hd img{height:34svh}
  .pil-connectors{display:none}                   /* apuntaban a posiciones absolutas */
  .cap-light .depth-points{
    position:absolute;left:0;right:0;bottom:0;top:auto;height:auto;
    display:flex;gap:12px;align-items:stretch;
    overflow-x:auto;overflow-y:hidden;
    padding:14px 16px calc(20px + env(safe-area-inset-bottom));
    scroll-snap-type:none;touch-action:pan-y;      /* swipe horizontal manual OFF → el gesto vertical siempre pasa a la página */
    -webkit-overflow-scrolling:touch;
    transform:none!important;                      /* neutraliza el parallax vertical del layer */
    z-index:6;
  }
  .cap-light .depth-points::-webkit-scrollbar{display:none}
  .cap-light .pcard{
    position:static;left:auto;right:auto;top:auto;bottom:auto;
    flex:0 0 46vw;min-width:168px;max-width:240px;width:auto;
    scroll-snap-align:start;
  }
}

/* Antes / Después: dos cuerpos flotantes */
.cap-ba{align-items:flex-end}
.ba-pair{
  position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(4px,2vw,26px);width:100%;padding:0 12px;
  height:72svh;margin-bottom:9svh;
}
.ba-item{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;flex:0 1 auto;height:100%;justify-content:flex-end}
.ba-item img{
  height:64svh;width:auto;max-width:47vw;object-fit:contain;
  filter:drop-shadow(0 26px 50px rgba(10,12,16,.6));
}
.ba-item:last-child img{height:70svh}
.ba-tag{
  position:absolute;top:2svh;left:10px;z-index:3;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text);padding:6px 13px;border-radius:999px;
  background:rgba(38,42,50,.7);border:1px solid rgba(199,203,208,.3);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.ba-tag-after{color:var(--accent);border-color:var(--accent-glow)}
.ba-foot{
  position:absolute;bottom:calc(var(--pad) - 6px);left:0;right:0;z-index:4;text-align:center;
  font-size:12.5px;letter-spacing:.06em;color:var(--text-dim);
}

/* ============================================================
   ESCENA CINEMATOGRÁFICA (protagonista único · foco/desenfoque · pin)
   Un elemento dominante que entra desde el blur, se enfoca y sale.
   ============================================================ */
.scene{position:relative;height:190svh;height:190vh}
/* el morph antes/después necesita más recorrido para apreciar el barrido */
.scene-ba{height:230svh;height:230vh}
.scene-pin{
  position:sticky;top:0;height:100svh;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(130% 95% at 50% 42%, #2b2f37 0%, #21242b 56%, #191c22 100%);
}
.scene-atmos{position:absolute;inset:0;z-index:0;pointer-events:none}

/* Protagonista: grande, centrado, dominante */
.scene-hero{
  position:absolute;z-index:1;margin:0;left:50%;top:46%;
  transform:translate(-50%,-50%);
  will-change:transform,filter,opacity;
}
.scene-hero img{height:80svh;width:auto;display:block;
  filter:drop-shadow(0 40px 80px rgba(10,12,16,.65));}

/* Copy: aparece en el foco, superpuesto abajo con degradado de legibilidad */
.scene-copy{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:var(--pad);padding-bottom:calc(var(--pad) + 3svh);
  max-width:760px;will-change:transform,opacity;
}
.scene-pin::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(22,25,30,.5) 70%,var(--bg-deep) 98%);
}
/* funde el borde SUPERIOR de cada escena al fondo compartido → el borde inferior de una
   escena (navy) y el superior de la siguiente (navy) se encuentran SIN línea dura entre moods */
.scene-pin::before{
  content:"";position:absolute;top:0;left:0;right:0;height:16svh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--bg-deep) 0%,rgba(33,36,43,.55) 42%,transparent 100%);
}
/* En escenas de TARJETA el copy va debajo de la card (sobre el fondo oscuro),
   así que el scrim puede arrancar más abajo y no velar la ilustración (money shot). */
.scene--card .scene-pin::after{
  background:linear-gradient(180deg,transparent 64%,rgba(22,25,30,.5) 84%,var(--bg-deep) 100%);
}
.scene-copy .meta{width:min(100%,440px)}
.scene-copy h2{font-size:clamp(30px,6.4vw,60px);margin:14px 0 12px;text-wrap:balance;text-shadow:0 1px 18px rgba(10,12,16,.4)}
.scene-copy .sub{max-width:52ch;text-shadow:0 1px 14px rgba(10,12,16,.42)}

/* Estado inicial (solo si GSAP quedó listo; si no carga, nacen visibles) */
.gsap-ready .scene-hero{opacity:0}
.gsap-ready .scene-copy{opacity:0}
/* Variantes de protagonista */
.scene-hero.is-obj img{height:58svh}
.scene-hero .sculptra-float-lbl{left:50%;right:auto;top:56%;transform:translate(-50%,-50%)}
.scene-card{
  position:absolute;z-index:1;left:50%;top:42%;transform:translate(-50%,-50%);margin:0;
  will-change:transform,filter,opacity;
}
.scene-card .card-in{
  display:block;width:min(76vw,540px);aspect-ratio:864/1030;border-radius:24px;overflow:hidden;
  box-shadow:0 42px 84px -20px rgba(10,12,16,.82), 0 0 0 1px rgba(199,203,208,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
.scene-card img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.gsap-ready .scene-card{opacity:0}

/* Antes/Después: MORPH de cortina (mismo cuerpo, la piel se transforma al pasar el barrido) */
.scene-ba .scene-hero{top:50%}
.ba-frame{position:relative;display:block;height:92svh;aspect-ratio:1696/2528;--w:50}
.ba-frame .ba-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 30px 60px rgba(10,12,16,.6));
}
/* la capa "antes" (encima) se recorta desde la izquierda revelando el "después" (debajo) */
.ba-before{clip-path:inset(0 calc(var(--w) * 1%) 0 0)}   /* recorta el "antes" desde la DERECHA → el "después" se revela a la derecha */
.ba-seam{
  position:absolute;top:15%;bottom:3%;left:calc((100 - var(--w)) * 1%);width:2px;transform:translateX(-1px);z-index:3;
  background:var(--grad-metal);box-shadow:0 0 14px rgba(199,203,208,.45);
}
.ba-seam::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);
  background:rgba(28,31,38,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cg fill='none' stroke='%23C7CBD0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2 4 6l4 4'/%3E%3Cpath d='M14 2l4 4-4 4'/%3E%3C/g%3E%3C/svg%3E") center/18px no-repeat;
}
.ba-lbl{
  position:absolute;top:1%;z-index:4;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;background:rgba(28,31,38,.66);border:1px solid rgba(199,203,208,.3);
}
.ba-lbl-a{left:3%;color:var(--text)}                              /* Antes → izquierda */
.ba-lbl-b{right:3%;color:var(--accent);border-color:var(--accent-glow)}  /* Después → derecha */

/* Copy centrado arriba (antes/después) */
.scene-copy-center{top:8svh;bottom:auto;left:0;right:0;max-width:none;text-align:center;padding:0 var(--pad)}
.scene-copy-center .eyebrow{justify-content:center}
.scene-copy-center h2{font-size:clamp(34px,7vw,64px)}
.scene-copy-center .sub{margin:10px auto 0;max-width:44ch}

/* Cierre: tarjeta del doctor dentro del copy */
.scene-cierre .scene-hero img{height:74svh;filter:drop-shadow(0 40px 80px rgba(10,12,16,.65)) contrast(1.05) saturate(.93) brightness(1.02)}
.scene-cierre .dr-card{margin-top:16px}

/* 01 · El problema — feather del borde inferior + micro-contraste (SCOPED, no toca el morph) */
section[data-cap="El problema"] .scene-hero img{
  /* el feather del borde inferior ya está horneado en el alpha del asset;
     aquí solo grade cinematográfico + sombra scoped */
  filter:drop-shadow(0 26px 52px rgba(10,12,16,.6)) contrast(1.06) brightness(.99);
}
section[data-cap="El problema"] .scene-pin::after{
  background:linear-gradient(180deg,transparent 42%,rgba(22,25,30,.55) 66%,var(--bg-deep) 96%);
}

/* Fallback estático (sin JS · reduced-motion): escena legible sin scrub */
.no-js .scene,.reduced .scene{height:auto;min-height:100svh}
.no-js .scene-pin,.reduced .scene-pin{position:relative}
.no-js .scene-hero,.reduced .scene-hero,.no-js .scene-card,.reduced .scene-card{opacity:1!important;filter:none!important}
.no-js .scene-copy,.reduced .scene-copy{opacity:1!important}

/* ============================================================
   FONDOS POR CAPÍTULO — variación tonal del feed (rompe el "solo navy")
   Familia oscura (texto claro legible): navy(def)/charcoal/slate/warm
   + texturas raster (crestas, blobs) y anillos hairline vectoriales.
   ============================================================ */
.scene[data-bg="charcoal"] .scene-pin{background:radial-gradient(130% 95% at 50% 40%, #20232a 0%, #16181d 55%, #0f1116 100%)}
.scene[data-bg="slate"]    .scene-pin{background:radial-gradient(130% 95% at 50% 42%, #383d47 0%, #2b303a 55%, #212632 100%)}
.scene[data-bg="warm"]     .scene-pin{background:radial-gradient(130% 95% at 50% 42%, #2b2926 0%, #201e1a 55%, #16140f 100%)}
/* respiro cálido ELEVADO (pago: Resultado) — más luminoso pero aún legible con scrim */
.scene[data-bg="lift"]     .scene-pin{background:radial-gradient(135% 100% at 50% 38%, #524b40 0%, #3e382f 52%, #2c271f 100%)}
/* motivo hairline cálido firma para los capítulos warm — Progresivos espejeado + un punto más luminoso (culmen) */
.scene[data-bg="warm"][data-cap="Anestesia"] .scene-pin{
  background:
    repeating-radial-gradient(circle at 74% 28%, transparent 0 48px, rgba(214,198,176,.055) 48px 49px, transparent 49px 96px),
    radial-gradient(130% 95% at 50% 42%, #2b2926 0%, #201e1a 55%, #16140f 100%);
}
.scene[data-bg="warm"][data-cap="Progresivos"] .scene-pin{
  background:
    repeating-radial-gradient(circle at 28% 70%, transparent 0 52px, rgba(216,201,180,.06) 52px 53px, transparent 53px 104px),
    radial-gradient(135% 100% at 50% 40%, #332f28 0%, #252118 55%, #17140f 100%);
}
/* velo cálido sobre la ilustración de las tarjetas WARM (Anestesia/Progresivos):
   templa el fondo interior frío de la imagen para que comparta temperatura con el marco cálido */
.scene[data-bg="warm"] .scene-card .card-in{position:relative}
.scene[data-bg="warm"] .scene-card .card-in::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg, rgba(94,70,44,.17), rgba(66,48,32,.24));
}

/* ============================================================
   REFINAMIENTOS DE INTERACTIVIDAD — pulsos, líneas vivas, ken burns, partículas
   ============================================================ */
@keyframes flowdash{to{stroke-dashoffset:-9}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.055)}}
@keyframes driftup{to{transform:translate3d(0,-20px,0)}}
@keyframes linepulse{0%,100%{opacity:.42}50%{opacity:1}}

/* Item 2 — callouts de dermis (Epidermis/Dermis/Grasa/Septo): punto con pulso + línea que late */
.callout .c-dot{position:relative}
.callout .c-dot::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;
  border-radius:50%;border:1.5px solid var(--accent);pointer-events:none;
  animation:ppulse 2.2s var(--ease-out) infinite;
}
.callout .c-line{animation:linepulse 2.4s ease-in-out infinite}

/* Item 4 — conectores de pilares: dash fluyendo del frasco hacia las tarjetas */
.pil-connectors line{stroke-dasharray:2 6;animation:flowdash 1.3s linear infinite}
.pil-connectors line:nth-of-type(2){animation-delay:.18s}
.pil-connectors line:nth-of-type(3){animation-delay:.36s}
.pil-connectors line:nth-of-type(4){animation-delay:.54s}

/* Item 5 — imágenes de cuerpo/escena con leve ken burns (dejan de verse estáticas) */
.scene-hero:not(.is-obj):not(.ba-morph) img{animation:kenburns 15s ease-in-out infinite alternate;transform-origin:50% 42%}
.scene-card img{animation:kenburns 17s ease-in-out infinite alternate}

/* Item 6 — Sculptra: campo de partículas flotando detrás del frasco (splash) */
section[data-cap="Sculptra"] .scene-atmos::before,
section[data-cap="Sculptra"] .scene-atmos::after{content:"";position:absolute;inset:-8% 0;pointer-events:none}
section[data-cap="Sculptra"] .scene-atmos::before{
  background-image:
    radial-gradient(4.4px 4.4px at 16% 24%, rgba(212,216,222,.95), transparent 60%),
    radial-gradient(5px 5px at 80% 38%, rgba(212,216,222,.88), transparent 60%),
    radial-gradient(3.6px 3.6px at 60% 14%, rgba(212,216,222,.88), transparent 60%),
    radial-gradient(4.4px 4.4px at 30% 60%, rgba(212,216,222,.82), transparent 60%),
    radial-gradient(3.8px 3.8px at 74% 72%, rgba(212,216,222,.8), transparent 60%),
    radial-gradient(4.8px 4.8px at 44% 88%, rgba(212,216,222,.78), transparent 60%),
    radial-gradient(3.6px 3.6px at 10% 74%, rgba(212,216,222,.78), transparent 60%),
    radial-gradient(4.2px 4.2px at 90% 84%, rgba(212,216,222,.72), transparent 60%),
    radial-gradient(3.2px 3.2px at 52% 46%, rgba(212,216,222,.72), transparent 60%);
  animation:driftup 12s ease-in-out infinite alternate;
}
section[data-cap="Sculptra"] .scene-atmos::after{
  background-image:
    radial-gradient(2.6px 2.6px at 26% 36%, rgba(212,216,222,.62), transparent 60%),
    radial-gradient(3px 3px at 55% 54%, rgba(212,216,222,.54), transparent 60%),
    radial-gradient(2.6px 2.6px at 86% 28%, rgba(212,216,222,.5), transparent 60%),
    radial-gradient(3px 3px at 40% 22%, rgba(212,216,222,.56), transparent 60%),
    radial-gradient(2.6px 2.6px at 66% 88%, rgba(212,216,222,.5), transparent 60%),
    radial-gradient(2.6px 2.6px at 20% 52%, rgba(212,216,222,.5), transparent 60%);
  filter:blur(.7px);animation:driftup 18s ease-in-out infinite alternate-reverse;
}
/* ADN / cadena de agua orgánica: COLUMNA COMPLETA centrada detrás del frasco (de arriba abajo) */
.sculptra-adn{
  position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  height:104svh;width:auto;z-index:0;margin:0;pointer-events:none;opacity:.62;
}
.js .sculptra-adn{opacity:0} /* oculto hasta la animación de entrada (fallback sin JS: visible) */
.sculptra-adn.adn-in{animation:adnIn 1.8s var(--ease-out) forwards}
@keyframes adnIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.82) rotate(-6deg)}
  to{opacity:.62;transform:translate(-50%,-50%) scale(1) rotate(0deg)}
}
.sculptra-adn img{height:100%;width:auto;display:block;
  filter:drop-shadow(0 0 36px rgba(199,203,208,.22)) contrast(1.08);
  animation:floaty 11s ease-in-out infinite} /* vida continua sin pelear con la entrada del figure */

/* Resultado — respiro cálido elevado + scrim (el copy cae sobre piel iluminada) */
section[data-cap="Resultado"] .scene-pin::after{
  background:linear-gradient(180deg,transparent 38%,rgba(30,25,19,.58) 60%,#221d16 96%);
}
/* Cierre — charcoal + crestas sutil (bookend con la portada) */
section[data-cap="El especialista"] .scene-pin{
  background:
    linear-gradient(rgba(18,20,26,.66),rgba(15,17,22,.80)),
    url("../assets/img/bg-crestas.png") 30% 24% / cover no-repeat,
    radial-gradient(130% 95% at 50% 42%, #22262e 0%, #181b21 55%, #101217 100%);
}
/* Antes · Después — slate + anillos hairline (medición/resultado) */
section[data-cap="Antes · Después"] .scene-pin{
  background:
    repeating-radial-gradient(circle at 50% 46%, transparent 0 58px, rgba(199,203,208,.055) 58px 59px, transparent 59px 112px),
    radial-gradient(130% 95% at 50% 42%, #383d47 0%, #2b303a 55%, #212632 100%);
}
/* scrim superior: el copy centrado arriba cae sobre la espalda del cuerpo entero → legible */
section[data-cap="Antes · Después"] .scene-pin::before{
  content:"";position:absolute;top:0;left:0;right:0;height:36svh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,23,30,.76) 0%,rgba(20,23,30,.44) 46%,transparent 100%);
}

/* ============================================================
   LEGIBILIDAD EN TABLET (auditoría) — pisos de tamaño + contraste
   Micro-labels ≥13px, copy secundario ≥14–16px, y subir el alpha .58→.72+
   donde el bajo contraste amplificaba la sensación de "pequeño".
   ============================================================ */
.step-of   { font-size:13px; color:rgba(244,240,233,.82); }
.meta-tag  { font-size:13px; color:rgba(244,240,233,.72); }
.fase-tag  { font-size:13px; color:rgba(244,240,233,.72); }
.eyebrow, .hero-eyebrow { font-size:13px; }
.cap-light .eyebrow { font-size:13px; }
.ba-lbl, .ba-tag { font-size:12.5px; }
.hero-sub  { font-size:clamp(17px,2.6vw,21px); color:rgba(244,240,233,.9); }
.hint      { font-size:13px; color:rgba(244,240,233,.75); }
.step-desc,
.depth-copy .step-desc { font-size:clamp(16px,2.5vw,20px); color:rgba(244,240,233,.72); }
.dr-card strong{ font-size:17px; }
.dr-card span  { font-size:14.5px; color:rgba(244,240,233,.72); }
.next-d        { font-size:14px; color:rgba(244,240,233,.72); }
.ba-foot       { font-size:14px; color:rgba(244,240,233,.72); }
.tp-txt b      { font-size:15px; }
.tp-txt span   { font-size:13px; color:rgba(244,240,233,.72); }
.meta-num      { font-size:15px; }
.dstep .sub  { font-size:clamp(16px,2.3vw,19px); }
.assure-a    { font-size:clamp(16px,2.1vw,18px); }
.c-text      { font-size:clamp(12px,1.7vw,14px); }
@media(max-width:520px){
  .tp-txt b   { font-size:14px; }
  .tp-txt span{ font-size:12.5px; }
}

/* ---- Accesibilidad de movimiento ---- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none}
}