/* ============================================================ OLOWS — Sistema de marca compartido Manual V2.0 · 2026 Azul #5268F2 · Naranja #F5A623 · Azul oscuro #273C63 Montserrat (títulos) + Poppins (texto) Tipografías self-hosted (woff2 en assets/fonts/) vía @font-face, precargadas desde el : sin round-trip a Google Fonts ni conexión cross-origin. ============================================================ */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; 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; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400-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; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500-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; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600-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; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700-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 { /* Marca */ --blue: #5268f2; --blue-700: #3a4fd6; --blue-dark: #273c63; --blue-deep: #1b2c4a; --orange: #f5a623; --orange-600: #e0930f; --white: #ffffff; /* Neutros derivados */ --ink: #19233b; --ink-soft: #46506a; --line: #e7e9f2; /* Tipo */ --font-head: 'Montserrat', system-ui, sans-serif; --font-body: 'Poppins', system-ui, sans-serif; /* Radios y sombras */ --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --sh-1: 0 2px 8px rgba(39, 60, 99, 0.06); --sh-2: 0 14px 40px rgba(39, 60, 99, 0.1); --sh-3: 0 30px 80px rgba(39, 60, 99, 0.16); /* Layout */ --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); --nav-h: 78px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); overflow-x: clip; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---------- Lenis smooth scroll ---------- CSS oficial de lenis@1.3.24 (dist/lenis.css), verbatim. smooth-scroll.js añade la clase .lenis a al inicializar; sin JS o con prefers-reduced-motion queda el scroll nativo (scroll-behavior: smooth + scroll-padding-top de arriba). */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } /* ---------- Tipografía ---------- */ h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); } .h2 { font-weight: 800; font-size: clamp(2rem, 3.8vw, 3.3rem); } p { margin: 0; } .lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--ink-soft); line-height: 1.6; } .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 0.55em; } .eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; border-radius: 2px; } /* Segmento de título resaltado con un color sólido de la paleta. El tono se define por contexto con --accent-text (ver empresas.css / silvers.css); por defecto, azul de marca. */ .text-accent { color: var(--accent-text, var(--blue)); } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); width: 100%; } section { position: relative; } .section-pad { padding-block: clamp(56px, 7vw, 96px); } /* Encabezado de sección centrado (eyebrow + h2 + lead) */ .section-head { max-width: 640px; margin-inline: auto; text-align: center; } .section-head--md { max-width: 680px; } .section-head--lg { max-width: 820px; } .section-head .eyebrow { justify-content: center; } .section-head .eyebrow + .h2 { margin-top: 16px; } .section-head .lead { margin-top: 16px; } .section-head--lg .lead { margin-top: 20px; } /* ---------- Botones ---------- */ .btn { --bg: var(--blue); --fg: #fff; display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 0.92em 1.6em; border-radius: 999px; border: 1.5px solid transparent; background: var(--bg); color: var(--fg); cursor: pointer; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s, background 0.2s, color 0.2s; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--bg) 70%, transparent); white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -8px color-mix(in srgb, var(--bg) 70%, transparent); } .btn .arr { transition: transform 0.25s; } .btn:hover .arr { transform: translateX(4px); } .btn--orange { --bg: var(--orange); } .btn--dark { --bg: var(--blue-dark); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; } .btn--ghost:hover { border-color: var(--blue); color: var(--blue); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); box-shadow: none; } .btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); } /* ---------- Header / Nav ---------- */ .nav { position: sticky; top: 0; z-index: 60; transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s; } .nav.scrolled { background: color-mix(in srgb, var(--white) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); } .nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; } .nav__links a { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--ink); opacity: 0.82; transition: opacity 0.2s, color 0.2s; } .nav__links a:hover { opacity: 1; color: var(--blue); } .nav__right { display: flex; align-items: center; gap: 16px; } .nav__burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; } .nav__burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: 0.3s; } /* Dark nav variant */ .nav--ondark .nav__links a { color: #fff; } .nav--ondark.scrolled { background: color-mix(in srgb, var(--blue-dark) 80%, transparent); } .nav--ondark .nav__burger span { background: #fff; } /* Header opaco al abrir el menú: sin esto, al estar scrolleado el fondo del nav es semi-transparente y se transparenta el contenido detrás del header. La "X" conserva el color del nav (blanca en nav oscuro, oscura en claro) porque el burger vive en el header, no sobre el panel blanco. */ .nav.nav__menu-open { background: #fff; } .nav--ondark.nav__menu-open { background: var(--blue-dark); } /* Hamburguesa -> X al abrir el menú */ .nav__menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__menu-open .nav__burger span:nth-child(2) { opacity: 0; } .nav__menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Bloquear el scroll de la página mientras el menú está abierto */ body.nav-open { overflow: hidden; } /* Al scrollear, .nav.scrolled aplica backdrop-filter; un backdrop-filter (≠none) convierte al nav en bloque contenedor de sus hijos position:fixed, y el panel del menú (inset: var(--nav-h) 0 0 0) deja de medirse contra el viewport y se colapsa contra el nav. Por eso el menú funciona arriba de todo pero se rompe a medio scroll. Con el menú abierto anulamos el filtro para recuperar el viewport como referencia. */ .nav.scrolled.nav__menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ---------- Logo real (lockup PNG) ---------- */ .logo-img { height: 34px; width: auto; display: block; } .nav__inner .logo-img { height: 36px; } .footer .logo-img { height: 40px; margin-bottom: 18px; } /* ---------- Marco de foto ---------- */ .frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); position: relative; } .frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .frame--4-3 { aspect-ratio: 4 / 3; } .frame--4-5 { aspect-ratio: 4 / 5; } .avatar-img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; } /* ---------- Red viva (constelación de marca) ---------- Canvas firma de los heros (ver assets/net.js). Decoración pura: se coloca al fondo del hero, no captura el cursor (los nodos siguen el puntero vía el contenedor) y queda detrás del contenido (z-index 0). El recorte/máscara por hero lo define cada CSS de página. */ .net { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* ---------- Marca de agua (malla del logo Olows) ---------- Se aplica a las bandas de acento (.cta-band, .vision, .cta-warm): el ícono de nodos del logo, tenue y suavizado, detrás del contenido. Va por máscara para poder teñirlo (blanco por defecto) y controlar opacidad/posición/tamaño con las custom props desde cada banda. */ .brand-mark { isolation: isolate; } .brand-mark::before { content: ''; position: absolute; z-index: -1; width: var(--mark-size, 360px); height: var(--mark-size, 360px); background: var(--mark-color, #fff); -webkit-mask: url('img/icon/icon-512.png?v=b6708347') center / contain no-repeat; mask: url('img/icon/icon-512.png?v=b6708347') center / contain no-repeat; opacity: var(--mark-opacity, 0.08); filter: blur(1px); pointer-events: none; } .curve-divider { display: block; width: 100%; height: auto; position: relative; z-index: 1; } /* ---------- Separador de 3 puntos ---------- Marca el corte entre dos secciones que conviven sobre el mismo fondo. Se coloca como hermano entre dos
; los márgenes negativos lo centran en la costura (recortan parte del doble padding de ambas). */ .dot-sep { display: flex; justify-content: center; align-items: center; gap: 13px; position: relative; z-index: 1; margin-block: clamp(-44px, -4.5vw, -26px); } .dot-sep span { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); } .dot-sep span:nth-child(2) { background: var(--orange); } .dot-sep span:nth-child(3) { background: transparent; border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent); } /* ---------- Cards ---------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 34px); box-shadow: var(--sh-1); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, border-color 0.3s; position: relative; overflow: hidden; } .card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); } .card__ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, #fff); } .card__ico svg { width: 26px; height: 26px; } .card h3 { font-size: 1.18rem; margin-bottom: 8px; } .card p { color: var(--ink-soft); font-size: 0.97rem; } .grid { display: grid; gap: clamp(16px, 2vw, 26px); } .g-3 { grid-template-columns: repeat(3, 1fr); } /* ---------- Pill / chips ---------- */ .pill { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 1em; border-radius: 999px; font-weight: 500; font-size: 0.86rem; background: color-mix(in srgb, var(--blue) 9%, #fff); color: var(--blue-700); border: 1px solid color-mix(in srgb, var(--blue) 18%, #fff); } .pill--orange { background: color-mix(in srgb, var(--orange) 12%, #fff); color: var(--orange-600); border-color: color-mix(in srgb, var(--orange) 24%, #fff); } /* ---------- Stats ---------- */ .stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; } .stat__lbl { font-size: 0.92rem; color: var(--ink-soft); margin-top: 6px; } /* ---------- Footer ---------- */ .footer { background: var(--blue-dark); color: #fff; padding-block: clamp(48px, 6vw, 80px) 28px; } .footer a { color: rgba(255, 255, 255, 0.72); transition: color 0.2s; } .footer a:hover { color: #fff; } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .footer__col h2 { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); margin: 0 0 16px; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 0.95rem; } .footer__text { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; max-width: 34ch; } .footer__addr { color: rgba(255, 255, 255, 0.66); font-size: 0.85rem; margin-top: 18px; } .footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); } /* Footer minimal (solo copyright centrado) — usado en páginas legales */ .footer__bottom--center { margin: 0; padding: 0; border: 0; justify-content: center; } /* Íconos sociales del footer */ .footer__social { display: flex; gap: 12px; margin-top: 22px; } .footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.1); transition: background 0.2s, transform 0.2s; } .footer__social a:hover { background: var(--blue); transform: translateY(-2px); } .footer__social svg { width: 20px; height: 20px; } /* ---------- WhatsApp flotante (FAB) ---------- Verde oficial de WhatsApp con glifo blanco: la combinación de mayor contraste de la marca, legible sobre fondos claros u oscuros. z-index por debajo del nav (60): el menú mobile abierto lo tapa. */ .wa-fab { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 50; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 28px -6px rgba(37, 211, 102, 0.55); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s; } .wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px -8px rgba(37, 211, 102, 0.7); } .wa-fab svg { width: 32px; height: 32px; } @media (max-width: 480px) { .wa-fab { width: 52px; height: 52px; } .wa-fab svg { width: 30px; height: 30px; } } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d='1'] { transition-delay: 0.08s; } .reveal[data-d='2'] { transition-delay: 0.16s; } .reveal[data-d='3'] { transition-delay: 0.24s; } .reveal[data-d='4'] { transition-delay: 0.32s; } /* ---------- Responsive ---------- */ @media (max-width: 920px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .nav__links, .nav__right .btn { display: none; } .nav__burger { display: flex; } .nav__menu-open .nav__links { display: flex; position: fixed; /* Altura completa: el panel blanco tapa el contenido de la página detrás (junto con body.nav-open que bloquea el scroll). */ inset: var(--nav-h) 0 0 0; flex-direction: column; background: #fff; padding: 24px var(--gutter) 32px; box-shadow: var(--sh-2); gap: 18px; border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; } .nav__menu-open .nav__links a { font-size: 1.1rem; /* El panel mobile siempre es de fondo blanco: forzamos texto oscuro incluso en nav oscuro (nav--ondark), si no los links quedan blancos sobre blanco e invisibles. */ color: var(--ink); opacity: 1; /* Área táctil cómoda (>=44px) */ display: flex; align-items: center; min-height: 44px; } .g-3 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } /* Touch targets del footer (>=44px) — el footer se repite en todas las páginas */ .footer__col ul a, .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; } } @media (max-width: 480px) { /* Nav más compacto en teléfonos: gana alto útil above-the-fold. */ :root { --nav-h: 64px; } .footer__grid { grid-template-columns: 1fr; } /* Los botones dejan de forzar una sola línea para no desbordar el viewport con labels largos (ej. "Quiero ser infoproductor"). */ .btn { white-space: normal; padding-inline: 1.25em; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }