/* ====================================================
   SINGLE EDITORIAL — vista de post en 2 columnas
   Layout simple: CSS Grid 2-col, full-bleed.
   El frame NO tiene padding ni margin — ocupa todo el ancho del viewport.
   Cada columna (.single-editorial__main, .single-editorial__sidebar)
   maneja su propio padding interno.

   Carga: SOLO cuando el post tiene meta tedic-use-editorial-template=1
   ==================================================== */

/* Variables */
:root {
    --single-primary: #564FFF;
    --single-primary-soft: #C2C0FE; /* spec Figma: lavanda soft border container */
    --single-text-title: #0F172A;
    --single-text-body: #1F2937;
    --single-text-secondary: #475569;
    --single-text-meta: #6B7280;
    --single-divider: #E5E7EB;
    --single-bg-soft: #F7F8FB;
    --single-bg-neutral: #F6F6F7; /* spec Figma: gris neutro claro (header container) */
    --single-font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* spec Figma: Lato es la fuente principal; usada por TODO el single-editorial */
}

/* Aplicar Lato a TODO el scope del single-editorial */
.single-editorial,
.single-editorial *,
.single-editorial *::before,
.single-editorial *::after {
    font-family: var(--single-font-family);
}

/* FRAME — full-bleed, sin padding, sin margin */
.single-editorial {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--single-font-family); /* Lato desde el frame (heredada a todos los hijos) */
    color: var(--single-text-body);
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 768px)  { /* columnas manejan su propio padding */ }
@media (min-width: 1024px) {
    .single-editorial {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}
@media (min-width: 1280px) {
    .single-editorial {
        grid-template-columns: minmax(0, 1fr) 450px; /* sidebar 450px pantallas grandes */
    }
}
@media (min-width: 1920px) {
    .single-editorial {
        grid-template-columns: minmax(0, 1fr) 450px; /* sidebar 450px */
    }
}

.single-editorial *,
.single-editorial *::before,
.single-editorial *::after { box-sizing: border-box; }

/* MAIN — columna izquierda, padding lateral 80px alinea con header (.container-ir x=65 en 1280)
   El padding lateral uniforme header/main ≈ 80px en viewport 1280 evita que el
   contenido del post quede pegado al borde. */
.single-editorial__main {
    min-width: 0;
    max-width: 100%;
    grid-column: 1;
    padding-top: 32px;
    padding-bottom: 64px;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 768px)  { .single-editorial__main { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .single-editorial__main { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1280px) { .single-editorial__main { padding-left: 64px; padding-right: 64px; } }
@media (min-width: 1920px) { .single-editorial__main { padding-left: 96px; padding-right: 96px; } }

.single-editorial__header { margin-bottom: 32px; }

.single-editorial__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* chips unificados con el patrón del grid del repositorio */
/* (.pge-block .pge-card__pill). Sin distinción cat/tag.
   Normal: text gris #6B7494 + border #D1D5DB + bg transparente.
   Hover:  text violeta brand #564FFF + border violeta brand. NO cambia bg.
   Active: text dark navy #12102E + border dark navy. */
.single-editorial__chip,
a.single-editorial__chip {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #D1D5DB !important;
    border-radius: 9999px;
    color: #6B7494 !important;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    vertical-align: middle;
    background: transparent;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

/* Variante --tag: MISMO estilo que base. Sin distinción visual cat/tag.
   Antes tenia fondo #E8EAF2 (lila) que rompía uniformidad. */
.single-editorial__chip--tag,
a.single-editorial__chip--tag {
    background: transparent !important;
    border-color: #D1D5DB !important;
    color: #6B7494 !important;
}

a.single-editorial__chip:hover,
a.single-editorial__chip:focus {
    color: #564FFF !important;
    border-color: #564FFF !important;
    text-decoration: none !important;
    background: transparent;
}

a.single-editorial__chip:active {
    color: #12102E !important;
    border-color: #12102E !important;
    background: transparent;
    text-decoration: none !important;
}

.single-editorial__title {
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--single-text-title);
    letter-spacing: -0.015em;
}

.single-editorial__subtitle {
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 20px;
    color: var(--single-text-secondary);
}

.single-editorial__meta {
    font-size: 13px;
    color: var(--single-text-meta);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.single-editorial__meta strong,
.single-editorial__meta [itemprop="author"] { color: var(--single-text-meta); font-weight: 400; }
.single-editorial__sep { color: var(--single-text-meta); padding: 0 2px; }

/* FEATURED — imagen destacada del SIDEBAR.
   FULL-BLEED: rompe el padding lateral del aside (-20px a cada lado)
   para que la imagen quede PEGADA al borde derecho del viewport.
   NO margin-top, NO padding-top: pegada al header.
   NO border, NO border-radius, NO background: solo la imagen.
   El caption es SOLO TEXTO: padding lateral chico (16px), NO grande.
   La imagen destacada NO debe tener márgenes laterales; el sidebar NO debe
   tener padding, cada card o div es el que debe tener el padding (no la
   imagen de arriba). */
.single-editorial__featured {
    margin: 0 -20px 44px;     /* gap 44px entre la imagen y el bloque siguiente */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
    display: block;
}

@media (min-width: 1024px) {
    .single-editorial__featured { margin: 0 -20px 44px; }
}
@media (min-width: 1280px) {
    .single-editorial__featured { margin: 0 -20px 44px; }
}
@media (min-width: 1920px) {
    .single-editorial__featured { margin: 0 -20px 44px; }
}

/* placeholder invisible para sidebar-articulo sin featured image.
   El height 44px matchea el gap del flex del sidebar (single-editorial__sidebar)
   para que el primer card quede alineado como si hubiera imagen destacada. */
.single-editorial__featured-placeholder {
    height: 44px;
    width: 100%;
    display: block;
}

.single-editorial__featured-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 0;        /* explicito: sin border-radius en la imagen */
    margin: 0;
    padding: 0;
}

.single-editorial__featured-caption {
    display: block;
    padding: 10px 16px;       /* padding lateral UNIFORME 16px (mobile + desktop) */
    font-family: 'Lato', system-ui, sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--single-text-meta);
    background: transparent;
    border: 0;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
}
/* BODY */
.single-editorial__body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--single-text-body);
}

