/* ==================================================
   TÍTULOS PRINCIPALES
   ================================================== */
.fw-bold {
    padding-top: 5%; 
    /* Se eliminó padding-left: 10% porque rompe la alineación de Bootstrap en celulares */
    display: flex; 
    flex-direction: column; 
    justify-content: left; 
    width: 100%; 
}

/* ==================================================
   SECCIÓN TOP (DISEÑO BASE - CELULAR)
   ================================================== */
.top {
    min-height: 70vh; 
    display: flex; 
    align-items: center; 
    text-align: center; 
}
.top h1 {
    font-size: 1.8rem; 
    color: #143963; 
}
.top p {
    font-size: 1rem; 
    color: #555; 
}
.top-img {
    max-width: 100%; 
    margin-top: 30px; 
}

/* ==================================================
   SECCIÓN TOP - AJUSTE PARA LAPTOP
   ================================================== */
@media (min-width: 992px) { 
    .top {
        text-align: left; 
    }
    .top h1 {
        font-size: 2.8rem; 
    }
    .top p {
        font-size: 1.2rem; 
    }
    .top-img {
        margin-top: 0; 
    }
}

/* ==================================================
   SECCIÓN CARTEL (TARJETAS INFORMATIVAS)
   ================================================== */
.cartel {
    width: 100%; 
    display: flex; 
    align-items: flex-end; 
    min-height: 70vh; 
}

.cartel-card {
    width: 100%; 
    background-image: linear-gradient(180deg, #c9f5f1, #7fb9de); 
    box-shadow: 0 0px 60px rgba(0, 0, 0, 0.2); 
    display: flex; 
    justify-content: center; 
    padding: 50px 20px; /* Padding para dar respiro arriba y abajo */
}

.cartel-text {
    display: flex; 
    flex-wrap: wrap; /* CRUCIAL: Permite que las tarjetas bajen de línea si no caben */
    justify-content: center; 
    gap: 30px; /* Crea una separación uniforme entre tarjetas sin usar margin */
    width: 100%;
    max-width: 1200px; 
}

/* ==================================================
   ESTILO VISUAL DE CADA TARJETA
   ================================================== */
.cartel-ritmo, .cartel-oxigeno, .cartel-ia, .cartel-sos {
    width: 100%; /* En celulares, cada tarjeta tomará casi todo el ancho */
    max-width: 250px; /* Limitamos el crecimiento para que no sean gigantes */
    background-color: white; 
    border-radius: 15px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    
    /* Centrado interno perfecto con flexbox */
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 30px 15px;
}

/* ==================================================
   IMÁGENES DE LAS TARJETAS
   ================================================== */
.cartel-text img {
    border-radius: 45%; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
    background-color: antiquewhite; 
    width: 60px; 
    height: 60px; 
    margin-bottom: 15px; /* Separación con el texto (reemplaza los márgenes antiguos) */
}

/* ==================================================
   TEXTO DE LAS TARJETAS
   ================================================== */
.cartel-ritmo p, .cartel-oxigeno p, .cartel-ia p, .cartel-sos p {
    font-size: 18px; 
    text-align: center; 
    margin: 0; /* Eliminamos márgenes adicionales para evitar descuadres */
}

/* ==================================================
   EFECTO HOVER EN TARJETAS
   ================================================== */
.cartel-ritmo:hover, .cartel-oxigeno:hover, .cartel-ia:hover, .cartel-sos:hover {
    transform: translateY(-10px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}

/* ==================================================
   MEDIA QUERY PARA ESCRITORIO (TARJETAS EN FILA)
   ================================================== */
@media (min-width: 992px) {
    .cartel-ritmo, .cartel-oxigeno, .cartel-ia, .cartel-sos {
        width: 22%; /* Regresamos las tarjetas a su tamaño horizontal en computadoras */
    }
}