/* ═══════════════════════════════════════════════════════════════════════════
   CENEFAS · Sistema de diseño portado de dg-theme
   ─────────────────────────────────────────────────────────────────────────────
   Las plantillas de las cenefas del blog (blog_curyv1_7_1_x, cta_curvy1_3_1_x,
   blog_page_7_x) usan clases utilitarias del sistema de diseño de dg-theme:
   tipografía (tamano), colores (color), fondos (background) y botones
   (btn-round, color-boton). Ese CSS lo generaba dg-theme dinámicamente desde
   las opciones del tema; aquí se recrea de forma autocontenida usando la
   PALETA DEL TEMA SPM (verde de marca #7db600 / #a3ef00 + escala slate) y
   variables CSS centralizadas para poder ajustarlo desde un único punto.

   ⚠️ Para ajustar la apariencia, edita SOLO la sección "PALETA" y
       "TIPOGRAFÍA" de abajo. El resto de clases utilitarias las consume el
       HTML de las plantillas y no debería necesitar retoques.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   PALETA · Colores del tema SPM
   Verde de marca: #7db600 (normal) / #a3ef00 (hover). Neutros: escala slate.
   Botones: .btn-verde del tema → fondo #7db600 + texto #fff; hover #a3ef00
   + texto #101010. Las secciones "oscuras" de las cenefas usan slate-900.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
    /* Fondos */
    --background-1-dark: #0f172a;
    /* slate-900 · secciones oscuras de las cenefas */
    --background-2-dark: #020617;
    /* slate-950 · interior/tarjetas más oscuro      */
    --background-1-light: #ffffff;
    /* secciones claras                              */
    --background-2-light: #f8fafc;
    /* slate-50 · gris muy claro                     */

    /* Texto */
    --color-1-headings-dark: #101010;
    /* títulos sobre fondo claro (texto del tema) */
    --color-1-body-dark: #475569;
    /* slate-600 · cuerpo sobre fondo claro       */
    --color-1-body-light: #ffffff;
    --color-2-headings-dark: #101010;
    --color-2-headings-light: #ffffff;
    /* títulos sobre fondo oscuro                 */
    --color-2-body-light: #cbd5e1;
    /* slate-300 · cuerpo sobre fondo oscuro      */
    --color-3-headings-dark: #1e293b;
    /* slate-800                                  */
    --color-3-body-dark: #64748b;
    /* slate-500                                  */
    --color-4-headings-light: #ffffff;
    --color-logotipo-negative: #ffffff;

    /* Botones · marca verde del tema (mismo estilo que .btn-verde) */
    --color-boton-1-normal: #7db600;
    --color-boton-1-hover: #a3ef00;
    --color-boton-1-texto-normal: #ffffff;
    --color-boton-1-texto-hover: #101010;

    --color-boton-2-normal: #7db600;
    --color-boton-2-hover: #a3ef00;
    --color-boton-2-texto-normal: #ffffff;
    --color-boton-2-texto-hover: #101010;

    --color-boton-3-normal: #7db600;
    --color-boton-3-hover: #a3ef00;
    --color-boton-3-texto-normal: #ffffff;
    --color-boton-3-texto-hover: #7db600;
    /* hover de títulos sobre fondo claro */

    --boton-4-texto-normal: #101010;
    /* enlaces/títulos de tarjetas sobre claro */
    --boton-4-texto-hover: #7db600;
    /* hover verde de marca                     */
    --boton-5-texto-normal: #ffffff;
    /* enlaces/texto sobre imagen/oscuro        */
    --boton-5-texto-hover: #ffffff;
}

