/* =========================================================
   Lumen Clinic — plantilla de ejemplo de differentissgood
   Medicina estética. «Luz propia»: noche ciruela, rubor de piel,
   nácar y oro rosa. Las secciones alternan oscuro y claro con
   data-tema; la cabecera cambia de color según lo que tiene debajo.
   Vídeos del rodaje de belleza del estudio: miden 720×404, así que
   van pequeños (el orbe, las piezas de «Dentro de Lumen», ≤ 340 px)
   o desenfocados como ambiente; nunca grandes y nítidos. Fotos
   (760–1100 px): el arco y las tarjetas, ≤ 420 px de ancho.
   ========================================================= */
:root{
  --noche:#170f13; --ciruela:#2c1a23; --ciruela-2:#46293a;
  --rubor:#f3ddd3; --rubor-2:#ead0c4; --nacar:#fbf6f1;
  --oro:#e3ae91; --oro-2:#c78a6c; --oro-osc:#9a5f45;
  --tinta:#2a1820; --tinta-2:#6e5560; --tenue:#9a8189;
  --linea:rgba(42,24,32,.14); --linea-o:rgba(251,246,241,.16);
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --texto:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  --firma:"Mrs Saint Delafield","Snell Roundhand","Brush Script MT",cursive;
  --curva:cubic-bezier(.22,1,.36,1); --telon:cubic-bezier(.77,0,.18,1);
  --ancho:1260px; --margen:clamp(20px,5vw,76px);
  color-scheme:light;
}
@view-transition{navigation:auto;}
::view-transition-old(root){animation:lu-sale .4s ease both;}
::view-transition-new(root){animation:lu-entra .7s var(--curva) both;}
@keyframes lu-sale{to{opacity:0;}}
@keyframes lu-entra{from{opacity:0;}}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--nacar); color:var(--tinta); font-family:var(--texto); font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img,video{display:block; max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--display); font-weight:300; margin:0; line-height:1; letter-spacing:-.02em; text-wrap:balance; font-variation-settings:"opsz" 144;}
h1 em,h2 em,h3 em,p em{font-style:italic; font-weight:300;}
p{margin:0;}
:focus-visible{outline:2px solid var(--oro-2); outline-offset:3px; border-radius:6px;}
.env{max-width:var(--ancho); margin:0 auto; padding-inline:var(--margen);}
.eti{display:inline-flex; align-items:center; gap:12px; font-size:.7rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--oro-osc);}
.eti::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px color-mix(in srgb,currentColor 18%,transparent);}

/* Temas de sección */
h1 em,h2 em,h3 em{color:var(--oro-osc);}
[data-tema="noche"]{background:var(--noche); color:var(--nacar);}
[data-tema="noche"] .eti,[data-tema="ciruela"] .eti{color:var(--oro);}
[data-tema="noche"] h1 em,[data-tema="noche"] h2 em,[data-tema="noche"] h3 em,[data-tema="ciruela"] h2 em{color:var(--oro);}
[data-tema="ciruela"]{background:var(--ciruela); color:var(--nacar);}
[data-tema="rubor"]{background:var(--rubor);}

