/* ============================================================
   Furari — hoja de estilos del sitio público
   furarijapon.com
   ============================================================

   Sigue la guía de identidad de marca (furari-identidad-de-marca.html).
   Los cuatro colores llevan su nombre japonés original para que se
   reconozcan de un vistazo:

     kinari  生成り  crema washi   fondo, el lienzo de todo
     ai      藍      índigo        texto y titulares, la tinta
     shu     朱      bermellón     acento, el punto. Con moderación
     sumi    墨      gris-índigo   texto secundario, pies, notas

   PRINCIPIOS DE LA GUÍA QUE ESTE CSS APLICA
   -----------------------------------------
   · Mucho aire. El espaciado es generoso a propósito: "el vacío también
     comunica sin prisa". Si algo parece demasiado separado, está bien.
   · Una idea por sección.
   · Formato frase siempre. No hay ni un text-transform: uppercase en los
     titulares; solo en las etiquetas pequeñas, que en la guía van así.
   · El bermellón nunca como fondo grande.

   ------------------------------------------------------------
   NOTA IMPORTANTE SOBRE EL BERMELLÓN Y LA ACCESIBILIDAD
   ------------------------------------------------------------
   El bermellón de marca (#C0563B) sobre el crema da un contraste de
   3,89:1. La norma WCAG AA exige 4,5:1 para texto normal, así que ese
   color NO se puede usar en textos pequeños: las etiquetas de sección y
   los enlaces quedarían por debajo del mínimo legible para personas con
   baja visión.

   La solución es un único tono derivado, --shu-texto (#AD4D35): el mismo
   bermellón un 10% más oscuro. Da 4,64:1, cumple AA y a simple vista es
   indistinguible del de marca.

     --shu        el color EXACTO de la guía. Solo para elementos NO
                  textuales: el punto, bordes, adornos, y texto de
                  gran tamaño (donde el mínimo baja a 3:1).

     --shu-texto  para texto pequeño en bermellón y para el botón
                  principal con texto crema encima.

   Es la única desviación de la paleta, y existe justo para poder
   respetarla en todo lo demás.
   ------------------------------------------------------------ */


/* ============================================================
   1. VARIABLES
   ============================================================ */

:root {
    /* --- Paleta washi --- */
    --kinari:       #F4EDE1;
    --ai:           #253449;
    --shu:          #C0563B;
    --sumi:         #3C4A5E;

    /* Bermellón accesible para texto. Ver la nota de la cabecera. */
    --shu-texto:    #AD4D35;

    /* Derivados, siempre a partir de los cuatro de arriba. */
    --linea:        rgba(37, 52, 73, .14);
    --linea-suave:  rgba(37, 52, 73, .07);
    --tarjeta:      rgba(255, 255, 255, .42);
    --tarjeta-viva: rgba(255, 255, 255, .72);
    --shu-veloA:    rgba(192, 86, 59, .08);
    --shu-veloB:    rgba(192, 86, 59, .25);

    /* --- Tipografía --- */
    /* Las familias se cargan autoalojadas desde fuentes.css. Las de
       respaldo son las que más se parecen entre las de sistema, para que
       el cambio al terminar la descarga no dé un salto brusco. */
    --serif:  'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:   'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --kana:   'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

    /* --- Ritmo vertical --- */
    /* Escala basada en 8px. Tener pocos valores y usarlos siempre es lo
       que hace que el espaciado parezca intencionado y no improvisado. */
    --e1: .5rem;
    --e2: 1rem;
    --e3: 1.5rem;
    --e4: 2rem;
    --e5: 3rem;
    --e6: 4.5rem;
    --e7: 7rem;

    /* --- Medidas ---
       Las tres van alineadas con la cabecera: el contenido ocupa lo mismo
       que la barra de navegación, de «Furari» a «Enlaces», en lugar de
       quedarse en una columna estrecha en el centro.

       --ancho-texto es algo menor a propósito, y solo lo usa el texto
       largo (páginas legales, «Sobre Furari», entradas del blog). No es
       por gusto: una línea de más de unos 90 caracteres obliga al ojo a
       hacer un salto largo al volver al principio de la siguiente, y se
       pierde el renglón con facilidad. A 820px con este cuerpo salen unos
       85, que es donde se lee cómodo. Los titulares, formularios y
       secciones sueltas sí van al ancho completo. */
    --ancho-texto:  820px;
    --ancho-pagina: 1040px;
    --ancho-ancho:  1040px;
    --radio:        12px;
    --radio-g:      16px;

    /* El navegador no debe inventarse un modo oscuro: la marca ES el
       crema washi. Sin esto, algunos navegadores invierten los controles
       de formulario y rompen el conjunto. */
    color-scheme: light;
}


