/* ========================================================================== EP Sistemas — landing.css Sistema de design compartilhado para landing pages estáticas. Identidade: dark / code / terminal — verde-quase-preto, acento menta #2DD48C, tipografia JetBrains Mono (corpo) + Fraunces (display serifada itálica). Mobile-first, responsivo (breakpoints 720px / 1024px), acessível. ========================================================================== */ /* ---------- 1. TOKENS / VARIÁVEIS ---------- */ :root { /* paleta — fundos */ --ep-bg: #0B1512; /* fundo base (root) */ --ep-bg-deep: #060a08; /* fundo mais escuro (overlay/terminal) */ --ep-bg-panel: #0a120e; /* janelas de terminal */ --ep-bg-panel-2: #0a1410; /* molduras / cards de mídia */ --ep-surface: rgba(11, 21, 18, 0.6); /* superfície de card */ --ep-surface-soft: rgba(45, 212, 140, 0.03);/* tonalidade menta sutil */ /* paleta — acento menta (cor-assinatura) */ --ep-mint: #2DD48C; --ep-mint-bright: #7DFFC2; --ep-mint-12: rgba(45, 212, 140, 0.12); --ep-mint-15: rgba(45, 212, 140, 0.15); --ep-mint-20: rgba(45, 212, 140, 0.20); --ep-mint-25: rgba(45, 212, 140, 0.25); --ep-mint-30: rgba(45, 212, 140, 0.30); --ep-mint-40: rgba(45, 212, 140, 0.40); --ep-mint-06: rgba(45, 212, 140, 0.06); --ep-mint-08: rgba(45, 212, 140, 0.08); /* paleta — texto */ --ep-text: #D9E8DF; /* corpo */ --ep-text-bright: #E8F5ED; /* títulos / destaque claro */ --ep-text-soft: #b8c9c0; /* texto secundário */ --ep-text-muted: #8fa59a; /* apoio / legendas */ --ep-text-dim: #4a6b5a; /* dim / metadados */ --ep-text-faint: #3a5447; /* desabilitado */ /* pontos da janela de terminal mac */ --ep-dot-red: #FF5F57; --ep-dot-yellow: #FEBC2E; --ep-dot-green: #28C840; /* tipografia */ --ep-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ep-font-serif: "Fraunces", Georgia, "Times New Roman", serif; /* escala tipográfica (fluida) */ --ep-fs-micro: 10px; --ep-fs-tag: 11px; --ep-fs-small: 13px; --ep-fs-body: 15px; --ep-fs-lead: clamp(17px, 2.4vw, 19px); --ep-fs-h4: clamp(20px, 2.6vw, 24px); --ep-fs-h3: clamp(24px, 3.4vw, 32px); --ep-fs-h2: clamp(34px, 7vw, 96px); --ep-fs-h1: clamp(40px, 11vw, 120px); /* layout */ --ep-maxw: 1440px; --ep-maxw-prose: 820px; --ep-gutter: 18px; /* mobile */ --ep-nav-h: 72px; /* misc */ --ep-line: 1px solid var(--ep-mint-25); --ep-line-soft: 1px solid var(--ep-mint-15); --ep-grid-size: 48px; --ep-radius: 0px; /* estética angular, sem cantos arredondados */ } /* ---------- 2. RESET LEVE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; } body { background: var(--ep-bg); color: var(--ep-text); font-family: var(--ep-font-mono); font-size: var(--ep-fs-small); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100%; overflow-x: hidden; position: relative; } img, video, svg { max-width: 100%; display: block; height: auto; } a { color: var(--ep-mint); text-decoration: none; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul { padding: 0; list-style: none; } button { font-family: inherit; } /* fundo blueprint (grid de pontos/linhas menta) — aplique em ou wrapper */ .ep-grid-bg::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--ep-mint-06) 1px, transparent 1px), linear-gradient(90deg, var(--ep-mint-06) 1px, transparent 1px); background-size: var(--ep-grid-size) var(--ep-grid-size); } /* scrollbar no tom do site */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #1a231e; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- 3. ACESSIBILIDADE ---------- */ :focus-visible { outline: 2px solid var(--ep-mint); outline-offset: 3px; } .ep-skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ep-mint); color: var(--ep-bg); padding: 10px 16px; font-weight: 700; } .ep-skip-link:focus { left: 8px; top: 8px; } .ep-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---------- 4. UTILIDADES ---------- */ .ep-mint { color: var(--ep-mint); } .ep-dim { color: var(--ep-text-dim); } .ep-muted { color: var(--ep-text-muted); } .ep-bright { color: var(--ep-text-bright); } /* "marca-texto" menta sólido (igual ao .strong da home) */ .ep-mark { color: var(--ep-bg); background: var(--ep-mint); padding: 0 0.1em; display: inline-block; font-style: normal; } /* itálico menta (igual ao .em da home) */ .ep-em { font-style: italic; color: var(--ep-mint); font-family: var(--ep-font-serif); } /* rótulo monospaced numerado tipo "/01" / "00 —" */ .ep-kicker { color: var(--ep-mint); font-size: var(--ep-fs-tag); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } /* container central */ .ep-container { width: 100%; max-width: var(--ep-maxw); margin: 0 auto; padding-left: var(--ep-gutter); padding-right: var(--ep-gutter); } /* ---------- 5. HEADER / NAV (fixo) ---------- */ .ep-header { position: sticky; top: 0; z-index: 30; background: rgba(11, 21, 18, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ep-mint-25); } .ep-nav { max-width: var(--ep-maxw); margin: 0 auto; height: var(--ep-nav-h); padding: 0 var(--ep-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ep-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; } .ep-brand img { height: 40px; width: auto; } .ep-brand-text { font-family: var(--ep-font-mono); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--ep-text-bright); } .ep-brand-text b { color: var(--ep-mint); font-weight: 700; } .ep-nav-links { display: none; /* mobile: oculto */ align-items: baseline; gap: 28px; } .ep-nav-link { display: inline-flex; align-items: baseline; gap: 7px; color: var(--ep-text-soft); font-size: 14px; white-space: nowrap; } .ep-nav-link:hover { color: var(--ep-text-bright); } .ep-nav-link .n { color: var(--ep-mint); font-size: var(--ep-fs-tag); font-weight: 700; } .ep-nav-cta { display: none; /* mobile: oculto (o hero já tem CTA); aparece ≥600px */ color: var(--ep-mint); font-size: 12px; border: 1px solid var(--ep-mint); padding: 8px 13px; letter-spacing: 0.05em; white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; } @media (min-width: 600px) { .ep-nav-cta { display: inline-block; } } .ep-nav-cta:hover { background: var(--ep-mint); color: var(--ep-bg); } /* ---------- 6. SEÇÕES ---------- */ .ep-section { position: relative; z-index: 2; max-width: var(--ep-maxw); margin: 0 auto; padding: 48px var(--ep-gutter); } .ep-section-narrow { max-width: 1040px; } /* cabeçalho de seção: /01 ——— meta + título Fraunces */ .ep-sec-head { margin-bottom: 36px; } .ep-sec-head-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .ep-sec-head-top .n { color: var(--ep-mint); font-size: var(--ep-fs-small); font-weight: 700; letter-spacing: 0.1em; } .ep-sec-rule { flex: 1; height: 1px; background: var(--ep-mint-25); } .ep-sec-meta { color: var(--ep-text-dim); font-size: var(--ep-fs-tag); letter-spacing: 0.05em; } .ep-sec-title { font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: var(--ep-fs-h2); line-height: 1; letter-spacing: -0.03em; color: var(--ep-text-bright); } /* ---------- 7. TIPOGRAFIA DE CONTEÚDO ---------- */ .ep-lead { font-family: var(--ep-font-serif); font-weight: 300; font-size: var(--ep-fs-lead); line-height: 1.6; color: var(--ep-text); max-width: var(--ep-maxw-prose); text-align: justify; -webkit-hyphens: auto; hyphens: auto; } .ep-prose { font-size: var(--ep-fs-body); color: var(--ep-text-soft); line-height: 1.75; max-width: 640px; text-align: justify; -webkit-hyphens: auto; hyphens: auto; } .ep-prose + .ep-prose { margin-top: 18px; } .ep-prose strong, .ep-strong { color: var(--ep-mint); font-weight: 700; } .ep-quote { font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 4vw, 28px); line-height: 1.25; color: var(--ep-text-bright); } /* ---------- 8. BOTÕES ---------- */ .ep-btn { display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--ep-font-mono); font-size: 14px; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .ep-btn .n { opacity: 0.6; font-size: var(--ep-fs-tag); letter-spacing: 0.15em; font-weight: 700; } .ep-btn .arr { font-size: 18px; } .ep-btn:hover { transform: translateY(-1px); } .ep-btn-primary { background: var(--ep-mint); color: var(--ep-bg); } .ep-btn-primary:hover { background: var(--ep-mint-bright); } .ep-btn-ghost { background: transparent; color: var(--ep-text); border: 1px solid var(--ep-mint-30); font-weight: 500; } .ep-btn-ghost:hover { border-color: var(--ep-mint); color: var(--ep-text-bright); } /* botão compacto, sem grid de 3 colunas */ .ep-btn.ep-btn-inline { display: inline-flex; gap: 10px; } /* ---------- 9. JANELA DE TERMINAL ---------- */ .ep-terminal { border: 1px solid var(--ep-mint-30); background: var(--ep-bg-panel); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .ep-terminal-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--ep-mint-20); background: var(--ep-surface-soft); } .ep-dots { display: flex; gap: 6px; } .ep-dots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .ep-dots .r { background: var(--ep-dot-red); } .ep-dots .y { background: var(--ep-dot-yellow); } .ep-dots .g { background: var(--ep-dot-green); } .ep-terminal-title { text-align: center; color: var(--ep-text-muted); font-size: var(--ep-fs-tag); letter-spacing: 0.04em; } .ep-terminal-body { padding: 22px 22px; font-size: var(--ep-fs-small); line-height: 1.9; } .ep-terminal-body .line { color: var(--ep-text-soft); } .ep-terminal-body .prompt { color: var(--ep-mint); margin-right: 8px; } .ep-terminal-body .ok { color: var(--ep-mint); margin-right: 8px; } .ep-terminal-body .ready { color: var(--ep-mint-bright); margin-right: 8px; } .ep-terminal-body .out { color: var(--ep-text-bright); font-size: clamp(16px, 3.4vw, 20px); font-weight: 500; margin-top: 10px; } .ep-caret { display: inline-block; color: var(--ep-mint); animation: ep-blink 1s steps(1) infinite; } @keyframes ep-blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} } /* ---------- 10. HERO ---------- */ .ep-hero { position: relative; z-index: 2; max-width: var(--ep-maxw); margin: 0 auto; padding: 32px var(--ep-gutter) 24px; } .ep-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--ep-fs-micro); letter-spacing: 0.15em; color: var(--ep-mint); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--ep-mint-20); } .ep-hero-meta .dim { color: var(--ep-text-dim); } .ep-hero h1 { font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 8vw, 120px); /* mobile-safe: evita cortar palavras longas do título */ line-height: 0.95; letter-spacing: -0.04em; color: var(--ep-text-bright); margin-bottom: 28px; overflow-wrap: break-word; } /* restaura o tamanhão do H1 no desktop (preserva o visual aprovado) */ @media (min-width: 1024px) { .ep-hero h1 { font-size: var(--ep-fs-h1); } } .ep-hero-body { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } .ep-hero-p { font-family: var(--ep-font-serif); font-weight: 300; font-size: var(--ep-fs-lead); line-height: 1.7; color: var(--ep-text); max-width: 580px; } .ep-hero-ctas { display: flex; flex-direction: column; gap: 12px; } /* o cartão terminal dentro do hero ocupa a coluna lateral em desktop */ .ep-hero-terminal { margin-top: 8px; } /* ---------- 11. FAIXA DE NÚMEROS / MÉTRICAS ---------- */ .ep-stats { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ep-mint-25); margin-top: 32px; } .ep-stat { position: relative; padding: 24px 0; border-bottom: 1px solid var(--ep-mint-25); } .ep-stat .n { position: absolute; top: 14px; right: 4px; color: var(--ep-text-dim); font-size: var(--ep-fs-tag); letter-spacing: 0.1em; } .ep-stat-v { font-family: var(--ep-font-serif); font-weight: 300; font-size: clamp(40px, 9vw, 64px); line-height: 1; letter-spacing: -0.04em; color: var(--ep-text-bright); margin-bottom: 12px; } .ep-stat-v .suf { color: var(--ep-mint); font-style: italic; } .ep-stat-s { color: var(--ep-text-muted); font-size: 12px; line-height: 1.55; max-width: 240px; } /* ---------- 12. GRIDS DE CARDS ---------- */ .ep-grid-2, .ep-grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; } .ep-card { border: 1px solid var(--ep-mint-25); background: var(--ep-surface); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.18s ease, transform 0.18s ease; } .ep-card:hover { border-color: var(--ep-mint-40); transform: translateY(-2px); } .ep-card-chrome { display: flex; align-items: center; gap: 10px; font-size: var(--ep-fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ep-mint); padding-bottom: 12px; border-bottom: 1px solid var(--ep-mint-15); } .ep-card-chrome .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ep-mint); box-shadow: 0 0 8px var(--ep-mint); animation: ep-pulse 1.4s ease-in-out infinite; } .ep-card-chrome .spacer { margin-left: auto; color: var(--ep-text-dim); } @keyframes ep-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } .ep-card-title { font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: var(--ep-fs-h4); letter-spacing: -0.01em; color: var(--ep-text-bright); line-height: 1.1; } .ep-card-desc { font-size: var(--ep-fs-small); color: var(--ep-text-soft); line-height: 1.65; text-align: justify; -webkit-hyphens: auto; hyphens: auto; } .ep-card-num { color: var(--ep-mint); font-size: var(--ep-fs-tag); font-weight: 700; letter-spacing: 0.15em; } /* ---------- 13. LISTA DE FEATURES (check menta) ---------- */ .ep-features { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ep-mint-25); } .ep-feature { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--ep-mint-15); } .ep-feature-check { color: var(--ep-mint); font-weight: 700; line-height: 1.5; } .ep-feature-check::before { content: "✓"; } .ep-feature-text { color: var(--ep-text-bright); font-size: 14px; line-height: 1.5; } .ep-feature-text .desc { display: block; color: var(--ep-text-soft); font-size: var(--ep-fs-small); margin-top: 4px; } /* lista "about" numerada (variação) */ .ep-numlist { border-top: 1px solid var(--ep-mint-25); } .ep-numlist-item { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ep-mint-15); align-items: baseline; } .ep-numlist-item .n { color: var(--ep-mint); font-size: var(--ep-fs-tag); letter-spacing: 0.15em; font-weight: 700; } .ep-numlist-item .t { color: var(--ep-text-bright); font-size: 14px; } /* ---------- 14. PROCESSO (passos numerados) ---------- */ .ep-process { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; } .ep-process-line { display: none; } /* linha horizontal só aparece em desktop */ .ep-step { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ep-mint-15); align-items: start; } .ep-step-dot { width: 12px; height: 12px; background: var(--ep-mint); margin: 6px auto 0; } .ep-step-inner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n t" ". cmd" "b b"; column-gap: 12px; row-gap: 6px; align-items: baseline; } .ep-step .n { grid-area: n; color: var(--ep-mint); font-size: var(--ep-fs-tag); font-weight: 700; letter-spacing: 0.15em; } .ep-step-title { grid-area: t; font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: var(--ep-fs-h4); color: var(--ep-text-bright); } .ep-step-cmd { grid-area: cmd; justify-self: start; font-size: var(--ep-fs-micro); color: var(--ep-mint); background: var(--ep-mint-08); padding: 3px 8px; } .ep-step-body { grid-area: b; font-size: 12px; color: var(--ep-text-soft); line-height: 1.6; padding-top: 6px; } /* ---------- 15. FAQ (accordion CSS-only com

) ---------- */ .ep-faq { border-top: 1px solid var(--ep-mint-25); max-width: 960px; } .ep-faq-item { border-bottom: 1px solid var(--ep-mint-20); } .ep-faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr 32px; gap: 12px; align-items: baseline; padding: 22px 0; color: var(--ep-text-bright); } .ep-faq-item summary::-webkit-details-marker { display: none; } .ep-faq-item summary .n { color: var(--ep-mint); font-size: var(--ep-fs-tag); font-weight: 700; letter-spacing: 0.1em; } .ep-faq-item summary .q { font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: clamp(17px, 3vw, 20px); letter-spacing: -0.01em; } .ep-faq-item summary .toggle { color: var(--ep-mint); font-size: 20px; text-align: right; transition: transform 0.2s ease; } .ep-faq-item summary .toggle::before { content: "+"; } .ep-faq-item[open] summary .toggle::before { content: "−"; } .ep-faq-answer { padding: 0 0 24px 52px; color: var(--ep-text-soft); font-size: 14px; line-height: 1.75; max-width: 780px; text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* ---------- 16. FAIXA DE CTA ---------- */ .ep-cta { position: relative; z-index: 2; } .ep-cta h2 { font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: clamp(34px, 8vw, 96px); line-height: 1; letter-spacing: -0.03em; color: var(--ep-text-bright); margin-bottom: 28px; } .ep-cta-row { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 24px; border-top: 1px solid var(--ep-mint-25); } .ep-cta-p { font-family: var(--ep-font-serif); font-weight: 300; font-size: var(--ep-fs-lead); line-height: 1.6; color: var(--ep-text-soft); max-width: 460px; } .ep-cta-list { display: grid; } .ep-cta-item { display: grid; grid-template-columns: 96px 1fr 24px; gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--ep-mint-15); color: var(--ep-text-bright); } .ep-cta-item:hover .v { color: var(--ep-mint); } .ep-cta-item .k { color: var(--ep-mint); font-size: var(--ep-fs-tag); letter-spacing: 0.15em; font-weight: 700; } .ep-cta-item .v { font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: clamp(16px, 3vw, 20px); } .ep-cta-item .arr { color: var(--ep-mint); font-size: 18px; text-align: right; } /* "faixa" destacada de CTA (caixa com tonalidade menta) */ .ep-cta-band { border: 1px solid var(--ep-mint-30); background: var(--ep-surface-soft); padding: 32px 20px; display: flex; flex-direction: column; gap: 24px; } .ep-cta-band h2 { margin-bottom: 0; } /* ---------- 17. PROBLEMA / DOR ---------- */ .ep-pain { display: grid; grid-template-columns: 1fr; gap: 24px; } .ep-pain-quote { font-family: var(--ep-font-serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 4.5vw, 28px); line-height: 1.25; color: var(--ep-text-bright); } /* ---------- 18. FOOTER ---------- */ .ep-footer { position: relative; z-index: 2; border-top: 1px solid var(--ep-mint-25); background: rgba(6, 12, 10, 0.6); padding: 48px var(--ep-gutter) 24px; font-size: var(--ep-fs-small); color: var(--ep-text-soft); } .ep-footer-inner { max-width: var(--ep-maxw); margin: 0 auto; } .ep-footer-top { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; border-bottom: 1px solid var(--ep-mint-15); } .ep-footer-brand img { height: 40px; width: auto; margin-bottom: 16px; } .ep-footer-tagline { font-family: var(--ep-font-serif); font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--ep-text-soft); max-width: 380px; margin-bottom: 18px; } .ep-footer-socials { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ep-footer-social { color: var(--ep-mint); font-size: 12px; letter-spacing: 0.1em; border-bottom: 1px solid var(--ep-mint-30); padding-bottom: 2px; } .ep-footer-sep { color: var(--ep-text-dim); } .ep-footer-col { display: flex; flex-direction: column; gap: 8px; } .ep-footer-col-label { font-size: var(--ep-fs-micro); letter-spacing: 0.25em; color: var(--ep-text-dim); text-transform: uppercase; margin-bottom: 8px; } .ep-footer-link { color: var(--ep-text); font-size: var(--ep-fs-small); padding: 5px 0; display: flex; align-items: baseline; gap: 10px; } .ep-footer-link:hover { color: var(--ep-mint); } .ep-footer-link .n { color: var(--ep-mint); font-size: var(--ep-fs-micro); font-weight: 700; letter-spacing: 0.15em; min-width: 18px; } .ep-footer-contact-item { padding-bottom: 8px; } .ep-footer-contact-k { font-size: 9px; letter-spacing: 0.25em; color: var(--ep-text-dim); text-transform: uppercase; margin-bottom: 4px; } .ep-footer-contact-v { font-size: var(--ep-fs-small); color: var(--ep-text); } .ep-footer-contact-a { color: var(--ep-mint); border-bottom: 1px solid var(--ep-mint-25); } .ep-footer-base { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 18px; font-size: var(--ep-fs-tag); letter-spacing: 0.05em; } .ep-footer-base-left { display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--ep-text-soft); } .ep-footer-company { color: var(--ep-mint); font-weight: 700; } .ep-footer-sig { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ep-mint-12); font-size: var(--ep-fs-micro); letter-spacing: 0.15em; color: var(--ep-text-dim); text-transform: uppercase; } /* ========================================================================= BREAKPOINTS ========================================================================= */ /* ---------- TABLET ≥720px ---------- */ @media (min-width: 720px) { :root { --ep-gutter: 32px; --ep-nav-h: 88px; } .ep-section { padding: 64px var(--ep-gutter); } .ep-hero { padding: 56px var(--ep-gutter) 32px; } .ep-footer { padding: 56px var(--ep-gutter) 24px; } .ep-grid-2 { grid-template-columns: 1fr 1fr; gap: 24px; } .ep-grid-3 { grid-template-columns: 1fr 1fr; gap: 24px; } .ep-stats { grid-template-columns: 1fr 1fr; gap: 0; } .ep-stat { padding: 28px 28px; border-left: 1px solid var(--ep-mint-25); } .ep-stat:nth-child(odd) { border-left: none; } .ep-features { grid-template-columns: 1fr 1fr; column-gap: 32px; } .ep-process { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; } .ep-step { grid-template-columns: 1fr; border-bottom: none; padding: 0; text-align: center; } .ep-step-dot { margin: 12px auto 16px; } .ep-step-inner { grid-template-columns: 1fr; grid-template-areas: "n" "t" "b" "cmd"; row-gap: 10px; text-align: center; justify-items: center; } .ep-step-cmd { justify-self: center; } .ep-cta-row { grid-template-columns: 1fr 1.2fr; gap: 48px; } .ep-cta-item { grid-template-columns: 140px 1fr 40px; gap: 20px; } .ep-pain { grid-template-columns: 1fr 1.3fr; gap: 48px; } .ep-footer-top { grid-template-columns: 1.4fr 1fr 1.1fr; gap: 40px; } } /* ---------- DESKTOP ≥1024px ---------- */ @media (min-width: 1024px) { :root { --ep-gutter: 56px; --ep-nav-h: 96px; } .ep-section { padding: 96px var(--ep-gutter); } .ep-hero { padding: 72px var(--ep-gutter) 40px; } .ep-footer { padding: 72px var(--ep-gutter) 32px; } .ep-nav-links { display: flex; } .ep-brand img { height: 56px; } .ep-hero-body { grid-template-columns: 1.3fr 1fr; gap: 48px; } .ep-hero-ctas { gap: 12px; } .ep-stats { grid-template-columns: 1.2fr 1fr 1fr; } .ep-stat { border-left: 1px solid var(--ep-mint-25); } .ep-stat:nth-child(odd) { border-left: 1px solid var(--ep-mint-25); } .ep-stat:first-child { border-left: none; } .ep-grid-3 { grid-template-columns: repeat(3, 1fr); } .ep-process { grid-template-columns: repeat(6, 1fr); } .ep-process-line { display: block; position: absolute; top: 18px; left: 8%; right: 8%; height: 1px; background: var(--ep-mint-30); } .ep-footer-top { grid-template-columns: 1.4fr 1fr 1.1fr 1fr; gap: 48px; } } /* ========================================================================= ===== FOOTER PADRÃO (igual à home) ===== Réplica estática (HTML+CSS) do