/* ==========================================================================
   AEO Puebla — sitio público
   Sistema: Manrope (una familia, pesos 400/500/600/700) · 60-30-10:
   60 % neutros claros (blanco, niebla, hielo) · 30 % azul marino · 10 % azul de acción.
   Motivo de marca: el arco de las piezas impresas, solo para enmarcar imágenes y paneles visuales;
   las tarjetas de texto usan un radio uniforme (--r-grande).
   Sin build: CSS plano, tokens en :root.
   ========================================================================== */

/* Manrope variable, alojada en el sitio (OFL, ver public/fonts/OFL-manrope.txt): sin peticiones a terceros */
@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/manrope-latin-wght-normal.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;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* 30 % — marino */
  --marino-950: #0b1630;
  --marino-900: #12234a;
  --marino: #223a72;
  --marino-700: #2c4886;
  /* 10 % — acción */
  --azul: #3d8dcc;          /* acento decorativo, texto grande */
  --azul-boton: #2b76b8;    /* botones: 4.8:1 con blanco */
  --azul-boton-hover: #23649e;
  --azul-claro: #9fc6ec;    /* acentos sobre marino: 6.1:1 */
  /* 60 % — neutros */
  --blanco: #ffffff;
  --niebla: #f6f9fc;
  --hielo: #eaf2fa;
  --hielo-2: #dce9f6;
  --tinta: #0e1b36;
  --tinta-2: #4a5878;       /* 6.6:1 sobre niebla */
  --sobre-marino: #c9ddf2;  /* texto secundario sobre marino */
  --sobre-marino-2: #9fb2cc; /* texto informativo sobre marino-950: 8.3:1 */
  --verde-wa: #17784a;
  --error: #b42318;

  --fuente: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica: cinco tamaños */
  --t-display: clamp(2.5rem, 1.35rem + 4.1vw, 4.75rem);
  --t-h2: clamp(1.875rem, 1.3rem + 2.05vw, 3.125rem);
  --t-h3: clamp(1.1875rem, 1.1rem + .3vw, 1.375rem);
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-base: 1.0625rem;
  --t-chico: .9375rem;

  /* Espacio */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ancho: 1240px;
  --seccion: clamp(5rem, 3rem + 6.5vw, 9.5rem);
  --s-1: .5rem; --s-2: .75rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4.5rem;

  /* Forma */
  --arco: clamp(3rem, 2rem + 6vw, 9rem);
  --r-chico: .75rem;
  --r: 1.25rem;
  --r-grande: 2rem;

  /* Movimiento */
  --ease-out: cubic-bezier(.16, .84, .32, 1);
  --ease-suave: cubic-bezier(.4, 0, .2, 1);
  --dur-rapida: 180ms;
  --dur: 320ms;
  --dur-lenta: 900ms;

  --nav-alto: 5.25rem;
}

/* Hover solo en lo que responde al clic (enlaces, botones, campos, desplegables).
   En elementos inertes crea una falsa affordance: invita a tocar algo que no hace nada. */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-alto) + 1rem); interpolate-size: allow-keywords; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -.03em; }
h3, .h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
strong { font-weight: 700; }
::selection { background: var(--azul-claro); color: var(--marino-950); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1.25rem; background: var(--blanco); color: var(--marino); border-radius: 999px; font-weight: 600; }
.saltar:focus { top: 1rem; }

.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); position: relative; }
.seccion--niebla { background: var(--niebla); }
.seccion--hielo { background: var(--hielo); }
.seccion--marino { background: var(--marino); color: var(--blanco); }
.seccion--marino p { color: var(--sobre-marino); }
/* Doblez: las bandas de color entran por arriba a la izquierda y salen por abajo a la derecha, como el hero.
   Asume vecinos blancos; la última sección de main no curva abajo porque ahí sigue el footer. */
.seccion--niebla, .seccion--hielo, .seccion--marino { border-radius: var(--arco) 0 var(--arco) 0; }
main > .seccion:last-child { border-bottom-right-radius: 0; }

