@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

:root{
    --morado:#23154a;
    --azul:#0b3c5d;
    --azul-oscuro:#0a1628;
    --naranja-oscuro:#7a3e00;
    --naranja:#eda552;
    --blanco:#ffffff;
    --gris:#f4f4f4;
    --gris-suave:#fafafa;
    --texto:#222222;
    --texto-suave:#505050;
    --sombra:0 18px 40px rgba(0,0,0,0.18);
    --radio:22px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Inter", system-ui, Arial, sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--gris);
    color:var(--texto);
    overflow-x:hidden;
}

/* TOPBAR */
.topbar{
    background:linear-gradient(90deg, var(--morado), var(--azul));
    color:var(--blanco);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    padding:10px 18px;
    font-size:12px;
    text-align:center;
}

/* HEADER */
.header{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(255,255,255,0.96);
    backdrop-filter:blur(10px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 42px;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.logo img{
    width:145px;
    display:block;
}

#nav{
    display:flex;
    align-items:center;
    gap:24px;
}

#nav a{
    text-decoration:none;
    color:var(--texto);
    font-size:14px;
    font-weight:600;
    position:relative;
    transition:0.3s ease;
}

#nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:linear-gradient(90deg, var(--morado), var(--azul));
    transition:0.3s ease;
}

#nav a:hover::after{
    width:100%;
}

.menu-toggle{
    display:none;
    background:none;
    border:none;
    font-size:30px;
    cursor:pointer;
    color:var(--texto);
    line-height:1;
}

/* HERO */
.hero{
    position:relative;
    overflow:hidden;
    min-height:88vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px 8%;
    background:linear-gradient(
        135deg,
        var(--azul-oscuro) 0%,
        var(--azul) 42%,
        var(--naranja-oscuro) 76%,
        var(--naranja) 100%
    );
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(255,255,255,0.08), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255,255,255,0.08), transparent 35%);
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1320px;
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    gap:50px;
}

.container{
    max-width:650px;
}

.badge{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.18);
    color:#fff7ea;
    font-size:13px;
    font-weight:700;
    margin-bottom:18px;
    backdrop-filter:blur(10px);
}

.hero h1{
    color:var(--blanco);
    font-size:clamp(34px, 5vw, 58px);
    line-height:1.05;
    font-weight:900;
    margin-bottom:20px;
    text-shadow:0 10px 30px rgba(0,0,0,0.28);
}

.hero p{
    color:rgba(255,255,255,0.95);
    font-size:clamp(15px, 2vw, 18px);
    line-height:1.7;
    margin-bottom:22px;
    max-width:640px;
}

.beneficios{
    list-style:none;
    display:grid;
    gap:10px;
    margin-bottom:28px;
    color:rgba(255,255,255,0.96);
    font-size:15px;
    line-height:1.5;
}
.hero-buttons{
    display:flex;
    gap:16px;
    margin-top:18px;
    flex-wrap:wrap;
}

/* BASE */
.btn{
    padding:14px 28px;
    border-radius:50px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:all 0.25s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* WHATSAPP (destacado) */
.btn-primary{
    background:#25D366;
    color:#fff;
    border:none;
    box-shadow:0 8px 20px rgba(37,211,102,0.3);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(37,211,102,0.4);
}

/* FICHA TÉCNICA (elegante blanco) */
.btn-white{
    background:#fff;
    color:#0b2c3d;
    border:2px solid #fff;
}

.btn-white:hover{
    background:#f2f2f2;
    transform:translateY(-3px);

}

/* OTROS MINERALES (naranja fuerte) */
.btn-orange{
    background:#ff6a00;
    color:#fff;
    border:none;
    box-shadow:0 8px 20px rgba(255,106,0,0.3);
}

.btn-orange:hover{
    background:#e85d00;
    transform:translateY(-3px);
}
.contacto-section .hero-buttons {
    justify-content: center;
}


/* SLIDER */
.slider-box{
    display:flex;
    justify-content:center;
    align-items:center;
}

.slider{
    position:relative;
    width:min(100%, 560px);
    height:430px;
    border-radius:28px;
    overflow:hidden;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.16);
    box-shadow:0 24px 50px rgba(0,0,0,0.30);
    backdrop-filter:blur(8px);
}

.slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.04);
    transition:opacity 1s ease, transform 1.2s ease;
}

.slide.active{
    opacity:1;
    transform:scale(1);
}

/* SECCIONES GENERALES */
.info-section,
.seo-section,
.faq-section{
    padding:80px 40px;
    text-align:center;
}

.info-section{
    background:var(--gris);
}

.seo-section{
    background:var(--gris-suave);
}

.faq-section{
    background:var(--gris);
}

.info-section h2,
.seo-section h2,
.faq-section h2{
    display:inline-block;
    font-size:34px;
    font-weight:800;
    margin-bottom:14px;
    color:#111111;
    position:relative;
}

.info-section h2::after,
.seo-section h2::after,
.faq-section h2::after{
    content:"";
    display:block;
    width:70%;
    height:4px;
    margin:12px auto 0;
    border-radius:99px;
    background:linear-gradient(90deg, var(--azul), var(--naranja));
}

.section-text{
    max-width:820px;
    margin:0 auto 38px;
    color:#3b3b3b;
    font-size:16px;
    line-height:1.7;
}

/* CARDS */
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:26px;
    max-width:1200px;
    margin:0 auto;
}

.card{
    background:var(--blanco);
    border-radius:18px;
    padding:30px 24px;
    box-shadow:var(--sombra);
    transition:0.3s ease;
}

.card:hover{
    transform:translateY(-8px);
}

.card h3{
    font-size:20px;
    color:var(--azul);
    margin-bottom:12px;
}

.card p{
    color:#333;
    line-height:1.65;
    font-size:15px;
}



/* CONTACTO */
.contacto-section{
    position:relative;
    overflow:hidden;
    padding:80px 20px;
    text-align:center;
    color:var(--blanco);
    background:linear-gradient(
        135deg,
        var(--azul-oscuro) 0%,
        var(--azul) 48%,
        var(--naranja-oscuro) 78%,
        #b88417 100%
    );
}

.contacto-section::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    top:-90px;
    left:-90px;
    background:radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
    animation:brillo 8s linear infinite;
}

@keyframes brillo{
    0%{transform:translate(0,0);}
    50%{transform:translate(60px,45px);}
    100%{transform:translate(0,0);}
}

.contacto-section h2,
.contacto-section p,
.contacto-buttons{
    position:relative;
    z-index:2;
}

.contacto-section h2{
    font-size:34px;
    font-weight:900;
    margin-bottom:12px;
}

.contacto-section p{
    font-size:16px;
    color:rgba(255,255,255,0.95);
    margin-bottom:24px;
}

/* FOOTER */
.footer{
    background:#ffffff;
    color:#444;
    text-align:center;
    padding:22px 16px;
    font-size:14px;
}

/* RESPONSIVE */
@media (max-width:992px){
    .hero-content{
        grid-template-columns:1fr;
        text-align:center;
    }

    .container{
        max-width:850px;
        margin:0 auto;
    }

    .container .hero-buttons{
        justify-content:center;
    }

    .beneficios{
        justify-items:center;
    }

    .slider{
        height:380px;
    }
}

@media (max-width:768px){
    .topbar{
        gap:8px;
        font-size:11px;
        padding:10px 12px;
    }

    .header{
        padding:14px 18px;
    }

    .menu-toggle{
        display:block;
    }

    #nav{
        position:absolute;
        top:76px;
        right:16px;
        width:230px;
        background:#ffffff;
        border-radius:16px;
        box-shadow:0 18px 40px rgba(0,0,0,0.18);
        padding:16px;
        display:none;
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }

    #nav.active{
        display:flex;
    }

    .hero{
        min-height:auto;
        padding:56px 20px 64px;
    }

    .hero-content{
        gap:30px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:15px;
    }

    .slider{
        width:100%;
        height:300px;
    }

    .info-section,
    .seo-section,
    .faq-section{
        padding:60px 20px;
    }

    .contacto-section{
        padding:64px 20px;
    }
}

@media (max-width:480px){
    .logo img{
        width:125px;
    }

    .hero h1{
        font-size:30px;
    }

    .slider{
        height:250px;
        border-radius:20px;
    }

    .btn{
        width:100%;
        min-width:unset;
    }

    .hero-buttons{
        width:100%;
    }

    .cards,
    .seo-grid{
        grid-template-columns:1fr;
    }
}