/* ============================================================================
   SISTEMA DE ANIMACIONES · DRA. VIRGINIA PÉREZ
   ----------------------------------------------------------------------------
   Para ajustar la intensidad de todo el movimiento, edita el bloque :root de
   abajo: duraciones, curvas y distancia de desplazamiento. Las separaciones en
   cascada y las intensidades de scroll y puntero viven en el objeto CONFIG de
   animations.js.

   Los estados iniciales solo se aplican cuando existe JavaScript y el
   movimiento está permitido: html.js[data-motion="on"]. Sin JavaScript, o con
   el movimiento pausado, la página se muestra completa y estática.
   ========================================================================== */

:root{
  /* Duraciones */
  --d-tap:130ms;          /* respuesta al pulsar        (100-160 ms) */
  --d-hover:220ms;        /* estados hover              (180-280 ms) */
  --d-menu:380ms;         /* menú y modal               (250-450 ms) */
  --d-content:620ms;      /* entradas de contenido      (450-750 ms) */
  --d-mask:820ms;         /* máscaras de imágenes       (650-950 ms) */
  --d-panel:740ms;        /* paneles oscuros                         */
  --d-line:640ms;         /* líneas de titular                       */

  /* Curvas: desaceleraciones suaves, sin rebote */
  --e-out:cubic-bezier(.22,.72,.24,1);
  --e-soft:cubic-bezier(.33,1,.68,1);
  --e-menu:cubic-bezier(.62,.05,.25,1);

  /* Distancias */
  --anim-shift:22px;      /* 12-28 px en escritorio */
  --anim-rise:34px;
  --anim-delay:0ms;

  /* Flotación de la etiqueta de Instagram */
  --float-amp:3px;
  --float-time:5.4s;

}

@media (max-width:900px){
  :root{
    --anim-shift:12px;
    --anim-rise:18px;
    --d-content:520ms;
    --d-mask:660ms;
    --d-panel:620ms;
    --d-line:520ms;
    --float-amp:2px;
  }
}

/* Longitud normalizada para el trazado de iconos (ver pathLength="1") */
@supports (stroke-dashoffset:1){ .icon[data-draw]{ --draw:1 } }

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================================
   1 · ESTADOS DE ENTRADA
   ========================================================================== */

html.js[data-motion="on"] [data-anim]:not(.anim-done){
  will-change:opacity, transform;
}

/* fade — entrada estándar por bloques */
html.js[data-motion="on"] [data-anim="fade"]:not(.anim-done){
  opacity:0;
  transform:translate3d(0,var(--anim-shift),0);
}
/* rise — retratos y piezas mayores */
html.js[data-motion="on"] [data-anim="rise"]:not(.anim-done){
  opacity:0;
  transform:translate3d(0,var(--anim-rise),0);
}
/* pop — etiquetas pequeñas */
html.js[data-motion="on"] [data-anim="pop"]:not(.anim-done){
  opacity:0;
  transform:translate3d(0,10px,0) scale(.94);
}
/* panel — tarjetas y paneles oscuros (conserva sus esquinas) */
html.js[data-motion="on"] [data-anim="panel"]:not(.anim-done){
  opacity:0;
  transform:translate3d(0,26px,0) scale(.985);
}
/* rule — línea divisoria */
html.js[data-motion="on"] [data-anim="rule"]:not(.anim-done){
  transform:scaleX(0);
  transform-origin:0 50%;
}
/* cue — no oculta nada: solo marca el momento en que el elemento entra en
   pantalla, para efectos que se disparan con .is-in (la flecha del final de
   la sección de medicina materno fetal). */

html.js[data-motion="on"] [data-anim="fade"].is-in:not(.anim-done),
html.js[data-motion="on"] [data-anim="rise"].is-in:not(.anim-done),
html.js[data-motion="on"] [data-anim="pop"].is-in:not(.anim-done),
html.js[data-motion="on"] [data-anim="panel"].is-in:not(.anim-done){
  opacity:1;
  transform:none;
  transition:opacity var(--d-content) var(--e-out) var(--anim-delay),
             transform var(--d-content) var(--e-out) var(--anim-delay);
}
html.js[data-motion="on"] [data-anim="panel"].is-in:not(.anim-done){
  transition-duration:var(--d-panel);
}
html.js[data-motion="on"] [data-anim="rule"].is-in:not(.anim-done){
  transform:scaleX(1);
  transition:transform var(--d-panel) var(--e-out) var(--anim-delay);
}
/* El panel de la biografía nunca baja de opacidad: detrás está el halo blanco
   de doctora-sombra.webp y se vería a través, con la silueta duplicada.
   Aquí el movimiento lo da solo el desplazamiento. */
