/* vueltacash.com pre-launch site: the one stylesheet for index.html, reglas.html and privacidad.html.
   Menta tokens (fanfundu-handoff/design/vueltacash/tokens.css), only the ones these pages use. */
:root {
  --vc-header: #0A1F1B;
  --vc-pine: #0D2621;
  --vc-mint: #0B6E5F;
  --vc-mint-hover: #095A4E;
  --vc-lime: #B7E36A;
  --vc-misty: #F3F8F6;
  --vc-white: #FFFFFF;
  --vc-cash: #13A36F;
  --vc-muted: #5B6B67;
  --vc-amber: #F5B841;
  --vc-header-surface: #1C3A34;
  --vc-header-border: #5E8278;
  --vc-hero-border: #CFE3DA;
  --vc-hero-body: #3E4F4B;
  --vc-border: #D6E3DE;
  --vc-font-heading: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --vc-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fs-display: 36px;
  --fs-h2: 27px;
  --fs-h3: 22px;
  --fs-bodyL: 17px;
}
@media (min-width: 1024px) {
  :root { --fs-display: 54px; --fs-h2: 34px; --fs-h3: 26px; --fs-bodyL: 18px; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--vc-misty);
  color: var(--vc-pine);
  font-family: var(--vc-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, button { font-family: var(--vc-font-heading); }
h1, h2, h3, p { margin: 0; }
a { color: var(--vc-mint); text-underline-offset: 3px; }
a:hover { color: var(--vc-mint-hover); }
:focus-visible { outline: 3px solid var(--vc-mint); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--vc-lime); outline-offset: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 24px; } }

/* Header: the dark pine bar, logo left, language switch right (style guide §10.2, simplified). */
.top { background: var(--vc-header); color: var(--vc-white); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 38px; height: 38px; flex: none; }
.word { font-family: var(--vc-font-heading); font-weight: 700; font-size: 24px; letter-spacing: -0.2px; line-height: 1; }
.word .a { color: var(--vc-white); }
.word .b { color: var(--vc-lime); }
.lang {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: var(--vc-header-surface); color: var(--vc-white); border: 1.5px solid var(--vc-header-border);
  font-weight: 600; font-size: 15px;
}
.lang:hover { background: #24463F; }

/* Hero: light mint, never merging with the dark header (§10.2, §10.3). */
.hero {
  margin: 24px 0; border-radius: 24px; border: 1px solid var(--vc-hero-border);
  background: linear-gradient(120deg, #DCEFE6, #EEF7F2);
  display: grid; overflow: hidden;
}
.hero-art { position: relative; min-height: 220px; order: -1; } /* art first on phones (§10.3) */
.hero-text { padding: 4px 22px 40px; }
.eyebrow { font-family: var(--vc-font-heading); font-weight: 600; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--vc-mint); }
.hero h1 { font-size: var(--fs-display); line-height: 1.08; font-weight: 700; margin: 10px 0 14px; }
.hero h1 em { font-style: normal; color: var(--vc-mint); }
.hero .body { color: var(--vc-hero-body); font-size: var(--fs-bodyL); max-width: 34em; }
.hero .body + .body { margin-top: 12px; }
.pill { display: inline-block; margin-top: 20px; padding: 7px 14px; border-radius: 999px; background: var(--vc-lime); color: var(--vc-pine); font-family: var(--vc-font-heading); font-weight: 600; font-size: 14px; }
@media (min-width: 760px) {
  .hero { grid-template-columns: 1.1fr 1fr; border-radius: 32px; }
  .hero-text { padding: 52px; align-self: center; }
  .hero-art { min-height: 340px; order: 0; }
}
/* Abstract brand art only (§9): the coin, a ring and soft shapes. */
.shape { position: absolute; border-radius: 50%; }
.glow { width: 260px; height: 260px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(183,227,106,.55), rgba(183,227,106,0) 70%); }
.ring { width: 210px; height: 210px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 22px solid var(--vc-cash); opacity: .18; }
.dot { width: 70px; height: 70px; right: 14%; top: 14%; background: rgba(11,110,95,.2); }
.sq { position: absolute; width: 46px; height: 46px; left: 14%; bottom: 16%; border-radius: 14px; background: var(--vc-amber); opacity: .55; transform: rotate(-12deg); }
.coin { position: absolute; width: 150px; height: 150px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (min-width: 760px) { .coin { width: 210px; height: 210px; } }

/* Sections */
section { margin: 40px 0; }
@media (min-width: 760px) { section { margin: 52px 0; } }
h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; }
.lead { color: var(--vc-muted); margin-top: 8px; max-width: 40em; }
.grid { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--vc-white); border-radius: 24px; box-shadow: 0 4px 0 var(--vc-border); padding: 22px; }
.num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--vc-lime); color: var(--vc-pine); font-family: var(--vc-font-heading); font-weight: 700; font-size: 18px; }
.card h3 { font-size: 20px; line-height: 1.25; font-weight: 600; margin: 14px 0 6px; }
.grid-2 .card h3 { margin-top: 0; }
.card p { color: var(--vc-hero-body); }
.note { margin-top: 14px; font-size: 14px; color: var(--vc-muted); }
.more { margin-top: 18px; font-weight: 700; }

.about { background: var(--vc-pine); color: var(--vc-misty); border-radius: 24px; padding: 28px 22px; }
@media (min-width: 760px) { .about { padding: 40px; border-radius: 32px; } }
.about .eyebrow { color: var(--vc-lime); }
.about h2 { color: var(--vc-white); margin-top: 8px; }
.about p { margin-top: 12px; max-width: 42em; }
.about a { color: var(--vc-lime); font-weight: 700; }

/* Text pages (reglas.html, privacidad.html): one readable column of white cards. */
.page-head { margin: 32px 0 8px; }
.page-head h1 { font-size: var(--fs-display); line-height: 1.08; font-weight: 700; margin-top: 8px; }
.page-head .lead { font-size: var(--fs-bodyL); }
.preview {
  margin-top: 18px; padding: 14px 18px; border-radius: 16px; max-width: 46em;
  background: #FDF1D6; border: 1px solid #EBCB85; color: var(--vc-pine);
}
.doc { max-width: 46em; }
.doc .card { margin: 16px 0 0; } /* the cards are <section>s; this replaces the page sections' 40-52px gaps */
.doc .card h2 { font-size: var(--fs-h3); line-height: 1.2; }
.doc .card p, .doc .card li { color: var(--vc-hero-body); }
.doc .card p { margin-top: 10px; }
.doc .card ul { margin: 10px 0 0; padding-left: 22px; }
.doc .card li + li { margin-top: 6px; }
.doc .card strong { color: var(--vc-pine); }

footer { background: var(--vc-header); color: var(--vc-misty); padding: 28px 0 36px; margin-top: 40px; }
footer .brand svg { width: 30px; height: 30px; }
footer .word { font-size: 20px; }
footer p { font-size: 13px; line-height: 1.5; margin-top: 14px; max-width: 60em; }
footer a { color: var(--vc-lime); }
.fnav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.fnav a { display: inline-block; padding: 10px 0; font-weight: 700; font-size: 15px; }