/* ============================================================
   Reload News Grid — Block Styles v3
   CSS se inyecta INLINE en <head> → no depende de URLs/rewrites.
   Overrides específicos contra Asap Theme:
     img { height:auto; object-fit:contain }
     img { box-shadow:0 0 8px #fff }
     a   { display:inline } (UA default)
     a   { color: azul; text-decoration:underline }
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    --rng-red:     #cc0000;
    --rng-black:   #0b0b0b;
    --rng-dark-bg: #0c0d10;
    --rng-gray:    #4d4d4d;
    --rng-gray-lt: #e2e2e2;
    --rng-bg:      #f0f0f0;
    --rng-white:   #ffffff;
    --rng-font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --rng-gap:     18px;
    --rng-trans:   .25s ease;
}

/* ── Reset del bloque ────────────────────────────────────────── */
.rng-block,
.rng-block * { box-sizing: border-box; }
.rng-block   { font-family: var(--rng-font); }

/* Reset global de links DENTRO del bloque
   Asap pone color azul / underline en todos los <a> */
.rng-block a,
.rng-block a:link,
.rng-block a:visited,
.rng-block a:hover,
.rng-block a:active {
    text-decoration: none !important;
    box-shadow:      none !important;
}

/* ════════════════════════════════════════════════════════════
   SISTEMA DE IMÁGENES
   padding-top container + img position:absolute
   Solución inmune a "height:auto", "box-shadow" y
   "display:inline" de <a> que tiene Asap.
   ════════════════════════════════════════════════════════════ */

/* El wrapper de imagen es un <a>; forzar block */
.rng-block .rng-card__img-wrap {
    display:    block !important;   /* <a> es inline por defecto */
    position:   relative !important;
    overflow:   hidden !important;
    width:      100%;
    height:     0 !important;       /* padding-top define la altura; !important crítico para badge */
    padding:    0 !important;
    margin:     0 !important;
    background: var(--rng-bg);
    line-height: 0 !important;
}

/* Aspect ratios via padding-top */
.rng-block .rng-card__img-wrap--3x2  { padding-top: 66.667% !important; }
.rng-block .rng-card__img-wrap--16x9 { padding-top: 56.25%  !important; }
.rng-block .rng-card__img-wrap--4x3  { padding-top: 75%     !important; }
.rng-block .rng-card__img-wrap--1x1  { padding-top: 100%    !important; }

/* La imagen llena el container absolutamente */
.rng-block .rng-card__img-wrap img {
    position:        absolute !important;
    top:             0 !important;
    left:            0 !important;
    right:           0 !important;
    bottom:          0 !important;
    width:           100% !important;
    height:          100% !important;
    object-fit:      cover !important;
    object-position: center !important;
    display:         block !important;
    margin:          0 !important;
    padding:         0 !important;
    max-width:       none !important;
    max-height:      none !important;
    box-shadow:      none !important;   /* Asap pone 0 0 8px #fff */
    border:          none !important;
    transition:      transform var(--rng-trans);
}
.rng-block .rng-card:hover .rng-card__img-wrap img {
    transform: scale(1.04);
}

/* Badge de categoría: sobre la imagen */
.rng-block .rng-card__badge {
    position:     absolute !important;
    bottom:       10px !important;
    left:         10px !important;
    z-index:      5 !important;
    display:      inline-block !important;
    background:   var(--rng-red) !important;
    color:        #fff !important;
    font-size:    10px !important;
    font-weight:  800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding:      3px 8px !important;
    border-radius: 2px !important;
    line-height:  1 !important;
}
.rng-block .rng-card__badge a {
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Cabecera de sección ──────────────────────────────────── */
/* ── Cabecera de sección: TÍTULO CENTRADO para foco visual central ── */
.rng-section-head {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    position:        relative !important;
    border-bottom:   2px solid var(--rng-black);
    padding-bottom:  10px;
    margin-bottom:   20px;
    text-align:      center !important;
}
.rng-section-head__title {
    font-size:       20px !important;
    font-weight:     800 !important;
    letter-spacing:  -.3px;
    margin:          0 auto !important;
    color:           var(--rng-black) !important;
    text-decoration: none !important;
    text-align:      center !important;
}
.rng-section-head__link {
    position:        absolute !important;
    right:           0 !important;
    top:             50%;
    transform:       translateY(-50%);
    font-size:       12px;
    font-weight:     600;
    color:           var(--rng-red) !important;
    white-space:     nowrap;
}

/* ════════════════════════════════════════════════════════════
   CARD — componente base
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   MICRO-INTERACCIÓN DE ENTRADAS: ACERCAMIENTO Y SUPERPOSICIÓN
   Al pasar el ratón o en pantallas táctiles, la entrada se
   superpone y se acerca (zoom / lift) para dinamismo visual.
   ════════════════════════════════════════════════════════════ */
.rng-card,
.rng-block .rng-card,
.rng-layout-list__item,
.rng-layout-dark__list-item,
.rng-h3-sec-item,
.rng-carousel-item {
    position:   relative !important;
    z-index:    1 !important;
    transition: transform 0.28s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.28s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border-radius: 4px !important;
}

/* En hover o toque táctil: superposición y acercamiento */
.rng-card:hover,
.rng-card:focus-within,
.rng-card:active,
.rng-layout-list__item:hover,
.rng-layout-list__item:active,
.rng-layout-dark__list-item:hover,
.rng-layout-dark__list-item:active,
.rng-h3-sec-item:hover,
.rng-h3-sec-item:active,
.rng-carousel-item:hover,
.rng-carousel-item:active {
    transform:  translateY(-4px) scale(1.012) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08) !important;
    z-index:    10 !important;
}

/* En modo oscuro */
.rng-layout-dark .rng-card:hover,
.rng-layout-dark .rng-card:active,
.rng-layout-dark__list-item:hover,
.rng-layout-dark__list-item:active {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important;
}

