/* +SaBoR 1.0.0 — GENERATED by build_tokens.py. Edit source JSON, not this file. */

:root, [data-sabor-theme="light"] {
  color-scheme: light;
  --sabor-color-brand-cream: #FEFFED;
  --sabor-color-brand-yellow: #FFEE6C;
  --sabor-color-brand-red: #F71D28;
  --sabor-color-brand-burgundy: #58021B;
  --sabor-color-neutral-0: #FFFFFF;
  --sabor-color-neutral-50: #F8F6F0;
  --sabor-color-neutral-100: #EFEAE3;
  --sabor-color-neutral-200: #E7DDDB;
  --sabor-color-neutral-300: #CBBFC1;
  --sabor-color-neutral-400: #97868A;
  --sabor-color-neutral-500: #76656A;
  --sabor-color-neutral-600: #675258;
  --sabor-color-neutral-700: #49383E;
  --sabor-color-neutral-800: #33242A;
  --sabor-color-neutral-900: #25171D;
  --sabor-color-neutral-950: #180E12;
  --sabor-color-red-50: #FFF0ED;
  --sabor-color-red-100: #FFD8D9;
  --sabor-color-red-300: #FF8993;
  --sabor-color-red-400: #FF6370;
  --sabor-color-red-600: #D81724;
  --sabor-color-red-700: #B91220;
  --sabor-color-red-800: #970F1B;
  --sabor-color-green-50: #E9F5EE;
  --sabor-color-green-200: #BCE4CA;
  --sabor-color-green-300: #8CE0AC;
  --sabor-color-green-700: #17643B;
  --sabor-color-green-950: #102A1B;
  --sabor-color-orange-50: #FFF3DE;
  --sabor-color-orange-300: #FFD47A;
  --sabor-color-orange-700: #885000;
  --sabor-color-orange-950: #322208;
  --sabor-color-error-50: #FFF0F3;
  --sabor-color-error-300: #FFADB9;
  --sabor-color-error-700: #A7173E;
  --sabor-color-error-950: #3D1520;
  --sabor-color-blue-50: #EDF3FA;
  --sabor-color-blue-300: #ADCCF2;
  --sabor-color-blue-700: #285987;
  --sabor-color-blue-950: #172637;
  --sabor-color-plum-50: #FFF8F5;
  --sabor-color-plum-300: #D3BBC3;
  --sabor-color-plum-400: #B19CA3;
  --sabor-color-plum-600: #8A737D;
  --sabor-color-plum-800: #58323E;
  --sabor-color-plum-850: #42222D;
  --sabor-color-plum-900: #301B23;
  --sabor-color-plum-950: #200A11;
  --sabor-color-transparent: rgba(0, 0, 0, 0);
  --sabor-color-bg-canvas: var(--sabor-color-brand-cream);
  --sabor-color-bg-surface: var(--sabor-color-neutral-0);
  --sabor-color-bg-elevated: var(--sabor-color-neutral-0);
  --sabor-color-bg-subtle: var(--sabor-color-neutral-50);
  --sabor-color-bg-selected: var(--sabor-color-red-50);
  --sabor-color-bg-inverse: var(--sabor-color-brand-burgundy);
  --sabor-color-text-primary: var(--sabor-color-brand-burgundy);
  --sabor-color-text-secondary: var(--sabor-color-neutral-600);
  --sabor-color-text-muted: var(--sabor-color-neutral-500);
  --sabor-color-text-placeholder: var(--sabor-color-neutral-500);
  --sabor-color-text-inverse: var(--sabor-color-brand-cream);
  --sabor-color-text-link: var(--sabor-color-red-600);
  --sabor-color-text-link-hover: var(--sabor-color-red-800);
  --sabor-color-text-disabled: var(--sabor-color-neutral-500);
  --sabor-color-text-accent: var(--sabor-color-brand-burgundy);
  --sabor-color-border-subtle: var(--sabor-color-neutral-200);
  --sabor-color-border-control: var(--sabor-color-neutral-400);
  --sabor-color-border-focus: var(--sabor-color-brand-burgundy);
  --sabor-color-border-error: var(--sabor-color-error-700);
  --sabor-color-icon-default: var(--sabor-color-neutral-600);
  --sabor-color-icon-muted: var(--sabor-color-neutral-500);
  --sabor-color-icon-accent: var(--sabor-color-red-600);
  --sabor-color-icon-inverse: var(--sabor-color-brand-cream);
  --sabor-color-action-primary-bg: var(--sabor-color-red-600);
  --sabor-color-action-primary-fg: var(--sabor-color-brand-cream);
  --sabor-color-action-primary-border: var(--sabor-color-red-600);
  --sabor-color-action-primary-hover-bg: var(--sabor-color-red-700);
  --sabor-color-action-primary-pressed-bg: var(--sabor-color-red-800);
  --sabor-color-action-secondary-bg: var(--sabor-color-transparent);
  --sabor-color-action-secondary-fg: var(--sabor-color-brand-burgundy);
  --sabor-color-action-secondary-border: var(--sabor-color-neutral-400);
  --sabor-color-action-secondary-hover-bg: var(--sabor-color-neutral-100);
  --sabor-color-action-secondary-pressed-bg: var(--sabor-color-neutral-200);
  --sabor-color-action-disabled-bg: var(--sabor-color-neutral-100);
  --sabor-color-action-disabled-fg: var(--sabor-color-neutral-500);
  --sabor-color-action-disabled-border: var(--sabor-color-neutral-300);
  --sabor-color-nav-bg: var(--sabor-color-brand-burgundy);
  --sabor-color-nav-text: var(--sabor-color-brand-cream);
  --sabor-color-nav-muted: var(--sabor-color-plum-300);
  --sabor-color-nav-active-bg: var(--sabor-color-brand-cream);
  --sabor-color-nav-active-text: var(--sabor-color-red-600);
  --sabor-color-nav-hover-bg: var(--sabor-color-plum-800);
  --sabor-color-nav-focus: var(--sabor-color-brand-yellow);
  --sabor-color-chart-series-primary: var(--sabor-color-red-600);
  --sabor-color-chart-series-secondary: var(--sabor-color-brand-burgundy);
  --sabor-color-chart-axis: var(--sabor-color-neutral-500);
  --sabor-color-chart-grid: var(--sabor-color-neutral-200);
  --sabor-color-chart-highlight: var(--sabor-color-brand-yellow);
  --sabor-color-status-success-fg: var(--sabor-color-green-700);
  --sabor-color-status-success-bg: var(--sabor-color-green-50);
  --sabor-color-status-success-border: var(--sabor-color-green-700);
  --sabor-color-status-warning-fg: var(--sabor-color-orange-700);
  --sabor-color-status-warning-bg: var(--sabor-color-orange-50);
  --sabor-color-status-warning-border: var(--sabor-color-orange-700);
  --sabor-color-status-error-fg: var(--sabor-color-error-700);
  --sabor-color-status-error-bg: var(--sabor-color-error-50);
  --sabor-color-status-error-border: var(--sabor-color-error-700);
  --sabor-color-status-info-fg: var(--sabor-color-blue-700);
  --sabor-color-status-info-bg: var(--sabor-color-blue-50);
  --sabor-color-status-info-border: var(--sabor-color-blue-700);
  --sabor-color-status-neutral-fg: var(--sabor-color-neutral-600);
  --sabor-color-status-neutral-bg: var(--sabor-color-neutral-100);
  --sabor-color-status-neutral-border: var(--sabor-color-neutral-600);
  --sabor-font-family-ui: "Clash Grotesk", Arial, sans-serif;
  --sabor-font-family-expressive: Caveat, cursive;
  --sabor-font-family-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --sabor-font-weight-regular: 400;
  --sabor-font-weight-medium: 500;
  --sabor-font-weight-semibold: 600;
  --sabor-font-weight-bold: 700;
  --sabor-font-size-caption: 0.75rem;
  --sabor-font-size-small: 0.875rem;
  --sabor-font-size-body: 1rem;
  --sabor-font-size-lead: 1.125rem;
  --sabor-font-size-h3: 1.25rem;
  --sabor-font-size-h2: 1.5rem;
  --sabor-font-size-mobile-title: 1.75rem;
  --sabor-font-size-h1: 2rem;
  --sabor-font-size-metric: 2.5rem;
  --sabor-font-size-display: 3rem;
  --sabor-font-size-hero: 4rem;
  --sabor-font-line-height-tight: 1.1;
  --sabor-font-line-height-heading: 1.25;
  --sabor-font-line-height-ui: 1.42857;
  --sabor-font-line-height-body: 1.5;
  --sabor-font-tracking-tight: -0.64px;
  --sabor-font-tracking-normal: 0px;
  --sabor-font-tracking-label: 0.4px;
  --sabor-font-tracking-code: 8px;
  --sabor-space-0: 0px;
  --sabor-space-half: 2px;
  --sabor-space-1: 4px;
  --sabor-space-2: 8px;
  --sabor-space-3: 12px;
  --sabor-space-4: 16px;
  --sabor-space-5: 20px;
  --sabor-space-6: 24px;
  --sabor-space-8: 32px;
  --sabor-space-10: 40px;
  --sabor-space-12: 48px;
  --sabor-space-16: 64px;
  --sabor-space-20: 80px;
  --sabor-space-24: 96px;
  --sabor-radius-none: 0px;
  --sabor-radius-xs: 4px;
  --sabor-radius-sm: 8px;
  --sabor-radius-md: 12px;
  --sabor-radius-lg: 16px;
  --sabor-radius-xl: 24px;
  --sabor-radius-pill: 9999px;
  --sabor-border-width-hairline: 1px;
  --sabor-border-width-strong: 2px;
  --sabor-border-width-focus: 3px;
  --sabor-size-control-sm: 44px;
  --sabor-size-control-md: 48px;
  --sabor-size-control-lg: 56px;
  --sabor-size-touch-min: 44px;
  --sabor-size-icon-sm: 16px;
  --sabor-size-icon-md: 20px;
  --sabor-size-icon-lg: 24px;
  --sabor-size-icon-xl: 32px;
  --sabor-size-icon-stroke: 1.75px;
  --sabor-size-table-row: 56px;
  --sabor-size-table-header: 44px;
  --sabor-size-code-height: 64px;
  --sabor-layout-sidebar: 248px;
  --sabor-layout-header: 72px;
  --sabor-layout-content-max: 1440px;
  --sabor-layout-gutter-mobile: 20px;
  --sabor-layout-gutter-tablet: 24px;
  --sabor-layout-gutter-desktop: 32px;
  --sabor-layout-gap-grid: 24px;
  --sabor-layout-breakpoint-sm: 640px;
  --sabor-layout-breakpoint-md: 768px;
  --sabor-layout-breakpoint-lg: 1024px;
  --sabor-layout-breakpoint-xl: 1280px;
  --sabor-motion-duration-none: 0ms;
  --sabor-motion-duration-fast: 120ms;
  --sabor-motion-duration-normal: 180ms;
  --sabor-motion-duration-slow: 240ms;
  --sabor-motion-duration-view: 320ms;
  --sabor-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sabor-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --sabor-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --sabor-z-index-base: 0;
  --sabor-z-index-sticky: 10;
  --sabor-z-index-dropdown: 20;
  --sabor-z-index-overlay: 40;
  --sabor-z-index-modal: 50;
  --sabor-z-index-popover: 60;
  --sabor-z-index-toast: 70;
  --sabor-z-index-tooltip: 80;
  --sabor-opacity-scrim: 0.5;
  --sabor-opacity-decorative-disabled: 0.4;
  --sabor-typography-caption: 400 0.75rem/1.33333 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-caption-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-caption-font-size: 0.75rem;
  --sabor-typography-caption-font-weight: 400;
  --sabor-typography-caption-letter-spacing: 0px;
  --sabor-typography-caption-line-height: 1.33333;
  --sabor-typography-label: 500 0.875rem/1.42857 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-label-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-label-font-size: 0.875rem;
  --sabor-typography-label-font-weight: 500;
  --sabor-typography-label-letter-spacing: 0px;
  --sabor-typography-label-line-height: 1.42857;
  --sabor-typography-body-sm: 400 0.875rem/1.42857 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-body-sm-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-body-sm-font-size: 0.875rem;
  --sabor-typography-body-sm-font-weight: 400;
  --sabor-typography-body-sm-letter-spacing: 0px;
  --sabor-typography-body-sm-line-height: 1.42857;
  --sabor-typography-body: 400 1rem/1.5 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-body-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-body-font-size: 1rem;
  --sabor-typography-body-font-weight: 400;
  --sabor-typography-body-letter-spacing: 0px;
  --sabor-typography-body-line-height: 1.5;
  --sabor-typography-lead: 400 1.125rem/1.55556 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-lead-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-lead-font-size: 1.125rem;
  --sabor-typography-lead-font-weight: 400;
  --sabor-typography-lead-letter-spacing: 0px;
  --sabor-typography-lead-line-height: 1.55556;
  --sabor-typography-card-title: 600 1.25rem/1.4 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-card-title-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-card-title-font-size: 1.25rem;
  --sabor-typography-card-title-font-weight: 600;
  --sabor-typography-card-title-letter-spacing: 0px;
  --sabor-typography-card-title-line-height: 1.4;
  --sabor-typography-section-title: 600 1.5rem/1.33333 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-section-title-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-section-title-font-size: 1.5rem;
  --sabor-typography-section-title-font-weight: 600;
  --sabor-typography-section-title-letter-spacing: 0px;
  --sabor-typography-section-title-line-height: 1.33333;
  --sabor-typography-page-title: 600 2rem/1.25 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-page-title-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-page-title-font-size: 2rem;
  --sabor-typography-page-title-font-weight: 600;
  --sabor-typography-page-title-letter-spacing: -0.64px;
  --sabor-typography-page-title-line-height: 1.25;
  --sabor-typography-mobile-title: 600 1.75rem/1.28571 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-mobile-title-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-mobile-title-font-size: 1.75rem;
  --sabor-typography-mobile-title-font-weight: 600;
  --sabor-typography-mobile-title-letter-spacing: 0px;
  --sabor-typography-mobile-title-line-height: 1.28571;
  --sabor-typography-metric: 600 2.5rem/1.2 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-metric-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-metric-font-size: 2.5rem;
  --sabor-typography-metric-font-weight: 600;
  --sabor-typography-metric-letter-spacing: -0.64px;
  --sabor-typography-metric-line-height: 1.2;
  --sabor-typography-display: 600 3rem/1.16667 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-display-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-display-font-size: 3rem;
  --sabor-typography-display-font-weight: 600;
  --sabor-typography-display-letter-spacing: -0.64px;
  --sabor-typography-display-line-height: 1.16667;
  --sabor-typography-hero: 600 4rem/1.09375 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-hero-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-hero-font-size: 4rem;
  --sabor-typography-hero-font-weight: 600;
  --sabor-typography-hero-letter-spacing: -0.64px;
  --sabor-typography-hero-line-height: 1.09375;
  --sabor-typography-expressive: 500 2rem/1.25 Caveat, cursive;
  --sabor-typography-expressive-font-family: Caveat, cursive;
  --sabor-typography-expressive-font-size: 2rem;
  --sabor-typography-expressive-font-weight: 500;
  --sabor-typography-expressive-letter-spacing: 0px;
  --sabor-typography-expressive-line-height: 1.25;
  --sabor-elevation-none: 0px 0px 0px 0px rgba(88, 2, 27, 0);
  --sabor-elevation-card: 0px 4px 16px 0px rgba(88, 2, 27, 0.06);
  --sabor-elevation-popover: 0px 12px 32px 0px rgba(88, 2, 27, 0.12);
  --sabor-elevation-modal: 0px 24px 64px 0px rgba(88, 2, 27, 0.18);
  --sabor-component-button-height: var(--sabor-size-control-md);
  --sabor-component-button-radius: var(--sabor-radius-md);
  --sabor-component-button-padding-x: var(--sabor-space-5);
  --sabor-component-button-gap: var(--sabor-space-2);
  --sabor-component-button-text: var(--sabor-typography-label);
  --sabor-component-button-text-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-component-button-text-font-size: 0.875rem;
  --sabor-component-button-text-font-weight: 500;
  --sabor-component-button-text-letter-spacing: 0px;
  --sabor-component-button-text-line-height: 1.42857;
  --sabor-component-button-primary-bg: var(--sabor-color-action-primary-bg);
  --sabor-component-button-primary-fg: var(--sabor-color-action-primary-fg);
  --sabor-component-button-primary-border: var(--sabor-color-action-primary-border);
  --sabor-component-button-primary-hover-bg: var(--sabor-color-action-primary-hover-bg);
  --sabor-component-button-primary-pressed-bg: var(--sabor-color-action-primary-pressed-bg);
  --sabor-component-button-disabled-bg: var(--sabor-color-action-disabled-bg);
  --sabor-component-button-disabled-fg: var(--sabor-color-action-disabled-fg);
  --sabor-component-button-disabled-border: var(--sabor-color-action-disabled-border);
  --sabor-component-input-height: var(--sabor-size-control-md);
  --sabor-component-input-radius: var(--sabor-radius-md);
  --sabor-component-input-padding-x: var(--sabor-space-4);
  --sabor-component-input-bg: var(--sabor-color-bg-surface);
  --sabor-component-input-fg: var(--sabor-color-text-primary);
  --sabor-component-input-border: var(--sabor-color-border-control);
  --sabor-component-input-label: var(--sabor-typography-label);
  --sabor-component-input-label-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-component-input-label-font-size: 0.875rem;
  --sabor-component-input-label-font-weight: 500;
  --sabor-component-input-label-letter-spacing: 0px;
  --sabor-component-input-label-line-height: 1.42857;
  --sabor-component-input-value: var(--sabor-typography-body);
  --sabor-component-input-value-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-component-input-value-font-size: 1rem;
  --sabor-component-input-value-font-weight: 400;
  --sabor-component-input-value-letter-spacing: 0px;
  --sabor-component-input-value-line-height: 1.5;
  --sabor-component-card-radius: var(--sabor-radius-lg);
  --sabor-component-card-padding: var(--sabor-space-6);
  --sabor-component-card-bg: var(--sabor-color-bg-surface);
  --sabor-component-card-border: var(--sabor-color-border-subtle);
  --sabor-component-card-shadow: var(--sabor-elevation-card);
  --sabor-component-chip-height: var(--sabor-size-control-sm);
  --sabor-component-chip-radius: var(--sabor-radius-pill);
  --sabor-component-chip-padding-x: var(--sabor-space-3);
  --sabor-component-chip-selected-bg: var(--sabor-color-bg-selected);
  --sabor-component-chip-selected-fg: var(--sabor-color-text-link);
  --sabor-component-chip-selected-border: var(--sabor-color-text-link);
  --sabor-component-badge-radius: var(--sabor-radius-pill);
  --sabor-component-badge-padding-x: var(--sabor-space-2);
  --sabor-component-badge-padding-y: var(--sabor-space-1);
  --sabor-component-badge-text: var(--sabor-typography-caption);
  --sabor-component-badge-text-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-component-badge-text-font-size: 0.75rem;
  --sabor-component-badge-text-font-weight: 400;
  --sabor-component-badge-text-letter-spacing: 0px;
  --sabor-component-badge-text-line-height: 1.33333;
  --sabor-component-table-header-height: var(--sabor-size-table-header);
  --sabor-component-table-row-min-height: var(--sabor-size-table-row);
  --sabor-component-table-cell-padding-x: var(--sabor-space-4);
  --sabor-component-table-cell-padding-y: var(--sabor-space-3);
  --sabor-component-table-header-bg: var(--sabor-color-bg-subtle);
  --sabor-component-table-row-bg: var(--sabor-color-bg-surface);
  --sabor-component-table-row-hover: var(--sabor-color-bg-subtle);
  --sabor-component-table-row-selected: var(--sabor-color-bg-selected);
  --sabor-component-table-divider: var(--sabor-color-border-subtle);
  --sabor-component-sidebar-width: var(--sabor-layout-sidebar);
  --sabor-component-sidebar-bg: var(--sabor-color-nav-bg);
  --sabor-component-sidebar-fg: var(--sabor-color-nav-text);
  --sabor-component-sidebar-item-height: var(--sabor-size-control-md);
  --sabor-component-sidebar-item-radius: var(--sabor-radius-md);
  --sabor-component-sidebar-active-bg: var(--sabor-color-nav-active-bg);
  --sabor-component-sidebar-active-fg: var(--sabor-color-nav-active-text);
  --sabor-component-bottom-nav-height: var(--sabor-layout-header);
  --sabor-component-bottom-nav-bg: var(--sabor-color-bg-surface);
  --sabor-component-bottom-nav-fg: var(--sabor-color-text-secondary);
  --sabor-component-bottom-nav-active-fg: var(--sabor-color-text-link);
  --sabor-component-bottom-nav-border: var(--sabor-color-border-subtle);
  --sabor-component-modal-width: var(--sabor-layout-breakpoint-sm);
  --sabor-component-modal-radius: var(--sabor-radius-xl);
  --sabor-component-modal-padding: var(--sabor-space-8);
  --sabor-component-modal-bg: var(--sabor-color-bg-elevated);
  --sabor-component-modal-shadow: var(--sabor-elevation-modal);
  --sabor-component-focus-width: var(--sabor-border-width-focus);
  --sabor-component-focus-offset: var(--sabor-space-half);
  --sabor-component-focus-color: var(--sabor-color-border-focus);
  --sabor-component-calendar-event-bg: var(--sabor-color-action-primary-bg);
  --sabor-component-calendar-event-fg: var(--sabor-color-action-primary-fg);
  --sabor-component-calendar-event-radius: var(--sabor-radius-sm);
  --sabor-component-calendar-grid: var(--sabor-color-border-subtle);
  --sabor-component-map-pin-default-bg: var(--sabor-color-bg-surface);
  --sabor-component-map-pin-default-fg: var(--sabor-color-text-primary);
  --sabor-component-map-pin-selected-bg: var(--sabor-color-action-primary-bg);
  --sabor-component-map-pin-selected-fg: var(--sabor-color-action-primary-fg);
  --sabor-component-map-pin-radius: var(--sabor-radius-pill);
  --sabor-component-skeleton-bg: var(--sabor-color-bg-subtle);
  --sabor-component-skeleton-radius: var(--sabor-radius-sm);
  --sabor-component-tooltip-bg: var(--sabor-color-bg-inverse);
  --sabor-component-tooltip-fg: var(--sabor-color-text-inverse);
  --sabor-component-tooltip-radius: var(--sabor-radius-sm);
}

