/* GENERATED FILE — do not edit.
   Edit styles/src/*.css and run: python3 tools/build_css.py */

/* ═══ src/tokens.css ═══ */

/* Viajes Únicos — design tokens v6 «Sevan»
   Modern, fresh and technological, still rooted in the Caucasus. One brand, three hues, each with one job:
     · sevan    (deep lake teal)     the brand: links, kickers, rules, trust, «done», Georgia, the closing band, the footer
     · granada  (vivid pomegranate)  the action: primary button on paper, the price — and nothing else
     · ámbar    (apricot gold)       the light: highlights over photography and dark surfaces, Armenia, «best months», warnings
   Everything else is neutral and cool: ink (a petrol near-black) and paper (crisp whites and cool greys).
   Photography puts the warmth on the page; the system stays crisp around it.

   Three layers:
     1. Primitives  raw scales (--clr-sevan-700, --clr-ink-800 ...). Never used directly by components.
     2. Semantic    roles components use (--clr-text, --clr-cta-bg ...). A surface re-maps them.
     3. Scales      type, space, radius, shadow, z-index, motion, layout.

   Surfaces: [data-surface="alt"] (cool grey band) · [data-surface="dark"] (ink, over imagery) · [data-surface="deep"] (sevan 950, the footer)
   re-map the semantic layer, so the same component works everywhere with no variants.
   Contrast of every pair listed in styleguide.html is verified by tools/check_contrast.py.

   Breakpoints (custom properties can't be used inside @media, so they live here as reference):
     sm 560px · md 760px (mobile ↔ desktop switch) · lg 1100px (nav collapses) · xl 1200px */

:root {
    /* ── 1. Primitives ─────────────────────────────────────────────── */

    /* Ink — petrol near-black: dark surfaces, text and the cool greys derived from it */
    --clr-ink-950: #051115;
    --clr-ink-900: #0A1B20;
    --clr-ink-800: #14272D;
    --clr-ink-700: #233940;
    --clr-ink-600: #384E56;
    --clr-ink-500: #465C64;
    --clr-ink-400: #6D858D;
    --clr-ink-300: #9AAFB6;
    --clr-ink-200: #C5D4D9;
    --clr-ink-100: #E0EAED;
    --clr-ink-50: #F0F6F8;

    /* Paper — crisp white for the page, cool greys for bands, borders, placeholders and labels on cream */
    --clr-paper-50: #F9FCFE;
    --clr-paper-100: #F1F6F8;
    --clr-paper-200: #E3EBEF;
    --clr-paper-300: #D0DCE1;
    --clr-paper-400: #A1B1B7;
    --clr-paper-500: #728489;
    --clr-paper-600: #4E5E63;
    --clr-paper-700: #344247;
    --clr-paper-800: #1A262A;
    --clr-white: #FFFFFF;

    /* Sevan — the deep teal of the lake and the mountain sky: the brand colour. 700 is the text step (7.5:1 on white), 600 takes white type, 500 is the vivid fill */
    --clr-sevan-950: #042329;
    --clr-sevan-900: #06343B;
    --clr-sevan-800: #084852;
    --clr-sevan-700: #0B5F6A;
    --clr-sevan-600: #117886;
    --clr-sevan-500: #1897A6;
    --clr-sevan-400: #45B5BF;
    --clr-sevan-300: #80D1D6;
    --clr-sevan-200: #B5E5E9;
    --clr-sevan-100: #DAF3F5;
    --clr-sevan-50: #EEFAFB;

    /* Granada — the pomegranate of both countries, now vivid: the action colour. 600 is the button (white type, 6:1); its hue (12°) never carries a state */
    --clr-granada-800: #880A33;
    --clr-granada-700: #A4123D;
    --clr-granada-600: #C4134B;
    --clr-granada-500: #E22E60;
    --clr-granada-400: #F26B86;
    --clr-granada-300: #FBA4B4;
    --clr-granada-100: #FFE6EA;
    --clr-granada-50: #FFF5F7;

    /* Ámbar — apricot gold, the fruit of Armenia and the light on the stone. 800/700 are text-safe on white, 500/400 are fills that take ink type, 300/200 live on dark */
    --clr-ambar-900: #4C2904;
    --clr-ambar-800: #6E4109;
    --clr-ambar-700: #90570A;
    --clr-ambar-600: #B17000;
    --clr-ambar-500: #E09C1A;
    --clr-ambar-400: #EBB34B;
    --clr-ambar-300: #F2CC7E;
    --clr-ambar-200: #F6DFAC;
    --clr-ambar-100: #FEF1D4;
    --clr-ambar-50: #FFFAEB;

    /* Status hues that are not the brand: success (a true green, so «done» never looks like the teal UI) and danger (the one functional red, 4°) */
    --clr-success-700: #0A6D37;
    --clr-success-300: #8CD19E;
    --clr-success-100: #DEF6E3;
    --clr-danger-600: #B42318;
    --clr-danger-400: #FF8A80;
    --clr-danger-100: #FDE4E1;

    /* ── 2. Semantic roles (paper surface = default) ───────────────── */

    /* Surfaces */
    --clr-bg: var(--clr-white);
    --clr-bg-alt: var(--clr-paper-100);
    --clr-surface: var(--clr-white);
    --clr-night: var(--clr-ink-900);
    --clr-overlay: rgb(10 27 32 / 0.9);

    /* Text */
    --clr-text: var(--clr-ink-800);
    --clr-text-muted: var(--clr-ink-500);
    --clr-on-accent: var(--clr-white);

    /* Brand: kickers, overlines, rules, counters, icon tiles and links are all sevan on paper (ámbar on dark) */
    --clr-brand: var(--clr-sevan-700);
    --clr-brand-strong: var(--clr-sevan-900);
    --clr-brand-soft: var(--clr-sevan-100);
    --clr-brand-line: var(--clr-sevan-300);
    --clr-brand-vivid: var(--clr-sevan-500);
    --clr-accent-text: var(--clr-sevan-700);
    --clr-link: var(--clr-sevan-700);
    --clr-link-hover: var(--clr-sevan-900);
    --clr-done: var(--clr-success-700);
    --clr-done-soft: var(--clr-success-100);
    --clr-trust: var(--clr-sevan-700);
    --clr-trust-bg: var(--clr-sevan-100);
    --clr-trust-line: var(--clr-sevan-300);

    /* Light: the warm highlight. `accent` is a mark (never text), `accent-strong` is the same mark where it must read (≥ 3:1), `highlight` is emphasis on dark */
    --clr-accent: var(--clr-ambar-500);
    --clr-accent-strong: var(--clr-ambar-700);
    --clr-accent-soft: var(--clr-ambar-100);
    --clr-highlight: var(--clr-ambar-200);

    /* Action: one colour, two places (primary button, price). Over imagery the button turns to white with ink type */
    --clr-cta-bg: var(--clr-granada-600);
    --clr-cta-bg-hover: var(--clr-granada-700);
    --clr-price: var(--clr-granada-600);

    /* The two countries: Georgia wears the brand teal, Armenia the gold. *-pin takes white type; *-map is the fill on the map */
    --clr-georgia: var(--clr-sevan-700);
    --clr-georgia-soft: var(--clr-sevan-100);
    --clr-georgia-line: var(--clr-sevan-300);
    --clr-georgia-pin: var(--clr-sevan-600);
    --clr-georgia-map: var(--clr-sevan-500);
    --clr-armenia: var(--clr-ambar-700);
    --clr-armenia-soft: var(--clr-ambar-100);
    --clr-armenia-line: var(--clr-ambar-300);
    --clr-armenia-pin: var(--clr-ambar-700);
    --clr-armenia-map: var(--clr-ambar-500);

    /* Lines & focus */
    --clr-border: rgb(10 27 32 / 0.1);
    --clr-border-strong: var(--clr-paper-500);
    --clr-focus: var(--clr-sevan-700);

    /* Chips & secondary button */
    --clr-chip-bg: var(--clr-white);
    --clr-chip-border: var(--clr-ink-200);
    --clr-btn-sec-bg: transparent;
    --clr-btn-sec-bg-hover: rgb(10 27 32 / 0.06);
    --clr-btn-sec-border: var(--clr-ink-700);

    /* Form fields */
    --clr-field-bg: var(--clr-white);
    --clr-field-text: var(--clr-text);
    --clr-field-border: var(--clr-paper-500);
    --clr-field-placeholder: var(--clr-paper-600);

    /* Status: success is green, warning is ámbar, info is neutral ink; only danger has a hue of its own */
    --clr-success: var(--clr-success-700);
    --clr-success-bg: var(--clr-success-100);
    --clr-warning: var(--clr-ambar-800);
    --clr-warning-bg: var(--clr-ambar-100);
    --clr-danger: var(--clr-danger-600);
    --clr-danger-bg: var(--clr-danger-100);
    --clr-info: var(--clr-ink-700);
    --clr-info-bg: var(--clr-ink-50);

    /* Cream: the one paper that is not white — the ticket */
    --clr-cream: var(--clr-ambar-50);
    --clr-cream-text-muted: var(--clr-paper-600);
    --clr-cream-line: var(--clr-paper-400);

    /* Objects: the closing band (the brand, deep), the track of a meter, the placeholder under a photo */
    --clr-band: var(--clr-sevan-800);
    --clr-track: var(--clr-paper-200);
    --clr-media-bg: var(--clr-paper-200);

    /* Glass & scrims (used over imagery) */
    --scrim-rgb: 5 17 21;
    --clr-glass: rgb(8 24 30 / 0.66);
    --clr-glass-border: rgb(255 255 255 / 0.18);

    /* Gradients: the brand one is for big bands only (closing band, page heroes without a photo); the button stays flat */
    --grad-cta: var(--clr-cta-bg);
    --grad-brand: linear-gradient(135deg, var(--clr-sevan-700) 0%, var(--clr-sevan-900) 60%, var(--clr-ink-900) 100%);
    --grad-dusk: linear-gradient(180deg, var(--clr-ink-900) 0%, var(--clr-sevan-700) 46%, var(--clr-ambar-400) 100%);

    /* ── 3. Scales ─────────────────────────────────────────────────── */

    /* Typography — one family, like the system font of an app: Plus Jakarta Sans; heavy and tight at display sizes, regular in text */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

    --fs-display: clamp(2.6rem, 5.4vw, 5rem);
    --fs-h2: clamp(1.95rem, 1.15rem + 2.4vw, 3.1rem);
    --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --fs-h4: 1.125rem;
    --fs-lead: clamp(1.02rem, 1.5vw, 1.25rem);
    --fs-xl: 1.375rem;      /* 22 — brand wordmark */
    --fs-lg: 1.0625rem;     /* 17 — field values, large UI */
    --fs-body: 1rem;        /* 16 */
    --fs-ui: 0.9375rem;     /* 15 — buttons, nav */
    --fs-md: 0.875rem;      /* 14 — secondary text */
    --fs-sm: 0.8125rem;     /* 13 — chips, kickers */
    --fs-xs: 0.75rem;       /* 12 — captions, badges */
    --fs-2xs: 0.6875rem;    /* 11 — field labels */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-display: 800;      /* the display weight */

    --lh-display: 1.02;
    --lh-heading: 1.1;
    --lh-lead: 1.55;
    --lh-body: 1.6;
    --lh-ui: 1.35;

    --ls-display: -0.035em;
    --ls-heading: -0.025em;
    --ls-label: 0.12em;
    --ls-overline: 0.14em;

    /* Spacing — 4px base */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --section-y: clamp(4.5rem, 3rem + 5.5vw, 7.5rem);

    /* Layout */
    --container: 1240px;
    --gutter: 20px;
    --header-h: 72px;

    /* Radius — soft but not bubbly; pills for what is pressed */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Elevation — ink-tinted, soft and low; the action button carries a granada glow */
    --shadow-sm: 0 1px 2px rgb(10 27 32 / 0.05), 0 2px 8px -2px rgb(10 27 32 / 0.07);
    --shadow-md: 0 4px 12px -2px rgb(10 27 32 / 0.08), 0 14px 32px -10px rgb(10 27 32 / 0.14);
    --shadow-lg: 0 20px 48px -14px rgb(10 27 32 / 0.24);
    --shadow-glass: 0 28px 64px -28px rgb(5 10 12 / 0.7);
    --shadow-cta: 0 8px 20px -8px rgb(196 19 75 / 0.45);
    --shadow-cta-hover: 0 12px 26px -8px rgb(196 19 75 / 0.55);

    /* Z-index */
    --z-raised: 2;
    --z-header: 50;
    --z-sticky: 55;
    --z-overlay: 60;
    --z-draft: 70;
    --z-skip: 100;

    /* Motion — never animate the LCP element; everything is disabled under prefers-reduced-motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --trans-fast: 0.2s ease;
    --trans-normal: 0.4s var(--ease-out);
    --trans-slow: 0.75s var(--ease-out);
    --trans-fade: 0.9s var(--ease-in-out); /* photo crossfade: symmetric, so neither the start nor the end reads as a cut */
}

/* ── Surfaces: re-map the semantic layer ─────────────────────────── */

/* Alt: the cool grey band between white sections */
[data-surface="alt"] {
    --clr-bg: var(--clr-paper-100);
    --clr-bg-alt: var(--clr-paper-200);
    --clr-chip-bg: var(--clr-white);
}

/* Dark: ink over imagery (hero, header, app bar). Deep shares every rule and only swaps the teal in */
[data-surface="dark"],
[data-surface="deep"] {
    --clr-bg: var(--clr-ink-900);
    --clr-bg-alt: var(--clr-ink-800);
    --clr-surface: var(--clr-ink-800);

    --clr-text: var(--clr-white);
    --clr-text-muted: var(--clr-ink-200);
    --clr-on-accent: var(--clr-ink-900);

    --clr-brand: var(--clr-ambar-300);
    --clr-brand-strong: var(--clr-ambar-200);
    --clr-brand-soft: rgb(242 204 126 / 0.14);
    --clr-brand-line: rgb(242 204 126 / 0.4);
    --clr-brand-vivid: var(--clr-sevan-400);
    --clr-accent: var(--clr-ambar-400);
    --clr-accent-strong: var(--clr-ambar-400);
    --clr-accent-soft: rgb(235 179 75 / 0.16);
    --clr-accent-text: var(--clr-ambar-300);
    --clr-highlight: var(--clr-ambar-200);
    --clr-link: var(--clr-ambar-200);
    --clr-link-hover: var(--clr-white);
    --clr-cta-bg: var(--clr-white);
    --clr-cta-bg-hover: var(--clr-paper-50);
    --clr-price: var(--clr-ambar-300);
    --shadow-cta: 0 8px 20px -8px rgb(5 17 21 / 0.5);
    --shadow-cta-hover: 0 12px 26px -8px rgb(5 17 21 / 0.6);

    --clr-border: rgb(255 255 255 / 0.16);
    --clr-border-strong: var(--clr-ink-300);
    --clr-focus: var(--clr-ambar-200);

    --clr-chip-bg: rgb(255 255 255 / 0.1);
    --clr-chip-border: rgb(255 255 255 / 0.26);
    --clr-btn-sec-bg: rgb(255 255 255 / 0.1);
    --clr-btn-sec-bg-hover: rgb(255 255 255 / 0.18);
    --clr-btn-sec-border: rgb(255 255 255 / 0.3);

    --clr-field-bg: rgb(255 255 255 / 0.1);
    --clr-field-text: var(--clr-white);
    --clr-field-border: var(--clr-ink-300);
    --clr-field-placeholder: var(--clr-ink-200);

    --clr-success: var(--clr-success-300);
    --clr-success-bg: rgb(140 209 158 / 0.14);
    --clr-done: var(--clr-success-300);
    --clr-done-soft: rgb(140 209 158 / 0.12);
    --clr-warning: var(--clr-ambar-300);
    --clr-warning-bg: rgb(242 204 126 / 0.14);
    --clr-danger: var(--clr-danger-400);
    --clr-danger-bg: rgb(255 138 128 / 0.14);
    --clr-info: var(--clr-ink-200);
    --clr-info-bg: rgb(197 212 217 / 0.14);

    --clr-trust: var(--clr-ambar-300);
    --clr-trust-bg: rgb(242 204 126 / 0.14);
    --clr-trust-line: rgb(242 204 126 / 0.4);

    --clr-track: rgb(255 255 255 / 0.16);
    --clr-media-bg: var(--clr-ink-800);
}

/* Deep: the footer and the closing blocks. Deep teal with the same ámbar accents as dark */
[data-surface="deep"] {
    --clr-bg: var(--clr-sevan-950);
    --clr-bg-alt: var(--clr-sevan-900);
    --clr-surface: var(--clr-sevan-900);
    --clr-text-muted: var(--clr-sevan-200);
    --clr-border: rgb(255 255 255 / 0.14);
}

@media (max-width: 760px) {
    :root {
        --header-h: 64px;
    }
}

/* Small phones: the headline keeps "un viaje único." on one line */
@media (max-width: 400px) {
    :root {
        --fs-display: 2.25rem;
    }
}

/* ═══ src/base.css ═══ */

/* Viajes Únicos — base: fonts, reset, element defaults, layout primitives, type roles, utilities, motion */

/* ── Fonts (self-hosted, latin subsets) ───────────────────────────── */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../assets/fonts/plus-jakarta-sans-latin.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;
}

/* Native-script accents: only the 9 Georgian + 7 Armenian glyphs used in the hero */
@font-face {
    font-family: 'Noto Sans Georgian';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/noto-sans-georgian-sub.woff2') format('woff2');
    unicode-range: U+10D0, U+10D4-10D5, U+10D7, U+10DA, U+10DD, U+10E0-10E1, U+10E5;
}

@font-face {
    font-family: 'Noto Sans Armenian';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/noto-sans-armenian-sub.woff2') format('woff2');
    unicode-range: U+540, U+561, U+575-576, U+57D, U+57F;
}

/* ── Reset & element defaults ─────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

ul {
    list-style: none;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

[id] {
    scroll-margin-top: calc(var(--header-h) + 8px);
}

/* A surface sets its own text color; its background is set by the component that owns it */
[data-surface] {
    color: var(--clr-text);
}

:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 3px;
}

a:focus-visible {
    border-radius: var(--radius-xs);
}

/* ── Layout primitives ────────────────────────────────────────────── */
.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto;
}

.section {
    padding-block: var(--section-y);
    background: var(--clr-bg);
}

/* Vertical rhythm: > * + * { margin-top } driven by --stack */
.stack > * + * {
    margin-top: var(--stack, var(--space-4));
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
}

/* Responsive card grid: as many columns as fit, never narrower than --min */
.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 17rem)), 1fr));
    gap: var(--grid-gap, var(--space-6));
}

/* ── Type roles ───────────────────────────────────────────────────── */
/* Display roles: the same family, heavy and tight, like the large titles of an app */
.t-display,
.t-h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    text-wrap: balance;
}

.t-display {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

.t-h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.t-h3 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.t-h4 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    line-height: var(--lh-heading);
}

.t-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    text-wrap: pretty;
}

.t-body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.t-small {
    font-size: var(--fs-md);
    line-height: var(--lh-ui);
}

.t-caption {
    font-size: var(--fs-xs);
    line-height: var(--lh-ui);
}

.t-overline {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--clr-accent-text);
}

/* Prices and figures: tabular digits so columns line up */
.t-numeric {
    font-variant-numeric: tabular-nums;
}

.text-muted {
    color: var(--clr-text-muted);
}

.link {
    color: var(--clr-link);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.link:hover {
    color: var(--clr-link-hover);
}

/* ── Utilities ────────────────────────────────────────────────────── */
/* Inline SVG icons: stroke 2px, round caps, 24px grid, currentColor */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: none;
}