/* Micro-zoom de imagen al aproximarse */
.rng-card__img-wrap img,
.rng-layout-list__img img,
.rng-layout-dark__list-item-img img,
.rng-h3-sec-img img,
.rng-carousel-img img {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.rng-card:hover .rng-card__img-wrap img,
.rng-layout-list__item:hover .rng-layout-list__img img,
.rng-layout-dark__list-item:hover .rng-layout-dark__list-item-img img,
.rng-h3-sec-item:hover .rng-h3-sec-img img,
.rng-carousel-item:hover .rng-carousel-img img {
    transform: scale(1.04) !important;
}

/* ════════════════════════════════════════════════════════════
   BARRA VERTICAL — SOLAMENTE A LA IZQUIERDA DEL TÍTULO Y CATEGORÍA
   ════════════════════════════════════════════════════════════ */

/* El cuerpo de la tarjeta mantiene su relleno izquierdo ordenado */
.rng-card__body,
.rng-block .rng-card .rng-card__body {
    padding:       10px 0 12px 14px !important;
    position:      relative !important;
    display:       flex !important;
    flex-direction: column !important;
    flex:          1 !important;
}

/* Se elimina cualquier barra que cubra el cuerpo entero */
.rng-card__body::before,
.rng-block .rng-card .rng-card__body::before {
    display: none !important;
}

/* Zona de cabecera (exclusiva de Categoría + Título) */
.rng-card__header-zone {
    position:       relative !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    width:          100% !important;
}

/* Barra vertical roja: ubicada a la izquierda (-14px), cubre ÚNICAMENTE la altura de categoría y título */
.rng-card__header-zone::before {
    content:       '' !important;
    position:      absolute !important;
    top:           1px !important;
    left:          -14px !important;
    width:         3.5px !important;
    height:        0 !important;
    background:    var(--rng-red, #cc0000) !important;
    border-radius: 2px !important;
    transition:    height 0.28s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.28s ease !important;
    opacity:       0 !important;
    pointer-events: none !important;
}

/* Al pasar el ratón o táctil: la barra vertical se despliega cubriendo solo la zona de título y categoría */
.rng-card:hover .rng-card__header-zone::before,
.rng-card:focus-within .rng-card__header-zone::before,
.rng-card:active .rng-card__header-zone::before {
    height:  calc(100% - 2px) !important;
    opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════
   BARRA GRIS DIVISORIA ENTRE TÍTULO Y CONTENIDO
   Separa limpiamente el título del extracto para máxima uniformidad.
   ════════════════════════════════════════════════════════════ */
.rng-card__divider {
    display:       block !important;
    height:        1px !important;
    background:    var(--rng-grid-border_color, var(--rng-gray-lt, #e2e2e2)) !important;
    margin:        8px 0 10px 0 !important;
    width:         100% !important;
    flex-shrink:   0 !important;
    border:        none !important;
}

/* En modo oscuro: la barra gris divisoria se adapta con contraste sutil */
.rng-layout-dark .rng-card__divider {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Elementos internos parten alineados a 14px */
.rng-card__header-zone .rng-super-cat,
.rng-card__header-zone .rng-card__title,
.rng-card__body .rng-card__excerpt,
.rng-card__body .rng-card__meta {
    padding-left: 0 !important;
    margin-left:  0 !important;
}

/* Título de la card */
.rng-card__title {
    font-size:   16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin:      0 0 6px !important;
    padding-left: 7px;
    color:        var(--rng-black) !important;
    transition:  color var(--rng-trans);
    text-decoration: none !important;
}
/* Links dentro del título: neutralizar Asap */
.rng-block .rng-card__title a,
.rng-block .rng-card__title a:link,
.rng-block .rng-card__title a:visited {
    color:           var(--rng-black) !important;
    text-decoration: none !important;
    font-weight:     inherit !important;
}
.rng-block .rng-card:hover .rng-card__title a {
    color: var(--rng-title-hover, var(--rng-red)) !important;
}

/* Tamaños de título */
.rng-card__title--lg { font-size: 26px !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -.3px; }
.rng-card__title--md { font-size: 19px !important; }
.rng-card__title--sm { font-size: 14px !important; font-weight: 600 !important; }
.rng-card__title--xs { font-size: 13px !important; font-weight: 500 !important; }

/* Extracto */
.rng-card__excerpt {
    font-size:   14px;
    color:       var(--rng-gray);
    line-height: 1.55;
    margin:      4px 0 6px;
    padding-left: 7px;
}

/* Meta (fecha / categoría) */
/* ════════════════════════════════════════════════════════════
   METADATOS: AUTOR CONFIGURADO Y FECHA / TIEMPO RELATIVO
   ════════════════════════════════════════════════════════════ */
.rng-card__meta,
.rng-h2-date,
.rng-carousel-date {
    display:        flex !important;
    align-items:    center !important;
    flex-wrap:      wrap !important;
    gap:            4px 6px !important;
    font-size:      11.5px !important;
    color:          var(--rng-meta-color, #888888) !important;
    margin-top:     auto !important;
    padding-top:    6px !important;
    padding-left:   0 !important;
    line-height:    1.3 !important;
}

.rng-card__author {
    font-weight:    600 !important;
    color:          var(--rng-gray, #555555) !important;
    letter-spacing: 0.1px !important;
    text-transform: capitalize;
}

.rng-card__meta-sep {
    color:       var(--rng-gray-lt, #cccccc) !important;
    font-weight: 700 !important;
    font-size:   10px !important;
    user-select: none !important;
    margin:      0 1px !important;
}

.rng-card__date {
    color:       var(--rng-meta-color, #888888) !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
}

/* Metadatos en sección oscura */
.rng-layout-dark .rng-card__meta,
.rng-layout-dark .rng-card__date {
    color: var(--rng-dark-text, #c5c5c5) !important;
}
.rng-layout-dark .rng-card__author {
    color: var(--rng-dark-title, #ffffff) !important;
}
.rng-layout-dark .rng-card__meta-sep {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT: GRID (N columnas)
   ════════════════════════════════════════════════════════════ */
.rng-block .rng-layout-grid {
    display:    grid !important;
    gap:        var(--rng-gap) !important;
    list-style: none !important;
    margin:     0 !important;
    padding:    0 !important;
}
.rng-block .rng-layout-grid--cols-1 { grid-template-columns: 1fr !important; }
.rng-block .rng-layout-grid--cols-2 { grid-template-columns: repeat(2,1fr) !important; }
.rng-block .rng-layout-grid--cols-3 { grid-template-columns: repeat(3,1fr) !important; }
.rng-block .rng-layout-grid--cols-4 { grid-template-columns: repeat(4,1fr) !important; }

/* Generic 900px grid rule removed in v8 */
/* Generic 600px grid rule removed in v8 */

/* ════════════════════════════════════════════════════════════
   LAYOUT: HERO + GRID
   ════════════════════════════════════════════════════════════ */
.rng-layout-hero { display: flex; flex-direction: column; gap: var(--rng-gap); }

.rng-layout-hero__main .rng-card__title--lg { padding-left: 0 !important; margin-bottom: 8px !important; }
.rng-layout-hero__main .rng-card__body::before  { display: none; }
.rng-layout-hero__main .rng-card__excerpt,
.rng-layout-hero__main .rng-card__meta          { padding-left: 0; }

.rng-layout-hero__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--rng-gap);
    border-top: 2px solid var(--rng-gray-lt);
    padding-top: var(--rng-gap);
}
@media (max-width: 768px) { .rng-layout-hero__grid { grid-template-columns: repeat(3, 1fr) !important; } }
/* Obsolete 480px hero grid rule removed in v8 */

/* ════════════════════════════════════════════════════════════
   LAYOUT: LISTA HORIZONTAL
   Alineación simétrica de columnas, barras divisorias tenues
   y full-width en pantallas móviles.
   ════════════════════════════════════════════════════════════ */
.rng-layout-list { display: flex; flex-direction: column; }

.rng-layout-list__item {
    display:        flex !important;
    gap:            16px;
    padding:        14px 0;
    border-bottom:  1px solid var(--rng-gray-lt);
    align-items:    flex-start;
}
.rng-layout-list__item:last-child { border-bottom: none; }

/* Imagen lista (desktop vista horizontal 1 columna) */
.rng-block .rng-layout-list__img {
    flex-shrink: 0 !important;
    display:     block !important;
    width:       110px !important;
    height:      74px  !important;
    overflow:    hidden !important;
    position:    relative !important;
    background:  var(--rng-gray-bg, #f7f7f7);
    min-width:   110px;
}
.rng-block .rng-layout-list__img img {
    position:   absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: transform var(--rng-trans);
}
.rng-layout-list__item:hover .rng-layout-list__img img { transform: scale(1.05); }

.rng-layout-list__body {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
}
.rng-layout-list__body .rng-card__title {
    font-size: 15px !important;
    padding-left: 0 !important;
    margin: 0 0 6px !important;
    line-height: 1.35 !important;
}
.rng-layout-list__body .rng-card__body::before { display: none !important; }
.rng-layout-list__body .rng-card__meta {
    padding-left: 0 !important;
    margin-top: auto !important;
    padding-top: 6px !important;
}

/* ── Columnas de Lista (2 y 3 cols en desktop) ── */
.rng-layout-list--cols-2,
.rng-layout-list--cols-3 {
    display: grid !important;
    gap: var(--rng-gap) !important;
}
.rng-layout-list--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.rng-layout-list--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }

/* Todos los ítems en columnas tienen la barra gris tenue superior y la misma altura */
.rng-layout-list--cols-2 .rng-layout-list__item,
.rng-layout-list--cols-3 .rng-layout-list__item {
    flex-direction: column !important;
    border-bottom:  none !important;
    border-top:     1px solid var(--rng-gray-lt) !important;
    padding:        14px 0 !important;
    height:         100% !important;
    align-items:    stretch !important;
}
.rng-layout-list--cols-2 .rng-layout-list__item:first-child,
.rng-layout-list--cols-3 .rng-layout-list__item:first-child {
    border-top:     1px solid var(--rng-gray-lt) !important;
    padding-top:    14px !important;
}

/* Imagen en columnas de lista: formato 3:2 uniforme */
.rng-layout-list--cols-2 .rng-layout-list__img,
.rng-layout-list--cols-3 .rng-layout-list__img {
    width:       100% !important;
    min-width:   100% !important;
    height:      0 !important;
    padding-top: 66.667% !important;
    margin-bottom: 10px !important;
}

/* Títulos con slot fijo de 2 líneas para alineación vertical idéntica */
.rng-layout-list--cols-2 .rng-card__title,
.rng-layout-list--cols-3 .rng-card__title {
    min-height:         2.8em !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    margin-bottom:      6px !important;
}

/* Extracto con slot fijo de 2 líneas */
.rng-layout-list--cols-2 .rng-card__excerpt,
.rng-layout-list--cols-3 .rng-card__excerpt {
    min-height:         3.1em !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    margin-bottom:      8px !important;
}

/* ── Mobile y Tablets en orientación vertical: IMÁGENES AL ANCHO COMPLETO ── */
/* Obsolete list collapse removed in v8 */

/* ════════════════════════════════════════════════════════════
   LAYOUT: MAGAZINE
   ════════════════════════════════════════════════════════════ */
.rng-layout-magazine {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: var(--rng-gap);
}
.rng-layout-magazine__main .rng-card__body::before { display: none; }
.rng-layout-magazine__side { display: flex; flex-direction: column; gap: var(--rng-gap); }
.rng-layout-magazine__medium-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rng-gap); }
.rng-layout-magazine__medium-grid .rng-card__title { font-size: 14px !important; }
.rng-layout-magazine__list { display: flex; flex-direction: column; }
.rng-layout-magazine__list-item {
    padding: 9px 0;
    border-bottom: 1px solid var(--rng-gray-lt);
    font-size: 13px; font-weight: 600; line-height: 1.4;
    color: var(--rng-black);
    transition: color var(--rng-trans);
}
.rng-layout-magazine__list-item:hover { color: var(--rng-red); }
.rng-layout-magazine__list-item:last-child { border-bottom: none; }
.rng-layout-magazine__list-item a { color: inherit !important; }
@media (max-width: 768px) { .rng-layout-magazine { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   LAYOUT: DARK SECTION
   ════════════════════════════════════════════════════════════ */
/* ── Sección Oscura: Fondo y Contraste Máximo ── */
.rng-layout-dark {
    background:   var(--rng-dark-bg, #0c0d10) !important;
    padding:      24px !important;
    border-radius: 8px !important;
    width:        100% !important;
    max-width:    100% !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    box-sizing:   border-box !important;
}
.rng-layout-dark .rng-section-head {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}
.rng-layout-dark .rng-section-head__title {
    color: var(--rng-dark-title, #ffffff) !important;
}
.rng-layout-dark .rng-section-head__link {
    color: var(--rng-title-hover, #ff5252) !important;
}
.rng-layout-dark .rng-card__title,
.rng-layout-dark .rng-card__title a,
.rng-layout-dark .rng-card__title a:link,
.rng-layout-dark .rng-card__title a:visited,
.rng-block .rng-layout-dark .rng-card__title a,
.rng-block .rng-layout-dark .rng-card__title a:link,
.rng-block .rng-layout-dark .rng-card__title a:visited {
    color: var(--rng-dark-title, #ffffff) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.rng-layout-dark .rng-card:hover .rng-card__title a,
.rng-block .rng-layout-dark .rng-card:hover .rng-card__title a {
    color: var(--rng-title-hover, #ff5252) !important;
}
.rng-layout-dark .rng-card__excerpt,
.rng-block .rng-layout-dark .rng-card__excerpt {
    color: var(--rng-dark-text, #c5c5c5) !important;
}
.rng-layout-dark .rng-card__meta {
    color: rgba(255, 255, 255, 0.6) !important;
}
.rng-layout-dark .rng-card__body::before { background: var(--rng-red); }

.rng-layout-dark__grid {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: var(--rng-gap);
    align-items: start;
}
.rng-layout-dark__list { display: flex; flex-direction: column; }
.rng-layout-dark__list-item {
    display: flex !important;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    align-items: flex-start;
}
.rng-layout-dark__list-item:last-child { border-bottom: none; }

.rng-block .rng-layout-dark__list-item-img {
    flex-shrink: 0 !important;
    display:     block !important;
    width:       90px  !important;
    height:      60px  !important;
    overflow:    hidden !important;
    position:    relative !important;
    background:  #111;
    min-width:   90px;
}
.rng-block .rng-layout-dark__list-item-img img {
    position:   absolute !important;
    top: 0 !important; left: 0 !important;
    width:      100% !important; height: 100% !important;
    object-fit: cover !important;
    display:    block !important;
    margin:     0 !important;
    box-shadow: none !important;
    transition: transform var(--rng-trans);
}
.rng-layout-dark__list-item:hover .rng-layout-dark__list-item-img img { transform: scale(1.05); }

.rng-layout-dark__list-item-title,
.rng-layout-dark__list-item-title a {
    font-size:       13.5px !important;
    font-weight:     700 !important;
    color:           var(--rng-dark-title, #ffffff) !important;
    line-height:     1.4;
    flex:            1;
    text-decoration: none !important;
    transition:      color var(--rng-trans);
}
.rng-layout-dark__list-item:hover .rng-layout-dark__list-item-title,
.rng-layout-dark__list-item:hover .rng-layout-dark__list-item-title a {
    color: var(--rng-title-hover, #ff5252) !important;
}

@media (max-width: 768px) {
    .rng-layout-dark__grid { grid-template-columns: 1fr; }
    .rng-layout-dark { padding: 20px 16px; margin: 0; }
}

/* ── Sin posts ──────────────────────────────────────────────── */
.rng-no-posts {
    padding: 32px; text-align: center;
    border: 2px dashed var(--rng-gray-lt); border-radius: 3px;
    color: #999; font-size: 14px; font-family: var(--rng-font);
}

/* ════════════════════════════════════════════════════════════
   EDITOR — Picker y fix de drag
   ════════════════════════════════════════════════════════════ */
.rng-editor-root { cursor: default; outline: none; }
.rng-ssr-wrap { pointer-events: none; user-select: none; }
.rng-ssr-wrap * { pointer-events: none !important; user-select: none !important; }

.rng-picker { border: 2px dashed #c5d0d8; border-radius: 6px; padding: 24px; background: #f8f9fa; font-family: var(--rng-font); }
.rng-picker__header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #dce0e5; }
.rng-picker__logo { font-size: 28px; line-height: 1; }
.rng-picker__header strong { display: block; font-size: 15px; color: #1e1e1e; }
.rng-picker__header p { margin: 3px 0 0; font-size: 13px; color: #666; }
.rng-picker__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.rng-picker__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; background: #fff; border: 2px solid #dce0e5; border-radius: 6px; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.rng-picker__item:hover { border-color: #cc0000; box-shadow: 0 2px 12px rgba(204,0,0,.12); transform: translateY(-2px); }
.rng-picker__icon { font-size: 26px; line-height: 1; }
.rng-picker__name { font-size: 13px; font-weight: 700; color: #1e1e1e; line-height: 1.2; }
.rng-picker__desc { font-size: 11px; color: #888; line-height: 1.3; }
.rng-ssr-loading { display: flex; align-items: center; gap: 10px; padding: 24px; color: #666; font-size: 13px; justify-content: center; }
.rng-panel-layout-info { display: flex; align-items: center; gap: 10px; background: #f0f3f5; border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.rng-panel-layout-icon { font-size: 22px; line-height: 1; }
.rng-panel-layout-info strong { display: block; font-size: 13px; }
.rng-panel-layout-info p { margin: 2px 0 0; font-size: 11px; color: #666; }

/* Hero 2 styles defined in unified section below */

/* ════════════════════════════════════════════════════════════
   LAYOUT: HERO 3 — CNN Español style
   Alineación simétrica perfecta: textos, categorías, extractos
   y separadores a la misma altura en todas las columnas.
   ════════════════════════════════════════════════════════════ */

.rng-layout-hero3 {
    display:               grid !important;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap:                   var(--rng-gap) !important;
    align-items:           start !important;
}

/* Columnas laterales */
.rng-h3-col--side .rng-card__body::before { display: none !important; }
.rng-h3-col--side .rng-card__body {
    padding:        10px 0 0 !important;
    display:        flex !important;
    flex-direction: column !important;
}
.rng-h3-col--side .rng-card__meta { padding-left: 0 !important; margin-top: auto !important; }

/* Título de los posts laterales (Left 1 y Right 1): slot fijo alineado */
.rng-h3-col--side .rng-card__title {
    font-size:          14px !important;
    font-weight:        700 !important;
    line-height:        1.3 !important;
    margin:             0 0 8px !important;
    min-height:         2.6em !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    padding-left:       0 !important;
}

/* Columna central destacada */
.rng-h3-featured .rng-card__body::before { display: none !important; }
.rng-h3-feat-body {
    padding:        10px 0 0 !important;
    display:        flex !important;
    flex-direction: column !important;
}

/* Título del post central: slot de 2 líneas */
.rng-h3-feat-title {
    font-size:          1.3rem !important;
    font-weight:        800 !important;
    line-height:        1.25 !important;
    margin:             0 0 8px !important;
    min-height:         2.5em !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    color:              var(--rng-black) !important;
}
.rng-h3-feat-title a {
    color:           var(--rng-black) !important;
    text-decoration: none !important;
}
.rng-h3-col--center:hover .rng-h3-feat-title a { color: var(--rng-title-hover, var(--rng-red)) !important; }

/* Extractos en Hero 3: slot fijo idéntico */
.rng-layout-hero3 .rng-card__excerpt {
    padding-left:       0 !important;
    font-size:          13px !important;
    line-height:        1.5 !important;
    min-height:         3.0em !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    margin:             0 0 8px !important;
}

.rng-h3-featured .rng-card__meta {
    padding-left: 0 !important;
    margin-top:   auto !important;
}

/* Separador horizontal entre post superior e ítem secundario */
.rng-h3-sep {
    height:     1px !important;
    background: var(--rng-gray-lt) !important;
    margin:     16px 0 !important;
}

/* Ítem secundario dentro de las columnas laterales */
.rng-h3-sec-item {
    display:     flex !important;
    gap:         12px !important;
    align-items: flex-start !important;
}
.rng-h3-sec-img {
    flex-shrink: 0 !important;
    display:     block !important;
    width:       80px !important;
    height:      56px !important;
    overflow:    hidden !important;
    position:    relative !important;
}
.rng-h3-sec-img img {
    position:   absolute !important;
    top: 0 !important; left: 0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    margin:     0 !important;
    box-shadow: none !important;
}
.rng-h3-sec-body {
    flex: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
}
.rng-h3-sec-title {
    font-size:          13px !important;
    font-weight:        600 !important;
    line-height:        1.35 !important;
    margin:             0 0 4px !important;
    color:              var(--rng-black) !important;
    text-decoration:    none !important;
    min-height:         2.7em !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
}
.rng-h3-sec-title:hover { color: var(--rng-title-hover, var(--rng-red)) !important; }
.rng-h3-sec-body a      { text-decoration: none !important; }

/* ── Responsive hero3 ──
   3 Héroes se mantiene estrictamente en 3 columnas en todas las pantallas (escritorio, tablet y móvil vertical/horizontal). */
.rng-layout-hero3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
.rng-h3-col--center {
    grid-column: auto !important;
    order: 0 !important;
}

/* ============================================================
   FIX: Igual altura y tamaño en todos los layouts
   ============================================================ */

/* ── 1. TODAS las cards: flex-column para que el body
       rellene el espacio sobrante de forma uniforme ────────── */
.rng-block .rng-card {
    display:        flex !important;
    flex-direction: column !important;
}
.rng-block .rng-card .rng-card__body,
.rng-block .rng-h2-body,
.rng-block .rng-h3-feat-body {
    flex:           1 !important;
    display:        flex !important;
    flex-direction: column !important;
}

/* ── 2. GRID estándar: celdas siempre de igual altura ──────── */
.rng-block .rng-layout-grid {
    align-items: stretch !important;
}
.rng-block .rng-layout-grid .rng-card {
    height: 100% !important;
}

/* ── 3. HERO3: 3 columnas IGUALES (1fr cada una)
       La jerarquía del centro viene del título, no del tamaño
       de imagen — así todas las filas tienen la misma altura. ─ */
.rng-layout-hero3 {
    grid-template-columns: 1fr 1fr 1fr !important;
    align-items:           stretch !important;
}
.rng-h3-col {
    display:        flex !important;
    flex-direction: column !important;
    height:         100% !important;
}
/* Título del centro más grande como jerarquía visual */
.rng-h3-feat-title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
}

/* ── 4. HERO2: alineación base ──── */
.rng-layout-hero2 {
    align-items: stretch !important;
}

/* ── 5. HERO original (1 grande + grid): grid secundario igual ─ */
.rng-layout-hero__grid {
    align-items: stretch !important;
}
.rng-layout-hero__grid .rng-card {
    height: 100% !important;
}

/* ── 6. MAGAZINE: grid de 2 medianos igual altura ──────────── */
.rng-layout-magazine__medium-grid {
    align-items: stretch !important;
}
.rng-layout-magazine__medium-grid .rng-card {
    height: 100% !important;
}

/* ── 7. LISTA: igual altura entre columnas ─────────────────── */
.rng-layout-list--cols-2 .rng-layout-list__item,
.rng-layout-list--cols-3 .rng-layout-list__item {
    align-items: stretch !important;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT: CARRUSEL — BBC style
   Cards cuadradas deslizables. Sin scrollbar visible.
   ════════════════════════════════════════════════════════════ */

/* ── Cabecera: título izq + flechas der ─────────────────────── */
.rng-layout-carousel .rng-carousel-header {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    position:        relative !important;
    border-bottom:   2px solid var(--rng-black) !important;
    padding-bottom:  10px !important;
    margin-bottom:   20px !important;
    text-align:      center !important;
}

.rng-layout-carousel .rng-carousel-htitle {
    font-size:       18px !important;
    font-weight:     800 !important;
    letter-spacing: -.2px !important;
    margin:          0 auto !important;
    color:           var(--rng-black) !important;
    text-transform:  uppercase !important;
    text-align:      center !important;
}

.rng-carousel-controls {
    display:         flex !important;
    gap:             6px !important;
    position:        absolute !important;
    right:           0 !important;
}

/* Flechas de navegación */
.rng-carousel-controls {
    display: flex !important;
    gap:     6px !important;
}

.rng-carousel-btn {
    width:           36px !important;
    height:          36px !important;
    border:          1px solid #ccc !important;
    background:      #fff !important;
    cursor:          pointer !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    border-radius:   50% !important;
    transition:      background .15s, border-color .15s !important;
    padding:         0 !important;
}
.rng-carousel-btn:hover {
    background:    #f4f4f4 !important;
    border-color:  #888 !important;
}
.rng-carousel-btn svg {
    width:  16px !important;
    height: 16px !important;
    stroke: #333 !important;
    display: block !important;
}

/* ── Track deslizable ──────────────────────────────────────── */
.rng-layout-carousel .rng-carousel-track {
    display:            flex !important;
    gap:                14px !important;
    overflow-x:         auto !important;
    scroll-snap-type:   x mandatory !important;
    scrollbar-width:    none !important;      /* Firefox */
    -ms-overflow-style: none !important;      /* IE/Edge */
    padding-bottom:     4px !important;
    cursor:             grab !important;
}
.rng-layout-carousel .rng-carousel-track::-webkit-scrollbar {
    display: none !important;                 /* Chrome/Safari */
}
.rng-layout-carousel .rng-carousel-track:active {
    cursor: grabbing !important;
}

/* ── Card individual ───────────────────────────────────────── */
.rng-carousel-item {
    flex:              0 0 185px !important;
    scroll-snap-align: start !important;
    min-width:         0 !important;
}

/* ── Imagen cuadrada (1:1) ─────────────────────────────────── */
.rng-block .rng-carousel-img {
    display:     block !important;
    position:    relative !important;
    overflow:    hidden !important;
    width:       100% !important;
    height:      0 !important;
    padding-top: 100% !important;   /* 1:1 */
    background:  var(--rng-bg, #f0f0f0);
    border-radius: 2px !important;
}
.rng-block .rng-carousel-img img {
    position:   absolute !important;
    top:        0 !important;
    left:       0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    margin:     0 !important;
    box-shadow: none !important;
    transition: transform var(--rng-trans, .25s ease) !important;
}
.rng-carousel-item:hover .rng-carousel-img img {
    transform: scale(1.05) !important;
}

.rng-carousel-no-img {
    position:   absolute !important;
    inset:      0 !important;
    background: var(--rng-bg, #f0f0f0) !important;
}

/* ── Body del card ─────────────────────────────────────────── */
.rng-carousel-body {
    padding: 8px 0 0 !important;
}

/* Categoría — pequeña, gris */
/* Categoría carrusel unificada con estilo 2 Heroes */
.rng-block .rng-carousel-cat {
    display:         inline-block !important;
    font-size:       10px !important;
    font-weight:     800 !important;
    letter-spacing:  1.2px !important;
    text-transform:  uppercase !important;
    color:           var(--rng-gray, #4d4d4d) !important;
    text-decoration: none !important;
    margin-bottom:   6px !important;
    padding-bottom:  3px !important;
    border-bottom:   2px solid var(--rng-red, #cc0000) !important;
    line-height:     1 !important;
    white-space:     nowrap !important;
    max-width:       100% !important;
    overflow:        hidden !important;
    text-overflow:   ellipsis !important;
    transition:      color var(--rng-trans, .2s ease) !important;
}
.rng-block .rng-carousel-cat:hover {
    color: var(--rng-red, #cc0000) !important;
}

/* Título — bold, máx 3 líneas */
.rng-carousel-title {
    font-size:      14px !important;
    font-weight:    700 !important;
    line-height:    1.35 !important;
    margin:         0 0 6px !important;
    color:          var(--rng-black, #0b0b0b) !important;
    display:        -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow:       hidden !important;
}
.rng-carousel-title a {
    color:           inherit !important;
    text-decoration: none !important;
}
.rng-carousel-item:hover .rng-carousel-title a {
    text-decoration: underline !important;
}

/* Fecha */
.rng-carousel-date {
    font-size: 11px !important;
    color:     #888 !important;
    display:   block !important;
}

/* ── Drag to scroll (touch/mouse) via JS ────────────────────── */
/* El cursor ya está definido arriba (grab/grabbing) */

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rng-carousel-item { flex: 0 0 155px !important; }
}
@media (max-width: 480px) {
    .rng-carousel-item { flex: 0 0 130px !important; }
    .rng-layout-carousel .rng-carousel-htitle { font-size: 14px !important; }
}

/* ============================================================
   CORRECCIONES VISUALES v24
   Espaciado entre bloques + meta al final de cada card
   ============================================================ */

/* ── 1. ESPACIADO ENTRE BLOQUES ─────────────────────────────
   Sin esto, los bloques quedaban pegados entre sí.
   ────────────────────────────────────────────────────────── */
.rng-block {
    margin-bottom: 40px !important;
}

/* ════════════════════════════════════════════════════════════
   ESPACIADO RESPETUOSO Y PROPORCIONADO ENTRE CUERPO Y FOOTER
   Un respiro visual armónico y natural (35px) sin huecos excesivos.
   ════════════════════════════════════════════════════════════ */

/* Contenedores principales sin márgenes acumulados desmedidos */
.content-page,
.content-single,
.content-area,
.site-main,
.rng-gutenberg-page,
.rn-page-center {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* El último bloque de la página mantiene exactamente 35px de respiro */
.rng-gutenberg-page .rng-block:last-child,
.content-page .rng-block:last-child {
    margin-bottom: 35px !important;
}

/* Migas de pan al pie sin salto brusco */
.footer-breadcrumb {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    clear: both !important;
}

/* Footer con respiro equilibrado */
footer,
.site-footer,
.content-footer {
    margin-top: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 25px !important;
    position: relative !important;
    clear: both !important;
}

@media (max-width: 768px) {
    .rng-gutenberg-page .rng-block:last-child,
    .content-page .rng-block:last-child {
        margin-bottom: 25px !important;
    }

    footer,
    .site-footer,
    .content-footer {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* ── 2. META (FECHA/CATEGORÍA) SIEMPRE AL FONDO DE LA CARD ──
   Con card body como flex-column, margin-top:auto empuja
   el meta al fondo independientemente del largo del título.
   Así los títulos empiezan todos en la misma posición y las
   fechas se alinean abajo.
   ────────────────────────────────────────────────────────── */

/* Grid, Lista, Hero secundarios */
.rng-block .rng-layout-grid .rng-card .rng-card__meta,
.rng-block .rng-layout-list .rng-layout-list__body .rng-card__meta,
.rng-layout-hero__grid .rng-card .rng-card__meta,
.rng-h3-col .rng-card .rng-card__meta,
.rng-hero2-left .rng-card__meta,
.rng-hero2-right .rng-card__meta {
    margin-top: auto !important;
    padding-top: 6px !important;
}

/* Sección oscura: meta al fondo del featured card */
.rng-layout-dark .rng-card .rng-card__body .rng-card__meta,
.rng-layout-dark .rng-h3-feat-body .rng-card__meta {
    margin-top: auto !important;
}

/* ── 3. EXTRACTO + TÍTULO: no flex-grow para no crear huecos ──
   El espacio debe estar solo entre el contenido y el meta.
   ────────────────────────────────────────────────────────── */
.rng-block .rng-card .rng-card__title,
.rng-block .rng-card .rng-card__excerpt {
    flex: none !important;   /* NO crecen → solo el espaciado auto del meta actúa */
}

/* ── 4. SEPARACIÓN VISUAL ENTRE CARDS EN EL GRID ────────────
   El gap ya viene de rng-layout-grid, pero nos aseguramos
   de que las cards no tengan margen vertical interno excesivo.
   ────────────────────────────────────────────────────────── */
body.asap-box-design .rng-block .rng-layout-grid .rng-card__body,
    .rng-block .rng-layout-grid .rng-card__body {
    padding: 10px 4px 12px 14px !important;
}

/* ── 5. CARRUSEL: título con clamp correcto ─────────────────── */
.rng-carousel-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════
   FIXES DE LAYOUT — Espaciado, Sección Oscura, Cards
   (Issue #1: spacing · #2: dark titles · #3: card heights)
   ════════════════════════════════════════════════════════════ */

/* ── 1. Espaciado consistente entre bloques RNG consecutivos ── */
.rng-block {
    margin-bottom: 32px !important;
}
.rng-block:last-child {
    margin-bottom: 0 !important;
}

/* Sección oscura: no necesita margin extra (ya tiene padding propio) */
.rng-block .rng-layout-dark {
    margin-bottom: 0 !important;  /* el rng-block wrapper ya lleva el margen */
}

/* ── 2. FIX CRÍTICO: Título invisible en Sección Oscura ────────
   Causa: .rng-block .rng-card__title a { color: var(--rng-black) !important }
   sobreescribía el color blanco del layout oscuro.
   Solución: selector más específico (3 clases + 1 elemento > 2+1). ─ */
.rng-block .rng-layout-dark .rng-card__title a,
.rng-block .rng-layout-dark .rng-card__title a:link,
.rng-block .rng-layout-dark .rng-card__title a:visited,
.rng-layout-dark .rng-card__title a,
.rng-layout-dark .rng-card__title a:link,
.rng-layout-dark .rng-card__title a:visited,
.rng-layout-dark .rng-h3-feat-title a {
    color: var(--rng-dark-title, #ffffff) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
.rng-block .rng-layout-dark .rng-card:hover .rng-card__title a,
.rng-layout-dark .rng-card:hover .rng-card__title a,
.rng-layout-dark .rng-card__title a:hover,
.rng-layout-dark .rng-h3-feat-title a:hover {
    color: var(--rng-title-hover, #ff5252) !important;
}

/* Extracto en sección oscura: contraste nítido */
.rng-block .rng-layout-dark .rng-card__excerpt,
.rng-layout-dark .rng-card__excerpt {
    color: var(--rng-dark-text, #c5c5c5) !important;
}

.rng-layout-dark .rng-card__meta,
.rng-block .rng-layout-dark .rng-card__meta {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ── 3. Cards: altura consistente + texto alineado ─────────────
   Garantiza que imagen/título/meta comiencen en la misma posición
   dentro de cada fila del grid. ─────────────────────────────── */

/* Card como columna flex: imagen fija arriba, body crece */
.rng-block .rng-card {
    display:        flex !important;
    flex-direction: column !important;
}

/* Body del card: crece para igualar altura de todos en la fila */
.rng-block .rng-card .rng-card__body,
.rng-block .rng-h2-body,
.rng-block .rng-h3-feat-body {
    flex:           1 !important;
    display:        flex !important;
    flex-direction: column !important;
}

/* Título: crece para empujar la meta/fecha al fondo */
.rng-block .rng-layout-grid     .rng-card__title,
.rng-block .rng-layout-hero2    .rng-card__title,
.rng-block .rng-layout-hero3    .rng-card__title,
.rng-block .rng-layout-magazine .rng-card__title {
    flex: 1 !important;
}

/* Extracto: ocupa espacio disponible antes de la fecha */
.rng-block .rng-card__excerpt {
    flex: 1 !important;
}

/* Meta/fecha: siempre al fondo de la card */
.rng-block .rng-card__meta {
    margin-top: auto !important;
}

/* ── 4. Breadcrumbs: ocultar cuando Asap los tenga desactivados ─
   Asap outputea en su CSS .footer-breadcrumb { display:none }
   cuando la opción "Migas de pan" está desactivada en el Customizer.
   NO anulamos eso — solo aseguramos que cuando SÍ se muestran,
   estén centrados y sin bullets. ────────────────────────────── */
/* (No rules needed here — handled in page-layout.css) */

/* ── 5. Espaciado header → primer bloque ───────────────────────
   El .rng-section-head de cada bloque tiene margin-top:28px.
   Con el padding-top del wrapper ya definido en page-layout.css,
   el primer bloque tiene separación correcta de la cabecera.
   ─────────────────────────────────────────────────────────── */
.rng-section-head {
    margin-top:    28px !important;
    margin-bottom: 16px !important;
}
/* El primer bloque no necesita margin-top extra en el section-head */
.rng-gutenberg-page > :first-child .rng-section-head {
    margin-top: 0 !important;
}

/* Obsolete 480px Hero 2 removed in v8 */




/* ════════════════════════════════════════════════════════════
   HERO 2: 1 ENTRADA AL 65% + 2 ENTRADAS AL 35% + FEED 50% / 50%
   ════════════════════════════════════════════════════════════ */

.rng-layout-hero2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fila Superior: 2 Columnas en proporción 65% y 35% */
.rng-hero2-top-grid {
    display: grid !important;
    grid-template-columns: 65fr 35fr !important; /* 65% y 35% */
    gap: 28px !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important;
}

/* Héroe 1 (65% de ancho) - Entrada protagónica más reciente */
.rng-hero2-card--lead1 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}
.rng-hero2-card--lead1 .rng-card__img-wrap {
    padding-top: 56.25% !important; /* Proporción 16:9 clásica que nivela la altura con la columna lateral */
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
}
body.asap-box-design .rng-hero2-card--lead1 .rng-card__body,
    .rng-hero2-card--lead1 .rng-card__body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.rng-hero2-card--lead1 .rng-h2-title--main {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 4px 0 8px !important;
}
.rng-hero2-card--lead1 .rng-card__divider {
    height: 1px !important;
    background: var(--rng-gray-lt, #e2e2e2) !important;
    margin: 6px 0 8px !important;
    flex-shrink: 0 !important;
}
.rng-hero2-card--lead1 .rng-h2-excerpt {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    color: var(--rng-gray, #4d4d4d) !important;
    margin: 6px 0 10px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.rng-hero2-card--lead1 .rng-card__meta {
    margin-top: auto !important;
    padding-top: 8px !important;
    font-size: 12px !important;
    color: var(--rng-meta, #888888) !important;
    flex-shrink: 0 !important;
}

/* Columna Lateral (35%): Exactamente 2 entradas a la misma altura total del 65% */
/* Modificadores de resiliencia Hero 2 cuando hay entradas reducidas */
.rng-hero2-top-grid--single {
    grid-template-columns: 1fr !important;
}
.rng-hero2-side-col--single {
    justify-content: center !important;
}
.rng-hero2-bottom-grid--single {
    grid-template-columns: 1fr !important;
}
.rng-hero2-bottom-grid--single .rng-hero2-card--sec {
    max-width: 620px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rng-hero2-side-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    border-left: 1px solid var(--rng-gray-lt, #e2e2e2) !important;
    padding-left: 24px !important;
    box-sizing: border-box !important;
}

/* Cada una de las 2 entradas en la columna de 35% */
.rng-hero2-card--side {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: auto !important;
    box-sizing: border-box !important;
}
.rng-hero2-card--side .rng-hero2-side-img {
    padding-top: 30% !important; /* Proporción compacta que garantiza paridad de altura y visibilidad total */
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
    flex-shrink: 0 !important;
}
body.asap-box-design .rng-hero2-card--side .rng-card__body,
    .rng-hero2-card--side .rng-card__body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
}
.rng-hero2-card--side .rng-super-cat {
    font-size: 11px !important;
    margin-bottom: 2px !important;
}
.rng-hero2-card--side .rng-h2-title--side {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 2px 0 4px !important;
    word-break: break-word !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    white-space: normal !important;
}
.rng-hero2-card--side .rng-card__divider {
    height: 1px !important;
    background: var(--rng-gray-lt, #e2e2e2) !important;
    margin: 4px 0 5px !important;
    flex-shrink: 0 !important;
}
.rng-hero2-card--side .rng-hero2-side-excerpt {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: var(--rng-gray, #4d4d4d) !important;
    margin: 3px 0 5px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.rng-hero2-card--side .rng-card__meta {
    margin-top: auto !important;
    padding-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--rng-meta, #888888) !important;
    flex-shrink: 0 !important;
}

/* Línea separadora sutil entre las 2 entradas del 35% */
.rng-hero2-side-sep {
    height: 1px !important;
    background: var(--rng-gray-lt, #e2e2e2) !important;
    margin: 8px 0 !important;
    flex-shrink: 0 !important;
}

/* Fila Inferior: Resto de Entradas en Columna 50% y 50% (Mismo Tamaño Ancho y Alto, Más Pequeños) */
.rng-hero2-bottom-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 50% y 50% */
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    padding-top: 28px !important;
    border-top: 1px solid var(--rng-gray-lt, #e2e2e2) !important;
    box-sizing: border-box !important;
}

/* Card Secundaria (50% / 50%) */
.rng-hero2-card--sec {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}
.rng-hero2-card--sec .rng-hero2-sec-img {
    padding-top: 56.25% !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}
body.asap-box-design .rng-hero2-card--sec .rng-card__body,
    .rng-hero2-card--sec .rng-card__body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.rng-hero2-card--sec .rng-card__title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 4px 0 8px !important;
}
.rng-hero2-card--sec .rng-hero2-sec-excerpt {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--rng-gray, #4d4d4d) !important;
    margin: 6px 0 10px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.rng-hero2-card .rng-card__meta {
    margin-top: auto !important;
}

/* Responsive Hero 2 tablet rules consolidated in master canonical section below */

/* Obsolete 768px portrait Hero 2 removed in v8 */

/* Obsolete 600px Hero 2 removed in v8 */


/* ════════════════════════════════════════════════════════════
   FIX GRID DE CARDS — Alineación perfecta entre filas
   
   Problema: títulos de distinta longitud (1-4 líneas) hacen
   que el extracto y la fecha comiencen en alturas distintas.
   
   Solución: reservar slots de altura fija para título y extracto
   usando min-height + -webkit-line-clamp.
   
   Con esto:
   • Categoría  → siempre en la misma posición (justo bajo imagen)
   • Título     → slot fijo de 3 líneas (rellena si < 3 líneas)
   • Extracto   → slot fijo de 2 líneas → posición siempre igual
   • Fecha/meta → siempre al fondo de la card
   ════════════════════════════════════════════════════════════ */

/* Título del grid: slot fijo de 3 líneas
   min-height en em → relativo a font-size del elemento (19px × 1.3 × 3 = 74px)
   -webkit-line-clamp trunca si el texto supera 3 líneas */
.rng-block .rng-layout-grid .rng-card__title {
    min-height:          3.9em !important;   /* 3 × line-height(1.3) */
    display:             -webkit-box !important;
    -webkit-line-clamp:  3 !important;
    -webkit-box-orient:  vertical !important;
    overflow:            hidden !important;
    flex:                none !important;    /* NO crece; height fijada por min-height */
    margin-bottom:       8px !important;
}

/* Extracto del grid: slot fijo de 2 líneas
   min-height en em → relativo a font-size del elemento (14px × 1.55 × 2 ≈ 43px) */
.rng-block .rng-layout-grid .rng-card__excerpt {
    min-height:          3.1em !important;   /* 2 × line-height(1.55) */
    display:             -webkit-box !important;
    -webkit-line-clamp:  2 !important;
    -webkit-box-orient:  vertical !important;
    overflow:            hidden !important;
    flex:                none !important;    /* NO crece; height fijada por min-height */
    margin-bottom:       6px !important;
}

/* Meta/fecha: siempre al fondo (con margen automático) */
.rng-block .rng-layout-grid .rng-card__meta {
    margin-top: auto !important;
    padding-top: 4px !important;
}

/* La card body sigue siendo flex-column para que meta vaya al fondo */
body.asap-box-design .rng-block .rng-layout-grid .rng-card__body,
    .rng-block .rng-layout-grid .rng-card__body {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
}

/* ════════════════════════════════════════════════════════════
   ETIQUETA DE CATEGORÍA EDITORIAL — UNIFICADA "2 HEROES"
   Aplica a todos los layouts: Grid, Hero, Hero 2, Hero 3,
   Magazine, Dark, Lista y Carrusel.
   ════════════════════════════════════════════════════════════ */

.rng-super-cat,
.rng-h2-super {
    display:         inline-block !important;
    font-size:       10px !important;
    font-weight:     800 !important;
    letter-spacing:  1.2px !important;
    text-transform:  uppercase !important;
    color:           var(--rng-gray, #4d4d4d) !important;
    text-decoration: none !important;
    margin-bottom:   8px !important;
    padding-bottom:  3px !important;
    border-bottom:   2px solid var(--rng-red, #cc0000) !important;
    line-height:     1 !important;
    max-width:       100% !important;
    white-space:     nowrap !important;
    overflow:        hidden !important;
    text-overflow:   ellipsis !important;
    transition:      color var(--rng-trans, .2s ease), border-color var(--rng-trans, .2s ease) !important;
}

.rng-super-cat:hover,
.rng-h2-super:hover {
    color: var(--rng-red, #cc0000) !important;
}

/* En modo oscuro: texto blanco translúcido, borde rojo */
.rng-layout-dark .rng-super-cat,
.rng-layout-dark .rng-h2-super {
    color:               rgba(255, 255, 255, 0.75) !important;
    border-bottom-color: var(--rng-red, #cc0000) !important;
}

.rng-layout-dark .rng-super-cat:hover,
.rng-layout-dark .rng-h2-super:hover {
    color: #ffffff !important;
}

/* Ítems compactos (secundario Hero 3, lista Dark, lista Magazine) */
.rng-h3-sec-body .rng-super-cat,
.rng-layout-dark__list-item-body .rng-super-cat,
.rng-layout-magazine__list-item .rng-super-cat {
    font-size:      9px !important;
    letter-spacing: 1px !important;
    margin-bottom:  4px !important;
    padding-bottom: 2px !important;
}

.rng-layout-dark__list-item-body {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
    min-width:      0 !important;
}

.rng-layout-magazine__list-item {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:            2px !important;
}

/* Grid de cards: la etiqueta no cuenta en la altura fija del slot */
.rng-block .rng-layout-grid .rng-super-cat {
    margin-bottom: 8px !important;
}

/* Responsividad general en pantallas móviles y tablets */
@media (max-width: 768px) {
    .rng-super-cat,
    .rng-h2-super {
        font-size: 9.5px !important;
        letter-spacing: 1px !important;
    }
}

/* En layout de lista (horizontal o 1 columna): no requiere barra lateral en header-zone */
.rng-layout-list .rng-card__header-zone::before {
    display: none !important;
}
.rng-layout-list .rng-card__divider {
    display: none !important;
}

.rng-card__header-zone .rng-card__title {
    margin-bottom: 0 !important;
}


/* ════════════════════════════════════════════════════════════
   UNIFORMIDAD TOTAL DE ANCHO Y RESPONSIVIDAD ESTRICTA EN COLUMNAS
   - 3 Héroes: 3 columnas obligatorias en móvil, tablet y escritorio.
   - 2 Héroes: 2 columnas proporcionadas (top 2fr/1fr + bottom 50%/50%).
   ════════════════════════════════════════════════════════════ */
.rng-block,
.rng-layout-grid,
.rng-layout-hero,
.rng-layout-list,
.rng-layout-magazine,
.rng-layout-dark,
.rng-layout-hero2,
.rng-layout-hero3-wrapper,
.rng-layout-hero3,
.rng-layout-carousel {
    width:       100% !important;
    max-width:   100% !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    box-sizing:  border-box !important;
}

/* ════════════════════════════════════════════════════════════
   HERO 3 — 3 COLUMNAS EN TODOS LOS DISPOSITIVOS (MÓVIL / TABLET / ESCRITORIO)
   ════════════════════════════════════════════════════════════ */
.rng-layout-hero3 {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 Columnas fijas */
    gap:                   24px !important;
    align-items:           stretch !important;
    width:                 100% !important;
    box-sizing:            border-box !important;
}
.rng-layout-hero3 .rng-h3-col {
    display:        flex !important;
    flex-direction: column !important;
    height:         100% !important;
    box-sizing:     border-box !important;
    min-width:      0 !important;
}
.rng-h3-col--center {
    grid-column: auto !important;
    order:       0 !important;
}

/* Fila inferior de Hero 3: 3 columnas simétricas con el mismo diseño */
.rng-h3-bottom-grid {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 Columnas fijas */
    gap:                   24px !important;
    margin-top:            28px !important;
    padding-top:           28px !important;
    border-top:            1px solid var(--rng-gray-lt, #e2e2e2) !important;
    width:                 100% !important;
    box-sizing:            border-box !important;
    align-items:           stretch !important;
}
.rng-h3-bottom-grid .rng-card {
    height:         100% !important;
    display:        flex !important;
    flex-direction: column !important;
    box-sizing:     border-box !important;
    min-width:      0 !important;
}
.rng-h3-bottom-grid .rng-card__body {
    flex:           1 !important;
    display:        flex !important;
    flex-direction: column !important;
}
.rng-h3-bottom-grid .rng-card__title {
    min-height:         2.8em !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    margin-bottom:      6px !important;
}
.rng-h3-bottom-grid .rng-card__excerpt {
    min-height:         2.9em !important;
    display:            -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:           hidden !important;
    margin-bottom:      8px !important;
}
.rng-h3-bottom-grid .rng-card__meta {
    margin-top: auto !important;
}

/* ════════════════════════════════════════════════════════════
   RELOAD NEWS — MASTER CANONICAL RESPONSIVE GRID SYSTEM (v8)
   Garantiza uniformidad perfecta en escritorio, tablet y móvil:
   - 2 Héroes: 2 columnas proporcionales (65%/35% en desktop, tablet y móvil)
               + 2 columnas inferiores 50%/50% en todos los dispositivos.
   - 3 Héroes: 3 columnas obligatorias arriba y abajo (desktop, tablet y móvil).
   - Grid de Cards: 3 columnas uniformes (desktop, tablet y móvil).
   - Lista Horizontal: 3 columnas uniformes (desktop, tablet y móvil).
   - 1 Hero + Grid: Hero arriba + 3 columnas abajo (desktop, tablet y móvil).
   - Magazine: Hero arriba + 2 columnas medianas + lista compacta.
   - Sección Oscura: Hero arriba + lista compacta de contraste alto.
   - Carrusel: 100% ancho con deslizamiento suave y botones táctiles.
   ════════════════════════════════════════════════════════════ */

/* ── UNIFORMIDAD DE ANCHOS EN TODOS LOS BLOQUES ──────────────── */
.rng-block,
.rng-gutenberg-page,
.rng-layout-grid,
.rng-layout-hero,
.rng-layout-hero__grid,
.rng-layout-list,
.rng-layout-magazine,
.rng-layout-dark,
.rng-layout-hero2,
.rng-hero2-top-grid,
.rng-hero2-bottom-grid,
.rng-layout-hero3-wrapper,
.rng-layout-hero3,
.rng-h3-bottom-grid,
.rng-layout-carousel {
    width:        100% !important;
    max-width:    100% !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
    box-sizing:   border-box !important;
}

/* ════════════════════════════════════════════════════════════
   TABLETS HORIZONTAL (769px a 1024px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1024px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    /* Títulos completos sin truncamiento ni cortes */
    .rng-card__title,
    .rng-h2-title,
    .rng-h3-feat-title,
    .rng-h2-title--main,
    .rng-h2-title--side,
    .rng-card__title a,
    .rng-h2-title a,
    .rng-h3-feat-title a,
    .rng-block .rng-card .rng-card__title,
    .rng-block .rng-layout-grid .rng-card__title,
    .rng-layout-hero3 .rng-card__title,
    .rng-h3-bottom-grid .rng-card__title {
        display:            block !important;
        height:             auto !important;
        min-height:         0 !important;
        max-height:         none !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        white-space:        normal !important;
        word-break:         break-word !important;
        text-overflow:      clip !important;
    }

    /* 2 Héroes */
    .rng-hero2-top-grid {
        grid-template-columns: 65fr 35fr !important;
        gap: 18px !important;
    }
    .rng-hero2-top-grid--single {
        grid-template-columns: 1fr !important;
    }
    .rng-hero2-side-col {
        padding-left: 16px !important;
    }
    .rng-hero2-side-col--single {
        justify-content: center !important;
    }
    .rng-hero2-card--lead1 .rng-h2-title--main {
        font-size: 1.35rem !important;
    }
    .rng-hero2-card--side .rng-h2-title--side {
        font-size: 1.02rem !important;
    }
    .rng-hero2-bottom-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
    .rng-hero2-bottom-grid--single {
        grid-template-columns: 1fr !important;
    }
    .rng-hero2-bottom-grid--single .rng-hero2-card--sec {
        max-width: 580px !important;
        margin: 0 auto !important;
    }

    /* 3 Héroes títulos */
    .rng-h3-feat-title {
        font-size: 1.15rem !important;
    }
    .rng-layout-hero3 .rng-card__title,
    .rng-h3-bottom-grid .rng-card__title {
        font-size: 13px !important;
    }

    /* 3 Héroes, Grid de cards, Lista horizontal y 1 Hero + Grid */
    .rng-layout-hero3,
    .rng-h3-bottom-grid,
    .rng-block .rng-layout-grid--cols-3,
    .rng-layout-list--cols-3,
    .rng-layout-hero__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    /* Magazine */
    .rng-layout-magazine {
        grid-template-columns: 55fr 45fr !important;
        gap: 18px !important;
    }

    /* Sección oscura */
    .rng-layout-dark__grid {
        grid-template-columns: 55fr 45fr !important;
        gap: 18px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   MÓVILES Y TABLETS VERTICAL (≤ 768px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px), (max-width: 991px) and (orientation: landscape), (max-height: 550px) and (orientation: landscape) {

    /* ── TÍTULOS 100% COMPLETOS OBLIGATORIOS EN MÓVIL (SIN CLAMP NI TRUNCAMIENTO) ── */
    .rng-card__title,
    .rng-h2-title,
    .rng-h3-feat-title,
    .rng-h2-title--main,
    .rng-h2-title--side,
    .rng-card__title a,
    .rng-h2-title a,
    .rng-h3-feat-title a,
    .rng-block .rng-card .rng-card__title,
    .rng-block .rng-layout-grid .rng-card__title,
    .rng-layout-hero3 .rng-card__title,
    .rng-h3-bottom-grid .rng-card__title,
    .rng-layout-list--cols-3 .rng-card__title,
    .rng-layout-hero__grid .rng-card__title,
    .rng-layout-magazine__medium-grid .rng-card__title {
        display:            block !important;
        height:             auto !important;
        min-height:         0 !important;
        max-height:         none !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        white-space:        normal !important;
        word-break:         break-word !important;
        text-overflow:      clip !important;
    }

    /* ── 1. GRID DE 2 HÉROES ────────────────────────────────── */
    .rng-layout-hero2 {
        display:        flex !important;
        flex-direction: column !important;
        gap:            16px !important;
        width:          100% !important;
        box-sizing:     border-box !important;
    }

    /* Fila superior: Proporción 60% (Héroe 1) y 40% (Columna Lateral) exclusiva móvil */
    .rng-hero2-top-grid {
        display:               grid !important;
        grid-template-columns: 60fr 40fr !important; /* Proporción 60% y 40% */
        gap:                   10px !important;
        align-items:           stretch !important;
        width:                 100% !important;
        box-sizing:            border-box !important;
    }
    .rng-hero2-top-grid--single {
        grid-template-columns: 1fr !important;
    }

    /* Héroe 1 (columna 60%) */
    .rng-hero2-card--lead1 {
        display:        flex !important;
        flex-direction: column !important;
        height:         100% !important;
        box-sizing:     border-box !important;
        min-width:      0 !important;
        justify-content: space-between !important;
    }
    .rng-hero2-card--lead1 .rng-card__img-wrap {
        width:          100% !important;
        padding-top:    56.25% !important; /* Proporción limpia 16:9 */
        border-radius:  4px !important;
        margin-bottom:  4% !important;
        flex-shrink:    0 !important;
    }
    body.asap-box-design .rng-hero2-card--lead1 .rng-card__body,
    .rng-hero2-card--lead1 .rng-card__body {
        padding:        4% 5% 10px 5% !important; /* Margen inferior uniforme con la columna lateral */
        flex:           1 1 auto !important;
        display:        flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height:     0 !important;
        box-sizing:     border-box !important;
    }
    .rng-hero2-card--lead1 .rng-card__header-zone::before {
        left:  -4px !important;
        width: 2.5px !important;
    }
    /* Posición 1: Categoría */
    .rng-hero2-card--lead1 .rng-super-cat {
        font-size:     9.5px !important;
        line-height:   1.2 !important;
        margin-bottom: 3% !important;
        display:       inline-block !important;
        font-weight:   700 !important;
    }
    /* Posición 2: Título (respetado al 100%) */
    .rng-hero2-card--lead1 .rng-h2-title--main {
        font-size:          12.5px !important;
        font-weight:        800 !important;
        line-height:        1.25 !important;
        margin:             2px 0 4% !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
        text-overflow:      clip !important;
    }
    /* En orientación vertical móvil: aumento del titular al 60% para equiparar la altura con la columna del 40% */
    @media (orientation: portrait) {
        .rng-hero2-card--lead1 .rng-h2-title--main {
            font-size:   18.5px !important;
            line-height: 1.25 !important;
        }
    }
    /* Posición 3: Divisor */
    .rng-hero2-card--lead1 .rng-card__divider {
        margin: 4% 0 !important;
        height: 1px !important;
        background: var(--rng-gray-lt, #e2e2e2) !important;
    }
    /* Posición 4: Extracto */
    .rng-hero2-card--lead1 .rng-h2-excerpt {
        display:            -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow:           hidden !important;
        font-size:          10.5px !important;
        line-height:        1.35 !important;
        color:              var(--rng-gray, #4d4d4d) !important;
        margin:             3px 0 4% !important;
    }
    /* Posición 5: Autor-Fecha */
    .rng-hero2-card--lead1 .rng-card__meta {
        font-size:      8.5px !important;
        margin-top:     auto !important;
        padding-top:    4px !important;
        padding-bottom: 2px !important;
        white-space:    nowrap !important;
        overflow:       hidden !important;
        text-overflow:  ellipsis !important;
        flex-shrink:    0 !important;
    }

    /* Columna lateral derecha (columna 40%) */
    .rng-hero2-side-col {
        display:         flex !important;
        flex-direction:  column !important;
        justify-content: space-between !important;
        gap:             10px !important; /* Separación limpia entre las 2 tarjetas */
        height:          100% !important;
        border-left:     none !important;
        border-top:      none !important;
        padding-left:    0 !important;
        padding-top:     0 !important;
        box-sizing:      border-box !important;
        min-width:       0 !important;
    }
    .rng-hero2-side-col--single {
        justify-content: center !important;
    }
    .rng-hero2-card--side {
        display:        flex !important;
        flex-direction: column !important;
        flex:           1 1 auto !important; /* Distribución equilibrada */
        height:         auto !important;
        min-height:     0 !important;
        box-sizing:     border-box !important;
        min-width:      0 !important;
        justify-content: space-between !important;
    }
    .rng-hero2-card--side .rng-hero2-side-img {
        width:          100% !important;
        padding-top:    28% !important; /* Proporción compacta que otorga espacio al texto */
        border-radius:  4px !important;
        margin-bottom:  3px !important;
        flex-shrink:    0 !important;
    }
    body.asap-box-design .rng-hero2-card--side .rng-card__body,
    .rng-hero2-card--side .rng-card__body {
        padding:        3% 5% 10px 5% !important; /* Espacio de margen inferior para visualizar el autor con holgura */
        flex:           1 1 auto !important;
        display:        flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height:     0 !important;
        box-sizing:     border-box !important;
    }
    .rng-hero2-card--side .rng-card__header-zone::before {
        left:  -4px !important;
        width: 2px !important;
    }
    /* Posición 1: Categoría */
    .rng-hero2-card--side .rng-super-cat {
        font-size:     8px !important;
        line-height:   1.2 !important;
        margin-bottom: 2px !important;
        font-weight:   700 !important;
    }
    /* Posición 2: Título (respetado al 100%) */
    .rng-hero2-card--side .rng-h2-title--side {
        font-size:          10px !important;
        font-weight:        700 !important;
        line-height:        1.22 !important;
        margin:             2px 0 3px !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
        text-overflow:      clip !important;
    }
    /* Posición 3: Divisor */
    .rng-hero2-card--side .rng-card__divider {
        margin: 3px 0 !important;
        height: 1px !important;
        background: var(--rng-gray-lt, #e2e2e2) !important;
    }
    /* Posición 4: Extracto (visible en su posición) */
    .rng-hero2-card--side .rng-hero2-side-excerpt {
        display:            -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow:           hidden !important;
        font-size:          8.5px !important;
        line-height:        1.25 !important;
        color:              var(--rng-gray, #4d4d4d) !important;
        margin:             2px 0 4px !important;
    }
    /* Posición 5: Autor-Fecha */
    .rng-hero2-card--side .rng-card__meta {
        font-size:      8px !important;
        line-height:    1.25 !important;
        margin-top:     auto !important;
        padding-top:    4px !important;
        padding-bottom: 2px !important;
        white-space:    nowrap !important;
        overflow:       hidden !important;
        text-overflow:  ellipsis !important;
        flex-shrink:    0 !important;
    }
    .rng-hero2-side-sep {
        display: none !important;
    }

    /* Fila inferior: 2 columnas proporcionales (50% y 50%) */
    .rng-hero2-bottom-grid {
        display:               grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 50% y 50% en móvil */
        gap:                   10px !important;
        padding-top:           12px !important;
        border-top:            1px solid var(--rng-gray-lt, #e2e2e2) !important;
        width:                 100% !important;
        box-sizing:            border-box !important;
        align-items:           stretch !important;
    }
    .rng-hero2-bottom-grid--single {
        grid-template-columns: 1fr !important;
    }
    .rng-hero2-card--sec {
        display:        flex !important;
        flex-direction: column !important;
        height:         100% !important;
        box-sizing:     border-box !important;
        min-width:      0 !important;
        justify-content: space-between !important;
    }
    .rng-hero2-card--sec .rng-hero2-sec-img {
        padding-top:   56.25% !important;
        border-radius: 4px !important;
        margin-bottom: 4% !important;
    }
    body.asap-box-design .rng-hero2-card--sec .rng-card__body,
    .rng-hero2-card--sec .rng-card__body {
        padding:        4% 5% 5% 5% !important; /* Al menos 5% de margen del contenedor */
        flex:           1 1 auto !important;
        display:        flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing:     border-box !important;
    }
    .rng-hero2-card--sec .rng-card__header-zone::before {
        left:  -4px !important;
        width: 2.5px !important;
    }
    /* Posición 1: Categoría */
    .rng-hero2-card--sec .rng-super-cat {
        font-size:     8.5px !important;
        margin-bottom: 2px !important;
        font-weight:   700 !important;
    }
    /* Posición 2: Título */
    .rng-hero2-card--sec .rng-card__title {
        font-size:          11px !important;
        font-weight:        700 !important;
        line-height:        1.25 !important;
        margin:             2px 0 3px !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
        text-overflow:      clip !important;
    }
    /* Posición 3: Divisor */
    .rng-hero2-card--sec .rng-card__divider {
        margin: 3px 0 !important;
        height: 1px !important;
        background: var(--rng-gray-lt, #e2e2e2) !important;
    }
    /* Posición 4: Extracto */
    .rng-hero2-card--sec .rng-hero2-sec-excerpt {
        display:            -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow:           hidden !important;
        font-size:          9.5px !important;
        line-height:        1.3 !important;
        color:              var(--rng-gray, #4d4d4d) !important;
        margin:             2px 0 4% !important;
    }
    /* Posición 5: Autor-Fecha */
    .rng-hero2-card--sec .rng-card__meta {
        font-size:  8px !important;
        margin-top: auto !important;
        padding-top: 3px !important;
    }

    /* ── 2. GRID DE 3 HÉROES ────────────────────────────────── */
    .rng-layout-hero3,
    .rng-h3-bottom-grid {
        display:               grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas obligatorias */
        gap:                   8px !important;
        width:                 100% !important;
        box-sizing:            border-box !important;
    }
    .rng-h3-bottom-grid {
        margin-top:  16px !important;
        padding-top: 16px !important;
        border-top:  1px solid var(--rng-gray-lt, #e2e2e2) !important;
    }
    .rng-layout-hero3 .rng-card,
    .rng-h3-bottom-grid .rng-card {
        height:         100% !important;
        display:        flex !important;
        flex-direction: column !important;
        box-sizing:     border-box !important;
        min-width:      0 !important;
    }
    .rng-layout-hero3 .rng-card__img-wrap,
    .rng-h3-bottom-grid .rng-card__img-wrap {
        padding-top:   60% !important;
        border-radius: 4px !important;
        margin-bottom: 5px !important;
    }
    body.asap-box-design .rng-layout-hero3 .rng-card__body,
    body.asap-box-design .rng-h3-bottom-grid .rng-card__body,
    .rng-layout-hero3 .rng-card__body,
    .rng-h3-bottom-grid .rng-card__body {
        padding: 4% 5% 5% 5% !important; box-sizing: border-box !important;
        flex:    1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .rng-layout-hero3 .rng-card__header-zone::before,
    .rng-h3-bottom-grid .rng-card__header-zone::before {
        left:  -6px !important;
        width: 2.5px !important;
    }
    .rng-layout-hero3 .rng-super-cat,
    .rng-h3-bottom-grid .rng-super-cat {
        font-size:      8px !important;
        margin-bottom:  2px !important;
        letter-spacing: 0.3px !important;
    }
    .rng-h3-feat-title {
        font-size:          11px !important;
        font-weight:        800 !important;
        line-height:        1.25 !important;
        margin:             2px 0 4px !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        min-height:         0 !important;
        max-height:         none !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
    }
    .rng-layout-hero3 .rng-card__title,
    .rng-h3-bottom-grid .rng-card__title {
        font-size:          10px !important;
        font-weight:        700 !important;
        line-height:        1.25 !important;
        margin:             2px 0 3px !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        min-height:         0 !important;
        max-height:         none !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
    }
    .rng-layout-hero3 .rng-card__divider,
    .rng-h3-bottom-grid .rng-card__divider {
        margin: 3px 0 !important;
    }
    .rng-layout-hero3 .rng-card__excerpt,
    .rng-h3-bottom-grid .rng-card__excerpt {
        display: none !important;
    }
    .rng-layout-hero3 .rng-card__meta,
    .rng-h3-bottom-grid .rng-card__meta {
        font-size:     8px !important;
        margin-top:    auto !important;
        padding-top:   2px !important;
        white-space:   nowrap !important;
        overflow:      hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ── 3. GRID DE CARDS (3 COLUMNAS EN MÓVIL) ─────────────── */
    .rng-block .rng-layout-grid--cols-3,
    .rng-block .rng-layout-grid--cols-4 {
        display:               grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas uniformes */
        gap:                   8px !important;
        width:                 100% !important;
        box-sizing:            border-box !important;
        align-items:           stretch !important;
        grid-auto-rows:        1fr !important; /* Altura de contenedores homogénea en todas las filas */
    }
    .rng-block .rng-layout-grid .rng-card {
        height:          100% !important;
        display:         flex !important;
        flex-direction:  column !important;
        justify-content: space-between !important;
        box-sizing:      border-box !important;
        min-width:       0 !important;
    }
    .rng-block .rng-layout-grid .rng-card__img-wrap {
        padding-top:   60% !important;
        border-radius: 4px !important;
        margin-bottom: 5px !important;
        flex-shrink:   0 !important;
    }
    body.asap-box-design .rng-block .rng-layout-grid .rng-card__body,
    .rng-block .rng-layout-grid .rng-card__body {
        padding:         4% 5% 5% 5% !important; /* Margen del 5% del contenedor */
        box-sizing:      border-box !important;
        flex:            1 1 auto !important;
        display:         flex !important;
        flex-direction:  column !important;
        justify-content: space-between !important;
        min-height:      0 !important;
    }
    .rng-block .rng-layout-grid .rng-card__header-zone {
        display:         flex !important;
        flex-direction:  column !important;
        justify-content: flex-start !important;
        width:           100% !important;
        flex:            1 1 auto !important; /* Expansión simétrica para mantener idéntica posición de divisor y meta */
        position:        relative !important;
    }
    .rng-block .rng-layout-grid .rng-card__header-zone::before {
        left:  -4px !important;
        width: 2px !important;
    }
    /* Posición 1: Categoría */
    .rng-block .rng-layout-grid .rng-super-cat {
        font-size:      8px !important;
        margin-bottom:  2px !important;
        font-weight:    700 !important;
        letter-spacing: 0.3px !important;
        flex-shrink:    0 !important;
    }
    /* Posición 2: Título (completo sin truncamiento) */
    .rng-block .rng-layout-grid .rng-card__title {
        font-size:          9.5px !important;
        font-weight:        700 !important;
        line-height:        1.25 !important;
        margin:             2px 0 0 !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        min-height:         0 !important;
        max-height:         none !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
        flex:               none !important;
    }
    /* Posición 3: Divisor gris */
    .rng-block .rng-layout-grid .rng-card__divider {
        margin:      4px 0 !important;
        height:      1px !important;
        background:  var(--rng-gray-lt, #e2e2e2) !important;
        flex-shrink: 0 !important;
    }
    /* Posición 4: Extracto (oculto en cards regulares) */
    .rng-block .rng-layout-grid .rng-card__excerpt {
        display: none !important;
    }
    /* Posición 5: Autor-Fecha al fondo alineados */
    .rng-block .rng-layout-grid .rng-card__meta {
        font-size:     8px !important;
        margin-top:    auto !important;
        padding-top:   3px !important;
        white-space:   nowrap !important;
        overflow:      hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink:   0 !important;
    }

    /* ── 4. LISTA HORIZONTAL (3 COLUMNAS EN MÓVIL) ──────────── */
    .rng-layout-list--cols-3 {
        display:               grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas uniformes */
        gap:                   8px !important;
        width:                 100% !important;
        box-sizing:            border-box !important;
    }
    .rng-layout-list--cols-3 .rng-layout-list__item {
        display:        flex !important;
        flex-direction: column !important;
        border-top:     1px solid var(--rng-gray-lt, #e2e2e2) !important;
        border-bottom:  none !important;
        padding:        6px 0 !important;
        height:         100% !important;
        min-width:      0 !important;
        box-sizing:     border-box !important;
    }
    .rng-block .rng-layout-list--cols-3 .rng-layout-list__img {
        width:         100% !important;
        min-width:     100% !important;
        max-width:     100% !important;
        height:        0 !important;
        padding-top:   60% !important;
        margin-bottom: 5px !important;
        border-radius: 4px !important;
        position:      relative !important;
    }
    .rng-block .rng-layout-list--cols-3 .rng-layout-list__img img {
        position:   absolute !important;
        top:        0 !important;
        left:       0 !important;
        width:      100% !important;
        height:     100% !important;
        object-fit: cover !important;
    }
    body.asap-box-design .rng-layout-list--cols-3 .rng-layout-list__body,
    .rng-layout-list--cols-3 .rng-layout-list__body {
        padding: 4% 5% 5% 5% !important; box-sizing: border-box !important;
        flex:    1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .rng-layout-list--cols-3 .rng-super-cat {
        font-size:      8px !important;
        margin-bottom:  2px !important;
        letter-spacing: 0.3px !important;
    }
    .rng-layout-list--cols-3 .rng-card__title {
        font-size:          10px !important;
        font-weight:        700 !important;
        line-height:        1.25 !important;
        margin:             2px 0 3px !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        min-height:         0 !important;
        max-height:         none !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
    }
    .rng-layout-list--cols-3 .rng-card__excerpt {
        display: none !important;
    }
    .rng-layout-list--cols-3 .rng-card__meta {
        font-size:     8px !important;
        margin-top:    auto !important;
        padding-top:   2px !important;
        white-space:   nowrap !important;
        overflow:      hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ── 5. 1 HERO + GRID (3 COLUMNAS ABAJO) ────────────────── */
    .rng-layout-hero__grid {
        display:               grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columnas uniformes */
        gap:                   8px !important;
        border-top:            1px solid var(--rng-gray-lt, #e2e2e2) !important;
        padding-top:           12px !important;
    }
    .rng-layout-hero__grid .rng-card {
        height:         100% !important;
        display:        flex !important;
        flex-direction: column !important;
        box-sizing:     border-box !important;
        min-width:      0 !important;
    }
    .rng-layout-hero__grid .rng-card__img-wrap {
        padding-top:   60% !important;
        border-radius: 4px !important;
        margin-bottom: 5px !important;
    }
    body.asap-box-design .rng-layout-hero__grid .rng-card__body,
    .rng-layout-hero__grid .rng-card__body {
        padding: 4% 5% 5% 5% !important; box-sizing: border-box !important;
        flex:    1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .rng-layout-hero__grid .rng-super-cat {
        font-size:      8px !important;
        margin-bottom:  2px !important;
        letter-spacing: 0.3px !important;
    }
    .rng-layout-hero__grid .rng-card__title {
        font-size:          10px !important;
        font-weight:        700 !important;
        line-height:        1.25 !important;
        margin:             2px 0 3px !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        min-height:         0 !important;
        max-height:         none !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
    }
    .rng-layout-hero__grid .rng-card__excerpt {
        display: none !important;
    }
    .rng-layout-hero__grid .rng-card__meta {
        font-size:     8px !important;
        margin-top:    auto !important;
        padding-top:   2px !important;
        white-space:   nowrap !important;
        overflow:      hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ── 6. MAGAZINE ────────────────────────────────────────── */
    .rng-layout-magazine {
        display:        flex !important;
        flex-direction: column !important;
        gap:            16px !important;
    }
    .rng-layout-magazine__medium-grid {
        display:               grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en móvil */
        gap:                   10px !important;
    }
    .rng-layout-magazine__medium-grid .rng-card {
        height:     100% !important;
        display:    flex !important;
        flex-direction: column !important;
    }
    .rng-layout-magazine__medium-grid .rng-card__img-wrap {
        padding-top:   56.25% !important;
        border-radius: 4px !important;
        margin-bottom: 5px !important;
    }
    .rng-layout-magazine__medium-grid .rng-card__title {
        font-size:          11px !important;
        line-height:        1.25 !important;
        margin:             2px 0 3px !important;
        word-break:         break-word !important;
        display:            block !important;
        height:             auto !important;
        min-height:         0 !important;
        max-height:         none !important;
        overflow:           visible !important;
        -webkit-line-clamp: unset !important;
        white-space:        normal !important;
    }
    .rng-layout-magazine__medium-grid .rng-card__excerpt {
        display: none !important;
    }

    /* ── 7. SECCIÓN OSCURA ──────────────────────────────────── */
    .rng-layout-dark {
        padding:       16px 12px !important;
        border-radius: 8px !important;
    }
    .rng-layout-dark__grid {
        display:        flex !important;
        flex-direction: column !important;
        gap:            14px !important;
    }
    .rng-layout-dark__list-item {
        padding: 8px 0 !important;
    }
    .rng-block .rng-layout-dark__list-item-img {
        width:     70px !important;
        min-width: 70px !important;
        height:    48px !important;
    }
    .rng-layout-dark__list-item-title a {
        font-size:   12px !important;
        line-height: 1.3 !important;
    }

    /* ── 8. CARRUSEL ────────────────────────────────────────── */
    .rng-carousel-item {
        flex: 0 0 145px !important;
    }
    .rng-carousel-htitle {
        font-size: 15px !important;
    }

    /* Ajustes refinados de proporción de imagen para móvil en horizontal (landscape) */
    @media (orientation: landscape) and (max-width: 991px), (orientation: landscape) and (max-height: 550px) {
        .rng-hero2-card--lead1 .rng-card__img-wrap {
            padding-top: 50% !important;
        }
        .rng-hero2-card--side .rng-hero2-side-img {
            padding-top: 26% !important;
        }
        .rng-block .rng-layout-grid .rng-card__title {
            font-size: 10.5px !important;
        }
    }
}

/* ── Ajuste exclusivo móvil en orientación vertical: Titular Lead 1 (60%) ── */
@media (max-width: 768px) and (orientation: portrait), (max-width: 600px) and (orientation: portrait) {
    .rng-hero2-card--lead1 .rng-h2-title--main {
        font-size:   18.5px !important;
        line-height: 1.25 !important;
    }
}