/* ═══ tokens.css ═══ */
/* ============================================================
   GRUPO SUCA — sistema de tokens
   Fuente única de verdad para color, tipografía y ritmo.
   Los contrastes anotados están medidos, no estimados.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  /* El .ai renderiza a #143490; la diferencia con #163793 es la
     conversión CMYK→RGB del PDF. Se usa el valor de marca declarado. */
  --cobalto:        #163793;  /* azul de marca — header, enlaces, campos medios */
  --cobalto-hondo:  #102A70;  /* campos a pantalla completa: aguanta mejor el texto */
  --cobalto-claro:  #7C9BEC;  /* único azul legible SOBRE fondo oscuro */

  --hueso:          #FAF8F5;  /* blanco cálido — fondo por defecto */
  --hueso-tenue:    #E8E4DE;  /* texto secundario sobre azul */
  --cal:            #F0ECE6;  /* bandas alternas */
  --tinta:          #111418;  /* casi negro — texto sobre fondos claros */
  --piedra:         #6E655B;  /* gris cálido — texto secundario sobre claro */
  --laton:          #A8916B;  /* el único acento cálido — SOLO relleno, nunca texto */
  --laton-hover:    #9C8763;
  --laton-press:    #96805C;
  --linea:          #DED7CC;  /* filetes sobre claro. NUNCA texto. */
  --linea-honda:    #9F958A;  /* la cornisa sobre fondo claro: 2.77:1 en hueso */
  --linea-azul:     rgba(250, 248, 245, 0.28); /* filetes sobre azul */

  /* CONTRASTES MEDIDOS — no improvisar sobre esto
     blanco / cobalto ......... 10.49  AA
     blanco / cobalto-hondo ... 13.23  AA
     hueso-tenue / cobalto ..... 8.28  AA
     tinta / hueso ............ 17.42  AA
     piedra / hueso ............ 5.39  AA
     tinta / laton ............. 6.09  AA   ← el botón latón lleva texto tinta
     cobalto-claro / tinta ..... 6.82  AA
     ---------------------------------------------------------
     PROHIBIDOS:
     cobalto / tinta ........... 1.76  FALLA
     laton / cobalto ........... 3.46  falla texto normal
     blanco / laton ............ 3.03  FALLA  ← nunca texto blanco en el botón
     linea / hueso ............. 1.35  solo filetes                              */

  /* ---------- Tipografía ---------- */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fraunces: WONK en 0 y SOFT bajo. El carácter caro está en el
     tamaño óptico alto, no en el eje wonk (que se lee artesanal). */
  --fraunces-display: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  --fraunces-texto:   'opsz' 24,  'SOFT' 0, 'WONK' 0;
  /* Sobre fondo OSCURO, el mismo tipo necesita otro ajuste.
     Fraunces es un serif de alto contraste: a 'opsz' 144 sus trazos
     finos son casi capilares. En negro sobre claro eso se lee
     elegante, pero en claro sobre oscuro los finos desaparecen —
     el antialiasing no tiene con qué sostenerlos y la palabra se
     "rompe". Es lo que pasaba en "4.º Anillo Centenario".
     Bajar el tamaño óptico ENGROSA los finos, y +50 de peso
     compensa el resto. No es otra fuente: es la misma, ajustada
     al fondo sobre el que cae. */
  --fraunces-oscuro:  'opsz' 40, 'SOFT' 0, 'WONK' 0, 'wght' 450;

  /* Escala display */
  --d1: clamp(2.75rem, 1.2rem + 6.6vw, 5.75rem);
  --d2: clamp(2rem, 1.1rem + 3.8vw, 3.5rem);
  --d3: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);

  /* Escala de cuerpo / UI */
  --lead:    clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --body:    clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --small:   0.9375rem;

  /* La versalita espaciada de las etiquetas chicas: coordenadas,
     epígrafes, rótulos bajo los números. Estaba escrita como `11px`
     en 36 reglas de 14 hojas — una sola decisión de diseño repetida
     36 veces, imposible de cambiar sin buscar y reemplazar. En el
     teléfono sube a 12 px: 11 px queda por debajo del mínimo que
     recomiendan tanto Apple (11 pt) como Material (12 sp), y quien
     compra una casa para la familia no suele tener veinte años. */
  --micro:   11px;
  --ui:      0.9375rem;
  --eyebrow: 0.75rem;

  --track-eyebrow: 0.14em;
  --track-nav:     0.10em;
  --track-d1:      -0.02em;

  /* ---------- Ritmo ---------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px; --s11: 176px; --s12: 240px;

  --ancho-max: 1360px;
  --gutter: 32px;

  /* ---------- Geometría ---------- */
  /* Radio 0 en todo. Las dos únicas excepciones del sitio son
     el logo (que ya es una píldora en su variante badge) y el CTA
     principal — que así rima con la marca en vez de contradecirla. */
  --radio: 0;
  --radio-pildora: 999px;

  /* El header NUNCA cambia de altura. Un header que se encoge al
     hacer scroll es el cliché más reconocible de la categoría. */
  --header-h: 88px;
  --pad-x: 64px;
  --cartela-h: 56px;
  --tap: 44px;

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Curva de cruce: la interpolación lineal entre los dos pares
     fondo/tinta queda bajo 3:1 durante el 54% de la transición.
     Esta curva de centro empinado lo baja al 14% ≈ 26ms. */
  --flip-ease: cubic-bezier(0.85, 0, 0.15, 1);
  --flip-dur: 180ms;
  --dur: 300ms;
}