.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--tinta); font-weight: 500; }
.texto-2 { color: var(--tinta-2); }
.texto-chico { font-size: .875rem; }
.pendiente { display: inline-block; padding: .05em .45em; border-radius: .35em; background: #fff4d6; color: #6b4a00; font-size: .85em; font-weight: 600; }

/* Encabezados de sección */
.encabezado { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.encabezado h2 + p { margin-top: var(--s-4); font-size: var(--t-lead); color: var(--tinta-2); }
.seccion--marino .encabezado h2 + p { color: var(--sobre-marino); }
.encabezado--fila { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.encabezado--fila > div { max-width: 46rem; }

/* ---------- Íconos y botones ---------- */
.ico { width: 1.15em; height: 1.15em; flex: none; }
.btn {
  --btn-bg: var(--azul-boton); --btn-fg: var(--blanco); --btn-bg-h: var(--azul-boton-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.5rem;
  border: 0; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; text-align: center; text-wrap: balance;
  transition: background-color var(--dur) var(--ease-suave), color var(--dur) var(--ease-suave), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-suave);
}
.btn:hover { background: var(--btn-bg-h); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.btn .flecha { transition: transform var(--dur) var(--ease-out); }
.btn:hover .flecha, .enlace-flecha:hover .flecha { transform: translateX(4px); }
.btn--grande { min-height: 3.5rem; padding: 1rem 1.9rem; font-size: 1.0625rem; }
.btn--blanco { --btn-bg: var(--blanco); --btn-fg: var(--marino); --btn-bg-h: var(--hielo); }
.btn--marino { --btn-bg: var(--marino); --btn-fg: var(--blanco); --btn-bg-h: var(--marino-900); }
.btn--wa { --btn-bg: var(--verde-wa); --btn-bg-h: #12603b; }
.btn--fantasma { --btn-bg: transparent; --btn-fg: currentColor; --btn-bg-h: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--fantasma-oscuro { --btn-bg: transparent; --btn-fg: var(--marino); --btn-bg-h: var(--hielo); box-shadow: inset 0 0 0 1.5px var(--marino); }

.enlace-flecha { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--azul-boton-hover); text-decoration: none; min-height: 44px; }
.enlace-flecha:hover { color: var(--marino); }
.seccion--marino .enlace-flecha { color: var(--azul-claro); }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--blanco);
  transition: background-color var(--dur) var(--ease-suave), box-shadow var(--dur) var(--ease-suave), transform var(--dur) var(--ease-out);
}
.nav::before { /* velo para legibilidad sobre la foto del hero */
  content: ""; position: absolute; inset: 0 0 -2.5rem; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 22, 48, .55), rgba(11, 22, 48, 0));
  transition: opacity var(--dur) var(--ease-suave);
}
.nav.is-solida { background: var(--marino-900); box-shadow: 0 10px 30px -18px rgba(11, 22, 48, .6); }
.nav.is-solida::before { opacity: 0; }
.nav__barra { position: relative; display: flex; align-items: center; gap: var(--s-5); height: var(--nav-alto); width: min(100% - 2 * var(--gutter), 1400px); margin-inline: auto; }
.nav__logo { flex: none; display: block; }
.nav__logo img { width: auto; height: 3.25rem; }
.nav__menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.nav__links { display: flex; align-items: center; gap: .25rem; margin-inline: auto; }
.nav__links > li > a, .nav__drop > button {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .5rem .9rem;
  border: 0; border-radius: 999px; background: none; font-size: .975rem; font-weight: 500; text-decoration: none; color: inherit;
  transition: background-color var(--dur-rapida) var(--ease-suave);
}
.nav__links > li > a:hover, .nav__drop > button:hover, .nav__links [aria-current="page"] { background: rgba(255, 255, 255, .12); }
.nav__drop { position: relative; }
.nav__drop svg { transition: transform var(--dur) var(--ease-out); }
.nav__drop > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__sub {
  position: absolute; top: calc(100% + .5rem); left: 50%; min-width: 17rem; padding: .5rem;
  background: var(--blanco); color: var(--tinta); border-radius: var(--r);
  box-shadow: 0 24px 60px -20px rgba(11, 22, 48, .45);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity var(--dur-rapida) var(--ease-suave), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
.nav__drop > button[aria-expanded="true"] + .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__sub a { display: block; padding: .7rem .9rem; border-radius: var(--r-chico); text-decoration: none; font-weight: 500; }
.nav__sub a:hover, .nav__sub a.activo { background: var(--hielo); color: var(--marino); }
.nav__acciones { display: flex; align-items: center; gap: var(--s-3); }
.nav__tel { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; text-decoration: none; font-size: .975rem; }
.nav__tel:hover { text-decoration: underline; }
.nav__toggle { display: none; }

@media (max-width: 1080px) {
  .nav__tel span { display: none; }
}
@media (max-width: 960px) {
  :root { --nav-alto: 4.5rem; }
  .nav__logo img { height: 2.75rem; }
  .js .nav__toggle {
    display: grid; place-items: center; margin-left: auto; width: 48px; height: 48px;
    border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: inherit;
  }
  .nav__burger, .nav__burger::before, .nav__burger::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur-rapida); }
  .nav__burger { position: relative; }
  .nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; }
  .nav__burger::before { top: -6px; }
  .nav__burger::after { top: 6px; }
  .nav[data-abierto] .nav__burger { background: transparent; }
  .nav[data-abierto] .nav__burger::before { transform: translateY(6px) rotate(45deg); }
  .nav[data-abierto] .nav__burger::after { transform: translateY(-6px) rotate(-45deg); }
  /* El panel se oculta solo si el JS que lo abre está activo; sin JS el menú queda visible (abajo) */
  .js .nav__menu {
    position: fixed; inset: var(--nav-alto) 0 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--s-5);
    padding: var(--s-4) var(--gutter) var(--s-6); background: var(--marino-900); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease-suave), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .nav[data-abierto] { background: var(--marino-900); }
  .nav[data-abierto] .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__links { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .nav__links > li > a, .nav__drop > button { width: 100%; justify-content: space-between; padding: 1rem .25rem; border-radius: 0; font-size: 1.25rem; font-weight: 600; box-shadow: inset 0 -1px 0 rgba(255,255,255,.1); }
  .nav__links > li > a:hover, .nav__drop > button:hover, .nav__links [aria-current="page"] { background: none; color: var(--azul-claro); }
  .nav__sub { position: static; transform: none; min-width: 0; padding: 0 0 .5rem; background: none; color: var(--sobre-marino); box-shadow: none; display: none; opacity: 1; visibility: visible; }
  .nav__drop > button[aria-expanded="true"] + .nav__sub { display: block; transform: none; }
  .nav__sub a { padding: .65rem .25rem .65rem 1rem; }
  .nav__sub a:hover, .nav__sub a.activo { background: none; color: var(--blanco); }
  .nav__acciones { flex-direction: column; align-items: stretch; }
  .nav__acciones .btn { width: 100%; }
  .nav__tel span { display: inline; }
  /* Sin JavaScript: barra estática con los enlaces visibles */
  html:not(.js) .nav { position: relative; background: var(--marino-900); }
  html:not(.js) .nav::before { display: none; }
  html:not(.js) .nav__barra { flex-wrap: wrap; height: auto; padding-block: .75rem; }
  html:not(.js) .nav__menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--s-3); }
}
/* Sin JavaScript los desplegables no abren: se muestra un enlace directo a la página índice */
.js .nav__sinjs { display: none; }
html:not(.js) .nav__drop > button, html:not(.js) .nav__sub { display: none; }
body.menu-abierto { overflow: hidden; }

