/* ============================================================================ Wego Assistant — Site institucional (landing pública) Aplicação da marca-casa. Tokens espelhados de doc/brand/tokens.css. Assinatura = a aspa de citação (barra teal + aspa). A ousadia mora ali. Autoria: Tais · pt-BR · CSS próprio, sem libs. ============================================================================ */ :root { /* Marca */ --brand: #2563EB; --brand-dark: #1D4ED8; --brand-darker: #1A3DB0; --brand-light: #EEF2FF; --brand-subtle: #DCE6FD; --accent: #0EA882; /* teal — a fonte citada */ --accent-dark: #0B8A6B; --accent-light: #E6F7F3; /* Tinta / superfície */ --n0: #FFFFFF; --n50: #F8F9FB; --n100:#F1F3F7; --n200:#E6E9F0; --n300:#D6DBE6; --n400:#B6BECF; --n500:#8A93A6; --n600:#5E6678; --n700:#3A4150; --n800:#252A35; --n900:#16181D; --n950:#0E1014; --success: #15814B; --success-light:#E6F4EC; --warning: #B45309; /* Assinatura de citação */ --quote-bg: rgba(37, 99, 235, 0.07); --quote-border: #2563EB; --quote-accent: #0EA882; /* Aliases */ --bg: var(--n50); --surface: var(--n0); --sunken: var(--n100); --border: var(--n200); --border-strong: var(--n300); --text: var(--n900); --text-2: var(--n600); --text-on-brand: #FFFFFF; /* Tipografia */ --font-display: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Courier New', monospace; /* Espaço (base 4px) */ --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem; /* Radius */ --r-sm:.375rem; --r-md:.625rem; --r-lg:.875rem; --r-xl:1.25rem; --r-2xl:1.5rem; --r-full:9999px; /* Sombra tingida de índigo */ --sh-sm: 0 1px 2px 0 rgba(22,24,29,.06); --sh-md: 0 4px 10px -2px rgba(22,24,29,.08), 0 2px 4px -2px rgba(22,24,29,.05); --sh-lg: 0 12px 24px -6px rgba(22,24,29,.10), 0 4px 8px -4px rgba(22,24,29,.06); --sh-xl: 0 24px 48px -12px rgba(29,41,80,.22), 0 8px 16px -8px rgba(29,41,80,.10); --focus: 0 0 0 3px rgba(37,99,235,.32); /* Movimento */ --dur-fast:120ms; --dur:200ms; --dur-slow:360ms; --ease: cubic-bezier(.4,0,.2,1); --ease-emph: cubic-bezier(.2,.8,.2,1); --maxw: 1120px; } /* DARK MODE — calibrado (classe no ) */ html.dark { --brand: #5B8DEF; --brand-dark: #7BA3F2; --brand-darker: #93B4F5; --brand-light: #1B2540; --brand-subtle: #25325A; --accent: #2DD4B0; --accent-dark: #4FE0C2; --accent-light: #13302A; --success: #34C77E; --success-light:#122B1F; --warning: #F0B429; --quote-bg: rgba(91,141,239,.16); --quote-border: #5B8DEF; --quote-accent: #2DD4B0; --bg: var(--n950); --surface: #181B22; --sunken: #121419; --border: #2B313D; --border-strong: #3A4150; --text: #F4F6FB; --text-2: #A8B2C4; --text-on-brand: #0E1014; /* brand é claro no dark → texto tinta */ --sh-md: 0 4px 10px -2px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3); --sh-lg: 0 12px 24px -6px rgba(0,0,0,.45); --sh-xl: 0 24px 48px -12px rgba(0,0,0,.55), 0 8px 16px -8px rgba(0,0,0,.4); --focus: 0 0 0 3px rgba(91,141,239,.45); } /* ============================================================================ RESET */ *,*::before,*::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } } body { font-family: var(--font-base); font-size: 1rem; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } img,svg { display:block; max-width:100%; } a { color: var(--brand-darker); text-decoration: none; } html.dark a { color: var(--brand-dark); } a:hover { text-decoration: underline; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: var(--brand-subtle); color: var(--n900); } /* ============================================================================ LAYOUT */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); } .section { padding-block: clamp(3.5rem, 8vw, 6rem); } .eyebrow { display:inline-flex; align-items:center; gap:var(--s2); font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-dark); } html.dark .eyebrow { color: var(--accent); } .eyebrow::before { content:""; width:18px; height:2px; border-radius:2px; background: var(--accent); } h1,h2,h3 { font-family: var(--font-display); line-height:1.15; letter-spacing:-.02em; font-weight:700; color:var(--text); } h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); } h3 { font-size: 1.125rem; letter-spacing:-.01em; line-height:1.3; } .lead { font-size: clamp(1.05rem,1.6vw,1.25rem); color: var(--text-2); line-height:1.6; } .section-head { max-width: 640px; margin-bottom: var(--s12); } .section-head .lead { margin-top: var(--s4); } .section-head.center { margin-inline:auto; text-align:center; } /* ============================================================================ BUTTONS */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:44px; padding: .7rem 1.25rem; border-radius: var(--r-md); border:1px solid transparent; font-weight:600; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap; transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { text-decoration:none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: var(--text-on-brand); box-shadow: var(--sh-sm); } .btn-primary:hover { background: var(--brand-dark); box-shadow: var(--sh-md); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--sunken); border-color: var(--text-2); } .btn-lg { min-height:52px; padding:.9rem 1.6rem; font-size:1.02rem; } .btn-block { width:100%; } .btn .arrow { transition: transform var(--dur) var(--ease); } .btn:hover .arrow { transform: translateX(3px); } /* ============================================================================ HEADER */ .header { position: sticky; top:0; z-index:50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .header.scrolled { border-bottom-color: var(--border); } .header .wrap { display:flex; align-items:center; gap:var(--s6); height:68px; } .brand-logo { height:30px; width:auto; } .brand-logo .dark-only { display:none; } .nav { display:flex; gap:var(--s2); margin-left:auto; } .nav a { color: var(--text-2); font-weight:500; font-size:.92rem; padding:.5rem .75rem; border-radius: var(--r-md); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav a:hover { color: var(--text); background: var(--sunken); text-decoration:none; } .header-actions { display:flex; align-items:center; gap:var(--s3); } .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-md); background:transparent; border:1px solid var(--border); color:var(--text-2); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-toggle:hover { background: var(--sunken); color: var(--text); } .theme-toggle .icon-sun { display:none; } html.dark .theme-toggle .icon-sun { display:block; } html.dark .theme-toggle .icon-moon { display:none; } .link-entrar { color: var(--text); font-weight:600; font-size:.92rem; } .menu-btn { display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--r-md); background:transparent; color:var(--text); } /* ---- Dropdown do nav ---- */ .nav-dropdown { position:relative; } .nav-dropdown-btn { display:inline-flex; align-items:center; gap:4px; color: var(--text-2); font-weight:500; font-size:.92rem; padding:.5rem .75rem; border-radius: var(--r-md); background:transparent; border:0; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); cursor:pointer; } .nav-dropdown-btn:hover { color: var(--text); background: var(--sunken); } .nav-dropdown-btn[aria-expanded="true"] { color: var(--text); background: var(--sunken); } .nav-chev { transition: transform var(--dur) var(--ease); flex-shrink:0; } .nav-dropdown-btn[aria-expanded="true"] .nav-chev { transform: rotate(180deg); } .nav-dropdown-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--s2) 0; list-style:none; z-index:60; /* Esconde sem display:none para poder animar */ visibility:hidden; pointer-events:none; opacity:0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-emph), visibility 0s var(--dur); } .nav-dropdown-menu.open { visibility:visible; pointer-events:auto; opacity:1; transform: translateY(0); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-emph), visibility 0s 0s; } @media (prefers-reduced-motion: reduce) { .nav-dropdown-menu { transition:none; } } .nav-dropdown-menu a { display:block; padding:.55rem var(--s5); color: var(--text-2); font-size:.9rem; font-weight:500; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav-dropdown-menu a:hover { color: var(--text); background: var(--sunken); text-decoration:none; } @media (max-width: 880px) { .nav, .link-entrar { display:none; } .nav.open { display:flex; flex-direction:column; gap:var(--s1); position:absolute; top:68px; left:0; right:0; background: var(--surface); border-bottom:1px solid var(--border); padding: var(--s4) var(--s5) var(--s6); box-shadow: var(--sh-lg); } .nav.open a { font-size:1rem; padding:.75rem; } .nav.open .link-entrar { display:block; } .menu-btn { display:flex; } /* No mobile, o dropdown vira lista plana dentro do menu aberto */ .nav.open .nav-dropdown { width:100%; } .nav.open .nav-dropdown-btn { width:100%; font-size:1rem; padding:.75rem; justify-content:space-between; } .nav.open .nav-dropdown-menu { position:static; box-shadow:none; border:none; background:var(--sunken); border-radius: var(--r-md); padding: var(--s2) 0; visibility:hidden; pointer-events:none; display:none; opacity:1; transform:none; margin-top: var(--s1); transition:none; } .nav.open .nav-dropdown-menu.open { display:block; visibility:visible; pointer-events:auto; } .nav.open .nav-dropdown-menu a { font-size:.95rem; padding:.65rem var(--s5); } } /* ============================================================================ HERO */ .hero { position:relative; overflow:hidden; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem,8vw,6rem); } .hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%), radial-gradient(50% 45% at 95% 15%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); } .hero .wrap { position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items:center; } .hero h1 { font-size: clamp(2.25rem, 5.2vw, 3.25rem); line-height:1.08; letter-spacing:-.03em; } .hero h1 .hl { color: var(--brand); position:relative; } .hero .lead { margin-top: var(--s5); max-width: 34ch; } .hero-pill { display:inline-flex; align-items:center; gap:var(--s2); margin-bottom: var(--s5); padding:.35rem .75rem .35rem .5rem; border-radius: var(--r-full); background: var(--surface); border:1px solid var(--border); font-size:.8rem; font-weight:600; color: var(--text-2); box-shadow: var(--sh-sm); } .hero-pill .dot { width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow:0 0 0 3px var(--accent-light); } .hero-cta { display:flex; flex-wrap:wrap; gap: var(--s3); margin-top: var(--s8); } .hero-note { margin-top: var(--s4); font-size:.85rem; color: var(--text-2); display:flex; align-items:center; gap:var(--s2); } .hero-note svg { color: var(--accent-dark); flex-shrink:0; } html.dark .hero-note svg { color: var(--accent); } /* Hero — assinatura: a conversa que cita */ .hero-demo { position:relative; } .chat-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--sh-xl); padding: var(--s5); position:relative; z-index:1; } .chat-card-head { display:flex; align-items:center; gap: var(--s3); padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--border); } .chat-avatar { width:40px; height:40px; border-radius: var(--r-md); background: var(--brand-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .chat-avatar svg { width:26px; height:26px; } .chat-id { display:flex; flex-direction:column; gap:1px; min-width:0; } .chat-id .name { font-family:var(--font-display); font-weight:600; font-size:.95rem; } .chat-ai-tag { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600; color: var(--text-2); } .chat-ai-tag .dot { width:5px; height:5px; border-radius:50%; background: var(--success); } .chat-body { display:flex; flex-direction:column; gap: var(--s4); } .bubble { max-width: 88%; padding:.7rem .9rem; font-size:.9rem; line-height:1.5; } .bubble.user { align-self:flex-end; background: var(--brand); color: var(--text-on-brand); border-radius: var(--r-xl) var(--r-xl) var(--r-sm) var(--r-xl); /* canto-âncora */ } .bubble.bot { align-self:flex-start; background: var(--sunken); color: var(--text); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm); /* canto-âncora */ } /* CITAÇÃO — o elemento-assinatura */ .citation { align-self:flex-start; max-width:92%; position:relative; margin-top: calc(-1 * var(--s2)); background: var(--quote-bg); border-left: 3px solid var(--quote-border); border-radius: 0 var(--r-md) var(--r-md) 0; padding: .7rem .9rem .7rem 1rem; } .citation .quote-mark { position:absolute; top:6px; left:10px; font-family: var(--font-display); font-size:1.4rem; line-height:1; font-weight:700; color: var(--quote-accent); } .citation .cite-label { display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--accent-dark); margin-bottom: 4px; } html.dark .citation .cite-label { color: var(--accent); } .citation .cite-label svg { width:13px; height:13px; } .citation .cite-src { font-size:.85rem; font-weight:600; color: var(--text); } .citation .cite-src a { color: var(--text); } .citation .cite-snippet { font-size:.8rem; color: var(--text-2); margin-top:2px; } .chat-footer { margin-top: var(--s4); padding-top: var(--s4); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap: var(--s3); } .chat-input { flex:1; display:flex; align-items:center; gap:var(--s2); background: var(--sunken); border:1px solid var(--border); border-radius: var(--r-full); padding:.5rem .5rem .5rem .9rem; font-size:.85rem; color: var(--text-2); } .chat-input .send { width:32px; height:32px; flex-shrink:0; border-radius:50%; background: var(--brand); color:var(--text-on-brand); border:0; display:flex; align-items:center; justify-content:center; } .helpful { font-size:.72rem; color: var(--text-2); display:flex; align-items:center; gap:6px; } .helpful button { border:0; background:transparent; color:var(--text-2); padding:2px; border-radius:var(--r-sm); } .helpful button:hover { color:var(--accent-dark); background:var(--accent-light); } /* badge "flutua" no widget, ancorado ao card */ .host-badge { position:absolute; z-index:0; right:-14px; bottom:-18px; display:flex; align-items:center; gap:var(--s2); background: var(--surface); border:1px solid var(--border); border-radius: var(--r-full); padding:.45rem .8rem .45rem .55rem; box-shadow: var(--sh-lg); font-size:.78rem; font-weight:600; color:var(--text-2); } .host-badge .launcher { width:28px; height:28px; border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .host-badge .launcher svg { width:18px; height:18px; } @media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; } .hero-demo { max-width: 460px; } .hero .lead { max-width: none; } } /* ============================================================================ TRUST STRIP */ .trust { background: var(--surface); border-block:1px solid var(--border); } .trust .wrap { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s8); padding-block: var(--s10); } .trust-item { display:flex; gap: var(--s4); } .trust-item .ico { flex-shrink:0; width:44px; height:44px; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center; background: var(--accent-light); color: var(--accent-dark); } html.dark .trust-item .ico { color: var(--accent); } .trust-item .ico svg { width:22px; height:22px; } .trust-item h3 { margin-bottom: 4px; } .trust-item p { font-size:.9rem; color: var(--text-2); } @media (max-width: 760px) { .trust .wrap { grid-template-columns:1fr; gap:var(--s6); } } /* ============================================================================ HOW IT WORKS */ .steps { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s6); position:relative; } .step { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); position:relative; box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .step:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--border-strong); } /* trilha de citação ligando os passos (a aspa como rail) */ .step .num { font-family: var(--font-mono); font-size:.8rem; font-weight:600; color: var(--brand); letter-spacing:.04em; display:inline-flex; align-items:center; gap:var(--s2); margin-bottom: var(--s4); } .step .num::before { content:""; width:24px; height:2px; background: var(--brand-subtle); border-radius:2px; } .step .step-ico { width:40px; height:40px; border-radius:var(--r-md); background:var(--brand-light); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s4); } .step .step-ico svg { width:22px; height:22px; } .step h3 { margin-bottom: var(--s2); } .step p { font-size:.92rem; color: var(--text-2); } .step .snippet { margin-top: var(--s4); font-family: var(--font-mono); font-size:.78rem; background: var(--n950); color:#E6E9F0; border-radius: var(--r-md); padding:.7rem .8rem; overflow-x:auto; line-height:1.5; border:1px solid var(--n800); } .step .snippet .tag { color:#5B8DEF; } .step .snippet .attr { color:#2DD4B0; } .step .snippet .str { color:#F0B429; } @media (max-width: 880px) { .steps { grid-template-columns:1fr; } } /* ============================================================================ FEATURES GRID */ .features { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); } .feature { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .feature:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); } .feature .fico { width:42px; height:42px; border-radius: var(--r-md); margin-bottom: var(--s4); display:flex; align-items:center; justify-content:center; background: var(--brand-light); color: var(--brand); } .feature .fico svg { width:22px; height:22px; } .feature h3 { margin-bottom: var(--s2); } .feature p { font-size:.9rem; color: var(--text-2); } .feature.span-accent .fico { background: var(--accent-light); color: var(--accent-dark); } html.dark .feature.span-accent .fico { color: var(--accent); } @media (max-width: 880px) { .features { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .features { grid-template-columns:1fr; } } /* ============================================================================ PRICING */ .pricing-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: var(--s6); align-items:stretch; } .price-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-xl); padding: clamp(1.5rem,3vw,2.25rem); display:flex; flex-direction:column; } .price-card.featured { border-color: var(--brand); box-shadow: var(--sh-lg); position:relative; } .price-card.featured::before { content:"Comece por aqui"; position:absolute; top:-12px; left: clamp(1.5rem,3vw,2.25rem); background: var(--brand); color: var(--text-on-brand); font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.3rem .7rem; border-radius: var(--r-full); } .price-card h3 { font-size:1.25rem; } .price-tag { display:flex; align-items:baseline; gap:var(--s2); margin:var(--s4) 0 var(--s2); } .price-tag .big { font-family:var(--font-display); font-size: clamp(2.25rem,5vw,2.75rem); font-weight:700; letter-spacing:-.03em; line-height:1; } .price-tag .per { font-size:.9rem; color: var(--text-2); } .price-sub { font-size:.9rem; color: var(--text-2); margin-bottom: var(--s5); } .price-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--s3); margin-bottom: var(--s6); flex:1; } .price-list li { display:flex; gap:var(--s3); font-size:.92rem; align-items:flex-start; } .price-list li svg { flex-shrink:0; margin-top:2px; color: var(--accent-dark); width:18px; height:18px; } html.dark .price-list li svg { color: var(--accent); } .price-list li .mono { font-family:var(--font-mono); font-size:.85rem; background:var(--sunken); padding:1px 6px; border-radius:var(--r-sm); } .price-foot { font-size:.8rem; color: var(--text-2); margin-top: var(--s4); text-align:center; } @media (max-width: 820px) { .pricing-grid { grid-template-columns:1fr; } .price-card.featured::before { left:1.5rem; } } /* ============================================================================ FAQ */ .faq { max-width: 760px; margin-inline:auto; display:flex; flex-direction:column; gap: var(--s3); } .faq-item { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); overflow:hidden; } .faq-q { width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding: var(--s5); font-weight:600; font-size:1rem; color: var(--text); background:transparent; border:0; } .faq-q:hover { background: var(--sunken); } .faq-q .chev { flex-shrink:0; transition: transform var(--dur) var(--ease); color: var(--text-2); } .faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); } .faq-a { max-height:0; overflow:hidden; transition: max-height var(--dur-slow) var(--ease); } .faq-a-inner { padding: 0 var(--s5) var(--s5); color: var(--text-2); font-size:.95rem; line-height:1.6; } /* ============================================================================ CTA FINAL */ .cta-final { position:relative; overflow:hidden; } .cta-final .panel { background: var(--brand); color:#fff; border-radius: var(--r-2xl); padding: clamp(2.5rem,6vw,4rem); text-align:center; position:relative; overflow:hidden; } html.dark .cta-final .panel { color: var(--n950); } .cta-final .panel::after { content:"\201C"; position:absolute; right: clamp(1rem,4vw,3rem); bottom: -1.5rem; font-family: var(--font-display); font-size: 14rem; line-height:1; font-weight:700; color: rgba(255,255,255,.10); pointer-events:none; } html.dark .cta-final .panel::after { color: rgba(14,16,20,.12); } .cta-final h2 { color: inherit; position:relative; z-index:1; } .cta-final p { color: inherit; opacity:.92; margin: var(--s4) auto 0; max-width: 48ch; position:relative; z-index:1; } .cta-final .hero-cta { justify-content:center; position:relative; z-index:1; } .cta-final .btn-primary { background:#fff; color: var(--brand-darker); } .cta-final .btn-primary:hover { background: var(--n100); } .cta-final .btn-ghost { color:#fff; border-color: rgba(255,255,255,.4); } .cta-final .btn-ghost:hover { background: rgba(255,255,255,.12); border-color:#fff; } html.dark .cta-final .btn-primary { background: var(--n950); color:#fff; } html.dark .cta-final .btn-ghost { color: var(--n950); border-color: rgba(14,16,20,.3); } /* ============================================================================ CONTACT FORM */ .contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items:start; } .contact-aside h2 { margin-bottom: var(--s4); } .contact-aside p { color: var(--text-2); margin-bottom: var(--s6); } .contact-points { list-style:none; padding:0; display:flex; flex-direction:column; gap: var(--s4); } .contact-points li { display:flex; gap:var(--s3); font-size:.95rem; } .contact-points li svg { flex-shrink:0; color: var(--accent-dark); width:20px; height:20px; } html.dark .contact-points li svg { color: var(--accent); } .contact-points a { font-family: var(--font-mono); font-size:.9rem; } .form-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-xl); padding: clamp(1.5rem,3vw,2rem); box-shadow: var(--sh-md); } .field { margin-bottom: var(--s5); } .field label { display:block; font-size:.82rem; font-weight:600; margin-bottom: var(--s2); color: var(--text); } .field .req { color: var(--brand); } .field input, .field textarea, .field select { width:100%; font:inherit; font-size:.95rem; color: var(--text); background: var(--bg); border:1px solid var(--border-strong); border-radius: var(--r-md); padding:.7rem .85rem; min-height:44px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field textarea { min-height:110px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--brand); box-shadow: var(--focus); } .field input:user-invalid, .field textarea:user-invalid { border-color: var(--warning); } .field-row { display:grid; grid-template-columns:1fr 1fr; gap: var(--s4); } .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-foot { display:flex; flex-direction:column; gap: var(--s3); } .form-consent { font-size:.78rem; color: var(--text-2); line-height:1.5; } .form-status { display:none; align-items:flex-start; gap:var(--s2); font-size:.9rem; font-weight:500; padding:.75rem .9rem; border-radius: var(--r-md); line-height:1.45; } .form-status.show { display:flex; } .form-status svg { flex-shrink:0; margin-top:1px; } .form-status.ok { background: var(--success-light); color: var(--success); border:1px solid color-mix(in srgb, var(--success) 40%, transparent); } .form-status.err { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); border:1px solid color-mix(in srgb, var(--warning) 40%, transparent); } .btn-primary[aria-busy="true"] { opacity:.75; pointer-events:none; } .spinner { width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 820px) { .contact-grid { grid-template-columns:1fr; } .field-row { grid-template-columns:1fr; } } /* ============================================================================ FOOTER */ .footer { background: var(--surface); border-top:1px solid var(--border); padding-block: var(--s12) var(--s8); } .footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s8); margin-bottom: var(--s10); } .footer-brand .brand-logo { height:28px; margin-bottom: var(--s4); } .footer-brand p { font-size:.88rem; color: var(--text-2); max-width: 34ch; } .footer-col h4 { font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--text-2); margin-bottom: var(--s4); } .footer-col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap: var(--s3); } .footer-col a { color: var(--text); font-size:.9rem; } .footer-col a:hover { color: var(--brand-darker); } html.dark .footer-col a:hover { color: var(--brand-dark); } .footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4); padding-top: var(--s6); border-top:1px solid var(--border); } .footer-bottom p { font-size:.82rem; color: var(--text-2); } .footer-bottom .made { font-size:.82rem; color: var(--text-2); } .footer-bottom .made a { font-weight:600; } @media (max-width: 760px) { .footer-grid { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } } /* ============================================================================ STUB PAGES (privacidade/termos) */ .doc-page { max-width: 760px; margin-inline:auto; padding-block: var(--s16); } .doc-page h1 { font-size: clamp(1.75rem,4vw,2.25rem); margin-bottom: var(--s3); } .doc-page .updated { font-size:.85rem; color: var(--text-2); margin-bottom: var(--s8); } .doc-page h2 { font-size:1.25rem; margin: var(--s8) 0 var(--s3); } .doc-page p, .doc-page li { color: var(--text-2); line-height:1.7; margin-bottom: var(--s3); } .doc-page ul { padding-left: var(--s5); } .doc-page .back { display:inline-flex; align-items:center; gap:var(--s2); margin-bottom: var(--s8); font-weight:600; } /* reveal on scroll (respeita reduced-motion via JS guard) */ .reveal { opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease-emph), transform .5s var(--ease-emph); } .reveal.in { opacity:1; transform:none; } /* skip link */ .skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--r-md) 0; font-weight:600; } .skip:focus { left:0; }