/*
Theme Name:  Pata Amarilla
Theme URI:   https://patamarilla.com
Description: Tema hijo de GeneratePress para Pata Amarilla — portal de podcasts, tienda y aula virtual.
Author:      Pata Amarilla
Author URI:  https://patamarilla.com
Template:    generatepress
Version:     1.3.0
License:     GPL-2.0+
Text Domain: patamarilla-theme
*/

/* ============================================================================
   PATA AMARILLA — style.css
   ============================================================================
   Hoja de estilos global del tema hijo. Carga en TODAS las páginas.

   ARQUITECTURA DE ARCHIVOS CSS:
     style.css              — este archivo: variables, base, componentes globales
     assets/css/header.css  — header y menú de navegación
     assets/css/slider.css  — hero/slider del home
     assets/css/sections.css— secciones del home (¡Hazte Pata!, post destacado, stream)
     assets/css/shop.css    — página /nuestra-tienda/
     assets/css/podcast.css — página /podcast/ (Stream)
     assets/css/hazte-pata.css — página /hazte-pata/
     assets/css/acerca-de.css  — página /acerca-de/
     assets/css/aula-amarilla.css — página /aula-amarilla/

   SECCIONES DE ESTE ARCHIVO:
     1. Fuente personalizada (@font-face PataFont)
     2. Variables globales (:root) — paleta, fuentes, sombras, radios
     3. Reset y base
     4. Tipografía (h1-h6, p)
     5. Layout global (.pa-container)
     6. Botones (.pa-btn, .pa-btn-primary, .pa-btn-outline)
     7. Secciones generales (.pa-section, .pa-section-header)
     8. Cards de posts/episodios (.pa-card, .pa-grid)
     9. Footer (.pa-footer)
    10. Franja de cierre global (.pa-closing-strip)
    11. Hero de página compartido (.pa-page-hero) — usado por Stream,
        Aula Amarilla, Tienda, Acerca de, Hazte Pata
    12. Overrides por ID de página — full-width GeneratePress y
        sección ¿Por qué Pata Amarilla? en acerca-de
    13. Responsive

   TIPOGRAFÍA:
     Para cambiar la fuente de TODO el sitio, solo tocar:
     a) El bloque @font-face de abajo (URL del archivo .woff2)
     b) Las variables --pa-font-titulo y --pa-font-cuerpo en :root
     Nada más en ningún otro archivo.

   @version 1.3.0
   ============================================================================ */

/* ============================================================
   1. FUENTE PERSONALIZADA
   ============================================================ */
