/* ==========================================================================
   Propuesta 2 · Lic. Natalia Sánchez, psicóloga
   El movimiento sale de una sola variable, --p (de 0 a 1), que movimiento.js
   pone en cada sección marcada con data-prog según cuánto se bajó. El CSS
   decide qué hace cada pieza con ese número. Sin JavaScript, o con "reducir
   movimiento", --p vale 1 y todo se ve en su estado final.
   ========================================================================== */

:root {
  --papel: #F4EFE6; --papel-claro: #FFFDF8; --tinta: #2A2540; --tinta-suave: #5A5470;
  --indigo: #4C50A5; --indigo-claro: #6468BE; --coral: #DE8571; --coral-oscuro: #B8533A;
  --lavanda: #CFBEDB; --agua: #BFDDDF; --rosa: #ECCFD6; --arena: #F8ECCE; --oro: #F5B772;
  --verde: #8DB9A8; --teal: #2C7A80; --noche: #1B1838; --linea: rgba(76, 80, 165, .15);
  --f-titulo: 'Fraunces', Georgia, serif; --f-texto: 'Figtree', system-ui, sans-serif; --f-mano: 'Caveat', cursive;
}
html:not(.mov) [data-prog] { --p: 1 !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 17px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.menu-abierto { overflow: hidden; }
section[id] { scroll-margin-top: 76px; }
main { overflow-x: clip; }
img, svg { max-width: 100%; }
a { color: var(--indigo); }
a:hover { color: var(--coral-oscuro); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.rayado { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, var(--linea) 43px, var(--linea) 44px); }
.contenedor { width: min(1200px, 100% - 40px); margin-inline: auto; }
.titulo { font-family: var(--f-titulo); font-weight: 380; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.titulo em { font-style: italic; color: var(--indigo); }
.etiqueta { display: block; font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--indigo); margin-bottom: 14px; }
.mano { font-family: var(--f-mano); color: var(--tinta-suave); }
.acuarela { background: var(--lavanda) url(img/acuarela.jpg) 50% 50% / cover; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 26px;
  border: 2px solid var(--tinta); border-radius: 999px; background: var(--papel-claro); color: var(--tinta);
  text-decoration: none; font: 600 16px/1.2 var(--f-texto); box-shadow: 3px 3px 0 var(--tinta);
  transition: translate .15s ease, box-shadow .15s ease;
}
.boton:hover { color: var(--tinta); translate: -1px -1px; box-shadow: 5px 5px 0 var(--tinta); }
.boton.lleno { background: var(--indigo); color: #FFFDF8; }
.boton.lleno:hover { color: #FFFDF8; }

/* ---------- barra de versión y encabezado ---------- */
.version { background: var(--tinta); color: var(--papel); font-size: 14px; }
.version .contenedor { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; padding: 9px 0; }
.version a { color: var(--papel); font-weight: 600; }
.encabezado { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px dashed #B9B3DC; }
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--tinta); text-decoration: none; }
.marca svg { width: 48px; height: 48px; flex-shrink: 0; }
.marca b { display: block; font: 400 23px/1.1 var(--f-titulo); }
.marca small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .32em; color: var(--indigo); }
.menu { display: flex; align-items: center; gap: 24px; }
.menu a:not(.boton) { color: var(--tinta); text-decoration: none; }
.menu .boton { min-height: 44px; padding: 9px 20px; }

/* ---------- 1. La ventana que se vuelve círculo ---------- */
.ventana { position: relative; height: 230vh; }
.ventana .fijo { position: sticky; top: 76px; height: calc(100svh - 76px); overflow: hidden; }
.ventana { --a: clamp(0, (var(--p) - .04) / .5, 1); --b: clamp(0, (var(--p) - .5) / .35, 1); }
.ventana .panel {
  position: absolute; inset: 14px 22px 22px; border-radius: 30px;
  clip-path: circle(max(15vmin, calc(75% - var(--a) * 75%)) at 50% 50%);
}
.ventana .texto-1 {
  position: absolute; inset: 14px 22px 22px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px;
  opacity: calc(1 - var(--a) * 3); translate: 0 calc(var(--a) * -60px); pointer-events: none;
}
.ventana .texto-1 > * { pointer-events: auto; }
.ventana h1 { font-size: clamp(44px, 7.4vw, 110px); max-width: 12ch; }
.ventana .texto-1 p { font-size: clamp(17px, 1.6vw, 21px); max-width: 38ch; margin: 18px 0 26px; }
.ventana .logo-grande { position: absolute; left: 50%; top: calc(50% + 2px); width: calc(15vmin * 100 / 30); translate: -45% -47%; overflow: visible; }
.ventana .logo-grande .espiral { stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - var(--b)); }
.ventana .logo-grande .punto { transform-box: fill-box; transform-origin: center; scale: clamp(0, (var(--p) - .45) / .12, 1); }
.ventana .texto-2 { position: absolute; left: 0; right: 0; bottom: 7vh; text-align: center; padding: 0 20px; opacity: clamp(0, (var(--p) - .72) / .18, 1); translate: 0 calc((1 - clamp(0, (var(--p) - .72) / .18, 1)) * 30px); }
.ventana .texto-2 .titulo { font-size: clamp(28px, 3.6vw, 48px); }
.ventana .texto-2 .mano { font-size: 26px; margin: 6px 0 0; }
.ventana .bajar { position: absolute; left: 50%; bottom: 36px; translate: -50% 0; font-size: 24px; margin: 0; opacity: calc(1 - var(--a) * 4); }

