/* ========================================================================== GOLINA — TOKENS Este es el ÚNICO archivo que cambia si cambia la marca. Regla dura: aquí sólo va :root. Ni un selector, ni una regla. Y al revés: golina-base.css no puede tener un solo valor literal. Fuente de los colores y tipografías: Brand Book.pdf (IDENTIDAD VISUAL). ========================================================================== */ :root { /* ---------------------------------------------------------- COLOR Primero la paleta literal del manual (para poder citarla tal cual), y debajo los roles, que son los que usa la implementación. */ /* Paleta principal */ --golina-naranjo: #EE7203; /* C0 M65 Y100 K0 · color principal */ --golina-negro: #000000; --golina-rojo: #E8402E; --golina-verde: #4EA534; --golina-lima: #98C12D; --golina-blanco: #FFFFFF; /* Paleta secundaria */ --golina-turquesa: #32B5BE; --golina-rosa: #EBADCF; --golina-morado: #833A87; --golina-azul-marino: #1F2E54; --golina-rojo-oscuro: #931914; --golina-celeste: #6BB9E7; /* Neutros de apoyo — no son de marca, cumplen función */ --golina-gris-texto: #474747; --golina-gris-suave: #8F8F8F; --golina-fondo-neutro: #EAEBE6; --golina-crema: #F9F8F3; /* Derivado funcional: naranjo para TEXTO sobre fondos claros. El #EE7203 del manual da 2,98:1 sobre blanco y no llega al 4,5:1 que exige la WCAG AA. Este tono conserva el matiz y da 5,5:1 sobre blanco y 4,7:1 sobre el gris del pie. Los RELLENOS (topbar, insignias, paginación) siguen usando el naranjo original. */ --golina-naranjo-texto: #A85000; /* ---------- ROLES: lo que usa la implementación ---------- */ --c-bg: var(--golina-blanco); --c-bg-alt: var(--golina-crema); --c-surface: var(--golina-fondo-neutro); --c-text: var(--golina-gris-texto); --c-text-strong: var(--golina-negro); --c-text-muted: var(--golina-gris-suave); /* Derivado funcional: gris de los marcadores de posición. El gris suave del sistema da 3,2:1 sobre blanco y no llega al 4,5:1 de la WCAG AA. Éste es el gris más claro que sí pasa (4,5:1). */ --c-placeholder: #767676; --c-link: var(--golina-naranjo-texto); --c-link-hover: var(--golina-negro); /* Acento de marca: rellenos decorativos (topbar, insignias, paginación). Lleva SIEMPRE texto negro: el blanco sobre naranjo no pasa AA. */ --c-accent: var(--golina-naranjo); --c-accent-contrast: var(--golina-negro); /* Llamada a la acción: verde lima del manual, 10:1 con texto negro. Alternativas del manual igualmente válidas si se quiere cambiar: Rosa #EBADCF → 11,4:1 Celeste #6BB9E7 → 9,7:1 Turquesa #32B5BE → 8,5:1 */ --c-cta: var(--golina-lima); --c-cta-contrast: var(--golina-negro); --c-cta-hover: var(--golina-negro); --c-cta-hover-text: var(--golina-blanco); /* Líneas divisorias: negro de marca rebajado, para que la línea pertenezca a la paleta y no sea un gris cualquiera. */ --c-border: rgba(0, 0, 0, .12); --c-border-strong: rgba(0, 0, 0, .24); /* Estados */ --c-sale: var(--golina-rojo); --c-sale-contrast: var(--golina-negro); --c-success: var(--golina-verde); --c-error: var(--golina-rojo-oscuro); /* ---------------------------------------------------- TIPOGRAFÍA */ --f-display: "Dunbar Tall", "Satoshi", system-ui, sans-serif; --f-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif; /* Los clientes de correo no cargan webfonts: todo token tipográfico necesita su equivalente websafe declarado. */ --f-display-email: Georgia, "Times New Roman", serif; --f-body-email: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Escala fluida: un token responde en los tres breakpoints y evita tener tamaños distintos hardcodeados por media query. */ --fs-xs: clamp(11px, 0.20vw + 10.2px, 12px); --fs-sm: clamp(12px, 0.40vw + 10.5px, 14px); --fs-md: clamp(14px, 0.40vw + 12.5px, 16px); --fs-lg: clamp(18px, 1.20vw + 13.5px, 24px); --fs-xl: clamp(28px, 3.75vw + 10px, 64px); --lh-tight: 1.15; --lh-body: 1.6; --ls-ui: 0.01em; /* tracking 10 del manual (10/1000 em) */ /* ----------------------------------------------------- ESPACIADO */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; --sp-7: 96px; /* -------------------------------------------------------- LAYOUT */ --logo-w: 190px; --logo-w-t: 170px; --logo-w-m: 140px; --tap-min: 44px; /* objetivo táctil mínimo (WCAG 2.5.8 / iOS HIG) */ /* Iconos de caja: círculo y pictograma. El pictograma casi llena el círculo a propósito — con el aire que traían no se distinguían. */ --icon-box: 72px; --icon-glyph: 56px; --icon-box-m: 60px; --icon-glyph-m: 46px; /* Separación entre logos de la tira de medios y reconocimientos. Es la que ya tenía la fila de TVN / 13 / UCV, y ahora la comparten las dos. */ --logos-gap: 80px; /* Esquinas de tarjetas e imágenes (producto, blog, relacionadas). */ --radius-card: 16px; /* --- Imágenes decorativas ------------------------------------------- Los PNG de producto que flotan sobre las tarjetas y la portada. La plantilla los colocaba con píxeles y escalas distintas por dispositivo, y en móvil quedaban fuera de pantalla. Ahora el ancho crece con la ventana pero con suelo y techo, así que la composición es la misma a cualquier tamaño. Los dos primeros son porcentajes del ancho de su tarjeta o de la portada, con un mínimo en píxeles para que no desaparezcan en pantallas muy estrechas. */ --deco-tarjeta: max(150px, 32%); --deco-portada: max(110px, 28.5%); /* Banda que se reserva al pie de la tarjeta cuando las columnas se apilan: es el hueco donde se apoya la imagen sin tapar el texto. */ --deco-banda: clamp(150px, 46vw, 260px); /* La de los recortes de prensa es más alta: ahí caben los dos, y superpuestos, que es como se ven en escritorio. */ --deco-banda-recortes: clamp(300px, 92vw, 400px); /* Proporción de las columnas cuyo único contenido es un fondo. Al apilarse se quedan sin nada que las estire y colapsan a 1px. En escritorio rondan el 1,2 de ancho entre alto, así que se conserva. */ --col-fondo-ratio: 6 / 5; /* Separación de las tiras de logos en móvil. La de escritorio (80px) deja un solo logo por fila en una pantalla estrecha. */ --logos-gap-m: var(--sp-5); /* Ancho de lectura de las preguntas frecuentes. En px y no en "ch" porque la pregunta va en Dunbar Tall y la respuesta en Satoshi: con "ch" cada una mediría distinto y los bordes derechos no coincidirían. */ --faq-measure: 720px; /* --- Pie de página --------------------------------------------------- Verde Golina con texto negro (6,8:1). Se eligió el verde y no el naranjo por dos motivos: el naranjo ya carga con los acentos de todo el sitio, y sobre naranjo el texto negro baja a 6,0:1 y el blanco no llega ni a 3:1. El lima queda reservado para los botones. */ --c-footer-bg: var(--golina-verde); --c-footer-text: var(--golina-negro); --c-footer-link: var(--golina-negro); --c-footer-border: rgba(0, 0, 0, .18); --grid-cols: 4; --grid-cols-t: 3; --grid-cols-m: 2; /* --------------------------------------------- FORMA Y MOVIMIENTO */ --radius: 50px; /* Woostify viene con botones tipo pill */ --radius-sm: 4px; --dur-fast: .18s; --dur-base: .35s; --ease: cubic-bezier(.22, 1, .36, 1); /* ------------------------------- Z-INDEX: registro central Tenerlos aquí evita la escalada de "le pongo 999999 a ver si ahora". */ --z-base: 1; --z-sticky: 10; --z-overlay: 99999; --z-header: 100000; --z-cart: 100000; --z-loader: 1000000; }