/* ============================================================
   SU-PPLY — www.su-pply.cl
   The public page. The one surface where the brand is allowed to be loud
   (15-BRAND-BRIEF-HANDOVER.md §8), so the type is big and the composition
   asymmetric — but the rules are the product's rules:

     · ink acts, orange reports: «Ingresar» is ink, never orange;
     · the only orange on the page is the stopwatch hand in the mark and
       what the application itself measured inside a screenshot;
     · no gradient, no coloured rail, no rounded-everything, no second accent.

   Tokens are the design system's own file, copied by `sync.sh` so this folder
   can be handed to any static host on its own. Change colour or type there.
   ============================================================ */

@import "./tokens.css";

/* Self-hosted, like the application: no request leaves this page (Ley 21.719
   counts an IP sent to a third party as a transfer, and that includes a font CDN). */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/barlow-semi-condensed-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}

:root{
  --wrap:1120px;
  --gutter:24px;
  --paper:#FFFFFF;          /* a screenshot is an object on the page: it stays paper in both themes */
  --paper-line:#DCDFE3;
  --band-ink:#0E0F12;       /* the ink band is ink in both themes, like the product's top bar */
}
@media (min-width:900px){ :root{ --gutter:40px; } }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --band-ink:#15171B; --paper-line:#2A2D33; }
}
:root[data-theme="dark"]{ --band-ink:#15171B; --paper-line:#2A2D33; }

body{ color:var(--ink-2); }

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

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--gutter); top:var(--sp-3); z-index:var(--z-header); background:var(--surface-raised);
  color:var(--ink); padding:var(--sp-2) var(--sp-4); border-radius:var(--radius); }

/* ── type ─────────────────────────────────────────────────── */
.display{ font-family:var(--f-display); font-weight:var(--fw-black); color:var(--ink);
  font-size:clamp(3.4rem, 8.5vw, 6.5rem); line-height:.92; letter-spacing:-.035em; margin:0; }
.h2{ font-family:var(--f-display); font-weight:var(--fw-bold); color:var(--ink);
  font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.04; letter-spacing:-.02em; margin:0 0 var(--sp-6);
  max-width:24ch; text-wrap:balance; }
.h3{ font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--ink); margin:0 0 var(--sp-3); }
.eyebrow{ font-family:var(--f-data); font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:.16em; text-transform:uppercase; color:var(--graphite); margin:0 0 var(--sp-5); }
.lead{ font-size:clamp(1.0625rem, 1.5vw, 1.3125rem); line-height:1.5; color:var(--ink-2); margin:0; max-width:50ch; }
.lead--wide{ max-width:62ch; margin-bottom:var(--sp-10); }
.sub{ font-size:var(--fs-md); line-height:1.55; color:var(--graphite); margin:var(--sp-5) 0 0; max-width:50ch; }
.note{ font-family:var(--f-data); font-size:var(--fs-sm); color:var(--graphite); margin:var(--sp-10) 0 0;
  padding-top:var(--sp-5); border-top:var(--border) solid var(--line); }

/* ── controls · ink acts ──────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:var(--control-h); padding:0 var(--sp-5); border:var(--border) solid transparent;
  border-radius:var(--radius); font-family:var(--f-text); font-size:var(--fs-base);
  font-weight:var(--fw-semibold); line-height:1; text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out); }
.btn--primary{ background:var(--ink); color:var(--ground); }
.btn--primary:hover{ background:var(--ink-2); }
.btn--sm{ height:var(--control-h-sm); padding:0 var(--sp-4); font-size:var(--fs-sm); }
.btn--lg{ height:var(--control-h-lg); padding:0 var(--sp-6); }

.link-quiet{ color:var(--ink-2); font-weight:var(--fw-medium); text-decoration:none;
  border-bottom:var(--border) solid var(--line); padding-bottom:2px; }
.link-quiet:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ── header ───────────────────────────────────────────────── */
.site-head{ padding-block:var(--sp-5); }
.site-head__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.marca__lockup,.marca__simbolo{ display:block; color:var(--ink); }

