/* Contenedor principal */
.collage-module-container {
    margin: 30px 0;
    width: 100%;
    display: block;
    padding: 0;
}

/* El Grid Maestro */
.collage-grid {
    position: relative;
    /* Evitamos desbordamientos en resoluciones anómalas */
    max-width: 100%; 
}

/* Celda individual (Item) */
.collage-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    box-sizing: border-box;
    background-color: transparent;
}

.collage-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); 
    z-index: 2;
}

/* Capas internas estructurales - 
   ¡VITAL! Max-width y Max-height para que las capas absolutas no revienten la celda */
.item-bg, 
.item-bg-color, 
.item-text-wrapper {
    box-sizing: border-box;
    max-width: 100%; 
    max-height: 100%;
}

/* Enlace global que cubre toda la tarjeta */
.item-global-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; 
    text-decoration: none;
    background: transparent;
    cursor: pointer;
}

/* Evitamos que el enlace global bloquee el botón CTA */
.item-cta-container {
    position: relative;
    z-index: 6; 
}

/* Prevención de desbordamiento de textos en pantallas pequeñas */
.item-title, 
.item-parrafo {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

/* Reseteo del botón CTA para que no herede estilos globales que rompan el display flex/inline-block */
.item-cta {
    transition: filter 0.2s ease;
    display: inline-block;
}

.item-cta:hover {
    filter: brightness(0.9);
}

/* Estilos base de la bandera */
.flag_preview_box {
    pointer-events: none; 
}

.flag_img {
    max-width: 100%;
    height: auto;
    display: block;
}