/* ============================================================
   bagus — gestión inmobiliaria
   Hoja única. Tokens de marca + estilos resueltos.
   Sin framework, sin runtime del design system.
   El hueso manda: el teal no supera ~10% de la superficie.
   ============================================================ */

/* ---------- Fuentes self-host (subset latino, variable) ---------- */
@font-face{
  font-family:"Quicksand";
  src:url("/fonts/quicksand-latin.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("/fonts/hanken-latin.woff2") format("woff2");
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Paleta de marca (única fuente de color) */
  --bg:#F4F1E9;        /* hueso — fondo protagonista */
  --text:#1C1B19;      /* casi negro */
  --accent:#0E4B47;    /* teal profundo — dueño */
  --accent-2:#6FA79C;  /* teal claro — acento/hover */
  --surface:#E7E0D2;   /* arena — tarjetas */
  --border:#E0D9CB;    /* hairline 1px */
  --text-muted:#6b675e;/* negro suavizado sobre hueso */

  /* Sobre fondo teal */
  /* teal-claro aclarado solo para texto pequeño sobre teal (AA ≥4.5) */
  --accent-2-aa:#8FBEB4;
  --on-teal:rgba(244,241,233,.92);
  --on-teal-soft:rgba(244,241,233,.85);
  --on-teal-dim:rgba(244,241,233,.6);
  --hairline-inverse:rgba(244,241,233,.24);
  --field-border:rgba(244,241,233,.4);
  --placeholder:rgba(244,241,233,.5);

  /* WhatsApp (verde oficial — decisión de marca aprobada) */
  --wa:#25D366;
  --wa-dark:#1EBE5B;

  /* Tipografía */
  --font-display:"Quicksand",system-ui,-apple-system,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --label-tracking:.16em;

  /* Layout */
  --measure-max:1160px;
  --radius:8px;
  --radius-card:14px;
  --radius-img:16px;
  --radius-pill:999px;
  --section-y:clamp(56px,7vw,72px);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
/* <picture> transparente: la <img> sigue siendo el ítem flex/grid real */
picture{display:contents}
h1,h2,h3,p{margin:0}
a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:4px;
}
/* En fondos teal, el foco se ve en hueso */
.band-teal :focus-visible,
.contacto :focus-visible,
.site-header :focus-visible{outline-color:var(--bg)}

/* ---------- Utilidades ---------- */
.container{
  max-width:var(--measure-max);
  margin-inline:auto;
  padding-inline:24px;
}
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:12px;top:-60px;
  z-index:300;
  background:var(--bg);color:var(--accent);
  font-family:var(--font-display);font-weight:600;
  padding:10px 18px;border-radius:var(--radius);
  transition:top .18s ease;
}
.skip-link:focus{top:12px}

.eyebrow{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:var(--label-tracking);
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
}
.band-teal .eyebrow{color:var(--accent-2-aa)}

/* ---------- Botones / enlaces ---------- */
.btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 34px;
  border:1px solid transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
  text-align:center;
  line-height:1.1;
}
.btn--solid{background:var(--accent);color:var(--bg)}
.btn--solid:hover{opacity:.92}
.btn--light{background:var(--bg);color:var(--accent)}
.btn--light:hover{opacity:.92}
.btn--wa{
  background:var(--wa);
  border-color:var(--wa);
  color:var(--accent);
  padding:15px 30px;
}
.btn--wa:hover{background:var(--wa-dark);border-color:var(--wa-dark);color:var(--accent)}

.link-quiet{
  font-family:var(--font-display);
  font-weight:500;
  font-size:16px;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:color .2s ease;
}
.link-quiet:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.band-teal .link-quiet,.contacto .link-quiet{color:var(--bg)}
.band-teal .link-quiet:hover,.contacto .link-quiet:hover{color:var(--bg);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   1 · HEADER
   ============================================================ */
.site-header{
  background:var(--accent);
  position:sticky;top:0;z-index:100;
  transition:box-shadow .25s ease;
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding-block:12px;
}
.site-header__logo{height:66px;width:auto}
.nav{
  display:flex;align-items:center;gap:28px;
}
.nav__link{
  color:var(--bg);
  font-family:var(--font-display);
  font-weight:500;
  font-size:15px;
  transition:color .2s ease;
}
.nav__link:hover{color:var(--bg);text-decoration:underline;text-underline-offset:4px}
.nav__link--cta{
  background:var(--bg);
  color:var(--accent);
  border-radius:var(--radius-pill);
  padding:12px 26px;
  transition:background .2s ease,color .2s ease;
}
.nav__link--cta:hover{opacity:.92}

.nav-toggle{
  display:none;
  background:transparent;border:1px solid var(--field-border);
  border-radius:var(--radius);
  width:44px;height:44px;
  align-items:center;justify-content:center;
  color:var(--bg);
}
.nav-toggle svg{stroke:var(--bg)}
.nav-toggle__close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}