/* ────────────────────────────────────────────────────────────────────────────
   TIPOGRAFÍA (escala de tamaños "tamano*")
   Cada token define tamaño escritorio / tablet / móvil, peso e interlineado.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
    --dg-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    /* tamano2 — H1 de la cabecera del blog */
    --tamano2-font-size: 52px;
    --tamano2-font-size-tablet: 44px;
    --tamano2-font-size-mobile: 34px;

    /* tamano3 — Título del CTA */
    --tamano3-font-family: var(--dg-font-family);
    --tamano3-font-size: 38px;
    --tamano3-font-size-tablet: 32px;
    --tamano3-font-size-mobile: 26px;
    --tamano3-font-weight: 600;
    --tamano3-letter-spacing: -0.01em;
    --tamano3-line-height: 1.2;

    /* tamano4 — Título de la noticia destacada grande */
    --tamano4-font-family: var(--dg-font-family);
    --tamano4-font-size: 30px;
    --tamano4-font-size-tablet: 26px;
    --tamano4-font-size-mobile: 22px;
    --tamano4-font-weight: 600;
    --tamano4-letter-spacing: -0.01em;
    --tamano4-line-height: 1.25;

    /* tamano5 — Títulos de tarjetas / noticias */
    --tamano5-font-family: var(--dg-font-family);
    --tamano5-font-size: 20px;
    --tamano5-font-size-tablet: 18px;
    --tamano5-font-size-mobile: 16px;
    --tamano5-font-weight: 600;
    --tamano5-letter-spacing: -0.005em;
    --tamano5-line-height: 1.35;

    /* tamano6 — Título del artículo (single) / enlaces */
    --tamano6-font-family: var(--dg-font-family);
    --tamano6-font-size: 18px;
    --tamano6-font-size-tablet: 17px;
    --tamano6-font-size-mobile: 16px;
    --tamano6-font-weight: 500;
    --tamano6-letter-spacing: 0;
    --tamano6-line-height: 1.4;

    /* tamano6-boldcta — CTA reforzado */
    --tamano6-boldcta-font-family: var(--dg-font-family);
    --tamano6-boldcta-font-size: 22px;
    --tamano6-boldcta-font-weight: 700;
    --tamano6-boldcta-letter-spacing: -0.01em;
    --tamano6-boldcta-line-height: 1.3;

    /* tamano7 — Texto de párrafo / metadatos */
    --tamano7-font-family: var(--dg-font-family);
    --tamano7-font-size: 16px;
    --tamano7-font-size-tablet: 15px;
    --tamano7-font-size-mobile: 14px;
    --tamano7-font-weight: 400;
    --tamano7-letter-spacing: 0;
    --tamano7-line-height: 1.6;

    /* tamano-7-mediumcta — Botones / buscador */
    --tamano-7-mediumcta-font-family: var(--dg-font-family);
    --tamano-7-mediumcta-font-size: 16px;
    --tamano-7-mediumcta-font-size-tablet: 15px;
    --tamano-7-mediumcta-font-size-mobile: 14px;
    --tamano-7-mediumcta-font-weight: 500;
    --tamano-7-mediumcta-letter-spacing: 0;
    --tamano-7-mediumcta-line-height: 1.5;

    /* tamano-7--subrayado — Enlace subrayado */
    --tamano-7--subrayado-font-family: var(--dg-font-family);
    --tamano-7--subrayado-font-size: 16px;
    --tamano-7--subrayado-font-weight: 400;
    --tamano-7--subrayado-letter-spacing: 0.02em;
    --tamano-7--subrayado-line-height: 1.5;

    /* tamano8 — Etiquetas pequeñas del artículo */
    --tamano8-font-family: var(--dg-font-family);
    --tamano8-font-size: 14px;
    --tamano8-font-size-tablet: 13px;
    --tamano8-font-size-mobile: 12px;
    --tamano8-font-weight: 400;
    --tamano8-letter-spacing: 0.01em;
    --tamano8-line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────────────────
   GRID
   Las cenefas usan .container/.row/.col del tema; aseguramos el comportamiento
   flex de .row dentro de los contenedores de cenefa (sin tocar el resto del
   sitio). El .container ya lo define style.css (max-width 1280px).
   ──────────────────────────────────────────────────────────────────────────── */
.blogcuryv1_7_1_1 .row,
.blogcuryv1_7_1_2 .row,
.blog_page_7_1 .row,
.blog_page_7_2 .row,
.cta_curvy1_3_1_1 .row,
.cta_curvy1_3_1_2 .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* ────────────────────────────────────────────────────────────────────────────
   TIPOGRAFÍA · Clases utilitarias
   ──────────────────────────────────────────────────────────────────────────── */
.tamano2 {
    font-family: var(--dg-font-family);
    font-size: var(--tamano2-font-size);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0;
}

.tamano3 {
    font-family: var(--tamano3-font-family);
    font-size: var(--tamano3-font-size);
    font-weight: var(--tamano3-font-weight);
    letter-spacing: var(--tamano3-letter-spacing);
    line-height: var(--tamano3-line-height);
    margin: 0;
}

