/* ============================================================
   SmartBienesRaices.com — Home
   Tokens copiados EXACTOS de mi-negocio/brand/diseno.md §17 (DESIGN-TOKENS).
   Ningún hex vive fuera de este :root — si cambia un color, cambia ahí primero.
   Reescrito para SMART REAL STATE (sustituye la hoja del molde de venta Servixo,
   que asumía un portal de software — ver mi-negocio/brand/negocio.md).
   ============================================================ */

:root{
  --bg:#202350;
  --surface:#26295E;
  --surface-2:#2A3275;
  --surface-3:#2C3988;
  --border:#404371;
  --paper:#FFFFFF;
  --paper-2:#F3F2FA;
  --ink:#1E2A36;
  --ink-soft:#6D757C;
  --text:#DEDFE7;
  --text-muted:#9D9FB7;
  --text-display:#FFFFFF;
  --text-on-accent:#1E2A36;
  --primary:#1D36F5;
  --primary-deep:#26295E;
  --primary-soft:#51ACE5;
  --accent:#51ACE5;
  --accent-bold:#3972BF;
  --accent-soft:#97CDEF;
  --amber:#3972BF;
  --earth:#26295E;
  --display:'Lexend', system-ui, sans-serif;
  --body:'Lexend', Arial, sans-serif;
  --mono:'Lexend', system-ui, sans-serif;
  --radius:14px;
  --shadow:0 24px 60px rgba(6, 12, 20, 0.35);

  --maxw:1180px; --nav-h:96px;
  --fs-body:clamp(17px,calc(16px + .3vw),19px);
  --fs-nav:clamp(17px,calc(16.3px + .12vw),18px);
  --fs-control:clamp(17px,calc(16.4px + .15vw),18px);
  --fs-card:clamp(17px,calc(16.5px + .12vw),18px);
  --fs-small:clamp(15px,calc(14.6px + .1vw),16px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-body); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.12; text-wrap:balance; }
::selection{ background:var(--primary); color:#fff; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.shell{ position:relative; z-index:1; max-width:var(--maxw); width:100%; min-width:0; margin:0 auto; padding:0 clamp(1rem,4vw,2rem); box-sizing:border-box; }

/* ── modos de sección (solo los 2 aprobados en diseno.md) ── */
.modo-oscuro{ background:var(--bg); color:var(--text); }
.modo-oscuro h1,.modo-oscuro h2,.modo-oscuro h3{ color:var(--text-display); }
.modo-oscuro .sec__intro{ color:var(--text-muted); }
.modo-claro{ background:var(--paper); color:var(--ink); }
.modo-claro.alt{ background:var(--paper-2); }
.modo-claro h1,.modo-claro h2,.modo-claro h3{ color:var(--ink); }
.modo-claro .sec__intro{ color:var(--ink-soft); }

.sec{ position:relative; padding:clamp(3.2rem,9vh,6rem) 0; }
.sec__head{ max-width:640px; margin:0 auto clamp(2.2rem,5.5vw,3.2rem); text-align:center; }
.eyebrow{ font-family:var(--mono); font-size:var(--fs-small); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-soft); margin-bottom:.8rem; display:block; }
.modo-claro .eyebrow{ color:var(--primary); }
.sec__head h2{ font-size:clamp(1.875rem,3.4vw,2.5rem); letter-spacing:-.01em; margin-bottom:.6rem; }
.sec__head p{ font-size:var(--fs-body); }

/* reveal-on-scroll (genérico, reutilizado en todas las secciones) */
.js [data-r]{ opacity:0; transform:translateY(20px); }
.js [data-r].in{ opacity:1; transform:none; transition:opacity .6s ease, transform .7s cubic-bezier(.22,.9,.24,1); }
.js [data-rs]>*{ opacity:0; transform:translateY(16px); }
.js [data-rs].in>*{ opacity:1; transform:none; transition:opacity .5s ease calc(var(--i,0)*80ms), transform .6s cubic-bezier(.22,.9,.24,1) calc(var(--i,0)*80ms); }