@media (max-width: 1159px) {
  :root { --header-h: 80px; --pad-x: 32px; --gutter: 24px; }
}
@media (max-width: 767px) {
  :root { --pad-x: 24px; }
}
@media (max-width: 559px) {
  :root { --header-h: 72px; --pad-x: 16px; --gutter: 20px; --cartela-h: 54px; }
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: var(--fraunces-display);
  font-weight: 400;
  margin: 0;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* `display: block` en svg le gana al `[hidden] { display: none }` del
   navegador, así que un ícono con el atributo `hidden` se seguía
   viendo. Esta regla restituye el comportamiento esperado en todo
   el sitio. */
[hidden] { display: none !important; }

a { color: inherit; }

button { font: inherit; color: inherit; }

/* Foco visible en todo lo interactivo. Nunca outline:none. */
:focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 3px;
  border-radius: 1px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}



/* ---- Display sobre fondos oscuros ---------------------------
   Una sola regla para todas las bandas oscuras del sitio, en vez
   de repetir el ajuste sección por sección. */
.hero__titulo,
.grupo__titulo, .unidad__nombre,
.cifra__valor,
.proximos .placa__nombre,
.entrega__titulo,
.financiamiento__titulo,
.ciudad__titulo,
.pr-hero__titulo, .pr-cierre__titulo,
.directo h2,
.panel__nav a {
  font-variation-settings: var(--fraunces-oscuro);
}
/* Las cifras conservan su peso fino: son números grandes y
   aislados, no palabras, así que los finos no se pierden igual. */
.cifra__valor { font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0, 'wght' 360; }


/* ---- Chevrón de los desplegables ----------------------------
   Lo usan las preguntas frecuentes y el registro de proyectos, en
   páginas distintas. Vivía en faq.css, así que en Proyectos —que no
   carga esa hoja— el SVG quedaba sin tamaño ni `fill:none`: se
   expandía a 800px y se pintaba negro. Tercera vez que pasa lo
   mismo, así que acá se queda. */
.faq__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--piedra);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms var(--ease), stroke 160ms linear;
}
[open] > summary .faq__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .faq__chevron { transition: stroke 160ms linear; }
}

/* ---- Marcadores de contenido pendiente ----------------------
   Convención de todo el sitio, así que viven acá y no en la hoja
   de una sección: `.muestra` marca contenido inventado que hay que
   reemplazar, `.pendiente` marca un dato que falta.

   Estaban en testimonios.css y nosotros.css respectivamente, y en
   las páginas que no cargan esas hojas se renderizaban como texto
   corrido — en Proyectos el eyebrow salía "LA ÚLTIMA
   ENTREGAREQUIERE PERMISO".

   Los dos se borran del HTML cuando llega el contenido real. */
.muestra {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: var(--radio-pildora);
  background: var(--laton);
  color: var(--tinta);          /* 6.09:1 */
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}
.pendiente {
  background: color-mix(in srgb, var(--laton) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--laton) 22%, transparent);
  border-radius: 2px;
  /* Medido: --piedra sobre este lavado de latón da 3,90:1 y no llega
     a AA. Como estas notas son justo lo que hay que poder leer para
     completarlas, el texto va en tinta: 13,06:1 en el peor caso
     (sobre cal) y 14,23:1 sobre hueso. */
  color: var(--tinta);
}

/* Campos: filete inferior, sin caja. Coherente con el sistema. */
.campo { display: grid; gap: 8px; }
.campo label {
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}
.campo input,
.campo textarea {
  width: 100%;
  min-height: var(--tap);      /* 41px con solo el relleno: faltaban 3 */
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  background: none;
  font-family: var(--sans);
  font-size: var(--body);
  color: var(--tinta);
  transition: border-color 160ms linear;
}
.campo textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.campo input::placeholder,
.campo textarea::placeholder { color: color-mix(in srgb, var(--piedra) 60%, transparent); }
.campo input:focus,
.campo textarea:focus { outline: none; border-bottom-color: var(--cobalto); }
.campo input:focus-visible,
.campo textarea:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 4px; }

/* ---- Botones ------------------------------------------------
   Viven acá y no en la hoja de una página porque los usan cinco
   secciones distintas en cuatro páginas. Estaban en proyectos.css
   y el inicio, que no carga esa hoja, los mostraba sin estilo. */
.btn-linea,
.btn-solido {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 22px;
  border-radius: var(--radio-pildora);
  text-decoration: none;
  font-family: var(--sans);
  font-size: var(--small);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn-linea {
  border: 1px solid var(--linea);
  background: none;
  color: var(--tinta);
  transition: border-color 160ms linear, background-color 160ms linear;
}
.btn-linea:hover { border-color: var(--tinta); background: var(--cal); }

.btn-solido {
  border: 1px solid var(--cobalto);
  background: var(--cobalto);
  color: var(--hueso);          /* 10.49:1 */
  transition: background-color 160ms linear, border-color 160ms linear;
}
.btn-solido:hover { background: var(--cobalto-hondo); border-color: var(--cobalto-hondo); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Movimiento reducido significa MÁS SUAVE, no CERO.
   Antes esto también apagaba `transition-duration` en todo, con lo
   cual se perdían los fundidos de opacidad y las transiciones de
   color de campos y enlaces — que no marean a nadie y son la única
   señal de que algo respondió al toque. Ahora se apagan solo las
   animaciones (que acá siempre llevan desplazamiento) y cada regla
   que mueve algo por transición tiene su propio apagado explícito:
   motion.css, visor.css, header.css, landing.css, proyectos.css,
   testimonios.css, faq.css y las dos de abajo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Los dos desplazamientos por transición que no tenían regla propia. */
  .contacto__link { transition: background-color 160ms linear; }
  .contacto__link:hover { transform: none; }
}

/* ============================================================
   BOTONES EN PANTALLAS MUY ANGOSTAS

   `.btn-solido` lleva `white-space: nowrap`, que es lo correcto casi
   siempre: un botón partido en dos líneas por accidente se ve roto.
   Pero a 320 px el botón de cierre dice «Calle 8, Centenario · desde
   USD 160.000» y en una línea mide 312 px dentro de un contenedor de
   280. Como es ítem de una rejilla y su `min-width` es `auto`, no
   podía encogerse: estiraba la columna entera y con ella la página,
   que quedaba con 12 px de arrastre lateral. Estaba así en vivo; no
   se veía porque el auditor arrancaba en 375 px.

   Debajo de 400 px el texto envuelve y se centra. Un botón de dos
   líneas es feo; una página que se corre de costado al tocarla es
   peor, y encima parece un error de la empresa, no del navegador.

   Al final del archivo a propósito: con igual especificidad gana la
   última regla.
   ============================================================ */
@media (max-width: 400px) {
  .btn-solido,
  .btn-linea {
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding-block: 10px;
    line-height: 1.35;
  }
}

/* En pantallas de mano la versalita chica sube un punto. Es el único
   cambio de tipografía por ancho del sitio y va en una variable, así
   que revertirlo es una línea. */
@media (max-width: 600px) {
  :root { --micro: 12px; }
}

/* ═══ header.css ═══ */
/* ============================================================
   HEADER — "Cornisa y Cartela"

   Dos objetos y nada más:

   1. LA CORNISA — un filete de 1px cuyo único trabajo es decirte
      sobre qué suelo estás parado. El header no se encoge, no se
      esconde, no gana sombra, no achica el logo. Solo se vuelve
      del color de la sección que pasa por debajo.
      Un header barato anuncia el cambio moviéndose; este lo
      anuncia habiendo sido ya del color correcto.

   2. LA CARTELA — una placa opaca de --cobalto-hondo pegada al
      extremo derecho, con las dos formas de contactar a la familia.
      Como está rellena con el MISMO token que el campo del hero,
      es ópticamente invisible en la portada y aparece como placa
      solo cuando una sección clara pasa por debajo.
      Eso mantiene al latón fuera de cobalto (3.46:1) y fuera de
      hueso (2.86:1) para siempre: el bronce vive sobre #102A70,
      4.36:1 de borde y 6.09:1 de etiqueta, en todo scroll y toda
      página, permanentemente fuera de la máquina de estados.
   ============================================================ */

/* ---- Tokens de estado. Los cambia el IntersectionObserver ---- */
.hdr[data-tinta="clara"] {
  --h-ink:    rgba(250, 248, 245, 0.86);
  --h-ink-hi: #FAF8F5;
  --h-rule:   rgba(250, 248, 245, 0.28);
  --h-logo:   #FAF8F5;   /* 12.48:1 sobre #102A70 */
  --h-foco:   #FAF8F5;
}
/* ---- Sobre fotografía --------------------------------------
   La barra desaparece y deja pasar la imagen. No hay cornisa: un
   filete sobre una foto se lee como un corte.

   La navegación completa se mantiene SIEMPRE visible, en todo
   estado y en todo scroll.

   Lo único que cambia es la cartela: su placa azul se vuelve
   transparente, porque sobre una fotografía se leía como un
   recuadro pegado. El botón de bronce y WhatsApp siguen ahí,
   flotando directamente sobre la imagen.
   ------------------------------------------------------------ */
.hdr[data-tinta="foto"] {
  --h-ink:    rgba(250, 248, 245, 0.92);
  --h-ink-hi: #FAF8F5;
  --h-rule:   transparent;
  --h-logo:   #FAF8F5;
  --h-foco:   #FAF8F5;
}

.hdr[data-tinta="oscura"] {
  --h-ink:    #6E655B;   /* 5.39:1 sobre hueso */
  --h-ink-hi: #111418;   /* 17.42:1 */
  --h-rule:   #9F958A;   /* 2.77:1 — un filete, no texto */
  --h-logo:   #163793;   /* 9.90:1 sobre hueso */
  --h-foco:   #111418;
}

/* ============================================================
   Barra
   ============================================================ */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  background: var(--h-fill, #102A70);
  color: var(--h-ink);
  border: 0;
  box-shadow: none;          /* no hay sombra en ningún estado */
  transition: background-color var(--flip-dur) var(--flip-ease),
              color var(--flip-dur) var(--flip-ease);
}

/* La cornisa. Hijo absoluto de 1px, no border-bottom: así ocupa
   una fila de píxeles determinista y el indicador de nav puede
   aterrizar exactamente encima a cualquier densidad. */
.hdr::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--h-rule);
  transition: background-color var(--flip-dur) var(--flip-ease);
}

