@charset "utf-8";
/* =======================================================================
   Mi Cuna by Cris — hoja de estilo única.

   CUATRO COSAS QUE HAY QUE SABER ANTES DE TOCAR ESTE FICHERO
   -----------------------------------------------------------------------

   1. MÓVIL PRIMERO. Lo que hay fuera de una @media es lo que ve un teléfono.
      Las consultas van hacia ARRIBA (min-width), nunca hacia abajo. Así una
      pantalla estrecha no tiene que deshacer reglas pensadas para una grande.

   2. NADA DE FUERA. Ni @import, ni url() a otro dominio, ni un enlace a
      fonts.googleapis.com. La única tipografía que se descarga es Inter, y el
      .woff2 está en estaticos/fuentes/ y se sirve desde este servidor (ver la
      licencia en esa carpeta). Georgia, la de los titulares, ya está en el
      aparato de quien visita la web. La cabecera Content-Security-Policy es
      font-src 'self': si alguien escribe una url() de fuera, el navegador la
      bloquea.

   3. CONTRASTE MEDIDO, NO ESTIMADO. Todos los pares de color que se usan de
      verdad están calculados y anotados en CONTRASTES.md, en la raíz del
      repositorio: 45 pares, ninguno por debajo del mínimo de WCAG 2.2 AA
      (4,5:1 para texto, 3:1 para los indicadores que no son texto).
      Donde el color de la demo no llegaba, se oscureció conservando el tono y
      queda escrito cuál era y cuál es. Si alguien cambia un color aquí, hay
      que volver a medir: no vale «se parece».

   4. LA WEB SE VE Y SE NAVEGA ENTERA SIN JAVASCRIPT. Aquí no hay ni una regla
      que deje contenido invisible esperando a que un script lo revele. La demo
      sí la tenía (.reveal con opacity:0) y por eso sus capturas salían con la
      portada en blanco. La aparición suave se hace con animation-timeline, que
      es CSS puro, dentro de un @supports y de un
      @media (prefers-reduced-motion: no-preference): si el navegador no la
      entiende o si quien visita la web ha pedido que no se mueva nada, el
      contenido sale quieto y visible, que es el comportamiento correcto.
   ======================================================================= */

/* ----------------------------------------------------------------------
   TIPOGRAFÍA
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* La cara de reserva mientras carga Inter, con las medidas ajustadas para que
   el texto no dé un salto al cambiar de una a otra (eso es CLS, y además
   despista a quien está leyendo). */
@font-face {
  font-family: "Inter reserva";
  src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"),
       local("Liberation Sans"), local("DejaVu Sans"), local("Arial");
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

/* ----------------------------------------------------------------------
   PALETA
   Los nombres están en castellano a propósito (lección 6 del plan: en la web
   anterior se colaron siete «héroe» y hubo que rehacerlas).
   El número de cada par está en CONTRASTES.md.
   ---------------------------------------------------------------------- */
:root {
  /* Fondos */
  --crema:          #faf8f4;  /* el fondo general */
  --crema-calida:   #faf8ee;  /* el panel del primer golpe de vista */
  --blanco:         #ffffff;
  --verde-hondo:    #1c615a;  /* «¿Te suena?» y los antetítulos sobre claro */
  --tinta:          #293d38;  /* Plan Sueño Integral */
  --melocoton:      #f2d6c6;  /* Sobre Cristina */
  --mostaza:        #e0b77e;  /* Plan Baby y los testimonios */
  --verde-pie:      #243a34;

  /* Textos */
  --texto:          #293d38;  /* 10,88:1 sobre crema */
  --texto-suave:    #5c6c67;  /* 5,22:1 sobre crema. La demo traía #64746f */
  --texto-mostaza:  #36453f;  /* 5,41:1 sobre mostaza. La demo traía #3f514c */
  --texto-melocoton:#46574f;  /* 5,56:1 sobre melocotón. La demo traía #4f625c */
  --claro-sobre-verde:  #eef6f3;  /* 6,57:1 sobre verde hondo */
  --tenue-sobre-verde:  #d7e7e2;  /* 5,65:1 sobre verde hondo */
  --claro-sobre-tinta:  #cfdbd7;  /* 8,12:1 sobre tinta */
  --claro-sobre-salvia: #eef5f2;  /* 4,61:1 sobre salvia fuerte */
  --pie-enlace:     #cbdad5;  /* 8,40:1 sobre el verde del pie */
  --pie-legal:      #9db1aa;  /* 5,38:1 sobre el verde del pie */

  /* Acentos.
     terracota es SOLO para adornos sobre fondo oscuro o para rellenos; el
     texto y los botones usan terracota-fuerte, que es el que mide 5:1. */
  --terracota:        #d98c6e;
  --terracota-fuerte: #b0512d;  /* 5,17:1 con blanco encima */
  --terracota-texto:  #ad5029;  /* 5,00:1 sobre crema */
  --salvia:           #7ea89a;
  --salvia-fuerte:    #4e7668;  /* 5,10:1 con blanco encima */
  --verde-sobre-mostaza: #164b45; /* 5,29:1 sobre mostaza */
  --mostaza-clara:    #eed1a8;  /* 4,93:1 sobre verde hondo */
  --menta:            #c9ded6;
  --oliva:            #9bae8e;  /* solo formas decorativas de los talleres */

  /* Líneas y bordes.
     --linea separa bloques y es DECORATIVA: WCAG no le exige contraste porque
     no hace falta verla para entender nada (el contenido ya está separado por
     el espacio). --borde-campo sí es el borde de un control de formulario, y
     ese sí tiene que medir 3:1: mide 3,63:1 sobre blanco. */
  --linea:        #c9d8d1;
  --linea-clara:  rgba(255, 255, 255, .26);
  --linea-oscura: rgba(41, 61, 56, .3);
  --borde-campo:  #6f8d7e;

  /* Avisos del formulario */
  --aviso-error-texto: #8f2f14;  /* 7,44:1 sobre su fondo */
  --aviso-error-fondo: #fdf3ee;
  --aviso-ok-fondo:    #e7f0ec;

  --ancho: 76rem;
  --radio: 6px;
  --margen: clamp(1.25rem, 5vw, 6.5rem);

  /* EL ALTO DE LA CABECERA, DECLARADO (29-10-2026).
     Hasta hoy era EMERGENTE: lo fijaba el alto del logotipo más el relleno, y
     nadie lo escribía en ningún sitio. Eso impedía que la portada pudiera
     RESTARLO para llegar justo al borde de abajo de la ventana, que es lo que
     pidió el usuario («que no se vea la siguiente sección verde hasta empezar
     a hacer scroll»). Ver .heroe.
     ESTE NÚMERO INCLUYE EL BORDE DE ABAJO, Y HASTA EL 30-10-2026 NO LO INCLUÍA.
     Valía 5.2rem = 83,2 px, que es lo que mide la CAJA de la cabecera; pero
     .cabecera lleva además un «border-bottom: 1px», así que la cabecera de
     verdad mide 84,19 px. Como el héroe resta esta constante, su borde de abajo
     caía 0,98 px POR DEBAJO de la ventana en los siete anchos medidos. No se
     veía, pero el comentario afirmaba que el número era exacto y no lo era.
     Desde hoy la constante es la cabecera ENTERA —caja más borde— y quien resta
     el borde es .cabecera__caja, que es la que no lo lleva. Medido después:
     el borde de abajo del héroe cae a 0,02 px de la ventana en 375, 414, 768,
     1280 y 1920, y la franja verde sigue sin asomar ni un píxel pintado (0 filas
     verdes en la captura, a 1x y a 2x).
     LA PARTE EN rem VA EN rem A PROPÓSITO: toda la cabecera es de rem (relleno
     .6rem, logotipo en rem), así que esa parte SIGUE SIENDO EXACTA cuando el
     visitante agranda la letra del navegador. Con un número en píxeles, al
     200 % la resta de la portada se quedaría corta y volvería a asomar el
     verde. El «+ 1px» sí va en píxeles, y también a propósito: un borde de 1px
     mide 1px tenga la letra el tamaño que tenga.
     OJO AL CAMBIAR EL LOGOTIPO: la cabecera ya NO se adapta sola a su alto. Si
     el logotipo crece, o se recorta o le sobra aire, hasta que se toque este
     número. Y SI SE TOCA EL BORDE de .cabecera, hay que tocar el «+ 1px» de
     aquí y el «- 1px» de .cabecera__caja: son el mismo borde escrito tres
     veces. */
  --alto-cabecera: calc(5.2rem + 1px);
}

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

html {
  /* El desplazamiento suave de los enlaces internos. Se apaga más abajo si
     quien visita la web ha pedido que no se mueva nada. */
  scroll-behavior: smooth;
  /* PARA QUE UN ANCLA NO QUEDE TAPADA POR LA CABECERA PEGAJOSA, Y CON LA
     ALTURA DE VERDAD (punto 3.9 del plan quater, 27-10-2026).
     Esto valía 5,5rem (88 px) cuando la cabecera medía 122 px entre 768 y 1023
     y 144 px por encima: o sea que el valor era MENOR que la cabecera y el
     ancla se habría quedado debajo de ella. Hoy no se notaba porque el relleno
     de las secciones se lo comía; era una trampa esperando a que alguien
     redujera ese relleno.
     Medido en Chromium el 27-10, con la cabecera ya arreglada: 83 px en todos
     los anchos menos en la franja de 768 a 815, donde el menú se iba a una
     segunda línea y subía a 138. Aquí van 92 px, que deja 9 px de aire.
     PRECISIÓN DEL 30-10-2026: esos «83 px» son la CAJA de la cabecera; la
     cabecera de verdad mide 84,19 px, porque .cabecera lleva un
     «border-bottom: 1px». El aire real, por tanto, no es de 9 px sino de
     7,8 px. Sigue sobrando, y el número no se toca; pero el 83 de aquí y el
     84,19 de ahí son lo mismo contado de dos maneras, y confundirlos es lo que
     dejó al héroe pasándose 0,98 px de la ventana (ver --alto-cabecera).

     Y DESDE EL 27-10 POR LA NOCHE ESTE VALOR VALE PARA TODOS LOS ANCHOS. Había
     debajo una excepción de 9rem (144 px) para la franja de 768 a 832, que era
     la que cubría esa cabecera de 138 px. El punto 4.1 del plan sexies ha
     bajado esa cabecera a 83 px —el menú ya cabe en una sola fila en toda la
     franja—, así que la excepción sobraba y se ha quitado: tener 144 px de
     margen para una cabecera de 83 dejaba el título de la sección de destino 61
     px más abajo de lo necesario, con un hueco en blanco por encima.
     SI ALGUIEN VUELVE A SUBIR LA CABECERA, este número tiene que subir con
     ella: el criterio es que no quede ni un píxel de título tapado. */
  scroll-padding-top: 5.75rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: "Inter", "Inter reserva", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  /* Ninguna página desborda a lo ancho en ningún tamaño. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> es en línea por omisión, y entonces los anchos en tanto por ciento
   de la <img> de dentro no tienen contra qué calcularse. Como aquí todas las
   imágenes van en <picture> (webp con reserva), se declara en bloque una vez y
   el resto de reglas pueden hablar de la imagen sin sorpresas. */
picture { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 .6em;
  /* Las palabras largas del castellano («acompañamiento») no se salen de la
     caja en una pantalla estrecha. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.3rem, 7.5vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 5.2vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------
   PIEZAS QUE SE REPITEN
   ---------------------------------------------------------------------- */
.lienzo {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
}

.franja { padding: clamp(3.5rem, 9vw, 7rem) var(--margen); }

.antetitulo {
  margin: 0 0 .9rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde-hondo);
}

.entradilla { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--texto-suave); }

/* Botones. Los dos son <a> o <button> de verdad, nunca un <div> con un
   manejador: así funcionan con teclado y los anuncia el lector de pantalla. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 2.9rem;
  padding: .8rem 1.4rem;
  border: 0;
  border-radius: var(--radio);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--terracota-fuerte);
  color: var(--blanco);
}
.boton:hover { background: #99441f; }
.boton--claro { background: var(--blanco); color: var(--texto); }
.boton--claro:hover { background: #efe9e0; }
.boton--verde { background: var(--verde-sobre-mostaza); color: var(--blanco); }
.boton--verde:hover { background: #0f3a35; }

/* EN CONTRASTE ALTO UN BOTÓN TIENE QUE SEGUIR PARECIENDO UN BOTÓN
   (27-10-2026 por la noche, punto 2.9 del plan septies, hallazgo P-2).

   QUÉ PASABA, MEDIDO EN 390, 768 Y 1280: con «forced-colors: active» el
   sistema sustituye el fondo mostaza por Canvas (blanco) y el texto por
   LinkText, y como la regla de arriba pone «border: 0», el botón se quedaba
   con border-width 0px y border-style none. Sin fondo, sin borde y sin
   subrayado, la llamada a la acción principal dejaba de parecer pulsable: era
   texto azul suelto. Para comparar, .bajada y .heroe__caja sí recuperan su
   «Canvas + 1px solid CanvasText» y se leen como cajas.

   ButtonBorder y no CanvasText: es el color con el que el sistema dibuja el
   borde de sus propios botones, así que el botón se parece a un botón del
   sistema y no a un recuadro cualquiera.

   ES EL MISMO PATRÓN QUE EL PUNTO 2.4 DE LA RONDA ANTERIOR arregló para las
   tres rayas del «Menú» y para la marca de «Texto provisional»: adornos y
   formas pintados con fondo que en este modo se evaporan. Se arreglaron los
   dos adornos y se quedaron fuera los dos botones.

   Y VA AQUÍ, pegada a las reglas de .boton, no con los demás bloques de
   forced-colors: una @media NO añade especificidad, así que puesta antes la
   pisaría el «border: 0» de .boton. Es la misma trampa de cascada que costó
   una medida en la ronda anterior con .prov__marca--linea, y está escrita en
   los dos sitios a propósito. */
@media (forced-colors: active) {
  .boton { border: 1px solid ButtonBorder; }
}

.enlace-texto {
  display: inline-block;
  padding: .45rem 0;
  font-weight: 700;
  color: var(--verde-hondo);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}

/* Texto que solo leen los lectores de pantalla. NO se esconde con
   position:absolute fuera de pantalla a secas: se recorta, que es lo que
   mantiene el elemento en el árbol de accesibilidad sin que ocupe sitio. */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* EL ARO DE FOCO, Y POR QUÉ SON DOS ANILLOS.
   Un solo aro de color tiene que medir 3:1 contra el fondo, y en esta web hay
   fondos claros (crema), oscuros (verde hondo, tinta) y medios (mostaza):
   ningún color único los cumple todos. Con dos anillos —uno claro pegado al
   elemento y uno oscuro por fuera— siempre hay uno de los dos que destaca,
   mire donde mire. Los números están en CONTRASTES.md.
   Y NO se quita nunca el outline sin poner otra cosa en su sitio. */
:focus-visible {
  outline: 3px solid var(--verde-hondo);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--crema-calida);
  border-radius: 3px;
}

