@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

/* ================================
  InmoSelva / Villa Nueva Puyo - estilos globales
  Archivo: assets/styles.css
================================ */

/* ---------- Variables ---------- */
:root{
  --green:#007A5B;        /* Verde principal */
  --green-2:#005F48;      /* Variante */
  --yellow:#FFC107;       /* Acento */
  --dark:#212529; 
  --light:#f8f9fa;
  --brown:#6D4C41; 
  --ok:#28a745; 
  --hold:#ffc107; 
  --no:#dc3545; 
  --ring:#dee2e6;
  --shadow:0 0.5rem 1rem rgba(0,0,0,.15);
}

/* ---------- Reset base ---------- */
*{ box-sizing:border-box }
html,body{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  font-family:'Poppins',sans-serif;
  color:var(--dark);
  background:var(--light);
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

/* Enfoque accesible */
:focus-visible{
  outline:3px solid var(--green);
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- Utilidades globales ---------- */
.wrap{ width:min(1100px,92vw); margin:0 auto; }
.fw700{ font-weight:700 }

/* Grids coherentes (una sola definición) */
.grid{ display:grid; gap:16px; }
@media (min-width:981px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px){ .grid{ grid-template-columns:1fr; } }

/* Tarjeta base (una definición) */
.card{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
}
.card h3,.card h4{ margin:10px 0 6px; font-size:18px }

/* ================================
  Header / Navbar
================================ */
header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,0.05);
}
.nav{
  max-width:1100px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  gap:12px;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}
