:root { --ink:#000000; --panel:#0a0a0a; --line:rgba(214,173,69,.2); --gold:#d6ad45; --pale:#fff8df; --muted:#9a978e; --white:#f4f1e9; /* Ritmo vertical: uma escala só. Antes cada seção tinha o próprio número (88, 90, 100, 120, 122, 130, 140), e a soma não fechava em lugar nenhum. Duas medidas resolvem: 120px no desktop, 80px abaixo de 800px. */ --sec-y:120px; --sec-y-sm:80px; /* Escala de titulo de secao: havia 48, 43, 42 e 39 px para o mesmo papel. Duas medidas resolvem, e o clamp do h1 continua treating o display. */ --h2:48px; --h2-sm:40px; } * { box-sizing:border-box; } .skip-link { position:absolute; left:-9999px; top:10px; background:var(--gold); color:#0a0a0a; padding:10px 14px; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; z-index:999; } .skip-link:focus { left:16px; } html { scroll-behavior:smooth; } body { margin:0; color:var(--white); background:var(--ink); font-family:Inter, ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:inherit; text-decoration:none; } .page-grid { position:fixed; inset:0; pointer-events:none; z-index:-1; background-image:linear-gradient(rgba(214,173,69,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(214,173,69,.035) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:linear-gradient(#000 0%,transparent 82%); mask-image:linear-gradient(#000 0%,transparent 82%); } .container { width:min(1160px,calc(100% - 48px)); margin:auto; } .site-header { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; } .menu-toggle { display:none; width:40px; height:40px; border:1px solid rgba(214,173,69,.35); background:transparent; color:var(--gold); font-size:18px; border-radius:8px; place-items:center; cursor:pointer; } .brand { display:inline-flex; align-items:baseline; font-weight:650; letter-spacing:.22em; font-size:21px; }.brand span { color:var(--pale); }.brand b { color:var(--gold); font-size:28px; line-height:0; } #primary-nav { display:flex; gap:32px; margin-left:120px; margin-right:56px; } nav a,.header-action { color:#b0aca1; font-size:11px; letter-spacing:.15em; text-transform:uppercase; transition:color .2s; } nav a:hover,.header-action:hover { color:var(--gold); }.header-action { display:inline-flex; align-items:baseline; white-space:nowrap; }.header-action span { color:var(--gold); font-size:16px; margin-left:8px; } .hero { min-height:590px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:28px; }.eyebrow { color:var(--muted); font-size:13px; font-weight:400; letter-spacing:0; margin:0 0 14px; }.eyebrow i { display:none; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-size:clamp(38px,5vw,68px); font-weight:560; letter-spacing:-.055em; line-height:1.05; margin-bottom:26px; } h1 em,h2 em { color:var(--gold); font-style:normal; } .hero-description { max-width:455px; color:var(--muted); font-size:16px; line-height:1.75; } .hero-actions { display:flex; gap:22px; align-items:center; margin-top:35px; }.button { display:inline-flex; align-items:center; gap:22px; font-size:11px; text-transform:uppercase; letter-spacing:.14em; padding:15px 19px; transition:.2s; }.button-primary { color:#0a0a0a; background:var(--gold); font-weight:700; }.button-primary:hover { background:#efd171; transform:translateY(-2px); }.button-quiet { color:#bbb6aa; border-bottom:1px solid #575248; padding-inline:0; }.button-quiet:hover { color:var(--gold); } .system-map { height:380px; position:relative; isolation:isolate; }.map-orbit { position:absolute; border:1px solid rgba(214,173,69,.2); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }.orbit-one { width:285px; height:285px; }.orbit-two { width:370px; height:370px; border-style:dashed; border-color:rgba(214,173,69,.12); }.map-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:116px; height:116px; border:1px solid var(--gold); background:#12110d; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; box-shadow:0 0 0 12px rgba(214,173,69,.04),0 0 45px rgba(214,173,69,.12); }.map-center span { letter-spacing:.18em; font-size:21px; color:var(--pale); }.map-center small,.map-node small { color:var(--gold); font-size:8px; letter-spacing:.12em; margin-top:5px; }.map-node { position:absolute; z-index:1; display:flex; flex-direction:column; align-items:center; min-width:74px; }.map-node:after { content:""; position:absolute; width:38px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); transform-origin:left; z-index:-1; opacity:.5; }.map-node b { font-size:9px; letter-spacing:.12em; color:#ded9ce; }.node-icon,.card-symbol { color:var(--gold); font-size:25px; line-height:1; margin-bottom:8px; }.node-hub { left:6%; top:15%; }.node-hub:after { left:68px; top:53px; transform:rotate(28deg); }.node-core { right:4%; top:22%; }.node-core:after { right:67px; top:55px; transform:rotate(151deg); }.node-fleet { left:25%; bottom:0; }.node-fleet:after { left:63px; top:-12px; transform:rotate(-38deg); } .solutions { padding:var(--sec-y) 0; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:42px; margin-bottom:44px; }.section-heading h2 { font-size:var(--h2); margin:0; }.section-heading > p { color:var(--muted); max-width:330px; line-height:1.7; font-size:14px; margin:0 0 7px; }.solution-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.solution-card { min-height:350px; display:flex; flex-direction:column; background:rgba(15,15,13,.92); border:1px solid rgba(214,173,69,.15); padding:22px; transition:transform .25s,border-color .25s,background .25s; }.solution-card:hover { transform:translateY(-6px); border-color:rgba(214,173,69,.65); background:#11110e; }.solution-card.featured { border-color:rgba(214,173,69,.45); background:linear-gradient(155deg,rgba(214,173,69,.1),rgba(15,15,13,.95) 60%); }/* #666157 dava 3.12:1 sobre o card (#0f0f0d), abaixo do mínimo de 4.5:1. #817a6e é o mesmo tom um passo mais claro: 4.52:1. */ .status { align-self:flex-start; padding:5px 7px; font-size:8px; letter-spacing:.12em; }.online { color:var(--gold); background:rgba(214,173,69,.1); }.offline { color:#e05a4f; background:rgba(224,90,79,.12); border:1px solid rgba(224,90,79,.35); }.card-symbol { margin-top:52px; font-size:38px; }.solution-card h3 { font-size:20px; letter-spacing:.13em; font-weight:560; margin-bottom:14px; }.solution-card p { color:#969187; font-size:13px; line-height:1.65; margin-bottom:25px; }.solution-card a,.card-disabled { display:flex; justify-content:space-between; margin-top:auto; border-top:1px solid rgba(214,173,69,.15); padding-top:16px; color:#d2cdc1; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.solution-card a:hover { color:var(--gold); }.card-disabled span { color:var(--gold); font-size:14px; }/* #666158 dava 3.12:1 — o texto de "indisponível" precisa ser legível, não desaparecer. Mesmo tom de .card-index, corrigido para #807a6e (4.50:1). */ .card-disabled { color:#807a6e; }.api-card .card-symbol { font-size:34px; } /* Terceiro estado de badge, entre o dourado (disponível) e o vermelho (offline): em desenvolvimento. Sem `data-health` de propósito — a sonda reescreve o rótulo para DISPONÍVEL/OFFLINE e contradiria o que o card diz. #807a6e é o mesmo tom já medido em 4.50:1 sobre o card (#0f0f0d). */ .status.soon { color:#807a6e; background:rgba(128,122,110,.1); border:1px solid rgba(128,122,110,.32); } .pricing { padding:0 0 var(--sec-y); }.pricing-heading { border-top:1px solid var(--line); padding-top:var(--sec-y); }.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:stretch; }.price-card { position:relative; min-height:450px; display:flex; flex-direction:column; padding:30px; border:1px solid rgba(214,173,69,.18); background:rgba(13,13,11,.9); }.price-card-featured { background:linear-gradient(155deg,rgba(214,173,69,.15),rgba(16,15,11,.96) 55%); border-color:rgba(214,173,69,.65); box-shadow:0 18px 40px rgba(0,0,0,.2); }.recommended { position:absolute; top:-12px; right:22px; padding:6px 9px; background:var(--gold); color:#15130d; font-size:8px; font-weight:800; letter-spacing:.12em; }.price-label { color:var(--gold); font-size:9px; font-weight:700; letter-spacing:.16em; margin-bottom:21px; }.price-card h3 { color:#e9e5dc; font-size:23px; font-weight:520; line-height:1.22; letter-spacing:-.035em; margin-bottom:27px; }.price { margin:0; color:var(--pale); font-size:42px; font-weight:540; letter-spacing:-.05em; }.price small { color:var(--gold); font-size:15px; letter-spacing:0; }.price span { color:#9c988e; font-size:12px; font-weight:400; letter-spacing:0; }.price-note { min-height:37px; margin:9px 0 20px; color:#aaa59a; font-size:11px; line-height:1.5; }.price-card ul { list-style:none; padding:18px 0 0; margin:0 0 25px; border-top:1px solid rgba(214,173,69,.16); }.price-card li { color:#b2ada1; font-size:12px; padding:7px 0; }.price-card li::before { content:'·'; color:var(--gold); font-size:18px; line-height:0; margin-right:9px; }.price-action { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding:14px 0; border-top:1px solid rgba(214,173,69,.26); color:#e0d9ca; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }.price-action:hover { color:var(--gold); }.price-action span { color:var(--gold); font-size:15px; }/* 9px é o menor texto do site: #6f6a60 dava 3.75:1 sobre o fundo, abaixo do mínimo de 4.5:1. #807a6e sobe para 4.73:1 sem mudar o tom da família. */ .pricing-footnote { display:flex; justify-content:space-between; gap:25px; padding-top:18px; color:#807a6e; font-size:9px; line-height:1.55; }.pricing-footnote span { max-width:48%; } .integration { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; padding:var(--sec-y) 8%; gap:80px; background:linear-gradient(90deg,rgba(214,173,69,.06),transparent); }.integration h2 { font-size:var(--h2); margin:0; }.integration-detail { padding-top:27px; }.integration-detail > p { color:#b0aca1; line-height:1.8; font-size:15px; }.integration-points { margin-top:31px; display:grid; gap:13px; }.integration-points span { position:relative; padding-left:16px; color:#a8a398; font-size:11px; letter-spacing:.08em; } .integration-points span::before { content:""; position:absolute; left:0; top:8px; width:8px; height:1px; background:var(--gold); opacity:.7; }.integration-points b { color:var(--gold); margin-right:10px; } .contact { display:grid; grid-template-columns:1.05fr .95fr; gap:44px 72px; padding:var(--sec-y) 8%; align-items:start; } .contact-intro { grid-column:1; grid-row:1; } .contact-card { grid-column:1; grid-row:2; align-self:start; }.contact-intro h2 { font-size:var(--h2); margin-bottom:20px; }.contact-intro > p:last-child { max-width:475px; color:#aaa69c; font-size:15px; line-height:1.75; }.contact-card { padding:33px; border:1px solid rgba(214,173,69,.4); background:linear-gradient(145deg,rgba(214,173,69,.1),rgba(15,15,13,.95) 62%); }.contact-kicker { display:block; color:var(--gold); font-size:8px; font-weight:700; letter-spacing:.14em; }.contact-card h3 { margin:17px 0 26px; color:#f2eee5; font-size:30px; font-weight:520; letter-spacing:-.035em; }.contact-link { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid rgba(214,173,69,.18); color:#c9c3b7; font-size:13px; transition:color .2s; }.contact-link:hover { color:var(--gold); }.contact-link span { display:grid; place-items:center; width:22px; height:22px; border:1px solid rgba(214,173,69,.45); border-radius:50%; color:var(--gold); font-size:9px; font-weight:700; }.contact-link b { margin-left:auto; color:var(--gold); font-size:15px; font-weight:400; }.contact-button { display:flex; justify-content:space-between; margin-top:27px; padding:15px 17px; color:#12110c; background:var(--gold); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; transition:.2s; }.contact-button:hover { background:#efd171; transform:translateY(-2px); } .apps { padding:var(--sec-y) 0; border-top:1px solid var(--line); }.apps-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }.app-card { min-height:280px; display:flex; flex-direction:column; background:rgba(15,15,13,.92); border:1px solid rgba(214,173,69,.15); padding:22px; }.app-card h3 { font-size:18px; letter-spacing:.13em; font-weight:560; margin:10px 0 10px; }.app-card h3 span { color:var(--gold); }.app-desc { color:#969187; font-size:13px; line-height:1.6; margin-bottom:14px; }.app-card-top { display:flex; justify-content:space-between; align-items:center; }.app-icon { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(214,173,69,.35); border-radius:50%; color:var(--gold); }.app-badge { padding:5px 7px; font-size:8px; letter-spacing:.12em; border:1px solid rgba(214,173,69,.25); color:#dcd6c9; }.app-badge.ok { color:var(--gold); border-color:rgba(214,173,69,.45); background:rgba(214,173,69,.1); }.app-badge.missing { color:#e05a4f; border-color:rgba(224,90,79,.35); background:rgba(224,90,79,.1); }.app-meta { list-style:none; padding:0; margin:0 0 16px; border-top:1px solid rgba(214,173,69,.12); padding-top:12px; }.app-meta li { color:#aaa69c; font-size:11px; display:flex; justify-content:space-between; padding:5px 0; letter-spacing:.04em; }.app-meta b { color:#e9e5dc; font-weight:600; }.app-download { display:flex; justify-content:space-between; margin-top:auto; border-top:1px solid rgba(214,173,69,.15); padding-top:14px; color:#d2cdc1; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.app-download[aria-disabled="true"] { opacity:.45; pointer-events:none; }.app-download i { color:var(--gold); font-style:normal; }.app-hint { color:#e05a4f; font-size:10px; letter-spacing:.06em; min-height:14px; margin-top:8px; }.app-hint.ok { color:var(--gold); }.apps-footnote { margin-top:14px; color:#9a978e; font-size:11px; line-height:1.6; }.apps-footnote code { color:#d6ad45; } .site-footer { min-height:110px; display:flex; align-items:center; justify-content:space-between; color:#a8a398; font-size:9px; letter-spacing:.13em; } .site-footer a { color:#e0d9ca; } .site-footer a:hover { color:var(--gold); }.site-footer p { margin:0; }.site-footer .brand { font-size:16px; } .demo-access { margin-top:26px; padding:30px; border:1px solid rgba(214,173,69,.35); background:linear-gradient(150deg,rgba(214,173,69,.09),rgba(15,15,13,.96) 55%); }.demo-access-head { display:flex; align-items:center; gap:18px; }.demo-access-icon { display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(214,173,69,.5); border-radius:50%; color:var(--gold); font-size:17px; flex:none; }.demo-access-head .eyebrow { margin-bottom:8px; }.demo-access-head h3 { margin:0; color:#ece7dc; font-size:22px; font-weight:520; letter-spacing:-.03em; }.demo-access-head h3 em { color:var(--gold); font-style:normal; }.demo-access-note { margin:18px 0 0; color:#b7b2a6; font-size:13px; line-height:1.7; max-width:640px; }.demo-access-creds { display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; }.demo-access-creds span { padding:13px 18px; border:1px solid rgba(214,173,69,.45); background:rgba(0,0,0,.25); color:#8f8a80; font-size:10px; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }.demo-access-creds b { color:var(--gold); font-size:13px; letter-spacing:.04em; text-transform:none; }.demo-access-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; border-top:1px solid rgba(214,173,69,.18); padding-top:20px; }.demo-access-links a { padding:9px 14px; border:1px solid rgba(214,173,69,.25); color:#dcd6c9; font-size:10px; letter-spacing:.1em; text-transform:uppercase; transition:.2s; }.demo-access-links a:hover { background:var(--gold); color:#12110c; border-color:var(--gold); } /* --- Implantação, FAQ e confiança --- */ .deployment { padding:var(--sec-y) 0 0; border-top:1px solid var(--line); } .steps { list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; padding:0; margin:0; counter-reset:step; } .steps li { position:relative; display:flex; flex-direction:column; gap:11px; padding:26px 22px; border:1px solid rgba(214,173,69,.16); background:rgba(15,15,13,.92); transition:transform .25s,border-color .25s; } .steps li:hover { transform:translateY(-5px); border-color:rgba(214,173,69,.55); } .step-num { color:var(--gold); font-size:11px; letter-spacing:.16em; } .steps h3 { margin:0; color:#ece7dc; font-size:16px; font-weight:560; letter-spacing:.01em; line-height:1.3; } .steps p { margin:0; color:#969187; font-size:12px; line-height:1.7; } /* #7d786e dava 4.37:1. #807b71 sobe para 4.56:1 mantendo o tom. */ .steps small { margin-top:auto; padding-top:14px; color:#807b71; font-size:9px; letter-spacing:.13em; text-transform:uppercase; } .faq { margin-top:12px; border:1px solid rgba(214,173,69,.16); background:rgba(13,13,11,.9); } .faq-title { margin:0; padding:28px 30px; border-bottom:1px solid rgba(214,173,69,.16); color:#ece7dc; font-size:21px; font-weight:520; letter-spacing:-.02em; } .faq-list details { border-bottom:1px solid rgba(214,173,69,.1); } .faq-list details:last-child { border-bottom:0; } .faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 30px; color:#d5d0c4; font-size:14px; cursor:pointer; list-style:none; transition:color .2s,background .2s; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary::after { content:"+"; flex:none; color:var(--gold); font-size:19px; line-height:1; } .faq-list details[open] summary::after { content:"−"; } .faq-list summary:hover { color:var(--gold); background:rgba(214,173,69,.04); } .faq-list details p { margin:0; padding:0 30px 24px; color:#a29d92; font-size:13px; line-height:1.8; max-width:900px; } .faq-list details a { color:var(--gold); border-bottom:1px solid rgba(214,173,69,.4); } .trust { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; } .trust-item { padding:26px 22px; border:1px solid rgba(214,173,69,.16); background:rgba(15,15,13,.92); } .trust-icon { display:block; color:var(--gold); font-size:22px; margin-bottom:14px; } .trust-item h3 { margin:0 0 9px; color:#ece7dc; font-size:15px; font-weight:560; letter-spacing:.02em; } .trust-item p { margin:0; color:#969187; font-size:12px; line-height:1.7; } .trust-item a { color:var(--gold); border-bottom:1px solid rgba(214,173,69,.4); } /* --- Formulário de contato --- */ .contact-direct { color:#a29d92; font-size:13px; line-height:1.8; margin:0 0 4px; } .contact-direct a { color:#dcd6c9; border-bottom:1px solid rgba(214,173,69,.35); } .contact-direct a:hover { color:var(--gold); border-color:var(--gold); } .lead-form { grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; gap:18px; padding:30px; border:1px solid rgba(214,173,69,.3); background:rgba(13,13,11,.92); } .lead-form-intro { margin:0; color:#b7b2a6; font-size:13px; line-height:1.7; } .lead-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .field { display:flex; flex-direction:column; gap:7px; } .field > span,.field-lead-choice legend { color:#cfc9bd; font-size:10px; letter-spacing:.12em; text-transform:uppercase; } .field > span b { color:var(--gold); } .field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea { width:100%; padding:12px 13px; border:1px solid rgba(214,173,69,.22); background:#0a0a0a; color:var(--white); font:inherit; font-size:14px; transition:border-color .2s,background .2s; } .field textarea { resize:vertical; min-height:74px; } .field input::placeholder,.field textarea::placeholder { color:#5f5a51; } .field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--gold); background:#101010; } .field select { appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px; } /* O formulário vive na coluna 2 de um grid 1.05fr/.95fr dentro de um container de 1160px. Medido no navegador, a 1440px de tela: .lead-form 407px (util 347 depois do padding) .lead-grid 345px -> duas colunas de ~166px .field-pair 166px -> porque o bloco ocupava SÓ uma coluna do .lead-grid e ainda dividia essa em duas #lead-tecnicos 90px -> util 39px, para um texto de 73px Ou seja: o espremimento era em quatro níveis, e o texto das opções saía cortado. A causa não é o .contact de duas colunas, nem o breakpoint de 800px — é o .field-pair herdando só meia linha do .lead-grid e ainda abrindo dois campos dentro dela. Por isso o bloco de perfil ocupa a linha inteira (grid-column: 1 / -1): o par passa a dividir os 345px do .lead-grid, e não 166px. Cada select fica com ~200px, dos quais 38px são a folga da seta dourada. */ .lead-grid > * { min-width:0; } .field-full { grid-column:1 / -1; } /* 1fr 1fr, não uma fração desigual: o que ocupa espaço dentro do select é o texto da opção SELECIONADA ("Técnicos…" e "Veículos…"), e os dois medem quase o mesmo. Dar mais espaço ao primeiro porque o RÓTULO é mais longo deixava o segundo estreito para o texto — ao contrário do que se quer. */ .field-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:0; } .field-error { display:block; min-height:0; color:#e05a4f; font-size:11px; letter-spacing:.02em; } .field-error:empty { display:none; } .has-error input,.has-error select,.has-error textarea { border-color:rgba(224,90,79,.75); } .field-lead-choice { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:0; padding:0; border:0; } .field-lead-choice legend { width:100%; margin-bottom:10px; padding:0; } .field-lead-choice label { display:inline-flex; align-items:center; gap:8px; color:#b2ada1; font-size:13px; cursor:pointer; } .field-lead-choice input { accent-color:var(--gold); width:15px; height:15px; } .field-check { display:flex; align-items:flex-start; gap:11px; color:#a29d92; font-size:12px; line-height:1.65; cursor:pointer; } .field-check input { margin-top:2px; width:15px; height:15px; accent-color:var(--gold); flex:none; } .field-check a { color:#dcd6c9; border-bottom:1px solid rgba(214,173,69,.35); } .field-check a:hover { color:var(--gold); } .field-check b { color:var(--gold); } .lead-trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .lead-submit { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border:0; background:var(--gold); color:#12110c; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; transition:background .2s,transform .2s; } .lead-submit:hover { background:#efd171; transform:translateY(-2px); } .lead-submit span { font-size:15px; } .lead-form-note { margin:0; color:#8f8a80; font-size:11px; line-height:1.6; } /* `hidden` perde para display:flex — sem isto o painel continua sobre o formulário e intercepta o clique. */ .lead-form[hidden],.lead-sent[hidden] { display:none; } .lead-sent { grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:40px; border:1px solid rgba(214,173,69,.4); background:linear-gradient(145deg,rgba(214,173,69,.1),rgba(15,15,13,.95) 62%); } .lead-sent h3 { margin:0; color:#f2eee5; font-size:26px; font-weight:520; letter-spacing:-.035em; } .lead-sent-text { margin:0; color:#b0aca1; font-size:14px; line-height:1.7; } .lead-sent .contact-button { width:100%; margin-top:4px; } .lead-again { padding:0; border:0; border-bottom:1px solid #575248; background:none; color:#bbb6aa; font-size:10px; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; } .lead-again:hover { color:var(--gold); border-color:var(--gold); } /* --- Showcase: telas reais dos módulos + app de campo --- */ .showcase { padding:var(--sec-y) 0; border-top:1px solid var(--line); } .showcase-heading h2 { font-size:var(--h2); } .showcase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .shot { margin:0; display:flex; flex-direction:column; border:1px solid rgba(214,173,69,.15); background:rgba(13,13,11,.9); transition:transform .25s,border-color .25s; } .shot:hover { transform:translateY(-6px); border-color:rgba(214,173,69,.55); } .shot.is-featured { grid-column:span 2; } .shot-btn { position:relative; display:block; width:100%; padding:0; border:0; background:#0a0a0a; cursor:zoom-in; overflow:hidden; border-bottom:1px solid rgba(214,173,69,.14); } .shot-btn:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; } .shot-bar { display:flex; align-items:center; gap:6px; padding:9px 13px; background:#100f09; border-bottom:1px solid rgba(214,173,69,.12); } .shot-bar i { width:6px; height:6px; border-radius:50%; background:#2b2922; flex:none; } /* 8px é o menor texto do site. #6f6a60 dava 3.57:1; #807a6e vai a 4.50:1. */ .shot-bar span { margin-left:9px; color:#807a6e; font-size:8px; letter-spacing:.14em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .shot-btn img { display:block; width:100%; height:auto; } .shot-zoom { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(214,173,69,.5); background:rgba(7,7,6,.85); color:var(--gold); font-size:14px; opacity:0; transition:opacity .2s; } .shot:hover .shot-zoom,.shot-btn:focus-visible .shot-zoom { opacity:1; } .shot figcaption { display:flex; flex-direction:column; gap:9px; padding:20px 22px 22px; } .shot-tag { color:var(--gold); font-size:8px; font-weight:700; letter-spacing:.2em; } .shot figcaption b { color:#ece7dc; font-size:16px; font-weight:560; letter-spacing:.01em; } .shot figcaption small { color:#969187; font-size:12px; line-height:1.65; } .shot-count { margin-top:5px; color:var(--gold); font-size:9px; letter-spacing:.14em; text-transform:uppercase; } .field-app { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; margin-top:12px; padding:40px; border:1px solid rgba(214,173,69,.22); background:linear-gradient(150deg,rgba(214,173,69,.08),rgba(13,13,11,.96) 55%); } .field-copy h3 { margin:0 0 18px; color:#f2eee5; font-size:29px; font-weight:520; letter-spacing:-.035em; line-height:1.22; } .field-copy > p:not(.eyebrow) { max-width:430px; margin-bottom:26px; color:#b0aca1; font-size:14px; line-height:1.8; } .field-phones { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .phone { margin:0; padding:7px 7px 0; border:1px solid rgba(214,173,69,.35); border-radius:18px; background:#0a0a0a; } .phone-btn { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; } .phone-btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; } .phone-btn img { display:block; width:100%; height:auto; border-radius:12px; } .phone figcaption { padding:11px 0 12px; text-align:center; color:#8f8a80; font-size:8px; letter-spacing:.13em; text-transform:uppercase; } .lb { position:fixed; inset:0; z-index:200; display:none; } .lb.is-open { display:block; } .lb-backdrop { position:absolute; inset:0; background:rgba(4,4,3,.93); } .lb-figure { position:relative; height:100%; margin:0; padding:74px 78px 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; } .lb-img { max-width:100%; max-height:calc(100vh - 200px); border:1px solid rgba(214,173,69,.35); box-shadow:0 30px 70px rgba(0,0,0,.65); } .lb-cap { display:flex; flex-direction:column; align-items:center; gap:7px; max-width:760px; text-align:center; } .lb-cap b { color:var(--pale); font-size:11px; letter-spacing:.16em; text-transform:uppercase; } .lb-cap span { color:#9a978e; font-size:12px; line-height:1.6; } /* mesmo ajuste de .steps small: 4.37:1 -> 4.56:1 */ .lb-count { position:absolute; top:26px; left:26px; color:#807b71; font-size:10px; letter-spacing:.18em; } .lb-nav { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(214,173,69,.45); background:rgba(10,10,8,.75); color:var(--gold); font-size:17px; cursor:pointer; } .lb-nav:hover { background:var(--gold); color:#12110c; } .lb-nav:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .lb-prev { left:20px; } .lb-next { right:20px; } .lb-close { position:absolute; top:18px; right:22px; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(214,173,69,.45); background:rgba(10,10,8,.75); color:var(--gold); font-size:17px; cursor:pointer; } .lb-close:hover { background:var(--gold); color:#12110c; } .lb-close:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } @media (max-width:800px) { .deployment { padding:var(--sec-y-sm) 0 0; } .steps { grid-template-columns:repeat(2,1fr); } .steps li:last-child { grid-column:1 / -1; } .faq-title { padding:22px; font-size:19px; } .faq-list summary { padding:17px 22px; font-size:13px; } .faq-list details p { padding:0 22px 20px; } .trust { grid-template-columns:repeat(2,1fr); } .showcase { padding:var(--sec-y-sm) 0; } .showcase-heading h2 { font-size:var(--h2-sm); } .showcase-grid { grid-template-columns:repeat(2,1fr); } .shot.is-featured { grid-column:span 2; } .field-app { grid-template-columns:1fr; gap:32px; padding:26px; } .field-copy h3 { font-size:24px; } .field-phones { max-width:600px; } .lb-figure { padding:66px 20px 24px; } .lb-nav { width:38px; height:38px; } .lb-prev { left:8px; } .lb-next { right:8px; } } @media (max-width:480px) { .steps { grid-template-columns:1fr; } .trust { grid-template-columns:1fr; } .showcase-grid { grid-template-columns:1fr; } .shot.is-featured { grid-column:span 1; } .field-phones { grid-template-columns:1fr; max-width:260px; } /* Duas colunas de 22px de padding estouravam a tela em 320px: os cards ficavam com 154px e o documento ia a 337px. Uma coluna resolve. */ .apps-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { .shot:hover,.button-primary:hover,.contact-button:hover { transform:none; } html { scroll-behavior:auto; } } /* O menu horizontal só cabe acima de ~1000px com 8 abas (medido: em 960px o header estourava 36px). O breakpoint do header é 1024px, não 800px — abaixo dele o header usaria o menu recolhido em vez de transbordar a tela. */ @media (max-width:1024px) { .site-header { height:70px; } #primary-nav { display:none; position:absolute; top:70px; left:0; right:0; background:var(--panel); border:1px solid rgba(214,173,69,.2); border-top:1px solid var(--line); padding:16px 20px; flex-direction:column; gap:0; margin:0; z-index:30; } #primary-nav.is-open { display:flex; } #primary-nav a { padding:14px 6px; border-bottom:1px solid rgba(214,173,69,.08); font-size:11px; } #primary-nav a:last-child { border-bottom:0; } .menu-toggle { display:grid; } } /* O par empilha abaixo de 1040px. Medido: nessa faixa a coluna do form fica com ~290-350px, e cada select sobra com 65-76px úteis contra 68px de texto — cabe por pouco demais, e em 900px já não cabia. Acima de 1040px cada select passa de 110px úteis, com folga. */ @media (max-width:1040px) { .field-pair { grid-template-columns:1fr; } } @media (max-width:800px) { .container { width:min(100% - 36px,640px); } .header-action { font-size:9px; }.hero { grid-template-columns:1fr; padding:78px 0 45px; }.system-map { height:300px; max-width:400px; width:100%; margin:auto; transform:scale(.85); }.solutions { padding:var(--sec-y-sm) 0; }.section-heading { display:block; }.section-heading > p { margin-top:22px; }.solution-grid { grid-template-columns:repeat(2,1fr); }.pricing { padding-bottom:var(--sec-y-sm); }.pricing-heading { padding-top:var(--sec-y-sm); }.pricing-grid { grid-template-columns:1fr; }.price-card { min-height:0; }.pricing-footnote { display:block; }.pricing-footnote span { display:block; max-width:none; }.pricing-footnote span + span { margin-top:8px; }.integration { grid-template-columns:1fr; gap:0; padding:var(--sec-y-sm) 30px; }.contact { grid-template-columns:1fr; gap:30px; padding:var(--sec-y-sm) 30px; }.contact-intro h2 { font-size:var(--h2-sm); } .lead-form,.lead-sent,.contact-intro,.contact-card { grid-column:1; grid-row:auto; } .lead-form { padding:22px; } .lead-grid { grid-template-columns:1fr; gap:13px; } .lead-sent { padding:28px; }.site-footer { flex-wrap:wrap; gap:15px; padding:25px 0; }.site-footer p { order:3; width:100%; }.demo-access { padding:22px; }.demo-access-head { flex-direction:column; align-items:flex-start; gap:12px; } } @media (max-width:480px) { h1 { font-size:42px; }.hero-description { font-size:14px; }.hero-actions { gap:16px; flex-wrap:wrap; }.system-map { transform:scale(.7); margin:-30px auto; }.solution-grid { grid-template-columns:1fr; }.solution-card { min-height:290px; }.card-symbol { margin-top:32px; }.section-heading h2 { font-size:var(--h2-sm); }.site-footer { font-size:8px; } } /* --- porque.html: secoes do manifesto (prefixo .why-*) --------------- */ /* Extraído do