*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Trebuchet MS',sans-serif;background:#fff;color:#000;line-height:1.6}
a{text-decoration:none;color:inherit}

/* Header */
header{
    position:fixed;top:0;width:100%;background:#fff;z-index:1000;
    display:flex;justify-content:space-between;align-items:center;
    padding:15px 30px;box-shadow:0 2px 8px rgba(0,0,0,.05)
}
header img{height:50px}
nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
nav a{font-weight:600;color:#9b9db7}
nav a:hover{color:#000}
.btn{
    background:#9b9db7;color:#fff!important;
    padding:10px 20px;border-radius:8px;font-weight:600
}
.btn:hover{background:#7a7bb0}

/* Contenido legal */
.legal-container{
    max-width:900px;
    margin:140px auto 80px auto;
    padding:0 20px
}
.legal-container h1{font-size:2.4rem;margin-bottom:30px}
.legal-container h2{margin-top:30px;margin-bottom:10px}
.legal-container p, .legal-container li{color:#444}
.legal-container ul{margin-left:20px}


/* Hero */
#hero{
    margin-top:80px;
    min-height:80vh;
    background:url('iguana1.jpg') center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    color:#fff;
    text-align:center
}

#hero::before{
    content:'';position:absolute;inset:0;
    background:rgba(0,0,0,.55)
}
.hero-content{
    position:relative;z-index:1;
    max-width:900px;padding:20px
}
.hero-badge{
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,255,255,.15);
    padding:10px 18px;border-radius:30px;
    margin-bottom:25px;font-weight:700
}
.hero-badge i{color:#9b9db7}
.hero-content h1{font-size:3rem;margin-bottom:15px}
.hero-content p{font-size:1.25rem;margin-bottom:30px}
.hero-cta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.hero-cta a{padding:15px 32px;border-radius:10px;font-weight:700}
.primary{background:#9b9db7;color:#fff}
.secondary{background:#fff;color:#000}

/* Microcopys */
.trust-row{
    margin-top:25px;
    display:flex;gap:25px;
    justify-content:center;flex-wrap:wrap;
    font-size:.95rem;opacity:.95
}
.trust-row span{
    display:flex;align-items:center;gap:8px
}
.trust-row i{color:#9b9db7}

/* Sections */
section{padding:100px 20px}
section h2{text-align:center;font-size:2.3rem;margin-bottom:50px}

/* Cards */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;max-width:1200px;margin:0 auto
}
.card{
    background:#fff;border-radius:18px;
    padding:30px 25px;text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;opacity:0;transform:translateY(30px)
}
.card.visible{opacity:1;transform:translateY(0)}
.card i{font-size:4rem;color:#9b9db7;margin-bottom:15px}
.card h3{margin-bottom:10px}
.card p{color:#555}
.card:hover{transform:translateY(-6px)}

#beneficios{background:#f9f9f9}
#sectores{background:#fff}

/* Formulario Presupuesto */
#presupuesto{background:#fff}
.form-container{
    display:flex;gap:40px;
    max-width:1000px;margin:0 auto;
    align-items:center;flex-wrap:wrap
}
.form-container img{
    max-width:420px;width:100%;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.1)
}
form{
    flex:1;display:flex;
    flex-direction:column;gap:15px
}
input{
    padding:14px;border-radius:8px;
    border:1px solid #ddd;font-size:1rem
}
input:focus{border-color:#9b9db7;outline:none}
button{
    padding:16px;border:none;border-radius:10px;
    background:#9b9db7;color:#fff;
    font-weight:700;font-size:1.05rem;
    cursor:pointer
}
button:hover{background:#7a7bb0}
.form-trust{
    margin-top:10px;font-size:.9rem;color:#555;
    display:flex;gap:20px;flex-wrap:wrap
}
.form-trust span{display:flex;gap:6px;align-items:center}
.form-trust i{color:#9b9db7}

/* Footer */
footer{
    background:#f9f9f9;padding:30px 20px;
    text-align:center;color:#555;font-size:.9rem
}
.footer-links{
    margin-top:10px;display:flex;
    gap:20px;justify-content:center;flex-wrap:wrap
}
.footer-links a{color:#9b9db7}
.footer-links a:hover{color:#000;text-decoration:underline}

/* Responsive */
@media(max-width:1024px){
    .form-container, #vision > div, #editorial-adicional > div{
        grid-template-columns:1fr!important;
        text-align:center;
    }
    #vision img, #editorial-adicional img, #sectores img{
        margin-top:30px;
    }
}

/* Ocultar botón por defecto en pantallas grandes */
#menu-toggle{
    display:none;
    font-size:1.8rem;
    cursor:pointer;
}

/* Responsive: mostrar botón y menú colapsado */
@media(max-width:1024px){
    #menu-toggle{display:block}
    nav{
        position:fixed;
        top:80px; /* altura header */
        right:-100%; /* fuera de pantalla */
        width:250px;
        height:calc(100%-80px);
        background:#fff;
        flex-direction:column;
        padding:20px;
        gap:20px;
        box-shadow:-2px 0 8px rgba(0,0,0,.1);
        transition: right .3s ease;
        z-index:1001;
    }
    nav.show{right:0}
    nav a.btn{width:100%;text-align:center;}
}

@media (max-width: 500px) {
    .hero-content{
        padding:0px
    }
}


html{scroll-behavior:smooth;}