/* =========================================================
   Auto Club Academy — Design System v2.0 stylesheet
   Canon: vault ops/brand/aca-design-system.md (v2.0, 2026-08-11)
   Reference implementation: redesign-lab/index.html
   Loaded ONLY by v2 pages (7-pasos, gracias). Legacy pages
   keep styles.css untouched — one system per asset (G.02).
   ========================================================= */

/* ---------- 1. Fonts ---------- */
/* Maintanker: licensed (Desktop + Webfont 10K pv/mo, Creative Market
   2026-08-11). Kode Mono + Golos Text load from Google Fonts (page link). */
@font-face {
  font-family: 'Maintanker';
  src: url('/assets/fonts/Maintanker-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  --neon: #D7DF23;
  --neon-deep: #B8C01E;
  --ink: #000000;
  --ink-2: #161616;
  --paper: #FFFFFF;
  --muted: #939598;
  --rule: #D9D9D9;
  --rule-2: #E3E3E3;
  --cherry: #D20A2E;
  --cherry-2: #E4657B;

  --display: 'Maintanker', 'Anton', sans-serif;
  --mono: 'Kode Mono', monospace;
  --body: 'Golos Text', system-ui, sans-serif;

  --notch: 11px;
  --maxw: 1100px;
  --pad: 20px;
}
@media (min-width: 810px) { :root { --pad: 32px; } }

/* ---------- 3. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--neon); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 64px 0; position: relative; }
.center { text-align: center; }

/* ---------- 4. The grid layer (B.03) ----------
   One continuous vertical-rules layer behind the whole page; sections/cards
   that should cover it sit at z-index 2. Full-bleed: the 184px tile is phase-
   locked to the viewport centre (one rule through the middle) and repeats to
   both edges, so no blank margins appear on wide screens. */
.page-rules {
  position: fixed;      /* viewport-anchored: immune to page/body width quirks */
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: linear-gradient(90deg, rgba(147,149,152,.28) 0 1px, transparent 1px);
  background-size: 184px 100%;
  /* percentage positioning centres the TILE, so add half a tile (92px) minus
     half a rule (0.5px): puts one rule exactly on the viewport centre line and
     tiles outward to both edges at every width. */
  background-position: calc(50% + 91.5px) 0;
  background-repeat: repeat;
}
/* Lift CONTENT above the rules layer — never the section or band itself.
   A black band must stay at z-index:auto so .page-rules (z-index:1) paints over
   it AND over its white notch/plumb ornaments; that is what keeps every rule
   holding the same x across a section boundary (B.03). Giving the band a
   z-index carries its ornaments up with it and the rules die at the boundary.
   Both selectors are listed because .band-v2 is not a .section. */
.section > .container,
.band-v2 > .container { position: relative; z-index: 2; }

/* ---------- 5. Typography ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .85;
}
.h1-v2 { font-size: clamp(56px, 8.5vw, 96px); line-height: .85; }
.h2-v2 { font-size: clamp(40px, 5.5vw, 60px); line-height: .85; }
.micro {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.04em;
  line-height: 16px;
  text-transform: uppercase;
}
.eyebrow-v2 { color: var(--cherry); display: block; }
.lead { font-size: 17px; line-height: 1.6; color: rgba(0,0,0,.72); max-width: 560px; }
.muted { color: var(--muted); }
.on-dark .lead { color: #A9A9AB; }

/* neon notched chip wrapping a display glyph (the "7") */
.chip-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--neon);
  color: var(--ink);
  padding: 0 .14em .04em .1em;
  margin: 0 .04em;
  clip-path: polygon(0 0, 100% 0, 100% 45%, calc(100% - .12em) 100%, 0 100%);
}