[data-sabor-theme="dark"] {
  color-scheme: dark;
  --sabor-color-brand-cream: #FEFFED;
  --sabor-color-brand-yellow: #FFEE6C;
  --sabor-color-brand-red: #F71D28;
  --sabor-color-brand-burgundy: #58021B;
  --sabor-color-neutral-0: #FFFFFF;
  --sabor-color-neutral-50: #F8F6F0;
  --sabor-color-neutral-100: #EFEAE3;
  --sabor-color-neutral-200: #E7DDDB;
  --sabor-color-neutral-300: #CBBFC1;
  --sabor-color-neutral-400: #97868A;
  --sabor-color-neutral-500: #76656A;
  --sabor-color-neutral-600: #675258;
  --sabor-color-neutral-700: #49383E;
  --sabor-color-neutral-800: #33242A;
  --sabor-color-neutral-900: #25171D;
  --sabor-color-neutral-950: #180E12;
  --sabor-color-red-50: #FFF0ED;
  --sabor-color-red-100: #FFD8D9;
  --sabor-color-red-300: #FF8993;
  --sabor-color-red-400: #FF6370;
  --sabor-color-red-600: #D81724;
  --sabor-color-red-700: #B91220;
  --sabor-color-red-800: #970F1B;
  --sabor-color-green-50: #E9F5EE;
  --sabor-color-green-200: #BCE4CA;
  --sabor-color-green-300: #8CE0AC;
  --sabor-color-green-700: #17643B;
  --sabor-color-green-950: #102A1B;
  --sabor-color-orange-50: #FFF3DE;
  --sabor-color-orange-300: #FFD47A;
  --sabor-color-orange-700: #885000;
  --sabor-color-orange-950: #322208;
  --sabor-color-error-50: #FFF0F3;
  --sabor-color-error-300: #FFADB9;
  --sabor-color-error-700: #A7173E;
  --sabor-color-error-950: #3D1520;
  --sabor-color-blue-50: #EDF3FA;
  --sabor-color-blue-300: #ADCCF2;
  --sabor-color-blue-700: #285987;
  --sabor-color-blue-950: #172637;
  --sabor-color-plum-50: #FFF8F5;
  --sabor-color-plum-300: #D3BBC3;
  --sabor-color-plum-400: #B19CA3;
  --sabor-color-plum-600: #8A737D;
  --sabor-color-plum-800: #58323E;
  --sabor-color-plum-850: #42222D;
  --sabor-color-plum-900: #301B23;
  --sabor-color-plum-950: #200A11;
  --sabor-color-transparent: rgba(0, 0, 0, 0);
  --sabor-color-bg-canvas: var(--sabor-color-plum-950);
  --sabor-color-bg-surface: var(--sabor-color-plum-900);
  --sabor-color-bg-elevated: var(--sabor-color-plum-850);
  --sabor-color-bg-subtle: var(--sabor-color-neutral-900);
  --sabor-color-bg-selected: var(--sabor-color-plum-800);
  --sabor-color-bg-inverse: var(--sabor-color-brand-cream);
  --sabor-color-text-primary: var(--sabor-color-brand-cream);
  --sabor-color-text-secondary: var(--sabor-color-plum-300);
  --sabor-color-text-muted: var(--sabor-color-plum-400);
  --sabor-color-text-placeholder: var(--sabor-color-plum-400);
  --sabor-color-text-inverse: var(--sabor-color-brand-burgundy);
  --sabor-color-text-link: var(--sabor-color-red-300);
  --sabor-color-text-link-hover: var(--sabor-color-red-100);
  --sabor-color-text-disabled: var(--sabor-color-plum-400);
  --sabor-color-text-accent: var(--sabor-color-brand-yellow);
  --sabor-color-border-subtle: var(--sabor-color-plum-800);
  --sabor-color-border-control: var(--sabor-color-plum-600);
  --sabor-color-border-focus: var(--sabor-color-brand-yellow);
  --sabor-color-border-error: var(--sabor-color-error-300);
  --sabor-color-icon-default: var(--sabor-color-plum-300);
  --sabor-color-icon-muted: var(--sabor-color-plum-400);
  --sabor-color-icon-accent: var(--sabor-color-red-300);
  --sabor-color-icon-inverse: var(--sabor-color-brand-burgundy);
  --sabor-color-action-primary-bg: var(--sabor-color-red-600);
  --sabor-color-action-primary-fg: var(--sabor-color-brand-cream);
  --sabor-color-action-primary-border: var(--sabor-color-red-300);
  --sabor-color-action-primary-hover-bg: var(--sabor-color-red-700);
  --sabor-color-action-primary-pressed-bg: var(--sabor-color-red-800);
  --sabor-color-action-secondary-bg: var(--sabor-color-transparent);
  --sabor-color-action-secondary-fg: var(--sabor-color-brand-cream);
  --sabor-color-action-secondary-border: var(--sabor-color-plum-600);
  --sabor-color-action-secondary-hover-bg: var(--sabor-color-plum-850);
  --sabor-color-action-secondary-pressed-bg: var(--sabor-color-plum-800);
  --sabor-color-action-disabled-bg: var(--sabor-color-plum-850);
  --sabor-color-action-disabled-fg: var(--sabor-color-plum-400);
  --sabor-color-action-disabled-border: var(--sabor-color-plum-600);
  --sabor-color-nav-bg: var(--sabor-color-brand-burgundy);
  --sabor-color-nav-text: var(--sabor-color-brand-cream);
  --sabor-color-nav-muted: var(--sabor-color-plum-300);
  --sabor-color-nav-active-bg: var(--sabor-color-brand-cream);
  --sabor-color-nav-active-text: var(--sabor-color-red-600);
  --sabor-color-nav-hover-bg: var(--sabor-color-plum-800);
  --sabor-color-nav-focus: var(--sabor-color-brand-yellow);
  --sabor-color-chart-series-primary: var(--sabor-color-red-300);
  --sabor-color-chart-series-secondary: var(--sabor-color-brand-yellow);
  --sabor-color-chart-axis: var(--sabor-color-plum-400);
  --sabor-color-chart-grid: var(--sabor-color-plum-800);
  --sabor-color-chart-highlight: var(--sabor-color-brand-yellow);
  --sabor-color-status-success-fg: var(--sabor-color-green-300);
  --sabor-color-status-success-bg: var(--sabor-color-green-950);
  --sabor-color-status-success-border: var(--sabor-color-green-300);
  --sabor-color-status-warning-fg: var(--sabor-color-orange-300);
  --sabor-color-status-warning-bg: var(--sabor-color-orange-950);
  --sabor-color-status-warning-border: var(--sabor-color-orange-300);
  --sabor-color-status-error-fg: var(--sabor-color-error-300);
  --sabor-color-status-error-bg: var(--sabor-color-error-950);
  --sabor-color-status-error-border: var(--sabor-color-error-300);
  --sabor-color-status-info-fg: var(--sabor-color-blue-300);
  --sabor-color-status-info-bg: var(--sabor-color-blue-950);
  --sabor-color-status-info-border: var(--sabor-color-blue-300);
  --sabor-color-status-neutral-fg: var(--sabor-color-plum-300);
  --sabor-color-status-neutral-bg: var(--sabor-color-plum-850);
  --sabor-color-status-neutral-border: var(--sabor-color-plum-300);
  --sabor-font-family-ui: "Clash Grotesk", Arial, sans-serif;
  --sabor-font-family-expressive: Caveat, cursive;
  --sabor-font-family-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --sabor-font-weight-regular: 400;
  --sabor-font-weight-medium: 500;
  --sabor-font-weight-semibold: 600;
  --sabor-font-weight-bold: 700;
  --sabor-font-size-caption: 0.75rem;
  --sabor-font-size-small: 0.875rem;
  --sabor-font-size-body: 1rem;
  --sabor-font-size-lead: 1.125rem;
  --sabor-font-size-h3: 1.25rem;
  --sabor-font-size-h2: 1.5rem;
  --sabor-font-size-mobile-title: 1.75rem;
  --sabor-font-size-h1: 2rem;
  --sabor-font-size-metric: 2.5rem;
  --sabor-font-size-display: 3rem;
  --sabor-font-size-hero: 4rem;
  --sabor-font-line-height-tight: 1.1;
  --sabor-font-line-height-heading: 1.25;
  --sabor-font-line-height-ui: 1.42857;
  --sabor-font-line-height-body: 1.5;
  --sabor-font-tracking-tight: -0.64px;
  --sabor-font-tracking-normal: 0px;
  --sabor-font-tracking-label: 0.4px;
  --sabor-font-tracking-code: 8px;
  --sabor-space-0: 0px;
  --sabor-space-half: 2px;
  --sabor-space-1: 4px;
  --sabor-space-2: 8px;
  --sabor-space-3: 12px;
  --sabor-space-4: 16px;
  --sabor-space-5: 20px;
  --sabor-space-6: 24px;
  --sabor-space-8: 32px;
  --sabor-space-10: 40px;
  --sabor-space-12: 48px;
  --sabor-space-16: 64px;
  --sabor-space-20: 80px;
  --sabor-space-24: 96px;
  --sabor-radius-none: 0px;
  --sabor-radius-xs: 4px;
  --sabor-radius-sm: 8px;
  --sabor-radius-md: 12px;
  --sabor-radius-lg: 16px;
  --sabor-radius-xl: 24px;
  --sabor-radius-pill: 9999px;
  --sabor-border-width-hairline: 1px;
  --sabor-border-width-strong: 2px;
  --sabor-border-width-focus: 3px;
  --sabor-size-control-sm: 44px;
  --sabor-size-control-md: 48px;
  --sabor-size-control-lg: 56px;
  --sabor-size-touch-min: 44px;
  --sabor-size-icon-sm: 16px;
  --sabor-size-icon-md: 20px;
  --sabor-size-icon-lg: 24px;
  --sabor-size-icon-xl: 32px;
  --sabor-size-icon-stroke: 1.75px;
  --sabor-size-table-row: 56px;
  --sabor-size-table-header: 44px;
  --sabor-size-code-height: 64px;
  --sabor-layout-sidebar: 248px;
  --sabor-layout-header: 72px;
  --sabor-layout-content-max: 1440px;
  --sabor-layout-gutter-mobile: 20px;
  --sabor-layout-gutter-tablet: 24px;
  --sabor-layout-gutter-desktop: 32px;
  --sabor-layout-gap-grid: 24px;
  --sabor-layout-breakpoint-sm: 640px;
  --sabor-layout-breakpoint-md: 768px;
  --sabor-layout-breakpoint-lg: 1024px;
  --sabor-layout-breakpoint-xl: 1280px;
  --sabor-motion-duration-none: 0ms;
  --sabor-motion-duration-fast: 120ms;
  --sabor-motion-duration-normal: 180ms;
  --sabor-motion-duration-slow: 240ms;
  --sabor-motion-duration-view: 320ms;
  --sabor-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sabor-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
  --sabor-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --sabor-z-index-base: 0;
  --sabor-z-index-sticky: 10;
  --sabor-z-index-dropdown: 20;
  --sabor-z-index-overlay: 40;
  --sabor-z-index-modal: 50;
  --sabor-z-index-popover: 60;
  --sabor-z-index-toast: 70;
  --sabor-z-index-tooltip: 80;
  --sabor-opacity-scrim: 0.5;
  --sabor-opacity-decorative-disabled: 0.4;
  --sabor-typography-caption: 400 0.75rem/1.33333 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-caption-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-caption-font-size: 0.75rem;
  --sabor-typography-caption-font-weight: 400;
  --sabor-typography-caption-letter-spacing: 0px;
  --sabor-typography-caption-line-height: 1.33333;
  --sabor-typography-label: 500 0.875rem/1.42857 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-label-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-label-font-size: 0.875rem;
  --sabor-typography-label-font-weight: 500;
  --sabor-typography-label-letter-spacing: 0px;
  --sabor-typography-label-line-height: 1.42857;
  --sabor-typography-body-sm: 400 0.875rem/1.42857 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-body-sm-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-body-sm-font-size: 0.875rem;
  --sabor-typography-body-sm-font-weight: 400;
  --sabor-typography-body-sm-letter-spacing: 0px;
  --sabor-typography-body-sm-line-height: 1.42857;
  --sabor-typography-body: 400 1rem/1.5 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-body-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-body-font-size: 1rem;
  --sabor-typography-body-font-weight: 400;
  --sabor-typography-body-letter-spacing: 0px;
  --sabor-typography-body-line-height: 1.5;
  --sabor-typography-lead: 400 1.125rem/1.55556 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-lead-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-lead-font-size: 1.125rem;
  --sabor-typography-lead-font-weight: 400;
  --sabor-typography-lead-letter-spacing: 0px;
  --sabor-typography-lead-line-height: 1.55556;
  --sabor-typography-card-title: 600 1.25rem/1.4 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-card-title-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-card-title-font-size: 1.25rem;
  --sabor-typography-card-title-font-weight: 600;
  --sabor-typography-card-title-letter-spacing: 0px;
  --sabor-typography-card-title-line-height: 1.4;
  --sabor-typography-section-title: 600 1.5rem/1.33333 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-section-title-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-section-title-font-size: 1.5rem;
  --sabor-typography-section-title-font-weight: 600;
  --sabor-typography-section-title-letter-spacing: 0px;
  --sabor-typography-section-title-line-height: 1.33333;
  --sabor-typography-page-title: 600 2rem/1.25 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-page-title-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-page-title-font-size: 2rem;
  --sabor-typography-page-title-font-weight: 600;
  --sabor-typography-page-title-letter-spacing: -0.64px;
  --sabor-typography-page-title-line-height: 1.25;
  --sabor-typography-mobile-title: 600 1.75rem/1.28571 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-mobile-title-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-mobile-title-font-size: 1.75rem;
  --sabor-typography-mobile-title-font-weight: 600;
  --sabor-typography-mobile-title-letter-spacing: 0px;
  --sabor-typography-mobile-title-line-height: 1.28571;
  --sabor-typography-metric: 600 2.5rem/1.2 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-metric-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-metric-font-size: 2.5rem;
  --sabor-typography-metric-font-weight: 600;
  --sabor-typography-metric-letter-spacing: -0.64px;
  --sabor-typography-metric-line-height: 1.2;
  --sabor-typography-display: 600 3rem/1.16667 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-display-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-display-font-size: 3rem;
  --sabor-typography-display-font-weight: 600;
  --sabor-typography-display-letter-spacing: -0.64px;
  --sabor-typography-display-line-height: 1.16667;
  --sabor-typography-hero: 600 4rem/1.09375 "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-hero-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-typography-hero-font-size: 4rem;
  --sabor-typography-hero-font-weight: 600;
  --sabor-typography-hero-letter-spacing: -0.64px;
  --sabor-typography-hero-line-height: 1.09375;
  --sabor-typography-expressive: 500 2rem/1.25 Caveat, cursive;
  --sabor-typography-expressive-font-family: Caveat, cursive;
  --sabor-typography-expressive-font-size: 2rem;
  --sabor-typography-expressive-font-weight: 500;
  --sabor-typography-expressive-letter-spacing: 0px;
  --sabor-typography-expressive-line-height: 1.25;
  --sabor-elevation-none: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  --sabor-elevation-card: 0px 4px 16px 0px rgba(0, 0, 0, 0.2);
  --sabor-elevation-popover: 0px 12px 32px 0px rgba(0, 0, 0, 0.3);
  --sabor-elevation-modal: 0px 24px 64px 0px rgba(0, 0, 0, 0.4);
  --sabor-component-button-height: var(--sabor-size-control-md);
  --sabor-component-button-radius: var(--sabor-radius-md);
  --sabor-component-button-padding-x: var(--sabor-space-5);
  --sabor-component-button-gap: var(--sabor-space-2);
  --sabor-component-button-text: var(--sabor-typography-label);
  --sabor-component-button-text-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-component-button-text-font-size: 0.875rem;
  --sabor-component-button-text-font-weight: 500;
  --sabor-component-button-text-letter-spacing: 0px;
  --sabor-component-button-text-line-height: 1.42857;
  --sabor-component-button-primary-bg: var(--sabor-color-action-primary-bg);
  --sabor-component-button-primary-fg: var(--sabor-color-action-primary-fg);
  --sabor-component-button-primary-border: var(--sabor-color-action-primary-border);
  --sabor-component-button-primary-hover-bg: var(--sabor-color-action-primary-hover-bg);
  --sabor-component-button-primary-pressed-bg: var(--sabor-color-action-primary-pressed-bg);
  --sabor-component-button-disabled-bg: var(--sabor-color-action-disabled-bg);
  --sabor-component-button-disabled-fg: var(--sabor-color-action-disabled-fg);
  --sabor-component-button-disabled-border: var(--sabor-color-action-disabled-border);
  --sabor-component-input-height: var(--sabor-size-control-md);
  --sabor-component-input-radius: var(--sabor-radius-md);
  --sabor-component-input-padding-x: var(--sabor-space-4);
  --sabor-component-input-bg: var(--sabor-color-bg-surface);
  --sabor-component-input-fg: var(--sabor-color-text-primary);
  --sabor-component-input-border: var(--sabor-color-border-control);
  --sabor-component-input-label: var(--sabor-typography-label);
  --sabor-component-input-label-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-component-input-label-font-size: 0.875rem;
  --sabor-component-input-label-font-weight: 500;
  --sabor-component-input-label-letter-spacing: 0px;
  --sabor-component-input-label-line-height: 1.42857;
  --sabor-component-input-value: var(--sabor-typography-body);
  --sabor-component-input-value-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-component-input-value-font-size: 1rem;
  --sabor-component-input-value-font-weight: 400;
  --sabor-component-input-value-letter-spacing: 0px;
  --sabor-component-input-value-line-height: 1.5;
  --sabor-component-card-radius: var(--sabor-radius-lg);
  --sabor-component-card-padding: var(--sabor-space-6);
  --sabor-component-card-bg: var(--sabor-color-bg-surface);
  --sabor-component-card-border: var(--sabor-color-border-subtle);
  --sabor-component-card-shadow: var(--sabor-elevation-card);
  --sabor-component-chip-height: var(--sabor-size-control-sm);
  --sabor-component-chip-radius: var(--sabor-radius-pill);
  --sabor-component-chip-padding-x: var(--sabor-space-3);
  --sabor-component-chip-selected-bg: var(--sabor-color-bg-selected);
  --sabor-component-chip-selected-fg: var(--sabor-color-text-link);
  --sabor-component-chip-selected-border: var(--sabor-color-text-link);
  --sabor-component-badge-radius: var(--sabor-radius-pill);
  --sabor-component-badge-padding-x: var(--sabor-space-2);
  --sabor-component-badge-padding-y: var(--sabor-space-1);
  --sabor-component-badge-text: var(--sabor-typography-caption);
  --sabor-component-badge-text-font-family: "Clash Grotesk", Arial, sans-serif;
  --sabor-component-badge-text-font-size: 0.75rem;
  --sabor-component-badge-text-font-weight: 400;
  --sabor-component-badge-text-letter-spacing: 0px;
  --sabor-component-badge-text-line-height: 1.33333;
  --sabor-component-table-header-height: var(--sabor-size-table-header);
  --sabor-component-table-row-min-height: var(--sabor-size-table-row);
  --sabor-component-table-cell-padding-x: var(--sabor-space-4);
  --sabor-component-table-cell-padding-y: var(--sabor-space-3);
  --sabor-component-table-header-bg: var(--sabor-color-bg-subtle);
  --sabor-component-table-row-bg: var(--sabor-color-bg-surface);
  --sabor-component-table-row-hover: var(--sabor-color-bg-subtle);
  --sabor-component-table-row-selected: var(--sabor-color-bg-selected);
  --sabor-component-table-divider: var(--sabor-color-border-subtle);
  --sabor-component-sidebar-width: var(--sabor-layout-sidebar);
  --sabor-component-sidebar-bg: var(--sabor-color-nav-bg);
  --sabor-component-sidebar-fg: var(--sabor-color-nav-text);
  --sabor-component-sidebar-item-height: var(--sabor-size-control-md);
  --sabor-component-sidebar-item-radius: var(--sabor-radius-md);
  --sabor-component-sidebar-active-bg: var(--sabor-color-nav-active-bg);
  --sabor-component-sidebar-active-fg: var(--sabor-color-nav-active-text);
  --sabor-component-bottom-nav-height: var(--sabor-layout-header);
  --sabor-component-bottom-nav-bg: var(--sabor-color-bg-surface);
  --sabor-component-bottom-nav-fg: var(--sabor-color-text-secondary);
  --sabor-component-bottom-nav-active-fg: var(--sabor-color-text-link);
  --sabor-component-bottom-nav-border: var(--sabor-color-border-subtle);
  --sabor-component-modal-width: var(--sabor-layout-breakpoint-sm);
  --sabor-component-modal-radius: var(--sabor-radius-xl);
  --sabor-component-modal-padding: var(--sabor-space-8);
  --sabor-component-modal-bg: var(--sabor-color-bg-elevated);
  --sabor-component-modal-shadow: var(--sabor-elevation-modal);
  --sabor-component-focus-width: var(--sabor-border-width-focus);
  --sabor-component-focus-offset: var(--sabor-space-half);
  --sabor-component-focus-color: var(--sabor-color-border-focus);
  --sabor-component-calendar-event-bg: var(--sabor-color-action-primary-bg);
  --sabor-component-calendar-event-fg: var(--sabor-color-action-primary-fg);
  --sabor-component-calendar-event-radius: var(--sabor-radius-sm);
  --sabor-component-calendar-grid: var(--sabor-color-border-subtle);
  --sabor-component-map-pin-default-bg: var(--sabor-color-bg-surface);
  --sabor-component-map-pin-default-fg: var(--sabor-color-text-primary);
  --sabor-component-map-pin-selected-bg: var(--sabor-color-action-primary-bg);
  --sabor-component-map-pin-selected-fg: var(--sabor-color-action-primary-fg);
  --sabor-component-map-pin-radius: var(--sabor-radius-pill);
  --sabor-component-skeleton-bg: var(--sabor-color-bg-subtle);
  --sabor-component-skeleton-radius: var(--sabor-radius-sm);
  --sabor-component-tooltip-bg: var(--sabor-color-bg-inverse);
  --sabor-component-tooltip-fg: var(--sabor-color-text-inverse);
  --sabor-component-tooltip-radius: var(--sabor-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  :root, [data-sabor-theme] {
    --sabor-motion-duration-fast: 0ms;
    --sabor-motion-duration-normal: 0ms;
    --sabor-motion-duration-slow: 0ms;
    --sabor-motion-duration-view: 0ms;
  }
}

/*
  Capa del blog sobre los tokens oficiales (sabor.tokens.css, copiado sin cambios del paquete).
  1. Reasigna roles semánticos según el brandbook vigente (pre-final v0.9, decisión B14):
     - crema = fondo · vino = texto y estructura · amarillo = acciones y destacados
     - rojo #F71D28 solo para la firma (wordmark), el "+" y una palabra clave en Caveat.
     El paquete usaba rojo funcional (#D81724) para botones, links y chips: acá se reemplaza.
  2. Agrega los alias del blog (03_UI_SYSTEM/blog.alias.tokens.css del handoff).
*/

:root,
[data-sabor-theme="light"] {
  /* Acciones: amarillo con texto vino (como los formularios y los destacados de Instagram) */
  --sabor-color-action-primary-bg: var(--sabor-color-brand-yellow);
  --sabor-color-action-primary-fg: var(--sabor-color-brand-burgundy);
  --sabor-color-action-primary-border: var(--sabor-color-brand-yellow);
  --sabor-color-action-primary-hover-bg: var(--sabor-color-brand-yellow);
  --sabor-color-action-primary-pressed-bg: var(--sabor-color-brand-yellow);

  /* Links, íconos y estados seleccionados: vino (el rojo nunca va en texto chico) */
  --sabor-color-text-link: var(--sabor-color-brand-burgundy);
  --sabor-color-text-link-hover: var(--sabor-color-brand-burgundy);
  --sabor-color-icon-accent: var(--sabor-color-brand-burgundy);
  --sabor-color-nav-active-text: var(--sabor-color-brand-burgundy);
  --sabor-color-bg-selected: var(--sabor-color-brand-burgundy);
  --sabor-component-chip-selected-bg: var(--sabor-color-brand-burgundy);
  --sabor-component-chip-selected-fg: var(--sabor-color-brand-cream);
  --sabor-component-chip-selected-border: var(--sabor-color-brand-burgundy);

  /* Firma: único uso del rojo de marca */
  --blog-signature: var(--sabor-color-brand-red);

  /* Alias del blog (handoff 03_UI_SYSTEM) */
  --blog-content-max: 1280px;
  --blog-reading-max: 760px;
  --blog-wide-article-max: 1120px;
  --blog-header-height: 72px;
  --blog-section-space: clamp(64px, 8vw, 112px);
  --blog-card-media-ratio: 16 / 10;
  --blog-hero-media-ratio: 16 / 9;
  --blog-reading-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  --blog-reading-leading: 1.65;
  --blog-card-shadow: 0 10px 30px rgba(88, 2, 27, 0.06);

  /* Tipografía editorial */
  --blog-font-ui: "Clash Grotesk", Arial, sans-serif;
  --blog-font-hand: "Caveat", cursive;
  --blog-title-hero: clamp(3rem, 1.6rem + 5.6vw, 6.25rem);
  --blog-title-page: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  --blog-title-section: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  --blog-title-card-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

/* Base: reset, tipografía, foco, contenedores y utilidades */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--blog-header-height) + 16px);
}