.brand h1{
  font-size:clamp(1.125rem, 2vw, 1.375rem);
  margin:0;
  color:var(--green);
  font-weight:800;
  white-space:nowrap;
}
.logo{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
  display:block;
}
nav ul{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
nav a{
  padding:8px 10px;
  border-radius:8px;
  font-weight:600;
  transition:.2s background,.2s color;
}
nav a:hover, nav a.active{ background:#eef6ef; color:#0e3b12 }
.cta-whatsapp{
  background:#25D366;
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  transition:.2s transform,.2s filter;
}
.cta-whatsapp:hover{ filter:brightness(.95); transform:translateY(-1px) }

/* ================================
  Botones
================================ */
.btn{
  display:inline-block;
  padding:.75rem 1rem;
  border-radius:.75rem;
  font-weight:700;
  transition:.2s transform,.2s box-shadow,.2s background,.2s color,.2s border-color;
  border:none;
  line-height:1;
  user-select:none;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }

/* Primario */
.btn.primary{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);
  color:#fff; border:2px solid var(--green);
}
.btn.primary:hover{ background:var(--green-2); border-color:var(--green-2) }

/* Secundario outline */
.btn.outline{
  background:#fff;
  color:var(--dark);
  border:2px solid var(--ring);
}
.btn.outline:hover{
  background:var(--light);
  color:var(--dark);
  border-color:var(--ring);
}

/* Botón utilidad */
.btn-green{ background:var(--green); color:#fff; border:none }
.btn-green:hover{ filter:brightness(.95) }

/* Grupo de botones */
.btns{ display:flex; gap:12px; flex-wrap:wrap }

/* ================================
  Hero
================================ */
.hero{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
}
.hero::before{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:0;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:1.5rem;
  align-items:center;
  position:relative;
  z-index:1;
  padding:4rem 1.25rem;
}
.hero-card,.hero-side{ margin:0; }

/* Tarjeta principal */
.hero-card{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);
  color:#fff;
  border-radius:1.5rem;
  padding:2.5rem 2rem 2.5rem 2.5rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  display:flex; flex-direction:column; justify-content:center;
}

/* Tarjeta lateral */
.hero-side{
  background:rgba(255,255,255,0.8);
  border-radius:1.125rem;
  padding:1.375rem;
  box-shadow:0 0.5rem 1rem rgba(0,0,0,.08);
  display:flex; flex-direction:column; justify-content:center;
}

/* Texto en hero */
.hero h1,.hero p{ text-shadow:0 2px 6px rgba(0,0,0,0.35) }

/* Acciones laterales */
.hero-side-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ================================
  Secciones / Tipografía
================================ */
section{ max-width:1100px; margin:0 auto; padding:40px 20px }
.section-title{
  font-size:clamp(22px,3vw,28px);
  margin:0 0 18px;
  color:#102a12;
  text-align:center;
}
.muted{ color:#5b5b5b; text-align:center }

/* ================================
  Filtros / Leyenda (Terrenos)
================================ */
.filters{
  background:#fff;
  padding:20px;
  border:1px solid var(--ring);
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  margin-bottom:18px;
}
.filter-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  margin-bottom:10px;
}
.filter-group{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.filter-btn{
  padding:8px 12px;
  border:2px solid var(--green);
  background:#fff;
  color:var(--green);
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  transition:.2s all;
}
.filter-btn.active,.filter-btn:hover{ background:var(--green); color:#fff }
.search-input{
  padding:10px;
  border:2px solid #ddd;
  border-radius:10px;
  font-size:14px;
  min-width:210px;
}

/* Leyenda */
.legend{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center }
.legend-item{ display:flex; align-items:center; gap:8px }
.legend-color{ width:18px; height:18px; border-radius:4px; border:2px solid #333 }
.legend-ok{ background:rgba(47,179,68,.1); border-color:#2fb344 }
.legend-hold{ background:rgba(255,214,10,.12); border-color:#FFD60A }
.legend-no{ background:rgba(214,69,69,.12); border-color:#d64545 }

/* ================================
  Rejilla de lotes
================================ */
.lots-container{
  background:#fff;
  padding:18px;
  border-radius:16px;
  border:1px solid var(--ring);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
}
.lots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  max-width:900px;
  margin:0 auto;
}
.lot{
  aspect-ratio:1;
  border-radius:12px;
  border:3px solid;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  transition:.2s transform,.2s box-shadow;
  position:relative;
  font-weight:800;
  text-align:center;
  padding:6px;
}
.lot:hover{ transform:translateY(-4px); box-shadow:var(--shadow) }
.lot.disponible{ background:rgba(47,179,68,.1); border-color:var(--ok); color:#1a5f1a }
.lot.reservado{ background:rgba(255,214,10,.12); border-color:var(--yellow); color:#7a5c00 }
.lot.vendido{ background:rgba(214,69,69,.12); border-color:var(--no); color:#7a1c1c }
.lot.featured::after{
  content:"★";
  position:absolute;
  top:6px;
  right:8px;
  font-size:14px;
  color:#f59f00;
}
.lot-code{ font-size:1.12rem; margin-bottom:2px }
.lot-area{ font-size:.92rem; opacity:.85 }
.lot-status{ font-size:.75rem; margin-top:4px; text-transform:uppercase }

/* ================================
  Mapas
================================ */
.map{
  border:0;
  width:100%;
  height:340px;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.map-container{ border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.08); }

/* Modal del mapa */
.map-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  z-index:2000;
  display:none;
  justify-content:center;
  align-items:center;
  padding:20px;
}
.map-modal{
  background:#fff;
  border-radius:18px;
  padding:22px;
  max-width:90vw;
  width:100%;
  max-height:90vh;
  overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.map-modal img{ width:100%; height:auto }

/* ================================
  Contacto / Formularios
================================ */
.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px }
.panel{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:16px;
  padding:20px;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
}
.info-list{ display:grid; gap:8px; margin-top:8px }
.info-list div{ display:flex; gap:10px; align-items:center }
.form-grid{ display:grid; gap:10px }
.input{
  padding:12px;
  border:1.8px solid #d8d8d8;
  border-radius:10px;
  font-size:15px;
}
.input:focus{ outline:none; border-color:var(--green) }

/* ================================
  Modal (detalles de lote)
================================ */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  z-index:2000;
  display:none;
  justify-content:center;
  align-items:center;
  padding:20px;
}
.modal{
  background:#fff;
  border-radius:18px;
  padding:22px;
  max-width:520px;
  width:100%;
  max-height:90vh;
  overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:2px solid #f0f0f0;
}
.close-btn{
  background:none; border:none; font-size:1.6rem; cursor:pointer; color:#666;
}
.modal-content{ margin-bottom:16px }
.lot-detail{
  display:flex;
  justify-content:space-between;
  margin-bottom:.6rem;
  padding:.45rem 0;
  border-bottom:1px solid #f3f3f3;
}
.modal-actions{ display:flex; flex-direction:column; gap:10px }
.whatsapp-group{ display:flex; gap:8px; flex-wrap:wrap }
.whatsapp-contact{
  flex:1; min-width:150px; background:#25D366; color:#fff;
  padding:.75rem; border-radius:10px; text-align:center; text-decoration:none; font-weight:700;
  transition:.2s all;
}
.whatsapp-contact:hover{ filter:brightness(.95); transform:translateY(-2px) }
.email-btn{
  background:var(--green); color:#fff; padding:.8rem; border-radius:10px; text-align:center; text-decoration:none; font-weight:700;
}
.email-btn:hover{ filter:brightness(.95); transform:translateY(-2px) }

/* ================================
  Preguntas Frecuentes (FAQ)
================================ */
.faq details{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.faq summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:700;
  list-style:none;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"›";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  transition:transform .2s;
  font-size:18px;
  opacity:.6;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(-90deg) }
.faq .faq-body{ padding:0 16px 16px 16px; color:#444 }

/* ================================
  Footer
================================ */
footer{
  margin-top:24px;
  background:#0e230f;
  color:#cfe8d0;
}
footer .wrap{
  max-width:1100px;
  margin:auto;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  gap:8px;
  flex-wrap:wrap;
  text-align:center;
}

/* ================================
  Dots de colores (beneficios)
================================ */
.benefits{
  list-style:none; padding:0; margin:0;
  display:grid; gap:8px; line-height:1.45; font-size:.95rem;
}
.benefits li{
  display:grid; grid-template-columns:18px 1fr; align-items:start; gap:8px;
}
.benefits .dot{
  width:10px; height:10px; border-radius:50%; margin-top:5px;
}
.benefits .dot.yellow{ background:#f6c026; }
.benefits .dot.green { background:#2ecc71; }
.benefits .dot.brown { background:#a0522d; }
.benefits .dot.teal  { background:#00b894; }

/* ================================
  Responsive / Menú móvil
================================ */
.hamburger{
  display:none;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.hamburger span{
  display:block;
  width:25px; height:3px; margin:5px;
  background-color:var(--dark);
  transition:all .3s ease-in-out;
}

/* Breakpoints generales */
@media (max-width:980px){
  .hero .wrap{ grid-template-columns:1fr; padding:2rem 1rem; gap:1rem; }
  .grid{ grid-template-columns:1fr } 
  .contact{ grid-template-columns:1fr }
}
@media (max-width:740px){
  .lots-grid{ grid-template-columns:repeat(auto-fit,minmax(130px,1fr)) }
  .logo{ width:40px; height:40px }
}
@media (max-width:640px){
  section{ padding:28px 16px }
  .filters{ padding:16px }
  .search-input{ min-width:unset; width:100% }
  .filter-row{ gap:10px }
}

/* Menú móvil con overlay y bloqueo de scroll */
@media (max-width:768px){
  header{ z-index:1300; }
  .nav{ position:relative; }

  .nav-links ul{
    display:none;
    position:fixed; top:64px; left:0; right:0;
    background:#fff; width:100%; padding:.5rem 0; margin:0;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    border-top:1px solid var(--ring);
    z-index:1200;
    max-height:calc(100vh - 64px);
    overflow:auto;
  }
  .nav-links.active ul{ display:block; }
  .nav-links ul li{
    list-style:none; text-align:center; padding:1rem; border-bottom:1px solid var(--ring);
  }
  .nav-links ul li:last-child{ border-bottom:none; }
  .nav-links .cta-whatsapp{ display:block; margin:.5rem 1rem 1rem; text-align:center; }

  .hamburger{ display:block; }

  /* Overlay + bloqueo scroll */
  body.menu-open{ overflow:hidden; }
  body.menu-open::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);
    backdrop-filter:blur(2px);
    z-index:1100;
  }

  /* Hero en móvil */
  .hero{
    min-height:auto;
    padding:2rem 0;
  }
  .badge{ font-size:.75rem; padding:.3rem .6rem; margin-bottom:.5rem; }
  .hero h1{
    font-size:clamp(1.2rem,5.5vw,1.6rem);
    line-height:1.18;
    margin:.4rem 0 .5rem;
  }
  .hero p{ font-size:.95rem; margin:0 0 .9rem; }
  .btns{ gap:10px }
  .btn{ width:100%; text-align:center; padding:.8rem 1rem; font-size:.95rem; }
  .hero-side{ padding:1rem; border-radius:1rem; }
  .hero-side h2{ font-size:1.05rem; margin:0 0 .6rem; line-height:1.2; }
}

/* ================================
  Estados y pequeños elementos
================================ */
.check{ display:flex; align-items:center; gap:10px; margin:8px 0 }
.dot{ width:10px; height:10px; border-radius:50% }
.dot-yellow{ background:var(--yellow) }
.dot-ok{ background:var(--ok) }
.dot-brown{ background:var(--brown) }
.dot-green2{ background:var(--green-2) }