/* Inline <symbol> sprite container: kept in the DOM, takes no space */
.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: var(--z-skip);
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    background: var(--clr-highlight);
    color: var(--clr-night);
    font-weight: var(--fw-bold);
    transform: translateY(-160%);
    transition: transform var(--trans-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ── Motion ───────────────────────────────────────────────────────── */
/* Entrance for secondary content only: never animate the LCP element (headline, hero image) */
.reveal {
    animation: rise var(--trans-slow) both;
    animation-delay: var(--d, 0s);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Scroll reveal: scripts/sections.js adds .rv only to blocks that start below the fold and adds .is-in when they enter the
   viewport. Without JS (or with reduced motion) nothing is ever hidden */
.rv {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: var(--rv-d, 0s);
}

.rv.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ src/components.css ═══ */

/* Viajes Únicos — components
   Built only on semantic tokens, so each one works on paper and on [data-surface="dark"].
   Section-specific layouts (hero, trips, ...) live in their own files. */

/* ── Button ───────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 48px;
    padding: 0 1.4em;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--fs-ui);
    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast), border-color var(--trans-fast);
}

/* Primary: the one action of a block. Granada with white type on paper; soft paper with ink type over imagery (the token re-maps per surface) */
.btn-primary {
    background: var(--clr-cta-bg);
    color: var(--clr-on-accent);
    box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
    background: var(--clr-cta-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-cta-hover);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

/* Pressed: every control answers the finger (a small scale), and hover lifts stay off touch screens so nothing sticks after a tap */
.btn:active,
.choice input:active + .choice-face,
.segmented-input:active + .segmented-face {
    transform: scale(0.97);
}

@media (hover: none) {
    .btn-primary:hover {
        transform: none;
        box-shadow: var(--shadow-cta);
    }

    .card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }
}

/* No double-tap zoom delay on anything tappable */
.btn,
.chip,
.choice,
.segmented-opt,
.month,
.pin,
.place-head,
.more-summary,
.sources-summary,
.nav a,
.app-tab,
button,
summary,
select {
    touch-action: manipulation;
}

/* Secondary: outline on paper, glass on dark */
.btn-secondary {
    background: var(--clr-btn-sec-bg);
    border-color: var(--clr-btn-sec-border);
    color: var(--clr-text);
}

.btn-secondary:hover {
    background: var(--clr-btn-sec-bg-hover);
}

[data-surface="dark"] .btn-secondary,
[data-surface="deep"] .btn-secondary {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Link-style button for tertiary actions */
.btn-link {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    color: var(--clr-link);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.btn-link:hover {
    color: var(--clr-link-hover);
}

.btn-lg {
    min-height: 56px;
    padding: 0 1.8em;
    font-size: var(--fs-body);
}

.btn-sm {
    min-height: 44px;
    padding: 0 1.1em;
    font-size: var(--fs-md);
}

.btn-icon {
    width: 48px;
    padding: 0;
}

/* Not available (yet): no fill, a dashed outline and muted ink. It stays readable (a faded primary would not be) and cannot be mistaken for an action */
.btn:disabled,
.btn[aria-disabled="true"] {
    border: 1.5px dashed var(--clr-border-strong);
    background: transparent;
    color: var(--clr-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Loading: keeps the button's width, hides the label, shows a spinner */
.btn[aria-busy="true"] {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn[aria-busy="true"]::after {
    content: '';
    position: absolute;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--clr-on-accent);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.btn-secondary[aria-busy="true"]::after {
    border-color: var(--clr-text);
    border-right-color: transparent;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Chip: a short promise or a filter ────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--clr-chip-border);
    border-radius: var(--radius-pill);
    background: var(--clr-chip-bg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.chip .icon {
    width: 16px;
    height: 16px;
    color: var(--clr-brand);
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Segmented control: one choice out of a few (three at most) ───────────
   Markup: fieldset.segmented > legend.segmented-legend + .segmented-track >
           label.segmented-opt > input.segmented-input[type=radio] + span.segmented-face
   Native radios keep keyboard and screen-reader behavior; the face is only paint.
   Selected = text color as fill and page color as ink, so it works on paper and on dark with no variants.
   --seg-n (options) and --seg-r (track radius) can be set on the track. */
.segmented {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.segmented-legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-accent-text);
}

.segmented-track {
    --seg-n: 3;
    --seg-r: var(--radius-pill);
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--clr-chip-border);
    border-radius: var(--seg-r);
    background: var(--clr-chip-bg);
}

.segmented-opt {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

/* The radio covers its face (hit area) but paints nothing */
.segmented-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.segmented-face {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border-radius: calc(var(--seg-r) - 4px);
    font-size: var(--fs-ui);
    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    white-space: nowrap;
    color: var(--clr-text);
    transition: background var(--trans-fast), color var(--trans-fast);
}

/* Two-level label: the main word, then what it covers ("Cultura" / "y espiritualidad"), so the full name is always visible.
   A plain text label works too. */
.segmented-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
}

.segmented-more {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    opacity: 0.82;
}

.segmented-opt:hover .segmented-face {
    background: var(--clr-btn-sec-bg-hover);
}

.segmented-input:checked + .segmented-face {
    background: var(--clr-text);
    color: var(--clr-bg);
}

.segmented-input:focus-visible + .segmented-face {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

/* Where :has() exists, a single thumb slides between options instead of each face repainting */
@supports selector(:has(*)) {
    .segmented-track::before {
        content: '';
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        width: calc((100% - 8px - (var(--seg-n) - 1) * 4px) / var(--seg-n));
        border-radius: calc(var(--seg-r) - 4px);
        background: var(--clr-text);
        transform: translateX(calc(var(--seg-i, 0) * (100% + 4px)));
        transition: transform 0.32s var(--ease-in-out);
    }

    /* One clock for the thumb and the labels: the ink flips when the thumb's centre passes under it (half of 0.32s),
       so a label is never light-on-light mid-slide */
    .segmented-face {
        transition: background var(--trans-fast), color 0.12s ease 0.1s;
    }

    .segmented-track:has(.segmented-opt:nth-child(2) .segmented-input:checked) {
        --seg-i: 1;
    }

    .segmented-track:has(.segmented-opt:nth-child(3) .segmented-input:checked) {
        --seg-i: 2;
    }

    .segmented-input:checked + .segmented-face {
        background: transparent;
    }
}

/* The frame measures the room the options really have, so the control adapts wherever it is used (hero card, guide, a
   narrow column) instead of relying on the page's breakpoints. Wrap the track in it: .segmented-frame > .segmented-track */
.segmented-frame {
    container-type: inline-size;
}

/* Narrow (< 30rem): icon over a two-line, centred label; the track becomes a rounded rectangle so the second line keeps its width */
@container (max-width: 30rem) {
    .segmented-track {
        --seg-r: var(--radius-lg);
    }

    .segmented-face {
        flex-direction: column;
        gap: 3px;
        min-height: 66px;
        padding: 8px 2px;
    }

    .segmented-label {
        align-items: center;
        text-align: center;
    }

    .segmented-main {
        font-size: var(--fs-md);
    }

    .segmented-more {
        font-size: var(--fs-2xs);
        letter-spacing: -0.01em;
    }
}

/* Very narrow (< 17.75rem): one option per row, the full name on one line */
@container (max-width: 17.75rem) {
    .segmented-track {
        grid-auto-flow: row;
    }

    .segmented-face {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        min-height: 46px;
        padding: 0 14px;
    }

    .segmented-label {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 0.3em;
        text-align: left;
    }

    .segmented-main {
        font-size: var(--fs-ui);
    }

    .segmented-more {
        font-size: var(--fs-md);
    }

    @supports selector(:has(*)) {
        .segmented-track::before {
            right: 4px;
            bottom: auto;
            width: auto;
            height: calc((100% - 8px - (var(--seg-n) - 1) * 4px) / var(--seg-n));
            transform: translateY(calc(var(--seg-i, 0) * (100% + 4px)));
        }
    }
}

/* ── Badge: a status or label ─────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--clr-info-bg);
    color: var(--clr-info);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.badge-success {
    background: var(--clr-success-bg);
    color: var(--clr-success);
}

.badge-warning {
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
}

.badge-danger {
    background: var(--clr-danger-bg);
    color: var(--clr-danger);
}

.badge-accent {
    background: var(--clr-accent-soft);
    color: var(--clr-accent-strong);
}

.badge-brand {
    background: var(--clr-brand-soft);
    color: var(--clr-brand);
}

.badge-dark {
    background: var(--clr-night);
    color: var(--clr-highlight);
}

/* ── Form fields ──────────────────────────────────────────────────── */
.field {
    display: grid;
    gap: var(--space-2);
}

.field-label {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
}

.field-hint {
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

.field-error {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--clr-danger);
}

/* 16px minimum: smaller sizes make iOS zoom the page on focus */
.input,
.select,
.textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1.5px solid var(--clr-field-border);
    border-radius: var(--radius-md);
    background: var(--clr-field-bg);
    color: var(--clr-field-text);
    font-size: var(--fs-body);
    line-height: var(--lh-ui);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--clr-field-placeholder);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
    border-color: var(--clr-focus);
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--clr-danger);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select: native control, custom caret */
.select-wrap {
    position: relative;
}

.select {
    padding-right: 44px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.select option,
.select optgroup {
    background: var(--clr-white);
    color: var(--clr-ink-900);
}

.select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--clr-field-text);
    border-bottom: 2px solid var(--clr-field-text);
    transform: rotate(45deg);
    pointer-events: none;
}

/* ── Section header: overline + title + lead ──────────────────────── */
.section-header {
    display: grid;
    justify-items: start; /* a badge or overline hugs its text instead of stretching across the column */
    gap: var(--space-3);
    max-width: 46rem;
    margin-bottom: var(--space-10);
}

.section-header.is-center {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--trans-normal), box-shadow var(--trans-normal);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* The image slot reserves its ratio so nothing shifts while it loads; the tint is the placeholder color */
.card-media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--clr-media-bg);
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body {
    display: grid;
    flex: 1;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

.card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-2);
}

/* ── Price: "desde" + amount (+ unit) ─────────────────────────────── */
.price {
    display: grid;
    gap: 2px;
}

.price-from,
.price-unit {
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

.price-amount {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: var(--fw-display);
    line-height: 1.05;
    letter-spacing: var(--ls-display);
    font-variant-numeric: tabular-nums;
    color: var(--clr-price);
}

/* ── Rating: score + count + source (real data only, see README) ──── */
.rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--fw-semibold);
}

.rating-stars {
    display: inline-flex;
    gap: 2px;
}

.rating .icon {
    width: 18px;
    height: 18px;
    color: var(--clr-accent-strong);
    fill: currentColor;
}

.rating-count {
    font-weight: var(--fw-regular);
    color: var(--clr-text-muted);
}

/* ── Alert ────────────────────────────────────────────────────────── */
.alert {
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--clr-info);
    border-radius: var(--radius-md);
    background: var(--clr-info-bg);
    font-size: var(--fs-md);
}

.alert strong {
    display: block;
    color: var(--clr-info);
}

.alert-success {
    border-left-color: var(--clr-success);
    background: var(--clr-success-bg);
}

.alert-success strong {
    color: var(--clr-success);
}

.alert-warning {
    border-left-color: var(--clr-warning);
    background: var(--clr-warning-bg);
}

.alert-warning strong {
    color: var(--clr-warning);
}

.alert-danger {
    border-left-color: var(--clr-danger);
    background: var(--clr-danger-bg);
}

.alert-danger strong {
    color: var(--clr-danger);
}

.divider {
    height: 1px;
    border: 0;
    background: var(--clr-border);
}

/* ── Chevron: the arrow that turns when a disclosure (details, accordion row) opens ── */
.chevron {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--clr-text-muted);
    transition: transform var(--trans-normal);
}

details[open] > summary .chevron {
    transform: rotate(180deg);
}

/* ── More: a detail one tap away. Native <details>, so Ctrl+F opens it and it works without JS ── */
.more-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-xs);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-link);
    list-style: none;
    cursor: pointer;
}

.more-summary::-webkit-details-marker {
    display: none;
}

.more-summary:hover {
    color: var(--clr-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.more-summary:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

.more-summary .chevron {
    width: 1.1em;
    height: 1.1em;
    color: currentColor;
}

.more > p {
    margin-top: var(--space-1);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--clr-text-muted);
}

/* ═══ src/shell.css ═══ */

/* Viajes Únicos — site shell: header, nav, sticky CTA, draft markers
   Header and sticky bar carry data-surface="dark": they always sit over ink or imagery. */

/* ── Header ───────────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    transition: background var(--trans-normal), box-shadow var(--trans-normal);
}

.site-header.scrolled,
.site-header.solid,
.site-header.menu-open {
    background: var(--clr-overlay);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 1px 0 var(--clr-border);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 100%;
}

/* Wordmark: type only, in the sans (the serif is for headlines, so the mark stays a mark). "Viajes" in medium, "Únicos" heavier */
.brand {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-main);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xl);
    letter-spacing: -0.045em;
    text-decoration: none;
}

.brand-name span {
    font-weight: var(--fw-extrabold);
}

.nav {
    margin-left: auto;
}

.nav ul {
    display: flex;
    gap: 4px;
}

/* Extra CTA that only appears inside the collapsed mobile menu */
.nav-cta {
    display: none;
}

.nav a {
    display: block;
    padding: 10px 14px;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-ui);
    text-decoration: none;
    opacity: 0.92;
    transition: background var(--trans-fast), opacity var(--trans-fast);
}

.nav a:hover {
    background: var(--clr-btn-sec-bg-hover);
    opacity: 1;
}

.nav a[aria-current="page"] {
    background: var(--clr-btn-sec-bg-hover);
    box-shadow: inset 0 -2px 0 var(--clr-accent);
    opacity: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--clr-btn-sec-border);
    border-radius: 50%;
    background: var(--clr-btn-sec-bg);
    cursor: pointer;
}

.nav-toggle .icon {
    width: 22px;
    height: 22px;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

/* Tablet & below: collapsible nav (six items need the room) */
/* Seven entries: a little tighter between the hamburger breakpoint and a wide desktop so the row never wraps */
@media (min-width: 1101px) and (max-width: 1320px) {
    .header-inner {
        gap: 16px;
    }

    .nav a {
        padding: 10px 10px;
    }
}

@media (max-width: 1100px) {
    .header-actions {
        margin-left: auto;
    }

    .nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        display: none;
        margin: 0;
        padding: 8px var(--gutter) 22px;
        border-bottom: 1px solid var(--clr-border);
        background: var(--clr-night);
    }

    .nav.open {
        display: block;
    }

    .nav-cta {
        display: block;
        margin-top: 10px;
    }

    .nav .nav-cta a {
        display: inline-flex;
        padding: 0 1.4em;
        font-size: var(--fs-ui);
        opacity: 1;
    }

    .nav ul {
        flex-direction: column;
        gap: 2px;
    }

    .nav a {
        padding: 14px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--fs-lg);
    }

    .nav a[aria-current="page"] {
        box-shadow: inset 3px 0 0 var(--clr-accent);
    }

    .nav-toggle {
        display: inline-flex;
    }
}

/* ── Mobile app bar: visible navigation plus the one action, like a native tab bar ──────────
   Hiding the main navigation behind a menu cuts its discoverability (NN/g, 2016), so the three sections people look for ride along
   with the call to action. It slides in once the finder scrolls away; scripts/main.js marks the tab of the section on screen. */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: none;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--clr-border);
    background: var(--clr-overlay);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transform: translateY(110%);
    transition: transform var(--trans-normal);
}

.sticky-cta.visible {
    transform: translateY(0);
}

.app-tab {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--clr-text-muted);
    transition: color var(--trans-fast), background var(--trans-fast);
}

.app-tab .icon {
    width: 22px;
    height: 22px;
}

.app-tab:active {
    background: var(--clr-btn-sec-bg-hover);
}

.app-tab[aria-current="true"] {
    color: var(--clr-text);
}

.app-tab[aria-current="true"] .icon {
    color: var(--clr-accent);
}

.app-cta {
    flex: 1.4 1 0;
    align-self: center;
    min-height: 48px;
    padding: 0 1em;
    font-size: var(--fs-md);
}

/* ── Draft markers ────────────────────────────────────────────────── */
/* Dashed = provisional. Remove data-draft from <html> to launch */
.draft-pill {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: var(--z-draft);
    display: none;
    align-items: center;
    padding: 7px 12px;
    border: 1px dashed var(--clr-warning);
    border-radius: var(--radius-pill);
    background: rgb(252 250 246 / 0.95);
    color: var(--clr-warning);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.5);
}

html[data-draft] .draft-pill {
    display: inline-flex;
}

html[data-draft] span[data-ph] {
    text-decoration: underline dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

html[data-draft] .chip[data-ph] {
    border-style: dashed;
}

@media (max-width: 760px) {
    /* Reserve space for the app bar so it never covers content */
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    .sticky-cta {
        display: flex;
    }

    /* Bottom-right and tiny so it never covers the finder; lifts above the sticky bar when that shows */
    .draft-pill {
        left: auto;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 4px 9px;
        font-size: 10.5px;
        transition: bottom var(--trans-normal);
    }

    .sticky-cta.visible + .draft-pill {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

    .btn-wa {
        width: 44px;
        padding: 0;
    }

    .btn-wa span {
        display: none;
    }
}

@media (max-width: 560px) {
    .btn-quote {
        display: none;
    }
}

/* Narrow phones: the wordmark never wraps; the header gives up gap, not legibility */
.brand-name {
    white-space: nowrap;
}

@media (max-width: 400px) {
    .header-inner {
        gap: 12px;
    }

    .header-actions {
        gap: 8px;
    }
}

/* ═══ src/hero.css ═══ */

/* Viajes Únicos — hero
   data-surface="dark" on the section: type, links and fields take their dark-surface tokens.
   Layers (back → front): art (one photo per interest mode), scrim, grain, content. */

.hero {
    --next-bg: var(--clr-paper-50); /* background of the section below (the page is warm paper): the curved edge must match it */
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: max(100svh, 720px);
    padding: calc(var(--header-h) + 36px) 0 112px;
    background: var(--clr-bg);
    overflow: hidden;
    overflow: clip; /* not just hidden: a hidden box can still be scrolled by focus or scrollIntoView, and the curved edge (110% wide) gave it room to slide */
}

/* Curved edge into the next section */
.hero::after {
    content: '';
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -1px;
    z-index: var(--z-raised);
    height: 64px;
    background: var(--next-bg);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ── Art ──────────────────────────────────────────────────────────── */
.hero-art {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    overflow: clip;
}

/* One layer per interest mode. The incoming layer fades in over the outgoing one (kept opaque underneath),
   so the dark surface never shows through mid-fade. Layers that are neither shown nor warmed up have
   no box, so their lazy images are not fetched. */
.hero-layers {
    position: absolute;
    inset: 0;
    z-index: 0; /* own stacking context: the layers' z-index never climbs over the scrim and grain */
}

.hero-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    opacity: 0;
    transition: opacity var(--trans-fade);
}

.hero-layer.is-active {
    z-index: 2;
    opacity: 1;
}

/* The outgoing layer stays fully opaque under the incoming one. If it was itself still fading in
   (a quick second choice), it finishes in a blink instead of snapping */
.hero-layer.is-leaving {
    z-index: 1;
    opacity: 1;
    transition: opacity 0.25s linear;
}

.hero-layer:not(.is-active):not(.is-leaving):not(.is-warm) {
    display: none;
}

/* Where the scene's subject sits (right third). Screens narrower than 16:9 crop the sides around it,
   wider ones crop the top, never the foreground */
.hero-layer[data-mode="cultura"] {
    --art-x: 82%;
    --art-y: 85%;
}

.hero-layer[data-mode="gastronomia"] {
    --art-x: 90%;
    --art-y: 100%;
}

.hero-layer[data-mode="montana"] {
    --art-x: 82%;
    --art-y: 78%;
}

/* A photo settles in (2.5% zoom-out) while it fades in; the layer on screen at load never animates */
.hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--art-x, 80%) var(--art-y, 100%);
    transform: scale(1.025);
    transition: transform 1.6s var(--ease-out);
}

.hero-layer.is-active img {
    transform: none;
}

.hero-layer.is-leaving img {
    transform: none;
    transition: none;
}

/* Skies are bright, so three veils keep the type legible: top (header), left (text column), bottom-left (chips).
   The side veil is anchored to the centre of the screen, where the container (1240px) puts the text column: on a wide
   screen the text moves toward the middle and a veil measured in % would stop covering it */
.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.68) 0, rgb(var(--scrim-rgb) / 0.32) 110px, rgb(var(--scrim-rgb) / 0) 240px),
        linear-gradient(90deg,
            rgb(var(--scrim-rgb) / 0.8) calc(50% - 500px),
            rgb(var(--scrim-rgb) / 0.73) calc(50% - 200px),
            rgb(var(--scrim-rgb) / 0.44) calc(50% + 120px),
            rgb(var(--scrim-rgb) / 0) calc(50% + 440px));
}

