/* asesordeviaje · marca.css · los tokens de la marca (colores, tipografía, espaciados, movimiento) en un archivo de NOMBRE FIJO.
   INFRA1, parte B (Decision_Javier_Montar_Proceso_A_B.md y Decision_Javier_Lote_Infraestructura.md): Astro copia public/ tal cual, así que este archivo se sirve siempre como
   /estilos/marca.css, sin huella. Un cambio de color o de estilo de marca es un diff de este único archivo: el HTML no cambia.
   - Lo enlaza BaseLayout al principio del <body>, junto a las precargas de fuentes (nada se pide antes de la <meta> de la CSP, QA-D).
   - El servidor lo revalida en cada visita (deploy/hostinger.htaccess, ASV_MARCA: Cache-Control public, max-age=0, must-revalidate).
   - Solo variables en :root (y sus @media): nada de selectores de componentes; los CSS de componentes siguen en _astro con huella.
   - Dos secciones, con las mismas reglas que tenían sus archivos de origen (src/styles/tokens-v4.css y src/styles/tokens.css):
     V4 (los tokens del kit del Manual V4, comprobados por tokens-v4.test.ts) y PRODUCTO (los nombres propios del producto). */

/* ==== SECCIÓN V4 ==== */
/* Brand manual V4: light-theme tokens (block 4, MV4-A). Taken from the kit Codex fixed by hash (docs/manual-v4/tokens.css, b326b437…)
   with these changes only, declared and checked by src/styles/tokens-v4.test.ts:
   - Families: the name each typeface is served under ('Inter Variable' from @fontsource; Bricolage Grotesque self-hosted, 700–800).
   - Body and caption sizes in rem (16 and 12px by default), so they follow the browser's text size like the rest of the site.
   - Left out: the legacy aliases (the manual retires them), --space-* and --radius-* (the product keeps its own; no redefinition, Codex MV-01)
     and the .x-* experience classes (they come with the components, MV4-C).
   The dark theme lives in tokens-v4-dark.css, prepared but inactive: nothing imports it (SM-d; Codex MV-03). */
:root {
  --color-petroleum-50: #EEF5F6;
  --color-petroleum-100: #DCEAEC;
  --color-petroleum-200: #BDD5D9;
  --color-petroleum-300: #8FB7BF;
  --color-petroleum-400: #4A909E;
  --color-petroleum-500: #2F7380;
  --color-petroleum-600: #1E5B67;
  --color-petroleum-700: #174A54;
  --color-petroleum-800: #113A42;
  --color-petroleum-900: #0B2A30;
  --color-cloud-dancer: #F0EEE9;
  --color-white: #FFFFFF;
  --color-nature-vivid: #36C26E;
  --color-nature-on-light: #007C2C;
  --color-nature-on-dark: #36C26E;
  --color-sea-vivid: #33B8F0;
  --color-sea-on-light: #0071A6;
  --color-sea-on-dark: #33B8F0;
  --color-freshwater-vivid: #3F7BFF;
  --color-freshwater-on-light: #2861E3;
  --color-freshwater-on-dark: #6FA8FF;
  --color-volcano-vivid: #FF7A3D;
  --color-volcano-on-light: #BF3F00;
  --color-volcano-on-dark: #FF8549;
  --color-culture-vivid: #F0498B;
  --color-culture-on-light: #CA1E6C;
  --color-culture-on-dark: #FF7AB0;
  --color-heritage-vivid: #FFC23A;
  --color-heritage-on-light: #965E00;
  --color-heritage-on-dark: #FFC23A;
  --color-city-vivid: #8B6CF2;
  --color-city-on-light: #6A3FC9;
  --color-city-on-dark: #AE97FF;
  --font-family-display: 'Bricolage Grotesque', 'Inter Variable', Inter, system-ui, sans-serif;
  --font-family-ui: 'Inter Variable', Inter, system-ui, sans-serif;
  --font-weight-display: 800;
  --font-weight-display-h3: 700;
  --font-size-h1: clamp(2.375rem, 1.475rem + 3.8vw, 4.375rem);
  --font-size-h2: clamp(1.875rem, 1.475rem + 1.7vw, 2.875rem);
  --font-size-h3: clamp(1.375rem, 1.175rem + 0.85vw, 1.875rem);
  --font-size-body: 1rem;
  --font-size-caption: 0.75rem;
  --font-line-height-h1: 1.11;
  --font-line-height-h2: 1.17;
  --font-line-height-h3: 1.27;
  --font-line-height-body: 1.625;
  --font-line-height-caption: 1.5;
  --font-letter-spacing-display: -0.025em;
  --size-control-height: 44px;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 400ms;
  --motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --color-background: #FFFFFF;
  --color-surface: var(--color-cloud-dancer);
  --color-surface-tint: var(--color-petroleum-50);
  --color-border: rgb(17 58 66 / 0.14);
  --color-brand: var(--color-petroleum-600);
  --color-brand-accent: var(--color-petroleum-400);
  --color-focus: var(--color-petroleum-600);
  --color-text-primary: var(--color-petroleum-800);
  --color-text-secondary: #4F666B;
  --color-text-brand: var(--color-petroleum-600);
  --color-text-on-brand: #FFFFFF;
  --color-text-on-experience: #FFFFFF;
  --state-open: #17703F;
  --state-season: #8A5A00;
  --state-restricted: #A34700;
  --state-closed: #B42318;
  --state-unconfirmed: #5B6475;
  --state-chip-background: #FFFFFF;
  --feedback-error: #B42318;
  --feedback-success: #17703F;
  --experience-nature-text: var(--color-nature-on-light);
  --experience-sea-text: var(--color-sea-on-light);
  --experience-freshwater-text: var(--color-freshwater-on-light);
  --experience-volcano-text: var(--color-volcano-on-light);
  --experience-culture-text: var(--color-culture-on-light);
  --experience-heritage-text: var(--color-heritage-on-light);
  --experience-city-text: var(--color-city-on-light);
}