.hdr__inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline: var(--pad-x);
}

/* ---- Logo ------------------------------------------------- */
/* Una sola geometría en dos tintas: SVG inline con fill:currentColor.
   No hay dos <img> apilados, ni crossfade, ni destello de la variante
   equivocada en conexión lenta, ni desajuste de hidratación. El cambio
   de color del logo viaja automáticamente en la misma curva de 180ms
   que la tinta y el filete.
   (Se probó mask-image con PNG: Chromium la bloquea bajo file://.
   El SVG inline además no hace ningún fetch.) */
.hdr__logo {
  display: flex;
  align-items: center;
  flex: none;                         /* jamás se encoge: era el bug que */
  color: var(--h-logo);               /* aplastaba el logo de 113 a 56px */
  text-decoration: none;
  transition: color var(--flip-dur) var(--flip-ease);
  padding-block: 9px;                 /* 26 + 9 + 9 = 44px de área táctil */
  margin-right: 24px;                 /* piso de separación con el nav */
}
.hdr__marca { display: block; flex: none; }
/* ≥1280px: lockup horizontal. Ratio medido del vector: 7.921:1
   ⇒ 26px de alto = 206px de ancho. */
.hdr__marca--h { width: 206px; height: 26px; }
/* Ratio medido del apilado: 3.151:1 */
.hdr__marca--v { display: none; width: 113px; height: 36px; }

/* ---- Navegación ------------------------------------------- */
/* margin-left:auto empuja la nav a la derecha, pero el padding-left
   garantiza un hueco mínimo con el logo aunque el aire llegue a cero. */
/* Patrón de "tab navbar": los enlaces viven dentro de una píldora,
   no sueltos sobre la barra. Adaptado a la paleta de marca — el
   verde que había acá no existe en la identidad de Grupo Suca.

   Esto amplía la regla de radios: la píldora ya no está reservada
   solo al logo y al CTA, ahora también contiene la navegación.
   Sigue siendo el MISMO gesto repetido tres veces, no tres formas
   distintas — que es lo que la haría desprolija.

   El relleno se declara con `color-mix` sobre la tinta actual del
   header, así la píldora se adapta sola a los tres estados (azul,
   claro, sobre foto) sin escribir tres reglas. */
