:root { --color-white: #ffffff; --color-black: #000000; --color-canon-red: #c8102e; --color-canon-red-alt: #df1f26; --color-canon-red-hover: #ab080d; --color-canon-red-soft: rgba(200, 16, 46, 0.1); --color-text: #212529; --color-text-dark: #343a40; --color-text-muted: #6c757d; --color-bg: #fafafa; --color-surface: #ffffff; --color-border: #e5e5e5; --color-border-strong: #cccccc; --color-footer-top: #333333; --color-footer-bottom: #151515; --color-footer-text: #d1d1d1; --color-eventos-bg: #e4e4e4; --font-body: "Montserrat", system-ui, -apple-system, "Helvetica Neue", sans-serif; --font-heading: "Montserrat", system-ui, -apple-system, "Helvetica Neue", sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-3xl: 1.875rem; --fs-display-sm: 3.125rem; --fs-display-lg: 6.875rem; --fw-thin: 100; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --header-height: 72px; --page-gutter: clamp(16px, 3.5vw, 80px); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --z-dropdown: 100; --z-header: 300; --z-overlay: 400; --z-modal: 500; } :root[data-theme="dark"] { --color-text: #e7e9ec; --color-text-dark: #f5f6f8; --color-text-muted: #9aa1a9; --color-bg: #121316; --color-surface: #1c1e22; --color-border: #2c2f35; --color-border-strong: #3a3e45; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55); color-scheme: dark; } .cc-btn { gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; border: 2px solid transparent; border-radius: var(--radius-full); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .cc-btn:hover { text-decoration: none; } .cc-btn:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .cc-btn:active { transform: scale(0.98); } .cc-btn--md { padding: var(--space-2) var(--space-6); font-size: var(--fs-base); font-weight: var(--fw-regular); } .cc-btn--primary { background-color: var(--color-canon-red); color: var(--color-white); border-color: var(--color-canon-red); } .cc-btn--primary:hover { background-color: var(--color-canon-red-hover); border-color: var(--color-canon-red-hover); color: var(--color-white); } .cc-btn--outline { background-color: transparent; color: var(--color-white); border-color: var(--color-white); } .cc-btn--outline:hover { background-color: var(--color-white); color: var(--color-black); } .cc-logo { text-decoration: none; transition: opacity var(--duration-fast) var(--ease-out); } .cc-logo:hover { text-decoration: none; opacity: 0.9; } .cc-logo__img { display: block; width: clamp(118px, 8vw, 153px); height: auto; }