/* Sistema Tamiz — tokens del manual de marca v1.0 (tamiz-brand/identity/manual/) */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/marca/Fraunces-Black-opsz72.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

:root {
  /* paleta oficial — manual cap. 05 */
  --tinta: #121518;
  --papel: #FAF9F6;
  --crema: #F6EBDC;
  --senal: #F19434;   /* LA nota de color: <=10% de cualquier pieza */
  --hilo:  #D18235;
  --ruido: #98A1AB;

  /* el grano: unidad del sistema (manual cap. 04) */
  --grano: 0.75rem;

  --fuente-titulo: "Fraunces", Georgia, serif;
  --fuente-texto: "Segoe UI", system-ui, -apple-system, sans-serif;
  --ancho-max: 1080px;
}

* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 900; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: -0.01em; }

.seccion { max-width: var(--ancho-max); margin: 0 auto; padding: calc(var(--grano) * 7) calc(var(--grano) * 2); }
.oscura { background: var(--tinta); color: var(--papel); }

/* el tamiz vivo: canvas de fondo. Abre la página en el hero y la cierra en el CTA */
.hero, .cierre { position: relative; overflow: hidden; }
.tamiz-vivo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-contenido, .cierre-contenido { position: relative; z-index: 1; }

/* reveals al scrollear (el JS agrega .visible; sin JS — html sin .js — todo queda visible) */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
  html.js .reveal.visible { opacity: 1; transform: none; }
}
.reveal:nth-child(2) { transition-delay: .12s; }
.reveal:nth-child(3) { transition-delay: .24s; }
.reveal:nth-child(4) { transition-delay: .36s; }

.eyebrow {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #5A6069; margin-bottom: calc(var(--grano) * 2);
}
/* --ruido sobre papel da 2.4:1 y no pasa AA. Sobre tinta sí (8:1), así que el
   gris del manual queda para las secciones oscuras y el claro va más oscuro. */
.oscura .eyebrow { color: var(--ruido); }

/* foco visible en todo lo que se pueda tabular, también sobre fondo oscuro */
:focus-visible { outline: 3px solid var(--senal); outline-offset: 3px; border-radius: 4px; }

/* regla del acento único: en cada sección el ámbar aparece UNA vez */
.senal { color: var(--senal); }

