/* ========================================================================== VIVA MAR · Design Tokens v1.0 Fuente única de verdad del design system. Importar en Child Theme y en preview HTML. Generado por DARO 2026-05-26 a partir del mockup .ai de Ileana + decisiones Sergio. ========================================================================== */ :root { /* ==================================================================== COLORES — Paleta brand (extraída del mockup, hex verificados) ==================================================================== */ /* Familia AZUL — núcleo de la marca */ --vm-cyan: #00B8F0; /* Color dominante. Hero accents, fondos sec "+200 especies", waves */ --vm-cyan-soft: #5DCEF3; /* Variante clara para hover y backgrounds suaves */ --vm-azul: #0048A8; /* Botones secundarios, nav, kickers principales */ --vm-azul-dark: #003878; /* Footer, headlines en hero, sec dedicadas */ --vm-navy: #101830; /* Hero overlay, contraste máximo sobre fotos */ /* Familia VERDE — sección "Un día completo" */ --vm-verde: #00A878; /* Fondo sec parque/instalaciones */ --vm-verde-2: #00A068; /* Sombra/variante del verde */ --vm-mint: #D0F8E0; /* Caja CTA "Visitas educativas" */ /* Familia CYAN claro — sección "Momentos imperdibles" */ --vm-sky: #78D8E0; /* Fondo sec actividades */ --vm-sky-2: #90D8E8; /* Variante */ /* Acentos cálidos (decisión Sergio 26-may: se mantienen del mockup) */ --vm-amarillo: #F8B810; /* Headline accent "FRENTE AL MAR" */ --vm-amarillo-2: #F8C030; /* Variante dorado */ --vm-coral: #F80000; /* CTA "Comprar tickets" */ --vm-coral-hover: #C2351F; /* Hover del coral */ --vm-morado: #8030A8; /* Decoración pulpo sec parque */ /* Neutrales */ --vm-blanco: #FAFAFA; /* Texto sobre azules */ --vm-negro: #101018; /* Texto cuerpo sobre claros */ --vm-gris: #595959; /* Texto secundario */ --vm-gris-borde: #E8E8E5; /* Bordes sutiles */ --vm-arena: #D8D0C0; /* Wave decorativo transición hero */ /* Gradientes */ --vm-grad-azul: linear-gradient(180deg, var(--vm-cyan) 0%, var(--vm-azul-dark) 100%); --vm-grad-hero: linear-gradient(180deg, rgba(0,72,168,0.55) 0%, rgba(16,24,48,0.65) 100%); /* ==================================================================== TIPOGRAFÍA — Stack aprobado por Sergio 26-may ==================================================================== */ /* Familias (fallback siempre Geologica → system para resiliencia) */ --vm-font-display: 'dunbar-tall', 'Geologica', system-ui, -apple-system, sans-serif; --vm-font-body: 'Gotham', 'Geologica', system-ui, -apple-system, sans-serif; --vm-font-footer: 'avenir-next', 'Geologica', system-ui, sans-serif; --vm-font-deco: 'Caveat', cursive; /* Escalas (responsive con clamp) */ --vm-h1: clamp(40px, 9vw, 96px); --vm-h2: clamp(32px, 5vw, 64px); --vm-h3: clamp(24px, 3vw, 40px); --vm-h4: clamp(20px, 2.4vw, 28px); --vm-lead: clamp(17px, 1.8vw, 21px); --vm-body: 17px; --vm-small: 14px; --vm-kicker: 12px; --vm-eyebrow: 11px; /* Pesos */ --vm-w-light: 300; --vm-w-regular: 400; --vm-w-medium: 500; --vm-w-semibold: 600; --vm-w-bold: 700; --vm-w-black: 800; /* Line heights */ --vm-lh-tight: 0.95; /* Headlines */ --vm-lh-snug: 1.2; /* Sub-heads */ --vm-lh-normal: 1.55; /* Body */ --vm-lh-relaxed: 1.7; /* Long-form copy */ /* Letter spacing */ --vm-ls-tighter: -0.02em; /* H1 grande */ --vm-ls-tight: -0.01em; /* H2 */ --vm-ls-normal: 0; --vm-ls-wide: 0.08em; /* Button text */ --vm-ls-wider: 0.18em; /* Kickers */ --vm-ls-widest: 0.28em; /* Eyebrows */ /* ==================================================================== ESPACIOS — Scale 8px base ==================================================================== */ --vm-space-2xs: 4px; --vm-space-xs: 8px; --vm-space-sm: 16px; --vm-space-md: 24px; --vm-space-lg: 48px; --vm-space-xl: 80px; --vm-space-2xl: 120px; --vm-space-3xl: 160px; /* Padding de sección (vertical) */ --vm-sec-pad-sm: clamp(48px, 6vw, 80px); --vm-sec-pad-md: clamp(64px, 8vw, 120px); --vm-sec-pad-lg: clamp(80px, 12vw, 160px); /* Padding horizontal del container */ --vm-pad-x: clamp(20px, 4vw, 32px); /* ==================================================================== LAYOUT ==================================================================== */ --vm-container: 1280px; --vm-container-narrow: 880px; --vm-container-wide: 1440px; --vm-nav-h: 72px; --vm-nav-h-lg: 88px; /* ==================================================================== RADIOS / BORDES ==================================================================== */ --vm-radius-xs: 4px; --vm-radius-sm: 8px; --vm-radius-md: 16px; --vm-radius-lg: 24px; --vm-radius-pill: 999px; --vm-border: 1px solid var(--vm-gris-borde); /* ==================================================================== SHADOWS ==================================================================== */ --vm-shadow-sm: 0 2px 8px rgba(16, 24, 48, 0.08); --vm-shadow-md: 0 8px 24px rgba(16, 24, 48, 0.12); --vm-shadow-lg: 0 18px 40px rgba(16, 24, 48, 0.18); --vm-shadow-glow: 0 0 0 4px rgba(0, 184, 240, 0.25); /* ==================================================================== MOTION ==================================================================== */ --vm-ease: cubic-bezier(0.4, 0, 0.2, 1); --vm-ease-out: cubic-bezier(0, 0, 0.2, 1); --vm-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --vm-dur-fast: 0.15s; --vm-dur-base: 0.3s; --vm-dur-slow: 0.6s; /* ==================================================================== Z-INDEX (escala consistente) ==================================================================== */ --vm-z-back: -1; --vm-z-base: 1; --vm-z-hover: 10; --vm-z-overlay: 50; --vm-z-nav: 100; --vm-z-modal: 1000; --vm-z-toast: 2000; /* ==================================================================== BREAKPOINTS (referencia — usar en @media queries) Respetan los de Divi 5 para no chocar ==================================================================== */ /* mobile-first defaults --vm-bp-sm: 480px --vm-bp-md: 768px ← Divi mobile breakpoint --vm-bp-lg: 980px ← Divi tablet/desktop breakpoint --vm-bp-xl: 1280px --vm-bp-2xl: 1600px */ } /* ========================================================================== @font-face — fuentes auto-hosteadas en Child Theme Asume que los archivos OTF viven en /wp-content/themes/divi-child/assets/fonts/ Para preview HTML local, ajustar paths a ../05-assets/fonts/ ========================================================================== */ @font-face { font-family: 'Gotham'; src: url('../05-assets/fonts/Gotham-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../05-assets/fonts/Gotham Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } /* Avenir como fallback local mientras Adobe Fonts Web Kit no esté activo */ @font-face { font-family: 'avenir-next-local'; src: url('../05-assets/fonts/Avenir.ttc') format('truetype-collection'); font-weight: 400 800; font-display: swap; } /* Dunbar Low — viene de Adobe Fonts via Web Kit, no @font-face local */ /* En el child theme se carga via: */ /* ========================================================================== RESETS / NORMALIZACIÓN BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Evita scroll horizontal cuando hay elementos absolute que se salen del viewport (ej. pingüino flotante de Sec 3 con right negativo) */ overflow-x: hidden; } body { overflow-x: hidden; } body { font-family: var(--vm-font-body); font-size: var(--vm-body); line-height: var(--vm-lh-normal); color: var(--vm-negro); background: var(--vm-blanco); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } /* Selección de texto brandeada */ ::selection { background: var(--vm-cyan); color: var(--vm-blanco); } /* ========================================================================== UTILIDADES DE TEXTO (helpers reutilizables) ========================================================================== */ .vm-h1 { font-family: var(--vm-font-display); font-weight: var(--vm-w-bold); font-size: var(--vm-h1); line-height: var(--vm-lh-tight); letter-spacing: var(--vm-ls-tighter); text-transform: uppercase; } .vm-h2 { font-family: var(--vm-font-display); font-weight: var(--vm-w-bold); font-size: var(--vm-h2); line-height: var(--vm-lh-tight); letter-spacing: var(--vm-ls-tight); text-transform: uppercase; } .vm-h3 { font-family: var(--vm-font-display); font-weight: var(--vm-w-bold); font-size: var(--vm-h3); line-height: var(--vm-lh-snug); } .vm-h4 { font-family: var(--vm-font-body); font-weight: var(--vm-w-semibold); font-size: var(--vm-h4); line-height: var(--vm-lh-snug); } .vm-lead { font-family: var(--vm-font-body); font-weight: var(--vm-w-regular); font-size: var(--vm-lead); line-height: var(--vm-lh-normal); } .vm-body { font-family: var(--vm-font-body); font-weight: var(--vm-w-regular); font-size: var(--vm-body); line-height: var(--vm-lh-normal); } .vm-small { font-family: var(--vm-font-body); font-weight: var(--vm-w-regular); font-size: var(--vm-small); line-height: var(--vm-lh-normal); } .vm-kicker { font-family: var(--vm-font-body); font-weight: var(--vm-w-semibold); font-size: var(--vm-kicker); line-height: 1; letter-spacing: var(--vm-ls-wider); text-transform: uppercase; } .vm-eyebrow{ font-family: var(--vm-font-body); font-weight: var(--vm-w-bold); font-size: var(--vm-eyebrow); line-height: 1; letter-spacing: var(--vm-ls-widest); text-transform: uppercase; }