/* ---------- Hero de inicio ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: max(42rem, 100svh); background: var(--marino); color: var(--blanco); isolation: isolate;
}
.hero__media { position: relative; overflow: hidden; border-top-right-radius: var(--arco); clip-path: inset(0 round 0 var(--arco) 0 0); background: var(--marino-900); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 40%; }
.hero__media::before { /* profundidad de campo: nítido al centro (el rostro), desenfoque creciente hacia las orillas */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 46% 48%, transparent 45%, #000 100%);
  mask-image: radial-gradient(ellipse 58% 62% at 46% 48%, transparent 45%, #000 100%);
}
.hero__media::after { /* viñeta suave + velo inferior para que la tarjeta y el menú se lean */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 75% at 46% 46%, rgba(11, 22, 48, 0) 55%, rgba(11, 22, 48, .38) 100%),
    linear-gradient(to top, rgba(11, 22, 48, .55) 0%, rgba(11, 22, 48, 0) 38%);
}
.hero__panel { display: flex; align-items: center; padding: calc(var(--nav-alto) + var(--s-6)) var(--gutter) var(--s-6) clamp(2rem, 1rem + 4vw, 6rem); }
.hero__contenido { max-width: 38rem; }
.hero__titulo { font-size: var(--t-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; }
.hero__sub { margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.6; color: var(--sobre-marino); max-width: 34rem; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.hero__equipo { display: inline-flex; align-items: center; gap: .9rem; min-height: 44px; font-weight: 600; text-decoration: none; }
.hero__equipo:hover .hero__equipo-txt { text-decoration: underline; }
.avatares { display: flex; }
.avatar {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-left: -.6rem; border-radius: 50%;
  background: var(--hielo-2); color: var(--marino); font-size: .75rem; font-weight: 700; box-shadow: 0 0 0 3px var(--marino);
}
.avatar:first-child { margin-left: 0; }
.hero__datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s-5) clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: var(--s-5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.hero__datos strong { display: block; font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: var(--blanco); }
.hero__datos span { display: block; margin-top: .25rem; font-size: var(--t-chico); line-height: 1.4; color: var(--sobre-marino); }

/* Tarjeta rotativa sobre la foto */
.rota { position: absolute; left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem); z-index: 2; width: min(22rem, calc(100% - 2rem)); }
.rota__lista { position: relative; min-height: 7.25rem; }
.rota__controles { display: flex; align-items: center; gap: .25rem; width: max-content; margin-top: .5rem; padding: .2rem .35rem; border-radius: 999px; background: rgba(11, 22, 48, .55); }
.rota__punto, .rota__pausa { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--blanco); }
.rota__punto::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background-color var(--dur-rapida), transform var(--dur) var(--ease-out); }
.rota__punto:hover::before { background: var(--blanco); }
.rota__punto[aria-current="true"]::before { background: var(--blanco); transform: scale(1.35); }
.rota__pausa:hover { background: rgba(255, 255, 255, .16); }
.rota__pausa .ico { width: .9rem; height: .9rem; }
.rota__pausa[aria-pressed="true"] .ico--pausa, .rota__pausa:not([aria-pressed="true"]) .ico--seguir { display: none; }
.rota__item {
  position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem 1rem 1rem;
  background: var(--blanco); color: var(--tinta); border-radius: var(--r); text-decoration: none;
  box-shadow: 0 30px 60px -30px rgba(11, 22, 48, .7);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 500ms var(--ease-suave), transform 700ms var(--ease-out), visibility 0s linear 700ms;
}
.rota__item.is-activa { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rota__item:hover { box-shadow: 0 30px 60px -24px rgba(11, 22, 48, .8); }
.rota__ini { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem 1rem .5rem .5rem; background: var(--marino); color: var(--blanco); font-weight: 700; letter-spacing: -.02em; }
.rota__txt { min-width: 0; line-height: 1.35; }
.rota__area { display: block; font-size: .875rem; font-weight: 600; color: var(--marino-700); }
.rota__nombre { display: block; font-weight: 700; letter-spacing: -.01em; }
.rota__form { display: block; font-size: .875rem; color: var(--tinta-2); }
.rota__barra { position: absolute; left: 1.25rem; right: 1.25rem; bottom: .55rem; height: 3px; border-radius: 3px; background: var(--hielo-2); overflow: hidden; }
.rota__barra i { display: block; height: 100%; background: var(--azul); transform-origin: left; transform: scaleX(0); }
.rota__item.is-activa .rota__barra i { animation: rota-barra var(--rota-ms, 7000ms) linear forwards; }
.rota--pausada .rota__barra i { animation-play-state: paused; }
@keyframes rota-barra { to { transform: scaleX(1); } }
@keyframes pista { 50% { transform: translateX(5px); } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { min-height: 62svh; border-top-right-radius: 0; border-bottom-right-radius: var(--arco); clip-path: inset(0 round 0 0 var(--arco) 0); }
  .hero__panel { padding: var(--s-6) var(--gutter) var(--s-7); }
}
@media (max-width: 560px) {
  /* Primera pantalla del celular: foto más baja para que la oferta y el botón principal entren sin desplazar */
  .hero__media { min-height: max(15rem, 32svh); }
  .hero__img { object-position: 50% 22%; }
  .rota { display: none; }
  .hero__panel { padding-top: var(--s-5); }
  .hero__sub { margin-top: var(--s-4); }
  .hero__ctas { margin-top: var(--s-5); }
  .hero__datos { grid-template-columns: 1fr 1fr; }
  .hero__datos li:last-child { grid-column: 1 / -1; }
  .hero__ctas .btn { width: 100%; }
}

/* ---------- Hero de páginas internas ---------- */
.hero-pagina { position: relative; background: var(--marino); color: var(--blanco); border-bottom-right-radius: var(--arco); overflow: hidden; isolation: isolate; }
.hero-pagina__cuerpo { padding-top: calc(var(--nav-alto) + clamp(1.25rem, 1rem + 1vw, 2rem)); padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.hero-pagina__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: var(--s-6); padding-top: clamp(2rem, 1.25rem + 3vw, 4.5rem); }
.hero-pagina__grid--solo { grid-template-columns: minmax(0, 1fr); }
.hero-pagina h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); letter-spacing: -.035em; line-height: 1.1; max-width: 18ch; }
.hero-pagina .hero__sub { max-width: 40rem; }
.hero-pagina__img { margin: 0; align-self: stretch; max-height: 26rem; border-radius: var(--arco) var(--arco) var(--r) var(--r); overflow: hidden; background: var(--marino-900); }
.hero-pagina__img img { width: 100%; height: 100%; object-fit: cover; }
.hero-pagina__iso { position: absolute; right: -4rem; bottom: -5rem; width: clamp(14rem, 30vw, 26rem); opacity: .07; z-index: -1; pointer-events: none; will-change: transform; transform-origin: 60% 60%; }
.migas ol { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin: 0; font-size: var(--t-chico); color: var(--sobre-marino); }
.migas li + li::before { content: "/"; margin-right: .6rem; opacity: .6; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--blanco); text-decoration: underline; }
.migas [aria-current] { color: var(--blanco); }
@media (max-width: 800px) {
  .hero-pagina__grid { grid-template-columns: 1fr; }
  .hero-pagina__img { max-height: 20rem; aspect-ratio: 4 / 3; }
}