body {
  margin: 0;
  background: var(--sabor-color-bg-canvas);
  color: var(--sabor-color-text-primary);
  font-family: var(--blog-font-ui);
  font-size: 1rem;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; }

/* Foco: contorno de 3 px con separación de 2 px (tokens oficiales) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--sabor-component-focus-width) solid var(--sabor-component-focus-color);
  outline-offset: var(--sabor-component-focus-offset);
  border-radius: 6px;
}
.on-dark :where(a, button, input, [tabindex]):focus-visible {
  outline-color: var(--sabor-color-brand-yellow);
}

[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--sabor-color-brand-yellow);
  color: var(--sabor-color-brand-burgundy);
  font-weight: 600;
  border-radius: var(--sabor-radius-md);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

main:focus { outline: none; }

/* Contenedores */
.shell {
  width: 100%;
  max-width: calc(var(--blog-content-max) + 2 * var(--sabor-layout-gutter-desktop));
  margin-inline: auto;
  padding-inline: var(--sabor-layout-gutter-desktop);
}
.shell--wide { max-width: calc(var(--blog-wide-article-max) + 2 * var(--sabor-layout-gutter-desktop)); }
.shell--reading { max-width: calc(var(--blog-reading-max) + 2 * var(--sabor-layout-gutter-desktop)); }

