/* =========================================================================== Paracas: tokens =========================================================================== Los valores salen del canvas aprobado «Ondas y Vetas»; las reglas, del Design System (E1.4) y del UI-Kit (E2.5). Los componentes usan SIEMPRE el rol semántico, nunca el número. Si mañana cambia la paleta, se toca aquí y en ningún sitio más. ======================================================================== */ /* --------------------------------------------------------------------------- Montserrat, autohospedada. Es la sustituta acordada de Gotham, que es la del brandbook pero no tiene licencia web confirmada —se cobra por pageviews, así que no se puede asumir—. La escala y los pesos están definidos por token, no por familia: si Gotham entra algún día, cambia --paracas-display y --paracas-body y nada más. Autohospedarla no es solo rendimiento: es lo que permite que la CSP diga font-src 'self' sin una sola excepción. Google la sirve como FUENTE VARIABLE, con el eje wght de 100 a 900. Los cinco pesos que pedimos devolvían el mismo archivo byte a byte, así que aquí hay dos ficheros y no diez: uno por subconjunto, con el rango declarado en font-weight. --------------------------------------------------------------------------- */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/montserrat-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ----------------------------------------------------------------------- Paleta de marca — Brandbook s18, verbatim de la lámina. -------------------------------------------------------------------- */ /* Superficie, marca, elemento gráfico, aureola, íconos. NUNCA texto pequeño: sobre blanco da 4,16 y AA pide 4,5. La regla sigue vigente en todo el sitio MENOS EN UN SITIO, y conviene leer la excepción antes de «arreglarla»: Las cards de PRODUCTOS DESTACADOS de la portada llevan este azul de fondo con el texto en blanco. Es una decisión del cliente, tomada con los tres números delante: el título de 20 px en negrita pasa (pide 3 y da 4,16), pero el eyebrow de 12 px y la descripción de 16 px piden 4,5 y se quedan a 0,34. Está escrito así a propósito, igual que el botón de WhatsApp. Si algún día se quiere el blanco sin perder AA, la salida NO es cambiar de azul: es #007BC0 —el mismo tono 201 y la misma saturación, dos puntos de luminosidad por debajo—, que da 4,57 y a simple vista no se distingue de este. */ --paracas-azul: #0082ca; /* Texto pequeño, enlaces y bordes de foco. Sobre blanco da 6,19. Este es el que va en los , no el de marca. */ --paracas-azul-texto: #00669e; /* Fondos profundos y superficies invertidas. */ --paracas-azul-hondo: #0a2e45; /* LA TINTA NO ES NEGRO: es un marrón muy oscuro, y es parte del carácter cálido de la marca. Se nota en textos largos. No sustituir por #000. */ --paracas-ink: #241914; --paracas-ground: #ffffff; --paracas-surface: #f6fafd; /* Azul lavado: el cuerpo de las cards. */ --paracas-surface-alt: #eaf4fb; /* La veta de los productos transparentes: se ve la madera, no un tono. */ --paracas-celeste: #8ec9ec; --paracas-rule: #eaf4fb; --paracas-rule-fuerte: #bfd9ea; --paracas-disabled: #9aa7b1; --paracas-ok: #16794c; --paracas-error: #c8461e; /* ----------------------------------------------------------------------- El verde de WhatsApp. NO ES DE LA PALETA DE PARACAS: es de la marca ajena a la que enlaza, y por eso vive aquí abajo y no entre los roles. Un botón del sitio es azul; este es verde porque no promete algo de Paracas, promete abrir WhatsApp. El hex ya estaba escrito a mano en .paracas-flotante. Ahora que lo usan dos piezas, tiene que haber un solo sitio donde cambiarlo. -------------------------------------------------------------------- */ --paracas-whatsapp: #25d366; --paracas-whatsapp-hover: #1eb85a; /* ----------------------------------------------------------------------- Roles. Los componentes usan estos. -------------------------------------------------------------------- */ --color-texto: var(--paracas-ink); /* El canvas NO tiene ningún gris ni marrón intermedio: todo el texto secundario —meta de card, label de tono, nota de paso— va en el azul de texto. Aquí hubo un #4e4038 inventado; se retiró. */ --color-texto-suave: var(--paracas-azul-texto); --color-texto-invertido: var(--paracas-ground); --color-titular: var(--paracas-ink); --color-fondo: var(--paracas-ground); --color-fondo-suave: var(--paracas-surface); --color-fondo-card: var(--paracas-surface-alt); --color-fondo-marca: var(--paracas-azul); --color-fondo-hondo: var(--paracas-azul-hondo); --color-borde: var(--paracas-rule); --color-borde-fuerte: var(--paracas-rule-fuerte); --color-enlace: var(--paracas-azul-texto); --color-foco: var(--paracas-azul-texto); /* ----------------------------------------------------------------------- Tonos de madera — acento por categoría. Del brandbook s21, muestreados de la lámina. Son ACENTO: van en el eyebrow del hero, el borde del módulo diferenciador, la card de categoría de la portada y el círculo del ícono. Nunca fondos de sección completos, y nunca sustituyen al azul en botones, enlaces ni chips. Los cuatro pares están medidos y todos pasan AA para texto pequeño: Haya 11,87; Abeto 7,76; Cambara 6,83; Sapelli 15,11. Si se retoca cualquier hex, hay que volver a medir. -------------------------------------------------------------------- */ --tono-haya: #f7d0a7; /* interior */ --tono-abeto: #e2a248; /* exterior */ --tono-cambara: #e28f67; /* pisos */ --tono-sapelli: #500b02; /* tintes — el único con texto blanco */ /* Son CUATRO. El brandbook enseña ocho, pero el canvas solo usa estos, uno por categoría. Los otros cuatro estaban aquí sin que nadie los pintara. */ /* ----------------------------------------------------------------------- Forma -------------------------------------------------------------------- */ --radio-s: 6px; --radio-m: 10px; --radio-12: 12px; /* filas de descarga y pasos de la ficha */ --radio-l: 14px; --radio-pill: 999px; --sombra: 0 1px 2px rgb(36 25 20 / 8%); --sombra-alta: 0 3px 14px rgb(10 46 69 / 22%); /* ----------------------------------------------------------------------- El arco — la corona del óvalo del logo. 16/7 es la proporción medida de la aureola (992 × 434 px) y la constante de la que se deriva todo el bloque. Tres alturas, y solo tres: antes había cinco sobre la misma curva y la amplitud cambiaba en cada uso sin que nadie lo hubiera decidido. -------------------------------------------------------------------- */ --arco-ratio: 2.2857; --arco-alto-s: 24px; /* cards de producto, tiles de fotografía */ --arco-alto-m: 40px; /* cards de categoría, sistema de pintado */ --arco-alto-l: 64px; /* hero y pie */ /* ----------------------------------------------------------------------- El sello: el óvalo del logo, montado a caballo del borde de la banda azul del hero. Sin píldora blanca desde el 20 de octubre. DOS NÚMEROS Y NO MÁS, porque de ellos dependen tres cosas que antes vivían separadas y se desincronizaban: cuánto asoma el sello sobre el arco, cuánto hueco tiene que reservarle la banda por arriba, y el propio alto de la píldora. Cuando el padding de la banda era un valor suelto, bajarlo metió el titular por debajo del sello sin que ninguna regla se quejara. --sello-sube es lo que asoma por encima del borde de la banda. El arco vuela --arco-alto-l (64), así que 51 deja unos 13 px de curva limpia arriba. Pasar de 64 y el sello sale por encima de la curva. --sello-alto es el alto del logo, que ya no lleva padding: 100 px, cerca de los 112 que medía la píldora, para que la marca no encoja al perder el blanco de alrededor. -------------------------------------------------------------------- */ --sello-alto: 100px; --sello-sube: 51px; /* ----------------------------------------------------------------------- Espaciado. Unidad de 4 px; todo es múltiplo. -------------------------------------------------------------------- */ --u: 4px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; /* ----------------------------------------------------------------------- Ritmo vertical de las bandas. Esto no existía, y esa ausencia es la mitad del «todo se ve muy grande». Cada sección elegía su propio padding a mano: había NUEVE ritmos distintos conviviendo —24, 32, 40, 48, 56, 64, 80 y 128 px— y dos de ellos escritos en píxeles crudos, fuera de la unidad de 4. Son tres tokens y solo tres. Si una banda necesita un cuarto valor, la pregunta correcta es por qué, no añadir el token. -------------------------------------------------------------------- */ --seccion-y: var(--space-9); /* 48 — bandas sobre blanco */ --banda-y: var(--space-9); /* 48 — bandas de color y módulos */ /* El aire entre una banda con arco y lo que tiene encima. Era space-10 + arco-alto-l = 128 px en tres puntos del layout, y es lo que más alarga la página al hacer scroll. LO QUE BAJA ES EL SUMANDO, NO LA FLECHA: --arco-alto-l está atado a --arco-ratio y a la posición del sello del hero. Tocarlo descuadra las dos cosas a la vez. */ --banda-separacion: calc(var(--space-8) + var(--arco-alto-l)); /* 104 */ /* ----------------------------------------------------------------------- Tipografía MÍNIMO 16 px PARA TEXTO CORRIDO. El target son maestros carpinteros de 30 a 60 años: la presbicia empieza a los 45 y el 80 % entra desde el móvil. No hay margen para cuerpos de 14 px en contenido. -------------------------------------------------------------------- */ --paracas-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --paracas-body: var(--paracas-display); /* Solo para datos que se leen carácter a carácter: hex de la carta de color, códigos. El canvas la usa ahí y en ningún otro sitio. */ --paracas-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace; /* * LOS TOPES SON DE PANTALLA, NO DEL CANVAS. El canvas está maquetado a 1280 * fijos y sus titulares se transcribieron literales: 60 / 60 / 56 / 48 / 40 / * 32. Medido en la portada, eso dejaba el claim del hero en 60 px sobre un * cuerpo de 16 —ratio 3,75×— y el cliente lo leyó como «todo se ve muy * grande». Una escala de pantalla se queda en 2,5–3×; esta está en 2,75×. * * Y los MÍNIMOS importan más que los máximos, que es lo que no se vio la * primera vez: con --t-display en 2.4rem, 6vw solo supera los 38,4 px a * partir de 640 px de viewport. En un móvil de 390 el clamp() se resolvía * siempre al mínimo, así que el hero no era fluido: era un tamaño fijo grande * con un vw decorativo delante. */ --t-display: clamp(1.875rem, 4.4vw, 2.75rem); /* 44 — hero de la portada */ --t-h1-grande: clamp(1.75rem, 4vw, 2.75rem); /* 44 — H1 de landing */ --t-h1: clamp(1.625rem, 3.6vw, 2.5rem); /* 40 — catálogo y ficha */ --t-h2-grande: clamp(1.5rem, 3vw, 2.25rem); /* 36 — sección de portada */ --t-h2-medio: clamp(1.375rem, 2.6vw, 1.875rem); /* 30 — módulo de landing */ --t-h2: clamp(1.25rem, 2.2vw, 1.625rem); /* 26 — ficha y bloques menores */ --t-h3: 1.25rem; /* 20 — card de producto */ --t-body: 1rem; --t-intro: 1.25rem; /* 20 — intro bajo el H1 */ --t-small: 0.875rem; --t-mini: 0.8125rem; /* 13 — topbar y barra del pie */ --t-micro: 0.75rem; /* 700, no 800. Montserrat entra como fuente variable con el eje wght de 400 a 800, así que esto no añade un archivo ni un byte: es el mismo woff2. El peso pesa tanto como el tamaño, y con todos los titulares en mayúsculas el 800 convertía cada h2 en un bloque macizo. */ --peso-titular: 700; --tracking-titular: -0.025em; --tracking-eyebrow: 0.14em; /* 1,05 se sostenía a 60 px; a 44 aprieta. El interlineado de titular tiene que subir cuando el cuerpo del titular baja, o las dos líneas del claim se tocan. */ --leading-titular: 1.12; --leading-body: 1.5; /* ----------------------------------------------------------------------- Retícula. Contenedor 1200 con canaleta de 40 → contenido útil 1120. Era 1280/1200. El 1200 útil coincidía con el viewBox del arco, y ese es el motivo por el que estaba escrito así, pero la coincidencia era estética y no funcional: paracas_arco() emite preserveAspectRatio="none", de modo que el arco se estira a cualquier ancho, y además los arcos van a ancho completo del viewport, no del contenedor. Estrechar el contenedor es la palanca más barata que hay para acortar la línea de texto, que a 1200 útiles con cuerpo de 16 px se pasaba de 100 caracteres allí donde no había un tope en ch. -------------------------------------------------------------------- */ --contenedor: 1200px; --canaleta: 40px; /* ----------------------------------------------------------------------- Área táctil mínima. El target trabaja con guantes. -------------------------------------------------------------------- */ --tactil: 44px; /* 150 ms es el valor de los estados interactivos en design-system.html y en ui-kit.html. La CURVA no existe en ningún archivo del proyecto: esta es decisión nueva y queda anotada como deuda del sistema, que es lo que pide E1.4 §5 cuando aparece un token que no estaba. */ --duracion: 150ms; --curva: cubic-bezier(0.2, 0, 0.2, 1); --z-contenido: 1; --z-cabecera: 100; --z-flotante: 200; } @media (max-width: 640px) { :root { --canaleta: 24px; /* A ancho completo un arco de 64 px se come media pantalla en un móvil. Se reduce la FLECHA, no el ancho. */ --arco-alto-l: 40px; --arco-alto-m: 28px; /* El sello baja CON el arco, y por eso está aquí y no en components.css: lo que puede asomar depende de lo que vuele la curva, y los dos números tienen que moverse a la vez o el sello sale por encima. Con el arco en 40, 26 de subida deja los mismos ~13 px de curva limpia que en escritorio. El alto es el del logo, sin padding. */ --sello-alto: 64px; --sello-sube: 26px; } } /* La topografía ya no se declara aquí: dejó de ser una imagen de fondo. Ahora se incrusta con paracas_topo() para poder dibujar cada trazo, y quien decide su color y su opacidad es la banda, con --topo-trazo y --topo-opacidad. */ :root { /* EL PINCEL: el degradado que hace de máscara en toda entrada del sitio. No es un fundido. Un fundido hace aparecer la pieza entera a la vez; esto es un borde que avanza, con la inclinación de una mano y el rastro húmedo detrás. Los cinco escalones son eso: el trazo no termina en seco, se va aclarando 25 puntos antes de desaparecer. Vive en un token porque lo comparten cosas que no se parecen en nada —un titular, un patrón de fondo— y si cada una lo escribiera por su cuenta el sitio tendría dos pinceles distintos en la misma pantalla. */ --paracas-pincel: linear-gradient( 96deg, #000 0 32%, rgb(0 0 0 / 92%) 37%, rgb(0 0 0 / 55%) 44%, rgb(0 0 0 / 18%) 52%, transparent 60% ); }