html.js[data-motion="on"] .bio-card[data-anim]:not(.anim-done){opacity:1}

/* mask — revelado de fotografías (clip-path: no toca transform)
   IMPORTANTE: la máscara va sobre la imagen, nunca sobre la figura. Si se
   recorta la figura, su caja queda de altura cero, el IntersectionObserver
   deja de considerarla visible y la entrada no llega a dispararse nunca: la
   foto se quedaría oculta para siempre. La figura conserva su geometría y su
   overflow:hidden; la imagen es la que se revela. */
html.js[data-motion="on"] [data-anim="mask"]:not(.anim-done) > img{
  clip-path:inset(0 0 100% 0);
  --iz:1.12;
}
html.js[data-motion="on"] [data-anim="mask"].is-in:not(.anim-done) > img{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--d-mask) var(--e-soft) var(--anim-delay),
             --iz calc(var(--d-mask) + 220ms) var(--e-soft) var(--anim-delay);
}
html.js[data-motion="on"] [data-anim="mask"].is-in > img{
  --iz:1.06;
  transition:--iz calc(var(--d-mask) + 220ms) var(--e-soft) var(--anim-delay);
}

/* Titulares divididos por líneas y por palabras.
   El titular se mantiene oculto desde el primer pintado. Sin esto se veía
   completo mientras el visitante se acercaba, y al entrar en pantalla daba un
   salto y recién entonces se animaba: JavaScript no lo divide en palabras
   hasta ese momento, así que antes no había ningún estado inicial que
   aplicar. La opacidad cambia sin transición, justo cuando las palabras
   empiezan a subir. */
html.js[data-motion="on"] [data-anim="lines"]:not(.anim-done),
html.js[data-motion="on"] [data-anim="words"]:not(.anim-done){opacity:0}
html.js[data-motion="on"] [data-anim="lines"].is-in:not(.anim-done),
html.js[data-motion="on"] [data-anim="words"].is-in:not(.anim-done){opacity:1}

.anim-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.anim-word-i{display:inline-block;will-change:transform,opacity}
html.js[data-motion="on"] .anim-word-i{transform:translate3d(0,105%,0);opacity:0}
html.js[data-motion="on"] .is-in .anim-word-i{
  transform:none;opacity:1;
  transition:transform var(--d-line) var(--e-out) var(--word-delay,0ms),
             opacity calc(var(--d-line) * .55) linear var(--word-delay,0ms);
}

/* ============================================================================
   2 · PROFUNDIDAD LIGADA AL SCROLL
   Las capas de parallax solo escriben variables; nunca la propiedad transform
   completa, para no pisar la entrada ni el hover.
   ========================================================================== */

@property --iz{syntax:'<number>';inherits:false;initial-value:1}
@property --py{syntax:'<length>';inherits:false;initial-value:0px}

[data-parallax],[data-parallax-in]{will-change:transform}
[data-parallax-in]{transform:translate3d(0,var(--py,0px),0) scale(var(--iz,1.06))}
[data-parallax]{transform:translate3d(0,var(--py,0px),0)}

/* Magnetismo: cualquier control marcado comparte el mismo transform compuesto,
   de modo que entrada, hover y puntero nunca se sobrescriben entre sí. */
[data-magnet]{
  transform:translate3d(var(--mx,0px),calc(var(--my,0px) + var(--lift,0px)),0) scale(var(--press,1));
  transition:transform var(--d-hover) var(--e-out),background var(--d-hover),color var(--d-hover),border-color var(--d-hover);
}
[data-magnet]:active{--press:.985;transition-duration:var(--d-tap)}

/* ============================================================================
   3 · ENCABEZADO, PROGRESO Y NAVEGACIÓN
   ========================================================================== */

.site-header{
  position:sticky;top:0;z-index:40;
  height:calc(82 * var(--u));min-height:62px;
}
.site-header::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:#ffffffd9;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 #e7e7ea, 0 10px 26px #0000000c;
  opacity:0;transition:opacity var(--d-hover) var(--e-out);
}
.site-header.is-scrolled::before{opacity:1}
.header{height:100%}
/* El logotipo se reduce con transform (no con width) para no provocar un
   reflujo durante el desplazamiento. */
.brand{transform-origin:0 50%;transition:transform var(--d-menu) var(--e-out)}
.site-header.is-scrolled .brand{transform:scale(.86)}

