/* ===========================
   THEME TOKENS (DARK DEFAULT)
   =========================== */

/* Tema por defecto: oscuro */
:root,
:root[data-theme="dark"] {
  /* Core surfaces */
  --color-bg: #0a0f15;
  --color-surface: #101624;
  --color-muted: #162033;
  --color-border: #1f2a40;

  /* Text */
  --color-text: #f1f5fb;
  --color-text-subtle: #9aa7bd;

  /* Accent (azul institucional) */
  --color-accent: #0057b7;
  --color-accent-2: #003c82;

  /* Neutrales auxiliares */
  --color-neutral-50: #0c1118;
  --color-neutral-100: #111820;
  --color-neutral-200: #c0c9d9;
  --color-neutral-300: #d2dae6;
  --color-neutral-400: #e8ecf5;

  /* Estados */
  --color-success: #2f9e44;
  --color-success-contrast: #a6f4c5;
  --color-info: #1e78e6;
  --color-info-contrast: #b7d7ff;
  --color-warning: #e0c17c;

  /* Overlays y sombras */
  --overlay-header: rgba(10,15,21,.72);
  --overlay-header-strong: rgba(10,15,21,.9);
  --overlay-accent-thin: rgba(0,87,183,.12);
  --overlay-accent-soft: rgba(0,87,183,.22);
  --shadow-elev: 0 10px 30px rgba(0,0,0,.45);
  --shadow-elev-strong: 0 14px 42px rgba(0,0,0,.55);
  --border-alpha: rgba(255,255,255,.08);

  /* Layout */
  --radius: 18px;
  --radius-sm: 12px;
  --container: 1200px;

  /* Hero */
  --linear-gradient: rgba(0,87,183,.25);
}

:root[data-theme="light"] {
  /* Superficies */
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-muted: #eef2f7;
  --color-border: #d1d9e6;

  /* Texto */
  --color-text: #0c1118;
  --color-text-subtle: #2a313c;

  /* Accent (azul institucional) */
  --color-accent: #0057b7;
  --color-accent-2: #003c82;

  /* Neutrales auxiliares */
  --color-neutral-50: #f9fbfd;
  --color-neutral-100: #ffffff;
  --color-neutral-200: #64748b;
  --color-neutral-300: #828b96;
  --color-neutral-400: #475569;

  /* Estados */
  --color-success: #2f9e44;
  --color-success-contrast: #176338;
  --color-info: #1e78e6;
  --color-info-contrast: #0f3f8c;
  --color-warning: #b38d4a;

  /* Overlays y sombras */
  --overlay-header: rgba(255,255,255,.9);
  --overlay-header-strong: rgba(255,255,255,.96);
  --overlay-accent-thin: rgba(0,87,183,.12);
  --overlay-accent-soft: rgba(0,87,183,.22);
  --shadow-elev: 0 8px 22px rgba(15,17,22,.10);
  --shadow-elev-strong: 0 12px 34px rgba(15,17,22,.14);
  --border-alpha: rgba(15,17,22,.12);

  /* Hero */
  --linear-gradient: rgba(202, 235, 255, 0.608);
}


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

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--container);margin:auto;padding:0 20px}

/* ===========================
   HEADER / NAV
   =========================== */

.header{
  position:fixed; /* antes: sticky */
  top:0; left:0; right:0;
  z-index:100;
  background:var(--overlay-header);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--color-border);
}
.header__gold-line{height:3px;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-2));}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:55px;height:auto;filter:grayscale(20%) contrast(110%)}
.brand__text{font-weight:800;letter-spacing:.4px}

.nav{position:relative}
.nav__list{display:flex;gap:22px;align-items:center;margin:0;padding:0;list-style:none}
.nav__link{padding:8px 10px;border-radius:10px;color:var(--color-text-subtle)}
.nav__link:hover,.nav__link.is-active{color:var(--color-text);background:var(--overlay-accent-thin)}
.nav__cta{
  background:linear-gradient(180deg,var(--color-accent),var(--color-accent-2));
  color:var(--color-neutral-100);
  padding:10px 14px;border-radius:12px;font-weight:700
}
.nav__toggle{display:none;background:transparent;border:0;cursor:pointer}
.nav__bar{display:block;width:22px;height:2px;background:var(--color-neutral-200);margin:5px 0;border-radius:2px}