/* Bottom veil: strong under the text column, gone toward the right edge so a table or a meadow in the foreground is not dimmed */
.hero-scrim::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: linear-gradient(0deg, rgb(var(--scrim-rgb) / 0.55), rgb(var(--scrim-rgb) / 0));
    -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 92%);
    mask-image: linear-gradient(90deg, #000 45%, transparent 92%);
}

.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Disclosure: the scenes are AI-generated images of real places. One line per mode, switched like the mode lines */
.hero-credits {
    position: absolute;
    inset: auto 0 76px;
    z-index: var(--z-raised);
    pointer-events: none;
}

.hero-credits-stack {
    display: grid;
    justify-items: end;
}

.hero-credit {
    grid-area: 1 / 1;
    margin: 0;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgb(var(--scrim-rgb) / 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    line-height: var(--lh-ui);
    text-align: right;
    color: rgb(255 255 255 / 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease-out, visibility 0s linear 0.12s;
}

/* Appears once the new photo is most of the way in */
.hero-credit.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease-out 0.45s, visibility 0s;
}

/* ── Content ──────────────────────────────────────────────────────── */
.hero-inner {
    position: relative;
    z-index: var(--z-raised);
}

.hero-copy,
.hero-top,
.hero-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.hero-top {
    max-width: 700px;
}

.hero-bottom {
    width: 100%;
}

.hero-native {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    color: var(--clr-highlight);
}

.hero-native [lang="ka"] {
    font-family: 'Noto Sans Georgian', sans-serif;
}

.hero-native [lang="hy"] {
    font-family: 'Noto Sans Armenian', sans-serif;
}

.hero-native i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--clr-accent);
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: var(--fw-regular);
}

.hero-kicker {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--clr-accent-text);
}

/* Type comes from .t-display; the shadow keeps it legible over the sky */
.hero-headline {
    text-shadow: 0 2px 28px rgb(var(--scrim-rgb) / 0.35);
}

.hero-headline em {
    display: block; /* always two lines, as on a phone: one long line would run over the brightest part of the photo */
    font-style: normal;
    color: var(--clr-highlight);
}

.hero-sub {
    max-width: 31em;
    margin-top: 22px;
    color: var(--clr-white);
    text-shadow: 0 1px 14px rgb(var(--scrim-rgb) / 0.45);
}

/* ── Trip finder (primary action) ─────────────────────────────────── */
.finder {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: stretch;
    width: 100%;
    max-width: 740px;
    margin-top: 32px;
    padding: 8px;
    border: 1px solid var(--clr-glass-border);
    border-radius: var(--radius-lg);
    background: var(--clr-glass);
    box-shadow: var(--shadow-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
}

.finder-field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 22px;
    border-right: 1px solid rgb(255 255 255 / 0.12);
}

.finder-field label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-highlight);
}

/* Short noun labels on narrow screens (see max-width: 400px) */
.l-short {
    display: none;
}

.finder-field select {
    width: 100%;
    padding: 4px 26px 2px 0;
    border: 0;
    background: transparent;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--clr-field-text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.finder-field select option,
.finder-field select optgroup {
    background: var(--clr-white);
    color: var(--clr-ink-900);
}

/* Custom caret */
.finder-field::after {
    content: '';
    position: absolute;
    right: 20px;
    bottom: 24px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--clr-highlight);
    border-bottom: 2px solid var(--clr-highlight);
    transform: rotate(45deg);
    pointer-events: none;
}

.finder-cta {
    display: flex;
    align-items: center;
    padding-left: 8px;
}

/* Interest switch: first row of the planner card. Its labels match the finder's field labels */
.hero-mode {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    padding: 10px 14px 14px;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.hero-mode .segmented-legend {
    color: var(--clr-highlight);
}

/* The line under the switch changes with the mode; the three lines share one grid cell so the card never resizes */
.mode-lines {
    display: grid;
    margin-top: var(--space-3);
}

.mode-line {
    grid-area: 1 / 1;
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-ui);
    color: color-mix(in srgb, var(--clr-text) 92%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s ease-out, transform 0s linear 0.12s, visibility 0s linear 0.12s;
}

/* The old line is gone (0.12s) before the new one rises into place, so the two never overlap */
.mode-line.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.36s var(--ease-out) 0.12s, transform 0.5s var(--ease-out) 0.12s, visibility 0s;
}

.hero-chips {
    max-width: 1060px;
    margin-top: 28px;
}

/* They sit straight on the photo: a dark glass keeps every chip legible wherever it falls */
.hero-chips .chip {
    background: rgb(var(--scrim-rgb) / 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Social proof slot (filled by JS only when there are real reviews) */
.hero-proof {
    margin-top: 18px;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}

.hero-proof a {
    text-underline-offset: 3px;
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    /* Taller than the viewport: the top group sits over the sky and the finder below it, with the scene's
       subject showing through the gap between them */
    /* The height follows the screen (the picture needs room between headline and finder) but is capped: the finder is
       anchored to the bottom of the hero, so its button ends about 40px above the fold on any phone, i.e. the primary action
       is always on the first screen */
    .hero {
        align-items: stretch;
        min-height: 100vh;
        min-height: clamp(800px, calc(100svh + 80px), 1000px);
        padding: calc(var(--header-h) + 24px) 0 116px;
    }

    .hero-inner {
        display: flex;
    }

    .hero-copy {
        flex: 1;
        justify-content: space-between;
        gap: 24px;
    }

    /* The photo is a band at the top that melts into the dark surface: the tall finder card covers everything
       below it anyway, and showing the picture at its natural height keeps it sharp (a full-height cover would
       magnify it about 1.7x more). The mobile crops are 3:5, so at 650px they fit a 390px screen with no scaling */
    .hero {
        --art-h: 650px;   /* height of the band; with native vertical photos (3:5, 1080x1800 or more) use 100% */
        --art-fade: 68%;  /* where the band starts melting into the dark surface; 100% = no fade */
    }

    .hero-layers {
        inset: 0 0 auto;
        height: var(--art-h);
        -webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--art-fade), transparent 100%);
        mask-image: linear-gradient(180deg, #000 0, #000 var(--art-fade), transparent 100%);
    }

    .hero-layer[data-mode] {
        --art-x: 50%;
        --art-y: 0%;
    }

    .hero-scrim {
        background:
            linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.8) 0, rgb(var(--scrim-rgb) / 0.74) 340px, rgb(var(--scrim-rgb) / 0.12) 490px, rgb(var(--scrim-rgb) / 0.2) 640px, rgb(var(--scrim-rgb) / 0.62) 100%);
    }

    .hero-scrim::after {
        display: none;
    }

    .hero-native {
        margin-bottom: 14px;
        font-size: var(--fs-ui);
    }

    .hero-kicker {
        font-size: var(--fs-xs);
    }

    .hero-sub {
        margin-top: 16px;
    }

    .finder {
        grid-template-columns: 1.2fr 1fr;
        margin-top: 24px;
        padding: 6px;
    }

    .finder-field {
        padding: 10px 14px;
    }

    .finder-field + .finder-field {
        border-right: 0;
    }

    .hero-mode {
        margin-bottom: 4px;
        padding: 8px 8px 12px;
    }

    .mode-line {
        font-size: var(--fs-sm);
    }

    .finder-field select {
        font-size: var(--fs-body);
    }

    .finder-field::after {
        right: 12px;
        bottom: 20px;
    }

    .finder-cta {
        grid-column: 1 / -1;
        padding: 6px 0 0;
    }

    .finder-cta .btn {
        width: 100%;
    }

    /* Chips become a horizontal scroller, faded at the right edge */
    .hero-chips {
        flex-wrap: nowrap;
        margin: 22px calc(-1 * var(--gutter)) 0;
        padding: 0 var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
        mask-image: linear-gradient(90deg, #000 90%, transparent);
    }

    .hero-chips::-webkit-scrollbar {
        display: none;
    }

    .hero-credits {
        bottom: 72px;
    }

    /* One short line on phones: the disclosure stays, the place name (already clear from the picture) goes */
    .hero-credit-place {
        display: none;
    }
}

/* Portrait tablets: the text column spans most of the width and sits over the middle of the picture (its brightest part),
   so the top veil is firmer there. Landscape screens keep the plain veils */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
    .hero-scrim::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        height: 700px;
        background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.5) 0, rgb(var(--scrim-rgb) / 0.46) 480px, rgb(var(--scrim-rgb) / 0) 700px);
    }
}

/* Short phones (iPhone SE, 640-700px): the offer and the finder come first, so the ornament line goes */
@media (max-width: 760px) and (max-height: 700px) {
    .hero-native {
        display: none;
    }
}

@media (max-width: 400px) {
    .l-full {
        display: none;
    }

    .l-short {
        display: inline;
    }

    .finder-field {
        padding: 10px 12px;
    }
}

/* ═══ src/content.css ═══ */

/* Viajes Únicos — content: piezas de lectura compartidas por las secciones de información
   Panel, datos (facts), cita y fuentes, y el pie de página. Cada sección tiene además su propio archivo
   (destino, explorer, seasons, planner, checklist, faq). Misma regla que components.css: solo tokens semánticos,
   así cada bloque funciona sobre papel, sobre [data-surface="alt"] y sobre oscuro. */

/* Spacing helpers for the note and the alert that close a section */
.section-note {
    margin-top: var(--space-6);
}

.section-alert {
    margin-top: var(--space-6);
}

/* ── Panel: a quiet surface that groups related facts ─────────────────
   It is also a size container, so what is inside (.facts) adapts to the room the panel really has. */
.panel {
    container-type: inline-size;
    padding: var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
}

/* Section overline: a short rule in the brand green, same hue as the words after it */
.section-header > .t-overline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.section-header > .t-overline::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--clr-brand);
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    margin-bottom: var(--space-4);
}

/* Name of the country in its own script: decorative, so it never carries information the heading does not */
.panel-native {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    color: var(--clr-text-muted);
}

.panel-native[lang="ka"] {
    font-family: 'Noto Sans Georgian', sans-serif;
}

.panel-native[lang="hy"] {
    font-family: 'Noto Sans Armenian', sans-serif;
}

/* A heading inside a panel is followed by its answer with a little air */
.panel > .t-h3 + p {
    margin-top: var(--space-3);
}

/* ── Facts: a definition list of "label → value" rows. Markup: dl.facts > div > dt + dd ─ */
.facts {
    display: grid;
    border-top: 1px solid var(--clr-border);
}

.facts > div {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--clr-border);
}

.facts dt {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    color: var(--clr-text-muted);
}

.facts dd {
    margin: 0;
}

/* Narrow container (a panel, a ficha, a season card): the label sits above its value */
@container (max-width: 25rem) {
    .facts > div {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* ── Citation: a small number that jumps to its source ── */
.cite {
    margin-left: 0.1em;
    font-size: 0.72em;
    font-weight: var(--fw-bold);
    line-height: 0;
    white-space: nowrap;
}

.cite a {
    padding: 0 0.12em;
    color: var(--clr-link);
    text-decoration: none;
}

.cite a:hover {
    color: var(--clr-link-hover);
    text-decoration: underline;
}

/* ── Sources: the whole list, folded. Every citation in the text opens it and lights up its entry ── */
.sources-box {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
}

/* The strip: a check mark, what was verified and when, and a button. The list itself is folded inside */
.verify {
    padding-block: var(--space-10);
}

.sources-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon title cta" "icon sub cta";
    align-items: center;
    column-gap: var(--space-4);
    row-gap: 2px;
    min-height: 76px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    list-style: none;
    cursor: pointer;
}

.sources-summary::-webkit-details-marker {
    display: none;
}

.sources-summary:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

.verify-icon {
    display: grid;
    grid-area: icon;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--clr-trust-bg);
    color: var(--clr-trust);
}

.verify-icon .icon {
    width: 24px;
    height: 24px;
}

.verify-title {
    grid-area: title;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: 0;
}

.verify-sub {
    grid-area: sub;
    font-size: var(--fs-md);
    line-height: 1.45;
    color: var(--clr-text-muted);
}

.verify-cta {
    display: inline-flex;
    grid-area: cta;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--clr-btn-sec-border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    transition: background var(--trans-fast);
}

.verify-cta .chevron {
    width: 18px;
    height: 18px;
    color: currentColor;
}

.sources-summary:hover .verify-cta {
    background: var(--clr-btn-sec-bg-hover);
}

@media (max-width: 639px) {
    .sources-summary {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "icon title" "icon sub" "cta cta";
    }

    .verify-cta {
        justify-content: center;
        margin-top: var(--space-3);
    }
}

.sources-note {
    padding: 0 var(--space-6);
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.sources-box[open] .chevron {
    transform: rotate(180deg);
}

/* Numbered list in the order of first citation */
.sources {
    padding: var(--space-2) var(--space-6) var(--space-6) calc(var(--space-6) + 1.6rem);
    font-size: var(--fs-md);
    line-height: 1.45;
}

.sources li {
    margin-bottom: var(--space-3);
    padding-left: 0.25rem;
    break-inside: avoid;
}

.sources li::marker {
    font-weight: var(--fw-bold);
    color: var(--clr-text-muted);
}

.sources a {
    color: var(--clr-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.sources a:hover {
    color: var(--clr-link-hover);
}

.sources-meta {
    display: block;
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.sources li:target,
.sources li.is-hit {
    border-radius: var(--radius-xs);
    outline: 2px solid var(--clr-focus);
    outline-offset: 4px;
    animation: source-hit 1.6s ease;
}

@keyframes source-hit {
    0%,
    40% {
        background: var(--clr-highlight);
    }

    100% {
        background: transparent;
    }
}

@media (min-width: 760px) {
    .sources {
        column-count: 2;
        column-gap: var(--space-10);
    }
}

/* ── Footer: a closing line, the way around the page, the credits, and the wordmark as a watermark ── */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: var(--space-16);
    background: var(--clr-bg) url('../assets/img/contours.svg') center / cover no-repeat;
    font-size: var(--fs-md);
}

/* The one colour band of the page: the closing call to action on the deep brand gradient, with the contour lines as a texture */
.footer-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6) var(--space-8);
    margin-bottom: var(--space-12);
    padding: var(--space-12);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--grad-brand);
}

.footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('../assets/img/contours.svg') center / cover no-repeat;
    opacity: 0.55;
}

@media (max-width: 639px) {
    .footer-cta {
        padding: var(--space-8) var(--space-6);
        border-radius: var(--radius-lg);
    }
}

.footer-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 1.2rem + 4vw, 4.2rem);
    font-weight: var(--fw-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    text-wrap: balance;
}

.footer-cta-title em {
    font-style: normal;
    color: var(--clr-highlight);
}

.footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.site-footer-inner {
    display: grid;
    gap: var(--space-8);
}

.site-footer-about {
    margin-top: var(--space-3);
    max-width: 24rem;
    color: var(--clr-text-muted);
}

.site-footer .native-line {
    margin-top: var(--space-5);
}

.site-footer-title {
    margin-bottom: var(--space-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-accent-text);
}

.site-footer ul {
    display: grid;
    gap: var(--space-2);
}

.site-footer li a {
    display: inline-block;
    padding-block: var(--space-1);
    color: var(--clr-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.site-footer li a:hover {
    color: var(--clr-link-hover);
}

.site-footer-note {
    color: var(--clr-text-muted);
}

/* The company's data and guarantees: what the law asks a travel agency to show, in one place (fields are data-ph until the operator fills them) */
.footer-legal-list {
    gap: var(--space-1);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--clr-text-muted);
}

.footer-legal-list + .site-footer-note {
    margin-top: var(--space-4);
}

/* ── How it works: three steps, up front (numbered in the brand green: a step is not an action). Saying what happens next is one of the four credibility factors (NN/g) ── */
.howto {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--clr-border);
}

.howto-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--clr-accent-text);
}

.howto-steps {
    display: grid;
    gap: var(--space-3);
    counter-reset: step;
}

.howto-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
}

.howto-step::before {
    counter-increment: step;
    content: counter(step);
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--clr-brand);
    color: var(--clr-surface);
    font-size: var(--fs-ui);
    font-weight: var(--fw-extrabold);
}

.howto-step strong {
    display: block;
    grid-column: 2;
    font-size: var(--fs-lg);
    line-height: 1.3;
}

.howto-step p {
    grid-column: 2;
    margin-top: 2px;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--clr-text-muted);
}

@media (min-width: 760px) {
    .howto-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3) var(--space-8);
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--clr-border);
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.footer-credits {
    max-width: 52rem;
    line-height: 1.55;
}

.footer-legal a {
    color: var(--clr-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.footer-legal a:hover {
    color: var(--clr-link-hover);
}

/* The wordmark again, huge and almost invisible, cut by the bottom edge of the page */
.footer-wordmark {
    margin-top: var(--space-6);
    font-family: var(--font-main);
    font-size: clamp(3.4rem, 15.5vw, 15rem);
    font-weight: var(--fw-medium);
    line-height: 0.82;
    letter-spacing: -0.055em;
    text-align: center;
    white-space: nowrap;
    color: rgb(255 255 255 / 0.06);
    user-select: none;
    pointer-events: none;
}

.footer-wordmark span {
    font-weight: var(--fw-extrabold);
}

.site-footer {
    padding-bottom: 0;
}

@media (min-width: 760px) {
    .site-footer-inner {
        grid-template-columns: 1.4fr 1.1fr 0.8fr 1.1fr;
        align-items: start;
    }
}

/* ═══ src/destino.css ═══ */

/* Viajes Únicos — destino: los dos países lado a lado («duo»)
   Dos paneles con foto a sangre; el que está abierto (hover, foco o toque) se ensancha y despliega lo esencial; sus cifras cuentan al entrar en pantalla.
   Cada país lleva su color (Georgia = sevan, Armenia = ámbar) a través de --country / --country-soft. Sin JS los dos quedan abiertos. */

/* ── Línea con el nombre en la escritura propia, como la de la portada (para superficies oscuras) ── */
.native-line {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    color: var(--clr-highlight);
}

.native-line [lang="ka"] {
    font-family: 'Noto Sans Georgian', sans-serif;
}

.native-line [lang="hy"] {
    font-family: 'Noto Sans Armenian', sans-serif;
}

.native-line i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--clr-accent);
}

/* ── Duo ── */
.duo {
    display: grid;
    gap: var(--space-5);
}

.duo-panel {
    --country: var(--clr-georgia);
    --country-soft: var(--clr-georgia-soft);
    --country-line: var(--clr-georgia-line);
    --country-map: var(--clr-georgia-map);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 34rem;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--clr-night);
    color: var(--clr-white);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: box-shadow var(--trans-normal), transform var(--trans-normal);
}

.duo-panel[data-country="armenia"],
.duo-panel[data-country="rio"] {
    --country: var(--clr-armenia);
    --country-soft: var(--clr-armenia-soft);
    --country-line: var(--clr-armenia-line);
    --country-map: var(--clr-armenia-map);
}

.duo-panel:hover {
    box-shadow: var(--shadow-lg);
}

.duo-panel:focus-within {
    box-shadow: 0 0 0 3px var(--clr-bg), 0 0 0 6px var(--clr-focus), var(--shadow-lg);
}

/* The photo fills the panel; the veil darkens the bottom where the type lives */
.duo-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--clr-media-bg);
}

.duo-media picture,
.duo-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.duo-media img {
    object-fit: cover;
    object-position: 50% 40%;
    transform: scale(1.04);
    transition: transform 1.6s var(--ease-out);
}

.duo-panel.is-open .duo-media img,
.duo-panel:hover .duo-media img {
    transform: none;
}

.duo-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.3) 0, rgb(var(--scrim-rgb) / 0.05) 28%, rgb(var(--scrim-rgb) / 0.55) 58%, rgb(var(--scrim-rgb) / 0.9) 100%);
}

.duo-caption {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgb(var(--scrim-rgb) / 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    line-height: var(--lh-ui);
    color: rgb(255 255 255 / 0.92);
}

/* The body always sits on its own dark veil, so the type reads whatever the photo does behind it; the photo stays clear above */
.duo-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: 9rem;
    padding: var(--space-10) var(--space-6) var(--space-6);
    background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0) 0, rgb(var(--scrim-rgb) / 0.72) 56px, rgb(var(--scrim-rgb) / 0.88) 100%);
}

