/* =====================================================================
   MAGNOLIA HOLOS · hoja de estilos del sitio
   Escrita desde cero a partir de la Hoja de Valores del Sitio V1
   (14.09.2026) y la Lista de Cambios V1 (14.09.2026). No copiada de
   las 4 páginas de muestra del cliente — esas se usan sólo para
   verificar el resultado, no como fuente. Cada bloque cita el número
   de apartado exacto de la Hoja de Valores para que se pueda cotejar
   contra el PDF renglón por renglón.
   ===================================================================== */

/* --- §1 · Tipografías --------------------------------------------------
   Libre Baskerville (Regular 400 · Italic 400) y Montserrat (Light 300 ·
   Regular 400 · Medium 500). "Ninguna otra tipografía entra al sitio."

   AUTOALOJADAS. La Hoja de Valores §1 lo recomienda ("para no depender
   de terceros"), los Textos v2.3 §8.2 lo piden explícitamente
   ("cargarlas localmente para no depender de terceros y no ralentizar
   el sitio") y la Nota de Referencias §4.6 lo exige como condición de
   entrega: "el sitio no depende de ninguna licencia, plugin de pago ni
   servidor de la agencia". Un <link> a fonts.googleapis.com era
   justamente esa dependencia.

   Los archivos viven en /Fonts, subconjunto latino, licencia SIL OFL
   (gratuitas, sin coste ni atribución obligatoria). Montserrat se
   sirve hoy como fuente variable: un solo archivo cubre los tres pesos
   normativos, así que se declara con rango 300–500 y el navegador
   interpola el 400 y el 500 exactos.
   ------------------------------------------------------------------- */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Fonts/LibreBaskerville-Regular.latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('Fonts/LibreBaskerville-Italic.latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('Fonts/Montserrat-Variable.latin.woff2') format('woff2');
}

/* --- §2 · Colores y §2.1 · Las tres reglas de color --------------------
   Nombre              HEX       Dónde se usa según §2
   Crema Orgánico      #F7F4EF   Fondo dominante de todas las páginas
   Banda de Arena      #F0E9DE   Fondo de bandas a todo el ancho
   Arena Suave         #DDC7AC   Filetes, bordes de campos de formulario
   Verde Salvia        #7A8A71   Titulares/ladillos/subtítulos — sólo ≥24px (regla 1)
   Verde de bloque     #616D5A   Onda, cauce, botones, pie — relleno, NUNCA texto (regla 2)
   Vino Magnolia       #6D2C4D   Nombre en la barra y sección activa del menú
   Dorado Latón        #B08D57   Filetes de remate — uno por pantalla
   Azul Profundo       #1E2436   Menú y textos destacados dentro del cuerpo
   Texto de lectura    #3C4453   Todo el texto corrido (regla 3: texto chico siempre así, nunca en verde)
   Texto sobre verde   #EFEDE6   Textos del bloque del pie
   Gris de notas       #6E695F   Pies de imagen y textos legales sobre crema

   Regla 2 en detalle: Verde de bloque es el mismo Verde Salvia con menos
   luz (mismo tono/saturación), pensado para cargar texto ENCIMA (el pie
   con Texto sobre verde da 4.66:1). Verde Salvia nunca lleva texto encima.
   §2.2 excepción deliberada: el "Lema de portada" va en Verde Salvia a
   16px (3.36:1) — es la ÚNICA línea del sitio bajo el mínimo, y está
   aceptada a conciencia porque es decorativa (la info ya está en el
   emblema/menú/pestaña). Ningún otro texto chico puede usar este pretexto.
   ------------------------------------------------------------------- */
:root {
  --crema-organico: #F7F4EF;
  --banda-arena: #F0E9DE;
  --arena-suave: #DDC7AC;
  --verde-salvia: #7A8A71;
  --verde-bloque: #616D5A;
  --vino-magnolia: #6D2C4D;
  --dorado-laton: #B08D57;
  --azul-profundo: #1E2436;
  --texto-lectura: #3C4453;
  --texto-sobre-verde: #EFEDE6;
  --gris-notas: #6E695F;

  /* --- §4 · Retícula --------------------------------------------------
     Ancho del bloque de contenido: 1120px. Columna de lectura: 640px
     máx. Bajada de portada: 720px máx. Margen lateral escritorio/tableta:
     56px; en teléfono (≤760px): 24px. Columna del ladillo: 230px, con
     64px de separación al texto. En teléfono el ladillo sube arriba del
     texto y todo pasa a una sola columna. */
  --ancho-bloque: 1120px;
  --col-lectura: 640px;
  --ancho-bajada: 720px;
  --margen-escritorio: 56px;
  --margen-telefono: 24px;
  --col-ladillo: 230px;
  --gap-ladillo: 64px;

  /* --- §5 · Aire vertical ----------------------------------------------
     Cuatro pasos y nada más — "cualquier separación que no sea una de
     éstas está mal":
       18px  entre párrafos, dentro de un mismo texto
       48px  dentro de un bloque (intro→columnas, texto→frase destacada,
             pie de imagen→texto)
       112px entre tramos, de un ladillo al siguiente en la misma página
       160px entre secciones, cambio de registro o de fondo
     Más dos medidas propias de la apertura, iguales en las 6 páginas:
       112px de la barra al primer texto
       48px  del filete dorado a lo que sigue
       110px de la apertura a la onda
       110px de la onda al primer tramo               */
  --paso-parrafo: 18px;
  --paso-bloque: 48px;
  --paso-tramo: 112px;
  --paso-seccion: 160px;
  --aire-barra-texto: 112px;
  --aire-filete-siguiente: 48px;
  --aire-apertura-onda: 110px;
  --aire-onda-tramo: 110px;
}

/* --- Base --------------------------------------------------------------
   Reset mínimo. El tamaño/color/interlineado de body corresponde a la
   fila "Texto corrido" de §3: Montserrat 300, 17px, interlínea 1.70,
   color Texto de lectura. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.70;
  color: var(--texto-lectura);
  background: var(--crema-organico);
}

/* El <figure> entra aquí a propósito: el navegador le pone de fábrica
   "margin: 1em 40px", y esos 40px laterales sacaban todas las imágenes
   del sitio 40px a la derecha del texto — contra §3.2 ("todo a la
   izquierda, sin excepciones") y contra §9, que pide el pie de imagen
   alineado a la orilla izquierda de la imagen. Los 17px de arriba
   tampoco son ninguno de los cuatro pasos de §5. */