/* ============================================================
   2 · HERO
   ============================================================ */
.hero__inner{
  display:flex;flex-wrap:wrap;gap:56px;align-items:center;
  padding-block:48px 56px;
}
.hero__col-text{flex:1 1 440px;min-width:300px}
.hero__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(38px,5.5vw,64px);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:20px 0 24px;
  text-wrap:pretty;
}
.hero__lead{
  font-size:18px;
  margin:0 0 36px;
  max-width:52ch;
  color:rgba(28,27,25,.85);
  text-wrap:pretty;
}
.hero__ctas{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero__img{
  width:100%;
  height:auto;
  aspect-ratio:16/6;
  object-fit:cover;
  border-radius:var(--radius-img);
  margin-top:40px;
}
.hero__col-media{
  flex:1 1 380px;min-width:300px;
  display:flex;flex-direction:column;
}
.hero__portrait{
  width:100%;height:auto;
  border-radius:var(--radius-img);
  object-fit:cover;
  aspect-ratio:4/5;
}
/* placeholder de marca mientras no exista la foto real */
.hero__portrait--placeholder{
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;
  color:var(--text-muted);
  font-family:var(--font-display);font-weight:500;font-size:14px;
  letter-spacing:.04em;
}
.hero__quote{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:24px 28px;
  margin:-32px 0 0 auto;
  width:min(85%,400px);
  position:relative;
}
.hero__quote-name{
  font-family:var(--font-display);
  font-weight:600;font-size:16px;
  margin:0 0 4px;color:var(--accent);
}
.hero__quote-text{
  font-size:15px;margin:0;color:rgba(28,27,25,.8);
  text-wrap:pretty;
}

/* ============================================================
   3 · REGIÓN TEAL CONTINUA  (Por qué bagus  +  Cómo trabajamos)
   ============================================================ */
.band-teal{background:var(--accent);color:var(--bg)}

.porque{padding-block:56px 44px;display:flex;flex-direction:column;gap:20px}
.porque__list{display:flex;flex-wrap:wrap;gap:24px 48px;margin:0;padding:0;list-style:none}
.porque__item{
  display:flex;align-items:center;gap:14px;flex:1 1 260px;
  margin:0;
}
.porque__item svg{flex-shrink:0;stroke:var(--bg)}
.porque__item p{margin:0;font-size:15px;color:var(--on-teal)}

.band-teal__divider{
  height:1px;background:var(--hairline-inverse);border:0;margin:0;
}

.comotrab{padding-block:44px var(--section-y)}
.comotrab__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(32px,4vw,48px);
  letter-spacing:-.02em;line-height:1.15;
  margin:16px 0 48px;max-width:26ch;text-wrap:pretty;
}
.comotrab__row{display:flex;flex-wrap:wrap;gap:40px;align-items:stretch}
.pillars{
  flex:2 1 520px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:32px;align-content:start;
}
.pillar{border-top:1px solid var(--hairline-inverse);padding-top:24px}
.pillar__title{
  font-family:var(--font-display);font-weight:600;font-size:20px;
  margin:0 0 12px;display:flex;align-items:center;gap:12px;
}
.pillar__title svg{flex-shrink:0;stroke:var(--bg)}
.pillar p{font-size:16px;color:var(--on-teal-soft);margin:0;text-wrap:pretty}
.comotrab__img{
  flex:1 1 300px;min-width:260px;max-width:420px;width:100%;
  object-fit:cover;min-height:280px;max-height:520px;
  border-radius:var(--radius);align-self:stretch;
}

/* ============================================================
   4 · SERVICIOS
   ============================================================ */
.servicios{background:var(--bg)}
.servicios__head{padding-block:var(--section-y) 0}
.servicios__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(32px,4vw,46px);
  letter-spacing:-.02em;line-height:1.15;
  margin:16px 0 48px;
}
.servicios__row{
  display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;
  padding-bottom:var(--section-y);
}
.servicios__img{
  flex:1 1 340px;min-width:300px;max-width:480px;width:100%;
  border-radius:var(--radius-img);
  object-fit:cover;object-position:center 70%;
  min-height:280px;max-height:620px;align-self:stretch;
}
.cards{
  flex:2 1 560px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  padding:28px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .25s ease,border-color .25s ease;
}
.card:hover{border-color:var(--accent);transform:translateY(-4px)}
.card__title{
  font-family:var(--font-display);font-weight:600;font-size:20px;
  margin:0;display:flex;align-items:center;gap:12px;
}
.card__title svg{flex-shrink:0;stroke:var(--accent)}
.card p{font-size:15px;margin:0;color:rgba(28,27,25,.85);text-wrap:pretty}
.card__price{
  font-family:var(--font-display);font-weight:500;font-size:14px;
  color:var(--accent);
  margin:auto 0 0;padding-top:8px;
  border-top:1px solid var(--border);
}