.duo-native {
    font-family: 'Noto Sans Georgian', 'Noto Sans Armenian', sans-serif;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    color: var(--clr-ambar-200);
}

.duo-title {
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: var(--fw-display);
    line-height: 1;
    letter-spacing: var(--ls-display);
}

.duo-kicker {
    max-width: 30rem;
    font-size: var(--fs-lg);
    line-height: 1.35;
    color: rgb(255 255 255 / 0.9);
}

/* Three glass tiles: the figures count up when the panel enters the screen */
.duo-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.duo-stats li {
    min-width: 0;
    padding: var(--space-3) var(--space-3) var(--space-3);
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.duo-num {
    display: block;
    font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
    font-weight: var(--fw-display);
    line-height: 1.05;
    letter-spacing: var(--ls-display);
    font-variant-numeric: tabular-nums;
    color: var(--clr-white);
}

.duo-label {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-xs);
    line-height: 1.35;
    color: rgb(255 255 255 / 0.82);
}

.duo-label .cite a,
.duo-facts .cite a {
    color: var(--clr-ambar-200);
}

/* The toggle: on paper it is the only way to open a panel from the keyboard; the panel itself listens to clicks */
.duo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 40px;
    margin-top: var(--space-1);
    padding: 0 var(--space-3) 0 var(--space-1);
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-ambar-200);
    cursor: pointer;
}

.duo-toggle:focus-visible {
    outline: 3px solid var(--clr-ambar-200);
    outline-offset: 2px;
}

.duo-toggle .chevron {
    color: currentColor;
}

.duo-toggle-close,
.duo-panel.is-open .duo-toggle-open {
    display: none;
}

.duo-panel.is-open .duo-toggle-close {
    display: inline;
}

.duo-panel.is-open .duo-toggle .chevron {
    transform: rotate(180deg);
}

/* What unfolds: the facts and the two actions, on a grid-row animation */
.duo-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease-out);
}

.duo-panel.is-open .duo-more {
    grid-template-rows: 1fr;
}

.duo-more-inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.5s;
}

.duo-panel.is-open .duo-more-inner {
    visibility: visible;
    transition-delay: 0s;
}

.duo-facts {
    margin-top: var(--space-2);
    border-top-color: rgb(255 255 255 / 0.2);
}

.duo-facts > div {
    border-bottom-color: rgb(255 255 255 / 0.14);
}

.duo-facts dt {
    color: rgb(255 255 255 / 0.72);
}

.duo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-5);
}

/* On the photo the primary button is white with ink type and the secondary is glass (the dark-surface tokens, by hand: the panel is not a surface) */
.duo-actions .btn-primary {
    background: var(--clr-white);
    color: var(--clr-ink-900);
    box-shadow: 0 8px 20px -8px rgb(5 17 21 / 0.5);
}

.duo-actions .btn-primary:hover {
    background: var(--clr-paper-50);
}

.duo-actions .btn-secondary {
    border-color: rgb(255 255 255 / 0.35);
    background: rgb(255 255 255 / 0.1);
    color: var(--clr-white);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.duo-actions .btn-secondary:hover {
    background: rgb(255 255 255 / 0.18);
}

.duo-actions .btn:focus-visible {
    outline-color: var(--clr-ambar-200);
}

/* Without JS both panels stay open and the toggle has nothing to do */
html:not(.js) .duo-panel {
    cursor: auto;
}

html:not(.js) .duo-more {
    grid-template-rows: 1fr;
}

html:not(.js) .duo-more-inner {
    visibility: visible;
}

html:not(.js) .duo-toggle {
    display: none;
}

/* What both countries share: a strip of three facts under the duo */
.duo-strip {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.duo-strip li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-surface);
    font-size: var(--fs-md);
    line-height: 1.4;
}

.duo-strip .icon {
    width: 22px;
    height: 22px;
    color: var(--clr-brand);
}

/* ── Desktop: side by side, and the open one takes more room ── */
@media (min-width: 760px) {
    .duo {
        display: flex;
        align-items: stretch;
        min-height: 36rem;
    }

    .duo-panel {
        flex: 1 1 0;
        min-height: 0;
        transition: flex-grow 0.6s var(--ease-out), box-shadow var(--trans-normal);
    }

    .duo-panel.is-open {
        flex-grow: 1.55;
    }

    .duo {
        min-height: 40rem;
    }

    .duo-body {
        margin-top: 11rem;
        padding: var(--space-12) var(--space-8) var(--space-8);
    }

    .duo-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Closed panels keep the title and the kicker; the figures wait for the panel to open */
    .duo-panel:not(.is-open) .duo-stats {
        display: none;
    }

    html:not(.js) .duo-panel:not(.is-open) .duo-stats {
        display: grid;
    }
}

@media (max-width: 759px) {
    .duo-panel {
        min-height: 30rem;
    }

    .duo-stats {
        grid-template-columns: 1fr;
    }

    .duo-stats li {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
    }

    .duo-num {
        flex: 0 0 5rem;
    }

    .duo-label {
        margin-top: 0;
    }
}

/* ═══ src/explorer.css ═══ */

/* Viajes Únicos — explorador (Qué descubrir)
   Una tarjeta sobre papel con tres piezas que se mueven juntas al elegir un interés: la foto, el selector (debajo de la foto, v6),
   la lista de sitios (se abren de uno en uno) y un mapa con pines numerados. Sin JS se ve como tres bloques de lectura apilados y sin mapa. */

.explorer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-surface);
    box-shadow: var(--shadow-md);
}

/* ── Stage: the switch and the photo of the chosen interest ── */
.explorer-stage {
    position: relative;
}

/* The switch sits under the photo, on the card, at every width: the photo stays clean and the choice reads as a tab bar */
.explorer-switch {
    padding: var(--space-4) var(--space-5) 0;
}

.explorer-switch .segmented-legend {
    margin-bottom: var(--space-3);
}

.explorer-switch .segmented-track {
    background: var(--clr-bg-alt);
    border-color: transparent;
}


.explorer-photos {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--clr-media-bg);
}

.explorer-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity var(--trans-fade);
}

.explorer-photo.is-active {
    z-index: 1;
    opacity: 1;
}

.explorer-photo picture,
.explorer-photo img {
    display: block;
    width: 100%;
    height: 100%;
}

.explorer-photo img {
    object-fit: cover;
    object-position: 50% var(--fy, 50%); /* where the subject sits: the band is wide and short, so the crop keeps this part */
}

.explorer-photo[data-interest="cultura"] {
    --fy: 22%;
}

.explorer-photo[data-interest="gastronomia"] {
    --fy: 56%;
}

.explorer-photo[data-interest="montana"] {
    --fy: 58%;
}

/* Veil under the caption (and under the switch on wide screens). It is the first child, so the caption paints above it */
.explorer-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.2) 0, rgb(var(--scrim-rgb) / 0) 30%, rgb(var(--scrim-rgb) / 0) 66%, rgb(var(--scrim-rgb) / 0.55) 100%);
    pointer-events: none;
}

.explorer-photo figcaption {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    max-width: calc(100% - var(--space-8));
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgb(var(--scrim-rgb) / 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    line-height: var(--lh-ui);
    color: rgb(255 255 255 / 0.92);
}

/* Without JS the switch has nothing to drive: only the first photo shows and the three texts stack */
html:not(.js) .explorer-switch {
    display: none;
}

html:not(.js) .explorer-photo:not(.is-active) {
    display: none;
}

/* ── Body ── */
.explorer-body {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5) var(--space-8);
}

/* Each panel hands its children (intro, list) to the body grid, so the map can sit between them on phones and beside them on desktop */
.explorer-panels,
.explorer-panel.is-active {
    display: contents;
}

.explorer-panel {
    display: none;
}

html:not(.js) .explorer-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
}

html:not(.js) .explorer-panels {
    display: grid;
    gap: var(--space-10);
}

html:not(.js) .explorer-panel {
    display: block;
}

html:not(.js) .explorer-map {
    display: none;
}

.explorer-intro {
    order: 1;
}

.explorer-map {
    order: 2;
}

.places {
    order: 3;
}

.explorer-panel.is-active > * {
    animation: explorer-in 0.55s var(--ease-out) both;
}

@keyframes explorer-in {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.explorer-intro h3 {
    margin-bottom: var(--space-3);
}

.explorer-intro p {
    max-width: 40rem;
    font-size: var(--fs-lg);
    line-height: 1.55;
}

.explorer-guide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-link);
    text-decoration: none;
}

.explorer-guide:hover {
    color: var(--clr-link-hover);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.explorer-guide .icon {
    width: 1.1em;
    height: 1.1em;
    transition: transform var(--trans-fast);
}

.explorer-guide:hover .icon {
    transform: translateX(3px);
}

/* ── Places: a list that opens one place at a time. The number matches the pin on the map ── */
.places {
    --pin-bg: var(--clr-georgia-pin);
    border-top: 1px solid var(--clr-border);
}

.place {
    --pin-bg: var(--clr-georgia-pin);
    border-bottom: 1px solid var(--clr-border);
    transition: background var(--trans-fast);
}

.place[data-country="armenia"] {
    --pin-bg: var(--clr-armenia-pin);
}

.place.is-hover {
    background: var(--clr-btn-sec-bg-hover);
}

/* Reading version (no JS): name, country and text in a row of their own */
.place-name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    padding-top: var(--space-4);
}

.place-name strong {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.place-country {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.place-text {
    padding: var(--space-2) 0 var(--space-4);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--clr-text-muted);
}

/* Interactive version: the name becomes a button; the text slides open under it */
.place-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    min-height: 60px;
    padding: var(--space-3) 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: none;
    text-align: left;
    cursor: pointer;
}

.place-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pin-bg);
    color: var(--clr-white);
    font-size: 13px;
    font-weight: var(--fw-extrabold);
    line-height: 1;
}

/* A fact that is not tied to one spot (a method, a bread): a ring instead of a number */
.place-num-fact {
    border: 1.5px solid var(--pin-bg);
    background: none;
}

.place-num-fact::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pin-bg);
}

.place-title {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-3);
    min-width: 0;
}

.place-title strong {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.place-head .chevron {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--clr-text-muted);
    transition: transform var(--trans-normal);
}

.place.is-open .place-head .chevron {
    transform: rotate(180deg);
}

.place-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s var(--ease-out);
}

.place.is-open .place-more {
    grid-template-rows: 1fr;
}

.place-more-inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.42s;
}

.place.is-open .place-more-inner {
    visibility: visible;
    transition-delay: 0s;
}

.place-more .place-text {
    padding: 0 0 var(--space-5) calc(28px + var(--space-4));
}

/* ── Map ── */
.explorer-map {
    min-width: 0;
}

.map-frame {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1000 / 954;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-alt);
}

.map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.map-grid {
    fill: none;
    stroke: rgb(16 24 20 / 0.06);
    stroke-width: 1;
}

.map-land {
    fill: rgb(16 24 20 / 0.06);
    stroke: rgb(16 24 20 / 0.16);
    stroke-width: 1;
}

.map-country {
    stroke-width: 1.8;
    stroke-linejoin: round;
    transition: fill-opacity var(--trans-normal);
}

.map-ge,
.map-br {
    fill: var(--clr-georgia-map);
    fill-opacity: 0.5;
    stroke: var(--clr-georgia-pin);
}

.map-am {
    fill: var(--clr-armenia-map);
    fill-opacity: 0.55;
    stroke: var(--clr-armenia-pin);
}

/* A fact with no pin (a wine, a bread) lights up its country */
.explorer-map[data-focus="georgia"] .map-ge,
.explorer-map[data-focus="brasil"] .map-br,
.explorer-map[data-focus="armenia"] .map-am {
    fill-opacity: 0.9;
}

/* Labels, capitals and pins are placed by scripts/sections.js: --x / --y are percentages of the map */
.map-pins {
    position: absolute;
    inset: 0;
}

.map-label,
.map-capital,
.map-pins > * {
    position: absolute;
    left: calc(var(--x, 0) * 1%);
    top: calc(var(--y, 0) * 1%);
}

.map-label {
    translate: -50% -50%;
    font-size: 10.5px;
    font-style: italic;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: var(--clr-text-muted);
    opacity: 0.8;
    pointer-events: none;
}

.map-label[data-align="left"] {
    translate: 0 -50%;
}

.map-label[data-align="right"] {
    translate: -100% -50%;
}

.map-capital {
    padding-left: 12px;
    translate: 0 -50%;
    font-size: 11px;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    color: var(--clr-night);
    text-shadow: 0 0 2px var(--clr-white), 0 0 6px rgb(255 255 255 / 0.95);
    pointer-events: none;
}

/* The dot marks the exact point; the name sits to the right, above or below it, wherever the pins leave room */
.map-capital::before {
    content: '';
    position: absolute;
    left: -3.5px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border: 1.5px solid var(--clr-white);
    border-radius: 50%;
    background: var(--clr-night);
    box-shadow: 0 0 0 1px rgb(16 24 20 / 0.3);
}

.map-capital[data-pos="top"],
.map-capital[data-pos="bottom"] {
    padding: 0;
    text-align: center;
}

.map-capital[data-pos="top"] {
    translate: -50% calc(-100% - 9px);
}

.map-capital[data-pos="bottom"] {
    translate: -50% 9px;
}

.map-capital[data-pos="top"]::before {
    top: auto;
    bottom: -13px;
    left: 50%;
    margin: 0 0 0 -3.5px;
}

.map-capital[data-pos="bottom"]::before {
    top: -13px;
    left: 50%;
    margin: 0 0 0 -3.5px;
}

.map-leaders {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-leaders line {
    stroke: rgb(16 24 20 / 0.55);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.pin-dot {
    z-index: 1;
    translate: -50% -50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-night);
    pointer-events: none;
}

.pin {
    --pin-bg: var(--clr-georgia-pin);
    z-index: 2;
    translate: -50% -50%;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid rgb(255 255 255 / 0.95);
    border-radius: 50%;
    background: var(--pin-bg);
    color: var(--clr-white);
    font-size: 12.5px;
    font-weight: var(--fw-extrabold);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 10px rgb(16 24 20 / 0.3);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}

.pin[data-country="armenia"] {
    --pin-bg: var(--clr-armenia-pin);
}

.pin:hover,
.pin.is-hover {
    z-index: 3;
    transform: scale(1.14);
}

.pin.is-active {
    z-index: 4;
    transform: scale(1.3);
    animation: pin-pulse 2.4s ease-out infinite;
}

@keyframes pin-pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(16 24 20 / 0.3), 0 6px 16px rgb(16 24 20 / 0.3);
    }

    70%,
    100% {
        box-shadow: 0 0 0 15px rgb(16 24 20 / 0), 0 6px 16px rgb(16 24 20 / 0.3);
    }
}

.pin-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 11px);
    translate: -50% 0;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--clr-night);
    color: var(--clr-white);
    font-size: 12px;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
    transition: opacity var(--trans-fast);
}

/* Near the right or left edge the label opens inward so it never leaves the map */
.pin.is-flip-l .pin-label {
    left: auto;
    right: -4px;
    translate: 0 0;
}

.pin.is-flip-r .pin-label {
    left: -4px;
    translate: 0 0;
}

.pin:hover .pin-label,
.pin:focus-visible .pin-label,
.pin.is-active .pin-label,
.pin.is-hover .pin-label {
    opacity: 1;
}

.pin:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 3px;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    margin-top: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
}

.map-legend .dot {
    margin-right: 7px;
}

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    vertical-align: 0.02em;
}

.dot-ge {
    background: var(--clr-georgia-map);
}

.dot-am {
    background: var(--clr-armenia-map);
}

.dot-cap {
    border: 1.5px solid var(--clr-white);
    background: var(--clr-night);
    box-shadow: 0 0 0 1px rgb(16 24 20 / 0.3);
}

@media (max-width: 639px) {
    .explorer-map {
        margin-inline: calc(-1 * var(--space-5));
    }

    .map-frame {
        border-inline: 0;
        border-radius: 0;
    }

    .map {
        border-radius: 0;
    }

    .map-legend {
        padding-inline: var(--space-5);
    }
}

/* A small map (a phone): the pins are tighter and the capitals keep their dot but lose their name, so nothing hides a pin */
@container (max-width: 25rem) {
    .pin {
        width: 25px;
        height: 25px;
        font-size: 11.5px;
    }

    .map-capital {
        padding-left: 0;
        font-size: 0;
    }

    .map-capital[data-pos="top"]::before,
    .map-capital[data-pos="bottom"]::before {
        left: -3.5px;
        margin: 0;
    }
}

/* ── Tablets: a shorter photo; the text and the map side by side, the list below across the width ── */
@media (min-width: 640px) and (max-width: 959px) {
    .explorer-photos {
        aspect-ratio: 2 / 1;
    }

    .explorer-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "intro map"
            "places places";
        column-gap: var(--space-8);
        row-gap: var(--space-6);
        align-items: start;
        padding: var(--space-8) var(--space-8) var(--space-10);
    }

    .explorer-intro {
        grid-area: intro;
    }

    .explorer-map {
        grid-area: map;
    }

    .places {
        grid-area: places;
    }
}

/* ── Wide screens: a wide photo, the switch under it in its own row, text and list on the left, map on the right ── */
@media (min-width: 960px) {
    .explorer-switch {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-6);
        padding: var(--space-5) var(--space-10) 0;
    }

    .explorer-switch .segmented-legend {
        float: left;
        margin: 0;
        padding-top: 14px;
    }

    .explorer-switch .segmented-frame {
        flex: 1 1 32rem;
        max-width: 44rem;
    }

    .explorer-photos {
        aspect-ratio: auto;
        height: clamp(18rem, 27vw, 24rem);
    }

    .explorer-photo::before {
        background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.08) 0, rgb(var(--scrim-rgb) / 0) 40%, rgb(var(--scrim-rgb) / 0) 66%, rgb(var(--scrim-rgb) / 0.5) 100%);
    }

    .explorer-body {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        grid-template-areas:
            "intro map"
            "places map";
        grid-template-rows: auto 1fr;
        column-gap: var(--space-12);
        row-gap: var(--space-6);
        align-items: start;
        padding: var(--space-10) var(--space-10) var(--space-12);
    }

    .explorer-intro {
        grid-area: intro;
    }

    .places {
        grid-area: places;
    }

    .explorer-map {
        grid-area: map;
    }
}

/* ═══ src/seasons.css ═══ */

/* Viajes Únicos — cuándo viajar: una cinta de doce meses y una sola estación en pantalla
   Elegir un mes muestra su estación (foto, fechas, qué hacer en cada país); los meses de esa estación se iluminan en la cinta.
   El único color es el ámbar de «mejor época». Sin JS, la cinta son enlaces a cada estación y las cuatro se leen apiladas. */

.seasons-section {
    overflow-x: clip; /* the rail bleeds to the screen edges on phones */
}

/* ── Months ── */
.months {
    margin-bottom: var(--space-6);
}

.months-track {
    display: flex;
    gap: 6px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.months-track::-webkit-scrollbar {
    display: none;
}

.month {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 3.6rem;
    min-height: 52px;
    padding: 0 var(--space-3) 7px;
    border: 1px solid var(--clr-chip-border);
    border-radius: var(--radius-md);
    background: var(--clr-surface);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    text-decoration: none;
    color: var(--clr-text);
    scroll-snap-align: center;
    transition: transform var(--trans-fast), border-color var(--trans-fast), background var(--trans-fast), color var(--trans-fast);
}

/* A quiet bar under every month; the months at the heart of the two recommended seasons carry it in gold */
.month::before {
    content: '';
    position: absolute;
    left: 24%;
    right: 24%;
    bottom: 8px;
    height: 3px;
    border-radius: 2px;
    background: var(--clr-paper-300);
    transition: background var(--trans-fast);
}

.month[data-best]::before {
    background: var(--clr-accent-strong);
}

.month:hover {
    border-color: var(--clr-border-strong);
    transform: translateY(-2px);
}

/* The months of the season on screen light up; the chosen one is ink */
.month.in-season {
    border-color: var(--clr-brand-line);
    background: var(--clr-brand-soft);
    color: var(--clr-brand-strong);
}

.month.is-active {
    border-color: var(--clr-text);
    background: var(--clr-text);
    color: var(--clr-bg);
}

.month.is-active::before {
    background: var(--clr-highlight);
}

.months-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.dot-best {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--clr-accent-strong);
}

@media (min-width: 760px) {
    .months-track {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        margin: 0;
        padding: 4px 0;
        overflow: visible;
    }

    .month {
        min-width: 0;
        padding-inline: 0;
    }
}

/* ── The season on screen ── */
.seasons {
    display: grid;
}

.season {
    display: grid;
    grid-area: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-surface);
    box-shadow: var(--shadow-md);
}

/* With JS only the active season is visible; it rises in when it changes */
.js .season {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s linear 0.45s;
}

.js .season.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.45s var(--ease-out) 0.05s, transform 0.5s var(--ease-out) 0.05s, visibility 0s;
}

/* Without JS the four seasons stack */
html:not(.js) .seasons {
    gap: var(--space-6);
}

html:not(.js) .season {
    grid-area: auto;
}

.season-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--clr-media-bg);
}

.season-media picture,
.season-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.season-media img {
    object-fit: cover;
    object-position: 50% 45%;
}

.season-tag {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border-radius: var(--radius-pill);
    background: var(--clr-accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    white-space: nowrap;
    color: var(--clr-night);
}

.season-tag .icon {
    width: 16px;
    height: 16px;
}

.season-tag-plain {
    background: rgb(var(--scrim-rgb) / 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--clr-white);
}

.season-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
}

.season-when {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-brand);
}

.season-when .icon {
    width: 20px;
    height: 20px;
}

.season-name {
    font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
    font-weight: var(--fw-display);
    line-height: 1.05;
    letter-spacing: var(--ls-display);
}

.season-lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    text-wrap: pretty;
}

/* What to do, country by country */
.season-recos {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.reco {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--clr-border);
    border-left: 3px solid var(--clr-georgia-map);
    border-radius: var(--radius-md);
    background: var(--clr-bg-alt);
}

.reco[data-country="armenia"],
.reco[data-country="rio"] {
    border-left-color: var(--clr-armenia-map);
}

.reco-country {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.reco-country .dot {
    background: var(--clr-georgia-map);
}

.reco[data-country="armenia"] .reco-country .dot,
.reco[data-country="rio"] .reco-country .dot {
    background: var(--clr-armenia-map);
}

.reco-text {
    font-size: var(--fs-md);
    line-height: 1.55;
}

.reco-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: 32px;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-link);
    text-decoration: none;
}

.reco-link:hover {
    color: var(--clr-link-hover);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.reco-link .icon {
    width: 1.1em;
    height: 1.1em;
    transition: transform var(--trans-fast);
}

.reco-link:hover .icon {
    transform: translateX(3px);
}

.season-months {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

.season-months .icon {
    width: 18px;
    height: 18px;
    color: var(--clr-brand);
}

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    vertical-align: 0.02em;
}

@media (min-width: 640px) {
    .season-recos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .season {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .season-media {
        aspect-ratio: auto;
        min-height: 100%;
    }

    .season-body {
        padding: var(--space-8) var(--space-10) var(--space-8) var(--space-8);
    }
}

/* ── A season with no photo: the panel shows the official mean climate of its months (Brasil: WMO normals) ── */
.season-media-data {
    display: grid;
    align-content: center;
    gap: var(--space-4);
    min-height: 15rem;
    padding: calc(var(--space-8) + 2rem) var(--space-6) var(--space-6);
    aspect-ratio: auto;
    background: linear-gradient(160deg, var(--clr-sevan-900), var(--clr-sevan-700));
    color: var(--clr-white);
}

.climate {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.climate > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgb(255 255 255 / 0.18);
}

.climate dt {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-sevan-200);
}

.climate dd {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
}

.climate-note {
    font-size: var(--fs-xs);
    color: var(--clr-sevan-200);
}

/* ═══ src/planner.css ═══ */

/* Viajes Únicos — planificar: salidas (un boleto de ejemplo con tu búsqueda) y tu viaje a medida (el constructor del resumen)
   Las dos sobre papel (v4): un formulario se lee mejor en tinta oscura sobre claro y así lo espera quien viene de cualquier app de viajes (docs/03 §3.8). */

/* ══ Salidas y precios ══════════════════════════════════════════════ */
.departures-grid {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

.departures-copy {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
}

.departures-summary {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--clr-brand);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--clr-bg-alt);
    font-size: var(--fs-md);
    line-height: 1.5;
}

.departures-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* The ticket: cream paper with two notches where the stub tears off. The mask cuts the notches (shadow included, through the wrapper's drop-shadow).
   It is a printed object, so it keeps its own cream and ink whatever the surface around it */
.ticket {
    --notch: 13px;
    --stub-h: 8.5rem;
    position: relative;
    display: grid;
    grid-template-rows: auto var(--stub-h);
    border-radius: var(--radius-xl);
    background: var(--clr-cream);
    color: var(--clr-ink-800);
    -webkit-mask:
        radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub-h)), #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub-h)), #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub-h)), #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub-h)), #0000 98%, #000) right / 51% 100% no-repeat;
}

.ticket-main {
    min-width: 0;
    padding-bottom: var(--space-6);
}

.ticket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 14px var(--space-6);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--clr-night);
    color: var(--clr-white);
}

.ticket-brand {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    letter-spacing: -0.04em;
}

.ticket-brand b {
    font-weight: var(--fw-extrabold);
}

.ticket-tag {
    padding: 2px 10px;
    border: 1px solid rgb(255 255 255 / 0.32);
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-highlight);
}

.ticket-route {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-3);
}

.ticket-city {
    display: grid;
    gap: 2px;
}

.ticket-city:last-child {
    text-align: right;
}

.ticket-label,
.ticket-grid dt {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-cream-text-muted);
}

.ticket-name {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem);
    font-weight: var(--fw-display);
    line-height: 1.05;
    letter-spacing: var(--ls-display);
}

.ticket-path {
    position: relative;
    display: grid;
    flex: 1;
    place-items: center;
    height: 34px;
    color: var(--clr-brand);
}

.ticket-path::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-top: 2px dashed var(--clr-cream-line);
}

.ticket-path .icon {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 50%;
    background: var(--clr-cream);
    box-shadow: 0 0 0 5px var(--clr-cream);
}

.ticket-note {
    padding: 0 var(--space-6);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--clr-cream-text-muted);
}

.ticket-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
    margin: var(--space-5) var(--space-6) 0;
    padding-top: var(--space-5);
    border-top: 1px dashed var(--clr-cream-line);
}

.ticket-grid dd {
    margin-top: 2px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.ticket-grid dd.is-updated {
    animation: ticket-flash 0.9s ease;
}

@keyframes ticket-flash {
    0% {
        color: var(--clr-brand);
        transform: translateY(3px);
        opacity: 0.3;
    }

    100% {
        color: inherit;
        transform: none;
        opacity: 1;
    }
}

.ticket-stub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-top: 2px dashed var(--clr-cream-line);
}

.ticket-price {
    display: grid;
    gap: 2px;
    font-size: var(--fs-sm);
    color: var(--clr-cream-text-muted);
}

.ticket-price strong {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: var(--fw-display);
    line-height: 1.1;
    letter-spacing: var(--ls-display);
    font-variant-numeric: tabular-nums;
    color: var(--clr-price);
}

.ticket-stub .native-line {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: var(--fs-md);
    color: var(--clr-accent-strong);
}

.ticket-stub .native-line i {
    display: none;
}

/* Wrapper that gives the notched ticket a shadow that follows its shape */
.departures-grid .ticket-wrap {
    filter: drop-shadow(0 22px 26px rgb(16 24 20 / 0.2));
}

@media (min-width: 640px) {
    .ticket {
        --stub: 11.5rem;
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr) var(--stub);
        -webkit-mask:
            radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
            radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
        mask:
            radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
            radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    }

    .ticket-head {
        border-radius: var(--radius-xl) 0 0 0;
    }

    .ticket-stub {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: var(--space-6) var(--space-5);
        border-top: 0;
        border-left: 2px dashed var(--clr-cream-line);
    }

    .ticket-stub .native-line {
        align-items: flex-start;
    }
}

@media (min-width: 960px) {
    .departures-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--space-12);
    }
}

/* ══ Tu viaje a medida ══════════════════════════════════════════════ */
/* overflow: clip, never hidden: a hidden ancestor turns into a scroll container and breaks the sticky intro column */
.brief {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--clr-bg);
}

/* One soft wash of the brand green high on the right: a hint of the valleys, never a second hue */
.brief::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(58% 64% at 90% 8%, color-mix(in srgb, var(--clr-georgia-map) 14%, transparent), transparent 66%);
    pointer-events: none;
}

.brief-grid {
    display: grid;
    gap: var(--space-10);
}

.brief-intro {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    align-content: start;
}

.brief-intro .t-lead {
    max-width: 34rem;
}

.brief-chips {
    margin-top: var(--space-2);
}

.brief-native {
    flex-wrap: wrap;
    margin-top: var(--space-6);
    font-size: clamp(1.3rem, 0.9rem + 1.3vw, 1.9rem);
    color: var(--clr-accent-strong);
    opacity: 0.5;
}

/* Who answers: a face people can read builds trust before a single review does (Ert, Fleischer & Magen, 2016). The avatar is a
   placeholder (initials) until the team photo arrives; then <img> replaces the text */
.person {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 30rem;
    margin-top: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
}

.person-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--clr-brand-soft);
    color: var(--clr-brand);
    font-size: var(--fs-lg);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.02em;
}

.person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html[data-draft] .person-avatar[data-ph] {
    border: 1.5px dashed var(--clr-brand);
}

.person-name {
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.person-role {
    margin-top: 2px;
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--clr-text-muted);
}

.brief-form {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background: var(--clr-surface);
    box-shadow: var(--shadow-md);
}

.brief-step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.brief-step legend,
.brief-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
    padding: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.brief-num {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--clr-brand);
    color: var(--clr-surface);
    font-size: 13px;
    font-weight: var(--fw-extrabold);
    line-height: 1;
}

.brief-hint {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--clr-text-muted);
}

.choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.choice {
    position: relative;
    display: block;
}

.choice input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice-face {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--clr-chip-border);
    border-radius: var(--radius-pill);
    background: var(--clr-chip-bg);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
    transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
}

.choice:hover .choice-face {
    background: var(--clr-btn-sec-bg-hover);
}

/* Chosen = the page color as ink on the text color as fill: it works on dark and on paper */
.choice input:checked + .choice-face {
    border-color: var(--clr-text);
    background: var(--clr-text);
    color: var(--clr-bg);
}

.choice input:focus-visible + .choice-face {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

/* Twelve months in even rows; "not sure yet" takes the whole first row */
.choices-months {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choices-months .choice-face {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 var(--space-2);
}

.choices-months .choice:first-child {
    grid-column: 1 / -1;
}

@media (min-width: 560px) {
    .choices-months {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.choices-cards {
    display: grid;
    grid-template-columns: 1fr;
}

.choice-card .choice-face {
    width: 100%;
    min-height: 60px;
    padding: 6px var(--space-5) 6px 6px;
    border-radius: var(--radius-lg);
}

.choice-card .icon {
    width: 24px;
    height: 24px;
}

/* The three interests show their photo: in the evidence a picture is what makes people imagine the trip (Lee & Gretzel, 2012) */
.choice-thumb {
    display: block;
    flex: none;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--clr-media-bg);
}

.choice-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.choice-card input:checked + .choice-face .choice-thumb {
    box-shadow: 0 0 0 2px var(--clr-bg);
}

.choice-card input:checked + .choice-face::after {
    content: '';
    width: 18px;
    height: 18px;
    margin-left: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.brief-note-field {
    width: 100%;
}

.brief-summary {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--clr-border);
}

.brief-summary-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--clr-accent-text);
}

.brief-summary-text {
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    text-wrap: balance;
}

.brief-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.brief-actions .btn {
    flex: 1 1 14rem;
}

.brief-status {
    min-height: 1.4em;
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

@media (min-width: 640px) {
    .brief-form {
        padding: var(--space-8);
    }

    .choices-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .choice-card .choice-face {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-2);
        min-height: 96px;
        padding: var(--space-4) var(--space-5);
    }

    .choice-card input:checked + .choice-face::after {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        margin: 0;
    }
}

@media (min-width: 1000px) {
    .brief-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--space-12);
        align-items: start;
    }

    .brief-intro {
        position: sticky;
        top: calc(var(--header-h) + var(--space-8));
    }
}

/* ═══ src/checklist.css ═══ */

/* Viajes Únicos — requisitos: cinco temas en pestañas (lista vertical en escritorio, barra desplazable en móvil), un panel a la vez,
   un anillo de avance y la casilla «lo he revisado» que se guarda en el navegador. Sin JS: las pestañas no aparecen y los cinco paneles se leen apilados. */

.reqs {
    display: grid;
    gap: var(--space-5);
}

/* ── Side: progress ring and tabs ── */
.reqs-side {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.reqs-progress {
    display: none;
    align-items: center;
    gap: var(--space-3);
}

.js .reqs-progress {
    display: flex;
}

.reqs-ring {
    flex: none;
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
}

.reqs-ring-track,
.reqs-ring-bar {
    fill: none;
    stroke-width: 5;
}

.reqs-ring-track {
    stroke: var(--clr-track);
}

.reqs-ring-bar {
    stroke: var(--clr-done);
    stroke-linecap: round;
    stroke-dasharray: 125.66; /* 2π · 20 */
    stroke-dashoffset: 125.66;
    transition: stroke-dashoffset 0.6s var(--ease-out);
}

.reqs-bar-text {
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

.reqs-bar-text strong {
    color: var(--clr-text);
}

.reqs-tabs {
    display: none;
    gap: 4px;
    list-style: none;
}

.js .reqs-tabs {
    display: flex;
    flex-direction: column;
}

.reqs-tab {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    text-align: left;
    color: var(--clr-text-muted);
    cursor: pointer;
    transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}

.reqs-tab > .icon {
    width: 22px;
    height: 22px;
    flex: none;
}

.reqs-tab-label {
    flex: 1;
    min-width: 0;
}

/* The state dot turns into a check when the topic is reviewed */
.reqs-tab-state {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--clr-border-strong);
    border-radius: 50%;
    color: var(--clr-on-accent);
    transition: background var(--trans-fast), border-color var(--trans-fast);
}

.reqs-tab-state .icon {
    width: 14px;
    height: 14px;
    opacity: 0;
}

.reqs-tab.is-done .reqs-tab-state {
    border-color: var(--clr-done);
    background: var(--clr-done);
}

.reqs-tab.is-done .reqs-tab-state .icon {
    opacity: 1;
}

.reqs-tab:hover {
    background: var(--clr-btn-sec-bg-hover);
    color: var(--clr-text);
}

.reqs-tab[aria-selected="true"] {
    border-color: var(--clr-border);
    background: var(--clr-surface);
    color: var(--clr-text);
    box-shadow: var(--shadow-sm);
}

.reqs-tab:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

/* ── Panels ── */
.reqs-panels {
    display: grid;
    gap: var(--space-5);
}

.req {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--trans-normal), background var(--trans-normal);
}

.req[hidden] {
    display: none;
}

.js .req.is-active {
    animation: req-in 0.45s var(--ease-out);
}

@keyframes req-in {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.req.is-done {
    border-color: var(--clr-brand-line);
    background: var(--clr-done-soft);
}

.req:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

.req-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.req-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--clr-brand-soft);
    color: var(--clr-brand);
}

.req-icon .icon {
    width: 26px;
    height: 26px;
}

.req-step {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.req-step span {
    color: var(--clr-brand);
}

.req-head .verdict {
    grid-column: 1 / -1;
    justify-self: start;
}

/* The verdict: the answer to "can I go?" before the paragraph that explains it */
.verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.25;
}

.verdict .icon {
    width: 18px;
    height: 18px;
}

.verdict-ok {
    background: var(--clr-success-bg);
    color: var(--clr-success);
}

.verdict-warn {
    background: var(--clr-warning-bg);
    color: var(--clr-warning);
}

.verdict-info {
    background: var(--clr-info-bg);
    color: var(--clr-info);
}

.verdict-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.req > p {
    font-size: var(--fs-body);
    line-height: 1.6;
}

.req-care {
    gap: var(--space-2);
}

.req-care .chip {
    white-space: normal;
}

.req .req-official {
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

/* Quick facts: code-like values with their meaning */
.req-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-2);
}

.req-facts li {
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-bg-alt);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--clr-text-muted);
}

.req-facts strong {
    font-size: var(--fs-lg);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-heading);
    color: var(--clr-brand);
}

.req-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--clr-border);
}

.req-next {
    display: none;
}

.js .req-next {
    display: inline-flex;
}

/* The "I've read it" toggle: a dashed pill that fills in when ticked */
.req-check {
    position: relative;
    display: none;
}

.js .req-check {
    display: block;
}

.req-check input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.req-check-face {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4) 0 var(--space-3);
    border: 1.5px dashed var(--clr-border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-text);
    transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}

.req-check-face .icon {
    width: 18px;
    height: 18px;
    padding: 2px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    opacity: 0.45;
}

.req-check:hover .req-check-face {
    background: var(--clr-done-soft);
}

.req-check input:checked + .req-check-face {
    border-style: solid;
    border-color: var(--clr-done);
    background: var(--clr-done);
    color: var(--clr-on-accent);
}

.req-check input:checked + .req-check-face .icon {
    opacity: 1;
}

.req-check input:focus-visible + .req-check-face {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

.reqs-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    margin-top: var(--space-6);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-alt);
    animation: reqs-in 0.6s var(--ease-out);
}

.reqs-done[hidden] {
    display: none;
}

@keyframes reqs-in {
    from {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Phones and tablets: the tabs become a scrollable bar of icons and short labels ── */
@media (max-width: 959px) {
    .js .reqs-tabs {
        flex-direction: row;
        margin: 0 calc(-1 * var(--gutter));
        padding: 2px var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .reqs-tabs::-webkit-scrollbar {
        display: none;
    }

    .reqs-tabs li {
        flex: 0 0 auto;
    }

    .reqs-tab {
        width: auto;
        min-height: 44px;
        padding: 0 var(--space-3);
        border-radius: var(--radius-pill);
        font-size: var(--fs-md);
    }

    .reqs-tab > .icon {
        width: 20px;
        height: 20px;
    }

    .reqs-tab-state {
        width: 18px;
        height: 18px;
    }

    .reqs-tab-state .icon {
        width: 12px;
        height: 12px;
    }
}

@media (min-width: 960px) {
    .reqs {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: var(--space-8);
        align-items: start;
    }

    .reqs-side {
        position: sticky;
        top: calc(var(--header-h) + var(--space-6));
    }

    .req {
        padding: var(--space-8);
    }
}

/* ═══ src/faq.css ═══ */

/* Viajes Únicos — preguntas frecuentes: una columna lateral con buscador y temas (con JS) y un acordeón nativo <details>
   La pregunta es el título (h3 dentro de <summary>); la respuesta empieza por la respuesta. Se puede buscar con Ctrl+F: <details> se abre solo. */

.faq-layout {
    display: grid;
    gap: var(--space-8);
}

.faq-aside {
    display: grid;
    gap: var(--space-6);
    align-content: start;
}

.faq-aside .section-header {
    margin-bottom: 0;
}

.faq-aside .t-h2 {
    font-size: clamp(1.75rem, 1rem + 1.7vw, 2.5rem);
}

/* Search and topics need JS; without it the full list is already readable */
.faq-tools {
    display: none;
}

.js .faq-tools {
    display: grid;
    gap: var(--space-4);
}

.faq-search {
    position: relative;
}

.faq-search .icon {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    translate: 0 -50%;
    width: 20px;
    height: 20px;
    color: var(--clr-text-muted);
    pointer-events: none;
}

.faq-input {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4) 0 3rem;
    border: 1.5px solid var(--clr-field-border);
    border-radius: var(--radius-pill);
    background: var(--clr-field-bg);
    color: var(--clr-field-text);
    font-size: var(--fs-body);
}

.faq-input::placeholder {
    color: var(--clr-field-placeholder);
}

.faq-input:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

.faq-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.faq-topic {
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--clr-chip-border);
    border-radius: var(--radius-pill);
    background: var(--clr-chip-bg);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);
}

.faq-topic:hover {
    background: var(--clr-btn-sec-bg-hover);
}

.faq-topic.is-active {
    border-color: var(--clr-text);
    background: var(--clr-text);
    color: var(--clr-bg);
}

