/* Ventaja FC — everything the static pages (/about, /privacy, /support, /terms) add on top of the
   estilo-aedon template. base.css, components.css and pages.css next to this file are the template's own,
   byte for byte, so a fix there can be re-copied; every Ventaja rule lives here, loaded last.
   Rules for anything added here (movimiento-y-luz.md §5): animate translate/scale/opacity, never
   `transform` (it would fight glow.js's tilt); scroll-linked animation only inside
   prefers-reduced-motion: no-preference; never change --header-h or scroll-padding-top. */

/* ---------- Type ----------
   Self-hosted Inter (the CSP allows fonts from this origin only — no Google Fonts). It is the Latin subset
   the site already served, weight axis 100–900 and no optical-size axis, so `font-optical-sizing: auto`
   is a harmless no-op and the declared range must be the full 100 900 or 800 would be faked. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/Inter-var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Without the display cut, big Inter reads a touch loose: tighten only the largest headings. */
.pg-h1, .page-hero h1 { letter-spacing: -.035em; }

/* ---------- Brand: the V mark + VENTAJA FC, as in the app's header ---------- */
.brand-mark { width: 36px; height: 33px; color: var(--text); }
.brand-name { font-weight: 900; letter-spacing: -.02em; font-size: 1.05rem; }
.brand-name .fc, .foot-name .fc { color: var(--muted); }
.foot-logo { gap: 10px; }
.foot-mark { width: 32px; height: 29px; color: var(--text); flex: none; }
.foot-name { font-weight: 900; letter-spacing: -.02em; }
@media (max-width: 480px) { .brand-mark { width: 30px; height: 28px; } }

/* "Live scores" leads the phone drawer; on desktop the pill's button says it instead. */
.nav a.nav-home { display: none; }
@media (max-width: 900px) { .nav a.nav-home { display: flex; } }
/* Four links, a language switch and the button do not fit the pill between 901 and 1100 px (in Spanish
   above all): the button goes, the links stay (componentes.md §7, «Cabecera con más enlaces»). */
@media (min-width: 901px) and (max-width: 1100px) { .header-cta { display: none; } }

/* ---------- No WhatsApp, no bottom contact bar ----------
   Ventaja has neither, but base.css still reserves room for the bar on phones: give it back. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse) {
  .site-footer { padding-bottom: 32px; }
  html { scroll-padding-bottom: 0; }
}
.site-footer a.ext { display: inline-flex; align-items: center; gap: 6px; }
.site-footer a.ext svg { width: 14px; height: 14px; color: var(--muted); }
.site-footer li a:hover { color: var(--text); }

/* ---------- Legal documents (Privacy, Terms) ----------
   Each page carries the full English and the full Spanish document; <html lang> — set by head.js before
   the first paint, and by core.js on a switch — shows one. Find-in-page and print see only that one. */
:root:not([lang="es"]) [data-lang-block="es"],
:root[lang="es"] [data-lang-block="en"] { display: none; }

