/* ─────────────────────────── reset ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─────────────────────────── movimiento ───────────────────────────
   Estas duraciones ya existían de hecho, repetidas a mano en cada regla; acá quedan
   declaradas como sistema. No van en tokens.css.jinja porque ese archivo se GENERA desde
   brand.yaml y no se edita a mano.

   Criterio (NN/g, "Executing UX Animations"): 100 ms alcanza para feedback simple, 200-300 ms
   para cambios sustanciales, y arriba de 500 ms se percibe como lentitud del sitio, no como
   diseño. `ease-out` para lo que entra (arranca rápido y frena: se siente responsivo),
   `ease-in` para lo que sale. Nunca `linear`, que se lee antinatural.

   Deliberadamente NO hay tokens de animación de scroll: no se usan animaciones de entrada por
   scroll en este sitio. Ver la investigación en el plan — la evidencia de NN/g es que en
   usuarios orientados a tarea (comprar o vender una casa lo es) se perciben como demora, y no
   existe ningún A/B público que muestre que mejoren la conversión. */
:root {
  --dur-micro: 0.15s;   /* color, background, opacidad */
  --dur-lift: 0.18s;    /* elevación de tarjetas */
  --dur-panel: 0.22s;   /* aparición de paneles: menú mobile, lightbox */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

/* Texto que se saca de la vista pero SIGUE existiendo para lectores de pantalla. No usar
   `display:none` ni `visibility:hidden` para esto: esos lo sacan también del árbol de
   accesibilidad, que es justo lo contrario de lo que se busca. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────── base ─────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-navy);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { max-width: 62ch; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: clamp(48px, 6vw, 88px);
}

.section--navy { background: var(--c-navy); color: var(--on-navy-text); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--on-navy-text); }
.section--navy .eyebrow { color: var(--on-navy-text-subtle); }

.section--alt { background: var(--c-bg-alt); }

.grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.stack { display: flex; flex-direction: column; gap: 16px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.text-center { text-align: center; }
.muted { color: var(--c-muted); }

/* ─────────────────────────── botones ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

/* Sombra propia y no `--shadow-card`: ese token es navy al 10% y sobre el hero navy se
   volvía invisible, así que el botón se sentía pegado al fondo. En negro sí se lee sobre
   cualquier fondo. La sombra crece en hover (acompañando el translateY que ya existía en
   .btn, que solo no alcanzaba a leerse como elevación) y se hunde en active, para que el
   botón se sienta presionable. */
.btn--gold {
  background: var(--c-gold);
  color: var(--on-gold-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.btn--gold:hover {
  background: var(--c-gold-dark);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
}
.btn--gold:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}

.btn--outline-navy {
  background: transparent;
  border-color: var(--c-navy);
  color: var(--c-navy);
}
.btn--outline-navy:hover { background: var(--c-navy); color: var(--on-navy-text); }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: var(--on-navy-text);
}
.btn--outline-light:hover { background: rgba(255,255,255,0.12); }

/* focus visible en todo elemento interactivo */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

.container-wide-scroll {
  overflow-x: auto;
}

@media (prefers-color-scheme: dark) {
  /* El sitio compromete un único mundo visual (navy/crema, marca real) —
     no ofrece modo oscuro alternativo; se mantiene legible igual. */
}