.hdr__nav {
  margin-left: auto;
  padding: 6px 10px;
  flex: none;              /* nunca se comprime: comprimir recortaba enlaces */
  background: color-mix(in srgb, var(--h-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--h-ink) 18%, transparent);
  border-radius: var(--radio-pildora);
  transition: background-color var(--flip-dur) var(--flip-ease),
              border-color var(--flip-dur) var(--flip-ease);
}
.hdr__nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0; padding: 0;
  list-style: none;
  white-space: nowrap;
}
.hdr__nav li {
  position: relative;
  display: flex;
  align-items: center;
}
.hdr__nav a {
  display: flex;
  align-items: center;
  height: var(--tap);
  color: var(--h-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;          /* no 11-12px: el público incluye avales de 50-65 años */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  white-space: nowrap;
  transition: color var(--dur-rapido, 160ms) linear;
  padding: 0 6px;
  border-radius: 999px;
}
.hdr__nav a:hover {
  color: var(--h-ink-hi);
  background: color-mix(in srgb, var(--h-ink) 14%, transparent);
}

.hdr__nav a[aria-current="page"] {
  color: var(--h-ink-hi);
  background: color-mix(in srgb, var(--h-ink) 20%, transparent);
}

/* ---- Filete vertical: rima con el que ya vive dentro del logo -- */
.hdr__vrule {
  width: 1px;
  align-self: stretch;
  margin-inline: 24px;
  background: var(--h-rule);
  transition: background-color var(--flip-dur) var(--flip-ease);
}

/* ---- Grupo de acciones --------------------------------------
   Antes era una placa opaca de cobalto, cuya razón de ser era
   mantener el latón sobre un fondo con contraste suficiente. Al
   salir el botón de WhatsApp y volverse blanco el CTA, esa
   restricción desapareció: ahora es solo un contenedor. */
.cartela {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  background: none;
  border-radius: 0;
}

.wa {
  height: var(--tap);
  min-width: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 16px;
  border: 1px solid rgba(250, 248, 245, 0.45);   /* 3.70:1 */
  border-radius: 0;
  color: var(--hueso);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 160ms linear, background-color 160ms linear;
}
.wa:hover { border-color: var(--hueso); background: rgba(250, 248, 245, 0.08); }
.wa svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* El CTA pasa a blanco. Sobre el hero y las bandas azules el
   contraste lo da el propio fondo; sobre fondos claros haría
   falta un borde, así que lleva uno derivado de la tinta actual
   del header y sirve en los tres estados con una sola regla. */
.cta {
  height: var(--tap);
  padding-inline: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--h-ink, #111418) 26%, transparent);
  border-radius: var(--radio-pildora);
  background: var(--hueso);
  color: var(--tinta);          /* 17.42:1 */
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color 160ms linear, border-color 160ms linear;
}
.cta:hover  { background: #FFFFFF; border-color: color-mix(in srgb, var(--h-ink, #111418) 45%, transparent); }
.cta:active { background: var(--cal); }

/* ---- Botón MENÚ: una palabra, no un ícono ------------------- */
/* Ancho fijo, así el cambio MENÚ ⇄ CERRAR no provoca ni un pixel
   de reflujo. "Hamburguesa" es ambiguo; MENÚ no lo es en es-BO. */
.menu-btn {
  display: none;
  width: 72px;
  height: var(--tap);
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 0;
  /* Sigue la tinta del header. Estaba fijo en --hueso, así que sobre
     un header claro daba blanco sobre crema: 1.17:1, invisible.
     El borde ya se derivaba de --h-ink; el texto no. */
  color: var(--h-ink-hi);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---- Enlace de salto --------------------------------------- */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinta);
  color: var(--hueso);
  padding: 12px 20px;
  text-decoration: none;
  font-size: 14px;
}
.saltar:focus { left: 8px; top: 8px; }

/* ============================================================
   1024 – 1279 px · el lockup horizontal ya no entra con aire
   ============================================================ */
@media (max-width: 1279px) {
  /* Piso duro: el lockup horizontal NUNCA se renderiza bajo 26px.
     Si no entra a 26px, la respuesta es la variante apilada —
     nunca un lockup horizontal más chico. Por eso el apilado toma
     el relevo en 1280 y no en 768: a 1024 la barra tiene que cargar
     logo + 5 enlaces + WhatsApp + el botón de bronce, y un lockup
     horizontal de 206px deja aire cero. */
  .hdr__marca--h { display: none; }
  .hdr__marca--v { display: block; }
  .hdr__logo { padding-block: 4px; }   /* 36 + 4 + 4 = 44px */
  .hdr__nav ul { gap: 20px; }
  .hdr__nav a { font-size: 12px; }
  .hdr__nav { padding-left: 32px; }
  :root { --pad-x: 48px; }
}

/* ============================================================
   ≤ 1159 px · la nav en línea se retira al panel

   El corte NO está en 1024. Medido: a 1024 la demanda fija es
   logo 113 + nav 485 + filete 49 + cartela 307 = 954px contra
   896px disponibles. No entra, y forzarla dejaría ~10px de aire,
   que se lee apretado. Una barra que depende de que el cliente
   nunca renombre "Cómo Comprar" no sobrevive diez años.
   ============================================================ */
/* El nav se mantiene visible en escritorio Y tablet. Solo se
   retira al panel en celular. */
@media (max-width: 1159px) {
  .hdr__vrule { display: none; }
}

/* 768–1023: el nav completo entra, pero solo si cede tipografía y
   aire. Se prefiere achicar antes que esconder enlaces. */
@media (max-width: 1023px) {
  :root { --pad-x: 24px; }
  .hdr__logo { margin-right: 16px; }
  .hdr__nav { padding: 5px 6px; }
  .hdr__nav ul { gap: 4px; }
  .hdr__nav a {
    font-size: var(--micro);
    letter-spacing: 0.05em;
    padding: 0 8px;
  }
  .cartela { margin-left: 12px; }
  .cta { padding-inline: 16px; font-size: 13px; }
}
@media (max-width: 767px) {
  .hdr__nav { display: none; }
  .cartela { margin-left: auto; }
  .menu-btn { display: inline-flex; }
}

/* 768–1023: hay superávit real en la barra. Un teléfono tocable
   es lo más útil que puede ocuparlo. */
.hdr__tel {
  display: none;
  align-items: center;
  height: var(--tap);
  margin-left: 24px;
  color: var(--h-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: color 160ms linear;
}
.hdr__tel:hover { color: var(--h-ink-hi); }
@media (min-width: 768px) and (max-width: 1159px) {
  .hdr__tel { display: inline-flex; }
}

/* ============================================================
   ≤ 559 px
   ============================================================ */
@media (max-width: 559px) {
  .hdr__marca--v { width: 101px; height: 32px; }
  .hdr__logo { padding-block: 6px; }   /* 32 + 6 + 6 = 44px */
  .cartela { gap: 6px; padding-inline: 8px; }
  /* El CTA de bronce NO va en la barra en teléfono, y es deliberado:
     en un celular en Santa Cruz la acción que convierte es un
     mensaje, no una cita de sábado. WhatsApp se queda con el lugar
     permanente; "Agendar visita" es lo primero dentro del panel. */
  .cartela .cta { display: none; }
  .wa { padding-inline: 0; width: var(--tap); }
  .wa span { display: none; }
  .wa svg { width: 20px; height: 20px; }
}

/* ============================================================
   Panel — el mismo nav, en vertical

   No es otro componente: es la píldora del nav puesta de pie.
   Mismo relleno derivado de `--h-ink`, mismo borde, mismas
   versalitas espaciadas, misma marca de página actual. Lo único
   que cambia es el eje.

   Dentro del panel la tinta es siempre clara (el suelo es azul
   profundo y no cambia), así que `--h-ink` se fija acá y las
   mismas fórmulas de `color-mix` siguen valiendo.
   ============================================================ */
.panel {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  bottom: 0;
  z-index: 55;
  overflow: hidden;
  pointer-events: none;
}
.panel[hidden] { display: none; }

.panel__hoja {
  --h-ink: rgba(250, 248, 245, 0.86);
  --h-ink-hi: #FAF8F5;
  background: var(--cobalto-hondo);
  color: var(--hueso);
  padding: 16px var(--pad-x) 32px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease);
}
.panel.is-open .panel__hoja { transform: translateY(0); }

.panel .cta {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-bottom: 16px;
}

/* La píldora vertical: mismo relleno, mismo borde, mismo radio
   que la del escritorio. */
.panel__nav {
  padding: 6px;
  background: color-mix(in srgb, var(--h-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--h-ink) 18%, transparent);
  border-radius: 26px;
}
.panel__nav ul { margin: 0; padding: 0; list-style: none; }

.panel__nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: 16px;
  border-radius: 999px;
  color: var(--h-ink);
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--track-nav);
  transition: color 160ms linear, background-color 160ms linear;
}
.panel__nav a:hover { color: var(--h-ink-hi); background: color-mix(in srgb, var(--h-ink) 14%, transparent); }
.panel__nav a[aria-current="page"] {
  color: var(--h-ink-hi);
  background: color-mix(in srgb, var(--h-ink) 20%, transparent);
}

.panel__pie {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--h-ink) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.panel__pie a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: rgba(250, 248, 245, 0.86);
  text-decoration: none;
  font-size: 14px;
}
.panel__pie a:hover { color: var(--hueso); }
.panel :focus-visible { outline-color: var(--hueso); }

@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr::after, .hdr__logo, .hdr__vrule,
  .hdr__nav li::after, .panel__hoja { transition: none; }
}

/* ============================================================
   Vidrio tintado en la barra móvil

   Medido: recorriendo el hero en celular, el promedio detrás del
   botón MENÚ está bien (6–11:1) pero los PEORES píxeles caen a
   1.06:1 — una ventana encendida pasa justo detrás del texto y la
   palabra desaparece. El problema no es falta de contraste: es
   contraste variable.

   Un velo blanco translúcido, que es lo habitual en este efecto,
   aquí lo empeora: blanco al 20 % detrás de texto blanco da 1.00:1.
   Se necesita un tinte OSCURO.

   Cálculo: con --cobalto-hondo al 65 % de opacidad, texto blanco
   llega a 4.58:1 incluso sobre un píxel blanco puro, y a 16.55:1
   sobre uno negro. Se usa 68 % por margen. Sigue viéndose la
   fotografía detrás — el efecto se conserva y además cumple.

   Sobre el veto a la glassmorfosis del documento de estándares:
   ese veto apunta a tarjetas frosted decorativas. Esto es un velo
   funcional en una barra fija sobre contenido impredecible, que es
   exactamente para lo que iOS y macOS lo usan en su propia UI.
   ============================================================ */
@media (max-width: 767px) {
  /* Va en un pseudo-elemento y no en `background` porque el JS
     escribe --h-fill como estilo inline, y el inline gana. */
  .hdr[data-tinta="foto"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--cobalto-hondo) 68%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
    border-bottom: 1px solid rgba(250, 248, 245, 0.16);
  }
  .hdr__inner { position: relative; z-index: 1; }
}

/* El botón MENÚ como píldora de vidrio. Hasta ahora era una palabra
   suelta, sin ninguna señal de que fuera pulsable; el borde le da
   forma de control. El relleno se deriva de --h-ink, así sirve en
   los tres estados con una sola regla. */
