/* Generado por sitio/scripts/build.mjs desde design/references/tokens/tokens.json. No editar. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/PlusJakartaSans_500Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/PlusJakartaSans_600SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/PlusJakartaSans_700Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fuentes/PlusJakartaSans_800ExtraBold.ttf') format('truetype');
}

:root {
  color-scheme: light dark;
  --lp-color-bg-canvas: #FDFBF7;
  --lp-color-bg-surface: #FFFFFF;
  --lp-color-bg-surfaceSoft: #F4F8FF;
  --lp-color-bg-row: #F5F8FE;
  --lp-color-bg-overlay: rgba(20,30,60,0.45);
  --lp-color-bg-onPastel: rgba(255,255,255,0.7);
  --lp-color-bg-onPastelStrong: rgba(255,255,255,0.85);
  --lp-color-bg-gridLine: #F1ECE3;
  --lp-color-bg-gridLineHour: #ECE7DE;
  --lp-color-bg-gridLineHalf: #F3EEE6;
  --lp-color-bg-skeleton: #EEE9E1;
  --lp-color-text-primary: #1C1A17;
  --lp-color-text-strong: #2B2722;
  --lp-color-text-secondary: #3F3A33;
  --lp-color-text-body: #4A453E;
  --lp-color-text-tertiary: #6B655C;
  --lp-color-text-onPrimary: #FFFFFF;
  --lp-color-border-card: #EEE9E1;
  --lp-color-border-chip: #ECE7DE;
  --lp-color-border-input: #D6E3FB;
  --lp-color-border-row: #E3EBFA;
  --lp-color-border-handle: #DCD4C7;
  --lp-color-border-dashed: #A9C4F7;
  --lp-color-border-switchOff: #D6CFC3;
  --lp-color-primary-gradientStart: #2B5FDB;
  --lp-color-primary-gradientEnd: #2457D4;
  --lp-color-primary-gradient: linear-gradient(135deg, #2B5FDB 0%, #2457D4 100%);
  --lp-color-primary-solid: #2563EB;
  --lp-color-primary-text: #2459D6;
  --lp-color-primary-tint: #E8F0FE;
  --lp-color-primary-focusRing: #E8F0FE;
  --lp-color-primary-grip: #5B8DEF;
  --lp-color-primary-ringTodo: #8FB0F0;
  --lp-color-primary-todayTint: rgba(37,99,235,0.06);
  --lp-color-primary-nowLineSoft: rgba(59,130,246,0.35);
  --lp-color-primary-onHeaderGlass: rgba(255,255,255,0.10);
  --lp-color-primary-onHeaderBorder: rgba(255,255,255,0.65);
  --lp-color-primary-onHeaderTrack: rgba(255,255,255,0.3);
  --lp-color-primary-onHeaderText: #FFFFFF;
  --lp-color-primary-onHeaderActiveBg: #FFFFFF;
  --lp-color-primary-onHeaderActiveText: #2459D6;
  --lp-color-status-done-icon: #14804E;
  --lp-color-status-done-bg: #C3F2DC;
  --lp-color-status-done-text: #13734A;
  --lp-color-status-done-halo: rgba(20,128,78,0.18);
  --lp-color-status-inProgress-ring: #F2C40F;
  --lp-color-status-inProgress-dot: #EEB10B;
  --lp-color-status-overdue-text: #C0392B;
  --lp-color-status-overdue-bg: #FFF4F2;
  --lp-color-status-overdue-border: #F8D9D3;
  --lp-color-status-overdue-tint: #FFE9E5;
  --lp-color-status-overdue-ring: #E8A39A;
  --lp-color-status-warning-text: #7A5200;
  --lp-color-status-warning-bg: #FFF6D6;
  --lp-color-status-warning-border: #F7E07A;
  --lp-color-status-warning-icon: #A86200;
  --lp-color-status-neutral-bg: #F1ECE3;
  --lp-color-status-neutral-text: #5A544B;
  --lp-color-status-disabled-bg: #EEE9E1;
  --lp-color-status-disabled-text: #8E8579;
  --lp-color-toast-bg: #1E2A44;
  --lp-color-toast-text: #FFFFFF;
  --lp-color-toast-accent: #8DB4FA;
  --lp-color-toast-button: rgba(255,255,255,0.14);
  --lp-color-category-salud-bg: #C3F2DC;
  --lp-color-category-salud-border: #A5E8C8;
  --lp-color-category-salud-icon: #159A5E;
  --lp-color-category-salud-text: #13734A;
  --lp-color-category-salud-glow: rgba(21,154,94,0.10);
  --lp-color-category-salud-ring: #8FDDB8;
  --lp-color-category-salud-ringBg: #EAFBF3;
  --lp-color-category-salud-statsDark: #13804E;
  --lp-color-category-trabajo-bg: #FFF1A6;
  --lp-color-category-trabajo-border: #F7E07A;
  --lp-color-category-trabajo-icon: #E07A12;
  --lp-color-category-trabajo-text: #5A4300;
  --lp-color-category-trabajo-glow: rgba(224,170,0,0.12);
  --lp-color-category-trabajo-ring: #F2D45C;
  --lp-color-category-trabajo-ringBg: #FFFAE0;
  --lp-color-category-trabajo-statsDark: #C76A0C;
  --lp-color-category-reunion-bg: #E6DCFC;
  --lp-color-category-reunion-border: #D4C3F8;
  --lp-color-category-reunion-icon: #6A3FD8;
  --lp-color-category-reunion-text: #5A2FC0;
  --lp-color-category-reunion-glow: rgba(106,63,216,0.10);
  --lp-color-category-reunion-ring: #CDB7F7;
  --lp-color-category-reunion-ringBg: #F3EEFF;
  --lp-color-category-reunion-statsDark: #6A3FD8;
  --lp-color-category-estrategia-bg: #BDE4FA;
  --lp-color-category-estrategia-border: #9DD3F5;
  --lp-color-category-estrategia-icon: #1F6FE0;
  --lp-color-category-estrategia-text: #1C3A66;
  --lp-color-category-estrategia-glow: rgba(31,111,224,0.12);
  --lp-color-category-estrategia-ring: #8ECDF3;
  --lp-color-category-estrategia-ringBg: #E9F6FE;
  --lp-color-category-estrategia-statsDark: #1F6FE0;
  --lp-color-category-personal-bg: #FFE0CC;
  --lp-color-category-personal-border: #F8C7A6;
  --lp-color-category-personal-icon: #D9622B;
  --lp-color-category-personal-text: #7A2E0A;
  --lp-color-category-personal-glow: rgba(217,98,43,0.10);
  --lp-color-category-personal-ring: #F2B48C;
  --lp-color-category-personal-ringBg: #FFF3EA;
  --lp-color-category-personal-statsDark: #C9541F;
  --lp-color-category-estudio-bg: #E6DCFC;
  --lp-color-category-estudio-border: #D4C3F8;
  --lp-color-category-estudio-icon: #6A3FD8;
  --lp-color-category-estudio-text: #5A2FC0;
  --lp-color-category-estudio-glow: rgba(106,63,216,0.10);
  --lp-color-category-estudio-ring: #CDB7F7;
  --lp-color-category-estudio-ringBg: #F3EEFF;
  --lp-color-category-ideas-bg: #BDE4FA;
  --lp-color-category-ideas-border: #9DD3F5;
  --lp-color-category-ideas-icon: #1F6FE0;
  --lp-color-category-ideas-text: #1C3A66;
  --lp-color-category-ideas-glow: rgba(31,111,224,0.12);
  --lp-color-category-ideas-ring: #8ECDF3;
  --lp-color-category-ideas-ringBg: #E9F6FE;
  --lp-color-focus-glass: rgba(255,255,255,0.10);
  --lp-color-focus-glassStrong: rgba(255,255,255,0.10);
  --lp-color-focus-track: rgba(255,255,255,0.22);
  --lp-color-focus-progress: #FFFFFF;
  --lp-color-focus-text: #FFFFFF;
  --lp-color-focus-buttonBg: #FFFFFF;
  --lp-color-focus-buttonText: #2459D6;
  --lp-color-wheel-fadeEdge: #FFFFFF;
  --lp-color-wheel-fadeClear: rgba(255,255,255,0);
  --lp-color-event-bg: #F7F4EE;
  --lp-color-event-border: #CFC6B6;
  --lp-color-event-text: #4A453E;
  --lp-color-event-lock: #6B655C;
  --lp-color-mood-one-bg: #E9E0FC;
  --lp-color-mood-one-stage: #E9E0FC;
  --lp-color-mood-one-face: #CDB8F6;
  --lp-color-mood-one-mark: #6843B4;
  --lp-color-mood-two-bg: #D9E9FA;
  --lp-color-mood-two-stage: #D9E9FA;
  --lp-color-mood-two-face: #B9D9F5;
  --lp-color-mood-two-mark: #386995;
  --lp-color-mood-three-bg: #E8F0FE;
  --lp-color-mood-three-stage: #E8F0FE;
  --lp-color-mood-three-face: #C9DDFD;
  --lp-color-mood-three-mark: #2459D6;
  --lp-color-mood-four-bg: #FFF1C3;
  --lp-color-mood-four-stage: #FFF1C3;
  --lp-color-mood-four-face: #FFE28D;
  --lp-color-mood-four-mark: #805C00;
  --lp-color-mood-five-bg: #D5F3E3;
  --lp-color-mood-five-stage: #D5F3E3;
  --lp-color-mood-five-face: #A9E6C7;
  --lp-color-mood-five-mark: #13734A;
  --lp-color-load-done: #14804E;
  --lp-color-load-pending: #2563EB;
  --lp-color-load-event: #CFC6B6;
  --lp-color-load-free: #ECE7DE;
  --lp-color-load-over: #C0392B;
  --lp-color-load-headerScheduled: #FFFFFF;
  --lp-color-load-headerChosen: rgba(255,255,255,0.55);
  --lp-color-load-headerOver: #FFC9C0;
  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 20px;
  --lp-space-6: 24px;
  --lp-space-7: 28px;
  --lp-space-8: 32px;
  --lp-space-12: 48px;
  --lp-space-0_5: 2px;
  --lp-space-1_5: 6px;
  --lp-space-2_5: 10px;
  --lp-space-3_5: 14px;
  --lp-space-4_5: 17px;
  --lp-space-screenGutter: 17px;
  --lp-space-headerGutter: 16px;
  --lp-space-weekGridEnd: 4px;
  --lp-radius-pill: 999px;
  --lp-radius-card: 24px;
  --lp-radius-panel: 22px;
  --lp-radius-row: 20px;
  --lp-radius-input: 18px;
  --lp-radius-dayPill: 14px;
  --lp-radius-weekDay: 14px;
  --lp-radius-dayArrow: 12px;
  --lp-radius-dragged: 16px;
  --lp-radius-subtask: 16px;
  --lp-radius-weekBlock: 10px;
  --lp-radius-horizontalWeekBlock: 12px;
  --lp-radius-previewIcon: 12px;
  --lp-radius-sheetTop: 36px;
  --lp-radius-headerBottom: 28px;
  --lp-radius-headerBottomHero: 44px;
  --lp-radius-iconSquare: 16px;
  --lp-radius-nav: 35px;
  --lp-radius-appIcon: 10px;
  --lp-radius-wheel: 24px;
  --lp-radius-wheelBand: 14px;
  --lp-radius-dayShortRow: 14px;
  --lp-radius-menuRow: 18px;
  --lp-radius-menuPanel: 28px;
  --lp-radius-onbMoodTile: 30px;
  --lp-radius-onbPreviewRow: 14px;
  --lp-radius-onbHero: 40px;
  --lp-shadow-card: 0 4px 16px rgba(60,40,10,0.04);
  --lp-shadow-header: 0 10px 24px rgba(59,113,232,0.20);
  --lp-shadow-buttonPrimary: 0 12px 26px rgba(36,87,212,0.32);
  --lp-shadow-buttonSmall: 0 6px 14px rgba(37,99,235,0.28);
  --lp-shadow-onHeaderWhite: 0 6px 16px rgba(20,50,140,0.25);
  --lp-shadow-iconCircle: 0 2px 8px rgba(30,20,10,0.06);
  --lp-shadow-statusCircle: 0 3px 10px rgba(30,20,10,0.10);
  --lp-shadow-badge: 0 1px 4px rgba(30,20,10,0.18);
  --lp-shadow-dragging: 0 14px 28px rgba(31,111,224,0.30);
  --lp-shadow-sheet: 0 -12px 40px rgba(20,30,60,0.25);
  --lp-shadow-toast: 0 8px 18px rgba(30,42,68,0.25);
  --lp-shadow-focus: 0 0 0 4px #E8F0FE;
  --lp-shadow-selected: 0 10px 22px rgba(37,99,235,0.22);
  --lp-shadow-preview: 0 12px 26px rgba(10,30,90,0.20);
  --lp-shadow-onbCard: 0 12px 26px rgba(10,30,90,0.20);
  --lp-shadow-onbKnob: 0 6px 14px rgba(10,30,90,0.25);
  --lp-font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  --lp-type-display-size: 1.875rem;
  --lp-type-display-line: 1.2;
  --lp-type-display-weight: 800;
  --lp-type-display-tracking: -0.02em;
  --lp-type-focusTimer-size: 3.5rem;
  --lp-type-focusTimer-line: 1.0714;
  --lp-type-focusTimer-weight: 800;
  --lp-type-focusTimer-tracking: -0.03em;
  --lp-type-onboardingTitle-size: 1.75rem;
  --lp-type-onboardingTitle-line: 1.2143;
  --lp-type-onboardingTitle-weight: 800;
  --lp-type-onboardingTitle-tracking: -0.02em;
  --lp-type-onbClockValue-size: 2.125rem;
  --lp-type-onbClockValue-line: 1.1176;
  --lp-type-onbClockValue-weight: 800;
  --lp-type-onbClockValue-tracking: normal;
  --lp-type-pauseTitle-size: 1.625rem;
  --lp-type-pauseTitle-line: 1.2308;
  --lp-type-pauseTitle-weight: 800;
  --lp-type-pauseTitle-tracking: -0.02em;
  --lp-type-detailTitle-size: 1.5rem;
  --lp-type-detailTitle-line: 1.25;
  --lp-type-detailTitle-weight: 800;
  --lp-type-detailTitle-tracking: -0.02em;
  --lp-type-screenTitle-size: 1.375rem;
  --lp-type-screenTitle-line: 1.2727;
  --lp-type-screenTitle-weight: 800;
  --lp-type-screenTitle-tracking: -0.02em;
  --lp-type-headerTitle-size: 1.25rem;
  --lp-type-headerTitle-line: 1.25;
  --lp-type-headerTitle-weight: 800;
  --lp-type-headerTitle-tracking: -0.02em;
  --lp-type-metric-size: 1.25rem;
  --lp-type-metric-line: 1.1;
  --lp-type-metric-weight: 800;
  --lp-type-metric-tracking: normal;
  --lp-type-question-size: 1.1875rem;
  --lp-type-question-line: 1.3684;
  --lp-type-question-weight: 800;
  --lp-type-question-tracking: normal;
  --lp-type-sheetTitle-size: 1.125rem;
  --lp-type-sheetTitle-line: 1.3333;
  --lp-type-sheetTitle-weight: 800;
  --lp-type-sheetTitle-tracking: -0.01em;
  --lp-type-cardTitle-size: 1.0625rem;
  --lp-type-cardTitle-line: 1.2941;
  --lp-type-cardTitle-weight: 800;
  --lp-type-cardTitle-tracking: normal;
  --lp-type-blockTitle-size: 1rem;
  --lp-type-blockTitle-line: 1.375;
  --lp-type-blockTitle-weight: 700;
  --lp-type-blockTitle-tracking: normal;
  --lp-type-sectionHeading-size: 1rem;
  --lp-type-sectionHeading-line: 1.375;
  --lp-type-sectionHeading-weight: 800;
  --lp-type-sectionHeading-tracking: 0.02em;
  --lp-type-cardHeading-size: 0.875rem;
  --lp-type-cardHeading-line: 1.3571;
  --lp-type-cardHeading-weight: 800;
  --lp-type-cardHeading-tracking: normal;
  --lp-type-journalCardHeading-size: 1rem;
  --lp-type-journalCardHeading-line: 1.375;
  --lp-type-journalCardHeading-weight: 800;
  --lp-type-journalCardHeading-tracking: normal;
  --lp-type-label-size: 0.8125rem;
  --lp-type-label-line: 1.3846;
  --lp-type-label-weight: 800;
  --lp-type-label-tracking: normal;
  --lp-type-body-size: 0.9375rem;
  --lp-type-body-line: 1.4667;
  --lp-type-body-weight: 500;
  --lp-type-body-tracking: normal;
  --lp-type-input-size: 0.9375rem;
  --lp-type-input-line: 1.3333;
  --lp-type-input-weight: 600;
  --lp-type-input-tracking: normal;
  --lp-type-rowTitle-size: 0.875rem;
  --lp-type-rowTitle-line: 1.3571;
  --lp-type-rowTitle-weight: 700;
  --lp-type-rowTitle-tracking: normal;
  --lp-type-bodySmall-size: 0.8125rem;
  --lp-type-bodySmall-line: 1.4615;
  --lp-type-bodySmall-weight: 500;
  --lp-type-bodySmall-tracking: normal;
  --lp-type-button-size: 1rem;
  --lp-type-button-line: 1.375;
  --lp-type-button-weight: 800;
  --lp-type-button-tracking: normal;
  --lp-type-buttonSmall-size: 0.8125rem;
  --lp-type-buttonSmall-line: 1.3846;
  --lp-type-buttonSmall-weight: 700;
  --lp-type-buttonSmall-tracking: normal;
  --lp-type-option-size: 0.875rem;
  --lp-type-option-line: 1.3571;
  --lp-type-option-weight: 800;
  --lp-type-option-tracking: normal;
  --lp-type-meta-size: 0.75rem;
  --lp-type-meta-line: 1.3333;
  --lp-type-meta-weight: 600;
  --lp-type-meta-tracking: normal;
  --lp-type-caption-size: 0.75rem;
  --lp-type-caption-line: 1.4167;
  --lp-type-caption-weight: 500;
  --lp-type-caption-tracking: normal;
  --lp-type-chip-size: 0.75rem;
  --lp-type-chip-line: 1.3333;
  --lp-type-chip-weight: 700;
  --lp-type-chip-tracking: normal;
  --lp-type-overline-size: 0.75rem;
  --lp-type-overline-line: 1.25;
  --lp-type-overline-weight: 600;
  --lp-type-overline-tracking: normal;
  --lp-type-nav-size: 0.75rem;
  --lp-type-nav-line: 1.1667;
  --lp-type-nav-weight: 500;
  --lp-type-nav-tracking: normal;
  --lp-type-wheelValue-size: 1.3125rem;
  --lp-type-wheelValue-line: 1.2381;
  --lp-type-wheelValue-weight: 800;
  --lp-type-wheelValue-tracking: normal;
  --lp-type-wheelOption-size: 1.0625rem;
  --lp-type-wheelOption-line: 1.2941;
  --lp-type-wheelOption-weight: 600;
  --lp-type-wheelOption-tracking: normal;
  --ancho-sitio: 72rem;
  --ancho-lectura: 70ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lp-color-bg-canvas: #14110D;
    --lp-color-bg-surface: #1F1A15;
    --lp-color-bg-surfaceSoft: #262019;
    --lp-color-bg-row: #241F19;
    --lp-color-bg-overlay: rgba(0,0,0,0.6);
    --lp-color-bg-onPastel: rgba(0,0,0,0.25);
    --lp-color-bg-onPastelStrong: rgba(0,0,0,0.35);
    --lp-color-bg-gridLine: #2E2720;
    --lp-color-bg-gridLineHour: #3A3129;
    --lp-color-bg-gridLineHalf: #28221C;
    --lp-color-bg-skeleton: #2A241D;
    --lp-color-text-primary: #F4EEE6;
    --lp-color-text-strong: #EDE6DC;
    --lp-color-text-secondary: #D6CBBC;
    --lp-color-text-body: #C8BBAA;
    --lp-color-text-tertiary: #A89C8B;
    --lp-color-text-onPrimary: #FFFFFF;
    --lp-color-border-card: #2E2720;
    --lp-color-border-chip: #3A3128;
    --lp-color-border-input: #33405E;
    --lp-color-border-row: #322B23;
    --lp-color-border-handle: #4A4034;
    --lp-color-border-dashed: #3F5C9E;
    --lp-color-border-switchOff: #4A4034;
    --lp-color-primary-gradientStart: #1E3F8A;
    --lp-color-primary-gradientEnd: #172F6B;
    --lp-color-primary-gradient: linear-gradient(135deg, #1E3F8A 0%, #172F6B 100%);
    --lp-color-primary-solid: #2563EB;
    --lp-color-primary-text: #8DB4FA;
    --lp-color-primary-tint: #1E2A44;
    --lp-color-primary-focusRing: #24345C;
    --lp-color-primary-grip: #6F9BEF;
    --lp-color-primary-ringTodo: #4A6FB5;
    --lp-color-primary-todayTint: rgba(141,180,250,0.08);
    --lp-color-primary-nowLineSoft: rgba(141,180,250,0.35);
    --lp-color-primary-onHeaderGlass: rgba(255,255,255,0.10);
    --lp-color-primary-onHeaderBorder: rgba(255,255,255,0.65);
    --lp-color-primary-onHeaderTrack: rgba(255,255,255,0.3);
    --lp-color-primary-onHeaderText: #FFFFFF;
    --lp-color-primary-onHeaderActiveBg: #F4EEE6;
    --lp-color-primary-onHeaderActiveText: #1E3F8A;
    --lp-color-status-done-icon: #4FD39A;
    --lp-color-status-done-bg: #123A29;
    --lp-color-status-done-text: #8CE5BF;
    --lp-color-status-done-halo: rgba(79,211,154,0.18);
    --lp-color-status-inProgress-ring: #F2C40F;
    --lp-color-status-inProgress-dot: #EEB10B;
    --lp-color-status-overdue-text: #FF9A8C;
    --lp-color-status-overdue-bg: #3A1A16;
    --lp-color-status-overdue-border: #5C2A23;
    --lp-color-status-overdue-tint: #4A201B;
    --lp-color-status-overdue-ring: #B5594D;
    --lp-color-status-warning-text: #F5DF85;
    --lp-color-status-warning-bg: #3D3408;
    --lp-color-status-warning-border: #5C4F10;
    --lp-color-status-warning-icon: #F2B24A;
    --lp-color-status-neutral-bg: #2A241D;
    --lp-color-status-neutral-text: #C8BBAA;
    --lp-color-status-disabled-bg: #2A241D;
    --lp-color-status-disabled-text: #7A7164;
    --lp-color-toast-bg: #2A3757;
    --lp-color-toast-text: #FFFFFF;
    --lp-color-toast-accent: #A9C8FC;
    --lp-color-toast-button: rgba(255,255,255,0.14);
    --lp-color-category-salud-bg: #12382A;
    --lp-color-category-salud-border: #1C5540;
    --lp-color-category-salud-icon: #4FD39A;
    --lp-color-category-salud-text: #8CE5BF;
    --lp-color-category-salud-glow: rgba(0,0,0,0);
    --lp-color-category-salud-ring: #2C7A5C;
    --lp-color-category-salud-ringBg: #0E2B20;
    --lp-color-category-trabajo-bg: #3D3408;
    --lp-color-category-trabajo-border: #5C4F10;
    --lp-color-category-trabajo-icon: #F2B24A;
    --lp-color-category-trabajo-text: #F5DF85;
    --lp-color-category-trabajo-glow: rgba(0,0,0,0);
    --lp-color-category-trabajo-ring: #8A7618;
    --lp-color-category-trabajo-ringBg: #2E2706;
    --lp-color-category-reunion-bg: #2A2148;
    --lp-color-category-reunion-border: #40326E;
    --lp-color-category-reunion-icon: #B79CFF;
    --lp-color-category-reunion-text: #CDBBFF;
    --lp-color-category-reunion-glow: rgba(0,0,0,0);
    --lp-color-category-reunion-ring: #5E4AA0;
    --lp-color-category-reunion-ringBg: #201938;
    --lp-color-category-estrategia-bg: #10304A;
    --lp-color-category-estrategia-border: #1A4A70;
    --lp-color-category-estrategia-icon: #6FB5F5;
    --lp-color-category-estrategia-text: #A9D8FA;
    --lp-color-category-estrategia-glow: rgba(0,0,0,0);
    --lp-color-category-estrategia-ring: #2A6CA3;
    --lp-color-category-estrategia-ringBg: #0C2438;
    --lp-color-category-personal-bg: #40230F;
    --lp-color-category-personal-border: #613618;
    --lp-color-category-personal-icon: #F29A6B;
    --lp-color-category-personal-text: #FFC9A8;
    --lp-color-category-personal-glow: rgba(0,0,0,0);
    --lp-color-category-personal-ring: #8F5026;
    --lp-color-category-personal-ringBg: #301A0B;
    --lp-color-category-estudio-bg: #2A2148;
    --lp-color-category-estudio-border: #40326E;
    --lp-color-category-estudio-icon: #B79CFF;
    --lp-color-category-estudio-text: #CDBBFF;
    --lp-color-category-estudio-glow: rgba(0,0,0,0);
    --lp-color-category-estudio-ring: #5E4AA0;
    --lp-color-category-estudio-ringBg: #201938;
    --lp-color-category-ideas-bg: #10304A;
    --lp-color-category-ideas-border: #1A4A70;
    --lp-color-category-ideas-icon: #6FB5F5;
    --lp-color-category-ideas-text: #A9D8FA;
    --lp-color-category-ideas-glow: rgba(0,0,0,0);
    --lp-color-category-ideas-ring: #2A6CA3;
    --lp-color-category-ideas-ringBg: #0C2438;
    --lp-color-focus-buttonBg: #F4EEE6;
    --lp-color-focus-buttonText: #1E3F8A;
    --lp-color-wheel-fadeEdge: #1F1A15;
    --lp-color-wheel-fadeClear: rgba(31,26,21,0);
    --lp-color-event-bg: #221D17;
    --lp-color-event-border: #5A4F41;
    --lp-color-event-text: #C8BBAA;
    --lp-color-event-lock: #A89C8B;
    --lp-color-mood-one-bg: #30233E;
    --lp-color-mood-one-stage: #604D70;
    --lp-color-mood-one-face: #584276;
    --lp-color-mood-one-mark: #DBC2FF;
    --lp-color-mood-two-bg: #1B3040;
    --lp-color-mood-two-stage: #1B3040;
    --lp-color-mood-two-face: #32506D;
    --lp-color-mood-two-mark: #B9D9F5;
    --lp-color-mood-three-bg: #1C2B46;
    --lp-color-mood-three-stage: #1C2B46;
    --lp-color-mood-three-face: #344A70;
    --lp-color-mood-three-mark: #C9DDFD;
    --lp-color-mood-four-bg: #3A3118;
    --lp-color-mood-four-stage: #3A3118;
    --lp-color-mood-four-face: #645022;
    --lp-color-mood-four-mark: #FFE28D;
    --lp-color-mood-five-bg: #19372C;
    --lp-color-mood-five-stage: #19372C;
    --lp-color-mood-five-face: #2E5A46;
    --lp-color-mood-five-mark: #A9E6C7;
    --lp-color-load-done: #4FD39A;
    --lp-color-load-pending: #8DB4FA;
    --lp-color-load-event: #5A4F41;
    --lp-color-load-free: #2E2720;
    --lp-color-load-over: #FF9A8C;
    --lp-color-load-headerScheduled: #F4EEE6;
    --lp-color-load-headerChosen: rgba(244,238,230,0.5);
    --lp-color-load-headerOver: #FF9A8C;
    --lp-shadow-card: none;
    --lp-shadow-header: none;
    --lp-shadow-buttonPrimary: none;
    --lp-shadow-buttonSmall: none;
    --lp-shadow-onHeaderWhite: none;
    --lp-shadow-iconCircle: none;
    --lp-shadow-statusCircle: none;
    --lp-shadow-badge: none;
    --lp-shadow-dragging: none;
    --lp-shadow-sheet: none;
    --lp-shadow-toast: none;
    --lp-shadow-focus: none;
    --lp-shadow-selected: none;
    --lp-shadow-preview: none;
    --lp-shadow-onbCard: none;
    --lp-shadow-onbKnob: none;
  }
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lp-color-bg-canvas);
  color: var(--lp-color-text-body);
  font-family: var(--lp-font-family);
  font-size: var(--lp-type-body-size);
  line-height: var(--lp-type-body-line);
  font-weight: var(--lp-type-body-weight);
  overflow-wrap: anywhere;
}

h1, h2, h3 { color: var(--lp-color-text-primary); overflow-wrap: break-word; }
p, ul, ol { margin: 0 0 var(--lp-space-3); }
strong { color: var(--lp-color-text-strong); }

a { color: var(--lp-color-primary-text); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: 2px solid var(--lp-color-primary-text);
  outline-offset: 2px;
  border-radius: 4px;
}
svg { flex: none; }

.salto {
  position: absolute;
  left: var(--lp-space-3);
  top: calc(-1 * var(--lp-space-12));
  z-index: 10;
  padding: var(--lp-space-2) var(--lp-space-3);
  background: var(--lp-color-bg-surface);
  border-radius: var(--lp-radius-input);
}
.salto:focus { top: var(--lp-space-3); }

/* ---------- Cabecera: degradado océano con radio inferior, como HeaderCurvo ---------- */

header.cabecera {
  background: var(--lp-color-primary-gradient);
  color: var(--lp-color-primary-onHeaderText);
  border-radius: 0 0 var(--lp-radius-headerBottom) var(--lp-radius-headerBottom);
  box-shadow: var(--lp-shadow-header);
}
.cabecera-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-3) var(--lp-space-4);
  max-width: var(--ancho-sitio);
  margin: 0 auto;
  padding: var(--lp-space-3) var(--lp-space-screenGutter) var(--lp-space-3_5);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-2_5);
  min-height: 44px;
  color: var(--lp-color-primary-onHeaderText);
  font-size: var(--lp-type-headerTitle-size);
  font-weight: var(--lp-type-headerTitle-weight);
  letter-spacing: var(--lp-type-headerTitle-tracking);
  text-decoration: none;
}
.icono-app { border-radius: 12px; box-shadow: var(--lp-shadow-onHeaderWhite); }
.icono-app .fondo { fill: var(--lp-color-bg-surface); }
.icono-app .p1 { fill: var(--lp-color-category-salud-bg); }
.icono-app .p2 { fill: var(--lp-color-category-trabajo-bg); }
.icono-app .p3 { fill: var(--lp-color-category-reunion-bg); }

.navegacion ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-space-1_5);
  margin: 0;
  padding: var(--lp-space-1);
  list-style: none;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-color-primary-onHeaderGlass);
}
.navegacion a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--lp-space-4);
  border-radius: var(--lp-radius-pill);
  color: var(--lp-color-primary-onHeaderText);
  font-size: var(--lp-type-option-size);
  font-weight: var(--lp-type-rowTitle-weight);
  text-decoration: none;
}
.navegacion a:hover { background: var(--lp-color-primary-onHeaderGlass); }
.navegacion a[aria-current="page"] {
  background: var(--lp-color-primary-onHeaderActiveBg);
  color: var(--lp-color-primary-onHeaderActiveText);
  font-weight: var(--lp-type-option-weight);
  box-shadow: var(--lp-shadow-onHeaderWhite);
}
.navegacion a:focus-visible, .idioma:focus-visible, .marca:focus-visible { outline-color: var(--lp-color-primary-onHeaderText); }
.marca { margin-right: auto; }
.idioma {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--lp-space-4);
  border-radius: var(--lp-radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--lp-color-primary-onHeaderBorder);
  color: var(--lp-color-primary-onHeaderText);
  font-size: var(--lp-type-option-size);
  font-weight: var(--lp-type-rowTitle-weight);
  text-decoration: none;
}
.idioma:hover { background: var(--lp-color-primary-onHeaderGlass); }
@media (max-width: 679px) {
  .navegacion { order: 3; width: 100%; }
  .navegacion ul { flex-wrap: nowrap; }
  .navegacion li { flex: 1 1 0; }
  .navegacion a { justify-content: center; width: 100%; padding: 0 var(--lp-space-2); }
}

/* ---------- Disposición de las páginas de texto ---------- */

main { padding: var(--lp-space-6) var(--lp-space-screenGutter) var(--lp-space-12); }

.disposicion {
  display: grid;
  gap: var(--lp-space-5);
  max-width: var(--ancho-sitio);
  margin: 0 auto;
}
@media (min-width: 960px) {
  .disposicion { grid-template-columns: 16rem minmax(0, 54rem); justify-content: center; align-items: start; gap: var(--lp-space-8); }
  .disposicion.sin-indice { grid-template-columns: minmax(0, 54rem); }
  .lateral { position: sticky; top: var(--lp-space-4); max-height: calc(100vh - var(--lp-space-8)); overflow-y: auto; }
}

.documento {
  width: 100%;
  padding: var(--lp-space-6) var(--lp-space-5);
  border: 1px solid var(--lp-color-border-card);
  border-radius: var(--lp-radius-card);
  background: var(--lp-color-bg-surface);
  box-shadow: var(--lp-shadow-card);
}
@media (min-width: 640px) { .documento { padding: var(--lp-space-8); } }

.documento h1 {
  margin: 0 0 var(--lp-space-2);
  font-size: var(--lp-type-display-size);
  line-height: var(--lp-type-display-line);
  font-weight: var(--lp-type-display-weight);
  letter-spacing: var(--lp-type-display-tracking);
}
.documento h2 {
  margin: var(--lp-space-8) 0 var(--lp-space-2);
  padding-top: var(--lp-space-6);
  border-top: 1px solid var(--lp-color-border-card);
  font-size: var(--lp-type-screenTitle-size);
  line-height: var(--lp-type-screenTitle-line);
  font-weight: var(--lp-type-screenTitle-weight);
  letter-spacing: var(--lp-type-screenTitle-tracking);
  scroll-margin-top: var(--lp-space-4);
}
.documento h3 {
  margin: var(--lp-space-5) 0 var(--lp-space-1);
  font-size: var(--lp-type-cardTitle-size);
  line-height: var(--lp-type-cardTitle-line);
  font-weight: var(--lp-type-cardTitle-weight);
}
.documento > p, .documento > ul, .documento > ol { max-width: var(--ancho-lectura); }
.documento ul, .documento ol { padding-left: var(--lp-space-5); }
.documento li + li { margin-top: var(--lp-space-1_5); }
.documento li::marker { color: var(--lp-color-primary-text); }