/* ---------- 2. pienso · siento · hago ---------- */
.enfoque { position: relative; padding: 110px 0 100px; }
.palabras { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .4em; font: italic 500 clamp(64px, 13vw, 190px)/.95 var(--f-titulo); letter-spacing: -.03em; margin: 0 0 70px; }
.palabra { display: inline-block; white-space: nowrap; }
.palabra.pienso { color: var(--indigo); } .palabra.siento { color: var(--coral-oscuro); } .palabra.hago { color: var(--teal); }
.palabras .sep { color: var(--lavanda); font-style: normal; }
.letra { display: inline-block; }
html.mov .palabras .letra { translate: 0 .9em; rotate: calc(var(--giro, 14deg)); opacity: 0; transition: translate .9s cubic-bezier(.3,1.45,.5,1), rotate .9s cubic-bezier(.3,1.45,.5,1), opacity .3s ease; transition-delay: calc(var(--n) * 55ms + var(--w) * 260ms); }
html.mov .palabras.visible .letra { translate: 0 0; rotate: 0deg; opacity: 1; }
.enfoques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
.enfoques article { position: relative; padding-left: 86px; }
.enfoques article svg { position: absolute; left: 0; top: 4px; width: 64px; height: 64px; }
.enfoques h3 { font: 450 34px/1.1 var(--f-titulo); margin: 0 0 10px; }
.enfoques p { margin: 0; font-size: 19px; }

/* nubes de acuarela que flotan a distinta velocidad */
.nube { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .55; pointer-events: none; z-index: 0; translate: 0 calc((var(--p) - .5) * var(--vel, 120) * 1px); }
.enfoque .contenedor, .consultorio .contenedor { position: relative; z-index: 1; }