@media (prefers-reduced-motion: reduce) { :root { --motion-duration-fast: 0ms; --motion-duration-base: 0ms; --motion-duration-slow: 0ms; } }

/* ==== SECCIÓN PRODUCTO ==== */
:root {
  /* #21, owner's instruction (2 Oct 2026): no dark layer on the photographs — no band behind the header and no
     blurred field behind cover copy. The fields stay in the markup at zero; text carries only the manual's shadow. */
  --photo-text-protection: 0;
  /* Manual V4: Petróleo claro, the accent of a headline on a photograph («sabiendo.»), with the manual's soft shadow. */
  --color-on-photo-accent: #A9D3DB;
  /* FID v3.3: below 40rem the accent of a headline on a photograph is white on every template (country covers, the general home, destinations
     and collections); from 40rem it stays Petróleo claro. A declared departure from the manual, decided by Javier («Blanco»,
     Decision_Javier_FID_Acento_Movil.md, amended 8 Oct). */
  --photo-accent-narrow: var(--color-white);
  /* Light text on a photograph (FID, CR-06; DJ-03 and SM-b revoked). Two variants, chosen by the one-line switch below:
     (a) the manual's shadow plus a 1-3px Petróleo contour that hugs the letters: E-07 206/206 (FID/validacion/Contraste_FID.json);
     (b) only the manual's exact shadow (`.hg-home-copy`: 0 2px 4px .7 / 0 4px 24px .4 on titles; 0 1px 4px / 0 4px 16px .5 on text):
         small text on bright photographs stays under 4.5:1 (Contraste_FID_variante_b.json), declared as a residual like H02. */
  --photo-text-a: 0 0 1px rgb(17 58 66 / 0.9), 0 0 3px rgb(17 58 66 / 0.7), 0 1px 4px var(--color-petroleum-800), 0 4px 16px rgb(17 58 66 / 0.5);
  --photo-title-a: 0 0 2px rgb(17 58 66 / 0.55), 0 2px 4px rgb(17 58 66 / 0.7), 0 4px 24px rgb(17 58 66 / 0.4);
  --photo-text-b: 0 1px 4px var(--color-petroleum-800), 0 4px 16px rgb(17 58 66 / 0.5);
  --photo-title-b: 0 2px 4px rgb(17 58 66 / 0.7), 0 4px 24px rgb(17 58 66 / 0.4);
  /* FID SWITCH (one line): «-a» = contour + manual shadow; «-b» = manual shadow only. Javier chose «b» everywhere and accepts the measured
     residual, 80 of 278 under AA, minimum 2.40:1 (Decision_Javier_FID_Sombra_B.md, a2487911…). */
  --photo-text-halo: var(--photo-text-b); --photo-title-shadow: var(--photo-title-b); --hero-title-shadow: var(--photo-title-b);
  /* FID v3, «contorno pequeño» (Decision_Javier_FID_Contorno_Pequeno.md, 703bd328…): text of 14px or less on a photograph (breadcrumbs,
     eyebrows, «Mapa del destino», «Guías por destino», the country links) keeps the thin contour of (a); the headline, its accent and the
     lead keep only the manual's shadow (b). */
  --photo-small-halo: var(--photo-text-a);
  /* FID v3.2 (Consultas 2): «Petróleo 950», one step darker than the manual's 900, only for the 11px photo credit on the fade; 4.5:1 or
     more on all 582 covers at 390 and 1440, El Valle de Antón and Golfo de Chiriquí included. */
  --color-petroleum-950: #061D22;
  --photo-icon-shadow: drop-shadow(0 1px 3px rgb(17 58 66 / 0.8));
  --photo-logo-shadow: drop-shadow(0 1px 2px rgb(17 58 66 / 0.5));
  /* The ground a cover shows while its photograph loads (`.lf-travel-hero`). */
  --photo-ground: #35483A;
  /* The header (FID, F1): its hairline on white, the translucent Petróleo capsule on a photo (on the white fade a touch denser) and the
     hover of the Cloud Dancer pill. */
  --color-header-hairline: #E0E8E9;
  --capsule-background: rgb(17 58 66 / 0.85);
  --capsule-background-fade: rgb(17 58 66 / 0.9);
  --color-cloud-dancer-hover: #E4E0D8;
  /* The footer (F4): its text and its quieter lines (motto, brand line) on Petróleo, 7.2:1 and 6.0:1. */
  /* INFRA1: the footer's ground, a token of its own (Petróleo, the brand, as before); changing it changes this file only. */
  --color-footer-bg: var(--color-brand);
  --color-footer-text: #E8F1F2;
  --color-footer-muted: #D6E7EA;

  color-scheme: light;

  /* The outline that tells a control apart (inputs, selects, secondary and icon buttons, map tools), a functional limit of at least 3:1
     (WCAG 1.4.11; AG-MV4A-02). FID (manual V4: «el Petróleo solo en lo importante y el gris para enmarcar»): a neutral grey, no longer
     Petróleo 500; 3.63:1 on white, 3.41:1 on the light cream and 3.13:1 on Cloud Dancer. On a dark ground a control takes white. */
  --control-border: #7A898D;
  /* Manual V4 neutrals: the hairline of chips, separators and quiet frames (decorative, never the only cue) and the light
     cream of cards and toolbars (#F9F8F5, `.hg-guide-card`). */
  --color-hairline: #DCE6E7;
  --color-surface-soft: #F9F8F5;

  /* Headings take the V4 primary text on light surfaces. A dark band or a photograph sets --heading-color: currentColor. */
  --heading-color: var(--color-text-primary);

  /* Status, manual V4 (MV4-C): the five --state-* colours of tokens-v4.css (open, season, restricted, closed, unconfirmed), always a sign
     plus a word (SM001). The word is body text; the sign is drawn white on a solid disc of the state colour (white on each is 5.9:1 or more),
     except unconfirmed: a white disc, a dashed ring and a question mark in its colour (PA-C05: a check, not a state). */
  --state-sign-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
  --state-sign-closed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --state-sign-restricted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.6v.1'/%3E%3C/svg%3E");
  --state-sign-season: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  --state-sign-unconfirmed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6475' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9a3 3 0 1 1 4.2 2.75c-.75.33-1.2 1-1.2 1.8V14M12 18v.5'/%3E%3C/svg%3E");

  /* The one scrim allowed, only where text sits on a photograph. */
  --scrim: linear-gradient(to top, rgb(4 12 36 / 0.86) 0%, rgb(4 12 36 / 0.35) 45%, rgb(4 12 36 / 0) 100%);

  /* Type, manual V4 (MV4-A/D): headings, reading size and line heights are the V4 --font-* tokens, used directly. These local roles have no
     V4 equivalent and keep their sizes: data and help (14), lead, h4 and card title, data line height. */
  /* FID (G-04): interface text at the mockups' 12px (buttons, chips, action links, card descriptions, eyebrows, crumbs); targets keep
     44px of height or touch area. The manual's system text says 14px; its mockups, which Javier compares, say 12 (contradiction, mockup wins). */
  --text-sm: 0.75rem;
  --text-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-h4: 1.125rem;
  --text-card: 1.5rem;
  --leading-data: 1.5;
  /* Text over a photograph keeps its V3.2 reading size and line height: its halo was measured at that size (QA-B, H02). It moves to the V4
     scale with its component, measured again (MV4-C). */
  --text-on-photo: 1rem;
  --leading-on-photo: 1.625;

  /* Space: a 4px base; these five steps are the ones components share. */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  /* Manual V4 page frame (FID): 16px margins on phones up to 32px on wide screens, content up to 1312px at 1440. */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --space-section: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --space-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  /* FID v3 (ritmo, medido contra la maqueta: Ritmo_vertical_base.txt): the distance between the sections of the country cover and the
     destination, 48px on phones to 64px at 1440 (the manual draws 63–107 on the cover, mostly 64, and 57–81 on the destination). */
  --space-rhythm: clamp(3rem, 2.6rem + 1.6vw, 4rem);
  --maxw: 88rem;
  --header-h: 4.75rem;

  /* Shape (manual V4, chapter Producto; FID, Javier, 8 Oct 2026: «radios grandes»): 8px on controls and chips, 12px on
     surfaces, panels, cards and photographs, as the mockups draw them; buttons are 8px (global.css). Pills stay for counters, search
     fields and marks that float over a photograph or a map. Shadows only on layers that float. */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 12px;
  --radius-pill: 999px;
  /* Shadows of the layers that float, in Petróleo 900 (manual V4 has no shadow token; V3.2 used its navy). */
  --shadow-ink: 11 42 48;
  --shadow-card: 0 1px 2px rgb(var(--shadow-ink) / 0.06), 0 10px 28px -14px rgb(var(--shadow-ink) / 0.28);
  --shadow-lift: 0 2px 4px rgb(var(--shadow-ink) / 0.08), 0 22px 44px -18px rgb(var(--shadow-ink) / 0.36);
  --shadow-pop: 0 4px 10px rgb(var(--shadow-ink) / 0.1), 0 30px 60px -20px rgb(var(--shadow-ink) / 0.4);
}

@media (max-width: 47.99rem) {
  :root {
    --header-h: 3.5rem;
  }
}
/* ==== FIN ==== */