.actualizado {
  display: inline-block;
  margin-bottom: var(--lp-space-4);
  padding: var(--lp-space-1) var(--lp-space-3);
  border-radius: var(--lp-radius-pill);
  background: var(--lp-color-status-neutral-bg);
  color: var(--lp-color-status-neutral-text);
  font-size: var(--lp-type-meta-size);
  font-weight: var(--lp-type-meta-weight);
}

nav.indice {
  padding: var(--lp-space-4) var(--lp-space-4) var(--lp-space-3);
  border: 1px solid var(--lp-color-border-card);
  border-radius: var(--lp-radius-panel);
  background: var(--lp-color-bg-surface);
  box-shadow: var(--lp-shadow-card);
  font-size: var(--lp-type-bodySmall-size);
  line-height: var(--lp-type-bodySmall-line);
}
nav.indice::before {
  content: attr(aria-label);
  display: block;
  margin: 0 0 var(--lp-space-2);
  color: var(--lp-color-text-tertiary);
  font-size: var(--lp-type-label-size);
  font-weight: var(--lp-type-label-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
nav.indice ol { margin: 0; padding-left: var(--lp-space-5); color: var(--lp-color-text-tertiary); }
nav.indice li + li { margin-top: var(--lp-space-1); }
nav.indice li { padding: var(--lp-space-0_5) 0; }
nav.indice a {
  display: inline;
  color: var(--lp-color-text-secondary);
  font-weight: var(--lp-type-rowTitle-weight);
  text-decoration: none;
}
nav.indice a:hover { color: var(--lp-color-primary-text); text-decoration: underline; }
@media (max-width: 959px) {
  nav.indice ol { columns: 2 14rem; column-gap: var(--lp-space-6); }
  nav.indice li { break-inside: avoid; }
}

/* Recuadros dentro de un documento: contacto, aviso destacado y resumen. */
.contacto, .destacado {
  margin: var(--lp-space-4) 0 var(--lp-space-6);
  padding: var(--lp-space-4) var(--lp-space-5);
  border-radius: var(--lp-radius-row);
  background: var(--lp-color-primary-tint);
  color: var(--lp-color-text-primary);
}
.contacto p:last-child, .destacado p:last-child, .destacado ul:last-child { margin-bottom: 0; }
.contacto a { font-weight: var(--lp-type-button-weight); }
.destacado.aviso { background: var(--lp-color-status-warning-bg); color: var(--lp-color-status-warning-text); }
.destacado.aviso strong { color: inherit; }

table {
  width: 100%;
  margin: var(--lp-space-3) 0 var(--lp-space-4);
  border-collapse: collapse;
  font-size: var(--lp-type-bodySmall-size);
  line-height: var(--lp-type-bodySmall-line);
}
caption {
  text-align: left;
  padding: 0 var(--lp-space-2) var(--lp-space-2);
  color: var(--lp-color-text-secondary);
  font-weight: var(--lp-type-rowTitle-weight);
}
th, td {
  padding: var(--lp-space-2_5) var(--lp-space-2);
  border-bottom: 1px solid var(--lp-color-border-card);
  text-align: left;
  vertical-align: top;
}
thead th { background: var(--lp-color-bg-row); }
thead th:first-child { border-top-left-radius: var(--lp-radius-dayArrow); }
thead th:last-child { border-top-right-radius: var(--lp-radius-dayArrow); }
th { color: var(--lp-color-text-primary); font-weight: var(--lp-type-blockTitle-weight); }
td, th { overflow-wrap: break-word; }
th:first-child, td:first-child { min-width: 9rem; }
.etiqueta {
  display: inline-block;
  padding: 0 var(--lp-space-2);
  border-radius: var(--lp-radius-pill);
  background: var(--lp-color-status-warning-bg);
  color: var(--lp-color-status-warning-text);
  font-size: var(--lp-type-chip-size);
  font-weight: var(--lp-type-chip-weight);
  white-space: nowrap;
}
.etiqueta.no { background: var(--lp-color-status-neutral-bg); color: var(--lp-color-status-neutral-text); }

@media (max-width: 759px) {
  table, thead, tbody, tr, th, td, caption { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr { padding: var(--lp-space-2) 0; border-bottom: 1px solid var(--lp-color-border-card); }
  td { border: 0; padding: var(--lp-space-1) 0; min-width: 0; }
  th:first-child, td:first-child { min-width: 0; }
  td::before {
    content: attr(data-label);
    display: block;
    color: var(--lp-color-text-tertiary);
    font-weight: var(--lp-type-rowTitle-weight);
  }
}

/* ---------- Formulario de derechos ---------- */

.formulario {
  display: grid;
  gap: var(--lp-space-4);
  margin: var(--lp-space-4) 0 var(--lp-space-6);
  padding: var(--lp-space-5);
  border: 1px solid var(--lp-color-border-row);
  border-radius: var(--lp-radius-row);
  background: var(--lp-color-bg-row);
}
.campo { display: grid; gap: var(--lp-space-1_5); }
.campo label {
  color: var(--lp-color-text-primary);
  font-size: var(--lp-type-rowTitle-size);
  font-weight: var(--lp-type-rowTitle-weight);
}
.campo .ayuda { margin: 0; color: var(--lp-color-text-tertiary); font-size: var(--lp-type-bodySmall-size); }
select, textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--lp-space-3) var(--lp-space-4);
  border: 1.5px solid var(--lp-color-border-input);
  border-radius: var(--lp-radius-input);
  background: var(--lp-color-bg-surface);
  color: var(--lp-color-text-primary);
  font: inherit;
  font-size: var(--lp-type-input-size);
  font-weight: var(--lp-type-input-weight);
}
textarea { min-height: 12rem; line-height: var(--lp-type-body-line); resize: vertical; }
select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--lp-color-primary-solid); box-shadow: var(--lp-shadow-focus); }

/* ---------- Botones píldora ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-2);
  min-height: 52px;
  padding: 0 var(--lp-space-6);
  border: 0;
  border-radius: var(--lp-radius-pill);
  font: inherit;
  font-size: var(--lp-type-button-size);
  font-weight: var(--lp-type-button-weight);
  text-decoration: none;
  cursor: pointer;
}
.boton.primario { background: var(--lp-color-primary-gradient); color: var(--lp-color-text-onPrimary); box-shadow: var(--lp-shadow-buttonPrimary); }
.boton.secundario { background: var(--lp-color-primary-tint); color: var(--lp-color-primary-text); }
.boton:hover { filter: brightness(1.05); }
.formulario .boton { justify-self: start; }

/* ---------- Portada ---------- */

.pagina-portada main { padding-top: var(--lp-space-8); }
.hero, .seccion { max-width: var(--ancho-sitio); margin: 0 auto; }

.hero { display: grid; gap: var(--lp-space-8); align-items: center; padding-bottom: var(--lp-space-8); }
@media (min-width: 860px) { .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: var(--lp-space-6) 0 var(--lp-space-12); } }
.overline {
  margin: 0 0 var(--lp-space-3);
  color: var(--lp-color-primary-text);
  font-size: var(--lp-type-label-size);
  font-weight: var(--lp-type-label-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0 0 var(--lp-space-4);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  line-height: 1.08;
  font-weight: var(--lp-type-display-weight);
  letter-spacing: -0.03em;
}
.entrada { max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; }
.tiendas { display: flex; flex-wrap: wrap; gap: var(--lp-space-2); margin: var(--lp-space-6) 0 0; padding: 0; list-style: none; }
.tiendas li {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--lp-space-5);
  border: 1.5px solid var(--lp-color-border-input);
  border-radius: var(--lp-radius-pill);
  background: var(--lp-color-bg-surface);
  color: var(--lp-color-text-primary);
  font-size: var(--lp-type-rowTitle-size);
  font-weight: var(--lp-type-rowTitle-weight);
}

