/* FUA landing: mobile-first (artboard 2a), desktop at >=1024px (artboard 1b).
   Values come from docs/design-handoff/README.md; tokens from tokens.css. */

:root {
  --orange: #FE5F2F;
  --orange-hover: #FF7449;
  --iron-950: #0B0B0C;
  --iron-900: #121214;
  --iron-800: #26262A;
  --iron-500: #6E6E76;
  --chalk-400: #A8A5A1;
  --chalk-50: #F2F0EE;
  --plate: #1C1C20;
  --plate-border: #34343A;
  --error: #E06A6A;

  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: 20px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--iron-950);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--iron-950);
  color: var(--chalk-50);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Off-state plates slide 160–360px past the barbell; keep that from scrolling the page. */
main { overflow-x: hidden; overflow-x: clip; }

h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

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

/* ---------- Shared type ---------- */

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chalk-400);
}

h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  color: var(--iron-950);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s;
}
.btn:hover { background: var(--orange-hover); }

/* ---------- 1. Nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}
.nav-logo img { height: 28px; width: auto; }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-link {
  display: none;
  font-weight: 500;
  font-size: 15px;
  color: var(--chalk-50);
}
.nav-link:hover { color: var(--orange-hover); }

.lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--iron-800);
  border-radius: 999px;
}
.lang button {
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--chalk-400);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.lang button[aria-pressed="true"] {
  background: var(--chalk-50);
  color: var(--iron-950);
}

/* ---------- 2. Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 40px;
}
.hero-head, .hero-side { display: flex; flex-direction: column; gap: 18px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}

h1 {
  font-family: var(--font-display);
  font-weight: 900;
  /* "Cargando..." is one unbreakable word, ~5.85x the font size wide. Sized so it fits
     the 20px-gutter column: 56px (spec) from ~370px up, smaller on narrower phones. */
  font-size: clamp(36px, calc(17vw - 7px), 56px);
  line-height: .92;
  letter-spacing: -.035em;
}

.hero-sub {
  font-size: 17px;
  line-height: 1.5;
  color: var(--chalk-400);
  text-wrap: pretty;
}

.cta--desktop { display: none; }
.cta-mobile { padding-top: 32px; }
.cta-mobile .cta { display: flex; width: 100%; min-height: 52px; padding: 14px 20px; }

/* ---------- 3. Barbell ---------- */

.bar-section {
  padding-top: 48px;
  padding-inline: 12px;
}

/* .barbell-fit is resized by main.js when the barbell is wider than the space available. */
.barbell-fit {
  display: flex;
  justify-content: center;
}

.barbell {
  /* mobile geometry */
  --w: 356px; --h: 190px;
  --bar-top: 90px; --bar-h: 8px; --bar-r: 2px;
  --sleeve-w: 128px; --sleeve-top: 86px; --sleeve-h: 16px; --sleeve-r: 3px;
  --collar-w: 8px; --collar-top: 76px; --collar-h: 36px; --collar-r: 2px;
  --zone-w: 126px; --plate-gap: 2px; --plate-r: 4px;
  --plate-font: 10px; --plate-ls: .08em;
  --off: 160px;

  position: relative;
  flex: none;
  width: var(--w);
  height: var(--h);
  transform-origin: top center;
}

.bb-bar, .bb-sleeve, .bb-collar, .bb-zone { position: absolute; }

.bb-bar {
  left: 0; right: 0;
  top: var(--bar-top);
  height: var(--bar-h);
  border-radius: var(--bar-r);
  background: linear-gradient(#C9C6C2, #6E6E76);
}
.bb-sleeve {
  width: var(--sleeve-w);
  top: var(--sleeve-top);
  height: var(--sleeve-h);
  border-radius: var(--sleeve-r);
  background: linear-gradient(#C9C6C2, #55555C);
}
.bb-sleeve--l { left: 0; }
.bb-sleeve--r { right: 0; }
.bb-collar {
  width: var(--collar-w);
  top: var(--collar-top);
  height: var(--collar-h);
  border-radius: var(--collar-r);
  background: var(--chalk-400);
}
.bb-collar--l { left: var(--sleeve-w); }
.bb-collar--r { right: var(--sleeve-w); }

.bb-zone {
  top: 0;
  width: var(--zone-w);
  height: var(--h);
  display: flex;
  align-items: center;
  gap: var(--plate-gap);
}
.bb-zone--l { left: 0; flex-direction: row-reverse; }
.bb-zone--r { right: 0; flex-direction: row; }

.plate {
  --x: 0px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--plate-r);
  background: var(--plate);
  border: 1px solid var(--plate-border);
  color: var(--chalk-50);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--plate-font);
  letter-spacing: var(--plate-ls);
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: translateX(var(--x));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s;
}
/* Left plates are mirrored so their labels read bottom-to-top. Translating after the
   rotation moves them left on screen, so the same positive offset works on both sides. */
