/* ========================================================================== Tokens del sistema de diseño ZFC Ópticas Fuente: docs/design-claude/zfc-opticas/ (Sistema de Diseño y Cierre) Dirección visual elegida: A (fondo marfil, primario azul marino, ámbar de acento) No inventar valores aquí: si falta un token, se agrega al sistema de diseño primero. ========================================================================== */ :root { /* --- Superficies --- */ --zfc-superficie-base: #FFFFFF; --zfc-superficie-calida: #F5F1EB; --zfc-superficie-hundida: #EFE9DF; --zfc-superficie-inversa: #0A1A2F; /* Fondo de los bloques que destacan sobre la página: cajas de ayuda, resúmenes, avisos. Sobre marfil son blancos; en las pantallas de compra, donde la página es blanca, se invierten a marfil. Los campos de formulario y el recuadro del packshot NO usan este token: van siempre en blanco. */ --zfc-superficie-bloque: var(--zfc-superficie-base); /* --- Texto --- */ --zfc-texto-principal: #2B2B2B; --zfc-texto-marca: #0A1A2F; --zfc-texto-secundario: #465A6A; --zfc-texto-inverso: #FFFFFF; --zfc-texto-inverso-suave: #D6DCE3; --zfc-texto-inverso-tenue: #A9B7C3; /* --- Acciones --- */ --zfc-accion-primaria: #0A1A2F; --zfc-accion-primaria-hover: #14263D; --zfc-accion-primaria-activa: #060F1C; --zfc-accion-secundaria: #465A6A; --zfc-accion-secundaria-hover:#384956; --zfc-accion-acento: #D39A2C; /* Verde de WhatsApp. Va SOLO donde significa algo (el punto de estado del flotante), no como color de marca: la marca es ámbar y marino. */ --zfc-whatsapp: #25D366; --zfc-accion-acento-hover: #BE8722; --zfc-accion-acento-activa: #A87518; --zfc-acento-texto: #8A5F14; /* ámbar legible como texto */ --zfc-accion-inversa: #FFFFFF; --zfc-accion-desactivada: #E2DED6; --zfc-accion-desactivada-txt: #8B8477; /* --- Bordes y foco --- */ --zfc-borde-sutil: #E6E0D6; --zfc-borde-medio: #CFC7B9; --zfc-borde-campo: #465A6A; --zfc-foco: #0A1A2F; --zfc-foco-inverso: #D39A2C; /* --- Comercio --- */ --zfc-precio: #0A1A2F; --zfc-precio-tachado: #6E7A85; --zfc-descuento: #A84E30; /* --- Estados --- */ --zfc-exito: #2E6B4F; --zfc-exito-fondo: #E8F1EC; --zfc-error: #B3261E; --zfc-error-fondo: #FBECEA; --zfc-aviso: #8A5F14; --zfc-aviso-fondo: #FBF2DF; --zfc-info: #465A6A; --zfc-info-fondo: #EDF1F4; /* --- Encabezado: los colores que administra la óptica --------------------- Un token por ZONA, con el valor que el sitio tiene hoy, y solo esa zona lo usa. El marfil de la barra del menú es `--zfc-superficie-calida`, que está en 17 lugares del CSS: pintar la barra cambiándolo ahí repintaría el sitio entero, que no es lo que pide quien quiere la barra azul. Quien los reescribe es `inc/apariencia.php`, y solo los que tengan un color guardado en el panel: con el panel vacío no se emite nada y lo que manda es lo que hay aquí. Los `-fuerte` y `-tenue` NO son campos del panel. Son los otros matices que cada zona ya usaba (el teléfono en blanco, las flechas de los mensajes, los iconos de la barra en marino) y copian el color de letra de su zona cuando la óptica guarda uno. Sin ellos había que elegir entre dejarlos escritos en su color de fábrica, y entonces aclarar la franja deja el teléfono en blanco sobre blanco, o unificarlos, y entonces el panel vacío ya cambiaría los iconos de la barra de marino a gris. Ver `zfc_encabezado_espejos()`. */ --zfc-encabezado-franja-fondo: var(--zfc-superficie-inversa); --zfc-encabezado-franja-texto: var(--zfc-texto-inverso-suave); --zfc-encabezado-franja-texto-fuerte: var(--zfc-texto-inverso); --zfc-encabezado-franja-texto-tenue: var(--zfc-texto-inverso-tenue); --zfc-encabezado-promo-fondo: var(--zfc-superficie-inversa); --zfc-encabezado-promo-texto: var(--zfc-texto-inverso); --zfc-encabezado-barra-fondo: var(--zfc-superficie-calida); --zfc-encabezado-barra-texto: var(--zfc-texto-principal); --zfc-encabezado-barra-texto-fuerte: var(--zfc-texto-marca); /* El botón de buscar se pinta AL REVÉS que la barra, que es lo que lo hace destacar: su fondo es el color de letra (el token de arriba) y su letra el fondo. De fábrica eso da marino con letra blanca, que es como está hoy: el blanco viene de `--zfc-texto-inverso` y no del marfil de la barra, porque el botón de hoy no lleva marfil. El hover copia el mismo campo que el fondo, así que con un color elegido el botón deja de cambiar al pasar el cursor en vez de oscurecerse hasta el color de su propio texto. */ --zfc-encabezado-barra-boton-texto: var(--zfc-texto-inverso); --zfc-encabezado-barra-boton-hover: var(--zfc-accion-primaria-hover); /* --- Tipografía --- */ --zfc-fuente-marca: 'Bodoni Moda', Georgia, 'Times New Roman', serif; /* Los titulares van en MONTSERRAT, confirmado por el cliente el 31-08-2026. Hasta esa fecha el token conmutaba con un interruptor en la cabecera, que existía para enseñarle las dos opciones en vivo, y que ya se borró. Siguen teniendo token propio y no el de la fuente de marca, porque el LOGO se queda en Bodoni: sale de --zfc-fuente-marca, que es otra cosa. El peso va en 600 y no en el de la marca: Montserrat no tiene eje óptico, así que pide más peso que Bodoni para sostener un titular grande. */ --zfc-fuente-titulos: var(--zfc-fuente-ui); --zfc-titulos-peso: 600; --zfc-fuente-ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --zfc-texto-base: 16px; --zfc-texto-min: 14px; /* Bodoni es un didone: sus trazos finos son finísimos. La fuente es variable y trae un eje óptico; si se deja en automático, a 56px el navegador elige el corte de display, que adelgaza los finos hasta casi desaparecer en pantalla. Se fija el eje en el corte de texto y se sube medio peso: se mantiene el carácter de la marca y los titulares se leen con cuerpo. */ --zfc-marca-peso: 500; --zfc-marca-opsz: 14; /* Escala tipográfica FLUIDA. Bodoni solo en H1 a H3 y siempre en peso 400. Cada tamaño es una función continua del ancho entre 375px y 1440px. Antes eran dos juegos de números con un interruptor en 900px, y eso hacía dos cosas malas a la vez. Una: el titular pasaba de 34 a 44px por UN píxel de diferencia, un 29% de golpe, así que girar una tablet cambiaba el diseño. Otra: de 1280 hacia arriba la letra ya no crecía nunca, así que en un monitor de 24 pulgadas el cuerpo seguía siendo 16px, el tamaño por defecto del navegador. Un sitio que subió la letra porque el público es adulto mayor, en escritorio no la subía nada. La parte fija va en `rem` y no en `px` a propósito: con `px` el zoom de texto del navegador deja de mover el titular, y en este público eso es justo lo que no se puede romper. Las alturas de línea pasan a ser SIN UNIDAD. En px quedaban descuadradas en cuanto el tamaño dejó de ser un número fijo: un h1 de 43px con 38px de altura de línea se pisa consigo mismo. */ --zfc-h1: clamp(34px, 1.73rem + 1.69vw, 52px); --zfc-h1-alto: 1.12; --zfc-h2: clamp(27px, 1.45rem + 1.03vw, 38px); --zfc-h2-alto: 1.19; --zfc-h3: clamp(23px, 1.24rem + 0.85vw, 32px); --zfc-h3-alto: 1.21; --zfc-h4: clamp(20px, 1.16rem + 0.38vw, 24px); --zfc-h4-alto: 1.38; --zfc-h5: clamp(17px, 1rem + 0.28vw, 20px); --zfc-h5-alto: 1.42; --zfc-h6: clamp(16px, 0.96rem + 0.19vw, 18px); --zfc-h6-alto: 1.38; --zfc-cuerpo-l: clamp(17px, 1rem + 0.28vw, 20px); --zfc-cuerpo-l-alto: 1.65; --zfc-cuerpo-m: clamp(16px, 0.96rem + 0.19vw, 18px); --zfc-cuerpo-m-alto: 1.63; /* Altura de linea de la INTERFAZ, que es lo que hereda todo el sitio. Separada de la de lectura por un motivo que solo se vio al pasar las alturas a proporcion: un numero en px lo hereda todo el mundo igual (26px para cualquier tamano), pero una PROPORCION la calcula cada elemento contra SU propio cuerpo. Con 1,63 heredado, un precio de 20px pasaba de 26 a 32,6 de caja y el nombre de una tarjeta de 26 a 29,3: la tarjeta, el pie y la ficha se llenaron de aire. 1,63 es una medida de PARRAFO y se queda para los parrafos. Un rotulo, un precio, un enlace de menu o un boton son una linea sola: no necesitan aire entre lineas que no existen. */ --zfc-interfaz-alto: 1.4; --zfc-cuerpo-s: clamp(14px, 0.85rem + 0.09vw, 15px); --zfc-cuerpo-s-alto: 1.57; --zfc-etiqueta: 12px; --zfc-etiqueta-alto: 1.33; /* --- Espaciado --- */ --zfc-esp-1: 4px; --zfc-esp-2: 8px; --zfc-esp-3: 12px; --zfc-esp-4: 16px; --zfc-esp-6: 24px; --zfc-esp-8: 32px; --zfc-esp-9: 36px; --zfc-esp-12: 48px; --zfc-esp-16: 64px; --zfc-esp-24: 96px; /* Aire de las secciones. Se sacó de la escala general porque es el valor que más se ajusta al revisar el ritmo de la página. */ --zfc-seccion-aire: var(--zfc-esp-8); --zfc-cabecera-aire: var(--zfc-esp-6); /* --- Capas --- La escalera completa de lo que se superpone. Va aquí y NO escrita a mano en cada hoja porque escribirla a mano ya falló dos veces: primero el WhatsApp contra la barra fija (los dos en 50, y decidía el orden del documento), y el arreglo de eso volvió a crear el empate un piso más arriba. Al 02-09-2026 había CUATRO selectores en 60 que se superponen entre sí: el menú del teléfono, el modal de calibres, el cajón de filtros y la barra del pedido. Cuál ganaba lo decidía el orden en que se pinta el HTML. Regla: ningún `z-index` nuevo se escribe con un número. Si algo no encaja en esta escala, se agrega un peldaño aquí. */ --zfc-capa-tarjeta: 2; /* insignias y corazón sobre la foto */ --zfc-capa-cabecera: 40; /* la cabecera fija */ --zfc-capa-mega: 45; /* mega menú, y la barra «Filtrar» pegada bajo la cabecera */ --zfc-capa-flotante: 50; /* WhatsApp: salida secundaria, cede ante todo */ --zfc-capa-barra-fija: 60; /* barras de compra y de pedido */ --zfc-capa-panel: 70; /* lo que ocupa la pantalla: menú móvil, filtros, carrito lateral */ --zfc-capa-modal: 80; /* diálogos */ --zfc-capa-saltar: 100; /* «saltar al contenido», siempre lo más alto */ /* --- Forma --- */ --zfc-radio: 0; /* el sistema es de esquinas rectas */ --zfc-radio-redondo: 999px; /* solo para píldoras y avatares */ --zfc-sombra-1: 0 1px 2px rgba(10, 26, 47, .08); --zfc-sombra-2: 0 6px 20px rgba(10, 26, 47, .10); --zfc-sombra-3: 0 18px 48px rgba(10, 26, 47, .16); /* --- Medidas de layout y componentes --- */ --zfc-contenido-max: 1280px; /* La cabecera es una tira, no una caja del grid de 12 columnas: usa el ancho de la ventana para que logo, menu, buscador e iconos quepan en una fila. Ver docs/ecommerce/09-densidad-home.md. */ --zfc-cabecera-max: 1440px; /* Zona tactil minima. 44 es el piso de Apple y de la WCAG, no un objetivo: este publico es adulto mayor y pide mas. Manda sobre TODO lo que se toca, y esa es la mitad del valor de que sea un token: hasta el 02-09-2026 estaba escrito a mano 21 veces con el valor 44 mientras el token decia 48, asi que subirlo no habria movido nada. */ --zfc-alto-tactil: 52px; --zfc-boton-s: 40px; /* Tamano del corazon de favoritos sobre la foto. Es un token porque hay TRES reglas que tienen que coincidir y que viven en hojas distintas: el boton (componentes.css), el hueco que le reservan las insignias de la tarjeta (secciones.css) y la lupa del lightbox en la ficha (ficha.css). Escrito a mano en cada una, ya se habian desincronizado en telefono y la insignia «Pruebatelos» pasaba por debajo del corazon y se cortaba. Movil por defecto, que es donde manda la zona tactil. */ --zfc-favorito-tam: var(--zfc-alto-tactil); --zfc-boton-m: 48px; --zfc-boton-l: 56px; --zfc-campo-alto: 48px; --zfc-muestra-color: 46px; --zfc-header-alto: 72px; --zfc-header-fila-alto: 76px; /* fila unica de escritorio: marca, menu, buscador e iconos */ --zfc-header-fijo-alto: 56px; --zfc-productos-fila: 4; --zfc-productos-pagina: 24; --zfc-email-ancho: 600px; } /* En escritorio el corazón sobre la foto baja a 40px: ya es holgado para un puntero, y un dedo es el que pide los 48 de la zona táctil. Aquí vivía también la segunda escala tipográfica, la que producía el salto de los 900px. Se retiró el 02-09-2026: los tamaños son `clamp()` y crecen solos con el ancho, así que no hay dos juegos de números que mantener de acuerdo. */ @media (min-width: 900px) { :root { --zfc-favorito-tam: var(--zfc-boton-s); } }