@charset "utf-8";

/* =========================
RESET
========================= */

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

body{
  font-family:font2, Arial, sans-serif;
  overflow-x:hidden;
  line-height: 2em;
  color:#000;
}

.seo-hidden{
position:absolute;
left:-9999px;
}


/* =========================
VARIABLES
========================= */

:root{
  --verde:#8adc64;
  --blanco:#fff;

  --radius-md:12px;

  --shadow-md:0 20px 60px rgba(0,0,0,.25);

  --text-sm:clamp(14px,1vw,18px);
  --text:clamp(15px,1.3vw,20px);
  --text-lg:clamp(20px,2.5vw,40px);
}


/* =========================
FONTS
========================= */

@font-face{font-family:"font1";src:url("/fonts/1.ttf");font-display:swap;}
@font-face{font-family:"font2";src:url("/fonts/2.ttf");font-display:swap;}
@font-face{font-family:"font3";src:url("/fonts/3.ttf");font-display:swap;}
@font-face{font-family:"font4";src:url("/fonts/4.ttf");font-display:swap;}


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

.hero-avalian{
  position:relative;
  min-height:100svh;
  background:url("../img/banerh.webp") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.hero-contenedor{
  position:relative;
  z-index:2;

  width:100%;
  max-width:1150px;
  margin:auto;
  padding:40px 20px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

.hero-col{
  color:#fff;
}


/* ===== IMAGEN ===== */

.hero-img{
  display:flex;
  justify-content:center;
}

.hero-img img{
  width:100%;
  max-width:520px;
  height:auto;
}


/* ===== FORM ===== */

.hero-form{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.hero-form h1{
  font-family:font4;
  font-size:var(--text-lg);
  margin-bottom:10px;
  color:#fff;
}

.hero-form h2{
  font-family:font2;
  font-size:15px;
  font-weight:400;
  margin:25px;
  color:#fff;
}


/* ===== FORM BOX ===== */

#form1{
  width:100%;
  max-width:420px;

  background:linear-gradient(
    to top,
    #015a26 10%,
    #02e260 90%
  );

  padding:35px;
  border-radius:10px;
  box-shadow:var(--shadow-md);
}


/* ===== INPUTS ===== */

#form1 input,
#form1 select,
#form1 textarea{
  width:100%;
  padding:14px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid #ddd;
  font-family:font3;
  font-size:var(--text-sm);
}

/* ===== SELECT PLACEHOLDER ===== */

/* color inicial (titulo gris) */
#form1 select{
  color:#858585;
}

/* cuando el usuario selecciona algo */
#form1 select:valid{
  color:#000;
}

/* opciones del desplegable */
#form1 select option{
  color:#000;
}

/* placeholder */
#form1 select option[value=""]{
  color:#999;
}

#contenedorPasos p{
  font-family:font3;
  color:#fff;
  margin:10px 0px 30px;
}


/* ===== BOTONES ===== */

.botonform,
.botonplanes{
  display:block;
  width:50%;
  padding:14px;
  font-family:font4;
  font-size:var(--text-sm);
  background:var(--verde);
  color:#fff;
  border-radius:var(--radius-md);
  border:0;
  cursor:pointer;
  text-decoration:none;
  transition:.3s;
  margin: 10% 25% 10% 25%;
  text-align: center;

}

.botonform:hover,
.botonplanes:hover{
  transform:scale(1.03);
}


/* ===== MENSAJE OK ===== */

.mensaje-ok{
  padding:20px;
  background:#fff;
  border-radius:12px;
  margin-top:15px;
  color:#333;
}


/* =========================
BENEFICIOS
========================= */

.modulo-4cols{
  width:100%;
  padding:60px 20px;
  text-align:center;
}

.grid-4cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  max-width:1200px;
  margin:auto;
}

.card-beneficio{
  background:#f5f5f5;
  padding:25px;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  text-align:left;
  transition:.3s;
}

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

.card-beneficio img{
  width:90%;
  margin-bottom:15px;
}


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

.modulo-3cols{
  padding:60px 20px;
  text-align:center;
}

.grid-3cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  max-width:1200px;
  margin:auto;
}

.columna{
  background:#f5f5f5;
  padding:25px;
  border-radius:12px;
}


/* =========================
WHATSAPP
========================= */

#whatsapp-widget{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:999;
}

#whatsapp-widget img{
  width:50px;
}


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

@media(max-width:900px){

.hero-contenedor{
  grid-template-columns:1fr;
  gap:30px;
}

.grid-4cols{
  grid-template-columns:repeat(2,1fr);
}

.grid-3cols{
  grid-template-columns:1fr;
}

}

@media(max-width:600px){

#form1 input,
#form1 select,
#form1 textarea{
  width:100%;
  padding:24px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid #ddd;
  font-family:font3;
  font-size:var(--text-sm);
}

.botonform,
.botonplanes{
  display:block;
  width:80%;
  max-width:320px; /* evita botones gigantes en desktop */

  padding:14px;

  font-family:font4;
  font-size:var(--text-sm);

  background:var(--verde);
  color:#fff;

  border-radius:var(--radius-md);
  border:0;

  cursor:pointer;
  text-decoration:none;
  transition:.3s;

  margin:15px auto; /* centrado REAL */
  text-align:center;
}

.hero-form h1{
  font-size:24px;
}

.grid-4cols{
  grid-template-columns:1fr;
}

#whatsapp-widget{
  bottom:90px;
  right:10px;
}

}


/* =========================
   FIX FOOTER MOBILE WIDTH
========================= */

#pie{
    width:100%;
    overflow:hidden;
}

#pie .modulo-3cols{
    padding:40px 15px;
    max-width:100%;
}

#pie .grid-3cols{
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

#pie img{
    max-width:180px;
    width:100%;
    height:auto;
}

/* evitar que textos rompan layout */
#pie p{
    word-break:break-word;
}

/* MOBILE */
@media(max-width:768px){

    #pie .grid-3cols{
        grid-template-columns:1fr;
        gap:25px;
        text-align:center;
    }

    #pie .columna{
        padding:0 10px;
    }

}