@media (max-width: 1023px) {
  .shell { padding-inline: var(--sabor-layout-gutter-tablet); }
}
@media (max-width: 767px) {
  .shell { padding-inline: var(--sabor-layout-gutter-mobile); }
}

.section { margin-top: var(--blog-section-space); }
.section--tight { margin-top: clamp(40px, 5vw, 64px); }

/* Tipografía utilitaria */
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sabor-color-text-primary);
}
.eyebrow--muted { color: var(--sabor-color-text-secondary); }

.hand {
  font-family: var(--blog-font-hand);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
/* Una sola palabra clave en Caveat roja por vista */
.hand--signature { color: var(--blog-signature); }

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--sabor-color-text-secondary);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.section-head h2 { font-size: var(--blog-title-section); }
.section-head__intro { display: grid; gap: 8px; max-width: 720px; }
.section-head__logic {
  font-size: 0.875rem;
  color: var(--sabor-color-text-secondary);
}

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

/* +SaBoR conserva su capitalización aunque el rótulo vaya en mayúsculas */
.brand-name { text-transform: none; letter-spacing: 0; }

ul[role="list"] { list-style: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Componentes compartidos por las cinco páginas */

/* ---------- Aviso de mockup ---------- */
.demo-banner {
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: center;
  padding: 8px 16px;
}
.demo-banner strong { font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--sabor-z-index-sticky);
  background: rgb(254 255 237 / 0.94);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--sabor-color-border-subtle);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--blog-header-height);
}
.site-header__logo { display: inline-flex; flex-shrink: 0; padding: 4px 0; }
.site-header__logo img { height: 36px; width: auto; }
.site-nav { flex: 1; }
.site-nav__list {
  display: flex;
  gap: 4px;
  list-style: none;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--sabor-radius-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard);
}
.site-nav__link:hover { background: var(--sabor-color-neutral-100); }
.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.site-header .site-header__menu-btn { display: none; }

.site-drawer {
  border-top: 1px solid var(--sabor-color-border-subtle);
  padding: 8px 0 24px;
}
.site-drawer__list { list-style: none; display: grid; }
.site-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--sabor-color-border-subtle);
}
.site-drawer__list a[aria-current="page"] { font-weight: 600; }
.site-drawer .btn { margin-top: 20px; width: 100%; }

@media (max-width: 899px) {
  .site-header .site-nav, .site-header .site-header__cta { display: none; }
  .site-header__bar { justify-content: space-between; }
  .site-header .site-header__menu-btn { display: inline-flex; }
  .site-header__logo img { height: 32px; }
}
@media (min-width: 900px) {
  .site-drawer { display: none !important; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--sabor-size-control-md);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--sabor-radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    box-shadow var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard),
    background var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard),
    transform var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard);
}
.btn .icon { width: 18px; height: 18px; }
.btn--primary {
  background: var(--sabor-color-action-primary-bg);
  color: var(--sabor-color-action-primary-fg);
  border-color: var(--sabor-color-action-primary-border);
}
.btn--primary:hover { box-shadow: inset 0 0 0 2px var(--sabor-color-brand-burgundy); }
.btn--primary:active { transform: scale(0.99); }
.btn--secondary {
  background: transparent;
  color: var(--sabor-color-brand-burgundy);
  border-color: var(--sabor-color-brand-burgundy);
}
.btn--secondary:hover { background: var(--sabor-color-neutral-100); }
.btn--ghost {
  background: transparent;
  color: var(--sabor-color-brand-burgundy);
  padding-inline: 12px;
}
.btn--ghost:hover { background: var(--sabor-color-neutral-100); }
.btn--icon {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--sabor-radius-pill);
  border-color: var(--sabor-color-border-control);
  background: var(--sabor-color-bg-surface);
  color: var(--sabor-color-brand-burgundy);
}
.btn--icon:hover { background: var(--sabor-color-neutral-100); }
.btn[aria-pressed="true"].btn--icon {
  background: var(--sabor-color-brand-burgundy);
  border-color: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--sabor-color-action-disabled-bg);
  color: var(--sabor-color-action-disabled-fg);
  border-color: var(--sabor-color-action-disabled-border);
  box-shadow: none;
  cursor: not-allowed;
}
.btn[aria-busy="true"] { cursor: progress; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
}
.link-arrow .icon { transition: transform var(--sabor-motion-duration-normal) var(--sabor-motion-easing-standard); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover .icon { transform: translateX(3px); }

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--sabor-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.badge .icon { width: 14px; height: 14px; }
.badge--featured { background: var(--sabor-color-brand-yellow); color: var(--sabor-color-brand-burgundy); }
.badge--demo {
  background: transparent;
  color: var(--sabor-color-brand-burgundy);
  border: 1px dashed currentColor;
}
.on-dark .badge--demo, .card--overlay .badge--demo { color: var(--sabor-color-brand-cream); }
.badge--sabor {
  background: var(--sabor-color-brand-yellow);
  color: var(--sabor-color-brand-burgundy);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}

/* ---------- Media y placeholder editorial ---------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--sabor-radius-lg);
  aspect-ratio: var(--ratio, var(--blog-card-media-ratio));
  background: var(--sabor-color-neutral-100);
  container-type: inline-size;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sabor-motion-duration-slow) var(--sabor-motion-easing-standard);
}
.ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(10px, 5cqi, 24px);
  background: var(--sabor-color-neutral-100);
  color: var(--sabor-color-brand-burgundy);
}
.ph--yellow { background: var(--sabor-color-brand-yellow); }
.ph--wine { background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); }
.ph__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: clamp(0.6875rem, 3.2cqi, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ph__label .icon { width: 14px; height: 14px; }
.ph__word {
  font-size: clamp(1.5rem, 17cqi, 7rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  overflow-wrap: anywhere;
}
.media--compact .ph__label { display: none; }
.media--compact .ph { padding: clamp(6px, 9cqi, 14px); }
.media--compact .ph__word { font-size: clamp(0.6875rem, 15cqi, 1.75rem); overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }

/* ---------- Cards de artículo ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.card__title { font-size: 1.1875rem; line-height: 1.25; }
.card__title a { text-decoration: none; }
/* Toda la card es clickeable sin anidar links */
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--sabor-radius-lg); }
.card__title a:focus-visible { outline: none; }
.card:has(.card__title a:focus-visible) {
  outline: var(--sabor-component-focus-width) solid var(--sabor-component-focus-color);
  outline-offset: 4px;
  border-radius: var(--sabor-radius-lg);
}
.card__category {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card__deck { color: var(--sabor-color-text-secondary); font-size: 0.9375rem; }
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.card__meta { font-size: 0.8125rem; color: var(--sabor-color-text-secondary); }
.card__arrow { transition: transform var(--sabor-motion-duration-normal) var(--sabor-motion-easing-standard); }
.card__badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.card:hover .media img { transform: scale(1.02); }
.card:hover .card__arrow { transform: translateX(3px); }
.card:hover .card__title a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* Variante editorial-secondary: superficie blanca */
.card--surface {
  background: var(--sabor-color-bg-surface);
  border: 1px solid var(--sabor-color-border-subtle);
  border-radius: var(--sabor-radius-lg);
  padding: 12px 12px 20px;
  box-shadow: var(--sabor-elevation-card);
  transition: box-shadow var(--sabor-motion-duration-normal) var(--sabor-motion-easing-standard);
}
.card--surface .card__body { padding: 4px 8px 0; }
.card--surface:hover { box-shadow: var(--blog-card-shadow), 0 2px 0 0 var(--sabor-color-neutral-200); }
.card--surface .media { border-radius: var(--sabor-radius-md); }

/* Variante featured-overlay */
.card--overlay {
  overflow: hidden;
  border-radius: var(--sabor-radius-xl);
  min-height: 420px;
  justify-content: flex-end;
  color: var(--sabor-color-brand-cream);
  background: var(--sabor-color-brand-burgundy);
}
.card--overlay .media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.card--overlay .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(88 2 27 / 0) 30%, rgb(88 2 27 / 0.55) 55%, rgb(37 23 29 / 0.92) 100%);
}
.card--overlay .card__body {
  flex: 0 0 auto;
  position: relative;
  padding: clamp(24px, 4vw, 48px);
  gap: 14px;
  max-width: 720px;
}
.card--overlay .card__title { font-size: var(--blog-title-card-lg); line-height: 1.05; letter-spacing: -0.02em; }
.card--overlay .card__deck { color: rgb(254 255 237 / 0.88); font-size: 1.0625rem; }
.card--overlay .card__meta { color: rgb(254 255 237 / 0.8); }
.card--overlay .card__badges--inline { position: static; }
.card--overlay .card__go {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sabor-color-brand-cream);
  color: var(--sabor-color-brand-burgundy);
  flex-shrink: 0;
  transition: transform var(--sabor-motion-duration-normal) var(--sabor-motion-easing-standard);
}
.card--overlay:hover .card__go { transform: translateX(3px); }
.card--overlay .card__title a::after { border-radius: var(--sabor-radius-xl); }
.card--overlay:has(.card__title a:focus-visible) { outline-color: var(--sabor-color-brand-burgundy); }
.card--overlay .ph { justify-content: flex-start; }

/* Variante compact (fila corta) */
.card--compact { flex-direction: row; align-items: center; gap: 16px; }
.card--compact .media { width: 112px; flex-shrink: 0; --ratio: 1 / 1; border-radius: var(--sabor-radius-md); }
.card--compact .card__title { font-size: 1.0625rem; }
.card--compact .card__body { gap: 6px; }

/* Variante horizontal-result (búsqueda) */
.card--row {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sabor-color-border-subtle);
}
.card--row .media { --ratio: 4 / 3; border-radius: var(--sabor-radius-md); }
.card--row .card__title { font-size: 1.25rem; }
.card--row .card__title a::after { border-radius: var(--sabor-radius-md); }
.card--row .card__deck { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card--row mark { background: var(--sabor-color-brand-yellow); color: inherit; padding: 0 2px; border-radius: 3px; }
@media (max-width: 639px) {
  .card--row { grid-template-columns: 96px 1fr; gap: 14px; }
  .card--row .card__arrow { display: none; }
  .card--row .card__title { font-size: 1.0625rem; }
  .card--row .card__deck { display: none; }
}

/* ---------- Chips y TopicNav ---------- */
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--sabor-component-chip-height);
  padding: 0 16px;
  border: 1px solid var(--sabor-color-border-control);
  border-radius: var(--sabor-radius-pill);
  background: var(--sabor-color-bg-surface);
  color: var(--sabor-color-text-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard),
              border-color var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard);
}
.chip:hover { border-color: var(--sabor-color-brand-burgundy); }
.chip .icon { width: 16px; height: 16px; }
.chip__check { display: none; }
.chip[aria-pressed="true"],
.chip[aria-current="true"] {
  background: var(--sabor-component-chip-selected-bg);
  border-color: var(--sabor-component-chip-selected-border);
  color: var(--sabor-component-chip-selected-fg);
}
.chip[aria-pressed="true"] .chip__check { display: inline-block; }
.chip__count {
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--sabor-radius-pill);
  background: var(--sabor-color-neutral-100);
  color: var(--sabor-color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.chip[aria-pressed="true"] .chip__count { background: rgb(254 255 237 / 0.18); color: var(--sabor-color-brand-cream); }
.chip:disabled {
  background: var(--sabor-color-action-disabled-bg);
  color: var(--sabor-color-text-disabled);
  border-style: dashed;
  border-color: var(--sabor-color-neutral-300);
  cursor: not-allowed;
}
.chip--topic { background: transparent; }

/* En mobile los chips se desplazan en horizontal sin cortar el foco */
@media (max-width: 767px) {
  .chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--sabor-layout-gutter-mobile));
    padding: 6px var(--sabor-layout-gutter-mobile);
    scroll-padding-inline: var(--sabor-layout-gutter-mobile);
  }
  .chips--scroll::-webkit-scrollbar { display: none; }
  .chips--scroll > * { flex-shrink: 0; }
}

/* ---------- Search field ---------- */
.search { position: relative; width: 100%; }
.search__form { position: relative; }
.search__field {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 0 6px 0 20px;
  background: var(--sabor-color-bg-surface);
  border: 1px solid var(--sabor-color-border-control);
  border-radius: var(--sabor-radius-pill);
  box-shadow: var(--sabor-elevation-card);
  transition: border-color var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard);
}
.search__field:focus-within {
  border-color: var(--sabor-color-brand-burgundy);
  box-shadow: 0 0 0 1px var(--sabor-color-brand-burgundy), var(--sabor-elevation-card);
}
.search__field > .icon { color: var(--sabor-color-text-secondary); }
.search__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  font-size: 1.0625rem;
}
.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--sabor-color-text-placeholder); opacity: 1; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__clear { border: 0; width: 40px; min-height: 40px; }
.search__submit { min-height: 44px; border-radius: var(--sabor-radius-pill); }
.search--hero .search__field { min-height: 64px; }
.search--results .search__field { min-height: 64px; }
.search--results .search__input { font-size: 1.25rem; }
.search__status {
  position: absolute;
  right: 112px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: var(--sabor-color-text-secondary);
}

.suggest {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: var(--sabor-z-index-dropdown);
  padding: 8px;
  list-style: none;
  background: var(--sabor-color-bg-elevated);
  border: 1px solid var(--sabor-color-border-subtle);
  border-radius: var(--sabor-radius-lg);
  box-shadow: var(--sabor-elevation-popover);
  max-height: 340px;
  overflow-y: auto;
}
.suggest__head {
  padding: 6px 12px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sabor-color-text-secondary);
}
.suggest__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--sabor-radius-md);
  cursor: pointer;
}
.suggest__opt[aria-selected="true"] {
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
}
.suggest__opt:hover:not([aria-selected="true"]) { background: var(--sabor-color-neutral-100); }
.suggest__kind { font-size: 0.8125rem; opacity: 0.8; }
.suggest__opt strong { font-weight: 600; }

@media (max-width: 639px) {
  .search__submit .search__submit-label { display: none; }
  .search__submit { width: 44px; padding: 0; }
  .search__status { display: none; }
}

/* ---------- Restaurant mention ---------- */
.rest {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  background: var(--sabor-color-bg-surface);
  border: 1px solid var(--sabor-color-border-subtle);
  border-radius: var(--sabor-radius-lg);
  box-shadow: var(--sabor-elevation-card);
  min-width: 0;
}
.rest__top { display: flex; gap: 16px; align-items: flex-start; }
.rest__top .media { width: 84px; flex-shrink: 0; --ratio: 1 / 1; border-radius: var(--sabor-radius-md); }
.rest__name { font-size: 1.1875rem; line-height: 1.2; }
.rest__where { font-size: 0.875rem; color: var(--sabor-color-text-secondary); margin-top: 4px; }
.rest__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.875rem; list-style: none; }
.rest__facts li { display: inline-flex; gap: 6px; align-items: center; }
.rest__facts .icon { width: 16px; height: 16px; color: var(--sabor-color-text-secondary); }
.rest__dishes { font-size: 0.875rem; color: var(--sabor-color-text-secondary); }
.rest__dishes strong { color: var(--sabor-color-text-primary); font-weight: 600; }
.rest__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--sabor-color-border-subtle); }
.rest__badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Newsletter ---------- */
.newsletter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--sabor-radius-xl);
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
  overflow: hidden;
}
.newsletter__art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  padding: 12%;
  border-radius: 50%;
  background: var(--sabor-color-brand-yellow);
}
.newsletter__art img { width: 100%; height: auto; }
.newsletter__body { display: grid; gap: 14px; max-width: 620px; }
.newsletter__body .eyebrow { color: var(--sabor-color-brand-yellow); }
.newsletter__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.05; }
.newsletter__deck { color: rgb(254 255 237 / 0.86); font-size: 1.0625rem; }
.newsletter__form { display: grid; gap: 8px; margin-top: 6px; }
.newsletter__label { font-size: 0.875rem; font-weight: 500; }
.newsletter__row { display: flex; gap: 8px; }
.newsletter__input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: var(--sabor-radius-md);
  background: var(--sabor-color-brand-cream);
  color: var(--sabor-color-brand-burgundy);
  font-size: 1rem;
}
.newsletter__input::placeholder { color: var(--sabor-color-neutral-500); opacity: 1; }
.newsletter__input[aria-invalid="true"] { border-color: var(--sabor-color-brand-yellow); }
.newsletter .btn--primary { min-height: 52px; }
.newsletter__msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--sabor-radius-md);
  background: var(--sabor-color-brand-cream);
  color: var(--sabor-color-status-error-fg);
  font-size: 0.9375rem;
}
.newsletter__msg .icon { margin-top: 2px; }
.newsletter__note { font-size: 0.8125rem; color: rgb(254 255 237 / 0.75); }
.newsletter__success { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--sabor-radius-lg); background: rgb(254 255 237 / 0.08); border: 1px solid rgb(254 255 237 / 0.25); }
.newsletter__success strong { font-size: 1.25rem; font-weight: 600; }
.newsletter__success .btn { justify-self: start; color: var(--sabor-color-brand-cream); }
.newsletter__success .btn:hover { background: rgb(254 255 237 / 0.1); }