/* EL ANILLO SE INVIERTE SOBRE FONDO OSCURO, Y SOLO AHÍ (27-10-2026 por la
   noche, punto 2.1 del plan cris-fase-1a-septies-correccion).

   QUÉ PASABA. La regla de arriba es la ÚNICA regla de foco de la hoja y no
   tenía excepción para el héroe. Cuando el primer golpe de vista pasó de una
   caja de crema a un velo oscuro sobre la fotografía, el anillo exterior de
   verde hondo se quedó midiendo 1,00-1,02:1 contra el velo y 1,00:1 contra el
   peor píxel de la foto, y el interior de crema 1,75:1 contra la mostaza del
   botón. Los DOS bordes por debajo de 3, o sea SC 1.4.11 (AA) incumplido, en
   el único botón de conversión de la web. Lo mismo le pasaba —desde antes, no
   por el velo— a «Elegir un momento» (.boton--claro) sobre la salvia fuerte:
   1,42:1 y 1,06:1.

   POR QUÉ INVERTIR Y NO CAMBIAR EL COLOR. Sobre el velo (que al 0,72 tiene de
   suelo rgb(108,99,94), el peor caso, con la foto blanca debajo) el blanco da
   5,86:1 y sobre la salvia fuerte 5,10:1. Y hacia dentro, el verde hondo da
   3,87:1 contra la mostaza del botón y 7,22:1 contra el blanco de
   .boton--claro. Con la inversión el anillo exterior blanco tiene 3:1 o más
   por sus DOS lados (fuera el velo, dentro la banda verde a 7,22:1) en todos
   los enfocables de estas dos zonas. Medido sobre la fotografía real: el peor
   de los cuatro es el propio botón, con 6,24:1 por fuera en 375x667.

   ESTE 6,24 NO ES UNA COPIA DEL 6,24 QUE SE RETIRÓ POR FALSO, Y HAY QUE
   DECIRLO AQUÍ (2026-11-06, criterio 11-bis de la Ronda B). CONTRASTES.md
   tenía un «anillo de foco (no texto) · 6,24:1 · 412x915» que se retiró porque
   describía el color que el guion de medida SUPONÍA y no el que pintaba el
   navegador: el anillo era verde y el real era 1,00:1. El de esta línea es
   OTRA medida, posterior y legítima: entró con «b41fed5», el commit que
   ARREGLÓ el anillo, el mismo que escribió que «los números están medidos
   leyendo outline-color DEL NAVEGADOR, nunca escrito a mano».
   Se escribe porque nada en este fichero lo decía, y el siguiente que haga
   «grep 6,24» buscando copias del número falso va a tirar de este hilo
   creyendo que es malo. No lo es: es el bueno.

   POR QUÉ NO SE INVIERTE EN GLOBAL. Está medido, no supuesto: se recorrieron
   con el teclado los 25 enfocables de la portada en 8 ventanas con la
   inversión puesta en global, y ROMPE DOS que hoy cumplen: «Saltar al
   contenido» (1,06 por fuera, y por dentro el verde hondo cae sobre su propio
   fondo verde hondo) y .boton--verde del Plan Baby (1,87 por fuera y 1,37 por
   dentro). El fondo claro necesita el anillo oscuro por fuera y el fondo
   oscuro lo necesita claro: no hay un color único que valga para los dos.

   AQUÍ DECÍA «ROMPE TRES», Y ERAN DOS (28-10-2026, punto 5 del plan octies).
   El tercero de la lista era el botón «Menú» (.menu__boton), y con la
   inversión forzada CUMPLE: el verificador sirvió la hoja con la inversión
   puesta y midió 1,06 por fuera pero 6,81 POR DENTRO, y con 3:1 o más por uno
   de los dos lados el indicador de foco cumple el SC 1.4.11. La conclusión
   —no se invierte en global— no cambia, porque con dos que rompen ya basta;
   lo que cambia es el número, y un número de más en un comentario es una
   medida que nadie ha hecho.

   Los números están medidos leyendo outline-color DEL NAVEGADOR, nunca
   escrito a mano. La ronda anterior midió «anillo blanco, 5,87:1» sobre un
   anillo que era verde porque el guion de medida llevaba el color a mano; eso
   está arreglado en geometria-velo.mjs y el porqué está escrito allí. */
.heroe :focus-visible,
.llamada :focus-visible {
  outline-color: var(--blanco);
  box-shadow: 0 0 0 2px var(--verde-hondo);
}

/* El enlace de saltar al contenido. Va dentro de <header> (ver _base.php). */
.saltar {
  position: absolute;
  left: .5rem;
  top: -4rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--verde-hondo);
  color: var(--blanco);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radio);
  transition: top .15s;
}
.saltar:focus { top: .5rem; }

/* <main> lleva tabindex="-1" para que el salto mueva también el cursor del
   lector de pantalla. Eso no debe dibujar un aro alrededor de media página. */
main:focus { outline: none; }

/* ----------------------------------------------------------------------
   CABECERA Y MENÚ
   ---------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 248, 244, .97);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(6px);
}
.cabecera--posada { border-bottom-color: var(--linea); }

/* LA CAJA DE LA CABECERA VA A TODO EL ANCHO y el <nav> está DENTRO de ella
   (27-10-2026, punto 1 del plan quinquies). Antes llevaba además la clase
   «lienzo» —76rem centradas— y el menú colgaba fuera, así que en PC el menú
   arrancaba en el píxel 0 de la ventana y caía en una segunda línea debajo del
   logo. El «flex-wrap: wrap» es lo que permite que en móvil el menú se vaya a
   su propia línea sin sacarlo del contenedor. */
.cabecera__caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem var(--margen);
  /* ES «min-height» Y NO «height», Y LA DIFERENCIA IMPORTA (29-10-2026): en
     móvil SIN JavaScript el menú llega desplegado y la cabecera TIENE que
     poder crecer, igual que hoy. Con «height» la lista se saldría de la caja.
     Lo que fija este número es el caso normal —menú cerrado—, que es el que
     resta la portada.
     Y VA CON «- 1px» DESDE EL 30-10-2026: --alto-cabecera es la cabecera
     ENTERA, borde de abajo incluido, y esta caja es la que va POR DENTRO del
     borde. Restarlo aquí es lo que hace que la caja siga midiendo los mismos
     83,2 px de siempre y que la cabecera de verdad mida los 84,19 que el héroe
     resta. Sin este «- 1px» la cuenta vuelve a no cerrar, sólo que un píxel más
     arriba. */
  min-height: calc(var(--alto-cabecera) - 1px);
}
.cabecera__marca { display: inline-flex; flex: 0 0 auto; }

/* EL TAMAÑO DEL LOGOTIPO, Y POR QUÉ SON TRES NÚMEROS Y NO UNO (29-10-2026).
   ENCABEZADO Y PRIMER PÁRRAFO CORREGIDOS EL 30-10-2026, Y ES LA TERCERA PASADA
   SOBRE ESTE MISMO COMENTARIO. Decían que los tamaños eran DOS, tres líneas
   por encima del párrafo que decía que eran TRES: la frase falsa viviendo
   DENTRO del comentario que la pasada anterior ya había reescrito, que es el
   mecanismo que ha costado tres pasadas en este fichero. Un párrafo nuevo que
   corrige al de arriba no arregla nada; lo que arregla es que el de arriba no
   mienta. (Y la frase vieja NO se cita aquí palabra por palabra a propósito:
   una cita literal de algo falso deja el texto falso dentro del fichero, y el
   siguiente que haga «grep» va a tirar de un hilo bueno creyendo que es malo.)
   Hasta el 29-10 era «8.4rem» en todas las anchuras, y el motivo de que no
   creciera en pantallas grandes sigue valiendo; lo que pasa es que ahora hay
   que contarlo con TRES tamaños. El «sizes» de _base.php tiene que decir
   EXACTAMENTE estos tres valores,
   porque es lo único que mira el navegador para elegir del srcset. Si aquí se
   cambia un número y allí no, el navegador pide un fichero del tamaño
   equivocado: o se descarga de más, o pinta el logotipo borroso.
   LOS TRES VALORES (el tercero se añadió el 29-10 por la noche):
     - móvil, por debajo de 48em ......... min(10rem, 62vw)   (aquí)
     - tableta, de 48em (768 px) a 58em .. 8.4rem   (bloque propio, más abajo)
     - escritorio, de 58em (928 px) ...... 14rem    (bloque propio, más abajo)
   NO TE CREAS ESTA LISTA: LA ORDEN QUE LA ENCUENTRA. Un comentario que cita un
   número caduca con la edición siguiente; uno que cita la orden, no.
     grep -n 'cabecera__marca picture' estaticos/css/estilo.css   <- los 3 del CSS
     grep -n '58em) 14rem'             plantillas/_base.php       <- el «sizes»
   Las dos salidas tienen que decir los mismos tres números, en el mismo orden.
   El 14rem lo eligió el usuario el 29-10. El dibujo nuevo no lleva las dos
   líneas de debajo, así que a igual altura de caja la letra sale mucho mayor:
   es el cambio que pedía («ahora mismo no se ve muy bien»).
   EL 14rem ENTRA EN 58em, NO EN 48em (corregido el 29-10, ver el bloque de
   58em más abajo): entre 48em y 58em el logotipo de 224 px no deja sitio al
   menú de cinco enlaces y la cabecera se partía en dos filas. Y ENTRE 48em Y
   58em NO MANDA ESTA REGLA, manda el 8.4rem del bloque de 48em: esta regla
   base es el suelo de la franja de MÓVIL, no de la de tableta. Decir lo
   contrario era el otro trozo desfasado de este comentario.

   EL TOPE «62vw» ES DEL 30-10-2026, Y NO MUERDE EN CONDICIONES NORMALES.
   Con «10rem» a secas, a 320 px de ventana y con la letra del navegador al
   200 % el logotipo medía 320 px y su borde derecho caía en 360: se salía
   40 px. Y como body lleva «overflow-x: hidden» (ver su comentario), eso no es
   texto recortado, es texto PERDIDO: window.scrollTo(500,0) deja scrollX en 0 y
   no hay forma de alcanzarlo. Lo que se perdía era la «a» final de «miCuna»,
   partida por la mitad, en el cruce de pantalla pequeña y vista cansada.
   CUÁL DE LOS DOS MANDA, Y CUÁNDO (precisado el 30-10-2026: aquí se decía que
   a 320 px manda el 62vw, a secas y justo detrás de «no muerde en condiciones
   normales», o sea contradiciendo a la línea anterior. La frase vieja no se
   cita literal, por lo mismo que se explica en el encabezado).
   El «min()» coge el MENOR de los dos, así que:
     - con la letra al 100 % manda SIEMPRE el 10rem = 160 px, porque a 320 px
       el 62vw da 198,4 y min(160, 198,4) = 160. Igual a 360 (223,2) y a 390
       (241,8). O sea que con la letra normal el logotipo mide lo mismo que
       antes de este tope y no cambia nada de lo aprobado.
     - el 62vw manda SÓLO con la letra agrandada, que es para lo que está: a
       320 px con la letra al 200 % el 10rem valdría 320 px y el tope lo deja
       en 198,39, que entra con 81,61 px de sobra.
   De regalo, la cabecera pegajosa a 320 con letra al 200 % baja de 234,38 px a
   205,86.
   EL «sizes» DE _base.php LLEVA ESTE MISMO «min(10rem, 62vw)», y que el
   navegador lo interprete está comprobado, no supuesto (está contado allí).
   SI SE TOCA ALGUNO DE LOS TRES, MIRAR --alto-cabecera: la cabecera ya no se
   adapta sola al alto del logotipo (ver :root). */
.cabecera__marca picture { width: min(10rem, 62vw); }
.cabecera__marca img { width: 100%; height: auto; }

/* EL BOTÓN DEL MENÚ SIN JAVASCRIPT NO EXISTE, Y HAY QUE DECIRLO AQUÍ.
   _base.php lo manda con el atributo «hidden» y lo descubre menu.js. Pero
   «display: inline-flex» de una clase GANA a la regla [hidden]{display:none}
   del navegador, así que sin JavaScript el botón se veía, se tabulaba y no
   hacía nada: una parada de teclado que no lleva a ningún sitio. Esta regla
   es la que hace verdad lo que el código ya decía (WCAG 2.2, 2.4.3). */
.menu__boton[hidden] { display: none; }

.menu__boton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .5rem .8rem;
  background: transparent;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.menu__rayas { position: relative; display: block; width: 1.1rem; height: 2px; background: currentColor; }
.menu__rayas::before, .menu__rayas::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.menu__rayas::before { top: -6px; }
.menu__rayas::after { top: 6px; }

/* El relleno lateral SE QUITÓ el 27-10: el <nav> está ahora DENTRO de
   .cabecera__caja, que ya pone var(--margen) a cada lado. Mientras el <nav>
   colgaba fuera, esta lista tenía que poner su propio margen; dejarlo ahora
   sería contarlo dos veces y los enlaces del menú de móvil quedarían metidos
   hacia dentro respecto del logo. */
.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0 0 .9rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.menu__enlace {
  display: block;
  padding: .7rem .2rem;
  font-size: .95rem;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.menu__enlace:hover { color: var(--terracota-texto); }
.menu__enlace.es-actual { color: var(--terracota-texto); }

/* ----------------------------------------------------------------------
   1. EL PRIMER GOLPE DE VISTA — FOTO A SANGRE, UN VELO UNIFORME ENCIMA Y EL
      TEXTO EN CLARO (27-10-2026 por la noche, apartado 3 del plan
      cris-fase-1a-sexies).
   ----------------------------------------------------------------------

   LO QUE HABÍA AQUÍ HASTA ESTA TARDE, Y POR QUÉ SE HA QUITADO. Había una CAJA
   de crema al 92 % detrás del texto. Daba el contraste de sobra (suelo
   calculado 5,68:1) pero TAPABA la fotografía justo por donde está el texto, y
   en móvil se la comía casi entera. La pregunta del usuario era exactamente
   esa: por qué la portada no se parece a la del zip, donde la foto se ve
   completa. La caja era el motivo. Así que la caja desaparece.

   LO QUE NO SE PUEDE HACER, Y ESTÁ MEDIDO (los números, en CONTRASTES.md):

     - CALCAR EL ZIP. Su hoja trae tres portadas superpuestas; la que se ve es
       un velo de crema EN DEGRADADO que se desvanece hacia la derecha. Medido
       sobre la foto de Cristina: 4,24:1 en el borde izquierdo, 2,48:1 a media
       caja, 2,31:1 al 75 % del ancho y 1,54:1 en la parte baja en móvil. El
       lema se apoya justo donde el degradado ya casi no existe. No es cuestión
       de gusto: no es legible.
     - CAMBIAR SOLO EL COLOR DE LA LETRA, sin velo. Esta foto tiene la pared
       clara del fondo y el pelo oscuro de Cristina DENTRO DEL MISMO PÁRRAFO:
       con el verde #1c615a no llegan el 85,9 % de los píxeles en móvil, y con
       blanco no llegan el 70,2 %. Ningún color de letra se lee sobre las dos
       cosas a la vez.
     - PONER UN text-shadow. WCAG mide color de texto contra color de fondo;
       una sombra no entra en el cálculo y ninguna herramienta la acredita.

   LO QUE SÍ FUNCIONA: UN VELO DE ALFA CONSTANTE SOBRE TODA LA SECCIÓN. La foto
   se ve COMPLETA, de borde a borde, también por detrás del texto y también en
   móvil; y como el alfa es el mismo debajo de cada letra, EL PEOR CASO SE
   CALCULA DE ANTEMANO en vez de depender de qué píxel caiga debajo. Eso es lo
   único que distingue esta solución del degradado del zip.

   EL VELO ES  rgba(51, 38, 31, 0.72)  — pardo cálido, el tono lo eligió el
   usuario por respetar los tonos de piel.

   EL SUELO GARANTIZADO SE CALCULA COMPONIENDO EL VELO SOBRE BLANCO PURO, que
   es el fondo más claro que puede haber y por tanto el PEOR caso para un texto
   claro (al contrario que con la caja de crema, donde el peor caso era sobre
   negro). Y por eso este número vale aunque algún día se cambie la fotografía:

     velo rgba(51,38,31,0.72) sobre BLANCO PURO -> fondo rgb(108, 99, 94)

       texto blanco sobre el velo .................. 5,87:1   (mínimo 4,5)
       texto #eef6f3 sobre el velo ................. 5,35:1   (mínimo 4,5)
       fondo del botón mostaza #e0b77e / el velo .... 3,14:1   (mínimo 3)
       texto #36453f sobre el botón mostaza ........ 5,41:1   (mínimo 4,5)
       anillo de foco blanco sobre el velo ......... 5,87:1   (mínimo 3)
         — SOLO EN «.heroe» Y «.llamada»; en los otros 21 enfocables de la
           portada el anillo exterior es VERDE HONDO y se mide en el bloque
           FOCO, no aquí (acotado el 2026-11-06, criterio 11-bis de la Ronda B:
           es la misma frase que CONTRASTES.md:359 ya llevaba acotada y que
           aquí se había quedado sin acotar)

   EL ALFA NO SE BAJA DE 0,72 POR CUENTA PROPIA, y el 0,72 no es un redondeo
   del 0,66 que se probó antes: AL 0,66 EL FONDO DEL BOTÓN MOSTAZA SE QUEDA EN
   2,60:1 y el mínimo de un elemento que no es texto es 3. La tabla del tono
   pardo sobre blanco puro, para quien tenga que rehacer la cuenta:

       alfa 0,56  rgb(141,133,130)  blanco 3,60:1   mostaza 1,93:1   NO
       alfa 0,60  rgb(133,125,121)  blanco 4,05:1   mostaza 2,17:1   NO
       alfa 0,66  rgb(120,112,107)  blanco 4,86:1   mostaza 2,60:1   NO (el botón)
       alfa 0,70  rgb(112,103, 98)  blanco 5,51:1   mostaza 2,95:1   NO (el botón, por poco)
       alfa 0,72  rgb(108, 99, 94)  blanco 5,87:1   mostaza 3,14:1   <- el de ahora
       alfa 0,75  rgb(102, 92, 87)  blanco 6,48:1   mostaza 3,47:1   pasa, tapa más foto
       alfa 0,80  rgb( 92, 81, 76)  blanco 7,65:1   mostaza 4,10:1   pasa, tapa más foto

   SUBIR EL ALFA TAPA MÁS LA FOTOGRAFÍA, que es justo lo que veníamos a
   arreglar: si alguna medida no llegara, se para y se pregunta. No se sube.

   NI UN linear-gradient EN ESTE BLOQUE. El degradado es el fallo del zip y es
   lo que hace imposible calcular el suelo. Si alguien mete uno aquí, hay que
   volver a medir las 84 ventanas y además ya no habrá número garantizado.

   EL backdrop-filter NO CUENTA PARA EL CONTRASTE y no sustituye al alfa: hay
   navegadores que no lo aplican, y donde no se aplica el contraste sería el
   del alfa a secas. Por eso aquí no hay ninguno.

   LA FOTOGRAFÍA sigue siendo un <img> de verdad y no un background-image: eso
   es lo que le permite llevar srcset (cuatro anchos y dos recortes),
   width/height —que reserva el hueco y evita el salto de maquetación— y
   fetchpriority alta.
   ---------------------------------------------------------------------- */
.heroe {
  position: relative;
  /* EL COLOR DE RESPALDO ES EL VELO OPACO, Y NO ES ESTÉTICA (punto 3.5 del
     plan). Si la fotografía no carga —red mala, imagen bloqueada— el velo se
     queda sin nada debajo y el texto CLARO caería sobre el crema de antes, o
     sea texto blanco sobre casi blanco. Con este color de respaldo el peor caso
     sin foto es texto blanco sobre #33261f: 14,61:1. Hasta hoy este riesgo no
     existía porque el texto era oscuro; desde este cambio, sí. */
  background-color: #33261f;        /* = rgb(51,38,31), el velo al 100 % */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  /* LA PORTADA OCUPA LA PANTALLA ENTERA MENOS LA CABECERA (29-10-2026, lo que
     pidió el usuario: «que no se vea la siguiente sección verde hasta empezar
     a hacer scroll»). Antes era 68vh, que dejaba asomar la franja verde de
     «¿Te suena?» en casi todas las ventanas (medido antes del cambio: 187 px a
     390, 385 a 768, 136 a 1280 y 450 a 1920).

     POR QUÉ «svh» Y NO «vh» NI «dvh», que es lo menos obvio de esto:
       - «vh» en móvil es la altura SIN la barra del navegador, así que la
         portada se pasaría de largo y seguiría tapando el verde: de más, no de
         menos, pero de más;
       - «dvh» cambia al desplazar, y eso es un salto de maquetación en cuanto
         el visitante mueve el dedo;
       - «svh» es la altura CON la barra visible, o sea exactamente «lo que se
         ve al cargar», que es lo que se pidió.
     La línea de «vh» va DELANTE como respaldo para los navegadores anteriores
     a 2022, que no entienden «svh» y se quedan con la primera: en el peor caso
     la portada queda de más, nunca de menos. */
  min-height: calc(100vh  - var(--alto-cabecera));   /* respaldo: sin svh */
  min-height: calc(100svh - var(--alto-cabecera));

  padding: clamp(2rem, 6vw, 3.5rem) var(--margen) clamp(2.2rem, 6vw, 3.5rem);
}

/* EL VELO. Va POR ENCIMA de la foto (z-index 0) y POR DEBAJO del texto
   (z-index 2), así que ocupa el 1. El alfa está escrito aquí con su suelo al
   lado, como manda la casa.

   Y ES UN <div> DE VERDAD, NO UN PSEUDOELEMENTO, Y ESO NO ES ESTILO: ES LO QUE
   DECIDE SI UNA HERRAMIENTA PUEDE AUDITAR ESTA PORTADA.

   Se hizo primero con `.heroe::before`, que era más limpio porque no tocaba la
   plantilla. Y entonces axe pasó de dejar 7 elementos pendientes de revisión
   manual a dejar 8, con un motivo distinto del de siempre:

     con ::before   «Element's background color could not be determined DUE TO
                     A PSEUDO ELEMENT»  (messageKey: pseudoContent)
     con un <div>   «...due to a background image»  (messageKey: imgNode)

   La diferencia importa. Con el pseudoelemento axe se rinde con TODO lo que
   hay dentro del héroe, INCLUIDO EL BOTÓN, que tiene fondo propio opaco y que
   axe sabe resolver perfectamente (5,41:1). Con el <div>, axe vuelve a
   resolver el botón y solo deja pendientes los textos que de verdad se apoyan
   en la fotografía. Medido con las dos variantes sobre la misma página antes de
   desplegar: 8 pendientes con ::before, 7 con el <div>, y 0 incumplimientos en
   los dos casos.

   O sea: el píxel es idéntico y lo que cambia es si la herramienta puede mirar
   debajo. Si alguien vuelve a convertir esto en un pseudoelemento, la portada
   suma un aviso que nadie puede cerrar. */
.heroe__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(51, 38, 31, .72);  /* alfa 0,72 -> suelo 5,87:1 en blanco */
  pointer-events: none;
}
/* El punto del aviso de edades: un <span> VACÍO con color de fondo, no el
   carácter «●». Un elemento cuyo único contenido es un símbolo deja a las
   herramientas de accesibilidad sin saber si eso es texto o un adorno, y lo
   marcan para revisión manual en cada auditoría. Vacío no hay duda: es un
   adorno, y además se puede dar el color exacto. */
.punto {
  display: inline-block;
  width: .45rem; height: .45rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--terracota-fuerte);
}
.bajada svg { flex: 0 0 auto; }

/* LA FOTO, A SANGRE: llena la sección entera por detrás del contenido. */
.heroe__foto { position: absolute; inset: 0; z-index: 0; }
.heroe__foto picture { height: 100%; }
.heroe__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
  /* EL COLOR ES PARA CUANDO LA FOTO NO CARGA (27-10-2026 por la noche, punto
     2.6 del plan septies, hallazgo I-2 de accesibilidad).
     Si la imagen falla —red mala, imagen bloqueada, formato no soportado— el
     navegador pinta EL TEXTO ALTERNATIVO en el sitio de la imagen, y lo pinta
     con el «color» heredado, que aquí era la tinta oscura: 1,02-1,06:1 sobre
     el color de respaldo #33261f de la sección. O sea que justo el texto que
     describe lo único que se ha perdido era lo único ilegible. Mínimo 4,5 (SC
     1.4.3). Con el claro de la casa mide 13,42:1. El texto del héroe ya se
     leía (14,61:1): lo que faltaba era ESTE.
     No afecta a nada cuando la foto SÍ carga: una imagen pintada no usa su
     propio «color». */
  color: var(--claro-sobre-verde);
}

/* LA COLUMNA DE TEXTO. YA NO ES UNA CAJA: ni fondo, ni redondeo, ni relleno,
   ni sombra (punto 3.4.1 del plan). Lo único que queda es el ancho máximo, que
   es maquetación: una línea de texto de 42rem es lo que se lee cómodo, y por
   encima de eso el ojo pierde el renglón. El contraste no depende de esto: lo
   sostiene el velo de arriba, que cubre la sección entera. */
.heroe__caja {
  position: relative;
  z-index: 2;
  max-width: 42rem;
}
/* EL TEXTO, EN CLARO (punto 3.4.3). El antetítulo va en BLANCO y NO en
   #d7e7e2: es el texto más caro de leer de la portada —pequeño, en negrita, en
   versalitas y con letter-spacing— y el blanco le da el suelo más alto que hay
   aquí, 5,87:1. (Con #d7e7e2 el suelo sería 4,59:1 al alfa de hoy: pasa, pero
   sin margen y justo en el texto que menos margen admite. El plan lo descarta
   expresamente.) */
.heroe .antetitulo { color: var(--blanco); font-size: .85rem; }
/* EL TITULAR DE LA PORTADA TIENE SU PROPIO clamp(), MÁS CORTO QUE EL GENERAL,
   Y NO ES UNA PREFERENCIA DE DISEÑO (punto 2.7 del plan quinquies). El general
   es clamp(2.3rem, 7.5vw, 4.6rem), y con la caja de crema eso dejaba el botón
   «Reservar valoración gratuita» FUERA DE LA PRIMERA PANTALLA en el teléfono
   más estrecho de los cinco de referencia (320x568: el botón terminaba en
   y=584 con la pantalla en 568), y en PC estiraba la caja hasta 698 px de alto
   porque el titular se partía en cinco líneas dentro de un ancho del 46 %.
   El plan autoriza expresamente ajustar este clamp hasta que el botón entre.
   Los números de antes y después están en CONTRASTES.md. */
.heroe h1 { font-size: clamp(1.95rem, 5.8vw, 3.4rem); color: var(--blanco); margin-bottom: .5em; }
.heroe__lema { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--claro-sobre-verde); }
.heroe__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.8rem; }
/* LA NOTA DE EDADES, A 15 px (punto 4.3 del plan). Estaba en .85rem = 13,6 px, y
   el público de esta web son madres y padres sin dormir con el móvil a un palmo
   y una mano ocupada. No incumplía nada; se sube porque se lee mejor. */
.heroe__nota { margin-top: 1.6rem; font-size: .9375rem; color: var(--claro-sobre-verde); }
/* EL PUNTO DEL AVISO DE EDADES, EN MOSTAZA Y NO EN TERRACOTA. Consecuencia
   directa de invertir el texto de la portada: el terracota-fuerte #b0512d
   sobre el velo mide 1,14:1, o sea que el punto DESAPARECERÍA. Es decoración
   (<span> vacío con aria-hidden), así que no le aplica el mínimo de texto,
   pero un adorno invisible parece una web rota. La mostaza #e0b77e mide
   3,14:1 contra el suelo del velo, que cumple el mínimo de 3 de los elementos
   que no son texto, y conserva el acento cálido. */
.heroe .punto { background: var(--mostaza); }
/* OJO CON ESTA REGLA. Hoy NO SE APLICA NUNCA: el texto de la nota sale de
   Texto::linea(), que solo escapa y no reconoce la marca «**negrita**», así que
   en esta nota no hay ni puede haber un <b>. Si alguien la hiciera pasar por
   Texto::bloque() o metiera un <b> a mano, el color tiene que seguir siendo
   claro: medido el 27-10 por la noche, sobre el suelo del velo el terracota
   #ad5029 da 1,10:1 y hasta la mostaza clara #eed1a8 se queda en 4,01:1, por
   debajo del mínimo de 4,5:1 para texto. El blanco da 5,87:1, y la negrita ya
   se distingue sola del #eef6f3 de la nota. */
.heroe__nota b { color: var(--blanco); }

/* EL BOTÓN Y EL ENLACE DE LA PORTADA (punto 3.4.4).
   El botón pasa a MOSTAZA con texto #36453f. El terracota de siempre QUEDA
   DESCARTADO aquí: medido, su fondo #b0512d sobre el suelo del velo da 1,14:1
   y el botón desaparecería del todo. Los dos pares, con el suelo del velo:
       fondo mostaza #e0b77e / velo .... 3,14:1  (mínimo 3, no es texto)
       texto #36453f / mostaza ......... 5,41:1  (mínimo 4,5)
   EL :hover VA MÁS CLARO Y NO MÁS OSCURO, y es contraintuitivo a propósito:
   oscurecer la mostaza sube el contraste del texto pero HUNDE el del fondo
   contra el velo (#d8a965 se queda en 2,74:1, por debajo de 3). Con la mostaza
   clara #eed1a8 los dos pares suben: 6,89:1 el texto y 4,01:1 el fondo. */
.heroe .boton { background: var(--mostaza); color: var(--texto-mostaza); }
.heroe .boton:hover { background: var(--mostaza-clara); color: var(--texto-mostaza); }
/* El enlace de texto, en blanco (5,87:1). El subrayado se queda: el color no
   es lo único que lo distingue de lo que tiene al lado.
   Y EL :hover NO CAMBIA DE COLOR, engorda el subrayado. Cualquier tono más
   cálido que el blanco se cae del mínimo de texto sobre este velo: la mostaza
   #e0b77e da 3,14:1 y la mostaza clara #eed1a8 da 4,01:1, y el mínimo son
   4,5:1. Un subrayado más gordo se ve igual de bien y no toca el contraste. */
.heroe .enlace-texto { color: var(--blanco); }
.heroe .enlace-texto:hover { text-decoration-thickness: 3px; }

/* El icono flotante. Es decoración pura: va con alt="" y aria-hidden.

   EL «bottom» ES POSITIVO DESDE EL 30-10-2026, Y ANTES ERA −2.5rem.
   Lo pidió el usuario: «en móvil el icono flotante se ve muy abajo, ¿puedes
   subirlo un poco?», con una captura de la luna cortada por el borde de abajo.
   El −2.5rem colgaba la luna 40 px POR DEBAJO del héroe a propósito, para
   dejarla a caballo entre la foto y la franja verde. Desde que el héroe llega
   al borde de la pantalla (29-10) esos 40 px caen fuera de la ventana y se
   llevan 33 px más de luna.

   EL NÚMERO ESTÁ MEDIDO, NO ELEGIDO, Y SON DOS NÚMEROS POR ANCHURA PORQUE EL
   ICONO SE MUEVE. Esto se volvió a medir de cero el 30-10-2026 y la cifra
   cambió: la pasada anterior midió con la animación CORRIENDO, y «cuántos
   píxeles de luna se ven» vale una cosa u otra según el fotograma, porque
   @keyframes flotar sube el icono .6rem = 9,6 px. De ahí salieron TRES parejas
   de números distintos para lo mismo: 16,8 / 89,5 en este mismo comentario
   hasta hoy, 15,86 / 87,92 en el informe de la pasada anterior y 14,12 / 86,12
   medidos en el servidor. Las tres caían dentro del rango del balanceo, así
   que ninguna era mentira, y ninguna se podía reproducir.
   Las de abajo salen del MISMO método con el que se hacen las
   capturas —«reducedMotion: reduce», que deja el icono quieto— y el pico se
   fuerza con el mismo transform que usa flotar:

       ventana     antes      reposo    pico del balanceo
       320x568       0 px      14,13      23,72
       360x640      42,4       86,13      95,72
       375x667      61,2       96 (entera)   96 (entera)
       390x844      62,8       96 (entera)   96 (entera)
       412x915      64,5       96 (entera)   96 (entera)
       414x896      64,0       96 (entera)   96 (entera)
       430x932      64,0       96 (entera)   96 (entera)

   LA ORDEN QUE LOS ENCUENTRA, que es lo que no caduca con la edición
   siguiente: medir el rect del icono con reducedMotion 'reduce' y quedarse con
   min(rect.bottom, innerHeight) − max(rect.top, 0); para el pico, insertRule
   de «.heroe__icono { transform: translateY(-.6rem) }» sobre la hoja ya
   cargada (una CSP de style-src 'self' bloquea addStyleTag). Si vuelve a
   medirse SIN desactivar la animación, saldrá cualquier número del rango.
   Con .5rem la luna entra entera de 375 px en adelante, con 8,02 px de aire
   contra el borde de abajo en reposo (17,62 en el pico), y en 320 y 360 se ve
   MÁS que antes.

   POR QUÉ NO SE SUBE MÁS, QUE ES LO QUE PARECE QUE FALTA. A 320 y a 360 el
   héroe YA se pasa de la ventana por su propio contenido (89,88 px a 320 y
   17,88 a 360), así que la luna no cabe entera por abajo haga lo que haga este
   número. Y subirla lo bastante para que quepa la pone ENCIMA de la línea
   «Para familias con bebés de 0 meses a 3 años»: con 1.5rem la punta de la
   luna ya roza «meses» a 320 y a 360 (capturado), y con 5.75rem —el primer
   valor con el que la luna entera cabe a 320— se monta además sobre los
   botones. El barrido entero se rehizo de cero el 30-10-2026 y NO HAY NINGÚN
   VALOR que meta la luna entera a 320 ni a 360 sin tapar texto, así que .5rem
   es una elección razonada y no un número a ojo.

   LA SEPARACIÓN CON EL TEXTO, CON LA PRECISIÓN QUE DE VERDAD HACE FALTA
   (corregido el 30-10-2026: aquí se daba UN solo número de separación, menor
   que el real, y se afirmaba que en el punto más alto del balanceo el icono
   seguía sin tocar el texto. Ni el número ni la frase eran exactos. La frase
   vieja no se cita literal, por lo mismo que se explica en el comentario de
   .cabecera__marca picture). Medido contra la caja de línea de .heroe__nota,
   a 320 y a 360:
     - en REPOSO hay 5,53 px de hueco;
     - en el PICO del balanceo la caja del icono SOLAPA 4,07 px la caja de
       línea. O sea que a nivel de CAJA sí se tocan.
     - LA TINTA SE SALVA, Y POR MENOS DE MEDIO PÍXEL: el dibujo lleva arriba un
       margen transparente de 4,72 % del alto, que a 96 px pintados son
       4,53 px, así que el solape de cajas se come justo ese margen y quedan
       ~0,46 px de aire entre el dibujo y la letra.
   Esos 0,46 px son el dato que importa si mañana alguien toca el tipo de letra
   o el «line-height» de .heroe__nota: el margen se agota con nada.
   La orden que lo encuentra: el hueco es rect.top del icono menos el bottom de
   la caja de línea (Range sobre los nodos de texto de .heroe__nota), y el
   margen transparente sale de contar en icono-cuna-360.png la primera fila con
   alfa > 0.
   TAPAR TEXTO DE VERDAD ES PEOR QUE UNA LUNA CORTADA, así que el número se
   queda en .5rem. De 48em en adelante no cambia nada: ahí ya iba por dentro,
   con bottom: 1.5rem.

   La separación con .bajada no la toca esto: va por el lado, no por abajo. El
   hueco horizontal entre las dos cajas es de 62,75 px a 320 y de 169,75 a 430,
   y no depende del «bottom». */
.heroe__icono {
  position: absolute;
  right: var(--margen);
  bottom: .5rem;
  width: 6rem;
  z-index: 3;
  filter: drop-shadow(0 .6rem 1.2rem rgba(15, 45, 41, .22));
}
.heroe__icono img { width: 100%; }

/* LA PISTA DE BAJADA («¿Te suena? ↓»). En móvil va debajo de la columna de
   texto, en el flujo; de tableta en adelante pasa a la esquina de abajo a la
   izquierda (ver la consulta de 48em).

   YA NO LLEVA CAJA DE CREMA, Y EL MOTIVO ES EL VELO. Esta tarde llevaba su
   propio recuadro de crema al 92 %, y era obligatorio: con la foto desnuda
   debajo, todo lo que no estuviera dentro de una caja quedaba encima de la
   fotografía, y esto es TEXTO (con el velo en degradado de la previa se midió
   en 2,78:1). Desde el apartado 3 del plan sexies el velo cubre LA SECCIÓN
   ENTERA, así que esta pista tiene exactamente el mismo suelo garantizado que
   el resto del texto —5,87:1 en blanco— sin necesitar recuadro propio. Si
   algún día desapareciera el velo, esta pista vuelve a necesitar el suyo.

   Y SE SUBE DE 12,48 px A 13,6 px (punto 4.3): va en negrita, en versalitas y
   con letter-spacing, que es la combinación más cara de leer que hay. */
.bajada {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 1.6rem 0 0;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blanco);
  text-decoration: none;
  position: relative;
  z-index: 2;
}

/* ----------------------------------------------------------------------
   LA PORTADA EN MODO DE CONTRASTE ALTO DEL SISTEMA (punto 3.4.7 del plan
   sexies). SIN ESTO EL TEXTO CLARO ACABA DIRECTAMENTE SOBRE LA FOTOGRAFÍA.

   EL MOTIVO, QUE NO ES OBVIO: en modo de contraste alto el sistema SUSTITUYE
   todos los colores de fondo por los suyos, y un fondo rgba() translúcido se
   pierde; las IMÁGENES, en cambio, NO se tocan. O sea que EL VELO DESAPARECE y
   debajo sigue estando la foto, con el texto encima. Y ahora es peor que esta
   tarde: el texto ya no es verde oscuro, es blanco, así que sobre la pared
   clara del fondo de la foto no se vería nada.

   LA SOLUCIÓN ES QUE EN ESTE MODO —Y SOLO EN ESTE MODO— VUELVA LA CAJA. Con
   «Canvas» (opaco, el fondo del sistema) y un borde «CanvasText», la columna de
   texto vuelve a ser una caja con un fondo liso del sistema y el texto vuelve a
   leerse. Hay que devolverle también el RELLENO, que en el modo normal ya no
   tiene: sin él el borde iría pegado a las letras.

   La fotografía SIGUE VIÉNDOSE alrededor, que es lo correcto: es la fotografía
   de la clienta, no un adorno. Y la pista de bajada recupera su recuadro por lo
   mismo que lo recupera la columna.

   Comprobado con captura, no supuesto: a11y-auditar pasa desde el 27-10 con
   «forced-colors: active» y guarda una imagen de cada ruta.
   ---------------------------------------------------------------------- */
@media (forced-colors: active) {
  .heroe__caja {
    padding: clamp(1.4rem, 4.5vw, 2.4rem) clamp(1.3rem, 4.5vw, 2.4rem);
    background: Canvas;
    border: 1px solid CanvasText;
  }
  .bajada {
    padding: .5rem .8rem;
    background: Canvas;
    border: 1px solid CanvasText;
  }
}

/* ----------------------------------------------------------------------
   2. ¿TE SUENA?
   ---------------------------------------------------------------------- */
.situaciones { background: var(--verde-hondo); color: var(--blanco); }
.situaciones .antetitulo { color: var(--mostaza-clara); }
.situaciones h2 { color: var(--blanco); }
.situaciones__lista {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.situaciones__lista li { position: relative; padding-left: 1.5rem; color: var(--claro-sobre-verde); }
.situaciones__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--terracota);
}
.situaciones__cierre { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--linea-clara); }
.situaciones__cierre p:first-child {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.3;
  color: var(--blanco);
}
.situaciones__cierre p + p { margin-top: 1rem; color: var(--tenue-sobre-verde); }

/* ----------------------------------------------------------------------
   3. EL MÉTODO
   ---------------------------------------------------------------------- */
.metodo { background: var(--blanco); }
.metodo__lema {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  line-height: 1.4;
  margin: 2rem 0 0;
}
.pasos { margin-top: 2.2rem; border-top: 1px solid var(--linea); }
.pasos > li { list-style: none; display: grid; gap: .2rem .9rem; padding: 1.3rem 0; border-bottom: 1px solid var(--linea); }
.pasos { padding: 0; }
.pasos__numero { font-size: .75rem; font-weight: 800; letter-spacing: .1em; color: var(--terracota-texto); }
.pasos h3 { margin: 0; }
.pasos p { margin: 0; color: var(--texto-suave); }

/* ----------------------------------------------------------------------
   4. PLAN SUEÑO INTEGRAL
   ---------------------------------------------------------------------- */
.plan { display: grid; }
.plan__visual { display: grid; place-items: center; padding: 2.5rem var(--margen); background: #edf3ef; }
.plan__visual picture { width: min(72%, 24rem); }
.plan__visual img { width: 100%; }
.plan__texto { padding: clamp(2.5rem, 7vw, 4.5rem) var(--margen); background: var(--tinta); color: var(--blanco); }
.plan__texto .antetitulo { color: var(--menta); }
.plan__texto h2 { color: var(--blanco); }
.plan__texto p { color: var(--claro-sobre-tinta); max-width: 36rem; }
.plan__edad {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .4rem .7rem;
  border: 1px solid var(--linea-clara);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--menta);
}
.plan__incluye { list-style: none; margin: 1.6rem 0 2rem; padding: 0; }
.plan__incluye li { position: relative; padding: .75rem 0 .75rem 1.7rem; border-bottom: 1px solid var(--linea-clara); }
.plan__incluye li::before { content: "✓"; position: absolute; left: 0; color: var(--mostaza); }

/* ----------------------------------------------------------------------
   5. PLAN BABY
   ---------------------------------------------------------------------- */
.baby { background: var(--mostaza); color: var(--texto); }
.baby .antetitulo { color: var(--verde-sobre-mostaza); }
.baby__intro p { color: var(--texto-mostaza); max-width: 34rem; }
.baby__pasos { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--linea-oscura); }
.baby__pasos li { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; padding: 1rem 0; border-bottom: 1px solid var(--linea-oscura); }
.baby__pasos span { font-size: .75rem; font-weight: 800; color: var(--verde-sobre-mostaza); }
.baby__pasos strong { display: block; }
.baby__pasos p { margin: 0; color: var(--texto-mostaza); }
.baby__precio { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.8rem; }
.baby__precio strong { font-family: Georgia, serif; font-size: 2.2rem; font-weight: 400; }

/* ----------------------------------------------------------------------
   6. CURSOS
   ---------------------------------------------------------------------- */
.cursos { background: var(--crema); }
.servicios { list-style: none; margin: 2.4rem 0 0; padding: 0; border-top: 1px solid var(--linea); }
.servicios > li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem .8rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linea); }
.servicios__numero { grid-row: span 2; font-family: Georgia, serif; font-size: 1.6rem; color: var(--terracota-texto); }
.servicios__tipo { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.servicios h3 { margin: .2rem 0 .3rem; }
.servicios p { margin: 0; color: var(--texto-suave); }
.servicios__precio { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: .9rem; margin-top: .8rem; }
.servicios__precio b { font-size: 1.3rem; font-weight: 700; }

/* EL DESPLEGABLE DE LOS SEIS TALLERES.
   Sigue siendo un <details> de HTML y no un acordeón de JavaScript: el
   navegador le pone el aria-expanded, responde a Intro y a la barra
   espaciadora y funciona con el JS apagado. Lo único que cambia respecto de
   la ronda anterior es el aspecto: el «+» a la derecha del rótulo, como en la
   previa, en vez del triángulo del navegador a la izquierda. */
.talleres { margin-top: 1.5rem; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.talleres > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem .2rem;
  font-weight: 800;
  cursor: pointer;
  /* Fuera el marcador del navegador: el «+» de la derecha ocupa su sitio.
     La segunda línea es para Safari y para los WebKit antiguos, que no
     entienden list-style en un <summary>. */
  list-style: none;
}
.talleres > summary::-webkit-details-marker { display: none; }

/* El «+»: un <span> vacío con dos barras pintadas con pseudoelementos, para
   no meter un carácter decorativo suelto en el documento. */
.talleres__mas {
  position: relative;
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
}
.talleres__mas::before, .talleres__mas::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--terracota-texto);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.talleres__mas::before { width: 1rem; height: 2px; }
.talleres__mas::after { width: 2px; height: 1rem; }

/* AL ABRIR, EL «+» PASA A «−» (punto 3.7 del plan quater). Se esconde la barra
   vertical y queda la horizontal. El estado programático ya era correcto —el
   navegador pone el aria-expanded del <details>—, así que esto no era un
   incumplimiento: era que el símbolo MENTÍA. Con el triángulo nativo del
   navegador esto venía de serie, y al quitarlo para calcar la previa se perdió;
   es una regresión, y se arregla con una línea. */
.talleres[open] > summary .talleres__mas::after { display: none; }

.talleres__lista { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1px; background: var(--linea); border-top: 1px solid var(--linea); }
/* position:relative y el relleno de la derecha son para la forma de color:
   va fuera del flujo, arriba a la derecha, y el relleno le reserva el hueco
   para que nunca se monte encima de un título largo. */
.talleres__lista li { position: relative; overflow: hidden; background: var(--crema); padding: 1.3rem 5.2rem 1.3rem 1rem; }
/* EL TÍTULO DEL TALLER ES UN <h3> DESDE EL 27-10-2026 (antes un <strong> con
   aspecto de encabezado: ver plantillas/inicio.php). El «font-weight: 700» NO
   es un adorno: es lo que mantiene el aspecto EXACTAMENTE igual que antes, que
   es lo que pide el plan —no se cambia nada de lo que aprobó la clienta—.
   La regla general de h1/h2/h3 pone 400, así que sin esta línea los seis
   títulos adelgazarían al cambiar de etiqueta. Y el font-size se declara aquí
   para que no lo decida el clamp() general de h3. */
.talleres__lista h3 { display: block; font-family: Georgia, serif; font-size: 1.2rem; font-weight: 700; line-height: 1.18; color: var(--texto); margin: 0 0 .4rem; }
/* La segunda línea del título (entrecomillada en cuatro de los seis). Es un
   <span> en bloque y no un <br>: el salto es cosa del diseño, no del texto. */
.taller__sub { display: block; }
.talleres__lista p { margin: 0 0 .5rem; font-size: .9rem; color: var(--texto-suave); }
.talleres__lista b { color: var(--terracota-texto); }

/* LAS SEIS FORMAS DE COLOR, copiadas de la previa: CSS puro, ni una imagen,
   solo border-radius y clip-path. Son DECORACIÓN (span vacío con aria-hidden)
   y no aportan ninguna información, así que WCAG 1.4.11 no les exige
   contraste: ver la nota del final de CONTRASTES.md.

   LA FORMA SE ELIGE POR POSICIÓN y no por una columna de la base de datos.
   Así no hay migración, y si Cristina añade un séptimo taller en la fase 1b
   le toca una forma sin que tenga que elegirla (el ciclo se repite cada 6). */
.taller__forma {
  position: absolute;
  right: 1.2rem; top: 1.3rem;
  width: 56px; height: 27px;
  background: var(--menta);
  opacity: .8;
}
.talleres__lista li:nth-child(6n+1) .taller__forma {
  border-radius: 50% 45% 48% 54% / 62% 70% 40% 38%;
  transform: rotate(-4deg);
}
.talleres__lista li:nth-child(6n+2) .taller__forma {
  border-radius: 65% 35% 60% 40% / 45% 55% 50% 50%;
  background: var(--melocoton);
  transform: rotate(8deg);
}
.talleres__lista li:nth-child(6n+3) .taller__forma {
  width: 44px; height: 44px;
  background: var(--terracota);
  clip-path: polygon(50% 0, 65% 29%, 100% 18%, 79% 50%, 100% 82%, 65% 71%, 50% 100%, 35% 71%, 0 82%, 21% 50%, 0 18%, 35% 29%);
}
.talleres__lista li:nth-child(6n+4) .taller__forma {
  width: 48px; height: 40px;
  border: 9px solid var(--mostaza);
  background: transparent;
  border-radius: 50% 45% 48% 55%;
}
.talleres__lista li:nth-child(6n+5) .taller__forma {
  width: 55px; height: 35px;
  background: var(--verde-hondo);
  clip-path: polygon(0 60%, 18% 60%, 18% 35%, 38% 35%, 38% 55%, 58% 55%, 58% 25%, 78% 25%, 78% 50%, 100% 50%, 100% 100%, 0 100%);
}
.talleres__lista li:nth-child(6n) .taller__forma {
  width: 47px; height: 38px;
  background: var(--oliva);
  border-radius: 70% 30% 65% 35% / 35% 60% 40% 65%;
  transform: rotate(-18deg);
}

/* EL MOVIMIENTO AL PASAR EL CURSOR, como en la previa, pero DENTRO de
   @media (prefers-reduced-motion: no-preference), que la previa no
   contemplaba. Así, si quien visita la web ha pedido que no se mueva nada, la
   transición y el giro NO SE LLEGAN A DECLARAR: la forma se queda quieta en
   su posición de siempre. Si se hubiera puesto un «transform: none» en el
   hover para el caso de movimiento reducido, el efecto sería el contrario
   —la forma se desgiraría al pasar por encima—, que es movimiento también.
   Es decoración con aria-hidden, así que aquí no se pierde nada.

   Y ADEMÁS, SOLO CON RATÓN (punto 3.8 del plan quater, 27-10-2026). En una
   pantalla táctil no hay «pasar por encima»: el navegador emula el :hover al
   tocar y lo DEJA PEGADO hasta que se toca en otro sitio, así que la forma se
   quedaba girada sin que nadie supiera por qué. Con «hover: hover» y
   «pointer: fine» la regla solo existe donde hay un puntero de verdad. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .taller__forma { transition: transform .25s; }
  .talleres__lista li:hover .taller__forma { transform: rotate(8deg) scale(1.08); }
}

/* ----------------------------------------------------------------------
   MODO DE CONTRASTE ALTO DEL SISTEMA (punto 3.3 del plan quater)
   ----------------------------------------------------------------------
   Lo que pasaba sin estas cuatro reglas, medido el 27-10:

   1. EL «+» DESAPARECÍA. Está pintado con el «background» de dos
      pseudoelementos, y en modo de contraste alto el sistema SUSTITUYE todos
      los colores de fondo por los suyos: las dos barras pasaban de 5,00:1 a
      1:1 contra el fondo, o sea invisibles. Y como el marcador nativo del
      <summary> está quitado para calcar la previa, el rótulo se quedaba sin
      NINGUNA señal de que era desplegable. Se arregla pintándolas con un
      color de sistema (CanvasText), que es lo único que el sistema respeta.

   2. DE LAS SEIS FORMAS, CINCO DESAPARECÍAN Y UNA SOBREVIVÍA: la cuarta, que
      está hecha con «border» y no con «background», y los bordes sí se
      conservan. Resultado: un anillo negro suelto junto a «Adiós pañal» y
      nada en los otros cinco, o sea una forma que PARECE que informa de algo
      cuando no informa de nada. Se esconden las seis: son decoración pura
      (<span> vacío con aria-hidden) y no dicen nada que no diga el título que
      tienen al lado, así que lo correcto es que se comporten igual —y que no
      quede ninguna sola—. Al esconderlas se recupera el relleno de la derecha
      que les reservaba sitio.

   3. Y DOS MÁS QUE SE QUEDARON A MEDIAS, corregidas el 27-10 por la noche
      (punto 2.4 del plan cris-fase-1a-sexies). Son el MISMO defecto que el «+»:
      iconos pintados con «background», que es justo lo que el sistema sustituye.

      - LAS TRES RAYAS DEL BOTÓN «MENÚ» (.menu__rayas y sus dos pseudos) van con
        «background: currentColor» y se evaporaban: el botón se quedaba con el
        rótulo «Menú» y un hueco al lado. Impacto MENOR —y por eso esto no era
        incumplimiento y el «+» sí lo era—: el botón conserva su texto visible,
        así que nadie se queda sin saber qué hace. Pero es el mismo patrón y
        cuesta una línea.
      La OTRA mitad de este punto, .prov__marca--linea, NO PUEDE IR AQUÍ y está
      más abajo, pegada a su propia regla. El motivo es cascada pura: una
      @media NO añade especificidad, así que una regla puesta aquí la pisaría
      la declaración normal de .prov__marca--linea, que vive 140 líneas más
      abajo. Comprobado midiendo el background efectivo en Chromium con
      forced-colors activo: puesta aquí seguía saliendo blanca.

      CanvasText y no un color propio: en este modo es lo único que el sistema
      respeta, y es el mismo color con el que pinta el texto de al lado.
   ---------------------------------------------------------------------- */
@media (forced-colors: active) {
  .talleres__mas::before,
  .talleres__mas::after { background: CanvasText; }
  .taller__forma { display: none; }
  .talleres__lista li { padding-right: 1rem; }

  .menu__rayas,
  .menu__rayas::before,
  .menu__rayas::after { background: CanvasText; }
}

/* ----------------------------------------------------------------------
   7. SOBRE CRISTINA
   ---------------------------------------------------------------------- */
.cristina { background: var(--melocoton); display: grid; }
.cristina__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; }
.cristina__texto { padding: clamp(2.5rem, 7vw, 4.5rem) var(--margen); }
.cristina__texto p { color: var(--texto-melocoton); max-width: 36rem; }
.cristina__sellos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; padding: 0; list-style: none; }
.cristina__sellos li {
  padding: .45rem .7rem;
  border: 1px solid var(--linea-oscura);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------------
   8. ESTE PROCESO QUIZÁ NO SEA PARA TI
   ---------------------------------------------------------------------- */
.no-es { background: var(--blanco); }
.no-es__lista { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: .3rem; }
.no-es__lista li { position: relative; padding: .8rem 0 .8rem 1.7rem; font-size: 1.05rem; }
.no-es__lista li::before { content: "\00d7"; position: absolute; left: 0; font-weight: 800; color: var(--terracota-texto); }
.no-es__cierre {
  margin: 2.5rem auto 0;
  max-width: 48rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  text-align: center;
  color: var(--verde-hondo);
}

/* ----------------------------------------------------------------------
   9. TESTIMONIOS
   ---------------------------------------------------------------------- */
.testimonios { background: var(--mostaza); color: var(--texto); }
.testimonios .antetitulo { color: var(--verde-sobre-mostaza); }
.testimonios__caja { display: grid; gap: 2.2rem; margin-top: 1.5rem; }
.testimonios__foto img {
  width: min(100%, 17rem);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 54% 46% 55% 45% / 39% 43% 57% 61%;
  margin-inline: auto;
}
.testimonios figure { margin: 0; }
.testimonios blockquote {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 3.2vw, 1.9rem);
  line-height: 1.35;
}
.testimonios figcaption { font-size: .9rem; font-weight: 800; }

/* ----------------------------------------------------------------------
   10. CUENTOS
   ---------------------------------------------------------------------- */
.cuentos__aviso {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.cuentos__aviso > span { font-family: Georgia, serif; font-size: 3rem; line-height: 1; color: var(--salvia-fuerte); }
.cuentos__aviso strong { display: block; font-size: 1.2rem; }
.cuentos__aviso p { margin: .3rem 0 0; color: var(--texto-suave); }

/* ----------------------------------------------------------------------
   11. LA LLAMADA A LA VALORACIÓN
   ---------------------------------------------------------------------- */
.llamada { background: var(--salvia-fuerte); color: var(--blanco); }
.llamada .antetitulo { color: var(--blanco); }
.llamada h2 { color: var(--blanco); }
.llamada p { color: var(--claro-sobre-salvia); max-width: 34rem; }
/* SIN LOGOTIPO: lo quitó el usuario el 2026-10-27 porque no quedaba bien ahí.
   La rejilla pasa de tres columnas (logotipo, texto, botón) a dos (texto,
   botón), y no queda ninguna regla huérfana de .llamada__logo. El logotipo de
   la cabecera y el del pie siguen donde estaban. */
.llamada__caja { display: grid; gap: 1.6rem; align-items: center; }

/* ----------------------------------------------------------------------
   PIE
   ---------------------------------------------------------------------- */
.pie { background: var(--verde-pie); color: var(--blanco); padding: 3rem var(--margen) 1.5rem; }
.pie__caja { display: grid; gap: 2rem; }
/* LA MARCA DEL PIE: SÓLO EL LOGOTIPO, Y MÁS GRANDE (30-10-2026, petición del
   usuario: «en el pie de página quita el texto de al lado del logo y pon el
   logo más grande»).
   Aquí había además «.pie__marca strong { display: block }» y
   «.pie__marca span { font-size: .85rem; color: var(--pie-enlace) }», que
   vestían el <strong> con «Mi Cuna by Cris» y el <span> con el oficio. Se han
   quitado con el marcado: ya no hay a quién aplicarlas.
   EL «display: flex» Y EL «gap» SE QUEDAN, aunque ahora haya un solo hijo. Un
   gap entre un elemento y ninguno no pinta nada —comprobado: el ancho de
   .pie__marca es exactamente el del <picture>—, y el flex con align-items es lo
   que mantiene el logotipo donde estaba si mañana vuelve a haber algo al lado.
   LOS DOS TAMAÑOS SON «min(12rem, 68vw)» EN MÓVIL Y «16rem» DE 48em EN
   ADELANTE, y el «sizes» de _base.php dice EXACTAMENTE lo mismo. Si se cambia
   uno hay que cambiar el otro, o el navegador elige mal del srcset. LA ORDEN
   QUE LOS ENCUENTRA, que no caduca con la edición siguiente:
     grep -n 'pie__marca picture' estaticos/css/estilo.css   <- los 2 del CSS
     grep -n '48em) 16rem'        plantillas/_base.php       <- el «sizes»
   Las dos salidas tienen que decir los mismos dos valores, tope incluido.

   EL TOPE «68vw» DEL TRAMO DE MÓVIL ES DEL 30-10-2026, Y CIERRA UNA REGRESIÓN
   QUE ESTA MISMA SERIE INTRODUJO. El 12rem lo puso la ronda del 30-10 por la
   mañana (el logotipo del pie pasó de 5rem a 12rem), y con eso el logotipo se
   convirtió en el que fijaba el ancho mínimo del pie con la letra del
   navegador al 200 %: 12rem son 384 px y el hueco de .pie__caja mide 240 px a
   320 y 310 a 390, así que el pie desbordaba 104,00 px a 320 y 34,00 a 390.
   Antes del 30-10 el culpable era el correo (419,97 px), y «overflow-wrap:
   anywhere» lo arregló —ver su comentario, más abajo—; al quitar ese, salió
   detrás el logotipo. Es el mismo patrón que cerró el tope «62vw» de la
   cabecera, y se cierra igual.
   EL VALOR SE ELIGIÓ MIDIENDO, NO A OJO, y la ventana de valores válidos es
   estrecha por los dos lados:
     - para que NO MUERDA con la letra al 100 % hace falta que el tope sea
       mayor que los 192 px del 12rem a 320 px de ventana, o sea ≥ 60vw;
     - para que el logotipo DEJE DE FIJAR el ancho mínimo del pie con la letra
       al 200 % hace falta que quepa en los 240 px de .pie__caja a 320, o sea
       ≤ 75vw.
   68vw cae en medio con margen por los dos lados: a 320 px da 217,59 px, que
   son 25,59 px por encima del 12rem (así que con la letra al 100 % manda
   SIEMPRE el 12rem y el tamaño no se mueve) y 22,41 px por debajo del hueco
   (así que con la letra al 200 % el logotipo ya no es el que manda).
   LO QUE EL TOPE NO ARREGLA, Y HAY QUE SABERLO: el documento sigue
   desbordando con la letra al 200 % porque quien lo estira es «.cuentos__aviso»
   (+122 px a 320), que es PREEXISTENTE y está en la cola. El tope saca del
   problema al pie, no al documento.
   Y EL LÍMITE DE DONDE SÍ MUERDE, por si alguien lo mide y se extraña: por
   debajo de 283 px de ventana (12rem / 0,68) el tope empieza a ganar también
   con la letra al 100 %. El 48em (16rem) NO lleva tope, igual que no lo llevan
   el 8.4rem ni el 14rem de la cabecera.
   Y EL FICHERO QUE SE PINTA ES «mi-cuna-pie-grande», NO «mi-cuna-logo-pie»:
   la escalera vieja se queda en 330 px de ancho y no da para pintar 12rem
   (192 px) ni 16rem (256 px) en una pantalla de doble densidad, que pide 384 y
   512. El porqué de que sea un nombre NUEVO —y no la misma fila con otros
   anchos— está escrito en _base.php y en la migración 008. */
.pie__marca { display: flex; gap: 1rem; align-items: center; }
.pie__marca picture { width: min(12rem, 68vw); flex: 0 0 auto; }
.pie__marca img { width: 100%; }
.pie h2 { font-family: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .8rem; }
/* LOS ENLACES DEL PIE, MÁS ALTOS (punto 4.3 del plan sexies). Medían 19 px de
   alto: para un dedo en un móvil eso es poco, y en una lista de enlaces
   seguidos es fácil pulsar el de al lado. Con el gap a .75rem y .4rem de
   relleno arriba y abajo pasan de 19 px a unos 36. El «display: inline-block»
   es lo que hace que el relleno vertical cuente de verdad en un <a>.
   El relleno va en «.pie ul a» y no en «.pie a» a propósito: así sólo lo cogen
   los enlaces de las dos listas del pie, y no cualquier otro enlace que acabe
   aquí —el aviso de textos provisionales, por ejemplo— ni nada que se añada
   mañana al lado de la marca.
   (Precisado el 30-10-2026: hasta hoy esta nota decía «si fuera en todos, se lo
   llevaría también el <a> que envuelve el logotipo del pie». Ese <a> no existe
   ni ha existido: el logotipo del pie está suelto dentro de .pie__marca, sin
   enlace. La decisión sigue siendo la buena; el ejemplo era falso.) */
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
/* EL «overflow-wrap: anywhere» ES DEL 30-10-2026, Y NO ES COSMÉTICO.
   «hola@suenosdemilcolores.es» es UNA SOLA PALABRA de 26 caracteres sin ningún
   punto por donde partirse. Con la letra del navegador al 200 % mide 419,97 px,
   y .pie__caja es una rejilla cuyo ancho mínimo lo fija su hijo más ancho: ese
   correo estiraba la rejilla ENTERA a 420 px dentro de un hueco de 240, así que
   TODOS los hijos del pie medían exactamente 419,97 —.pie__marca incluida, por
   herencia, aunque ella no tuviera nada que ver—. A 320 px con la letra al
   200 % el correo de contacto, que es la vía directa para escribir a Cristina,
   quedaba ilegible y fuera de la pantalla.
   Va en «.pie a» y no sólo en el enlace del correo porque cualquier enlace del
   pie puede crecer con un texto nuevo, y partir una dirección larga por donde
   sea es mejor que perderla. No se toca el correo en sí: está marcado como
   texto provisional y puede desaparecer solo. */
.pie a { color: var(--pie-enlace); font-size: .95rem; overflow-wrap: anywhere; }
.pie ul a { display: inline-block; padding: .4rem 0; }
.pie__legal { grid-column: 1 / -1; margin-top: 1rem; padding-top: 1.3rem; border-top: 1px solid var(--linea-clara); font-size: .8rem; color: var(--pie-legal); }

/* ----------------------------------------------------------------------
   PÁGINAS DE TEXTO (contacto, gracias, legal, error)
   ---------------------------------------------------------------------- */
.pagina { padding: clamp(2.5rem, 7vw, 5rem) var(--margen); }
.pagina__caja { max-width: 44rem; margin-inline: auto; }
.pagina h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-top: 2rem; }
.pagina ul { padding-left: 1.2rem; }
.pagina li { margin-bottom: .4rem; }

/* El aviso de «textos pendientes». Es texto de verdad, no solo un color: un
   aviso que solo existe como color no existe para media docena de personas de
   cada cien. */