/* ---------- Valoración integral ---------- */
.valoracion { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: start; }
.valoracion h2 { margin-bottom: var(--s-4); }
.valoracion .lead { margin-bottom: var(--s-4); }
.valoracion p:not(.lead):not(.valoracion__lema) { color: var(--tinta-2); }
.valoracion__lema { margin-top: var(--s-5); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--marino); max-width: 26ch; }
.grupos { display: grid; gap: var(--s-3); }
.grupo { padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); border-radius: var(--r-grande); background: var(--hielo); }
.grupo h3 { margin-bottom: var(--s-4); }
.grupo--marino { background: var(--marino); color: var(--blanco); }
.checks li { position: relative; padding: .55rem 0 .55rem 2.1rem; font-weight: 500; line-height: 1.45; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .6rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%232b76b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.grupo--marino .checks li::before { background-color: var(--marino-700); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%239fc6ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 860px) { .valoracion { grid-template-columns: 1fr; } }

/* ---------- Regiones (galería de especialidades) ---------- */
.regiones { display: flex; gap: var(--s-3); height: clamp(30rem, 26rem + 10vw, 38rem); }
.region { position: relative; flex: 1 1 0; min-width: 0; transition: flex-grow 700ms var(--ease-out); }
.regiones:hover .region, .regiones:focus-within .region { flex-grow: .8; }
.regiones .region:hover, .regiones .region:focus-within { flex-grow: 2.4; }
.region__link { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: var(--arco) var(--arco) var(--r) var(--r); background: var(--marino-900); color: var(--blanco); text-decoration: none; isolation: isolate; }
.region__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1200ms var(--ease-out), opacity var(--dur) var(--ease-suave); }
.region__link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11, 22, 48, .94) 0%, rgba(11, 22, 48, .55) 38%, rgba(11, 22, 48, 0) 70%); }
.region:hover .region__img, .region:focus-within .region__img { transform: scale(1.06); }
.region__info { position: absolute; inset: auto 0 0; padding: var(--s-5) clamp(1.25rem, 1rem + 1vw, 2rem); }
.region__titulo { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.region__medico { margin-top: .4rem; font-size: var(--t-chico); font-weight: 500; color: var(--azul-claro); }
.region__mas-info { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 600ms var(--ease-out), opacity 400ms var(--ease-suave); }
.region__mas-info > div { overflow: hidden; }
.region:hover .region__mas-info, .region:focus-within .region__mas-info { grid-template-rows: 1fr; opacity: 1; transition-delay: 120ms; }
.region__resumen { margin: .9rem 0 0; color: var(--sobre-marino); max-width: 30ch; line-height: 1.5; }
.regiones__pista { display: none; }
.region__mas { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-weight: 600; }
@media (max-width: 960px) {
  .regiones { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .regiones::-webkit-scrollbar { display: none; }
  .region, .regiones:hover .region, .regiones .region:hover, .regiones:focus-within .region { flex: 0 0 min(78vw, 22rem); height: 28rem; scroll-snap-align: start; }
  .region__mas-info { grid-template-rows: 1fr; opacity: 1; }
  .regiones__pista { display: flex; align-items: center; gap: .5rem; margin: var(--s-4) 0 0; font-size: var(--t-chico); font-weight: 600; color: var(--marino-700); }
  .regiones__pista .ico { animation: pista 1.6s var(--ease-suave) infinite; }
}

/* ---------- Ventajas + cifras (marino) ---------- */
.ventajas__cabeza { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-5) clamp(2rem, 1rem + 5vw, 6rem); align-items: end; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.ventajas__cabeza h2 { max-width: 24ch; }
.ventajas__cabeza p { font-size: var(--t-lead); margin-bottom: var(--s-4); }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.cifra { display: flex; flex-direction: column; padding: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); border-radius: var(--r-grande); background: var(--marino-900); }
.cifra__num { margin: 0; font-size: clamp(3.5rem, 2.6rem + 3.2vw, 5.5rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; color: var(--blanco); font-variant-numeric: tabular-nums; }
.cifra__et { margin: var(--s-3) 0 var(--s-5); padding-bottom: var(--s-4); font-size: 1.125rem; color: var(--blanco); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12); }
.cifra__lista { display: grid; gap: var(--s-3); }
.cifra__lista li { display: grid; gap: .1rem; line-height: 1.35; }
.cifra__lista a, .cifra__lista strong { font-weight: 600; color: var(--blanco); text-decoration: none; }
.cifra__lista a:hover { color: var(--azul-claro); text-decoration: underline; }
.cifra__lista span { font-size: var(--t-chico); color: var(--sobre-marino); }
.cifra__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cifra__chips a { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem 1rem; border-radius: 999px; background: var(--marino-700); color: var(--blanco); font-size: var(--t-chico); font-weight: 600; text-decoration: none; transition: background-color var(--dur-rapida), color var(--dur-rapida); }
.cifra__chips a:hover { background: var(--blanco); color: var(--marino); }
.ventajas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) clamp(2rem, 1rem + 4vw, 5rem); }
.ventaja { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-4); }
.ventaja__ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 1rem 1rem .4rem .4rem; background: var(--marino-700); color: var(--azul-claro); }
.ventaja h3 { color: var(--blanco); margin-bottom: .4rem; }
.ventaja p { margin: 0; }
@media (max-width: 860px) {
  .ventajas__cabeza { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: 1fr; }
  .ventajas__lista { grid-template-columns: 1fr; }
}

/* ---------- Especialistas ---------- */
.equipo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.medico__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.medico__link:hover .medico__nombre { color: var(--marino); text-decoration: underline; text-decoration-thickness: 1px; }
.medico__link:hover .retrato__iso { transform: rotate(-6deg) scale(1.05); }
.medico__area { margin: .6rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--marino-700); }
.medico__nombre { margin-top: var(--s-5); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.medico__form { margin: .25rem 0 var(--s-3); font-size: .875rem; color: var(--tinta-2); line-height: 1.5; }
.medico .enlace-flecha { margin-top: auto; padding-top: .5rem; }
@media (max-width: 1000px) { .equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .equipo { grid-template-columns: 1fr; gap: var(--s-5); }
  .equipo .medico__link { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: var(--s-4); align-items: start; }
  .equipo .retrato { grid-row: 1 / span 4; border-radius: 2rem var(--r-chico) var(--r-chico) var(--r-chico); }
  .equipo .retrato__ini { font-size: 1.75rem; }
  .equipo .retrato .pendiente { display: none; }
  .equipo .medico__nombre { margin-top: 0; }
}

/* Retrato: foto o marcador pendiente en la paleta del sitio */
.retrato { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--arco) var(--r) var(--r) var(--r); background: var(--marino-900); isolation: isolate; }
.retrato > img:not(.retrato__iso) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.retrato--pendiente { background: var(--hielo); color: var(--marino); }
.retrato__iso { position: absolute; width: 70%; right: -14%; bottom: -8%; opacity: .14; z-index: -1; transition: transform 1200ms var(--ease-out); }
.retrato__ini { font-size: clamp(2.75rem, 2rem + 2.5vw, 4.25rem); font-weight: 600; letter-spacing: -.04em; color: var(--marino); }
.retrato .pendiente { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; text-align: center; font-size: .8125rem; }

.frase { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; color: var(--marino); max-width: 32ch; }
.frase cite { display: block; margin-top: var(--s-4); font-size: var(--t-chico); font-style: normal; font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }

.quien { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.quien__retrato { display: block; border-radius: var(--arco) var(--r) var(--r) var(--r); }
.quien__retrato:hover .retrato__iso { transform: rotate(-6deg) scale(1.05); }
.quien__nombre { margin: var(--s-4) 0 var(--s-4); color: var(--tinta-2); }
.quien__nombre strong { color: var(--tinta); }
@media (max-width: 640px) { .quien { grid-template-columns: 1fr; } .quien__retrato { width: 12rem; } }

/* Hero del perfil */
.hero-pagina__antes { margin: 0 0 .75rem; font-weight: 600; color: var(--azul-claro); }
.hero-pagina__retrato { margin: 0; width: min(100%, 20rem); justify-self: end; }
.hero-pagina .hero__ctas { margin-top: var(--s-5); }
@media (max-width: 800px) { .hero-pagina__retrato { justify-self: start; width: 13rem; } }

/* Perfil: biografía y credenciales */
.perfil-detalle { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.perfil-detalle .frase { margin-top: var(--s-5); }
.credenciales { padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); border-radius: var(--r-grande); background: var(--hielo); }
.credenciales h2 { margin-bottom: var(--s-4); }
.credenciales__lista { display: grid; gap: var(--s-3); }
.credenciales__lista li { display: grid; gap: .2rem; line-height: 1.4; }
.credenciales__lista span { font-size: var(--t-chico); color: var(--tinta-2); font-weight: 500; }
.credenciales__sub { margin: var(--s-5) 0 var(--s-2); font-size: 1rem; }
.credenciales__cedulas { display: grid; gap: .25rem; font-size: var(--t-chico); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.procedimientos--una { grid-template-columns: 1fr; margin: var(--s-5) 0; }
@media (max-width: 860px) { .perfil-detalle { grid-template-columns: 1fr; } }

/* Cita + resto del equipo */
.cita { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.cita h2 { margin-bottom: var(--s-4); }
.cita__precio { color: var(--marino); white-space: nowrap; }
.cita .consulta__acciones { margin-top: var(--s-5); }
.otros h2 { margin-bottom: var(--s-3); }
.otros ul { display: grid; gap: var(--s-2); }
.otros a { display: grid; gap: .15rem; padding: 1rem 1.25rem; border-radius: var(--r); background: var(--niebla); text-decoration: none; transition: background-color var(--dur-rapida), transform var(--dur) var(--ease-out); }
.otros a:hover { background: var(--hielo); transform: translateX(4px); }
.otros span { font-size: var(--t-chico); color: var(--tinta-2); }
@media (max-width: 860px) { .cita { grid-template-columns: 1fr; } }

/* Ventaja de equipo (página Especialistas) */
.seccion--marino .ventajas__lista { margin-top: 0; }

/* ---------- Proceso ---------- */
.proceso { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: paso; }
.proceso__paso { position: relative; counter-increment: paso; }
/* Tramo entre un paso y el siguiente: deja aire a ambos lados de cada cuadro y no sigue después del último */
.proceso__paso:not(:last-child)::after {
  content: ""; position: absolute; top: calc(1.75rem - 1px); height: 2px; border-radius: 2px;
  left: calc(3.5rem + .875rem); right: calc(-1 * var(--s-5) + .875rem);
  background: var(--azul); transform-origin: left; transform: scaleX(var(--progreso, 1));
  transition: transform 700ms var(--ease-out); transition-delay: calc(300ms + var(--i, 0) * 250ms);
}
.proceso__paso::before {
  content: counter(paso); position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--s-4);
  border-radius: 1.25rem 1.25rem .5rem .5rem; background: var(--marino); color: var(--blanco); font-weight: 700; font-size: 1.125rem;
}
.proceso__paso h3 { margin-bottom: .5rem; }
.proceso__paso p { color: var(--tinta-2); }
@media (max-width: 860px) {
  .proceso { grid-template-columns: 1fr 1fr; row-gap: var(--s-6); }
  .proceso__paso::after { display: none; }
}
@media (max-width: 520px) { .proceso { grid-template-columns: 1fr; } }

/* ---------- Método: proceso contado con el scroll ---------- */
.metodo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 7rem); align-items: start; }
.metodo__fijo { position: sticky; top: calc(var(--nav-alto) + 2rem); }
.metodo__fijo h2 { margin-bottom: var(--s-3); max-width: 16ch; }
.metodo__panel { position: relative; margin-top: var(--s-5); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-radius: var(--arco) var(--r-grande) var(--r-grande) var(--r-grande); background: var(--marino); color: var(--blanco); overflow: hidden; }
.metodo__cabeza { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--s-4); min-height: 4.5rem; }
.metodo__num, .metodo__nombre { grid-row: 1; opacity: 0; transform: translateY(12px); transition: opacity 450ms var(--ease-suave), transform 600ms var(--ease-out); }
.metodo__num { grid-column: 1; font-size: clamp(3.5rem, 2.5rem + 3vw, 5rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.metodo__nombre { grid-column: 2; justify-self: end; font-weight: 600; color: var(--azul-claro); }
.metodo__grafico { display: block; width: 100%; height: auto; margin: var(--s-4) 0; }
.metodo__grafico g { opacity: 0; transition: opacity 450ms var(--ease-suave); }
.metodo__grafico .trazo { stroke: var(--blanco); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-out) 150ms; }
.metodo__grafico .trazo.tenue { stroke: var(--sobre-marino); stroke-opacity: .45; stroke-width: 2.5; }
.metodo__grafico .trazo.acento { stroke: var(--azul-claro); }
.metodo__grafico .trazo.oscuro { stroke: var(--marino); }
.metodo__grafico .relleno { fill: var(--azul-claro); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 500ms var(--ease-out) 700ms; }
.metodo__grafico .relleno.grande { fill: var(--blanco); }
.metodo__pista { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--sobre-marino); }
.metodo__pista li { padding-top: .75rem; background: linear-gradient(var(--azul-claro), var(--azul-claro)) left top / 0% 3px no-repeat, linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)) left top / 100% 3px no-repeat; transition: background-size 600ms var(--ease-out), color var(--dur); }
/* Estado por paso activo (data-paso del panel) */
.metodo__panel[data-paso="1"] [data-n="1"], .metodo__panel[data-paso="2"] [data-n="2"],
.metodo__panel[data-paso="3"] [data-n="3"], .metodo__panel[data-paso="4"] [data-n="4"] { opacity: 1; transform: none; }
.metodo__panel[data-paso="1"] g[data-n="1"] .trazo, .metodo__panel[data-paso="2"] g[data-n="2"] .trazo,
.metodo__panel[data-paso="3"] g[data-n="3"] .trazo, .metodo__panel[data-paso="4"] g[data-n="4"] .trazo { stroke-dashoffset: 0; }
.metodo__panel[data-paso="1"] g[data-n="1"] .relleno, .metodo__panel[data-paso="2"] g[data-n="2"] .relleno,
.metodo__panel[data-paso="3"] g[data-n="3"] .relleno, .metodo__panel[data-paso="4"] g[data-n="4"] .relleno { transform: scale(1); }
.metodo__panel[data-paso="1"] .metodo__pista li:nth-child(-n+1),
.metodo__panel[data-paso="2"] .metodo__pista li:nth-child(-n+2),
.metodo__panel[data-paso="3"] .metodo__pista li:nth-child(-n+3),
.metodo__panel[data-paso="4"] .metodo__pista li:nth-child(-n+4) { background-size: 100% 3px, 100% 3px; color: var(--blanco); }
/* Pasos: el activo a pleno, el resto atenuado */
.metodo__pasos { display: grid; }
.metodo__paso { display: flex; flex-direction: column; justify-content: center; min-height: 46svh; padding-block: var(--s-5); transition: opacity 500ms var(--ease-suave); }
.metodo__paso + .metodo__paso { box-shadow: inset 0 1px 0 var(--hielo-2); }
.js .metodo__paso:not([aria-current]) { opacity: .32; }
.metodo__etq { margin-bottom: var(--s-3); font-size: var(--t-chico); font-weight: 600; color: var(--marino-700); }
.metodo__paso h3 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.14; margin-bottom: var(--s-4); }
.metodo__paso p { font-size: var(--t-lead); color: var(--tinta-2); max-width: 34rem; }
@media (max-width: 860px) {
  .metodo__grid { grid-template-columns: 1fr; gap: 0; }
  .metodo__fijo { position: static; }
  .metodo__panel { display: none; }
  .metodo__paso { min-height: 0; padding-block: var(--s-5); }
  .js .metodo__paso:not([aria-current]) { opacity: 1; }
}

