/* ==========================================================================
   Páginas internas
   ==========================================================================
   Se carga después de site.css y solo en las internas. Hereda todo: tokens,
   tipografía, vidrio, grano, header, pie, flotantes y ventanas. Aquí vive
   únicamente lo que el home no necesita.

   Idea de la página: un descenso. Arriba una tapa oscura —la misma familia
   que el héroe del home, pero fotográfica y más baja, porque una interna se
   lee, no se contempla—, luego el cuerpo en claro, y una sola banda oscura
   para el marco legal, que es lo que más necesita leerse como asunto serio.

   El elemento con peso es uno: `.via`, el camino de ocho etapas dibujado en
   vertical sobre un hilo. Es el hilo del home girado 90 grados y con
   contenido a los dos lados. Todo lo demás se mantiene callado.

   Móvil primero.
   ========================================================================== */

/* --- Medida de lectura ---------------------------------------------------
   Los párrafos ya no llevan tope propio cuando la columna del grid los limita:
   ahí el `ch` solo cortaba el texto antes de tiempo y dejaba la caja a medias.
   Solo se pone tope donde el texto ocupa el contenedor entero, y en el límite
   alto de lo legible: pasadas las ~80 letras por línea el ojo pierde el
   renglón al volver a la izquierda, y eso no es una preferencia. */


/* --- Medida de página ----------------------------------------------------
   Una sola caja para todas las secciones, y estrecha a propósito. Con 88 rem
   —casi el ancho de un portátil— el contenido se pegaba a la izquierda y
   quedaba un tercio de pantalla vacío a la derecha; a 76 rem la página se lee
   como una columna centrada, que es como debe leerse un texto largo.

   La excepción es el bloque de preguntas frecuentes, más estrecho todavía. */

:root { --medida: 76rem; }


/* --- Tapa ----------------------------------------------------------------
   Tiene que ser oscura por una razón que no es estética: el header nace
   transparente sobre fondo oscuro y solo se aclara al pasar el centinela. Una
   tapa clara dejaría el logo blanco sobre blanco durante el primer pantallazo.
   Alto contenido, no `100vh`: en una interna el usuario viene a leer. */

.tapa {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 78vh;
  padding-top: var(--hdr-h);
  background: var(--navy);
  overflow: hidden;
}

/* La fotografía define su altura al ocupar el ancho completo. La fila
   compartida permite superponer el texto sin recortar la imagen. */
.tapa:has(> .tapa__img) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  padding-top: 0;
}

.tapa__img {
  position: relative;
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: auto;
  object-position: top center;
}

.tapa:has(> .tapa__img) > .tapa__in {
  grid-area: 1 / 1;
  align-self: end;
  padding-top: calc(var(--hdr-h) + 2rem);
}

/* Sin grano. La textura del sitio es para campos de color plano; encima de
   una fotografía se lee como ruido de compresión y ensucia la imagen. */
.tapa__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 15, 28, .92) 0%,
    rgba(0, 15, 28, .55) 45%,
    rgba(0, 15, 28, .28) 100%);
}

.tapa__in {
  position: relative;
  width: 100%;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem) clamp(2.5rem, 6vh, 4rem);
  color: var(--white);
}

/* --- Miga ---------------------------------------------------------------
   Va visible y no escondida en el marcado. Alguien que llega desde Instagram
   a esta página no ha visto el menú todavía: la miga es lo único que le dice
   dónde cayó. */

.miga { margin-bottom: clamp(1.25rem, 3vh, 2rem); }

.miga__l {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .55);
}
.miga__l li + li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: .5rem;
  vertical-align: middle;
  background: rgba(255, 255, 255, .3);
}
.miga__l a {
  color: rgba(255, 255, 255, .55);
  transition: color .25s var(--ease);
}
.miga__l a:hover { color: var(--white); }
.miga__l [aria-current] { color: var(--white); }

.tapa__t {
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 6rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.035em;
}

.tapa__d {
  max-width: 34ch;
  margin: clamp(1rem, 2.5vh, 1.5rem) 0 0;
  font-size: clamp(1.02rem, 2.4vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}


/* --- Ficha ---------------------------------------------------------------
   Tres datos duros nada más pasar la tapa, en renglones: es el mismo recurso
   de las vías de contacto del pie, y aquí sirve para que quien llegó de un
   referido confirme en tres segundos que está donde cree. */

.ficha { background: var(--white); }

.ficha__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(1.75rem, 4vh, 2.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.ficha__l { display: grid; gap: 0; margin: 0; }

.ficha__f {
  display: grid;
  gap: .15rem;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(0, 26, 50, .1);
}
.ficha__f:first-child { border-top: 1px solid rgba(0, 26, 50, .1); }

.ficha__f dt {
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.ficha__f dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
}


/* --- Explica ------------------------------------------------------------- */

.explica { background: var(--white); }

.explica__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.explica__t {
  margin: 0 0 1.5rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.explica__p {
  margin: 0 0 1.1rem;
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}
.explica__p:last-child { margin-bottom: 0; }
/* El término clínico se marca en el cuerpo y no se aparta a un glosario: se
   aprende leyendo, que es como se aprende de verdad. Ver docs/lenguaje-medico.md */
.explica__p b { font-weight: 600; color: var(--ink); }


/* --- El camino -----------------------------------------------------------
   El bloque con peso de la página. Hilo vertical continuo, el número montado
   encima del hilo y el contenido al lado. En móvil el hilo va pegado al borde
   izquierdo; en escritorio se mete hacia dentro y el texto respira. */

.camino {
  position: relative;
  padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(4rem, 10vh, 7rem);
  background: var(--pale);
  overflow: hidden;
}

/* Fotografía de fondo por la derecha, solo en escritorio. Va en `<img>` y no
   como fondo de CSS para que se pueda cambiar por página sin tocar la hoja, y
   con `alt` vacío porque no aporta información: la aporta la lista.

   Se disuelve hacia la izquierda con una máscara para que no haya un corte
   duro contra el color de la sección, y va al 55 % para que la tarjeta de la
   brújula y los textos conserven contraste. */
.camino__fondo { display: none; }

/* Todos los contenedores de la página comparten esta caja. El borde
   izquierdo tiene que ser el mismo de arriba abajo: la medida de lectura se
   controla en el texto, nunca estrechando el contenedor, porque eso mueve el
   borde y en escritorio la página se lee como cuatro páginas pegadas. En
   móvil no se nota, y por eso hay que mirarlo aquí. */
.camino__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

.camino__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.camino__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
.camino__d {
  max-width: 74ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.camino__cuerpo { display: grid; gap: clamp(2.5rem, 6vh, 4rem); }

.via {
  position: relative;
  max-width: 52rem;
  display: grid;
  gap: clamp(1.75rem, 4vh, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El hilo: una sola línea detrás de toda la lista, recortada arriba y abajo
   para que nazca y muera dentro del primer y del último número. */
.via::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  bottom: 1.4rem;
  left: 1.4rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(111, 81, 170, .1),
    rgba(111, 81, 170, .45) 12%,
    rgba(111, 81, 170, .45) 88%,
    rgba(111, 81, 170, .1));
}

.via__p {
  position: relative;
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: 0 1.1rem;
  align-items: start;
}

.via__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--pale);
  box-shadow: inset 0 0 0 2px rgba(111, 81, 170, .45);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--purple);
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.via__p:hover .via__n {
  background: var(--purple);
  box-shadow: inset 0 0 0 2px var(--purple);
  color: var(--white);
}

.via__c { padding-top: .45rem; }

.via__t {
  margin: 0 0 .3rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}
.via__d {
  margin: 0;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* --- Brújula --------------------------------------------------------------
   La columna derecha del camino. Sin ella, ocho etapas en una columna
   estrecha dejaban media pantalla vacía en escritorio.

   No repite los ocho títulos —eso sería el mismo texto dos veces en la misma
   fila—: dice en cuál vas. Es el «Fase 3 de 5» de la pantalla de la app,
   traído a la página, y hace un trabajo real: orientar en una lista larga.
   Solo en escritorio; en móvil la lista se lee de un tirón y sobra. */

.brujula { display: none; }

.brujula__paso {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin: 0 0 .35rem;
}
.brujula__paso span {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
}
.brujula__paso em {
  font-style: normal;
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.brujula__t {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}

.brujula__barra {
  height: 2px;
  border-radius: 2px;
  background: rgba(111, 81, 170, .18);
  overflow: hidden;
}
.brujula__barra span {
  display: block;
  width: 12.5%;
  height: 100%;
  border-radius: 2px;
  background: var(--purple);
  transition: width .5s var(--ease);
}

.brujula__nota {
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0, 26, 50, .1);
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}
.brujula__nota a {
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s var(--ease);
}
.brujula__nota a:hover { color: var(--purple-dark); }


/* --- Quién lleva el embarazo --------------------------------------------- */

.quien { background: var(--white); }

.quien__in {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  width: 100%;
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.quien__foto { overflow: hidden; border-radius: var(--r-glass); background: var(--navy); }
.quien__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.quien__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
.quien__d {
  margin: 0 0 2rem;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.chequeo { display: grid; gap: 0; margin: 0 0 1.75rem; padding: 0; list-style: none; }

.chequeo__i {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(0, 26, 50, .1);
}
.chequeo__i:first-child { border-top: 1px solid rgba(0, 26, 50, .1); }

.chequeo__t {
  margin: 0 0 .2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.chequeo__p {
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}

.quien__nota,
.incluye__nota,
.dudas__nota {
  max-width: 76ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.quien__nota a,
.dudas__nota a {
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease);
}
.quien__nota a:hover,
.dudas__nota a:hover { color: var(--purple-dark); }


/* --- Marco legal ---------------------------------------------------------
   La única banda oscura del cuerpo. Es deliberado: es la parte que más pesa
   en la decisión y la que más miedo da preguntar, así que se separa del resto
   de la página en vez de disimularse entre secciones claras. */

.marco {
  position: relative;
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  background: var(--navy);
  color: var(--white);
}
/* Misma receta de grano que el resto del sitio. La opacidad no es opcional:
   `--grano` a plena carga es ruido de televisión, no textura. Sobre oscuro
   el sitio lo usa al 16 %. */
.marco::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .16;
  pointer-events: none;
}

.marco__in {
  position: relative;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

.marco__head { margin-bottom: clamp(2rem, 5vh, 3rem); }

.marco__t {
  margin: 0 0 .8rem;
  max-width: 22ch;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.marco__d {
  max-width: 76ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}

.paises { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }

.pais {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-glass);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pais:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(167, 161, 203, .5);
  transform: translateY(-2px);
}

.pais .flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

.pais__n {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--white);
}
.pais__v {
  font-size: .85rem;
  font-weight: 300;
  color: var(--lavender);
}

/* Los cinco mercados con guía escrita no son la lista de a quién atendemos:
   son los que ya tienen ficha. Esta sexta pieza existe para que nadie se vaya
   creyendo que su país queda fuera. Sin bandera y con borde punteado, para
   que no se lea como un país más. */
.pais--otro {
  background: none;
  border-style: dashed;
  border-color: rgba(167, 161, 203, .45);
}
.pais--otro:hover { background: rgba(167, 161, 203, .12); }

.pais__mas {
  position: relative;
  width: 20px;
  height: 14px;
}
.pais__mas::before,
.pais__mas::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--lavender);
}
.pais__mas::after { transform: rotate(90deg); }


/* --- Qué entra en la cotización ------------------------------------------ */

.incluye { background: var(--white); }

.incluye__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.incluye__t {
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.incluye__rej { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-bottom: 2rem; }

.lista__t {
  margin: 0 0 .9rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--purple);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* Lo que no entra se marca con el albaricoque, que en el sitio ya es el color
   de "mira esto"; no con rojo, que aquí leería como error. */
.lista--fuera .lista__t { border-bottom-color: var(--apricot); }

.lista__l { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.lista__l li {
  padding: .7rem 0;
  border-bottom: 1px solid rgba(0, 26, 50, .09);
  font-size: .97rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
}


/* --- Preguntas frecuentes ------------------------------------------------
   El mismo mecanismo del acordeón del home —una abierta a la vez, altura
   animada con `grid-template-rows`— con otro aspecto: aquí va sobre claro y
   sin imágenes, porque son respuestas cortas. */

.dudas { background: var(--pale); }

/* Excepción deliberada al borde compartido: esta sección va centrada en su
   propia caja estrecha porque el usuario la prefirió así. Es la única. */
.dudas__in {
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.dudas__t {
  margin: 0 0 clamp(1.5rem, 4vh, 2.25rem);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.duda__l { margin: 0 0 1.75rem; padding: 0; list-style: none; }

.duda { border-bottom: 1px solid rgba(0, 26, 50, .12); }
.duda:first-child { border-top: 1px solid rgba(0, 26, 50, .12); }

.duda__h { margin: 0; }

.duda__b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.2rem 0;
  text-align: left;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.duda__b:hover,
.duda.is-open .duda__b { color: var(--purple); }

/* El signo se dibuja con dos barras y la vertical desaparece al abrir: un
   glifo "+" tipográfico no gira ni se transforma. */
.duda__mas {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.duda__mas::before,
.duda__mas::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.duda__mas::after { transform: rotate(90deg); }
.duda.is-open .duda__mas::after { transform: rotate(0); opacity: 0; }

.duda__caja {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.duda.is-open .duda__caja { grid-template-rows: 1fr; }

.duda__dentro { overflow: hidden; }
.duda__dentro > * { min-height: 0; }

.duda__p {
  max-width: 78ch;
  margin: 0;
  padding: 0 0 1.4rem;
  font-size: .99rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}


/* ==========================================================================
   A partir de tableta
   ========================================================================== */

@media (min-width: 720px) {
  .ficha__l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); }
  .ficha__f:first-child ~ .ficha__f { border-top: 1px solid rgba(0, 26, 50, .1); }

  .incluye__rej { grid-template-columns: 1fr 1fr; }

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

@media (min-width: 900px) {
  .tapa { min-height: 72vh; }

  /* Título a la izquierda y explicación a la derecha: el titular hace de
     ancla y el ojo no tiene que volver arriba entre párrafo y párrafo. */
  .explica__in {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .explica__t { margin-bottom: 0; }

  .camino__fondo {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 46%;
    height: 100%;
    object-fit: cover;
    opacity: .55;
    mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
    pointer-events: none;
  }

  .camino__in { position: relative; z-index: 1; }

  /* Sin `align-items: start`: la columna de la brújula tiene que ser tan alta
     como la lista para que el `sticky` de dentro tenga por dónde viajar. Con
     la columna encogida a la altura de la tarjeta, el sticky no pega nada y
     la tarjeta se va con el scroll. */
  .camino__cuerpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  .brujula { display: block; position: relative; }

  /* La tarjeta no se queda clavada arriba: baja hasta ponerse a la altura de
     la etapa que se está leyendo, y la posición se la pasa el JavaScript en
     `--y`. Con `sticky` quedaba fija en el borde superior y la sensación era
     de elemento pegado; bajando acompaña la lectura. Sin JavaScript se queda
     arriba, que es un estado válido. */
  .brujula__caja {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--y, 0px);
    transition:
      top .6s var(--ease),
      opacity .7s var(--ease) .35s,
      transform .75s var(--ease) .35s;
    padding: 1.5rem;
    border-radius: var(--r-glass);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: var(--glass-lite);
    -webkit-backdrop-filter: var(--glass-lite);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 24px 50px -26px rgba(0, 26, 50, .45);
  }

  .via::before { left: 1.75rem; }
  .via__p { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 1.75rem; }
  .via__n { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
  .via__c { padding-top: .8rem; }

  .quien__in { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }

  .paises { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .pais {
    grid-template-columns: 1fr;
    gap: .55rem;
    padding: 1.25rem;
    align-items: start;
  }
}


/* ==========================================================================
   Entradas
   ==========================================================================
   Mismo vocabulario que el home: máscaras que se abren y piezas que suben.
   La clase `anim` la pone el JavaScript, así que sin él no hay estado previo
   que limpiar y todo se ve.
   ========================================================================== */

.anim .explica__t,
.anim .camino__t,
.anim .quien__t,
.anim .marco__t,
.anim .incluye__t,
.anim .dudas__t {
  clip-path: inset(0 0 105% 0);
  transform: translateY(.45em);
  transition: clip-path .85s var(--ease), transform .85s var(--ease);
}
.anim .is-in .explica__t,
.anim .explica.is-in .explica__t,
.anim .camino.is-in .camino__t,
.anim .quien.is-in .quien__t,
.anim .marco.is-in .marco__t,
.anim .incluye.is-in .incluye__t,
.anim .dudas.is-in .dudas__t { clip-path: inset(0 0 -20% 0); transform: translateY(0); }

.anim .explica__p,
.anim .camino__d,
.anim .quien__d,
.anim .marco__d {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .7s var(--ease) .12s, transform .75s var(--ease) .12s;
}
.anim .is-in .explica__p,
.anim .is-in .camino__d,
.anim .is-in .quien__d,
.anim .is-in .marco__d { opacity: 1; transform: translateY(0); }

/* Las etapas suben escalonadas, y el hilo se traza antes que ellas. */
.anim .via::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease);
}
.anim .camino.is-in .via::before { transform: scaleY(1); }

.anim .brujula__caja {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .7s var(--ease) .35s, transform .75s var(--ease) .35s;
}
.anim .camino.is-in .brujula__caja { opacity: 1; transform: translateY(0); }

.anim .camino__fondo {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.1s var(--ease) .1s, transform 1.6s var(--ease) .1s;
}
.anim .camino.is-in .camino__fondo { opacity: .55; transform: scale(1); }

.anim .via__p {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .camino.is-in .via__p { opacity: 1; transform: translateY(0); }
.anim .camino.is-in .via__p:nth-child(1) { transition-delay: .30s; }
.anim .camino.is-in .via__p:nth-child(2) { transition-delay: .38s; }
.anim .camino.is-in .via__p:nth-child(3) { transition-delay: .46s; }
.anim .camino.is-in .via__p:nth-child(4) { transition-delay: .54s; }
.anim .camino.is-in .via__p:nth-child(5) { transition-delay: .62s; }
.anim .camino.is-in .via__p:nth-child(6) { transition-delay: .70s; }
.anim .camino.is-in .via__p:nth-child(7) { transition-delay: .78s; }
.anim .camino.is-in .via__p:nth-child(8) { transition-delay: .86s; }

.anim .quien__foto {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1s var(--ease) .15s;
}
.anim .quien.is-in .quien__foto { clip-path: inset(0 0 0 0); }

.anim .chequeo__i,
.anim .pais,
.anim .lista,
.anim .duda {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .is-in .chequeo__i,
.anim .is-in .pais,
.anim .is-in .lista,
.anim .is-in .duda { opacity: 1; transform: translateY(0); }

.anim .is-in .chequeo__i:nth-child(1),
.anim .is-in .pais:nth-child(1),
.anim .is-in .duda:nth-child(1) { transition-delay: .30s; }
.anim .is-in .chequeo__i:nth-child(2),
.anim .is-in .duda:nth-child(2) { transition-delay: .38s; }
.anim .is-in .chequeo__i:nth-child(3),
.anim .is-in .duda:nth-child(3) { transition-delay: .46s; }
.anim .is-in .chequeo__i:nth-child(4),
.anim .is-in .duda:nth-child(4) { transition-delay: .54s; }
.anim .is-in .duda:nth-child(5) { transition-delay: .62s; }

.anim .is-in .paises li:nth-child(2) .pais { transition-delay: .36s; }
.anim .is-in .paises li:nth-child(3) .pais { transition-delay: .42s; }
.anim .is-in .paises li:nth-child(4) .pais { transition-delay: .48s; }
.anim .is-in .paises li:nth-child(5) .pais { transition-delay: .54s; }
.anim .is-in .paises li:nth-child(6) .pais { transition-delay: .60s; }

.anim .is-in .lista:nth-child(2) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .anim .explica__t,
  .anim .camino__t,
  .anim .quien__t,
  .anim .marco__t,
  .anim .incluye__t,
  .anim .dudas__t,
  .anim .quien__foto { clip-path: none; transform: none; }

  .anim .explica__p,
  .anim .camino__d,
  .anim .quien__d,
  .anim .marco__d,
  .anim .via__p,
  .anim .chequeo__i,
  .anim .pais,
  .anim .lista,
  .anim .duda { opacity: 1; transform: none; }

  .anim .via::before { transform: none; }
  .anim .brujula__caja { opacity: 1; transform: none; }
  .anim .camino__fondo { opacity: .55; transform: none; }
  .ln__i { animation: none; transform: none; }
}


/* ==========================================================================
   Familias LGBTIQ+
   ==========================================================================
   Estructura distinta a propósito. Una ficha de tratamiento cuenta un
   procedimiento en línea recta; esta página no cuenta un procedimiento, sino
   que ayuda a alguien a encontrar cuál es el suyo. Por eso no hay línea de
   tiempo ni brújula: hay un selector.

   Y la portada no lleva foto grande. Una pareja sonriendo aquí sería
   exactamente el gesto que esta página promete no hacer. El titular dice lo
   único que hace falta decir de entrada, y las fotografías van pequeñas y en
   tira, como quien enseña su álbum y no un catálogo.
   ========================================================================== */

.portada {
  position: relative;
  display: grid;
  align-content: end;
  gap: clamp(2rem, 5vh, 3rem);
  min-height: 78vh;
  padding-top: calc(var(--hdr-h) + clamp(2rem, 6vh, 4rem));
  padding-bottom: clamp(2rem, 5vh, 3rem);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .16;
  pointer-events: none;
}

.portada__in {
  position: relative;
  width: 100%;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

/* Tres renglones largos en vez de cuatro cortos: el titular conserva el
   tamaño y deja de dejar medio contenedor en blanco a la derecha. El corte va
   escrito a mano —no se deja al navegador— porque dónde parte una frase de
   esta importancia es una decisión de composición, no del ancho de pantalla.

   El escalonado de entrada lo hereda de `site.css`, que solo contempla dos
   renglones; el tercero se añade aquí. */
.portada__t {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(2.4rem, 7.6vw, 5.2rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
}
.portada__t .ln:nth-child(3) .ln__i { animation-delay: .28s; }

.portada__d {
  max-width: 46ch;
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .7);
}



/* --- Mosaico de la portada ------------------------------------------------
   Cuatro fotografías en composición, no una tira. El titular declara y el
   mosaico lo demuestra: parejas de mujeres, de hombres y familias de razas
   distintas, en la misma retícula y del mismo tamaño. Ese "mismo tamaño" es
   el argumento; jerarquizarlas sería contradecir la frase de al lado. */

.mosaico {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  width: 100%;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}
.mosaico img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-glass);
  opacity: .85;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}
.mosaico img:hover { opacity: 1; transform: translateY(-4px); }


/* --- El credo ------------------------------------------------------------
   Va sobre claro, sin fotografía y sin sangrar. Estaba en banda oscura a todo
   ancho justo debajo de una portada oscura, y dos bloques así seguidos se leen
   como dos portadas: el visitante cree que la página empezó dos veces.

   Aquí la declaración se sostiene sola. Un filete arriba, el titular a la
   izquierda y el texto a la derecha: composición de artículo, no de portada.
   Las fotografías ya están arriba en el mosaico y abajo en las tarjetas; este
   bloque es el que respira. */

.credo { background: var(--pale); }

.credo__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(0, 26, 50, .12);
}

.credo__t {
  margin: 0 0 1.5rem;
  max-width: 20ch;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
}

.credo__cuerpo { display: grid; gap: 1rem; }

.credo__d {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}
.credo__d:last-child { color: var(--ink); font-weight: 400; }


/* --- Las familias --------------------------------------------------------
   Tarjetas con fotografía, no un selector de pestañas. Se ven las cuatro a la
   vez y a la misma escala: quien llega se reconoce sin tener que hacer clic
   para descubrir si está contemplado. */

.familias { background: var(--white); }

.familias__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.familias__head { margin-bottom: clamp(2rem, 5vh, 3rem); }

.familias__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
.familias__d {
  max-width: 76ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.familias__l { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin: 0; padding: 0; list-style: none; }

.tarjeta {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.tarjeta__foto {
  overflow: hidden;
  border-radius: var(--r-glass);
  background: var(--navy);
}
/* Encuadre desde arriba: con un recorte 3/2 sobre fotografías verticales, el
   centro cae en el torso y las caras se van fuera. Anclando arriba, las
   cabezas se quedan siempre dentro. */
.tarjeta__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.2s var(--ease);
}
.tarjeta:hover .tarjeta__foto img { transform: scale(1.04); }

.tarjeta__t {
  margin: 0 0 .4rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ink);
}
.tarjeta__d {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.tarjeta__rutas { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tarjeta__rutas li {
  padding: .9rem 0;
  border-top: 1px solid rgba(0, 26, 50, .1);
}
.tarjeta__rutas li:last-child { border-bottom: 1px solid rgba(0, 26, 50, .1); }

.tarjeta__rutas a {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(111, 81, 170, .35);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.tarjeta__rutas a:hover { color: var(--purple); text-decoration-color: var(--purple); }

.tarjeta__rutas span {
  display: block;
  margin-top: .2rem;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}


/* --- Lo que puedes esperar -----------------------------------------------
   Es el bloque que de verdad responde a lo que esta persona vino a preguntar,
   y por eso va en banda oscura y en frases sueltas, sin tarjetas ni iconos:
   se lee como una lista de compromisos, que es lo que es.

   Estuvo escrito en negativo —«lo que aquí no te va a pasar»— y se cambió: una
   negación siempre señala a alguien, y aquí no se menosprecia a nadie. Cada
   línea dice ahora lo que hacemos, no lo que otros harían. */

.esperar {
  position: relative;
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  background: var(--navy);
  color: var(--white);
}
.esperar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .16;
  pointer-events: none;
}

.esperar__in {
  position: relative;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

/* Un grupo de espaldas, anónimo y plural: dice «familias» sin señalar a
   nadie. Rellena la mitad derecha, que estaba vacía, sin convertir el bloque
   de compromisos en un anuncio. */
.esperar__foto {
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: var(--r-glass);
}
.esperar__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  opacity: .82;
}

.esperar__t {
  margin: 0 0 .8rem;
  max-width: 18ch;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.esperar__d {
  max-width: 74ch;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .65);
}

.esperar__l { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.esperar__i {
  position: relative;
  max-width: 78ch;
  padding: 1.35rem 0 1.35rem 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: clamp(1.02rem, 2.2vw, 1.15rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.esperar__i:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }

/* Un visto dibujado a mano, con el mismo trazo de la casilla de los
   formularios. Cuando las líneas decían lo que NO iba a pasar aquí había una
   raya; ahora que afirman, el visto es lo que corresponde. */
.esperar__i::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.75rem;
  width: 6px;
  height: 11px;
  border: solid var(--apricot);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


@media (min-width: 720px) {
  .familias__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .portada { min-height: 74vh; }
  .mosaico img { aspect-ratio: 4 / 5; }

  /* Titular a la izquierda y texto a la derecha: el ojo no vuelve arriba
     entre párrafo y párrafo, y la composición deja de parecer una portada. */
  .credo__in {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .credo__t { margin-bottom: 0; }

  /* Dos columnas y una sola fila. Antes la foto llevaba `grid-row: 1 / -1`
     con la retícula sin filas explícitas: ahí `-1` apunta a la primera línea,
     el tramo se colapsa a la fila 1 y la imagen inflaba esa fila hasta su
     propio alto, abriendo casi 500 px de hueco entre el titular y el texto.
     Con el texto envuelto en su propia columna el problema no existe. */
  .esperar__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    grid-template-rows: auto 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
  .esperar__texto { grid-area: 1 / 1; }
  .esperar__l     { grid-area: 2 / 1; }
  .esperar__foto  { grid-area: 1 / 2 / 3 / 3; }

  .esperar__foto {
    margin-bottom: 0;
    position: sticky;
    top: calc(68px + 2.5rem);
  }
  .esperar__foto img { aspect-ratio: 3 / 4; }
}


/* --- Entradas ------------------------------------------------------------- */

.anim .credo__t,
.anim .familias__t,
.anim .esperar__t {
  clip-path: inset(0 0 105% 0);
  transform: translateY(.45em);
  transition: clip-path .85s var(--ease), transform .85s var(--ease);
}
.anim .credo.is-in .credo__t,
.anim .familias.is-in .familias__t,
.anim .esperar.is-in .esperar__t { clip-path: inset(0 0 -20% 0); transform: translateY(0); }

.anim .credo__d,
.anim .familias__d,
.anim .esperar__d {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .7s var(--ease) .15s, transform .75s var(--ease) .15s;
}
.anim .is-in .credo__d,
.anim .is-in .familias__d,
.anim .is-in .esperar__d { opacity: 1; transform: translateY(0); }

.anim .esperar__foto {
  clip-path: inset(0 0 0 100%);
  transition: clip-path .95s var(--ease) .2s;
}
.anim .is-in .esperar__foto { clip-path: inset(0 0 0 0); }

.anim .tarjeta {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity .65s var(--ease), transform .7s var(--ease);
}
.anim .familias.is-in .tarjeta { opacity: 1; transform: translateY(0); }
.anim .familias.is-in .tarjeta:nth-child(1) { transition-delay: .26s; }
.anim .familias.is-in .tarjeta:nth-child(2) { transition-delay: .34s; }
.anim .familias.is-in .tarjeta:nth-child(3) { transition-delay: .42s; }
.anim .familias.is-in .tarjeta:nth-child(4) { transition-delay: .50s; }

.anim .esperar__i {
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .esperar.is-in .esperar__i { opacity: 1; transform: translateY(0); }
.anim .esperar.is-in .esperar__i:nth-child(1) { transition-delay: .28s; }
.anim .esperar.is-in .esperar__i:nth-child(2) { transition-delay: .36s; }
.anim .esperar.is-in .esperar__i:nth-child(3) { transition-delay: .44s; }
.anim .esperar.is-in .esperar__i:nth-child(4) { transition-delay: .52s; }
.anim .esperar.is-in .esperar__i:nth-child(5) { transition-delay: .60s; }
.anim .esperar.is-in .esperar__i:nth-child(6) { transition-delay: .68s; }

/* El panel elegido entra desde abajo; sin esto el cambio de familia es un
   salto seco y se pierde de vista qué cambió. */
@media (prefers-reduced-motion: reduce) {
  .anim .ruta__t,
  .anim .esperar__t { clip-path: none; transform: none; }
  .anim .ruta__d,
  .anim .esperar__d,
  .anim .esperar__foto {
  clip-path: inset(0 0 0 100%);
  transition: clip-path .95s var(--ease) .2s;
}
.anim .is-in .esperar__foto { clip-path: inset(0 0 0 0); }

.anim .tarjeta {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity .65s var(--ease), transform .7s var(--ease);
}
.anim .familias.is-in .tarjeta { opacity: 1; transform: translateY(0); }
.anim .familias.is-in .tarjeta:nth-child(1) { transition-delay: .26s; }
.anim .familias.is-in .tarjeta:nth-child(2) { transition-delay: .34s; }
.anim .familias.is-in .tarjeta:nth-child(3) { transition-delay: .42s; }
.anim .familias.is-in .tarjeta:nth-child(4) { transition-delay: .50s; }

.anim .esperar__i { opacity: 1; transform: none; }
}


/* ==========================================================================
   Fertipedia
   ==========================================================================
   Tres plantillas: el índice de conceptos, el marco legal por país y la ficha
   de un concepto. Comparten cáscara y tokens con el resto de internas; aquí
   solo vive lo que ninguna ficha de tratamiento necesita.

   La diferencia de fondo con una ficha de tratamiento es a qué viene el
   lector. A una ficha se llega a decidir; a Fertipedia se llega a entender.
   Por eso aquí no hay brújula ni hilo de etapas salvo donde de verdad hay una
   secuencia, y sí hay dos cosas que allí no hacen falta: un aviso legal que
   se lee antes que nada y una firma con credencial y fecha, que es el listón
   de autoría que exige el contenido de salud. Ver docs/seo-html.md.

   Móvil primero, y el mismo borde izquierdo de siempre: la medida de lectura
   se controla en el texto y nunca estrechando el contenedor.
   ========================================================================== */


/* --- Tapas de Fertipedia -------------------------------------------------
   La regla de portadas de la sección: **el índice y el marco legal llevan
   fotografía; las fichas de concepto no.**

   Una ficha de concepto no tiene foto que le corresponda. Sobre la palabra
   «Gestante», cualquier imagen de banco de una mujer embarazada hace
   exactamente lo que esa misma página pide no hacer —reducir a una persona a
   una parte de su cuerpo— y además obligaría a encontrar una fotografía digna
   por cada uno de los veinticuatro conceptos que faltan por escribir. Una
   plantilla que depende de eso se degrada en el tercer artículo.

   Las dos tapas siguen siendo oscuras en cualquier caso, que es lo que el
   header necesita para nacer transparente sin dejar el logo blanco sobre
   blanco. */

/* La tapa del índice sí lleva fotografía, pero muy bajada: encima va un
   titular, una entradilla y una lista de cuatro enlaces, y con la imagen a
   plena carga el conjunto deja de leerse. Al 34 % da fondo y atmósfera sin
   competir con el texto. El grano se mantiene sobre la foto porque aquí no
   la ensucia: apenas se ve a esa opacidad. */
.tapa--indice { background: var(--navy); }
.tapa--indice .tapa__img { opacity: .34; }
.tapa--indice .tapa__veil {
  background:
    linear-gradient(to top, rgba(0, 15, 28, .95) 0%, rgba(0, 15, 28, .78) 55%, rgba(0, 15, 28, .62) 100%);
}


/* Sin foto, la mitad derecha de la tapa quedaba vacía en escritorio. La
   ocupa lo que de verdad hace falta en un índice: las cuatro entradas por
   las que empieza casi todo el mundo. No es una lista de "destacados"
   decorativa; es el atajo para quien llegó con una pregunta concreta y no
   quiere leerse veinticuatro renglones para encontrarla. */
.tapa__hub { display: grid; gap: clamp(2rem, 5vh, 2.75rem); }

.masleido__t {
  margin: 0 0 .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--lavender);
}

.masleido__l { display: grid; margin: 0; padding: 0; list-style: none; }

.masleido__l li + li { border-top: 1px solid rgba(255, 255, 255, .12); }

.masleido__l a {
  display: block;
  padding: .7rem 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -.012em;
  color: rgba(255, 255, 255, .82);
  transition: color .25s var(--ease), padding-left .3s var(--ease);
}
.masleido__l a:hover { color: var(--white); padding-left: .35rem; }

/* La tapa de una ficha de concepto no necesita media pantalla: quien busca
   una palabra viene a leerla, no a contemplar una portada. Se queda en una
   banda alta y se entra al texto enseguida. El titular baja de tamaño en la
   misma proporción; a 6 rem, una palabra sola sobre una tapa corta se lee
   como un cartel. */
.tapa--corta {
  min-height: 0;
  padding-top: calc(var(--hdr-h) + clamp(2rem, 6vh, 3.5rem));
  background: var(--navy);
}
/* Campo de color plano: aquí el grano es textura y no ruido, porque no hay
   fotografía debajo. Ver docs/cascara-compartida.md. */
.tapa--corta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .16;
  pointer-events: none;
}
.tapa--corta .tapa__t { font-size: clamp(2.4rem, 8vw, 4.2rem); }
.tapa--corta .tapa__d { max-width: 46ch; }


/* --- Aviso ---------------------------------------------------------------
   El descargo de responsabilidad del marco legal. Va inmediatamente después
   de la tapa y **sin `data-anim` a propósito**: un aviso que aparece con
   retraso al hacer scroll es un aviso que alguien se puede saltar.

   Sin caja ni icono. Una línea albaricoque a todo el ancho —el color que en
   el sitio significa "mira esto"— y el texto debajo, en la misma caja que
   todas las demás secciones. Encerrarlo en una tarjeta lo convertiría en
   letra pequeña, que es exactamente lo contrario de lo que hace falta. */

.aviso {
  background: var(--pale);
  border-top: 2px solid var(--apricot);
}

.aviso__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 2.75rem) clamp(1.25rem, 4vw, 3.5rem);
}

.aviso__t {
  margin: 0 0 .7rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}

.aviso__p {
  max-width: 68ch;
  margin: 0 0 .85rem;
  font-size: .99rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}

.aviso__meta {
  max-width: 68ch;
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 26, 50, .12);
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
}
.aviso__meta b { font-weight: 600; color: var(--ink); }


/* --- Índice de conceptos -------------------------------------------------
   El cuerpo del índice de Fertipedia. Agrupado por el momento en que las
   palabras aparecen y no por orden alfabético: nadie llega buscando la letra
   B. Quien ya sabe la palabra la escribe en el buscador y se acabó; quien no
   la sabe necesita justamente el grupo para encontrarla.

   Renglones con línea, no tarjetas. Son veinticuatro entradas de la misma
   jerarquía: convertirlas en veinticuatro cajas con sombra sería el tic
   número uno de docs/anti-patrones.md, y además se leerían peor. */

.indice { background: var(--pale); }

.indice__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.indice__head { margin-bottom: clamp(2rem, 5vh, 3rem); }

.indice__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
.indice__d {
  max-width: 56ch;
  margin: 0 0 clamp(1.5rem, 4vh, 2rem);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* El buscador es el único movimiento de la página que no se dispara solo:
   responde a lo que la persona escribe. Por eso se gasta aquí la interacción
   y el resto se mantiene callado. */
.buscador { max-width: 30rem; }

.buscador__t {
  display: block;
  margin-bottom: .5rem;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Radio de píldora y no el de las tarjetas: un campo de búsqueda tiene que
   parecer un campo de búsqueda, y un solo radio para todo delata plantilla. */
.buscador__caja {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid rgba(0, 26, 50, .16);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.buscador__caja:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(111, 81, 170, .14);
}

.buscador__lupa {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 1rem;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.buscador__e {
  flex: 1 1 auto;
  min-width: 0;
  padding: .85rem .7rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.buscador__e:focus { outline: none; }
.buscador__e::placeholder { color: rgba(74, 90, 107, .6); }
.buscador__e::-webkit-search-cancel-button { display: none; }

.buscador__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: .35rem;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.buscador__x:hover { background: rgba(0, 26, 50, .07); color: var(--ink); }
/* `display: grid` gana al `display: none` del atributo, así que el estado
   oculto hay que devolvérselo a mano. */
.buscador__x[hidden] { display: none; }
.buscador__x svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.buscador__cuenta {
  min-height: 1.35rem;
  margin: .7rem 0 0;
  font-size: .88rem;
  font-weight: 300;
  color: var(--ink-soft);
}

.indice__cuerpo { display: grid; gap: clamp(2.5rem, 6vh, 3.5rem); }

.grupo__t {
  margin: 0 0 .4rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--purple);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}

.grupo__l { display: grid; margin: 0; padding: 0; list-style: none; }

.termino { border-bottom: 1px solid rgba(0, 26, 50, .1); }

.termino__a { display: block; padding: 1rem 0; }

.termino__n {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.25;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.termino__a:hover .termino__n { color: var(--purple); }

/* El término clínico va debajo del general y no al revés: el general manda y
   el clínico acompaña, que es la regla de docs/lenguaje-medico.md. Pero va
   siempre, porque es por donde busca quien llega decidido. */
.termino__c {
  display: block;
  margin-top: .15rem;
  font-size: .84rem;
  font-weight: 400;
  color: var(--purple);
}

.termino__d {
  display: block;
  max-width: 52ch;
  margin-top: .4rem;
  font-size: .93rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Estado de "no hay nada". Ocupa el sitio de la lista y ofrece salida en vez
   de dejar a la persona mirando un vacío. */
.indice__vacio {
  max-width: 54ch;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.indice__vacio a,
.vecinos__nota a,
.firma__nota a,
.pais-f__nota a {
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease);
}
.indice__vacio a:hover,
.vecinos__nota a:hover,
.firma__nota a:hover,
.pais-f__nota a:hover { color: var(--purple-dark); }

/* Un grupo cuyas entradas no coinciden con la búsqueda se va entero, con su
   título. Dejar el encabezado sobre una lista vacía se lee como error. */
.grupo[hidden],
.termino[hidden] { display: none; }


/* --- Camino sin brújula --------------------------------------------------
   El marco legal reutiliza el hilo de etapas para las cinco preguntas, que
   sí son una secuencia: la respuesta a la primera cambia todas las demás. Lo
   que no reutiliza es la brújula, que ahí no tendría nada que orientar. Sin
   esta regla la segunda columna del grid quedaría vacía en escritorio. */

/* La lista conserva su medida de siempre. Estirarla a la anchura completa
   la metía por debajo de la fotografía de fondo, y el texto quedaba leyéndose
   encima de una pared de hospital. La foto, además, baja de opacidad: sin la
   tarjeta de la brújula delante no tiene nada que la contenga. */
.camino--solo .camino__fondo { opacity: .4; }
/* El estado "antes" de la entrada tiene que seguir ganando, y por eso se
   repite aquí con la especificidad de `.camino--solo`. */
.anim .camino--solo .camino__fondo { opacity: 0; }
.anim .camino--solo.is-in .camino__fondo { opacity: .4; }


/* --- Dosier por país -----------------------------------------------------
   Cinco fichas, la misma estructura en las cinco. Se separan por una línea y
   por aire, no por tarjetas: son capítulos del mismo texto y tienen que
   leerse seguidos por quien llega sin saber cuál es el suyo.

   Ninguna afirma qué dice la ley de ningún país. Todas dicen qué preguntar,
   a quién y cuándo. Es contenido YMYL y esa distinción no es de estilo. */

.dosier { background: var(--white); }

.dosier__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.dosier__head { margin-bottom: clamp(2rem, 5vh, 3rem); }

.dosier__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}
.dosier__d {
  max-width: 58ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* El salto a un país lo hace el desplazamiento suavizado de site.js, que
   lleva el destino al borde superior de la ventana y no descuenta el header
   fijo. `scroll-margin` no le sirve porque no usa `scrollIntoView`. Este
   pedazo vacío sí: con `position: relative` y `top` negativo, su rectángulo
   se mide ya desplazado hacia arriba y el título del país aterriza debajo
   del header en vez de detrás. No ocupa altura. */
.ancla {
  display: block;
  position: relative;
  top: calc(-1 * (var(--hdr-h) + 1.5rem));
  height: 0;
}

.pais-f {
  padding: clamp(2.25rem, 6vh, 3.25rem) 0;
  border-top: 1px solid rgba(0, 26, 50, .14);
}

.pais-f__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}
.pais-f__head .flag {
  flex: none;
  width: 30px;
  height: 21px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 26, 50, .18);
}

.pais-f__n {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
}

.pais-f__lead {
  max-width: 64ch;
  margin: 0 0 clamp(1.5rem, 4vh, 2rem);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}

.repasa { display: grid; gap: 0; margin: 0 0 1.5rem; padding: 0; list-style: none; }

.repasa__i {
  padding: 1.05rem 0;
  border-top: 1px solid rgba(0, 26, 50, .1);
}
.repasa__i:last-child { border-bottom: 1px solid rgba(0, 26, 50, .1); }

.repasa__t {
  margin: 0 0 .25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.repasa__p {
  max-width: 58ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pais-f__nota {
  max-width: 60ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* --- Firma ---------------------------------------------------------------
   Autoría visible: nombre, credencial y fecha de la última revisión. En un
   contenido de salud esto no es un adorno de confianza, es el requisito de
   autoría que Google aplica a lo que llama YMYL y que docs/seo-html.md pide
   prever en la maqueta.

   Va al final y en claro. Una firma escondida en gris pequeño diría justo lo
   contrario de lo que la firma existe para decir. */

.firma { background: var(--white); }

.firma__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.firma__t {
  margin: 0 0 1.5rem;
  font-size: clamp(1.4rem, 3.6vw, 1.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
}

.firma__quien {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: start;
  gap: 1.1rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(0, 26, 50, .12);
  border-bottom: 1px solid rgba(0, 26, 50, .12);
}

.firma__foto {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pale);
}

.firma__n {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.firma__cred {
  margin: .1rem 0 .7rem;
  font-size: .92rem;
  font-weight: 400;
  color: var(--purple);
}
.firma__fecha {
  max-width: 62ch;
  margin: 0;
  font-size: .93rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.firma__fecha b { font-weight: 600; color: var(--ink); }

.firma__nota {
  max-width: 62ch;
  margin: 1.4rem 0 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* --- Cuerpo de un concepto -----------------------------------------------
   La plantilla de artículo de Fertipedia. Bloques de prosa con su título, sin
   más adorno: aquí el trabajo lo hace el texto.

   En escritorio cada bloque parte el título a la izquierda y el cuerpo a la
   derecha, igual que `.explica`, para que el ojo no tenga que volver arriba
   entre párrafo y párrafo. Los títulos van más pequeños que los de sección
   porque son varios seguidos; el nivel semántico lo da la etiqueta, no el
   tamaño. */

.art { background: var(--white); }

.art__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.art__b { padding: clamp(1.75rem, 4vh, 2.5rem) 0; }
.art__b + .art__b { border-top: 1px solid rgba(0, 26, 50, .1); }
.art__b:first-child { padding-top: 0; }
.art__b:last-child { padding-bottom: 0; }

.art__t {
  margin: 0 0 .9rem;
  max-width: 24ch;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ink);
}

.art__p {
  max-width: 62ch;
  margin: 0 0 1rem;
  font-size: 1.04rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}
.art__p:last-child { margin-bottom: 0; }
.art__p b { font-weight: 600; color: var(--ink); }
.art__p a {
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease);
}
.art__p a:hover { color: var(--purple-dark); }

.art__l {
  max-width: 62ch;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.art__l li {
  position: relative;
  padding: .55rem 0 .55rem 1.5rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* Un punto pequeño y morado en vez del bolo del navegador: la lista es parte
   del texto, no una enumeración de características. */
.art__l li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
}
.art__l li b { font-weight: 600; color: var(--ink); }
.art__l li:last-child { padding-bottom: 0; }


/* --- Lo que no es --------------------------------------------------------
   Lista de negaciones dentro de la banda oscura `.marco`. Una raya y no un
   visto: cada línea dice lo que **no** pasa, y un visto de confirmación
   diría justo lo contrario. */

.contra__l { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.contra__i {
  position: relative;
  max-width: 62ch;
  padding: 1.3rem 0 1.3rem 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.contra__i:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }
.contra__i::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2rem;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--apricot);
}


/* --- Conceptos vecinos ---------------------------------------------------
   Adónde va quien acaba de leer. Casi nadie llega a Fertipedia por una sola
   palabra, así que el final del artículo es el sitio donde más rinde ofrecer
   la siguiente. Renglones con línea otra vez, no tarjetas. */

.vecinos { background: var(--pale); }

.vecinos__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.vecinos__t {
  margin: 0 0 .7rem;
  font-size: clamp(1.4rem, 3.6vw, 1.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
}
.vecinos__d {
  max-width: 54ch;
  margin: 0 0 clamp(1.5rem, 4vh, 2rem);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.vecinos__l { display: grid; gap: 0; margin: 0 0 1.5rem; padding: 0; list-style: none; }

.vecino {
  padding: 1.15rem 0;
  border-top: 1px solid rgba(0, 26, 50, .12);
}
.vecino:last-child { border-bottom: 1px solid rgba(0, 26, 50, .12); }

.vecino__t {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}
.vecino__t a {
  color: inherit;
  transition: color .25s var(--ease);
}
.vecino__t a:hover { color: var(--purple); }

.vecino__d {
  max-width: 56ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}

.vecinos__nota {
  max-width: 56ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* ==========================================================================
   Fertipedia · a partir de tableta
   ========================================================================== */

@media (min-width: 720px) {
  .repasa { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); }
  /* En dos columnas la línea de cierre solo caía debajo de una de ellas y a
     una altura distinta de la otra. Se quita: quien separa las fichas de país
     es el borde superior de la siguiente. */
  .repasa__i:last-child { border-bottom: 0; }

  .vecinos__l { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3rem); }
  /* Con dos columnas la última fila son dos piezas, y solo la segunda llevaba
     la línea de cierre. Se la ponen las dos. */
  .vecino:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(0, 26, 50, .12); }

  .firma__quien { grid-template-columns: 72px minmax(0, 1fr); gap: 1.4rem; }
  .firma__foto { width: 72px; height: 72px; }
}

@media (min-width: 900px) {
  /* Sin brújula el camino vuelve a una sola columna; si no, el grid de
     `.camino__cuerpo` reserva 16 rem a la derecha para nadie. */
  .camino--solo .camino__cuerpo { grid-template-columns: minmax(0, 1fr); }

  /* `.tapa` recupera 72 vh a partir de 900 px; la tapa corta no. */
  .tapa--corta { min-height: 0; }

  /* Los atajos se alinean con el pie del titular, no con su cabeza: así la
     tapa termina en una sola línea horizontal y no en una escalera. */
  .tapa__hub {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: end;
  }

  .grupo__l { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 3.5rem); }

  /* Mismo reparto que `.explica`: el título hace de ancla a la izquierda y el
     cuerpo se lee a la derecha, sin mover el borde izquierdo de la página. */
  .art__b {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .art__t { margin-bottom: 0; }

  .pais-f__lead { font-size: 1.12rem; }
}


/* ==========================================================================
   Fertipedia · entradas
   ========================================================================== */

.anim .indice__t,
.anim .dosier__t,
.anim .firma__t,
.anim .vecinos__t {
  clip-path: inset(0 0 105% 0);
  transform: translateY(.45em);
  transition: clip-path .85s var(--ease), transform .85s var(--ease);
}
.anim .indice.is-in .indice__t,
.anim .dosier.is-in .dosier__t,
.anim .firma.is-in .firma__t,
.anim .vecinos.is-in .vecinos__t { clip-path: inset(0 0 -20% 0); transform: translateY(0); }

.anim .indice__d,
.anim .buscador,
.anim .dosier__d,
.anim .vecinos__d {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .7s var(--ease) .14s, transform .75s var(--ease) .14s;
}
.anim .is-in .indice__d,
.anim .is-in .buscador,
.anim .is-in .dosier__d,
.anim .is-in .vecinos__d { opacity: 1; transform: translateY(0); }

/* Los grupos entran escalonados; dentro de cada uno las entradas ya no, o el
   índice entero se convierte en una cascada de veinticuatro tiempos. */
.anim .grupo,
.anim .pais-f,
.anim .vecino,
.anim .firma__quien,
.anim .contra__i {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .is-in .grupo,
.anim .is-in .pais-f,
.anim .is-in .vecino,
.anim .is-in .firma__quien,
.anim .marco.is-in .contra__i { opacity: 1; transform: translateY(0); }

.anim .is-in .grupo:nth-child(1) { transition-delay: .28s; }
.anim .is-in .grupo:nth-child(2) { transition-delay: .36s; }
.anim .is-in .grupo:nth-child(3) { transition-delay: .44s; }
.anim .is-in .grupo:nth-child(4) { transition-delay: .52s; }

.anim .is-in .vecino:nth-child(1) { transition-delay: .28s; }
.anim .is-in .vecino:nth-child(2) { transition-delay: .34s; }
.anim .is-in .vecino:nth-child(3) { transition-delay: .40s; }
.anim .is-in .vecino:nth-child(4) { transition-delay: .46s; }

.anim .marco.is-in .contra__i:nth-child(1) { transition-delay: .28s; }
.anim .marco.is-in .contra__i:nth-child(2) { transition-delay: .36s; }
.anim .marco.is-in .contra__i:nth-child(3) { transition-delay: .44s; }
.anim .marco.is-in .contra__i:nth-child(4) { transition-delay: .52s; }
.anim .marco.is-in .contra__i:nth-child(5) { transition-delay: .60s; }

/* Las fichas de país no se escalonan: son largas y la segunda ya está fuera
   de pantalla cuando entra la primera. Cada una aparece cuando le toca. */
.anim .dosier.is-in .pais-f { transition-delay: .22s; }

.anim .art__b {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .65s var(--ease), transform .7s var(--ease);
}
.anim .art.is-in .art__b { opacity: 1; transform: translateY(0); }
.anim .art.is-in .art__b:nth-child(1) { transition-delay: .18s; }
.anim .art.is-in .art__b:nth-child(2) { transition-delay: .26s; }
.anim .art.is-in .art__b:nth-child(3) { transition-delay: .34s; }
.anim .art.is-in .art__b:nth-child(4) { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  .anim .indice__t,
  .anim .dosier__t,
  .anim .firma__t,
  .anim .vecinos__t { clip-path: none; transform: none; }

  .anim .indice__d,
  .anim .buscador,
  .anim .dosier__d,
  .anim .vecinos__d,
  .anim .grupo,
  .anim .pais-f,
  .anim .vecino,
  .anim .firma__quien,
  .anim .contra__i,
  .anim .art__b { opacity: 1; transform: none; }
}


/* ==========================================================================
   Blog
   ==========================================================================
   A diferencia de Fertipedia, aquí la fecha importa: son textos que caducan.
   Por eso el autor y la fecha van en cada pieza y no escondidos al final, que
   además es lo que exige el listón de autoría YMYL de docs/seo-html.md.

   Sin filtros por categoría. Un filtro que esconde piezas obliga a hacer clic
   para descubrir qué hay, y con siete entradas eso resta en vez de sumar: la
   etiqueta se ve en cada una y el ojo filtra solo.
   ========================================================================== */

.etiqueta {
  margin: 0 0 .55rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--purple);
}
.etiqueta--claro { color: var(--lavender); }

.meta {
  margin: 0;
  font-size: .86rem;
  font-weight: 300;
  color: var(--ink-soft);
}
.meta b { font-weight: 600; color: var(--ink); }
.meta--claro { color: rgba(255, 255, 255, .6); }
.meta--claro b { color: var(--white); }


/* --- La última pieza ------------------------------------------------------ */

.ultimo { background: var(--white); }

.ultimo__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.ultimo__a { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.ultimo__foto {
  overflow: hidden;
  border-radius: var(--r-glass);
  background: var(--navy);
}
.ultimo__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.2s var(--ease);
}
.ultimo__a:hover .ultimo__foto img { transform: scale(1.04); }

.ultimo__c { align-self: center; }

.ultimo__t {
  margin: 0 0 .7rem;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.ultimo__a:hover .ultimo__t { color: var(--purple); }

.ultimo__d {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* --- El resto ------------------------------------------------------------- */

.entradas { background: var(--pale); }

.entradas__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.entradas__t {
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.028em;
  color: var(--ink);
}

.entradas__l { display: grid; gap: 0; margin: 0 0 2rem; padding: 0; list-style: none; }

/* Renglones y no tarjetas: son siete titulares que se recorren de un vistazo,
   y una parrilla de tarjetas obligaría a saltar el ojo en zigzag. */
.entrada { border-bottom: 1px solid rgba(0, 26, 50, .12); }
.entrada:first-child { border-top: 1px solid rgba(0, 26, 50, .12); }

.entrada__a { display: block; padding: 1.6rem 0; }

.entrada__t {
  margin: 0 0 .35rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.entrada__a:hover .entrada__t { color: var(--purple); }

.entrada__d {
  margin: 0 0 .6rem;
  font-size: .99rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.entradas__nota {
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  color: var(--ink-soft);
}
.entradas__nota a {
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entradas__nota a:hover { color: var(--purple-dark); }


/* --- El artículo ---------------------------------------------------------- */

.tapa__t--art { font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.02; }

.art { background: var(--white); }

.art__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.art__p {
  max-width: 74ch;
  margin: 0 0 1.15rem;
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
}
/* La entradilla lleva más cuerpo: es la que decide si se sigue leyendo. */
.art__p--entrada {
  font-size: clamp(1.15rem, 2.4vw, 1.3rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 2rem;
}
.art__p--cierre {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(0, 26, 50, .12);
}
.art__p a {
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s var(--ease);
}
.art__p a:hover { color: var(--purple-dark); }

.art__h {
  max-width: 30ch;
  margin: 2.5rem 0 .9rem;
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.022em;
  color: var(--ink);
}

/* La cita sale al margen izquierdo en escritorio: interrumpe la columna sin
   romperla, que es lo que tiene que hacer una cita destacada. */
.art__cita {
  position: relative;
  max-width: 62ch;
  margin: 2.25rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--purple);
}
.art__cita p {
  margin: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.018em;
  color: var(--ink);
}


/* --- Quién escribe -------------------------------------------------------- */

.autor { background: var(--pale); }

.autor__in {
  display: grid;
  gap: 1.5rem;
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.autor__foto {
  width: 96px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--navy);
}
.autor__foto img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.autor__rol {
  margin: 0 0 .2rem;
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.autor__t {
  margin: 0 0 .6rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ink);
}
.autor__d {
  max-width: 68ch;
  margin: 0 0 .8rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.autor__rev {
  margin: 0;
  font-size: .84rem;
  font-weight: 400;
  color: var(--ink-soft);
}


/* --- Sigue por aquí ------------------------------------------------------- */

.vecinos { background: var(--white); }

.vecinos__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.vecinos__t {
  margin: 0 0 1.5rem;
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
}

.vecinos__l { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }

.vecinos__l a {
  display: block;
  padding: 1.3rem 1.4rem;
  border-radius: var(--r-glass);
  background: var(--pale);
  border: 1px solid rgba(0, 26, 50, .06);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.vecinos__l a:hover { background: rgba(167, 161, 203, .16); transform: translateY(-2px); }

.vecinos__cat {
  display: block;
  margin-bottom: .3rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--purple);
}
.vecinos__n {
  display: block;
  margin-bottom: .2rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
}
.vecinos__d {
  display: block;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
}


@media (min-width: 720px) {
  .vecinos__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .ultimo__a { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .autor__in { grid-template-columns: 96px minmax(0, 1fr); gap: 2rem; align-items: start; }
}


/* --- Entradas ------------------------------------------------------------- */

.anim .ultimo__t,
.anim .entradas__t,
.anim .autor__t,
.anim .vecinos__t {
  clip-path: inset(0 0 105% 0);
  transform: translateY(.45em);
  transition: clip-path .85s var(--ease), transform .85s var(--ease);
}
.anim .is-in .ultimo__t,
.anim .is-in .entradas__t,
.anim .is-in .autor__t,
.anim .is-in .vecinos__t { clip-path: inset(0 0 -20% 0); transform: translateY(0); }

.anim .ultimo__foto {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1s var(--ease) .12s;
}
.anim .ultimo.is-in .ultimo__foto { clip-path: inset(0 0 0 0); }

.anim .entrada,
.anim .vecinos__l li,
.anim .art__p,
.anim .art__h,
.anim .art__cita,
.anim .autor__foto,
.anim .autor__d {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .is-in .entrada,
.anim .is-in .vecinos__l li,
.anim .is-in .art__p,
.anim .is-in .art__h,
.anim .is-in .art__cita,
.anim .is-in .autor__foto,
.anim .is-in .autor__d { opacity: 1; transform: translateY(0); }

.anim .is-in .entrada:nth-child(1) { transition-delay: .24s; }
.anim .is-in .entrada:nth-child(2) { transition-delay: .31s; }
.anim .is-in .entrada:nth-child(3) { transition-delay: .38s; }
.anim .is-in .entrada:nth-child(4) { transition-delay: .45s; }
.anim .is-in .entrada:nth-child(5) { transition-delay: .52s; }
.anim .is-in .entrada:nth-child(6) { transition-delay: .59s; }
.anim .is-in .vecinos__l li:nth-child(2) { transition-delay: .3s; }
.anim .is-in .vecinos__l li:nth-child(3) { transition-delay: .38s; }

@media (prefers-reduced-motion: reduce) {
  .anim .ultimo__t,
  .anim .entradas__t,
  .anim .autor__t,
  .anim .vecinos__t,
  .anim .ultimo__foto { clip-path: none; transform: none; }
  .anim .entrada,
  .anim .vecinos__l li,
  .anim .art__p,
  .anim .art__h,
  .anim .art__cita,
  .anim .autor__foto,
  .anim .autor__d { opacity: 1; transform: none; }
}

/* --- Apartados de un concepto de Fertipedia ------------------------------
   El índice que sale de los <h2> del propio artículo. Va en la columna
   izquierda de .explica, que si no queda vacía. Es orientación, no
   navegación: son títulos, no enlaces, porque el artículo es corto y saltar
   dentro de él no aporta nada. */

.apartados {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0, 26, 50, .12);
}
.apartados li {
  padding: .55rem 0;
  border-bottom: 1px solid rgba(0, 26, 50, .12);
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-soft);
}

@media (min-width: 62rem) {
  .apartados { margin-top: 1.5rem; }
}

/* On small screens, photographs and headings each have their own row. */
@media (max-width: 819px) {
  .tapa:has(> .tapa__img) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-top: var(--hdr-h);
  }
  .tapa:has(> .tapa__img) > .tapa__img {
    display: block;
    flex: none;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 1;
    transform: none;
  }
  .tapa:has(> .tapa__img) > .tapa__veil { display: none; }
  .tapa:has(> .tapa__img) > .tapa__in {
    align-self: auto;
    padding-top: 1.75rem;
  }
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .mosaico img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    opacity: 1;
  }
}

.dudas__nota { text-align: center; margin-inline: auto; }