.pendiente {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  background: var(--aviso-error-fondo);
  border-left: 4px solid var(--terracota-fuerte);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.pendiente strong { color: var(--aviso-error-texto); }

/* El sello de texto provisional (src/Marca.php). */
.prov { position: relative; padding-left: .9rem; }
.prov__sello { margin: 0; }
.prov__marca {
  position: absolute;
  left: 0; top: .35rem; bottom: .35rem;
  width: 3px;
  background: var(--terracota-fuerte);
  border-radius: 2px;
}
/* La variante EN LÍNEA, para los textos de una línea que van dentro de otro
   elemento (la etiqueta de la casilla de consentimiento, la dirección de
   correo del pie). El color es currentColor a propósito: hereda el del texto
   que acompaña, que ya está medido, y así la marca cumple su 3:1 lo mismo
   sobre crema que sobre el verde del pie sin inventar un color nuevo. */
.prov__marca--linea {
  position: static;
  display: inline-block;
  width: 3px; height: .75em;
  margin-left: .35em;
  vertical-align: -.03em;
  background: currentColor;
}
/* EN CONTRASTE ALTO DEL SISTEMA, CON UN COLOR DEL SISTEMA (punto 2.4 del plan
   sexies). «currentColor» no sirve aquí: en este modo el navegador sustituye
   el background-color del autor por «Canvas» pase lo que pase, así que la barra
   salía BLANCA SOBRE BLANCO —medido— y quien usa contraste alto perdía la señal
   de que la dirección de correo del pie y la etiqueta del consentimiento son
   textos provisionales. Los dos tienen consecuencias legales. El texto oculto
   para el lector de pantalla no se toca: sigue estando.

   Y ESTE BLOQUE TIENE QUE IR AQUÍ, detrás de la regla de arriba, no con los
   demás de forced-colors: una @media no añade especificidad, así que puesto
   antes lo pisaba la declaración de «background: currentColor». */
@media (forced-colors: active) {
  .prov__marca--linea { background: CanvasText; }
}

/* ----------------------------------------------------------------------
   FORMULARIO
   ---------------------------------------------------------------------- */
.formulario { display: grid; gap: 1.3rem; margin-top: 2rem; }
.campo { display: grid; gap: .4rem; }
.campo > label { font-weight: 700; font-size: .95rem; }
.campo__ayuda { font-size: .85rem; color: var(--texto-suave); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: .65rem .8rem;
  background: var(--blanco);
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo--mal input,
.campo--mal select,
.campo--mal textarea { border-color: var(--terracota-fuerte); border-width: 2px; }

.campo__error {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--aviso-error-texto);
}
.campo__icono { flex: 0 0 auto; margin-top: .15rem; }

/* Las dos casillas. Van una debajo de otra y SEPARADAS a propósito: el
   consentimiento de la política de privacidad y el del boletín son dos cosas
   distintas y no se pueden confundir ni visualmente ni en el código. */
.casilla { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; align-items: start; }
.casilla input { width: 1.25rem; height: 1.25rem; margin: .18rem 0 0; accent-color: var(--verde-hondo); }
.casilla label { font-size: .95rem; }
.casilla--mal { padding: .6rem; margin: -.6rem; border-radius: var(--radio); background: var(--aviso-error-fondo); }

/* El campo trampa del freno antirrobots. display:none y aria-hidden en el
   HTML: no está en el árbol de accesibilidad, no recibe el foco y ningún
   lector de pantalla lo anuncia. NO se saca de pantalla con
   position:absolute, que es lo que suele hacerse y es justo lo que SÍ leen
   los lectores de pantalla. */
.trampa { display: none; }

.aviso {
  padding: 1rem 1.2rem;
  border-radius: var(--radio);
  border-left: 4px solid var(--terracota-fuerte);
  background: var(--aviso-error-fondo);
}
.aviso h2 { margin: 0 0 .4rem; font-family: inherit; font-size: 1.05rem; font-weight: 800; color: var(--aviso-error-texto); }
.aviso p { margin: 0; }
.aviso ul { margin: .5rem 0 0; }
.aviso--bien { border-left-color: var(--verde-hondo); background: var(--aviso-ok-fondo); }
.aviso--bien h2 { color: var(--verde-hondo); }

/* ----------------------------------------------------------------------
   DE TABLETA EN ADELANTE
   ---------------------------------------------------------------------- */
@media (min-width: 48em) {
  /* LA FOTO SIGUE A SANGRE Y EL TEXTO SE QUEDA EN LA MITAD IZQUIERDA.
     El 46 % ya no esconde la fotografía (no hay caja que la tape): ahora es
     solo el ancho de la columna de texto.

     EL SUELO DE 26rem NO ES DECORATIVO (punto 4.2 del plan sexies). A 768 px
     el 46 % son 353 px, o sea 22rem, y ahí el titular se partía en CUATRO
     líneas: el peor reparto de todos los anchos, y lo mismo pasaba con el zoom
     de solo texto al 200 % en PC. Con max(26rem, 46%) la columna nunca baja de
     416 px, el titular se parte en tres como máximo, y a partir de ~904 px de
     ventana vuelve a mandar el 46 % como antes. Es maquetación: no toca el
     alfa ni ninguna medida de contraste. */
  /* AQUÍ NO HAY TAMAÑO DE LOGOTIPO, PERO SÍ LO HAY EN OTRO BLOQUE DE 48em
     (corregido el 30-10-2026: hasta hoy esto decía «aquí no hay tamaño de
     logotipo, y es a propósito» a secas, y se leía como que en toda la franja
     de tableta mandaba el 10rem de móvil, que es falso).
     Lo que pasó el 29-10: el 14rem estuvo en este bloque unas horas y partía la
     cabecera en dos filas entre 768 y 911 px, así que se fue a su propio bloque
     de 58em. Y después, esa misma noche, apareció un TERCER tamaño —8.4rem para
     la franja de tableta—, que vive en un «@media (min-width: 48em)» propio más
     abajo, con el barrido medido al lado. O sea que de 48em a 58em el logotipo
     mide 8.4rem, no el min(10rem, 62vw) de la regla base.
     Aquí, en el bloque de maquetación, sigue sin haber ninguno a propósito:
     este bloque es de rejillas, y el tamaño del logotipo va donde está escrito
     por qué. */

  .heroe {
    /* EL 34rem SE QUEDA COMO SUELO DE CONTENIDO, no como altura. En una
       pantalla baja y ancha —un portátil de 1280x620, por ejemplo— la portada
       no debe encogerse por debajo de lo que necesita su propio texto; y en
       todo lo demás manda la pantalla entera menos la cabecera, que es lo que
       se pidió. Respaldo en «vh» delante, por lo mismo que en la regla base. */
    min-height: max(34rem, calc(100vh  - var(--alto-cabecera)));
    min-height: max(34rem, calc(100svh - var(--alto-cabecera)));
    padding-block: clamp(3rem, 7vw, 4.5rem) clamp(4.5rem, 8vw, 6rem);
  }
  .heroe__caja { max-width: min(42rem, max(26rem, 46%)); }
  .heroe__icono { right: clamp(1rem, 4vw, 3rem); bottom: 1.5rem; width: 8rem; }
  .bajada { position: absolute; left: var(--margen); bottom: 1.2rem; margin: 0; z-index: 3; }

  .situaciones__lista { grid-template-columns: 1fr 1fr; gap: 1.1rem 2.2rem; }
  .pasos > li { grid-template-columns: 3rem 10rem 1fr; align-items: baseline; }
  .pasos h3 { grid-column: 2; }
  .pasos p { grid-column: 3; }
  .plan { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .plan__texto { display: flex; flex-direction: column; justify-content: center; }
  .baby__caja { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
  .baby__pasos { margin-top: 0; }
  .servicios > li { grid-template-columns: 3.5rem 1fr 10rem; align-items: center; }
  .servicios__precio { grid-column: 3; grid-row: 1 / span 3; margin: 0; justify-content: flex-end; text-align: right; }
  .talleres__lista { grid-template-columns: 1fr 1fr; }
  .cristina { grid-template-columns: .85fr 1.15fr; align-items: center; }
  .cristina__foto img { height: 100%; aspect-ratio: auto; min-height: 30rem; }
  .no-es__lista { grid-template-columns: 1fr 1fr; gap: .3rem 3rem; }
  .no-es__lista li:last-child { grid-column: 1 / -1; }
  .testimonios__caja { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
  .llamada__caja { grid-template-columns: 1fr auto; }
  .pie__caja { grid-template-columns: 1.6fr 1fr 1.2fr; gap: 2.5rem; }
  /* EL LOGOTIPO DEL PIE, EL SEGUNDO DE SUS DOS TAMAÑOS (30-10-2026). Los dos
     están escritos también en el «sizes» de _base.php, que es de donde el
     navegador decide qué fichero del srcset se descarga: 16rem aquí y
     min(12rem, 68vw) en la regla base. Son el mismo número escrito dos veces.
     ESTE TRAMO NO LLEVA TOPE A PROPÓSITO (precisado el 30-10-2026, cuando el
     tramo de móvil sí lo llevó): el tope de móvil existe para que el logotipo
     no fije el ancho mínimo del pie a 320 y a 390 con la letra al 200 %, que
     es donde se medía el desbordamiento. Aquí no hay medida que lo pida, y
     poner un tope sin medirlo es justo lo que este fichero lleva tres pasadas
     corrigiendo. La orden que compara los dos tramos con el «sizes» está en el
     comentario de .pie__marca, más arriba. */
  .pie__marca picture { width: 16rem; }

  /* El menú deja de ser un desplegable y pasa a ser una fila. El botón se
     esconde con CSS, no con JavaScript: así, si el JS no carga, en una
     pantalla ancha no aparece un botón que no hace nada. */
  .menu__boton { display: none; }
  .menu__lista { flex-direction: row; align-items: center; gap: 1.6rem; padding: 0; }
  .menu__enlace { padding: .4rem 0; border-bottom: 2px solid transparent; }
  .menu__enlace.es-actual { border-bottom-color: var(--terracota-fuerte); }
  .menu { display: block !important; }
  /* EL MENÚ, A LA DERECHA. Es lo que lo pone en la misma fila que la marca y
     pegado al margen derecho, como en la previa. El botón está escondido a
     esta anchura, así que entre la marca y el menú no hay nada. */
  .menu { margin-left: auto; }
}

/* ----------------------------------------------------------------------
   LA FRANJA DE TABLETA (768-832 px): EL MENÚ, UN POCO MÁS JUNTO Y UN POCO MÁS
   PEQUEÑO, PARA QUE QUEPA EN UNA SOLA FILA (punto 4.1 del plan sexies).
   ----------------------------------------------------------------------
   QUÉ PASABA, MEDIDO. Entre 768 y 811 px la cabecera medía 138 px en vez de
   83: los cinco enlaces y el logotipo no caben, y el «flex-wrap» de
   .cabecera__caja hace lo que tiene que hacer, bajar el menú a una segunda
   línea. 768 px es EL ANCHO EXACTO del iPad en vertical y el de media tableta
   Android, o sea el caso más común de todos, y es además el peor: por debajo
   de unos 650 px de alto de ventana esos 55 px de más tiraban el botón
   principal fuera de la primera pantalla.

   LA CUENTA. A 811 px quedan 580 px para el menú (811 menos dos márgenes de
   5vw, menos el logotipo de 8.4rem, menos el hueco de 1rem) y el menú pide
   unos 582. A 768 px solo quedan 541. Hay que quitarle unos 42 px: el hueco
   entre enlaces baja de 1.6rem a 1.1rem (cuatro huecos, 32 px) y la letra de
   .95rem a .9rem (unos 25 px de las cinco palabras). Con eso entra con holgura
   y la cabecera vuelve a 83 px en toda la franja.

   POR QUÉ EL TOPE ES 52em (832 px) Y NO 811: por lo mismo que lo era en el
   scroll-padding de arriba. Si un cambio de tipografía mueve el punto en el que
   el menú se parte, es mejor que sobre un poco de hueco a que falte. Entre 816
   y 832 el menú ya cabía a tamaño completo, así que ahí esto solo lo deja algo
   más holgado.

   LO QUE NO SE HA HECHO, Y SE PODÍA: adelantar a esta franja el botón de
   hamburguesa. También arregla el alto, pero esconde las cinco secciones detrás
   de una pulsación justo en el aparato en el que más se navega por el menú.
   ---------------------------------------------------------------------- */
@media (min-width: 48em) and (max-width: 52em) {
  .menu__lista { gap: 1.1rem; }
  .menu__enlace { font-size: .9rem; }
}

/* EN MÓVIL EL MENÚ OCUPA SU PROPIA LÍNEA, debajo de la marca y del botón. Con
   el <nav> dentro de .cabecera__caja (que es flex con wrap), esto es lo que lo
   baja de línea. El botón y el desplegable siguen exactamente como estaban: lo
   que decide si la lista se ve es la clase «js» y menu.js, no esta regla. */
@media (max-width: 47.99em) {
  .menu { flex: 1 0 100%; }
}

/* ----------------------------------------------------------------------
   EL TERCER TAMAÑO (8.4rem = 134,4 px): DE 48em (768 px) A 58em (928 px)
   ----------------------------------------------------------------------
   EL LOGOTIPO ES MÁS PEQUEÑO EN TABLETA QUE EN MÓVIL, Y ES CORRECTO. No es una
   errata, y el número no se toca sin volver a medir. En MÓVIL (por debajo de
   48em) el menú está plegado detrás del botón de hamburguesa y la fila entera
   es para la marca: ahí caben los 10rem. En TABLETA (de 48em en adelante) los
   CINCO enlaces están desplegados al lado de la marca, en la misma fila, y el
   sitio que queda para el logotipo es el que es. Por eso baja de 10rem a
   8.4rem justo donde aparece el menú, y vuelve a subir a 14rem en 58em, donde
   ya sobra ancho. Tres tamaños, de menos a más sitio libre: 10 / 8.4 / 14.
   (Precisado el 30-10-2026: el de MÓVIL es «min(10rem, 62vw)», no «10rem» a
   secas. Los 10rem son los que manda con la letra al 100 %, que es el caso del
   que habla este párrafo; el tope sólo entra con la letra agrandada, y está
   contado en el comentario de .cabecera__marca picture.)

   LA CUENTA, MEDIDA EL 29-10-2026 (no razonada: las dos veces que se razonó
   salió mal). Con el logotipo a 10rem = 160 px la cabecera se partía en dos
   filas en dos astillas, 768–776 px y 833–840 px:
     768 px: disponible 691,20 | 160 + 16 (gap) + 523,29 (menú apretado) =
             699,29  ->  FALTAN 8,09 px   (.cabecera__caja 111,02, DOS filas)
     833 px: disponible 749,70 | 160 + 16 + 580,42 (el apretón ya NO está) =
             756,42  ->  FALTAN 6,72 px   (.cabecera__caja 112,28, DOS filas)
   EL ANCHO MÁXIMO QUE CABE A 768 px SON 151,91 px (691,20 − 16 − 523,29). Los
   10rem se pasan de ese tope en 8,09 px; los 8.4rem = 134,4 px se quedan
   17,51 px por debajo a 768 y 18,88 px por debajo a 833. Ese margen es el
   motivo del número: con 160 px, 777 entraba por 0,01 px y 841 por 0,48 px, y
   una maquetación que entra por una centésima se vuelve a partir con cualquier
   respaldo tipográfico o cualquier rótulo de menú con una letra más.

   LA CAUSA ERA ESTE ANCHO, NO EL PUNTO DE CORTE DE 58em. Estirar el apretón
   del menú de 52em a 58em sólo cerraría la astilla de 833–840: a 768 el
   apretón YA está puesto y aun así faltaban 8,09 px. Por eso se baja el ancho
   del logotipo, que es la causa, y no se toca ni el apretón ni la hamburguesa
   (las dos cosas están descartadas por escrito más arriba).

   8.4rem ES EXACTAMENTE EL ANCHO QUE TENÍA LA CABECERA ANTES DEL 29-10, así
   que en esta franja no se regresa respecto a la web que había: el logotipo
   ocupa lo mismo y, como el dibujo nuevo no lleva las dos líneas de debajo, la
   palabra «miCuna» se ve igual de grande que antes (31,2 px) con el mismo
   ancho de caja.

   ESTE NÚMERO Y EL «sizes» DE _base.php SON EL MISMO NÚMERO ESCRITO DOS VECES,
   y son TRES TRAMOS en los dos sitios: 14rem en 58em, 8.4rem en 48em y
   min(10rem, 62vw) de base (corregido el 30-10-2026: aquí decía «10rem de
   base» y el tope «62vw» se le había añadido esa misma mañana). Si se
   desincronizan, el navegador elige mal el fichero del srcset (está contado en
   _base.php). LA ORDEN QUE LO COMPRUEBA, que no caduca como caduca un número:
     grep -n 'cabecera__marca picture' estaticos/css/estilo.css
     grep -n '58em) 14rem'             plantillas/_base.php
   Y si se toca el tamaño, mirar ADEMÁS
   --alto-cabecera, que ya no se adapta solo (ver :root).
   ---------------------------------------------------------------------- */
@media (min-width: 48em) {
  .cabecera__marca picture { width: 8.4rem; }
}

/* ----------------------------------------------------------------------
   EL LOGOTIPO GRANDE (14rem), SÓLO DONDE CABE: DE 58em (928 px) EN ADELANTE
   ----------------------------------------------------------------------
   POR QUÉ NO ESTÁ EN 48em, QUE ES DONDE ESTUVO PRIMERO (29-10-2026). El 14rem
   lo eligió el usuario mirando una maqueta de 1.280 px, o sea mirando la barra
   de ESCRITORIO, y ahí se queda igual. Pero 14rem son 224 px, 89,6 px más que
   los 134,4 del logotipo viejo, y entre 768 y 911 px el menú de cinco enlaces
   ya no cabe a su lado: el «flex-wrap» de .cabecera__caja hacía lo que tiene
   que hacer y bajaba el menú a una segunda línea. La cabecera pasaba de 83,2 px
   a 125,5–126,8 y, como el héroe resta --alto-cabecera y no la cabecera real,
   el borde de abajo del héroe caía 43,31 px por debajo de la ventana y la pista
   «¿TE SUENA? ↓» no se veía a 768 sin desplazar. 768 px es el iPad en vertical,
   el caso más común de todos (ver la franja de 48em–52em de más arriba).

   EL NÚMERO ESTÁ MEDIDO, NO COPIADO. Barrido de la web servida con el logotipo
   a 14rem, de 880 a 960 px de 8 en 8 y luego de 904 a 916 de 1 en 1:
     911 px -> .cabecera__caja = 126,78 px, DOS filas (hueco marca-menú 15,51)
     912 px -> .cabecera__caja =  83,19 px, UNA fila  (hueco marca-menú 16,43)
   O sea que el límite real son 912 px. SE ESCRIBE 58em (928 px) Y NO 57em
   (912) a propósito: 16 px de margen por encima de lo medido, porque un número
   justo se vuelve a partir con cualquier cambio de tipografía o cualquier
   rótulo de menú que crezca, y esto es exactamente el fallo que se está
   corrigiendo. A 928 px el hueco entre la marca y el menú es de 30,83 px.

   ENTRE 48em Y 58em EL LOGOTIPO MIDE 8.4rem, NO EL TAMAÑO DE MÓVIL (corregido
   el 30-10-2026). Aquí ponía, palabra por palabra, que «entre 48em y 58em el
   logotipo se queda en el 10rem de móvil» y que por eso la letra «miCuna»
   pasaba de 31,23 px a 38,00 px. Eso dejó de ser cierto esa misma noche, tres
   párrafos más arriba de donde se escribía: el bloque de 48em que hay unas
   líneas por encima baja el logotipo a 8.4rem = 134,4 px en toda la franja de
   tableta, porque con 160 px la cabecera se partía en dos filas en dos astillas
   (768–776 y 833–840). Con 8.4rem la letra «miCuna» mide los mismos 31,2 px que
   medía antes del 29-10, o sea que en tableta no hay ni mejora ni regresión: el
   logotipo ocupa lo mismo que siempre. La mejora de +21,7 % es de MÓVIL, que es
   donde manda la regla base.
   Esta frase es la premisa falsa que costó la tercera pasada del 29-10; queda
   aquí dicho para que no vuelva.
   No se ha apretado más el menú ni se ha adelantado el botón de hamburguesa:
   las dos cosas están descartadas por escrito arriba.

   ESTE NÚMERO Y EL «sizes» DE _base.php SON EL MISMO NÚMERO ESCRITO DOS VECES.
   Si se cambia uno hay que cambiar el otro, o el navegador elige mal el fichero
   del srcset (está contado en _base.php). Y si se toca el tamaño, mirar ADEMÁS
   --alto-cabecera, que ya no se adapta solo (ver :root).
   ---------------------------------------------------------------------- */
@media (min-width: 58em) {
  .cabecera__marca picture { width: 14rem; }
}

@media (min-width: 64em) {
  /* AQUÍ SIGUE SIN HABER UN TAMAÑO DE LOGOTIPO, Y AHORA HAY DOS RAZONES.
     Reescrito el 29-10-2026 por la noche, con los tres tamaños que hay hoy.

     LA DE SIEMPRE (27-10): aquí estaban «padding-block: .8rem» y
     «width: 10.5rem», y con eso la cabecera medía 105 px en PC, por encima del
     tope de 90 que fijó el criterio 2 del plan quinquies. Un logotipo que
     crece en pantallas grandes engorda la cabecera, y la cabecera es lo que
     resta la portada para llegar al borde de abajo: cada píxel se paga dos
     veces.

     LA NUEVA (29-10, con el valor de móvil al día el 30-10): el tamaño del
     logotipo ya NO es un número suelto. Son TRES —min(10rem, 62vw) en móvil,
     8.4rem de 48em a 58em y 14rem de 58em en adelante—
     y están escritos también en el «sizes» de _base.php, que es de donde el
     navegador decide qué fichero del srcset se descarga. Añadir aquí un CUARTO
     tamaño obliga a añadir un cuarto tramo al «sizes»; si no, el navegador
     pediría el fichero de 480w para pintarlo más grande y el logotipo de la
     clienta saldría borroso justo en las pantallas donde mejor se ve. Mientras
     no haga falta de verdad, un tamaño menos es un sitio menos donde mentir.
     Y si algún día se añade: mirar ADEMÁS --alto-cabecera, que ya no se adapta
     solo (ver :root). */
  .talleres__lista { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------------
   EL MENÚ DE MÓVIL (solo cuando hay JavaScript)
   La clase «js» la pone estaticos/js/clase-js.js ANTES del primer pintado;
   menu.js quita el atributo «hidden» del botón y enlaza el aria-expanded.
   Sin JavaScript no hay botón y la lista se queda DESPLEGADA, que es lo
   correcto: un <button aria-expanded> que no hiciera nada sería mentirle al
   lector de pantalla.
   ---------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /* El primer pintado ya sale plegado porque clase-js.js pone «js» en <html>
     ANTES de pintar. Si esto lo hiciera menu.js (que va con «defer»), la
     página se movería hacia arriba después de dibujarla, que es el salto de
     maquetación que costó una ronda entera en la web anterior. */
  .js .menu { display: none; }
  .js .menu.menu--abierto { display: block; }

  /* SIN JAVASCRIPT LA LISTA SE PLIEGA EN FILAS, NO EN COLUMNA (27-10-2026 por
     la noche, punto 2.9 del plan septies, hallazgo P-3 de accesibilidad).

     QUÉ PASABA, MEDIDO: sin JavaScript no hay botón «Menú» y la lista llega
     DESPLEGADA, que es la decisión correcta y no se toca. Pero desplegada en
     columna, con un enlace por línea, la cabecera pasaba de 83 px a 362 px, y
     el botón «Reservar valoración gratuita» se caía de la primera pantalla en
     320, 360 y 375 px (se iba de y=394..445 a y=672..723).

     No incumple ningún criterio de WCAG —no se pierde contenido, no hay
     desplazamiento horizontal y la web se navega entera— pero la norma de la
     casa dice que la web se ve y se NAVEGA entera sin JavaScript, y el
     criterio 12 de la ronda anterior («el botón entra en la primera pantalla
     en los cinco teléfonos») se verificó SOLO con JavaScript sin que nadie lo
     declarara.

     ESTO NO REHACE EL MENÚ: no toca el camino con JavaScript (las dos reglas
     de arriba), ni el botón, ni el aria-expanded, ni el orden del foco. Es la
     misma lista, puesta en fila y dejando que envuelva. Los enlaces pierden su
     raya de separación, que en fila no separa nada, y se quedan con 45 px de
     alto, por encima de los 44 que pide el objetivo táctil. */
  html:not(.js) .menu__lista {
    flex-direction: row;
    flex-wrap: wrap;
    /* .5rem Y NO MÁS, Y ESTÁ MEDIDO. Los cinco enlaces suman 493 px de texto
       y la lista tiene 280 px de ancho a 320 px de ventana. Con 1,1rem de
       hueco salen TRES filas (cabecera de 236 px) y el botón se queda a 30 px
       de entrar; con .5rem salen DOS (cabecera de 193 px) y entra en los cinco
       teléfonos. El alto de cada enlace se queda en 44 px, que es el mínimo
       del objetivo táctil, así que el hueco estrecho no lo compromete. */
    gap: 0 .5rem;
    padding-bottom: .4rem;
  }
  html:not(.js) .menu__enlace { border-bottom: 0; padding: .6rem .1rem; }
}

/* ----------------------------------------------------------------------
   LA APARICIÓN SUAVE AL BAJAR: SE QUITÓ, Y CONVIENE SABER POR QUÉ
   ----------------------------------------------------------------------
   La demo la hacía con JavaScript (.reveal con opacity:0 hasta que un script
   añadía una clase), y por eso sus propias capturas salían con media portada
   en blanco. Aquí se rehízo con CSS puro —animation-timeline: view()— dentro
   de un @supports y de un @media (prefers-reduced-motion: no-preference), que
   sobre el papel es la forma correcta: sin JavaScript de por medio.

   Y aun así se ha quitado, porque medido en el servidor hacía esto:

     - Un elemento que todavía no ha entrado en su rango de desplazamiento se
       queda en el fotograma inicial, o sea OPACIDAD CERO. En un navegador de
       verdad eso no se nota, porque al bajar entra. Pero cualquier cosa que
       lea la página SIN desplazarse —una captura de página completa, un
       lector que vuelca el documento, la vista de impresión— se encuentra
       media web invisible.
     - Y lo que no se ve, no se audita: axe y pa11y saltan los elementos con
       opacidad 0, así que las secciones animadas se quedaban FUERA de la
       comprobación de contraste sin que el informe lo dijera.

   La aparición suave no vale eso. El contenido sale quieto y visible desde el
   primer byte, que además es lo que pide el plan. Lo único que se mueve en
   toda la web es el icono del primer golpe de vista, y solo si no se ha
   pedido movimiento reducido.
   ---------------------------------------------------------------------- */
/* EL ICONO SE MUEVE TRES VECES Y SE PARA PARA SIEMPRE (27-10-2026 por la
   noche, punto 2.9 del plan septies, hallazgo P-1 de accesibilidad).

   Estaba en «infinite», y eso incumple SC 2.2.2 Pause, Stop, Hide, que es de
   NIVEL A: cualquier movimiento que arranque solo y dure más de cinco
   segundos tiene que poder pararse. Era el único punto de nivel A que le
   quedaba a la web. Hasta hoy solo se paraba si el sistema pedía
   «prefers-reduced-motion: reduce», y quien no tiene esa preferencia activada
   —la mayoría— lo veía moverse indefinidamente al lado del texto que está
   leyendo.

   Tres vueltas de 6 s son 18 s, así que SIGUE pasando de los cinco segundos
   que marca el criterio... y aun así cumple, porque el SC solo pide que el
   movimiento TERMINE solo (o se pueda parar): «animation-iteration-count: 3»
   lo termina. El icono hace su gracia al entrar y se queda quieto.

   No se quita del todo a propósito: es la cuna que da nombre a la marca y la
   clienta la quería viva. Lo que no puede es no parar nunca. */
@media (prefers-reduced-motion: no-preference) {
  .heroe__icono { animation: flotar 6s ease-in-out 3; }
  @keyframes flotar {
    50% { transform: translateY(-.6rem); }
  }
}

/* ----------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   Dos capas a propósito: arriba, nada que se mueva se llega a declarar; aquí,
   la red de seguridad por si alguien añade una animación más adelante y se
   olvida de envolverla.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aparece { opacity: 1 !important; transform: none !important; }
}

/* ----------------------------------------------------------------------
   IMPRESIÓN
   ---------------------------------------------------------------------- */
@media print {
  .cabecera, .bajada, .heroe__icono { display: none; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }

  /* EL PRIMER GOLPE DE VISTA, EN OSCURO SOBRE BLANCO AL IMPRIMIR.
     Es consecuencia directa de poner el texto en claro (punto 3.4.3): los
     navegadores NO imprimen los colores de fondo salvo que el visitante lo
     pida, así que el velo pardo no sale en el papel y el titular en blanco
     quedaría BLANCO SOBRE BLANCO. Comprobado emulando el medio «print» en
     Chromium antes de desplegar: el `color` del <h1> era rgb(255,255,255).
     Se quita la fotografía y el velo y se devuelve el texto a negro: en papel
     la foto no aporta nada y se lleva media página de tinta. */
  .heroe { background: none; min-height: 0; }
  .heroe__velo { display: none; }
  .heroe__foto { display: none; }
  .heroe .antetitulo,
  .heroe h1,
  .heroe__lema,
  .heroe__nota,
  .heroe__nota b,
  .heroe .enlace-texto { color: #000; }
  .heroe .boton { background: none; color: #000; border: 1px solid #000; }
  .heroe .punto { background: #000; }
}