h1, h2, h3, h4, p, ul, li, figure {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

/* §3.2: "Alineación: todo a la izquierda, sin excepciones. Nunca
   justificado, nunca centrado." Ya es el comportamiento por defecto de
   CSS, pero lo dejo explícito porque el documento lo pide como regla,
   no como casualidad — y algunos elementos (button, th) sí traen un
   valor por defecto distinto en algunos navegadores. */
body {
  text-align: left;
}

/* §5: "Entre párrafos: 18px, dentro de un mismo texto." Como el reset
   de arriba deja los <p> en margin:0, sin esto dos párrafos seguidos
   quedarían pegados. */
p + p {
  margin-top: var(--paso-parrafo);
}

/* Los enlaces dentro del texto: Vino, subrayado de 1px en reposo; el
   subrayado engorda a 2px al pasar el cursor, el color no cambia (§3.3).
   El subrayado debe saltar las colas de las letras y bajar un poco de
   la línea base (§11, último párrafo). */
a {
  color: var(--vino-magnolia);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 2px;
  transition: text-decoration-thickness .2s ease;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* --- §3.3 · Foco de teclado ---------------------------------------------
   No es un detalle de programación, es accesibilidad. Anillo de 2px
   sólidos en Verde de bloque, separado 3px del elemento. Contraste
   4.98:1 sobre crema y 4.53:1 sobre arena (mínimo gráfico: 3.0). Sólo
   aparece navegando con teclado (:focus-visible), no al hacer clic con
   el ratón. Nunca en Dorado: sobre crema se queda en 2.82:1, insuficiente. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--verde-bloque);
  outline-offset: 3px;
}

/* =====================================================================
   §3 · ESCALA TIPOGRÁFICA
   Elemento              Familia    Tamaño  Peso        Interletraje  Interlínea  Color
   Titular de portada     L.Baskerville 42px  400         —            1.22       #7A8A71
   Titular de página      L.Baskerville 42px  400         —            1.22       #7A8A71
   Ladillo y subtítulo    L.Baskerville 24px  400         —            1.30       #7A8A71
   Entradilla (cursiva)   L.Baskerville 24px  400·itálica —            1.50       #7A8A71
   Frase destacada        L.Baskerville 24px  400·itálica —            1.45       #7A8A71
   Bajada de portada      Montserrat    20px  300         —            1.65       #3C4453
   Texto corrido          Montserrat    17px  300         —            1.70       #3C4453
   Etiqueta de lista      Montserrat    17px  500         —            1.45       #1E2436
   Texto de columna estr. Montserrat    16px  300         —            1.70       #3C4453
   Lema de portada        Montserrat    16px  500         0.30em       1.70       #7A8A71
   Nombre en la barra     L.Baskerville 18px  400         —            1.00       #6D2C4D
   Menú                   Montserrat    13px  400         0.10em       1.70       #1E2436
   Mapa del pie           Montserrat    13px  400         0.10em       1.70       #EFEDE6
   Texto del pie          Montserrat    15px  300         —            1.75       #EFEDE6
   Aviso legal del pie    Montserrat    13px  300         —            1.75       #EFEDE6 al 80%
   Pie de imagen y notas  Montserrat    13px  300         —            1.60       #6E695F
   Enlace dentro del texto  (hereda familia/tamaño del texto que lo rodea) — #6D2C4D
   Botones                Montserrat    12px  400         0.18em       —          #F7F4EF
   Botón de contacto      Montserrat    12px  400         0.10em       —          #616D5A
   ===================================================================== */

/* Titular de portada (Inicio) / Titular de página (cuando la página es
   "una cosa con nombre propio": Los programas → "Conquistando la Salud"
   en cursiva; Quién está detrás → "Liliana Hernández Patiño". Las demás
   páginas —El proyecto, Seminarios y talleres, Preguntas frecuentes—
   NO llevan titular, sólo el rótulo — §3.1). */
.titular-portada,
.titular-pagina {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.22;
  color: var(--verde-salvia);
  text-wrap: balance; /* §3.2: titulares/ladillos/entradillas/frases destacadas se equilibran solos */
}

/* CORREGIDO — Ronda 3, punto 21: el nombre de "Quién está detrás" no
   es "una cosa con nombre propio" del mismo peso que "Conquistando la
   Salud" — es una persona, y a 42px quedaba 1.4 veces más grande que
   un nombre de tramo. Usa el mismo tamaño que .nombre-tramo (24px),
   redonda (no cursiva, para no competir con la entrada-tramo del
   resto del sitio), y el subtítulo baja en proporción. */
.titular-persona {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.30;
  color: var(--verde-salvia);
  margin-top: 6px;
}

.subtitulo-persona {
  margin-top: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto-lectura);
}

/* Bajada de portada: Montserrat 20px/1.65, color de lectura (no verde:
   es texto corrido, aplica la regla 3 de §2.1). Máximo 720px de ancho
   (--ancho-bajada). */
.bajada-portada {
  font-size: 20px;
  line-height: 1.65;
  color: var(--texto-lectura);
  max-width: var(--ancho-bajada);
}

/* CORREGIDO — Ronda 3, punto 10: faltaba el aire de "intro→columnas"
   (§5: 48px) entre un titular/entrada de tramo y el texto que sigue.
   Sin esto, el reset de h1/h2/h3 a margin:0 los deja pegados al
   párrafo siguiente. */
.titular-portada + .bajada-portada,
.entrada-tramo + p {
  margin-top: var(--paso-bloque);
}

/* Nivel 2 de título (§3.1) · "Nombre del tramo": al margen izquierdo,
   columna de 230px. Libre Baskerville redonda, 24px, Verde Salvia.
   Los que hagan falta (uno por tramo, es obligatorio — §3.2 orden 1). */
.nombre-tramo {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.30;
  color: var(--verde-salvia);
  text-wrap: balance;
}

/* Nivel 3 de título (§3.1) · "Entrada del tramo": en la columna, antes
   del cuerpo. Libre Baskerville CURSIVA, 24px, Verde Salvia. Máximo
   una por tramo, en el tramo principal de la página (§3.2 orden 2). */
.entrada-tramo {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.50;
  color: var(--verde-salvia);
  text-wrap: balance;
}

/* Nivel 4 de título (§3.1) · "Etiqueta de lista": dentro de listas con
   nombre, o corrida al inicio de un párrafo (ej. "El emblema. Un árbol
   de magnolia..."). Montserrat 500, 17px, interlínea 1.45, Azul
   Profundo — NO en verde: a este tamaño no alcanzaría el contraste
   mínimo (regla 1 de §2.1). Las que hagan falta. */
.etiqueta-lista {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.45;
  color: var(--azul-profundo);
}

/* Frase destacada: Libre Baskerville cursiva, 24px, interlínea 1.45,
   Verde Salvia. SIEMPRE lleva su filete dorado a la izquierda — es lo
   que la distingue de una entrada de tramo, que es la misma tipografía
   sin filete (§3.2: "sin el filete, dos cursivas del mismo tamaño
   compiten"). Máximo 22em de ancho para que no corra a lo ancho de
   toda la columna. Alineación siempre a la izquierda — nunca centrada,
   ni la pregunta de "Tres escenarios" (§3.2, regla de alineación).
   El grosor del filete (2px) y su relleno (26px) no están en la
   prosa de la Hoja de Valores, pero sí están medidos en las 4 páginas
   HTML que la acompañan — el propio documento dice que esa muestra
   es la medición oficial cuando la prosa no alcanza, así que se
   toman de ahí como definitivos, no como provisionales. */
.frase-destacada {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: var(--verde-salvia);
  max-width: 22em;
  text-wrap: balance;
  margin: var(--paso-bloque) 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid var(--dorado-laton);
}

/* Cuando la frase destacada es lo ÚLTIMO del tramo (como en "El terreno
   y el cauce"), no le hace falta su propio margen de salida — el tramo
   o la franja que la contiene ya ponen los 160px de "entre secciones"
   (§5). Sin esto, los dos se suman y queda un hueco de más de 200px. */
.frase-destacada:last-child {
  margin-bottom: 0;
}

/* Y cuando es lo PRIMERO del tramo (como en "Floreciendo" o "El
   alimento también es información"), tampoco le hace falta su margen
   de entrada: sin esto, el texto arrancaba 48px más abajo que el
   nombre del tramo en la columna del margen, y los dos quedaban
   desalineados en el primer renglón. */
.frase-destacada:first-child {
  margin-top: 0;
}

/* Texto de columna estrecha: Montserrat 16px/1.70, color de lectura.
   Para columnas angostas (ej. dentro de una tarjeta o al lado de una
   imagen), donde 17px se sentiría apretado. */
.texto-columna-estrecha {
  font-size: 16px;
  line-height: 1.70;
  color: var(--texto-lectura);
}

/* Lema de portada / Nombre de la página (Nivel 1 de título, §3.1): una
   sola línea de versalitas por página, arriba, con su filete dorado.
   Montserrat 500, 16px, interletraje 0.30em, interlínea 1.70, Verde
   Salvia — la ÚNICA excepción de contraste del sitio (§2.2: 3.36:1).
   Es decorativa: en Inicio el lema ya está repetido en el emblema; en
   las demás páginas el nombre también lo dicen el menú y la pestaña. */
.nombre-pagina {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  line-height: 1.70;
  color: var(--verde-salvia);
}

/* El filete dorado que va debajo del nombre de la página (§3.1: "arriba,
   con su filete dorado"). Sus medidas exactas (240px de ancho, 2px de
   alto, 10px de margen) no están en la prosa de la Hoja de Valores
   —que sólo mide aparte el filete DEL SUMARIO (1px, §3.1bis)— pero sí
   están medidas en las 4 páginas HTML que acompañan al documento, que
   es la fuente oficial cuando la prosa no llega al detalle. */
.filete-rotulo {
  width: 240px;
  max-width: 34%;
  height: 2px;
  background: var(--dorado-laton);
  border: 0;
  margin: 10px 0 var(--aire-filete-siguiente);
}

/* Nombre en la barra: Libre Baskerville 18px, interlínea 1.00, Vino
   Magnolia. */
.marca-nombre {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 18px;
  line-height: 1.00;
  color: var(--vino-magnolia);
}

/* Enlace dentro del texto: hereda la familia y el tamaño del texto que
   lo rodea (no trae los suyos propios); color Vino. Ya cubierto por la
   regla general `a` de arriba — esta clase queda como referencia de
   la fila de la tabla, no añade nada nuevo. */

/* Botones — ver bloque "§3.3 · Estados" más abajo para reposo/hover.
   OJO: la tabla de §3 trae DOS filas distintas para botones, con
   interletraje distinto:
     Botones (el principal, "Conocer el programa")  0.18em · texto #F7F4EF
     Botón de contacto (barra)                       0.10em · texto #616D5A
   Antes tenía las dos compartiendo 0.18em — corregido: cada uno abajo
   trae su propio interletraje y color. Lo que SÍ comparten (family,
   tamaño, display, tamaño táctil) va aquí. El uppercase, igual que en
   el menú y el mapa del pie, no viene en una columna de "caja" de la
   tabla — es una inferencia por consistencia visual, a confirmar. */
.boton,
.contacto {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* §6.2: objetivo táctil mínimo */
  padding: 0 22px;
  transition: background .2s, color .2s, border-color .2s;
}

/* --- §3.3 · Estados (reposo / hover) ------------------------------------
   Cuatro respuestas y ninguna más:
   1) Apartado del menú y mapa del pie: sin subrayado en reposo, filete
      dorado debajo al pasar el cursor.
   2) Enlace dentro del texto: ya resuelto arriba en la regla `a`.
   3) Botón principal ("Conocer el programa"): relleno Verde de bloque,
      letra Texto sobre verde, en reposo; al pasar el cursor se vacía
      (fondo transparente, borde y letra en Verde de bloque).
   4) Botón de contacto (la barra): de contorno en reposo (el movimiento
      contrario); al pasar el cursor se rellena.
   Transición: 0.2s en los cuatro casos — "más lento se siente pesado,
   instantáneo no se percibe como respuesta".
   El relleno se reserva para el botón principal; dos llamadas a la
   acción en la misma página se anulan (§3.5), así que el botón vive
   una sola vez por página, en el cierre.
   ------------------------------------------------------------------- */
/* Botón principal ("Conocer el programa"): fila "Botones" de §3 —
   letra #F7F4EF (Crema Orgánico). ANTES tenía --texto-sobre-verde
   (#EFEDE6) por error — es un color parecido pero es el de "Texto
   sobre verde" del PIE, no el de los botones. Ya corregido. */
