*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: 'Segoe UI', Arial;
    background:#f4f7f5;
    color:#2c3e50;
}

/* CONTENEDOR GLOBAL (CLAVE PARA QUE TODO TENGA MISMO ANCHO) */
.container{
    max-width:1100px;
    margin:auto;
    padding:60px 20px;
}

/* NAVBAR */
.navbar{
    position:fixed;
    top:0;
    width:100%;
    height:60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    background:rgba(27,94,32,.85);
    color:white;
    z-index:999;
    backdrop-filter:blur(10px);
}

.menu a{
    color:white;
    margin:0 10px;
    text-decoration:none;
}

/* HERO */
/* =========================
   HERO
========================= */

.hero{
    min-height:70vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    color:white;

    background:
        linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
        url("img/campo.jpg");

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

    padding:100px 20px 60px;
}

.hero h1{
    color:#fff;
    text-shadow:
        0 0 10px rgba(255,255,255,0.2),
        0 6px 20px rgba(0,0,0,0.5);
}

.hero p{
    font-size:22px;
    max-width:650px;
    margin:0 auto 30px;
    line-height:1.6;
}

.boton{
    display:inline-block;
    margin-top:15px;
    padding:14px 32px;
    background:#2e7d32;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
    font-weight:700;
}

/* NOSOTROS */
.nosotros{
    display:flex;
    gap:40px;
    align-items:center;
}

.nosotros img{
    width:100%;
    border-radius:15px;
    max-width:450px;
}

/* ESTADISTICAS (HORIZONTAL) */
.estadisticas{
    display:flex;
    justify-content:space-between;
    text-align:center;
    background:white;
    border-radius:15px;
    padding:40px;
    gap:20px;
}

/* PROYECTOS */

.proyecto-card{
    text-align:center;
}

.proyecto-card h3{
    margin:18px 15px 12px;
}

.proyecto-card p{
    padding:0 20px 25px;
    line-height:1.7;
}
.proyectos-grid{
    display:flex;
    gap:20px;
}

.proyecto-card{
    flex:1;
    background:white;
    border-radius:15px;
    overflow:hidden;
}

.proyecto-card img{
    width:100%;
    height:180px;
    object-fit:cover;
}

/* SERVICIOS */
.grid{
    display:flex;
    gap:20px;
}

.card{
    flex:1;
    background:white;
    padding:30px 25px;
    border-radius:15px;
    text-align:center;
}
.card h3{
    margin-bottom:15px;
}

.card p{
    line-height:1.7;
}

/* TESTIMONIOS */
.testimonios-grid{
    display:flex;
    gap:20px;
}

.testimonio-card{
    flex:1;
    background:white;
    padding:30px 25px;
    border-radius:15px;
    text-align:center;
}
.testimonio-card p{
    line-height:1.8;
    margin-bottom:20px;
}

.testimonio-card h4{
    color:#2e7d32;
}

/* CONTACTO */
.contacto form{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:500px;
    margin:auto;
}

.cta{

    max-width:1100px;
    margin:50px auto;
    padding:35px 25px;

    text-align:center;

    border-radius:18px;

    background:linear-gradient(135deg,#2e7d32,#1b5e20);

    color:white;

    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.cta h2{
    font-size:26px;
    font-weight:700;
    margin-bottom:10px;
}

.cta p{
    max-width:600px;
    margin:0 auto 18px;
    font-size:15px;
    line-height:1.6;
    opacity:.95;
}

.cta-boton{
    display:inline-block;
    padding:11px 26px;
    border-radius:35px;
    background:white;
    color:#1b5e20;
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    transition:.25s;
    box-shadow:0 6px 15px rgba(0,0,0,.15);
}

.cta-boton:hover{
    transform:translateY(-2px);
    background:#e8f5e9;
}

/* WHATSAPP */
.whatsapp{
    position:fixed;
    bottom:25px;
    right:25px;

    width:60px;
    height:60px;

    background:linear-gradient(135deg,#25D366,#128C7E);

    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:26px;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    text-decoration:none;

    z-index:999;

    transition:.3s;
}

/* efecto flotante */
.whatsapp:hover{
    transform:scale(1.12) rotate(8deg);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

    .navbar{
        height:auto;
        flex-direction:column;
        padding:15px;
    }

    .logo{
        margin-bottom:10px;
        font-size:22px;
    }

    .menu{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
    }

    .menu a{
        font-size:15px;
        margin:0;
    }

    .hero{
        min-height:70vh;
        padding:100px 20px 50px;
    }

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

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

    .nosotros,
    .estadisticas,
    .proyectos-grid,
    .grid,
    .testimonios-grid{
        flex-direction:column;
    }

    .nosotros{
        text-align:center;
    }

   .nosotros-texto p{
    text-align:center;
    line-height:1.8;
}
.nosotros-texto{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
}

/* =========================
   TÍTULOS DE LAS SECCIONES
========================= */

#nosotros h2,
#proyectos h2,
#servicios h2,
#testimonios h2,
#contacto h2{

    width:100%;
    text-align:center;

    font-size:28px;
    font-weight:700;
    letter-spacing:1px;

    color:#2e7d32;

    margin-bottom:35px;

    position:relative;

    text-shadow:1px 1px 3px rgba(0,0,0,.08);
}

/* Línea decorativa */

#nosotros h2::after,
#proyectos h2::after,
#servicios h2::after,
#testimonios h2::after,
#contacto h2::after{

    content:"";

    display:block;

    width:110px;
    height:4px;

    margin:12px auto 0;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #2e7d32 0%,
        #43a047 45%,
        #81c784 75%,
        rgba(129,199,132,0) 100%
    );
}

/* =========================
   FOOTER PRO
========================= */

.footer{
    background: radial-gradient(circle at top left, rgba(165,214,167,0.15), transparent 40%),
                linear-gradient(135deg,#0b2414,#1b5e20 60%,#0f2e16);
    color:white;
    padding:70px 20px 25px;
    margin-top:60px;
    position:relative;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,0.08);
}

/* LUZ AMBIENTAL MOVIL */
.footer::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    top:-150px;
    left:-150px;
    background:rgba(165,214,167,0.18);
    filter:blur(100px);
    border-radius:50%;
    animation:floatGlow 8s ease-in-out infinite;
}

.footer::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    bottom:-120px;
    right:-120px;
    background:rgba(46,125,50,0.15);
    filter:blur(90px);
    border-radius:50%;
    animation:floatGlow2 10s ease-in-out infinite;
}

@keyframes floatGlow{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(20px);}
}

@keyframes floatGlow2{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-25px);}
}

/* CONTENEDOR */
.footer-container{
    max-width:1100px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
}

/* BLOQUES */
.footer-box{
    flex:1;
    min-width:220px;
    z-index:2;
}

.footer-box h3{
    font-size:18px;
    color:#a5d6a7;
    margin-bottom:15px;
    letter-spacing:1px;
    position:relative;
}

.footer-box h3::after{
    content:"";
    width:40px;
    height:2px;
    background:linear-gradient(90deg,#a5d6a7,transparent);
    display:block;
    margin-top:6px;
    border-radius:5px;
}

.footer-box p,
.footer-box a{
    font-size:14px;
    line-height:1.7;
    color:white;
    opacity:.85;
}

/* LINKS */
.footer-box a{
    display:block;
    margin-bottom:8px;
    text-decoration:none;
    transition:.3s;
}

.footer-box a:hover{
    color:#a5d6a7;
    transform:translateX(6px);
}

/* =========================
   REDES ULTRA PREMIUM
========================= */

.redes{
    margin-top:18px;
    display:flex;
    gap:12px;
}

.redes a{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,0.06);
    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,0.1);

    position:relative;
    overflow:hidden;

    transition:0.35s ease;
}

