/**
 * /assets/css/box-pnws.css v.6.0.1
 * PERUNEWS - Sistema de Rejilla Elástica y Permutación Especial
 * ARCHIVO ÚNICO: Todos los estilos no críticos
 * 2026-03-12
 * 
 * BREAKPOINTS:
 *   - Mobile:    0 - 767px
 *   - Tablet:    768px - 1023px
 *   - Desktop:   1024px - 1400px
 *   - Wide:      1401px+
 */

/* =============================================================================
   1. VARIABLES CSS (Custom Properties)
   ============================================================================= */
:root {
    /* Colores */
    --border-color: #555;
    --border-light: #e0e0e0;
    --text-color: #1a1a1a;
    --accent: #555;
    --link-color: #0066cc;
    --link-hover: #004499;
    
    /* Espaciado */
    --gap-sm: 15px;
    --gap-md: 20px;
    --gap-lg: 26px;              /* Alineado con inline */
    --margin-post: 22px;
    --padding-post: 18px;
    
    /* Dimensiones */
    --thumb-width: 42%;
    --thumb-width-side: 107px;   /* Level-3 float thumb */
    --thumb-aspect-main: 16/9;
    --thumb-aspect-side: 5/3;
    --box-side-width: 31%;
    --box-center-width: 38%;
    --box-side-max: 380px;
    --box-center-max: 466px;
    --grid-item-width: 47.4%;
    --sidebar-w: 300px;
    
    /* Contenedores */
    --container-width-mobile: 96%;
    --container-width-tablet: 1440px;
    --container-width-desktop: 1240px;   /* ✅ Tu adenda */
    
    /* Tipografía */
    --font-body: 'Verdana', sans-serif;
    --font-title: 'Merriweather', serif;
    --font-titles: 'Merriweather', serif;  /* Alineado con inline */
    --letter-spacing: 1.4px;
    --font-size-base: 16px;
    --font-size-title: 1.1rem;
    --font-size-excerpt: 0.95rem;
    
    /* Bordes */
    --border-radius: 4px;
    --border-radius-lg: 8px;
    --border-width: 1px;
    
    /* Transiciones */
    --transition-speed: 0.3s;
    --transition-ease: ease;
}

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

body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--text-color);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.2;
}

/* =============================================================================
   3. CONTENEDOR MAESTRO (Complementa inline CSS)
   ============================================================================= */
#cntn-0 {
    padding-top: 9px;
    padding-left: 10px;
    padding-right: 10px;
}

/* =============================================================================
   4. ESTRUCTURA DE NIVELES (Mobile First)
   ============================================================================= */
.section-level-1,
.section-level-2,
.section-level-3 {
    display: flex;
    flex-direction: column;
    max-width: var(--container-width-tablet);
    margin-bottom: 45px;
    gap: var(--gap-lg);
}

/* =============================================================================
   5. SECTION-LEVEL-3 (Estilos específicos + ADS magic)
   ============================================================================= */
.section-level-3 {
    background-color: #fff;
    border-radius: var(--border-radius-lg);
}

.section-level-3 .item-float {
    display: flex;
    flex-direction: column;
}

.section-level-3 .float-title a {
    font-family: var(--font-titles);
    font-size: var(--font-size-title);
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
}

.section-level-3 .float-title a:hover {
    color: var(--accent);
}

.section-level-3 .float-thumb {
    width: 100%;
    max-width: var(--thumb-width-side);
}

.section-level-3 .float-thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    display: block;
}

.section-level-3 .float-excerpt {
    font-size: var(--font-size-excerpt);
    color: #444;
    line-height: 1.5;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
}

.section-level-3 .float-excerpt .leer-mas {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
}

.section-level-3 .float-excerpt .leer-mas:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.section-level-3 .item-hr {
    border: none;
    height: 1px;
    background: var(--border-light);
    margin: 15px 0;
}

/* =============================================================================
   6. ASIDE (Transiciones + Responsive)
   ============================================================================= */
#box-cntn-right-1 {
    transition: opacity var(--transition-speed) var(--transition-ease),
                transform var(--transition-speed) var(--transition-ease);
    will-change: opacity, transform;
}

#box-cntn-right-1.moving {
    opacity: 0.7;
    transform: scale(0.98);
}

#box-cntn-right-1.moved {
    opacity: 1;
    transform: scale(1);
}

/* Tablet: Aside responsive */
@media (max-width: 1278px) and (min-width: 769px) {
    #box-cntn-right-1 {
        width: 100%;
        max-width: 330px;
        margin: 0 auto 20px auto;
    }
}

/* Mobile: Aside oculto opcional */
@media (max-width: 768px) {
    #box-cntn-right-1.oculto {
        display: none !important;
    }
}

/* =============================================================================
   7. TABLET (768px - 1023px)
   ============================================================================= */
@media (min-width: 768px) {
    
    /* Layout de niveles */
    .section-level-1,
    .section-level-2,
    .section-level-3 {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Cajas laterales */
    .box-left,
    .box-right {
        flex: 0 1 var(--box-side-width);
        max-width: var(--box-side-max);
    }

    /* Caja central (Hero/Last Post) */
    #box-cntn-left-2,
    #box-cntn-left-5-2,
    .box-center {
        flex: 0 1 var(--box-center-width);
        max-width: var(--box-center-max);
    }

    /* Grid de 2 columnas (47.4% cada item) */
    #box-cntn-left-5-2,
    #box-cntn-left-5-3,
    .grid-box-5 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        gap: var(--gap-md);
    }

    .grid5-item {
        flex: 0 0 var(--grid-item-width);
        max-width: var(--grid-item-width);
    }

    /* Permutación exclusiva: Excerpt Izq / Foto Der (ID específico) */
    #tit-thb-xcp-2-2 {
        display: block;
        width: 100%;
    }

    #tit-thb-xcp-2-2 .thumb-left,
    #tit-thb-xcp-2-2 .thumb-right {
        float: right;
        margin-left: var(--gap-sm);
        margin-right: 0;
        width: var(--thumb-width);
    }
}

/* =============================================================================
   8. DESKTOP (1024px+)
   ============================================================================= */
@media (min-width: 1024px) {
    
    /* ✅ ADENDA: Main Wrapper con ancho máximo de 1240px */
    .main-wrapper {
        max-width: var(--container-width-desktop);
        margin: 0 auto;
    }

    /* Contenedor maestro también puede limitarse */
    #cntn-0 {
        max-width: var(--container-width-desktop);
    }
}

/* =============================================================================
   9. MOBILE (max-width: 767px)
   ============================================================================= */
@media (max-width: 767px) {
    
    .box-left,
    .box-center,
    .box-right,
    .grid5-item,
    .level1-post,
    .item-float {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Reset de flotados en móvil */
    .thumb-left,
    .thumb-right {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }
}

/* =============================================================================
   10. POSTS (Estilo de lista con separador)
   ============================================================================= */
.level1-post {
    width: 100%;
    margin-bottom: var(--margin-post);
    padding-bottom: var(--padding-post);
    border-bottom: var(--border-width) solid var(--border-light);
    overflow: hidden;
}

/* =============================================================================
   11. IMÁGENES Y WRAPPERS
   ============================================================================= */
.grid5-item-thumb-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 12px;
    border-radius: var(--border-radius);
}

.grid5-item-thumb-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--thumb-aspect-main);
    object-fit: cover;
    display: block;
    border: var(--border-width) solid var(--border-color);
    box-sizing: border-box;
    border-radius: var(--border-radius);
}

/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 16/9) {
    .grid5-item-thumb-wrapper img {
        padding-bottom: 56.25%;
        height: 0;
        position: relative;
    }
}

/* =============================================================================
   12. MINIATURAS FLOTANTES (Thumb Left / Thumb Right)
   ============================================================================= */
.thumb-left,
.thumb-right {
    width: var(--thumb-width);
    aspect-ratio: var(--thumb-aspect-side);
    object-fit: cover;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color);
}

.thumb-left {
    float: left;
    margin-right: var(--gap-sm);
    margin-top: 5px;
}

.thumb-right {
    float: right;
    margin-left: var(--gap-sm);
    margin-top: 5px;
}

/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 5/3) {
    .thumb-left,
    .thumb-right {
        padding-bottom: 60%;
        height: 0;
        position: relative;
    }
}

/* =============================================================================
   13. TÍTULOS EDITORIALES (Actualizado: sin subrayado + colores)
   ============================================================================= */

/* Estado normal: #333 sin subrayado */
.level1-title a,
.grid5-title a,
.float-title a {
    font-family: var(--font-title);
    font-weight: 700;
    color: #333;
    text-decoration: none;
    margin-bottom: 3px;
    transition: color 0.2s ease;
}

/* Estado hover: azul sin subrayado */
.level1-title a:hover,
.grid5-title a:hover,
.float-title a:hover {
    color: #0066cc;
    text-decoration: none;
}

/* Estado visited (opcional) */
.level1-title a:visited,
.grid5-title a:visited,
.float-title a:visited {
    color: #555;
    text-decoration: none;
}

/* =============================================================================
   14. FECHAS DE PUBLICACIÓN
   ============================================================================= */
.last-date,
.post-date {
    font-family: var(--font-body);
    font-size: 1em;
    letter-spacing: var(--letter-spacing);
    margin: -7px 0 3px 0;
}

/* =============================================================================
   15. LIGHTHOUSE OPTIMIZATIONS (Reducir CLS)
   ============================================================================= */
#target-section:empty {
    min-height: 200px;
}

.grid-box-5,
.item-float,
.item-horizontal {
    contain: layout style;
}

/* =============================================================================
   16. CLEARFIX (Para contenedores con floats)
   ============================================================================= */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* =============================================================================
   17. UTILIDADES
   ============================================================================= */
.clear-both {
    clear: both;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}