.boton {
  letter-spacing: 0.18em;
  background: var(--verde-bloque);
  color: var(--crema-organico);
  border: 1px solid var(--verde-bloque);
}

.boton:hover {
  background: transparent;
  color: var(--verde-bloque);
}

/* Botón de contacto (la barra): fila "Botón de contacto (barra)" de
   §3 — interletraje 0.10em (no 0.18em).
   CORREGIDO — Ronda 4, punto 1: era de contorno y se confundía con el
   fondo crema de la barra; es el único modo de contacto de todo el
   sitio y pasaba desapercibido. Pasa a relleno, igual que el botón
   principal — en las seis páginas, porque es una sola regla
   compartida. Al pasar el cursor se vacía: el movimiento contrario,
   ahora al revés de como era antes. */
.contacto {
  letter-spacing: 0.10em;
  background: var(--verde-bloque);
  color: var(--crema-organico);
  border: 1px solid var(--verde-bloque);
}

.contacto:hover {
  background: transparent;
  color: var(--verde-bloque);
}

/* El renglón debajo de un botón: cuenta qué pasa al pulsar, va debajo,
   nunca arriba. Montserrat 300, 13px, cursiva, interlínea 1.6, Gris de
   notas (4.97:1 sobre crema). Aire sobre él: 14px normalmente, 10px
   dentro de una tarjeta de puerta. */
.nota-boton {
  display: block;
  margin-top: 14px;
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris-notas);
}

/* =====================================================================
   §4 · RETÍCULA
   Bloque de contenido de 1120px centrado. Dentro, el nombre del tramo
   va en una columna de 230px a la izquierda y el texto corre a su
   lado sin pasar de 640px (columna de lectura). En teléfono el ladillo
   sube arriba del texto y todo pasa a una columna.
   ===================================================================== */
.ancho {
  max-width: var(--ancho-bloque);
  margin: 0 auto;
  padding: 0 var(--margen-escritorio);
}

@media (max-width: 760px) {
  .ancho {
    padding: 0 var(--margen-telefono);
  }
}

/* Un "tramo" del sitio: corresponde a una sección del documento de
   Textos v2.3 y NO se parte en tramos más chicos (§3.2). Grid de dos
   columnas: nombre del tramo (230px) + cuerpo, separadas por 64px. */
.tramo {
  display: grid;
  grid-template-columns: var(--col-ladillo) 1fr;
  gap: var(--gap-ladillo);
  align-items: start;
}

