/* ==========================================================================
   SECCIONES
   Una regla por bloque de la página. Todo valor sale de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   Art direction distinta por breakpoint, no una sola foto escalada:
     · mobile  → retrato vertical (ambo y guantes), full-bleed con velo
     · desktop → split — tipografía sobre marfil + retrato del blazer
   El material disponible lo exige: el retrato de desktop es de 1024px de
   ancho y no aguanta un full-bleed. Ver docs/investigacion/04 §1.3.
   -------------------------------------------------------------------------- */

/* `minmax(0, 1fr)` y no `1fr`: el mínimo automático de una pista `1fr` es el
   tamaño del contenido, y el contenido acá es una foto vertical de 1024×1536.
   Sin el mínimo en 0 la fila crece hasta la altura natural de la imagen, el
   hero desborda su propio max-height y la foto tapa la sección siguiente. */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 100svh;
  overflow: hidden;
  color: var(--color-on-deep);
}

/* Los centinelas no participan del layout: si quedan como ítems del grid
   generan filas extra y la foto deja de llenar el hero. */
[data-scroll-sentinel],
[data-hero-sentinel] {
  position: absolute;
  inset-inline-start: 0;
  width: 1px;
  pointer-events: none;
}

/* Alto = el del header: la señal se dispara apenas el contenido empieza a
   pasar por debajo de la barra, no cuando termina el hero. */
[data-scroll-sentinel] {
  inset-block-start: 0;
  height: var(--header-h);
}

[data-hero-sentinel] {
  inset-block-end: 0;
  height: 1px;
}

.hero__media {
  grid-area: 1 / 1;
  min-height: 0;
  height: 100%;
}

/* Retrato vertical en una caja que en desktop es casi cuadrada: el recorte se
   ancla arriba para no cortar la cara al comprimir. */
.hero__media img {
  object-position: 50% 22%;
}

.hero__body {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* El padding inferior deja asomar la sección siguiente: la señal de scroll
     es el corte visual, no una flecha animada (docs/investigacion/03 §2.2). */
  padding-block: calc(var(--header-h) + var(--space-8)) var(--space-20);
}

.hero__title {
  max-width: 18ch;
}

/* Sobre foto el lead va a tinta plena: 22px regular no califica como "texto
   grande" en WCAG, así que necesita 4.5:1 y no 3:1. */
.hero__lead {
  max-width: 46ch;
  margin-top: var(--space-6);
  color: var(--color-on-deep);
}

.hero__giro {
  max-width: 40ch;
  margin-top: var(--space-4);
  color: var(--color-on-deep);
  font-weight: 500;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-8);
}

@media (min-width: 48rem) {  /* ≥768px */
  .hero {
    grid-template-columns: 1fr minmax(0, 42%);
    background-color: var(--color-bg);
    color: var(--color-ink);
  }

  .hero__media {
    grid-area: 1 / 2;
  }

  /* En desktop la foto está al costado, no debajo del texto: sin velo. */
  .hero__media.photo--veiled::after {
    content: none;
  }

  .hero__body {
    grid-area: 1 / 1;
    justify-content: center;
    padding-inline-end: var(--space-12);
  }

  .hero__lead {
    color: var(--color-muted);
  }

  .hero__giro {
    color: var(--color-ink);
  }

  .hero .link-cta {
    color: var(--color-accent-ink);
  }
}

/* --------------------------------------------------------------------------
   PRESENTACIÓN
   Bloque alternado foto/texto. En mobile la foto va arriba y acotada: un
   retrato 2:3 a ancho completo empuja el texto fuera de la primera pantalla.
   -------------------------------------------------------------------------- */

.presenta__inner {
  display: grid;
  gap: var(--space-8);
}

.presenta__media {
  max-width: 18rem;
  aspect-ratio: 2 / 3;
}

.presenta__texto > p {
  margin-top: var(--space-6);
  max-width: var(--measure);
}

.presenta__texto > .link-cta {
  margin-top: var(--space-6);
}

@media (min-width: 48rem) {
  .presenta__inner {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-16);
  }

  .presenta__media {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   SÍNTOMAS — "Quizás pensaste que era normal"
   Lista tipográfica sobre fondo oscuro. Cada línea es una frase entera, no
   una etiqueta: el reconocimiento es el trabajo de esta sección.
   -------------------------------------------------------------------------- */

.sintomas__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgb(250 248 245 / 0.18);
}

.sintoma {
  padding-block: var(--space-6);
  border-bottom: 1px solid rgb(250 248 245 / 0.18);
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: 300;
  line-height: var(--leading-h3);
}

.sintomas__cierre {
  display: grid;
  gap: var(--space-8);
  justify-items: start;
  margin-top: var(--space-12);
}

.sintomas__cierre .lead {
  max-width: var(--measure);
  color: rgb(250 248 245 / 0.88);
}

@media (min-width: 64rem) {
  .sintomas__list {
    columns: 2;
    column-gap: var(--space-16);
  }

  /* `break-inside` evita que una frase quede partida entre las dos columnas. */
  .sintoma {
    break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   FAMILIAS DE ÁREAS
   -------------------------------------------------------------------------- */

.familia + .familia {
  margin-top: var(--space-16);
}

.familia__titulo {
  margin-bottom: var(--space-6);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* Fila clicable: el link del título se estira sobre toda el área con un
   ::after transparente. Dos ventajas sobre tener también un <a> en "Leer más":
   el área táctil pasa de 24 px a la fila entera, y queda UN solo link por
   área en vez de dos apuntando al mismo lugar. */
.area {
  position: relative;
}

.area__title a {
  color: inherit;
  text-decoration: none;
}

.area__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.area:hover .area__title a,
.area__title a:focus-visible {
  color: var(--color-accent-ink);
}

/* El foco se dibuja sobre la fila entera, no sobre el texto del título. */
.area:has(.area__title a:focus-visible) {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 4px;
}

.area__title a:focus-visible {
  outline: none;
}

.area__cta {
  pointer-events: none;
}

.area:hover .area__cta::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   PASOS DE LA CONSULTA
   -------------------------------------------------------------------------- */

.pasos {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline);
}

.paso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-6);
  border-bottom: var(--hairline);
}

.paso__index {
  grid-row: span 2;
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-h3);
}

.paso__titulo {
  font-size: var(--type-h4);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}

.paso__body {
  grid-column: 2;
  max-width: var(--measure);
}

.consulta__cierre {
  margin-top: var(--space-12);
}

@media (min-width: 64rem) {
  .paso {
    grid-template-columns: auto minmax(0, 16rem) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-8);
  }

  .paso__index {
    grid-row: auto;
  }

  .paso__body {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   ETAPAS Y CIERRE
   -------------------------------------------------------------------------- */

.etapas > p + p {
  margin-top: var(--space-6);
}

.cierre {
  text-align: center;
}

.cierre__texto {
  max-width: 34ch;
  /* Son frases largas, no etiquetas: se sale de las mayúsculas del <h2> base. */
  text-transform: none;
  letter-spacing: 0;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: 300;
  line-height: 1.45;
  text-wrap: balance;
}

.cierre__texto--fuerte {
  margin-top: var(--space-6);
  color: var(--color-ink);
}

/* Sobre el carbón, la tinta es del mismo tono que el fondo y la frase
   desaparece. Pasó en el cierre de /ginecologia-regenerativa/ (05/11). */
.section--deep .cierre__texto--fuerte {
  color: var(--color-on-deep);
}

.cierre .button {
  margin-top: var(--space-12);
}

/* --------------------------------------------------------------------------
   MANIFIESTO
   Una frase sola, rodeada de aire, sobre fotografía. Es la sección más cara
   en espacio de toda la página y por eso comunica que es importante.
   -------------------------------------------------------------------------- */

.manifesto {
  position: relative;
  display: grid;
  isolation: isolate;
  padding-block: calc(var(--section-y) * 2);
}

.manifesto__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.manifesto__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(26 26 24 / 0.72) 0%,
    rgb(26 26 24 / 0.82) 100%
  );
}

.manifesto__quote {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
}

.manifesto__note {
  max-width: var(--measure);
  margin-top: var(--space-8);
  color: rgb(250 248 245 / 0.88);
}

/* --------------------------------------------------------------------------
   ÁREAS DE ATENCIÓN
   Se resuelven tipográficamente, con hairline y numeración: no hay material
   fotográfico para las cinco áreas y no está presupuestado (decisión D-02).
   -------------------------------------------------------------------------- */

.areas__list {
  border-top: var(--hairline);
}

.area {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-8);
  border-bottom: var(--hairline);
  transition: border-color var(--dur-micro) var(--ease-micro);
}

.area:hover {
  border-bottom-color: var(--color-accent);
}

.area__index {
  grid-row: span 2;
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-h3);
}

.area__title {
  align-self: center;
}

.area__body {
  grid-column: 2;
  max-width: var(--measure);
}

.area__cta {
  grid-column: 2;
}

@media (min-width: 64rem) {
  .area {
    grid-template-columns: auto minmax(0, 20rem) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-8);
  }

  .area__index {
    grid-row: auto;
  }

  .area__body,
  .area__cta {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   CTA STICKY DE MOBILE
   Aparece al pasar el hero. El estado lo escribe <sticky-cta>.
   -------------------------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: var(--hairline);
  background-color: rgb(250 248 245 / 0.92);
  backdrop-filter: blur(12px);
  transform: translateY(100%);
  transition: transform var(--dur-sticky) var(--ease-micro);
}

.sticky-cta[data-visible] {
  transform: translateY(0);
}

.sticky-cta .button {
  flex: 1;
}

.sticky-cta__whatsapp {
  display: grid;
  place-items: center;
  width: var(--touch-target);
  min-height: var(--touch-target);
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  transition:
    background-color var(--dur-micro) var(--ease-micro),
    color var(--dur-micro) var(--ease-micro);
}

.sticky-cta__whatsapp:hover,
.sticky-cta__whatsapp:focus-visible {
  background-color: var(--color-ink);
  color: var(--color-bg);
}

@media (min-width: 64rem) {
  .sticky-cta {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   PÁGINAS INTERIORES
   -------------------------------------------------------------------------- */

/* El header es fijo: la primera sección necesita despejarlo. */
.section--intro {
  padding-block-start: calc(var(--header-h) + var(--section-y));
}

.section-head__after {
  margin-top: var(--space-8);
}

/* Texto corrido de las páginas legales. Es el único lugar del sitio donde hay
   varios <h2> y <p> seguidos, así que el ritmo se define acá y no en base. */
.prosa > h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: var(--type-h3);
  text-transform: none;
  letter-spacing: var(--track-h3);
}

.prosa > h2:first-child {
  margin-top: 0;
}

.prosa > p + p {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  padding-block: var(--space-16) 0;
  border-top: var(--hairline);
  background-color: var(--color-surface);
}

.footer__inner {
  display: grid;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}

.footer__nombre {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  letter-spacing: var(--track-h3);
}

.footer__credencial {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--type-small);
}

.footer__brand .link-cta {
  margin-top: var(--space-2);
}

.footer__nav {
  display: grid;
  gap: var(--space-8);
}

.footer__col-titulo {
  margin-bottom: var(--space-4);
  color: var(--color-accent-ink);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  color: var(--color-muted);
  font-size: var(--type-small);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-micro);
}

.footer__col a:hover,
.footer__col a:focus-visible,
.footer__col a[aria-current] {
  color: var(--color-ink);
}

.footer__legal {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  padding-bottom: calc(var(--space-8) + var(--touch-target) + var(--space-6));
  border-top: var(--hairline);
}

.footer__note,
.footer__copy {
  max-width: var(--measure);
  color: var(--color-muted);
  font-size: var(--type-small);
}

@media (min-width: 48rem) {
  .footer__inner {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--space-16);
  }

  .footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__legal {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

@media (min-width: 64rem) {
  .footer__legal {
    padding-bottom: var(--space-8);
  }
}