/* ===============================
   CONTENEDOR CENTRAL (FLEXBOX)
   =============================== */

.contenedor_centro{
    /* Eliminamos el height fijo y usamos padding */
    height: auto; 
    background-size: cover;
    background-position: center;
    padding: 30px 5% 20px 5%; /* Espacio en los bordes */
    margin: 0; /* Eliminar margin fijo */
    border-radius: 8px;
    margin-bottom: 100px;
    
    /* AÑADIDO: FLEXBOX para layout */
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; /* Espacio entre los bloques */
}

.leyenda{
    width: 50%; /* Ocupa el 50% en desktop */
    min-height: 400px;
    background-color: #DDC9A3;
    /* Quitamos float y margin fijos */
    margin: 0; 
    flex-grow: 1;
}

.mascota{
    width: 30%; /* Ocupa el 30% en desktop */
    min-height: 400px;
    background-color: #DDC9A3;
    /* Quitamos float y margin fijos */
    margin: 0; 
    flex-grow: 1;
}

.franja_leyenda{
    width: 100%;
    height: 10%;
    background: #611232;
    margin-top: 360px;
}

.franja_mascota{
    width: 10%;
    height: 100%;
    background: #611232;
    margin-left: 430px;
}

/* ===============================
   RESPONSIVIDAD CONTENIDO CENTRAL
   =============================== */

@media (max-width: 900px) {
    .contenedor_centro {
        padding: 20px 5%; 
        gap: 20px;
    }
    
    /* En móvil, los bloques ocupan todo el ancho (se apilan) */
    .leyenda, .mascota {
        width: 100%; 
        min-height: 250px; 
    }
    
    /* Ajustamos las franjas para las nuevas alturas */
    .franja_leyenda {
        margin-top: calc(250px - 40px); /* Ajuste basado en el min-height */
    }
    
    .franja_mascota {
        /* Hacemos la franja horizontal en móvil si la mascota se apila */
        width: 100%;
        height: 8px;
        margin-left: 0;
        margin-top: calc(250px - 8px); 
    }
}