@font-face {
    font-family: 'PataFont';
    src: url('assets/fonts/pata-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   2. VARIABLES GLOBALES
   ============================================================ */
:root {
    /* Paleta */
    --pa-amarillo:     #F2D119;
    --pa-negro:        #111111;
    --pa-gris-oscuro:  #1C1C1E;
    --pa-gris-medio:   #3A3A3C;
    --pa-gris-claro:   #F2F2F7;
    --pa-blanco:       #FFFFFF;
    --pa-acento:       #E63946;

    /* Tipografía — Único lugar donde se definen */
    --pa-font-titulo:  'PataFont', sans-serif;
    --pa-font-cuerpo:  'PataFont', sans-serif;

    /* Bordes y sombras */
    --pa-radio:        8px;
    --pa-radio-lg:     16px;
    --pa-sombra:       0 2px 12px rgba(0,0,0,.08);
    --pa-sombra-hover: 0 8px 32px rgba(0,0,0,.14);

    /* Layout */
    --pa-max-width:    1200px;
    --pa-transicion:   .22s ease;

    /* Altura estándar de secciones full-bleed (donate, featured).
       Usa clamp para escalar con el ancho sin achatarse en pantallas grandes. */
    --pa-section-h:    clamp(480px, 26vw, 720px);

    /* ── ESCALA TIPOGRÁFICA (CAPA 1) ─────────────────────────────
       Escala modular fluida. Cada paso interpola entre móvil (375px)
       y desktop (1440px) con clamp() — por eso NO hacen falta media
       queries ni variantes _mobile para el tamaño.
       Comentario = rango real en px (móvil → desktop).
       NO usar en componentes: usar los tokens semánticos de abajo.
       ─────────────────────────────────────────────────────────── */
    --pa-text-2xs:  clamp(0.6875rem, 0.644rem + 0.19vw, 0.8125rem);
    --pa-text-xs:   clamp(0.8125rem, 0.790rem + 0.09vw, 0.875rem);
    --pa-text-sm:   clamp(0.9375rem, 0.894rem + 0.19vw, 1.0625rem);
    --pa-text-base: clamp(1.0625rem, 0.996rem + 0.28vw, 1.25rem);
    --pa-text-md:   clamp(1.1875rem, 1.121rem + 0.28vw, 1.375rem);
    --pa-text-lg:   clamp(1.3125rem, 1.246rem + 0.28vw, 1.5rem);
    --pa-text-xl:   clamp(1.5rem,    1.346rem + 0.66vw, 1.9375rem);
    --pa-text-2xl:  clamp(1.75rem,   1.552rem + 0.85vw, 2.3125rem);
    --pa-text-3xl:  clamp(2rem,      1.736rem + 1.13vw, 2.75rem);
    --pa-text-4xl:  clamp(2.25rem,   1.898rem + 1.50vw, 3.25rem);
    --pa-text-5xl:  clamp(2.75rem,   1.958rem + 3.38vw, 5rem);

    /* ── TOKENS SEMÁNTICOS (CAPA 2) ──────────────────────────────
       Los componentes SOLO consumen estos. Nombran el ROL del texto,
       no su tamaño. Dos elementos con el mismo rol comparten token y
       no pueden desincronizarse. Para reasignar un rol a otro paso de
       la escala, cambias UNA línea aquí y se propaga a todo el sitio.
       ─────────────────────────────────────────────────────────── */
    --pa-font-hero-title:    var(--pa-text-5xl);
    --pa-font-hero-sub:      var(--pa-text-base);
    --pa-font-hero-eyebrow:  var(--pa-text-2xs);

    --pa-font-display:       var(--pa-text-4xl);
    --pa-font-section-title: var(--pa-text-3xl);
    --pa-font-subsection:    var(--pa-text-2xl);

    --pa-font-card-title-lg: var(--pa-text-xl);
    --pa-font-card-title:    var(--pa-text-md);

    --pa-font-body:          var(--pa-text-md);
    --pa-font-body-sm:       var(--pa-text-base);
    --pa-font-button:        var(--pa-text-base);
    --pa-font-meta:          var(--pa-text-sm);
    --pa-font-label:         var(--pa-text-xs);
    --pa-font-micro:         var(--pa-text-2xs);

    /* Alturas de línea emparejadas con los roles */
    --pa-lh-tight:  1.15;
    --pa-lh-snug:   1.3;
    --pa-lh-normal: 1.6;
    --pa-lh-loose:  1.75;

    /* Multiplicador global — lo controla el panel de Tipografía.
       Cambiar este valor reescala TODO el sitio en proporción. */
    --pa-font-scale: 1;
}

/* El tamaño raíz parte del default del navegador (100%), respetando la
   config. de accesibilidad del usuario, multiplicado por el factor del
   panel. Todo lo demás está en rem, así que escala en cadena. */
html {
    font-size: calc(100% * var(--pa-font-scale, 1));
    scroll-behavior: smooth;
}

/* ============================================================
   3. RESET Y BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--pa-font-cuerpo);
    background: var(--pa-gris-claro);
    color: var(--pa-negro);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--pa-amarillo);
    text-decoration: none;
    transition: opacity var(--pa-transicion);
}
a:hover { opacity: .8; }

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

/* ============================================================
   4. TIPOGRAFÍA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--pa-font-titulo);
    font-weight: 700;
    line-height: 1.2;
    color: var(--pa-negro);
    margin: 0 0 .5em;
}
p { line-height: 1.7; margin: 0 0 1em; }

/* ============================================================
   5. LAYOUT GLOBAL
   ============================================================ */
.pa-container {
    max-width: var(--pa-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   6. BOTONES
   ============================================================ */
.pa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--pa-radio);
    font-size: var(--pa-font-button);
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all var(--pa-transicion);
    text-decoration: none;
}
.pa-btn-primary {
    background: var(--pa-amarillo);
    color: var(--pa-negro);
}
.pa-btn-primary:hover {
    background: #d4a800;
    color: var(--pa-negro);
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: var(--pa-sombra-hover);
}
.pa-btn-outline {
    background: transparent;
    color: var(--pa-blanco);
    border: 2px solid rgba(255,255,255,.3);
}
.pa-btn-outline:hover {
    border-color: var(--pa-amarillo);
    color: var(--pa-amarillo);
    opacity: 1;
}

/* ============================================================
   7. SECCIONES GENERALES
   ============================================================ */
.pa-section { padding: 64px 0; }
.pa-section-dark {
    background: var(--pa-negro);
    color: var(--pa-blanco);
}
.pa-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--pa-amarillo);
}
.pa-section-header h2 { font-size: var(--pa-font-section-title); margin: 0; }
.pa-section-dark .pa-section-header h2 { color: var(--pa-blanco); }
.pa-ver-todo {
    font-size: var(--pa-font-body-sm);
    font-weight: 700;
    color: var(--pa-amarillo);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ============================================================
   8. CARDS DE POSTS / EPISODIOS
   ============================================================ */
.pa-grid { display: grid; gap: 24px; }
.pa-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pa-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pa-grid-2 { grid-template-columns: repeat(2, 1fr); }

.pa-card {
    background: var(--pa-blanco);
    border-radius: var(--pa-radio-lg);
    overflow: hidden;
    box-shadow: var(--pa-sombra);
    transition: transform var(--pa-transicion), box-shadow var(--pa-transicion);
    display: flex;
    flex-direction: column;
}
.pa-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pa-sombra-hover);
}
.pa-card-thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--pa-gris-claro);
    position: relative;
}
.pa-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.pa-card:hover .pa-card-thumb img { transform: scale(1.04); }
.pa-card-badge {
    position: absolute;
    bottom: 10px; left: 10px;
    background: var(--pa-amarillo);
    color: var(--pa-negro);
    font-size: var(--pa-font-label);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
}
.pa-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pa-card-meta {
    font-size: var(--pa-font-meta);
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pa-card-title {
    font-size: var(--pa-font-card-title);
    font-weight: 700;
    color: var(--pa-negro);
    line-height: var(--pa-lh-snug);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pa-card-excerpt {
    font-size: var(--pa-font-body-sm);
    color: #6b7280;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* ============================================================
   9. FOOTER
   ============================================================ */
.pa-footer {
    background: var(--pa-negro);
    color: rgba(255,255,255,.6);
    padding: 48px 0 24px;
    font-size: var(--pa-font-body-sm);
    border-top: 3px solid var(--pa-amarillo);
}
.pa-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.pa-footer-brand p { font-size: var(--pa-font-body-sm); max-width: 260px; line-height: var(--pa-lh-normal); }
.pa-footer h4 {
    color: var(--pa-blanco);
    font-size: var(--pa-font-body-sm);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 16px;
}
.pa-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pa-footer ul a { color: rgba(255,255,255,.6); font-size: var(--pa-font-body-sm); }
.pa-footer ul a:hover { color: var(--pa-amarillo); opacity: 1; }
.pa-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--pa-font-meta);
}

/* ============================================================
   10. FRANJA DE CIERRE GLOBAL
   ============================================================
   Aparece en el footer de todas las páginas via footer.php.
   Estilos del pill "Pata Amarilla Stream" con punto pulsante.
   ============================================================ */
.pa-closing-strip {
    background: var(--pa-negro);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    overflow: hidden;
    position: relative;
    border-top: none;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease;
}
.pa-closing-strip:hover {
    background: #1a1a1a;
}
.pa-closing-strip:hover .pa-closing-strip-pill {
    border-color: rgba(245,197,24,.6);
    background: rgba(245,197,24,.18);
}
.pa-closing-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(245,197,24,.07) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}
.pa-closing-strip-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(245,197,24,.12);
    border: 1px solid rgba(245,197,24,.3);
    border-radius: 30px;
    padding: 7px 20px;
    position: relative;
    z-index: 1;
}
.pa-closing-strip-pill strong {
    font-family: var(--pa-font-titulo);
    font-size: var(--pa-font-label);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pa-amarillo);
}
.pa-closing-strip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pa-amarillo);
    flex-shrink: 0;
    animation: pa-dot-pulse 2s ease-in-out infinite;
}
@keyframes pa-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.7); }
}
.pa-closing-strip-text {
    font-size: var(--pa-font-micro);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    position: relative;
    z-index: 1;
}

/* ============================================================
   11. HERO DE PÁGINA COMPARTIDO
   ============================================================
   Componente reutilizado en: /podcast/, /aula-amarilla/,
   /nuestra-tienda/, /acerca-de/, /hazte-pata/.
   Fondo negro con dot pattern amarillo, anillos decorativos,
   eyebrow pill, título combinado blanco/amarillo, subtítulo
   y línea decorativa amarilla.
   Para nuevas páginas: usar las mismas clases sin modificar este bloque.
   ============================================================ */
.pa-page-hero {
    background-color: #0f0f0f;
    background-image: radial-gradient(circle, rgba(245,197,24,.08) 1px, transparent 1px);
    background-size: 24px 24px;
    padding: 96px 24px 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pa-page-hero::before {
    content: '';
    position: absolute;
    top: -140px; right: -140px;
    width: 520px; height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(245,197,24,.08);
    pointer-events: none;
}
.pa-page-hero::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 300px; height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(245,197,24,.05);
    pointer-events: none;
}
.pa-page-hero-inner {
    max-width: 1160px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.pa-page-hero-eyebrow {
    display: inline-flex !important;
    align-items: center;
    font-size: var(--pa-font-hero-eyebrow);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pa-amarillo);
    background: rgba(245,197,24,.12);
    border: 1px solid rgba(245,197,24,.25);
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 24px;
}
a.pa-page-hero-eyebrow {
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.pa-page-hero-eyebrow::after {
    content: '→';
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width .25s ease, opacity .25s ease, margin-left .25s ease;
}
a.pa-page-hero-eyebrow:hover {
    background: var(--pa-amarillo);
    border-color: var(--pa-amarillo);
    color: var(--pa-negro) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(245,197,24,.35);
}
a.pa-page-hero-eyebrow:hover::after {
    max-width: 20px;
    margin-left: 8px;
    opacity: 1;
}
.pa-page-hero-title {
    display: block;
    font-family: var(--pa-font-titulo);
    font-size: var(--pa-font-hero-title);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -.01em;
    margin-bottom: 16px;
    text-transform: none;
}
.pa-page-hero-title .accent { color: var(--pa-amarillo); }
.pa-page-hero-title .normal { color: var(--pa-blanco); }
.pa-page-hero-sub {
    display: block;
    font-size: var(--pa-font-hero-sub);
    color: rgba(255,255,255,.6);
    max-width: 520px;
    margin: 0 auto 36px;
    line-height: 1.65;
}
.pa-page-hero-line {
    display: block;
    width: 48px;
    height: 4px;
    background: var(--pa-amarillo);
    border-radius: 2px;
    margin: 0 auto;
}

/* ============================================================
   12. OVERRIDES POR ID DE PÁGINA
   ============================================================
   Full-width reset para GeneratePress (.grid-container limita
   el ancho a 1200px via CSS dinámico en el <head>).
   Se usa body.page-id-X para ganar en especificidad.

   IDs activos:
     107   — / (home)
     22455 — /nuestra-tienda/
     22453 — /aula-amarilla/
     22450 — /acerca-de/
     22446 — /hazte-pata/
     22459 — /redaccion/
   ============================================================ */
body.page-id-22455 .grid-container,
body.page-id-22453 .grid-container,
body.page-id-22450 .grid-container,
body.page-id-22446 .grid-container,
body.home .grid-container,
body.blog .grid-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}ontainer {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sección ¿Por qué Pata Amarilla? (acerca-de) — imagen full-height difuminada.
   La imagen rectangular alta (887×1774px) va a la derecha del texto
   y se funde con el fondo blanco mediante gradientes en los bordes. */
.page-id-22450 .pa-about-why {
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--pa-blanco) !important;
    border-top: none !important;
    margin-top: 0 !important;
}
.page-id-22450 .pa-about-why-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 500px !important;
}
.page-id-22450 .pa-about-why-text {
    padding: 88px 80px 88px 10vw !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    justify-content: center !important;
    max-width: none !important;
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.page-id-22450 .pa-about-why-text::before { display: none !important; }
.page-id-22450 .pa-about-why-img {
    width: 100% !important;
    height: auto !important;
    min-height: 500px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #1a1208 !important;
}
.page-id-22450 .pa-about-why-img::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        90deg,
        var(--pa-blanco) 0%,
        rgba(255,255,255,.7) 15%,
        rgba(255,255,255,.0) 45%,
        rgba(255,255,255,.0) 75%,
        rgba(255,255,255,.5) 90%,
        var(--pa-blanco) 100%
    ) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