/* ── nav ── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb, var(--bg) 12%, transparent);
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease;
}
.nav.solid{ background:color-mix(in srgb, var(--bg) 90%, transparent); border-bottom-color:var(--border); }
.nav__inner{
  max-width:var(--maxw); width:100%; height:100%; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.2rem,4vw,2.6rem); box-sizing:border-box;
}
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:60px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,1.7rem); }
.nav__links a{ position:relative; color:var(--text-display); font-weight:500; font-size:var(--fs-nav); }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:var(--primary-soft); transition:right .28s cubic-bezier(.22,.9,.24,1);
}
.nav__links a:not(.nav__cta):hover::after{ right:0; }
.nav__cta{ display:inline-flex; align-items:center; gap:.4rem; background:var(--accent); color:var(--text-on-accent) !important; font-weight:600; padding:.55rem 1rem; border-radius:.7rem; }
.nav__cta:hover{ background:var(--accent-bold); color:#fff !important; }
.nav__cta svg{ width:16px; height:16px; stroke:currentColor; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem; position:relative; z-index:52; }
.nav__burger span{ width:24px; height:2px; background:var(--text-display); border-radius:2px; transition:.25s; }
.nav__scrim{
  position:fixed; inset:0; z-index:40; display:none;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
}
.nav__scrim.open{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }

/* ── botones ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--body); font-weight:700; font-size:var(--fs-control); padding:.9rem 1.6rem; border:1px solid transparent; cursor:pointer;
  border-radius:.8rem; text-decoration:none; transition:transform .16s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 14px 30px color-mix(in srgb, var(--primary) 32%, transparent); }
.btn--primary:hover{ background:color-mix(in srgb, var(--primary) 85%, black); }
.btn--accent{ background:var(--accent); color:var(--text-on-accent); box-shadow:0 14px 30px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn--accent:hover{ background:var(--accent-bold); color:#fff; }
.btn--ghost-light{ background:transparent; border-color:var(--primary); color:var(--primary); }
.btn--ghost-light:hover{ background:color-mix(in srgb, var(--primary) 8%, transparent); }
.btn--ghost-dark{ background:transparent; border-color:var(--accent); color:var(--accent); }
.btn--ghost-dark:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); }
.btn--link{ padding:0; border:0; font-weight:600; color:var(--primary-soft); background:none; box-shadow:none; }
.btn--link:hover{ text-decoration:underline; transform:none; }
.btn--sm{ padding:.7rem 1.1rem; font-size:var(--fs-control); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* ════════ HERO ════════ */
.hero{ position:relative; overflow:hidden; padding:calc(var(--nav-h) + clamp(2.2rem,6vh,3.6rem)) 0 clamp(3rem,7vh,4.5rem); }
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 88% 8%, color-mix(in srgb, var(--primary-soft) 22%, transparent), transparent 60%),
    radial-gradient(70% 60% at 6% 100%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, black 15%) 0%, var(--bg) 30%, var(--bg) 100%);
}
.hero__grid{
  position:relative; z-index:1; display:grid;
  grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__in{ min-width:0; }
.hero__in .eyebrow{ color:var(--primary-soft); }
.hero h1{ font-size:clamp(2.25rem,4.6vw,3.625rem); line-height:1.12; letter-spacing:-.015em; margin:.6rem 0 1.1rem; max-width:22ch; }
.hero .sub{ font-size:clamp(1.0625rem,calc(1rem + .25vw),1.25rem); color:var(--text); max-width:48ch; margin-bottom:1.8rem; }

/* zona visual derecha: elemento arquitectónico abstracto, dentro del mismo contenedor que el texto */
.hero__art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:260px; min-width:0; }
.hero__art::before{
  content:""; position:absolute; inset:6%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--primary-soft) 18%, transparent), transparent 72%);
}
.hero__skyline{ position:relative; width:100%; max-width:380px; opacity:.65; }
.hero__skyline rect,.hero__skyline path{ fill:none; stroke:var(--primary-soft); stroke-width:1.4; }