.read-progress{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none}
.read-progress > span{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,#9a9a9d,#1a1a1a);
  transform:scaleX(var(--progress,0));transform-origin:0 50%;
  will-change:transform;
}

@media (min-width:901px){
  .navigation{align-self:flex-start;transition:min-height var(--d-menu) var(--e-out),padding var(--d-menu) var(--e-out)}
  .site-header.is-scrolled .navigation{
    min-height:calc(64 * var(--u));
    padding-top:calc(5 * var(--u));padding-bottom:calc(5 * var(--u));
  }
  .site-header.is-scrolled .navigation .nav-cta{padding-top:calc(15 * var(--u));padding-bottom:calc(15 * var(--u))}
}

.nav-inner{display:contents}
.navigation > .nav-inner > a > span{position:relative;display:inline-block}
.navigation > .nav-inner > a > span::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--d-hover) var(--e-out);
}
.navigation > .nav-inner > a:hover > span::after,
.navigation > .nav-inner > a:focus-visible > span::after{transform:scaleX(1);transform-origin:0 50%}

/* Hamburguesa → X */
.menu-bars{position:relative;display:block;width:20px;height:11px}
.menu-bars i{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform var(--d-menu) var(--e-menu);
}
.menu-bars i:first-child{top:0}
.menu-bars i:last-child{bottom:0}
.menu-toggle[aria-expanded="true"] .menu-bars i:first-child{transform:translateY(4.75px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-bars i:last-child{transform:translateY(-4.75px) rotate(-45deg)}

/* ============================================================================
   4 · HERO
   ========================================================================== */

/* Escena de entrada del hero: más pausada que el resto de la página. Cada
   pieza entra por turnos y la última (la etiqueta de Instagram) termina a los
   2,5 s. Para acortarla o alargarla, mueve los data-delay del hero en
   index.html y estas dos duraciones. */
.hero [data-anim]{--d-content:780ms}
.hero h1[data-anim]{--d-line:820ms}

.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:url('assets/hero-background.webp') center/100% 100% no-repeat;
  transform:translate3d(0,var(--py,0px),0) scale(1.06);
}
.hero-doctor-wrap{position:absolute;left:56.92%;bottom:0;width:32.67%;z-index:1}
.hero-doctor{width:100%}

html.js[data-motion="on"] .profile-badge.anim-done[data-float]{
  animation:vp-float var(--float-time) var(--e-soft) infinite;
}
@keyframes vp-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,calc(var(--float-amp) * -1),0)}
}
.profile-badge{transition:box-shadow var(--d-hover) var(--e-out),background var(--d-hover)}
.profile-badge:hover,.profile-badge:focus-visible{background:#cacac8c2;box-shadow:0 8px 24px #00000026}

/* ============================================================================
   5 · BOTONES, ENLACES Y MICROINTERACCIONES
   ========================================================================== */

.button{
  transform:translate3d(var(--mx,0px),calc(var(--my,0px) + var(--lift,0px)),0) scale(var(--press,1));
  transition:transform var(--d-hover) var(--e-out),background var(--d-hover),box-shadow var(--d-hover),color var(--d-hover),border-color var(--d-hover);
}
.button:hover{--lift:-2px}
.button:active{--lift:0px;--press:.985;transition-duration:var(--d-tap)}

/* Reflejo metálico: solo al interactuar, nunca en bucle */
.button-metal{position:relative;overflow:hidden;isolation:isolate}
.button-metal::after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:-45%;width:36%;z-index:-1;
  background:linear-gradient(100deg,#fff0,#ffffff66,#fff0);
  transform:skewX(-18deg);opacity:0;pointer-events:none;
}
.button-metal:hover::after,.button-metal:focus-visible::after{animation:vp-sheen 760ms var(--e-soft) 1}
@keyframes vp-sheen{
  0%{left:-45%;opacity:0}
  18%{opacity:1}
  100%{left:118%;opacity:0}
}
.instagram-button > span{position:relative;z-index:1}

/* Flechas que se desplazan */
.button .icon,.card-link .icon,.location-card > a .icon,.text-link .icon{
  transition:transform var(--d-hover) var(--e-out);
}
.button:hover .icon,.button:focus-visible .icon{transform:translate(3px,-3px)}
.booking-submit:hover .icon{transform:translate(3px,-3px)}
.to-top:hover .icon{transform:translateY(-3px)}

/* Subrayado animado en enlaces de texto */
.text-link{position:relative}
.text-link::after{
  content:'';position:absolute;left:26px;right:0;bottom:-4px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--d-hover) var(--e-out);
}
.text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.text-link:hover{text-decoration:none}
.text-link:hover .icon{transform:translateX(2px)}