.page-id-22450 .pa-about-why-img::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg,
        var(--pa-blanco) 0%,
        transparent 12%,
        transparent 88%,
        var(--pa-blanco) 100%
    ) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}
.page-id-22450 .pa-about-why-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 70% !important;
    border-radius: 0 !important;
    filter: contrast(1.05) brightness(.92) saturate(.95) !important;
    transition: transform 1s ease !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
.page-id-22450 .pa-about-why:hover .pa-about-why-img img {
    transform: scale(1.04) !important;
}

/* Desktop: 2 columnas (texto | imagen) */
@media (min-width: 901px) {
    .page-id-22450 .pa-about-why-inner {
        grid-template-columns: 1fr 1fr !important;
        min-height: 500px !important;
    }
    .page-id-22450 .pa-about-why-img {
        min-height: 500px !important;
        height: auto !important;
        order: 1 !important;
    }
    .page-id-22450 .pa-about-why-text { order: 0 !important; }
}

/* Móvil: columna única (texto arriba | imagen abajo) */
@media (max-width: 900px) {
    .page-id-22450 .pa-about-why-inner {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    .page-id-22450 .pa-about-why-text {
        padding: 40px 24px 32px !important;
        order: 0 !important;
        width: 100% !important;
    }
    .page-id-22450 .pa-about-why-img {
        width: 100% !important;
        height: 90vw !important;
        min-height: 320px !important;
        order: 1 !important;
    }
    .page-id-22450 .pa-about-why-img::before {
        background: linear-gradient(180deg, var(--pa-blanco) 0%, transparent 20%, transparent 80%, var(--pa-blanco) 100%) !important;
    }
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .pa-page-hero { padding: 64px 20px 56px; }
}
@media (max-width: 1024px) {
    .pa-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .pa-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .pa-container { padding: 0 16px; }
    .pa-grid-4, .pa-grid-3, .pa-grid-2 { grid-template-columns: 1fr; }
    .pa-section { padding: 40px 0; }
    .pa-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .pa-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .pa-closing-strip { flex-direction: column; gap: 8px; }
    .pa-closing-strip-text { text-align: center; }
}


/* ============================================================
   14. TIPOGRAFIA DE ARTICULOS Y CONTENIDO WORDPRESS
   ============================================================
   Sobreescribe los px fijos de GeneratePress para que todo
   el contenido editorial escale con los tokens y con
   --pa-font-scale del panel de Tipografia.
   ============================================================ */

/* Cuerpo del articulo */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-summary p {
    font-size: var(--pa-font-body);
    line-height: var(--pa-lh-normal);
}

/* Excepcion unica de tipografia en todo el sitio: el texto de lectura
   del cuerpo de la entrada (no el titulo, no los h1-h6 del contenido,
   no ningun otro texto del sitio) usa Helvetica en vez de PataFont, a
   pedido explicito. Todo lo demas del sitio sigue usando --pa-font-cuerpo. */
body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .entry-content li,
body.single-post .entry-content td,
body.single-post .entry-content blockquote {
    font-family: Helvetica, Arial, sans-serif;
}

/* Titulos dentro del contenido */
.entry-content h1 { font-size: var(--pa-font-hero-title);    line-height: var(--pa-lh-tight); }
.entry-content h2 { font-size: var(--pa-font-display);       line-height: var(--pa-lh-tight); }
.entry-content h3 { font-size: var(--pa-font-section-title); line-height: var(--pa-lh-snug); }
.entry-content h4 { font-size: var(--pa-font-subsection);    line-height: var(--pa-lh-snug); }
.entry-content h5 { font-size: var(--pa-font-card-title-lg); line-height: var(--pa-lh-snug); }
.entry-content h6 { font-size: var(--pa-font-card-title);    line-height: var(--pa-lh-snug); }

/* Titulo del post (fuera del content, en el header del single) */
.entry-title,
.page-title {
    font-size: var(--pa-font-display);
    line-height: var(--pa-lh-tight);
}

/* Blockquotes */
.entry-content blockquote {
    font-size: var(--pa-font-body);
    line-height: var(--pa-lh-loose);
    border-left: 4px solid var(--pa-amarillo);
    padding-left: 20px;
    margin-left: 0;
    color: var(--pa-gris-medio);
    font-style: italic;
}

/* Listas dentro del contenido */
.entry-content ul li,
.entry-content ol li {
    font-size: var(--pa-font-body);
    line-height: var(--pa-lh-normal);
    margin-bottom: 6px;
}

/* Meta del post (autor, fecha, categoria) */
.entry-meta,
.entry-meta span,
.entry-meta a,
.post-meta {
    font-size: var(--pa-font-meta);
}

/* Caption de imagenes */
.wp-caption-text,
.wp-element-caption {
    font-size: var(--pa-font-label);
    color: var(--pa-gris-medio);
    text-align: center;
    margin-top: 6px;
}

/* GeneratePress: body base override */
body {
    font-size: var(--pa-font-body);
    line-height: var(--pa-lh-normal);
}