/* Vista previa de la pantalla Hoy: cabecera curva y bloques pastel con su círculo blanco. */
.vista-previa {
  width: 100%;
  max-width: 24rem;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--lp-color-border-card);
  border-radius: var(--lp-radius-sheetTop);
  background: var(--lp-color-bg-canvas);
  box-shadow: var(--lp-shadow-preview);
}
.vp-cabecera {
  display: grid;
  gap: var(--lp-space-0_5);
  padding: var(--lp-space-5) var(--lp-space-5) var(--lp-space-6);
  border-radius: 0 0 var(--lp-radius-headerBottom) var(--lp-radius-headerBottom);
  background: var(--lp-color-primary-gradient);
  color: var(--lp-color-primary-onHeaderText);
}
.vp-overline { font-size: var(--lp-type-overline-size); font-weight: var(--lp-type-overline-weight); }
.vp-titulo { font-size: var(--lp-type-headerTitle-size); font-weight: var(--lp-type-headerTitle-weight); letter-spacing: var(--lp-type-headerTitle-tracking); }
.vp-bloques { display: grid; gap: var(--lp-space-2_5); margin: 0; padding: var(--lp-space-4); list-style: none; }
.vp-bloque {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
  padding: var(--lp-space-3) var(--lp-space-4);
  border: 1px solid var(--cat-borde);
  border-radius: var(--lp-radius-row);
  background: var(--cat-fondo);
  color: var(--cat-texto);
}
.vp-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-color-bg-surface);
  box-shadow: var(--lp-shadow-statusCircle);
  color: var(--lp-color-status-done-icon);
}
.vp-marca .anillo { width: 16px; height: 16px; border: 2.5px solid var(--cat-icono); border-radius: 50%; }
.vp-texto { display: grid; }
.vp-nombre { color: var(--lp-color-text-primary); font-size: var(--lp-type-blockTitle-size); font-weight: var(--lp-type-blockTitle-weight); }
.vp-hora { font-size: var(--lp-type-meta-size); font-weight: var(--lp-type-meta-weight); }

/* Colores por categoría, los mismos de las tarjetas de la app. */
.cat-salud { --cat-fondo: var(--lp-color-category-salud-bg); --cat-borde: var(--lp-color-category-salud-border); --cat-icono: var(--lp-color-category-salud-icon); --cat-texto: var(--lp-color-category-salud-text); }
.cat-trabajo { --cat-fondo: var(--lp-color-category-trabajo-bg); --cat-borde: var(--lp-color-category-trabajo-border); --cat-icono: var(--lp-color-category-trabajo-icon); --cat-texto: var(--lp-color-category-trabajo-text); }
.cat-reunion { --cat-fondo: var(--lp-color-category-reunion-bg); --cat-borde: var(--lp-color-category-reunion-border); --cat-icono: var(--lp-color-category-reunion-icon); --cat-texto: var(--lp-color-category-reunion-text); }
.cat-estrategia { --cat-fondo: var(--lp-color-category-estrategia-bg); --cat-borde: var(--lp-color-category-estrategia-border); --cat-icono: var(--lp-color-category-estrategia-icon); --cat-texto: var(--lp-color-category-estrategia-text); }
.cat-personal { --cat-fondo: var(--lp-color-category-personal-bg); --cat-borde: var(--lp-color-category-personal-border); --cat-icono: var(--lp-color-category-personal-icon); --cat-texto: var(--lp-color-category-personal-text); }
.cat-ideas { --cat-fondo: var(--lp-color-category-ideas-bg); --cat-borde: var(--lp-color-category-ideas-border); --cat-icono: var(--lp-color-category-ideas-icon); --cat-texto: var(--lp-color-category-ideas-text); }

.seccion { padding: var(--lp-space-8) 0; }
.seccion h2 {
  margin: 0 0 var(--lp-space-2);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  font-weight: var(--lp-type-display-weight);
  letter-spacing: var(--lp-type-display-tracking);
}
.seccion-entrada { max-width: 40rem; margin-bottom: var(--lp-space-6); }
.seccion h2 + :not(.seccion-entrada) { margin-top: var(--lp-space-5); }

.circulo-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lp-color-bg-surface);
  box-shadow: var(--lp-shadow-iconCircle);
  color: var(--cat-icono, var(--lp-color-primary-text));
}
.circulo-icono.pequeno { width: 36px; height: 36px; }