/* brillo interno */
.redes a::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,rgba(165,214,167,0.3),transparent);
    top:-100%;
    left:0;
    transition:.4s;
}

.redes a:hover::before{
    top:0;
}

.redes a i{
    font-size:16px;
    color:#a5d6a7;
    z-index:2;
    transition:.3s;
}

.redes a:hover{
    transform:translateY(-6px) scale(1.05);
    box-shadow:0 12px 25px rgba(0,0,0,0.35);
    border-color:#a5d6a7;
}

.redes a:hover i{
    color:white;
    transform:scale(1.15);
}

/* FOOTER FINAL */
.footer-bottom{
    text-align:center;
    margin-top:50px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.08);
    font-size:13px;
    opacity:.75;
    position:relative;
    z-index:2;
}

.redes a.facebook i { color:#1877f2; }
.redes a.instagram i { color:#e1306c; }
.redes a.x i { color:#ffffff; }
.redes a.linkedin i { color:#0a66c2; }
.redes a.youtube i { color:#ff0000; }

.redes a:hover i{
    color:white;
}

body{
    font-size:16px;
    letter-spacing:0.2px;
}

p{
    line-height:1.8;
    color:#2c3e50;
}



@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.hero{
    background:
    linear-gradient(135deg,rgba(0,0,0,.55),rgba(27,94,32,.35)),
    url("img/campo.jpg");
    background-size:cover;
}

.servicios,
.estadisticas,
.contacto,
.testimonios{
    background:linear-gradient(180deg,#ffffff,#f4f7f5);
}
.card,
.proyecto-card,
.testimonio-card{
    transition:all .3s ease;
}

.card:hover,
.proyecto-card:hover,
.testimonio-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}
h2{
    position:relative;
}

h2::after{
    content:"";
    display:block;
    width:70px;
    height:3px;
    margin:10px auto 0;
    background:linear-gradient(90deg,#2e7d32,transparent);
    border-radius:10px;
}
section{
    padding:80px 20px;
}

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



section.visible{
    opacity:1;
    transform:translateY(0);
}
.hero h1{
    color:#ffffff;
}

.hero p{
    color:#ffffff;
    opacity:0.95;
    text-shadow:0 3px 10px rgba(0,0,0,0.4);
}
.cta h2{
    color:#ffffff;
    text-shadow:0 3px 10px rgba(0,0,0,0.25);
}

.cta p{
    color:#ffffff;
    opacity:0.9;
    max-width:700px;
    margin:0 auto 20px auto;
    line-height:1.7;
}
@media (max-width:768px){

    .hero p,
    .cta p{
        font-size:16px;
        padding:0 10px;
    }

    .hero h1{
        font-size:40px;
    }
}
.animar{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.animar.visible{
    opacity:1;
    transform:translateY(0);
    
    
}
html{
    scroll-behavior:smooth;
}




.simulador {
    padding: 60px 20px;
    background: #f5f7f6;
    text-align: center;
}

.simulador-grid {
    display: flex;
    gap: 30px;
    max-width: 950px;
    margin: auto;
    align-items: stretch;
}

.simulador-box,
.simulador-info {
    flex: 1;
    background: white;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    text-align: left;
}

/* TEXTO MÁS FUERTE VISUALMENTE */
.simulador-info h3 {
    color: #1b5e20;
    font-size: 20px;
    margin-bottom: 10px;
}

.simulador-info h4 {
    margin-top: 15px;
    color: #2e7d32;
}

.simulador-info p {
    margin-bottom: 10px;
    color: #444;
    line-height: 1.6;
}

/* SIMULADOR */
.simulador-box label {
    font-weight: bold;
    color: #2e7d32;
    display: block;
    margin-top: 12px;
}

.simulador-box input[type="range"] {
    width: 100%;
    accent-color: #2e7d32;
}

.resultado {
    margin-top: 15px;
    font-size: 15px;
    line-height: 1.5;
}

.barra {
    height: 8px;
    background: #ddd;
    border-radius: 10px;
    margin-top: 15px;
    overflow: hidden;
}

#barraInteres {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #43a047, #e53935);
    transition: 0.3s;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .simulador-grid {
        flex-direction: column;
    }
}
.simulador.container {
    max-width: 1100px; /* mismo tipo de ancho visual que se usa normalmente en containers */
    margin: auto;
}

.btn-whatsapp {
    display: inline-block;
    margin-top: 15px;
    background: #2e7d32; /* verde más sobrio */
    color: white;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    width: 100%;
    transition: 0.2s;
}

.btn-whatsapp:hover {
    background: #256428; /* un poco más oscuro al hover */
    transform: scale(1.02);
}



.simulador.container {
    width: 100%;
    max-width: 1125px;   /* mismo estándar que container típico */
    margin: 0 auto;
    padding: 40px 15px;
    box-sizing: border-box;
}
.simulador {
    padding: 40px 15px; /* antes era más grande */
}
.simulador-grid {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    box-sizing: border-box;
}
.simulador-box,
.simulador-info {
    flex: 1;
    min-width: 0;   /* 🔥 esto evita desbordes y rompe igualación visual */
    box-sizing: border-box;
}
.simulador-info p {
    margin-bottom: 8px;
    line-height: 1.5;
}

.simulador-info h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.simulador-info h4 {
    margin-top: 10px;
}
@media (max-width: 768px) {
    .simulador-grid {
        flex-direction: column;
        gap: 15px;
    }
}

/* =========================
  PROCESO
========================= */
.proceso {
    padding: 60px 20px;
    text-align: center;
    background: #ffffff;
}

.proceso-grid {
    display: grid;
    grid-template-columns: 1fr; /* 🔥 fuerza una sola columna */
    gap: 20px;
    max-width: 600px; /* opcional: más compacto y elegante */
    margin: auto;
}

.proceso-step {
    display: flex;
    flex-direction: column;
    border-left: 4px solid #2e7d32;
}
.proceso-step:hover {
    transform: translateY(-3px);
}

.proceso-step h3 {
    color: #2e7d32;
    margin-bottom: 8px;
}
#creditos,
#proceso,
#contacto,
#nosotros,
#servicios,
#proyectos {
    scroll-margin-top: 50px; /* ajusta según altura de tu navbar */
}

.whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: 0.2s;
    z-index: 999;
}

.whatsapp:hover {
    transform: scale(1.1);
    background: #1ebe5d;
}

.menu a[href="#creditos"] {
    background: #2e7d32;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
}







.contacto {
    padding: 25px 10px;
    text-align: center;
}

.contacto-card {
    max-width: 320px;
    margin: 8px auto 0;
    background: white;
    padding: 14px;
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(0,0,0,0.08);
    text-align: left;
}

/* INPUTS MUY PEQUEÑOS */
.input-group {
    position: relative;
    margin-bottom: 8px;
}

.input-group input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    box-sizing: border-box;
    outline: none;
}

/* MENSAJE MÁS IMPORTANTE */
.input-group textarea {
    width: 100%;
    height: 110px;
    padding: 9px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    resize: none;
    box-sizing: border-box;
    outline: none;
}

/* LABELS PEQUEÑOS */
.input-group label {
    font-size: 11px;
}

/* FOCUS SUAVE */
.input-group input:focus,
.input-group textarea:focus {
    border-color: #2e7d32;
    box-shadow: 0 0 0 2px rgba(46,125,50,0.12);
}

/* BOTÓN */
.contacto button {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    border-radius: 6px;
    background: #2e7d32;
    color: white;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
}

/* 🔥 HOVER MÁS MARCADO */
.contacto button:hover {
    background: #1b5e20;
    transform: scale(1.03);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* MENSAJE */
#respuesta {
    font-size: 11px;
    margin-top: 5px;
}