/* ---------- 6. Pixel arrow (O.03) ---------- */
.px-arrow {
  width: 16px; aspect-ratio: 1; flex: none; display: inline-block;
  background-color: var(--arrow-c, #000);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 7h16v2H0zM12 5h2v2h-2zM10 3h2v2h-2zM12 9h2v2h-2zM10 11h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 7h16v2H0zM12 5h2v2h-2zM10 3h2v2h-2zM12 9h2v2h-2zM10 11h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 7. Notched buttons (O.01) ---------- */
.btn-v2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--btn-bg, var(--neon));
  color: var(--btn-c, var(--ink));
  font-family: var(--mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  padding: 14px calc(10px + var(--notch)) 14px 18px;
  clip-path: polygon(0 0, 100% 0, 100% 45%, calc(100% - var(--notch)) 100%, 0 100%);
  transition: filter .2s ease;
}
.btn-v2:hover { filter: brightness(1.06); }
.btn-v2 .px-arrow { --arrow-c: var(--btn-c, var(--ink)); }
.btn-v2--white { --btn-bg: #fff; --btn-c: var(--ink); outline: 1px solid var(--rule); }

/* ---------- 8. Nav band ---------- */
.nav-v2 {
  background: var(--ink);
  padding: 18px var(--pad);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
/* Main logo (Original: grey AUTO CLUB + neon ACADEMY + speed lines) — the
   black nav band is its native ground (canon §3). Never filtered/recolored. */
.nav-v2 .logo-mark { height: 57px; width: auto; }

/* ---------- 9. Hero ---------- */
.hero-v2 { flex: 1; display: flex; align-items: center; padding: 56px 0 72px; position: relative; }
.hero-grid { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr .95fr;
    column-gap: 56px;
    align-items: center;
  }
  .hero-rest .panel-v2 { margin-top: 0; }
}
.hero-head .lead { margin-top: 20px; }
.hero-title { margin-top: 14px; }

/* bullets */
.bullets-v2 { list-style: none; display: grid; gap: 12px; margin: 28px 0 0; }
.bullets-v2 li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.bullets-v2 .px-arrow { margin-top: 2px; --arrow-c: var(--ink); }

/* ---------- 10. Form panel — plate + face card ---------- */
.panel-v2 { position: relative; background: var(--ink); margin-top: 36px; }
/* In the hero the grid gap already separates the panel from the bullets, so
   trim its own margin (stacked layout only; the ≥900px rule zeroes it). */
.hero-rest .panel-v2 { margin-top: 10px; }
.panel-v2__face {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 26px;
  transition: transform .2s ease;
}
.panel-v2:hover .panel-v2__face { transform: translate(-4px, -4px); }
.panel-v2 .form-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; }

/* ---------- 11. Wedge transition (B.02) ---------- */
/* margin-top:-1px + compensating padding closes the 1px seam some browsers
   (notably Safari) paint where a white section meets a black one at a
   fractional layout position. Visually identical; no hairline. */
.band-v2 {
  background: var(--ink);
  color: #fff;
  position: relative;
  margin-top: -1px;
  padding: 97px 0 72px;
}
.band-v2 .notch {
  position: absolute; top: 0; left: 0;
  width: 221px; height: 78px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 29.4% 100%, 0 100%);
}
.band-v2 .plumb {
  position: absolute; top: 0; left: calc(50% - 19px);
  width: 38px; height: 56px;
  background: #fff;
  clip-path: polygon(57.9% 53.6%, 100% 0, 0 0, 42.1% 53.6%, 42.1% 100%, 57.9% 100%);
}
/* Both ornaments get their own composited layer.
   WHY (do not remove): their straight horizontal edge sits exactly on the
   white→black band boundary, and Chrome antialiases clip-path masks. A fresh
   load puts that edge on a whole pixel; re-entering the section while scrolling
   forces a re-raster, the edge lands on a half pixel, and the row blends white
   with the black band — a grey hairline that persists until the next full
   repaint. Promotion means the mask is rasterised once and only re-composited.
   Diagnosed 2026-08-12 on the homepage by bisect; Chrome only, not WebKit. */
