/* Dr. Paternina, sistema visual.
   ─────────────────────────────────────────────────────────────────────────────────────────────
   Puerto de 02_Maquetas/version-final/styles.css, la maqueta aprobada por el cliente. El objetivo
   declarado es que la portada renderice exactamente igual que la maqueta, asi que este fichero es
   una copia con solo 7 cambios, todos por el mismo motivo: el editor de bloques emite <div> y <p>
   donde la maqueta ponia <ol>, <li> y elementos sueltos, y dos selectores atrapatodo (`.about p`
   y `.post-card--faq p`) alcanzaban ahi elementos que no debian.

   Los cambios, uno a uno:

  .consulta__grid li { display: grid;              -> .consulta__grid > * { display: grid;
  .consulta__grid li, .svc-card { margin-bottom:   -> .consulta__grid > *, .svc-card { margin-
  .nota__puntos li { display: grid;                -> .nota__puntos > * { display: grid;
  .nota__puntos li { grid-row: auto;               -> .nota__puntos > * { grid-row: auto;
  .about p { font-size: 17px;                      -> .about__parrafo { font-size: 17px;
  .post-card--faq p { font-size: 14.5px;           -> .post-card__respuesta { font-size: 14.5p
  .page[hidden] { display: none; }                 -> (retirado)

   Todo lo que WordPress necesita y la maqueta no tenia va al final, en la seccion 21, separada a
   proposito para que este fichero se pueda seguir comparando linea a linea con el de la maqueta.

   Regla de mantenimiento: las variables de :root de aqui abajo y la paleta de theme.json son la
   misma paleta escrita dos veces, porque el front la necesita como variables CSS y el editor la
   necesita como preajustes. `node tools/comprobar-tema.mjs` verifica que no se separen.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

/* ══ 1. Variables y base ══ */

