/* ---------- BANNER PRINCIPAL ---------- */
.banner {
    position: relative;
}

.banner img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 600px;
    object-fit: cover;
}

.banner-text {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translateY(-50%);
    padding: 1.5rem;
    width: 15%;
    min-width: 150px;


    background-color: rgba(4, 132, 203, 0.85);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: white;
}

.addictions-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.addictions-list li {
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    padding-left: 1.5rem;
}

.addictions-list li:last-child {
    border-bottom: none;
}

.addictions-list li::before {
    content: "•";
    color: #ffcc00; /* Color de acento */
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}


.banner-text2 {
    position: absolute;
    top: 15%;
    left: 60%;
    transform: translateY(-50%);
    padding: 2rem;
    width: 40%;
    min-width: 300px;

}

.banner h1 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.banner p {
    font-size: 1.2rem;
    color: #f8f8f8;
    margin: 0 0 1.5rem 0;
}

/* ---------- BOTONES ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    text-decoration: none;
    margin-top: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* WhatsApp con respaldo de icono */
.btn-whatsapp {
    background-color: #25D366 !important;
    color: white !important;
    border: 2px solid #25D366 !important;
    padding: 0.8rem 1.5rem 0.8rem 2.5rem;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.btn-whatsapp::before {
    content: '\f232';
    font-family: 'Font Awesome 6 Brands', sans-serif;
    position: absolute;
    left: 1rem;
    font-size: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Respaldo SVG si FontAwesome falla */
.btn-whatsapp::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-6.29-3.762c.545 1.492.933 2.879 1.033 3.18.087.278.174.416.39.416.198 0 .347-.074.545-.148.198-.074 1.213-.744 1.36-.826.148-.082.272-.123.396.123.124.248.534 1.04.715 1.392.18.35.36.526.54.526.148 0 .297-.074.495-.247.198-.173.694-.678.941-1.238.248-.56.496-1.336.496-1.732 0-.397-.173-.57-.372-.57-.198 0-.347.025-.495.025-.148 0-.347-.025-.545-.05-.198-.024-.372-.123-.644-.247-.272-.124-.495-.186-.694-.186-.198 0-.396.062-.545.124-.148.062-.297.198-.396.298-.1.099-.2.173-.3.173-.1 0-.198-.05-.248-.148-.05-.1-.396-.98-.545-1.34'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

@supports not (font-family: 'Font Awesome 6 Brands') {
    .btn-whatsapp::before { display: none; }
    .btn-whatsapp::after { display: block; }
}

.btn-whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background-color: #0484cb;
    color: white;
    border: 2px solid #0484cb;
}

.btn-secondary:hover {
    background-color: #0369a1;
    transform: translateY(-3px);
}

/* ---------- SECCIÓN DE 3 CUADROS ---------- */
.features {
    display: flex;
    justify-content: center;
    padding: 5rem 1rem;
    flex-wrap: wrap;
    gap: 2rem;
    background-color: #ffffff;
    position: relative;
}

.features::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(4, 132, 203, 0.03) 0%, rgba(4, 132, 203, 0.01) 100%);
    z-index: 0;
}

.feature-box {
    width: 30%;
    min-width: 300px;
    max-width: 380px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(4, 132, 203, 0.1);
    animation: fadeInScale 0.6s ease-out forwards;
}

.feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.feature-img-container {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
}

.feature-img-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(4, 132, 203, 0.1) 0%, rgba(4, 132, 203, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-box:hover .feature-img-container::after {
    opacity: 1;
}

.feature-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.4s ease;
    filter: brightness(0.95);
}

.feature-box:hover .feature-img-container img {
    transform: scale(1.1);
    filter: brightness(1);
}

.feature-content {
    padding: 2rem;
    text-align: center;
}

.feature-content h3 {
    color: #0484cb;
    margin-bottom: 1.2rem;
    font-size: 1.5rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.feature-content h3::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #25D366;
    transition: width 0.4s ease;
}

.feature-box:hover .feature-content h3::after {
    width: 80px;
}

.feature-content p {
    color: #555;
    margin-bottom: 2rem;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* ---------- ANIMACIONES ---------- */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.feature-box:nth-child(1) { animation-delay: 0.1s; }
.feature-box:nth-child(2) { animation-delay: 0.2s; }
.feature-box:nth-child(3) { animation-delay: 0.3s; }

/* ---------- SECCIÓN SOBRE NOSOTROS ---------- */
.about {
    text-align: center;
    padding: 4rem 1rem;
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e9f1 100%);
    position: relative;
    overflow: hidden;
}

.about::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="%230484cb" fill-opacity="0.03" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 0;
}

.about h2,
.about p,
.about .btn {
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.8s ease-out;
}

.about h2 {
    font-size: 2.5rem;
    color: #0484cb;
    margin-bottom: 1.5rem;
}

.about p {
    max-width: 800px;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    padding: 0 1rem;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- BOTÓN WHATSAPP FLOTANTE ---------- */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 100;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    @media (max-width: 768px) {
    .banner-text, .banner-text2 { /* Aplicamos las mismas reglas a AMBAS clases */
        position: relative; /* Sacamos el posicionamiento absoluto */
        width: 90%; /* Ocupamos casi todo el ancho */
        left: auto; /* Anulamos el left */
        transform: none; /* Anulamos el transform para centrar */
        margin: 1rem auto; /* Margen automático para centrar + espacio arriba/abajo */
        background-color: #0484cb; /* Fondo para mejor legibilidad */
        text-align: center; /* Centramos el texto */
        top: auto; /* Aseguramos que no haya un top heredado */
    }

    /* Opcional: Podemos agregar un margen superior diferente a uno de ellos para separarlos */
    .banner-text {
        margin-top: 2rem; /* Le doy más margen superior al primer texto */
    }
    .banner-text2 {
        margin-top: 1rem; /* Menos margen al segundo texto */
    }
}

    .features { padding: 3rem 1rem; gap: 1.5rem; }
    .feature-box { width: 100%; max-width: 400px; margin: 0 auto 1.5rem; }
    .feature-img-container { height: 200px; }
    .feature-content { padding: 1.5rem; }

    .about { padding: 3rem 1rem; }
    .about h2 { font-size: 2rem; }
    .about p { font-size: 1rem; }

    .whatsapp-float {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
        bottom: 15px;
        right: 15px;
    }
}