@media (max-width: 760px) {
  .tramo {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.tramo .col {
  max-width: var(--col-lectura);
}

/* Una banda de Arena por página, en el tramo principal — nunca como
   recuadro alrededor de una imagen, SIEMPRE A TODO EL ANCHO (de
   viewport, no del bloque de 1120px), con el texto encima (§3.2,
   penúltimo párrafo). Por eso es un envoltorio aparte, sin max-width
   propio, y el `.tramo.ancho` va ANIDADO adentro para centrar el
   texto — si se aplican las dos clases al mismo elemento, el fondo
   queda encerrado en los 1120px y dos verdes casi iguales se leen
   como un borde, justo lo que el documento pide evitar. */
/* CORREGIDO — Ronda 3, punto 6: el relleno inferior de 160px hacía
   que el color de la banda siguiera varios centímetros después de
   que terminaba su texto. "La banda cierra con el contenido": el
   relleno inferior baja a --paso-bloque (48px, sólo el aire mínimo
   entre el texto y el borde de color) y el aire de "entre secciones"
   (160px) se mueve DESPUÉS de la banda, como margin-top del tramo
   que sigue — así ese aire queda en Crema, no pintado de Arena. */
.banda-arena {
  background: var(--banda-arena);
  padding: var(--paso-seccion) 0 var(--paso-bloque);
}

/* --- Responsivo: móvil primero en la práctica ---------------------------
   Aunque la Hoja de Valores no dice literalmente "prioriza el
   teléfono", sí trae reglas propias para teléfono en varios apartados
   (§4 márgenes, §6 altura de barra y emblema, §6.1 el menú completo,
   §6.2 objetivos táctiles, §10 verificado desde 360px). Esta sección
   agrupa los ajustes de aire vertical que penden de esas reglas. */
@media (max-width: 760px) {
  /* CORREGIDO — 25/09/2026: en teléfono, el relleno superior original
     (112px) dejaba muy poco aire antes del nombre de tramo de adentro
     (ej. "La metamorfosis"). Subir el padding-top a 160 y luego a
     130px resolvía el aire ANTES del nombre, pero todo ese aire
     quedaba adentro del color — el texto de crema seguía llegando
     hasta pegado al cambio de color. Eder pidió repartirlo: un poco
     de margen ANTES de que entre el color, y el resto ya adentro. Se
     reparte 40px de margen (crema) + 90px de relleno (ya en Arena) =
     los mismos 130px de antes, no es un aumento. Ninguno de los dos
     es uno de los cuatro pasos de §5 — es un ajuste fino confirmado
     visualmente para este caso. */
  .banda-arena {
    margin-top: 40px;
    padding: 90px 0 var(--paso-bloque);
  }
}

/* La sección que sigue a una banda de arena (§ punto 6 de la Ronda 3):
   el aire de "entre secciones" vive aquí, ya en Crema, no dentro de la
   banda. En escritorio son 160px; en teléfono, 160px de salida más los
   48px de la propia banda sumaban 208px — demasiado aire antes de que
   arranque el siguiente tramo. Baja a 112px en teléfono. Se usa en
   index.html #puertas, el-proyecto.html #principios, los-programas.html
   #rigor y quien-esta-detras.html #floreciendo. */
.tras-banda {
  margin-top: var(--paso-seccion);
}

@media (max-width: 760px) {
  .tras-banda {
    margin-top: var(--paso-tramo);
  }
}

/* Apertura de página (Textos v2.3: portada de Inicio, o el bloque de
   arriba en las demás páginas): el aire bajo la barra hasta el primer
   texto es 112px (§5) MÁS la altura de la barra, que en teléfono baja
   de 80px a 64px (§6) — sin esta media query, el hueco de arriba
   queda fijo al valor de escritorio y se ve excesivo en el teléfono. */
.apertura {
  padding-top: calc(80px + var(--aire-barra-texto));
}

@media (max-width: 760px) {
  .apertura {
    padding-top: calc(64px + var(--aire-barra-texto));
  }
}

/* =====================================================================
   §5 · AIRE VERTICAL — ver variables --paso-* declaradas en :root.
   Aplicación práctica: separación entre tramos consecutivos dentro de
   la misma página, y entre secciones que cambian de fondo/registro.
   ===================================================================== */
.tramo + .tramo {
  margin-top: var(--paso-tramo);
}

.seccion {
  padding: var(--paso-seccion) 0;
}

/* =====================================================================
   §6 · LA BARRA SUPERIOR
   Altura 80px en escritorio (64px en teléfono ≤760px), fija, fondo
   Crema Orgánico al 97% con desenfoque. Filete inferior 1px, Arena
   Suave al 80%. Se oculta al bajar, reaparece al subir (JS, se añade
   por página). Apartados: Los programas · El proyecto · Quién está
   detrás · Seminarios y talleres · botón Escríbeme. Preguntas
   frecuentes NO va en la barra — se llega desde el pie y desde el
   enlace que cierra Los programas.
   ===================================================================== */
.barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 var(--margen-escritorio);
  background: rgba(247, 244, 239, .97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(221, 199, 172, .8); /* Arena Suave al 80% */
  transition: transform .2s ease;
}

@media (max-width: 760px) {
  .barra {
    height: 64px;
    padding: 0 var(--margen-telefono);
  }
}

.barra.oculta {
  transform: translateY(-100%);
}

/* Emblema: 56×56px escritorio, 46×46px teléfono. */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.marca img {
  width: 56px;
  height: 56px;
  display: block;
}

@media (max-width: 760px) {
  .marca img {
    width: 46px;
    height: 46px;
  }
}

/* Apartado del menú: sin subrayado en reposo, filete dorado debajo al
   pasar el cursor (§3.3). Apartado de la página actual, en Vino.
   AVISO: la tabla de §3 no tiene columna de "caja" (mayúsculas o no)
   para la fila "Menú" — el uppercase de abajo lo puse por consistencia
   con las dos filas que SÍ dicen "versalitas" explícitamente (Nombre
   de la página en §3.1, y los apartados del menú de teléfono en
   §6.1) y con lo que vi en la muestra del cliente. No es un dato que
   el documento diga en blanco y negro para el menú de escritorio. */
.barra nav {
  display: flex;
  gap: 26px;
}

/* §6.2: "Todo lo que se toca mide 44px de alto como mínimo" — es una
   regla general, no sólo de la lista de ejemplos que trae la sección
   (y el propio §6 confirma que el menú completo debe usarse con el
   dedo en iPad horizontal, 1180px). Antes esto medía 31px: la
   auditoría lo encontró en las 6 páginas. */
.barra nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.70;
  color: var(--azul-profundo);
  text-decoration: none;
  white-space: nowrap; /* §6: ningún apartado se parte en dos renglones */
  border-bottom: 1px solid transparent;
}

.barra nav a:hover {
  border-bottom-color: var(--dorado-laton);
}

.barra nav a.aqui {
  color: var(--vino-magnolia);
}

/* Botón de contacto (Escríbeme): su tipografía/color/reposo/hover ya
   están definidos arriba, junto con .boton (ver "§3.3 · Estados"). De
   contorno, no relleno — el relleno se reserva para "Conocer el
   programa" (§6, §3.5). */

/* Botón de hamburguesa: sólo visible ≤1060px (ver breakpoints abajo).
   44×44px (§6.2, objetivo táctil). */
.hamb {
  display: none;
  width: 44px;
  height: 44px;
  font-size: 22px;
  color: var(--verde-bloque);
  background: none;
  border: 0;
  cursor: pointer;
}

/* --- Puntos de quiebre de la barra (§6) ---------------------------------
   ≥1320px       menú completo, interletraje 0.10em
   1061–1320px   menú completo, separación e interletraje reducidos
   ≤1060px       el menú se pliega a la hamburguesa; el botón de
                 contacto se queda visible. (Medido: 4 apartados +
                 emblema + botón necesitan 952px)
   ≤460px        se oculta el texto "Magnolia Holos" de la barra y
                 queda sólo el emblema
   ------------------------------------------------------------------- */
@media (max-width: 1320px) and (min-width: 1061px) {
  .barra nav {
    gap: 18px;
  }

  .barra nav a {
    letter-spacing: 0.06em;
  }
}

@media (max-width: 1060px) {
  .barra nav {
    display: none;
  }

  .hamb {
    display: block;
  }
}

@media (max-width: 460px) {
  .marca-nombre {
    display: none;
  }
}

/* =====================================================================
   §6.1 · El menú de teléfono
   Aparece ≤1060px. Panel que baja desde la barra a todo el ancho (no
   una ventana flotante). Fondo Crema Orgánico SÓLIDO, sin transparencia
   — el texto de la página no debe verse detrás. Contiene los 4
   apartados (el botón Escríbeme se queda en la barra, fuera del panel).
   ===================================================================== */
.panel {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 19;
  padding: 0 var(--margen-telefono);
  background: var(--crema-organico);
  border-bottom: 1px solid rgba(221, 199, 172, .8);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}

@media (max-width: 760px) {
  .panel {
    top: 64px;
  }
}

.panel.abierto {
  visibility: visible;
  opacity: 1;
}

/* Apartados del panel: Montserrat 400, 16px, interletraje 0.10em,
   VERSALITAS (a diferencia del sumario, que va en caja normal), Azul
   Profundo. Alto mínimo 48px, centrado verticalmente (objetivo táctil
   mayor que el de escritorio: se toca con el dedo, no con el cursor). */
.panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--azul-profundo);
  text-decoration: none;
  border-top: 1px solid rgba(221, 199, 172, .5); /* Arena Suave al 50% */
}

.panel a:first-child {
  border-top: 0;
}

.panel a.aqui {
  color: var(--vino-magnolia);
}

/* Mientras el panel está abierto, la página de atrás no se desplaza
   (evita que quien lo abrió pierda el lugar donde iba leyendo). Esta
   clase la añade el script al <body>. */
body.sin-scroll {
  overflow: hidden;
}

