/* ============================================================================
   /aprende — índice de guías y artículo
   ----------------------------------------------------------------------------
   Los colores venían con `--color-gold`, que en la identidad anterior era un
   dorado sobre fondo oscuro y en esta paleta es un verde grisáceo apagado
   (#3c4a3f). Como color de enlace dentro de un texto no se distingue del
   propio texto, así que aquí manda el verde de marca, que sí se lee como
   enlace.
   ========================================================================= */

.learn-page {
    /* El texto largo se lee mal a todo lo ancho: una línea de más de unos 75
       caracteres obliga a buscar el principio del renglón siguiente. */
    max-width: 1080px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.blog-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 180ms, transform 180ms, box-shadow 180ms;
}

.blog-card:hover {
    border-color: var(--color-brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(8, 24, 16, 0.10));
}

.blog-card__img {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-soft);
}

.blog-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

.blog-card:hover .blog-card__img img { transform: scale(1.04); }

/* Tarjeta sin foto: bloque de marca con la inicial de la categoría. Sustituye
   al `blog-default.jpg` que la plantilla pedía y que no existe en este repo:
   trece imágenes rotas en el índice. Esto no se puede romper. */
.blog-card__glyph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, #0e4a20 0%, #16702e 100%);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.blog-card__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; gap: 6px; }

.blog-card__cat {
    margin: 0;
    color: var(--color-brand-deep);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.blog-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.blog-card__title a { color: var(--color-text); text-decoration: none; }
.blog-card__title a:hover { color: var(--color-brand-deep); }
.blog-card__excerpt { margin: 4px 0 0; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.55; }
.blog-card__meta    { margin: auto 0 0; padding-top: 8px; color: var(--color-text-dim); font-size: 0.76rem; letter-spacing: 0.04em; }

.blog-empty {
    padding: var(--space-5) 0;
    text-align: center;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.blog-empty a { color: var(--color-brand-deep); font-weight: 600; }

/* ── Pastillas de categoría ─────────────────────────────────────────────── */

.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-4);
}

.blog-cat {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: color 150ms, border-color 150ms, background 150ms;
    border-radius: var(--radius-pill);
}

.blog-cat:hover { color: var(--color-brand-deep); border-color: var(--color-brand); background: var(--color-brand-soft); }

/* La activa lleva fondo de marca y necesita color propio: es el fallo que ya
   apareció en la paginación y en las ramas del catálogo —fondo oscuro heredando
   el texto del tema claro— y aquí se declara para no repetirlo. */
.blog-cat.is-active {
    background: var(--color-brand);
    color: #ffffff;
    border-color: var(--color-brand);
    font-weight: 700;
}

/* ── Paginación ─────────────────────────────────────────────────────────── */

.blog-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

.blog-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 0.9rem;
}

.blog-page:hover { color: var(--color-brand-deep); border-color: var(--color-brand); }

.blog-page.is-active {
    background: var(--color-brand);
    color: #ffffff;
    border-color: var(--color-brand);
    font-weight: 700;
}

/* ── Artículo ───────────────────────────────────────────────────────────── */

.blog-article__header {
    padding: var(--space-4) 0 var(--space-3);
    text-align: left;
}

.blog-article__hero { margin: 0 0 var(--space-3); }

.blog-article__content {
    font-size: 1.05rem;
    line-height: 1.75;
}

.blog-article__content h2 {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    letter-spacing: -0.015em;
}

.blog-article__content h3 {
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.blog-article__content ul { line-height: 1.7; }

/* Enlace dentro del cuerpo: verde de marca y subrayado. El subrayado no es
   decoración —es lo que hace que un enlace se distinga sin depender solo del
   color, que es requisito de accesibilidad dentro de un párrafo. */
.blog-article__content a {
    color: var(--color-brand-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.blog-article__content a:hover {
    color: var(--color-brand);
    text-decoration-thickness: 2px;
}

/* ── Llamada de cierre ──────────────────────────────────────────────────── */

.learn-cta {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-brand-tint);
    border: 1px solid var(--color-brand-soft);
}

.learn-cta--inline { margin-top: var(--space-5); }

.learn-cta__title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 700;
    color: var(--color-brand-deep);
}

.learn-cta__text {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--color-text);
    max-width: 62ch;
}

.learn-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* ============================================================================
   LA GUÍA — portada, índice y cuerpo
   ----------------------------------------------------------------------------
   El artículo era un titular con estilos en línea y un bloque de texto de
   ancho completo. Ahora tiene portada propia, índice lateral pegajoso y un
   ancho de lectura acotado, que es lo que separa un texto que se lee de uno
   que se abandona en el segundo párrafo.
   ========================================================================= */

/* ── Portada ────────────────────────────────────────────────────────────── */

.guia-hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, #0a1a10 0%, #0e4a20 62%, #16702e 100%);
    color: #ffffff;
    padding-block: clamp(2.5rem, 7vw, 5rem);
    overflow: hidden;
}