@media (max-width: 767px) {
  .newsletter { grid-template-columns: 1fr; }
  .newsletter__art { max-width: 150px; margin: 0; }
  .newsletter__row { flex-direction: column; }
  .newsletter .btn--primary { width: 100%; }
}

/* ---------- Estados: skeleton, vacío, error ---------- */
.skeleton { display: grid; gap: 12px; }
.skeleton__media, .skeleton__line {
  border-radius: var(--sabor-radius-md);
  background: linear-gradient(90deg, var(--sabor-color-neutral-100) 0%, var(--sabor-color-neutral-50) 40%, var(--sabor-color-neutral-100) 80%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton__media { aspect-ratio: var(--blog-card-media-ratio); border-radius: var(--sabor-radius-lg); }
.skeleton__line { height: 14px; }
.skeleton__line--title { height: 22px; width: 85%; }
.skeleton__line--short { width: 40%; }
.skeleton--row { grid-template-columns: 148px 1fr; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--sabor-color-border-subtle); }
.skeleton--row .skeleton__media { aspect-ratio: 4 / 3; border-radius: var(--sabor-radius-md); }
@keyframes shimmer { to { background-position: -200% 0; } }

.state {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(32px, 6vw, 64px) 20px;
  text-align: center;
  border: 1px dashed var(--sabor-color-neutral-300);
  border-radius: var(--sabor-radius-xl);
  background: var(--sabor-color-bg-surface);
}
.state img { width: 160px; height: auto; }
.state__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.state__text { max-width: 520px; color: var(--sabor-color-text-secondary); }
.state__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.state--error { border-style: solid; border-color: var(--sabor-color-status-error-border); background: var(--sabor-color-status-error-bg); }
.state--error .state__title { color: var(--sabor-color-status-error-fg); display: inline-flex; gap: 10px; align-items: center; }

/* ---------- Breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 0.875rem; color: var(--sabor-color-text-secondary); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; opacity: 0.6; }
.crumbs a { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--sabor-color-text-primary); font-weight: 500; }

/* ---------- Toast ---------- */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: var(--sabor-z-index-toast);
  display: grid;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--sabor-radius-md);
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
  box-shadow: var(--sabor-elevation-modal);
  font-size: 0.9375rem;
  animation: toast-in var(--sabor-motion-duration-slow) var(--sabor-motion-easing-enter);
}
.toast .icon { color: var(--sabor-color-brand-yellow); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Layouts propios de cada template */

/* ================= Home ================= */
.home-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 32px;
  padding-top: clamp(32px, 6vw, 72px);
}
.home-hero__text { display: grid; gap: 22px; }
.home-hero__title { font-size: var(--blog-title-hero); line-height: 0.94; letter-spacing: -0.03em; }
.home-hero__accent {
  display: inline-block;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
  transform: rotate(-4deg);
  margin-left: 6px;
}
.home-hero__deck { max-width: 560px; }
.home-hero .search { max-width: 600px; }
.home-hero__art { display: grid; justify-items: center; }
.home-hero__art img { width: min(100%, 420px); height: auto; }
.home-chips { margin-top: clamp(28px, 4vw, 48px); }

.featured {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 24px;
}
.featured__side { display: grid; gap: 24px; }
.featured .card--overlay { min-height: 560px; }
.featured__side .card--surface .media { --ratio: 16 / 9; }

.latest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}

/* Entrada discreta al muro de notas (/blog/muro), al final de la lista de la portada */
.muro-tira {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 24px;
  border: 1px dashed var(--sabor-color-brand-burgundy);
  border-radius: var(--sabor-radius-lg);
}
.muro-tira__txt { display: grid; gap: 4px; min-width: 0; }
.muro-tira__title { font-size: 1.125rem; letter-spacing: -0.01em; }
.muro-tira__txt p { font-size: 0.9375rem; color: var(--sabor-color-text-secondary); }

/* Entrada al juego de la semana (/blog/juego), antes del contador de la portada. Sale solo si hay
   mazo para mostrar. El papel y el dial son los del juego (juego.css). */
.juego-banda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px clamp(24px, 5vw, 64px);
  padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px);
  border-radius: 28px;
  background: #F3EBCB;
}
.juego-banda__txt { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.juego-banda__ojo { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sabor-color-text-secondary); }
.juego-banda__t { font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem); line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.juego-banda__wm { display: inline-block; margin: 0 0.04em; vertical-align: -0.02em; color: var(--blog-signature); }
.juego-banda__wm svg { display: block; width: auto; height: 0.9em; }
.juego-banda__bajada { max-width: 34rem; font-size: 1rem; color: var(--sabor-color-text-secondary); }
.juego-banda__ir { margin-top: 6px; white-space: normal; }
.juego-banda__dial { width: clamp(120px, 14vw, 170px); height: auto; overflow: visible; }
.juego-banda__dial .dial__lleno { stroke-dashoffset: 50; }
@media (max-width: 599px) {
  .juego-banda { grid-template-columns: 1fr; }
  .juego-banda__dial { display: none; }
}

/* Entrada al plato del día (/blog/plato-del-dia), antes de la del juego de la semana. Sale solo si hay
   plato para mostrar. La pizarra vino del juego, con la foto del plato de hoy como una carta. */
.plato-banda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px clamp(24px, 5vw, 64px);
  padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 48px);
  border-radius: 28px;
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
  overflow: hidden;
}
.plato-banda__txt { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.plato-banda__ojo { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sabor-color-brand-yellow); }
.plato-banda__t { display: grid; gap: 6px; color: var(--sabor-color-brand-cream); }
.plato-banda__mano { font: 600 clamp(2.6rem, 1.6rem + 4vw, 4.4rem)/0.9 var(--blog-font-hand); }
.plato-banda__sub { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
.plato-banda__bajada { max-width: 34rem; font-size: 1rem; color: rgb(254 255 237 / 0.82); }
.plato-banda__ir { margin-top: 6px; white-space: normal; }
.plato-banda :focus-visible { outline: 3px solid var(--sabor-color-brand-yellow); outline-offset: 3px; }
.plato-banda__foto { display: block; width: clamp(200px, 26vw, 340px); border-radius: 18px; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 18px 36px rgb(0 0 0 / 0.35); background: #1E0309; }
.plato-banda__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 599px) {
  .plato-banda { grid-template-columns: 1fr; }
  .plato-banda__foto { order: -1; width: min(100%, 280px); }
}

/* De la nota a los juegos (founder, 12-nov-2026): la tarjeta al final de cada nota, antes de «Seguí el
   hilo» o de «Para seguir leyendo». Una sola tarjeta, con el borde de sticker de las piezas de la v2
   (borde vino y sombra dura abajo). El juego de la semana va en el papel de su banda, con el dial; el
   plato del día, en la pizarra vino, con la foto pegada como una figurita. Primero el celular. */
.nota-juego {
  display: grid;
  gap: 14px 16px;
  padding: 18px 18px 20px;
  border: 2px solid var(--sabor-color-brand-burgundy);
  border-radius: var(--sabor-radius-xl);
  box-shadow: 0 6px 0 var(--sabor-color-brand-burgundy);
  background: #F3EBCB;
  color: var(--sabor-color-brand-burgundy);
}
.nota-juego__txt { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.nota-juego__ojo { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sabor-color-text-secondary); }
.nota-juego__t { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.nota-juego__bajada { font-size: 1rem; line-height: 1.4; }
.nota-juego__ir { margin-top: 4px; white-space: normal; }
.nota-juego__dial { display: none; }
.nota-juego--juego { grid-template-columns: minmax(0, 1fr); }
.nota-juego--plato {
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  border-color: #1E0309;
  box-shadow: 0 6px 0 #1E0309;
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
}
.nota-juego--plato .nota-juego__ojo { color: var(--sabor-color-brand-yellow); }
.nota-juego--plato .nota-juego__t { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); }
.nota-juego__mano { display: block; font: 600 1.15em/0.95 var(--blog-font-hand); color: var(--sabor-color-brand-yellow); }
.nota-juego--plato .nota-juego__bajada { font-size: 0.9375rem; color: rgb(254 255 237 / 0.82); }
.nota-juego--plato .nota-juego__ir { grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 0; }
.nota-juego--plato :focus-visible { outline: 3px solid var(--sabor-color-brand-yellow); outline-offset: 3px; }
.nota-juego__foto {
  display: block;
  border: 3px solid var(--sabor-color-brand-cream);
  border-radius: 14px;
  overflow: hidden;
  transform: rotate(-3deg);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.35);
  background: #1E0309;
}
.nota-juego__foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 600px) {
  .nota-juego { padding: 24px 28px 26px; gap: 20px 28px; }
  .nota-juego--juego { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .nota-juego__dial { display: block; width: 128px; height: auto; overflow: visible; }
  .nota-juego__dial .dial__lleno { stroke-dashoffset: 50; }
  .nota-juego--plato { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto auto; }
  .nota-juego--plato .nota-juego__foto { grid-row: 1 / span 2; }
  .nota-juego--plato .nota-juego__foto img { aspect-ratio: 4 / 3; }
  .nota-juego--plato .nota-juego__ir { grid-column: 2; justify-self: start; align-self: start; }
}
/* En la v2 los links del texto llevan subrayado: el botón va sin él */
.v2 .nota-juego a.btn { text-decoration: none; }
.v2 .v2-end > .nota-juego { margin-top: 2em; }
.aviso-plato__cerrar .icon { width: 22px; height: 22px; stroke-width: 2.25; }

/* El aviso del plato del día (lo muestra js/aviso-plato.js): una barra chica abajo, nunca modal. Deja
   libre la barra del navegador (safe-area) y, mientras está, el final de la página suma su alto abajo
   para que nada quede tapado. En la compu ancha es una tarjeta en la esquina, al costado del texto. */
.aviso-plato {
  position: fixed;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  padding: 8px 4px 8px 8px;
  border: 2px solid var(--sabor-color-brand-burgundy);
  border-radius: 18px;
  background: var(--sabor-color-brand-cream);
  color: var(--sabor-color-brand-burgundy);
  box-shadow: 0 4px 0 var(--sabor-color-brand-burgundy), 0 14px 30px -10px rgb(30 3 9 / 0.45);
  font-size: 0.9375rem;
  line-height: 1.25;
}
.aviso-plato[hidden] { display: none; }
.aviso-plato__foto { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; transform: rotate(-3deg); }
.aviso-plato__t { flex: 1; min-width: 0; font-weight: 600; }
.aviso-plato__ojo { display: block; font: 600 1.0625rem/1 var(--blog-font-hand); color: var(--blog-signature, var(--sabor-color-brand-red)); }
.aviso-plato__ir {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--sabor-color-brand-burgundy);
  border-radius: 999px;
  background: var(--sabor-color-brand-yellow);
  color: var(--sabor-color-brand-burgundy);
  font-weight: 700;
  text-decoration: none;
}
.aviso-plato__ir:hover { background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); }
.aviso-plato__cerrar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.aviso-plato__cerrar:hover { background: rgb(88 2 27 / 0.08); }
.aviso-plato :focus-visible { outline: 3px solid var(--sabor-color-brand-burgundy); outline-offset: 2px; }
.con-aviso-plato body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.app .aviso-plato { bottom: calc(10px + var(--app-barra-h)); }
.app.con-aviso-plato body { padding-bottom: calc(84px + var(--app-barra-h)); }
@media (min-width: 1240px) {
  .aviso-plato {
    right: 16px;
    bottom: 16px;
    left: auto;
    flex-wrap: wrap;
    width: 212px;
    padding: 12px;
  }
  .aviso-plato__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; transform: none; }
  .aviso-plato__t { flex: 1 1 100%; }
  .aviso-plato__ir { flex: 1; justify-content: center; }
  .aviso-plato__cerrar { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; background: var(--sabor-color-brand-cream); }
  .con-aviso-plato body { padding-bottom: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .aviso-plato:not([hidden]) { animation: aviso-plato-sube 0.35s var(--sabor-motion-easing-standard, ease) both; }
}
@keyframes aviso-plato-sube { from { opacity: 0; transform: translateY(16px); } }

/* El dial del juego (la banda de la portada y el medidor de /blog/juego) */
.dial__cara { fill: #FCF7E3; stroke: var(--sabor-color-brand-burgundy); stroke-width: 4; }
.dial__pista, .dial__lleno { fill: none; stroke-width: 6; stroke-linecap: butt; }
.dial__pista { stroke: rgb(88 2 27 / 0.12); }
.dial__lleno { stroke: var(--blog-signature); stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.dial__marcas line { stroke: var(--sabor-color-brand-burgundy); stroke-width: 2.5; stroke-linecap: round; }
.dial__txt { font: 600 9px var(--blog-font-ui); fill: var(--sabor-color-brand-burgundy); }
.dial__aguja { transform-origin: 60px 60px; }
.dial__aguja line { stroke: var(--blog-signature); stroke-width: 4; stroke-linecap: round; }
.dial__centro { fill: var(--sabor-color-brand-burgundy); }

.dyn-palermo {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 40px;
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--sabor-radius-xl);
  background: var(--sabor-color-bg-surface);
  border: 1px solid var(--sabor-color-border-subtle);
}
.dyn-palermo .section-head { flex-direction: column; align-items: flex-start; margin: 0; }
.dyn-palermo__list { display: grid; gap: 18px; list-style: none; }
.dyn-palermo__list li + li { padding-top: 18px; border-top: 1px solid var(--sabor-color-border-subtle); }

.dish-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.dish-grid .media { --ratio: 4 / 5; }

.topic-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.topic-tile {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 24px;
  border-radius: var(--sabor-radius-lg);
  border: 1px solid var(--sabor-color-brand-burgundy);
  text-decoration: none;
  transition: background var(--sabor-motion-duration-normal) var(--sabor-motion-easing-standard);
}
.topic-tile:hover { background: var(--sabor-color-brand-yellow); }
.topic-tile__name { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.topic-tile__meta { font-size: 0.875rem; color: var(--sabor-color-text-secondary); }
.topic-tile .icon { position: absolute; right: 20px; top: 24px; }

@media (max-width: 1023px) {
  .home-hero { grid-template-columns: 1fr 0.6fr; }
  .featured { grid-template-columns: 1fr 1fr; }
  .featured > .card--overlay { grid-column: 1 / -1; min-height: 460px; }
  .featured__side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dyn-palermo { grid-template-columns: 1fr; gap: 24px; }
  .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .home-hero { grid-template-columns: 1fr; gap: 8px; position: relative; }
  .home-hero__art { position: absolute; top: 16px; right: 0; z-index: -1; opacity: 1; }
  .home-hero__art img { width: 132px; }
  .home-hero__text { padding-top: 96px; }
  .featured__side { grid-template-columns: 1fr; }
  .featured .card--overlay { min-height: 440px; }
  .latest-grid { grid-template-columns: 1fr; }
  .topic-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .dish-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ================= Encabezado de página (archivo y búsqueda) ================= */
.page-head { display: grid; gap: 16px; padding-top: clamp(32px, 5vw, 64px); }
.page-head__title { font-size: var(--blog-title-page); line-height: 1; letter-spacing: -0.025em; }
.page-head .lead { max-width: 640px; }
.page-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.page-tools .search { max-width: 760px; }
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  min-height: 44px;
}
.results-bar__count { font-weight: 500; }

/* ================= Todos los artículos ================= */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  margin-top: 24px;
  list-style: none;
}
/* Sin anclaje de scroll: al cargar más, la vista queda quieta y las notas nuevas aparecen abajo */
[data-results] { overflow-anchor: none; }
.archive-more { display: grid; justify-items: center; gap: 10px; margin-top: 48px; }
.archive-more__info { font-size: 0.875rem; color: var(--sabor-color-text-secondary); }
@media (max-width: 1023px) { .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .archive-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ================= Hub ================= */
.hub-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding-top: 24px;
}
.hub-hero__text { display: grid; gap: 18px; padding-top: clamp(8px, 2vw, 32px); }
.hub-hero__title { font-size: clamp(3.5rem, 2rem + 6vw, 7rem); line-height: 0.9; letter-spacing: -0.035em; }
.hub-hero__accent { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); display: inline-block; transform: rotate(-5deg); margin-left: 4px; }
.hub-hero__desc { display: grid; gap: 12px; color: var(--sabor-color-text-secondary); }
.hub-hero__desc p:first-child { color: var(--sabor-color-text-primary); font-size: 1.125rem; }
.hub-hero__stats { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.9375rem; font-weight: 500; list-style: none; }
.hub-hero__figure { margin: 0; display: grid; gap: 8px; }
.hub-hero__figure .media { --ratio: 4 / 5; border-radius: var(--sabor-radius-xl); max-height: 680px; }
.hub-hero__figure figcaption { font-size: 0.8125rem; color: var(--sabor-color-text-secondary); }