/* Qué llevar */
.llevar h2 { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.llevar__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.llevar__lista li { padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); border-radius: var(--r-grande); background: var(--blanco); }
.llevar__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--s-4); border-radius: 1rem 1rem .45rem .45rem; background: var(--hielo); color: var(--marino); }
.llevar__ico .ico { width: 2rem; height: 2rem; }
.llevar__lista h3 { margin-bottom: .5rem; }
.llevar__lista p { color: var(--tinta-2); }
@media (max-width: 960px) { .llevar__lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .llevar__lista { grid-template-columns: 1fr; } }

/* ---------- Consulta: precios + ubicación ---------- */
.consulta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1.5rem + 5vw, 6.5rem); align-items: center; }
.consulta h2 { margin-bottom: var(--s-4); }
.consulta__intro { font-size: var(--t-lead); color: var(--tinta-2); }
.precios { display: grid; gap: var(--s-3); margin: var(--s-5) 0 var(--s-5); }
.precio { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem var(--s-4); padding: 1.5rem 1.75rem; border-radius: var(--r-grande); background: var(--hielo); }
.precio:first-child { background: var(--marino); color: var(--blanco); }
.precio__concepto { font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.precio__nota { grid-column: 1; font-size: var(--t-chico); color: var(--tinta-2); }
.precio:first-child .precio__nota { color: var(--sobre-marino); }
.precio__monto { grid-row: 1 / span 2; grid-column: 2; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.875rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.precio__monto small { font-size: .875rem; font-weight: 600; letter-spacing: 0; margin-left: .25rem; opacity: .75; }
.consulta__acciones { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; }
.datos-contacto + .consulta__acciones { margin-top: var(--s-6); }
.lugar { position: relative; margin: 0; }
.lugar__foto { overflow: hidden; border-radius: var(--arco) var(--arco) var(--r) var(--r); aspect-ratio: 4 / 5; background: var(--marino-900); }
.lugar__foto img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.lugar__tarjeta {
  position: absolute; left: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); width: min(21rem, calc(100% - 2rem));
  padding: 1.5rem 1.6rem; border-radius: var(--r-grande); background: var(--blanco); box-shadow: 0 34px 70px -34px rgba(11, 22, 48, .6);
}
.lugar__tarjeta h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.lugar__tarjeta p { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.55; margin-bottom: .75rem; }
.lugar figcaption { margin-top: .75rem; font-size: .875rem; color: var(--tinta-2); text-align: right; }
@media (max-width: 860px) {
  .consulta { grid-template-columns: 1fr; }
  .lugar__tarjeta { position: relative; left: auto; bottom: auto; width: auto; margin: -4rem var(--s-3) 0; }
  .lugar figcaption { text-align: left; }
}

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.faq-wrap > div:first-child { position: sticky; top: calc(var(--nav-alto) + 2rem); }
.faq-wrap h2 { margin-bottom: var(--s-4); }
.faq-wrap > div:first-child p { color: var(--tinta-2); font-size: var(--t-lead); }
.faq { display: grid; gap: var(--s-2); }
.faq__item { border-radius: var(--r); background: var(--blanco); transition: background-color var(--dur) var(--ease-suave); }
.seccion--niebla .faq__item, .seccion--hielo .faq__item { background: var(--blanco); }
.seccion:not(.seccion--niebla):not(.seccion--hielo) .faq__item { background: var(--niebla); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px;
  padding: 1.35rem 1.5rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--hielo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%23223a72' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 50% no-repeat;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur);
}
.faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--hielo-2); }
.faq__item summary:hover { color: var(--marino); }
.faq__item p { padding: 0 1.5rem 1.4rem; margin: 0; color: var(--tinta-2); max-width: 62ch; }
.faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 450ms var(--ease-out), content-visibility 450ms allow-discrete; }
.faq__item[open]::details-content { block-size: auto; }
@media (max-width: 860px) {
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-wrap > div:first-child { position: static; }
}

