/* ==========================================================================
   Aura Podología — La Huella
   Los colores salen del propio logotipo: azul marino, lavanda y crema, con
   líneas tostadas. El verde se reserva para WhatsApp y el mapa de calor solo
   aparece en la huella, cuando se la toca.
   ========================================================================== */

/* Fuentes autoalojadas: servirlas desde un tercero enviaría la IP de cada
   visitante fuera sin consentimiento. Con los archivos aquí, la web no hace
   ni una sola petición externa al cargar (y la política de cookies lo afirma). */
@font-face{
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../assets/fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Respaldo con las medidas de Sora: mientras llega la fuente, el texto ocupa
   lo mismo y la página no salta al cambiar. */
@font-face{
  font-family: 'Sora Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 113%;
  ascent-override: 86%;
  descent-override: 22%;
  line-gap-override: 0%;
}
:root{
  /* Suelos */
  --bg: #fbf8f1;           /* blanco cálido: el suelo de casi todo */
  --crema: #f3ecdc;        /* la crema del logotipo */
  --peri: #d6dcee;         /* la lavanda del logotipo */
  --peri-2: #e7ebf7;       /* lavanda clara para secciones enteras */
  --blanco: #ffffff;
  /* Tinta */
  --navy: #26276a;         /* el azul del logotipo: texto y bloques */
  --noche: #232463;        /* secciones oscuras */
  --noche-2: #1a1b4e;      /* pie de página */
  --soft: #4c4e86;         /* texto secundario sobre claro */
  --lav: #c5cbee;          /* texto secundario sobre oscuro */
  --azul: #4a52e0;         /* acento: enlaces y estados activos */
  --tan-2: #b9a783;         /* las líneas tostadas del logotipo, un punto más oscuras para que se vean */
  --rule: rgba(38, 39, 106, 0.14);
  --line: rgba(214, 220, 238, 0.2);
  /* WhatsApp, con su verde */
  --wa: #25d366;
  --wa-2: #3ee07a;
  --wa-ink: #06301c;
  --wa-pale: #e2f8ea;

  /* La huella en frío (los azules de la marca) y en calor (mapa de presiones) */
  --f0: #ccd4ef; --f1: #b9c3ea; --f2: #a5b0e4; --f3: #8a96da; --f4: #6f79cc; --f5: #565dba; --f6: #3e409c; --f7: #26276a;
  --c0: #4648a3; --c1: #6a3fc0; --c2: #9a3fb8; --c3: #c9418f; --c4: #e8506a; --c5: #f66d45; --c6: #f99330; --c7: #fbbf24;

  --font: 'Sora', 'Sora Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(20px, 5.09vw, 104px);
  --header-h: clamp(64px, 6.4vw, 96px);
  --wrap: 1240px;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.site{
  line-height: 1.6;
  letter-spacing: -0.006em;
}

img, picture, svg{ display: block; max-width: 100%; }
img{ height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }
[hidden]{ display: none !important; }

::selection{ background: var(--navy); color: var(--bg); }

:focus-visible{
  outline: 3px solid var(--focus, var(--azul));
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link{
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-s);
  background: var(--navy);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus{ top: 16px; }

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

.wrap{
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.5em 1.4em;
  border: 0;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: translate 0.25s var(--ease-out), background-color 0.2s, box-shadow 0.3s, color 0.2s;
}
.btn svg, .btn .i{ flex: none; width: 1.3em; height: 1.3em; }
.btn:active{ scale: 0.97; }
/* Iconos de marca como máscara: toman el color del texto y viven en un solo archivo. */
.i{ display: inline-block; background: currentColor; }
.i-wa{
  -webkit-mask: url('../assets/icons/whatsapp.svg') center / contain no-repeat;
          mask: url('../assets/icons/whatsapp.svg') center / contain no-repeat;
}

/* Todo lo que abre WhatsApp va en su verde, con tinta oscura para que se lea. */
.btn-wa{
  background: var(--wa);
  color: var(--wa-ink);
  font-weight: 700;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.5);
}
.btn-ghost{
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
@media (hover: hover) and (pointer: fine){
  .btn-wa:hover{ background: var(--wa-2); translate: 0 -2px; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.55); }
  .btn-ghost:hover{ background: color-mix(in srgb, currentColor 10%, transparent); }
  .btn-ghost:hover svg{ translate: 3px 0; }
}
.btn-ghost svg{ transition: translate 0.3s var(--ease-out); }
.btn-s{ min-height: 44px; padding-inline: 1.05em 1.2em; font-size: 1rem; }
.btn-m{ min-height: 46px; padding-inline: 1.1em 1.25em; font-size: 1rem; }
.btn-xl{
  min-height: clamp(58px, 4.6vw, 70px);
  padding-inline: 1.45em 1.7em;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
}
.btn-block{ width: 100%; }

/* ==========================================================================
   Cabecera
   ========================================================================== */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: var(--navy);
  transition: background-color 0.35s, box-shadow 0.35s;
}
.site-header[id].is-scrolled,
.site-header[id][data-nav-open="true"]{
  background: rgba(251, 248, 241, 0.94);
  box-shadow: 0 1px 0 var(--rule);
}
@supports (backdrop-filter: blur(1px)){
  .site-header[id].is-scrolled{ background: rgba(251, 248, 241, 0.8); backdrop-filter: blur(16px) saturate(1.5); }
}
.header-inner{
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding-inline: var(--gutter);
}
.brand{
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.95vw, 16px);
  color: inherit;
  text-decoration: none;
}
/* El logotipo es una máscara: toma el azul sobre claro y la crema sobre oscuro. */
.logo{
  display: block;
  width: clamp(96px, 8.6vw, 132px);
  aspect-ratio: 550 / 260;
  background: currentColor;
  -webkit-mask: url('../assets/plates/nav-logo.png') center / contain no-repeat;
          mask: url('../assets/plates/nav-logo.png') center / contain no-repeat;
}
.brand .logo{ margin-top: -0.4vw; margin-left: -6px; }
.brand-name{
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav{
  display: none;
  align-items: center;
  gap: clamp(18px, 2.3vw, 38px);
  margin-left: auto;
}
.main-nav a{
  position: relative;
  padding-block: 10px;
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  font-weight: 450;
  text-decoration: none;
  white-space: nowrap;
}
.main-nav a::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.main-nav a[aria-current="page"]::after{ transform: scaleX(1); }
@media (hover: hover) and (pointer: fine){
  .main-nav a:hover::after{ transform: scaleX(1); }
}
.header-cta{ display: none; margin-left: clamp(16px, 1.9vw, 30px); }

.nav-toggle{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  margin-right: -10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-toggle svg{ grid-area: 1 / 1; width: 26px; height: 26px; transition: opacity 0.2s, transform 0.3s var(--ease-out); }
.nav-toggle .icon-close{ opacity: 0; transform: rotate(-45deg); }
[data-nav-open="true"] .nav-toggle .icon-open{ opacity: 0; transform: rotate(45deg); }
[data-nav-open="true"] .nav-toggle .icon-close{ opacity: 1; transform: none; }

.mobile-nav{
  display: grid;
  gap: 2px;
  padding: 6px var(--gutter) 22px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--rule);
}
.mobile-nav a:not(.btn){
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--rule);
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
}
.mobile-nav .btn{ margin-top: 18px; }
/* Con JS el panel empieza cerrado; sin JS se queda a la vista como lista normal. */
@media (scripting: enabled){
  .mobile-nav{ display: none; }
  [data-nav-open="true"] .mobile-nav{ display: grid; }
}

@media (min-width: 1024px){
  .main-nav{ display: flex; }
  .header-cta{ display: inline-flex; }
  .nav-toggle, .mobile-nav, [data-nav-open="true"] .mobile-nav{ display: none; }
}

/* ==========================================================================
   La huella: bandas de presión
   ========================================================================== */
.pie{ display: block; width: 100%; height: 100%; overflow: visible; }
.pie{ --b0: var(--f0); --b1: var(--f1); --b2: var(--f2); --b3: var(--f3); --b4: var(--f4); --b5: var(--f5); --b6: var(--f6); --b7: var(--f7); --pie-linea: rgba(251, 248, 241, 0.75); }
.pie-calor{ --b0: var(--c0); --b1: var(--c1); --b2: var(--c2); --b3: var(--c3); --b4: var(--c4); --b5: var(--c5); --b6: var(--c6); --b7: var(--c7); --pie-linea: rgba(255, 255, 255, 0.5); }
.b{ fill-rule: evenodd; stroke: var(--pie-linea); stroke-width: 1; vector-effect: non-scaling-stroke; }
.b0{ fill: var(--b0); stroke: none; } .b1{ fill: var(--b1); } .b2{ fill: var(--b2); } .b3{ fill: var(--b3); }
.b4{ fill: var(--b4); } .b5{ fill: var(--b5); } .b6{ fill: var(--b6); } .b7{ fill: var(--b7); }

/* Huella con una zona en calor. Cada tratamiento enciende su parte del pie:
   la capa de calor lleva un grupo por zona, recortado con la forma que le
   corresponde (definida una vez por página, junto a las bandas), y se enseña
   el del tratamiento señalado. Estudio biomecánico y diagnóstico encienden el
   pie entero. */
.zf, .foot{ position: relative; aspect-ratio: 543 / 978; }
.zf .pie, .foot .pie{ position: absolute; inset: 0; }
.cz{ opacity: 0; transition: opacity 0.6s var(--ease-out); }
[data-zona="quiropodia"] > .pie-calor .cz-quiropodia,
[data-zona="ortesis-silicona"] > .pie-calor .cz-ortesis-silicona,
[data-zona="verrugas-plantares"] > .pie-calor .cz-verrugas-plantares,
.zf[data-zona="plantillas-personalizadas"] > .pie-calor .cz-entero,
.zf[data-zona="diagnostico-podologico"] > .pie-calor .cz-entero{ opacity: 1; }

/* En la portada hay además una capa con el mapa entero que se abre en círculo:
   desde el cursor al pasar por la huella, desde el punto del tratamiento
   cuando este es de pie entero, y al bajar con el scroll. */
.foot{
  --hx: 50%;
  --hy: 50%;
  --hr: 0%;
  --calor-desde: 0.24;
  --calor-k: 520%;
  --hs: clamp(0%, calc((var(--p, 0) - var(--calor-desde)) * var(--calor-k)), 140%);
}
.foot .pie-barrido{
  clip-path: circle(max(var(--hr), var(--hs)) at var(--hx) var(--hy));
  transition: clip-path 0.8s var(--ease-out);
}
.foot[data-zona="plantillas-personalizadas"], .foot[data-zona="diagnostico-podologico"], .foot.is-heat{ --hr: 135%; }

/* Huella pequeña como tinta: la silueta sirve de máscara y toma el color que se le dé. */
.marca{
  display: block;
  aspect-ratio: 543 / 978;
  background: currentColor;
  -webkit-mask: url('../assets/huella-marca.svg') center / contain no-repeat;
          mask: url('../assets/huella-marca.svg') center / contain no-repeat;
}

/* Las ondas del logotipo, de fondo */
.olas{
  position: absolute;
  inset: -8% -4% -8% -4%;
  z-index: -1;
  background: url('../assets/olas.svg') top center / 190% auto no-repeat;
  opacity: 0.85;
  pointer-events: none;
}
@media (min-width: 760px){ .olas{ background-size: cover; background-position: center; } }

/* ==========================================================================
   Portada: la huella es el menú
   ========================================================================== */
.hero{
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  padding: calc(var(--header-h) + 18px) var(--gutter) 34px;
  overflow: clip;
}
.hero-copy{ position: relative; z-index: 2; }
.hero h1{
  font-size: clamp(2.45rem, 11.2vw, 4rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.hero h1 .l{ display: block; overflow: clip; overflow-clip-margin: 0.14em; }
.hero h1 .l > span{ display: block; }
.hero-lede{
  margin-top: 0.9em;
  max-width: 24em;
  color: var(--soft);
  font-size: clamp(1.125rem, 4.6vw, 1.375rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.hero .btn-xl{ margin-top: 1.7rem; }

.status{
  display: flex;
  align-items: center;
  gap: 0.72em;
  margin-top: 1.05rem;
  min-height: 1.6em;
  color: var(--soft);
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.3;
}
.status-dot{
  flex: none;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--tan-2);
  transition: background-color 0.4s, box-shadow 0.4s;
}
[data-state="presencial"] .status-dot{ background: var(--azul); box-shadow: 0 0 0 0.3em rgba(74, 82, 224, 0.18); }
[data-state="telefono"] .status-dot{ background: #17b356; box-shadow: 0 0 0 0.3em rgba(37, 211, 102, 0.22); }
@media (prefers-reduced-motion: no-preference){
  [data-state="presencial"] .status-dot, [data-state="telefono"] .status-dot{ animation: late 2.4s var(--ease-in-out) infinite; }
}
@keyframes late{ 50%{ box-shadow: 0 0 0 0.55em rgba(74, 82, 224, 0); } }

.foot{
  z-index: 1;
  width: min(62vw, 290px);
  margin: 30px auto 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.foot.is-heat .pie-barrido{ transition-duration: 0.9s; }
/* En móvil no hay lista al lado: el rótulo dice qué tratamiento señala la huella. */
.foot-rotulo{
  position: absolute;
  left: 50%;
  bottom: -18px;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 1.1em;
  border-radius: 999px;
  background: var(--navy);
  color: var(--bg);
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.36);
}
.foot-rotulo svg{ width: 1em; height: 1em; }
.hero-pista{ display: none; }

.zones{ display: none; position: relative; z-index: 3; }
.zones ol{ display: grid; }
.zone{
  display: grid;
  gap: 0.3em;
  text-decoration: none;
  transition: color 0.25s;
}
.zone-n{
  color: var(--soft);
  font-size: clamp(0.85rem, 1vw, 1rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.zone-t{
  position: relative;
  justify-self: start;
  font-size: clamp(1.1rem, 1.36vw, 1.36rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.zone-t svg{
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-left: 0.3em;
  vertical-align: -0.04em;
  transition: transform 0.3s var(--ease-out);
}
.zone-t::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.42em;
  height: 2px;
  border-radius: 2px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.zone.is-active{ color: var(--azul); }
.zone.is-active .zone-t{ font-weight: 650; }
.zone.is-active .zone-t::after{ transform: scaleX(1); }
.zone.is-active .zone-t svg{ transform: translateX(0.22em); }

/* Líneas guía: las dibuja el script con las posiciones reales de cada elemento. */
.hero-lines{
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero-lines path{
  fill: none;
  stroke: var(--tan-2);
  stroke-width: 1.25;
  stroke-linecap: round;
  transition: stroke 0.3s;
}
.hero-lines circle{ fill: var(--bg); stroke: var(--tan-2); stroke-width: 1.5; transition: fill 0.3s, stroke 0.3s; }
.hero-lines .is-active path{ stroke: var(--azul); stroke-width: 2; }
.hero-lines .is-active circle{ fill: var(--azul); stroke: var(--azul); }

@media (min-width: 1024px){
  .hero{
    --pie-h: clamp(380px, calc(100svh - var(--header-h) - 78px), 780px);
    display: block;
    height: max(100svh, 560px);
    max-height: 980px;
    padding: 0;
  }
  .hero-copy{
    position: absolute;
    left: var(--gutter);
    top: calc(50% + 14px);
    width: min(38vw, 620px);
    transform: translateY(-50%);
  }
  .hero h1{ font-size: clamp(2.7rem, 4.5vw, 5.4rem); }
  .hero-lede{ margin-top: 0.85em; max-width: 21.6em; font-size: clamp(1.1rem, 1.5vw, 1.6rem); line-height: 1.36; }
  .hero .btn-xl{ margin-top: clamp(24px, 2.6vw, 44px); }

  .foot{
    --calor-desde: 0.03;
    --calor-k: 330%;
    position: absolute;
    left: 58.5%;
    top: calc(var(--header-h) + 14px);
    width: auto;
    height: var(--pie-h);
    margin: 0;
    translate: -50% 0;
    cursor: pointer;
  }
  .foot-rotulo{ display: none; }
  .zones{
    display: block;
    position: absolute;
    left: 78.5%;
    right: 16px;
    top: calc(var(--header-h) + 14px + var(--pie-h) / 2);
    margin: 0;
    transform: translateY(-50%);
  }
  .zones ol{ gap: clamp(18px, calc(var(--pie-h) * 0.058), 46px); }
}
/* entre 1024 y 1280 el texto y la huella van más justos: la huella cede sitio */
@media (min-width: 1024px) and (max-width: 1279px){
  .foot, .hero-pista{ left: 60.5%; }
  .zones{ left: 80%; right: 10px; }
  .hero-copy{ width: 36vw; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
  .hero-pista{
    display: flex;
    align-items: center;
    gap: 0.6em;
    position: absolute;
    left: 58.5%;
    bottom: 22px;
    translate: -50% 0;
    color: var(--soft);
    font-size: 0.9rem;
    white-space: nowrap;
    transition: opacity 0.4s;
  }
  .hero-pista::before{
    content: '';
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c2), var(--c7));
  }
  .hero.ha-tocado .hero-pista{ opacity: 0; }
}

/* ==========================================================================
   El pie en cifras
   ========================================================================== */
.cifras{
  padding-block: clamp(44px, 6vw, 92px);
  background: var(--navy);
  color: var(--bg);
  --focus: #fff;
}
.cifras-pre{ color: var(--lav); font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 500; }
.cifras-list{ display: grid; margin-top: clamp(10px, 1.4vw, 20px); }
.cifras-list li{
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 10px;
  border-top: 1px solid var(--line);
}
.cifras-n{
  flex: none;
  font-size: clamp(3.4rem, 9.4vw, 8.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.cifras-n i{ color: var(--f3); font-style: normal; font-weight: 500; }
/* el hueco del número final queda reservado: al contar no se mueve nada */
.cifras-n span{ display: inline-block; }
.cifras-n .d2{ min-width: 1.26em; }
.cifras-n .d3{ min-width: 1.86em; }
.cifras-l{ color: var(--lav); font-size: clamp(1.05rem, 1.45vw, 1.4rem); line-height: 1.25; text-wrap: balance; }
.cifras-post{ margin-top: clamp(20px, 2.6vw, 38px); font-size: clamp(1.2rem, 1.9vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; }
@media (min-width: 860px){
  .cifras-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 70px); border-top: 1px solid var(--line); }
  .cifras-list li{ display: grid; gap: 4px; align-content: start; padding-block: clamp(14px, 1.8vw, 26px) 0; border-top: 0; }
  .cifras-l{ max-width: 13em; }
}

/* ==========================================================================
   Secciones
   ========================================================================== */
.sec{ --sec-pad: clamp(72px, 9vw, 150px); position: relative; padding-block: var(--sec-pad); overflow-x: clip; }
.sec-claro{ background: var(--bg); }
.sec-crema{ background: var(--crema); }
.sec-peri{ background: var(--peri-2); }
.sec-blanco{ background: var(--blanco); }
.sec-noche{ background: var(--noche); color: var(--bg); --focus: #fff; }
.sec-noche ::selection{ background: var(--bg); color: var(--navy); }

.h2{
  font-size: clamp(2.05rem, 4.4vw, 4.2rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h3{
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.lead{
  margin-top: 1.1em;
  max-width: 33em;
  color: var(--soft);
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.sec-noche .lead{ color: var(--lav); }
.sec p{ max-width: 66ch; }

.go{
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  color: var(--azul);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, currentColor 36%, transparent);
  transition: text-decoration-color 0.25s;
}
.go svg{ width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .go:hover{ text-decoration-color: currentColor; }
  .go:hover svg{ transform: translateX(4px); }
}
.sec-peri .go{ color: var(--navy); }

/* ==========================================================================
   El test: tres preguntas
   ========================================================================== */
.test-grid{ display: grid; gap: clamp(28px, 4vw, 64px); }
.test-pie{ display: none; }
.test{
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 560px;
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--r-l);
  background: var(--blanco);
  box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.3);
}
.test-top{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.test-pasos{ display: flex; align-items: center; gap: 24px; padding-left: 8px; }
.test-pasos .marca{ width: 19px; color: var(--peri); rotate: 90deg; transition: color 0.5s var(--ease-out), scale 0.5s var(--ease-back); }
.test-pasos .marca:nth-child(even){ scale: -1 1; translate: 0 5px; }
.test-pasos .marca:nth-child(odd){ translate: 0 -5px; }
.test-pasos .marca.es-hecho{ color: var(--navy); }
.test-pasos .marca.es-ahora{ color: var(--azul); scale: 1.25 1.25; }
.test-pasos .marca:nth-child(even).es-ahora{ scale: -1.25 1.25; }
.test-cuenta{ color: var(--soft); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.test-leyenda{
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.test-leyenda:focus{ outline: none; }
.test-ops{ display: grid; gap: 10px; margin-top: 18px; }
.op{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 18px 12px 20px;
  border: 0;
  border-radius: 16px;
  background: var(--peri-2);
  color: var(--navy);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, translate 0.25s var(--ease-out);
}
.op svg{ width: 1.15em; height: 1.15em; opacity: 0.5; transition: transform 0.3s var(--ease-out), opacity 0.2s; }
@media (hover: hover) and (pointer: fine){
  .op:hover{ background: var(--peri); translate: 4px 0; }
  .op:hover svg{ transform: translateX(4px); opacity: 1; }
}
.op[aria-pressed="true"]{ background: var(--navy); color: var(--bg); }
.op[aria-pressed="true"] svg{ opacity: 1; }
.test-fin{ display: grid; gap: 12px; align-content: start; outline: none; }
.test-pre{ color: var(--soft); font-size: 1rem; }
.test-nombre{
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.test-texto{ color: var(--soft); }
.test-dias{ padding: 12px 16px; border-radius: 14px; background: var(--peri-2); font-weight: 500; }
.test-dias:empty{ display: none; }
.test-acciones{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 6px; }
.test-nota{ color: var(--soft); font-size: 0.94rem; }
.test-nav{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; align-self: end; }
.test-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--soft);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
}
.test-btn svg{ width: 1.1em; height: 1.1em; }
@media (hover: hover) and (pointer: fine){ .test-btn:hover{ color: var(--navy); } }
@media (prefers-reduced-motion: no-preference){
  .test-q:not([hidden]), .test-fin:not([hidden]){ animation: pregunta 0.55s var(--ease-out) both; }
  .test-q:not([hidden]) .op{ animation: pregunta 0.5s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 55ms + 80ms); }
  .op:nth-child(2){ --n: 1; } .op:nth-child(3){ --n: 2; } .op:nth-child(4){ --n: 3; } .op:nth-child(5){ --n: 4; }
}
@keyframes pregunta{ from{ opacity: 0; transform: translateX(26px); } }
/* Sin JavaScript el test no puede funcionar: mejor no enseñarlo. */
@media (scripting: none){ .test-sec{ display: none; } }
@media (min-width: 900px){
  .test-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .test-head{ position: sticky; top: calc(var(--header-h) + 28px); }
  .test-pie{ display: block; width: clamp(120px, 12vw, 170px); margin-top: clamp(28px, 3vw, 48px); }
}

/* ==========================================================================
   Tratamientos: carrusel
   ========================================================================== */
.trat{ padding-bottom: clamp(56px, 7vw, 110px); }
.trat-head{ display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; }
.carrusel-ctrl{ display: flex; gap: 10px; }
.redondo{
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: var(--bg);
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s, scale 0.2s var(--ease-out);
}
.redondo svg{ width: 22px; height: 22px; }
.redondo:disabled{ opacity: 0.3; cursor: default; }
.redondo:not(:disabled):active{ scale: 0.92; }
@media (hover: hover) and (pointer: fine){ .redondo:not(:disabled):hover{ background: var(--azul); } }
/* Sin JS las flechas no hacen nada: la pista se desliza igual con el dedo o el teclado. */
@media (scripting: none){ .carrusel-ctrl{ display: none; } }

.carrusel{ margin-top: clamp(24px, 3.6vw, 52px); }
.carrusel-pista{
  --borde: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  display: flex;
  gap: clamp(14px, 1.7vw, 24px);
  padding: 14px var(--borde) 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--borde);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar{ display: none; }
.carrusel-pista.is-drag{ scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.tarjeta{
  position: relative;
  flex: none;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  width: min(82vw, 390px);
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--r-l);
  background: var(--blanco);
  box-shadow: 0 0 0 1px var(--rule), 0 26px 50px -40px rgba(0, 0, 0, 0.33);
  scroll-snap-align: start;
  transition: translate 0.45s var(--ease-out), box-shadow 0.45s;
}
.tarjeta-pie{ width: 104px; margin-left: auto; margin-bottom: -6px; }
.tarjeta-pie .zf{ rotate: 6deg; transition: rotate 0.6s var(--ease-out); }
.carrusel-pista{ counter-reset: tarjeta; }
.tarjeta{ counter-increment: tarjeta; }
/* el número grande ocupa el hueco que deja la huella */
.tarjeta::before{
  content: counter(tarjeta, decimal-leading-zero);
  position: absolute;
  left: clamp(22px, 2.2vw, 30px);
  top: clamp(18px, 2vw, 26px);
  color: var(--peri);
  font-size: clamp(3.6rem, 5.4vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s;
}
.tarjeta-n{ display: flex; align-items: center; gap: 0.6em; color: var(--soft); font-size: 0.95rem; font-weight: 600; }
.tarjeta-n::before{ content: ''; width: 0.6em; height: 0.6em; border-radius: 50%; background: linear-gradient(135deg, var(--c3), var(--c7)); }
.tarjeta h3{
  font-size: clamp(1.6rem, 2.2vw, 2.05rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.tarjeta h3 a{ text-decoration: none; }
.tarjeta h3 a::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta-text{ color: var(--soft); font-size: 1rem; line-height: 1.55; }
.tarjeta-links{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 8px; }
@media (hover: hover) and (pointer: fine){
  .tarjeta:hover{ translate: 0 -8px; box-shadow: 0 0 0 1.5px var(--navy), 0 34px 60px -38px rgba(0, 0, 0, 0.42); }
  .tarjeta:hover .zf{ rotate: -3deg; }
  .tarjeta:hover::before{ color: var(--f2); }
  .tarjeta:hover .cz-entero{ opacity: 1; }
}
.tarjeta:focus-within{ box-shadow: 0 0 0 1.5px var(--navy), 0 34px 60px -38px rgba(0, 0, 0, 0.42); }
.carrusel-barra{
  width: min(100% - 2 * var(--gutter), var(--wrap));
  height: 4px;
  margin: 4px auto 0;
  border-radius: 4px;
  background: var(--rule);
  overflow: hidden;
}
.carrusel-barra span{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--navy);
  transform: scaleX(var(--v, 0.2)) translateX(calc(var(--x, 0) * 1%));
  transform-origin: left;
}
/* Las tarjetas se enderezan al entrar por el borde */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .tarjeta{ animation: tarjeta linear both; animation-timeline: view(inline); animation-range: entry 0% cover 28%; }
  }
}
@keyframes tarjeta{ from{ scale: 0.9; rotate: 3deg; } }

/* ==========================================================================
   Primera visita: tres pasos
   ========================================================================== */
.pasos-list{ position: relative; display: grid; gap: clamp(30px, 4vw, 56px); margin-top: clamp(34px, 5vw, 72px); counter-reset: paso; }
.paso{ position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 20px; align-content: start; }
.paso .marca{
  grid-row: span 2;
  width: 40px;
  color: var(--navy);
  opacity: calc(0.18 + var(--on, 1) * 0.82);
  transform: translateY(calc((1 - var(--on, 1)) * 18px));
}
.paso:nth-child(even) .marca{ scale: -1 1; }
.paso:nth-child(1){ --on: clamp(0, (var(--p, 1) - 0.2) * 9, 1); }
.paso:nth-child(2){ --on: clamp(0, (var(--p, 1) - 0.3) * 9, 1); }
.paso:nth-child(3){ --on: clamp(0, (var(--p, 1) - 0.4) * 9, 1); }
.paso h3{ counter-increment: paso; }
.paso h3::before{ content: counter(paso) '.'; margin-right: 0.4em; color: var(--azul); font-variant-numeric: tabular-nums; }
.paso p{ grid-column: 2; margin-top: 0.5em; color: var(--soft); }
@media (min-width: 860px){
  .pasos-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* la senda punteada avanza con el scroll y las pisadas se van marcando sobre ella */
  .pasos-list::before{
    content: '';
    position: absolute;
    left: 0;
    right: 8%;
    top: 21px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--tan-2) 0 7px, transparent 7px 16px);
    transform: scaleX(clamp(0, (var(--p, 1) - 0.12) * 2.9, 1));
    transform-origin: left;
  }
  .paso{ display: block; }
  .paso .marca{ width: 32px; margin: -8px 0 26px 14px; rotate: 90deg; }
}
.pasos-senda{ display: none; }
/* En pantallas anchas la sección se queda quieta y los tres pasos se suceden
   con el scroll, mientras la senda de pisadas avanza. */
@media (min-width: 900px) and (min-height: 600px) and (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .pasos{ padding-block: 0 clamp(60px, 7vw, 110px); }
  .pasos-track{ height: 270svh; }
  .pasos-pin{
    position: sticky;
    top: var(--header-h);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: center;
    height: calc(100svh - var(--header-h));
  }
  .pasos-senda{
    position: relative;
    display: flex;
    justify-content: space-between;
    width: min(100%, 360px);
    margin-top: clamp(30px, 4vw, 60px);
    padding-inline: 6px 14px;
  }
  .pasos-senda::before, .pasos-senda::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: repeating-linear-gradient(90deg, var(--tan-2) 0 7px, transparent 7px 16px);
  }
  .pasos-senda::after{ background: var(--navy); transform: scaleX(var(--p, 0)); transform-origin: left; }
  .pasos-senda .marca{
    position: relative;
    z-index: 1;
    width: 30px;
    color: var(--tan-2);
    rotate: 90deg;
    transition: color 0.5s var(--ease-out), scale 0.6s var(--ease-out);
  }
  .pasos-senda .marca:nth-child(odd){ translate: 0 -16px; }
  .pasos-senda .marca:nth-child(even){ translate: 0 16px; scale: -1 1; }
  [data-etapa] .pasos-senda .marca:nth-child(1),
  [data-etapa="1"] .pasos-senda .marca:nth-child(2),
  [data-etapa="2"] .pasos-senda .marca:nth-child(-n+3){ color: var(--navy); }
  [data-etapa="0"] .pasos-senda .marca:nth-child(1),
  [data-etapa="2"] .pasos-senda .marca:nth-child(3){ scale: 1.3; }
  [data-etapa="1"] .pasos-senda .marca:nth-child(2){ scale: -1.3 1.3; }

  .pasos-pin .pasos-list{ display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .pasos-pin .pasos-list::before{ display: none; }
  .pasos-pin .paso{
    grid-area: 1 / 1;
    display: block;
    opacity: 0;
    transform: translateY(46px);
    transition: opacity 0.55s var(--ease-out), transform 0.75s var(--ease-out);
  }
  .pasos-pin .paso .marca{ display: none; }
  .pasos-pin .paso h3{ font-size: clamp(2.1rem, 3.8vw, 3.8rem); line-height: 1.04; letter-spacing: -0.04em; }
  .pasos-pin .paso h3::before{
    content: counter(paso);
    display: block;
    margin: 0 0 0.04em -0.04em;
    color: var(--f1);
    font-size: clamp(6rem, 13vw, 13rem);
    font-weight: 700;
    line-height: 0.86;
    letter-spacing: -0.07em;
  }
  .pasos-pin .paso p{ margin-top: 0.9em; max-width: 27em; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.5; }
  [data-etapa="0"] .paso:nth-child(1),
  [data-etapa="1"] .paso:nth-child(2),
  [data-etapa="2"] .paso:nth-child(3){ opacity: 1; transform: none; }
  /* los pasos ya vistos se van hacia arriba, los que faltan esperan abajo */
  [data-etapa="1"] .paso:nth-child(1),
  [data-etapa="2"] .paso:nth-child(-n+2){ transform: translateY(-46px); }
  .pasos .domicilio{ margin-top: 0; }
}
.domicilio{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: clamp(40px, 5vw, 80px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-l);
  background: var(--bg);
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
}
.sec .domicilio{ max-width: none; }
.domicilio span{ flex: 1 1 22em; color: var(--soft); }

/* ==========================================================================
   Ariadna y su aura
   ========================================================================== */
.ella{ isolation: isolate; }
/* La luz de Ariadna: detrás de su foto el fondo es blanco y, entre la foto y
   el texto, se abre en ocho bandas (los azules de la huella) hasta el azul de
   la sección. Las bandas viven en el hueco que separa foto y texto: nunca
   pasan por detrás de la foto, que se funde por abajo y las dejaría verse a
   través. El dibujo comparte celda con la foto y se sale de ella hasta los
   bordes de la sección. Las bandas se ensanchan un poco al pasar con el scroll. */
.ella-grid{
  --ella-gap: 140px;
  /* ocho bandas caben justas en el hueco, con aire a los dos lados */
  --paso: calc((var(--ella-gap) - 34px) / 8 * (0.62 + var(--p, 0.5) * 0.38));
  display: grid;
  gap: var(--ella-gap);
  align-items: center;
}
.ella-grid > .retrato{ grid-area: 1 / 1; }
.ella-grid::before{
  --R: 1500px;
  --fin: calc(100% - 8 * var(--paso));
  content: '';
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  z-index: -1;
  margin: calc(-1 * var(--sec-pad)) calc(-1 * var(--gutter)) calc(18px - var(--ella-gap));
  background:
    linear-gradient(#fff 0 0) 0 0 / 100% max(0px, calc(var(--fin) - var(--R))) no-repeat,
    radial-gradient(circle at 50% calc(var(--fin) - var(--R)),
      #fff 0 var(--R),
      var(--f0) var(--R) calc(var(--R) + var(--paso)),
      var(--f1) calc(var(--R) + var(--paso)) calc(var(--R) + 2 * var(--paso)),
      var(--f2) calc(var(--R) + 2 * var(--paso)) calc(var(--R) + 3 * var(--paso)),
      var(--f3) calc(var(--R) + 3 * var(--paso)) calc(var(--R) + 4 * var(--paso)),
      var(--f4) calc(var(--R) + 4 * var(--paso)) calc(var(--R) + 5 * var(--paso)),
      var(--f5) calc(var(--R) + 5 * var(--paso)) calc(var(--R) + 6 * var(--paso)),
      var(--f6) calc(var(--R) + 6 * var(--paso)) calc(var(--R) + 7 * var(--paso)),
      var(--f7) calc(var(--R) + 7 * var(--paso)) calc(var(--R) + 8 * var(--paso)),
      var(--noche) calc(var(--R) + 8 * var(--paso)));
}
.retrato{ grid-area: 1 / 1; }
.ella-grid::before{
  --paso: calc(clamp(9px, 2.7vw, 13px) * (0.7 + var(--p, 0.5) * 0.6));
  --R: 560px;
  --fin: calc(100% - 8 * var(--paso));
  content: '';
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  z-index: -1;
  margin: calc(-1 * var(--sec-pad)) calc(-1 * var(--gutter)) calc(10px - var(--ella-gap));
  background:
    linear-gradient(#fff 0 0) 0 0 / 100% max(0px, calc(var(--fin) - var(--R))) no-repeat,
    radial-gradient(circle at 50% calc(var(--fin) - var(--R)),
      #fff 0 var(--R),
      var(--f0) var(--R) calc(var(--R) + var(--paso)),
      var(--f1) calc(var(--R) + var(--paso)) calc(var(--R) + 2 * var(--paso)),
      var(--f2) calc(var(--R) + 2 * var(--paso)) calc(var(--R) + 3 * var(--paso)),
      var(--f3) calc(var(--R) + 3 * var(--paso)) calc(var(--R) + 4 * var(--paso)),
      var(--f4) calc(var(--R) + 4 * var(--paso)) calc(var(--R) + 5 * var(--paso)),
      var(--f5) calc(var(--R) + 5 * var(--paso)) calc(var(--R) + 6 * var(--paso)),
      var(--f6) calc(var(--R) + 6 * var(--paso)) calc(var(--R) + 7 * var(--paso)),
      var(--f7) calc(var(--R) + 7 * var(--paso)) calc(var(--R) + 8 * var(--paso)),
      var(--noche) calc(var(--R) + 8 * var(--paso)));
}
.retrato{
  --aura-linea: rgba(38, 39, 106, 0.2);
  --aura-luz: var(--peri);
  position: relative;
  isolation: isolate;
  width: min(100%, 440px);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
}
.retrato picture, .retrato img{ position: absolute; inset: 0; width: 100%; height: 100%; }
.retrato img{ object-fit: contain; object-position: bottom; }
.retrato picture{ transform: translate3d(0, calc((0.5 - var(--p, 0.5)) * 26px), 0); }
/* el retrato se funde por abajo con lo que tenga detrás, sea liso o con ondas */
.retrato picture{
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
.aura, .aura::before{
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  aspect-ratio: 1;
}
.aura{
  left: 50%;
  top: 36%;
  width: 150%;
  translate: -50% -50%;
  background: repeating-radial-gradient(circle, transparent 0 19px, var(--aura-linea) 19px 20.5px);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
          mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  transform: scale(calc(0.8 + var(--p, 0.5) * 0.4));
}
.aura::before{
  content: '';
  inset: 24%;
  background: radial-gradient(circle, var(--aura-luz) 0 52%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference){
  .aura::before{ animation: aura 6s var(--ease-in-out) infinite alternate; }
}
@keyframes aura{ from{ transform: scale(0.94); } to{ transform: scale(1.06); } }

.creds{ display: grid; margin-top: clamp(22px, 2.6vw, 36px); border-top: 1px solid var(--line); }
.creds li{
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
.creds li::before{
  content: '';
  width: 0.62em;
  height: 0.62em;
  margin-top: 0.5em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--f2);
}
.ella-copy .btn{ margin-top: clamp(22px, 2.8vw, 38px); }
@media (min-width: 900px){
  .ella-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  /* en ancho, el arco se abre hacia la derecha: blanco a la izquierda, texto
     sobre azul. Su centro queda a la altura de la cintura, donde la foto se
     funde: ahí el arco está en su punto más alejado de ella. */
  .ella-grid{ --ella-gap: clamp(96px, 11.5vw, 176px); }
  .ella-grid::before{
    --R: clamp(1000px, 95vw, 1700px);
    margin: calc(-1 * var(--sec-pad)) calc(24px - var(--ella-gap)) calc(-1 * var(--sec-pad)) -100vw;
    background:
      linear-gradient(#fff 0 0) 0 0 / max(0px, calc(var(--fin) - var(--R))) 100% no-repeat,
      radial-gradient(circle at calc(var(--fin) - var(--R)) 74%,
        #fff 0 var(--R),
        var(--f0) var(--R) calc(var(--R) + var(--paso)),
        var(--f1) calc(var(--R) + var(--paso)) calc(var(--R) + 2 * var(--paso)),
        var(--f2) calc(var(--R) + 2 * var(--paso)) calc(var(--R) + 3 * var(--paso)),
        var(--f3) calc(var(--R) + 3 * var(--paso)) calc(var(--R) + 4 * var(--paso)),
        var(--f4) calc(var(--R) + 4 * var(--paso)) calc(var(--R) + 5 * var(--paso)),
        var(--f5) calc(var(--R) + 5 * var(--paso)) calc(var(--R) + 6 * var(--paso)),
        var(--f6) calc(var(--R) + 6 * var(--paso)) calc(var(--R) + 7 * var(--paso)),
        var(--f7) calc(var(--R) + 7 * var(--paso)) calc(var(--R) + 8 * var(--paso)),
        var(--noche) calc(var(--R) + 8 * var(--paso)));
  }
  .retrato{ width: min(100%, 520px); }
}

/* ==========================================================================
   Horario: venir es una cosa, escribir es otra
   ========================================================================== */
.horario-head{ display: grid; gap: 22px; }
.estado{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
  align-self: end;
  min-height: 5.4em;
  padding: 16px 20px;
  border-radius: var(--r-m);
  background: var(--blanco);
  box-shadow: 0 0 0 1px var(--rule);
}
.sec .estado{ max-width: 30em; }
.estado .status-dot{ width: 12px; height: 12px; align-self: center; }
.estado strong{ font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.estado span[data-estado-detalle]{ grid-column: 2; color: var(--soft); font-size: 0.96rem; line-height: 1.45; }

.horario{ display: grid; gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(26px, 3.4vw, 48px); }
.h-bloque{
  display: grid;
  align-content: start;
  gap: clamp(16px, 1.8vw, 24px);
  padding: clamp(18px, 2.6vw, 38px);
  border-radius: var(--r-l);
}
.h-consulta{ background: var(--peri-2); }
.h-wa{ background: var(--wa-pale); color: var(--wa-ink); }
.h-titulo{ display: flex; align-items: center; gap: 14px; }
.h-icono{
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--bg);
}
.h-icono svg, .h-icono .i{ width: 26px; height: 26px; }
.h-wa .h-icono{ background: var(--wa); color: var(--wa-ink); }
.h-titulo h3{ font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 650; line-height: 1.15; letter-spacing: -0.03em; }
.h-titulo p{ margin-top: 2px; color: var(--soft); font-size: 0.98rem; line-height: 1.4; }
.h-wa .h-titulo p, .h-wa .h-pie{ color: #1d5a3a; }

.h-tabla{ width: 100%; border-collapse: separate; border-spacing: clamp(4px, 0.7vw, 10px); table-layout: fixed; margin: 0 calc(clamp(4px, 0.7vw, 10px) * -1); width: calc(100% + 2 * clamp(4px, 0.7vw, 10px)); }
.h-tabla thead td{ width: clamp(96px, 11vw, 150px); }
.h-tabla thead th{ padding: 0 0 2px; font-size: 0.95rem; font-weight: 600; text-align: center; }
.h-tabla abbr{ display: inline-block; padding: 3px 10px; border-radius: 999px; text-decoration: none; transition: background-color 0.4s, color 0.4s; }
.h-tabla thead .is-today abbr{ background: var(--navy); color: var(--bg); }
.h-tabla tbody th{ padding: 0; text-align: left; font-weight: 400; line-height: 1.2; }
.h-tabla tbody th b{ display: block; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 650; letter-spacing: -0.02em; }
.h-tabla tbody th span{ display: block; margin-top: 3px; color: var(--soft); font-size: clamp(0.8rem, 1vw, 0.98rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-tabla td{ padding: 0; }
.celda{
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(56px, 6.4vw, 88px);
  border-radius: clamp(12px, 1.4vw, 18px);
}
.si .celda{ background: var(--navy); color: var(--bg); }
.si .tic{ width: clamp(22px, 2.4vw, 32px); height: auto; }
.no .celda{ border: 1.5px dashed rgba(38, 39, 106, 0.38); }
/* El tramo que está ocurriendo ahora mismo */
.si.is-now .celda{ background: var(--azul); }
/* mediodía: el hueco entre los dos tramos */
.h-pausa th span{ margin-top: 0; }
.h-pausa td{ height: clamp(24px, 2.8vw, 36px); }
.h-pausa td i{ display: block; height: 2px; background: repeating-linear-gradient(90deg, rgba(38, 39, 106, 0.28) 0 6px, transparent 6px 13px); }

/* «Ahora»: el punto cálido del mapa de calor marca el día y la hora en que estamos */
.h-rejilla{ position: relative; }
.h-aqui{
  position: absolute;
  left: var(--x0, 0px);
  right: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
  transition: top 0.8s var(--ease-out);
}
.h-aqui::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--c5);
}
.h-aqui-punto{
  position: absolute;
  left: var(--x, 0px);
  top: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c3), var(--c7));
  box-shadow: 0 0 0 3px var(--blanco);
}
.h-aqui-rotulo{
  position: absolute;
  left: var(--x, 0px);
  bottom: 15px;
  translate: -50% 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--bg);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--blanco);
}
.h-aqui.is-derecha .h-aqui-rotulo{ translate: -82% 0; }
.h-aqui.is-antes .h-aqui-rotulo{ bottom: auto; top: 15px; }
/* fuera del horario de la tabla: el punto se queda en el borde, hueco */
.is-fuera > .h-aqui-punto{ background: var(--blanco); box-shadow: 0 0 0 3px var(--c5); }
.h-aqui.is-fuera::before{ background: repeating-linear-gradient(90deg, var(--c5) 0 6px, transparent 6px 12px); }

/* la frase que dice qué pasa ahora mismo en cada bloque */
.h-ahora{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 4.2em;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--blanco);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}
.sec .h-ahora{ max-width: none; }
.h-ahora::before{
  content: '';
  width: 12px;
  height: 12px;
  margin-top: 0.36em;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: inset 0 0 0 2.5px var(--tan-2);
}
.h-ahora[data-state="si"]::before{ background: linear-gradient(135deg, var(--c3), var(--c7)); box-shadow: none; }
.h-wa .h-ahora{ background: rgba(255, 255, 255, 0.78); color: var(--wa-ink); }
.h-leyenda .l-ahora{ border-radius: 50%; background: linear-gradient(135deg, var(--c3), var(--c7)); }

.h-leyenda{ display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--soft); font-size: 0.94rem; }
.h-leyenda li{ display: flex; align-items: center; gap: 9px; }
.h-leyenda i{ width: 18px; height: 18px; border-radius: 6px; }
.l-si{ background: var(--navy); }
.l-no{ border: 1.5px dashed rgba(38, 39, 106, 0.4); }
.h-pie{ color: var(--soft); font-size: 0.98rem; }

.h-dias{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 0.6vw, 8px); }
.h-dias li{
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 12px;
  background: var(--wa);
  color: var(--wa-ink);
  font-size: 0.95rem;
  font-weight: 650;
}
.h-dias abbr{ text-decoration: none; }
.h-dias .is-today{ box-shadow: 0 0 0 3px var(--wa-pale), 0 0 0 5px var(--wa-ink); }
.h-franja{
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.7vw, 24px);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.sec .h-franja{ max-width: none; }
.h-linea{ position: relative; flex: 1; height: 10px; margin-inline: 8px; }
.h-linea-barra{ position: absolute; inset: 0; border-radius: 999px; background: rgba(6, 48, 28, 0.12); overflow: hidden; }
.h-linea-barra i{ display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--wa); transform-origin: left; }
.h-wa-punto{ position: absolute; top: 50%; width: 0; height: 0; transition: left 0.8s var(--ease-out); }
.h-wa-punto .h-aqui-punto{ left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.h-wa-punto .h-aqui-rotulo{ left: 0; bottom: 18px; background: var(--wa-ink); }
.h-wa-punto.is-izquierda .h-aqui-rotulo{ translate: -14px 0; }
.h-wa-punto.is-derecha .h-aqui-rotulo{ translate: calc(-100% + 14px) 0; }
.h-acciones{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 4px; }
.h-tel{ display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-size: 1.125rem; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.h-tel svg{ width: 1.15em; height: 1.15em; }
.tramos{ display: grid; margin-top: clamp(22px, 3vw, 40px); border-top: 1px solid var(--rule); }
.tramos li{ display: flex; flex-wrap: wrap; gap: 2px 18px; padding-block: 14px; border-bottom: 1px solid var(--rule); }
.tramos b{ min-width: 6.4em; font-weight: 650; }
.tramos .is-today b::after{ content: 'Hoy'; margin-left: 0.7em; padding: 2px 9px; border-radius: 999px; background: var(--navy); color: var(--bg); font-size: 0.78rem; }
@media (min-width: 960px){
  .horario-head{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: clamp(30px, 4vw, 64px); }
  .horario{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* La semana se va rellenando al llegar a la vista */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .horario[data-reveal] .si .celda{ scale: 0.4; opacity: 0; transition: scale 0.7s var(--ease-back), opacity 0.4s; transition-delay: calc(var(--col, 0) * 90ms + var(--fila, 0) * 140ms + 0.15s); }
  .horario[data-reveal] .no .celda{ opacity: 0; transition: opacity 0.6s 0.5s; }
  .horario[data-reveal] .tic path{ stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.5s var(--ease-out); transition-delay: calc(var(--col, 0) * 90ms + var(--fila, 0) * 140ms + 0.55s); }
  .horario[data-reveal] .h-linea-barra i{ transform: scaleX(0); transition: transform 1.3s var(--ease-out) 0.4s; }
  /* el marcador llega el último, cuando la semana ya está pintada */
  /* crece en vez de fundirse: un rótulo a medio aparecer no llega al contraste mínimo */
  .horario[data-reveal] .h-aqui, .horario[data-reveal] .h-wa-punto{ scale: 0; transform-origin: left center; transition: scale 0.6s var(--ease-out) 1.3s, top 0.8s var(--ease-out), left 0.8s var(--ease-out); }
  .horario[data-reveal].is-in .h-aqui, .horario[data-reveal].is-in .h-wa-punto{ scale: 1; }
  :not(.is-fuera) > .h-aqui-punto{ animation: aqui 2.4s var(--ease-in-out) infinite; }
  .h-ahora[data-state="si"]::before{ animation: aqui 2.4s var(--ease-in-out) infinite; }
  .horario[data-reveal] .h-dias li{ scale: 0.5; opacity: 0; transition: scale 0.6s var(--ease-back), opacity 0.3s; transition-delay: calc(var(--col, 0) * 80ms + 0.2s); }
  .horario[data-reveal].is-in .celda, .horario[data-reveal].is-in .h-dias li{ scale: 1; opacity: 1; }
  .horario[data-reveal].is-in .tic path{ stroke-dashoffset: 0; }
  .horario[data-reveal].is-in .h-linea-barra i{ transform: none; }
  .h-tabla td:nth-child(3), .h-dias li:nth-child(2){ --col: 1; }
  .h-tabla td:nth-child(4), .h-dias li:nth-child(3){ --col: 2; }
  .h-tabla td:nth-child(5), .h-dias li:nth-child(4){ --col: 3; }
  .h-tabla td:nth-child(6), .h-dias li:nth-child(5){ --col: 4; }
  .h-tabla tr:nth-child(3){ --fila: 1; }
  .si.is-now .celda{ animation: ahora 2.4s var(--ease-in-out) infinite; }
  /* un destello recorre la franja verde: se atiende sin parar */
  .h-linea-barra::after{
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    animation: destello 3.4s var(--ease-in-out) 1.8s infinite;
    transform: translateX(-110%);
  }
}
@keyframes aqui{ 50%{ scale: 1.22; } }
@keyframes ahora{ 50%{ box-shadow: 0 0 0 7px rgba(74, 82, 224, 0.2); } }
@keyframes destello{ 0%{ transform: translateX(-110%); } 60%, 100%{ transform: translateX(360%); } }

/* ==========================================================================
   Dónde: plano propio, sin contenido de terceros
   ========================================================================== */
.donde-grid{ display: grid; gap: clamp(34px, 5vw, 80px); }
.lugar{ display: grid; gap: 18px; align-content: start; }
.lugar address{ margin-top: clamp(8px, 1.2vw, 18px); font-style: normal; font-size: clamp(1.2rem, 1.7vw, 1.6rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; }
.lugar-tel{ font-size: clamp(1.0625rem, 1.25vw, 1.2rem); }
.lugar-tel a{ font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.nota{ padding: 16px 20px; border-radius: var(--r-m); background: var(--bg); color: var(--soft); }

.mapa-link{
  position: relative;
  display: block;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--crema);
  box-shadow: 0 0 0 1px var(--rule), 0 34px 60px -44px rgba(0, 0, 0, 0.36);
  text-decoration: none;
  isolation: isolate;
}
.mapa-link img{ width: 100%; aspect-ratio: 960 / 600; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.mapa-pin{
  position: absolute;
  left: 60%;
  top: 36%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: -58px 0 0 -26px;
  border-radius: 50% 50% 50% 4px;
  background: var(--navy);
  color: var(--bg);
  rotate: -45deg;
  box-shadow: 0 14px 22px -10px rgba(0, 0, 0, 0.36);
}
.mapa-pin svg{ width: 26px; height: 26px; rotate: 45deg; }
/* el aura del sitio: ondas que salen de la punta de la chincheta */
.mapa-pin i{
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  opacity: 0;
  pointer-events: none;
}
.mapa-rotulo{
  position: absolute;
  left: 60%;
  top: 36%;
  translate: -50% 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 0 0 1.5px var(--navy), 0 10px 18px -12px rgba(0, 0, 0, 0.36);
}
.mapa-abrir{
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.1em;
  border-radius: 999px;
  background: var(--navy);
  color: var(--bg);
  font-weight: 650;
  box-shadow: 0 14px 24px -14px rgba(0, 0, 0, 0.42);
  transition: background-color 0.2s;
}
.mapa-abrir svg{ width: 1.15em; height: 1.15em; }
@media (hover: hover) and (pointer: fine){
  .mapa-link:hover img{ scale: 1.05; }
  .mapa-link:hover .mapa-abrir{ background: var(--azul); }
}
.mapa figcaption{ display: grid; gap: 8px; margin-top: 14px; }
.mapa-apps{ display: flex; flex-wrap: wrap; gap: 10px; }
.mapa-apps a{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.15em;
  border-radius: 999px;
  background: var(--blanco);
  box-shadow: 0 0 0 1.5px var(--navy);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.mapa-apps svg{ width: 1.05em; height: 1.05em; }
@media (hover: hover) and (pointer: fine){ .mapa-apps a:hover{ background: var(--navy); color: var(--bg); } }
.mapa-credito{ color: var(--soft); font-size: 0.84rem; }
.mapa-credito a{ text-underline-offset: 3px; }
@media (min-width: 960px){
  .donde-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .mapa[data-reveal] .mapa-pin{ translate: 0 -90px; opacity: 0; transition: translate 0.8s var(--ease-back) 0.3s, opacity 0.3s 0.3s; }
  .mapa[data-reveal].is-in .mapa-pin{ translate: 0 0; opacity: 1; }
  .mapa[data-reveal] .mapa-rotulo{ opacity: 0; transition: opacity 0.5s 0.9s; }
  .mapa[data-reveal].is-in .mapa-rotulo{ opacity: 1; }
  .mapa[data-reveal].is-in .mapa-pin i{ animation: onda 3s var(--ease-out) 1.1s infinite; }
  .mapa[data-reveal].is-in .mapa-pin i:nth-child(2){ animation-delay: 2.1s; }
  .mapa[data-reveal].is-in .mapa-pin i:nth-child(3){ animation-delay: 3.1s; }
}
@keyframes onda{ from{ scale: 0.1; opacity: 0.7; } to{ scale: 2.2; opacity: 0; } }

/* ==========================================================================
   Preguntas
   ========================================================================== */
.faqs-grid{ display: grid; gap: clamp(20px, 4vw, 64px); }
.faq-list{ border-top: 1px solid var(--rule); }
.faq-grupo .faq-list{ margin-top: clamp(26px, 4vw, 56px); }
.faq{ border-bottom: 1px solid var(--rule); }
.faq summary{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 68px;
  padding-block: 16px;
  font-size: clamp(1.125rem, 1.5vw, 1.4rem);
  font-weight: 550;
  line-height: 1.32;
  letter-spacing: -0.018em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary svg{
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  background: var(--peri-2);
  transition: transform 0.4s var(--ease-out), background-color 0.25s, color 0.25s;
}
.faq[open] summary svg{ transform: rotate(135deg); background: var(--navy); color: var(--bg); }
.faq-a{ padding: 0 0 26px; max-width: 66ch; color: var(--soft); }
.faq-a a{ color: var(--azul); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference){
  .faq[open] .faq-a{ animation: abre 0.45s var(--ease-out); }
}
@keyframes abre{ from{ opacity: 0; transform: translateY(-8px); } }
.faq-more{ margin-top: clamp(14px, 2vw, 26px); }
.faq-grupo + .faq-grupo{ margin-top: clamp(48px, 6vw, 96px); }
@media (min-width: 960px){
  .faqs-grid{ grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .faqs-grid > header{ position: sticky; top: calc(var(--header-h) + 28px); }
}

/* ==========================================================================
   Cierre: el primer paso
   ========================================================================== */
.cierre{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(84px, 11vw, 180px);
  background: var(--noche);
  color: var(--bg);
  --focus: #fff;
}
.cierre ::selection{ background: var(--bg); color: var(--navy); }
.cierre h2{
  font-size: clamp(2.7rem, 8vw, 8rem);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.cierre p{ margin-top: 1.2em; max-width: 27em; color: var(--lav); font-size: clamp(1.125rem, 1.5vw, 1.4rem); line-height: 1.45; }
.cierre-acciones{ display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: clamp(28px, 3.6vw, 52px); }
/* El rastro: pisadas que van apareciendo al acercarse al final */
.rastro{
  position: absolute;
  z-index: -1;
  right: -3%;
  top: 50%;
  width: min(46vw, 700px);
  aspect-ratio: 2.1;
  translate: 0 -50%;
  rotate: -16deg;
  pointer-events: none;
}
.rastro .marca{
  position: absolute;
  width: 9.5%;
  color: var(--f3);
  opacity: calc(clamp(0, (var(--p, 1) - 0.12 - var(--i) * 0.055) * 9, 1) * 0.5);
  rotate: 90deg;
}
.rastro .marca:nth-child(odd){ top: 12%; }
.rastro .marca:nth-child(even){ top: 46%; scale: -1 1; }
.rastro .marca:nth-child(1){ --i: 0; left: 0%; }
.rastro .marca:nth-child(2){ --i: 1; left: 13%; }
.rastro .marca:nth-child(3){ --i: 2; left: 27%; }
.rastro .marca:nth-child(4){ --i: 3; left: 40%; }
.rastro .marca:nth-child(5){ --i: 4; left: 54%; }
.rastro .marca:nth-child(6){ --i: 5; left: 67%; }
.rastro .marca:nth-child(7){ --i: 6; left: 81%; }
@media (max-width: 760px){
  .rastro{ top: auto; bottom: -5%; right: -30%; width: 128vw; translate: none; }
  .cierre{ padding-bottom: clamp(190px, 58vw, 300px); }
}

/* ==========================================================================
   Pie de página
   ========================================================================== */
.footer{ background: var(--noche-2); color: var(--lav); --focus: #fff; }
.footer-grid{
  display: grid;
  gap: 34px 48px;
  padding-block: clamp(48px, 6vw, 88px) clamp(28px, 3vw, 44px);
}
.footer-brand .logo{ width: 132px; margin-left: -7px; color: var(--bg); }
.footer-brand p{ margin-top: 12px; color: var(--bg); font-weight: 500; }
.footer address{ font-style: normal; line-height: 1.55; }
.footer-t{ margin-bottom: 10px; color: var(--bg); font-size: 1rem; font-weight: 600; }
.footer-nav{ display: grid; gap: 0; }
.footer-nav a, .footer-col a{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--lav);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a[href^="tel"]{ color: var(--bg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine){
  .footer-nav a:hover, .footer-col a:hover{ color: var(--bg); }
}
.footer .footer-bottom{ border-top: 1px solid var(--line); }
@media (min-width: 760px){
  .footer-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
}
@media (max-width: 1023px){
  body.site .footer{ padding-bottom: 84px; }   /* la barra de cita no tapa el final */
}

/* ==========================================================================
   Barra de cita (móvil): WhatsApp y llamada siempre a un toque
   ========================================================================== */
.cita-bar{
  position: fixed;
  z-index: 55;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 248, 241, 0.96);
  box-shadow: 0 -1px 0 var(--rule);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
@supports (backdrop-filter: blur(1px)){
  .cita-bar{ background: rgba(251, 248, 241, 0.8); backdrop-filter: blur(16px) saturate(1.5); }
}
.cita-bar.is-on{ transform: none; visibility: visible; transition: transform 0.45s var(--ease-out), visibility 0s; }
.cita-bar .btn-wa{ flex: 1; min-height: 52px; font-size: 1.125rem; }
.cita-tel{
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.cita-tel svg{ width: 24px; height: 24px; }
/* En pantallas anchas la cabecera fija ya lleva «Pedir cita» siempre a la vista. */
@media (min-width: 1024px){
  .cita-bar{ display: none; }
}

/* ==========================================================================
   Páginas interiores
   ========================================================================== */
.phero{
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(var(--header-h) + clamp(22px, 4vw, 64px)) 0 clamp(52px, 6vw, 96px);
}
.phero-grid{ display: grid; gap: clamp(30px, 5vw, 80px); align-items: center; }
.miga ol{ display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--soft); font-size: 0.9375rem; }
.miga li{ display: flex; align-items: center; gap: 10px; min-height: 44px; }
.miga li + li::before{ content: '/'; opacity: 0.6; }
.miga a{ display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: rgba(76, 78, 134, 0.4); text-underline-offset: 4px; }
.phero h1{
  margin-top: clamp(8px, 1.4vw, 20px);
  font-size: clamp(2.3rem, 5.2vw, 5rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.phero-lede{
  margin-top: 1em;
  max-width: 30em;
  color: var(--soft);
  font-size: clamp(1.125rem, 1.5vw, 1.4rem);
  line-height: 1.45;
  text-wrap: pretty;
}
.phero .btn-xl{ margin-top: clamp(24px, 2.8vw, 44px); }
.phero .estado{ margin-top: clamp(20px, 2.4vw, 32px); max-width: 30em; }
.phero-foot{ position: relative; width: min(46vw, 210px); margin-inline: auto; }
.phero-zona{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-bottom: 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.phero-zona::before{ content: ''; width: 0.62em; height: 0.62em; border-radius: 50%; background: linear-gradient(135deg, var(--c3), var(--c7)); }
.chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(18px, 2vw, 28px); }
.chips li{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--peri-2);
  font-size: 0.9375rem;
  font-weight: 500;
}
@media (min-width: 900px){
  .phero-grid{ grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .phero-foot{ width: min(100%, 250px); justify-self: end; }
  .phero-grid.con-retrato{ grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* Ficha de contenido: título a la izquierda, texto a la derecha */
.ficha{ display: grid; }
.ficha-fila{
  display: grid;
  gap: 12px 40px;
  padding-block: clamp(30px, 4vw, 60px);
  border-top: 1px solid var(--rule);
}
.ficha-fila:first-child{ border-top: 0; padding-top: 0; }
.ficha-fila:last-child{ padding-bottom: 0; }
.ficha-fila h2{
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ficha-cuerpo{ display: grid; gap: 1em; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
.ficha-cuerpo h3{ margin-top: 0.8em; font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 650; line-height: 1.25; letter-spacing: -0.02em; }
.ficha-cuerpo a{ color: var(--azul); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.anillos{ display: grid; gap: 0.7em; }
.anillos li{ display: grid; grid-template-columns: 1.5em minmax(0, 1fr); }
.anillos li::before{
  content: '';
  width: 0.62em;
  height: 0.62em;
  margin-top: 0.52em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--azul);
}
.anillos em{ display: block; color: var(--soft); font-style: normal; font-size: 0.94em; }
@media (min-width: 900px){
  .ficha-fila{ grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* Otros tratamientos */
.otros{ display: grid; margin-top: clamp(22px, 3vw, 44px); border-top: 1px solid var(--rule); }
.otros a{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: color 0.25s;
}
.otros svg{ width: 1em; height: 1em; transition: transform 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .otros a:hover{ color: var(--azul); }
  .otros a:hover svg{ transform: translateX(6px); }
}
.otros-nota{ margin-top: clamp(20px, 2.4vw, 32px); color: var(--soft); }
.otros-nota a{ color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* 404 */
.perdida{
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--header-h) + 30px) 0 110px;
}
.perdida-grid{ display: grid; gap: clamp(30px, 5vw, 80px); align-items: center; }
.perdida h1{ font-size: clamp(2.5rem, 7vw, 6.5rem); font-weight: 650; line-height: 1; letter-spacing: -0.05em; text-wrap: balance; }
.perdida .acciones{ display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: clamp(24px, 3vw, 40px); }
.perdida-pie{ width: min(46vw, 230px); margin-inline: auto; }
.perdida .zf{ opacity: 0.55; rotate: 12deg; }
@media (min-width: 900px){ .perdida-grid{ grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); } }

/* ==========================================================================
   Movimiento
   ========================================================================== */
/* Entradas al llegar a la vista */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  /* Los títulos suben desde detrás de su propia línea. El recorte va en el
     título y el movimiento en el interior: así el observador de entrada mide
     una caja que sigue en su sitio. */
  h2[data-reveal]{ overflow: clip; padding-bottom: 0.16em; margin-bottom: -0.16em; }
  h2[data-reveal] > span{ display: block; transform: translateY(112%); transition: transform 1.05s var(--ease-out); }
  h2[data-reveal].is-in > span{ transform: none; }
  .ficha-fila[data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
  .ficha-fila[data-reveal].is-in{ opacity: 1; transform: none; }
  .creds[data-reveal] li{ opacity: 0; transform: translateX(-18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--n, 0) * 90ms); }
  .creds[data-reveal].is-in li{ opacity: 1; transform: none; }
  .creds li:nth-child(2){ --n: 1; } .creds li:nth-child(3){ --n: 2; } .creds li:nth-child(4){ --n: 3; }
}

/* La portada al cargar: el texto sube, la huella se posa banda a banda y un
   paso de calor la recorre del talón a los dedos. */
@media (prefers-reduced-motion: no-preference){
  .hero h1 .l > span{ animation: sube 0.9s var(--ease-out) both; }
  .hero h1 .l:nth-child(2) > span{ animation-delay: 0.07s; }
  .hero h1 .l:nth-child(3) > span{ animation-delay: 0.14s; }
  .hero-lede, .hero .btn-xl, .hero .status{ animation: aparece 0.9s var(--ease-out) 0.3s both; }
  .hero .btn-xl{ animation-delay: 0.4s; }
  .hero .status{ animation-delay: 0.5s; }
  .hero .pie-frio .b{ animation: banda 0.9s var(--ease-out) both; animation-delay: calc(var(--k) * 70ms + 0.1s); transform-box: fill-box; transform-origin: center; }
  .hero .pie-frio .b0{ --k: 0; } .hero .pie-frio .b1{ --k: 1; } .hero .pie-frio .b2{ --k: 2; } .hero .pie-frio .b3{ --k: 3; }
  .hero .pie-frio .b4{ --k: 4; } .hero .pie-frio .b5{ --k: 5; } .hero .pie-frio .b6{ --k: 6; } .hero .pie-frio .b7{ --k: 7; }
  .hero .foot.is-intro .pie-barrido{ animation: pisada 2.1s var(--ease-in-out) 0.9s both; transition: none; }
  .olas{ animation: aparece 1.6s var(--ease-out) both; }

  /* al irse, la huella se queda un instante atrás y las ondas se deslizan */
  .hero .olas{ transform: translate3d(0, calc(var(--p, 0) * 70px), 0); }
  .phero .zf .pie-calor{ animation: aparece-calor 1.3s var(--ease-out) 0.35s both; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference){
  .hero .foot{ transform: translate3d(0, calc(var(--p, 0) * 6vw), 0) rotate(calc(var(--p, 0) * -5deg)); }
  .hero-copy, .hero .zones, .hero-lines{ opacity: calc(1 - var(--p, 0) * 1.6); }
}
@keyframes sube{ from{ opacity: 0; transform: translateY(105%); } }
@keyframes aparece{ from{ opacity: 0; transform: translateY(14px); } }
@keyframes banda{ from{ opacity: 0; transform: scale(0.82); } }
@keyframes pisada{
  0%{ clip-path: circle(0% at 34% 84%); }
  18%{ clip-path: circle(24% at 34% 82%); }
  48%{ clip-path: circle(22% at 56% 50%); }
  78%{ clip-path: circle(24% at 62% 26%); }
  100%{ clip-path: circle(0% at 85% 12%); }
}
@keyframes aparece-calor{ from{ opacity: 0; } }

/* Líneas guía y tratamientos de la portada: se trazan una tras otra */
@media (prefers-reduced-motion: no-preference){
  .hero-lines.is-drawing path{
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: traza 0.9s var(--ease-out) forwards;
    animation-delay: calc(0.75s + var(--n, 0) * 0.11s);
  }
  .hero-lines.is-drawing circle{
    opacity: 0;
    animation: asoma 0.4s var(--ease-out) forwards;
    animation-delay: calc(1.25s + var(--n, 0) * 0.11s);
  }
  .hero-lines.is-drawing g:nth-child(2){ --n: 1; }
  .hero-lines.is-drawing g:nth-child(3){ --n: 2; }
  .hero-lines.is-drawing g:nth-child(4){ --n: 3; }
  .hero-lines.is-drawing g:nth-child(5){ --n: 4; }
  .has-lines.is-intro .zones li{
    animation: llega 0.8s var(--ease-out) both;
    animation-delay: calc(0.55s + var(--n, 0) * 0.11s);
  }
  .has-lines.is-intro .zones li:nth-child(2){ --n: 1; }
  .has-lines.is-intro .zones li:nth-child(3){ --n: 2; }
  .has-lines.is-intro .zones li:nth-child(4){ --n: 3; }
  .has-lines.is-intro .zones li:nth-child(5){ --n: 4; }
}
@keyframes traza{ to{ stroke-dashoffset: 0; } }
@keyframes asoma{ to{ opacity: 1; } }
@keyframes llega{ from{ opacity: 0; clip-path: inset(0 100% 0 0); } to{ opacity: 1; clip-path: inset(0 -10% 0 0); } }

/* Con el scroll: un hilo bajo la cabecera y, en pantallas anchas, una senda
   de pisadas en el margen que se va marcando según avanzas. */
.senda{ display: none; }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .site-header[id]::after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--azul);
      transform: scaleX(0);
      transform-origin: left;
      animation: avance linear both;
      animation-timeline: scroll(root block);
    }
  }
  @media (min-width: 1280px) and (min-height: 620px) and (prefers-reduced-motion: no-preference){
    .senda{
      position: fixed;
      z-index: 40;
      left: clamp(14px, 1.5vw, 30px);
      top: 50%;
      display: grid;
      gap: 15px;
      translate: 0 -50%;
      pointer-events: none;
    }
    .senda .marca{
      width: 12px;
      color: var(--f4);
      opacity: 0.2;
      rotate: 180deg;
      animation: senda linear both;
      animation-timeline: scroll(root block);
    }
    .senda .marca:nth-child(even){ translate: 12px 0; scale: -1 1; }
    .senda .marca:nth-child(1){ animation-range: 1% 7%; }
    .senda .marca:nth-child(2){ animation-range: 11% 17%; }
    .senda .marca:nth-child(3){ animation-range: 22% 28%; }
    .senda .marca:nth-child(4){ animation-range: 33% 39%; }
    .senda .marca:nth-child(5){ animation-range: 44% 50%; }
    .senda .marca:nth-child(6){ animation-range: 55% 61%; }
    .senda .marca:nth-child(7){ animation-range: 66% 72%; }
    .senda .marca:nth-child(8){ animation-range: 77% 83%; }
    .senda .marca:nth-child(9){ animation-range: 88% 94%; }
  }
}
@keyframes avance{ to{ transform: scaleX(1); } }
@keyframes senda{ to{ opacity: 1; } }

/* ==========================================================================
   Páginas legales: documento sobre papel
   ========================================================================== */
.site-header:not([id]){
  position: static;
  background: var(--bg);
  color: var(--navy);
  box-shadow: 0 1px 0 var(--rule);
}
.site-header:not([id]) .header-inner{ height: 76px; padding-inline: var(--gutter); }
.site-header:not([id]) .brand img{ width: 92px; }
.site-header:not([id]) .brand-name{
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.container{ width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.site-header:not([id]) .container{ width: auto; }

.legal-main{
  width: min(100% - 2 * var(--gutter), 760px);
  margin-inline: auto;
  padding: 44px 0 88px;
}
.back-home{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 14px;
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
}
.legal-main h1{
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.legal-main .updated{ margin-top: 10px; color: var(--soft); font-size: 0.94rem; }
.legal-main h2{
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.legal-main h3{ margin-top: 26px; font-size: 1.06rem; font-weight: 700; }
.legal-main p, .legal-main li{ max-width: 70ch; color: #2b2d63; }
.legal-main p{ margin-top: 12px; }
.legal-main ul{ margin-top: 10px; padding-left: 22px; list-style: disc; }
.legal-main li{ margin-bottom: 6px; }
.legal-main li::marker{ color: var(--azul); }
.legal-main p a, .legal-main li a{
  color: var(--azul);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.site-footer:not(.footer){
  background: var(--noche-2);
  color: var(--lav);
  --focus: #fff;
}
.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 26px;
  font-size: 0.94rem;
}
.footer-legal{ display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-legal a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bg);
  text-decoration: underline;
  text-decoration-color: rgba(251, 248, 241, 0.4);
  text-underline-offset: 4px;
}
.footer-legal a[aria-current="page"]{ text-decoration-color: var(--bg); text-decoration-thickness: 2px; }

/* ==========================================================================
   Quien pide menos movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}