/* Vindio Sotileza — site styles. Tokens first; dark theme follows the OS. */
:root {
  --bg: #f3f7f3;
  --surface: #ffffff;
  --ink: #0f1a13;
  --muted: #55655a;
  --line: #d9e3db;
  --green: #0b6b3a;
  --draw: #5e9e72; /* a lighter green, for draws */
  --green-ink: #ffffff;
  --neon: #35c94a;
  --tint: #e3f1e6;
  --warn: #b86a12;
  --warn-bg: #fbeedd;
  --danger: #b3261e;
  --card-dark: #0d1510;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b120d;
    --surface: #121c15;
    --ink: #e8f0ea;
    --muted: #97a99c;
    --line: #223127;
    --green: #1f9150;
    --draw: #86c79a;
    --neon: #45d95a;
    --tint: #16261b;
    --warn: #f0a44a;
    --warn-bg: #2b2012;
    --danger: #f2877f;
    --card-dark: #060a07;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); padding-inline: 16px; padding-block: 0 48px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1080px; margin-inline: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1; letter-spacing: .01em; }
.label { font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--muted); font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* header */
.top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: calc(16px + env(safe-area-inset-top, 0px)) 20px; } /* the inset: under the phone's status bar when installed as an app */
/* Thin bar fixed at the top once the header leaves the screen (js/header.js): small crest, menu and members' button;
   on phones the menu drops down from ☰. */
.bar { position: fixed; inset: 0 0 auto; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); padding: env(safe-area-inset-top, 0px) 16px 0; transform: translateY(-100%); transition: transform .2s ease; }
.bar.is-shown { transform: none; }
.bar-inner { max-width: 1080px; margin-inline: auto; height: 52px; display: flex; align-items: center; gap: 16px; }
.bar .brand svg { width: 34px; height: 34px; }
.bar .top-cta { padding: 6px 12px; font-size: 13px; }
.bar-menu { display: none; order: 3; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; font-size: 18px; line-height: 1; padding: 6px 10px; cursor: pointer; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 56px; height: 56px; flex: none; }
.brand b { font: 900 26px/0.9 var(--display); text-transform: uppercase; letter-spacing: .02em; display: block; }
.brand span { display: block; margin-top: 4px; font: 500 13px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
nav.main { display: flex; gap: 4px 18px; flex-wrap: wrap; margin-left: auto; align-items: center; }
nav.main a { text-decoration: none; font: 600 15px var(--label); text-transform: uppercase; letter-spacing: .06em; }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--green); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--label); text-transform: uppercase; letter-spacing: .06em; padding: 10px 16px; border-radius: 6px; text-decoration: none; border: 0; cursor: pointer; }
.btn-primary { background: var(--green); color: var(--green-ink); border: 1.5px solid var(--green); } /* same border as .btn-ghost: a pair lines up */
.btn-ghost { border: 1.5px solid var(--green); color: var(--green); background: transparent; }
/* Buttons: one alone is filled green (btn-primary); two together, one filled and the other outlined (btn-ghost). */

/* flash */
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-weight: 500; white-space: pre-line; } /* a line break in the message starts a new line */
.flash-success { background: var(--tint); color: var(--green); }
.flash-error { background: var(--warn-bg); color: var(--warn); }