.faq-count {
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.faq-help {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-alt);
}

.faq-help-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.faq-help .btn {
    margin-top: var(--space-3);
}

/* ── The accordion ── */
.faq-list {
    display: grid;
    gap: var(--space-3);
    counter-reset: faq;
}

.faq-item {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    counter-increment: faq;
    transition: border-color var(--trans-normal), box-shadow var(--trans-normal);
}

.faq-item[hidden] {
    display: none;
}

.faq-item:hover {
    border-color: var(--clr-border-strong);
}

.faq-item[open] {
    border-color: var(--clr-brand-line);
    box-shadow: var(--shadow-sm);
}

.faq-summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 68px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    list-style: none;
    cursor: pointer;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-summary::before {
    content: counter(faq, decimal-leading-zero);
    flex: none;
    width: 1.7rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    color: var(--clr-accent-text);
}

.faq-q {
    flex: 1;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.faq-summary:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

.faq-a {
    padding: 0 var(--space-5) var(--space-6) calc(var(--space-5) + 1.7rem + var(--space-4));
    animation: faq-in 0.4s var(--ease-out);
}

.faq-a p {
    max-width: 44rem;
    line-height: 1.65;
}

@keyframes faq-in {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.faq-empty {
    padding: var(--space-6);
    border: 1px dashed var(--clr-border-strong);
    border-radius: var(--radius-lg);
    color: var(--clr-text-muted);
}

.faq-empty[hidden] {
    display: none;
}

@media (max-width: 559px) {
    .faq-a {
        padding-left: var(--space-5);
    }
}

@media (min-width: 960px) {
    .faq-layout {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--space-12);
        align-items: start;
    }

    .faq-aside {
        position: sticky;
        top: calc(var(--header-h) + var(--space-8));
    }
}

/* ═══ src/pages.css ═══ */

/* Viajes Únicos — páginas internas: cabecera de página (con foto o clara), migas, índice lateral con scroll-spy, secciones de lectura,
   cifras, tarjetas de sitio, línea de tiempo, tarjetas de enlace, «sigue explorando», contacto, mes a mes y textos legales.
   Misma regla que components.css: solo roles semánticos. */

/* ── Page hero ────────────────────────────────────────────────────── */
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: calc(var(--header-h) + var(--space-12)) 0 var(--space-12);
    background: var(--clr-bg);
}

.page-hero-art {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--clr-media-bg);
}

.page-hero-art picture,
.page-hero-art img {
    display: block;
    width: 100%;
    height: 100%;
}

.page-hero-art img {
    object-fit: cover;
    object-position: 50% 40%;
}

.page-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.72) 0, rgb(var(--scrim-rgb) / 0.3) 30%, rgb(var(--scrim-rgb) / 0.55) 100%),
        linear-gradient(90deg, rgb(var(--scrim-rgb) / 0.75) 0, rgb(var(--scrim-rgb) / 0.45) 50%, rgb(var(--scrim-rgb) / 0.1) 100%);
}

.page-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.page-hero-inner > * {
    max-width: 52rem;
}

.page-hero .t-display {
    font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.9rem);
    text-shadow: 0 2px 28px rgb(var(--scrim-rgb) / 0.35);
}

.page-hero .t-lead {
    max-width: 40em;
}

.page-hero .hero-native {
    margin-bottom: 0;
}

.page-hero .hero-chips .chip {
    background: rgb(var(--scrim-rgb) / 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Light hero: no photo, the brand gradient as a thin top rule, dark type */
.page-hero-light {
    padding-top: calc(var(--header-h) + var(--space-10));
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--clr-border);
}

.page-hero-light .t-display {
    text-shadow: none;
}

.page-hero-light .t-lead {
    color: var(--clr-text-muted);
}

/* ── Breadcrumbs ─────────────────────────────────────────────────── */
.crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-text-muted);
}

.crumbs li + li::before {
    content: '/';
    margin-right: 6px;
    opacity: 0.5;
}

.crumbs a {
    color: inherit;
    text-decoration: none;
}

.crumbs a:hover {
    color: var(--clr-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.crumbs [aria-current] {
    color: var(--clr-text);
}

/* ── Page layout: side index + reading column ─────────────────────── */
.page-layout {
    display: grid;
    gap: var(--space-10);
    padding-block: var(--space-12);
}

.page-layout-narrow {
    max-width: 52rem;
}

.page-side {
    display: grid;
    gap: var(--space-6);
    align-content: start;
}

.page-content {
    display: grid;
    gap: var(--space-16);
    min-width: 0;
}

.page-section {
    display: grid;
    gap: var(--space-4);
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.page-section > .t-h2 {
    font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem);
}

.page-section > .t-lead,
.page-section > p {
    max-width: 42em;
}

.page-prose p + p {
    margin-top: var(--space-4);
}

/* The index: visible only with JS, sticky on wide screens; the link of the section on screen is highlighted */
.toc {
    display: none;
}

.js .toc {
    display: block;
}

.toc-title {
    margin-bottom: var(--space-3);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.toc-list {
    display: grid;
    gap: 2px;
    list-style: none;
    border-left: 2px solid var(--clr-border);
}

.toc-list a {
    display: block;
    margin-left: -2px;
    padding: 7px 14px;
    border-left: 2px solid transparent;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    color: var(--clr-text-muted);
    transition: color var(--trans-fast), border-color var(--trans-fast);
}

.toc-list a:hover {
    color: var(--clr-text);
}

.toc-list a.is-active {
    border-left-color: var(--clr-brand);
    color: var(--clr-brand);
}

.side-cta {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-alt);
    font-size: var(--fs-md);
}

.side-cta-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.side-cta .btn {
    margin-top: var(--space-2);
}

@media (min-width: 960px) {
    .page-layout {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: var(--space-16);
        align-items: start;
    }

    .page-layout-narrow {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-side {
        position: sticky;
        top: calc(var(--header-h) + var(--space-8));
    }
}

@media (max-width: 959px) {
    .toc {
        display: none !important; /* on small screens the page is short enough to scroll; the index would only push the content down */
    }
}

/* ── Figures ─────────────────────────────────────────────────────── */
.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.stat {
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
}

.stat-num {
    display: block;
    font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem);
    font-weight: var(--fw-display);
    line-height: 1.05;
    letter-spacing: var(--ls-display);
    font-variant-numeric: tabular-nums;
    color: var(--clr-brand);
}

.stat-label {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--clr-text-muted);
}

@media (min-width: 640px) {
    .stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Facts in two columns on wide screens */
.facts-grid {
    border-top: 0;
}

@media (min-width: 640px) {
    .facts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-8);
    }

    .facts-grid > div {
        grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
    }
}

/* ── Topic blocks (by interest) and place cards ──────────────────── */
.topic {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5) 0 var(--space-6);
    border-top: 1px solid var(--clr-border);
}

.topic-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-heading);
}

.topic-title .icon {
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--clr-brand-soft);
    color: var(--clr-brand);
}

.topic > p {
    max-width: 42em;
}

.place-cards {
    display: grid;
    gap: var(--space-3);
}

.place-card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-surface);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
}

.place-card:hover {
    border-color: var(--clr-brand-line);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.place-card strong {
    font-size: var(--fs-lg);
    line-height: 1.3;
}

.place-card p {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--clr-text-muted);
}

@media (min-width: 640px) {
    .place-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.topic-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    min-height: 40px;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-link);
    text-decoration: none;
}

.topic-link:hover {
    color: var(--clr-link-hover);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.topic-link .icon {
    width: 1.1em;
    height: 1.1em;
    transition: transform var(--trans-fast);
}

.topic-link:hover .icon {
    transform: translateX(3px);
}

/* ── Timeline (when to go, by season) ────────────────────────────── */
.timeline {
    display: grid;
    gap: 0;
    counter-reset: tl;
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-4) var(--space-6);
    border-left: 2px solid var(--clr-border);
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: calc(var(--space-4) + 6px);
    left: -7px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--clr-bg);
    border-radius: 50%;
    background: var(--clr-border-strong);
}

.timeline-item[data-best]::before {
    background: var(--clr-accent-strong);
}

.timeline-when {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--fw-bold);
}

.timeline-when .icon {
    width: 20px;
    height: 20px;
    color: var(--clr-brand);
}

.timeline-item[data-best] .timeline-when::after {
    content: 'mejor época';
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--clr-accent-soft);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
}

.timeline-item p {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--clr-text-muted);
}

@media (max-width: 559px) {
    .timeline-item {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* ── Link cards (official sheets, guides) ─────────────────────────── */
.link-cards {
    display: grid;
    gap: var(--space-3);
}

.link-card {
    display: grid;
    gap: 4px;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-surface);
    text-decoration: none;
    color: var(--clr-text);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
}

.link-card:hover {
    border-color: var(--clr-brand-line);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.link-card-kicker {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-brand);
}

.link-card strong {
    font-size: var(--fs-body);
    line-height: 1.3;
}

.link-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.link-card-meta .icon {
    width: 16px;
    height: 16px;
}

@media (min-width: 640px) {
    .link-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .link-cards-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Related: three cards that close every inner page ─────────────── */
.related {
    padding-block: var(--space-12);
    border-top: 1px solid var(--clr-border);
}

.related .t-h3 {
    margin-bottom: var(--space-5);
}

.related-grid {
    display: grid;
    gap: var(--space-3);
}

.related-card {
    display: grid;
    gap: 4px;
    padding: var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    text-decoration: none;
    color: var(--clr-text);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--trans-fast), box-shadow var(--trans-normal), transform var(--trans-normal);
}

.related-card:hover {
    border-color: var(--clr-brand-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.related-kicker {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-brand);
}

.related-card strong {
    font-size: var(--fs-lg);
    line-height: 1.3;
}

.related-card > span:last-child {
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

@media (min-width: 640px) {
    .related-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Contact ─────────────────────────────────────────────────────── */
.contact-cards {
    display: grid;
    gap: var(--space-3);
}

.contact-card {
    display: grid;
    gap: 4px;
    padding: var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    text-decoration: none;
    color: var(--clr-text);
    box-shadow: var(--shadow-sm);
}

a.contact-card:hover {
    border-color: var(--clr-brand-line);
    box-shadow: var(--shadow-md);
}

.contact-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--clr-brand-soft);
    color: var(--clr-brand);
}

.contact-icon .icon {
    width: 24px;
    height: 24px;
}

.contact-card strong {
    font-size: var(--fs-lg);
}

.contact-text {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--clr-text-muted);
}

.contact-meta {
    margin-top: var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--clr-brand);
}

.contact-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-2);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-alt);
}

@media (min-width: 640px) {
    .contact-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.howto-steps-stack {
    grid-template-columns: 1fr !important;
}

/* ── Method cards (sources page) ─────────────────────────────────── */
.method-grid {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.method-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
}

.method-card > .icon {
    width: 28px;
    height: 28px;
    color: var(--clr-brand);
}

.method-card p {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--clr-text-muted);
}

@media (min-width: 640px) {
    .method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Month grid (cuándo viajar) ──────────────────────────────────── */
.month-grid {
    display: grid;
    gap: var(--space-3);
}

.month-card {
    display: grid;
    gap: 4px;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-paper-300);
    border-radius: var(--radius-md);
    background: var(--clr-surface);
}

.month-card[data-best] {
    border-top-color: var(--clr-accent-strong);
}

.month-card-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.month-card-season {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-brand);
}

.month-card[data-best] .month-card-season {
    color: var(--clr-accent-strong);
}

.month-card p:last-child {
    margin-top: var(--space-1);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--clr-text-muted);
}

@media (min-width: 560px) {
    .month-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .month-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── FAQ variants on inner pages ─────────────────────────────────── */
.faq-list-plain {
    counter-reset: faq;
}

.faq-aside > .btn {
    justify-self: start;
}

/* ── Sources page: the box is open and static ────────────────────── */
.sources-box-page .sources-summary {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon title" "icon sub";
    cursor: auto;
}

.sources-box-page .sources {
    padding-top: var(--space-4);
}

/* ── Inner pages that open with a shared block: the block's own header would repeat the H1, so it goes; the hero already says it ── */
.page-requisitos #requisitos > .container > .section-header,
.page-cuando-viajar #cuando-viajar > .container > .section-header,
.page-que-descubrir #que-descubrir > .container > .section-header {
    display: none;
}

.page-hero + .section {
    padding-top: var(--space-10);
}

/* ── Entrada según el pasaporte: una tabla que se lee de un vistazo (y se apila en el móvil) ───────────────── */
.entry {
    display: grid;
    gap: var(--space-3);
}

.entry-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    text-align: left;
}

.entry-table th,
.entry-table td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--clr-border);
    vertical-align: middle;
}

.entry-table tbody tr:last-child > * {
    border-bottom: 0;
}

.entry-table thead th {
    background: var(--clr-bg-alt);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.entry-table tbody th {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-heading);
    color: var(--clr-text);
}

.entry-table tbody th .link {
    text-decoration: none;
    color: inherit;
}

.entry-table tbody th .link:hover {
    color: var(--clr-brand);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.entry-table td {
    display: table-cell;
}

.prose-cols + .entry,
.verdict-row + .entry {
    margin-top: var(--space-8);
}

.entry + .link-cards {
    margin-top: var(--space-6);
}

.entry-note {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.entry-foot {
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

@media (max-width: 639px) {
    .entry-table,
    .entry-table tbody,
    .entry-table tr,
    .entry-table th,
    .entry-table td {
        display: block;
    }

    .entry-table {
        border: 0;
        background: none;
    }

    .entry-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .entry-table tbody {
        display: grid;
        gap: var(--space-3);
    }

    .entry-table tr {
        overflow: hidden;
        border: 1px solid var(--clr-border);
        border-radius: var(--radius-lg);
        background: var(--clr-surface);
    }

    .entry-table tbody th {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--clr-border);
        background: var(--clr-bg-alt);
        font-size: var(--fs-body);
    }

    .entry-table td {
        padding: var(--space-3) var(--space-4);
    }

    .entry-table td + td {
        border-top: 1px solid var(--clr-border);
    }

    .entry-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        font-size: var(--fs-2xs);
        font-weight: var(--fw-bold);
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
        color: var(--clr-text-muted);
    }

    .entry-table tbody tr:last-child > * {
        border-bottom: 0;
    }
}

/* ── Desde Colombia, México y Brasil: tres tarjetas en la portada, fichas por pasaporte, especificaciones ───── */
.latam-cards {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 760px) {
    .latam-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.latam-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    text-decoration: none;
    color: var(--clr-text);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
}

.latam-card:hover {
    border-color: var(--clr-brand-line);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.latam-card:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 3px;
}

.latam-card-name {
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-heading);
}

.latam-card-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.latam-card-dest {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--clr-text-muted);
}

.latam-card-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--clr-brand);
}

.latam-card-go .icon {
    width: 16px;
    height: 16px;
}

.latam-note {
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.pass-cards {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 960px) {
    .pass-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }
}

.pass-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    scroll-margin-top: calc(var(--header-h) + 16px);
}

.pass-card:target {
    border-color: var(--clr-brand);
    box-shadow: var(--shadow-md);
}

.pass-row {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.pass-row p {
    font-size: var(--fs-md);
    line-height: 1.55;
}

.pass-row .pass-dest {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.pass-tip {
    padding-top: var(--space-4);
    border-top: 1px solid var(--clr-border);
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--clr-text-muted);
}

.pass-tip strong {
    color: var(--clr-text);
}

.spec-cards {
    display: grid;
    gap: var(--space-4);
    list-style: none;
}

@media (min-width: 640px) {
    .spec-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .spec-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.spec-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    row-gap: 4px;
    align-items: start;
    padding: var(--space-5);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--clr-text-muted);
}

.spec-card strong {
    font-size: var(--fs-lg);
    letter-spacing: var(--ls-heading);
    color: var(--clr-text);
}

.spec-icon {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--clr-brand-soft);
    color: var(--clr-brand);
}

.spec-icon .icon {
    width: 24px;
    height: 24px;
}

.latam-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--grad-brand);
    color: var(--clr-white);
}

.latam-cta .t-h3 {
    color: var(--clr-white);
}

.latam-cta p {
    max-width: 38rem;
    margin-top: var(--space-2);
    color: rgb(255 255 255 / 0.9);
}

/* Two cards instead of three (Brasil: Colombia and México) */
@media (min-width: 760px) {
    .latam-cards-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .pass-cards-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A bulleted list inside a disclosure or an alert (the safety and health detail of the requirements) */
.req-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding-left: 1.1rem;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--clr-text-muted);
}

.req-list strong {
    color: var(--clr-text);
}

.plain-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ═══ src/salidas.css ═══ */

/* Viajes Únicos — salidas: el calendario de un plan (una tarjeta por salida) y la página de cada salida
   (resumen con la caja de reserva, programa día a día, qué incluye y qué no, y actividades opcionales).
   Las tarjetas las genera tools/build_salidas.py a partir de site/data/brasil-salidas.json. Solo roles semánticos. */

.dep-list {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 760px) {
    .dep-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dep-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--trans-fast), border-color var(--trans-fast), opacity var(--trans-fast);
}

.dep-card:hover {
    box-shadow: var(--shadow-md);
}

.dep-badge {
    justify-self: start;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--clr-accent-soft);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-accent-strong);
}

.dep-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

.dep-title a {
    color: inherit;
    text-decoration: none;
}

.dep-title a:hover {
    color: var(--clr-link-hover);
    text-decoration: underline;
}

.dep-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--fw-semibold);
    color: var(--clr-brand);
}

.dep-dates .icon {
    flex: none;
    width: 18px;
    height: 18px;
}

.dep-facts {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.dep-facts > div {
    display: flex;
    gap: var(--space-3);
    font-size: var(--fs-md);
}

.dep-facts dt {
    flex: 0 0 5.2rem;
    color: var(--clr-text-muted);
}

.dep-facts dd {
    margin: 0;
    font-weight: var(--fw-semibold);
}

.dep-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-2);
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

.dep-price strong {
    font-size: var(--fs-xl);
    color: var(--clr-price);
}

.dep-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* With a month chosen in the finder, the departures that fit are ringed (the summary line says how many); the others keep their full contrast.
   A departure that already left says so, loses its booking button and sits on the grey band (never dimmed: text at reduced opacity would fail AA) */
.dep-card.is-match {
    border-color: var(--clr-accent-strong);
    box-shadow: 0 0 0 3px var(--clr-accent), var(--shadow-md);
}

.dep-card.is-past {
    background: var(--clr-bg-alt);
    box-shadow: none;
}

.dep-card.is-past .dep-actions .btn-primary,
.dep-card.is-past .dep-price {
    display: none;
}

.dep-state {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--clr-text-muted);
}

.dep-notes {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-8);
}

@media (min-width: 760px) {
    .dep-notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dep-note {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-alt);
}

.dep-note > .icon {
    width: 28px;
    height: 28px;
    color: var(--clr-brand);
}

.dep-note p {
    color: var(--clr-text-muted);
}

.departures .howto {
    margin-top: var(--space-10);
}

/* ── A departure page ── */
.dep-grid {
    display: grid;
    gap: var(--space-8);
}

@media (min-width: 960px) {
    .dep-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        align-items: start;
    }
}

.dep-book {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-md);
}

@media (min-width: 960px) {
    .dep-book {
        position: sticky;
        top: calc(var(--header-h) + var(--space-6));
    }
}

.dep-book-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.dep-book-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--clr-text-muted);
}

.dep-book-price strong {
    font-size: var(--fs-h3);
    color: var(--clr-price);
}

.dep-book-line {
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
}

.itin {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.itin-day {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
}

@media (min-width: 760px) {
    .itin-day {
        grid-template-columns: minmax(13rem, 1fr) minmax(0, 2.2fr);
        gap: var(--space-6);
    }
}

.itin-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.itin-num {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--clr-brand);
    font-weight: var(--fw-extrabold);
    color: var(--clr-on-accent);
}

.itin-date {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.itin-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: 1.25;
}

.itin-body {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    color: var(--clr-text-muted);
}

.itin-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--clr-text);
}

.itin-meta .icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--clr-brand);
}

.itin-incl,
.itin-note {
    font-size: var(--fs-md);
}

.itin-opt {
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--clr-accent-soft);
    color: var(--clr-text);
}

.itin-opt-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-accent-strong);
}