.tarjetas { display: grid; gap: var(--lp-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tarjeta {
  padding: var(--lp-space-5);
  border: 1px solid var(--cat-borde);
  border-radius: var(--lp-radius-card);
  background: var(--cat-fondo);
  color: var(--cat-texto);
}
.tarjeta h3 {
  margin: var(--lp-space-4) 0 var(--lp-space-1);
  font-size: var(--lp-type-cardTitle-size);
  line-height: var(--lp-type-cardTitle-line);
  font-weight: var(--lp-type-cardTitle-weight);
}
.tarjeta p { margin: 0; color: var(--lp-color-text-secondary); }

.planes { display: grid; gap: var(--lp-space-4); }
@media (min-width: 760px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.plan {
  padding: var(--lp-space-6);
  border: 1px solid var(--lp-color-border-card);
  border-radius: var(--lp-radius-card);
  background: var(--lp-color-bg-surface);
  box-shadow: var(--lp-shadow-card);
}
.plan h3 { margin: 0; font-size: var(--lp-type-cardTitle-size); font-weight: var(--lp-type-cardTitle-weight); }
.precio {
  margin: var(--lp-space-2) 0 var(--lp-space-1);
  color: var(--lp-color-text-primary);
  font-size: var(--lp-type-display-size);
  line-height: var(--lp-type-display-line);
  font-weight: var(--lp-type-display-weight);
  font-variant-numeric: tabular-nums;
}
.precio span { font-size: var(--lp-type-blockTitle-size); font-weight: var(--lp-type-blockTitle-weight); color: var(--lp-color-text-tertiary); }
.plan-desc { color: var(--lp-color-text-tertiary); }
.plan.pro { border: 2px solid var(--lp-color-primary-solid); background: var(--lp-color-bg-surfaceSoft); box-shadow: var(--lp-shadow-selected); }
.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-2);
  margin-bottom: var(--lp-space-3);
  color: var(--lp-color-primary-text);
  font-size: var(--lp-type-label-size);
  font-weight: var(--lp-type-label-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lista-check { display: grid; gap: var(--lp-space-2_5); margin: var(--lp-space-4) 0 0; padding: 0; list-style: none; }
.lista-check li { display: flex; gap: var(--lp-space-2_5); align-items: flex-start; color: var(--lp-color-text-strong); font-weight: var(--lp-type-rowTitle-weight); }
.lista-check svg { margin-top: 2px; color: var(--lp-color-status-done-icon); }
.nota { max-width: 48rem; margin-top: var(--lp-space-4); color: var(--lp-color-text-tertiary); font-size: var(--lp-type-bodySmall-size); }

.confianza { display: grid; gap: var(--lp-space-3); margin: 0 0 var(--lp-space-5); padding: 0; list-style: none; }
@media (min-width: 760px) { .confianza { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.confianza li {
  display: flex;
  gap: var(--lp-space-4);
  padding: var(--lp-space-5);
  border: 1px solid var(--lp-color-border-row);
  border-radius: var(--lp-radius-card);
  background: var(--lp-color-bg-row);
}
.confianza h3 { margin: 0 0 var(--lp-space-1); font-size: var(--lp-type-blockTitle-size); font-weight: var(--lp-type-cardTitle-weight); }
.confianza p { margin: 0; }

.documentos { display: grid; gap: var(--lp-space-2_5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .documentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .documentos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.documentos a {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
  min-height: 72px;
  height: 100%;
  padding: var(--lp-space-3) var(--lp-space-4);
  border: 1px solid var(--lp-color-border-card);
  border-radius: var(--lp-radius-row);
  background: var(--lp-color-bg-surface);
  text-decoration: none;
}
.documentos a:hover { border-color: var(--lp-color-border-dashed); }
.documentos .circulo-icono { background: var(--lp-color-primary-tint); box-shadow: none; }
.doc-nombre { display: block; color: var(--lp-color-text-primary); font-size: var(--lp-type-rowTitle-size); font-weight: var(--lp-type-rowTitle-weight); }
.doc-desc { display: block; color: var(--lp-color-text-tertiary); font-size: var(--lp-type-meta-size); font-weight: var(--lp-type-meta-weight); }

/* ---------- Portada raíz (elección de idioma) ---------- */

.raiz { display: grid; justify-items: center; gap: var(--lp-space-3); max-width: 28rem; margin: var(--lp-space-12) auto; text-align: center; }
.raiz h1 { margin: var(--lp-space-2) 0 0; font-size: var(--lp-type-display-size); font-weight: var(--lp-type-display-weight); }
.icono-app.grande { border-radius: 22px; box-shadow: var(--lp-shadow-preview); }
.botones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-space-3); padding: 0; list-style: none; }

/* ---------- Pie ---------- */

footer.pie {
  margin-top: var(--lp-space-8);
  border-top: 1px solid var(--lp-color-border-card);
  background: var(--lp-color-bg-surface);
  color: var(--lp-color-text-tertiary);
  font-size: var(--lp-type-bodySmall-size);
  line-height: var(--lp-type-bodySmall-line);
}
.pie-interior {
  display: grid;
  gap: var(--lp-space-6);
  max-width: var(--ancho-sitio);
  margin: 0 auto;
  padding: var(--lp-space-8) var(--lp-space-screenGutter) var(--lp-space-6);
}
@media (min-width: 760px) { .pie-interior { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.pie-nombre { color: var(--lp-color-text-primary); font-size: var(--lp-type-cardTitle-size); font-weight: var(--lp-type-cardTitle-weight); }
.pie-titulo {
  color: var(--lp-color-text-secondary);
  font-size: var(--lp-type-label-size);
  font-weight: var(--lp-type-label-weight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie-columna a { display: inline-block; padding: var(--lp-space-1) 0; color: var(--lp-color-text-secondary); font-weight: var(--lp-type-rowTitle-weight); text-decoration: none; }
.pie-columna a:hover { color: var(--lp-color-primary-text); text-decoration: underline; }
.pie-legal {
  max-width: var(--ancho-sitio);
  margin: 0 auto;
  padding: var(--lp-space-4) var(--lp-space-screenGutter) var(--lp-space-8);
  border-top: 1px solid var(--lp-color-border-card);
}
.pie-legal p { margin: 0 0 var(--lp-space-1); }

/* ---------- Sistema editorial de Yutemi ---------- */

/* Las páginas de texto adoptan la misma jerarquía de la app: lienzo de lino, una superficie
   principal y filas separadas por líneas suaves. */
.disposicion { gap: var(--lp-space-6); }
.documento {
  border-color: var(--lp-color-border-row);
  border-radius: var(--lp-radius-panel);
  box-shadow: var(--lp-shadow-preview);
}
.documento.legal { counter-reset: seccion; }
.documento h1 { max-width: 18ch; font-size: clamp(2rem, 1.55rem + 2vw, 2.75rem); line-height: 1.05; }
.documento h2 {
  counter-increment: seccion;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: var(--lp-space-3);
  align-items: baseline;
}
.documento h2::before {
  content: counter(seccion, decimal-leading-zero);
  color: var(--lp-color-primary-text);
  font-size: var(--lp-type-meta-size);
  font-weight: var(--lp-type-label-weight);
  letter-spacing: 0.04em;
}
.documento h2 + p, .documento h2 + ul, .documento h2 + ol, .documento h2 + table,
.documento h2 + .contacto, .documento h2 + .destacado { margin-left: 3.1rem; }
.documento h2 + table { margin-left: 0; }
.actualizado { margin-top: var(--lp-space-2); background: var(--lp-color-primary-tint); color: var(--lp-color-primary-text); }
nav.indice {
  padding: var(--lp-space-5);
  border-color: var(--lp-color-border-row);
  border-radius: var(--lp-radius-panel);
  box-shadow: none;
}
nav.indice ol { list-style: none; padding: 0; }
nav.indice li { border-top: 1px solid var(--lp-color-border-card); }
nav.indice li:first-child { border-top: 0; }
nav.indice a { display: block; padding: var(--lp-space-2) 0; }
table { border: 1px solid var(--lp-color-border-card); border-radius: var(--lp-radius-row); border-collapse: separate; border-spacing: 0; overflow: hidden; }
th, td { padding: var(--lp-space-3); }
tbody tr:last-child td { border-bottom: 0; }
.contacto, .destacado { border: 1px solid var(--lp-color-border-input); }
.formulario { padding: clamp(var(--lp-space-5), 4vw, var(--lp-space-8)); border-radius: var(--lp-radius-panel); }

/* La portada cuenta la experiencia con componentes reales de la app, no con adornos ajenos. */
.pagina-portada main { padding: 0; overflow: hidden; }
.hero, .seccion { width: 100%; max-width: var(--ancho-sitio); padding-left: var(--lp-space-screenGutter); padding-right: var(--lp-space-screenGutter); }
.hero {
  position: relative;
  min-height: 42rem;
  padding-top: clamp(var(--lp-space-8), 7vw, 5.5rem);
  padding-bottom: clamp(var(--lp-space-12), 8vw, 6.5rem);
}
.hero-texto { max-width: 38rem; }
.overline { display: flex; align-items: center; gap: var(--lp-space-2); }
.overline > span { width: 9px; height: 9px; border-radius: 50%; background: var(--lp-color-status-done-icon); box-shadow: var(--lp-shadow-statusCircle); }
.hero h1 { max-width: 11ch; font-size: clamp(2.65rem, 1.8rem + 4vw, 4.9rem); line-height: 0.99; letter-spacing: -0.045em; }
.entrada { max-width: 37rem; margin-top: var(--lp-space-5); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }
.tiendas { margin-top: var(--lp-space-6); }
.tiendas li {
  min-height: 42px;
  padding: 0 var(--lp-space-4);
  border: 0;
  border-radius: var(--lp-radius-row);
  background: var(--lp-color-bg-surfaceSoft);
  box-shadow: inset 0 0 0 1px var(--lp-color-border-row);
}
.hero-claves { display: flex; flex-wrap: wrap; gap: var(--lp-space-2) var(--lp-space-4); margin: var(--lp-space-5) 0 0; padding: 0; list-style: none; }
.hero-claves li { color: var(--lp-color-text-tertiary); font-size: var(--lp-type-meta-size); font-weight: var(--lp-type-meta-weight); }
.hero-claves li::before { content: '✓'; margin-right: var(--lp-space-1_5); color: var(--lp-color-status-done-icon); font-weight: var(--lp-type-cardTitle-weight); }

.vista-previa {
  max-width: 26rem;
  border-color: var(--lp-color-border-row);
  border-radius: 38px;
  box-shadow: var(--lp-shadow-preview);
}
.vp-cabecera { gap: 0; padding: var(--lp-space-6) var(--lp-space-6) var(--lp-space-8); border-radius: 0 0 32px 32px; }
.vp-overline { opacity: 0.82; }
.vp-titulo { margin-top: var(--lp-space-1); font-size: 1.65rem; line-height: 1.15; }
.vp-intencion { max-width: 20rem; margin-top: var(--lp-space-3); color: var(--lp-color-primary-onHeaderText); font-size: var(--lp-type-bodySmall-size); font-weight: var(--lp-type-bodySmall-weight); opacity: 0.88; }
.vp-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lp-space-2); margin: calc(-1 * var(--lp-space-4)) var(--lp-space-4) 0; position: relative; padding: var(--lp-space-3); border: 1px solid var(--lp-color-border-row); border-radius: var(--lp-radius-row); background: var(--lp-color-bg-surface); box-shadow: var(--lp-shadow-card); }
.vp-resumen span { display: grid; color: var(--lp-color-text-tertiary); font-size: var(--lp-type-caption-size); text-align: center; }
.vp-resumen strong { color: var(--lp-color-text-primary); font-size: var(--lp-type-rowTitle-size); }
.vp-seccion { margin: var(--lp-space-4) var(--lp-space-4) 0; color: var(--lp-color-text-tertiary); font-size: var(--lp-type-label-size); font-weight: var(--lp-type-label-weight); letter-spacing: 0.04em; text-transform: uppercase; }
.vp-bloques { padding-top: var(--lp-space-2); }
.vp-bloque { min-height: 60px; padding: var(--lp-space-2_5) var(--lp-space-3); }

.seccion { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.seccion h2 { max-width: 18ch; font-size: clamp(2rem, 1.55rem + 2vw, 3rem); line-height: 1.06; letter-spacing: -0.035em; }
.seccion-entrada { max-width: 37rem; margin-top: var(--lp-space-4); font-size: 1.05rem; }

.seccion-funciones { border-top: 1px solid var(--lp-color-border-card); }
.tarjetas { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--lp-space-3); }
.tarjeta { grid-column: span 4; min-height: 15rem; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--lp-space-6); border-radius: var(--lp-radius-panel); }
.tarjeta:nth-child(1) { grid-column: span 6; min-height: 18rem; }
.tarjeta:nth-child(6) { grid-column: span 12; min-height: 13rem; }
.tarjeta h3 { max-width: 15ch; margin-top: auto; padding-top: var(--lp-space-6); font-size: 1.15rem; }
.tarjeta p { max-width: 30rem; }

.seccion-planes { position: relative; max-width: none; padding-left: max(var(--lp-space-screenGutter), calc((100% - var(--ancho-sitio)) / 2 + var(--lp-space-screenGutter))); padding-right: max(var(--lp-space-screenGutter), calc((100% - var(--ancho-sitio)) / 2 + var(--lp-space-screenGutter))); background: var(--lp-color-bg-surfaceSoft); border-top: 1px solid var(--lp-color-border-row); border-bottom: 1px solid var(--lp-color-border-row); }
.planes { max-width: var(--ancho-sitio); margin-top: var(--lp-space-8); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
.plan { padding: clamp(var(--lp-space-6), 4vw, var(--lp-space-8)); border-radius: var(--lp-radius-panel); box-shadow: none; }
.plan.pro { border: 0; background: var(--lp-color-primary-gradient); color: var(--lp-color-primary-onHeaderText); box-shadow: var(--lp-shadow-preview); }
.plan.pro h3, .plan.pro .precio, .plan.pro .precio span, .plan.pro .plan-desc, .plan.pro .lista-check li, .plan.pro .insignia { color: var(--lp-color-primary-onHeaderText); }
.plan.pro .circulo-icono { background: var(--lp-color-primary-onHeaderActiveBg); color: var(--lp-color-primary-onHeaderActiveText); }
.plan.pro .lista-check svg { color: var(--lp-color-primary-onHeaderText); }
.seccion-planes .nota { max-width: var(--ancho-sitio); }

.seccion-confianza { display: grid; grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr); column-gap: var(--lp-space-8); align-items: start; }
.seccion-confianza > h2 { position: sticky; top: var(--lp-space-6); }
.confianza { grid-column: 2; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--lp-color-border-card); }
.confianza li { display: grid; grid-template-columns: auto minmax(0, 1fr); padding: var(--lp-space-6) 0; border: 0; border-bottom: 1px solid var(--lp-color-border-card); border-radius: 0; background: transparent; }
.confianza h3 { font-size: var(--lp-type-cardTitle-size); }
.seccion-confianza > p { grid-column: 2; }

.seccion-documentos { border-top: 1px solid var(--lp-color-border-card); }
.documentos { margin-top: var(--lp-space-8); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--lp-space-6); border-top: 1px solid var(--lp-color-border-card); }
.documentos li { border-bottom: 1px solid var(--lp-color-border-card); }
.documentos a { min-height: 92px; padding: var(--lp-space-4) 0; border: 0; border-radius: 0; background: transparent; }
.documentos a::after { content: '→'; margin-left: auto; color: var(--lp-color-primary-text); font-size: var(--lp-type-screenTitle-size); }
.documentos a:hover { border: 0; }
.documentos .circulo-icono { width: 44px; height: 44px; }

footer.pie { margin-top: 0; }
.pie-interior { padding-top: var(--lp-space-12); }

@media (min-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.75fr); gap: clamp(3rem, 8vw, 8rem); }
  .vista-previa { transform: rotate(1.2deg); }
}
@media (max-width: 959px) {
  .tarjeta, .tarjeta:nth-child(1) { grid-column: span 6; min-height: 15rem; }
  .tarjeta:nth-child(6) { grid-column: span 12; min-height: 13rem; }
}
@media (max-width: 759px) {
  .pagina-portada { overflow-x: hidden; }
  .hero { min-height: auto; grid-template-columns: minmax(0, 1fr); }
  .hero > *, .vista-previa, .vp-resumen, .seccion, .tarjeta { min-width: 0; }
  .vista-previa { width: 100%; max-width: 100%; }
  .vp-resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vp-resumen span { min-width: 0; overflow-wrap: anywhere; }
  .tiendas li { max-width: 100%; white-space: normal; }
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta, .tarjeta:nth-child(1), .tarjeta:nth-child(6) { grid-column: auto; min-height: 13rem; }
  .planes { grid-template-columns: 1fr; }
  .seccion-confianza { display: block; }
  .seccion-confianza > h2 { position: static; }
  .confianza { margin-top: var(--lp-space-6); }
  .documentos { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 2.65rem; }
  .documento { padding: var(--lp-space-5) var(--lp-space-4); }
  .documento h2 { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .documento h2 + p, .documento h2 + ul, .documento h2 + ol, .documento h2 + table,
  .documento h2 + .contacto, .documento h2 + .destacado { margin-left: 0; }
  .vp-resumen { margin-left: var(--lp-space-3); margin-right: var(--lp-space-3); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}