/* ---------- Botones ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; overflow:hidden; isolation:isolate;
  padding:17px 30px; border-radius:100px; font:600 .78rem var(--texto); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:0; background:linear-gradient(135deg,var(--oro),var(--oro-2)); color:var(--noche); box-shadow:0 18px 40px -18px rgba(199,138,108,.9);
  transition:transform .5s var(--curva), box-shadow .5s;}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%);}
.btn:hover::before{transition:transform .9s var(--curva); transform:translateX(120%);}
.btn:hover{box-shadow:0 22px 50px -16px rgba(199,138,108,1);}
.btn svg{width:15px; height:15px; transition:transform .45s var(--curva);}
.btn:hover svg{transform:translateX(4px);}
.enlace{display:inline-flex; align-items:center; gap:10px; font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding-bottom:4px; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .5s var(--curva);}
.enlace:hover{background-size:0 1px; background-position:100% 100%;}
.enlace svg{width:14px; height:14px;}

/* ---------- Volver a los ejemplos ---------- */
.dig-volver{position:fixed; top:14px; left:14px; z-index:120; display:inline-flex; align-items:center; gap:8px; padding:0 15px 0 11px; height:38px;
  border-radius:100px; background:rgba(15,15,15,.72); color:#fff; text-decoration:none; font:500 13px -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(0,0,0,.2); transition:background .25s, transform .25s;}
.dig-volver:hover{background:rgba(15,15,15,.92); transform:translateX(-2px);}
.dig-volver svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- Cabecera: cambia de color según lo que tiene debajo ---------- */
.cab{position:fixed; top:0; left:0; right:0; z-index:100; color:var(--tinta); transition:transform .6s var(--curva), color .5s, background .5s;}
.cab.sobre-oscuro{color:var(--nacar);}
.cab.solida{background:color-mix(in srgb,var(--nacar) 82%,transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);}
.cab.solida.sobre-oscuro{background:color-mix(in srgb,var(--noche) 70%,transparent);}
.cab.oculta{transform:translateY(-100%);}
.cab__in{max-width:var(--ancho); margin:0 auto; padding:18px var(--margen); display:flex; align-items:center; gap:28px;}
.marca{display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-left:96px;}
@media (min-width:1440px){.marca{margin-left:0;}}
.marca i{width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff7f0,var(--oro) 55%,var(--oro-2)); box-shadow:0 0 18px color-mix(in srgb,var(--oro) 70%,transparent);}
.marca b{font-family:var(--display); font-weight:400; font-size:1.6rem; line-height:1; letter-spacing:-.02em;}
.marca span{font-size:.56rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase; opacity:.7;}
.menu{display:flex; gap:32px; margin-left:auto; list-style:none; padding:0; margin-block:0;}
.menu a{position:relative; font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; opacity:.75; transition:opacity .3s;}
.menu a::after{content:""; position:absolute; left:50%; bottom:-10px; width:5px; height:5px; border-radius:50%; background:var(--oro); translate:-50% 0; transform:scale(0); transition:transform .4s var(--curva);}
.menu a:hover,.menu a[aria-current="page"]{opacity:1;}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scale(1);}
.cab .btn{padding:12px 20px; font-size:.68rem;}
.hamb{display:none; margin-left:auto; width:46px; height:46px; border:0; background:none; cursor:pointer; position:relative; color:inherit;}
.hamb i{position:absolute; left:11px; right:11px; height:1.5px; background:currentColor; transition:transform .5s var(--curva), top .5s var(--curva);}
.hamb i:first-child{top:19px;} .hamb i:last-child{top:27px;}
.menu-abierto .hamb i:first-child{top:23px; transform:rotate(45deg);} .menu-abierto .hamb i:last-child{top:23px; transform:rotate(-45deg);}
.menu-abierto .cab{color:var(--nacar);}
.capa{position:fixed; inset:0; z-index:99; background:radial-gradient(80% 60% at 80% 20%,var(--ciruela-2),var(--noche) 70%); color:var(--nacar);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--margen); clip-path:circle(0% at 92% 4%); transition:clip-path .9s var(--telon); visibility:hidden;}
.menu-abierto .capa{clip-path:circle(150% at 92% 4%); visibility:visible;}
.capa a{font-family:var(--display); font-weight:300; font-size:clamp(2.6rem,11vw,4.2rem); line-height:1.12; text-decoration:none; opacity:0; transform:translateY(24px); transition:opacity .6s, transform .8s var(--curva);}
.capa a em{color:var(--oro);}
.menu-abierto .capa a{opacity:1; transform:none;}
.capa a:nth-child(2){transition-delay:.06s;} .capa a:nth-child(3){transition-delay:.12s;} .capa a:nth-child(4){transition-delay:.18s;} .capa a:nth-child(5){transition-delay:.24s;}
.capa p{margin-top:40px; opacity:.6; font-size:.85rem;}
@media (max-width:960px){ .menu,.cab .btn{display:none;} .hamb{display:block;} .marca{margin-left:92px;} }

/* ---------- Aparecer ---------- */
.anim .rv{opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--curva), transform 1.2s var(--curva); transition-delay:var(--d,0ms);}
.anim .rv.visto{opacity:1; transform:none;}
.lin{display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em;}
.lin > span{display:block;}
.anim .lin > span{transform:translateY(110%) rotate(3deg); transform-origin:0 100%; transition:transform 1.3s var(--telon); transition-delay:var(--d,0ms);}
.anim .visto .lin > span,.anim .lin.visto > span{transform:none;}

/* ---------- Luz que sigue al cursor (secciones oscuras) ---------- */
.con-luz{position:relative; overflow:hidden; isolation:isolate;}
.con-luz::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 520px at var(--lx,70%) var(--ly,40%), color-mix(in srgb,var(--oro) 24%,transparent), transparent 70%);}

