/* ============================================================ TRASLADO TU MASCOTA — Capa 1: Tokens Ningún otro archivo del theme debe declarar un hex, un px de radio o una duración. Todo se consume desde acá. ============================================================ */ :root { /* ---------- 1. Primitivas de color ---------- Rampa teal derivada del globo del logo (#0D7C89 = teal-500). El resto está calculado alrededor manteniendo el matiz ~186°. */ --teal-50: #E9F5F6; --teal-100: #C7E7E9; --teal-200: #93D2D6; --teal-300: #53B4BB; --teal-400: #22949F; --teal-500: #0D7C89; /* color de marca — tomado del logo */ --teal-600: #0A6570; --teal-700: #08505C; --teal-800: #073E48; --teal-900: #062B33; /* Menta: el verde de los continentes del logo. Solo sobre oscuro. */ --mint-300: #4FD3A8; --mint-400: #19BB89; --mint-500: #129870; /* Ámbar: acento cálido. Guiño al amarillo de ambas banderas. NUNCA como texto sobre fondo claro — falla contraste (1.70:1). */ --amber-300: #FBD37A; --amber-400: #F5B31E; --amber-500: #D9950A; --amber-600: #9A6A05; /* Tinta: negros teñidos de teal, no neutros. Empatan con el fondo negro del logo sin verse como un #000 plano. */ --ink-950: #0B1214; --ink-900: #121B1D; --ink-800: #1C282A; --ink-700: #2B3A3C; --ink-600: #4A5B5E; --ink-500: #6E8083; --ink-400: #94A5A7; --ink-300: #B9C6C7; /* Papel: blancos con un susurro de verde, no crema. Mantiene la unidad con el teal y evita el look editorial. */ --paper-0: #FFFFFF; --paper-50: #F3F6F5; --paper-100: #E7EDEB; --paper-200: #D5DDDB; /* Señales de estado */ --red-500: #C4362F; --red-50: #FBEDEC; --green-600: #1E7A4C; --green-50: #E9F5EF; /* ---------- 2. Roles semánticos ---------- Los componentes leen solo desde acá. */ --bg-page: var(--paper-50); --bg-surface: var(--paper-0); --bg-sunken: var(--paper-100); --bg-inverse: var(--ink-950); --bg-brand-soft: var(--teal-50); --fg-primary: var(--ink-900); --fg-secondary: var(--ink-600); --fg-muted: var(--ink-500); --fg-brand: var(--teal-700); --fg-on-brand: var(--paper-0); --fg-on-dark: var(--paper-0); --fg-on-dark-soft: var(--ink-300); --fg-on-amber: var(--ink-900); --border: var(--paper-200); /* divisores decorativos */ --border-control: #7C8E90; /* bordes de inputs — 3:1 mínimo */ --border-brand: var(--teal-200); --action: var(--teal-600); /* 6.76:1 sobre blanco */ --action-hover: var(--teal-500); /* aclara al pasar, sigue en AA */ --action-press: var(--teal-700); --accent: var(--amber-400); --accent-hover: var(--amber-300); --accent-press: var(--amber-500); --focus-ring: var(--amber-400); /* ámbar: visible sobre claro y oscuro */ /* ---------- 3. Tipografía ---------- Figtree variable cubre display + cuerpo con un solo archivo. Space Mono solo para códigos IATA, fechas y números de guía. */ --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Escala fluida. El mínimo es el valor en móvil (360px), el máximo el de escritorio (1280px). */ --fs-caption: 0.75rem; /* 12 */ --fs-small: 0.875rem; /* 14 */ --fs-body: 1rem; /* 16 */ --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --fs-h3: clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem); --fs-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem); --fs-h1: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem); --lh-tight: 1.08; /* h1, h2 */ --lh-snug: 1.25; /* h3, h4 */ --lh-normal: 1.6; /* cuerpo */ --lh-loose: 1.75; /* párrafos largos de FAQ */ --ls-tight: -0.022em; /* titulares grandes */ --ls-normal: -0.006em; --ls-wide: 0.08em; /* eyebrows y códigos IATA */ --measure: 62ch; /* ancho máximo de lectura */ /* ---------- 4. Espaciado ---------- Escala de 4px. Los saltos grandes son fluidos. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-section: clamp(3.5rem, 2rem + 6vw, 6.5rem); /* aire entre secciones */ --container: 1180px; --container-text: 720px; --gutter: clamp(1.25rem, 4vw, 2.5rem); /* ---------- 5. Radios ---------- Generosos: el logo es un globo y la referencia visual es redondeada. La consistencia del radio es lo que hace que un sitio se lea como un sistema y no como partes sueltas. */ --radius-xs: 6px; --radius-sm: 10px; /* chips, badges cuadrados */ --radius-md: 14px; /* inputs, botones no-pill */ --radius-lg: 20px; /* tarjetas */ --radius-xl: 28px; /* paneles, marcos de foto */ --radius-pill: 999px; /* CTAs y códigos IATA */ /* ---------- 6. Sombras ---------- Teñidas de teal, no negras. Una sombra gris sobre un fondo verdoso se ve sucia; teñirla la integra. */ --shadow-xs: 0 1px 2px rgba(6, 43, 51, 0.06); --shadow-sm: 0 2px 4px rgba(6, 43, 51, 0.06), 0 1px 2px rgba(6, 43, 51, 0.04); --shadow-md: 0 6px 16px rgba(6, 43, 51, 0.08), 0 2px 4px rgba(6, 43, 51, 0.05); --shadow-lg: 0 16px 40px rgba(6, 43, 51, 0.12), 0 4px 8px rgba(6, 43, 51, 0.06); --shadow-action: 0 4px 14px rgba(13, 124, 137, 0.30); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* ---------- 7. Movimiento ---------- Rápido y con salida suave. Nada por encima de 450ms: una interfaz lenta se percibe como una interfaz rota. */ --dur-instant: 90ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 380ms; --ease-out: cubic-bezier(0.20, 0, 0, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1); /* ---------- 8. Capas ---------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-whatsapp: 400; --z-modal: 500; } /* ============================================================ Bloques oscuros (hero, footer, secciones invertidas). Se aplica con data-theme="dark" en la
, no en : el sitio no tiene modo oscuro global, tiene secciones oscuras. ============================================================ */ [data-theme="dark"] { --bg-page: var(--ink-950); --bg-surface: var(--ink-900); --bg-sunken: var(--ink-800); --bg-brand-soft: rgba(13, 124, 137, 0.16); --fg-primary: var(--paper-0); --fg-secondary: var(--ink-300); --fg-muted: var(--ink-400); --fg-brand: var(--mint-300); --border: rgba(255, 255, 255, 0.12); --border-control: rgba(255, 255, 255, 0.32); --border-brand: rgba(79, 211, 168, 0.35); --action: var(--mint-400); --action-hover: var(--mint-300); --action-press: var(--mint-500); --fg-on-brand: var(--ink-950); --shadow-action: 0 4px 18px rgba(25, 187, 137, 0.28); } /* Respeta la preferencia del sistema sin desactivar nada. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }