/* ESCUADRA · coming-soon · styles.css
 * Binds to tokens.css by ALIAS only — zero raw hex in this file.
 * T3_L1 web grid: 12-col fluid · gutter --space-3 · margins by breakpoint
 * (≤480 --space-3 · 768 --space-5 · ≥1080 --space-6) · max-width 1312 ·
 * section rhythm --space-7 · hairline dividers · 480-first.
 * One naranja gesture per viewport: hero C1 primary. Lockup exempt. */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 24px; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* content column: fluid, margins by breakpoint, max 1312 */
.wrap { width: 100%; max-width: calc(1312px + 2 * var(--space-6)); margin: 0 auto; padding-inline: var(--space-3); }
@media (min-width: 768px)  { .wrap { padding-inline: var(--space-5); } }
@media (min-width: 1080px) { .wrap { padding-inline: var(--space-6); } }

/* type roles (frozen ramp) */
.display-1 { font-family: "Inter Display", "Inter", sans-serif; font-weight: 800; font-size: 40px; line-height: 44px; letter-spacing: -0.01em; }
@media (min-width: 768px) { .display-1 { font-size: 64px; line-height: 66px; } }
.display-2 { font-family: "Inter Display", "Inter", sans-serif; font-weight: 800; font-size: 40px; line-height: 44px; letter-spacing: -0.01em; }
.title    { font-size: 24px; line-height: 30px; font-weight: 500; }
.body     { font-size: 16px; line-height: 24px; font-weight: 400; }
.spec     { font-size: 13px; line-height: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }
.label    { font-size: 13px; line-height: 18px; font-weight: 600; }
.micro    { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.muted    { color: var(--text-secondary); }
.faint    { color: var(--grafito-claro); }

/* hairline divider — the grid made visible */
.rule { border: 0; border-top: var(--hairline-w) solid var(--border-hairline); }

/* ---------- lockups (engine import — never redrawn) ---------- */
.lockup-nav .wm, .lockup-footer .wm { fill: var(--text-primary); }
.lockup-nav .om { stroke: var(--accent); }
.lockup-footer .om { stroke: var(--text-primary); }
.lockup-nav { height: 20.8px; width: auto; }          /* cap 13 */
@media (max-width: 479.9px) { .lockup-nav { height: 19.2px; } } /* MIN_CAP 12 */
.lockup-footer { height: 19.2px; width: auto; }        /* cap 12 mono */

/* ---------- nav (C5, adapted: language toggle only) ---------- */
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between;
       border-bottom: var(--hairline-w) solid var(--border-hairline); }
.nav-lang { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-primary); }
.nav-lang:hover { color: var(--accent-pressed); }

/* ---------- hero (locked A3 composition) ---------- */
.hero { padding-top: var(--space-6); }
@media (min-width: 1080px) { .hero { padding-top: var(--space-7); } }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--space-3); }
@media (min-width: 1080px) {
  /* locked A3: statement spans 8 cols, E1 card the right 4 */
  .hero-grid { grid-template-columns: repeat(12, 1fr); }
  .hero-main { grid-column: 1 / span 8; }
  .hero-card { grid-column: 9 / span 4; align-self: start; }
}
.hero-sub { margin-top: var(--space-5); max-width: 42em; }
.hero-cta-row { margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* C1 primary — the viewport's ONE naranja gesture */
.btn { display: inline-flex; align-items: center; justify-content: center;
       height: 48px; padding-inline: var(--space-3);
       font-family: "Inter", sans-serif; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em;
       border: 0; border-radius: var(--radius); cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover { box-shadow: inset 0 -2px 0 0 var(--text-primary); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-primary:focus-visible { outline: var(--focus-keyline); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 77, 0, 0.12); }
/* C1 dark — capture submit (naranja stays with the hero CTA) */
.btn-dark { background: var(--surface-inverse); color: var(--text-inverse); }
.btn-dark:hover { box-shadow: inset 0 -2px 0 0 var(--accent); }
.btn-dark:active { background: var(--border-on-dark); }
.btn-dark:focus-visible { outline: var(--focus-keyline); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 77, 0, 0.12); }

/* ---------- E1 card (real review — bank grammar) ---------- */
.e1 { background: var(--surface-raised); border: var(--hairline-w) solid var(--border-hairline); }
.e1-head { background: var(--surface-field); padding: 13px var(--space-3); }
.e1-body { padding: var(--space-3); }
.e1-quote { font-size: 16px; line-height: 24px; }
.e1-div { margin-top: var(--space-3); border: 0; border-top: var(--hairline-w) solid var(--border-hairline); }
.e1-attr { margin-top: var(--space-2); }

/* ---------- stats strip (locked hero anatomy, snapped to the 12-col grid) ---------- */
.stats { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--hairline-w) solid var(--border-hairline);
         display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--space-3); }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(12, 1fr); }
  .stat { grid-column: span 4; } /* rails: col 1 · col 5 · col 9 (card column) */
}
.stat-num-row { margin-top: var(--space-2); display: flex; align-items: baseline; gap: var(--space-2); }
.stat-num { font-family: "Inter Display", "Inter", sans-serif; font-weight: 800; font-size: 40px; line-height: 44px; font-variant-numeric: tabular-nums; }
.provenance { margin-top: var(--space-4); }

