:root {
  --primary:#0ea5e9; /* tailwind sky-500-ish */
  --primary-600:#0284c7;
  --bg:#ffffff;
  --muted:#f1f5f9;
  --text:#0f172a;
}

/* ----- BASE ----- */
html,body{height:100%;}
body{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color:var(--text);
  background:var(--bg);
}
.navbar-brand{font-weight:700; letter-spacing:.5px;}

/* ----- HERO ----- */
.hero {
  background: linear-gradient(180deg, rgba(2,132,199,.12), rgba(14,165,233,.02)),
              url('assets/img/hero.jpg') center/cover no-repeat;
  border-bottom: 1px solid #e2e8f0;
}


/* ----- CARDS / COMPONENTES ----- */
.filter-card {
  background: var(--muted);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.card-property {
  border:1px solid #e2e8f0;
  border-radius:16px;
  overflow:hidden;
}
.badge-op{ background: var(--primary); }

/* Botones */
.btn-success {
  background: #22c55e;   /* verde brillante */
  border-color: #16a34a; /* verde más oscuro */
}
.btn-success:hover {
  filter: brightness(0.95);
}



/* Botón "Ver detalle" */
.card-property .btn-detalle {
  transition: all .2s ease-in-out;
}
.card-property .btn-detalle:hover,
.card-property .btn-detalle:focus {
  background-color: var(--primary, #0ea5e9);
  color: #fff;
  border-color: var(--primary, #0ea5e9);
  box-shadow: 0 0 0 0.25rem rgba(14,165,233,.35);
  text-decoration: none;
}
.card-property .btn-detalle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(14,165,233,.45);
}

/* ----- SEGMENTED (Operación) ----- */
.segmented {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 10px 20px rgba(2, 132, 199, .06),
    0 2px 6px rgba(15, 23, 42, .06);
  border: 1px solid #e2e8f0;
}
.segmented input { display: none; }
.segmented label {
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: #475569;
  transition: all .18s ease;
}
.segmented input:checked + label {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(2, 132, 199, .25);
}
.segmented label:hover { background: #f1f5f9; }

/* ----- NAVBAR ----- */
/* ===== Paleta GanaMaxii ===== */
/* ===== NAVBAR hover verde ===== */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #1f2a44 !important;               /* texto oscuro */
  background: rgba(22,163,74,.18) !important; /* verde suave */
  box-shadow: 0 0 0 2px rgba(22,163,74,.12) !important;
  text-decoration: none;
}

/* Links principales del menú */
.navbar .nav-link{
  position: relative;
  font-size: 1.05rem;        /* + tamaño */
  font-weight: 600;          /* más grueso */
  color: #334155;
  padding: .65rem .9rem;     /* área clicable mayor */
  border-radius: 999px;      /* para el highlight tipo píldora */
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* Highlight al hover/focus */
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: var(--gm-dark);
  background: rgba(14,165,233,.12);           /* celeste suave */
  box-shadow: 0 0 0 2px rgba(14,165,233,.10); /* sutil anillo */
  text-decoration: none;
}

/* Activo: color + subrayado moderno */
.navbar .nav-link.active{
  color: var(--gm-dark);
  background: rgba(22,163,74,.12); /* verde suave cuando está activo */
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom: .25rem;
  height: 2px;
  background: var(--gm-green);
  border-radius: 2px;
}

/* Dropdown SIN borde al desplegar */
.navbar .dropdown-menu{
  border: 0 !important;          /* sin borde */
  box-shadow: 0 16px 36px rgba(2,6,23,.08);
  border-radius: 14px;
  padding: .4rem;
  margin-top: .45rem;
}

/* Ítems del dropdown con highlight */
.navbar .dropdown-item{
  font-size: 1rem;
  font-weight: 500;
  border-radius: 10px;
  padding: .55rem .75rem;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
  background: rgba(14,165,233,.12);
  color: #0b3b59;
}

/* Asegura que el caret del dropdown siga el color de link */
.navbar .dropdown-toggle::after{
  margin-left: .35rem;
}

/* Toggler (icono hamburguesa) visible siempre */
.navbar-light .navbar-toggler{
  border: 0;
  box-shadow: none !important;
}
.navbar-light .navbar-toggler-icon{
  background-image: var(--bs-navbar-toggler-icon-bg);
}

/* Responsivo: un poco más grande en desktop */
@media (min-width: 992px){
  .navbar .nav-link{ font-size: 1.1rem; }
  .brand-name{ font-size: 1.45rem; }
}

/* ===== HERO sigue claro con velo celeste suave ===== */
.hero{
  position: relative;
  background: none;
  padding-top: 3rem;
  padding-bottom: 3rem;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,165,233,.15), rgba(14,165,233,0) 60%),
    url('assets/img/hero.png') center/cover no-repeat;
  opacity: 1;
  pointer-events:none;
}


