/* ============================================================================
 * El Mostrador · sistema de diseño
 * ============================================================================
 *
 * Dirección: PLANO DE TALLER. Tinta sobre papel, como el catálogo de perfiles
 * del que salen los datos. Ni SaaS genérico ni neón: el producto es una
 * ventana hecha a medida, y la interfaz tiene que sentirse medida.
 *
 *   · fondo papel con retícula técnica — el plano de taller
 *   · marca FuncioMatic en la cáscara; la del inquilino en su cotizador
 *   · vidrio real en las superficies (blur + borde de luz)
 *   · CIFRAS TABULARES para los datos. Una sola familia (Archivo): la ley de
 *     marca no admite una segunda tipografía, y el contraste lo dan peso y tamaño
 *   · un solo acento, y sale de la marca del inquilino (whitelabel)
 *   · la pieza estrella es el 3D que se rearma con tu medida. Todo lo demás
 *     se queda quieto para que esa se vea.
 *
 * Los colores NO se escriben acá. Entran desde datos/<slug>/empresa.json.
 * Lo de abajo es solo el respaldo si la ficha no carga.
 * ------------------------------------------------------------------------- */

:root {
  /* — marca del inquilino (se sobrescriben en tiempo de carga) — */
  --fondo: #f3f2f2;
  --campo: #f3f2f2;
  --superficie: #eae9e9;
  --elevado: #f3f2f2;
  --linea: #201e1d;
  --primario: #ec3013;
  --primario-oscuro: #201e1d;
  --acento: #ec3013;
  --texto: #201e1d;
  --texto-apoyo: #605d5d;

  /* — semánticos —
   * ⚠️ brand-kit.md no define paleta semántica y el semáforo la necesita: hay
   * que distinguir "listo" de "falta algo" de "bloqueado", y con tinta y rojo
   * solos no se lee. El de bloqueo ya es el rojo de marca. Los otros dos están
   * PENDIENTES DE DECISIÓN — Alexis 2026-09-12. */
  /* El estado NO se dice con color: se dice con FORMA.
   *   listo      → línea llena de 2px en tinta
   *   en espera  → línea punteada, hueca
   *   bloqueado  → el rojo, que ya es el acento de alarma
   * Decisión de Alexis 2026-09-12: brand-kit.md tiene seis colores y ninguno es
   * verde ni ámbar. Agregarlos habría sido inventar marca. Y la forma se lee sin
   * color, así que también sirve para quien no distingue verde de ámbar. */
  --ok: var(--texto);
  --alerta: var(--texto-apoyo);
  --bloqueo: #ec3013;
  --linea-listo: 2px solid var(--texto);
  --linea-espera: 2px dashed var(--texto-apoyo);

  /* — vidrio — */
  --vidrio: color-mix(in srgb, var(--texto) 4%, transparent);
  --vidrio-borde: color-mix(in srgb, var(--texto) 10%, transparent);
  --vidrio-alto: color-mix(in srgb, var(--texto) 7%, transparent);

  /* — tipografía — */
  --display: "Archivo", system-ui, sans-serif;
  --cuerpo: "Archivo", system-ui, -apple-system, sans-serif;
  --dato: "Archivo", system-ui, sans-serif;  /* cifras tabulares, no mono */

  /* — escala — */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e6: 1.5rem;  --e8: 2rem;    --e12: 3rem;   --e16: 4rem;  --e24: 6rem;
  --r: 3px;
  --r-chico: 2px;
  --pad: clamp(1.1rem, 4vw, 3rem);
  --resorte: cubic-bezier(.34, 1.4, .64, 1);
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── el plano de taller: retícula + grano ─────────────────────────────── */

body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--texto) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--texto) 2.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  /* El #000 de una máscara no es color: es opacidad. No cuenta como marca. */
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 35%, transparent 78%);
}

body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.capa { position: relative; z-index: 1; }

/* ── tipografía ───────────────────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 800; line-height: .96; letter-spacing: -.045em;
}
h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }

/* Todo lo que es un DATO va en monoespaciada: medidas, cotas, precios. */
.dato, .precio, input[type="number"], .cota { font-family: var(--dato); font-variant-numeric: tabular-nums; }

.rotulo {
  font-family: var(--dato);
  font-size: 10px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texto-apoyo);
}
.apoyo { color: var(--texto-apoyo); }
.medida-lectura { max-width: 62ch; }

/* ── contenedor ───────────────────────────────────────────────────────── */

.cinta { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--pad); }

/* ── vidrio ───────────────────────────────────────────────────────────── */

.vidrio {
  background: var(--vidrio);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--r);
}
.vidrio-alto {
  background: var(--vidrio-alto);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(32, 30, 29, .18), inset 0 1px 0 color-mix(in srgb, var(--texto) 7%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
  .vidrio, .vidrio-alto { background: var(--superficie); }
}

/* ── botones ──────────────────────────────────────────────────────────── */

button { font: inherit; cursor: pointer; }

.btn {
  --sombra: color-mix(in srgb, var(--primario) 45%, transparent);
  border: 0; border-radius: 2px; padding: .8rem 1.6rem;
  font-family: var(--cuerpo); font-weight: 700; font-size: .9375rem;
  background: var(--primario); color: var(--fondo);
  transition: transform .35s var(--resorte), box-shadow .35s var(--resorte), filter .2s;
  box-shadow: 0 0 0 rgba(32, 30, 29, 0);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--sombra); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn.linea {
  background: transparent; color: var(--texto);
  border: 1px solid var(--vidrio-borde);
}
.btn.linea:hover { box-shadow: none; border-color: color-mix(in srgb, var(--primario) 60%, transparent); }
.btn.chico { padding: .42rem .95rem; font-size: .8125rem; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 2px; }

/* ── campos ───────────────────────────────────────────────────────────── */

input, select, textarea {
  width: 100%; font: inherit;
  background: color-mix(in srgb, var(--fondo) 60%, transparent);
  border: 1px solid var(--vidrio-borde);
  color: var(--texto); border-radius: var(--r-chico);
  padding: .7rem .85rem;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in srgb, var(--primario) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 18%, transparent);
  outline: none;
}
label.campo { display: block; }
label.campo > .rotulo { display: block; margin-bottom: .35rem; }

/* ── entradas por scroll ──────────────────────────────────────────────── */

/* Nativo donde existe (Chrome 115+): cero JS. */
@supports (animation-timeline: view()) {
  .aparece {
    animation: aparecer linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 26%;
  }
}
/* Respaldo con IntersectionObserver: app.js pone .visible */
@supports not (animation-timeline: view()) {
  .aparece { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--resorte); }
  .aparece.visible { opacity: 1; transform: none; }
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.escalona > * { animation-delay: calc(var(--i, 0) * 70ms); transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .aparece { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── barra de progreso de lectura ─────────────────────────────────────── */

.progreso {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--primario), var(--acento));
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progreso { animation: avanzar linear; animation-timeline: scroll(root block); }
  @keyframes avanzar { to { transform: scaleX(1); } }
}

/* ── el precio, que es el dato protagonista ───────────────────────────── */

.precio-grande {
  font-family: var(--dato);
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.precio-grande.recalculando { animation: latir .45s var(--resorte); }
@keyframes latir {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.045); color: var(--acento); }
  100% { transform: scale(1); }
}

/* ── cintas separadoras ───────────────────────────────────────────────── */

.regla { height: 1px; background: linear-gradient(90deg, transparent, var(--vidrio-borde) 18%, var(--vidrio-borde) 82%, transparent); }

.oculto { display: none !important; }