/* ============================================================
   2. REINICIO
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* scroll-padding para que los anclajes no queden pegados al borde
       superior ni escondidos bajo la cabecera. */
    scroll-padding-top: var(--e5);
    -webkit-text-size-adjust: 100%;
}

/* El desplazamiento suave molesta o marea a quien tiene sensibilidad al
   movimiento, así que solo se activa si el sistema no pide lo contrario. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    background: var(--kinari);
    color: var(--ai);
    font-family: var(--sans);
    font-size: 1.0625rem;      /* 17px: la guía usa este cuerpo */
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Evita el salto horizontal si algún elemento se pasa de ancho. */
    overflow-x: hidden;
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Ni una sola declaración de fuente en mayúsculas para los titulares:
   la guía lo prohíbe explícitamente ("nunca todo en mayúsculas"). */
h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    /* Equilibra los saltos de línea para que no quede una palabra suelta
       en la última línea de un titular. */
    text-wrap: balance;
}

p, li {
    /* Evita las líneas huérfanas de una sola palabra. */
    text-wrap: pretty;
}

ul, ol {
    padding-left: 1.25em;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}


/* ============================================================
   3. ACCESIBILIDAD
   ============================================================ */

/* --- Enlace para saltar al contenido ---
   Invisible hasta que se le da el foco con el tabulador. Es lo primero
   que encuentra quien navega con teclado o lector de pantalla, y le
   ahorra tener que recorrer la cabecera entera en cada página. */
.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--e2) var(--e3);
    background: var(--ai);
    color: var(--kinari);
    border-radius: 0 0 var(--radio) 0;
    text-decoration: none;
}

.saltar:focus {
    left: 0;
}

/* --- Foco visible ---
   Nunca se elimina el indicador de foco: sin él, quien navega con teclado
   no sabe dónde está. Se usa :focus-visible para que el anillo aparezca al
   tabular pero no al hacer clic con el ratón. */
:focus-visible {
    outline: 3px solid var(--shu);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Texto solo para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Se respeta la preferencia del sistema de reducir el movimiento. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   4. ESTRUCTURA
   ============================================================ */

.envoltura {
    width: 100%;
    max-width: var(--ancho-pagina);
    margin-inline: auto;
    padding-inline: var(--e3);
}

.envoltura--texto  { max-width: var(--ancho-texto); }
.envoltura--ancha  { max-width: var(--ancho-ancho); }

/* Empuja el pie al fondo aunque la página tenga poco contenido. */
.pagina {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.contenido {
    flex: 1;
}

.seccion {
    padding-block: var(--e6);
}

.seccion + .seccion {
    border-top: 1px solid var(--linea);
}

.seccion--holgada { padding-block: var(--e7); }
.seccion--sin-borde { border-top: none; }


/* ============================================================
   5. EL PUNTO BERMELLÓN
   ============================================================
   La firma visual de la marca: un hinomaru en miniatura. Es un elemento
   decorativo, así que va con aria-hidden en el HTML y aquí no necesita
   cumplir contraste de texto. */

.punto {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--shu);
}

.punto--g { width: 11px; height: 11px; }
.punto--p { width: 6px;  height: 6px;  }


/* ============================================================
   6. TIPOGRAFÍA
   ============================================================ */

.kana {
    font-family: var(--kana);
    font-weight: 500;
}

.serif { font-family: var(--serif); }

/* --- Etiqueta de sección ---
   El patrón de la guía: punto + texto corto en versalitas espaciadas.
   Va en --shu-texto y no en --shu porque es texto pequeño. */
.etiqueta {
    display: flex;
    align-items: center;
    gap: var(--e1);
    margin-bottom: var(--e3);
    color: var(--shu-texto);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* --- Escala de titulares ---
   clamp() hace que el tamaño crezca con la ventana sin necesidad de media
   queries: mínimo, valor fluido, máximo. */
.titulo-hero {
    font-size: clamp(2.25rem, 1.4rem + 4.2vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -.015em;
}

.titulo-seccion {
    font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.1rem);
    margin-bottom: var(--e2);
}

.titulo-menor {
    font-size: 1.2rem;
    margin-bottom: var(--e1);
}

/* --- Texto de apoyo --- */
.entradilla {
    max-width: 34em;
    color: var(--sumi);
    font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
    line-height: 1.6;
}

.nota {
    color: var(--sumi);
    font-size: .875rem;
    line-height: 1.55;
}

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


/* ============================================================
   7. ENLACES
   ============================================================ */

a {
    color: var(--shu-texto);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color .15s ease;
}

a:hover {
    color: var(--ai);
}

/* Los enlaces dentro de texto corrido llevan subrayado siempre: el color
   por sí solo no basta para señalar un enlace a quien no distingue bien
   los colores. */
.prosa a,
p a {
    text-decoration: underline;
}


/* ============================================================
   8. BOTONES
   ============================================================ */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e1);
    padding: .85em 1.9em;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s ease;
    /* Área táctil mínima recomendada para el dedo. */
    min-height: 44px;
}