/* ---------- Portada ---------- */
.portada{min-height:max(100svh,700px); display:flex; align-items:center; padding:130px 0 90px;
  background:radial-gradient(70% 70% at 80% 30%,var(--ciruela-2),transparent 70%),radial-gradient(60% 60% at 0% 100%,#3a1f2b,transparent 70%),var(--noche);}
.portada .env{width:100%; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(40px,6vw,100px); align-items:center;}
.portada h1{font-size:clamp(4rem,10vw,9rem); line-height:.92; margin-top:28px;}
.portada__txt p{margin-top:30px; max-width:40ch; font-size:1.12rem; color:color-mix(in srgb,var(--nacar) 78%,transparent);}
.portada__acc{display:flex; flex-wrap:wrap; align-items:center; gap:22px 30px; margin-top:42px;}
.arco{position:relative; width:min(100%,420px); justify-self:center;}
.arco__marco{position:relative; aspect-ratio:3/4.1; border-radius:300px 300px 26px 26px; overflow:hidden; background:var(--ciruela); z-index:1;}
.arco__marco img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease, transform 9s linear; transform:scale(1.05);}
.arco__marco .on{opacity:1; transform:scale(1);}
.arco__marco::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(23,15,19,.5)); pointer-events:none;}
.halo{position:absolute; inset:-14%; z-index:0; border-radius:50%; background:conic-gradient(from 0deg,transparent,var(--oro) 20%,transparent 40%,#b76d8e 60%,transparent 80%); filter:blur(48px); opacity:.55; animation:lu-gira 14s linear infinite;}
@keyframes lu-gira{to{rotate:360deg;}}
.arco__pie{position:absolute; left:-36px; bottom:46px; z-index:2; padding:16px 20px; border-radius:18px; background:color-mix(in srgb,var(--nacar) 92%,transparent); color:var(--tinta);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); display:grid; gap:2px;}
.arco__pie small{font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--oro-osc);}
.arco__pie b{font-family:var(--display); font-weight:400; font-size:1.3rem;}
.arco__puntos{position:absolute; right:-28px; top:50%; translate:0 -50%; z-index:2; display:grid; gap:10px;}
.arco__puntos i{width:6px; height:6px; border-radius:50%; background:var(--nacar); opacity:.3; transition:opacity .4s, transform .4s;}
.arco__puntos i.on{opacity:1; transform:scale(1.5); background:var(--oro);}
/* Orbe: vídeo pequeño con un aro de texto que gira */
.orbe{position:absolute; left:-92px; bottom:28px; z-index:3; width:212px; aspect-ratio:1; display:grid; place-items:center; text-decoration:none; color:var(--nacar); border-radius:50%;}
.orbe::before{content:""; position:absolute; inset:0; border-radius:50%; background:color-mix(in srgb,var(--noche) 62%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 0 0 1px var(--linea-o),0 30px 60px -25px rgba(0,0,0,.7);}
.orbe__aro{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.anim .orbe__aro{animation:lu-gira 26s linear infinite;}
.orbe__aro text{font:600 10.4px var(--texto); letter-spacing:.3em; text-transform:uppercase; fill:currentColor;}
.orbe__vid{position:relative; width:62%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--ciruela); box-shadow:0 0 0 1px color-mix(in srgb,var(--oro) 55%,transparent),0 0 34px color-mix(in srgb,var(--oro) 45%,transparent); transition:transform .8s var(--curva);}
.orbe__vid video{width:100%; height:100%; object-fit:cover;}
.orbe__vid::after{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 22px rgba(23,15,19,.55);}
.orbe:hover .orbe__vid{transform:scale(1.07);}
@media (max-width:900px){
  .portada{padding-top:110px;}
  .portada .env{grid-template-columns:1fr;}
  .arco{width:min(86%,360px);}
  .arco__pie{left:-14px; bottom:24px;}
  .arco__puntos{right:-18px;}
  .orbe{width:164px; left:-34px; bottom:-26px;}
  .orbe__aro text{font-size:11.4px;}
}

/* Cinta en movimiento */
.cinta{overflow:hidden; padding:22px 0; background:var(--ciruela); color:var(--oro); border-block:1px solid var(--linea-o);}
.cinta__pista{display:flex; width:max-content; animation:lu-cinta 38s linear infinite;}
.cinta span{font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(1.4rem,2.6vw,2.2rem); white-space:nowrap; padding-right:2.4rem;}
.cinta span::after{content:"✦"; font-style:normal; font-size:.6em; margin-left:2.4rem; color:var(--nacar); opacity:.5; vertical-align:middle;}
@keyframes lu-cinta{to{transform:translateX(-50%);}}

/* ---------- Secciones ---------- */
.sec{padding:clamp(90px,13vw,170px) 0;}
.sec__cab{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px 40px; margin-bottom:60px;}
.sec__cab h2{font-size:clamp(2.8rem,6vw,5.2rem); margin-top:20px; max-width:15ch;}
.sec__cab p{max-width:40ch; opacity:.8;}

/* ¿Cómo te sientes al mirarte? */
.siente{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,90px); align-items:start;}
.siente h2{font-size:clamp(2.8rem,6vw,5rem); margin-top:20px;}
.siente__ops{display:grid; gap:12px; margin-top:40px;}
.sop{display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; padding:22px 26px; border-radius:100px; border:1px solid var(--linea);
  background:color-mix(in srgb,var(--nacar) 55%,transparent); font:300 1.5rem var(--display); color:var(--tinta); cursor:pointer; text-align:left;
  transition:background .4s, color .4s, transform .5s var(--curva), border-color .4s;}