/* ---------- Contacto y formulario ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.contacto h2 { margin-bottom: var(--s-4); }
.contacto > div:first-child > p { color: var(--tinta-2); font-size: var(--t-lead); }
.contacto .btn--wa { margin: var(--s-2) 0 var(--s-5); }
.datos-contacto { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.datos-contacto li { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-3); align-items: start; line-height: 1.5; }
.datos-contacto__ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem .9rem .4rem .4rem; background: var(--hielo); color: var(--marino); }
.datos-contacto__et { display: block; font-size: .875rem; font-weight: 600; color: var(--tinta-2); }
.datos-contacto a { font-weight: 600; text-decoration: none; }
.datos-contacto a:hover { color: var(--azul-boton); text-decoration: underline; }

.form-card { padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-radius: var(--r-grande); background: var(--hielo); }
.seccion--hielo .form-card, .seccion--niebla .form-card { background: var(--blanco); }
.form-card h3 { margin-bottom: var(--s-4); }
.form { display: grid; gap: var(--s-4); }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.campo { display: grid; gap: .45rem; }
.campo label { font-weight: 600; font-size: .9375rem; }
.opc { font-weight: 500; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 3.25rem; padding: .85rem 1rem; border: 1.5px solid var(--hielo-2); border-radius: var(--r-chico);
  background: var(--blanco); font-size: 1rem; transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida);
}
.campo textarea { resize: vertical; min-height: 6.5rem; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #b9cfe6; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul-boton); box-shadow: 0 0 0 4px rgba(61, 141, 204, .2); }
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo__error { margin: 0; font-size: .875rem; font-weight: 600; color: var(--error); }
.campo--check { grid-template-columns: auto 1fr; align-items: start; column-gap: .75rem; }
.campo--check input { width: 1.375rem; height: 1.375rem; min-height: 0; margin-top: .15rem; accent-color: var(--azul-boton); }
.campo--check label { font-weight: 500; }
.campo--check .campo__error { grid-column: 1 / -1; }
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form__nota { font-size: .875rem; color: var(--tinta-2); margin: 0; }
.aviso { margin-bottom: var(--s-4); padding: 1.1rem 1.25rem; border-radius: var(--r); }
.aviso--ok { background: #e3f4ea; color: #0f5132; }
@media (max-width: 860px) { .contacto { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__fila { grid-template-columns: 1fr; } .form .btn { width: 100%; } }

/* Mapa con fachada */
.mapa { position: relative; overflow: hidden; height: clamp(22rem, 40vw, 34rem); border-radius: var(--arco) var(--arco) var(--r-grande) var(--r-grande); background: var(--marino); color: var(--blanco); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__fachada { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-4); padding: var(--s-5); text-align: center; }
.mapa__fachada img { width: 4.5rem; }
.mapa__fachada p { color: var(--sobre-marino); }
.mapa__fachada strong { color: var(--blanco); }
.mapa__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ---------- Especialidad ---------- */
.area-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: start; }
.prosa { max-width: 44rem; }
.prosa h2 { margin-bottom: var(--s-5); }
.prosa p { color: var(--tinta-2); font-size: 1.0625rem; }
.prosa .btn { margin-top: var(--s-4); }
.tarjeta-lista { padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); border-radius: var(--r-grande); background: var(--marino); color: var(--blanco); }
.tarjeta-lista h2 { margin-bottom: var(--s-4); }
.tarjeta-lista .checks li::before { background-color: var(--marino-700); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%239fc6ec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.procedimientos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.procedimiento { padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); border-radius: var(--r-grande); background: var(--blanco); }
.procedimiento h3 { margin-bottom: .5rem; }
.procedimiento p { color: var(--tinta-2); }
.tratamiento { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.tratamiento--solo { grid-template-columns: minmax(0, 52rem); }
.tratamiento__foto { position: sticky; top: calc(var(--nav-alto) + var(--s-4)); margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--arco) var(--arco) var(--r) var(--r); background: var(--marino-900); }
.tratamiento__foto img { width: 100%; height: 100%; object-fit: cover; }
.procedimientos--lista { grid-template-columns: 1fr; gap: var(--s-5); padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-radius: var(--r-grande); background: var(--blanco); }
.procedimientos--lista .procedimiento { padding: 0; border-radius: 0; background: none; }
.revisado { margin-top: var(--s-4); font-size: var(--t-chico); color: var(--tinta-2); }
.revisado a { color: var(--marino); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.revisado a:hover { color: var(--azul-boton); }
.otras { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.otras a { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.2rem; border-radius: 999px; background: var(--hielo); color: var(--marino); font-weight: 600; text-decoration: none; transition: background-color var(--dur-rapida), color var(--dur-rapida); }
.otras a:hover { background: var(--marino); color: var(--blanco); }
@media (max-width: 860px) {
  .area-intro { grid-template-columns: 1fr; }
  .procedimientos { grid-template-columns: 1fr; }
  .tratamiento { grid-template-columns: 1fr; }
  .tratamiento__foto { position: static; aspect-ratio: 4 / 3; }
}

/* Tratamientos (página especialidades) */
.tratamientos__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.tratamientos__col { padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-radius: var(--r-grande); background: var(--blanco); }
.tratamientos__col h3 { margin-bottom: var(--s-4); }
.lista-def { margin: 0 0 var(--s-4); }
.lista-def dt { font-weight: 700; margin-top: var(--s-4); }
.lista-def dt:first-child { margin-top: 0; }
.lista-def dd { margin: .25rem 0 0; color: var(--tinta-2); }
@media (max-width: 860px) { .tratamientos__cols { grid-template-columns: 1fr; } }

/* Legal */
.prosa--legal { max-width: 46rem; }
.prosa--legal h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); margin: var(--s-6) 0 var(--s-3); }
.prosa--legal ul { list-style: disc; padding-left: 1.25rem; color: var(--tinta-2); margin-bottom: 1em; }
.prosa--legal li { margin-bottom: .35rem; }

/* ---------- CTA final ---------- */
.cta-final { padding-block: 0 var(--seccion); }
.cta-final__caja {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; align-items: center; gap: var(--s-5) var(--s-6);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); border-radius: var(--arco) var(--arco) var(--r-grande) var(--r-grande); background: var(--marino); color: var(--blanco); isolation: isolate;
}
.cta-final__iso { position: absolute; right: -3rem; top: -3rem; width: clamp(12rem, 24vw, 22rem); opacity: .08; z-index: -1; animation: flota 14s ease-in-out infinite; }
.cta-final h2 { max-width: 20ch; margin-bottom: var(--s-4); }
.cta-final p { color: var(--sobre-marino); font-size: var(--t-lead); max-width: 40rem; }
.cta-final__acciones { display: flex; flex-direction: column; gap: var(--s-3); }
@keyframes flota { 50% { transform: translateY(14px) rotate(-4deg); } }
@media (max-width: 860px) {
  .cta-final__caja { grid-template-columns: 1fr; }
  .cta-final__acciones .btn { width: 100%; }
}

