/* GENERADO por scripts/sync-brand-tokens.mjs — NO EDITAR A MANO.
 * Fuente: prosecco-marketing/brand/tokens/prosecco.tokens.json v6.2.0
 */

:root {
  /* --- rampas de marca --- */
  --color-lagoon-50: #f4fafb;
  --color-lagoon-100: #e4f5f6;
  --color-lagoon-200: #c3ebee;
  --color-lagoon-300: #91dee3;
  --color-lagoon-400: #5ed1d9;
  --color-lagoon-500: #2ec6d1;
  --color-lagoon-600: #28a1a9;
  --color-lagoon-700: #237e85;
  --color-lagoon-800: #1d5e62;
  --color-lagoon-900: #163e41;
  --color-lagoon-950: #0f2729;
  --color-ocean-50: #f4f9fb;
  --color-ocean-100: #e4f1f6;
  --color-ocean-200: #c3e2ee;
  --color-ocean-300: #91cce3;
  --color-ocean-400: #5eb6d9;
  --color-ocean-500: #2ea3d1;
  --color-ocean-600: #2885a9;
  --color-ocean-700: #236985;
  --color-ocean-800: #1d4f62;
  --color-ocean-900: #163541;
  --color-ocean-950: #0f2229;
  --color-deep-50: #f4f8fb;
  --color-deep-100: #e4eff6;
  --color-deep-200: #c3dcee;
  --color-deep-300: #91c1e3;
  --color-deep-400: #5ea6d9;
  --color-deep-500: #2e8dd1;
  --color-deep-600: #2873a9;
  --color-deep-700: #235c85;
  --color-deep-800: #1d4562;
  --color-deep-900: #162f41;
  --color-deep-950: #0f1e29;
  --color-jade-50: #f5faf8;
  --color-jade-100: #e7f3f0;
  --color-jade-200: #cae7df;
  --color-jade-300: #9dd7c7;
  --color-jade-400: #6ec9af;
  --color-jade-500: #40bf9b;
  --color-jade-600: #349d7f;
  --color-jade-700: #2c7d66;
  --color-jade-800: #245c4c;
  --color-jade-900: #1b3c32;
  --color-jade-950: #132520;
  --color-sand-50: #faf8f5;
  --color-sand-100: #f3efe7;
  --color-sand-200: #e7deca;
  --color-sand-300: #d7c49d;
  --color-sand-400: #c9ab6e;
  --color-sand-500: #bf9540;
  --color-sand-600: #9d7a34;
  --color-sand-700: #7d622c;
  --color-sand-800: #5c4924;
  --color-sand-900: #3c311b;
  --color-sand-950: #251f13;
  --color-coral-50: #faf6f5;
  --color-coral-100: #f3e8e7;
  --color-coral-200: #e7cdca;
  --color-coral-300: #d7a39d;
  --color-coral-400: #c9776e;
  --color-coral-500: #bf4d40;
  --color-coral-600: #9d3f34;
  --color-coral-700: #7d342c;
  --color-coral-800: #5c2924;
  --color-coral-900: #3c1e1b;
  --color-coral-950: #251513;
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f5f8f9;
  --color-neutral-100: #e9eef1;
  --color-neutral-200: #d0dae1;
  --color-neutral-300: #aebcc7;
  --color-neutral-400: #8c9eab;
  --color-neutral-500: #6c8393;
  --color-neutral-600: #586b79;
  --color-neutral-700: #455763;
  --color-neutral-800: #32424e;
  --color-neutral-900: #202d37;
  --color-neutral-950: #141d24;
  --color-neutral-1000: #0c1218;

  /* --- anclajes oficiales (inmutables) --- */
  --brand-abyss: #0a151f;
  --brand-deep-sea: #162f41;
  --brand-ocean: #236985;
  --brand-ocean-deep: #163541;
  --brand-ocean-soft: #35aede;
  --brand-lagoon: #91dee3;
  --brand-lagoon-deep: #237e85;
  --brand-lagoon-bright: #6fe3eb;
  --brand-foam: #e9eef1;
  --brand-jade: #2c7d66;
  --brand-sand: #7d622c;
  --brand-coral: #7d342c;
  --brand-white: #ffffff;
  --brand-glaciar: #3f57c9;
  --brand-glaciar-bright: #9fb0ff;
  --brand-alba: #b85a24;
  --brand-alba-bright: #ffb27d;

  /* --- gradientes de marca --- */
  --gradient-shallows: linear-gradient(160deg, #e4f5f6 0%, #e4f1f6 50%, #f5f8f9 100%);
  --gradient-depth: linear-gradient(160deg, #236985 0%, #0a151f 100%);

  /* --- espaciado (escala 4px) --- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- radios --- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 9999px;
  --radius-round: 50%;

  /* --- tipografía --- */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --text-xs: 0.75rem;
  --leading-xs: 1rem;
  --text-sm: 0.875rem;
  --leading-sm: 1.25rem;
  --text-base: 1rem;
  --leading-base: 1.5rem;
  --text-lg: 1.125rem;
  --leading-lg: 1.5rem;
  --text-xl: 1.25rem;
  --leading-xl: 1.625rem;
  --text-2xl: 1.375rem;
  --leading-2xl: 1.75rem;
  --text-3xl: 1.625rem;
  --leading-3xl: 2rem;
  --text-4xl: 2rem;
  --leading-4xl: 2.375rem;
  --text-5xl: 2.5rem;
  --leading-5xl: 2.875rem;

  /* --- motion --- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);

  /* --- layout --- */
  --container-max: 1200px;
  --prose-max: 72ch;
  --touch-target-min: 44px;
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;

  /* --- z-index --- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-toast: 1070;
  --z-tooltip: 1080;

  /* --- foco --- */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-style: solid;

  /* --- roles semánticos: tema claro (por defecto) --- */
  --color-bg: #f5f8f9;
  --color-bg-alt: #e9eef1;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #d0dae1;
  --color-border-strong: #aebcc7;
  --color-text: #162f41;
  --color-text-muted: #52697a;
  --color-text-disabled: #8c9eab;
  --color-primary: #236985;
  --color-on-primary: #ffffff;
  --color-primary-hover: #1d4f62;
  --color-primary-active: #163541;
  --color-primary-subtle: #e4f1f6;
  --color-accent: #91dee3;
  --color-on-accent: #162f41;
  --color-accent-hover: #5ed1d9;
  --color-accent-subtle: #e4f5f6;
  --color-link: #236985;
  --color-focus-ring: #2885a9;
  --color-success: #2c7d66;
  --color-on-success: #ffffff;
  --color-success-subtle: #e7f3f0;
  --color-warning: #5c4924;
  --color-warning-bg: #c9ab6e;
  --color-warning-subtle: #f3efe7;
  --color-danger: #7d342c;
  --color-on-danger: #ffffff;
  --color-danger-subtle: #f3e8e7;
  --color-info: #236985;
  --color-info-subtle: #e4f1f6;
  --color-overlay: rgba(6, 28, 40, 0.42);

  /* --- elevación: tema claro --- */
  --shadow-e1: 0 1px 2px rgba(32, 54, 70, 0.05);
  --shadow-e2: 0 1px 2px rgba(32, 54, 70, 0.05), 0 4px 10px rgba(32, 54, 70, 0.07);
  --shadow-e3: 0 2px 4px rgba(32, 54, 70, 0.06), 0 12px 28px rgba(32, 54, 70, 0.11);
}

/* El tema oscuro es obligatorio: sigue la preferencia del sistema… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0a151f;
    --color-bg-alt: #0f1c2a;
    --color-surface: #142633;
    --color-surface-raised: #1c3140;
    --color-border: #2b4354;
    --color-border-strong: #406077;
    --color-text: #ebf4f4;
    --color-text-muted: #9bb0bf;
    --color-text-disabled: #647e90;
    --color-primary: #35aede;
    --color-on-primary: #081521;
    --color-primary-hover: #56bde6;
    --color-primary-active: #78cced;
    --color-primary-subtle: #1c3d4a;
    --color-accent: #6fe3eb;
    --color-on-accent: #081521;
    --color-accent-hover: #92ebf2;
    --color-accent-subtle: #1b4346;
    --color-link: #6fe3eb;
    --color-focus-ring: #6fe3eb;
    --color-success: #60d2b2;
    --color-on-success: #0a1f19;
    --color-success-subtle: #1b3c32;
    --color-warning: #d8b164;
    --color-warning-bg: #cea450;
    --color-warning-subtle: #3c311b;
    --color-danger: #de7468;
    --color-on-danger: #1f0c0a;
    --color-danger-subtle: #401f1c;
    --color-info: #35aede;
    --color-info-subtle: #1c3d4a;
    --color-overlay: rgba(3, 14, 21, 0.60);
    --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-e2: 0 2px 6px rgba(0, 0, 0, 0.36);
    --shadow-e3: 0 10px 24px rgba(0, 0, 0, 0.44);
  }
}

/* …y la elección explícita del usuario siempre gana. */
:root[data-theme="dark"] {
  --color-bg: #0a151f;
  --color-bg-alt: #0f1c2a;
  --color-surface: #142633;
  --color-surface-raised: #1c3140;
  --color-border: #2b4354;
  --color-border-strong: #406077;
  --color-text: #ebf4f4;
  --color-text-muted: #9bb0bf;
  --color-text-disabled: #647e90;
  --color-primary: #35aede;
  --color-on-primary: #081521;
  --color-primary-hover: #56bde6;
  --color-primary-active: #78cced;
  --color-primary-subtle: #1c3d4a;
  --color-accent: #6fe3eb;
  --color-on-accent: #081521;
  --color-accent-hover: #92ebf2;
  --color-accent-subtle: #1b4346;
  --color-link: #6fe3eb;
  --color-focus-ring: #6fe3eb;
  --color-success: #60d2b2;
  --color-on-success: #0a1f19;
  --color-success-subtle: #1b3c32;
  --color-warning: #d8b164;
  --color-warning-bg: #cea450;
  --color-warning-subtle: #3c311b;
  --color-danger: #de7468;
  --color-on-danger: #1f0c0a;
  --color-danger-subtle: #401f1c;
  --color-info: #35aede;
  --color-info-subtle: #1c3d4a;
  --color-overlay: rgba(3, 14, 21, 0.60);
  --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-e2: 0 2px 6px rgba(0, 0, 0, 0.36);
  --shadow-e3: 0 10px 24px rgba(0, 0, 0, 0.44);
}

:root[data-theme="light"] {
  --color-bg: #f5f8f9;
  --color-bg-alt: #e9eef1;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #d0dae1;
  --color-border-strong: #aebcc7;
  --color-text: #162f41;
  --color-text-muted: #52697a;
  --color-text-disabled: #8c9eab;
  --color-primary: #236985;
  --color-on-primary: #ffffff;
  --color-primary-hover: #1d4f62;
  --color-primary-active: #163541;
  --color-primary-subtle: #e4f1f6;
  --color-accent: #91dee3;
  --color-on-accent: #162f41;
  --color-accent-hover: #5ed1d9;
  --color-accent-subtle: #e4f5f6;
  --color-link: #236985;
  --color-focus-ring: #2885a9;
  --color-success: #2c7d66;
  --color-on-success: #ffffff;
  --color-success-subtle: #e7f3f0;
  --color-warning: #5c4924;
  --color-warning-bg: #c9ab6e;
  --color-warning-subtle: #f3efe7;
  --color-danger: #7d342c;
  --color-on-danger: #ffffff;
  --color-danger-subtle: #f3e8e7;
  --color-info: #236985;
  --color-info-subtle: #e4f1f6;
  --color-overlay: rgba(6, 28, 40, 0.42);
  --shadow-e1: 0 1px 2px rgba(32, 54, 70, 0.05);
  --shadow-e2: 0 1px 2px rgba(32, 54, 70, 0.05), 0 4px 10px rgba(32, 54, 70, 0.07);
  --shadow-e3: 0 2px 4px rgba(32, 54, 70, 0.06), 0 12px 28px rgba(32, 54, 70, 0.11);
}

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

/* ── Documentos legales (generado por scripts/build-legal.mjs) ── */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-lg); }
.barra, main, footer { max-width: var(--prose-max); margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); }
.barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-3); }
.marca { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-weight: var(--weight-bold); font-size: var(--text-sm); text-decoration: none; }
.marca img { display: block; border-radius: var(--radius-sm); }
.idiomas { display: flex; gap: var(--space-4); font-size: var(--text-sm); }
.idiomas a { color: var(--color-text-muted); }
.idiomas a[aria-current] { color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: none; }
main { padding-bottom: var(--space-16); }
.eyebrow { margin: var(--space-6) 0 var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
h1 { margin: 0 0 var(--space-3); font-size: var(--text-4xl); line-height: var(--leading-4xl); }
.lead { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-lg); }
.revision { margin: 0 0 var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); }
.aviso { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border-left: var(--space-1) solid var(--color-warning); border-radius: var(--radius-sm); background: var(--color-warning-subtle); }
.aviso strong { display: block; margin-bottom: var(--space-1); }
mark.pendiente { padding: 0 var(--space-1); border-radius: var(--radius-xs); background: var(--color-warning-subtle); color: inherit; }
.indice ol { margin: 0; padding-left: var(--space-5); columns: 2; column-gap: var(--space-8); font-size: var(--text-sm); }
.indice a { color: inherit; }
h2 { margin: var(--space-10) 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-xl); }
h3 { margin: var(--space-6) 0 var(--space-1); font-size: var(--text-lg); line-height: var(--leading-lg); }
ul, ol { padding-left: var(--space-5); }
li { margin: var(--space-1) 0; }
a { color: var(--color-link); }
a:focus-visible { outline: var(--focus-width) var(--focus-style) var(--color-focus-ring); outline-offset: var(--focus-offset); }
code { padding: 0 var(--space-1); border-radius: var(--radius-xs); background: var(--color-bg-alt); font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.tabla { margin: var(--space-5) 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-sm); }
th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
th { border-bottom-color: var(--color-border-strong); font-weight: var(--weight-semibold); }
footer { padding-top: var(--space-5); padding-bottom: var(--space-12); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
footer a { color: inherit; }
@media (max-width: 600px) { .indice ol { columns: 1; } h1 { font-size: var(--text-3xl); line-height: var(--leading-3xl); } }