.bb-zone--l .plate { transform: rotate(180deg) translateX(var(--x)); }
.plate--accent {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--iron-950);
}

/* Plate sizes, inner -> outer */
.plate:nth-child(1) { height: 178px; width: 32px; }
.plate:nth-child(2) { height: 160px; width: 30px; }
.plate:nth-child(3) { height: 142px; width: 28px; }
.plate:nth-child(4) { height: 124px; width: 26px; }

/* Animation off-state. Only applies when the head script set .anim (JS on, motion OK);
   otherwise everything renders fully loaded. */
.anim .plate:not(.is-on) { --x: var(--off); opacity: 0; }

.counter { font-family: var(--font-mono); }
.counter-num {
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--chalk-50);
  font-variant-numeric: tabular-nums;
}
.counter-of { font-size: 20px; color: var(--chalk-400); }
.counter-label {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chalk-400);
}
.counter--desktop { display: none; }
.counter--mobile {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  padding-top: 20px;
}

/* ---------- 4. Features ---------- */

.features { padding-top: 48px; padding-bottom: 64px; }

.feat {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 8px;
  padding: 16px 0;
  border-top: 1px solid var(--orange);
  transition: border-color .4s, opacity .4s;
}
.anim .feat:not(.is-on) { border-top-color: var(--iron-800); opacity: .45; }

.feat-n {
  grid-row: 1;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--chalk-400);
}
.feat-name {
  grid-column: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
}
.feat-text {
  grid-column: 2;
  font-size: 15px;
  line-height: 1.5;
  color: var(--chalk-400);
  text-wrap: pretty;
}

/* ---------- Sections 5 & 6 shared ---------- */

.section {
  border-top: 1px solid var(--iron-800);
  padding-block: 64px;
}

/* ---------- 5. What is FUA ---------- */

.what .wrap { display: flex; flex-direction: column; gap: 28px; }
.what-intro, .what-head { display: flex; flex-direction: column; gap: 20px; }
.what-p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--chalk-400);
  text-wrap: pretty;
}

.cards { display: grid; gap: 20px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--iron-900);
  border: 1px solid var(--iron-800);
  border-radius: 14px;
}
.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}
.card-list { display: flex; flex-direction: column; gap: 16px; }
.card-list li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--chalk-50);
}
.card-n { flex: none; font-family: var(--font-mono); color: var(--iron-500); }

/* ---------- 6. Contact ---------- */

.contact-grid { display: flex; flex-direction: column; gap: 28px; }
.contact-intro { display: flex; flex-direction: column; gap: 12px; }
.contact-p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--chalk-400);
  text-wrap: pretty;
}

.form { display: grid; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-row { display: grid; gap: 18px; }

.label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chalk-400);
}

.input {
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  background: var(--iron-900);
  border: 1px solid var(--iron-800);
  border-radius: 8px;
  color: var(--chalk-50);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  transition: border-color .15s;
}
.input--mono { font-family: var(--font-mono); }
.input::placeholder { color: var(--iron-500); opacity: 1; }
.input:focus, .input:focus-visible { border-color: var(--orange); outline: none; }
textarea.input { resize: vertical; min-height: 120px; }

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--iron-900);
  border: 1px solid var(--iron-800);
  border-radius: 8px;
}
.seg button {
  min-height: 44px;
  padding: 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--chalk-400);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--chalk-50);
  color: var(--iron-950);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { display: flex; flex-direction: column; gap: 12px; }