.sop small{font:600 .66rem var(--texto); letter-spacing:.2em; text-transform:uppercase; opacity:.55;}
.sop:hover{transform:translateX(8px); border-color:var(--oro-2);}
.sop[aria-pressed="true"]{background:var(--noche); color:var(--nacar); border-color:var(--noche);}
.siente__resp{position:sticky; top:120px; padding:clamp(28px,4vw,48px); border-radius:34px; background:var(--noche); color:var(--nacar); min-height:420px; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;}
.siente__resp::before{content:""; position:absolute; width:340px; height:340px; right:-120px; top:-120px; z-index:-1; border-radius:50%; background:radial-gradient(circle,var(--oro),transparent 65%); opacity:.45; filter:blur(10px); animation:lu-respira 6s ease-in-out infinite;}
@keyframes lu-respira{50%{transform:scale(1.15); opacity:.6;}}
.siente__resp > *{transition:opacity .45s, transform .6s var(--curva);}
.siente__resp.cambia > *{opacity:0; transform:translateY(12px);}
.siente__resp small{font-size:.66rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--oro);}
.siente__resp h3{font-size:clamp(2rem,3.6vw,3rem); margin-top:16px;}
.siente__resp h3 em{color:var(--oro);}
.siente__resp p{margin-top:16px; opacity:.8; max-width:40ch;}
.siente__plan{margin-top:auto; padding-top:26px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--linea-o);}
.siente__plan span{font-family:var(--display); font-size:1.3rem;}
@media (max-width:900px){.siente{grid-template-columns:1fr;} .siente__resp{position:relative; top:0; min-height:0;} .siente__plan{margin-top:30px;} .sop{font-size:1.25rem; padding:18px 22px;}}

/* Tratamientos en horizontal al bajar */
.horiz{position:relative;}
.horiz__fijo{position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
.horiz__pista{display:flex; gap:26px; padding-inline:var(--margen); will-change:transform;}
.horiz__intro{flex:0 0 min(420px,80vw); display:flex; flex-direction:column; justify-content:center;}
.horiz__intro h2{font-size:clamp(2.8rem,5.4vw,4.8rem); margin-top:20px;}
.horiz__intro p{margin-top:20px; opacity:.75; max-width:32ch;}
.tarj{position:relative; flex:0 0 min(380px,78vw); aspect-ratio:3/4.3; border-radius:30px; overflow:hidden; text-decoration:none; color:var(--nacar); isolation:isolate;}
.tarj img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--curva);}
.tarj::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(23,15,19,.05) 30%,rgba(23,15,19,.85));}
.tarj:hover img{transform:scale(1.05);}
.tarj__in{position:absolute; inset:auto 0 0 0; padding:28px; display:grid; gap:8px;}
.tarj__n{font-family:var(--display); font-style:italic; font-size:1.1rem; color:var(--oro);}
.tarj h3{font-size:2.1rem;}
.tarj p{font-size:.92rem; opacity:.8;}
.tarj__pie{display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:14px; border-top:1px solid var(--linea-o); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;}
.tarj__pie i{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--nacar); color:var(--noche); transition:transform .5s var(--curva), background .4s;}
.tarj__pie i svg{width:15px; height:15px;}
.tarj:hover .tarj__pie i{transform:rotate(-45deg); background:var(--oro);}
.horiz__barra{position:absolute; left:var(--margen); right:var(--margen); bottom:40px; height:1px; background:var(--linea-o);}
.horiz__barra i{position:absolute; inset:0; background:var(--oro); transform-origin:left; transform:scaleX(var(--p,0));}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .horiz{height:auto !important;}
  .horiz__fijo{position:relative; height:auto; padding:100px 0;}
  .horiz__pista{overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--margen); transform:none !important; padding-bottom:10px; scrollbar-width:none;}
  .horiz__pista::-webkit-scrollbar{display:none;}
  .tarj,.horiz__intro{scroll-snap-align:start;}
  .horiz__barra{display:none;}
}

