/* CLEANED & FIXED CSS */
*{margin:0;padding:0;box-sizing:border-box;}
:root{--dkv-green:#98a92a;--dkv-dark:#005650;--paper:#f5f5f5;}
body{font-family:Arial,Helvetica,sans-serif;background:var(--paper);color:#333;line-height:1.6;}
.container{width:min(1200px,92%);margin-inline:auto;}
.header{background:var(--dkv-green);}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 0; 
}

@media (max-width: 768px) {
    .header-inner {
        padding: 1.8rem 0;
    }
}



.logo{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:700;}

.header-contact {
    display: flex;
    align-items: center;
    gap: 50px;     /* separación entre los textos */
    margin-left: 20px;            /* separación desde “Agente exclusivo” */
}

.header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #fff !important;        /* ← SIEMPRE blanco */
    font-size: 0.9rem;
    white-space: nowrap;
}

.header-icon {
    width: 18px;
    height: 18px;
    color: #fff;                   /* icono blanco */
    flex: 0 0 18px;
}

/* VERSIÓN RESPONSIVE (MÓVILES) */
@media (max-width: 768px) {
    
    .header-contact {
        flex-direction: column;     /* Ahora una columna vertical */
        align-items: flex-start;    /* Alineado a la izquierda */
        gap: 6px;
        margin-left: 0;
        margin-top: 4px;
    }

    .header-link {
        font-size: 0.85rem;
    }

    .header-icon {
        width: 16px;
        height: 16px;
    }
}





/* HERO GRID LAYOUT */
.hero.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 columnas iguales */
    align-items: stretch;
    column-gap: 20px;
    row-gap: 20px;
    padding: 15px 20px;
}

/* COLUMNAS DEL HERO */
.hero-left,
.hero-center,
.hero-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    min-width: 0; /* evita que alguna columna se expanda más de lo necesario */
}





/* TITULO EN HERO-LEFT */
.hero-left h1{
  color:var(--dkv-dark);
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  margin-bottom:.3rem;
}