/* --- Botón principal ---
   Fondo bermellón con texto crema. Se usa --shu-texto y no --shu para que
   el texto encima llegue a 4,64:1. Es la única superficie de color de la
   marca, y es pequeña: la guía prohíbe el bermellón como fondo GRANDE. */
.boton--principal {
    background: var(--shu-texto);
    color: var(--kinari);
}

.boton--principal:hover {
    background: var(--ai);
    color: var(--kinari);
    transform: translateY(-1px);
}

/* --- Botón secundario --- */
.boton--suave {
    background: transparent;
    border-color: var(--linea);
    color: var(--ai);
}

.boton--suave:hover {
    border-color: var(--ai);
    background: var(--tarjeta);
    color: var(--ai);
}

.boton--bloque {
    display: flex;
    width: 100%;
}


/* ============================================================
   9. CABECERA
   ============================================================ */

.cabecera {
    padding-block: var(--e3);
    border-bottom: 1px solid var(--linea);
}

.cabecera__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    flex-wrap: wrap;
}

/* --- El wordmark ---
   Guía: "Furari" en Fraunces con el punto a la derecha, del mismo tamaño
   que la altura de la i. Los estilos concretos están junto al componente,
   en app/views/partials/logo.php, para que sustituirlo el día que llegue
   el logo definitivo sea tocar un único fichero. */
.marca {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ai);
    text-decoration: none;
    line-height: 1;
}

.marca:hover { color: var(--ai); }

.marca--grande { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem); }

/* --- Navegación --- */
.nav {
    display: flex;
    align-items: center;
    gap: var(--e3);
    flex-wrap: wrap;
}

.nav a {
    color: var(--sumi);
    font-size: .95rem;
    text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
    color: var(--ai);
}

.nav a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: .3em;
}


/* ============================================================
   10. PIE
   ============================================================ */

.pie {
    margin-top: var(--e6);
    padding-block: var(--e5);
    border-top: 1px solid var(--linea);
    color: var(--sumi);
    font-size: .9rem;
}

.pie__fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--e4);
    flex-wrap: wrap;
}

.pie__firma {
    display: flex;
    align-items: center;
    gap: var(--e1);
    font-size: .875rem;
    letter-spacing: .06em;
}