@media (max-width:980px){
  .nav__toggle{display:block}
  .nav{
    position:fixed;           /* antes: absolute */
    top:70px;                 /* altura del header */
    right:0;
    left:auto;
    background:var(--color-surface);
    border-left:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);
    width:min(94vw,380px);
    max-height:calc(100vh - 70px);
    overflow:auto;
    transform:translateY(-10px);
    opacity:0;pointer-events:none;
    transition:.25s ease;
    box-shadow:var(--shadow-elev);
    border-radius:0 0 0 16px;
  }
  .nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__list{flex-direction:column;align-items:flex-start;padding:16px}
}

/* Shrink state */
.header.is-scrolled{background:var(--overlay-header-strong)}

/* ===========================
   TYPOGRAPHY
   =========================== */

.h1{font-size:clamp(28px,3.2vw,48px);line-height:1.12;margin:0 0 10px;font-weight:800}
.h2{font-size:clamp(24px,2.6vw,36px);line-height:1.2;margin:0 0 18px;font-weight:800}
.lead{color:var(--color-text-subtle);font-size:1.1rem;max-width:65ch}

/* ===========================
   BUTTONS / LINKS / BADGES
   =========================== */

.btn{display:inline-block;padding:12px 18px;border-radius:14px;font-weight:700;transition:.2s ease;border:1px solid transparent}
.btn--gold{background:linear-gradient(180deg,var(--color-accent),var(--color-accent-2));color:var(--color-neutral-100)}
.btn--gold:hover{filter:brightness(.95)}
.btn--ghost{border-color:var(--color-border);color:var(--color-text);background:transparent}
.btn--ghost:hover{background:var(--color-neutral-50)}

.link{color:var(--color-accent)}
.link--gold{color:var(--color-accent)}

.badge{
  position:absolute;top:12px;left:12px;
  padding:6px 10px;border-radius:999px;
  font-size:.8rem;font-weight:800;
  background:var(--color-neutral-50);
  border:1px solid var(--color-border)
}
.badge--venta{border-color:var(--color-success);color:var(--color-success-contrast)}
.badge--renta{border-color:var(--color-info);color:var(--color-info-contrast)}
.badge--desarrollo{border-color:var(--color-accent);color:var(--color-warning)}

/* ===========================
   SECTIONS
   =========================== */

.section{padding:80px 0;border-top:1px solid var(--color-border)}
.section--surface{background:var(--color-surface)}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}

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

.hero{position:relative;padding:120px 0 80px;border-top:0}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(20%) brightness(.6)}
.hero__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 800px at 20% 20%, var(--overlay-accent-soft), transparent 55%),
    linear-gradient(180deg, rgba(15,19,27,.4), rgba(15,19,27,.85));
}
:root[data-theme="light"] .hero__overlay{
  background:
    radial-gradient(1200px 800px at 20% 20%, var(--overlay-accent-thin), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.28), var(--linear-gradient));
}
.hero__pattern{
  position:absolute;inset:0;
  background-image:
    linear-gradient(transparent 0 98%, rgba(255,255,255,.04) 99%),
    linear-gradient(90deg, transparent 0 98%, rgba(255,255,255,.04) 99%);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg,transparent 0, #000 20%, #000 80%, transparent 100%);
}
:root[data-theme="light"] .hero__pattern{
  background-image:
    linear-gradient(transparent 0 98%, rgba(0,0,0,.035) 99%),
    linear-gradient(90deg, transparent 0 98%, rgba(0,0,0,.035) 99%);
}
.hero__content{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:40px}
.hero__copy .hero__ctas{display:flex;gap:14px;margin:20px 0}
.hero__badges{display:flex;gap:16px;list-style:none;padding:0;margin:18px 0 0;color:var(--color-text-subtle)}
.hero__card{background:color-mix(in oklab, var(--color-surface) 70%, transparent);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;backdrop-filter:blur(6px);box-shadow:var(--shadow-elev)}
.hero__property-title{font-weight:700;margin:8px 0 6px}
.hero__property-meta{padding:0;margin:0 0 14px;list-style:none;color:var(--color-text-subtle);font-size:.95rem}