.menu-btn {
  border-radius: var(--radio-pildora);
  border: 1px solid color-mix(in srgb, var(--h-ink) 32%, transparent);
  background: color-mix(in srgb, var(--h-ink) 12%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 160ms linear, border-color 160ms linear;
}
.menu-btn:hover {
  background: color-mix(in srgb, var(--h-ink) 20%, transparent);
  border-color: color-mix(in srgb, var(--h-ink) 55%, transparent);
}

/* ═══ hero.css ═══ */
/* ============================================================
   HERO — una sola pieza

   La fotografía ES el hero: ocupa el alto completo de la ventana
   y el texto vive encima. El header se vuelve transparente sobre
   ella, así que nada corta la imagen.

   LEGIBILIDAD — medida, no estimada.
   Luminancia real del recorte 1440x900, por bandas:
     banda 0-2 (el cielo)  L 0.18-0.23  →  blanco 3.7-4.6:1  ✗
     banda 3-7 (la ciudad) L 0.07-0.13  →  blanco 6.0-8.9:1  ✓
   Por eso el bloque de texto vive en la mitad inferior, donde el
   contraste ya está ganado por la propia foto, y el velo solo
   asegura el resto. Es una decisión de composición tomada desde
   la medición, no un centrado por costumbre.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;      /* el texto baja a la zona oscura */
  overflow: hidden;
  background: var(--cobalto-hondo); /* color de respaldo mientras carga */
  color: var(--hueso);
}

/* ---- Fondo ---- */
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;    /* torres + estela, no el cielo vacío */
}

/* El velo. Tintado con el azul de marca, no negro: hunde la foto
   HACIA la marca en vez de agrisarla. Medido: al 28% el cielo pasa
   de 3.73:1 a 4.9:1 y la ciudad se mantiene sobre 8:1.
   Es un velo fotográfico funcional, no decoración de color. */
.hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 29, 56, 0.28);
}
/* Refuerzo arriba para que el logo y la navegación se despeguen del
   cielo, y abajo bajo el bloque de texto.

   Recalibrado al cambiar la fotografía. La anterior era una toma de
   hora azul —ya oscura de por sí— y con este velo el titular medía
   10,1:1. La de Av. Roca y Coronado es de mediodía, con cielo abierto
   y la fachada BLANCA justo donde cae el titular: medido, 3,52:1. Pasa
   AA por ser texto grande (mínimo 3:1), pero de raspón, y la Fraunces
   pierde los trazos finos sobre estuco iluminado.

   El refuerzo de abajo sube de 0,60/58% a 0,74/68%: cubre el ancho de
   la banda de texto sin apagar la casa, que queda limpia arriba. Se
   evita a propósito subir el velo plano —eso agrisaría la foto entera,
   que es exactamente lo que la hace valiosa. */
.hero__fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(13,29,56,0.55) 0%, rgba(13,29,56,0) 22%),
    linear-gradient(to top,
      rgba(13,29,56,0.80) 0%,
      rgba(13,29,56,0.74) 26%,
      rgba(13,29,56,0.34) 52%,
      rgba(13,29,56,0) 72%);
}

/* ---- Contenido ---- */
.hero__contenido {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(56px, 7vw, 96px);
  padding-top: var(--header-h);
}

.hero__texto {
  text-align: center;             /* check-bans-ignore: el hero SÍ va centrado
                                     (referencia Meritage). El resto del sitio
                                     mantiene composición asimétrica. */
}

.hero__eyebrow {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.86);
}

.hero__titulo {
  margin: 0 auto;
  max-width: 19ch;
  font-size: clamp(2.5rem, 1rem + 5.4vw, 4.75rem);
  line-height: 1.06;
  letter-spacing: var(--track-d1);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 400;
  text-wrap: balance;
  color: var(--hueso);
}

.hero__filete {
  width: 1px;
  height: clamp(36px, 4vw, 56px);
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  background: linear-gradient(     /* check-bans-ignore: un filete que se
                                      desvanece, un solo tono */
    to bottom,
    rgba(250, 248, 245, 0.5),
    rgba(250, 248, 245, 0)
  );
}

/* Pie: honesto, esto es la ciudad, no una obra de Grupo Suca. */
.hero__pie {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 14px;
  border-top: 1px solid rgba(250, 248, 245, 0.22);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.78);
}
.hero__pie span:last-child { text-align: right; }

.contacto {
  padding-block: var(--s12);
  background: var(--hueso);
}
.contacto__intro {
  max-width: 46ch;
  margin-bottom: var(--s5);
}
.contacto__eyebrow {
  margin: 0 0 1rem;
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--piedra);
}
.contacto__titulo {
  margin: 0;
  font-size: clamp(2.25rem, 2.7vw, 3.75rem);
  line-height: 1.02;
}
.contacto__lineas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--s6);
}
.contacto__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  min-height: 56px;
  border-radius: var(--radio-pildora);
  background: var(--cal);
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 160ms var(--ease), background-color 160ms linear;
}
.contacto__link:hover {
  background: var(--linea);
  transform: translateY(-1px);
}

@media (max-width: 767px) {
  /* En vertical el 2.38:1 en `cover` deja una tirita inservible.
     Abajo de 768px entra un recorte 3:4 de la zona de torres. */
  .hero__fondo img { object-position: center; }
  .hero__pie { flex-direction: column; gap: 4px; }
  .hero__pie span:last-child { text-align: left; }
}