/* Featured image ahora se muestra al inicio del body (entre
   header-share y texto), no al final. Para design=bootcamp. El sidebar
   sigue ocultando el featured (single-editorial__featured). */
.single-editorial__body-featured {
    margin: 0 0 32px;
    padding: 0;
}
.single-editorial__body-featured-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--single-border, #e5e5e5);
}
.single-editorial__body-featured-caption {
    /* Tipografia exacta para el caption de la featured. */
    font-family: 'Lato', system-ui, sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--single-text-meta, #666);
    text-align: left;
    margin-top: 12px;
}

.single-editorial__body p { margin: 0 0 22px; }
.single-editorial__body a { color: var(--single-primary); text-decoration: none; }
.single-editorial__body a:hover { text-decoration: underline; }
.single-editorial__body a:active { color: #12102E; text-decoration: underline; }    
.single-editorial__body h2 { font-size: 24px; font-weight: 700; color: var(--single-text-title); margin: 32px 0 12px; }
.single-editorial__body h3 { font-size: 20px; font-weight: 700; color: var(--single-text-title); margin: 28px 0 10px; }
.single-editorial__body blockquote {
    border-left: 4px solid var(--single-primary);
    padding: 8px 0 8px 18px;
    margin: 24px 0;
    color: var(--single-text-secondary);
    font-style: italic;
}
.single-editorial__body ul,
.single-editorial__body ol { padding-left: 22px; margin: 0 0 22px; }
/* SIDEBAR — columna derecha, full-bleed al borde derecho del viewport.
   SIN padding-top/margin-top: la imagen destacada pegada al header.
   Containers full-bleed (igual que featured image) para que los cards
   toquen los bordes del viewport, no queden flotando en el centro.
   Padding lateral fijo 20px (no responsive): cada card o div interno
   maneja su propio padding. */
.single-editorial__sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 44px; /* separación vertical entre cards */
    grid-column: 2;
    padding: 0 20px 64px;   /* 64px bottom para que el último bloque no quede pegado al footer */
    border-left: 1px solid var(--single-divider);
}

/* El sidebar mantiene 20px fijo (NO responsive) porque rompe ese mismo
   20px con margin negativo para hacer full-bleed de la imagen destacada y los cards
   related/share. Si fuera responsive, el -20px del featured quedaría corto y la
   imagen mostraría padding lateral fantasma en 1024+ (32-96px sidebar vs -20px margen). */