.guia-hero--con-imagen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--guia-bg);
    background-size: cover;
    background-position: center;
}

/* El velo no es decoración: es lo que sostiene el contraste del titular pase
   lo que pase con la imagen de portada. Sin él, una portada clara deja el
   blanco ilegible, que es el fallo que ya apareció en los heroes del sitio. */
.guia-hero__velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg,
        rgba(8, 24, 16, 0.94) 0%,
        rgba(8, 24, 16, 0.86) 46%,
        rgba(8, 24, 16, 0.62) 100%);
}

.guia-hero:not(.guia-hero--con-imagen) .guia-hero__velo { background: transparent; }

/* Una guía es más estrecha que el resto del sitio —es texto largo y hay que
   poder leerlo—, pero eso se dice UNA vez y para todo el artículo, no bloque a
   bloque. Antes el hero iba a 940 px, el cuerpo a 1 180 y el resto de la
   página a 1 320: tres verticales distintas apiladas, y los escalones se ven
   al bajar aunque no se sepa nombrar qué falla.
   Como `.container` lee `--container-max`, basta con redefinirla aquí. */
.guia { --container-max: 1180px; }

.guia-hero__inner { position: relative; }

.guia-hero__migas ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.guia-hero__migas li + li::before {
    content: "·";
    margin-right: 10px;
    color: var(--color-brand-bright);
}

.guia-hero__migas a {
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
}

.guia-hero__migas a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

.guia-hero__titulo {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(8, 24, 16, 0.45);
    max-width: 18ch;
}

@media (min-width: 768px) {
    .guia-hero__titulo { max-width: 22ch; }
}

.guia-hero__entradilla {
    margin: 0 0 var(--space-3);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 62ch;
}

.guia-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
}

/* ── Rejilla del artículo ───────────────────────────────────────────────── */

.guia-layout {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-5);
    /* El ancho lo pone `--container-max` de `.guia`, arriba. */
}

@media (min-width: 1024px) {
    .guia-layout {
        /* El índice fijo a la derecha y el texto tomando el resto: si la
           columna del índice fuera fluida, cambiaría de ancho al hacer scroll
           y el texto bailaría con ella. */
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: var(--space-5);
        align-items: start;
    }
}

/* ── Índice ─────────────────────────────────────────────────────────────── */

.guia-indice { order: -1; }

@media (min-width: 1024px) {
    .guia-indice {
        order: 2;
        position: sticky;
        /* Cabecera pegajosa + un respiro. */
        top: 96px;
    }
}

.guia-indice__caja {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    padding: var(--space-2) var(--space-3);
}

.guia-indice__caja summary {
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brand-deep);
    padding-block: 6px;
}

.guia-indice__caja ol {
    list-style: none;
    margin: var(--space-2) 0 6px;
    padding: 0;
    counter-reset: none;
}

.guia-indice__caja li + li { margin-top: 2px; }

.guia-indice__caja a {
    display: flex;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
}

.guia-indice__caja a:hover {
    background: var(--color-brand-soft);
    color: var(--color-brand-deep);
}

/* Apartado en el que está el lector. Lo marca guia-indice.js siguiendo los
   H2 con IntersectionObserver; sin JavaScript el índice sigue funcionando
   como lista de enlaces, que es lo que es. */
.guia-indice__caja a.is-current {
    color: var(--color-brand-deep);
    font-weight: 700;
    border-left-color: var(--color-brand);
    background: var(--color-brand-soft);
}

.guia-indice__n {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-dim);
    padding-top: 2px;
}

.guia-indice__caja a.is-current .guia-indice__n { color: var(--color-brand); }

.guia-indice__ayuda {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, #0e4a20 0%, #16702e 100%);
    color: #ffffff;
}

.guia-indice__ayuda-titulo {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    color: #ffffff;
}

.guia-indice__ayuda-texto {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
}

/* Sobre el verde, el botón primario ámbar del sistema no destaca: aquí manda
   el blanco, que es lo único que siempre contrasta sobre este fondo. */
.guia-indice__ayuda .btn--primary {
    background: #ffffff;
    background-image: none;
    color: var(--color-brand-deep);
    border-color: #ffffff;
    box-shadow: none;
}

.guia-indice__ayuda .btn--primary:hover {
    background: var(--color-brand-tint);
    background-image: none;
    color: var(--color-brand-deep);
    border-color: var(--color-brand-tint);
}

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */

.guia-cuerpo {
    /* Entre 60 y 75 caracteres por línea es donde el ojo encuentra el
       principio del renglón siguiente sin buscarlo. Por encima se relee la
       misma línea; por debajo, se salta de renglón cada tres palabras. */
    max-width: 68ch;
    margin-inline: 0;
}

.guia-cuerpo > :first-child { margin-top: 0; }