.band-v2 .notch,
.band-v2 .plumb {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

@media (max-width: 809.98px) { .band-v2 .notch { width: 120px; height: 42px; } }

/* ---------- 12. Creds stats ---------- */
.creds-v2 { list-style: none; display: grid; gap: 32px; text-align: center; max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
@media (min-width: 640px) { .creds-v2 { grid-template-columns: repeat(3, 1fr); } }
.creds-v2 strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 50px);
  line-height: 1;
  text-transform: uppercase;
}
.creds-v2 .stat-neon { color: var(--neon); }
.creds-v2 span {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 13. "Qué vas a recibir" ---------- */
.receive-v2 { display: grid; gap: 32px; margin-top: 36px; }
@media (min-width: 768px) {
  .receive-v2 {
    grid-template-columns: 1fr 1.35fr;
    grid-template-areas: "bullets cover" "steps cover";
    column-gap: 40px;
    row-gap: 28px;
  }
  .receive-v2 .bullets-v2 { grid-area: bullets; margin: 0; }
  .receive-v2 .pdf-cover-v2 { grid-area: cover; align-self: start; }
  .receive-v2 .steps-v2 { grid-area: steps; }
}
.pdf-cover-v2 { width: 100%; max-width: 572px; margin: 0 auto; }

/* steps list — neon chip numerals (matches the v3 mockup) */
.steps-v2 { list-style: none; counter-reset: step; display: grid; gap: 0; }
.steps-v2 li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--muted);
}
.steps-v2 li:last-child { border-bottom: 0; }
.steps-v2 li::before {
  content: "// 0" counter(step);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.04em;
  flex: none;
  background: var(--neon);
  color: var(--ink);
  padding: 5px 14px 6px 9px;
  clip-path: polygon(0 0, 100% 0, 100% 45%, calc(100% - 8px) 100%, 0 100%);
}
.steps-v2 li span { font-weight: 600; }

/* ---------- 14. Bio band ---------- */
.bio-v2 { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; position: relative; z-index: 2; }
.bio-photo-v2 {
  width: 220px; height: 220px;
  object-fit: cover;
  border: 1px solid #2A2A2A;
  flex: none;
}
.bio-body-v2 { flex: 1; min-width: 260px; }
.bio-body-v2 .lead { margin-top: 18px; }

/* ---------- 15. Footer band ---------- */
.foot-v2 {
  background: var(--ink);
  color: var(--muted);
  text-align: center;
  padding: 36px var(--pad);
  font-size: 12px;
  position: relative;
  z-index: 2;
}
.foot-v2 .entity {
  max-width: 680px;
  margin: 0 auto 10px;
  color: #A9A9AB;
  font-size: 13px;
  line-height: 1.6;
}
.foot-v2 .meta a { color: inherit; text-decoration: underline; }
.foot-v2 .meta a:hover { color: #fff; }

/* ---------- 16. Gracias page ---------- */
.stamp-v2 {
  width: 58px; height: 58px;
  margin: 0 auto 28px;
  background: var(--neon);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 72%, calc(100% - 14px) 100%, 0 100%);
}
.stamp-v2 svg { color: var(--ink); }
.social-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.divider-v2 { margin-top: 72px; padding-top: 48px; border-top: 1px dashed var(--neon); }

/* ---------- 17. Kit form overrides (v2) ----------
   Scoped to the embed UID; !important beats Kit's injected inline styles.
   Mirrors design system: square fields, neon notched submit, mono labels. */
.formkit-form[data-uid="c7fb053791"] {
  border: 0 !important;
  background: transparent !important;
  max-width: none !important;
  font-family: var(--body) !important;
}
/* Kit wraps the fields in an UNCLASSED div that carries its own padding from
   the Kit form designer (Safari/WebKit computes 56px where Chrome computes 0
   — it was pushing the first input down on iPhones). Target it structurally;
   the panel already supplies the padding. */
