/* ========================================= */
/* SECCIÓN BRANDING                          */
/* ========================================= */
.branding-section {
    font-family: 'Poppins', sans-serif; /* Poppins queda perfecto para este estilo minimalista */
    color: #1a1a1a;
}

/* ========================================= */
/* ESTILOS DEL ENCABEZADO (TÍTULO Y TEXTO)   */
/* ========================================= */
.branding-header {
    /* min-height: 100vh asegura que el bloque ocupe toda la altura de la pantalla 
       para lograr ese efecto de centrado absoluto que se ve en tu imagen */
    min-height: 100vh; 
    padding: 2rem 1rem;
}

.branding-title {
    color: #000000;
    margin-bottom: 1rem;
    letter-spacing: -1px; /* Le da un toque un poco más moderno y compacto al título */
}

.branding-subtitle {
    line-height: 1.5;
    color: #333333;
    margin-bottom: 0;
    font-size: 1.1rem; /* Tamaño sutilmente más grande para mejorar la lectura */
}

/* ========================================= */
/* COLLAGE BRANDING (PEGADO SIN ESPACIOS)    */
/* ========================================= */
.asiy-collage {
    display: grid;
    /* Dividimos en 3 proporciones: Izquierda 40%, Centro 30%, Derecha 30% */
    grid-template-columns: 4fr 3fr 3fr; 
    grid-auto-rows: minmax(200px, auto); /* Altura base para que no se achaten */
    gap: 0; /* La clave para que estén pegadas */
    
    /* Le damos el mismo borde redondeado del resto del portafolio */
    border-radius: 4px; 
    overflow: hidden; /* Corta las esquinas de las imágenes para respetar el border-radius */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Una sombrita muy sutil */
}

/* La imagen principal ocupa la columna 1, pero baja ocupando 2 filas completas */
.asiy-collage-main {
    grid-column: 1 / 2; 
    grid-row: 1 / 3; 
}

.asiy-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que tu diseño se deforme al rellenar el espacio */
    display: block;
}

/* ========================================= */
/* COLLAGE RUBÉN VIVAS (GRID PERSONALIZADO)  */
/* ========================================= */
.ruben-collage {
    display: grid;
    /* Proporciones exactas de la imagen: la columna derecha es un poco más ancha */
    grid-template-columns: 3fr 3fr 4fr; 
    gap: 0; /* Cero espacios entre imágenes */
    
    border-radius: 4px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.ruben-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción sin deformar */
    display: block;
}

/* --- Posicionamiento en el Grid --- */

.ruben-item-folder {
    grid-column: 1 / 3; /* Abarca columnas 1 y 2 */
    grid-row: 1 / 2;    /* Solo fila superior */
}

.ruben-item-cards {
    grid-column: 1 / 2; /* Solo columna 1 */
    grid-row: 2 / 3;    /* Solo fila inferior */
}

.ruben-item-pattern {
    grid-column: 2 / 3; /* Solo columna 2 */
    grid-row: 2 / 3;    /* Solo fila inferior */
}

.ruben-item-letter {
    grid-column: 3 / 4; /* Abarca la columna 3 */
    grid-row: 1 / 3;    /* Abarca AMBAS filas (superior e inferior) */
}

/* ========================================= */
/* COLLAGE BEGO (GRID AVANZADO 3x3)          */
/* ========================================= */
.bego-collage {
    display: grid;
    /* Proporciones: Izquierda 40% | Centro 40% | Derecha 20% */
    grid-template-columns: 4fr 4fr 2fr; 
    gap: 0; 
    
    border-radius: 4px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.bego-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta suavemente para llenar el molde perfecto */
    display: block;
}

/* --- Posicionamiento como Rompecabezas --- */

.bego-item-pattern {
    grid-column: 1 / 2; /* Solo columna 1 (Izquierda) */
    grid-row: 1 / 2;    /* Solo fila 1 (Arriba) */
}

.bego-item-box {
    grid-column: 1 / 2; /* Solo columna 1 (Izquierda) */
    grid-row: 2 / 4;    /* Abarca filas 2 y 3 (Baja hasta el fondo) */
}

.bego-item-poster {
    grid-column: 2 / 4; /* Abarca columnas 2 y 3 (Todo el lado derecho) */
    grid-row: 1 / 3;    /* Abarca filas 1 y 2 (Llega hasta las tarjetas) */
}

.bego-item-cards {
    grid-column: 2 / 3; /* Columna 2 (Centro) */
    grid-row: 3 / 4;    /* Fila 3 (Abajo) */
}

.bego-item-bacano {
    grid-column: 3 / 4; /* Columna 3 (Derecha) */
    grid-row: 3 / 4;    /* Fila 3 (Abajo) */
}

/* ========================================= */
/* RESPONSIVE DEL COLLAGE (CELULARES)        */
/* ========================================= */
@media (max-width: 768px) {
    .asiy-collage {
        /* En celulares, cambiamos a 2 columnas iguales */
        grid-template-columns: 1fr 1fr; 
    }
    
    .asiy-collage-main {
        /* La libreta pasa arriba ocupando todo el ancho */
        grid-column: 1 / 3; 
        grid-row: 1 / 2;
        max-height: 400px; /* Le ponemos un tope de altura para que no sea inmensa */
    }

    /* ========================================= */
    /* RESPONSIVE COLLAGE RUBÉN (CELULARES)      */
    /* ========================================= */
    .ruben-collage {
        /* En móviles lo pasamos a 2 columnas para que no se vea microscópico */
        grid-template-columns: 1fr 1fr; 
    }
    
    .ruben-item-folder {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    
    .ruben-item-cards {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    
    .ruben-item-pattern {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    
    .ruben-item-letter {
        grid-column: 1 / 3;
        grid-row: 3 / 4; /* Pasa a una tercera fila ocupando todo el ancho */
    }

    /* ========================================= */
    /* RESPONSIVE COLLAGE BEGO (CELULARES)       */
    /* ========================================= */
    .bego-collage {
        /* En móviles apilamos de forma más limpia */
        grid-template-columns: 1fr 1fr; 
    }
    
    /* El patrón y la caja ocupan todo el ancho, uno sobre otro */
    .bego-item-pattern,
    .bego-item-box,
    .bego-item-poster {
        grid-column: 1 / 3;
    }
    
    .bego-item-pattern { grid-row: 1 / 2; }
    .bego-item-box { grid-row: 2 / 3; }
    .bego-item-poster { grid-row: 3 / 4; }
    
    /* Las tarjetas y el logo bacano se dividen la última fila */
    .bego-item-cards {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .bego-item-bacano {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }
}

@media (max-width: 576px) {
    .branding-title {
        font-size: clamp(3.5rem, 12vw, 5rem); /* Se adapta para no desbordar en móviles */
    }
    
    .branding-subtitle {
        font-size: 1rem;
    }
}