/* hero: next match */
.hero { display: grid; grid-template-columns: 1.35fr 1fr; background: var(--card-dark); color: #eef6ef; border-radius: 10px; overflow: hidden; }
.hero-main { padding: 28px; display: grid; gap: 18px; align-content: start; background: repeating-linear-gradient(90deg, rgba(53,201,74,.10) 0 46px, transparent 46px 92px); }
.hero .label { color: #9fd9a8; }
.fixture { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.fixture .team { font: 900 clamp(32px, 6vw, 64px)/1 var(--display); text-transform: uppercase; }
.fixture .team:last-child { text-align: right; }
.fixture .vs { font: 800 20px var(--display); color: var(--neon); }
.when { display: flex; gap: 10px 22px; flex-wrap: wrap; font: 600 18px var(--label); letter-spacing: .04em; text-transform: uppercase; }
.meet { border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; display: grid; gap: 4px; }
.meet strong { font: 800 26px var(--display); text-transform: uppercase; color: #fff; }
.meet p { margin: 0; color: #b9c9bd; }
.poster { position: relative; aspect-ratio: 4 / 5; max-width: 100%; display: grid; place-items: center; background: linear-gradient(160deg, #0b6b3a, #06361d); } /* posters are portrait 4:5 */
.poster img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.poster svg { width: 60%; max-width: 220px; height: auto; }
.hero-poster { grid-template-columns: 1fr; }
.band-top { align-items: start; }
.band-top .hero { grid-template-columns: 1fr; }
.band-top > .calendar { margin-top: 0; align-self: stretch; display: grid; grid-template-rows: auto auto 1fr auto; } /* as tall as the poster: the matches share the extra room */
.hero-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 14px 18px; font: 600 16px var(--label); letter-spacing: .04em; text-transform: uppercase; }
.hero-strip .label { color: #9fd9a8; }
.hero-strip a { margin-left: auto; }
.poster-nav { font: 700 22px/1 var(--display); width: 36px; height: 32px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; cursor: pointer; }
.poster-nav:hover { background: rgba(255,255,255,.1); }
/* Posters not made yet: the design with the match data, greyed out. */
.poster img.is-pending { filter: grayscale(1) contrast(.9); opacity: .55; }

section { margin-top: 44px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.sec-head h1, .sec-head h2 { font-size: 34px; font-weight: 800; text-transform: uppercase; }
.ord { text-transform: none; } /* "1.er" in uppercase headings (the "ordinals" Twig filter) */
/* Wide screens show .wide-only; up to 720px (phones and small tablets, one column) .narrow-only: teams' initials,
   short labels, notes, compact tables. */
.narrow-only { display: none; }
@media (max-width: 720px) {
  .wide-only { display: none !important; }
  .narrow-only { display: revert; }
}
.table-note { font-size: 13px; margin: 8px 0 0; }
.join-cta { margin-top: 20px; }
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { text-decoration: underline; }
/* Action links shown as badges (section heads, tables, poster strip). */
.pill, .sec-head a, .meet a, .hero-strip a { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--label); letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; background: var(--tint); color: var(--green); text-decoration: none; white-space: nowrap; }
.pill:hover, .sec-head a:hover { background: var(--green); color: var(--green-ink); }
/* On the dark poster and meeting cards only the colours change. */
.meet a, .hero-strip a { background: rgba(191,242,198,.14); color: #bff2c6; }
.meet a:hover, .hero-strip a:hover { background: #bff2c6; color: #0d1510; }

/* fixtures list */
.matches { list-style: none; margin: 0; padding: 0; display: grid; }
.matches li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.matches .date { font: 600 16px var(--label); text-transform: uppercase; letter-spacing: .04em; }
.matches .date span { display: block; color: var(--muted); font-size: 13px; }
.matches .rival { font-weight: 600; }
.matches .rival small { display: block; color: var(--muted); font-weight: 400; }
.competition-logo { height: 13px; width: auto; vertical-align: -1px; }
.score { font: 800 22px var(--display); }
.matches li.cal-current { background: var(--tint); }
.matches li[role="option"], .matches li[data-poster] { cursor: pointer; }
.matches li[role="option"]:hover, .matches li[data-poster]:hover { background: var(--tint); }
.matches li[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--green); }
.cal-move { display: block; width: 100%; padding: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--green); font: 600 13px var(--label); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border-radius: 6px; margin-block: 6px; }
.cal-move:hover:not(:disabled) { background: var(--tint); }
.cal-move:disabled { opacity: .35; cursor: default; }
.score { justify-self: end; }
/* Scores from Racing's side: win green, draw a lighter green, loss red. */
.result-win { color: var(--green); }
.result-draw { color: var(--draw); }
.result-loss { color: var(--danger); }
.teamline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crest-sm { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.match-teams { white-space: nowrap; }
.match-teams .crest-sm { margin-right: 5px; }
h1 .match-teams .crest-sm { width: 30px; height: 30px; margin-right: 8px; }
/* Teams centred on the dash, so the dashes line up down a table (the quiniela's past results). */
.match-teams.centered { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.match-teams.centered .home { justify-self: end; text-align: right; }
.match-teams.centered .home .crest-sm { margin: 0 0 0 5px; }
.venue { font: 500 12px var(--label); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: right; max-width: 150px; }
.chip { font: 600 12px var(--label); letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.chip-home, .chip-ok { background: var(--tint); color: var(--green); }
.chip-away { border: 1px solid var(--line); color: var(--muted); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }

/* bands */
.band { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.prose p { margin: 0 0 12px; max-width: 65ch; }
.prose :is(ul, ol) { max-width: 65ch; } /* lists keep the same reading width as the paragraphs */
.prose h2, .prose h3 { margin: 18px 0 8px; }
.anniv { margin-top: 16px; display: flex; gap: 16px; align-items: center; padding: 16px; border: 2px solid var(--green); border-radius: 8px; }
/* Always one row: banner, text and crest; when the card is narrow (phones, bigger text) both images shrink. */
.anniv p { margin: 0; flex: 1 1 auto; min-width: 0; }
.anniv img { flex: 0 1 112px; min-width: 44px; width: 112px; height: auto; aspect-ratio: 1; }
.anniv .anniv-banner { flex-basis: 222px; min-width: 88px; width: 222px; aspect-ratio: 575 / 290; border-radius: 6px; } /* the peña's old banner, as tall as the crest */
@media (max-width: 480px) {
  .anniv { gap: 12px; }
  .anniv img { flex-basis: 64px; width: 64px; }
  .anniv .anniv-banner { flex-basis: 127px; width: 127px; }
}

.merch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.merch.full { grid-template-columns: repeat(4, 1fr); }
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 310px)); justify-content: space-between; gap: 16px; } /* narrow cards: a portrait photo stays a sensible height */
.news .item .ph { aspect-ratio: 4 / 5; } /* Instagram's portrait format, whole on every screen (same crop everywhere) */
.news .item .ph:has(img) { padding: 0; } /* a photo fills its box, edge to edge */
.news .item h3 { font-size: 17px; }
.item { display: grid; gap: 6px; align-content: start; }
.item .ph { aspect-ratio: 1; max-width: 100%; border-radius: 6px; background: var(--tint); display: grid; place-items: center; font: 800 20px var(--display); color: var(--green); text-transform: uppercase; overflow: hidden; text-align: center; padding: 8px; }
.item .ph img { width: 100%; height: 100%; object-fit: cover; }
.item h3 { font: 600 16px var(--body); }
.item p { margin: 0; color: var(--muted); font-size: 14px; }
.item.soldout .ph { opacity: .45; }
/* Catalogue: each product in its own card. */
.merch-card { display: grid; align-content: start; gap: 8px; padding: 10px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.merch-card .item { gap: 6px; }
.merch-card .item h3, .merch-card .item p, .merch-description { padding-inline: 4px; }
.merch-description { margin: 0; font-size: 14px; }

.join { margin-top: 44px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--green); color: var(--green-ink); border-radius: 10px; padding: 26px 28px; }
.join h2 { font-size: 36px; font-weight: 900; text-transform: uppercase; }
.join p { margin: 6px 0 0; opacity: .9; } /* one line on wide screens; wraps only when it does not fit */
.join .btn { background: #fff; color: #0b6b3a; }

footer.site { margin-top: 36px; display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
footer.site .social { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Local demo only: the real / demo date switch. */
.demo-date button { font: 600 12px var(--label); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
footer.site .social a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
footer.site .social a:hover { border-color: var(--ink); }
footer.site .social svg { width: 18px; height: 18px; }

/* poster viewer (/matches) */
.poster-dialog { border: 0; padding: 12px; border-radius: 12px; background: var(--card-dark); max-width: min(92vw, 520px); }
.poster-dialog::backdrop { background: rgba(0,0,0,.7); }
.poster-dialog img { display: block; width: 100%; height: auto; border-radius: 8px; }
img[data-zoom] { cursor: zoom-in; }
.poster-dialog form { display: flex; justify-content: center; margin-top: 10px; }

/* error pages */
.error-page { max-width: 560px; margin: 48px auto; display: grid; gap: 12px; text-align: center; justify-items: center; }
.error-page h1 { font-size: 44px; text-transform: uppercase; }
.error-page p { margin: 0; }

/* forms */
.form-card { max-width: 440px; margin: 24px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px; display: grid; gap: 14px; }
.form-card h1 { font-size: 34px; text-transform: uppercase; }
.field { display: grid; gap: 6px; }
.field label { font: 600 14px var(--label); letter-spacing: .06em; text-transform: uppercase; }
.field input { font: 16px var(--body); padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); width: 100%; }
.contact-form { display: grid; gap: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--green); }
.check small { display: block; font-size: 13px; }
.field input.code { font: 800 28px var(--display); letter-spacing: .3em; text-align: center; }
.error { color: var(--danger); font-weight: 500; margin: 0; }

/* members area */
.members-grid { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 32px; align-items: start; }
.card-id {
  --sheen: rgba(53,201,74,.14);
  --stripe: calc(100% / 6); /* width of each mowing stripe: 6 across the card, whatever its size */
  position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; color: #f2f8f3;
  max-width: 100%; padding: 16px 18px 21px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; /* more room below: the footer data sat too close to the edge */
  /* The porra 2026 pitch (grass texture and wide mowing stripes) under a tint that brings it to the card's green (#0b6b3a on average). */
  background:
    linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 32%, transparent 68%, var(--sheen) 100%),
    linear-gradient(rgba(0,90,77,.6), rgba(0,90,77,.6)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 var(--stripe), rgba(0,0,0,.18) var(--stripe) calc(var(--stripe) * 2)),
    url("../img/grass.jpg") left top / 400px #1a6e2e;
  box-shadow: 0 10px 28px rgba(6, 40, 20, .35), inset 0 0 0 1px rgba(255,255,255,.12);
}
.card-id.is-junior { --sheen: rgba(255,214,90,.18); }
/* The real crest, in its own colours, faint behind the text. */
.card-watermark { position: absolute; z-index: -1; width: 62%; right: -14%; bottom: -24%; opacity: .22; pointer-events: none; }
/* Credit-card proportion as a minimum: an invisible element across the whole card sets its height from its width,
   so the card keeps the proportion but grows (instead of cutting its content) when the content needs more room;
   side by side, all cards take the height of the tallest. */
.card-id::before { content: ""; grid-area: 1 / 1 / -1 / -1; align-self: start; width: 100%; aspect-ratio: 392 / 233; visibility: hidden; } /* 428 × 270 once the padding is added; its height follows the width, never the other way */
.card-top { grid-area: 1 / 1; } .card-body { grid-area: 2 / 1; } .card-foot { grid-area: 3 / 1; } /* explicit rows: the spacer spans them all */
/* Thin white ring a little inside the edge, like the crest's white ring. */
.card-id::after { content: ""; position: absolute; inset: 6px; border: 2px solid rgba(255,255,255,.65); border-radius: 13px; pointer-events: none; }
/* Fixed card size, like a real ID card (428 × 270, the ISO ID-1 proportion); phones: the same card scaled down. All cards the same height. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, 428px); grid-auto-rows: 1fr; gap: 18px; }
@media (max-width: 480px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }
.card-id { width: 428px; } /* one layout everywhere; smaller screens get it scaled (zoom set by js/fit-width.js) */
/* A card with its download button below; in a row, all cards keep the same height. */
.card-slot { display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.card-download { justify-self: start; }
/* Top row: crest, wordmark and season side by side, member number on the right (season and number: a label over a
   big value). The card always lays out at 428 px; on small screens it is shown scaled down (js/fit-width.js). */
.card-top { display: flex; align-items: center; gap: 4px 8px; }
.card-season, .card-number { display: grid; gap: 2px; }
.card-season { margin-left: 12px; } /* some air between the wordmark and the season */
.card-number { margin-left: auto; text-align: right; }
.card-id { grid-template-columns: minmax(0, 1fr); }
.card-id .card-top .no { font-size: 22px; }
.card-wordmark { height: 54px; width: auto; max-width: none; flex: none; } /* never shrinks */
.card-crest { width: 64px; height: 64px; }
.card-body { display: grid; }
.card-name { display: grid; gap: 4px; min-width: 0; align-self: center; } /* label + name + badges as one block, centred in the free space */
.card-name .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1px; }
.card-id .kicker { font: 600 10.5px var(--label); letter-spacing: .14em; text-transform: uppercase; color: #bfe8c6; display: block; }
.card-id .name { font: 800 28px/1.28 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.card-id .name > span { display: inline-block; }
.card-id .no { font: 900 34px/.9 var(--display); letter-spacing: .03em; white-space: nowrap; }
.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #fff; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.avatar-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avatar-form .btn { padding: 7px 12px; font-size: 13px; }
.avatar-form .muted { flex-basis: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avatar-initials-dark { background: var(--green); border-color: var(--line); }
.avatar-initials { display: grid; place-items: center; border-radius: 50%; border: 3px solid #fff; background: rgba(255,255,255,.14); font: 800 22px var(--display); color: #fff; }
.relation { justify-self: start; border: 1.5px solid transparent; padding: 3px 10px; border-radius: 999px; font: 700 11px var(--label); letter-spacing: .12em; text-transform: uppercase; }
/* Season-ticket holder: solid white; supporter: white outline. */
.relation-season_ticket_holder, .relation-junior { background: #fff; color: #0b6b3a; }
.relation-supporter { border: 1.5px solid rgba(255,255,255,.85); color: #fff; }
/* One row always: on narrow cards a long stand name wraps inside its own column. */
.card-foot { display: flex; gap: 6px 14px; font: 600 15px var(--label); border-top: 1px solid rgba(255,255,255,.18); padding-top: 8px; }
.card-foot > div { min-width: 0; }
.card-foot .is-number { text-align: right; } /* numbers right-aligned, text (stand) left-aligned */
.card-foot .card-since { margin-left: auto; text-align: right; flex: none; }
.cards { display: grid; gap: 14px; }
/* Two per row across the whole page, one on phones. */
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; align-content: start; } /* cards in a row share their height */
@media (max-width: 720px) { .cards-2 { grid-template-columns: 1fr; } }
.cards-2 .cards-note { grid-column: 1 / -1; margin: 0; }
.row-item { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: grid; gap: 6px; align-content: start; } /* stretched to its neighbour's height: the content stays at the top */
.row-item .head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.row-item h3 { font: 600 17px var(--body); }
.row-item p { margin: 0; }
.quiniela-top + .prizes { margin-top: 14px; }
.prizes ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prizes li { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; font-size: 15px; }
.prizes .ph { width: min(100%, 180px); aspect-ratio: 1; border-radius: 8px; background: #fff; border: 1px solid var(--line); overflow: hidden; margin-bottom: 4px; } /* photos on white, as the shop's */
.prizes .ph img { width: 100%; height: 100%; object-fit: contain; }
.rules ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; } /* quiniela rules card */
/* Prediction and rules: side by side only when the prediction gets room for the teams' full names and the rules
   still get a readable column; one under the other below that. */
.quiniela-top { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .quiniela-top { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); } }
.pin { font: 600 11px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--warn); }
.subnav { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.subnav a { padding: 10px 12px; font: 600 15px var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); }

/* quiniela */
.predict { display: grid; grid-template-columns: 1fr auto auto auto 1fr; gap: 10px; align-items: center; }
.predict .team { font: 800 22px var(--display); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.predict .team.right { justify-content: flex-end; text-align: right; }
.predict .crest-sm { width: 32px; height: 32px; flex: none; }
.predict input { width: 64px; font: 800 30px var(--display); text-align: center; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.table-wrap { overflow-x: auto; }
table.rank { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.rank th { text-align: left; font: 600 12px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 6px; border-bottom: 2px solid var(--ink); }
table.rank td { padding: 9px 6px; border-bottom: 1px solid var(--line); }
table.rank td.n, table.rank th.n { text-align: right; }
table.rank tr.me td { background: var(--tint); }
table.rank tr.me td:not(.pos) { font-weight: 600; } /* the position keeps its heavier weight, like the other rows */
table.rank .pos { font: 800 18px var(--display); width: 36px; }
/* Two tables side by side under one section title, each with its own small heading. The headings share one row, so
   both tables start level even when a heading wraps. */
.sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sub-head h3 { font-size: 22px; font-weight: 800; text-transform: uppercase; }
.countdown { margin: 0; font: 600 14px var(--label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.countdown strong { color: var(--green); font-size: 16px; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs .pill { border: 0; cursor: pointer; font-size: 13px; }
.tabs .pill[aria-selected="true"] { background: var(--green); color: var(--green-ink); } /* the tramo shown */
@media (min-width: 801px) {
  .band-tables > * { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .band-tables > * > .sub-head { align-self: end; }
}
section.narrow { max-width: 640px; } /* a match's predictions (quiniela/match): few number columns, kept close to the names */
table.rank .hit { color: var(--green); font-weight: 700; } /* ✓ on an exact score or Racing's goals */

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; }
  .band, .members-grid { grid-template-columns: 1fr; }
  .merch.full { grid-template-columns: repeat(2, 1fr); } /* the home keeps its three items in one row */
  .news { grid-template-columns: minmax(0, 1fr); } /* one under the other: three columns are too narrow for the text */
  /* Each news item in a row: small photo on the left, date, title and text on its right (a full-width photo each
     made the three take more than a screen). */
  .news .item { grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; }
  .news .item .ph { grid-row: span 3; font-size: 13px; padding: 4px; }
  /* Menu on its own line under the logo; the members button stays up, next to the logo. */
  .top-cta { order: 2; margin-left: auto; }
  nav.main { order: 3; flex-basis: 100%; margin-left: 0; }
  /* Fixed bar: crest, members' button and ☰; the menu drops down under the bar when open. */
  .bar-menu { display: block; }
  .bar nav.main { display: none; }
  .bar.is-open nav.main { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: absolute; top: 100%; left: 0; right: 0; padding: 14px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) {
  /* Phones: the score stays on the row, on the right; only the (long) stadium of upcoming matches goes under the rival. */
  .matches li { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 4px 10px; }
  .matches li > .venue { grid-column: 2 / -1; justify-self: start; text-align: left; max-width: none; font-size: 12px; }
  .hero-main { padding: 20px; }
  .predict .team, .predict .team.right { font-size: 18px; flex-direction: column; align-items: center; gap: 6px; } /* phones: crest centred above the initials */
  .predict .team .crest-sm { order: -1; }
  /* Phones: site menu on one line and every members tab visible without scrolling sideways. */
  nav.main { gap: 4px 12px; }
  nav.main a { font-size: 13px; letter-spacing: .04em; }
  .top-cta { padding: 6px 10px; font-size: 13px; }
  /* Logo and name shrink with the screen so "Mi área" stays next to them down to 320px phones (sizes as-is from 375px). */
  .top { column-gap: clamp(8px, 4.27vw, 16px); }
  .brand { gap: clamp(8px, 3.2vw, 12px); }
  .brand svg { width: clamp(40px, 12.8vw, 48px); height: clamp(40px, 12.8vw, 48px); }
  .brand b { font-size: clamp(18px, 5.87vw, 22px); }
  .brand span { font-size: clamp(9px, 2.93vw, 11px); }
  .subnav { gap: 0; }
  /* Tabs shrink with the screen so all six (admins) fit in one row down to 320px phones. */
  .subnav a { padding: 10px clamp(4px, 1.6vw, 6px); font-size: clamp(10px, 3.4vw, 13px); letter-spacing: .03em; }
  .sec-head h1, .sec-head h2 { font-size: 26px; }
  .row-item .head { flex-direction: column; gap: 2px; } /* the date always under the title, whatever its length */
  /* Home: its three products on one row (two per row left the third alone). */
  .merch:not(.full) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .merch:not(.full) .item h3 { font-size: 13px; }
  .merch:not(.full) .item p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* Notice under a field that is empty or wrong (js/form-errors.js), instead of the browser's own bubble. */
.field-error { margin: 2px 0 0; color: var(--warn); font-size: 14px; font-weight: 500; }
.is-invalid, .is-invalid:focus { border-color: var(--warn) !important; outline-color: var(--warn); }