/* ============================================================================
   6 · ÁREAS DE ATENCIÓN
   ========================================================================== */

/* Las cuatro tarjetas entran de una en una, más despacio que el resto de la
   página y con un recorrido hacia arriba más largo, para que se note el orden. */
.area-grid [data-anim]{--d-content:820ms;--anim-shift:44px}

.area-card{
  transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translate3d(0,var(--lift,0px),0);
  transition:transform var(--d-hover) var(--e-out),border-color var(--d-hover),background var(--d-hover),box-shadow var(--d-hover);
  backface-visibility:hidden;
}
.area-card:hover,.area-card:focus-visible{--lift:-5px;border-color:#9d9da1;background:#f7f7f9;box-shadow:0 14px 34px #0000000d}
.area-card:active{--lift:-1px;transition-duration:var(--d-tap)}
.area-card > .icon{transition:transform var(--d-hover) var(--e-out),background var(--d-hover)}
.area-card:hover > .icon{transform:translateY(-3px)}
.card-link{display:inline-flex;align-items:center;gap:8px}
.card-link .icon{width:14px;height:14px}
.area-card:hover .card-link .icon{transform:translate(3px,-3px)}

/* Trazado de iconos: una sola vez, al entrar en pantalla */
html.js[data-motion="on"] .icon[data-draw]{
  stroke-dasharray:1;stroke-dashoffset:1;
}
html.js[data-motion="on"] .is-in .icon[data-draw],
html.js[data-motion="on"] .icon[data-draw].is-in{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 900ms var(--e-soft) calc(var(--anim-delay) + 140ms);
}

@media (hover:none),(pointer:coarse){
  .area-card{transform:translate3d(0,var(--lift,0px),0)}
  .area-card:hover{--lift:0px}
  .area-card:active{--lift:-2px}
}

/* ============================================================================
   7 · MEDICINA MATERNO FETAL
   ========================================================================== */

.materno-decor{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 78% 22%,#ffffff12,#fff0 70%),
             radial-gradient(45% 40% at 12% 82%,#ffffff0e,#fff0 70%);
  transform:translate3d(0,var(--py,0px),0);
}
.materno-inner{position:relative;z-index:1}
.materno-figure{
  margin:0;overflow:hidden;
  border-radius:calc(175 * var(--u)) calc(100 * var(--u)) calc(110 * var(--u)) calc(90 * var(--u));
  box-shadow:18px 22px 28px #0005;
}
.materno-image{width:100%;display:block}

.next-section > span{transition:transform var(--d-hover) var(--e-out)}
.next-section:hover > span{transform:translate(-3px,-1px)}
html.js[data-motion="on"] .next-section.is-in > span{animation:vp-nudge 1.5s var(--e-soft) 2}
@keyframes vp-nudge{
  0%,100%{transform:translate(-3px,-3px)}
  50%{transform:translate(-3px,1px)}
}

/* ============================================================================
   8 · BIOGRAFÍA
   doctora-sombra.webp no es una sombra: es la misma fotografía con un halo
   blanco que se funde con el fondo mediante mix-blend-mode. Por eso los dos
   archivos se dejan como hermanos directos de .bio-stage y sin animación de
   entrada propia: agruparlos o transformarlos crea un contexto de apilamiento
   que anula la fusión y deja el fondo blanco a la vista, con la silueta
   duplicada. El movimiento de esta sección lo aporta el panel oscuro.
   ========================================================================== */

.bio-shadow{position:absolute;left:52.35%;top:0;width:93.44%;max-width:none;mix-blend-mode:darken}
.bio-doctor{position:absolute;z-index:3;width:44.36%;left:54.21%;top:4.81%;pointer-events:none}
.bio-shadow-m{display:none}

/* ============================================================================
   9 · ENFOQUE Y FOTOGRAFÍAS
   ========================================================================== */

.empathy-figure{margin:0;overflow:hidden}
.empathy-figure-wide{width:74%;border-radius:0 calc(75 * var(--u)) 0 calc(75 * var(--u))}
.empathy-figure-tall{
  position:absolute;right:0;top:30%;width:49.5%;
  border-radius:calc(55 * var(--u));border:5px solid #fff;
}
.empathy-wide,.empathy-tall{width:100%;display:block;border:0;border-radius:0;position:static}

/* ============================================================================
   11 · SERVICIOS
   ========================================================================== */

.services-visual{margin:0}
.services-visual img{width:100%;display:block}
.service-lists li{
  margin-inline:-10px;padding-block:3px;padding-inline:25px 10px;border-radius:7px;
  transition:background var(--d-hover),color var(--d-hover);
}
.service-lists li:before{left:10px}
@media (hover:hover) and (pointer:fine){
  .service-lists li:hover{background:#e9e9ec;color:#232325}
}

/* ============================================================================
   12 · PREGUNTAS FRECUENTES (acordeón)
   ========================================================================== */

.faq-photo{
  margin:calc(40 * var(--u)) 0 0;
  width:min(100%,427px);
  aspect-ratio:427/639;
  overflow:hidden;
  /* Forma tomada del PSD: esquinas circulares 81 / 201 / 100 / 23 px en 427x639 */
  border-radius:18.97% 47.07% 23.42% 5.39% / 12.68% 31.46% 15.65% 3.60%;
}
.faq-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}

.faq-item{display:block;border-top:1px solid #dcdcdf;padding:0}
.faq-item:last-child{border-bottom:1px solid #dcdcdf}
.faq-item > summary{
  display:grid;grid-template-columns:32px 1fr 22px;gap:20px;align-items:start;
  padding:25px 0;cursor:pointer;list-style:none;
  transition:opacity var(--d-hover);
}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary::marker{content:''}
.faq-item > summary:hover{opacity:.72}
.faq-item > summary:focus-visible{outline:3px solid #777;outline-offset:4px}
.faq-item h3{margin:0}
.faq-plus{position:relative;width:16px;height:16px;margin-top:5px;justify-self:end;transition:transform var(--d-menu) var(--e-out)}
.faq-plus::before,.faq-plus::after{content:'';position:absolute;background:#2a2a2c;border-radius:2px}
.faq-plus::before{left:0;right:0;top:calc(50% - .75px);height:1.5px}
.faq-plus::after{top:0;bottom:0;left:calc(50% - .75px);width:1.5px}
.faq-item[open] .faq-plus{transform:rotate(45deg)}
.faq-answer{overflow:hidden}
.faq-answer-inner{padding-bottom:26px;padding-right:42px}
html.js .faq-answer{transition:height var(--d-menu) var(--e-out)}
html.js .faq-answer-inner{opacity:0;transition:opacity calc(var(--d-menu) - 120ms) var(--e-out)}
html.js .faq-item[open] .faq-answer-inner{opacity:1;transition-delay:80ms}
html.js .faq-item.is-closing .faq-answer-inner{opacity:0;transition-delay:0ms}
html[data-motion="off"] .faq-answer,html[data-motion="off"] .faq-answer-inner{transition:none}

/* ============================================================================
   13 · UBICACIONES
   ========================================================================== */

.location-card{
  transform:translate3d(0,var(--lift,0px),0);
  transition:transform var(--d-hover) var(--e-out),border-color var(--d-hover),box-shadow var(--d-hover);
}
.location-card:hover,.location-card:focus-within{--lift:-3px;border-color:#a3a3a8;box-shadow:0 12px 30px #0000000f}
.location-card-top .icon{transition:transform var(--d-hover) var(--e-out)}
.location-card:hover .location-card-top .icon,
.location-card:focus-within .location-card-top .icon{transform:translateY(-2px)}
.location-card:hover > a .icon,.location-card:focus-within > a .icon{transform:translate(3px,-3px)}

.phone-box{
  margin-top:10px;
  gap:14px;
  padding:calc(18 * var(--u)) calc(30 * var(--u));
  font-size:clamp(19px,1.5vw,29px);
  letter-spacing:-.02em;
  border-radius:12px;
}
.phone-box .icon{width:1em;height:1em}
.phone-box:hover .icon{transform:none}

/* ============================================================================
   14 · CIERRE Y PIE
   ========================================================================== */

/* La foto se hunde bajo el pie, que se pinta por encima, para que el corte
   recto del archivo no quede a la vista sobre el blanco. */
.closing-doctor-wrap{position:absolute;left:-15.05%;top:auto;bottom:-22px;width:61.55%;z-index:2}
.closing-doctor{width:100%;position:static}

/* El pie se pinta por encima de la foto del cierre para tapar su corte. */
.footer{position:relative;z-index:3}

.footer-rule{
  display:block;grid-column:1/-1;height:1px;background:#3a3a3a;margin-bottom:6px;
  transform-origin:0 50%;
}
@media (min-width:901px){ .footer-inner{grid-template-columns:1fr 1.4fr 1fr} }
.footer nav a,.footer-contact a,.footer-name{transition:color var(--d-hover),opacity var(--d-hover)}
.footer-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #383838;padding-top:18px}
.copyright{border:0;padding:0;text-align:left;margin:0}

.to-top{
  position:fixed;z-index:45;
  right:max(18px,env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:50%;
  border:1px solid #d7d7db;background:#ffffffee;color:#1a1a1a;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;
  box-shadow:0 8px 22px #00000014;
  opacity:0;transform:translate3d(0,14px,0) scale(.92);pointer-events:none;
  transition:opacity var(--d-menu) var(--e-out),transform var(--d-menu) var(--e-out),border-color var(--d-hover);
}
.to-top .icon{width:20px;height:20px}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:#9c9ca1}
html:not(.js) .to-top{display:none}

/* ============================================================================
   15 · FORMULARIO DE CITA (modal)
   ========================================================================== */

.booking-dialog{
  opacity:0;transform:translate3d(0,16px,0) scale(.985);
  transition:opacity var(--d-menu) var(--e-out),transform var(--d-menu) var(--e-out);
}
.booking-dialog.is-open{opacity:1;transform:none}
.booking-dialog::backdrop{opacity:0;transition:opacity var(--d-menu) var(--e-out)}
.booking-dialog.is-open::backdrop{opacity:1}
/* Sin JavaScript el diálogo no puede abrirse como modal. En ese caso se
   muestra en la propia página al pulsar «Agenda tu consulta» (:target), con
   los datos de contacto directo, y se oculta el formulario porque la
   preparación del correo sí depende del script. */
html:not(.js) .booking-dialog{opacity:1;transform:none;display:none}
html:not(.js) .booking-dialog:target{
  display:block;position:static;margin:0 auto calc(60 * var(--u));
  max-height:none;box-shadow:none;border:1px solid #e1e1e4;
}
html:not(.js) .booking-dialog:target form,
html:not(.js) .booking-dialog:target .booking-result,
html:not(.js) .booking-dialog:target .dialog-close{display:none}
.booking-dialog input,.booking-dialog select{transition:border-color var(--d-hover),background var(--d-hover),box-shadow var(--d-hover)}
.booking-dialog input:focus,.booking-dialog select:focus{background:#fff;border-color:#8d8d90}
.booking-dialog input:user-invalid,.booking-dialog select:user-invalid{border-color:#b3453f;background:#fdf6f5}
.booking-mail{display:block;margin-top:8px;font-size:14px;color:#3d3d3f;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.dialog-close{transition:background var(--d-hover),transform var(--d-hover) var(--e-out)}
.dialog-close:hover{background:#e3e3e3;transform:rotate(90deg)}
html.js .booking-result{animation:vp-appear 320ms var(--e-out) 1}
@keyframes vp-appear{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* ============================================================================
   16 · CURSOR AUXILIAR
   ========================================================================== */

.cursor{position:fixed;left:0;top:0;width:0;height:0;z-index:95;pointer-events:none;opacity:0;
  transition:opacity 220ms var(--e-out);mix-blend-mode:difference}
html.cursor-on .cursor{opacity:1}
.cursor-dot,.cursor-ring{position:absolute;border-radius:50%;pointer-events:none}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;transform:translate3d(var(--cx,-50px),var(--cy,-50px),0)}
.cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #ffffffb3;
  transform:translate3d(var(--rx,-50px),var(--ry,-50px),0) scale(var(--rs,1));
  transition:opacity 200ms}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ============================================================================
   17 · MÓVIL · MENÚ DE PANTALLA COMPLETA CON EXPANSIÓN CIRCULAR
   ========================================================================== */

@media (max-width:900px){
  .site-header{height:82px}
  .menu-toggle{position:relative;z-index:70;transition:color var(--d-menu),border-color var(--d-menu),background var(--d-menu)}
  .menu-toggle[aria-expanded="true"]{color:#fff;background:transparent;border-color:#5a5a5a}

  .navigation{
    display:block;position:fixed;inset:0;top:0;left:0;right:0;
    width:100%;height:100dvh;max-height:none;
    padding:0;border-radius:0;box-shadow:none;background:var(--ink);
    z-index:60;visibility:hidden;
    clip-path:circle(0px at var(--iris-x,88%) var(--iris-y,41px));
    transition:clip-path var(--d-menu) var(--e-menu),visibility 0s linear var(--d-menu);
  }
  .navigation.is-open{
    visibility:visible;
    clip-path:circle(150% at var(--iris-x,88%) var(--iris-y,41px));
    transition:clip-path var(--d-menu) var(--e-menu),visibility 0s;
  }
  .nav-inner{
    display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:2px;
    height:100%;overflow-y:auto;
    padding:calc(96px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-left))
            calc(40px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-right));
  }
  .navigation > .nav-inner > a{
    padding:13px 4px;font-size:clamp(20px,6vw,30px);font-weight:800;letter-spacing:-.03em;color:#e9e9ea;
    opacity:0;transform:translate3d(0,16px,0);
    transition:opacity 300ms var(--e-out),transform 300ms var(--e-out),color var(--d-hover);
  }
  .navigation > .nav-inner > a:hover,.navigation > .nav-inner > a.is-active{background:transparent;color:#fff}
  .navigation.is-open > .nav-inner > a{opacity:1;transform:none}
  .navigation.is-open > .nav-inner > a:nth-child(1){transition-delay:130ms}
  .navigation.is-open > .nav-inner > a:nth-child(2){transition-delay:180ms}
  .navigation.is-open > .nav-inner > a:nth-child(3){transition-delay:230ms}
  .navigation.is-open > .nav-inner > a:nth-child(4){transition-delay:280ms}
  .navigation.is-open > .nav-inner > a:nth-child(5){transition-delay:330ms}
  .navigation.is-open > .nav-inner > a:nth-child(6){transition-delay:390ms}
  .navigation > .nav-inner > a > span::after{display:none}
  .navigation .nav-cta{
    margin-top:22px;text-align:center;padding:17px;font-size:16px;border-radius:10px;
  }
  html:not(.js) .navigation{position:static;height:auto;visibility:visible;clip-path:none;border-radius:0 0 16px 16px}
  html:not(.js) .navigation > .nav-inner > a{opacity:1;transform:none;font-size:16px}

  /* En móvil: sin inclinación 3D, sin cursor auxiliar, sin magnetismo */
  .area-grid [data-anim]{--d-content:700ms;--anim-shift:26px}
  .area-card{transform:translate3d(0,var(--lift,0px),0)}
  .button{transform:translate3d(0,calc(var(--my,0px) + var(--lift,0px)),0) scale(var(--press,1))}
  /* En móvil y tablet se usa la composición del PSD «FOTO QUE DEBES USAR EN
     MOVIL Y EN TABLET»: el mismo recorte con su fondo de sombra en modo
     oscurecer. Esa capa no contiene el cuerpo de la doctora (solo la sombra
     y la silla), así que no hay riesgo de silueta duplicada.

     Las proporciones salen medidas del propio PSD, tomando como unidad el
     ancho del recorte (622 px en el archivo):
       ancho de la sombra   953/622 = 1.5322
       desplazada a la derecha  114/622 = 0.1833
       sobresale por abajo       46/622 = 0.0740
     Así la sombra encaja con la foto sea cual sea el tamaño en pantalla.
     --bx centra el conjunto (foto + sombra util) dentro del contenedor. */
  /* --bw es el ancho de la foto; --bx, su posición horizontal. El conjunto se
     centra, pero nunca se sale por la izquierda: en pantallas estrechas se
     apoya en el margen y es la cola suave de la sombra la que se recorta.

     CUIDADO con los porcentajes dentro de una variable: no se calculan al
     definirla, sino en cada propiedad que la usa. Un 66% vale 66% del ancho
     en «width» y «left», pero 66% del ALTO en «bottom». Por eso el
     desplazamiento vertical se hace con margin-bottom, donde los porcentajes
     sí se resuelven contra el ancho, y no con «bottom». */
  .bio-stage{
    --bw:min(430px,86%);
    --bx:max(2%, calc((100% - 1.45 * var(--bw)) / 2));
    padding-bottom:calc(1.18 * var(--bw));
  }
  .bio-shadow{display:none}
  .bio-shadow-m{
    display:block;position:absolute;z-index:1;pointer-events:none;
    left:calc(var(--bx) + 0.1833 * var(--bw));
    right:auto;top:auto;
    bottom:0;margin-bottom:calc(-0.074 * var(--bw));
    width:calc(1.5322 * var(--bw));max-width:none;
    mix-blend-mode:darken;
  }
  .bio-doctor{
    left:var(--bx);right:auto;top:auto;bottom:0;
    width:var(--bw);max-width:none;
  }
  /* La foto termina en un recorte del propio archivo (la doctora está cortada
     a la altura del muslo). Si su borde inferior coincide con el arranque del
     pie, ese corte se lee como un tajo. Se deja aire debajo, igual que en
     escritorio, para que el recorte caiga sobre el blanco. */
  /* El archivo corta la figura en recto por abajo. En vez de disimularlo,
     se esconde: la foto se hunde bajo el pie y el pie se pinta por encima
     (ver .footer mas abajo). Lo que se ve es el borde del pie, no un
     corte a media figura. */
  .closing-doctor-wrap{left:-14%;top:auto;bottom:-34px;width:64%}
  .faq-photo{margin-top:30px;width:min(100%,330px)}
  .to-top{width:42px;height:42px;right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
  .footer-bottom{gap:12px}
  .empathy-figure-wide{width:88%;border-radius:0 35px}
  .empathy-figure-tall{width:60%;top:38%;border-radius:28px;border-width:4px}
  .materno-figure{border-radius:65px 35px 45px 35px}
  .hero-doctor-wrap{width:260px;left:auto;right:12%;bottom:0}
}

/* Tablet (601-900 px): la foto se agranda un poco y el conjunto se corre
   hacia la derecha. Para centrarlo se usa 1.08 en vez de 1.45 del ancho: se
   toma como referencia el nucleo oscuro de la sombra y no su cola suave, que
   es casi imperceptible y puede recortarse sin perdida. */
@media (min-width:601px) and (max-width:900px){
  .bio-stage{
    --bw:min(500px,72%);
    --bx:max(2%, calc((100% - 1.08 * var(--bw)) / 2));
  }

}

/* El hero de tablet arrastraba la altura pensada para el telefono y dejaba un
   hueco muerto de unos 420 px bajo el texto, a la izquierda. Se ajusta la
   altura al contenido real, la doctora se pega al borde derecho y la etiqueta
   de Instagram baja a esa esquina para llenarla con contenido.

   Solo desde 741 px: por debajo, los botones ocupan casi todo el ancho y al
   subir la doctora se le echarian encima. Ahi se mantiene el hero alto, con
   la doctora por debajo de los botones. */
@media (min-width:741px) and (max-width:900px){
  .hero{min-height:520px}
  .hero-doctor-wrap{width:290px;right:0}
  /* El texto deja de amontonarse arriba: la columna ocupa todo el alto del
     hero y los botones se empujan al fondo, asi el bloque abarca el espacio
     en vez de dejarlo vacio abajo a la izquierda. */
  .hero-content{padding-top:52px}
  .hero h1{font-size:clamp(38px,5.2vw,46px)}
  .hero-description{max-width:56%}
  .hero .button-row{margin-top:52px}
  /* Los botones quedan a la altura del cuerpo de la doctora, su parte mas
     ancha. Se recorta el relleno lateral para que no la toquen. */
  .hero .button{padding-inline:17px}
}

@media (max-width:600px){
  .empathy-figure-wide{width:76%}
  .empathy-figure-tall{width:51%;top:31%}
  .materno-figure{width:78%;max-width:330px;margin-inline:auto;border-radius:85px 45px 60px 45px}
  .hero-doctor-wrap{width:250px;right:12%}
  /* Algo mas baja de ancho que antes: al subirla para dejar aire sobre el
     pie, con 350 px su cabeza llegaba a tocar el boton de cita. */
  /* TELEFONO: la foto se apoya en la division (bottom:0) y se agranda.
     Asi su borde inferior coincide con el arranque del pie y el corte
     recto del archivo deja de leerse como un tajo. */
  .closing-doctor-wrap{width:356px;max-width:none;left:calc(50% - 178px);top:auto;bottom:0}
  .faq-answer-inner{padding-right:0}
  .faq-item > summary{grid-template-columns:25px 1fr 20px;gap:16px;padding:24px 0}
}

@media (max-width:370px){
  .closing-doctor-wrap{width:330px;left:calc(50% - 165px)}
}

/* ============================================================================
   18 · MOVIMIENTO REDUCIDO O PAUSADO
   Cuando el visitante pide menos movimiento, o pulsa el control del pie, todo
   el contenido queda visible y quieto. Las transiciones de interfaz necesarias
   (acordeón, modal) se resuelven de inmediato.
   ========================================================================== */

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation-duration:1ms!important;
  animation-iteration-count:1!important;
  transition-duration:1ms!important;
  scroll-behavior:auto!important;
}
html[data-motion="off"] [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}
html[data-motion="off"] .anim-line-i,
html[data-motion="off"] .anim-word-i{transform:none!important;opacity:1!important}
html[data-motion="off"] [data-parallax],
html[data-motion="off"] [data-parallax-in]{transform:none!important}
html[data-motion="off"] .icon[data-draw]{stroke-dasharray:none!important;stroke-dashoffset:0!important}
html[data-motion="off"] .cursor{display:none}
html[data-motion="off"]