/* buscador */
.buscador{
  position:relative; z-index:1; margin-top:.4rem; background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:.6rem; align-items:end;
}
.buscador__campo{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.buscador__campo label{ font-size:var(--fs-small); font-weight:600; letter-spacing:.03em; color:var(--text-muted); }
.buscador__campo select{
  width:100%; min-width:0; box-sizing:border-box;
  font-family:var(--body); font-size:var(--fs-control); font-weight:500; color:var(--text-display); background:var(--surface-2);
  border:1px solid var(--border); border-radius:.6rem; padding:.7rem 1.5rem .7rem .65rem; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239D9FB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center;
}
.buscador__campo select:focus-visible{ outline:2px solid var(--primary-soft); outline-offset:2px; }
.buscador .btn{ min-height:50px; align-self:end; }
.buscador__nota{ grid-column:1 / -1; margin:0; font-size:var(--fs-small); color:var(--text-muted); }
.hero__wa{ position:relative; z-index:1; margin-top:1rem; font-size:var(--fs-small); color:var(--text-muted); }
.hero__wa a{ color:var(--primary-soft); font-weight:600; }
.hero__wa a:hover{ text-decoration:underline; }
.hero__wa svg{ width:16px; height:16px; stroke:var(--primary-soft); vertical-align:-3px; margin-right:.2rem; }

/* ════════ FRANJA DE CONFIANZA (trayectoria) ════════ */
.franja{
  background:var(--paper-2);
  border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  padding:clamp(1.7rem,4.5vh,2.5rem) 0;
}
.franja__wrap{ display:flex; align-items:center; justify-content:center; gap:clamp(1.5rem,4vw,3.2rem); flex-wrap:wrap; text-align:center; }
.franja__item{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.franja__dato{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,calc(1rem + .7vw),1.55rem); color:var(--ink); letter-spacing:-.01em; }
.franja__label{ font-size:var(--fs-small); color:var(--ink-soft); }
.franja__div{ width:1px; align-self:stretch; min-height:38px; background:color-mix(in srgb, var(--ink) 14%, transparent); }
@media (max-width:640px){
  .franja__wrap{ flex-direction:column; gap:1.2rem; }
  .franja__div{ display:none; }
}

/* ════════ ACCESOS POR INTENCIÓN ════════ */
.accesos__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.accesos__grid>*,.servicios__grid>*,.destacadas__grid>*{ min-width:0; }
.acceso{
  background:var(--paper); border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius:var(--radius);
  padding:2rem 1.7rem; box-shadow:0 18px 40px rgba(30,42,54,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column; gap:.7rem;
}
.acceso:hover{ transform:translateY(-4px); box-shadow:0 24px 50px rgba(30,42,54,.1); }
.acceso--cta{ border-color:color-mix(in srgb, var(--primary) 32%, transparent); background:color-mix(in srgb, var(--primary) 4%, var(--paper)); }
.acceso__ic{ width:46px; height:46px; border-radius:.8rem; display:grid; place-items:center; background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); }
.acceso__ic svg{ width:24px; height:24px; stroke:currentColor; }
.acceso h3{ font-size:clamp(1.2rem,calc(1.1rem + .25vw),1.35rem); }
.acceso p{ color:var(--ink-soft); font-size:var(--fs-card); flex:1; }

/* ════════ PROPIEDADES DESTACADAS (preparada, hoy sin inventario) ════════ */
.destacadas__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.propiedad{ border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius:var(--radius); overflow:hidden; background:var(--paper); box-shadow:0 18px 40px rgba(30,42,54,.06); }
.propiedad__foto{ aspect-ratio:4/3; background:var(--paper-2); display:grid; place-items:center; color:var(--ink-soft); font-family:var(--mono); font-size:.8rem; }
.propiedad__body{ padding:1.1rem 1.2rem 1.3rem; }
.propiedad__op{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); margin-bottom:.3rem; display:block; }
.propiedad h3{ font-size:1.05rem; margin-bottom:.2rem; }
.propiedad__meta{ color:var(--ink-soft); font-size:.9rem; margin-bottom:.6rem; }
.propiedad__precio{ font-family:var(--mono); font-weight:600; font-size:1.15rem; color:var(--ink); }
.propiedad__codigo{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin-top:.3rem; }

/* ════════ NUESTRA EXPERIENCIA (editorial, reemplaza el bloque de 3 tarjetas) ════════ */
.experiencia__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.4rem,6vw,4.5rem); align-items:start; }
.experiencia__intro{ min-width:0; }
.experiencia__intro h2{ font-size:clamp(1.875rem,3.4vw,2.5rem); letter-spacing:-.01em; margin:.6rem 0 1.2rem; max-width:19ch; }
.experiencia__intro p{ color:var(--text); max-width:52ch; }
.experiencia__intro p+p{ margin-top:1rem; }
.experiencia__intro strong{ color:var(--text-display); font-weight:600; }