.pie__enlaces {
    display: flex;
    gap: var(--e3);
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.pie__enlaces a {
    color: var(--sumi);
    text-decoration: none;
    font-size: .875rem;
}

.pie__enlaces a:hover {
    color: var(--ai);
    text-decoration: underline;
}

.pie__legal {
    margin-top: var(--e3);
    padding-top: var(--e3);
    border-top: 1px solid var(--linea-suave);
    font-size: .8rem;
    color: var(--sumi);
}


/* ============================================================
   11. TARJETAS
   ============================================================
   El patrón visual de la guía: un blanco muy tenue sobre el crema, con
   borde fino. Da profundidad sin romper la calma del fondo. */

.tarjeta {
    padding: var(--e3);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.rejilla {
    display: grid;
    gap: var(--e2);
}

.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }


/* ============================================================
   12. FORMULARIOS
   ============================================================ */

.campo {
    margin-bottom: var(--e3);
}

.campo__etiqueta {
    display: block;
    margin-bottom: var(--e1);
    font-size: .95rem;
    font-weight: 500;
}

.campo__ayuda {
    display: block;
    margin-top: var(--e1);
    color: var(--sumi);
    font-size: .82rem;
}

.entrada {
    width: 100%;
    padding: .8em 1em;
    background: var(--tarjeta-viva);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    color: var(--ai);
    font-size: 1rem;
    min-height: 48px;
    transition: border-color .15s ease, background-color .15s ease;
}

.entrada::placeholder {
    color: var(--sumi);
    opacity: .6;
}

.entrada:hover {
    border-color: rgba(37, 52, 73, .28);
}

.entrada:focus {
    outline: 3px solid var(--shu);
    outline-offset: 2px;
    border-color: var(--ai);
    background: #fff;
}

/* Campo con error. Además del color se marca con aria-invalid en el HTML:
   el color por sí solo no comunica nada a un lector de pantalla. */
.entrada[aria-invalid="true"] {
    border-color: var(--shu-texto);
    border-width: 2px;
}

textarea.entrada {
    min-height: 12rem;
    line-height: 1.6;
    resize: vertical;
}

/* --- Casilla de consentimiento ---
   Nunca se marca por defecto (lo exige el RGPD) y el área pulsable abarca
   todo el texto, no solo el cuadradito. */
.consentimiento {
    display: flex;
    align-items: flex-start;
    gap: .7em;
    margin-bottom: var(--e3);
    padding: var(--e2);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--sumi);
}

.consentimiento input[type="checkbox"] {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .12rem;
    accent-color: var(--shu-texto);
    cursor: pointer;
}

.consentimiento a {
    color: var(--shu-texto);
    text-decoration: underline;
}

/* --- Formulario de suscripción --- */
.suscripcion {
    max-width: 30rem;
}

.centrado .suscripcion {
    margin-inline: auto;
    text-align: left;
}


/* ============================================================
   13. AVISOS
   ============================================================
   Mensajes de éxito y de error. Llevan role="alert" o role="status" en el
   HTML para que un lector de pantalla los anuncie al aparecer, y un icono
   además del color, por la misma razón que en los campos con error. */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: .7em;
    margin-bottom: var(--e3);
    padding: var(--e2) var(--e3);
    border-radius: var(--radio);
    border: 1px solid;
    font-size: .95rem;
    line-height: 1.55;
    text-align: left;
}

.aviso--error {
    background: var(--shu-veloA);
    border-color: var(--shu-veloB);
    color: var(--ai);
}

.aviso--ok {
    border-color: var(--linea);
    color: var(--ai);
}

.aviso__icono {
    flex: none;
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.4;
}

.aviso--error .aviso__icono { color: var(--shu-texto); }


/* ============================================================
   14. PORTADA
   ============================================================ */

.hero {
    padding-block: var(--e7) var(--e6);
    text-align: center;
}

.hero__kana {
    font-family: var(--kana);
    font-size: clamp(3rem, 2rem + 5vw, 5rem);
    font-weight: 500;
    line-height: 1;
    color: var(--ai);
    margin-bottom: var(--e2);
}

.hero__definicion {
    max-width: 27rem;
    margin: var(--e2) auto 0;
    color: var(--sumi);
    font-size: 1rem;
}

.hero__cta {
    margin-top: var(--e5);
}

/* El tagline bajo el wordmark. */
.hero__lema {
    margin-top: var(--e4);
}

/* ------------------------------------------------------------
   Utilidades de separación
   ------------------------------------------------------------
   Un puñado mínimo de clases para los pocos casos en que un elemento
   necesita un margen distinto del que le da su contexto.

   Existen porque la política de seguridad del sitio (CSP) prohíbe los
   atributos style= en línea: sin 'unsafe-inline', un style="margin-top:2rem"
   escrito en el HTML lo bloquea el navegador y el espacio no se aplica.
   Escribirlo como clase es además más fácil de mantener. */

.separado      { margin-top: var(--e4); }
.separado-mas  { margin-top: var(--e5); }
.respira-abajo { margin-bottom: var(--e5); }