.tamano4 {
    font-family: var(--tamano4-font-family);
    font-size: var(--tamano4-font-size);
    font-weight: var(--tamano4-font-weight);
    letter-spacing: var(--tamano4-letter-spacing);
    line-height: var(--tamano4-line-height);
    margin: 0;
}

.tamano5 {
    font-family: var(--tamano5-font-family);
    font-size: var(--tamano5-font-size);
    font-weight: var(--tamano5-font-weight);
    letter-spacing: var(--tamano5-letter-spacing);
    line-height: var(--tamano5-line-height);
    margin: 0;
}

.tamano6 {
    font-family: var(--tamano6-font-family);
    font-size: var(--tamano6-font-size);
    font-weight: var(--tamano6-font-weight);
    letter-spacing: var(--tamano6-letter-spacing);
    line-height: var(--tamano6-line-height);
    margin: 0;
}

.tamano6-boldcta {
    font-family: var(--tamano6-boldcta-font-family);
    font-size: var(--tamano6-boldcta-font-size);
    font-weight: var(--tamano6-boldcta-font-weight);
    letter-spacing: var(--tamano6-boldcta-letter-spacing);
    line-height: var(--tamano6-boldcta-line-height);
    margin: 0;
}

.tamano7 {
    font-family: var(--tamano7-font-family);
    font-size: var(--tamano7-font-size);
    font-weight: var(--tamano7-font-weight);
    letter-spacing: var(--tamano7-letter-spacing);
    line-height: var(--tamano7-line-height);
    margin: 0;
}

.tamano-7-mediumcta {
    font-family: var(--tamano-7-mediumcta-font-family);
    font-size: var(--tamano-7-mediumcta-font-size);
    font-weight: var(--tamano-7-mediumcta-font-weight);
    letter-spacing: var(--tamano-7-mediumcta-letter-spacing);
    line-height: var(--tamano-7-mediumcta-line-height);
    margin: 0;
}