/* GRID INTERNA DE HERO-LEFT */
.grid{
  margin-top:1rem;
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.hero-left .grid { margin-top: 0; }

/* BOXES */
.box{padding:1rem;border-radius:8px;color:#fff;
min-height: 150px}
.green{background:var(--dkv-green);}

/* CTA — AHORA OCUPA TODO EL ANCHO DE SU COLUMNA */
.cta-box{
    background:var(--dkv-dark);
    border-radius:12px;
    padding:1.2rem;
    width:100%;       /* ← antes max-width limitaba la columna */
    max-width:none;   /* ← permite que llene toda la columna */
    height:100%;
    display:flex;
    flex-direction:column;
    gap:.8rem;
    color:#fff;
    justify-content: center;*/  /* ← centra verticalmente todo su contenido */
    align-items: center;      /* ← centra horizontalmente los elementos */
    /*text-align: center;  */     /* ← centra el texto dentro */	
}

/* BOTONES */
.btn{
    display:block;
    text-align:center;
    padding:.8rem 1rem;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
    border:1px solid transparent;
}
.whatsapp{background:#25d366;color:#fff;}
.dark{background:#005650;color:#fff;}
.light{background:#fff;color:#333;border-color:#333;}

/* SEPARADOR */
.separador {
  height: 15px;
  background: var(--paper);
}

/* BLOQUE VERDE CON LISTAS */
.texto_blanco_fondo_dkv_green {
  background: var(--dkv-green);
  color: #fff;      
  padding:15px 20px;
}
.texto_blanco_fondo_dkv_green ul {
  list-style: disc;
  list-style-position: outside;
  margin-top: .6rem;
  margin-left: 1.2rem;
  padding-left: 0;
}
.texto_blanco_fondo_dkv_green li {
  margin-bottom: .4rem;
}

/* BENEFITS */
.benefits{background:var(--dkv-green);color:#fff;padding:10px 20px;}
.benefits-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.benefit-card{
    background:#fff;
    color:#000;
    padding:1rem;
    border-radius:10px;
    text-align:center;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
}

.buttons-footer{margin-top:1.2rem;display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;}
.section{padding:2rem 0;}
.form{display:grid;gap:.8rem;max-width:680px;}
input,textarea{width:100%;padding:.7rem .9rem;border-radius:8px;border:1px solid #ccc;}
button.btn{cursor:pointer;}

/* FOOTER */
.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding:16px 20px;background: inherit;}
.footer-content{display:flex;align-items:center;gap:50px;flex-wrap:wrap;}
.footer-logo{width:260px!important;height:auto!important;object-fit:contain;}
@media(max-width:600px){.footer-logo{width:320px!important;}}
.footer-name{font-weight:600;letter-spacing:0.2px;margin-right:8px;}
.footer-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:inherit;
    padding:4px 6px;
    border-radius:6px;
    transition:background-color 0.2s ease;
}
.footer-link:hover{background-color:rgba(0,0,0,0.04);}
.footer-icon{width:18px;height:18px;color:var(--dkv-dark);flex:0 0 18px;}


.banner-titulo{
    background:inherit;
    padding:15px 20px;
    text-align:center;
    width:100%;
}


/* BANNER TOP */
.banner-top{
    background:inherit;
    padding:15px 20px;
    text-align:center;
    width:100%;
}
.banner-top p{
    font-weight:700;
    font-size:1.1rem;
    margin:0;
    color:#000;
}
@media(min-width:768px){
    .banner-top p{font-size:1.25rem;}
}

/* BANNER MEDIO */
.banner_medio-texto_blanco_fondo_dkv_green{
    background:var(--dkv-green);
    padding:5px 5px;
    text-align:center;
    width:100%;
}
.banner_medio-texto_blanco_fondo_dkv_green p{
    font-weight:700;
    font-size:1.1rem;
    margin:0;
    color:#fff;
}
@media(min-width:768px){
    .banner_medio-texto_blanco_fondo_dkv_green p{font-size:1.25rem;}
}

/* IMAGEN DEL HERO — AHORA EQUILIBRADA CON EL RESTO */
.hero-img {
  width: auto;          /* ← ocupa toda la columna */
  max-width: 320px;     /* ← para que no crezca demasiado */
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  align-self: stretch;  /* ← hace que se adapte al ancho de la celda */
  margin-top: 0;
}


/* RESPONSIVE HERO */
@media (max-width: 992px) {
    .hero.container {
        grid-template-columns: 1fr;
        align-items: stretch;
        text-align: center;
        padding: 28px 16px;
        column-gap: 0;
        row-gap: 16px;
    }
    .hero-img {
        margin-top: 0;
        align-self: center;
        width: 100%;
        max-width: 320px;
    }
}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 64px;
  height: 64px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
  animation: whatsapp-vibrate 1.8s linear infinite;
}
.whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  animation-play-state: paused;
}
.whatsapp-float img {
  width: 36px;
  height: 36px;
  display: block;
}
@keyframes whatsapp-vibrate {
  0%   { transform: translate(0) rotate(0); }
  10%  { transform: translate(-1px, 1px) rotate(-2deg); }
  20%  { transform: translate(1px, -1px) rotate(2deg); }
  30%  { transform: translate(-1px, 1px) rotate(-2deg); }
  40%  { transform: translate(1px, 0) rotate(2deg); }
  50%  { transform: translate(0, 0) rotate(0); }
  60%  { transform: translate(-1px, 1px) rotate(-2deg); }
  70%  { transform: translate(1px, -1px) rotate(2deg); }
  80%  { transform: translate(-1px, 1px) rotate(-2deg); }
  90%  { transform: translate(1px, 0) rotate(2deg); }
  100% { transform: translate(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float {
    animation: none;
    transition: none;
  }
}
@media (max-width: 480px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }
  .whatsapp-float img {
    width: 30px;
    height: 30px;
  }
}