/* ── hero · display left, the explanation set beside its baseline ── */
.hero{ padding-top:clamp(var(--sp-10), 7vw, 88px); padding-bottom:clamp(var(--sp-10), 6vw, 72px); }
.hero__text{ margin-top:var(--sp-8); }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5); margin:var(--sp-8) 0 0; }

@media (min-width:980px){
  .hero{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); column-gap:clamp(40px,5vw,72px); align-items:end; }
  .hero .eyebrow{ grid-column:1 / -1; }
  .hero__text{ margin-top:0; padding-bottom:.6rem; }   /* sits on the display's last baseline */
}

/* ── the product, photographed ────────────────────────────── */
.shot{ margin:0; }
.shot img{ display:block; width:100%; height:auto; background:var(--paper);
  border:var(--border) solid var(--paper-line); border-radius:var(--radius-lg); box-shadow:var(--elev-2); }
.shot figcaption{ font-family:var(--f-data); font-size:var(--fs-xs); color:var(--graphite);
  margin-top:var(--sp-4); max-width:94ch; padding-right:var(--gutter); }

/* Runs off the right edge of the window, aligned on the left with everything else: the table is
   wider than the page, which is the honest thing a comparison of twenty suppliers looks like.
   Measured against `100%` of the page, never `100vw`, so the scrollbar cannot cause a sideways
   scroll of its own. */
.shot--bleed{ max-width:none; padding-right:0;
  padding-left:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
.shot--bleed img{ border-right:0; border-top-right-radius:0; border-bottom-right-radius:0; }

/* ── bands ────────────────────────────────────────────────── */
.band{ padding-block:clamp(56px, 7.5vw, 104px); }
.band > .shot--bleed{ margin-top:var(--sp-2); }
.band--ink{ background:var(--band-ink); color:#D5D7DB;
  border-block:var(--border) solid rgba(255,255,255,.08); }
.band--ink .h2{ color:#FFFFFF; }
.band--ink .eyebrow{ color:#9A9FA6; }
.band--ink .lead{ color:#C9CCD1; }
.band--cierre{ border-top:var(--border) solid var(--line); }

/* ── the six steps · hairlines and numbers, no cards and no icons ── */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-8) clamp(24px,3.5vw,48px);
  grid-template-columns:1fr; counter-reset:none; }
@media (min-width:700px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.steps li{ border-top:var(--border-strong) solid var(--ink); padding-top:var(--sp-4); }
.steps__n{ display:block; font-family:var(--f-display); font-size:var(--fs-lg); font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums; color:var(--steel); margin-bottom:var(--sp-3); }
.steps h3{ font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--ink); margin:0 0 var(--sp-2); }
.steps p{ margin:0; font-size:var(--fs-base); line-height:1.5; color:var(--graphite); }

/* ── what the machine does, what you decide ───────────────── */
.split{ display:grid; gap:var(--sp-8); }
@media (min-width:800px){ .split{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(40px,6vw,88px); } }
.split > div{ border-top:var(--border) solid var(--line); padding-top:var(--sp-5); }
.split p{ margin:0; font-size:var(--fs-base); line-height:1.6; color:var(--ink-2); }

/* ── footer ───────────────────────────────────────────────── */
.site-foot{ border-top:var(--border) solid var(--line); padding-block:var(--sp-10); }
.site-foot__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-3) var(--sp-8); }
.site-foot__tag{ font-family:var(--f-data); font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:.14em; text-transform:uppercase; color:var(--graphite); margin:0; }
.site-foot__meta{ margin:0 0 0 auto; font-size:var(--fs-sm); line-height:1.6; color:var(--graphite); text-align:right; }
.site-foot__meta a{ color:var(--graphite); }
.site-foot__meta a:hover{ color:var(--ink); }
@media (max-width:700px){
  .site-foot__meta{ margin-left:0; text-align:left; }
}