.hub-subnav {
  position: sticky;
  top: var(--blog-header-height);
  z-index: 5;
  margin-top: 40px;
  padding: 12px 0;
  background: rgb(254 255 237 / 0.96);
  border-bottom: 1px solid var(--sabor-color-border-subtle);
}
.hub-subnav__inner { display: flex; align-items: center; gap: 16px; }
.hub-subnav__label { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.hub-subnav .chips { flex: 1; }

.hub-featured {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
  gap: 24px;
}
.hub-featured .card--overlay { min-height: 480px; }

.hub-jump { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.9375rem; list-style: none; }
.hub-jump a { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; }
.hub-jump a:hover { text-decoration: underline; text-underline-offset: 4px; }

.intent { scroll-margin-top: calc(var(--blog-header-height) + 90px); }
.intent + .intent { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--sabor-color-border-subtle); }
.intent__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }

.rest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; }
.related-topics { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }

@media (max-width: 1023px) {
  .hub-hero { grid-template-columns: 1fr; }
  .hub-hero__figure .media { --ratio: 16 / 9; }
  .hub-featured { grid-template-columns: 1fr 1fr; }
  .hub-featured > :first-child { grid-column: 1 / -1; }
  .intent__grid, .rest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hub-subnav__label { display: none; }
  .hub-featured { grid-template-columns: 1fr; }
  .hub-featured .card--overlay { min-height: 420px; }
  .intent__grid, .rest-grid { grid-template-columns: 1fr; }
}

/* ================= Artículo ================= */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--sabor-z-index-sticky) + 1);
  height: 4px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: var(--sabor-color-brand-burgundy);
}
.article-head { display: grid; gap: 20px; padding-top: 24px; }
.article-head__title { font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.75rem); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; }
.article-head__deck { max-width: 720px; }
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--sabor-color-border-subtle);
  border-bottom: 1px solid var(--sabor-color-border-subtle);
}
.article-meta__info { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9375rem; list-style: none; align-items: center; }
.article-meta__info li { display: inline-flex; align-items: center; gap: 6px; }
.article-meta__info .icon { width: 16px; height: 16px; color: var(--sabor-color-text-secondary); }
.article-meta__actions { display: flex; gap: 8px; align-items: center; }
.article-meta__status { font-size: 0.875rem; color: var(--sabor-color-text-secondary); min-height: 1em; }

.article-hero { margin: 32px auto 0; display: grid; gap: 8px; }
.article-hero .media { --ratio: 16 / 9; border-radius: var(--sabor-radius-xl); }
.article-hero figcaption { font-size: 0.8125rem; color: var(--sabor-color-text-secondary); }

.article-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--blog-reading-max)) 1fr;
  gap: 40px;
  margin-top: 48px;
}
.article-body { grid-column: 2; min-width: 0; font-size: var(--blog-reading-size); line-height: var(--blog-reading-leading); }
.article-toc {
  grid-column: 1;
  justify-self: start;
  position: sticky;
  top: calc(var(--blog-header-height) + 32px);
  align-self: start;
  max-width: 220px;
}
.article-toc h2 { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.article-toc ol { list-style: none; display: grid; gap: 2px; border-left: 2px solid var(--sabor-color-border-subtle); }
.article-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 0.875rem; text-decoration: none; color: var(--sabor-color-text-secondary); }
.article-toc a:hover { color: var(--sabor-color-text-primary); }
.article-toc a[aria-current="true"] { border-left-color: var(--sabor-color-brand-burgundy); color: var(--sabor-color-text-primary); font-weight: 600; }
@media (max-width: 1279px) {
  .article-layout { grid-template-columns: minmax(0, var(--blog-reading-max)); justify-content: center; }
  .article-body { grid-column: 1; }
  .article-toc { display: none; }
}

/* Bloques */
.article-body > * + * { margin-top: 1.2em; }
.b-intro { font-size: 1.2em; line-height: 1.5; font-weight: 500; }
.b-heading { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); line-height: 1.15; margin-top: 2em !important; scroll-margin-top: calc(var(--blog-header-height) + 24px); }
.b-figure { margin-inline: 0; display: grid; gap: 8px; }
.b-figure figcaption, .b-gallery figcaption { font-size: 0.875rem; line-height: 1.45; color: var(--sabor-color-text-secondary); }
.b-quote {
  margin: 2em 0 !important;
  padding: 8px 0 8px 64px;
  position: relative;
}
.b-quote img { position: absolute; left: 0; top: 6px; width: 40px; height: auto; }
.b-quote p { font-size: 1.5em; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.b-quote footer { margin-top: 12px; font-size: 0.875rem; color: var(--sabor-color-text-secondary); }
.b-tip {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  border-radius: var(--sabor-radius-lg);
  background: var(--sabor-color-brand-yellow);
  color: var(--sabor-color-brand-burgundy);
}
.b-tip__label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.b-tip p { font-size: 1.0625em; }
.b-list__title { font-size: 1.125em; margin-bottom: 12px; }
.b-list ol, .b-list ul { display: grid; gap: 12px; padding-left: 0; list-style: none; }
.b-list li { position: relative; padding-left: 44px; }
.b-list ol { counter-reset: n; }
.b-list ol li { counter-increment: n; }
.b-list ol li::before {
  content: counter(n);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
  font-size: 0.8125rem; font-weight: 600; line-height: 1;
}
.b-list ul li::before { content: ""; position: absolute; left: 10px; top: 0.7em; width: 10px; height: 10px; border-radius: 50%; background: var(--sabor-color-brand-burgundy); }
.b-rest { font-size: 1rem; line-height: 1.5; }
.b-rest .rest__note { font-size: 1.0625rem; }
.b-rest .rest__vibe { font-size: 0.875rem; font-style: normal; }
.b-map {
  position: relative;
  margin-inline: 0;
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: var(--sabor-radius-lg);
  border: 1px solid var(--sabor-color-border-subtle);
  background:
    radial-gradient(circle at 1px 1px, var(--sabor-color-neutral-300) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--sabor-color-neutral-50);
  font-size: 1rem;
}
.b-map__title { font-size: 1.125rem; }
.b-map ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.b-map li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--sabor-radius-pill); background: var(--sabor-color-bg-surface); border: 1px solid var(--sabor-color-border-subtle); font-size: 0.875rem; }
.b-map li .icon { width: 16px; height: 16px; }
.b-map__note { font-size: 0.875rem; color: var(--sabor-color-text-secondary); }
.b-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-inline: 0; }
.b-gallery figure { margin: 0; display: grid; gap: 6px; }
.b-gallery .media { --ratio: 4 / 5; border-radius: var(--sabor-radius-md); }
.b-callout {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--sabor-radius-md);
  border: 1px solid var(--sabor-color-border-control);
  background: var(--sabor-color-bg-surface);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.b-callout strong { display: block; margin-bottom: 2px; }
.b-sabor {
  display: grid;
  gap: 12px;
  padding: 22px 24px;
  border-radius: var(--sabor-radius-lg);
  border: 2px solid var(--sabor-color-brand-burgundy);
  font-size: 1rem;
}
.b-sabor__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.b-sabor__name { font-size: 1.25rem; }
.b-sabor ol { display: grid; gap: 4px; padding-left: 20px; color: var(--sabor-color-text-secondary); }
.b-sabor .btn { justify-self: start; }
.b-cta {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 24px;
  padding: 28px;
  margin-top: 2.4em !important;
  border-radius: var(--sabor-radius-xl);
  background: var(--sabor-color-bg-surface);
  border: 1px solid var(--sabor-color-border-subtle);
  box-shadow: var(--sabor-elevation-card);
  font-size: 1rem;
}
.b-cta img { width: 140px; height: auto; }
.b-cta__body { display: grid; gap: 10px; }
.b-cta__title { font-size: 1.625rem; }
.b-cta .btn { justify-self: start; }
@media (max-width: 639px) {
  .b-cta { grid-template-columns: 1fr; }
  .b-cta img { width: 96px; }
  .b-gallery { gap: 8px; }
  .b-quote { padding-left: 48px; }
  .b-quote img { width: 30px; }
}

.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }
@media (max-width: 1023px) { .related-grid { grid-template-columns: 1fr 1fr; } .related-grid > :last-child { display: none; } }
@media (max-width: 639px) { .related-grid { grid-template-columns: 1fr; } .related-grid > :last-child { display: flex; } }

/* ================= Búsqueda ================= */
.search-page .page-head__title q { quotes: "“" "”"; }
.results { list-style: none; margin-top: 8px; }
.search-empty__routes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; }
.search-tips { margin-top: 40px; display: grid; gap: 14px; }
.search-tips h2 { font-size: 1.25rem; }

/* Tabla comparativa (bloque "tabla"; auditoría editorial, 5-nov-2026). Se desliza dentro de su caja. */
.b-tabla { margin: 1.75em 0; }
.b-tabla__t { margin-bottom: 0.6em; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.b-tabla__scroll { overflow-x: auto; border-radius: var(--sabor-radius-md); border: 1px solid color-mix(in srgb, var(--sabor-color-brand-burgundy) 18%, transparent); background: var(--sabor-color-brand-cream); }
.b-tabla__scroll:focus-visible { outline: 2px solid var(--sabor-color-brand-burgundy); outline-offset: 2px; }
.b-tabla table { width: 100%; min-width: calc(var(--cols, 3) * 110px); border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
.b-tabla th, .b-tabla td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--sabor-color-brand-burgundy) 12%, transparent); }
.b-tabla thead th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--sabor-color-brand-yellow); color: var(--sabor-color-brand-burgundy); }
.b-tabla tbody th { font-weight: 600; }
.b-tabla tbody tr:last-child th, .b-tabla tbody tr:last-child td { border-bottom: 0; }
.b-tabla__src { margin-top: 0.5em; font-size: 0.8125rem; color: var(--sabor-color-text-secondary); }
.b-tabla__hint { display: none; margin-top: 0.4em; font-size: 0.8125rem; color: var(--sabor-color-text-secondary); }
@media (max-width: 640px) { .b-tabla--ancha .b-tabla__hint { display: block; } }

/* Capa del sitio real (saborarg.com/blog): lo que el mockup resolvía con JavaScript */

/* Menú móvil sin JavaScript: <details> */
.site-menu { display: none; position: relative; }
.site-menu > summary { list-style: none; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: var(--sabor-z-index-dropdown);
  display: grid;
  gap: 4px;
  min-width: 240px;
  padding: 12px;
  background: var(--sabor-color-bg-elevated);
  border: 1px solid var(--sabor-color-border-subtle);
  border-radius: var(--sabor-radius-lg);
  box-shadow: var(--sabor-elevation-popover);
}
.site-menu__panel a:not(.btn) { display: flex; align-items: center; min-height: 48px; padding: 0 8px; font-size: 1.0625rem; font-weight: 500; text-decoration: none; }
.site-menu__panel .btn { margin-top: 8px; }
@media (max-width: 899px) {
  .site-menu { display: block; }
}

/* Respuesta corta arriba de la nota: lo que levantan buscadores y asistentes */
.b-answer {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border-radius: var(--sabor-radius-lg);
  border: 2px solid var(--sabor-color-brand-burgundy);
  background: var(--sabor-color-bg-surface);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Preguntas frecuentes */
.b-faq { display: grid; gap: 10px; }
.b-faq__item {
  border: 1px solid var(--sabor-color-border-subtle);
  border-radius: var(--sabor-radius-md);
  background: var(--sabor-color-bg-surface);
  padding: 0 18px;
}
.b-faq__item summary { cursor: pointer; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.b-faq__item summary::-webkit-details-marker { display: none; }
.b-faq__item summary::after { content: "+"; font-weight: 600; font-size: 1.25rem; line-height: 1; }
.b-faq__item[open] summary::after { content: "–"; }
.b-faq__item h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.b-faq__item p { padding-bottom: 16px; font-size: 1rem; }

/* Datos y fuentes */
.b-sources { font-size: 0.9375rem; line-height: 1.55; }
.b-sources ol { display: grid; gap: 8px; padding-left: 20px; margin-top: 12px; }
.b-sources a { text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Links dentro del cuerpo */
.article-body p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Consentimiento propio del newsletter */
.newsletter__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: rgb(254 255 237 / 0.86); }
.newsletter__consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--sabor-color-brand-yellow); flex-shrink: 0; }
.newsletter p .btn { margin-top: 8px; }

/* Portada con una sola nota: la destacada ocupa el ancho */
.home-hero + .section--tight .card--overlay { min-height: 480px; }
.card--overlay .media picture, .media picture { display: contents; }
/* La mascota de la portada: en el celular (132 px) baja una copia webp de 400 px, no el PNG de 770 */
.home-hero__art picture { display: contents; }
.article-hero figcaption a { color: inherit; }
.b-cta img { width: 120px; }
.results .card--row { grid-template-columns: 1fr; }
.b-lugar { gap: 10px; } .b-lugar .rest__note { font-size: 1.0625rem; line-height: 1.55; } .b-lugar a { text-underline-offset: 3px; }

/* ---------- El pie de página: el pie como telón (todas las páginas salvo /blog/muro) ----------
   La página (main) queda arriba, con su fondo, las esquinas de abajo redondeadas y una sombra
   suave. El pie, vino, va atrás: js/pie.js le pone .is-telon (sticky abajo) solo si entra entero
   debajo del encabezado; si no, o sin JavaScript, es un pie común. Colores de la marca: vino de
   fondo, crema el texto, amarillo los acentos. Ver blog/LEEME.md, «El pie de página». */
:root { --pie-r: clamp(24px, 3vw, 40px); }

.pie {
  position: relative;
  z-index: 0;
  padding-top: clamp(32px, 4vw, 48px);
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
  overflow: hidden;
}
.pie.is-telon { position: sticky; bottom: 0; }

@supports selector(:has(a)) {
  body:has(> .pie) > main {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(56px, 7vw, 104px);
    background: var(--sabor-color-bg-canvas);
    border-radius: 0 0 var(--pie-r) var(--pie-r);
    box-shadow: 0 22px 44px -6px rgb(30 3 9 / 0.4);
  }
  /* El vino sube debajo de las esquinas redondeadas */
  .pie { margin-top: calc(-1 * var(--pie-r)); padding-top: calc(var(--pie-r) + clamp(28px, 4vw, 48px)); }
}

.pie__in { display: grid; gap: 20px; align-items: start; }

/* La firma: la mascota en un círculo crema y el lema */
.pie__firma { display: flex; align-items: center; gap: 14px; }
.pie__sello { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--sabor-color-brand-cream); }
.pie__sello img { width: 38px; height: auto; }
.pie__lema { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.pie__lema span { display: block; margin-top: 4px; font: 600 1.15em/1 var(--blog-font-hand); letter-spacing: 0; color: var(--sabor-color-brand-yellow); }

/* Newsletter: el formulario (con BLOG_NEWSLETTER=on) o la invitación a la lista de espera */
.pie__news { display: grid; gap: 8px; max-width: 440px; }
.pie__news-t { font-size: 1.0625rem; font-weight: 600; }
.pie__news-txt { font-size: 0.9375rem; color: rgb(254 255 237 / 0.82); }
.pie__news-txt a { color: var(--sabor-color-brand-yellow); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.pie__fila { display: flex; align-items: center; gap: 12px; border-bottom: 1.5px solid rgb(254 255 237 / 0.55); }
.pie__fila:focus-within { border-bottom-color: var(--sabor-color-brand-yellow); }
.pie__input { flex: 1; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 1rem; }
.pie__input::placeholder { color: rgb(254 255 237 / 0.6); opacity: 1; }
.pie__enviar { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--sabor-color-brand-yellow); font-weight: 600; white-space: nowrap; }
.pie__acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.4; color: rgb(254 255 237 / 0.82); }
.pie__acepto input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--sabor-color-brand-yellow); }

