/* =================================
   HERO INSTALACIONES (SECCIÓN PRINCIPAL)
================================= */

.custom-jumbotron {

    background-image: url("../instalacion/fondo_instalaciones_puro.jpeg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 12px;

    padding: 60px 40px;

    margin-top: 20px;

}


/* =================================
   CONTENEDOR FLEX HERO
   Contiene texto izquierda y card derecha
================================= */

.hero-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    width: 100%;

}


/* =================================
   BLOQUE TEXTO PRINCIPAL
================================= */

.content {

    background: rgba(0,0,0,0.45);

    backdrop-filter: blur(4px);

    padding: 30px;

    border-radius: 12px;

    max-width: 600px;

    color: white;

    position: relative;

    z-index: 2;

}


/* título principal */

.custom-jumbotron h1 {

    font-weight: 600;

    margin-bottom: 15px;

}


/* descripción */

.custom-jumbotron p {

    font-size: 17px;

}


/* =================================
   CARD DERECHA (INSTALACIÓN INCLUYE)
================================= */

.info-card {

    background: rgba(0,0,0,0.55);

    backdrop-filter: blur(8px);

    padding: 25px;

    border-radius: 12px;

    max-width: 320px;

    color: white;

    box-shadow: 0 15px 35px rgba(0,0,0,0.4);

}


/* lista */

.info-card ul {

    list-style: none;

    padding: 0;

}

.info-card li {

    margin-bottom: 10px;

}


/* =================================
   SECCIÓN BENEFICIOS
================================= */

.beneficios-section {

    background: #2c2f36;

    padding: 80px 20px;

}


/* contenedor centrado */

.beneficios-container {

    max-width: 1200px;

    margin: auto;

    text-align: center;

}


/* título beneficios */

.beneficios-titulo {

    color: white;

    font-size: 32px;

    margin-bottom: 50px;

}


/* GRID BENEFICIOS */

.beneficios-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}


/* card individual */

.beneficio-card {

    background: rgba(255,255,255,0.05);

    backdrop-filter: blur(10px);

    padding: 30px 20px;

    border-radius: 12px;

    color: white;

    transition: 0.3s;

    text-align: center;

}


/* efecto hover */

.beneficio-card:hover {

    transform: translateY(-8px);

    background: rgba(255,255,255,0.08);

}


/* icono */

.beneficio-icono {

    font-size: 30px;

    color: #00c853;

    margin-bottom: 15px;

}


/* =================================
   RESPONSIVE CELULAR (OPTIMIZACIÓN TOTAL)
================================= */

@media (max-width: 768px) {

    /* hero se vuelve vertical */

    .hero-container {

        flex-direction: column;

        align-items: stretch;

        gap: 20px;

    }

    /* texto ocupa todo el ancho */

    .content {

        max-width: 100%;

        width: 100%;

        text-align: left;

    }

    /* card ocupa todo el ancho */

    .info-card {

        max-width: 100%;

        width: 100%;

        text-align: left;

    }

    /* título responsive */

    .custom-jumbotron h1 {

        font-size: 28px;

        line-height: 1.2;

        width: 100%;

        text-align: left;

        word-break: break-word;

    }

    /* texto responsive */

    .custom-jumbotron p {

        font-size: 16px;

    }

    /* beneficios 1 columna */

    .beneficios-grid {

        grid-template-columns: 1fr;

    }

    /* centrar contenido beneficios */

    .beneficio-card {

        text-align: center;

    }

}