.guia-relacionadas__titulo {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 700;
    text-align: center;
}


/* ============================================================================
   PIEZAS DENTRO DEL TEXTO — tabla, aviso y figura
   ----------------------------------------------------------------------------
   Las genera render_editorial_html() a partir del cuerpo de la guía, así que
   valen igual en un artículo, en una descripción de familia o en una ficha.
   ========================================================================= */

/* ── Tabla ──────────────────────────────────────────────────────────────── */

.prose-table-wrap {
    /* El scroll vive AQUÍ y no en la página: una tabla de cuatro columnas no
       cabe en 360 px y, sin este envoltorio, es ella la que ensancha el
       documento entero y provoca scroll horizontal en todo el sitio. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.8em 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
}

/* Es un contenedor con scroll y por tanto tiene que poder recibir el foco:
   sin esto, quien navega con teclado no puede desplazar la tabla. */
.prose-table-wrap:focus-visible {
    outline: 3px solid var(--color-brand);
    outline-offset: 2px;
}

.prose-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    line-height: 1.5;
}

.prose-table thead th {
    background: var(--color-brand);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 16px;
    white-space: nowrap;
}

.prose-table tbody th,
.prose-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--color-border-soft);
    vertical-align: top;
    color: var(--color-text);
}

/* La primera columna es el criterio por el que se compara la fila: va en
   negrita para poder recorrer la tabla en vertical sin leerla entera. */
.prose-table tbody th {
    font-weight: 700;
    text-align: left;
    color: var(--color-text);
    background: var(--color-bg);
}

.prose-table tbody tr:nth-child(even) td { background: var(--color-bg); }

.prose-table code {
    font-size: 0.88em;
    background: var(--color-brand-soft);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Aviso destacado ────────────────────────────────────────────────────── */

.prose-callout {
    margin: 1.8em 0;
    padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 6px);
    border-radius: var(--radius-lg);
    border-left: 5px solid var(--color-brand);
    background: var(--color-bg-elevated);
    box-shadow: 0 1px 3px rgba(8, 24, 16, 0.05);
}

.prose-callout__title {
    margin: 0 0 6px;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* La etiqueta va antes del título con ::before y no como un elemento aparte:
   así el texto del aviso sigue siendo un párrafo normal para un lector de
   pantalla, que lee el rótulo y sigue de corrido. */
.prose-callout__title::before {
    flex: none;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

.prose-callout p:last-child,
.prose-callout ul:last-child { margin-bottom: 0; }

.prose-callout p {
    margin: 0 0 0.6em;
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.prose-callout ul { margin: 0.4em 0 0; }

/* Clave: el número o la regla que hay que recordar. */
.prose-callout--clave { border-left-color: var(--color-brand); background: var(--color-brand-tint); }
.prose-callout--clave .prose-callout__title::before {
    content: "Lo que importa";
    background: var(--color-brand);
    color: #ffffff;
}

/* Aviso: el error que la gente comete. */
.prose-callout--aviso { border-left-color: var(--color-warning); background: #fdf3e9; }
.prose-callout--aviso .prose-callout__title::before {
    content: "Cuidado";
    background: var(--color-warning);
    color: #ffffff;
}

/* Dato: contexto, matiz legal o excepción. */
.prose-callout--dato { border-left-color: var(--color-info); background: #eef5f8; }
.prose-callout--dato .prose-callout__title::before {
    content: "Dato";
    background: var(--color-info);
    color: #ffffff;
}

@media (max-width: 480px) {
    .prose-callout__title { flex-direction: column; align-items: flex-start; gap: 6px; }
    .prose-callout__title::before { align-self: flex-start; }
}

/* ── Figura ─────────────────────────────────────────────────────────────── */

.prose-figure {
    margin: 2em 0;
}

.prose-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.prose-figure figcaption {
    margin-top: 10px;
    font-family: var(--font-ui);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--color-text-dim);
    padding-left: 12px;
    border-left: 2px solid var(--color-brand);
}

/* ── Código dentro del texto ────────────────────────────────────────────── */

.editorial-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--color-brand-soft);
    color: var(--color-brand-deep);
    padding: 1px 6px;
    border-radius: 4px;
}

/* ── Listas numeradas ───────────────────────────────────────────────────── */

.editorial-prose ol {
    list-style: none;
    counter-reset: paso;
    padding: 0;
    margin: 0 0 1.6em;
}

.editorial-prose ol > li {
    counter-increment: paso;
    position: relative;
    padding-left: 2.6em;
    margin-bottom: 0.75em;
    color: var(--color-text-muted);
    line-height: 1.65;
}

.editorial-prose ol > li::before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0.05em;
    width: 1.75em;
    height: 1.75em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-brand);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1;
}

/* Dentro de un aviso las listas van sin numeración de círculo: el bloque ya
   tiene bastante peso visual. */
.prose-callout ol > li::before { background: var(--color-text-dim); }