/* =====================================================================
   §7 · LA ONDA Y EL CAUCE
   El mismo elemento en dos estados. Aparecen EXACTAMENTE dos veces por
   página y sólo en estos dos lugares — nunca entre secciones.
   1) La onda, al cerrar la apertura: trazo de 2px en Verde de bloque,
      sin relleno.
   2) El cauce, al cerrar el bloque verde del pie: forma rellena en
      Verde de bloque, 92px de alto.
   Las coordenadas SVG exactas van en el HTML de cada página (no en el
   CSS), tal como las mide el documento:
     onda:  viewBox="0 0 1440 46"
            d="M0 30 C 220 6, 420 44, 700 26 S 1180 4, 1440 24"
            stroke="#616D5A" stroke-width="2" fill="none"
     cauce: viewBox="0 0 1440 92"
            d="M0 0 H1440 V22 C 1210 74, 980 -8, 700 26 S 250 82, 0 40 Z"
            fill="#616D5A"
   ===================================================================== */
.onda {
  display: block;
  width: 100%;
  height: auto;
}

.cauce {
  display: block;
  width: 100%;
  height: 92px;
  margin-top: -1px; /* cierra cualquier línea de subpíxel contra el pie */
}

/* =====================================================================
   §8 · EL PIE DE PÁGINA — igual en las 6 páginas.
   Fondo Verde de bloque. Aire: 80px arriba, 48px abajo. Contenido:
   mapa del sitio · marca y contacto · aviso legal · derechos y enlaces
   legales. Cierra con el cauce de §7.
   ===================================================================== */
.pie {
  position: relative; /* ancla de la banda de textura de magnolia */
  overflow: hidden;
  background: var(--verde-bloque);
  color: var(--texto-sobre-verde);
  padding: 80px var(--margen-escritorio) 48px;
}

/* CORREGIDO — Lista de Cambios Ronda 3, punto 5: el friso floral del
   pie se retira. El emblema del proyecto es una magnolia, no un loto,
   y el pie ya cierra con el cauce; cambios en elementos de identidad
   se consultan antes de aplicarlos, así que en vez de rehacer el
   dibujo se quita por completo (ver el SVG que se eliminó del HTML). */

/* Mapa del sitio: 7 destinos en orden de jerarquía — Inicio · El
   proyecto · Quién está detrás · Los programas · Seminarios y talleres
   · Para afiliados · Preguntas frecuentes. Las 5 páginas primero, en el
   mismo orden que la barra; los 2 destinos que viven dentro de otra
   página, al final. Montserrat 13px, interletraje 0.10em, interlínea
   1.70, Texto sobre verde. Separado del resto por un filete de 1px en
   Texto sobre verde al 28%. Cada enlace mide 44px de alto (§6.2).
   Mismo aviso que en ".barra nav a": la tabla no especifica "caja"
   para esta fila; uppercase puesto por consistencia, a confirmar. */
.mapa-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(239, 237, 230, .28);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.70;
}

.mapa-pie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto-sobre-verde);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mapa-pie a:hover {
  border-bottom-color: var(--dorado-laton);
}

/* Texto del pie (marca y contacto): Montserrat 15px/1.75, Texto sobre
   verde. */
.pie-texto {
  font-size: 15px;
  line-height: 1.75;
  color: var(--texto-sobre-verde);
}

/* CORREGIDO — Lista de Cambios Ronda 3, punto 1: el correo del pie es
   el único canal de contacto del sitio y se leía en Vino sobre el
   verde del pie (1.81:1, heredado de la regla general `a`). Va en
   Crema Orgánico, subrayado (ya lo trae `a` por defecto) — 4.98:1. */
.pie-texto a {
  color: var(--crema-organico);
}

/* Aviso legal del pie: Montserrat 13px/1.75. CORREGIDO — Ronda 3,
   punto 2: al 80% de opacidad sobre Texto sobre verde el aviso daba
   3.6:1, por debajo del mínimo de 4.5. Pasa a Crema Orgánico sin
   opacidad reducida (4.98:1); el tamaño de 13px ya lo distingue del
   texto de marca sin necesitar además una opacidad menor. */
.pie-legal {
  font-size: 13px;
  line-height: 1.75;
  color: var(--crema-organico);
}

.pie-legal a {
  color: var(--crema-organico);
}

/* =====================================================================
   §3.4 · LISTAS, PREGUNTAS FRECUENTES Y HUECOS
   ===================================================================== */

/* Lista con etiqueta — para principios, módulos, pilares y los seis
   apoyos. Etiqueta: Montserrat 500, 17px, Azul Profundo, en su propio
   renglón. Descripción: Montserrat 300, 16px, interlínea 1.65, Texto
   de lectura. Cada entrada separada por un filete de 1px en Arena
   Suave al 90%, arriba de cada una y debajo de la última. Relleno
   vertical: 20px arriba y abajo. */
.lista-etiqueta {
  list-style: none;
}

.lista-etiqueta li {
  padding: 20px 0;
  border-top: 1px solid rgba(221, 199, 172, .9);
}

.lista-etiqueta li:last-child {
  border-bottom: 1px solid rgba(221, 199, 172, .9);
}

.lista-etiqueta .etiqueta-lista {
  display: block;
  margin-bottom: 4px;
}

.lista-etiqueta .descripcion {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto-lectura);
}

/* Lista simple — para enumeraciones sin descripción ("Qué te llevas",
   "Este programa es para ti si..."). Marca: filete dorado de 8×1px, NO
   un punto ni un icono. Sangría del texto: 22px. Separación entre
   puntos: 14px.

   CORREGIDO — Ronda 3, punto 17: el filete se leía como "un guion
   suelto" porque vivía pegado al borde izquierdo (left:0), dejando
   14px de aire antes del texto a 22px — casi el doble de lo que separa
   dos palabras. Se acerca a 4px del texto (left: 10px), sin tocar la
   sangría de 22px, que sí es una medida de la Hoja de Valores. */
.lista-simple {
  list-style: none;
}

.lista-simple li {
  position: relative;
  padding-left: 22px;
}

.lista-simple li + li {
  margin-top: 14px;
}

.lista-simple li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--dorado-laton);
}