/* --- Bloque de captación --- */
.captacion {
    max-width: 34rem;
    margin-inline: auto;
    padding: var(--e4);
    border: 1px solid var(--linea);
    border-radius: var(--radio-g);
}


/* ============================================================
   15. HUB DE ENLACES  (/enlaces)
   ============================================================ */

.enlaces {
    display: grid;
    gap: var(--e2);
    max-width: 30rem;
    margin-inline: auto;
    list-style: none;
    padding: 0;
}

.enlaces__item a {
    display: flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e3);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    color: var(--ai);
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease,
                transform .18s ease;
}

.enlaces__item a:hover {
    border-color: var(--ai);
    transform: translateY(-2px);
}

.enlaces__texto {
    flex: 1;
    min-width: 0;
}

.enlaces__titulo {
    display: block;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
}

.enlaces__desc {
    display: block;
    margin-top: 2px;
    color: var(--sumi);
    font-size: .85rem;
    line-height: 1.45;
}

/* La flecha es decorativa: en el HTML va con aria-hidden. */
.enlaces__flecha {
    flex: none;
    color: var(--shu);
    font-size: 1.1rem;
}


/* ============================================================
   16. PROSA
   ============================================================
   Estilos del texto largo: páginas legales, "Sobre Furari" y el cuerpo de
   las entradas del blog. Es también el destino del HTML que genera
   app/core/Markdown.php, así que aquí están todos los elementos que ese
   parser puede producir. */

.prosa {
    max-width: var(--ancho-texto);
    color: var(--ai);
}

.prosa > * + * {
    margin-top: var(--e3);
}

.prosa h2 {
    margin-top: var(--e5);
    font-size: 1.55rem;
}

.prosa h3 {
    margin-top: var(--e4);
    font-size: 1.2rem;
}

.prosa h2 + *,
.prosa h3 + * {
    margin-top: var(--e2);
}

.prosa p {
    line-height: 1.75;
}

.prosa ul,
.prosa ol {
    padding-left: 1.4em;
}

.prosa li + li {
    margin-top: var(--e1);
}

.prosa blockquote {
    padding-left: var(--e3);
    border-left: 3px solid var(--shu);
    color: var(--sumi);
    font-family: var(--serif);
    font-size: 1.1rem;
}

.prosa blockquote p { line-height: 1.6; }

.prosa hr {
    margin-block: var(--e5);
    border: none;
    border-top: 1px solid var(--linea);
}

.prosa code {
    padding: .15em .4em;
    border: 1px solid var(--linea);
    border-radius: 5px;
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: .875em;
}

.prosa pre {
    padding: var(--e2);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    /* El código largo hace scroll dentro de su caja en lugar de ensanchar
       la página entera. */
    overflow-x: auto;
}

.prosa pre code {
    padding: 0;
    background: none;
    border: none;
}

.prosa figure {
    margin-block: var(--e4);
}

.prosa figure img {
    width: 100%;
    border-radius: var(--radio);
}

.prosa figcaption {
    margin-top: var(--e1);
    color: var(--sumi);
    font-size: .85rem;
    text-align: center;
}

/* Marcador de texto legal pendiente de redactar. Deliberadamente visible:
   tiene que cantar para que no se publique sin rellenar. */
.pendiente {
    display: block;
    padding: var(--e2) var(--e3);
    background: var(--shu-veloA);
    border: 1px dashed var(--shu-veloB);
    border-radius: var(--radio);
    color: var(--shu-texto);
    font-family: var(--sans);
    font-size: .875rem;
}


/* ============================================================
   17. BLOG  (v0.2, índice y entrada mínimos)
   ============================================================
   PUNTO DE EXTENSIÓN v1.0 ------------------------------------
   Aquí irán los estilos de los filtros (nombre, tag, likes) y del botón
   de "me gusta". El listado de abajo ya está preparado para convivir con
   una barra de filtros encima sin tener que rehacerse.
   ----------------------------------------------------------- */

.entradas {
    display: grid;
    gap: var(--e4);
    list-style: none;
    padding: 0;
}

.entrada-item {
    padding-bottom: var(--e4);
    border-bottom: 1px solid var(--linea);
}