.experiencia__atributos{ display:flex; flex-direction:column; gap:1.5rem; min-width:0; }
.atributo{ display:flex; gap:1rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.atributo:first-child{ padding-top:0; border-top:0; }
.atributo__ic{ flex:none; width:42px; height:42px; border-radius:.8rem; display:grid; place-items:center; background:color-mix(in srgb, var(--primary-soft) 16%, transparent); color:var(--primary-soft); }
.atributo__ic svg{ width:20px; height:20px; stroke:currentColor; }
.atributo__cuerpo{ min-width:0; }
.atributo h3{ font-size:clamp(1.05rem,calc(1rem + .15vw),1.15rem); margin-bottom:.35rem; }
.atributo p{ color:var(--text-muted); font-size:var(--fs-card); }

/* ════════ COBERTURA ════════ */
.cobertura__wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.4rem; }
.cobertura__ciudades{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; }
.ciudad-chip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--paper-2); border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius:999px; padding:.65rem 1.15rem; font-weight:600; font-size:var(--fs-control); color:var(--ink); }
.ciudad-chip svg{ width:16px; height:16px; stroke:var(--primary); }
.cobertura p.lead{ max-width:56ch; margin:0 auto; }

/* ════════ PROPIETARIOS ════════ */
.propietarios{ text-align:center; }
.propietarios__wrap{ max-width:620px; margin:0 auto; }
.propietarios .btn-row{ justify-content:center; margin-top:1.6rem; }

/* ════════ SERVICIOS ════════ */
.servicios__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.servicio{ border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius:var(--radius); padding:1.7rem 1.5rem; background:var(--paper); }
.servicio__ic{ width:44px; height:44px; border-radius:.8rem; display:grid; place-items:center; background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); margin-bottom:1rem; }
.servicio__ic svg{ width:22px; height:22px; stroke:currentColor; }
.servicio h3{ font-size:clamp(1.2rem,calc(1.1rem + .25vw),1.35rem); margin-bottom:.5rem; }
.servicio p{ color:var(--ink-soft); font-size:var(--fs-card); }

/* ════════ CONTACTO ════════ */
.contacto{ text-align:center; }
.contacto__wrap{ max-width:520px; margin:0 auto; }
.contacto .btn-row{ justify-content:center; margin-top:1.6rem; flex-direction:column; align-items:center; }
.contacto__tel{ margin-top:.4rem; color:var(--text-muted); font-family:var(--mono); font-size:var(--fs-small); }
.contacto__tel a{ color:var(--text-display); font-weight:600; }

/* ════════ WhatsApp flotante ════════ */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:45; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:28px; height:28px; stroke:#fff; }
/* con el menú móvil abierto ya hay un WhatsApp propio dentro del drawer — se oculta el flotante para
   no duplicar la acción, y con display:none también sale del orden de tabulación (no queda foco
   fantasma en un botón que ya no se ve). Reutiliza el mismo estado body.menu-open que ya pone/quita
   el JS del menú — sin lógica nueva. */
body.menu-open .wa-float{ display:none; }

/* ════════ Volver arriba (flotante, apilado justo encima de WhatsApp) ════════ */
.top-float{
  position:fixed; right:20px; bottom:90px; z-index:45; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer;
  background:var(--paper); border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  box-shadow:0 8px 20px rgba(6,12,20,.16);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, background .18s ease, border-color .18s ease;
}
.top-float.visible{ opacity:1; transform:none; pointer-events:auto; }
.top-float:hover{ background:var(--paper-2); border-color:var(--primary); }
.top-float svg{ width:20px; height:20px; stroke:var(--primary-deep); }
/* mismo criterio que .wa-float: durante el menú móvil se oculta para no competir con el drawer */
body.menu-open .top-float{ display:none; }

/* ── footer ── */
.foot{ position:relative; z-index:1; padding:2.5rem 1.5rem 2.1rem; text-align:center; color:var(--text-muted); font-size:var(--fs-small); background:var(--bg); border-top:1px solid var(--border); }
/* Nivel 1 — marca */
.foot__brand{ margin-bottom:1.3rem; }
.foot__logo{ display:inline-block; margin-bottom:.6rem; }
.foot__logo img{ height:clamp(66px,5vw,72px); width:auto; }
.foot__desc{ color:var(--text); font-weight:500; font-size:var(--fs-control); }
/* Nivel 2 — navegación secundaria */
.foot__nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.3rem;
  max-width:520px; margin:0 auto 1.3rem; padding-top:1.1rem;
  border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.foot__nav a{ color:var(--text-muted); font-size:var(--fs-small); }