:root {
  --navy: #16263D;
  --navy-deep: #0D1826;
  --navy-soft: #1B2E4A;
  --gold: #C6A15B;
  --gold-light: #E0C48C;
  --gold-dark: #9C7B3C;
  /* Dos oros para fondos claros, porque el minimo de contraste depende del fondo:
     --gold-deep sobre marfil da 4.60:1, y sobre arena solo 3.99, asi que ahi se usa --gold-ink,
     que da 5.17:1. El --gold-dark original se queda para titulares grandes (3.5:1, suficiente). */
  --gold-deep: #8A6730;
  --gold-ink: #6F5626;
  --ivory: #F6F1EA;
  --sand: #E4DED3;
  /* Filete y texto corrido sobre marfil, en tonos calidos: el gris azulado de la V4 se leia
     apagado, casi como texto deshabilitado, y no pertenecia a la paleta editorial. */
  --stone: #D3CBC1;
  /* El filete de piedra sobre arena se queda en 1,20:1 y desaparece: sobre arena va este. */
  --stone-deep: #B9AC99;
  --slate: #575049;
  --pad-x: clamp(28px, 5vw, 90px);
  --header-h: 82px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, blockquote, figure { margin: 0; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

img { display: block; max-width: 100%; }

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

input, button { font-family: 'Manrope', sans-serif; }

button { cursor: pointer; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  background: var(--gold);
  color: var(--navy);
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip-link:focus { top: 12px; color: var(--navy); }

/* ══ 2. Animaciones ══ */

@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* La V4 escalaba hasta 1.14 y desplazaba un 2.5% hacia arriba, lo que se comía la cabeza del
   retrato. Ahora es solo escala, y el origen va sobre la cara, así que la cara queda anclada
   y lo que se expande son los bordes. */
@keyframes drift { 0% { transform: scale(1.02); } 100% { transform: scale(1.08); } }

.rv { animation: rise .9s cubic-bezier(.16,.84,.28,1) both; }
.fi { animation: fadein 1.4s ease both; }

/* ══ 3. Tipografía y utilidades ══ */

.serif { font-family: 'Bodoni Moda', serif; font-weight: 400; }

/* 10.5px con .34em de espaciado se leia con esfuerzo: el espaciado ancho separa tanto las letras
   que la palabra deja de leerse como bloque. Sube a 12.5px y el espaciado baja a .3em para
   compensar, que a mayor cuerpo hace falta menos. */
.kicker {
  display: block;
  font-size: 12.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}
/* Sobre marfil el rotulo va en oro terroso, no en gris: en gris se leia deshabilitado y rompia
   la continuidad con los rotulos dorados de las secciones azules. 4.60:1, AA verificado. */
.kicker--ink { color: var(--gold-deep); }

.display {
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 82px);
  line-height: 1.03;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.h-section {
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.wrap { max-width: 1320px; margin: 0 auto; }
.wrap--1180 { max-width: 1180px; margin: 0 auto; }
.wrap--1000 { max-width: 1000px; margin: 0 auto; }

/* ══ 4. Botones, enlaces, etiquetas ══ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 0;
  padding: 19px 34px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, border-color .3s, transform .3s;
}

.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-light); color: var(--navy); transform: translateY(-2px); }

.btn--ghost { background: transparent; border: 1px solid rgba(246,243,238,.28); color: var(--ivory); padding: 18px 32px; }
.btn--ghost:hover { border-color: var(--gold); background: rgba(198,161,91,.08); color: var(--ivory); }

.link-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-bottom: 7px;
  border-bottom: 1px solid;
}
.link-line--gold { color: var(--gold); border-color: rgba(198,161,91,.4); }
.link-line--ivory { color: rgba(246,243,238,.78); border-color: rgba(246,243,238,.3); }
.link-line--ivory:hover { color: var(--ivory); }
.link-line--ink { color: var(--navy); border-color: var(--navy); }
.link-line--ink:hover { color: var(--gold-ink); }

.tag {
  border: 1px solid var(--stone);
  padding: 10px 18px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ══ 5. Contenedor de imagen ══ */

.media { position: relative; overflow: hidden; background: var(--navy-soft); }
/* <picture> es inline por defecto y no propaga la altura del contenedor a la imagen. */
.media picture { display: block; width: 100%; height: 100%; }
.media--sand { background: var(--sand); }
.ar-45 { aspect-ratio: 4/5; }
.media img { width: 100%; height: 100%; object-fit: cover; }
/* El retrato autorizado tiene la mediana de luminancia en 182: la pared clara domina el encuadre
   y el sujeto se ve apagado. No es falta de contraste global (desviacion 59,5, normal), asi que
   en vez de forzar contraste se baja un punto el brillo y se levanta la saturacion, que estaba en
   18,6%. Simulado antes de aplicar: las altas luces llegan a 231 de 255, no se queman. */
.about__figure img { filter: contrast(1.12) brightness(.96) saturate(1.12); }

/* ══ 6. Cabecera y navegación ══ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(20px, 4vw, 56px);
  height: var(--header-h);
  background: rgba(13,24,38,.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(198,161,91,.18);
}

/* Logotipo oficial completo, con su línea de servicios. Para que la bajada se lea necesita 92px
   de alto, así que la cabecera crece a 116px a partir de 640px. Por debajo no cabe junto al botón
   de cita y queda solo el símbolo, con la cabecera en su altura normal.
   El enlace lleva el nombre accesible en aria-label, así que las imágenes son decorativas. */
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* Ojo con la especificidad: `.brand img` es (0,1,1) y ganaría a `.brand__full`, que es (0,1,0),
   así que la media query no podría ocultarlo. El `display` va en las clases, nunca aquí. */
.brand img { width: auto; }
.brand__full { display: none; height: 92px; }
.brand__mark { display: block; height: 46px; }

.nav-desktop { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); }
.nav-desktop a {
  font-size: 11.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(246,243,238,.78);
  white-space: nowrap;
  transition: color .3s;
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--gold); }

.nav-cta {
  font-size: 11.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--navy) !important;
  background: var(--gold);
  padding: 13px 22px;
  white-space: nowrap;
  font-weight: 600;
  transition: background .3s, transform .3s;
}
.nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
.nav-cta--sm { font-size: 11px; letter-spacing: .18em; padding: 12px 18px; }

.nav-narrow { display: none; align-items: center; gap: 14px; }

.menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(198,161,91,.4);
  background: transparent;
  flex-shrink: 0;
}
.menu-toggle span { display: block; width: 20px; height: 1px; background: var(--ivory); }

.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 89;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(198,161,91,.28);
  padding: 22px clamp(20px, 4vw, 56px) 30px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  font-family: 'Bodoni Moda', serif;
  font-size: 23px;
  color: var(--ivory);
  padding: 12px 0;
  border-bottom: 1px solid rgba(246,243,238,.1);
}
.mobile-menu a:last-child { border-bottom: 0; }

@media (max-width: 1179px) {
  .nav-desktop { display: none; }
  .nav-narrow { display: flex; }
}
@media (min-width: 1180px) {
  .mobile-menu { display: none; }
}

/* ══ 7. Páginas (router) ══ */

.page--offset { padding-top: var(--header-h); }

/* ══ 8. Hero ══ */

.hero {
  /* Pie optico del hero. Lo comparten la columna de texto y el cuadro de alcance, así que los
     dos apoyan en la misma línea y el cuadro no queda descolgado. */
  --hero-foot: 90px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--navy);
}
/* En una columna manda el orden del DOM: texto, CTA, fotografia y despues las tres
   caracteristicas. En dos columnas se recolocan por rejilla, con la foto ocupando ambas filas. */
@media (min-width: 1160px) {
  .hero { min-height: 100vh; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
  .hero__copy  { grid-column: 1; grid-row: 1; }
  .hero__stats { grid-column: 1; grid-row: 2; }
  .hero__media { grid-column: 2; grid-row: 1 / span 2; }
}
.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px var(--pad-x) 34px;
}
.hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.hero__eyebrow::before { content: ''; width: 46px; height: 1px; background: var(--gold); flex-shrink: 0; }
.hero__eyebrow span { font-size: 10.5px; letter-spacing: .36em; color: var(--gold); text-transform: uppercase; }
.hero__title {
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  font-size: clamp(40px, 4.1vw, 78px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 30px;
  text-wrap: balance;
}
.hero__title em { color: var(--gold); font-style: italic; }
.hero__lead {
  max-width: 520px;
  font-size: 17.5px;
  line-height: 1.75;
  color: rgba(246,243,238,.72);
  font-weight: 300;
  margin-bottom: 40px;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero__alt {
  margin-top: 26px;
  font-size: 14px;
  font-weight: 300;
  color: rgba(246,243,238,.66);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.hero__alt .link-line { font-size: 10.5px; padding-bottom: 4px; }
/* Tres columnas iguales, no flex: las etiquetas ya no son de una palabra y con flex quedaban
   de anchos dispares. Con `subgrid` los titulos comparten una fila y las descripciones otra, asi
   que quedan alineadas sin reservar altura a mano: el `min-height` que se uso antes dejaba una
   linea muerta cuando los tres titulos cabian en una sola. */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 2.4vw, 34px);
  row-gap: 15px;
  padding: 26px var(--pad-x) var(--hero-foot);
  border-top: 1px solid rgba(246,243,238,.12);
}
@media (min-width: 1160px) {
  .hero__stats { margin: 30px clamp(28px, 5vw, 90px) 0; padding: 26px 0 var(--hero-foot); }
}
.stat { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
/* Bodoni Moda tiene mucho contraste de trazo: a 19-23px los finos casi desaparecen y cuesta
   leerlo, aunque el oro sobre azul de 6.28:1 vaya sobrado de contraste. Se sube el cuerpo y se pasa
   a peso 500, que engorda justamente esos finos. El peso 500 ya viene en el enlace de tipografias. */
.stat b { display: block; font-family: 'Bodoni Moda', serif; font-weight: 500; font-size: clamp(22px, 1.8vw, 28px); color: var(--gold); line-height: 1.2; text-wrap: balance; }
.stat small { display: block; font-size: 10px; letter-spacing: .14em; line-height: 1.65; color: rgba(246,243,238,.66); text-transform: uppercase; text-wrap: pretty; }

/* En movil la foto deja de ocupar media pantalla: pasa a una banda de 6/5, que recorta unos
   230px de alto sin perder la cara. */
.hero__media { position: relative; overflow: hidden; aspect-ratio: 6 / 5; background: var(--navy); }
@media (min-width: 1160px) { .hero__media { aspect-ratio: auto; min-height: min(100vh, 560px); } }
.hero__drift { position: absolute; inset: 0; transform-origin: 50% 22%; animation: drift 24s ease-in-out infinite alternate; }
.hero__drift img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

/* En dos columnas la cabecera fija se superpone al panel de la foto y dejaba la cabeza del
   retrato pegada al menú. La imagen arranca por debajo de la cabecera y el hueco lo cubre el
   fondo de .hero__media, que es el mismo azul, así que no se ve el corte. En una columna la
   foto va debajo del texto y no hay superposición, por eso el ajuste va en media query. */
@media (min-width: 1160px) {
  .hero__drift { inset: calc(var(--header-h) + 12px) 0 0 0; }
}

/* El fondo del retrato es el mismo azul de la marca pero aplastado a negro en los bordes
   (#01040B frente a #16263D), y por eso se veía una costura entre el panel de texto y la foto.
   Un lavado plano lo arreglaría pero apagaría la cara, así que la corrección va por capas:
   la viñeta radial deja limpio el centro, donde está el sujeto, y lleva los bordes al azul
   del sitio. El resto son fundidos de borde. Funciona con cualquier fotografía futura. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, var(--navy) 0%, rgba(22,38,61,.85) 8%, rgba(22,38,61,.28) 28%, rgba(22,38,61,0) 48%),
    linear-gradient(to bottom, rgba(22,38,61,.85) 0%, rgba(22,38,61,0) 16%),
    linear-gradient(to top, var(--navy) 0%, rgba(22,38,61,0) 24%),
    radial-gradient(ellipse 58% 74% at 54% 40%, rgba(22,38,61,0) 38%, rgba(22,38,61,.66) 100%);
  pointer-events: none;
}
.hero__note {
  position: absolute;
  left: 34px; right: 34px; bottom: var(--hero-foot);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.hero__note > div {
  border: 1px solid rgba(198,161,91,.4);
  background: rgba(13,24,38,.78);
  backdrop-filter: blur(10px);
  padding: 20px 26px;
  max-width: 300px;
}
.hero__note small { display: block; font-size: 9.5px; letter-spacing: .3em; color: var(--gold); text-transform: uppercase; margin-bottom: 9px; }
.hero__note strong { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: 18px; color: var(--ivory); line-height: 1.3; }

/* ══ 9. La primera consulta ══
   Ocupa el hueco de la franja de métricas de la V4 y conserva su ritmo (fondo marfil, cuatro
   columnas, filetes finos), pero sin cifras: los verbos van en serif grande y el apoyo debajo. */

.consulta { background: var(--ivory); color: var(--navy); padding: clamp(74px, 9vw, 120px) var(--pad-x); }
.consulta h2 { max-width: 780px; margin-bottom: 26px; }
.consulta__lead {
  font-size: 17px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--slate);
  max-width: 660px;
  margin-bottom: clamp(46px, 5vw, 72px);
  text-wrap: pretty;
}
.consulta__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(26px, 3vw, 48px);
  row-gap: 15px;
}
/* subgrid: los parrafos de las cuatro columnas arrancan a la misma altura aunque un titular envuelva */
.consulta__grid > * { display: grid; grid-row: span 2; grid-template-rows: subgrid; border-top: 1px solid var(--stone); padding-top: 26px; }
.consulta__grid h3 {
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  font-size: clamp(25px, 2.5vw, 33px);
  line-height: 1.15;
}
.consulta__grid p { font-size: 15px; line-height: 1.75; font-weight: 300; color: var(--slate); text-wrap: pretty; }

/* ══ 10. Quién te atiende ══ */

.about { background: var(--ivory); color: var(--navy); padding: 0 var(--pad-x) clamp(80px, 10vw, 140px); }
.about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(390px, 100%), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about__figure { position: relative; }
.about__badge { position: absolute; right: -1px; bottom: -1px; background: var(--navy); padding: 22px 28px; max-width: 88%; }
.about__badge strong { display: block; font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: 19px; color: var(--ivory); }
.about__badge small { display: block; font-size: 9.5px; letter-spacing: .26em; color: var(--gold); text-transform: uppercase; margin-top: 6px; }
.about h2 { margin-bottom: 30px; }
.about h2 em { font-style: italic; color: var(--gold-dark); }
.about__parrafo { font-size: 17px; line-height: 1.8; color: var(--slate); font-weight: 300; margin-bottom: 22px; max-width: 600px; text-wrap: pretty; }
.about__tags { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 40px; }

/* ══ 11. Compromisos ══ */

.services { background: var(--navy); padding: clamp(80px, 10vw, 140px) var(--pad-x); }
.services__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
/* El titular baja un 10% respecto a .h-section para que no compita con las tarjetas. */
.services h2 { font-size: clamp(29px, 3.5vw, 50px); }
/* Se retiran los separadores de 1px (oro al 22%, demasiado apagados sobre azul) y el bloque pasa
   a columnas abiertas con filete superior, como la sección de la primera consulta: las dos rejillas
   de cuatro riman y el titular de cada compromiso arranca justo bajo su filete. */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: clamp(26px, 3vw, 46px); row-gap: 15px; }
.svc-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; color: var(--ivory); border-top: 1px solid rgba(246,243,238,.34); padding-top: 26px; }
.svc-card h3 { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: 25px; line-height: 1.22; }
.svc-card p { font-size: 14.5px; line-height: 1.7; color: rgba(246,243,238,.82); font-weight: 300; }
.svc-link { margin-top: clamp(30px, 3.5vw, 40px); }
.svc-foot {
  margin-top: clamp(44px, 5vw, 64px);
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(246,243,238,.82);
  max-width: 720px;
  border-left: 1px solid rgba(246,243,238,.34);
  padding-left: 24px;
}

/* ══ 12. Comparador de casos ══
   Dos imágenes superpuestas. La de abajo es el después y se ve a la derecha; la de arriba es el
   antes y el mando la recorta desde el borde izquierdo. Se conserva el alto del bloque anterior
   (unos 490px a 1180px de ancho) recortando las imágenes a 12/5 con object-fit. */

.compare { background: var(--ivory); color: var(--navy); padding: clamp(80px, 10vw, 140px) var(--pad-x); }
.compare__head { text-align: center; margin-bottom: 52px; }
.compare__hint { margin-top: 18px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }

.compare__stage {
  --cmp: 50%;
  position: relative;
  aspect-ratio: 12 / 5;
  background: var(--sand);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
}
.compare__panel { position: absolute; inset: 0; }
.compare__panel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* La capa del antes se recorta desde la izquierda: a 0% no se ve, a 100% cubre todo. */
.compare__before { clip-path: inset(0 calc(100% - var(--cmp)) 0 0); }

.compare__line { position: absolute; top: 0; bottom: 0; left: var(--cmp); width: 2px; background: var(--gold); pointer-events: none; }
.compare__handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 10px 34px rgba(13,24,38,.4);
}
.compare__label {
  position: absolute;
  top: 22px;
  padding: 8px 16px;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare__label--before { left: 22px; background: rgba(13,24,38,.86); color: var(--ivory); }
.compare__label--after { right: 22px; background: rgba(198,161,91,.96); color: var(--navy); }
.compare__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare__stage:has(.compare__input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Nota del comparador: aviso a la izquierda, tres apuntes a la derecha. Filete fino superior y
   nada de tarjetas ni iconos, para que siga leyendose como texto editorial. */
.nota {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(30px, 4vw, 64px);
  margin-top: clamp(32px, 4vw, 46px);
  padding-top: 28px;
  border-top: 1px solid var(--stone);
}
.nota__etiqueta {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.nota__aviso p { font-size: 14px; line-height: 1.8; font-weight: 300; color: var(--slate); text-wrap: pretty; }
.nota__puntos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(22px, 2.5vw, 40px);
  row-gap: 10px;
}
.nota__puntos > * { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.nota__puntos h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
}
.nota__puntos p { font-size: 13.5px; line-height: 1.7; font-weight: 300; color: var(--slate); text-wrap: pretty; }

@media (max-width: 860px) {
  .nota { grid-template-columns: 1fr; }
  .nota__puntos { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 6px; }
  .nota__puntos > * { grid-row: auto; grid-template-rows: none; margin-bottom: 16px; }
}

/* En pantallas estrechas el recorte de 12/5 deja una banda demasiado baja para leer el cuero
   cabelludo. El comparador sigue siendo arrastrable: el input de rango funciona con el dedo. */
@media (max-width: 700px) {
  .compare__stage { aspect-ratio: 4 / 3; }
  .compare__label { top: 14px; font-size: 9.5px; letter-spacing: .2em; padding: 7px 12px; }
  .compare__label--before { left: 14px; }
  .compare__label--after { right: 14px; }
  .compare__handle { width: 46px; height: 46px; }
}

/* ══ 13. Medicina general ══
   Fondo arena, sin fotografia y sin azul noche. Es la pausa entre salud capilar y el cierre, asi
   que va centrada y con mas aire vertical que el resto. Los colores cambian respecto al marfil
   porque la arena es mas oscura: el oro del marfil solo da 3,86:1 aqui, y el filete de piedra se
   queda en 1,20:1 y desaparece. */

.general {
  /* Escala vertical de la seccion, en tres pasos. Los saltos originales eran 26, 30, 40, 32 y 44:
     una secuencia sin logica, que se lee como descuido aunque no se sepa nombrar. Ahora agrupan:
     dentro de un grupo 16px, entre grupos 26px, y antes de la accion 34px.
       rotulo + titular   = un solo bloque de titulo   -> 16
       titular -> texto                                -> 26
       texto -> etiquetas                              -> 26
       etiquetas + limite = los dos matices juntos     -> 16
       limite -> CTA      = la accion, separada        -> 34
     El relleno superior es menor que el inferior: un bloque centrado apoyado ligeramente alto se
     percibe como centrado, y apoyado justo al medio se percibe como caido. */
  --g-junto: 16px;
  --g-grupo: 26px;
  --g-accion: 34px;
  background: var(--sand);
  color: var(--navy);
  padding: clamp(72px, 8vw, 116px) var(--pad-x) clamp(80px, 9vw, 128px);
  text-align: center;
}
.general .kicker { color: var(--gold-ink); margin-bottom: var(--g-junto); }
.general h2 { max-width: 820px; margin: 0 auto var(--g-grupo); }
.general__body {
  font-size: 17.5px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--slate);
  max-width: 700px;
  margin: 0 auto var(--g-grupo);
  text-wrap: pretty;
}
.general__tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: var(--g-junto); }
.general .tag { border-color: var(--stone-deep); color: var(--navy); }
.general__limit {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--slate);
  font-weight: 400;
  margin-bottom: var(--g-accion);
}

/* ══ 15. Tres respuestas que empiezan por no ══ */

.posts { background: var(--navy); padding: clamp(80px, 10vw, 140px) var(--pad-x); }
.posts__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 54px; }
.posts__head h2 { font-size: clamp(30px, 3.4vw, 48px); }
/* subgrid en tres filas (rotulo, pregunta, respuesta) para que las tres respuestas arranquen a la
   misma altura aunque las preguntas ocupen 1, 2 y 3 lineas. Sin esto los parrafos se desfasaban
   59px y las columnas se percibian desequilibradas. */
.posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  grid-template-rows: auto auto auto;
  gap: 1px;
  background: rgba(198,161,91,.22);
}
.post-card--faq {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 16px;
  background: var(--navy);
  padding: 40px 32px 36px;
}
.post-card--faq small { display: block; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.post-card--faq h3 { font-family: 'Bodoni Moda', serif; font-weight: 400; font-size: 23px; line-height: 1.28; }
/* Ya daba 7.79:1, de sobra para AA. Lo que costaba era el peso 300 a 14.5px sobre azul, que
   adelgaza los trazos: se sube la opacidad a .86 (10.4:1) para compensar sin tocar el estilo. */
.post-card__respuesta { font-size: 14.5px; line-height: 1.75; color: rgba(246,243,238,.86); font-weight: 300; }

/* ══ 16. Cabecera de página (rutas pendientes) ══ */

.page-head { background: var(--navy); padding: clamp(70px, 9vw, 120px) var(--pad-x); min-height: 60vh; display: flex; align-items: center; }
.page-head h1 { max-width: 1000px; }
.page-head__sub { max-width: 620px; font-size: 17px; line-height: 1.8; color: rgba(246,243,238,.72); font-weight: 300; margin: 28px 0 40px; text-wrap: pretty; }

/* ══ 17. Cierre por recorrido ══ */

.cta-final { background: var(--navy-deep); padding: clamp(80px, 10vw, 130px) var(--pad-x); border-top: 1px solid rgba(198,161,91,.2); }
.cta-final__inner { text-align: center; }
.cta-final h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.06; margin-bottom: 48px; }
.cta-final__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-final .btn { padding: 20px 36px; text-align: left; }
.cta-final__state { max-width: 640px; margin: 34px auto 0; font-size: 12.5px; line-height: 1.7; letter-spacing: .04em; color: rgba(246,243,238,.72); font-weight: 300; }

/* ══ 18. Pie ══ */

.site-footer { background: var(--navy); padding: clamp(56px, 7vw, 90px) var(--pad-x) 40px; border-top: 1px solid rgba(246,243,238,.1); }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(28px, 4vw, 60px); }
/* Firma del pie. El lockup completo escala por ancho, así que la bajada se mantiene proporcional
   y no baja de los 6px que necesita para leerse. Ver MANIFIESTO-IMAGENES.md. */
.site-footer__sign {
  padding-bottom: clamp(30px, 4vw, 46px);
  margin-bottom: clamp(34px, 4vw, 50px);
  border-bottom: 1px solid rgba(246,243,238,.12);
}
.site-footer__logo { height: auto; }
.site-footer__logo--full { display: block; width: min(430px, 100%); }
.site-footer__logo--short { display: none; width: min(232px, 100%); }
.site-footer__grid > div > p { font-size: 14px; line-height: 1.8; color: rgba(246,243,238,.68); font-weight: 300; max-width: 300px; }
.site-footer__col { display: flex; flex-direction: column; gap: 13px; }
.site-footer__col small { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.site-footer__col a, .site-footer__col span { font-size: 14px; color: rgba(246,243,238,.72); line-height: 1.6; }
.site-footer__col a { min-height: 24px; display: flex; align-items: center; }
.site-footer__col a:hover { color: var(--gold); }
.site-footer__bottom {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid rgba(246,243,238,.1);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__bottom span { font-size: 11.5px; color: rgba(246,243,238,.66); letter-spacing: .08em; line-height: 1.7; }

/* Las dos rejillas de cuatro saltan de 4 a 2 columnas y de 2 a 1, sin pasar por 3: con `auto-fit`
   en anchos intermedios la cuarta columna se descolgaba sola y dejaba un 3+1 desequilibrado. */
@media (min-width: 1100px) {
  .consulta__grid, .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .consulta__grid, .svc-grid { grid-template-columns: 1fr; row-gap: 12px; }
  .consulta__grid > *, .svc-card { margin-bottom: 12px; }
  /* Compromisos, compactado en movil: cuatro tarjetas apiladas ocupaban demasiado scroll. */
  .svc-card { padding-top: 20px; margin-bottom: 4px; }
  .svc-card h3 { font-size: 21px; line-height: 1.2; }
  .svc-card p { font-size: 14px; line-height: 1.6; }
  .svc-grid { row-gap: 10px; }
  .services__head { margin-bottom: 38px; }
  .svc-foot { margin-top: 32px; padding-left: 18px; font-size: 13.5px; }
  .svc-link { margin-top: 26px; }
}

/* ══ 19. Ajustes en pantallas estrechas ══ */

@media (max-width: 620px) {
  .hero { --hero-foot: 70px; }
  .hero__copy { padding: 118px var(--pad-x) 30px; }
  .hero__stats { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 15px; padding-top: 24px; }
  .stat { grid-row: auto; grid-template-rows: none; row-gap: 15px; margin-bottom: 8px; }
  .hero__note { left: 20px; right: 20px; bottom: 40px; }
  .hero__note > div { max-width: none; }
  .about__badge { position: static; max-width: none; margin-top: 1px; }
  .services__head { margin-bottom: 40px; }
  .btn { width: 100%; justify-content: space-between; }
}

/* Por debajo de 560px el lockup completo y el botón de cita no caben juntos en la cabecera:
   queda solo el símbolo, que ya lleva el nombre accesible en el aria-label del enlace. */
/* A partir de 640px cabe el logotipo completo en la cabecera, que crece para darle sitio a la
   bajada. Por debajo, y en el pie por debajo de 560px, entran las versiones reducidas. */
@media (min-width: 640px) {
  :root { --header-h: 116px; }
  .brand__full { display: block; }
  .brand__mark { display: none; }
}

@media (max-width: 560px) {
  .site-footer__logo--full { display: none; }
  .site-footer__logo--short { display: block; }
}

@media (max-width: 380px) {
  .brand__mark { height: 36px; }
  .btn { padding: 17px 22px; font-size: 11px; letter-spacing: .14em; }
  .nav-cta--sm { padding: 10px 12px; font-size: 9px; letter-spacing: .08em; }
}

/* ══ 20. Movimiento reducido ══ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .fi { animation: none; }
  .hero__drift { animation: none; }
  .btn, .nav-cta { transition: none; }
  .btn--gold:hover, .nav-cta:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   21. Capa de WordPress
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Todo lo que la maqueta no necesitaba: lo que el editor de bloques anade y hay que neutralizar,
   y las vistas que la maqueta no tenia (blog, entrada, legal, aviso de canal, paginacion).
   Esta seccion es lo unico que no procede del diseno aprobado. Va separada para que el resto del
   fichero se pueda seguir comparando linea a linea con styles.css de la maqueta.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 21.1 Bloques del editor ─────────────────────────────────────────────────────────────────
   core/image envuelve cada imagen en un <figure>, y la hoja de bloques le pone `margin: 0 0 1em`
   con especificidad de clase, que gana al `figure { margin: 0 }` de la base. Donde la maqueta
   tenia un <div> que llenaba su contenedor, el <figure> tiene que llenarlo igual. */

.wp-block-image { margin: 0; }
.hero__drift .wp-block-image { width: 100%; height: 100%; }

/* ── 21.2 Barra de administracion ────────────────────────────────────────────────────────────
   La cabecera y el menu movil van fijos al borde superior. Con la sesion iniciada ahi esta la
   barra de WordPress, asi que los dos bajan lo que ella ocupa. Por debajo de 600px la barra deja
   de ser fija y se va con el scroll, asi que ahi no se compensa. */

body.admin-bar .site-header { top: 32px; }
body.admin-bar .mobile-menu { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) and (min-width: 601px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .mobile-menu { top: calc(var(--header-h) + 46px); }
}

/* ── 21.3 Texto solo para lectores de pantalla ───────────────────────────────────────────────
   WordPress emite `.screen-reader-text` en la paginacion y en algunos textos de nucleo, y espera
   que la defina el tema. */

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

/* ── 21.4 Listado del blog ───────────────────────────────────────────────────────────────────
   Reutiliza la rejilla de las preguntas esenciales: mismo filete, mismo subgrid de tres filas y,
   por tanto, todos los resumenes arrancando a la misma altura aunque los titulos ocupen una, dos
   o tres lineas. Solo se anade lo propio de un enlace. */

.post-card--entrada h3 a { color: inherit; }
.post-card--entrada h3 a:hover { color: var(--gold-light); }
.post-card--entrada time { color: inherit; }
.posts__vacio { font-size: 16px; line-height: 1.8; font-weight: 300; color: rgba(246,243,238,.72); }

.pagination { margin-top: clamp(40px, 5vw, 64px); }
.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246,243,238,.78);
  border: 1px solid rgba(246,243,238,.2);
  transition: color .3s, border-color .3s;
}
.pagination .page-numbers:hover { color: var(--gold); border-color: var(--gold); }
.pagination .page-numbers.current { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* ── 21.5 Entrada y paginas legales ──────────────────────────────────────────────────────────
   La maqueta no tiene texto corrido largo: son secciones de bloques cortos. Esta escala sale
   entera de los tokens ya declarados arriba, no introduce ningun valor nuevo.
   Contrastes medidos: pizarra sobre marfil 7,06:1, oro terroso sobre marfil 4,60:1. */

.entrada, .legal { background: var(--ivory); color: var(--navy); padding: clamp(64px, 8vw, 110px) var(--pad-x) clamp(80px, 10vw, 130px); }

.prosa { font-size: 17px; line-height: 1.8; font-weight: 300; color: var(--slate); text-wrap: pretty; }
.prosa > * + * { margin-top: 22px; }
.prosa h2, .prosa h3, .prosa h4 { font-family: 'Bodoni Moda', serif; font-weight: 400; color: var(--navy); line-height: 1.18; }
.prosa h2 { font-size: clamp(26px, 2.8vw, 36px); margin-top: 52px; }
.prosa h3 { font-size: clamp(21px, 2.1vw, 27px); margin-top: 40px; }
.prosa h4 { font-size: 19px; margin-top: 32px; }
.prosa strong { font-weight: 600; color: var(--navy); }
.prosa a { color: var(--gold-deep); border-bottom: 1px solid rgba(138,103,48,.42); }
.prosa a:hover { color: var(--navy); border-color: var(--navy); }
.prosa ul, .prosa ol { padding-left: 22px; margin-block: 0; }
.prosa li { margin-bottom: 9px; }
.prosa li:last-child { margin-bottom: 0; }
.prosa blockquote { border-left: 1px solid var(--stone); padding-left: 24px; font-style: italic; }
.prosa .wp-block-image { margin: 34px 0; }
.prosa figcaption { margin-top: 11px; font-size: 13px; line-height: 1.7; color: var(--slate); }
.prosa hr { border: 0; border-top: 1px solid var(--stone); margin: 44px 0; }

.entrada__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: 30px;
  border-top: 1px solid var(--stone);
}

/* ── 21.6 Aviso de estado del canal ──────────────────────────────────────────────────────────
   Cierra la pagina de contacto mientras no haya canal activo. Fondo arena, asi que el rotulo va
   en oro tinta (5,17:1) y no en oro terroso, que sobre arena se queda en 3,86:1. */

.aviso-canal { background: var(--sand); color: var(--navy); padding: clamp(56px, 7vw, 92px) var(--pad-x); }
.aviso-canal .nota__etiqueta { color: var(--gold-ink); }
.aviso-canal p { max-width: 720px; font-size: 16px; line-height: 1.8; font-weight: 300; color: var(--slate); text-wrap: pretty; }