@media (min-width: 1024px) {
    .single-editorial__sidebar > .single-editorial__related,
    .single-editorial__sidebar > .single-editorial__share {
        margin-left: 0;
        margin-right: 0;
    }
}
@media (min-width: 1280px) {
    .single-editorial__sidebar > .single-editorial__related,
    .single-editorial__sidebar > .single-editorial__share {
        margin-left: 0;
        margin-right: 0;
    }
}
@media (min-width: 1920px) {
    .single-editorial__sidebar > .single-editorial__related,
    .single-editorial__sidebar > .single-editorial__share {
        margin-left: 0;
        margin-right: 0;
    }
}

/* SHARE — sección de iconos para compartir.
   Título centrado, uppercase, color primary. Iconos y pictogramas usan el
   MISMO primary del título (no negro). */
.single-editorial__share {
    padding: 0;            /* sin padding arriba/abajo */
    text-align: center;
}

.single-editorial__header-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    text-align: left;
    justify-content: flex-start;
}
.single-editorial__header-share .single-editorial__share-title {
    display: none;                  
}
.single-editorial__header-share .single-editorial__share-icons {
    justify-content: flex-start;    
    gap: 12px;
}
.single-editorial__header-share .single-editorial__share {
    text-align: left;
    display: contents;              /* deja que flex del contenedor padre aplique */
}

.single-editorial__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 32px;
    padding-top: 0;
    border-top: none;
}