.foot__nav a:hover{ color:var(--text-display); }
/* Nivel 3 — contacto */
.foot__contact{ color:var(--text); font-size:var(--fs-small); margin-bottom:.3rem; }
.foot__contact a{ color:var(--text); font-weight:600; }
.foot__contact a:hover{ color:var(--primary-soft); }
/* Nivel 4 — cobertura */
.foot__cobertura{ font-size:var(--fs-small); color:var(--text-muted); opacity:.85; }

/* ════════ responsivo ════════ */
/* Header: por debajo de 960px manda el menú hamburguesa (sin competencia de espacio con el nav),
   así que el lockup puede crecer a 60px sin apretar enlaces. De 960px para arriba hay navegación
   horizontal completa al lado del logo: 70–74px le dan la presencia aprobada y el header sube solo
   lo necesario para conservar aire, alineación y el área de clic. */
@media (min-width:960px){
  :root{ --nav-h:110px; }
  .nav__logo img{ height:clamp(70px,5vw,74px); }
  /* Con controles de 17–18px, los tres selectores conservan su texto completo y el CTA respira
     en una fila propia; es el mismo buscador, solo cambia su distribución interna. */
  .buscador{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .buscador .btn{ grid-column:1 / -1; }
}
/* Justo arriba de 960px el menú horizontal completo (5 enlaces + botón WhatsApp) no cabe
   con el gap normal y "Vender mi propiedad" se parte en 2 líneas — medido: ocurre entre
   961px y 964px con el gap por defecto. Un gap más angosto solo en esta franja angosta lo
   resuelve sin tocar el quiebre de 960px (que sigue mandando el menú hamburguesa) ni el
   resto del header; de 1061px en adelante ya sobra espacio y el gap normal vuelve solo. */
@media (min-width:960px) and (max-width:1060px){
  .nav__links{ gap:0.5rem; }
}
@media (max-width:960px){
  .accesos__grid,.servicios__grid{ grid-template-columns:1fr; }
  .experiencia__grid{ grid-template-columns:1fr; gap:2.4rem; }
  .experiencia__intro h2{ max-width:none; }
  .buscador{ grid-template-columns:1fr 1fr; }
  .buscador .btn{ grid-column:1 / -1; }
  /* el elemento gráfico se oculta antes de que el contenido se apriete — prioridad al texto y al buscador */
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ display:none; }
  .hero h1{ max-width:26ch; }
  /* menú hamburguesa desde aquí — mismo quiebre que usa el Hero, para que header y hero cambien de
     composición juntos y ningún enlace del menú horizontal se parta en dos líneas en tablet */
  .nav__burger{ display:flex; }
  .nav__scrim{ display:block; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; z-index:51; flex-direction:column; gap:0;
    background:color-mix(in srgb,var(--bg) 96%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding:.5rem 0; border-bottom:1px solid var(--border); box-shadow:0 18px 40px color-mix(in srgb,var(--bg) 50%,transparent);
    transform:translateY(-130%); transition:transform .28s ease; visibility:hidden;
  }
  .nav__links.open{ transform:translateY(0); visibility:visible; }
  .nav__links a{ width:100%; padding:.9rem clamp(1rem,4vw,2rem); }
  .nav__links a:not(.nav__cta)::after{ display:none; }
  .nav__cta{ border-radius:0; margin:.4rem clamp(1rem,4vw,2rem); justify-content:center; }
  .nav__burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__burger.open span:nth-child(2){ opacity:0; }
  .nav__burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:760px){
  .buscador{ grid-template-columns:1fr; }
  .hero h1{ max-width:none; }
  .wa-float{ right:14px; bottom:14px; width:52px; height:52px; }
  /* apilado sobre el WhatsApp móvil (14px + 52px + 14px de aire) y sin bajar de 44px de área táctil */
  .top-float{ right:14px; bottom:80px; width:46px; height:46px; }
}

/* ════════ NOSOTROS — /nosotros/ (página interior) ════════ */
/* párrafos de trayectoria/nueva-etapa: mismo criterio de ancho de línea que .hero .sub
   (ch, no px) que ya usa el resto del sitio para bloques de texto largo */
.trayectoria__copy{ max-width:60ch; margin:0 auto; text-align:center; }
.trayectoria__copy p+p{ margin-top:1rem; }
/* reusa las tarjetas .servicio tal cual; solo agrega la cuadrícula de 4 columnas que
   .servicios__grid no cubre (esa queda fija a 3 para no arriesgar la Home) */
.principios__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
@media (max-width:960px){
  .principios__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .principios__grid{ grid-template-columns:1fr; }
}

/* ════════ CAPTURA — /vende-o-renta-tu-propiedad/ (página de propietarios) ════════ */
.captura-nav{ background:var(--bg); border-bottom:1px solid var(--border); padding:1rem 0; }
.captura-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.captura-nav__logo img{ height:54px; width:auto; }
.captura-hero{ padding-top:clamp(2.2rem,6vh,3.4rem); }
.captura-hero__in{ max-width:720px; text-align:center; }
.captura-hero__in h1{ max-width:none; margin-left:auto; margin-right:auto; }
.captura-hero__in .sub{ max-width:56ch; margin-left:auto; margin-right:auto; }
.captura-ancho{ max-width:640px; }
.captura-beneficios{ list-style:none; display:flex; flex-direction:column; gap:.9rem; }
.captura-beneficios li{ position:relative; padding-left:1.5rem; }
.captura-beneficios li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--primary); }
.captura-form{ display:flex; flex-direction:column; gap:1.1rem; }
.campo{ display:flex; flex-direction:column; gap:.4rem; }
.campo>label{ font-size:var(--fs-small); font-weight:600; color:var(--text-display); }
.campo .opcional{ font-weight:400; color:var(--text-muted); }
.campo input[type="text"],.campo select,.campo textarea{
  width:100%; box-sizing:border-box; font-family:var(--body); font-size:var(--fs-control); color:var(--text-display);
  background:var(--surface-2); border:1px solid var(--border); border-radius:.7rem; padding:.85rem .9rem;
}
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239D9FB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem;
}
.campo textarea{ resize:vertical; min-height:110px; font-family:var(--body); }
/* Placeholder legible: el gris por defecto del navegador (~#757575) da 2.52:1 sobre
   --surface-2 y no pasa el mínimo de 4.5:1. --accent (#51ACE5, uno de los 5 azules de
   marca) mide 4.63:1 sobre este mismo fondo — medido, no a ojo. */