.entrada-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.entrada-item__titulo {
    font-size: 1.4rem;
    margin-bottom: var(--e1);
}

.entrada-item__titulo a {
    color: var(--ai);
    text-decoration: none;
}

.entrada-item__titulo a:hover {
    color: var(--shu-texto);
}

.entrada-item__meta {
    display: flex;
    align-items: center;
    gap: var(--e1);
    margin-bottom: var(--e1);
    color: var(--sumi);
    font-size: .82rem;
}

.entrada-item__extracto {
    color: var(--sumi);
}

/* --- Cabecera de una entrada --- */
.entrada-cabecera {
    margin-bottom: var(--e4);
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--linea);
}

.entrada-cabecera h1 {
    font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem);
    margin-bottom: var(--e2);
}

.entrada-portada {
    width: 100%;
    margin-bottom: var(--e4);
    border-radius: var(--radio-g);
}

/* --- Etiquetas --- */
.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
    list-style: none;
    padding: 0;
    margin-top: var(--e3);
}

.etiquetas li {
    padding: .25em .8em;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--sumi);
    font-size: .78rem;
}


/* ============================================================
   18. PÁGINAS DE ERROR
   ============================================================ */

.error {
    padding-block: var(--e7);
    text-align: center;
}

.error__codigo {
    /* En Fraunces y no en la fuente japonesa: el subconjunto de Noto
       Serif JP que se descarga solo contiene ふらり, no cifras. */
    font-family: var(--serif);
    font-size: clamp(3.5rem, 2.5rem + 5vw, 5.5rem);
    font-weight: 500;
    line-height: 1;
    color: var(--ai);
}

.error__mensaje {
    max-width: 28rem;
    margin: var(--e3) auto 0;
    color: var(--sumi);
}

.error__acciones {
    display: flex;
    gap: var(--e2);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--e4);
}


/* ============================================================
   19. RESPONSIVE
   ============================================================
   La hoja está escrita para móvil primero: casi todo se resuelve con
   clamp() y grid automático, así que hacen falta muy pocos ajustes. */

@media (max-width: 640px) {
    :root {
        --e6: 3.25rem;
        --e7: 4rem;
    }

    .envoltura { padding-inline: var(--e2); }

    .cabecera__fila {
        flex-direction: column;
        align-items: center;
        gap: var(--e2);
        text-align: center;
    }

    .nav { justify-content: center; gap: var(--e2); }

    .pie__fila {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pie__enlaces { justify-content: center; }

    .captacion { padding: var(--e3) var(--e2); }

    /* En una pantalla estrecha, el botón a todo el ancho es más fácil de
       pulsar y deja más clara la acción principal. */
    .hero__cta .boton,
    .suscripcion .boton {
        width: 100%;
    }
}


/* ============================================================
   20. IMPRESIÓN
   ============================================================
   Sobre todo por las páginas legales, que la gente sí imprime o guarda
   en PDF. */

@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .cabecera nav,
    .saltar,
    .boton,
    .captacion,
    .enlaces {
        display: none !important;
    }

    .seccion { padding-block: 1rem; }

    /* La URL de destino se imprime junto al enlace: en papel, un enlace
       sin su dirección no sirve de nada. */
    .prosa a::after {
        content: " (" attr(href) ")";
        font-size: .85em;
        color: #555;
        word-break: break-all;
    }
}


/* ============================================================
   21. TABLAS
   ============================================================
   Solo las usa la política de cookies, pero conviene tenerlas resueltas:
   una tabla sin estilo en móvil desborda la pantalla y estropea la
   página entera. */

.prosa table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    /* La caja hace scroll por dentro en pantallas estrechas en lugar de
       ensanchar el documento. */
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.prosa caption {
    margin-bottom: var(--e1);
    text-align: left;
}

.prosa th,
.prosa td {
    padding: .6em .9em;
    border-bottom: 1px solid var(--linea);
    text-align: left;
    vertical-align: top;
}

.prosa th {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--ai);
}

.prosa td {
    color: var(--sumi);
}

.prosa tbody tr:last-child td {
    border-bottom: none;
}

/* A partir de tableta ya cabe entera y se puede permitir el salto de
   línea dentro de las celdas. */
@media (min-width: 640px) {
    .prosa table { white-space: normal; }
}