/* Preguntas frecuentes — con <details>/<summary> nativo, sin
   JavaScript. Cada pregunta abre/cierra por separado; pueden estar
   varias abiertas; estado inicial: todas cerradas. Pregunta: Montserrat
   500, 17px, Azul Profundo. Respuesta: Montserrat 300, 16px, interlínea
   1.7, Texto de lectura, a 12px de la pregunta. Señal "+" que pasa a
   "−", 20px, Verde de bloque, al extremo derecho del renglón. Filetes
   de 1px en Arena Suave al 90%, arriba de cada pregunta y debajo de la
   última. Relleno vertical: 18px. En su propia página (Preguntas
   frecuentes) la lista va al ancho del bloque (1120px), no a la
   columna de lectura — pero las respuestas sí se quedan en 640px. */
.faq {
  list-style: none;
}

.faq details {
  padding: 18px 0;
  border-top: 1px solid rgba(221, 199, 172, .9);
}

.faq details:last-child {
  border-bottom: 1px solid rgba(221, 199, 172, .9);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px; /* §6.2: el renglón completo abre y cierra, no sólo el signo */
  cursor: pointer;
  list-style: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--azul-profundo);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  color: var(--verde-bloque);
}

.faq details[open] summary::after {
  content: "\2212"; /* signo menos */
}

.faq .respuesta {
  max-width: var(--col-lectura);
  margin-top: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto-lectura);
}

/* Hueco reservado — para una sección que todavía no tiene contenido
   (hoy: los testimonios). Se distingue A PROPÓSITO de la frase
   destacada (que lleva filete dorado): el hueco lleva un filete de 2px
   en Arena Suave al 90% a la izquierda, con 26px de separación. No es
   contenido, es un lugar apartado — por eso NO se maqueta con texto de
   ejemplo (Lista de Cambios, punto 5). */
.hueco {
  padding-left: 26px;
  border-left: 2px solid rgba(221, 199, 172, .9);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--gris-notas);
}

/* =====================================================================
   §3.5 · EL RECUADRO DE AVISO
   Dice algo sobre el sitio mismo (que el programa no abre todavía, que
   hay forma de enterarse) sin volverlo titular ni anuncio. Aparece en
   la apertura de "Conquistando la Salud" y de "Preguntas frecuentes", y
   en la sección de las tres puertas de Inicio (ahí con el campo de
   correo). Ancho máximo 640px (columna de lectura). Filete de 1px en
   Arena Suave al 90% arriba, con 30px de aire sobre él y 24px debajo.
   36px hasta el bloque siguiente. Texto: Montserrat 300, 17px,
   interlínea 1.7, Azul Profundo. El dato que encabeza: Montserrat 500,
   mismo renglón, mismo tamaño (no versalitas — esa excepción ya la
   gastó el rótulo de la página). Enlace de dentro: Vino, subrayado.
   NUNCA lleva fondo de color ni caja (se convertiría en banner y
   competiría con la banda de arena) ni botón (el botón vive una sola
   vez por página, en el cierre).
   ===================================================================== */
.aviso {
  max-width: var(--col-lectura);
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(221, 199, 172, .9);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--azul-profundo);
}

.aviso + * {
  margin-top: 36px;
}

.aviso .dato {
  font-weight: 500;
}

.aviso a {
  color: var(--vino-magnolia);
}

/* Campo de correo dentro del aviso (sólo en la sección de las tres
   puertas de Inicio). Borde en Arena Suave — §2 dice explícitamente
   que ese es su uso ("filetes, bordes de campos de formulario"). */
.aviso input[type="email"] {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid var(--arena-suave);
  background: var(--crema-organico);
  color: var(--texto-lectura);
  min-height: 44px;
}

.aviso button {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 22px;
  background: var(--verde-bloque);
  color: var(--texto-sobre-verde);
  border: 1px solid var(--verde-bloque);
  cursor: pointer;
}

/* =====================================================================
   LAS TRES PUERTAS — Textos v2.3 §4.12 y §3bis.3 bloque 12
   CORREGIDO en auditoría: iban apiladas en una sola columna y sin su
   filete, así que no se leían como tres puertas sino como tres párrafos
   seguidos. El documento pide "tres bloques de igual peso visual,
   aunque sólo el primero tenga botón", y la Lista de Cambios 38 fija el
   tratamiento: "sin borde. Un filete arriba, como en la muestra de
   Inicio".

   El grosor del filete (2px), su separación al texto (26px) y el hueco
   entre columnas (40px) no están en la prosa de la Hoja de Valores,
   pero sí medidos en la muestra entregada, que es la fuente cuando la
   prosa no llega al detalle. La separación vertical al apilarse sí es
   uno de los cuatro pasos autorizados de §5: 48px.

   Se pliegan a una columna en 1060px, el mismo corte de la barra (§6),
   las cifras y el retrato — no en 820 como la muestra. Por debajo de
   ese ancho el ladillo todavía ocupa su columna de 230px y las tarjetas
   quedarían en 138px, demasiado angostas para leerse.

   NOTA: tres filetes dorados en la misma pantalla rozan el punto 18
   ("un solo filete dorado por pantalla"). Van en una sola fila, así que
   se leen como un mismo trazo segmentado y no como tres remates
   repetidos — que es como lo resuelve la propia muestra. Queda anotado
   en la contradicción 5 de la auditoría.
   ===================================================================== */
.puertas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--paso-bloque) 40px;
  margin-top: var(--paso-bloque);
}

@media (max-width: 1060px) {
  .puertas {
    grid-template-columns: 1fr;
  }
}

.puerta {
  min-width: 0;
  padding-top: 26px;
  border-top: 2px solid var(--dorado-laton);
}

/* =====================================================================
   §9 · IMÁGENES
   El tamaño lo decide el trabajo que hace la imagen: si es el tema de
   su tramo, ocupa la columna de lectura completa; si acompaña, va al
   margen y más chica. Resolución mínima: el doble del tamaño mostrado.
   Alt obligatorio en todas. NUNCA: recorte en círculo, sombra, esquinas
   redondeadas, marco grueso ni filtro.
   ===================================================================== */

/* Lámina botánica: 640px de ancho (= columna de lectura), con su pie
   debajo — obligatorio. Montserrat 13px, Gris de notas, alineado a la
   orilla izquierda de la imagen. */
