/**
 * Layout principal RESCOP 
 */

/* === CONTENEDORES PRINCIPALES === */
.rescop-container {
    max-width: 1680px;
    margin: 0 auto;
    position: relative;
}

.rescop-content-area {
    max-width: 1520px; /* Ancho efectivo: 1680 - 160px padding */
    margin: 0 auto;
    padding: 0 80px;
}

/* === SECCIONES PRINCIPALES === */
.rescop-section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Hero Section */
.rescop-section-hero {
    height: 1065px;
    background: white;
    position: relative;
}

.rescop-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    z-index: 1;
}

.rescop-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 208px; /* Basado en left: 208px que veo */
}

/* Noticias destacadas */
.rescop-section-news {
    height: 600px;
    background: rgba(255, 255, 255, 0);
    position: relative;
}

/* Campañas activas */
.rescop-section-campaigns {
    height: 1065px;
    background: white;
    position: relative;
}

/* Últimas noticias */
.rescop-section-latest {
    height: 1086px;
    background: #D9D0C3;
    position: relative;
}

/* Organizaciones */
.rescop-section-orgs {
    min-height: 800px;
    background: white;
    padding: 4rem 0;
    position: relative;
}

/* === SISTEMA DE GRILLAS === */

/* Grid Noticias Destacadas - 3 columnas */
.rescop-grid-news {
    display: grid;
    grid-template-columns: 429px 429px 429px; /* Anchos exactos */
    gap: 86px; /* Gap calculado: (1520 - (429*3)) / 2 = 86.5px */
    justify-content: center;
    align-items: start;
    padding: 164px 0 0 0; /* top: 164px desde Figma */
}

/* Grid Campañas - 3 columnas */
.rescop-grid-campaigns {
    display: grid;
    grid-template-columns: 429px 429px 429px; /* Anchos exactos */
    gap: 84px; /* Gap calculado: aproximado */
    justify-content: center;
    align-items: start;
    padding: 356px 0 0 0; /* top: 356px desde Figma */
}

/* Grid Organizaciones - 4 columnas */
.rescop-grid-organizations {
    display: grid;
    grid-template-columns: repeat(4, 353px); /* Ancho exacto: 353px */
    gap: 107px; /* Gap calculado: (1520 - (353*4)) / 3 = 106.67px */
    justify-content: center;
    align-items: start;
    padding: 2rem 0;
}

/* Layout Últimas Noticias - Mixto */
.rescop-layout-latest {
    display: grid;
    grid-template-columns: 686px 830px; /* Anchos exactos */
    gap: 25px; /* Gap calculado: 780 - 686 - 69 = 25px aprox */
    justify-content: center;
    align-items: start;
    padding: 263px 0 0 0; /* top: 263px desde Figma */
}

.rescop-latest-main {
    /* Card principal */
}

.rescop-latest-sidebar {
    display: flex;
    flex-direction: column;
    gap: 57px; /* Gap entre cards secundarias: 520 - 255 - 208 = 57px */
}

/* === TIPOS DE CARDS === */

/* Cards Noticias Destacadas */
.rescop-card-news {
    width: 429px;
    height: 400px;
    background: white;
    border: 1px rgba(0, 0, 0, 0.50) solid;
    position: relative;
    overflow: hidden;
}

.rescop-card-news-image {
    width: 429px;
    height: 206px; /* Altura de imagen que veo */
    background: #E5E5E5;
    border: 1px rgba(0, 0, 0, 0.30) solid;
}

/* Cards Campañas */
.rescop-card-campaign {
    width: 429px;
    height: 560px;
    background: white;
    border: 1px rgba(0, 0, 0, 0.50) solid;
    position: relative;
    overflow: hidden;
}

.rescop-card-campaign-image {
    width: 429px;
    height: 275px; /* Altura de imagen que veo */
    background: #E5E5E5;
    border: 1px rgba(0, 0, 0, 0.30) solid;
}

/* Cards Organizaciones */
.rescop-card-org {
    width: 353px;
    height: 198px;
    background: white;
    border: 1px black solid;
    position: relative;
    overflow: hidden;
}

/* Card principal Últimas Noticias */
.rescop-card-latest-main {
    width: 686px;
    height: 722px;
    background: #F2F2F2;
    border: 1px rgba(0, 0, 0, 0.50) solid;
    position: relative;
}

.rescop-card-latest-main-image {
    width: 686px;
    height: 400px;
    background: #E5E5E5;
    border: 1px rgba(0, 0, 0, 0.30) solid;
}

/* Cards secundarias Últimas Noticias */
.rescop-card-latest-secondary {
    width: 830px;
    height: 208px;
    background: white;
    position: relative;
    overflow: hidden;
}

.rescop-card-latest-secondary:nth-child(even) {
    background: #F2F2F2; /* Alternar colores */
}

.rescop-card-latest-secondary-image {
    width: 213px;
    height: 134px;
    background: #E5E5E5;
    border: 1px rgba(0, 0, 0, 0.30) solid;
    float: left;
    margin: 34px 32px 34px 32px;
}

/* === TÍTULOS DE SECCIÓN === */
.rescop-section-title {
    text-align: center;
    color: black;
    font-size: 48px;
    font-family: var(--rescop-font-display, 'Anton', sans-serif);
    font-weight: 400;
    line-height: 72px;
    margin: 0;
    padding: 2rem 0;
}

.rescop-section-title.red-accent {
    color: #ED2E38; /* Para "Últimas noticias" */
}

.rescop-section-subtitle {
    text-align: center;
    color: rgba(0, 0, 0, 0.80);
    font-size: 36px;
    font-family: var(--rescop-font-primary, 'Merriweather Sans', serif);
    font-weight: 400;
    line-height: 50px;
    margin: 0;
    padding: 0 200px; /* Basado en left: 200px */
}

/* === RESPONSIVE === */
@media (max-width: 1680px) {
    .rescop-content-area {
        padding: 0 4rem;
    }
    
    .rescop-grid-news,
    .rescop-grid-campaigns {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    .rescop-grid-organizations {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .rescop-layout-latest {
        grid-template-columns: 1.2fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 1200px) {
    .rescop-grid-news,
    .rescop-grid-campaigns {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .rescop-grid-organizations {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .rescop-layout-latest {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .rescop-latest-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .rescop-content-area {
        padding: 0 1rem;
    }
    
    .rescop-grid-news,
    .rescop-grid-campaigns,
    .rescop-grid-organizations {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .rescop-section-hero,
    .rescop-section-news,
    .rescop-section-campaigns,
    .rescop-section-latest {
        height: auto;
        min-height: 400px;
        padding: 2rem 0;
    }
    
    .rescop-hero-content {
        padding: 0 2rem;
    }
    
    .rescop-section-subtitle {
        padding: 0 1rem;
        font-size: 24px;
        line-height: 1.4;
    }
}

/* === UTILIDADES DE LAYOUT === */
.rescop-text-center { text-align: center; }
.rescop-text-left { text-align: left; }
.rescop-text-right { text-align: right; }

.rescop-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rescop-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}