/* ---------- sections ---------- */
.section { margin-top: var(--space-7); padding-top: var(--space-7); border-top: var(--hairline-w) solid var(--border-hairline); }

/* what's shipping strip — hairline rows on the same 12-col rails (1 · 5 · 9) */
.ship-row { display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-3);
            padding-block: var(--space-3); border-bottom: var(--hairline-w) solid var(--border-hairline); }
.ship-row:first-of-type { border-top: var(--hairline-w) solid var(--border-hairline); margin-top: var(--space-5); }
@media (min-width: 1080px) {
  .ship-row { grid-template-columns: repeat(12, 1fr); align-items: baseline; }
  .ship-row > .label { grid-column: 1 / span 4; }
  .ship-row > .spec  { grid-column: 5 / span 4; }
  .ship-spec { grid-column: 9 / span 4; white-space: nowrap; } /* spec lines never wrap */
}

/* ---------- capture (C2) ---------- */
.capture-head { max-width: 18em; }
.capture-body { margin-top: var(--space-3); max-width: 38em; }
.capture-form { margin-top: var(--space-5); max-width: 560px; }
@media (min-width: 1080px) { .capture-form { max-width: none; width: calc(50% - (var(--space-3) / 2)); } } /* exactly 6 of 12 cols: (100% − gutter)/2 */
.field-label { display: block; margin-bottom: var(--space-1); color: var(--text-secondary); }
.form-row { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 768px) { .form-row { flex-direction: row; } }
.input {
  height: 48px; flex: 1 1 auto; padding-inline: var(--space-2);
  background: var(--surface-field);
  border: 1.5px solid var(--text-primary); border-radius: var(--radius);
  font-family: "Inter", sans-serif; font-size: 16px; color: var(--text-primary);
}
.input::placeholder { color: var(--text-secondary); }
.input:focus-visible { outline: var(--focus-keyline); outline-offset: 0; box-shadow: 0 0 0 6px rgba(255, 77, 0, 0.12); }
.input[aria-invalid="true"] { border: 2px solid var(--accent-pressed); }
.help { margin-top: var(--space-1); color: var(--text-secondary); }
.form-msg-error { margin-top: var(--space-1); color: var(--accent-pressed); font-weight: 500; }
.form-msg-ok { margin-top: var(--space-2); background: rgba(160, 201, 203, 0.12);
               border-left: 3px solid var(--chart-series-2); padding: var(--space-2); color: var(--text-primary); }
[hidden] { display: none !important; }

/* ---------- footer (C5 light) ---------- */
.footer { margin-top: var(--space-7); border-top: var(--hairline-w) solid var(--border-hairline);
          padding-block: var(--space-4); }
.footer-inner { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 768px) { .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-right { display: flex; flex-direction: column; gap: var(--space-1); }
@media (min-width: 768px) { .footer-right { flex-direction: row; align-items: center; gap: var(--space-4); text-align: right; } }