/* --- La lámina del cauce ------------------------------------------------
   Textos v2.3 §3bis.3 bloque 6: "La ilustración del cauce es la pieza
   central del sitio. Una sola lámina, línea fina, Verde Salvia y
   Arena." §4.6: "Es lo más memorable del sitio." §13 la asigna a
   Diseño como pendiente.

   Dibujada, no generada (Manual v3.1 §9), con formas vectoriales y no
   con imágenes (§7.1). Cada regla de §7.2 está aplicada:
   · Canal en perspectiva CENITAL, abierto por los dos extremos —
     llega y sale del encuadre. Nunca cerrado abajo: en vista cenital
     no hay fondo que cerrar, que es la forma más segura de no volver
     a dibujar el "recipiente" que la v3.0 rechazó.
   · La amplitud se muestra COMPARANDO DOS ANCHOS, no dos niveles:
     dos cauces con el mismo caudal, uno estrecho y uno ancho.
   · Lo que llega viaja CON la corriente (las formas dentro del agua),
     no se acumula como sedimento.
   · La salida se dibuja siempre, en los dos cauces — "es la mitad
     del argumento".
   · El desbordamiento es agua saliéndose POR EL BORDE, no un
     recipiente lleno. Y el cauce sigue entero: desbordarse no es
     romperse.
   Paleta literal de §7.2: línea en Verde Salvia, agua en Salvia claro
   (#DFE6DA, tinte autorizado de Manual §3.3), salida en Dorado,
   desbordamiento en Vino. Sin relleno pleno, sin degradados ni
   sombras (§5 y §7.1). Grosor de línea dentro del rango 1–2.5 de §7.1.

   PENDIENTE: Manual §9 pide consultar antes de producir una pieza
   identitaria NUEVA. Ésta no es nueva —está nombrada y encargada—,
   pero conviene que Lily la apruebe antes de publicar.
   ---------------------------------------------------------------------- */
.lamina-cauce {
  display: block;
  width: 100%;
  height: auto;
}

.lamina-cauce .rotulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 15px;
  fill: var(--azul-profundo);
}

.lamina-cauce .nota {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 13px;
  fill: var(--texto-lectura);
}

/* Al quitarle el margen de fábrica al <figure> hay que devolverle su
   aire con una medida autorizada: §5 fija 48px para "del pie de imagen
   al texto", y el mismo paso sirve para entrar a la imagen. */
.lamina {
  max-width: 640px;
  margin: var(--paso-bloque) 0;
}

.lamina img {
  display: block;
  width: 100%;
  height: auto;
}

.lamina figcaption {
  margin-top: 8px;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris-notas);
}

/* Retrato: 300px de ancho, vertical, al costado del texto (§9). */
.retrato {
  max-width: 300px;
  flex: none;
}

.retrato img {
  display: block;
  width: 100%;
  height: auto;
}

/* Envoltorio para "retrato al costado del texto" — el documento da el
   ancho del retrato (300px) pero no el nombre ni las medidas de este
   patrón de pareja imagen+texto, así que lo resuelvo con un flex
   simple: en escritorio, uno al lado del otro; en teléfono, apilados
   (el retrato arriba) — igual que el resto de la retícula, que en
   teléfono pasa todo a una columna (§4). */
.con-retrato {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* El párrafo que acompaña al retrato tiene que poder encogerse: sin
   `min-width: 0` un elemento flexible no baja de su contenido mínimo y
   empuja hacia fuera. */
.con-retrato > p {
  min-width: 0;
}

/* CORREGIDO en auditoría: apilaba a 760px, pero entre 760 y 1060 el
   ladillo sigue ocupando su columna de 230px y al texto le quedaban
   22px al lado del retrato de 300px — la página desbordaba 30px a
   768px de ancho. El corte pasa a 1060px, el mismo de la barra (§6) y
   el de las cifras. */
@media (max-width: 1060px) {
  .con-retrato {
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .retrato {
    max-width: 220px;
  }
}

/* Bloque de credenciales (§4.5 de Textos v2.3). CORREGIDO — Ronda 3,
   punto 23: era el único tramo de la página con un filete dorado
   encima; el resto (El origen, Floreciendo, Algo más de mí) no lleva
   ninguno. Se quita para que ningún tramo de esta página lo lleve —
   queda separado por el mismo aire de "entre tramos" que usa el
   resto. */
.credenciales {
  padding-top: 0;
}

/* Fila de cifras destacadas (§4.5 de Textos v2.3: "cuatro datos para
   destacar visualmente"). El número usa la misma familia que los
   titulares (Libre Baskerville); no hay un tamaño de "cifra" definido
   para el sitio en la Hoja de Valores, así que tomé un tamaño
   intermedio entre el titular de tramo (24px) y el de portada (42px)
   — a confirmar si quieren algo más grande.

   CORREGIDO — Ronda 3, punto 24: en 4 columnas, "+120 fuentes" partía
   en dos renglones mientras las otras tres cifras cabían en uno. La
   causa no es de responsivo: esta lista vive dentro de la columna de
   lectura (--col-lectura, 640px máx.), así que 4 columnas miden 136px
   cada una en CUALQUIER ancho de pantalla — muy poco para "+120
   fuentes" a 32px, quepa o no la página entera. Pasa a 2 columnas
   (2×2) siempre: con 304px por columna la cifra más larga cabe sin
   partirse, y ya no hace falta el corte de responsivo aparte que
   había antes en 1060px. */
.cifras {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: var(--paso-bloque);
}

.cifras li {
  min-width: 0;
}

.cifras .numero {
  display: block;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--verde-salvia);
}

.cifras .etiqueta {
  display: block;
  margin-top: 6px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: var(--texto-lectura);
}

/* =====================================================================
   §11 · ACCESIBILIDAD — mínimos que se respetan en todo el sitio
   Texto normal: 4.5:1. Texto ≥24px (o ≥18.7px en negrita): 3.0:1.
   Elementos gráficos (filetes, bordes, la onda): 3.0:1. Combinaciones
   ya verificadas por el documento (no requieren ajuste, son referencia):
     Texto de lectura #3C4453 sobre crema        8.93:1
     Menú #1E2436 sobre crema                    14.07:1
     Texto del pie #EFEDE6 sobre #616D5A         4.66:1
     Titulares #7A8A71 sobre crema, ≥24px         3.36:1 ✓ (mínimo gráfico)
     La onda #616D5A sobre crema                  4.98:1
     Pies de imagen #6E695F sobre crema           4.90:1
     Texto sobre la banda de arena #3C4453/#F0E9DE 8.12:1
     Titulares sobre la banda #7A8A71/#F0E9DE      3.05:1
     Vino #6D2C4D sobre crema                      9.04:1
   ===================================================================== */