/* ---------- Footer ---------- */
/* Jerarquía: solo los títulos van en blanco y 700; enlaces en 400 y más claros que el texto informativo. */
.footer { --footer-linea: rgba(255, 255, 255, .1); background: var(--marino-950); color: var(--sobre-marino-2); padding: clamp(4rem, 3rem + 4vw, 7rem) 0 var(--s-5); font-size: var(--t-chico); }
.footer a { color: var(--sobre-marino); font-weight: 400; text-decoration: none; }
.footer a:hover { color: var(--blanco); text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr .8fr 1.2fr; gap: var(--s-6) var(--s-5); }
.footer__marca img { width: 13rem; margin-bottom: var(--s-4); }
.footer__marca p { max-width: 24rem; }
.footer__titulo { margin-bottom: var(--s-4); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--blanco); }
.footer ul { display: grid; gap: .15rem; }
.footer li a { display: inline-block; padding-block: .3rem; }
/* Contacto: canales (enlaces con ícono) y sede (texto), separados por una línea, sin tarjeta. */
.footer .footer__canales { gap: 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--footer-linea); }
.footer .footer__canal { display: inline-flex; align-items: center; gap: .6rem; }
.footer__canal .ico { color: var(--azul-claro); transition: color var(--dur-rapida) var(--ease-suave); }
.footer__canal:hover .ico { color: var(--blanco); }
.footer__sede { display: grid; justify-items: start; padding-top: var(--s-3); line-height: 1.55; }
.footer__sede strong { color: var(--sobre-marino); font-weight: 500; }
.footer__sede a { margin-top: var(--s-1); padding-block: .3rem; text-decoration: underline; text-underline-offset: .2em; }
.footer__nombre { margin-top: clamp(3rem, 2rem + 4vw, 6rem); font-size: clamp(3.25rem, 1rem + 9vw, 9.5rem); white-space: nowrap; font-weight: 700; letter-spacing: -.055em; line-height: .95; color: #4f72b8; text-wrap: balance; }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--footer-linea); font-size: .875rem; }
.footer__legal p { margin: 0; }
.footer__boton { padding: 0; border: 0; background: none; color: inherit; text-decoration: underline; text-underline-offset: .2em; min-height: 44px; }
.footer__boton:hover { color: var(--blanco); }
.creditos summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.creditos summary:hover { color: var(--blanco); }
.creditos ul { margin-top: .5rem; gap: .35rem; font-size: .8125rem; }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 40;
  display: inline-flex; align-items: center; gap: .55rem; min-height: 3.5rem; padding: .9rem 1.35rem .9rem 1.1rem;
  border-radius: 999px; background: var(--verde-wa); color: var(--blanco); font-weight: 700; text-decoration: none;
  box-shadow: 0 18px 40px -16px rgba(11, 22, 48, .55);
  opacity: 0; visibility: hidden; transform: translateY(1.5rem);
  transition: transform 600ms var(--ease-out), opacity 300ms var(--ease-suave), visibility 0s linear 600ms, background-color var(--dur);
}
.wa-flotante.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wa-flotante:hover { background: #12603b; }
.wa-flotante .ico { width: 1.5rem; height: 1.5rem; }
/* Siempre en la esquina inferior derecha; en celular el aviso de cookies ocupa el ancho y el botón espera a que se cierre */
@media (max-width: 560px) { body.cookies-visibles .wa-flotante { opacity: 0; visibility: hidden; } }

/* ---------- Aviso de cookies ---------- */
.cookies {
  position: fixed; left: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 60; width: min(30rem, calc(100% - 2rem));
  padding: 1.5rem; border-radius: var(--r-grande); background: var(--blanco); color: var(--tinta); box-shadow: 0 30px 70px -24px rgba(11, 22, 48, .55);
  animation: sube 600ms var(--ease-out) both;
}
.cookies[hidden] { display: none; }
.cookies h2 { font-size: 1.125rem; letter-spacing: -.015em; margin-bottom: .5rem; }
.cookies p { font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.55; margin-bottom: 1rem; }
.cookies a { color: var(--azul-boton); font-weight: 600; }
.cookies__botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookies__corto { display: none; }
.cookies .btn { min-height: 2.75rem; padding: .65rem 1.25rem; font-size: .9375rem; }
@keyframes sube { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 560px) {
  .cookies { left: .75rem; right: .75rem; bottom: .75rem; width: auto; padding: 1rem 1.1rem; border-radius: var(--r); }
  .cookies h2 { font-size: 1rem; margin-bottom: .25rem; }
  .cookies p { font-size: .8125rem; line-height: 1.5; margin-bottom: .75rem; }
  .cookies .btn { flex: 1; min-height: 2.75rem; }
}

/* ==========================================================================
   Movimiento — solo con JS activo y sin preferencia de movimiento reducido.
   Sin JS, todo se ve en su estado final.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revela] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--dur-lenta) var(--ease-out), transform var(--dur-lenta) var(--ease-out); transition-delay: calc(var(--i, 0) * 85ms); }
  .js [data-revela="izq"] { transform: translate3d(-32px, 0, 0); }
  .js [data-revela="escala"] { transform: scale(.94); }
  .js [data-revela].is-visible { opacity: 1; transform: none; }
  .js .proceso__paso:not(.is-visible) { --progreso: 0; }

  /* El hero (foto y titular: el LCP) se pinta al instante y sin movimiento.
     Solo la tarjeta rotativa, secundaria, entra después. */
  .js .rota { animation: entra 900ms var(--ease-out) 600ms both; }
  @keyframes entra { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .rota__item { transition: none; }
}
.area-intro > div > h2 { margin-bottom: var(--s-4); }
.metodo__paso:last-child { min-height: 0; padding-bottom: 0; }
.ventaja--cta { display: block; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); border-radius: var(--r-grande); background: var(--marino-900); }
.ventaja--cta .btn { margin-top: var(--s-4); }
.ventajas__lista > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- Pantallas angostas (320–420 px) ---------- */
/* Las rejillas de una columna nunca deben crecer más que la pantalla por el ancho mínimo de su contenido */
@media (max-width: 960px) {
  .valoracion, .consulta, .contacto, .area-intro, .cita, .perfil-detalle, .faq-wrap, .ventajas__cabeza,
  .metodo__grid, .quien, .cta-final__caja, .hero-pagina__grid, .cifras, .ventajas__lista, .tratamientos__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .precio { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 1.35rem; }
  .precio__monto { grid-row: auto; grid-column: 1; margin-top: .35rem; }
  .cta-final__caja { padding: 2rem 1.5rem; }
  .form-card { padding: 1.5rem 1.25rem; }
}
@media (max-width: 560px) {
  .cookies__largo { display: none; }
  .cookies__corto { display: inline; }
  .cookies .btn { padding-inline: .9rem; white-space: nowrap; }
  /* La fachada del mapa crece con su contenido; el iframe usa la altura mínima */
  .mapa { height: auto; min-height: 22rem; }
  .mapa__fachada { position: relative; padding: 2.5rem 1.5rem; }
}
@media (max-width: 360px) {
  .hero__titulo { font-size: 2.125rem; }
  .hero__sub { font-size: 1rem; }
}