/* Columnas */
.pie__cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 20px 10px; }
.pie__col-t { margin-bottom: 4px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(254 255 237 / 0.72); }
.pie__cols a { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 0.3em; min-height: 36px; padding-block: 4px; font-size: 0.875rem; line-height: 1.25; white-space: nowrap; color: inherit; text-decoration: none; }
.pie__usuario { flex-basis: 100%; }
/* Temas: en el celular y la tablet, un renglón de lado a lado debajo de las otras columnas */
.pie__temas { order: 1; grid-column: 1 / -1; }
.pie__temas ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
.pie__cols a:hover { color: var(--sabor-color-brand-yellow); text-decoration: underline; text-underline-offset: 4px; }

.pie__chico { padding-top: 16px; border-top: 1px solid rgb(254 255 237 / 0.16); font-size: 0.8125rem; color: rgb(254 255 237 / 0.72); }

/* El +SaBoR gigante, de lado a lado (pie.js lo achica con --pie-marca si no entra a lo alto) */
.pie__marca { margin-top: clamp(12px, 2.5vw, 32px); padding: 0 clamp(10px, 1.6vw, 24px) clamp(6px, 1vw, 14px); color: var(--sabor-color-brand-cream); line-height: 0; }
.pie__marca svg { width: 100%; max-width: var(--pie-marca, 100%); height: auto; margin-inline: auto; }
.pie.is-telon .pie__marca { will-change: transform; }

@media (min-width: 900px) {
  .pie__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(40px, 6vw, 96px); }
  .pie__sello { width: 64px; height: 64px; }
  .pie__sello img { width: 44px; }
  .pie__firma { grid-column: 1; grid-row: 1; }
  .pie__news { grid-column: 1; grid-row: 2; }
  .pie__cols { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: normal; column-gap: 24px; }
  .pie__temas { order: 0; grid-column: auto; }
  .pie__temas ul { display: block; }
  .pie__cols a { font-size: 1rem; }
  .pie__usuario { flex-basis: auto; }
  .pie__chico { grid-column: 1 / -1; }
}

@media (max-width: 359px) {
  .pie__cols a { white-space: normal; }
}

/* ---------- Los temas de la portada (/blog) ----------
   «Temas», «Todas» y un botón por tema (el chip de la marca, con su cantidad) arriba de las notas.
   Lo maneja js/temas.js; sin JavaScript queda escondido y se ven todas las notas. Las tarjetas no
   cambian. Ver blog/LEEME.md, «Los temas de la portada». */
.temas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.temas__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.temas__chip {
  position: relative; /* el «notas» para lectores de pantalla queda adentro del botón (y de la fila que se desliza) */
  transition:
    background var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard),
    border-color var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard),
    color var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard),
    opacity var(--sabor-motion-duration-normal) var(--sabor-motion-easing-standard),
    transform var(--sabor-motion-duration-fast) var(--sabor-motion-easing-standard);
}
.temas__chip:active { transform: scale(0.96); }
/* Con algún tema elegido, «Todas» queda apagada */
.temas.is-filtrado .temas__chip[data-tema=""] { opacity: 0.5; }
.temas__quitar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--sabor-component-chip-height);
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--sabor-color-text-primary);
  font-size: 0.9375rem;
  font-weight: 600;
}
.temas__quitar > span:first-child { font-size: 1.25rem; line-height: 1; }
.temas__quitar-t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* Sin la destacada (otro tema), la grilla arranca justo debajo de los temas */
.card[data-tema-nota][hidden] + .latest-grid { margin-top: 0; }
/* La dirección trae ?tema=: las notas esperan tapadas a que temas.js las filtre (como mucho 4 s) */
.temas-espera > [data-tema-nota],
.temas-espera > .latest-grid { visibility: hidden; }

/* Celular: «Temas» y «Quitar filtros» en un renglón de alto fijo (las notas no saltan cuando aparece)
   y los temas en una fila que se desliza de costado, de borde a borde, sin cortar el foco */
@media (max-width: 767px) {
  .temas { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--sabor-component-chip-height) auto; gap: 2px 12px; }
  .temas__label { grid-area: 1 / 1; }
  .temas__quitar { grid-area: 1 / 2; }
  .temas__chips {
    grid-area: 2 / 1 / 3 / 3;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--sabor-layout-gutter-mobile));
    padding: 6px var(--sabor-layout-gutter-mobile);
    scroll-padding-inline: var(--sabor-layout-gutter-mobile);
  }
  .temas__chips::-webkit-scrollbar { display: none; }
  .temas__chip { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .temas__chip { transition: none; }
  .temas__chip:active { transform: none; }
}

/* La portada del blog (experimentos 05 y 06 del laboratorio). Ver blog/LEEME.md, «La portada». */

/* ---------- el tráiler de las notas ---------- */
.portada {
  /* Un poco menos que la pantalla: abajo asoma el borde crema del blog, la pista de que hay más para bajar */
  --portada-alto: calc(88svh - var(--portada-cabeza, var(--blog-header-height)));
  position: sticky;
  top: var(--portada-cabeza, var(--blog-header-height));
  z-index: 0;
  height: var(--portada-alto);
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: #1E0309;
  color: var(--sabor-color-brand-cream);
}
.portada__fotos { position: absolute; inset: 0; z-index: -2; transform-origin: 50% 40%; will-change: transform; }
.portada__fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.portada__fotos img.activa { opacity: 1; }
.portada--viva .portada__fotos img.activa { animation: portada-zoom 6.5s linear forwards; }
.portada--viva .portada__fotos img.activa.b { animation-name: portada-zoom-b; }
@keyframes portada-zoom { from { transform: scale(1.14) translateX(-1.5%); } to { transform: scale(1.02) translateX(1.5%); } }
@keyframes portada-zoom-b { from { transform: scale(1.02) translateY(1%); } to { transform: scale(1.14) translateY(-1%); } }
.portada__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgb(30 3 9 / 0.8), rgb(30 3 9 / 0.22) 62%, rgb(30 3 9 / 0.5)),
    linear-gradient(to top, rgb(30 3 9 / 0.72), transparent 36%);
}
.portada__in { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-block: 22px 20px; }
.portada__temas { justify-self: end; }
.portada__temas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: right; }
.portada__temas a { color: var(--sabor-color-brand-cream); text-decoration: none; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.86; }
.portada__temas a:hover, .portada__temas a:focus-visible { opacity: 1; color: var(--sabor-color-brand-yellow); }
.portada__centro { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.portada__titulo { margin: 0; font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--sabor-color-brand-cream); }
.portada__l { display: block; overflow: hidden; padding-bottom: 0.08em; }
.portada__l > span { display: inline-block; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.1, 1); }
.portada__l:nth-child(2) > span { transition-delay: 0.08s; }
.portada__l:nth-child(3) > span { transition-delay: 0.16s; }
.portada__mano { font-size: 1.12em; color: var(--sabor-color-brand-yellow); letter-spacing: 0; }
.portada__bajada { margin: 0; max-width: 16rem; font-size: 0.72rem; line-height: 1.55; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.92; transition: opacity 0.6s ease 0.5s; }
.portada__abajo { display: flex; justify-content: space-between; align-items: end; gap: 16px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.portada__ahora { display: grid; gap: 4px; color: var(--sabor-color-brand-cream); text-decoration: none; }
.portada__ahora-r { opacity: 0.72; }
.portada__ahora b { font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.portada__ahora:hover b, .portada__ahora:focus-visible b { color: var(--sabor-color-brand-yellow); }
.portada__puntos { display: flex; gap: 5px; margin-top: 6px; }
.portada__puntos i { width: 18px; height: 2px; background: rgb(254 255 237 / 0.3); }
.portada__puntos i.activo { background: var(--sabor-color-brand-yellow); }
.portada__bajar { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--sabor-color-brand-yellow); color: var(--sabor-color-brand-burgundy); text-decoration: none; white-space: nowrap; font-weight: 600; letter-spacing: 0.1em; box-shadow: 0 10px 28px rgb(30 3 9 / 0.35); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.portada__bajar:hover, .portada__bajar:focus-visible { transform: translateY(-2px); }
.portada__bajar span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); font-size: 1.15rem; letter-spacing: 0; animation: portada-bajar 1.6s ease-in-out infinite; }
@keyframes portada-bajar { 50% { transform: translateY(5px); } }

