/* ========================================================================== GLASS PRO — TOKENS DE MARCA Limpieza profesional de vidrios · Región de Valparaíso, Chile v1.0 · 10-10-2026 Los valores de color fueron extraídos por muestreo de píxeles sobre el logo original (logo.jpeg, 1254x1254). No son estimaciones. Referencia completa: MANUAL-DE-MARCA.html ========================================================================== */ :root{ color-scheme: light; /* ---- PRIMARIOS ------------------------------------------------------- */ --gp-blanco:#FFFFFF; /* dominante: 70% de toda pieza */ --gp-azul:#005CCF; /* azul del wordmark "PRO" · 6,12:1 s/ blanco */ --gp-negro:#0A0A0A; /* negro del monograma y "GLASS" */ /* ---- SECUNDARIOS (degradado del logo) -------------------------------- */ --gp-destello:#3CA6FE; /* 2,60:1 — DECORATIVO, nunca texto */ --gp-profundo:#0A3D7A; /* 10,71:1 — fondos oscuros, hover, footer */ /* ---- ESCALA DEL AZUL ------------------------------------------------- */ --gp-azul-50:#EDF4FF; --gp-azul-100:#D8E7FF; --gp-azul-200:#B4CEFF; --gp-azul-300:#85AEFA; --gp-azul-400:#3A85E8; --gp-azul-500:#005CCF; /* = --gp-azul */ --gp-azul-600:#004EB2; /* hover de botón primario */ --gp-azul-700:#0A3D7A; /* = --gp-profundo */ --gp-azul-800:#072F5E; --gp-azul-900:#051F3E; /* ---- NEUTROS --------------------------------------------------------- */ --gp-tinta:#111418; /* texto principal · 18,47:1 */ --gp-piedra:#5A6472; /* texto secundario · 6,00:1 */ --gp-borde:#E3E8EF; /* líneas y separadores · solo decorativo */ --gp-bruma:#F4F7FB; /* superficie de secciones alternas */ /* ---- SEMÁNTICOS ------------------------------------------------------ */ --gp-exito:#067647; /* 5,69:1 */ --gp-error:#D92D20; /* 4,83:1 */ --gp-atencion:#B54708; /* 5,43:1 */ --gp-whatsapp:#25D366; /* oficial · SOLO con tinta negra (9,98:1) blanco sobre este verde = 1,98:1, prohibido */ /* ---- DEGRADADO FIRMA · "la pasada" ----------------------------------- */ --gp-pasada:linear-gradient(90deg,#3CA6FE 0%,#005CCF 62%,#0A3D7A 100%); /* ---- TIPOGRAFÍA ------------------------------------------------------ */ --gp-display:"Montserrat","Segoe UI",system-ui,sans-serif; --gp-texto:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; --gp-dato:"JetBrains Mono",ui-monospace,Consolas,monospace; /* Tamaños */ --t-display-xl:clamp(2.25rem,5vw,3.5rem); --t-display-l:clamp(1.75rem,3.6vw,2.5rem); --t-titulo:1.5rem; --t-subtitulo:1.125rem; --t-cuerpo-l:1.125rem; --t-cuerpo:1rem; --t-cuerpo-s:.9375rem; --t-caption:.8125rem; --t-eyebrow:.75rem; /* Interlineado */ --lh-display-xl:1.02; --lh-display-l:1.08; --lh-titulo:1.15; --lh-subtitulo:1.3; --lh-cuerpo:1.7; --lh-cuerpo-l:1.65; /* Tracking */ --ls-display-xl:-.035em; --ls-display-l:-.028em; --ls-titulo:-.02em; --ls-subtitulo:-.01em; --ls-eyebrow:.16em; /* Pesos */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; /* ---- ESPACIADO (base 4px) -------------------------------------------- */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px; /* Separación entre secciones de página */ --sec-gap-desktop:96px; --sec-gap-movil:64px; /* ---- RADIOS ---------------------------------------------------------- */ --r-chip:4px; --r-boton:10px; --r-tarjeta:14px; --r-panel:20px; --r-pill:999px; /* ---- SOMBRAS (tintadas de azul, nunca grises) ------------------------ */ --s1:0 1px 2px rgba(10,61,122,.06), 0 1px 1px rgba(10,61,122,.04); --s2:0 10px 28px -12px rgba(10,61,122,.18); --s-azul:0 12px 32px -12px rgba(0,92,207,.45); /* ---- MOVIMIENTO ------------------------------------------------------ */ --ease:cubic-bezier(.4,0,.2,1); --dur-rapida:160ms; --dur-media:240ms; /* ---- LAYOUT ---------------------------------------------------------- */ --ancho-contenido:1200px; --medida-lectura:68ch; /* 60–75 caracteres por línea */ } /* ========================================================================== BASE RECOMENDADA ========================================================================== */ body{ background:var(--gp-blanco); color:var(--gp-tinta); font-family:var(--gp-texto); font-size:var(--t-cuerpo); line-height:var(--lh-cuerpo); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--gp-display);font-weight:var(--fw-bold)} h1{font-size:var(--t-display-xl);line-height:var(--lh-display-xl);letter-spacing:var(--ls-display-xl);font-weight:var(--fw-extrabold)} h2{font-size:var(--t-display-l);line-height:var(--lh-display-l);letter-spacing:var(--ls-display-l);font-weight:var(--fw-extrabold)} h3{font-size:var(--t-titulo);line-height:var(--lh-titulo);letter-spacing:var(--ls-titulo)} h4{font-size:var(--t-subtitulo);line-height:var(--lh-subtitulo);letter-spacing:var(--ls-subtitulo)} p{max-width:var(--medida-lectura)} /* Cifras tabulares para teléfonos, comunas, frecuencias y presupuestos */ .gp-cifra{font-variant-numeric:tabular-nums} /* Eyebrow */ .gp-eyebrow{ font-size:var(--t-eyebrow);font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gp-azul); } /* Línea fina del logo — sello estructural bajo cada título de sección */ .gp-linea{height:2px;width:56px;background:var(--gp-pasada);border-radius:var(--r-pill)} /* ---- Botones ------------------------------------------------------------ */ .gp-btn{ display:inline-flex;align-items:center;gap:var(--e2); font-family:var(--gp-texto);font-weight:var(--fw-semibold);font-size:var(--t-cuerpo-s); padding:var(--e3) var(--e5);border-radius:var(--r-boton); border:1.5px solid transparent;text-decoration:none;cursor:pointer; transition:background var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease), box-shadow var(--dur-rapida) var(--ease); } /* CTA principal: azul con texto blanco — 6,12:1 */ .gp-btn--primario{background:var(--gp-azul);color:var(--gp-blanco);box-shadow:var(--s-azul)} .gp-btn--primario:hover{background:var(--gp-azul-600);transform:translateY(-1px)} .gp-btn--secundario{background:transparent;color:var(--gp-azul);border-color:var(--gp-azul-200)} .gp-btn--secundario:hover{background:var(--gp-azul-50);border-color:var(--gp-azul)} /* Botón flotante de WhatsApp: verde oficial SIEMPRE con tinta negra */ .gp-btn--whatsapp{background:var(--gp-whatsapp);color:var(--gp-negro)} /* ---- Foco visible (obligatorio) ----------------------------------------- */ a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,select:focus-visible{ outline:3px solid var(--gp-azul);outline-offset:3px;border-radius:var(--r-chip); } /* ---- Accesibilidad de movimiento ---------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } /* ========================================================================== REGLAS QUE NO SE ROMPEN -------------------------------------------------------------------------- 1. Blanco 70% · Tinta 20% · Azul 10%. Si la pieza se ve azul, está mal. 2. --gp-destello JAMÁS sobre texto (2,60:1). 3. Texto blanco JAMÁS sobre --gp-whatsapp (1,98:1). Usar --gp-negro. 4. Montserrat solo en títulos y eyebrows. Nunca bajo 16px ni en párrafos. 5. La línea fina del logo nunca se elimina. 6. La animación de "la pasada" se usa una sola vez por página. 7. Máximo dos radios distintos por composición. 8. Sombras siempre tintadas de azul profundo, nunca grises neutras. ========================================================================== */