/* botón primario en tinta: el ámbar de cada sección vive en el concepto, no en el chrome */
.boton {
  display: inline-block; background: var(--tinta); color: var(--papel);
  font-weight: 700; text-decoration: none; border-radius: 12px;
  padding: calc(var(--grano) * 1.2) calc(var(--grano) * 2.4);
}
.boton:hover { background: #2A2F38; }
.oscura .boton { background: var(--senal); color: var(--tinta); }
.oscura .boton:hover { background: var(--hilo); }
.boton-fantasma {
  display: inline-block; color: inherit; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--ruido); border-radius: 12px;
  padding: calc(var(--grano) * 1.2) calc(var(--grano) * 2.4);
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: calc(var(--grano) * 2); }
.kpi { border: 1px solid rgba(18,21,24,.14); border-radius: 16px; padding: calc(var(--grano) * 2.5); background: #fff; }
.oscura .kpi { background: rgba(250,249,246,.05); border-color: rgba(250,249,246,.16); }
.kpi .numero { font-family: var(--fuente-titulo); font-weight: 900; font-size: 2.1rem; }
.kpi .que { color: var(--ruido); font-size: 0.92rem; margin-top: calc(var(--grano) * 0.7); }

/* ---- cómo funciona: el hilo que se teje al scrollear ----
   los tres pasos son un ciclo; el hilo que los une se dibuja cuando cada paso
   entra. El movimiento dice lo que dice la sección: esto se encadena solo. */
.pasos { margin-top: calc(var(--grano) * 5); display: grid; gap: calc(var(--grano) * 4.5); }
.paso { position: relative; display: grid; grid-template-columns: 3.2ch 1fr; gap: calc(var(--grano) * 2.5); align-items: start; }
.paso .indice {
  font-family: var(--fuente-titulo); font-weight: 900; line-height: 1;
  font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--ruido); opacity: .5;
}
.paso h3 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
.paso p { margin-top: calc(var(--grano) * 0.8); max-width: 52ch; color: #3B424B; }
/* el hilo baja de cada paso al siguiente */
.paso::before {
  content: ""; position: absolute; left: calc(1.6ch - 1px);
  top: calc(var(--grano) * 3.4); bottom: calc(var(--grano) * -4.5);
  width: 2px; background: rgba(18,21,24,.15); transform-origin: top;
}
.paso:last-child::before { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.js .paso::before { transform: scaleY(0); transition: transform .8s ease .3s; }
  html.js .paso.visible::before { transform: none; }
}

/* ---- qué construimos: cada pieza cuelga de un tramo de malla ----
   el trazo repite el dash de la malla del canvas (9 sobre 7). Al hover la malla
   se cierra: menos luz pasa, más señal queda. */
/* cuatro piezas = 2x2; auto-fit dejaba 3+1 y el cuarto quedaba huérfano */
.piezas { margin-top: calc(var(--grano) * 4.5); display: grid; grid-template-columns: 1fr; gap: calc(var(--grano) * 3.5) calc(var(--grano) * 4); }
@media (min-width: 720px) { .piezas { grid-template-columns: 1fr 1fr; } }
.pieza { position: relative; padding-top: calc(var(--grano) * 2.4); }
.pieza::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background-image: linear-gradient(to right, currentColor 9px, transparent 9px);
  background-size: 16px 2px; opacity: .3;
  transition: opacity .35s ease, background-size .35s ease;
}
.pieza:hover::after { opacity: .85; background-size: 5px 2px; }
.pieza h3 { font-size: clamp(1.15rem, 2.2vw, 1.3rem); }
.pieza p { margin-top: calc(var(--grano) * 0.9); max-width: 44ch; color: #3B424B; }
.oscura .pieza p { color: #B4BCC6; }

/* ---- el caso ---- tercer tono del sistema: crema.
   OJO: el ámbar NO se usa como texto sobre crema (contraste ~1.9:1). Sobre este
   fondo el acento va como grano sólido, no como palabra. */
.crema { background: var(--crema); }
.cita {
  font-family: var(--fuente-titulo); font-weight: 900; line-height: 1.12;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem); max-width: 19ch;
  letter-spacing: -0.01em;
}
.cita-pie { color: #5A6069; font-size: 0.92rem; margin-top: calc(var(--grano) * 1.6); max-width: 46ch; }

.ficha { display: flex; flex-wrap: wrap; gap: calc(var(--grano) * 4); margin-top: calc(var(--grano) * 4); }
.ficha .dato { font-family: var(--fuente-titulo); font-weight: 900; font-size: 1.9rem; line-height: 1; }
.ficha .rotulo { color: #5A6069; font-size: 0.85rem; margin-top: calc(var(--grano) * 0.5); }

/* el ciclo completo: sugerencia -> decisión -> movimiento -> venta.
   el último paso lleva el grano ámbar: es lo que el tamiz retuvo. */
.ciclo { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--grano) * 1.4); margin-top: calc(var(--grano) * 4); font-size: 0.95rem; }
.ciclo .eslabon { display: inline-flex; align-items: center; gap: calc(var(--grano) * 0.7); }
.ciclo .flecha { color: var(--ruido); }
.ciclo .grano-senal { width: 9px; height: 9px; border-radius: 50%; background: var(--senal); display: inline-block; }
.ciclo .eslabon:last-child { font-weight: 700; }

.resultado { margin-top: calc(var(--grano) * 2.5); }
.resultado .monto { font-family: var(--fuente-titulo); font-weight: 900; font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; }
.resultado p { margin-top: calc(var(--grano) * 1.2); max-width: 44ch; color: #3B424B; }

/* ---- cierre + contacto ---- el ámbar de la sección es el botón, y nada más:
   por eso el canvas de acá va sin granos de señal (data-senal="0"). */
.cierre h2 { max-width: 17ch; }
.cierre .bajada { max-width: 50ch; margin-top: calc(var(--grano) * 2.5); font-size: 1.08rem; color: #C9D0D8; }
.cierre-botones { margin-top: calc(var(--grano) * 4); display: flex; gap: calc(var(--grano) * 1.5); flex-wrap: wrap; }
.cierre-botones .boton, .cierre-botones .boton-fantasma { cursor: default; }

/* ---- pie ---- */
.pie { border-top: 1px solid rgba(18,21,24,.12); }
.pie .seccion { padding-top: calc(var(--grano) * 3.5); padding-bottom: calc(var(--grano) * 3.5);
  display: flex; align-items: center; gap: calc(var(--grano) * 2); flex-wrap: wrap; }
.pie .isotipo { width: 34px; height: auto; display: block; }
.pie .legal { color: #5A6069; font-size: 0.85rem; }
.pie .lugar { margin-left: auto; color: #5A6069; font-size: 0.85rem; }

/* marcador de obra: lo que falta decidir se ve, no se esconde */
.pendiente {
  display: inline-block; margin-top: calc(var(--grano) * 2);
  border: 1.5px dashed var(--ruido); border-radius: 8px;
  padding: calc(var(--grano) * 0.6) calc(var(--grano) * 1.2);
  color: #5A6069; font-size: 0.8rem; letter-spacing: 0.03em;
}
.oscura .pendiente { color: var(--ruido); border-color: rgba(250,249,246,.34); }

/* ---- quiénes somos ---- el ámbar de esta sección vive en el isotipo, que ya
   lo trae: no hace falta acento en el texto. */
.nosotros { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--grano) * 3.5); align-items: start; }
.nosotros .isotipo { width: 78px; height: auto; }
.nosotros p { max-width: 56ch; color: #3B424B; margin-top: calc(var(--grano) * 1.8); }
.nosotros .lugar { font-weight: 700; color: var(--tinta); }

@media (max-width: 640px) {
  .seccion { padding: calc(var(--grano) * 5) calc(var(--grano) * 1.5); }
  .ficha { gap: calc(var(--grano) * 2.5); }
  .nosotros { grid-template-columns: 1fr; gap: calc(var(--grano) * 2.5); }
}