/* ═══ secciones.css ═══ */
/* ============================================================
   OBRA — la lámina de casas gemelas

   Después del hero (fotografía de ciudad, contexto) viene la
   primera imagen de PRODUCTO. El cambio importa: la portada
   dice dónde, esta dice qué.

   Va sobre cal, no sobre hueso, para que la lámina blanca de
   la fachada no se funda con el fondo de la página.
   ============================================================ */

.obra {
  background: var(--cal);
  color: var(--tinta);
  padding-block: clamp(64px, 8vw, 120px);
}

.obra__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 900px) {
  /* 7/5, nunca 6/6: una división en mitades exactas es la firma
     visual de una plantilla. */
  .obra__intro {
    grid-template-columns: 7fr 5fr;
    gap: clamp(32px, 5vw, 96px);
    align-items: end;
  }
}

.obra__eyebrow {
  margin: 0 0 var(--s4);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--piedra);
}

.obra__titulo {
  margin: 0;
  font-size: var(--d2);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 16ch;
}

.obra__texto {
  margin: 0;
  max-width: 46ch;
  color: var(--piedra);
  font-size: var(--lead);
  line-height: 1.6;
}

.obra__lamina { margin: 0; }
.obra__lamina img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2754 / 1536;   /* reserva el espacio: CLS = 0 */
}

.obra__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px var(--s5);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--piedra);
}

/* ============================================================
   CIFRAS

   Reestilizado según las referencias del cliente: números más
   BAJOS y más FINOS, con filetes verticales entre columnas, y en
   teléfono apilados en tarjetas.

   Tres cambios concretos:
   · Tamaño máximo de 84px → 60px. Un número gigante compite con
     el titular de la sección; uno mediano informa.
   · Peso 400 → 300. Fraunces es variable, así que el trazo fino
     no es una fuente distinta: es el mismo tipo más liviano.
   · Filete vertical de altura completa entre columnas, no un
     borde de celda. Marca la columna sin dibujar una tabla.

   El estándar prohíbe "la fila de números gigantes con etiquetas
   vagas". La regla completa dice: solo si es real y tiene fuente.
   Estos salen de `mt2 construidos.xlsx` y llevan procedencia al
   pie. Al bajar el tamaño, además, dejan de ser un cartel.
   ============================================================ */

.cifras {
  background: var(--cobalto-hondo);
  color: var(--hueso);
  padding-block: clamp(64px, 8vw, 104px);
}

.cifras__eyebrow {
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-size: var(--eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.72);
}

.cifras__fila {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.cifra {
  position: relative;
  padding-inline: clamp(20px, 2.8vw, 44px);
}
/* Filete de altura completa, como en la referencia. */
.cifra::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(250, 248, 245, 0.22);
}
.cifra:first-child { padding-left: 0; }
.cifra:first-child::before { display: none; }

/* "Más de" arriba del número, como en la referencia. */
.cifra__prefijo {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(250, 248, 245, 0.62);
}

.cifra__valor {
  display: block;
  font-family: var(--serif);
  /* peso 300: el trazo fino que pide la referencia */
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0, 'wght' 300;
  font-weight: 300;
  font-size: clamp(2.5rem, 1.2rem + 2.9vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hueso);
  font-variant-numeric: lining-nums tabular-nums;
}
.cifra__unidad {
  font-family: var(--sans);
  font-size: 0.3em;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-left: 0.2em;
  color: rgba(250, 248, 245, 0.72);
}

.cifra__etiqueta {
  display: block;
  margin-top: clamp(14px, 1.6vw, 20px);
  max-width: 15ch;
  font-size: var(--small);
  line-height: 1.4;
  color: rgba(250, 248, 245, 0.78);
}

.cifras__fuente {
  margin: clamp(44px, 5.5vw, 72px) 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(250, 248, 245, 0.22);
  max-width: 78ch;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(250, 248, 245, 0.72);
}

@media (max-width: 899px) {
  .cifras__fila { grid-template-columns: 1fr 1fr; row-gap: clamp(32px, 4vw, 48px); }
  .cifras__fila .cifra:nth-child(odd) { padding-left: 0; }
  .cifras__fila .cifra:nth-child(odd)::before { display: none; }
}

/* En teléfono, apiladas en tarjetas — la referencia vertical. */
@media (max-width: 559px) {
  .cifras__fila { grid-template-columns: 1fr; row-gap: 12px; }
  .cifras__fila .cifra,
  .cifras__fila .cifra:nth-child(odd) {
    padding: 24px;
    border: 1px solid rgba(250, 248, 245, 0.22);
    border-radius: 18px;
    text-align: center;
  }
  .cifras__fila .cifra::before { display: none; }
  .cifra__etiqueta { max-width: none; margin-inline: auto; }
}

/* Los números grandes van más marcados que el resto del display:
   a este tamaño y aislados aguantan más peso sin engordar, y es lo
   que pidió el cliente. Sigue siendo Fraunces — solo cambia el eje
   de peso, así que no rompe la regla de dos familias. */
.cifra__valor {
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0, 'wght' 600;
  letter-spacing: -0.03em;
}