:root { --external-primary: #287452; --external-secondary: #3f3f3f; --external-primary-soft: #8ab9a5; --external-primary-dark: #1f5c3e; --external-secondary-soft: #b3b2b2; --external-light: #e5e4e4; --external-white: #ffffff; /* Neutros fríos tomados de los materiales que fabricamos: aluminio anodizado, PVC y vidrio. Conviven con los grises cálidos de arriba; no los reemplazan. */ --g-carbon: #23262a; --g-vidrio: #f6f8f9; /* Archivo y Asap: dos familias de Omnibus-Type (Buenos Aires). Archivo titula y etiqueta; Asap sostiene el texto corrido. */ --font-display: 'Archivo', 'Segoe UI', Tahoma, sans-serif; --font-body: 'Asap', 'Segoe UI', Tahoma, sans-serif; /* ── Escala tipográfica ─────────────────────────────────────────── Siete pasos, uno por rol. Nadie escribe font-size a mano: se elige el paso que corresponde al papel que cumple el texto. Así dos títulos de sección miden igual aunque vivan en vistas distintas. Los pasos grandes usan clamp() para no necesitar media queries; el valor de la izquierda es el de teléfono y el de la derecha el de escritorio. 390px 1440px --fs-hero h1 de hero 30.4px 57.6px --fs-title h2 de sección 28px 41.6px --fs-title-sm h2 dentro de página 21.6px 28px --fs-lead párrafo de entrada 17.3px 19.2px --fs-sub h3 de tarjeta/bloque 17.6px 17.6px --fs-body texto corrido 16px 16px --fs-small apoyo, botones, meta 14.1px 14.1px --fs-label eyebrow y rótulos 11.2px 11.2px --fs-title-sm existe por la ficha de producto: ahí el nombre del producto es el título de la página y los bloques internos ("Más en Mamparas") necesitan un escalón abajo para no empatarle. ─────────────────────────────────────────────────────────────── */ --fs-hero: clamp(1.9rem, 7.5vw, 3.6rem); --fs-title: clamp(1.75rem, 5.2vw, 2.6rem); --fs-title-sm: clamp(1.35rem, 3.6vw, 1.75rem); --fs-lead: clamp(1.08rem, 3.6vw, 1.2rem); --fs-sub: 1.1rem; --fs-body: 1rem; --fs-small: 0.88rem; --fs-label: 0.7rem; /* ── Hover ──────────────────────────────────────────────────────── Un solo gesto en toda la app: el hover no le cambia el color al botón, lo corre un escalón dentro de su propia escala. relleno → el fondo baja al tono oscuro de ese mismo color sin fondo → aparece el tinte del 8% de su propio color ya teñido → el tinte sube al siguiente escalón (16%) Cada color tiene su escala y el hover se mueve dentro de ella, nunca salta a otra. Ningún botón inventa un valor intermedio: verde 0 → 8% → 16% → #287452 → #1f5c3e neutro 0 → 12% → #ffffff → #e5e4e4 Por eso un botón blanco sobre fondo oscuro se apaga a --external-light y no se tiñe de verde: el verde es otra escala. Nada se levanta al pasar el mouse. Los botones se hunden 1px al pulsarlos (.g-btn:active) y son las superficies —las tarjetas— las que flotan; un botón que hace las dos cosas se lee como dos componentes distintos. Antes había tres versiones del mismo hover verde (liso, con salto, con salto y sombra). ─────────────────────────────────────────────────────────────── */ --g-hover-verde: rgba(40, 116, 82, 0.08); --g-hover-verde-alto: rgba(40, 116, 82, 0.16); --g-hover-blanco: rgba(255, 255, 255, 0.12); --g-hover-gris: rgba(63, 63, 63, 0.07); /* Rojo de las acciones que borran. Uno solo: convivían tres (#e74c3c, #dc3545, #c0392b) y con tres rojos ningún hover podía ser el mismo. */ --g-peligro: #c0392b; --g-peligro-dark: #a5322a; --g-hover-peligro: rgba(192, 57, 43, 0.08); /* Verde de WhatsApp: es el color del canal, no el de la marca, así que tiene su propia escala y no toma el verde Giacomazzi. */ --g-whatsapp: #25d366; --g-whatsapp-dark: #1da851; /* Alto del navbar pegado (58px de .external-nav-container + 0.5rem de padding arriba y abajo del