.itin-opt ul {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    padding-left: 1.1rem;
    font-size: var(--fs-md);
}

.incl-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 760px) {
    .incl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.incl-card {
    padding: var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
}

.incl-card .t-h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-3);
}

.incl-card .t-h3 .icon {
    width: 22px;
    height: 22px;
}

.incl-yes .t-h3 .icon {
    color: var(--clr-done);
}

.incl-no .t-h3 .icon {
    color: var(--clr-danger);
}

.incl-card ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-left: 1.1rem;
    color: var(--clr-text-muted);
}

.opt-text {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    color: var(--clr-text-muted);
}

.opt-note {
    display: block;
    margin-top: 2px;
}

/* ═══ src/visual.css ═══ */

/* Viajes Únicos — la imagen como contenido (páginas de país)
   Sub-navegación fija con acción, cabecera con foto a toda altura, mosaico de fotos que abre un visor (lightbox), bloques «foto + lugares»
   con la foto fija mientras se lee, una banda con foto y una cifra, un selector de estación con la foto de cada una y tres tarjetas de
   entrada al viaje (cada una lleva el interés ya elegido al resumen a medida). Misma regla que el resto: solo roles semánticos.
   Por qué así (docs/03 §Imagen): cada foto lleva el nombre del lugar encima o al lado (texto + imagen), no hay carruseles automáticos
   (la persona decide cuándo pasar de foto), y el visor es un <dialog> nativo con teclado, deslizar y miniaturas. */

/* The anchors of these pages must clear the header and the sub-navigation */
.page-georgia [id],
.page-armenia [id],
.page-rio-de-janeiro [id],
.page-salida [id] {
    scroll-margin-top: calc(var(--header-h) + 64px);
}

/* ── Country hero: tall, photographic, text at the bottom-left ─────── */
.page-hero-country {
    display: flex;
    align-items: flex-end;
    min-height: clamp(32rem, 78vh, 50rem);
    padding-bottom: var(--space-12);
}

.page-hero-country .page-hero-scrim {
    background:
        linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.62) 0, rgb(var(--scrim-rgb) / 0.4) 24%, rgb(var(--scrim-rgb) / 0.46) 58%, rgb(var(--scrim-rgb) / 0.9) 100%),
        linear-gradient(90deg, rgb(var(--scrim-rgb) / 0.55) 0, rgb(var(--scrim-rgb) / 0) 62%);
}

.page-hero-country .page-hero-art img {
    object-position: var(--hero-x, 50%) var(--hero-y, 40%);
}

.page-hero-country .crumbs ol {
    color: rgb(255 255 255 / 0.9);
}

/* Phone: the text covers the whole photo, so the scrim is even and stronger (text over a bright sky must stay AA) */
@media (max-width: 759px) {
    .page-hero-country .page-hero-scrim {
        background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.76) 0, rgb(var(--scrim-rgb) / 0.7) 42%, rgb(var(--scrim-rgb) / 0.84) 100%);
    }
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* ── Sub-navigation: where am I, where can I go, and the one action ── */
.subnav {
    position: sticky;
    top: var(--header-h);
    z-index: calc(var(--z-header) - 1);
    border-bottom: 1px solid var(--clr-border);
    background: color-mix(in srgb, var(--clr-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.subnav-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 56px;
}

.subnav-list {
    display: flex;
    flex: 1;
    gap: 4px;
    margin: 0 calc(-1 * var(--space-2));
    padding: 0 var(--space-2);
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.subnav-list::-webkit-scrollbar {
    display: none;
}

.subnav-list a {
    display: block;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    text-decoration: none;
    color: var(--clr-text-muted);
    transition: background var(--trans-fast), color var(--trans-fast);
}

.subnav-list a:hover {
    color: var(--clr-text);
}

.subnav-list a.is-active {
    background: var(--clr-brand-soft);
    color: var(--clr-brand);
}

.subnav-cta {
    flex: none;
}

@media (max-width: 679px) {
    .subnav-cta {
        display: none; /* the app bar already carries the action on phones */
    }
}

/* ── Mosaic: six photos in two justified rows (3+2+1 and 2+2+2 of six columns); each opens the viewer ─────────── */
.mosaic {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 14rem;
    gap: var(--space-3);
    list-style: none;
}

.mosaic > li {
    min-width: 0;
}

.m3 {
    grid-column: span 3;
}

.m2 {
    grid-column: span 2;
}

.m1 {
    grid-column: span 1;
}

@media (max-width: 759px) {
    .mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 10.5rem;
    }

    .m3,
    .mosaic > li:last-child {
        grid-column: 1 / -1;
    }

    .m2,
    .m1 {
        grid-column: span 1;
    }

    .m3 {
        grid-row: span 1;
    }
}

/* Tablet: the one-column tile is only ~110px wide, so its caption drops the pin and the size a step */
@media (min-width: 760px) and (max-width: 1099px) {
    .m1 .shot-cap {
        padding: 4px 9px;
        font-size: var(--fs-xs);
        overflow-wrap: anywhere;
    }

    .m1 .shot-cap .icon {
        display: none;
    }
}

.mosaic-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-5);
}

.shot {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-lg);
    background: var(--clr-media-bg);
    color: var(--clr-white);
    text-decoration: none;
    cursor: zoom-in;
}

.shot picture,
.shot img {
    display: block;
    width: 100%;
    height: 100%;
}

.shot img {
    object-fit: cover;
    object-position: var(--ox, 50%) var(--oy, 50%);
    transition: transform 1.2s var(--ease-out);
}

.shot:hover img,
.shot:focus-visible img {
    transform: scale(1.05);
}

.shot::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0) 52%, rgb(var(--scrim-rgb) / 0.7) 100%);
    pointer-events: none;
}

.shot:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 3px;
}

/* The place name sits on the photo: text and image read as one thing */
.shot-cap {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: calc(100% - var(--space-6));
    padding: 5px 12px 5px 9px;
    border-radius: var(--radius-pill);
    background: rgb(var(--scrim-rgb) / 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.shot-cap .icon {
    width: 16px;
    height: 16px;
    color: var(--clr-ambar-300);
}

.shot-zoom {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(var(--scrim-rgb) / 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--trans-fast), transform var(--trans-fast);
}

.shot-zoom .icon {
    width: 18px;
    height: 18px;
}

.shot:hover .shot-zoom,
.shot:focus-visible .shot-zoom {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .shot-zoom {
        opacity: 1;
        transform: none;
    }
}

/* ── Viewer (lightbox): a native <dialog>; keyboard, swipe and thumbnails ──────────────────────── */
html.lb-open {
    overflow: hidden;
}

.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: rgb(5 17 21 / 0.985);
    color: var(--clr-white);
}

.lightbox::backdrop {
    background: rgb(5 17 21 / 0.8);
}

.lightbox[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    animation: lb-in 0.3s var(--ease-out);
}

@keyframes lb-in {
    from {
        opacity: 0;
        transform: scale(1.015);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lightbox-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 64px 76px 12px;
    touch-action: pan-y;
}

.lightbox-fig {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
}

.lightbox-fig picture {
    display: block;
    min-height: 0;
}

.lightbox-fig img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 230px);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 64px -16px rgb(0 0 0 / 0.6);
    object-fit: contain;
    transition: opacity 0.25s ease;
}

.lightbox-fig img.is-loading {
    opacity: 0.15;
}

.lightbox-cap {
    display: grid;
    gap: 2px;
    max-width: 52rem;
    text-align: center;
}

.lb-place {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.lb-credit {
    font-size: var(--fs-xs);
    color: rgb(255 255 255 / 0.7);
}

.lightbox button {
    cursor: pointer;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.1);
    color: var(--clr-white);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background var(--trans-fast);
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgb(255 255 255 / 0.2);
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible,
.lightbox-thumb:focus-visible,
.lightbox-cta:focus-visible {
    outline: 3px solid var(--clr-ambar-200);
    outline-offset: 2px;
}

.lightbox-close {
    top: 12px;
    right: 12px;
}

.lightbox-nav {
    top: 50%;
    translate: 0 -50%;
}

.lightbox-prev {
    left: 14px;
}

.lightbox-next {
    right: 14px;
}

.lightbox-prev .icon {
    transform: scaleX(-1);
}

.lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgb(255 255 255 / 0.12);
}

.lightbox-count {
    flex: none;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: rgb(255 255 255 / 0.8);
}

.lightbox-thumbs {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.lightbox-thumbs::-webkit-scrollbar {
    display: none;
}

.lightbox-thumb {
    flex: none;
    width: 60px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    opacity: 0.55;
    transition: opacity var(--trans-fast), border-color var(--trans-fast);
}

.lightbox-thumb:hover {
    opacity: 0.85;
}

.lightbox-thumb[aria-current="true"] {
    border-color: var(--clr-ambar-300);
    opacity: 1;
}

.lightbox-thumb picture,
.lightbox-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lightbox-cta {
    flex: none;
}

/* Phone: the photo and its caption on top; underneath, the call to action (full width) and the arrows beside the counter */
@media (max-width: 759px) {
    .lightbox-stage {
        position: static;
        padding: 64px 12px 8px;
    }

    .lightbox-nav {
        top: auto;
        bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        translate: none;
        width: 44px;
        height: 44px;
    }

    .lightbox-prev {
        left: var(--space-4);
    }

    .lightbox-next {
        right: var(--space-4);
    }

    .lightbox-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: var(--space-3);
        padding-inline: var(--space-4);
    }

    .lightbox-thumbs {
        display: none;
    }

    .lightbox-cta {
        order: -1;
        width: 100%;
        min-height: 48px;
    }

    .lightbox-count {
        display: grid;
        place-items: center;
        min-height: 44px;
    }

    .lightbox-fig img {
        max-height: calc(100dvh - 280px);
    }
}

/* ── Feature: a photo (fixed while you read) and the places that go with it ───────────────────── */
.features {
    display: grid;
    gap: var(--space-16);
}

.feature {
    display: grid;
    gap: var(--space-8);
    align-items: start;
}

.feature-media {
    position: relative;
    margin: 0 0 var(--space-8);
}

.feature-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--clr-media-bg);
    box-shadow: var(--shadow-md);
    cursor: zoom-in;
}

.feature-photo picture,
.feature-photo img {
    display: block;
    width: 100%;
    height: 100%;
}

.feature-photo img {
    object-fit: cover;
    object-position: var(--ox, 50%) var(--oy, 50%);
    transition: transform 1.4s var(--ease-out);
}

.feature-photo:hover img {
    transform: scale(1.04);
}

.feature-photo:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 3px;
}

.feature-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0) 60%, rgb(var(--scrim-rgb) / 0.55) 100%);
    pointer-events: none;
}

.feature-cap {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 9rem);
    padding: 6px 12px 6px 9px;
    border-radius: var(--radius-pill);
    background: rgb(var(--scrim-rgb) / 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--clr-white);
}

.feature-cap .icon {
    width: 14px;
    height: 14px;
    color: var(--clr-ambar-300);
}

/* A second photo overlaps the corner, like a print laid on the first */
.feature-inset {
    position: absolute;
    right: var(--space-4);
    bottom: calc(-1 * var(--space-8));
    z-index: 3;
    display: block;
    width: 30%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 4px solid var(--clr-bg);
    border-radius: var(--radius-lg);
    background: var(--clr-media-bg);
    box-shadow: var(--shadow-lg);
    cursor: zoom-in;
    transform: rotate(2deg);
    transition: transform var(--trans-normal);
}

.feature-inset:hover {
    transform: rotate(0deg) scale(1.03);
}

.feature-inset picture,
.feature-inset img {
    display: block;
    width: 100%;
    height: 100%;
}

.feature-inset img {
    object-fit: cover;
    object-position: var(--ox, 50%) var(--oy, 50%);
}

.feature-body {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.feature-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
    font-weight: var(--fw-display);
    line-height: 1.08;
    letter-spacing: var(--ls-display);
}

.feature-title span {
    text-wrap: balance;
}

.feature-title .icon {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--clr-brand-soft);
    color: var(--clr-brand);
}

.feature-body > p {
    max-width: 38em;
}

.feature-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-2);
}

.features .place-cards {
    grid-template-columns: 1fr;
}

@media (min-width: 960px) {
    .feature {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-12);
    }

    .feature-rev .feature-media {
        order: 2;
    }

    .feature-media {
        position: sticky;
        top: calc(var(--header-h) + 56px + var(--space-6));
    }
}

/* A fact instead of a photo (Armenia has no photo of its table yet): the number is the picture */
.fact-card {
    position: relative;
    display: grid;
    align-content: end;
    gap: var(--space-2);
    aspect-ratio: 4 / 3;
    isolation: isolate;
    overflow: hidden;
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--grad-brand);
    box-shadow: var(--shadow-md);
    color: var(--clr-white);
}

.fact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('../assets/img/contours.svg') center / cover no-repeat;
    opacity: 0.5;
}

.fact-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--clr-ambar-200);
}

.fact-card-kicker .icon {
    width: 20px;
    height: 20px;
}

.fact-card-num {
    font-size: clamp(2.8rem, 1.4rem + 5vw, 5.2rem);
    white-space: nowrap;
    font-weight: var(--fw-display);
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--clr-ambar-200);
}

.fact-card-text {
    max-width: 24rem;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: rgb(255 255 255 / 0.9);
}

.fact-card .cite a {
    color: var(--clr-ambar-200);
}

/* ── Photo band: a full-bleed panorama with one number that matters ──────────────────────────── */
.photo-band {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: clamp(26rem, 62vh, 38rem);
    overflow: clip;
    padding-block: var(--space-16);
    background: var(--clr-night);
}

.photo-band-art {
    position: absolute;
    inset: -5% 0;
    z-index: -2;
    background: var(--clr-media-bg);
}

.photo-band-art picture,
.photo-band-art img {
    display: block;
    width: 100%;
    height: 100%;
}

.photo-band-art img {
    object-fit: cover;
    object-position: var(--ox, 50%) var(--oy, 50%);
}

/* Parallax, where the browser can do it without JavaScript: a slow drift while the band crosses the screen */
@supports (animation-timeline: view()) {
    .photo-band-art img {
        animation: band-drift linear both;
        animation-timeline: view();
    }

    @keyframes band-drift {
        from {
            transform: translateY(-4%) scale(1.05);
        }

        to {
            transform: translateY(4%) scale(1.05);
        }
    }
}

.photo-band-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgb(var(--scrim-rgb) / 0.82) 0, rgb(var(--scrim-rgb) / 0.55) 48%, rgb(var(--scrim-rgb) / 0.12) 100%),
        linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.3) 0, rgb(var(--scrim-rgb) / 0) 30%, rgb(var(--scrim-rgb) / 0.4) 100%);
}

@media (max-width: 759px) {
    .photo-band-scrim {
        background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.74) 0, rgb(var(--scrim-rgb) / 0.68) 50%, rgb(var(--scrim-rgb) / 0.82) 100%);
    }
}

.photo-band-inner {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

.photo-band-inner > * {
    max-width: 38rem;
}

.band-kicker {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--clr-accent-text);
}

.band-num {
    font-size: clamp(3.6rem, 2rem + 7.5vw, 7.5rem);
    font-weight: var(--fw-display);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    color: var(--clr-highlight);
    text-shadow: 0 2px 30px rgb(var(--scrim-rgb) / 0.4);
}

.band-title {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: var(--ls-heading);
    text-wrap: balance;
}

.photo-band .t-lead {
    color: rgb(255 255 255 / 0.92);
}

.band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
    max-width: none;
}

.band-credit {
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    color: rgb(255 255 255 / 0.75);
}

/* ── Season switcher: pick a season, see its photo and what to do in it ───────────────────────── */
.sw {
    display: grid;
    gap: var(--space-5);
}

.sw-tabs {
    display: flex;
    gap: var(--space-2);
    margin: 0 calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

.sw-tabs::-webkit-scrollbar {
    display: none;
}

.sw-tab {
    display: grid;
    flex: 0 0 auto;
    gap: 2px;
    min-width: 8.5rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    text-align: left;
    color: var(--clr-text);
    cursor: pointer;
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast);
}

.sw-tab:hover {
    border-color: var(--clr-brand-line);
    transform: translateY(-2px);
}

.sw-tab:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 2px;
}

.sw-tab[aria-selected="true"] {
    border-color: var(--clr-brand);
    box-shadow: 0 0 0 1px var(--clr-brand), var(--shadow-md);
}

.sw-tab-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.sw-tab-name .icon {
    width: 22px;
    height: 22px;
    color: var(--clr-brand);
}

.sw-tab-months {
    font-size: var(--fs-sm);
    color: var(--clr-text-muted);
}

.sw-tab-best {
    justify-self: start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--clr-accent-soft);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
}

.sw-panels {
    display: grid;
    min-width: 0;
}

.sw-panel {
    display: grid;
    grid-area: 1 / 1;
    align-content: start;
    min-width: 0;
}

.js .sw-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s linear 0.45s;
}

.js .sw-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.45s var(--ease-out) 0.05s, transform 0.5s var(--ease-out) 0.05s, visibility 0s;
}

html:not(.js) .sw-panels {
    gap: var(--space-8);
}

html:not(.js) .sw-panel {
    grid-area: auto;
}

.sw-photo {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--clr-media-bg);
    box-shadow: var(--shadow-md);
}

.sw-photo picture,
.sw-photo img {
    display: block;
    width: 100%;
    height: 100%;
}

.sw-photo img {
    object-fit: cover;
    object-position: var(--ox, 50%) var(--oy, 50%);
}

.sw-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0) 55%, rgb(var(--scrim-rgb) / 0.5) 100%);
    pointer-events: none;
}

.sw-photo .feature-cap {
    top: var(--space-4);
    bottom: auto;
    z-index: 2;
}

/* No photo yet for this season: the icon holds the place and says so */
.sw-photo-empty {
    display: grid;
    place-items: center;
    background: var(--grad-brand);
    color: var(--clr-ambar-200);
}

.sw-photo-empty::after {
    display: none;
}

.sw-photo-empty .icon {
    width: 84px;
    height: 84px;
    opacity: 0.9;
}

.sw-text {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--space-2);
    margin: calc(-1 * var(--space-10)) var(--space-4) 0;
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-md);
}

.sw-text-title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-display);
    line-height: 1.1;
    letter-spacing: var(--ls-display);
}

.sw-when {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-brand);
}

.sw-text p {
    line-height: 1.6;
}

@media (min-width: 960px) {
    .sw {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }

    .sw-tabs {
        flex-direction: column;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .sw-tab {
        min-width: 0;
        padding: var(--space-4) var(--space-5);
    }

    .sw-text {
        margin-inline: var(--space-8);
        padding: var(--space-6) var(--space-8);
    }
}

/* ── Picks: three ways in, each one already knows what you picked ─────────────────────────────── */
.picks {
    display: grid;
    gap: var(--space-4);
}

.pick {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 20rem;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--clr-night);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--clr-white);
    transition: transform var(--trans-normal), box-shadow var(--trans-normal);
}

.pick:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.pick:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: 3px;
}

.pick picture,
.pick img {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
}

.pick img {
    object-fit: cover;
    object-position: var(--ox, 50%) var(--oy, 50%);
    transition: transform 1.4s var(--ease-out);
}

.pick:hover img {
    transform: scale(1.06);
}

.pick::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.05) 25%, rgb(var(--scrim-rgb) / 0.88) 100%);
}

.pick-body {
    display: grid;
    flex: 1;
    gap: 4px;
    padding: var(--space-6);
}

.pick-label {
    font-size: var(--fs-h3);
    font-weight: var(--fw-display);
    line-height: 1.1;
    letter-spacing: var(--ls-display);
}

.pick-sub {
    font-size: var(--fs-md);
    color: rgb(255 255 255 / 0.88);
}

.pick-go {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--clr-white);
    color: var(--clr-ink-900);
    box-shadow: var(--shadow-md);
    transition: transform var(--trans-fast);
}

.pick:hover .pick-go {
    transform: translateX(3px);
}

@media (min-width: 560px) {
    .picks {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }

    .pick {
        min-height: 24rem;
    }
}

/* ── Where the subject sits when a photo is cropped (set on the frame; the image reads --ox / --oy) ───────────── */
.op-high {
    --oy: 25%;
}

.op-mid {
    --oy: 50%;
}

.op-low {
    --oy: 78%;
}

.op-right {
    --ox: 78%;
}