@media (max-width:980px){
  .hero__content{grid-template-columns:1fr}
}

/* ===========================
   GRID UTILS
   =========================== */

.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:1fr 1fr}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid--2{grid-template-columns:1fr}.grid--3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid--3{grid-template-columns:1fr}}

/* ===========================
   CARDS / LISTS / LOGOS
   =========================== */

.card{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px}
.card--outline{background:transparent}
.card--service h3{margin-top:0}
.list{margin:0;padding-left:18px}
.list--check li{margin:8px 0}
.list--bullet li{margin:8px 0}
.logos{display:flex;gap:14px;margin-top:10px;opacity:.9}
.logos img{height:55px;filter:grayscale(100%) contrast(120%)}

/* ===========================
   PROPERTIES
   =========================== */

.prop{
  background:var(--color-muted);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column
}
.prop__media{position:relative;aspect-ratio:16/10;background:var(--color-neutral-50);overflow:hidden}
.prop__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block
}
.prop__body{padding:16px}
.prop__title{margin:0 0 6px;font-size:1.02rem}
.prop__meta{margin:0 0 10px;color:var(--color-text-subtle);font-size:.94rem}
.prop__price{margin:0 0 12px;color:var(--color-neutral-400);font-weight:800}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filter{
  background:transparent;border:1px solid var(--color-border);
  color:var(--color-text-subtle);padding:8px 12px;border-radius:999px;cursor:pointer
}
.filter.is-active{
  border-color:var(--color-accent);color:var(--color-text);
  box-shadow:0 0 0 2px var(--overlay-accent-soft)
}

/* ===========================
   KPIs
   =========================== */

.kpi-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kpi{font-weight:800}

/* ===========================
   TIMELINE
   =========================== */

.timeline{position:relative;margin-top:10px}
.timeline::before{
  content:"";position:absolute;left:12px;top:0;bottom:0;width:2px;
  background:linear-gradient(var(--color-accent),transparent);opacity:.35
}
.tl__item{position:relative;padding-left:44px;margin:26px 0}
.tl__dot{
  position:absolute;left:6px;top:8px;width:14px;height:14px;border-radius:999px;
  background:var(--color-accent);box-shadow:0 0 0 4px var(--overlay-accent-soft)
}

/* ===========================
   CAROUSEL (TESTIMONIOS)
   =========================== */

.carousel{position:relative}
.carousel__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.carousel__track > *{min-width:66%;scroll-snap-align:start}
.carousel__btn{
  position:absolute;top:40%;transform:translateY(-50%);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:12px;width:38px;height:38px;display:grid;place-items:center;
  color:var(--color-neutral-300);cursor:pointer
}
.carousel__btn:hover{background:color-mix(in srgb, var(--color-surface) 85%, var(--color-bg))}
.carousel__btn.prev{left:-6px}
.carousel__btn.next{right:-6px}
.testimonial{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-elev)}
.testimonial blockquote{margin:0 0 10px;font-weight:600}

/* ===========================
   CONTACT
   =========================== */

.contact{list-style:none;padding:0;margin:16px 0}
.map{margin-top:14px;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.map iframe{width:100%;height:280px;border:0}
.form__row{display:flex;flex-direction:column;margin:10px 0}
.form input,.form textarea{
  background:var(--color-neutral-50);
  border:1px solid var(--color-border);
  border-radius:12px;color:var(--color-text);padding:12px
}
.form input:focus,.form textarea:focus{
  outline:none;border-color:var(--color-accent);
  box-shadow:0 0 0 3px var(--overlay-accent-soft)
}
.form__note{color:var(--color-text-subtle);font-size:.92rem;margin-top:8px}

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

.footer{border-top:1px solid var(--color-border);padding:24px 0;background:var(--color-neutral-50)}
.footer__inner{display:flex;align-items:center;justify-content:space-between}
.backtotop{background:var(--color-surface);border:1px solid var(--color-border);padding:8px 10px;border-radius:10px}

/* ===========================
   REVEAL ANIMATIONS
   =========================== */

.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ===========================
   UTILITIES
   =========================== */

.card--outline{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--overlay-accent-soft) inset}
.section .card--outline h3{margin-top:0}

/* ===========================
   MATERIAL SYMBOLS
   =========================== */

.material-symbols-outlined{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* ===========================
   BACK-TO-TOP FAB
   =========================== */

.toTopFab{
  position: fixed;
  right: 22px;
  bottom: max(22px, env(safe-area-inset-bottom) + 14px);
  width: 56px; height: 56px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-neutral-100);
  border: 1px solid var(--border-alpha);
  box-shadow: var(--shadow-elev);
  z-index: 140;
  opacity: 0; transform: translateY(10px) scale(.92);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, filter .15s ease;
}
.toTopFab.is-visible{
  opacity: 1; transform: none;
  pointer-events: auto;
}
.toTopFab:hover{ filter: brightness(.95); }
.toTopFab:focus{ outline: none; box-shadow: 0 0 0 3px var(--overlay-accent-soft), var(--shadow-elev); }

/* Ajustes responsivos */
@media (max-width: 640px){
  .toTopFab{ right: 16px; width: 52px; height: 52px; }
}

/* Respeta accesibilidad si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  .toTopFab{ transition: none; }
}

/* FAB Tema (sol/luna) */
.themeFab{
  position: fixed;
  right: 22px;
  /* la colocamos arriba del back-to-top: 56px de alto + 12px de gap */
  bottom: calc(max(22px, env(safe-area-inset-bottom) + 14px) + 56px + 12px);
  width: 56px; height: 56px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-neutral-100);
  border: 1px solid var(--border-alpha);
  box-shadow: var(--shadow-elev);
  z-index: 140;
  opacity: 1; transform: none;
  transition: filter .15s ease;
}
.themeFab:hover{ filter: brightness(.95); }

@media (max-width: 640px){
  .themeFab{ right: 16px; width: 52px; height: 52px; }
}

/* Contenedor */
.socials{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:1rem;
}

/* Botón redondo */
.soc{
  --size: 42px;              /* diámetro del círculo */
  width:var(--size);
  height:var(--size);
  display:grid;
  place-items:center;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
  transition:transform .15s ease, filter .25s ease, box-shadow .25s ease;
}

/* Ícono dentro del círculo (se escala sin deformarse) */
.soc .icon{
  width:58%;
  height:58%;
  object-fit:contain;
  display:block;
  /* Si tus SVG son NEGROS, esto los vuelve blancos sobre el fondo.
     Si ya son blancos, quita este filter. */
  filter: brightness(0) invert(1);
}

/* Hover */
.soc:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 6px 16px rgba(0,0,0,.20);
}

/* Colores de marca del círculo */
.soc.fb{ background:#1877F2; }             /* Facebook */
.soc.ig{                                    /* Instagram (gradiente) */
  background:
    linear-gradient(45deg,#F58529,#F56040,#E1306C,#C13584,#833AB4,#5851DB);
}
.soc.wa{ background:#25D366; }             /* WhatsApp */

/* Ajustes responsive opcionales */
@media (max-width:480px){
  .soc{ --size: 38px; }
  .soc .icon{ width:56%; height:56%; }
}

/* Contenedor de FABs */
.fabStack{
  position: fixed;
  right: clamp(12px, 2vw, 22px);
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 140;
  transition: bottom .22s ease;
}

/* Quita las posiciones fijas individuales: usa estáticos dentro de la pila */
.fabStack .toTopFab,
.fabStack .themeFab{
  position: static;   /* <- clave */
  right: auto;
  bottom: auto;
}

.team {
  margin-top: 60px;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 30px;
}
.team__group h3 {
  margin-bottom: 16px;
  font-weight: 800;
}
.team__cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.team__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elev);
}
.team__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--color-muted);
  box-shadow: 0 0 0 2px var(--overlay-accent-soft);
}
.team__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team__info strong {
  display: block;
  font-weight: 700;
}
.team__info p {
  margin: 2px 0 0;
  font-size: .95rem;
  color: var(--color-text-subtle);
}