/* Cita sobre vídeo de ambiente */
.ambiente{position:relative; min-height:88svh; display:grid; place-items:center; text-align:center; overflow:hidden; isolation:isolate; color:var(--nacar); padding:120px 0;}
.ambiente > video{position:absolute; inset:-6%; width:112%; height:112%; max-width:none; object-fit:cover; z-index:-2; filter:blur(14px) saturate(1.2) brightness(.8);}
.ambiente::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 60% at 50% 50%,rgba(44,26,35,.35),rgba(23,15,19,.85));}
.ambiente__frase{font-family:var(--display); font-weight:300; font-size:clamp(2.6rem,6.6vw,6rem); line-height:1.04; letter-spacing:-.02em; max-width:16ch; margin:26px auto 0;}
.ambiente__frase .p{opacity:.2; transition:opacity .5s;}
.ambiente__frase .p.on{opacity:1;}
.ambiente__firma{margin-top:34px; font-size:.86rem; opacity:.7;}

/* «Dentro de Lumen»: vídeos y fotos sueltos alrededor del titular.
   Cada pieza sube a su velocidad (data-v) y flota un poco. Tamaños
   pensados para los clips de 720 px: ninguno pasa de 340 px. */
.dentro{position:relative; min-height:max(780px,100svh); display:grid; place-items:center; padding:140px 0; overflow:hidden; isolation:isolate;
  background:radial-gradient(50% 40% at 50% 50%,color-mix(in srgb,var(--rubor) 70%,transparent),transparent 75%),var(--nacar);}
.dentro__txt{position:relative; z-index:2; text-align:center; max-width:36rem;}
.dentro__txt h2{font-size:clamp(2.8rem,5.6vw,5rem); margin-top:20px;}
.dentro__txt p{margin:24px auto 0; max-width:36ch; font-size:1.08rem; color:var(--tinta-2);}
.dentro__txt .enlace{margin-top:30px;}
.pieza{position:absolute; z-index:1; margin:0; rotate:var(--r,0deg); transition:scale .8s var(--curva);}
.pieza__m{width:100%; height:100%; border-radius:22px; overflow:hidden; background:var(--rubor-2); box-shadow:0 40px 70px -38px rgba(42,24,32,.6),0 0 0 1px rgba(255,255,255,.5) inset;}
.pieza__m video,.pieza__m img{width:100%; height:100%; object-fit:cover;}
.anim .pieza__m{animation:lu-flota 8s ease-in-out infinite alternate; animation-delay:var(--fd,0s);}
@keyframes lu-flota{to{transform:translateY(-16px);}}
.pieza:hover{scale:1.04; z-index:3;}
.pieza figcaption{position:absolute; left:14px; bottom:12px; padding:6px 12px; border-radius:100px; background:color-mix(in srgb,var(--noche) 70%,transparent); color:var(--nacar);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; pointer-events:none;}
.pieza--1{top:7%; left:4%; width:clamp(230px,24vw,340px); aspect-ratio:16/9; --r:-3deg;}
.pieza--2{top:5%; right:9%; width:clamp(140px,13vw,190px); aspect-ratio:3/4; --r:4deg; --fd:-3s;}
.pieza--3{bottom:12%; right:6%; width:clamp(150px,15vw,210px); aspect-ratio:1; --fd:-5s;}
.pieza--3 .pieza__m{border-radius:50%;}
.pieza--3 figcaption{left:50%; bottom:-14px; translate:-50% 0; white-space:nowrap;}
.pieza--4{bottom:7%; left:9%; width:clamp(210px,21vw,300px); aspect-ratio:16/9; --r:2.5deg; --fd:-2s;}
.pieza--5{top:41%; right:3%; width:clamp(150px,12vw,180px); aspect-ratio:4/3; --r:-2deg; --fd:-6s;}
@media (max-width:1100px){.pieza--5{display:none;}}
@media (max-width:900px){
  .dentro{min-height:0; padding:230px 0 250px;}
  .pieza--1{top:40px; left:-24px; width:228px;}
  .pieza--2{top:22px; right:18px; width:112px;}
  .pieza--3{bottom:54px; right:14px; width:132px;}
  .pieza--4{bottom:44px; left:-20px; width:214px;}
  .pieza figcaption{font-size:.56rem; left:10px; bottom:9px;}
  .pieza--1 figcaption,.pieza--4 figcaption{left:34px;}
}

