/* ========================================================================== Global Fibra — Design Tokens Colors, typography, spacing, radii, shadows, motion. ========================================================================== */ /* Fonts: Nunito (display + body) — closest match to logo's rounded-geometric sans. Loaded from Google Fonts in HTML . If self-hosting, drop files into /fonts and switch to @font-face. */ :root { /* ---------- Brand palette ---------- */ --gf-green-900: #1f3d2c; /* deepest — only for heavy text on light */ --gf-green-800: #2c5a40; --gf-green-700: #3a7355; --gf-green-600: #488b67; /* PRIMARY brand green (logo) */ --gf-green-500: #5fa17c; --gf-green-400: #82b89a; --gf-green-300: #a8cfb9; --gf-green-200: #cfe3d8; --gf-green-100: #e8f1eb; --gf-green-50: #f4f8f5; --gf-gold-900: #6b5817; --gf-gold-800: #9a821f; --gf-gold-700: #c0a230; --gf-gold-600: #e2be4a; /* ACCENT brand gold (logo) */ --gf-gold-500: #ecca65; --gf-gold-400: #f3d985; --gf-gold-300: #f8e4a8; --gf-gold-200: #fbeec7; --gf-gold-100: #fdf6e1; --gf-gold-50: #fefbf0; --gf-slate-900: #1a2e2e; --gf-slate-800: #2a4a4a; /* secondary dark — used in tagline */ --gf-slate-700: #3d6060; --gf-slate-600: #557575; --gf-slate-500: #7a9494; --gf-slate-400: #a3b6b6; --gf-slate-300: #c7d3d3; --gf-slate-200: #e0e7e7; --gf-slate-100: #eef2f2; --gf-slate-50: #f7f9f9; --gf-white: #ffffff; --gf-paper: #fbfaf6; /* warm off-white — surface tint */ /* ---------- Semantic colors ---------- */ --gf-bg: var(--gf-white); --gf-bg-alt: var(--gf-paper); --gf-bg-muted: var(--gf-slate-50); --gf-bg-strong: var(--gf-green-900); --gf-fg: var(--gf-slate-900); /* body text */ --gf-fg-muted: var(--gf-slate-700); --gf-fg-subtle: var(--gf-slate-500); --gf-fg-onDark: var(--gf-white); --gf-primary: var(--gf-green-600); --gf-primary-hover: var(--gf-green-700); --gf-primary-press: var(--gf-green-800); --gf-primary-soft: var(--gf-green-100); --gf-accent: var(--gf-gold-600); --gf-accent-hover: var(--gf-gold-700); --gf-accent-press: var(--gf-gold-800); --gf-accent-soft: var(--gf-gold-100); --gf-border: var(--gf-slate-200); --gf-border-strong:var(--gf-slate-300); --gf-divider: var(--gf-slate-100); --gf-success: #2f8f5e; --gf-warning: #d99a1f; --gf-danger: #b8472f; --gf-info: var(--gf-green-600); /* ---------- Typography ---------- */ --gf-font-display: "Nunito", "Helvetica Neue", Arial, sans-serif; --gf-font-body: "Nunito", "Helvetica Neue", Arial, sans-serif; --gf-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --gf-fw-regular: 400; --gf-fw-medium: 500; --gf-fw-semi: 600; --gf-fw-bold: 700; --gf-fw-black: 800; /* Type scale — modular, mobile-first */ --gf-fs-xs: 12px; --gf-fs-sm: 14px; --gf-fs-base: 16px; --gf-fs-md: 18px; --gf-fs-lg: 20px; --gf-fs-xl: 24px; --gf-fs-2xl: 32px; --gf-fs-3xl: 40px; --gf-fs-4xl: 56px; --gf-fs-5xl: 72px; --gf-fs-6xl: 96px; --gf-lh-tight: 1.1; --gf-lh-snug: 1.25; --gf-lh-normal: 1.5; --gf-lh-relaxed: 1.65; --gf-ls-tight: -0.02em; --gf-ls-snug: -0.01em; --gf-ls-normal: 0; --gf-ls-wide: 0.04em; --gf-ls-wider: 0.12em; /* eyebrow / overline (matches logo tagline) */ /* ---------- Spacing (4-pt grid) ---------- */ --gf-space-0: 0; --gf-space-1: 4px; --gf-space-2: 8px; --gf-space-3: 12px; --gf-space-4: 16px; --gf-space-5: 24px; --gf-space-6: 32px; --gf-space-7: 48px; --gf-space-8: 64px; --gf-space-9: 96px; --gf-space-10: 128px; /* ---------- Radii ---------- */ --gf-radius-xs: 4px; --gf-radius-sm: 8px; --gf-radius-md: 12px; --gf-radius-lg: 16px; --gf-radius-xl: 24px; --gf-radius-pill: 999px; --gf-radius-circle: 50%; /* ---------- Shadows (soft, industrial — not flashy) ---------- */ --gf-shadow-xs: 0 1px 2px rgba(31, 61, 44, 0.06); --gf-shadow-sm: 0 2px 6px rgba(31, 61, 44, 0.08); --gf-shadow-md: 0 6px 18px rgba(31, 61, 44, 0.10); --gf-shadow-lg: 0 16px 40px rgba(31, 61, 44, 0.14); --gf-shadow-xl: 0 28px 70px rgba(31, 61, 44, 0.18); --gf-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); --gf-ring-focus: 0 0 0 3px rgba(72, 139, 103, 0.35); /* ---------- Motion ---------- */ --gf-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --gf-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --gf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --gf-dur-fast: 120ms; --gf-dur-normal: 200ms; --gf-dur-slow: 320ms; --gf-dur-slower: 520ms; /* ---------- Layout ---------- */ --gf-container-sm: 640px; --gf-container-md: 880px; --gf-container-lg: 1120px; --gf-container-xl: 1280px; --gf-header-h: 76px; } /* ========================================================================== Base / element resets ========================================================================== */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--gf-font-body); font-size: var(--gf-fs-base); font-weight: var(--gf-fw-regular); line-height: var(--gf-lh-normal); color: var(--gf-fg); background: var(--gf-bg); } /* ---------- Display + headings ---------- */ .gf-display-1, h1.gf-h1 { font-family: var(--gf-font-display); font-weight: var(--gf-fw-black); font-size: clamp(40px, 5.5vw, var(--gf-fs-5xl)); line-height: var(--gf-lh-tight); letter-spacing: var(--gf-ls-tight); color: var(--gf-fg); margin: 0; } .gf-h1, h1 { font-family: var(--gf-font-display); font-weight: var(--gf-fw-bold); font-size: var(--gf-fs-4xl); line-height: var(--gf-lh-tight); letter-spacing: var(--gf-ls-tight); color: var(--gf-fg); margin: 0; } .gf-h2, h2 { font-family: var(--gf-font-display); font-weight: var(--gf-fw-bold); font-size: var(--gf-fs-3xl); line-height: var(--gf-lh-snug); letter-spacing: var(--gf-ls-snug); color: var(--gf-fg); margin: 0; } .gf-h3, h3 { font-family: var(--gf-font-display); font-weight: var(--gf-fw-semi); font-size: var(--gf-fs-2xl); line-height: var(--gf-lh-snug); color: var(--gf-fg); margin: 0; } .gf-h4, h4 { font-family: var(--gf-font-display); font-weight: var(--gf-fw-semi); font-size: var(--gf-fs-xl); line-height: var(--gf-lh-snug); color: var(--gf-fg); margin: 0; } .gf-h5, h5 { font-family: var(--gf-font-display); font-weight: var(--gf-fw-semi); font-size: var(--gf-fs-lg); line-height: var(--gf-lh-snug); color: var(--gf-fg); margin: 0; } /* ---------- Body ---------- */ .gf-body, p { font-size: var(--gf-fs-base); line-height: var(--gf-lh-relaxed); color: var(--gf-fg); margin: 0; } .gf-lead { font-size: var(--gf-fs-lg); line-height: var(--gf-lh-relaxed); color: var(--gf-fg-muted); font-weight: var(--gf-fw-regular); } .gf-small, small { font-size: var(--gf-fs-sm); line-height: var(--gf-lh-normal); color: var(--gf-fg-muted); } .gf-caption { font-size: var(--gf-fs-xs); color: var(--gf-fg-subtle); } /* ---------- Eyebrow / overline (matches "ESPECIALISTAS EN FIBRA DE VIDRIO") ---------- */ .gf-eyebrow { font-family: var(--gf-font-display); font-size: var(--gf-fs-xs); font-weight: var(--gf-fw-bold); letter-spacing: var(--gf-ls-wider); text-transform: uppercase; color: var(--gf-slate-800); } /* ---------- Code ---------- */ code, .gf-code { font-family: var(--gf-font-mono); font-size: 0.92em; background: var(--gf-slate-100); padding: 0.12em 0.4em; border-radius: var(--gf-radius-xs); color: var(--gf-slate-900); } /* ---------- Links ---------- */ a, .gf-link { color: var(--gf-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--gf-dur-fast) var(--gf-ease-out); } a:hover, .gf-link:hover { color: var(--gf-primary-hover); } /* ========================================================================== */ /* COMPONENTES Y ESTILOS DE PÁGINA */ /* ========================================================================== */ /* ========================================================================== GlobalFibra · Rediseño 2026 — Marketing site styles Paleta híbrida: verde marca (primario) + azul marino (autoridad) ========================================================================== */ :root { /* Paleta híbrida: extiende los tokens del DS con un azul marino industrial */ --gf-navy-900: #0a2540; --gf-navy-800: #0f2e4f; --gf-navy-700: #163a5f; --gf-navy-600: #1f4a78; --gf-navy-500: #2d5d92; /* Rojo descarte para "No fabricamos" — apagado, no chillón */ --gf-red-700: #8a2820; --gf-red-600: #b8472f; --gf-red-50: #fbf3f1; /* Tipografía: Manrope para display (más técnico) + Nunito mantenido para body */ --gf-font-display: "Manrope", "Nunito", "Helvetica Neue", Arial, sans-serif; --gf-font-body: "Nunito", "Helvetica Neue", Arial, sans-serif; --section-py: clamp(64px, 8vw, 112px); --container-px: clamp(20px, 4vw, 64px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--gf-font-body); font-size: 16px; color: var(--gf-fg); background: var(--gf-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; } button { font-family: inherit; } .container { max-width: var(--gf-container-xl); margin: 0 auto; padding-left: var(--container-px); padding-right: var(--container-px); } /* ============================================================ Top utility bar (teléfono / email / idioma) ============================================================ */ .utility-bar { background: var(--gf-navy-900); color: rgba(255,255,255,0.85); font-size: 13px; } .utility-bar__inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; gap: 24px; } .utility-bar__contacts { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .utility-bar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .15s var(--gf-ease-out); } .utility-bar a:hover { color: var(--gf-gold-500); } .utility-bar__right { display: flex; gap: 16px; align-items: center; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; } .utility-bar__right .badge-b2b { background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 0.12em; } /* ============================================================ Header / Nav (sticky) ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--gf-border); transition: box-shadow .2s var(--gf-ease-out); } .site-header.is-scrolled { box-shadow: 0 2px 14px rgba(31,61,44,0.06); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; } .site-header__logo img { height: 44px; } .site-nav { display: flex; gap: 4px; align-items: center; } .site-nav__link { font-family: var(--gf-font-display); font-size: 14.5px; font-weight: 600; color: var(--gf-fg); text-decoration: none; padding: 10px 14px; border-radius: 8px; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .15s var(--gf-ease-out), color .15s var(--gf-ease-out); position: relative; } .site-nav__link:hover { background: var(--gf-green-50); color: var(--gf-primary); } .site-nav__link.is-active { color: var(--gf-primary); } .site-nav__link.is-active::after { content: ""; position: absolute; bottom: -2px; left: 14px; right: 14px; height: 2px; background: var(--gf-primary); border-radius: 2px; } .site-nav__link svg { width: 14px; height: 14px; opacity: 0.6; } .site-header__cta { display: flex; gap: 8px; align-items: center; } /* Mega menu */ .mega { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--gf-border); border-radius: 16px; box-shadow: var(--gf-shadow-lg); padding: 28px; display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 28px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s var(--gf-ease-out); pointer-events: none; } .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .has-mega { position: static; } .site-header__inner { position: relative; } .mega__col h4 { font-family: var(--gf-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gf-slate-700); margin: 0 0 12px; } .mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .mega__list a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--gf-fg); transition: background .15s; } .mega__list a:hover { background: var(--gf-green-50); } .mega__list a strong { font-weight: 700; font-size: 14.5px; color: var(--gf-fg); } .mega__list a span { font-size: 12.5px; color: var(--gf-fg-muted); } .mega__feature { background: linear-gradient(160deg, var(--gf-navy-900), var(--gf-navy-700)); color: #fff; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; justify-content: space-between; } .mega__feature h5 { font-family: var(--gf-font-display); font-size: 18px; font-weight: 700; margin: 0; color: #fff; } .mega__feature p { color: rgba(255,255,255,0.78); font-size: 13.5px; line-height: 1.5; margin: 0; } .mega__feature .btn { align-self: flex-start; } /* ============================================================ Buttons ============================================================ */ .btn { font-family: var(--gf-font-display); font-weight: 700; border: 0; cursor: pointer; border-radius: 999px; padding: 13px 22px; font-size: 14.5px; letter-spacing: 0.005em; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: all .15s var(--gf-ease-out); white-space: nowrap; } .btn--sm { padding: 9px 16px; font-size: 13px; } .btn--lg { padding: 16px 28px; font-size: 15.5px; } .btn--xl { padding: 18px 32px; font-size: 16px; } .btn--primary { background: var(--cta-bg, var(--gf-primary)); color: var(--cta-fg, #fff); box-shadow: var(--gf-shadow-sm); } .btn--primary:hover { background: var(--cta-bg-hover, var(--gf-primary-hover)); transform: translateY(-1px); box-shadow: var(--gf-shadow-md); } .btn--primary:active { transform: translateY(1px); } .btn--navy { background: var(--gf-navy-900); color: #fff; } .btn--navy:hover { background: var(--gf-navy-700); } .btn--gold { background: var(--gf-accent); color: var(--gf-navy-900); } .btn--gold:hover { background: var(--gf-gold-500); } .btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); } .btn--ghost-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; } .btn--ghost { background: transparent; color: var(--gf-fg); border: 1.5px solid var(--gf-border-strong); } .btn--ghost:hover { border-color: var(--gf-primary); color: var(--gf-primary); } .btn--link { background: transparent; color: var(--gf-primary); padding: 0; font-size: 14px; } /* ============================================================ Eyebrow + section heading ============================================================ */ .eyebrow { font-family: var(--gf-font-display); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gf-slate-700); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; } .eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--gf-accent); flex: 0 0 24px; } h1, h2, h3, h4 { font-family: var(--gf-font-display); letter-spacing: -0.02em; color: var(--gf-fg); margin: 0; text-wrap: balance; } .section { padding-block: var(--section-py); } .section--alt { background: var(--gf-paper); } .section--navy { background: var(--gf-navy-900); color: #fff; } .section--navy h2, .section--navy h3 { color: #fff; } .section__head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-bottom: 48px; } .section__head h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.05; } .section__head p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--gf-fg-muted); margin: 0; } .section--navy .section__head p { color: rgba(255,255,255,0.78); } .section--navy .eyebrow { color: var(--gf-gold-500); } /* ============================================================ Hero ============================================================ */ .hero { position: relative; background: var(--gf-navy-900); overflow: hidden; isolation: isolate; } .hero__bg { position: absolute; inset: 0; background-image: linear-gradient(95deg, rgba(8,28,50,0.96) 0%, rgba(10,37,64,0.92) 45%, rgba(10,37,64,0.7) 100%), var(--hero-img, linear-gradient(135deg, #1f3d2c, #0a2540)); background-size: cover; background-position: center; z-index: 0; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 85% 15%, rgba(72,139,103,0.22), transparent 60%), linear-gradient(180deg, transparent 60%, rgba(8,28,50,0.55) 100%); } .hero__inner { position: relative; z-index: 1; } .hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; padding-block: clamp(72px, 10vw, 128px); color: #fff; } .hero__copy { display: flex; flex-direction: column; gap: 22px; } .hero__copy .eyebrow { color: var(--gf-gold-500); } .hero__copy .eyebrow::before { background: var(--gf-gold-500); } .hero__title { font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; color: #fff; margin: 0; } .hero__title em { font-style: normal; color: var(--gf-gold-400); position: relative; } .hero__lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 56ch; margin: 0; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .hero__micro { font-size: 13px; color: rgba(255,255,255,0.6); margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; } .hero__micro span::before { content: "· "; color: var(--gf-gold-500); } .hero__micro span:first-child::before { content: ""; } /* Hero visual — split with frame card */ .hero__visual { position: relative; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.08) 12px 24px), linear-gradient(160deg, #1f4a35 0%, #122e4f 70%, #0a2540 100%); box-shadow: 0 40px 80px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; } .hero__photoPlaceholder { font-family: var(--gf-font-display); font-size: 12px; letter-spacing: 0.18em; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; text-align: center; line-height: 1.7; padding: 24px; } .hero__photoPlaceholder em { font-style: normal; color: rgba(255,255,255,0.35); letter-spacing: 0.08em; } .hero__stat { position: absolute; bottom: 20px; left: 20px; right: 20px; background: #fff; color: var(--gf-navy-900); padding: 16px 20px; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 16px; border-left: 4px solid var(--gf-accent); } .hero__stat strong + span { flex: 1; } .hero__stat strong { font-family: var(--gf-font-display); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .hero__stat span { font-size: 12.5px; color: var(--gf-fg-muted); font-weight: 600; } /* hero variant: full-bleed */ .hero--fullbleed .hero__inner { grid-template-columns: 1fr; max-width: 880px; } .hero--fullbleed .hero__visual { display: none; } .hero--fullbleed .hero__title { font-size: clamp(40px, 6vw, 80px); } /* compact hero (subpáginas) */ .hero--compact .hero__inner { padding-block: clamp(56px, 7vw, 96px); grid-template-columns: 1.4fr 0.6fr; } .hero--compact .hero__title { font-size: clamp(32px, 4vw, 48px); } /* ============================================================ Trust bar ============================================================ */ .trust-bar { background: #fff; border-bottom: 1px solid var(--gf-border); } .trust-bar__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 28px 0; } .trust-bar__cell { display: flex; align-items: center; gap: 14px; padding: 0 18px; border-right: 1px solid var(--gf-border); } .trust-bar__cell:last-child { border-right: 0; } .trust-bar__icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; background: var(--gf-green-50); color: var(--gf-primary); border-radius: 10px; } .trust-bar__icon svg { width: 20px; height: 20px; } .trust-bar__copy strong { display: block; font-family: var(--gf-font-display); font-weight: 800; font-size: 15px; color: var(--gf-fg); line-height: 1.2; } .trust-bar__copy span { font-size: 12.5px; color: var(--gf-fg-muted); line-height: 1.3; } /* ============================================================ Product cards (categorías) ============================================================ */ .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .product-card { background: #fff; border: 1px solid var(--gf-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; transition: all .25s var(--gf-ease-out); } .product-card:hover { transform: translateY(-4px); box-shadow: var(--gf-shadow-md); border-color: var(--gf-green-300); } .product-card__img { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--gf-green-100), var(--gf-green-200)); display: grid; place-items: center; color: var(--gf-green-700); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; position: relative; overflow: hidden; } .product-card__img.is-photo { background-size: cover; background-position: center; color: transparent; } .product-card__img.is-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,37,64,0.4) 100%); } .product-card__tag { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.92); color: var(--gf-fg); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 999px; z-index: 1; } .product-card__body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .product-card__title { font-family: var(--gf-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; color: var(--gf-fg); } .product-card__desc { font-size: 14.5px; line-height: 1.55; color: var(--gf-fg-muted); flex: 1; } .product-card__cta { margin-top: 10px; font-family: var(--gf-font-display); font-weight: 700; font-size: 14px; color: var(--gf-primary); display: inline-flex; align-items: center; gap: 6px; } /* ============================================================ Industries (íconos) ============================================================ */ .industries-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; } .industry-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 28px 14px; background: #fff; border: 1px solid var(--gf-border); border-radius: 14px; text-decoration: none; color: inherit; cursor: pointer; transition: all .2s var(--gf-ease-out); } .industry-card:hover { border-color: var(--gf-primary); transform: translateY(-2px); box-shadow: var(--gf-shadow-sm); } .industry-card__icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--gf-navy-900); color: var(--gf-gold-500); border-radius: 12px; } .industry-card__icon svg { width: 26px; height: 26px; } .industry-card__label { font-family: var(--gf-font-display); font-weight: 700; font-size: 13.5px; color: var(--gf-fg); letter-spacing: -0.005em; } /* ============================================================ Differentiators (4 cols) ============================================================ */ .diffs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .diff-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: #fff; border: 1px solid var(--gf-border); border-radius: 16px; position: relative; } .diff-card__num { font-family: var(--gf-font-display); font-weight: 800; font-size: 14px; color: var(--gf-accent); letter-spacing: 0.04em; } .diff-card__icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--gf-green-50); color: var(--gf-primary); border-radius: 10px; margin-bottom: 6px; } .diff-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; } .diff-card p { font-size: 14.5px; color: var(--gf-fg-muted); line-height: 1.55; } /* ============================================================ Projects / cases ============================================================ */ .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .project-card { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--gf-border); cursor: pointer; transition: all .2s var(--gf-ease-out); display: flex; flex-direction: column; } .project-card:hover { transform: translateY(-3px); box-shadow: var(--gf-shadow-md); } .project-card__img { aspect-ratio: 16/10; position: relative; background-size: cover; background-position: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.08) 12px 24px), linear-gradient(160deg, #1f4a35 0%, #122e4f 70%, #0a2540 100%); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-family: var(--gf-font-display); font-size: 11px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; } .project-card__img.is-photo { background: var(--gf-navy-700); background-size: cover; background-position: center; } .project-card__sector { position: absolute; top: 14px; left: 14px; background: var(--gf-navy-900); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; } .project-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .project-card__title { font-family: var(--gf-font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } .project-card__meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--gf-fg-muted); font-weight: 600; } .project-card__meta span { display: inline-flex; align-items: center; gap: 4px; } .project-card__cta { margin-top: auto; color: var(--gf-primary); font-weight: 700; font-size: 13.5px; } /* ============================================================ Filter block — "No fabricamos / Sí fabricamos" ============================================================ */ .filter-block { background: #fff; border-top: 2px solid var(--gf-border); border-bottom: 2px solid var(--gf-border); } .filter-block__head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin-bottom: 56px; } .filter-block__head h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; } .filter-block__head p { max-width: 640px; font-size: 17px; color: var(--gf-fg-muted); line-height: 1.55; margin: 0; } .filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .filter-col { border-radius: 18px; padding: 36px; display: flex; flex-direction: column; gap: 18px; border: 1px solid; } .filter-col--no { background: var(--gf-red-50); border-color: rgba(184,71,47,0.2); } .filter-col--si { background: var(--gf-green-50); border-color: rgba(72,139,103,0.25); } .filter-col__head { display: flex; align-items: center; gap: 12px; } .filter-col__pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--gf-font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; } .filter-col--no .filter-col__pill { background: var(--gf-red-600); color: #fff; } .filter-col--si .filter-col__pill { background: var(--gf-primary); color: #fff; } .filter-col__title { font-family: var(--gf-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; margin: 6px 0 0; } .filter-col--no .filter-col__title { color: var(--gf-red-700); } .filter-col--si .filter-col__title { color: var(--gf-green-800); } .filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .filter-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--gf-fg); } .filter-list li svg { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; } .filter-col--no .filter-list svg { color: var(--gf-red-600); } .filter-col--si .filter-list svg { color: var(--gf-primary); } /* ============================================================ Services (3 cols con foto/placeholder) ============================================================ */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .service-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--gf-border); } .service-card__img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--gf-navy-700), var(--gf-navy-900)); display: grid; place-items: center; color: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.14em; font-weight: 700; } .service-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; } .service-card__title { font-family: var(--gf-font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.015em; } .service-card__desc { font-size: 14.5px; color: var(--gf-fg-muted); line-height: 1.55; } /* ============================================================ Resources / catalog block ============================================================ */ .resources { background: var(--gf-navy-900); color: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; } .resources::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 80% 20%, rgba(226,190,74,0.18), transparent 60%); pointer-events: none; } .resources__visual { background: linear-gradient(135deg, rgba(72,139,103,0.3), transparent 60%), linear-gradient(160deg, var(--gf-green-800), var(--gf-navy-900)); display: grid; place-items: center; padding: 40px; position: relative; } .catalog-mockup { width: 80%; max-width: 320px; aspect-ratio: 3/4; background: linear-gradient(160deg, #fff, #f0f0e8); border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,0.4); position: relative; transform: rotate(-3deg); display: flex; flex-direction: column; padding: 36px 28px; gap: 14px; } .catalog-mockup::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--gf-primary); } .catalog-mockup__brand { font-size: 10px; letter-spacing: 0.18em; font-weight: 700; color: var(--gf-slate-700); } .catalog-mockup__title { font-family: var(--gf-font-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--gf-navy-900); } .catalog-mockup__year { font-family: var(--gf-font-display); font-weight: 800; font-size: 56px; line-height: 1; color: var(--gf-accent); margin-top: auto; } .catalog-mockup__tag { font-size: 11px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; color: var(--gf-slate-700); border-top: 1px solid var(--gf-border); padding-top: 10px; } .resources__copy { padding: 56px; display: flex; flex-direction: column; gap: 18px; position: relative; } .resources__copy h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 800; color: #fff; line-height: 1.1; } .resources__copy ul { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .resources__copy ul li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,0.85); } .resources__copy ul li::before { content: "→"; color: var(--gf-gold-500); font-weight: 800; } .resources__form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .resources__form input { flex: 1; min-width: 200px; padding: 14px 18px; border-radius: 999px; border: 0; font-family: var(--gf-font-body); font-size: 14.5px; background: rgba(255,255,255,0.1); color: #fff; border: 1.5px solid rgba(255,255,255,0.2); } .resources__form input::placeholder { color: rgba(255,255,255,0.5); } .resources__form input:focus { outline: none; border-color: var(--gf-gold-500); background: rgba(255,255,255,0.14); } /* ============================================================ Testimonials ============================================================ */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .testimonial { background: #fff; border: 1px solid var(--gf-border); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; position: relative; } .testimonial__quote { font-family: var(--gf-font-display); font-size: 16px; line-height: 1.55; color: var(--gf-fg); flex: 1; } .testimonial__quote::before { content: "\201C"; display: block; font-family: var(--gf-font-display); font-size: 56px; font-weight: 800; color: var(--gf-accent); line-height: 0.4; margin-bottom: 14px; } .testimonial__author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--gf-border); padding-top: 16px; } .testimonial__avatar { width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(135deg, var(--gf-green-200), var(--gf-green-400)); display: grid; place-items: center; color: var(--gf-green-800); font-weight: 800; font-size: 14px; } .testimonial__author strong { display: block; font-size: 14px; font-weight: 700; color: var(--gf-fg); } .testimonial__author span { font-size: 12.5px; color: var(--gf-fg-muted); } /* ============================================================ FAQ Accordion ============================================================ */ .faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 880px; } .faq-item { border: 1px solid var(--gf-border); border-radius: 14px; background: #fff; overflow: hidden; } .faq-item.is-open { border-color: var(--gf-primary); box-shadow: var(--gf-shadow-sm); } .faq-item__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 24px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--gf-font-display); font-weight: 700; font-size: 16px; color: var(--gf-fg); letter-spacing: -0.005em; } .faq-item__icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--gf-green-50); color: var(--gf-primary); display: grid; place-items: center; transition: transform .2s var(--gf-ease-out); } .faq-item.is-open .faq-item__icon { transform: rotate(45deg); background: var(--gf-primary); color: #fff; } .faq-item__body { max-height: 0; overflow: hidden; transition: max-height .25s var(--gf-ease-out); } .faq-item.is-open .faq-item__body { max-height: 400px; } .faq-item__body p { padding: 0 24px 22px; font-size: 15px; line-height: 1.6; color: var(--gf-fg-muted); margin: 0; } /* ============================================================ CTA banner ============================================================ */ .cta-banner { background: linear-gradient(120deg, rgba(72,139,103,0.85), rgba(31,61,44,0.95)), var(--cta-bg-img, linear-gradient(135deg, #2c5a40, #1f3d2c)); background-size: cover; background-position: center; color: #fff; position: relative; overflow: hidden; } .cta-banner__inner { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 48px; padding-block: 80px; } .cta-banner h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.05; color: #fff; letter-spacing: -0.025em; } .cta-banner p { font-size: 17px; color: rgba(255,255,255,0.82); margin: 12px 0 0; line-height: 1.55; max-width: 56ch; } .cta-banner__actions { display: flex; gap: 12px; flex-direction: column; align-items: flex-end; } .cta-banner__actions .btn { width: 100%; max-width: 320px; justify-content: center; } .cta-banner__phone { font-family: var(--gf-font-display); font-weight: 800; font-size: 22px; color: var(--gf-gold-500); text-decoration: none; } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--gf-navy-900); color: rgba(255,255,255,0.78); padding: 72px 0 28px; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .site-footer__col h4 { font-family: var(--gf-font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-gold-500); margin: 0 0 16px; } .site-footer__col a, .site-footer__col p { display: block; color: rgba(255,255,255,0.72); text-decoration: none; font-size: 14px; line-height: 1.9; margin: 0; cursor: pointer; transition: color .15s; } .site-footer__col a:hover { color: var(--gf-gold-500); } .site-footer__col img { height: 38px; filter: brightness(0) invert(1); } .site-footer__tag { font-size: 14px; margin: 18px 0 22px !important; line-height: 1.6; color: rgba(255,255,255,0.65) !important; } .site-footer__social { display: flex; gap: 8px; } .site-footer__social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.78); transition: all .2s; } .site-footer__social a:hover { background: var(--gf-primary); color: #fff; } .site-footer__social svg { width: 16px; height: 16px; } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 48px; padding-top: 22px; display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 12px; } /* ============================================================ Spec table (landings producto) ============================================================ */ .spec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--gf-font-mono); font-size: 13.5px; background: #fff; border: 1px solid var(--gf-border); border-radius: 14px; overflow: hidden; } .spec-table thead th { background: var(--gf-navy-900); color: #fff; text-align: left; font-family: var(--gf-font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 18px; } .spec-table tbody td { padding: 13px 18px; border-top: 1px solid var(--gf-border); color: var(--gf-fg); } .spec-table tbody tr:nth-child(even) td { background: var(--gf-paper); } .spec-table tbody tr:first-child td { border-top: 0; } .spec-table tbody td strong { color: var(--gf-navy-900); font-family: var(--gf-font-display); font-weight: 700; } /* ============================================================ Process timeline (5 steps) ============================================================ */ .process-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } .process-timeline::before { content: ""; position: absolute; top: 26px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--gf-primary) 0%, var(--gf-accent) 100%); } .process-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; position: relative; padding: 0 12px; } .process-step__num { width: 52px; height: 52px; background: #fff; border: 2px solid var(--gf-primary); border-radius: 999px; display: grid; place-items: center; font-family: var(--gf-font-display); font-weight: 800; font-size: 18px; color: var(--gf-primary); position: relative; z-index: 1; } .process-step__title { font-family: var(--gf-font-display); font-weight: 700; font-size: 15px; color: var(--gf-fg); letter-spacing: -0.005em; margin-top: 6px; } .process-step__desc { font-size: 13.5px; color: var(--gf-fg-muted); line-height: 1.5; } /* ============================================================ Cotización page (formulario completo) ============================================================ */ .quote-page { background: var(--gf-paper); padding-block: var(--section-py); } .quote-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; } .quote-form { background: #fff; border: 1px solid var(--gf-border); border-radius: 18px; padding: 36px; box-shadow: var(--gf-shadow-sm); } .quote-form h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; } .quote-form__sub { font-size: 14.5px; color: var(--gf-fg-muted); margin-bottom: 24px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .form-field--full { grid-column: 1 / -1; } .form-field label { font-family: var(--gf-font-display); font-size: 13px; font-weight: 700; color: var(--gf-fg); letter-spacing: 0.005em; } .form-field label .req { color: var(--gf-red-600); } .form-field input, .form-field select, .form-field textarea { font-family: var(--gf-font-body); font-size: 14.5px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--gf-border-strong); background: #fff; color: var(--gf-fg); transition: all .15s var(--gf-ease-out); width: 100%; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--gf-primary); box-shadow: var(--gf-ring-focus); } .form-field textarea { resize: vertical; min-height: 100px; } .form-field__hint { font-size: 12.5px; color: var(--gf-fg-muted); } .file-drop { border: 1.5px dashed var(--gf-border-strong); border-radius: 12px; padding: 22px; text-align: center; font-size: 13.5px; color: var(--gf-fg-muted); background: var(--gf-paper); cursor: pointer; transition: all .15s; } .file-drop:hover { border-color: var(--gf-primary); color: var(--gf-primary); } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--gf-fg-muted); line-height: 1.5; margin: 14px 0 18px; } .checkbox-row input { margin-top: 3px; } .quote-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px; } .quote-side__card { background: var(--gf-navy-900); color: #fff; border-radius: 18px; padding: 28px; } .quote-side__card h4 { font-family: var(--gf-font-display); font-weight: 800; font-size: 18px; color: #fff; margin-bottom: 14px; letter-spacing: -0.015em; } .quote-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .quote-side__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; } .quote-side__list li svg { color: var(--gf-gold-500); flex-shrink: 0; margin-top: 2px; } .quote-side__contacts { background: #fff; border: 1px solid var(--gf-border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; } .quote-side__contact { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gf-border); text-decoration: none; color: inherit; } .quote-side__contact:last-child { border-bottom: 0; } .quote-side__contact .icon { width: 38px; height: 38px; background: var(--gf-green-50); color: var(--gf-primary); border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; } .quote-side__contact strong { display: block; font-family: var(--gf-font-display); font-weight: 700; font-size: 14.5px; color: var(--gf-fg); } .quote-side__contact span { font-size: 12.5px; color: var(--gf-fg-muted); } /* Confirmation */ .confirmation { background: #fff; border: 1px solid var(--gf-border); border-radius: 18px; padding: 56px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } .confirmation__icon { width: 72px; height: 72px; background: var(--gf-green-50); color: var(--gf-primary); border-radius: 999px; display: grid; place-items: center; } .confirmation__icon svg { width: 36px; height: 36px; } .confirmation h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; } .confirmation__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; text-align: left; width: 100%; max-width: 720px; } .confirmation__step { border: 1px solid var(--gf-border); border-radius: 14px; padding: 20px; } .confirmation__step strong { display: block; font-family: var(--gf-font-display); font-size: 13px; color: var(--gf-accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .confirmation__step h5 { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .confirmation__step p { font-size: 13.5px; color: var(--gf-fg-muted); } /* ============================================================ WhatsApp floating button ============================================================ */ .wa-floater { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; background: #25d366; color: #fff; border-radius: 999px; display: grid; place-items: center; z-index: 100; cursor: pointer; text-decoration: none; box-shadow: 0 10px 30px rgba(37,211,102,0.4); transition: transform .2s; } .wa-floater:hover { transform: scale(1.05); } /* ============================================================ Industry / Cotizar / Estanques landings — extras ============================================================ */ .applications-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .application-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 14px; background: #fff; border: 1px solid var(--gf-border); border-radius: 14px; cursor: pointer; transition: all .2s var(--gf-ease-out); text-decoration: none; color: inherit; } .application-tile:hover { border-color: var(--gf-primary); background: var(--gf-green-50); transform: translateY(-2px); } .application-tile__icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--gf-navy-900); color: var(--gf-gold-500); border-radius: 10px; } .application-tile__icon svg { width: 22px; height: 22px; } .application-tile__label { font-size: 13px; font-weight: 700; font-family: var(--gf-font-display); } .materials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .material-card { padding: 24px; background: var(--gf-paper); border: 1px solid var(--gf-border); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; } .material-card__badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gf-font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--gf-primary); text-transform: uppercase; } .material-card h4 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; } .material-card p { font-size: 13.5px; color: var(--gf-fg-muted); line-height: 1.55; } /* Page header (subpages with breadcrumb) */ .page-head { background: var(--gf-navy-900); color: #fff; position: relative; overflow: hidden; isolation: isolate; } .page-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 80% 30%, rgba(72,139,103,0.3), transparent 60%); z-index: -1; } .page-head__inner { padding-block: 64px; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 20px; } .breadcrumb a { color: inherit; text-decoration: none; } .breadcrumb a:hover { color: var(--gf-gold-500); } .breadcrumb span { color: rgba(255,255,255,0.4); } /* Sticky page nav (anchor) */ .page-nav { position: sticky; top: 76px; z-index: 30; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gf-border); } .page-nav__inner { display: flex; gap: 4px; overflow-x: auto; padding: 14px 0; } .page-nav__link { font-family: var(--gf-font-display); font-weight: 600; font-size: 13.5px; color: var(--gf-fg-muted); text-decoration: none; padding: 8px 14px; border-radius: 8px; white-space: nowrap; } .page-nav__link:hover { background: var(--gf-green-50); color: var(--gf-primary); } .page-nav__link.is-active { color: var(--gf-primary); background: var(--gf-green-50); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; } .hero__visual { aspect-ratio: 16/10; } .products-grid, .industries-grid, .diffs-grid, .projects-grid, .testimonials-grid, .services-grid { grid-template-columns: repeat(2, 1fr); } .industries-grid { grid-template-columns: repeat(4, 1fr); } .applications-grid { grid-template-columns: repeat(3, 1fr); } .materials-grid { grid-template-columns: repeat(2, 1fr); } .resources, .quote-grid, .filter-grid, .cta-banner__inner, .site-footer__grid { grid-template-columns: 1fr; } .resources__copy { padding: 40px; } .trust-bar__inner { grid-template-columns: repeat(3, 1fr); } .trust-bar__cell:last-child { border-right: 1px solid var(--gf-border); } .process-timeline { grid-template-columns: repeat(2, 1fr); gap: 24px; } .process-timeline::before { display: none; } .form-row { grid-template-columns: 1fr; } .cta-banner__actions { align-items: flex-start; } .site-nav { display: none; } } @media (max-width: 640px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } .products-grid, .projects-grid, .testimonials-grid, .services-grid, .diffs-grid { grid-template-columns: 1fr; } .trust-bar__inner { grid-template-columns: 1fr; } .trust-bar__cell { border-right: 0 !important; border-bottom: 1px solid var(--gf-border); padding: 14px 0; } .applications-grid { grid-template-columns: repeat(2, 1fr); } .utility-bar__right { display: none; } .confirmation__steps { grid-template-columns: 1fr; } } /* ============================================ PATCH FIX v1.1 - FAQ nativo + Footer grid ============================================ */ /* FAQ - Soporte para
HTML nativo */ details.faq-item { padding: 0; } details.faq-item[open] { border-color: var(--gf-primary); box-shadow: var(--gf-shadow-sm); } details.faq-item summary.faq-item__head { list-style: none; cursor: pointer; } details.faq-item summary.faq-item__head::-webkit-details-marker { display: none; } details.faq-item summary.faq-item__head::marker { display: none; } details.faq-item[open] .faq-item__icon { transform: rotate(45deg); background: var(--gf-primary); color: #fff; } details.faq-item .faq-item__body { max-height: none; overflow: visible; } details.faq-item .faq-item__body p { padding: 0 24px 22px; font-size: 15px; line-height: 1.6; color: var(--gf-fg-muted); margin: 0; } /* FOOTER - fix grid layout */ .site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); } @media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 560px) { .site-footer__inner { grid-template-columns: 1fr; gap: 32px; } } .site-footer__col h4 { font-family: var(--gf-font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gf-gold-500); margin: 0 0 16px 0; } .site-footer__col ul { list-style: none; padding: 0; margin: 0; } .site-footer__col ul li { margin: 0 0 8px 0; line-height: 1.6; } .site-footer__col a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 14px; transition: color 0.15s ease; } .site-footer__col a:hover { color: var(--gf-gold-500); } .site-footer__col img { height: 50px; width: auto; filter: brightness(0) invert(1); opacity: 0.95; margin-bottom: 18px; } .site-footer__social { display: flex; gap: 12px; margin-top: 20px; } .site-footer__social a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border-radius: 8px; color: #fff; transition: background 0.15s ease; } .site-footer__social a:hover { background: var(--gf-gold-600); color: var(--gf-navy-900); } .site-footer__bottom { padding: 24px 0; } .site-footer__bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.5); } /* HEADER - fix logo size */ .site-header__logo img { height: 46px; width: auto; display: block; } /* MOBILE menu toggle */ .mobile-toggle { display: none; background: transparent; border: 0; color: var(--gf-fg); cursor: pointer; padding: 8px; } @media (max-width: 900px) { .mobile-toggle { display: block; } .main-nav { display: none; } body.menu-open .main-nav { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 999; padding: 80px 24px 24px; overflow-y: auto; } body.menu-open .main-nav__list { flex-direction: column; gap: 4px; } }