.art-wrap { padding-top: clamp(32px, 5vw, 56px); }
.art-body { max-width: 74ch; }
.art-body h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin: 48px 0 12px; scroll-margin-top: calc(var(--header-h) + 16px); }
.art-body h3 { font-size: 1.06rem; letter-spacing: -.01em; margin: 26px 0 8px; color: var(--text); }
.art-body p, .art-body li { color: var(--text-2); }
.art-body p + p { margin-top: 12px; }
.art-body strong { color: var(--text); font-weight: 650; }
.art-body ul:not(.ticks) { display: grid; gap: 8px; margin: 12px 0 16px; }
.art-body ul:not(.ticks) > li { position: relative; padding-left: 22px; }
.art-body ul:not(.ticks) > li::before { content: ""; position: absolute; left: 4px; top: .8em; width: 9px; height: 2px; border-radius: 1px; background: var(--muted); }
.art-body :is(p, li, td) a:where(:not(.btn)) { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-body code { font-family: var(--f-mono); font-size: .86em; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); overflow-wrap: anywhere; }
.art-body .ticks { margin: 14px 0 0; }
.art-body .ticks span { color: var(--text-2); }
/* The summary that opens each document: a quiet panel, not a lit card — it is read, not played with. */
.art-short { padding: clamp(22px, 3vw, 30px); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); margin-bottom: 8px; }
.art-short h2 { margin: 0 0 4px; }
.art-note { margin-top: 20px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--brand-line); background: linear-gradient(135deg, var(--brand-soft), transparent 70%), var(--surface); }
.art-note p { color: var(--text); }
/* "On this page": the template's jump pills, inside the document column. */
.art-body .pg-jump { margin: 28px 0 8px; }
/* Tables scroll inside their own box on a phone, never the page. */
.table-wrap { overflow-x: auto; margin: 14px 0 18px; border: 1px solid var(--line); border-radius: 14px; }
.table-wrap:focus-visible { outline-offset: 2px; }
.art-body table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.art-body caption { text-align: left; padding: 12px 16px 0; color: var(--muted); font-size: .82rem; }
.art-body th, .art-body td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.art-body tr:last-child td { border-bottom: 0; }
.art-body th { color: var(--muted); font: 600 .72rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--surface); }
.art-body td { color: var(--text-2); }
.art-body td:first-child { white-space: nowrap; }
.art-end { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.art-end p { color: var(--muted); }

/* ---------- Support ---------- */
.help-mail { display: inline-flex; align-items: center; gap: 10px; }
.help-mail svg { width: 18px; height: 18px; }
.faq-a ol { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 20px; list-style: decimal; color: var(--text-2); }
.faq-a a { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
.faq-a strong { color: var(--text); }
.play-line .pg-line-list { display: grid; gap: 14px; }
.play-line a.btn { margin-top: 6px; }
/* .pg-line-list colours and sizes every svg for its list icons (silver, 28 px): on the silver button that
   made the phone icon invisible. Buttons keep their own icon. */
.play-line .pg-ctas svg { width: 18px; height: 18px; margin-top: 0; color: currentColor; }
/* Help by country (2026-10-03). .pg-line-list gives every li a 28px icon column; these items have no icon. */
.play-line .play-help { display: grid; gap: 8px; margin: 0; padding: 0; }
.play-line .play-help li { display: block; color: var(--text-2); font-size: .97rem; }
.play-help strong { color: var(--text); }
.play-help a { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
/* The template's .card does the rest; the "Read it" line sits at the bottom of each. */
.doc-cards .more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; color: var(--brand); font-weight: 600; font-size: .92rem; }
.doc-cards .more svg { width: 16px; height: 16px; }

/* ---------- About ---------- */
.portrait { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); max-width: 360px; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.pg-who-side { display: grid; gap: 20px; }
.pg-who-text .pull { margin-top: 26px; padding: 4px 0 4px 18px; border-left: 2px solid var(--brand); color: var(--text); font-size: 1.15rem; font-weight: 600; line-height: 1.45; max-width: 52ch; text-wrap: balance; }
.feat-cards .card h3, .next-cards .card h3 { font-size: 1.12rem; }
/* A status pill hugs its text but may wrap: "En la app para iPhone · luego en la web" is wider than a
   phone card, and a pill that cannot wrap pushed the whole grid past the screen. */
.next-cards .pg-tag { align-self: flex-start; max-width: 100%; white-space: normal; line-height: 1.35; padding-block: 6px; }
.skills { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px 28px; margin: 0; }
.skills dt { font: 600 .72rem/1.9 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.skills dd { color: var(--text-2); }
@media (max-width: 640px) { .skills { grid-template-columns: 1fr; gap: 4px 0; } .skills dd { margin-bottom: 12px; } }
@media (max-width: 900px) { .pg-who { grid-template-columns: 1fr; } .portrait { max-width: 280px; } }

/* ---------- Print: black on white, no chrome ---------- */
@media print {
  .site-header, .nav-backdrop, .cursor-light, .lang, .pg-jump, .cta-band-actions, .foot-grid { display: none !important; }
  body, .page-hero, .pg-hero, .section, .section-alt, .site-footer, .art-short, .art-note, .card { background: #fff !important; color: #000 !important; }
  .page-hero, .pg-hero { padding-top: 0; }
  :is(h1, h2, h3, p, li, td, th, dd, dt, strong, .lede, .art-meta, .h-accent) { color: #000 !important; }
  .art-body :is(p, li, td) a { color: #000; }
}

/* Support › Security: plain reading block under its heading. */
.sec-body { display: grid; gap: 14px; max-width: 66ch; }
.sec-body p { color: var(--text-2); }
.sec-mail { margin-top: 4px; }

/* Grids on phones: a 1fr track grows to its widest unbreakable child (a long button, a pill), so pin the
   single column to the screen and let long buttons wrap. */
@media (max-width: 860px) { .pg-line { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cards, .cards-3 { grid-template-columns: minmax(0, 1fr); } }
.pg-ctas .btn, .cta-band-actions .btn { max-width: 100%; white-space: normal; text-align: center; }