/* Carta de la doctora */
.carta{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,7vw,110px); align-items:center;}
.carta__mono{width:min(100%,360px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; justify-self:center; position:relative;
  background:radial-gradient(circle at 35% 30%,var(--nacar),var(--rubor-2) 70%); box-shadow:inset 0 0 0 1px var(--linea);}
.carta__mono span{font-family:var(--display); font-style:italic; font-weight:300; font-size:7rem; color:var(--oro-osc);}
.carta__mono::after{content:""; position:absolute; inset:-14px; border-radius:50%; border:1px dashed color-mix(in srgb,var(--oro-2) 60%,transparent); animation:lu-gira 50s linear infinite;}
.carta__txt h2{font-size:clamp(2.4rem,4.8vw,4rem); margin-top:20px;}
.carta__txt p{margin-top:20px; font-size:1.08rem; color:var(--tinta-2); max-width:52ch;}
.firma{display:block; margin-top:26px; font-family:var(--firma); font-size:clamp(3.4rem,6vw,4.6rem); line-height:1.1; color:var(--oro-osc);}
.firma > span{display:inline-block; padding:0 .2em .1em 0;}
.anim .firma > span{clip-path:inset(0 100% 0 0); transition:clip-path 2.4s cubic-bezier(.65,0,.35,1) .35s;}
.anim .firma.visto > span{clip-path:inset(-25% -10% -25% 0);}
.firma__cargo{display:block; margin-top:6px; font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--tenue);}
@media (max-width:900px){.carta{grid-template-columns:1fr;} .carta__mono{width:220px;} .carta__mono span{font-size:4.6rem;}}

/* Pasos */
.pasos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px);}
.paso{position:relative; padding:36px 32px 40px; border-radius:30px; background:color-mix(in srgb,var(--nacar) 60%,transparent); border:1px solid var(--linea); transition:transform .6s var(--curva), background .4s;}
.paso:hover{transform:translateY(-8px); background:var(--nacar);}
.paso__n{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--noche); color:var(--oro); font-family:var(--display); font-style:italic; font-size:1.5rem; position:relative; z-index:2;}
/* El hilo que une los tres pasos: se dibuja al llegar */
.pasos{position:relative;}
.pasos::before{content:""; position:absolute; z-index:1; top:65px; left:calc(32px + 29px); right:calc((100% - 2 * clamp(20px,3vw,40px)) / 3 - 61px); height:1px;
  background:linear-gradient(90deg,var(--oro-2),var(--oro) 50%,var(--oro-2)); transform-origin:left;}
.anim .pasos::before{transform:scaleX(0); transition:transform 1.8s var(--telon) .4s;}
.anim .pasos.visto::before{transform:none;}
.paso h3{font-size:2rem; margin-top:28px;}
.paso p{margin-top:12px; color:var(--tinta-2);}
@media (max-width:900px){.pasos{grid-template-columns:1fr;} .pasos::before{display:none;}}

/* Galería de la clínica */
.galeria{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; align-items:end;}
.galeria figure{margin:0; border-radius:26px; overflow:hidden; position:relative; max-width:550px;}
.galeria img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--curva);}
.galeria figure:hover img{transform:scale(1.05);}
.galeria figure:nth-child(1){grid-column:1/5; aspect-ratio:3/4;}
.galeria figure:nth-child(2){grid-column:5/10; aspect-ratio:4/3;}
.galeria figure:nth-child(3){grid-column:10/13; aspect-ratio:3/4.4;}
.galeria figcaption{position:absolute; left:16px; bottom:14px; padding:6px 12px; border-radius:100px; background:color-mix(in srgb,var(--nacar) 85%,transparent); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;}
@media (max-width:760px){.galeria{grid-template-columns:1fr 1fr;} .galeria figure:nth-child(n){grid-column:auto; aspect-ratio:3/4;} .galeria figure:nth-child(2){grid-column:1/-1; aspect-ratio:4/3;}}

/* Llamada final */
.final{position:relative; text-align:center; padding:clamp(110px,15vw,200px) 0; overflow:hidden; isolation:isolate;}
.final::after{content:""; position:absolute; left:50%; top:52%; width:min(80vw,760px); aspect-ratio:1; translate:-50% -50%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--oro) 50%,transparent),transparent 62%); filter:blur(20px); animation:lu-respira 7s ease-in-out infinite;}
.final h2{font-size:clamp(3.2rem,8vw,7.4rem); max-width:13ch; margin:26px auto 0;}
.final p{margin:24px auto 0; max-width:42ch; opacity:.8;}
.final .btn{margin-top:44px;}

/* Pie */
.pie{background:var(--noche); color:color-mix(in srgb,var(--nacar) 75%,transparent); padding:80px 0 40px; font-size:.9rem; border-top:1px solid var(--linea-o);}
.pie__grande{font-family:var(--display); font-weight:300; font-size:clamp(4rem,15vw,13rem); line-height:.85; letter-spacing:-.04em; color:var(--nacar);}
.pie__grande em{color:var(--oro); font-style:italic;}
.pie__rej{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-top:60px;}
.pie h4{font-family:var(--texto); font-size:.66rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--oro); margin-bottom:14px;}
.pie a{text-decoration:none;} .pie a:hover{color:var(--nacar);}
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.pie__base{margin-top:56px; padding-top:24px; border-top:1px solid var(--linea-o); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.78rem; opacity:.7;}
.pie__base b{color:var(--nacar); font-weight:600;}
@media (max-width:860px){.pie__rej{grid-template-columns:1fr 1fr;}}