/* La entrada: pantalla oscura y el +SaBoR que se arma en tiras (una vez por visita) */
.portada__intro { position: absolute; inset: 0; z-index: 3; background: #1E0309; cursor: pointer; transition: opacity 0.55s ease, visibility 0s linear 0.55s; }
.portada__intro-in { height: 100%; display: grid; grid-template-rows: auto 1fr; align-items: end; padding-block: 22px 26px; }
.portada__intro-r { align-self: start; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
.portada__wm { position: relative; display: block; width: min(84%, 620px); aspect-ratio: 419 / 127; color: var(--sabor-color-brand-red); }
.portada__tira { position: absolute; inset: 0; line-height: 0; clip-path: inset(calc(var(--i) * 100% / 6) 0 calc((5 - var(--i)) * 100% / 6) 0); }
.portada__tira svg { display: block; width: 100%; height: auto; }
.portada--intro .portada__tira { animation: portada-tira 0.75s cubic-bezier(0.2, 0.8, 0.1, 1) both; animation-delay: calc(var(--i) * 70ms); }
.portada__tira:nth-child(odd) { --dx: -22%; }
.portada__tira:nth-child(even) { --dx: 18%; }
@keyframes portada-tira { from { transform: translateX(var(--dx)); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
.portada--sale .portada__wm { animation: portada-wm-sale 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
@keyframes portada-wm-sale { to { clip-path: inset(0 0 100% 0); transform: translateY(-14%); } }
.portada--lista .portada__intro { opacity: 0; visibility: hidden; }
.portada--intro:not(.portada--lista) .portada__l > span { transform: translateY(108%); }
.portada--intro:not(.portada--lista) .portada__bajada { opacity: 0; transition: none; }

/* ---------- el encabezado sobre el tráiler ----------
   Con JavaScript (clase con-portada), el encabezado de /blog va transparente arriba del tráiler,
   con el +SaBoR rojo y los links crema, y se vuelve el encabezado crema de siempre cuando el resto
   de la portada llega arriba (site-header--claro, lo pone js/portada.js). Sin JavaScript es el
   encabezado de siempre y el tráiler arranca debajo. */
.site-header--portada .site-header__logo svg { display: block; height: 36px; width: auto; color: var(--sabor-color-brand-burgundy); }
.con-portada .site-header--portada {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--sabor-color-brand-cream);
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, opacity 0.5s ease;
}
.con-portada .site-header--portada .site-header__logo svg { color: var(--sabor-color-brand-red); transition: color 0.35s ease; }
.con-portada .site-header--portada .site-nav__link { color: var(--sabor-color-brand-cream); }
.con-portada .site-header--portada .site-nav__link:hover { background: rgb(254 255 237 / 0.12); }
.con-portada .site-header--portada:not(.site-header--claro) .site-menu > summary { color: var(--sabor-color-brand-cream); background: rgb(254 255 237 / 0.1); border-color: rgb(254 255 237 / 0.55); }
.con-portada .site-header--portada.site-header--claro {
  background: rgb(254 255 237 / 0.94); border-bottom-color: var(--sabor-color-border-subtle);
  backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px);
  color: var(--sabor-color-text-primary, var(--sabor-color-brand-burgundy));
}
.con-portada .site-header--portada.site-header--claro .site-header__logo svg { color: var(--sabor-color-brand-burgundy); }
.con-portada .site-header--portada.site-header--claro .site-nav__link { color: inherit; }
.con-portada .site-header--portada.site-header--claro .site-nav__link:hover { background: var(--sabor-color-neutral-100); }
/* Mientras corre la entrada, el encabezado espera: el +SaBoR grande es el que se arma */
.portada-en-intro .site-header--portada { opacity: 0; pointer-events: none; }
/* El tráiler ocupa la pantalla entera, desde arriba; los temas quedan debajo del encabezado */
.con-portada .portada { top: 0; --portada-alto: 86svh; }
.con-portada #notas { scroll-margin-top: calc(var(--portada-cabeza, var(--blog-header-height)) + 12px); }
.con-portada .portada__in { padding-top: calc(var(--portada-cabeza, var(--blog-header-height)) + 14px); }
.con-portada .portada__intro-in { padding-top: 22px; }

/* El resto de la portada sube por encima del tráiler. Si nadie baja en unos segundos, asoma un poco y
   vuelve (js/portada.js, clase asoma), dos veces como mucho */
.portada-resto.asoma { animation: portada-asoma 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) 2; }
@keyframes portada-asoma { 0%, 70%, 100% { transform: translateY(0); } 32% { transform: translateY(-34px); } }
.portada-resto {
  position: relative;
  z-index: 1;
  background: var(--sabor-color-bg-canvas);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 40px rgb(30 3 9 / 0.28);
  padding-top: 8px;
  /* Capa propia: en Chrome, con la placa de video, la barra de abajo del tráiler (que sigue animada
     atrás) a veces se pintaba encima del resto al bajar (founder, 3-nov-2026) */
  will-change: transform;
}
/* Cuando el resto tapa el tráiler entero, el tráiler se esconde y frena sus animaciones (js/portada.js) */
.portada--tapada { visibility: hidden; }
.portada--tapada .portada__fotos img.activa, .portada--tapada .portada__bajar span { animation-play-state: paused; }

@media (max-width: 767px) {
  .portada { min-height: 560px; }
  .portada__centro { grid-template-columns: 1fr; align-self: end; gap: 16px; padding-bottom: 28px; }
  .portada__bajada { max-width: 20rem; }
  .portada__temas ul { gap: 3px; }
}

/* ---------- la vidriera de platos ---------- */
.vidriera { position: relative; margin-top: var(--blog-section-space); }
.vidriera__escena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; overflow: hidden; }
.vidriera__cabeza { position: relative; z-index: 1; display: grid; gap: 6px; }
.vidriera__ojo { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blog-signature); }
.vidriera__titulo { margin: 0; font-size: clamp(2.4rem, 1.6rem + 4vw, 4.6rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance; }
.vidriera__pista { display: none; margin: 4px 0 0; font-family: var(--blog-font-hand); font-weight: 600; font-size: 1.6rem; line-height: 1; color: var(--blog-signature); }
.vidriera__fondo { position: absolute; left: 0; top: 26%; margin: 0; white-space: nowrap; font-size: clamp(12rem, 34vh, 26rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em; text-transform: uppercase; color: rgb(88 2 27 / 0.06); pointer-events: none; will-change: transform; }
.vidriera__fila { position: relative; list-style: none; margin: 0; padding: 40px max(var(--sabor-layout-gutter-mobile, 16px), calc((100vw - var(--blog-content-max)) / 2)) 40px; display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vidriera__fila::-webkit-scrollbar { display: none; }
.vidriera__plato { position: relative; flex: none; width: clamp(170px, 22vw, 250px); scroll-snap-align: center; transform: translateY(var(--y)) rotate(var(--r)); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vidriera__plato a { display: block; color: inherit; text-decoration: none; border-radius: 14px; }
.vidriera__foto { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--sabor-color-brand-burgundy); box-shadow: 0 16px 30px rgb(30 3 9 / 0.25); }
.vidriera__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vidriera__foto::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to top, rgb(30 3 9 / 0.75), transparent); }
.vidriera__nombre { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.5rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; color: var(--sabor-color-brand-cream); text-wrap: balance; }
.vidriera__num { position: absolute; top: -0.72em; right: -0.18em; z-index: 1; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--blog-signature); }
.vidriera__plato:hover, .vidriera__plato:focus-within { transform: translateY(calc(var(--y) - 8px)) rotate(0deg); }
.vidriera__plato:hover img { transform: scale(1.06); }
.vidriera__fin { flex: none; width: clamp(190px, 24vw, 270px); aspect-ratio: 1; margin-left: 10px; scroll-snap-align: center; }
.vidriera__fin a { width: 100%; height: 100%; border-radius: 50%; background: var(--sabor-color-brand-red); color: var(--sabor-color-brand-cream); text-decoration: none; display: grid; place-content: center; gap: 6px; text-align: center; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vidriera__fin a:hover, .vidriera__fin a:focus-visible { transform: scale(1.05) rotate(-4deg); }
.vidriera__fin b { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.vidriera__fin .hand { font-size: 1.25rem; color: var(--sabor-color-brand-yellow); }

/* Con JavaScript: la sección queda quieta y la fila pasa de costado con el scroll */
.vidriera--viva .vidriera__escena { position: sticky; top: var(--portada-cabeza, var(--blog-header-height)); height: calc(100svh - var(--portada-cabeza, var(--blog-header-height))); align-content: center; }
.vidriera--viva .vidriera__fila { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }

@media (max-width: 767px) {
  .vidriera__pista { display: block; }
  .vidriera__fila { scroll-padding-inline: 20px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .vidriera__plato { width: 58vw; max-width: 230px; }
  .vidriera__fin { width: 52vw; max-width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .portada__l > span, .portada__bajada, .vidriera__plato, .vidriera__foto img, .vidriera__fin a { transition: none; }
  .portada__bajar span, .portada-resto.asoma { animation: none; }
}

/* ---------- el contador en vivo ---------- */
.contador__caja { background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); border-radius: 28px; padding: clamp(40px, 7vw, 76px) clamp(16px, 4vw, 48px) 30px; display: grid; justify-items: center; gap: 22px; text-align: center; }
.contador__cifras { margin: 0; display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(3px, 1vw, 10px); max-width: 100%; font-size: clamp(1.6rem, 1rem + 3vw, 3rem); font-weight: 600; }
.contador__cifras > span:not(.contador__d) { font-size: 0.5em; align-self: center; }
.contador__d { --t: clamp(30px, 9.4vw, 78px); position: relative; width: var(--t); height: var(--t); flex: none; border: 2px solid var(--sabor-color-brand-cream); border-radius: 50%; overflow: hidden; font-size: calc(var(--t) * 0.56); line-height: 1; transition: opacity 0.4s ease; }
.contador__d.mil { margin-left: clamp(4px, 1.4vw, 14px); }
.contador__d.cero { opacity: 0.28; }
.contador__tira { position: absolute; left: 0; right: 0; top: 0; display: grid; will-change: transform; }
.contador__tira span { height: var(--t); display: grid; place-items: center; }
.contador__frase { margin: 0; max-width: 34rem; font-size: clamp(1rem, 0.85rem + 0.8vw, 1.35rem); font-weight: 600; line-height: 1.18; letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; color: var(--sabor-color-brand-cream); }
.contador__frase em { font-style: normal; color: var(--sabor-color-brand-yellow); }
.contador__fuente { margin: 6px 0 0; max-width: 40rem; font-size: 0.78rem; line-height: 1.45; opacity: 0.72; }

/* La caja del newsletter de la portada, «El brindis» (experimento 12 del laboratorio, variante B).
   Amarilla, el fondo alternativo de la marca, con el botón vino y la mascota de la copa en alto, sin el
   óvalo, en tres capas (brazo libre, brazo con la copa y cuerpo). Cada capa gira desde su articulación,
   medida sobre la ilustración de 770 x 900. Todo va debajo de .newsletter--brindis: la caja de las notas
   queda como está. El movimiento lo pone js/newsletter-brindis.js. Ver blog/LEEME.md, «La portada». */
.newsletter--brindis {
  grid-template-columns: minmax(180px, 290px) minmax(0, 1fr);
  background: var(--sabor-color-brand-yellow);
  color: var(--sabor-color-brand-burgundy);
}
.newsletter--brindis .newsletter__art {
  position: relative;
  display: block;
  aspect-ratio: 770 / 900;
  max-width: 300px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.newsletter__salto { position: absolute; inset: 0; transform-origin: 50% 100%; }
.newsletter--brindis .newsletter__capa { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
/* Las articulaciones: el hombro de la copa (625, 284) y el del brazo libre (150, 312) */
.newsletter__copa { transform-origin: 81.2% 31.6%; transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.newsletter__brazo { transform-origin: 19.5% 34.7%; transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
/* La copa se estira hacia el formulario a medida que lo completás: un poco con el mail y más con la casilla */
.newsletter--brindis[data-copa="1"] .newsletter__copa { transform: rotate(6deg); }
.newsletter--brindis[data-copa="2"] .newsletter__copa { transform: rotate(12deg); }
.newsletter--brindis[data-copa="2"] .newsletter__brazo { transform: rotate(8deg); }
/* Los destellos del choque, en el borde de la copa */
.newsletter__chin {
  position: absolute; left: 87%; top: -6%; width: 15%; height: auto; max-width: none; overflow: visible;
  fill: none; stroke: var(--sabor-color-brand-burgundy); stroke-width: 3.5; stroke-linecap: round;
  opacity: 0; transform-origin: 40% 65%;
}

/* El texto y el formulario, en vino sobre amarillo */
.newsletter--brindis .newsletter__body .eyebrow { color: var(--sabor-color-brand-burgundy); }
.newsletter--brindis .newsletter__deck,
.newsletter--brindis .newsletter__consent { color: rgb(88 2 27 / 0.84); }
.newsletter--brindis .newsletter__consent input { accent-color: var(--sabor-color-brand-burgundy); }
.newsletter--brindis .newsletter__input { border-color: var(--sabor-color-brand-burgundy); }
.newsletter--brindis .newsletter__input[aria-invalid="true"] { border-color: var(--sabor-color-brand-burgundy); box-shadow: 0 0 0 1px var(--sabor-color-brand-burgundy); }
.newsletter--brindis .btn--primary {
  background: var(--sabor-color-brand-burgundy);
  border-color: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
}
.newsletter--brindis .btn--primary:hover { box-shadow: inset 0 0 0 2px var(--sabor-color-brand-cream); }
.newsletter--brindis .newsletter__msg { box-shadow: inset 0 0 0 2px var(--sabor-color-brand-burgundy); }
/* El mensaje de «listo» de blog.js, como título; arriba, «¡Salud!» a mano (solo con movimiento) */
.newsletter--brindis .newsletter__form > [role="status"] {
  margin: 0;
  color: var(--sabor-color-brand-burgundy);
  font: 600 clamp(1.35rem, 1.1rem + 1vw, 1.8rem)/1.1 var(--sabor-font-family-ui);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.newsletter__salud {
  margin: 0 0 2px;
  font: 600 2.2rem/0.85 var(--blog-font-hand);
  color: var(--sabor-color-brand-burgundy);
  transform: rotate(-4deg);
  transform-origin: 0 100%;
}

/* Los «+» del festejo */
.newsletter__confeti { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.newsletter__mas { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; color: var(--sabor-color-brand-burgundy); will-change: transform, opacity; }

/* Celular: la mascota al lado del título, y la bajada y el formulario a todo el ancho */
@media (max-width: 767px) {
  .newsletter--brindis { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 0; padding: 24px 22px 26px; }
  .newsletter--brindis .newsletter__body { display: contents; }
  .newsletter--brindis .newsletter__art { grid-column: 1; grid-row: 1 / 3; align-self: center; max-width: none; margin: -6px 0 0; }
  .newsletter--brindis .newsletter__body > .eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 6px; }
  .newsletter--brindis .newsletter__title { grid-column: 2; grid-row: 2; align-self: start; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 1.9rem); }
  .newsletter--brindis .newsletter__body > :nth-child(n + 3) { grid-column: 1 / -1; margin-top: 18px; }
  .newsletter--brindis .newsletter__body > :nth-child(n + 4) { margin-top: 14px; }
}

/* Movimiento reducido: todo quieto, también la copa (el festejo es solo el mensaje) */
@media (prefers-reduced-motion: reduce) {
  .newsletter--brindis *, .newsletter--brindis *::before { animation: none !important; transition: none !important; }
  .newsletter--brindis .newsletter__copa, .newsletter--brindis .newsletter__brazo { transform: none !important; }
}

/* ---------- La web app: el blog instalable (va dentro de blog.css) ----------
   Todo lo del modo app cuelga de html.app, que pone el script del <head> solo si el blog está
   instalado (display-mode: standalone o navigator.standalone) o con ?app=1 para probar. Sin esa
   clase, el blog se ve igual que siempre: la barra de pestañas está en el HTML pero no se muestra.
   Ver blog/LEEME.md, «La web app (el blog instalable)». */
:root { --app-barra-h: calc(57px + env(safe-area-inset-bottom, 0px)); }

.app-barra { display: none; }

.app {
  /* El encabezado baja debajo de la hora y la batería si el sistema le da lugar arriba (72 es el alto de blog.tokens.css) */
  --blog-header-height: calc(72px + env(safe-area-inset-top, 0px));
  /* Lo que se enfoca o se lleva a la vista queda arriba de la barra */
  scroll-padding-bottom: var(--app-barra-h);
}
.app body {
  padding-bottom: var(--app-barra-h);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.app .site-header { padding-top: env(safe-area-inset-top, 0px); }
.app .site-header__bar { min-height: calc(var(--blog-header-height) - env(safe-area-inset-top, 0px)); }
.app.con-portada .site-header--portada { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* ---------- La barra de pestañas, abajo, como en iOS ---------- */
.app .app-barra {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: rgb(254 255 237 / 0.94);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  border-top: 1px solid var(--sabor-color-border-subtle);
}
.app-barra__lista { display: flex; max-width: 560px; margin: 0 auto; list-style: none; }
.app-barra__lista li { flex: 1 1 0; min-width: 0; }
.app-barra__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 56px;
  padding: 0 2px;
  color: var(--sabor-color-text-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.app-barra__link .icon { width: 24px; height: 24px; }
.app-barra__link.is-activa { color: var(--sabor-color-brand-burgundy); font-weight: 600; }
.app-barra__link.is-activa .icon { color: var(--sabor-color-brand-red); fill: rgb(247 29 40 / 0.14); }
.app-barra__link:focus-visible { outline-offset: -4px; border-radius: 12px; }

/* El muro es oscuro: la barra también */
.muro-page .app-barra { background: var(--muro-cristal, rgb(32 10 17 / 0.84)); border-top-color: var(--muro-linea, rgb(254 255 237 / 0.16)); }
.muro-page .app-barra__link { color: rgb(254 255 237 / 0.74); }
.muro-page .app-barra__link.is-activa { color: var(--sabor-color-brand-cream); }
.muro-page .app-barra__link.is-activa .icon { color: var(--sabor-color-brand-yellow); fill: rgb(255 238 108 / 0.16); }
.muro-page .app-barra__link:focus-visible { outline-color: var(--sabor-color-brand-yellow); }

/* ---------- Que conviva con lo que ya hay ---------- */
/* El pie como telón se apoya arriba de la barra (js/pie.js descuenta su alto) */
.app .pie.is-telon { bottom: var(--app-barra-h); }
/* La portada de las notas deja asomar lo que sigue arriba de la barra, como sin ella */
.app .v2 .v2-hero { min-height: calc(100svh - var(--blog-header-height) - 48px - var(--app-barra-h)); }
/* El tráiler de la portada deja asomar el borde crema arriba de la barra */
.app .portada { --portada-alto: calc(88svh - var(--portada-cabeza, var(--blog-header-height)) - var(--app-barra-h)); }
.app .vidriera--viva .vidriera__escena { height: calc(100svh - var(--portada-cabeza, var(--blog-header-height)) - var(--app-barra-h)); }
/* El muro a pantalla completa termina arriba de la barra, y la barra de series flota arriba de ella */
.app .muro { bottom: var(--app-barra-h); }
.app .muro-barra { bottom: calc(14px + var(--app-barra-h)); }

/* ---------- El aviso para instalarla (Safari del iPhone, sin la app; lo arma js/app.js) ---------- */
.app-aviso {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
  padding: 10px 4px 10px 12px;
  border-radius: 18px;
  background: var(--sabor-color-brand-burgundy);
  color: var(--sabor-color-brand-cream);
  box-shadow: 0 14px 34px -8px rgb(30 3 9 / 0.5);
  font-size: 0.875rem;
  line-height: 1.35;
}
.app-aviso img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
.app-aviso p { flex: 1; min-width: 0; }
.app-aviso a { color: var(--sabor-color-brand-yellow); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.app-aviso button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.app-aviso :focus-visible { outline-color: var(--sabor-color-brand-yellow); }
@media (prefers-reduced-motion: no-preference) {
  .app-aviso { animation: app-aviso-sube 0.35s var(--sabor-motion-easing-standard, ease) both; }
}
@keyframes app-aviso-sube { from { opacity: 0; transform: translateY(16px); } }

/* ---------- /blog/app: cómo instalarla ---------- */
.app-pagina { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 880px; padding-bottom: 24px; }
.app-pagina__cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 12px; }
.app-pagina__icono { width: clamp(64px, 12vw, 96px); height: auto; border-radius: 22%; box-shadow: 0 10px 24px -10px rgb(88 2 27 / 0.45); }
.app-pagina__t { font-size: var(--blog-title-page); line-height: 1; letter-spacing: -0.03em; margin-top: 6px; }
.app-pagina__bajada { margin-top: 14px; max-width: 620px; font-size: 1.125rem; line-height: 1.5; }
.app-pagina__ya { display: none; padding: 14px 18px; border-radius: var(--sabor-radius-lg); background: var(--sabor-color-brand-yellow); font-weight: 600; }
.app .app-pagina__ya { display: block; }
.app-pagina__pasos { display: grid; gap: 20px; }
.app-pagina__caja { padding: 22px; border: 2px solid var(--sabor-color-brand-burgundy); border-radius: var(--sabor-radius-lg); background: var(--sabor-color-bg-surface); }
.app-pagina__caja h2, .app-pagina__que h2, .app-pagina__nota h2 { font-size: var(--blog-title-section); line-height: 1.1; letter-spacing: -0.02em; }
.app-pasos { display: grid; gap: 14px; margin-top: 16px; list-style: none; counter-reset: paso; }
.app-pasos li { position: relative; padding-left: 46px; font-size: 1.0625rem; line-height: 1.5; counter-increment: paso; }
.app-pasos li::before {
  content: counter(paso);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sabor-color-brand-red);
  color: var(--sabor-color-brand-cream);
  font-weight: 600;
}
.app-pasos .icon { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; color: var(--sabor-color-brand-burgundy); }
.app-pasos small { display: block; margin-top: 4px; font-size: 0.9375rem; color: var(--sabor-color-text-secondary); }
.app-pagina__que ul { display: grid; gap: 10px; margin-top: 14px; padding-left: 20px; font-size: 1.0625rem; line-height: 1.5; }
.app-pagina__nota { display: grid; gap: 12px; justify-items: start; padding: 22px; border-radius: var(--sabor-radius-lg); background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); }
.app-pagina__nota h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.app-pagina__nota .btn { margin-top: 4px; }
@media (min-width: 800px) {
  .app-pagina__pasos { grid-template-columns: 1fr 1fr; }
}

/* ---------- /blog/sin-conexion: la que sale sin señal y sin copia guardada ---------- */
.sin-conexion { display: grid; min-height: 100vh; min-height: 100svh; place-items: center; padding-block: 32px; }
.app .sin-conexion { min-height: calc(100svh - var(--app-barra-h)); }
.sin-conexion__in { display: grid; gap: 16px; justify-items: center; max-width: 560px; text-align: center; }
.sin-conexion__arte { width: 132px; height: auto; }
.sin-conexion h1 { font-size: var(--blog-title-page); line-height: 1; letter-spacing: -0.03em; }
.sin-conexion h1 span { display: block; margin-top: 6px; font: 600 0.62em/1 var(--blog-font-hand); letter-spacing: 0; color: var(--sabor-color-brand-red); }
.sin-conexion p { font-size: 1.125rem; line-height: 1.5; }
.sin-conexion__botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sin-conexion__guardadas { width: 100%; margin-top: 12px; text-align: left; }
.sin-conexion__guardadas h2 { font-size: 1.25rem; }
.sin-conexion__guardadas ul { display: grid; gap: 8px; margin-top: 10px; list-style: none; }
.sin-conexion__guardadas a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 16px; border: 1px solid var(--sabor-color-border-subtle); border-radius: var(--sabor-radius-md); background: var(--sabor-color-bg-surface); font-weight: 500; text-decoration: none; }