.page-hero-georgia .page-hero-art img {
    object-position: 60% 45%;
}

.page-hero-armenia .page-hero-art img {
    object-position: 55% 55%;
}

html:not(.js) [data-gallery-open] {
    display: none;
}

/* ── Reading blocks of the country pages ───────────────────────────────────────────────────────── */
.prose-cols {
    display: grid;
    gap: var(--space-4);
}

.prose-cols p,
.prose-line {
    max-width: 44em;
}

.prose-cols + .link-cards {
    margin-top: var(--space-6);
}

.prose-line {
    margin-top: var(--space-5);
}

@media (min-width: 960px) {
    .prose-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10);
    }
}

/* ═══ src/brand.css ═══ */

/* Viajes Únicos — capa de marca: el escenario de planes de la portada (un panel inmersivo por plan con su galería de fotos),
   las migas del hero de un plan y los avisos «en desarrollo» del pie.
   Misma regla que components.css: solo roles semánticos (tokens); ningún color ni medida suelta.
   Móvil primero: tarjetas apiladas a sangre. Escritorio con JavaScript (≥ 1200 px): paneles que se abren. Sin JavaScript: se queda en tarjetas apiladas. */

/* ── Titular de marca ─────────────────────────────────────────────────────────────────────────────────────── */
.brand-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-weight: var(--fw-regular);
}

.brand-kicker {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--clr-accent-text);
}

.brand-headline em {
    display: block;
    font-style: normal;
    color: var(--clr-highlight);
}

/* ── Escenario ───────────────────────────────────────────────────────────────────────────────────────────── */
.stage {
    position: relative;
    isolation: isolate;
    background: var(--clr-bg);
}

/* Intro: la marca y su promesa. En móvil es un bloque sobre las curvas de nivel; en escritorio flota sobre las fotos (abajo) */
.stage-intro {
    position: relative;
    padding: calc(var(--header-h) + var(--space-10)) 0 var(--space-10);
    background: url('../assets/img/contours.svg') center / cover no-repeat, var(--clr-bg);
}

/* El bloque de la marca (H1 + invitación). En escritorio es una placa de cristal, como la del texto de cada plan (abajo) */
.stage-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.stage-intro .t-display {
    font-size: clamp(2.1rem, 1.1rem + 2.8vw, 3.5rem);
    text-shadow: 0 2px 28px rgb(var(--scrim-rgb) / 0.35);
}

.stage-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--clr-white);
}

.stage-hint .icon {
    rotate: 90deg;
    color: var(--clr-accent-text);
}

/* ── Paneles ─────────────────────────────────────────────────────────────────────────────────────────────── */
.stage-panels {
    display: grid;
    gap: 2px;
    background: var(--clr-bg);
}

.stage-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(34rem, 86svh, 50rem);
    padding-top: min(44svh, 22rem);    /* ventana de foto garantizada sobre la placa: una tarjeta con mucho texto crece, no tapa la foto */
    overflow: hidden;
    background: var(--clr-night);
    color: var(--clr-white);
}

/* El botón que abre un panel solo existe en escritorio: cubre el panel, sin verse, debajo de la galería (el clic lo recoge el panel) */
.stage-toggle {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: none;
    cursor: pointer;
}

.stage-toggle:focus-visible {
    outline: 3px solid var(--clr-focus);
    outline-offset: -3px;
}

/* ── Galería ─────────────────────────────────────────────────────────────────────────────────────────────── */
.stage-gallery {
    position: absolute;
    inset: 0;
    z-index: 1;
    touch-action: pan-y;    /* el deslizamiento horizontal es de la galería; el vertical, de la página */
}

/* La foto va LIMPIA: ningún degradado la cubre entera. Lo único que lleva encima es una franja baja que da fondo a los segmentos de progreso.
   El texto se protege solo donde está: la placa de .stage-body, la mancha de la intro y el velo del menú (escritorio, más abajo).
   El velo va dentro de cada foto (no encima de la galería): el pie de foto, que es hijo de la diapositiva, queda por encima y se lee */
.stage-slide figure::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 8rem;
    pointer-events: none;
    background: linear-gradient(0deg, rgb(var(--scrim-rgb) / 0.5) 0, rgb(var(--scrim-rgb) / 0) 100%);
}

.stage-slides {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stage-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.95s var(--ease-in-out), visibility 0s linear 0.95s;
}

.stage-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.95s var(--ease-in-out), visibility 0s;
}

.stage-slide figure {
    position: absolute;
    inset: 0;
    margin: 0;
}

.stage-slide picture,
.stage-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Profundidad: zoom lento de la foto activa (la que sale se queda congelada mientras se desvanece) y un leve desplazamiento con el puntero.
   `scale` y `translate` son propiedades independientes: se suman sin pisarse */
.stage-slide img {
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    user-select: none;
    -webkit-user-drag: none;
    scale: 1.04;
    translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -8px);
    transition: translate 0.8s var(--ease-out);
}

.stage-slide.is-active img,
.stage-slide.is-leaving img {
    animation: stage-drift 14s linear both;
}

.stage-slide.is-leaving img {
    animation-play-state: paused;
}

@keyframes stage-drift {
    from {
        scale: 1.04;
    }

    to {
        scale: 1.13;
    }
}

/* Pie de foto: lugar y autor, con el mismo estilo que el pie de las demás fotos del sitio */
.stage-cap {
    position: absolute;
    right: var(--space-5);
    bottom: 46px;
    z-index: 2;
    max-width: min(46%, 24rem);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgb(var(--scrim-rgb) / 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--fs-xs);
    line-height: var(--lh-ui);
    color: rgb(255 255 255 / 0.92);
}

/* ── Controles ───────────────────────────────────────────────────────────────────────────────────────────── */
.stage-ui {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.stage-controls {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: rgb(var(--scrim-rgb) / 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.stage-ctl {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--clr-white);
    cursor: pointer;
    transition: background var(--trans-fast);
}

.stage-ctl:hover {
    background: rgb(255 255 255 / 0.18);
}

.stage-ctl[hidden] {
    display: none;
}

.stage-prev .icon {
    rotate: 180deg;
}

/* Pausa / reanudar dibujados con CSS: dos barras; con aria-pressed (en pausa), un triángulo */
.stage-play::before {
    content: '';
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border-right: 4px solid currentColor;
    border-left: 4px solid currentColor;
}

.stage-play[aria-pressed="true"]::before {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 7px solid transparent;
    border-right: 0;
    border-bottom: 7px solid transparent;
    border-left: 12px solid currentColor;
}

.stage-count {
    min-width: 3.4em;
    padding: 0 var(--space-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: rgb(255 255 255 / 0.92);
}

/* Segmentos de progreso (como las historias): uno por foto; el de la foto activa se rellena durante lo que dura, y todos se pueden pulsar */
.stage-segs {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0 var(--space-5) var(--space-2);
    list-style: none;
}

.stage-segs li {
    flex: 1;
    pointer-events: none;
}

.stage-seg {
    position: relative;
    display: block;
    width: 100%;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
}

.stage-seg::before,
.stage-seg-fill {
    position: absolute;
    top: 14px;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: 2px;
}

.stage-seg::before {
    content: '';
    background: rgb(255 255 255 / 0.4);
}

.stage-seg-fill {
    background: var(--clr-white);
    transform: scaleX(0);
    transform-origin: left center;
}

.stage-seg.is-done .stage-seg-fill {
    transform: scaleX(1);
}

.stage-seg.is-active .stage-seg-fill {
    animation: stage-fill 6500ms linear forwards;
}

.stage-gallery.is-paused .stage-seg.is-active .stage-seg-fill {
    animation-play-state: paused;
}

.stage-gallery.is-static .stage-seg.is-active .stage-seg-fill {
    animation: none;
    transform: scaleX(1);
}

@keyframes stage-fill {
    to {
        transform: scaleX(1);
    }
}

/* ── Texto del panel ─────────────────────────────────────────────────────────────────────────────────────── */
/* La placa del texto: un cristal oscuro y acotado, abajo, que deja la foto limpia a su alrededor (antes era un velo de lado a lado: la foto se perdía).
   Crece con el contenido y NO cubre la franja de abajo, donde viven los segmentos de progreso y el pie de foto.
   Es transparente al puntero (arrastrar sobre el texto sigue deslizando la galería); solo los enlaces y botones lo recogen */
.stage-body {
    --veil-gap: 3.2rem;    /* franja inferior que la placa deja libre */
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0 var(--space-3) var(--veil-gap);
    padding: var(--space-5);
    border: 1px solid var(--clr-glass-border);    /* el mismo cristal que el buscador de las portadas de plan */
    border-radius: var(--radius-xl);
    background: var(--clr-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: var(--shadow-glass);
    pointer-events: none;
}

/* Sin desenfoque de fondo (navegadores antiguos) el texto necesita más cuerpo para leerse sobre la foto */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .stage-body {
        background: rgb(var(--scrim-rgb) / 0.84);
    }
}

.stage-body a,
.stage-body button {
    pointer-events: auto;
}

.stage-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
}

.stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid rgb(255 255 255 / 0.24);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--clr-white);
}

.stage-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-accent);    /* ámbar: en desarrollo */
}

.stage-badge.is-live::before {
    background: var(--clr-brand-vivid);    /* abierto */
}

.stage-native {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    color: var(--clr-highlight);
}

.stage-native [lang="ka"] {
    font-family: 'Noto Sans Georgian', sans-serif;
}

.stage-native [lang="hy"] {
    font-family: 'Noto Sans Armenian', sans-serif;
}

.stage-native i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--clr-accent);
}

.stage-title {
    font-size: clamp(2rem, 1rem + 2.2vw, 3.1rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.04;
}

.stage-more {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.stage-kicker {
    font-weight: var(--fw-bold);
    color: var(--clr-highlight);
}

.stage-text {
    max-width: 34em;
    color: rgb(255 255 255 / 0.92);
}

.stage-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-1) 0;
    padding: 0;
    list-style: none;
}

.stage-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid rgb(255 255 255 / 0.34);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    color: var(--clr-white);
    transition: background var(--trans-fast), border-color var(--trans-fast);
}

.stage-links a:hover {
    border-color: rgb(255 255 255 / 0.7);
    background: rgb(255 255 255 / 0.18);
}

.stage-cta {
    max-width: 100%;
    margin-top: var(--space-2);
    padding-block: var(--space-3);
    white-space: normal;    /* en móvil, un texto largo parte línea en vez de salirse de la tarjeta */
    text-align: left;
}

/* Sin JavaScript no hay controles ni segmentos: queda la primera foto y el texto completo */
html:not(.js) .stage-ui {
    display: none;
}

/* ── Escritorio con JavaScript: paneles que se abren ─────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .js .stage {
        /* Borde izquierdo del contenedor: donde arrancan el titular y el texto del primer panel */
        --stage-edge: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / 2);
        height: clamp(44rem, 100svh, 64rem);
    }

    /* Velo del menú: solo la franja de la cabecera, para que el menú se lea sobre cualquier foto. El resto de la foto queda limpia */
    .js .stage::before {
        content: '';
        position: absolute;
        inset: 0 0 auto;
        z-index: 5;
        height: calc(var(--header-h) + 5.5rem);
        pointer-events: none;
        /* Firme donde está el texto del menú (a ~36 px del borde) y se desvanece enseguida: el cielo de la foto recupera su color a ~150 px */
        background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.68) 0, rgb(var(--scrim-rgb) / 0.62) 3rem, rgb(var(--scrim-rgb) / 0.3) 5.5rem, rgb(var(--scrim-rgb) / 0) 100%);
    }

    /* La intro flota sobre las fotos, arriba a la izquierda; no recoge el puntero (los paneles de debajo siguen respondiendo).
       El titular va en una placa de cristal (no en una mancha): se lee igual con cualquier foto y con cualquier panel abierto, y la foto no se ensucia */
    .js .stage-intro {
        position: absolute;
        inset: 0 0 auto;
        z-index: 6;
        padding: calc(var(--header-h) + var(--space-6)) 0 0;
        background: none;
        pointer-events: none;
    }

    .js .stage-brand {
        --plate-pad: var(--space-6);
        width: fit-content;
        gap: var(--space-3);
        padding: var(--space-5) var(--plate-pad);
        /* El texto arranca en el borde del contenedor, como el del plan, y la placa asoma por la izquierda; nunca a menos de 1 rem del borde de la pantalla
           (a 1200–1300 px el contenedor está a ~20 px: la placa se desplaza y el texto de las dos placas sigue alineado) */
        margin-left: max(calc(var(--space-4) - var(--stage-edge)), calc(-1 * var(--plate-pad) - 1px));
        border: 1px solid var(--clr-glass-border);
        border-radius: var(--radius-xl);
        background: var(--clr-glass);
        -webkit-backdrop-filter: blur(16px) saturate(1.3);
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: var(--shadow-glass);
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .js .stage-brand {
            background: rgb(var(--scrim-rgb) / 0.84);
        }
    }

    /* Sobre la placa de cristal, el kicker usa el crema de resalte (el del titular y el de cada plan): el ámbar se queda en 4,47:1 sobre alguna foto clara */
    .js .stage-brand .brand-kicker {
        color: var(--clr-highlight);
    }

    .js .stage-panels {
        position: absolute;
        inset: 0;
        display: flex;
        gap: 0;
    }

    .js .stage-panel {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        padding-top: 0;
        cursor: pointer;
        transition: flex-grow 0.9s var(--ease-out);
    }

    .js .stage-panel.is-open {
        flex-grow: 3.3;
        cursor: default;
    }

    .js .stage-panel + .stage-panel {
        border-left: 2px solid var(--clr-bg);
    }

    /* La placa, ancha y baja y ajustada a su contenido: abierta mide hasta 44 rem (más ancha que alta deja más foto libre);
       cerrada, como mucho el ancho del panel menos los márgenes */
    .js .stage-body {
        --veil-gap: 4.8rem;
        --plate-pad: var(--space-6);
        align-self: flex-start;
        width: fit-content;
        max-width: min(44rem, calc(100% - 2 * var(--space-4)));
        margin: 0 0 var(--veil-gap) var(--space-5);
        padding: var(--plate-pad);
        transition: padding 0.6s var(--ease-out);
    }

    /* El texto del primer panel abierto arranca donde el titular de la intro (el borde izquierdo del contenedor) */
    .js .stage-panel:first-child.is-open .stage-body {
        margin-left: max(var(--space-4), calc(var(--stage-edge) - var(--plate-pad) - 1px));
    }

    .js .stage-panel:not(.is-open) .stage-body {
        --plate-pad: clamp(var(--space-3), 1.2vw, var(--space-4));    /* la franja cerrada mide ~225 px a 1200: así «En desarrollo» cabe en una línea */
        margin-inline: var(--space-3);
    }

    .js .stage-panel:not(.is-open) .stage-title {
        font-size: clamp(1.6rem, 0.4rem + 1.9vw, 2.4rem);
    }

    /* Un panel cerrado enseña su foto, su estado y su nombre; el resto se pliega */
    .js .stage-more {
        max-height: 40rem;
        overflow: hidden;
        transition: max-height 0.8s var(--ease-out), opacity 0.5s var(--ease-out) 0.2s, margin-top 0.5s var(--ease-out);
    }

    .js .stage-panel:not(.is-open) .stage-more {
        max-height: 0;
        margin-top: calc(-1 * var(--space-3));    /* un elemento plegado deja el hueco del gap: se anula */
        opacity: 0;
        transition: max-height 0.5s var(--ease-out), opacity 0.2s var(--ease-out), margin-top 0.5s var(--ease-out);
    }

    .js .stage-panel:not(.is-open) .stage-ui,
    .js .stage-panel:not(.is-open) .stage-cap,
    .js .stage-panel:not(.is-open) .stage-native {
        opacity: 0;
        visibility: hidden;
    }

    .js .stage-ui,
    .js .stage-cap,
    .js .stage-native {
        transition: opacity 0.5s var(--ease-out) 0.35s, visibility 0s;
    }

    .js .stage-panel:not(.is-open) .stage-slide img {
        animation-play-state: paused;
    }

    /* Un panel cerrado se atenúa apenas (la foto sigue con su color) y, junto al nombre, lleva un «+»: invita a abrirlo. Con el ratón encima, sin atenuar */
    .js .stage-panel .stage-gallery::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        background: rgb(var(--scrim-rgb) / 0);
        transition: background 0.6s var(--ease-out);
        pointer-events: none;
    }

    .js .stage-panel:not(.is-open) .stage-gallery::before {
        background: rgb(var(--scrim-rgb) / 0.12);
    }

    .js .stage-panel:not(.is-open):hover .stage-gallery::before {
        background: rgb(var(--scrim-rgb) / 0);
    }

    .js .stage-panel:not(.is-open) .stage-title::after {
        content: '+';
        display: inline-grid;
        place-items: center;
        width: 1.1em;
        height: 1.1em;
        margin-left: 0.4em;
        border: 2px solid currentColor;
        border-radius: 50%;
        font-size: 0.5em;
        font-weight: var(--fw-semibold);
        line-height: 1;
        vertical-align: 0.35em;
    }

    .js .stage-links a {
        min-height: 40px;
        font-size: var(--fs-md);
    }

    .js .stage-controls {
        top: calc(var(--header-h) + var(--space-3));    /* por debajo del menú: el escenario empieza en el borde superior de la página */
    }

    .js .stage-toggle {
        display: block;
    }
}

/* Escritorio de poca altura (portátiles: la ventana útil suele medir 650–800 px): el titular pasa a una línea y se oculta el adorno en escritura nativa,
   para que la placa de la marca y la del plan no se pisen */
@media (min-width: 1200px) and (max-height: 830px) {
    .js .stage-brand .brand-headline em {
        display: inline;
    }

    .js .stage-intro .t-display {
        font-size: clamp(1.9rem, 0.9rem + 2.2vw, 2.7rem);
    }

    .js .stage-native {
        display: none;
    }

    /* «Elige tu plan» sigue en la página (es el H2 de los planes) pero solo para lectores de pantalla: la placa de la marca queda a dos líneas */
    .js .stage-hint {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ── Móvil y tablet: tarjetas a sangre ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .stage-count {
        display: none;
    }

    .stage-cap {
        top: var(--space-4);
        right: auto;
        bottom: auto;
        left: var(--space-4);
        max-width: calc(100% - 11rem);
    }

    /* La línea en escritura nativa es un adorno (aria-hidden): en una tarjeta de móvil se ahorra su altura para dejar más foto */
    .stage-native {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stage-slide,
    .stage-slide.is-active {
        transition: opacity 0.25s linear;
    }

    .stage-slide img,
    .stage-slide.is-active img,
    .stage-slide.is-leaving img {
        animation: none;
        scale: 1.02;
        translate: none;
        transition: none;
    }

    .stage-seg.is-active .stage-seg-fill {
        animation: none;
        transform: scaleX(1);
    }

    .js .stage-panel,
    .js .stage-more,
    .js .stage-ui,
    .js .stage-cap,
    .js .stage-native {
        transition: none;
    }
}

/* ── Información de marca bajo los planes (site/blocks/brand-about.html): cabecera centrada, tres pasos y las dos salidas ───── */
.about-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* ── Pie de la marca: los planes en desarrollo son texto ─────────────────────────────────────────────────── */
.footer-soon {
    color: var(--clr-text-muted);
}

.footer-soon small {
    margin-left: var(--space-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

/* ── Migas del hero de un plan: una píldora abajo a la izquierda, con el mismo estilo y en la misma franja que el pie de foto
   (abajo a la derecha). Van FUERA del flujo: el hero conserva al píxel su altura y la posición del titular y del buscador ───── */
.hero-crumbs {
    position: absolute;
    inset: auto 0 76px;
    z-index: var(--z-raised);
    pointer-events: none;
}

.hero-crumbs .crumbs {
    width: fit-content;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: rgb(var(--scrim-rgb) / 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

.hero-crumbs .crumbs ol {
    font-size: var(--fs-xs);
    color: rgb(255 255 255 / 0.9);
}

.hero-crumbs .crumbs a {
    display: inline-block;
    padding: 4px 2px;    /* objetivo táctil cómodo sin cambiar el tamaño del texto */
}

.hero-crumbs .crumbs [aria-current] {
    color: var(--clr-white);
}

@media (max-width: 760px) {
    .hero-crumbs {
        bottom: 72px;
    }
}