/* ---------- Páginas interiores ---------- */
.titular{padding:170px 0 90px; background:radial-gradient(60% 80% at 85% 20%,var(--ciruela-2),transparent 70%),var(--noche);}
.titular .env{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(30px,6vw,90px); align-items:end;}
.titular h1{font-size:clamp(3.4rem,8vw,7rem); margin-top:24px;}
.titular p{margin-top:26px; max-width:46ch; font-size:1.1rem; opacity:.8;}
.titular .arco{width:min(100%,320px);}
.miga{font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.6;}
.miga a{text-decoration:none;} .miga a:hover{opacity:1;}
@media (max-width:900px){.titular .env{grid-template-columns:1fr;} .titular .arco{width:min(70%,280px); justify-self:start;}}

.datos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.dato{padding:22px 24px; border-radius:22px; background:var(--rubor);}
.dato small{display:block; font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-osc);}
.dato b{display:block; margin-top:8px; font-family:var(--display); font-weight:400; font-size:1.45rem; line-height:1.15;}
@media (max-width:760px){.datos{grid-template-columns:1fr 1fr;}}
.cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,6vw,90px); margin-top:80px;}
.cols h2{font-size:clamp(2rem,3.6vw,2.8rem);}
.lista{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; counter-reset:l;}
.lista li{display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; align-items:start; color:var(--tinta-2);}
.lista li::before{content:counter(l); counter-increment:l; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--noche); color:var(--oro); font-family:var(--display); font-style:italic; font-size:1rem;}
.lista--pt li::before{content:""; width:9px; height:9px; margin:.55em 0 0 12px; background:var(--oro-2);}
@media (max-width:860px){.cols{grid-template-columns:1fr;}}
.faq{margin-top:24px; border-top:1px solid var(--linea);}
.faq details{border-bottom:1px solid var(--linea);}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font-family:var(--display); font-size:1.5rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary i{position:relative; width:34px; height:34px; border-radius:50%; flex:none; border:1px solid var(--linea); transition:background .4s, transform .6s var(--curva);}
.faq summary i::before,.faq summary i::after{content:""; position:absolute; left:10px; right:10px; top:50%; height:1px; background:var(--tinta); transition:transform .5s var(--curva);}
.faq summary i::after{transform:rotate(90deg);}
.faq details[open] summary i{background:var(--oro); transform:rotate(180deg); border-color:var(--oro);}
.faq details[open] summary i::after{transform:rotate(0);}
.faq details p{padding:0 0 24px; color:var(--tinta-2); max-width:62ch;}
.anim .faq details[open] p{animation:lu-abre .6s var(--curva);}
@keyframes lu-abre{from{opacity:0; transform:translateY(-8px);}}
.clip{position:relative; margin:34px 0 0; width:min(100%,340px); aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:var(--rubor-2); box-shadow:0 30px 60px -34px rgba(42,24,32,.55);}
.clip video{width:100%; height:100%; object-fit:cover;}
@media (max-width:600px){.clip{width:250px;}}
.clip figcaption{position:absolute; left:14px; bottom:12px; padding:6px 12px; border-radius:100px; background:color-mix(in srgb,var(--noche) 70%,transparent); color:var(--nacar); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;}
.aviso-medico{margin-top:24px; font-size:.8rem; color:var(--tenue); max-width:60ch;}
.siguiente{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:46px 0; text-decoration:none; border-top:1px solid var(--linea);}
.siguiente small{display:block; font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--tenue);}
.siguiente b{font-family:var(--display); font-weight:300; font-size:clamp(2rem,5vw,4rem);}
.siguiente i{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--noche); color:var(--oro); transition:transform .6s var(--curva); flex:none;}
.siguiente i svg{width:20px; height:20px;}
.siguiente:hover i{transform:rotate(-45deg) scale(1.08);}

/* Equipo */
.medicos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;}
.medico{padding:34px 28px; border-radius:30px; background:var(--ciruela); color:var(--nacar); border:1px solid var(--linea-o); transition:transform .6s var(--curva);}
.medico:hover{transform:translateY(-8px);}
.monograma{display:grid; place-items:center; width:84px; height:84px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff1e8,var(--oro) 60%,var(--oro-2)); color:var(--noche); font-family:var(--display); font-style:italic; font-size:1.8rem;}
.medico h3{font-size:1.7rem; margin-top:26px;}
.medico small{display:block; margin-top:6px; font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--oro);}
.medico p{margin-top:14px; opacity:.75; font-size:.95rem;}
@media (max-width:1000px){.medicos{grid-template-columns:1fr 1fr;}} @media (max-width:600px){.medicos{grid-template-columns:1fr;}}
.horario{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.horario div{padding:26px; border-radius:24px; background:var(--nacar);}
.horario small{font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-osc);}
.horario b{display:block; margin-top:8px; font-family:var(--display); font-weight:400; font-size:1.5rem;}
@media (max-width:760px){.horario{grid-template-columns:1fr;}}

/* ---------- Valoración ---------- */
.valor-sec{background:radial-gradient(60% 50% at 90% 0%,var(--ciruela-2),transparent 70%),var(--noche); color:var(--nacar); padding:150px 0 120px; min-height:100svh;}
.valor{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,7vw,110px); align-items:start;}
.valor h1{font-size:clamp(3.4rem,7vw,6rem); margin-top:24px;}
.valor h1 em{color:var(--oro);}
.valor__lado > p{margin-top:24px; opacity:.8; max-width:38ch;}
.valor__lado ul{list-style:none; margin:32px 0 0; padding:0; display:grid; gap:14px;}
.valor__lado li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; opacity:.85;}
.valor__lado li::before{content:"✦"; color:var(--oro);}
.form{position:relative; padding:clamp(28px,4vw,50px); border-radius:34px; background:var(--nacar); color:var(--tinta); box-shadow:0 60px 120px -60px rgba(0,0,0,.8);}
.progreso{display:flex; gap:8px; margin-bottom:34px;}
.progreso i{flex:1; height:3px; border-radius:3px; background:var(--linea); position:relative; overflow:hidden;}
.progreso i::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--oro),var(--oro-2)); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--curva);}
.progreso i.on::after{transform:none;}
.fase[hidden]{display:none;}
.anim .fase{animation:lu-fase .7s var(--curva);}
@keyframes lu-fase{from{opacity:0; transform:translateX(18px);}}
.fase h2{font-size:clamp(2rem,3.2vw,2.6rem);}
.fase > p{margin-top:10px; color:var(--tinta-2); font-size:.95rem;}
.opciones{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.op{padding:13px 20px; border-radius:100px; border:1px solid var(--linea); background:var(--rubor); font:500 .9rem var(--texto); color:var(--tinta); cursor:pointer; transition:background .3s, color .3s, transform .4s var(--curva);}
.op:hover{transform:translateY(-2px);}
.op[aria-pressed="true"]{background:var(--noche); color:var(--nacar); border-color:var(--noche);}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; margin-top:26px;}
.campo{display:grid; gap:6px;}
.campo--ancho{grid-column:1/-1;}
.campo span{font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--tenue);}
.campo :is(input,textarea){font:400 1.02rem var(--texto); color:var(--tinta); background:transparent; border:0; border-bottom:1px solid var(--linea); padding:10px 0; border-radius:0; resize:vertical;}
.campo :is(input,textarea):focus{outline:none; border-bottom-color:var(--oro-2);}
.campo [aria-invalid="true"]{border-bottom-color:#b4513f;}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tenue);}
.sub{margin-top:30px; font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--tenue);}
.sub + .opciones{margin-top:12px;}
.consent{display:flex; gap:12px; align-items:flex-start; margin-top:26px; font-size:.86rem; color:var(--tinta-2);}
.consent input{margin-top:.3em; accent-color:var(--oro-2);}
.acciones{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:36px;}
.atras{background:none; border:0; padding:0; cursor:pointer; font:600 .74rem var(--texto); letter-spacing:.14em; text-transform:uppercase; color:var(--tenue);}
.atras:hover{color:var(--tinta);}
.error{margin-top:16px; font-size:.88rem; color:#b4513f; min-height:1.2em;}
.nota-demo{margin-top:22px; padding-top:18px; border-top:1px solid var(--linea); font-size:.78rem; color:var(--tenue);}
.btn[disabled]{opacity:.45; pointer-events:none;}
.btn.enviando{pointer-events:none;}
.hecho{text-align:center; padding:30px 0;}
.hecho__marca{width:86px; height:86px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center; color:var(--noche); background:radial-gradient(circle at 35% 30%,#fff1e8,var(--oro) 60%,var(--oro-2)); box-shadow:0 0 40px color-mix(in srgb,var(--oro) 60%,transparent);}
.hecho__marca svg{width:32px; height:32px; stroke-dasharray:40; stroke-dashoffset:40; animation:lu-traza 1s .3s var(--curva) forwards;}
@keyframes lu-traza{to{stroke-dashoffset:0;}}
.hecho h2{font-size:clamp(2.2rem,4vw,3.2rem);}
.hecho p{margin:14px auto 0; max-width:40ch; color:var(--tinta-2);}
@media (max-width:900px){ .valor{grid-template-columns:1fr;} .campos{grid-template-columns:1fr;} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important;}
}