.submit { width: 100%; min-height: 52px; padding: 16px 28px; }
.submit:disabled { cursor: progress; }
.submit:disabled:hover { background: var(--orange); }
.form.is-sending .submit { color: rgba(11, 11, 12, .6); }
.form-error { font-size: 15px; color: var(--error); }

.success {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--iron-900);
  border: 1px solid var(--iron-800);
  border-radius: 14px;
}
.success-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.1;
}
.success-title:focus { outline: none; }
.success-p { font-size: 16px; color: var(--chalk-400); }

/* ---------- 7. Footer ---------- */

.footer {
  border-top: 1px solid var(--iron-800);
  font-size: 14px;
  color: var(--iron-500);
}
.footer-inner {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  padding-block: 24px 32px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { color: var(--chalk-400); }
.footer-links a:hover { color: var(--chalk-50); }

/* ---------- Tablet: mobile structure, wider gutter ---------- */

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

/* ---------- Desktop (artboard 1b) ---------- */

@media (min-width: 1024px) {
  :root { --gutter: 80px; }

  h2 { font-size: 48px; }
  .kicker { font-size: 13px; }

  .nav { padding-block: 28px; }
  .nav-logo img { height: 36px; }
  .nav-link { display: inline; }
  .lang button { min-height: 0; padding: 6px 12px; }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 64px;
    align-items: end;
    padding-top: 72px;
  }
  .hero-head { gap: 20px; }
  .hero-side { gap: 28px; align-items: flex-start; }
  .eyebrow { font-size: 13px; }
  /* Spec is 104px, but "Cargando..." doesn't fit the 1.3fr column at that size; this tracks
     the column width: ~75px at 1024, capped at 100px from ~1290px up. */
  h1 { font-size: clamp(64px, calc(9.5vw - 22px), 100px); }
  .hero-sub { font-size: 20px; }
  .cta--desktop { display: inline-flex; padding: 16px 26px; }
  .cta-mobile { display: none; }

  .bar-section { padding-top: 96px; padding-inline: var(--gutter); }
  .barbell {
    --w: 1120px; --h: 300px;
    --bar-top: 144px; --bar-h: 12px; --bar-r: 3px;
    --sleeve-w: 290px; --sleeve-top: 137px; --sleeve-h: 26px; --sleeve-r: 4px;
    --collar-w: 14px; --collar-top: 122px; --collar-h: 56px; --collar-r: 3px;
    --zone-w: 286px; --plate-gap: 3px; --plate-r: 6px;
    --plate-font: 13px; --plate-ls: .12em;
    --off: 360px;
  }
  .plate:nth-child(1) { height: 270px; width: 54px; }
  .plate:nth-child(2) { height: 240px; width: 48px; }
  .plate:nth-child(3) { height: 210px; width: 44px; }
  .plate:nth-child(4) { height: 180px; width: 40px; }

  .counter--mobile { display: none; }
  .counter--desktop {
    position: absolute;
    left: 50%;
    top: 180px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .counter--desktop .counter-num { font-size: 56px; }
  .counter--desktop .counter-of { font-size: 28px; }

  .features { padding-top: 64px; padding-bottom: 112px; }
  .feat-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 16px;
  }
  .feat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0 0;
    border-top-width: 2px;
  }
  .feat-n { padding-top: 0; }
  .feat-name { font-size: 22px; }

  .section { padding-block: 112px; }

  .what .wrap { gap: 56px; }
  .what-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
  .what-head { gap: 16px; }
  .what-p { font-size: 19px; align-self: end; }
  .cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .card { padding: 32px; gap: 20px; }
  .card-title { font-size: 22px; }
  .card-list { gap: 20px; }
  .card-list li { gap: 14px; font-size: 16px; }

  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 72px;
  }
  .contact-intro { gap: 16px; }
  .contact-p { font-size: 18px; }
  .form { gap: 20px; }
  .field-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .input { min-height: 0; }
  .seg { gap: 8px; }
  .seg button { min-height: 0; }
  .form-actions { align-items: flex-start; }
  .submit { width: auto; min-height: 0; }

  .success { padding: 40px; gap: 12px; }
  .success-title { font-size: 32px; }
  .success-p { font-size: 17px; }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-block: 28px;
  }
  .footer-links { gap: 24px; }
}