.single-editorial__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 9999px;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.single-editorial__action--primary {
    background: var(--single-primary, #564FFF);
    color: #fff;
    border: 1.5px solid var(--single-primary, #564FFF);
}
.single-editorial__action--primary:hover {
    background: #3734A3;                  
    border-color: #3734A3;
}
.single-editorial__action--primary:active {  
    background: #12102E;
    border-color: #12102E;
}

.single-editorial__action--outline {
    background: transparent;
    color: var(--single-primary, #564FFF);
    border: 1.5px solid var(--single-primary, #564FFF);
}
.single-editorial__action--outline:hover {
    background: rgba(86, 79, 255, 0.04);
}
.single-editorial__action--outline:active {   
    background: rgba(18, 16, 46, 0.06);
    border-color: #12102E;
    color: #12102E;
}

.single-editorial__share-title {
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 6%;
    color: #564FFF;       /* gris-violáceo medio, color primary de marca */
    text-transform: none;
    margin: 0 0 20px;     /* 20px debajo del título */
    text-align: center;
}

.single-editorial__share-icons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.single-editorial__share-icon {
    width: 43px;
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--single-primary-soft);
    background: white;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.single-editorial__share-icon:hover {
    border-color: var(--single-primary);
    transform: translateY(-1px);
}
.single-editorial__share-icon:active {        
    border-color: #12102E;
    transform: translateY(0);
}

.single-editorial__share-icon img.single-editorial__share-glyph {
    display: block;
    width: 22px;
    height: 22px;
}

/* SIDEBAR COMPONENTS — variantes investigación y bootcamp. */
.single-editorial__downloads {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.single-editorial__downloads-title {
    
    margin: 0 0 12px;
    text-align: center;
    color: var(--single-primary, #564FFF);
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.single-editorial__download {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--single-primary);
    border-radius: 9999px;
    background: var(--single-primary);
    color: white;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.single-editorial__download:hover {
    color: white;
    opacity: 0.92;
    transform: translateY(-1px);
}
.single-editorial__download:active {       
    color: white;
    opacity: 1;
    transform: translateY(0);
}

.single-editorial__event {
    display: block;
    padding: 22px 20px;
    border: 1px solid var(--single-divider);
    border-radius: 12px;
    background: white;
    color: inherit;
    text-decoration: none;
}
.single-editorial__event-title {
    margin: 0;
    color: var(--single-text-title);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}
.single-editorial__event-meta {
    margin: 8px 0 0;
    color: var(--single-text-meta);
    font-size: 12px;
}
.single-editorial__event-cta {
    display: inline-block;
    margin-top: 12px;
    color: var(--single-primary);
    font-size: 13px;
    font-weight: 600;
}

.single-editorial__sidebar--bootcamp {
    padding-top: 24px;
}
.single-editorial__sidebar--bootcamp .single-editorial__share,
.single-editorial__sidebar--bootcamp .single-editorial__downloads,
.single-editorial__sidebar--investigacion .single-editorial__share,
.single-editorial__sidebar--investigacion .single-editorial__downloads {
    padding-top: 8px;
}

/* CONTAINER — caja que envuelve grupos de items (Investigaciones, Otros articulos).
   Border violeta claro, background gris-lavanda muy tenue, border-radius generoso. */
.single-editorial__related {
    /* Container: SIN padding general, el padding lo tiene cada parte.
       overflow:hidden respeta el radius sin que el SVG se salga del card. */
    border: 1px solid var(--single-primary-soft);
    background: #F6F6F7; /* spec: gris neutro lavanda */
    border-radius: 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.single-editorial__related-section-title {
    /* Header: padding interno propio (es una "parte" del container) */
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 6%;
    color: #564FFF;
    text-transform: none;
    margin: 0;
    text-align: center;
    padding: 14px 16px; /* spec Figma: 14/16 mas compacto */
    border-bottom: 0; /* spec: sin border-bottom (separacion solo por bg) */
    background: #F6F6F7; /* spec: header gris MUY CLARO (era white) */
    white-space: nowrap; /* forzar 1 linea */
}

.single-editorial__related-card {
    /* Card: padding interno propio */
    display: flex;
    flex-direction: column;
    gap: 6px; /* gap compacto entre líneas del card */
    padding: 16px 16px;
    border: 0;
    border-top: 1px solid var(--single-primary-soft);
    border-radius: 0;
    background: white; /* cards blancos sobre container gris */
    text-decoration: none;
    color: inherit;
    cursor: pointer; /* <a> tenia esto implicitamente; <div role=link> lo necesita */
    transition: background 0.15s ease;
}

.single-editorial__related-card:hover {
    background: rgba(86, 79, 255, 0.04); /* hover lavanda muy sutil */
}
.single-editorial__related-card:active {    
    background: rgba(18, 16, 46, 0.06); /* pressed más oscuro */
}
.single-editorial__related-card:first-child {
    border-top: 0; /* el container tiene border-top, no queremos doble línea */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.single-editorial__related-card:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.single-editorial__related-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.single-editorial__related-pill {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--single-divider); /* borde gris neutro */
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--single-text-meta); /* texto gris neutro */
    background: white;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.single-editorial__related-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--single-text-title);
    margin: 12px 0 0; /* spec: 12px top, 0 */
}

.single-editorial__related-meta {
    font-size: 12px;
    color: var(--single-text-meta);
    margin: 0;
}

.single-editorial__related-cta {
    font-size: 14px;            /* flecha más grande que el meta */
    font-weight: 600;
    font-family: var(--single-font-family); /* Lato en TODO */
    color: var(--single-primary);
    margin-top: 12px;
}

.single-editorial__related-thumb {
    display: none; /* oculto: la imagen satura el container pequeño */
}

/* ====================================================
   OTRAS EDICIONES — variante sidebar Bootcamp

   Replica la estética de los __related-card del sidebar Articulo/Investig
   (mismos pills white-bg/grey-text/grey-border, padding compacto, hover
   lavanda muy sutil) con dos diferencias exclusivas del container de
   Bootcamp:

   (1) container SINGLE-EDITORIAL__EDITIONS:
       - bg gris #F6F6F7 + border 1px solid #BBB9FF
       - border-radius 16px
       - padding interno 12px
       - cards internos siguen siendo independientes con su propio radius

   (2) header title SINGLE-EDITORIAL__EDITIONS-TITLE:
       - bg #F6F6F7 (mismo del container, sin separación extra)

   (3) cards SINGLE-EDITORIAL__EDITION-CARD:
       - misma estética que __related-card: padding 16/16, gap 6px, hover SOLO
         background (sin transform, sin borde, sin translate — sutil).
       - border-radius 12px en TODAS las esquinas de cada card (no solo
         top/bottom).
       - separados por GAP vertical de 8px, no por border-top divisor.
       - border de cada card: 1px solid #DCE0EC.
       - pill bg white + border grey + text grey (idéntico a __related-pill).

   Diferencias estructurales del container (borde + radius 16) se hacen
   explícitas arriba; el resto (tipografía, padding interno, hover)
   coincide palabra por palabra con los items de los otros sidebars.
   ==================================================== */
.single-editorial__editions {
    background: #F6F6F7;
    border: 1px solid #BBB9FF; /* lavanda sutil */
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* separación real entre cards, no border-top */
}
.single-editorial__editions-title {
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 6%;
    color: #564FFF;
    text-transform: none;
    margin: 0;
    text-align: center;
    padding: 0 16px 12px; /* padding top 0 */
    background: #F6F6F7;
    border: 0;
    border-bottom: 0;
    white-space: nowrap;
}
.single-editorial__edition-card {
    /* Estilo idem __related-card + border radius 12px en todas las esquinas.
       Hover SOLO background. */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px; /* padding compacto */
    border: 1px solid #DCE0EC; /* borde gris #dce0ec */
    border-radius: 12px;        /* TODAS las esquinas */
    background: white;
    text-decoration: none;
    color: inherit;
    cursor: pointer; /* <a> tenia esto implicitamente; <div role=link> lo necesita */
    transition: background 0.15s ease;
}
.single-editorial__edition-card:hover {
    /* Efecto sutil: SOLO background — sin transform, sin cambio de border,
       sin translate. */
    background: rgba(86, 79, 255, 0.04);
}
.single-editorial__edition-card:active {        
    background: rgba(18, 16, 46, 0.06);
}
.single-editorial__edition-pill {
    /* Idéntico a __related-pill */
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #b0b8d0;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--single-text-meta);
    background: white;
    text-transform: capitalize;
    letter-spacing: 0.01em;
    align-self: flex-start;
}
.single-editorial__edition-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--single-text-title);
    margin: 0;
}
.single-editorial__edition-meta {
    font-size: 12px;
    color: var(--single-text-meta);
    margin: 0;
}

/* Arrow icon (SVG) — usado en CTAs "Leer →" de sidebars, single-editorial card, repositorio header. SVG = glifo Lato SemiBold (U+2192). Reemplaza unicode "→" que renderizaba ~75% del texto en Lato. SVG inline via tedic_arrow_svg() PHP helper en functions.php. */
.single-editorial__arrow,
.spe-arrow {
    display: inline-block;
    vertical-align: -0.05em;
    width: 0.95em;
    height: 0.62em;
    margin-left: 0.1em;
    color: inherit;
    flex-shrink: 0;
}
.single-editorial__arrow svg,
.spe-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.single-editorial__edition-cta {
    font-size: 14px;            /* flecha más grande que el meta */
    font-weight: 600;
    font-family: var(--single-font-family); /* Lato en TODO */
    color: var(--single-primary);
    margin-top: 12px;
}

/* MOBILE: sidebar debajo del main, sin border-left */
@media (max-width: 1023px) {
    .single-editorial__sidebar {
        grid-column: 1;
        border-left: none;
        border-top: 1px solid var(--single-divider);
        padding-top: 32px;
        margin-top: 16px;
    }
}

/* botones .wp-block-button dentro del body del single editorial
 * (ej: bloque "Descargar" en el content del post investigacion) deben
 * tener el mismo estilo que "Descargar PDF en Español" (primary).
 * Cubrimos normal + hover + active (pressed). Solo aplica a los botones
 * que el editor Gutenberg inserta en el content, no al sidebar ni a
 * otras instancias fuera del single editorial. */
.single-editorial__body .wp-block-button__link,
.single-editorial__body a.wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    border-radius: 9999px !important;
    background: var(--single-primary, #564FFF) !important;
    color: #fff !important;
    border: 1.5px solid var(--single-primary, #564FFF) !important;
    font-family: 'Lato', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    min-height: 43px !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.single-editorial__body .wp-block-button__link:hover,
.single-editorial__body a.wp-block-button__link:hover {
    background: #3734A3 !important;
    border-color: #3734A3 !important;
    color: #fff !important;
}
.single-editorial__body .wp-block-button__link:active,
.single-editorial__body a.wp-block-button__link:active,
.single-editorial__body .wp-block-button__link:focus-visible,
.single-editorial__body a.wp-block-button__link:focus-visible {
    background: #12102E !important;
    border-color: #12102E !important;
    color: #fff !important;
    outline: none !important;
}

/* MOBILE */
@media (max-width: 768px) {
    .single-editorial__title { font-size: 26px; }
    .single-editorial__subtitle { font-size: 15px; }
    .single-editorial__body { font-size: 16px; line-height: 1.6; }
    .single-editorial__related-card { padding: 12px; }
}

/* featured mobile-only para investigaciones Y articulos.
 * - Desktop (>1024px): hidden (la featured vive en el sidebar)
 * - Mobile (<=1024px): se muestra debajo de los botones share.
 * - Imagen SIN border ni border-radius ('no debe tener borde
 *   ni estar redondeado'). */
@media (min-width: 1025px) {
    .single-editorial__mobile-featured { display: none !important; }
}
@media (max-width: 1024px) {
    .single-editorial__mobile-featured {
        display: block !important;
        margin: 16px 0 24px;
        padding: 0;
    }
    .single-editorial__mobile-featured-img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0 !important;
        border: none !important;
    }
    .single-editorial__mobile-featured-caption {
        font-family: 'Lato', system-ui, sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.4;
        color: var(--single-text-meta, #666);
        text-align: left;
        margin-top: 10px;
    }
}

/* en mobile para investigacion:
 * - sidebar sin border-top (antes tenia 1px solid var(--single-divider))
 * - botones de Descargar del sidebar ocultos (mobile-featured los suple)
 * Scope: solo investigacion, no afecta otros designs. */
@media (max-width: 1024px) {
    .single-editorial[data-content-type="investigacion"] .single-editorial__sidebar {
        border-top: none !important;
    }
    .single-editorial[data-content-type="investigacion"] .single-editorial__sidebar .single-editorial__downloads,
    .single-editorial[data-content-type="investigacion"] .single-editorial__sidebar .single-editorial__download {
        display: none !important;
    }
}

/* en mobile OCULTAMOS la featured del sidebar que normalmente queda al
 * final del sidebar (la que se veia antes de existir el componente
 * mobile). Aplica para investigacion y articulo. */
@media (max-width: 1024px) {
    .single-editorial[data-content-type="investigacion"] .single-editorial__sidebar > .single-editorial__featured,
    .single-editorial[data-content-type="articulo"] .single-editorial__sidebar > .single-editorial__featured {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .single-editorial__title { font-size: 22px; }
    .single-editorial__meta { font-size: 12px; }
}

/* ====================================================
   CATEGORY EDITORIAL — archive de categoria
   Header + grid 2-col + sidebar. Mismo container del single-editorial.
   ==================================================== */
.category-editorial {
    width: 100%;
    max-width: 100%;
}

.category-editorial__header {
    margin: 0 0 32px;
    padding: 0;
}

.category-editorial__eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--single-primary);
    text-transform: uppercase;
    margin: 0 0 12px;
}

.category-editorial__title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--single-text-title);
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.category-editorial__desc {
    font-size: 18px;
    line-height: 1.5;
    color: var(--single-text-meta);
    margin: 0 0 0;
    max-width: 760px;
}

.category-editorial__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .category-editorial__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.category-editorial__empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--single-text-meta);
}

.category-editorial__pagination {
    margin-top: 48px;
    text-align: center;
}

.category-editorial__pagination a,
.category-editorial__pagination span {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--single-primary);
    font-weight: 600;
}

.category-editorial__pagination a:hover {
    background: var(--single-primary-soft);
    color: white;
}
.category-editorial__pagination a:active {    
    background: #12102E;
    color: white;
}

.category-editorial__pagination .current {
    background: var(--single-primary);
    color: white;
}

.category-editorial__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-editorial__filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--single-primary-soft);
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--single-primary);
    text-decoration: none;
    background: white;
    transition: background 0.15s ease, color 0.15s ease;
}

.category-editorial__filter-pill:hover {
    background: var(--single-primary);
    color: white;
}
.category-editorial__filter-pill:active {    
    background: #12102E;
    color: white;
}

.category-editorial__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    background: var(--single-primary-soft);
    color: var(--single-primary);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
}

.category-editorial__filter-pill:hover .category-editorial__filter-count {
    background: white;
    color: var(--single-primary);
}

@media (max-width: 768px) {
    .category-editorial__title { font-size: 32px; }
    .category-editorial__desc { font-size: 16px; }
}

@media (max-width: 480px) {
    .category-editorial__title { font-size: 26px; }
}

/* ====================================================
   UTILITY: container-20 — padding lateral responsive (20px mobile → 80px desktop)
   Padding uniforme entre header y main en viewports ≥1024 (alineado con
   .single-editorial__main). Mobile mantiene 20px para legibilidad. Las 8
   pages sin sidebar aplican esta utility para tener gap uniforme con el
   resto del theme.
   ==================================================== */
.container-20 {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .container-20 {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media (min-width: 1024px) {
    .container-20 {
        max-width: 960px;
        padding-left: 80px;
        padding-right: 80px;
    }
}
@media (min-width: 1280px) {
    .container-20 {
        max-width: 1200px;
    }
}