/* ----- WHATSAPP FAB ----- */
.whatsapp-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 55px;
  height: 55px;
  background: #25d366;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);  /* sombra base */
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  z-index: 1000;
}
.whatsapp-fab:hover {
  transform: scale(1.05);
  background: #20b954;
  box-shadow: 0 8px 16px rgba(0,0,0,0.35); /* sombra más fuerte */
  color: #fff;
  text-decoration: none;
}

/* ----- FOOTER ----- */
footer {
  border-top:1px solid #e2e8f0;
  background:#fff;
}
.thumbnail-strip img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border:1px solid #e5e7eb;
  margin-right:6px;
  cursor:pointer;
}

/* ----- ANIMACIÓN LATIDO PARA WHATSAPP ----- */
@keyframes pulse {
  0%   { transform: scale(1); box-shadow: 0 4px 8px rgba(0,0,0,0.25); }
  30%  { transform: scale(1.15); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
  50%  { transform: scale(1.05); box-shadow: 0 6px 14px rgba(0,0,0,0.3); }
  100% { transform: scale(1); box-shadow: 0 4px 8px rgba(0,0,0,0.25); }
}

.whatsapp-fab {
  animation: pulse 1.8s ease-in-out infinite;
  animation-delay: 5s; /* espera 5s antes del primer pulso */
}

/* Pausar animación si el usuario pasa el mouse encima */
.whatsapp-fab:hover {
  animation: none;
  transform: scale(1.05);
  background: #20b954;
  box-shadow: 0 8px 16px rgba(0,0,0,0.35);
}

/* Botón principal celeste */
/* Botón principal GanaMaxii (verde corporativo) */
.btn-op {
  background: #007A33; /* Verde logo */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .55rem 1rem;
  font-weight: 600;
}
.btn-op:hover { 
  background: #006629; /* Verde más oscuro al hover */
  color: #fff; 
}

/* Dropdown */
#op-dropdown .dropdown-menu {
  border: 1px solid #b3d6c1; /* verde muy claro en borde */
  border-radius: 8px;
  overflow: hidden;
}
#op-dropdown .dropdown-item {
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  padding: .55rem .9rem;
}
#op-dropdown .dropdown-item:hover {
  background: #e6f4ec; /* fondo verdoso claro */
  color: #007A33;
}
#op-dropdown .dropdown-item.active {
  background: #007A33;
  color: #fff !important;
  font-weight: 600;
}

/* borde clarito verdoso para cajas con .border */
.border { border-color: #006629 !important; }


/* Botón verde corporativo solo para WhatsApp */
.btn-ganamaxii {
  background:#007A33;
  border-color:#006629;
  color:#fff;
  transition: all 0.2s ease-in-out;
}

.btn-ganamaxii:hover {
  background:#006629;
  border-color:#004d26;
  color:#fff;
  box-shadow: 0 0.4rem 0.6rem rgba(0,0,0,.25); /* sombra más notoria */
  transform: translateY(-2px); /* levitación suave */
}

/* ==== Propiedades relacionadas compactas ==== */
.related-grid .card { border-radius: .75rem; }
.related-grid .card-body { padding: .65rem .75rem; }
.related-grid .meta    { font-size: .8rem; color: #6c757d; }
.related-grid .title   {
  font-size: .9rem; font-weight: 600; margin: .25rem 0 .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(1.2em * 2);
}
.related-grid .price   { font-size: .9rem; font-weight: 700; color: #0d6efd; }

/* Imagen proporcional y baja 
.related-grid .related-img {
  width: 100%;
  height: 120px;        /* más chico; puedes bajar a 100px si quieres
  object-fit: cover;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}*/

/* En pantallas medianas sube un poquito la altura pero sigue compacta 
@media (min-width: 768px) {
  .related-grid .related-img { height: 140px; }
}*/

/* Bloque de ventajas */
.adv-card { transition: transform .2s ease, box-shadow .2s ease; }
.adv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
}
/* Botón verde corporativo */
.btn-ganamaxii {
  background:#007A33; 
  border-color:#006629; 
  color:#fff;
  transition:all .2s ease-in-out;
}
.btn-ganamaxii:hover {
  background:#009e40;
  border-color:#007a33;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,122,51,.25);
}

/* Botón verde corporativo */
.btn-ganamaxii {
  background:#007A33; 
  border-color:#006629; 
  color:#fff;
  transition:all .2s ease-in-out;
}
.btn-ganamaxii:hover {
  background:#009e40;
  border-color:#007a33;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,122,51,.25);
}

/* Imágenes uniformes en cards */
.card-cover {
  aspect-ratio: 4 / 3;   /* 4:3 consistente */
  width: 100%;
  object-fit: cover;
  display: block;
  background:#f2f2f2;
}

/* Carrusel de cards: forzamos que las imgs internas respeten 4:3 */
.card .carousel-item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* Relacionadas compactas */
.related-grid .related-img {
  width: 100%;
  height: 130px;         /* compacto */
  object-fit: cover;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}
@media (min-width:768px){ .related-grid .related-img { height: 140px; } }


/* Hover efecto en imágenes de Instagram */
.ig-feed img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ig-feed img:hover {
  transform: translateY(-3px) scale(1.05); /* se levanta y hace zoom */
  box-shadow: 0 6px 16px rgba(0, 122, 51, 0.25); /* sombra verde como el botón */
  position: relative;
  z-index: 2;
}

/* Forzar imágenes del feed de Instagram a proporción cuadrada */
.ig-feed img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* cuadradas */
  object-fit: cover;     /* recorta sin deformar */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 0.75rem;
}

.ig-feed img:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 122, 51, 0.25);
  position: relative;
  z-index: 2;
}

/* Hover efecto en imágenes de Facebook */
.fb-feed img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* cuadradas */
  object-fit: cover;     /* recorta sin deformar */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 0.75rem;
}

.fb-feed img:hover {
  transform: translateY(-3px) scale(1.05); /* se levanta y hace zoom */
  box-shadow: 0 6px 16px rgba(0, 122, 51, 0.25); /* sombra verde */
  position: relative;
  z-index: 2;
}


/* ===== Íconos de redes sociales en verde GanaMaxii ===== */
.social-links .social-link {
  font-size: 1.3rem;
  color: #007A33; /* verde corporativo */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: all 0.25s ease;
}

/* Hover: verde más oscuro y fondo suave */
.social-links .social-link:hover {
  background: rgba(0,122,51,.12); /* verde claro de fondo */
  color: #006629;                 /* verde más oscuro */
}


/* ===== Botón Teléfono en Navbar ===== */
.btn-phone {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  background: #007A33;       /* Verde corporativo */
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  border-radius: 999px;      /* estilo píldora */
  text-decoration: none;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.btn-phone .label {
  font-weight: 500;
  font-size: .85rem;
  opacity: .9;
}

.btn-phone .number strong {
  font-size: 1rem;
  font-weight: 700;
}

.btn-phone:hover {
  background: #006629;       /* verde más oscuro al hover */
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
/* ===== Menú de navegación en verde corporativo ===== */
.navbar .nav-link {
  color: #007A33 !important;   /* verde GanaMaxii */
  font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #006629 !important;   /* verde más oscuro en hover */
  background: rgba(0,122,51,.10) !important; /* fondo suave */
  border-radius: 999px;
}

/* No permitir saltos de línea en los items del menú */
.navbar-nav { flex-wrap: nowrap; }
.navbar .nav-link { white-space: nowrap; }

/* Botón Teléfono (desktop) */
.btn-phone{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.45rem .9rem; background:#007A33; color:#fff;
  font-size:.95rem; font-weight:600; border-radius:999px;
  text-decoration:none; transition:.25s; box-shadow:0 3px 6px rgba(0,0,0,.15);
}
.btn-phone .label{ font-weight:500; font-size:.85rem; opacity:.9; }
.btn-phone .number strong{ font-size:1rem; font-weight:700; }
.btn-phone:hover{ background:#006629; transform:translateY(-1px); }

/* Teléfono compacto (móvil) */
.btn-phone-compact{
  width:38px; height:38px; border-radius:999px;
  justify-content:center; align-items:center;
  background:#007A33; color:#fff; transition:.25s;
  box-shadow:0 3px 6px rgba(0,0,0,.15);
}
.btn-phone-compact:hover{ background:#006629; }

/* Íconos redes en verde y sin romper layout */
.social-links .social-link{
  font-size:1.2rem; color:#007A33; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:.25s;
}
.social-links .social-link:hover{
  background:rgba(0,122,51,.12); color:#006629;
}

/* Ajustes responsivos: reducir padding del menú en md */
@media (max-width: 1199.98px){
  .navbar .nav-link{ padding:.55rem .75rem; }
}

/* ===== Quitar fondo/sombra en el link activo ===== */
.navbar .nav-link.active {
  color: #007A33 !important;   /* verde corporativo */
  background: transparent !important; /* sin fondo */
  box-shadow: none !important;        /* sin sombra */
}


/* === Dropdown GanaMaxii en verde === */

/* Toggle abierto sin burbuja, solo texto verde */
.navbar .nav-link.dropdown-toggle.show {
  color: #007A33 !important;            /* verde corporativo */
  background: transparent !important;   /* sin fondo */
  box-shadow: none !important;
  border-bottom: 2px solid #007A33;     /* subrayado verde */
  border-radius: 0;
}

/* Flechita (caret) en verde */
.navbar .dropdown-toggle::after {
  border-top-color: #007A33 !important;
}

/* Caja del menú desplegable */
.navbar .dropdown-menu {
  border: 0 !important;
  border-radius: 12px;
  padding: .4rem;
  margin-top: .45rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  background: #fff;
  /* texto base en verde */
  --bs-dropdown-link-color:        #007A33;
  --bs-dropdown-link-hover-color:  #006629;
  --bs-dropdown-link-hover-bg:     rgba(0,122,51,.10);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg:    #007A33;
}

/* Ítems con esquinas redondeadas */
.navbar .dropdown-item {
  font-weight: 600;
  border-radius: 8px;
  padding: .55rem .9rem;
  transition: background .15s ease, color .15s ease;
}

/* Accesible: enfoque con aro verde */
.navbar .dropdown-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(0,122,51,.35);
  border-radius: 8px;
}
.btn-ver-propiedades {
  background-color: #016936; /* Verde corporativo */
  color: #fff;
  font-weight: bold;
  text-decoration: none;     /* Quita la raya debajo */
  padding: 8px 22px;
  border-radius: 999px;
  border: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  display: inline-block;     /* Asegura que se comporte como botón */
}

.btn-ver-propiedades:hover {
  background-color: #014d27;
  transform: scale(1.05);
  box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
  text-decoration: none;     /* También en hover */
}
.icon-legal {
  background-color: #e6f4ec; /* Verde suave */
  color: #016936;            /* Verde corporativo */
  font-size: 1.8rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Paleta */
:root{
  --gmx-green:#016936;
  --gmx-green-600:#014d27;
  --gmx-glass-bg: rgba(255,255,255,.72);
  --gmx-border: rgba(1,105,54,.18);
}

/* Fondo hero (si ya tienes imagen, mantén lo tuyo) */
.hero{
  position: relative;
  padding-top: 2.5rem; padding-bottom: 2.5rem;
}
.hero::before{
  content:""; position:absolute; inset:0;
  /* Si ya tenías el background en ::before, conserva tu url */
  background: inherit;
  z-index: 0;
}

/* Contenedor “glass” */

/* Título legible sobre foto */
.hero-title{
  font-weight: 800;
  line-height: 1.1;
  /* sombra suave para contraste en cualquier fondo */
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
  /* tamaño fluido */
  font-size: clamp(1.75rem, 2vw + 1.2rem, 2.75rem);
}

/* Badge legal */
.badge-legal{
  display:inline-flex; align-items:center;
  background: #e6f4ec;
  color: var(--gmx-green);
  border: 1px solid rgba(1,105,54,.20);
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .9rem; font-weight: 600;
}

.hero-title{
  font-weight: 700;         /* menos pesado que 800 */
  line-height: 1.2;
  color: #1f2a44;           /* azul grisáceo elegante */
  text-shadow: none;        /* sin sombra fuerte */
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
}

.section-contacto{
  position: relative;
  padding: 4rem 0;
  background: url('/assets/img/contact.webp') center/cover no-repeat; /* <- ruta pública */
  isolation: isolate;
}
.section-contacto::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  z-index:-1;
}
.section-contacto .container{ background: transparent !important; }
.section-contacto .form-wrapper{
  background: rgba(255,255,255,.95);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  padding: 1.25rem;
}
.section-contacto .map-wrapper{
  border-radius: 1rem; overflow:hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.35);
}
.section-contacto h1{ color:#fff !important; }
.section-contacto .small.text-muted{ color: rgba(255,255,255,.85) !important; }



/* ===== Trabaja con Nosotros (fondo con overlay) ===== */
.section-trabaja{
  position: relative;
  padding: 4rem 0;
  background: url('/assets/img/contact.webp') center/cover no-repeat; /* <- ruta pública */
  isolation: isolate;
}
.section-trabaja::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);    /* oscurece para legibilidad */
  z-index:-1;                     /* detrás del contenido */
}
/* Evitar fondo blanco sobre la imagen */
.section-trabaja .container{ background: transparent !important; }

/* Tarjeta del formulario */
.section-trabaja .form-wrapper{
  background: rgba(255,255,255,.95);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  padding: 1.5rem;
}
/* Mapa con borde/sombra */
.section-trabaja .map-wrapper{
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.35);
}
/* Títulos blancos sobre el fondo */
.section-trabaja h1{ color:#fff !important; }

@media (max-width:576px){
  .section-trabaja{ padding: 3rem 0; }
}