/* ---------- 3. El consultorio se pinta ---------- */
.consultorio { position: relative; height: 300vh; }
.consultorio .fijo { position: sticky; top: 76px; height: calc(100svh - 76px); display: grid; align-content: center; gap: 22px; overflow: hidden; }
.consultorio .cabeza { text-align: center; }
.consultorio .cabeza .titulo { font-size: clamp(40px, 6vw, 84px); }
.consultorio .cabeza .mano { font-size: 27px; margin: 6px 0 0; opacity: clamp(0, (var(--p) - .9) / .08, 1); }
.escena { width: min(980px, 100%); margin: 0 auto; }
.escena svg { width: 100%; height: auto; display: block; overflow: visible; }
.escena .linea { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - clamp(0, var(--p) / .26, 1)); }
.escena .marcador { fill: none; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - var(--a)) / var(--b), 1)); }
.escena .brillo { fill: none; stroke: #FFFDF8; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - .88) / .06, 1)); }
.escena .luna { transform-box: fill-box; transform-origin: center; scale: clamp(0, (var(--p) - .84) / .06, 1); }

/* ---------- 4. Consultas: un mazo que se arma ---------- */
.mazo { position: relative; height: 360vh; }
.mazo .fijo { position: sticky; top: 76px; height: calc(100svh - 76px); display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; width: min(1200px, 100% - 40px); margin-inline: auto; }
.mazo .intro .titulo { font-size: clamp(40px, 5vw, 70px); margin-bottom: 20px; }
.mazo .intro p { font-size: 19px; max-width: 30ch; }
.pila { position: relative; height: min(520px, 70vh); }
.carta-m {
  --t: clamp(0, var(--p) * 5.6 - var(--i) * 1.05, 1);
  position: absolute; left: 50%; top: 50%; width: min(360px, 78vw); min-height: 330px; margin: -165px 0 0 calc(min(360px, 78vw) / -2);
  padding: 34px 32px; border: 2px solid var(--tinta); border-radius: 18px; box-shadow: 6px 6px 0 var(--tinta);
  display: flex; flex-direction: column; gap: 12px;
  translate: calc((1 - var(--t)) * 70vw) calc((1 - var(--t)) * 60vh); rotate: calc(var(--giro) + (1 - var(--t)) * 38deg); opacity: calc(var(--t) * 5);
}
.carta-m svg { width: 70px; height: 70px; }
.carta-m h3 { font: 500 30px/1.1 var(--f-titulo); margin: 6px 0 0; }
.carta-m p { margin: 0; font-size: 17px; }
.carta-m a { margin-top: auto; font-weight: 600; color: inherit; }
.carta-m.c1 { background: var(--lavanda); } .carta-m.c2 { background: var(--agua); } .carta-m.c3 { background: var(--rosa); }
.carta-m.c4 { background: var(--arena); } .carta-m.c5 { background: var(--indigo); color: #FFFDF8; }
.carta-m.c5 .trazo-c { stroke: #FFFDF8; }

/* ---------- 5. Pericias: el sello cae sobre el expediente ---------- */
.pericias { padding: 110px 0; background: color-mix(in srgb, var(--papel) 62%, var(--arena)); }
.pericias .contenedor { display: grid; grid-template-columns: 460px 1fr; gap: 80px; align-items: center; }
.expediente { position: relative; aspect-ratio: 4 / 3.3; rotate: -3deg; }
.expediente .pestana { position: absolute; left: 8%; top: 0; width: 34%; height: 11%; background: var(--arena); border: 2px solid var(--tinta); border-bottom: 0; border-radius: 10px 10px 0 0; }
.expediente .tapa { position: absolute; inset: 10% 0 0 0; background: var(--arena); border: 2px solid var(--tinta); border-radius: 6px; }
.expediente .hoja { position: absolute; left: 9%; right: 12%; top: 4%; bottom: 30%; background: var(--papel-claro); border: 1.5px solid rgba(0,0,0,.18); rotate: 3.5deg; padding: 24px 22px; }
.expediente .hoja b { display: block; font: 400 22px var(--f-titulo); }
.expediente .hoja span { display: block; height: 2px; margin-top: 16px; background: var(--linea); }
.expediente .frente { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: var(--arena); border: 2px solid var(--tinta); border-radius: 0 0 6px 6px; padding: 24px 28px; }
.expediente .frente .mano { font-size: 30px; color: var(--tinta); margin: 0; line-height: 1.1; }
.expediente .frente small { font-size: 13px; font-weight: 600; letter-spacing: .18em; color: var(--tinta-suave); }
.sello { position: absolute; right: 7%; bottom: 9%; width: 96px; height: 96px; border: 3px solid var(--indigo); border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; padding: 10px; color: var(--indigo); rotate: -12deg; }
html.mov .expediente .hoja { translate: 0 60px; transition: translate 1s cubic-bezier(.2,.8,.2,1) .2s; }
html.mov .expediente.visible .hoja { translate: 0 0; }
html.mov .sello { opacity: 0; }
html.mov .expediente.visible .sello { animation: sellazo .55s cubic-bezier(.3,1.4,.5,1) 1s forwards; }
html.mov .expediente.visible { animation: sacudon .35s ease 1.3s; }
@keyframes sellazo { 0% { opacity: 0; scale: 3.2; } 70% { opacity: 1; scale: .92; } 100% { opacity: .85; scale: 1; } }
@keyframes sacudon { 0%, 100% { translate: 0 0; } 30% { translate: 0 5px; } 60% { translate: 0 -2px; } }
.pericias ul { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pericias li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; }
.pericias li svg { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; }
.tilde { fill: none; stroke: var(--coral-oscuro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pericias .intro { font-size: 20px; margin: 0 0 22px; }
.pericias h2 { font-size: clamp(38px, 4.4vw, 60px); margin-bottom: 18px; }

/* ---------- 6. El camino: un punto enciende cada paso ---------- */
.camino { padding: 110px 0 120px; }
.camino h2 { font-size: clamp(38px, 4.4vw, 60px); margin-bottom: 30px; }
.recorrido { position: relative; }
.recorrido svg { display: block; width: 100%; height: auto; overflow: visible; }
.recorrido .base { fill: none; stroke: #B9B3DC; stroke-width: 3; stroke-dasharray: 3 10; stroke-linecap: round; }
.recorrido .hecho { fill: none; stroke: var(--indigo); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.recorrido .viajero { fill: var(--coral); stroke: var(--tinta); stroke-width: 2.5; }
.recorrido.vertical { display: none; }
.pasos { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.paso { opacity: .35; translate: 0 14px; transition: opacity .5s ease, translate .5s cubic-bezier(.3,1.4,.5,1); }
.paso.encendido, html:not(.mov) .paso { opacity: 1; translate: 0 0; }
.paso b { display: block; font: 600 40px/1 var(--f-mano); color: var(--coral-oscuro); }
.paso h3 { font: 450 27px/1.15 var(--f-titulo); margin: 6px 0 6px; }
.paso p { margin: 0; }

/* ---------- 7. Sobre mí ---------- */
.sobre-mi { padding: 100px 0; }
.sobre-mi .contenedor { display: grid; grid-template-columns: 420px 1fr; gap: 80px; align-items: center; }
.polaroid { position: relative; margin: 0; background: var(--papel-claro); padding: 20px 20px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.12); rotate: -3deg; }
.polaroid .foto { aspect-ratio: 1 / 1.05; display: grid; place-items: center; }
.polaroid .foto span { padding: 8px 16px; border-radius: 999px; background: rgba(255,253,248,.85); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.polaroid figcaption { text-align: center; font: 29px var(--f-mano); margin-top: 8px; }
.cinta { position: absolute; top: -15px; width: 110px; height: 32px; opacity: .8; }
.cinta.i { left: 30px; rotate: -8deg; background: var(--agua); } .cinta.d { right: 30px; rotate: 9deg; background: var(--rosa); }
.sobre-mi h2 { font-size: clamp(38px, 4.4vw, 60px); margin-bottom: 20px; }
.sobre-mi p { font-size: 20px; }
.sobre-mi .matricula { font-size: 15px; color: var(--tinta-suave); }

/* ---------- 8. Proyecto Luminar: la luna sube ---------- */
.luminar { position: relative; overflow: hidden; padding: 120px 0; color: #F4EFE6; background: var(--noche); }
.luminar .estrellas { position: absolute; inset: 0; width: 100%; height: 100%; }
.luminar .estrellas circle { fill: var(--oro); }
html.mov .luminar .estrellas circle { animation: titilar 3.2s ease-in-out infinite; }
html.mov .luminar .estrellas circle:nth-child(3n) { animation-delay: 1.1s; animation-duration: 4.2s; }
html.mov .luminar .estrellas circle:nth-child(3n+1) { animation-delay: 2s; }
@keyframes titilar { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.luminar .contenedor { position: relative; display: grid; grid-template-columns: 380px 1fr; gap: 90px; align-items: center; }
.luminar .luna-l { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(245,183,114,.18), 0 0 80px rgba(245,183,114,.25); translate: 0 calc((1 - var(--p)) * 160px); }
.luminar .luna-l img { width: 62%; }
.luminar .etiqueta { color: var(--oro); }
.luminar h2 { color: #F4EFE6; font-size: clamp(44px, 5vw, 72px); margin-bottom: 16px; }
.luminar .bajada { font: italic 300 25px/1.4 var(--f-titulo); color: #E4DEF3; margin: 0 0 30px; }
.luminar .acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.luminar .boton { box-shadow: none; }
.luminar .boton.oro { background: var(--oro); border-color: var(--oro); color: #1B1838; }
.luminar .boton.claro { background: transparent; border-color: #F4EFE6; color: #F4EFE6; }

/* ---------- 9. Contacto: la carta sale del sobre ---------- */
.contacto { padding: 110px 0 60px; --s: clamp(0, (var(--p) - .12) / .38, 1); }
.sobre-c { position: relative; width: min(740px, 100%); margin: 0 auto; padding-top: 40px; }
.sobre-c .dorso { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: var(--coral); border: 2px solid var(--tinta); border-radius: 8px; }
.sobre-c .solapa { position: absolute; left: 0; right: 0; bottom: calc(62% - 2px); height: 22%; background: var(--coral); border: 2px solid var(--tinta); border-bottom: 0; clip-path: polygon(0 100%, 50% 0, 100% 100%); transform-origin: bottom; }
.sobre-c .carta { position: relative; z-index: 1; margin: 0 5%; background: var(--papel-claro); border: 2px solid var(--tinta); border-radius: 6px; padding: 46px 48px 170px; translate: 0 calc((1 - var(--s)) * 42%); }
.sobre-c .bolsillo-sombra { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 150px; filter: drop-shadow(0 -2px 0 var(--tinta)) drop-shadow(2px 0 0 var(--tinta)) drop-shadow(-2px 0 0 var(--tinta)) drop-shadow(0 2px 0 var(--tinta)); }
.sobre-c .bolsillo { position: absolute; inset: 0; background: #E8927E; border-radius: 0 0 8px 8px; clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%); }
.contacto h2 { font-size: clamp(44px, 5vw, 66px); margin-bottom: 4px; }
.contacto .mano { font-size: 29px; margin: 0 0 24px; }
.contacto .lineas { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.contacto .mail { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; color: var(--tinta); overflow-wrap: anywhere; }
.contacto .donde { color: var(--tinta-suave); margin: 8px 0 0; }
.estampilla {
  position: absolute; z-index: 4; right: 6%; top: 10px; width: 110px; height: 132px; padding: 14px; background: var(--papel-claro); rotate: 7deg;
  -webkit-mask: radial-gradient(circle 5px at 5px 5px, transparent 96%, #000 100%) -5px -5px / 12px 12px, linear-gradient(#000 0 0) 9px 9px / calc(100% - 18px) calc(100% - 18px) no-repeat;
          mask: radial-gradient(circle 5px at 5px 5px, transparent 96%, #000 100%) -5px -5px / 12px 12px, linear-gradient(#000 0 0) 9px 9px / calc(100% - 18px) calc(100% - 18px) no-repeat;
}
.estampilla .acuarela { width: 100%; height: 100%; display: grid; place-items: center; }

.pie { background: var(--tinta); color: var(--papel); padding: 54px 0 40px; }
.pie .arriba { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.pie .marca { color: var(--papel); }
.pie .marca small { color: #CFC9E6; letter-spacing: .1em; font-weight: 400; font-size: 14px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.pie nav a { color: var(--papel); }
.pie .crisis { margin: 28px 0 0; font-size: 14px; color: #CFC9E6; max-width: 900px; }


/* ---------- menú del celular y botón flotante ---------- */
.menu-boton { display: none; width: 46px; height: 46px; flex-shrink: 0; border: 2px solid var(--tinta); border-radius: 999px; background: var(--papel-claro); color: var(--tinta); align-items: center; justify-content: center; box-shadow: 2px 2px 0 var(--tinta); cursor: pointer; padding: 0; }
.menu-boton svg { width: 22px; height: 18px; }
.menu-celular { position: fixed; inset: 0; z-index: 60; overflow: hidden auto; background: var(--papel); display: flex; flex-direction: column; padding: 12px 20px calc(26px + env(safe-area-inset-bottom)); }
.menu-celular[hidden] { display: none; }
.menu-celular .arriba { display: flex; justify-content: space-between; align-items: center; min-height: 54px; }
.menu-celular nav { position: relative; z-index: 1; display: flex; flex-direction: column; margin: 30px 0 auto; }
.menu-celular nav a { font: 400 36px/1.15 var(--f-titulo); color: var(--tinta); text-decoration: none; padding: 8px 0; border-bottom: 1px dashed #CFC9E6; }
.menu-celular nav a:hover, .menu-celular nav a:focus-visible { color: var(--indigo); font-style: italic; }
.menu-celular .boton { position: relative; z-index: 1; width: 100%; margin-top: 26px; }
.menu-celular .mancha { position: absolute; right: -90px; bottom: 110px; width: 280px; height: 280px; border-radius: 50%; opacity: .55; }
html.mov .menu-celular:not([hidden]) nav a { animation: entrar .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--n) * 55ms); }
@keyframes entrar { from { opacity: 0; translate: 0 18px; } }
.wa-flotante { display: none; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: var(--indigo); color: #FFFDF8; border: 2px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); align-items: center; justify-content: center; }
.wa-flotante:hover { color: #FFFDF8; }
.wa-flotante svg { width: 28px; height: 28px; }
body.menu-abierto .wa-flotante { display: none !important; }

/* ---------- aparición general ---------- */
html.mov [data-rev] { opacity: 0; translate: 0 30px; transition: opacity .9s ease, translate 1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--demora, 0s); }
html.mov [data-rev].visible { opacity: 1; translate: 0 0; }

/* ---------- sin movimiento: todo quieto y en su lugar ---------- */
html:not(.mov) .ventana, html:not(.mov) .consultorio, html:not(.mov) .mazo { height: auto; }
html:not(.mov) .ventana .fijo, html:not(.mov) .consultorio .fijo, html:not(.mov) .mazo .fijo { position: relative; top: 0; height: auto; min-height: 640px; }
html:not(.mov) .ventana .texto-1 { opacity: 1; translate: 0 0; position: relative; inset: auto; padding: 70px 24px 40px; }
html:not(.mov) .ventana .panel { clip-path: none; }
html:not(.mov) .ventana .logo-grande, html:not(.mov) .ventana .texto-2 { display: none; }
html:not(.mov) .consultorio .fijo { padding: 80px 0; }
html:not(.mov) .mazo .fijo { grid-template-columns: 1fr; padding: 80px 0; }
html:not(.mov) .pila { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
html:not(.mov) .carta-m { position: relative; left: auto; top: auto; margin: 0; width: auto; rotate: 0deg; }
html:not(.mov) .recorrido .hecho { stroke-dashoffset: 0; }
html:not(.mov) .recorrido .viajero { display: none; }
html:not(.mov) .mazo .intro p { display: none; } /* sin movimiento, la invitación a seguir bajando no tiene sentido */

/* ---------- pantallas medianas ---------- */
@media (max-width: 1000px) {
  .menu a:not(.boton) { display: none; }
  .menu-boton { display: inline-flex; }
  .mazo .fijo { grid-template-columns: 1fr; align-content: center; gap: 10px; }
  .mazo .intro p { display: none; }
  .pila { height: min(430px, 56vh); }
  .pericias .contenedor, .sobre-mi .contenedor, .luminar .contenedor { grid-template-columns: 1fr 1.2fr; gap: 50px; }
}

/* ---------- celular ---------- */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .contenedor { width: calc(100% - 36px); }
  .encabezado .contenedor { min-height: 66px; }
  .marca svg { width: 40px; height: 40px; }
  .marca b { font-size: 19px; }
  .menu .boton { display: none; }
  .wa-flotante { display: inline-flex; }
  section[id] { scroll-margin-top: 66px; }
  .ventana { height: 190vh; }
  .consultorio { height: 240vh; }
  .ventana .fijo, .consultorio .fijo, .mazo .fijo { top: 66px; height: calc(100svh - 66px); }
  .ventana .panel, .ventana .texto-1 { inset: 10px 10px 14px; border-radius: 22px; }
  .ventana h1 { font-size: 42px; }
  .ventana .texto-1 .boton { width: 100%; }
  .ventana .logo-grande { width: calc(18vmin * 100 / 30); }
  .ventana .panel { clip-path: circle(max(18vmin, calc(75% - var(--a) * 75%)) at 50% 50%); }
  .ventana .texto-2 { bottom: 5vh; }
  .ventana .texto-2 .titulo { font-size: 27px; }
  .enfoque { padding: 80px 0 70px; }
  .palabras { font-size: 64px; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 50px; }
  .palabras .sep { display: none; }
  .enfoques { grid-template-columns: 1fr; gap: 36px; }
  .enfoques article { padding-left: 72px; }
  .enfoques article svg { width: 54px; height: 54px; }
  .enfoques h3 { font-size: 28px; }
  .enfoques p { font-size: 17px; }
  .consultorio .cabeza .titulo { font-size: 38px; }
  .consultorio .cabeza .mano { font-size: 22px; }
  .escena { width: 118%; margin-left: -9%; }
  .mazo { height: 290vh; }
  .mazo .intro .titulo { font-size: 34px; margin-bottom: 0; }
  .carta-m { min-height: 290px; margin-top: -145px; padding: 26px 24px; }
  .carta-m h3 { font-size: 25px; }
  .carta-m p { font-size: 16px; }
  .carta-m svg { width: 56px; height: 56px; }
  .pericias, .camino, .sobre-mi { padding: 70px 0; }
  .pericias .contenedor, .sobre-mi .contenedor, .luminar .contenedor { grid-template-columns: 1fr; gap: 44px; }
  .expediente { max-width: 330px; width: 100%; margin-inline: auto; }
  .expediente .hoja { padding: 16px; } .expediente .hoja b { font-size: 18px; }
  .expediente .frente { padding: 16px 18px; } .expediente .frente .mano { font-size: 23px; }
  .sello { width: 74px; height: 74px; font-size: 8px; }
  .pericias .intro, .sobre-mi p { font-size: 17px; }
  .pericias li { font-size: 16px; }
  .pericias .boton, .luminar .boton, .contacto .boton { width: 100%; }
  .recorrido.horizontal { display: none; }
  .recorrido.vertical { display: block; position: absolute; left: 0; top: 0; width: 60px; height: 100%; }
  .camino .cuerpo { position: relative; padding-left: 74px; }
  .pasos { grid-template-columns: 1fr; gap: 34px; margin: 0; }
  .polaroid { max-width: 320px; margin-inline: auto; padding: 14px 14px 6px; }
  .luminar { padding: 80px 0; }
  .luminar .luna-l { width: 230px; margin-inline: auto; translate: 0 calc((1 - var(--p)) * 50px); }
  .pie { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .luminar .bajada { font-size: 20px; }
  .sobre-c .carta { margin: 0 3%; padding: 36px 22px 150px; }
  .sobre-c .bolsillo-sombra { height: 120px; }
  .contacto .mail { font-size: 13px; overflow-wrap: normal; gap: 8px; }
  .contacto .boton { white-space: nowrap; font-size: 15px; padding: 12px 14px; }
  .estampilla { width: 76px; height: 92px; padding: 10px; right: 3%; top: 16px; }
}

@media print {
  .ventana, .consultorio, .mazo { height: auto; }
  .fijo { position: relative !important; height: auto !important; }
  [data-prog] { --p: 1 !important; }
  html.mov [data-rev] { opacity: 1 !important; translate: none !important; }
}