:root{
  --forest:#4C5A3C;     /* Verde bosque */
  --earth:#8B6A4E;      /* Marrón tierra */
  --sunset:#F57C00;     /* Naranja cálido */
  --sand:#F9F6F1;       /* Fondo claro */
  --text:#2B2B2B;
}


*{ font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif; }
body{ background-color: var(--sand); color: var(--text); }

.text-primary-forest{ color: var(--forest) !important; }
.bg-forest{ background-color: var(--forest) !important; }
.btn-forest{ background-color: var(--forest); color:#fff; border:none; }
.btn-forest:hover{ filter:brightness(0.95); }
.btn-sunset{ background-color: var(--sunset); color:#fff; border:none; }
.btn-sunset:hover{ filter:brightness(0.95); }

/* ===== Hero sin card, centrado ===== */
.hero{
  position: relative;
  background: url('/img/hero.jpg') center/cover no-repeat;
  min-height: 78vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.hero::before{
  /* Overlay suave para legibilidad del texto (ajusta al gusto) */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 100%);
}
.hero-content{
  position: relative;              /* por encima del overlay */
  max-width: 900px;
  padding: 0 1rem;
}
.hero-badge{
  display:inline-block;
  background: #FFEB99;             /* badge cálido */
  color:#5a4b00;
  font-weight:700;
  padding:.35rem .6rem;
  border-radius:.5rem;
  letter-spacing:.2px;
}
.hero-title{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero-lead{
  color:#f1f5ee;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}

/* ===== Animaciones ===== */
@keyframes fade-in-up {
  from { opacity:0; transform: translateY(14px); }
  to   { opacity:1; transform: translateY(0); }
}
.animate{ animation: fade-in-up .8s ease-out both; }
.delay-1{ animation-delay: .05s; }
.delay-2{ animation-delay: .20s; }
.delay-3{ animation-delay: .35s; }

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .animate{ animation: none !important; opacity:1 !important; transform:none !important; }
}

/* Separación suave con la sección siguiente */
.section-soft-top{ margin-top: -2.5rem; }
@media (max-width: 768px){
  .hero{ min-height: 68vh; }
  .section-soft-top{ margin-top: -1.5rem; }
}

.card-gallery img{
  object-fit: cover; height: 230px;
  border-top-left-radius:.5rem; border-top-right-radius:.5rem;
}

/* ===== Botón flotante WhatsApp ===== */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #25D366;               /* verde WhatsApp */
  color: #fff;
  text-decoration: none;
  padding: .75rem 1rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.wa-float:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.22); color:#fff; }


/* Espacio inferior para que el FAB no tape contenido */
main { padding-bottom: 100px; }

/* FAB WhatsApp — tamaños y desplazamientos */
.whatsapp-fab{
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  padding: .65rem 1rem;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
  text-decoration: none;
  font-weight: 700;
}
.whatsapp-fab .ico{
  width: 22px; height: 22px; border-radius:999px; background: rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.whatsapp-fab.raise{ bottom: 110px; } /* se eleva si el footer entra en vista */
@media (max-width: 576px){
  .whatsapp-fab{ right: 14px; bottom: 18px; padding: .55rem .8rem; font-size: .95rem; }
  .whatsapp-fab.raise{ bottom: 96px; }
  .whatsapp-fab .text{ display: inline; }
}

.wa-icon{
  width: 1.35rem; height: 1.35rem; display: inline-block;
}

.wa-text{
  font-weight: 700; letter-spacing:.1px; white-space: nowrap;
}

/* Ocultar texto en pantallas muy pequeñas para que no tape contenido */
@media (max-width: 420px){
  .wa-text{ display: none; }
}

/* Pequeña animación de entrada */
@keyframes wa-pop { from { transform: scale(.9); opacity:0 } to { transform: scale(1); opacity:1 } }
.wa-float{ animation: wa-pop .25s ease-out both; }

/* Ajusta la altura de miniaturas si usas muchos videos */
.gallery-grid img { height: 220px; object-fit: cover; }

.icon-pill{
  width: 42px; height: 42px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(76,90,60,.12); color: var(--forest,#4C5A3C);
}

/* ===== Contacto orgánico ===== */
.contact-wrap{
  background: linear-gradient(180deg, #F9F6F1 0%, #ffffff 60%);
}
.contact-list{
  border-left: 4px solid var(--forest);
  background: #fff;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.contact-item + .contact-item{
  border-top: 1px dashed rgba(0,0,0,.08);
}
.contact-item{
  padding: .85rem 0;
  display: flex; gap: .9rem; align-items: center;
}
.contact-ico{
  width: 42px; height: 42px; border-radius: 999px;
  background: rgba(76,90,60,.10);
  color: var(--forest);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 42px;
}
.contact-label{ font-weight: 700; color: var(--forest); }
.contact-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

.btn-chip{
  border-radius: 999px;
  padding: .5rem 1rem;
  border:1px solid rgba(0,0,0,.08);
  background: #fff;
}
.btn-chip:hover{ background: #f7f7f5; }

.map-shell{
  background:#fff;
  border-radius:16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.map-shell iframe{
  width:100%;
  display:block;
  border:0;
  /* Altura mínima como fallback en móviles */
  min-height: 420px;
}

/* En pantallas grandes, permite que el JS fije la altura exacta */
@media (min-width: 992px){
  .map-shell iframe{ min-height: 560px; }
}