.campo input[type="text"]::placeholder,.campo textarea::placeholder{ color:var(--accent); opacity:1; }
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.op-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.op-toggle__opt{ position:relative; }
.op-toggle__opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.op-toggle__opt label{
  display:flex; align-items:center; justify-content:center; gap:.5rem; height:100%; text-align:center;
  padding:1rem; border:2px solid var(--border); border-radius:var(--radius); font-weight:700; cursor:pointer;
  color:var(--text); transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.op-toggle__opt input:checked+label{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--text-display); }
.op-toggle__opt input:focus-visible+label{ outline:2px solid var(--accent); outline-offset:2px; }
.captura-form>.btn{ width:100%; }
.captura-form__nota{ font-size:var(--fs-small); color:var(--text-muted); text-align:center; }
.captura-pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:1.6rem; }
.captura-paso{ text-align:center; }
.captura-paso__num{ width:36px; height:36px; margin:0 auto .7rem; border-radius:50%; background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); display:grid; place-items:center; font-weight:700; }
.captura-paso h3{ font-size:clamp(1.15rem,calc(1.05rem + .2vw),1.3rem); margin-bottom:.3rem; }
.captura-paso p{ font-size:var(--fs-card); color:var(--ink-soft); }
.captura-cierre{ text-align:center; max-width:56ch; margin:0 auto; color:var(--ink-soft); }
.captura-alt__texto{ font-weight:600; margin-bottom:1rem; }
@media (max-width:760px){
  .op-toggle{ grid-template-columns:1fr; }
  .captura-pasos{ grid-template-columns:1fr; }
}
@media (max-width:340px){
  /* El lienzo web recortado gana presencia sin deformarse: en la cabecera más estrecha,
     12px laterales y 12px de gap dejan caber el lockup natural junto al CTA. */
  .captura-nav__inner{ gap:.75rem; padding-left:.75rem; padding-right:.75rem; }
}

/* ════════ menos movimiento: quieto y legible ════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .js [data-r],.js [data-rs]>*{ opacity:1 !important; transform:none !important; }
}