/* ============================================================
   5 · CONTACTO
   ============================================================ */
.contacto{background:var(--accent)}
.contacto__inner{
  display:flex;flex-wrap:wrap;gap:56px;
  padding-block:var(--section-y);
}
.contacto__col{flex:1 1 380px;min-width:300px}
.contacto__title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(32px,4vw,48px);
  letter-spacing:-.02em;line-height:1.15;
  margin:0 0 16px;color:var(--bg);text-wrap:pretty;
}
.contacto__lead{
  font-size:17px;color:var(--on-teal-soft);
  margin:0 0 32px;max-width:46ch;
}
.contacto__meta{
  font-family:var(--font-display);font-weight:500;font-size:16px;
  color:var(--bg);margin:0;
  display:flex;align-items:center;gap:10px;
}
.contacto__meta svg{flex-shrink:0;stroke:var(--bg)}

/* Formulario */
.form{
  flex:1 1 420px;min-width:300px;
  display:flex;flex-direction:column;gap:16px;
}
.form__row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:var(--font-display);font-weight:500;font-size:13px;
  letter-spacing:.02em;color:var(--bg);
}
.field .req{color:var(--accent-2)}
.field input,
.field select,
.field textarea{
  font-family:var(--font-body);font-size:15px;
  color:var(--bg);background:transparent;
  border:1px solid var(--field-border);
  border-radius:var(--radius-card);
  padding:13px 16px;
  outline:none;width:100%;
}
.field textarea{resize:vertical;min-height:110px}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F4F1E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:44px;
}
.field select option{color:var(--text)}
.field input::placeholder,
.field textarea::placeholder{color:var(--placeholder)}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--bg)}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#F4C9C0}
.field__error{
  font-family:var(--font-body);font-size:13px;color:#F4C9C0;min-height:1em;
}
.form__status a{color:var(--bg);text-decoration:underline;text-underline-offset:3px}
.form__status a:hover{color:var(--accent-2)}
/* honeypot */
.hp{
  position:absolute!important;left:-9999px;
  width:1px;height:1px;overflow:hidden;
}
.form__actions{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px;
}
.form__actions .btn--light svg,
.form__actions .btn--light img{height:15px;width:auto}
/* estados */
.form__status{margin:0;font-size:15px}
.form__status[data-state="error"]{color:#F4C9C0}
.form-success{
  border:1px solid var(--hairline-inverse);
  border-radius:var(--radius-card);
  padding:28px;color:var(--bg);
}
.form-success h3{
  font-family:var(--font-display);font-weight:600;font-size:20px;margin:0 0 8px;
}
.form-success p{color:var(--on-teal-soft);margin:0}

/* ============================================================
   6 · FOOTER
   ============================================================ */
.site-footer{
  background:var(--bg);color:var(--text);
  border-top:1px solid var(--border);
}
.site-footer__inner{
  display:flex;flex-wrap:wrap;gap:32px;
  align-items:flex-start;justify-content:space-between;
  padding-block:56px;
}
.site-footer__logo{height:72px;width:auto}
.site-footer__col{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.footer-nav{display:flex;gap:24px;flex-wrap:wrap}
.footer-nav a{
  color:var(--accent);
  font-family:var(--font-display);font-weight:500;font-size:14px;
  transition:color .2s ease;
}
.footer-nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.site-footer__copy{font-size:13px;color:var(--text-muted);margin:0}

/* ============================================================
   7 · WHATSAPP FLOTANTE
   ============================================================ */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:200;
  background:var(--wa);color:var(--bg);
  width:60px;height:60px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.wa-float:hover{background:var(--wa-dark);color:var(--bg)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:767px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;
    gap:0;
    background:var(--accent);
    border-top:1px solid var(--hairline-inverse);
    padding:8px 24px 20px;
    display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav__link{padding:14px 0;font-size:17px;border-bottom:1px solid var(--hairline-inverse)}
  .nav__link--cta{
    margin-top:14px;text-align:center;
    padding:14px 26px;border-bottom:0;
  }
  .site-header__inner{position:relative}
  .hero__inner{padding-block:32px 40px;gap:36px}
  .hero__img{aspect-ratio:16/9;margin-top:28px}
  .contacto__inner,.hero__inner{gap:40px}
}

@media (max-width:420px){
  .container{padding-inline:20px}
  .hero__quote{width:100%;margin:-24px 0 0}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .card:hover{transform:none}
}