.tamano8 {
    font-family: var(--tamano8-font-family);
    font-size: var(--tamano8-font-size);
    font-weight: var(--tamano8-font-weight);
    letter-spacing: var(--tamano8-letter-spacing);
    line-height: var(--tamano8-line-height);
    margin: 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   COLORES · Clases utilitarias (texto y fondos)
   ──────────────────────────────────────────────────────────────────────────── */
.color-1-headings-dark {
    color: var(--color-1-headings-dark);
}

.color-1-body-dark {
    color: var(--color-1-body-dark);
}

.color-1-body-light {
    color: var(--color-1-body-light);
}

.color-2-headings-dark {
    color: var(--color-2-headings-dark);
}

.color-2-headings-light {
    color: var(--color-2-headings-light);
}

.color-2-body-light {
    color: var(--color-2-body-light);
}

.color-3-headings-dark {
    color: var(--color-3-headings-dark);
}

.color-3-body-dark {
    color: var(--color-3-body-dark);
}

.color-4-headings-light {
    color: var(--color-4-headings-light);
}

.background-1-dark {
    background-color: var(--background-1-dark);
}

.background-1-light {
    background-color: var(--background-1-light);
}

.background-2-dark {
    background-color: var(--background-2-dark);
}

.background-2-light {
    background-color: var(--background-2-light);
}

/* ────────────────────────────────────────────────────────────────────────────
   BOTONES · color-boton-1/2/3 y boton-4/5
   Patrón usado por las plantillas:
       class="btn-round color-boton-2-normal color-boton-2-hover
              color-boton-2-texto-normal color-boton-2-texto-hover"
   → fondo normal + fondo hover + texto normal + texto hover.
   ──────────────────────────────────────────────────────────────────────────── */
.color-boton-1-normal {
    background-color: var(--color-boton-1-normal);
}

.color-boton-1-hover:hover {
    background-color: var(--color-boton-1-hover);
}

.color-boton-1-texto-normal {
    color: var(--color-boton-1-texto-normal);
}

.color-boton-1-texto-hover:hover {
    color: var(--color-boton-1-texto-hover);
}

.color-boton-2-normal {
    background-color: var(--color-boton-2-normal);
}

.color-boton-2-hover:hover {
    background-color: var(--color-boton-2-hover);
}

.color-boton-2-texto-normal {
    color: var(--color-boton-2-texto-normal);
}

.color-boton-2-texto-hover:hover {
    color: var(--color-boton-2-texto-hover);
}

.color-boton-3-normal {
    background-color: var(--color-boton-3-normal);
}

.color-boton-3-hover:hover {
    background-color: var(--color-boton-3-hover);
}

.color-boton-3-texto-normal {
    color: var(--color-boton-3-texto-normal);
}

.color-boton-3-texto-hover:hover {
    color: var(--color-boton-3-texto-hover);
}

.boton-4-texto-normal {
    color: var(--boton-4-texto-normal);
}

.boton-4-texto-hover:hover {
    color: var(--boton-4-texto-hover);
}

.boton-5-texto-normal {
    color: var(--boton-5-texto-normal);
}

.boton-5-texto-hover:hover {
    color: var(--boton-5-texto-hover);
}

/* Botón redondo base (los estilos específicos de cada sección vienen inline
   en cada plantilla: .cta_curvy1_3_1_2 .btn-round, .listado_podcast ...). */
.btn-round {
    border-radius: 60px;
    padding: 15px 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: all ease 0.3s;
    border: 0;
    cursor: pointer;
    font-family: var(--dg-font-family);
}

.btn-round:hover {
    text-decoration: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   AJUSTES DE COHERENCIA · Variantes claras
   ────────────────────────────────────────────────────────────────────────────
   Las variantes claras reutilizan tokens de botones (color-boton-1) para las
   etiquetas de autor/tags que van sobre fondo claro; ahí el texto debe ser
   oscuro (no blanco). También se fuerza el hover de los botones de CTA al
   estilo del tema (fondo #a3ef00 + texto #101010).
   ──────────────────────────────────────────────────────────────────────────── */
.blogcuryv1_7_1_1 .noticia-item .meta .color-boton-1-texto-normal {
    color: var(--color-1-body-dark);
}

.cta_curvy1_3_1_1 .btn-round:hover,
.cta_curvy1_3_1_2 .btn-round:hover {
    color: #101010 !important;
}

/* Iconos SVG de los headers oscuros: las plantillas traen fill="#2B275C"
   (navy de Artesan) incrustado, invisible sobre el fondo oscuro del tema.
   Se fuerza que hereden el color del texto adyacente (blanco) vía
   `currentColor`, sin tocar los SVG. Los iconos de las secciones claras
   se dejan tal cual (el navy se ve bien sobre fondo claro). */
.blogcuryv1_7_1_2 .headercuryv1_7_1_2 svg path,
.blog_page_7_1 .header svg path,
.blog_page_7_2 .header svg path {
    fill: currentColor;
}

/* Enlaces dentro de las cenefas conservan el color heredado */
.blogcuryv1_7_1_1 a,
.blogcuryv1_7_1_2 a,
.blog_page_7_1 a,
.blog_page_7_2 a,
.cta_curvy1_3_1_1 a,
.cta_curvy1_3_1_2 a {
    text-decoration: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE · Escala de tipografía
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .tamano2 {
        font-size: var(--tamano2-font-size-tablet);
    }

    .tamano3 {
        font-size: var(--tamano3-font-size-tablet);
    }

    .tamano4 {
        font-size: var(--tamano4-font-size-tablet);
    }

    .tamano5 {
        font-size: var(--tamano5-font-size-tablet);
    }

    .tamano6 {
        font-size: var(--tamano6-font-size-tablet);
    }

    .tamano7 {
        font-size: var(--tamano7-font-size-tablet);
    }

    .tamano-7-mediumcta {
        font-size: var(--tamano-7-mediumcta-font-size-tablet);
    }

    .tamano8 {
        font-size: var(--tamano8-font-size-tablet);
    }
}

@media (max-width: 768px) {
    .tamano2 {
        font-size: var(--tamano2-font-size-mobile);
    }

    .tamano3 {
        font-size: var(--tamano3-font-size-mobile);
    }

    .tamano4 {
        font-size: var(--tamano4-font-size-mobile);
    }

    .tamano5 {
        font-size: var(--tamano5-font-size-mobile);
    }

    .tamano6 {
        font-size: var(--tamano6-font-size-mobile);
    }

    .tamano7 {
        font-size: var(--tamano7-font-size-mobile);
    }

    .tamano-7-mediumcta {
        font-size: var(--tamano-7-mediumcta-font-size-mobile);
    }

    .tamano8 {
        font-size: var(--tamano8-font-size-mobile);
    }
}