.formkit-form[data-uid="c7fb053791"] > div,
.formkit-form[data-uid="c7fb053791"] .formkit-container,
.formkit-form[data-uid="c7fb053791"] .seva-fields { padding: 0 !important; }
.formkit-form[data-uid="c7fb053791"] .formkit-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}
.formkit-form[data-uid="c7fb053791"] .formkit-field { margin: 0 !important; }
.formkit-form[data-uid="c7fb053791"] .formkit-input {
  width: 100% !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 15px 18px !important;
  font-family: var(--body) !important;
  font-size: 16px !important; /* iOS zoom guard */
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: box-shadow .15s ease !important;
}
.formkit-form[data-uid="c7fb053791"] .formkit-input::placeholder { color: var(--muted) !important; }
.formkit-form[data-uid="c7fb053791"] .formkit-input:focus {
  outline: none !important;
  box-shadow: 4px 4px 0 var(--neon) !important;
}
.formkit-form[data-uid="c7fb053791"] .formkit-submit {
  align-self: flex-start !important;
  margin: 4px 0 0 !important;
  background: var(--neon) !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: -.04em !important;
  text-transform: uppercase !important;
  clip-path: polygon(0 0, 100% 0, 100% 45%, calc(100% - var(--notch)) 100%, 0 100%);
  transition: filter .2s ease !important;
  box-shadow: none !important;
}
.formkit-form[data-uid="c7fb053791"] .formkit-submit:hover { filter: brightness(1.06) !important; transform: none !important; }
.formkit-form[data-uid="c7fb053791"] .formkit-submit > span {
  padding: 15px calc(14px + var(--notch)) 15px 20px !important;
  display: block !important;
}
.formkit-form[data-uid="c7fb053791"] .formkit-guarantee,
.formkit-form[data-uid="c7fb053791"] .formkit-powered-by-convertkit,
.formkit-form[data-uid="c7fb053791"] .formkit-powered-by-convertkit-container { display: none !important; }
.formkit-form[data-uid="c7fb053791"] .formkit-alert {
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  box-shadow: inset 4px 0 0 var(--neon) !important;
  padding: 14px 16px !important;
  list-style: none !important;
  margin: 0 0 12px !important;
}
.formkit-form[data-uid="c7fb053791"] .formkit-alert-error { box-shadow: inset 4px 0 0 var(--cherry) !important; }
.formkit-form[data-uid="c7fb053791"] .formkit-spinner > div { background-color: var(--ink) !important; }
.formkit-form[data-uid="c7fb053791"] .seva-custom-content {
  background: #F4F4F5 !important;
  border: 1px solid var(--rule) !important;
  padding: 16px !important;
  white-space: pre-line;
}

/* ---------- 18. Motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   19. SHARED COMPONENTS added with the homepage work
   ========================================================= */

/* ---------- 19.10 Tags & status badges (canon §7) ----------
   Ported from the reference implementation; the funnel pages didn't use
   them, so they were missing from this stylesheet until the homepage. */
.tag {
  display: inline-flex; align-items: center; height: 25px;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: -.04em; line-height: 16px; text-transform: uppercase;
  padding: 4px calc(8px + var(--notch)) 4px 8px;
  clip-path: polygon(0 0, 100% 0, 100% 45%, calc(100% - var(--notch)) 100%, 0 100%);
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 4px;            /* the one radius exception in the system */
  font-family: var(--mono); font-weight: 500; font-size: 13px;
  letter-spacing: -.04em; line-height: 16px; text-transform: uppercase;
  animation: pulse-v2 2s ease-in-out infinite;
}
.badge svg { display: block; flex: none; }
.badge--neon { background: var(--neon); color: var(--ink); }
.badge--cherry { background: var(--cherry); color: #fff; }
@keyframes pulse-v2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* Narrow phones: the wordmark + CTA + burger don't fit side by side.
   Shrink the logo and let the burger carry the CTA (it's in the overlay). */
@media (max-width: 599.98px) {
  .nav-v2--links .logo-mark { height: 40px; }
  .nav-v2__right .btn-v2 { display: none; }
}