/* CARIBASOL V2-mix — BASE (giro 13): tokens + base rules shared by every page except the Home (which keeps its own inline system, index.html).
   Moved unchanged from the top of css/results.css so that contact.html and the pages in arrival use the same tokens, type and page gradient
   as T-RESULTS / T-DETAIL. Load order: fonts.css → base.css → page CSS (results / detail / contact / page) → prefs → shared → shell. */
/* ---- tokens (V2 values; the page margin --gx and --container live in css/shell.css §0 (giro 13b, D-133) — one container for every page; production = 07-visual/css/tokens.css + V2 amendments) ---- */
:root {
  --ink: #0E2240; --muted: #4A5B73; --line: #D7E2EE; --line-2: #B8C6D8; --ground: #F7FAFD; --ground-2: #EAF1F9; --white: #fff;
  --blue: #0D53A1; --blue-h: #0A458A; --blue-a: #083A75; --blue-t: #E8F1FB; --deep: #083A73; --deep-ink: #CFE0F5; --amber: #F4840C; --error: #b42318;
  --r-ctl: calc(9px * var(--ui)); --r-panel: calc(15px * var(--ui)); --r-photo: calc(15px * var(--ui)); --r-big: calc(18px * var(--ui));
  --sticky-top: 0px; --hdr-h: calc(57px * var(--ui));   /* phones: 72 → 76 with the larger logo (D-108, giro 9) */
  --font: Inter, 'Inter Fallback', system-ui, sans-serif;
  --f-title: 'Caribasol Sans', 'Caribasol Fallback', system-ui, sans-serif;   /* giro 27 (point 1): the brand face; was Archivo Expanded (D-090) */
  --surf-tl: radial-gradient(110% 90% at 0% 0%, var(--tl-1, #FFFFFF) 0%, var(--tl-2, #F5F9FE) 50%, var(--tl-3, #E9F1FA) 100%);   /* giro 23 (D-212): stops = tone tokens, css/shell.css §0b */
  --surf-cr: radial-gradient(100% 90% at 100% 50%, var(--cr-1, #FFFFFF) 0%, var(--cr-2, #F5F9FE) 50%, var(--cr-3, #E9F1FA) 100%);
  --surf-panel: radial-gradient(90% 90% at 50% 0%, var(--pn-1, #FFFFFF) 0%, var(--pn-2, #F6F9FD) 55%, var(--pn-3, #EBF2FA) 100%);
  --ease: cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 1024px) { :root { --sticky-top: calc(72px * var(--ui)); --hdr-h: calc(63px * var(--ui)); } }   /* D-062 / D-099 (giro 8): 16 offset + 68 bar + 12 gap; docked bar 84 */

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.5; }
h1, h2, h3 { font-family: var(--f-title); }   /* D-090: giro 27: titles Caribasol Sans Bold; prices, data and controls stay Inter */
a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-h); }
input, button, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }   /* giro 27: + clip-path (WebKit counted the hidden text in the scroll width of the Buy compact bar) */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: calc(3px * var(--ui)); }
.skip-link { position: absolute; left: calc(12px * var(--ui)); top: calc(-45px * var(--ui)); z-index: 50; background: var(--white); color: var(--blue); padding: calc(8px * var(--ui)) calc(11px * var(--ui)); border-radius: calc(749px * var(--ui)); font-weight: 600; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); box-shadow: 0 8px 24px rgba(14, 34, 64, .12); }
.skip-link:focus { top: calc(12px * var(--ui)); }
.kicker { margin: 0; font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tv { display: inline-block; vertical-align: middle; font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--ground-2); color: var(--muted); padding: 2px calc(5px * var(--ui)); border-radius: calc(749px * var(--ui)); }
.tv--line { margin-top: calc(6px * var(--ui)); border: 1px solid var(--deep-ink); background: transparent; color: var(--deep-ink); }
.note { font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); }
code { font-family: ui-monospace, monospace; font-size: .92em; }

/* ---- page gradient (V2): one continuous gradient over the whole page ---- */
.page { background: linear-gradient(180deg, #F7FAFD 0%, #EEF3F9 20%, #EEF3F9 45%, #E6EEF7 70%, #DCE7F3 100%); padding-bottom: calc(72px * var(--ui)); }

/* ---- review aid ---- */
.review-note { position: fixed; left: calc(11px * var(--ui)); bottom: calc(11px * var(--ui)); z-index: 9; font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--ink); color: #fff; padding: calc(5px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(749px * var(--ui)); opacity: .85; max-width: calc(100vw - calc(21px * var(--ui))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023.98px) { .review-note { display: none; } }

/* ---- motion discipline ---- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }