.editorial-section {
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a;
}

/* ========================================= */
/* ESTILOS DEL ENCABEZADO (TÍTULO Y TEXTO)   */
/* ========================================= */
.editorial-header {
    min-height: 100vh; 
    padding: 2rem 1rem;
}

.editorial-title {
    color: #000000;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.editorial-subtitle {
    line-height: 1.5;
    color: #333333;
    margin-bottom: 0;
    font-size: 1.1rem;
}

/* ========================================= */
/* GALERÍA GUERRY (MASONRY 3 COLUMNAS)       */
/* ========================================= */
.guerry-gallery {
    column-count: 3; 
    column-gap: 1rem; /* Margen blanco horizontal entre columnas */
}

.guerry-gallery img {
    width: 100%;
    display: block;
    margin-bottom: 1rem; /* Margen blanco vertical entre imágenes */
    break-inside: avoid; /* Previene que la imagen se corte a la mitad */
    border-radius: 4px; 
}

/* ========================================= */
/* MOCKUPS GUERRY (GRID + FLEX ASIMÉTRICO)   */
/* ========================================= */
.guerry-mockups {
    display: grid;
    /* Proporciones de las columnas: Izq 35%, Centro 30%, Der 35% */
    grid-template-columns: 35fr 30fr 35fr;
    gap: 0; /* Pegadas al 100% */
    
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: 820px;
}

.guerry-col {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.guerry-col img {
    width: 100%;
    object-fit: cover; /* Adapta la imagen al espacio sin deformarla */
    display: block;
}

/* Alturas relativas para simular los cortes de tu diseño */
/* Columna Izquierda */
.guerry-left-top { height: 55%; }
.guerry-left-bottom { height: 45%; }

/* Columna Central */
.guerry-center-top { height: 50%; }
.guerry-center-bottom { height: 50%; }

/* Columna Derecha (Corte más arriba) */
.guerry-right-top { height: 35%; }
.guerry-right-bottom { height: 65%; }

/* ========================================= */
/* AJUSTES RESPONSIVOS (CELULARES)           */
/* ========================================= */
@media (max-width: 991px) {
    .guerry-gallery {
        column-count: 2; /* En tablets bajamos a 2 columnas */
    }
    
    /* Le damos un poco de espacio al texto "Proyecto 06" en móviles */
    .project-block .mt-auto {
        margin-top: 2rem !important;
    }
}

@media (max-width: 768px) {
    .guerry-mockups {
        grid-template-columns: 1fr; /* Pasa a 1 sola columna en móviles */
        height: auto; /* Quitamos la altura fija */
        box-shadow: none;
    }
    
    .guerry-col {
        height: auto;
    }
    
    .guerry-col img {
        height: 300px; /* Le damos una altura estándar a cada imagen en celular */
    }
}

@media (max-width: 576px) {
    .editorial-title {
        font-size: clamp(3.5rem, 12vw, 5rem); 
    }
    
    .editorial-subtitle {
        font-size: 1rem;
    }

    /* ========================================= */
    /* GALERÍA GUERRY (MASONRY 3 COLUMNAS)       */
    /* ========================================= */
    .guerry-gallery {
        column-count: 1; /* En celulares a 1 sola columna */
    }
}