/* ====== PALETA ======
#C5630C -> Naranja principal
#A47F6F -> Marrón suave
#415057 -> Gris azulado
#33353A -> Gris oscuro
#1A1F24 -> Fondo oscuro
#060A0D -> Casi negro
====================== */

.fila1 {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    padding: 60px 0; /* Similar a py-lg-5 */
}


.columna1 {
    width: 100%;
    max-width: 600px; /* Similar a ocupar 6/12 en pantallas grandes */
    text-align: center;
}

/* ------------------------------- */
/* Estilos de texto */
/* ------------------------------- */
.titulo1 {
    font-weight: 300; /* fw-light */
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.texto1 {
    font-size: 1.1rem; /* lead */
    color: #6c757d; /* text-muted */
    line-height: 1.6;
}

/* ------------------------------- */
/* Estilo del álbum */
/* ------------------------------- */
.album1 {
    background-color: #f8f9fa; /* Fondo claro */
    padding: 3rem 0;
}

/* Contenedor central */
.container1 {
    max-width: 1400px;
    margin: 0 auto;
}

/* ------------------------------- */
/* Fila de tarjetas */
/* ------------------------------- */
.row1 {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Espaciado entre tarjetas */
}

/* Cada columna / tarjeta */
.col1 {
    flex: 1 0 30%; /* Tres tarjetas por fila aprox */
}

/* ------------------------------- */
/* Tarjeta */
/* ------------------------------- */
.card1 {
    background-color: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

/* Imagen de la tarjeta: todas iguales */
.card-img-top1 {
    width: 100%;
    height: 500px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Recorta sin deformar */
    display: block;
}

/* Cuerpo de la tarjeta */
.card-body1 {
    padding: 1rem;
}

/* Texto dentro de la tarjeta */
.card-text1 {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

/* ------------------------------- */
/* Responsivo */
/* ------------------------------- */
@media (max-width: 768px) {
    .col {
        flex: 1 0 48%; /* Dos tarjetas por fila en tablet */
    }
}

@media (max-width: 480px) {
    .col {
        flex: 1 0 100%; /* Una tarjeta por fila en móvil */
    }
}