/* VAE Hub — estilos globais (o restante está inline no index.html) */
html{scroll-behavior:smooth}
body{margin:0;background:#0A0D12;color:#E9EDF2;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

a{color:#7FA6DC}
a:hover{color:#B9CFEE}

.wide{font-family:'Archivo',system-ui,sans-serif;font-stretch:122%;letter-spacing:-0.01em}

.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

.navlinks a{color:#A3ACB8;text-decoration:none}
.navlinks a:hover{color:#E9EDF2}

.btn-primary{clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}

.card:hover{border-color:#36506F}

.foto{filter:grayscale(1) contrast(1.06) brightness(0.9);transition:filter .4s ease}

article:hover .foto{filter:grayscale(0) contrast(1) brightness(1)}

.plate{clip-path:polygon(18px 0,100% 0,100% 100%,0 100%);backdrop-filter:blur(6px)}

.chip:hover{border-color:#4C80C6;color:#E9EDF2}

input,select,textarea{font:inherit}

input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid #4C80C6;outline-offset:2px}

@media (max-width:820px){.navlinks{display:none !important}
.hero-fig{display:none !important}
}


/* ---------- Formulário de contato ---------- */
.form{flex:1 1 420px;min-width:0;padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;gap:18px}
.form-row{display:flex;flex-wrap:wrap;gap:18px}
.form-row .field{flex:1 1 200px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.field-label{font-size:14px;color:#C9CFD6}
.field input,.field textarea,.dropdown-trigger{box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;background:#0A0D12;border:1px solid #2A3442;color:#E9EDF2;font-size:15px;border-radius:0;transition:border-color .15s}
.field textarea{padding:12px 14px;resize:vertical}
.field input:hover,.field textarea:hover,.dropdown-trigger:hover{border-color:#3A4A5E}
.field.has-error input,.field.has-error textarea,.field.has-error .dropdown-trigger{border-color:#E5707A}
.field-error{min-height:0;font-size:13px;color:#F0959C}
.field-error:empty{display:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* dropdown customizado */
.dropdown{position:relative}
.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:left;font:inherit;font-size:15px}
.dropdown-value.is-placeholder{color:#6B7684}
.dropdown-chevron{flex:none;color:#6F9BD6;transition:transform .2s}
.dropdown.open .dropdown-trigger{border-color:#4C80C6}
.dropdown.open .dropdown-chevron{transform:rotate(180deg)}
.dropdown-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:#0F151D;border:1px solid #2C3A4C;box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:300px;overflow:auto;outline:none;animation:dd-in .14s ease-out}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dropdown-list [role=option]{display:flex;align-items:center;gap:14px;min-height:44px;padding:0 12px;font-size:15px;color:#C9CFD6;cursor:pointer;border-left:2px solid transparent}
.dropdown-list [role=option].is-active{background:#16233A;color:#F2F4F7;border-left-color:#4C80C6}
.dropdown-list [role=option][aria-selected=true]{color:#FFFFFF}
.dropdown-list [role=option][aria-selected=true]::after{content:"";margin-left:auto;width:12px;height:7px;border-left:2px solid #6F9BD6;border-bottom:2px solid #6F9BD6;transform:rotate(-45deg) translate(1px,-2px)}
.opt-code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:#5F7FA8}

/* captcha */
.captcha strong{color:#F2F4F7;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500}
.captcha-row{display:flex;gap:10px}
.captcha-row input{max-width:120px}
.captcha-new{flex:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;background:#0A0D12;border:1px solid #2A3442;color:#8A95A3;cursor:pointer}
.captcha-new:hover{color:#E9EDF2;border-color:#3A4A5E}

/* envio */
.form-footer{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.btn-submit{cursor:pointer;border:0;background:#2D62AE;color:#FFFFFF;font:inherit;font-weight:600;font-size:16px;padding:16px 40px;min-height:52px}
.btn-submit:hover{background:#3570C2}
.btn-submit[disabled]{opacity:.6;cursor:progress}
.form-status{margin:0;font-size:14.5px;color:#A3ACB8}
.form-status.ok{color:#8FD1A8}
.form-status.err{color:#F0959C}

/* ---------- Soluções em destaque no topo ---------- */
.hero-tags{list-style:none;margin:-10px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:clamp(15px,1.4vw,18px);font-weight:500;color:#6F9BD6}
.hero-tags li{white-space:nowrap}
.hero-tags li+li::before{content:"|";color:#2C3A4C;font-weight:400;margin:0 12px}
.hero-tags .hash{color:#2D62AE;margin-right:1px}
@media (max-width:600px){.hero-tags{gap:8px 16px}.hero-tags li+li::before{display:none}}

/* ---------- Destaque com moldura de duas pontas (Serviços) ---------- */
.destaque{position:relative;margin:0;max-width:400px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:22px 28px;font-size:17px;line-height:1.6;color:#C9CFD6;background:linear-gradient(135deg,rgba(45,98,174,.10),rgba(45,98,174,0) 60%)}
.destaque strong{display:block;margin-top:6px;font-weight:600;color:#F2F4F7}
.destaque::before,.destaque::after{content:"";position:absolute;width:36px;height:36px;pointer-events:none}
.destaque::before{top:0;right:0;border-top:2px solid #4C80C6;border-right:2px solid #4C80C6}
.destaque::after{bottom:0;left:0;border-bottom:2px solid #4C80C6;border-left:2px solid #4C80C6}

/* ---------- Acessibilidade / SEO ---------- */
.skip{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 16px;background:#2D62AE;color:#fff;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid #1E2631}
.faq-item{border-bottom:1px solid #1E2631}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:18px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:17.5px;font-weight:600;line-height:1.4;color:#E9EDF2}
.faq-item summary:hover h3{color:#FFFFFF}
.faq-icon{flex:none;position:relative;width:16px;height:16px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:#6F9BD6;transition:transform .2s}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open] .faq-icon::after{transform:rotate(0)}
.faq-item p{margin:0;padding:0 40px 22px 0;font-size:15.5px;line-height:1.65;color:#A3ACB8}
