/* ========================================================================== TAG Obras — styles.css (folha completa, carregada sem bloquear render) O bloco CRÍTICO (tokens + fonts + reset + base + container + header + hero + botões) é duplicado inline no do index.php. Mantenha os dois em sincronia ao alterar tokens/header/hero (marcador: "CRÍTICO — sync index.php"). ========================================================================== */ /* ===================== CRÍTICO — sync index.php (início) ================== */ @font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Montserrat Fallback";src:local("Arial");ascent-override:85.53%;descent-override:22.18%;line-gap-override:0%;size-adjust:113.16%} @font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Narrow"),local("Arial");ascent-override:92%;descent-override:31%;line-gap-override:0%;size-adjust:88%} :root{ /* Paleta / papéis */ --brand:#2F5585; --brand-strong:#234A78; --brand-deep:#1C3B60; --accent:#D87124; --accent-ink:#B85C15; --cta:#B85C15; --cta-hover:#A4500F; --cta-active:#8F440C; --support:#6D9638; --support-ink:#3E5F1E; --surface:#FFFFFF; --surface-alt:#F6F5F2; --surface-inverse:#234A78; --surface-inverse-deep:#1C3B60; --text:#20252B; --text-muted:#5A626C; --text-subtle:#737B85; --text-placeholder:#6A717B; --text-on-inverse:#FFFFFF; --text-on-inverse-muted:#C7D3E2; --accent-on-inverse:#F08A3C; --border:#DDE3EA; --border-strong:#C2CCD8; --border-inverse:rgba(255,255,255,.22); --success:#3E5F1E; --success-surface:#EAF1E0; --success-border:#BFD49B; --error:#B42318; --error-surface:#FEF3F2; --error-border:#F3B4AE; --focus:#1B5FA8; --focus-on-inverse:#9DC2FF; /* Famílias */ --font-display:"Barlow Condensed","Barlow Condensed Fallback","Arial Narrow",Arial,sans-serif; --font-body:"Montserrat","Montserrat Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* Layout system */ --container:1200px; --container-narrow:760px; --gutter:clamp(16px, 4vw, 32px); --section-space:clamp(64px, 8vw, 112px); --header-h:82px; /* Espaçamento */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; /* Tipografia */ --fs-eyebrow:clamp(.8125rem, .78rem + .12vw, .875rem); --fs-caption:.8125rem; --fs-body-sm:clamp(.9375rem, .9rem + .15vw, 1rem); --fs-body:clamp(1rem, .95rem + .3vw, 1.125rem); --fs-lead:clamp(1.0625rem, 1rem + .4vw, 1.25rem); --fs-h3:clamp(1.25rem, 1.14rem + .5vw, 1.5rem); --fs-h2:clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem); /* Raios / sombras */ --r-sm:8px; --r-btn:10px; --r-md:12px; --r-lg:16px; --r-pill:999px; --shadow-1:0 1px 2px rgba(28,59,96,.06), 0 1px 1px rgba(32,37,43,.04); --shadow-2:0 6px 16px rgba(28,59,96,.09), 0 2px 5px rgba(32,37,43,.05); --shadow-3:0 16px 34px rgba(28,59,96,.13), 0 6px 12px rgba(32,37,43,.06); --shadow-focus:0 0 0 3px rgba(27,95,168,.35); --z-header:100; --z-mobilebar:300; --z-modal:500; --z-skiplink:700; --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --ease-out:cubic-bezier(.2,.7,.3,1); } @media(max-width:640px){ :root{ --header-h:64px; } } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:1.62; color:var(--text); background:var(--surface); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; line-height:1.05; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } a{ color:inherit; } :where(a,button,[role=button]):focus-visible, :where(input,select,textarea,summary,[tabindex]):focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; } .container{ width:min(calc(100% - (var(--gutter) * 2)), var(--container)); margin-inline:auto; } .container--narrow{ max-width:var(--container-narrow); } /* Botões */ .btn{ --_bg:transparent; --_fg:currentColor; --_bd:transparent; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:52px; padding:.8rem 1.6rem; font-family:var(--font-body); font-weight:600; font-size:1rem; letter-spacing:.01em; line-height:1; border-radius:var(--r-btn); border:1.5px solid var(--_bd); background:var(--_bg); color:var(--_fg); cursor:pointer; text-decoration:none; user-select:none; transition:background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .btn:active{ transform:translateY(1px); } .btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; } .btn--primary{ --_bg:var(--cta); --_fg:#fff; --_bd:var(--cta); box-shadow:var(--shadow-1); } .btn--primary:hover{ --_bg:var(--cta-hover); --_bd:var(--cta-hover); box-shadow:var(--shadow-2); } .btn--primary:active{ --_bg:var(--cta-active); --_bd:var(--cta-active); } .btn--secondary{ --_fg:var(--brand-strong); --_bd:var(--border-strong); } .btn--secondary:hover{ --_bg:rgba(35,74,120,.06); --_bd:var(--brand-strong); } .btn--on-dark.btn--secondary{ --_fg:#fff; --_bd:var(--border-inverse); } .btn--on-dark.btn--secondary:hover{ --_bg:rgba(255,255,255,.1); --_bd:rgba(255,255,255,.6); } .btn--on-dark:focus-visible{ outline-color:var(--focus-on-inverse); } .btn--ghost{ --_fg:var(--brand-strong); } .btn--ghost:hover{ --_bg:rgba(35,74,120,.06); } .btn--cookie{ --_bg:var(--brand-strong); --_fg:#fff; --_bd:var(--brand-strong); box-shadow:var(--shadow-1); } .btn--cookie:hover{ --_bg:var(--brand-deep); --_bd:var(--brand-deep); box-shadow:var(--shadow-2); } /* recusa: mesmo tamanho e claramente visível (contorno), sem esconder — só menos preenchida que o "Aceitar todos" */ .btn--cookie-outline{ --_bg:transparent; --_fg:var(--brand-strong); --_bd:var(--brand-strong); } .btn--cookie-outline:hover{ --_bg:rgba(35,74,120,.08); } .btn--full{ width:100%; } .btn svg{ width:1.15em; height:1.15em; flex:none; } .btn[data-loading="true"]{ color:transparent; pointer-events:none; position:relative; } .btn[data-loading="true"]::after{ content:""; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:btn-spin .7s linear infinite; } @keyframes btn-spin{ to{ transform:rotate(360deg); } } .skip-link{ position:absolute; left:16px; top:-100px; z-index:var(--z-skiplink); background:var(--brand-strong); color:#fff; padding:.75rem 1.25rem; border-radius:var(--r-sm); font-weight:600; text-decoration:none; transition:top var(--dur-2) var(--ease-out); } .skip-link:focus{ top:16px; } /* Header */ .header{ position:sticky; top:0; z-index:var(--z-header); background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid transparent; transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } @supports not (backdrop-filter:blur(1px)){ .header{ background:#fff; } } .header[data-scrolled="true"]{ border-bottom-color:var(--border); box-shadow:var(--shadow-1); } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:var(--header-h); } .brand{ display:inline-flex; align-items:center; flex:none; } .brand img{ width:145px; height:auto; } @media(max-width:640px){ .brand img{ width:118px; } } .nav{ display:flex; align-items:center; } .nav-menu{ display:flex; align-items:center; gap:1.75rem; } .nav__list{ display:flex; align-items:center; gap:1.75rem; } .nav__list a{ font-size:1rem; font-weight:600; color:var(--text); text-decoration:none; padding:.25rem 0; position:relative; white-space:nowrap; } .nav__list a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-2) var(--ease-out); } .nav__list a:hover::after,.nav__list a[aria-current="true"]::after{ transform:scaleX(1); } .nav-cta{ white-space:nowrap; } /* Desktop: logo à esquerda · links centralizados · CTA à direita */ .nav-cta--bar{ display:none; } @media(min-width:1025px){ .header__inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; } .brand{ justify-self:start; } .nav{ justify-self:center; } .nav-cta--overlay{ display:none; } .nav-cta--bar{ display:inline-flex; justify-self:end; } } .nav-toggle{ display:none; width:46px; height:46px; align-items:center; justify-content:center; background:none; border:1px solid var(--border-strong); border-radius:var(--r-sm); cursor:pointer; } .nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{ display:block; width:22px; height:2px; background:var(--brand-strong); position:relative; transition:transform var(--dur-2) var(--ease-out), opacity var(--dur-1); } .nav-toggle__bars::before,.nav-toggle__bars::after{ content:""; position:absolute; left:0; } .nav-toggle__bars::before{ top:-7px; } .nav-toggle__bars::after{ top:7px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-7px) rotate(-45deg); } @media(max-width:1024px){ .nav-toggle{ display:inline-flex; } .nav-menu{ position:fixed; top:var(--header-h); left:0; right:0; height:calc(100vh - var(--header-h)); height:calc(100dvh - var(--header-h)); z-index:calc(var(--z-header) - 1); background:var(--surface); padding:var(--space-6) var(--gutter); flex-direction:column; align-items:stretch; gap:0; overflow-y:auto; display:none; } .nav-menu.is-open{ display:flex; animation:navPanelIn 220ms var(--ease-out) both; } .nav-menu.is-open .nav__list li, .nav-menu.is-open .nav-cta{ animation:navItemIn 340ms var(--ease-out) both; } .nav-menu.is-open .nav__list li:nth-child(1){ animation-delay:60ms; } .nav-menu.is-open .nav__list li:nth-child(2){ animation-delay:100ms; } .nav-menu.is-open .nav__list li:nth-child(3){ animation-delay:140ms; } .nav-menu.is-open .nav__list li:nth-child(4){ animation-delay:180ms; } .nav-menu.is-open .nav__list li:nth-child(5){ animation-delay:220ms; } .nav-menu.is-open .nav-cta{ animation-delay:260ms; } .nav-menu .nav__list{ flex-direction:column; align-items:stretch; gap:0; } .nav-menu .nav__list li{ border-bottom:1px solid var(--border); } .nav-menu .nav__list a{ display:block; padding:var(--space-4) 0; font-size:1.125rem; text-align:center; } .nav-menu .nav__list a::after{ display:none; } .nav-menu .nav-cta{ margin-top:var(--space-5); } body.menu-open{ overflow:hidden; } } /* abertura suave do menu mobile (só na abertura; fecha instantâneo) */ @keyframes navPanelIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes navItemIn{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ .nav-menu.is-open, .nav-menu.is-open .nav__list li, .nav-menu.is-open .nav-cta{ animation:none; } } /* Hero */ .hero{ position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(155deg,#1C3B60 0%,#234A78 60%,#1E4472 100%); color:var(--text-on-inverse); } .hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center; padding-block:clamp(40px,7vw,104px); } /* Mobile: título/subtítulo em cima → planta no meio → botões embaixo (ordem natural do DOM) */ .hero__text{ position:relative; z-index:1; max-width:720px; } .hero__actions{ position:relative; z-index:1; } /* Desktop: texto + botões à esquerda, planta à direita */ @media(min-width:900px){ .hero__inner{ grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); grid-template-areas:"text panel" "actions panel"; column-gap:clamp(48px,5vw,80px); row-gap:0; align-items:center; } .hero__text{ grid-area:text; } .hero__panel{ grid-area:panel; align-self:center; } .hero__actions{ grid-area:actions; } } .hero__title{ font-size:clamp(40px,4vw,56px); line-height:1.05; letter-spacing:-.01em; color:#fff; margin:1rem 0; text-wrap:balance; } .hero__title .u{ box-shadow:inset 0 -.1em 0 var(--accent-on-inverse); } .hero__lead{ font-size:clamp(1.0625rem,1rem + .4vw,1.25rem); line-height:1.55; color:var(--text-on-inverse-muted); max-width:56ch; } .hero__ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.5rem; } .hero__microcopy{ margin-top:1.1rem; font-size:.95rem; color:var(--text-on-inverse-muted); } .hero__panel{ position:relative; display:block; pointer-events:none; } .hero-plan{ width:100%; height:auto; max-width:540px; margin-inline:auto; display:block; } @media(min-width:900px){ .hero-plan{ max-width:600px; } } @media(min-width:1280px){ .hero-plan{ max-width:640px; } } @media(max-width:640px){ .plan-fine{ display:none; } } /* Mobile "compactar": planta puxada p/ esquerda, sobreposta ao subtítulo (topo) e aos botões (base) */ @media(max-width:899px){ .hero__inner{ gap:0; } .hero__text{ position:relative; z-index:2; } .hero__panel{ margin-top:-1.75rem; position:relative; z-index:0; } .hero__actions{ margin-top:-3rem; position:relative; z-index:2; } .hero-plan{ margin-inline:0 auto; } /* tablet: alinhada à esquerda */ } @media(max-width:640px){ .hero-plan{ width:122%; max-width:none; margin-left:-22%; } /* phone: sangra à esquerda */ } /* Tablet: hero centralizado (equilibra o vazio à direita) */ @media(min-width:641px) and (max-width:899px){ .hero__text{ margin-inline:auto; text-align:center; } .hero__lead{ margin-inline:auto; } .hero-plan{ margin-inline:auto; } .hero__actions{ text-align:center; } .hero__ctas{ justify-content:center; } } /* revelação sutil da planta (uma vez, só opacity); sem JS permanece visível */ .js .hero-plan{ animation:planIn 1100ms var(--ease-out) 150ms both; } @keyframes planIn{ from{ opacity:0; } to{ opacity:1; } } @media (prefers-reduced-motion:reduce){ .js .hero-plan{ animation:none; opacity:1; } } /* Eyebrow / section head */ .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 .9rem; } .eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); flex:none; } .eyebrow--on-dark{ color:#F6A96A; } .section{ padding-block:var(--section-space); position:relative; } .section--alt{ background:var(--surface-alt); } /* compensa o header fixo ao navegar por âncora (só scroll-margin, nunca junto com scroll-padding) */ :where(#inicio,#servicos,#construcao,#urbanizacao,#mobilidade,#sobre,#diferenciais,#processo,#cta-intermediario,#faq,#contato){ scroll-margin-top:calc(var(--header-h) + 16px); } .section__head{ max-width:60ch; margin-bottom:var(--space-8); } .section__head--center{ margin-inline:auto; text-align:center; } .section__title{ font-size:var(--fs-h2); color:var(--text); max-width:22ch; text-wrap:balance; letter-spacing:-.005em; } .section__head--center .section__title{ max-width:26ch; } .section__intro{ color:var(--text-muted); font-size:var(--fs-lead); line-height:1.55; margin-top:var(--space-4); max-width:60ch; } .section__head--center .section__intro{ margin-inline:auto; } /* Decorativos */ .tech-grid{ position:absolute; inset:0; pointer-events:none; z-index:0; } .tech-grid--dark{ background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to right, rgba(216,113,36,.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(216,113,36,.09) 1px, transparent 1px); background-size:26px 26px,26px 26px,104px 104px,104px 104px; -webkit-mask-image:radial-gradient(130% 110% at 78% 0%, #000 50%, transparent 100%); mask-image:radial-gradient(130% 110% at 78% 0%, #000 50%, transparent 100%); } .tech-grid--light{ background-image: linear-gradient(to right, rgba(35,74,120,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(35,74,120,.05) 1px, transparent 1px); background-size:34px 34px,34px 34px; -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); } /* ===================== CRÍTICO — sync index.php (fim) ==================== */ .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- Serviços ---------- */ .services__grid{ display:grid; gap:clamp(20px,2.2vw,28px); grid-template-columns:1fr; } @media(min-width:640px){ .services__grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:980px){ .services__grid{ grid-template-columns:repeat(3,1fr); } } .card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:clamp(24px,2.4vw,32px); box-shadow:var(--shadow-1); transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--r-md) var(--r-md) 0 0; background:var(--brand); } .card--urbanizacao::before{ background:var(--support); } .card--mobilidade::before{ background:var(--accent); } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); } .card:focus-within{ box-shadow:var(--shadow-2), var(--shadow-focus); } .card__icon{ width:46px; height:46px; color:var(--brand); margin-bottom:var(--space-4); } .card--urbanizacao .card__icon{ color:var(--support-ink); } .card--mobilidade .card__icon{ color:var(--accent-ink); } .card__title{ font-size:var(--fs-h3); line-height:1.15; margin-bottom:var(--space-3); } .card__text{ color:var(--text-muted); font-size:var(--fs-body-sm); line-height:1.55; margin-bottom:var(--space-4); } .card__list{ display:grid; gap:.55rem; margin-bottom:var(--space-6); } .card__list li{ position:relative; padding-left:1.35rem; font-size:var(--fs-body-sm); color:var(--text-muted); line-height:1.4; } .card__list li::before{ content:""; position:absolute; left:0; top:.6em; width:9px; height:2px; background:var(--accent); } .card--construcao .card__list li::before{ background:var(--brand); } .card--urbanizacao .card__list li::before{ background:var(--support); } .card__cta{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:1rem; color:var(--brand-strong); text-decoration:none; padding:.35rem 0; } .card__cta .arrow{ transition:transform var(--dur-2) var(--ease-out); } .card__cta:hover{ color:var(--cta-hover); } .card__cta:hover .arrow{ transform:translateX(3px); } .card--urbanizacao .card__cta{ color:var(--support-ink); } .card--mobilidade .card__cta{ color:var(--accent-ink); } /* ---------- Sobre ---------- */ .about__grid{ display:grid; gap:var(--space-7); grid-template-columns:1fr; align-items:start; } @media(min-width:860px){ .about__grid{ grid-template-columns:48fr 52fr; gap:clamp(48px,5vw,80px); } } .about__lead .section__title{ margin-bottom:0; } .about__paras{ margin-top:var(--space-5); } .about__paras p{ color:var(--text-muted); max-width:54ch; font-size:var(--fs-lead); line-height:1.6; } .about__paras p + p{ margin-top:var(--space-4); } .about__blocks{ display:grid; gap:var(--space-5); } .about__block{ padding-left:var(--space-5); border-left:3px solid var(--brand); } .about__block:nth-child(2){ border-color:var(--accent); } .about__block:nth-child(3){ border-color:var(--support); } .about__block h3{ font-size:var(--fs-h3); margin-bottom:var(--space-2); } .about__block p{ color:var(--text-muted); font-size:var(--fs-body-sm); line-height:1.55; } /* ---------- Diferenciais (2×2) ---------- */ .features__grid{ display:grid; gap:clamp(20px,2.2vw,28px); grid-template-columns:1fr; } @media(min-width:720px){ .features__grid{ grid-template-columns:repeat(2,1fr); } } .feature{ padding:clamp(22px,2.2vw,30px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); } .feature__mark{ width:38px; height:2px; background:var(--brand); margin-bottom:var(--space-4); } .feature:nth-child(2) .feature__mark{ background:var(--accent); } .feature:nth-child(3) .feature__mark{ background:var(--support); } .feature:nth-child(4) .feature__mark{ background:var(--brand-strong); } .feature h3{ font-size:1.3125rem; margin-bottom:var(--space-2); } .feature p{ color:var(--text-muted); font-size:var(--fs-body-sm); line-height:1.55; } /* ---------- Processo ---------- */ .process__grid{ display:grid; gap:clamp(20px,2.2vw,28px); grid-template-columns:1fr; } @media(min-width:640px){ .process__grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1024px){ .process__grid{ grid-template-columns:repeat(4,1fr); } } .step{ position:relative; padding:clamp(22px,2.2vw,28px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-1); } .step__n{ font-family:var(--font-display); font-size:2rem; line-height:1; color:var(--brand); font-feature-settings:"tnum" 1; display:inline-flex; align-items:center; gap:.4rem; margin-bottom:var(--space-3); } .step__n::after{ content:""; width:24px; height:3px; background:var(--accent); } .step h3{ font-size:var(--fs-h3); margin-bottom:var(--space-2); } .step p{ color:var(--text-muted); font-size:var(--fs-body-sm); line-height:1.55; } /* ---------- CTA intermediário ---------- */ .cta-band{ position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(150deg,#234A78,#1C3B60); color:#fff; } .cta-band__inner{ position:relative; z-index:2; text-align:center; max-width:var(--container-narrow); padding-block:var(--section-space); } .cta-band h2{ color:#fff; font-size:var(--fs-h2); text-wrap:balance; } .cta-band p{ color:var(--text-on-inverse-muted); font-size:var(--fs-lead); margin:var(--space-4) auto var(--space-6); max-width:52ch; } .cta-band__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; } /* ---------- FAQ ---------- */ .faq{ max-width:var(--container-narrow); margin-inline:auto; } .faq__item{ border-bottom:1px solid var(--border); } .faq__item:first-child{ border-top:1px solid var(--border); } .faq__q{ margin:0; font-size:inherit; font-weight:inherit; } .faq__trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) var(--space-1); background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-body); font-weight:600; font-size:1.0625rem; color:var(--text); } .faq__icon{ flex:none; width:24px; height:24px; position:relative; color:var(--brand); } .faq__icon::before,.faq__icon::after{ content:""; position:absolute; inset:0; margin:auto; background:currentColor; } .faq__icon::before{ width:15px; height:2px; } .faq__icon::after{ width:2px; height:15px; transition:transform var(--dur-2) var(--ease-out); } .faq__trigger[aria-expanded="true"] .faq__icon{ color:var(--accent-ink); } .faq__trigger[aria-expanded="true"] .faq__icon::after{ transform:scaleY(0); } .faq__panel[hidden]{ display:none; } .faq__panel-inner{ padding:0 var(--space-1) var(--space-6); color:var(--text-muted); line-height:1.6; font-size:var(--fs-body); } /* ---------- Contato ---------- */ .contact__grid{ display:grid; gap:var(--space-7); grid-template-columns:1fr; align-items:start; } @media(min-width:900px){ .contact__grid{ grid-template-columns:40fr 60fr; gap:clamp(48px,5vw,72px); } } .contact-info{ display:grid; gap:var(--space-6); align-content:start; } .contact-info__item{ display:flex; gap:var(--space-4); align-items:flex-start; min-width:0; } .contact-info__item > div{ min-width:0; } .contact-info__icon{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); color:var(--brand-strong); } .contact-info__icon svg{ width:21px; height:21px; } .contact-info__label{ font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); font-weight:600; margin-bottom:.25rem; } .contact-info__value{ color:var(--text); font-weight:600; font-size:1.0625rem; } .contact-info__email{ overflow-wrap:anywhere; } .contact-info__addr{ font-style:normal; color:var(--text-muted); line-height:1.5; } .contact-info__actions{ display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin-top:.4rem; } .contact-info__action{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; font-size:var(--fs-body-sm); color:var(--brand-strong); text-decoration:none; } .contact-info__action:hover{ color:var(--cta-hover); text-decoration:underline; } .contact-info__social{ } .contact-social{ display:flex; gap:var(--space-3); margin-top:.5rem; } .contact-social a{ width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--brand-strong); background:var(--surface); } .contact-social a:hover{ background:var(--surface); border-color:var(--brand); } .contact-social svg{ width:21px; height:21px; } /* ---------- Formulário ---------- */ .form-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(20px,3vw,40px); box-shadow:var(--shadow-2); } .form__head{ margin-bottom:var(--space-5); } .form__title{ font-size:var(--fs-h3); margin-bottom:var(--space-2); } .form__text{ color:var(--text-muted); font-size:var(--fs-body-sm); line-height:1.55; } .form__req-note{ font-size:var(--fs-body-sm); color:var(--text-muted); margin-top:var(--space-5); } .form__req-note span{ color:var(--error); font-weight:600; } .form__grid{ display:grid; gap:0; grid-template-columns:1fr; } @media(min-width:700px){ .form__grid{ grid-template-columns:1fr 1fr; column-gap:var(--space-5); } .field--full{ grid-column:1 / -1; } } .contact__grid > *,.form__grid > *,.field{ min-width:0; } .field{ display:grid; gap:.5rem; margin-bottom:var(--space-4); align-content:start; } .field__label{ font-size:var(--fs-body-sm); font-weight:600; color:var(--text); } .field__label .req{ color:var(--error); margin-left:.15rem; } .field__opt{ color:var(--text-muted); font-weight:400; } .input,.select,.textarea{ width:100%; min-width:0; min-height:52px; padding:.8rem .9rem; font-family:var(--font-body); font-size:16px; color:var(--text); background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--r-sm); appearance:none; transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } @media(min-width:700px){ .input,.select,.textarea{ font-size:var(--fs-body-sm); } } .textarea{ min-height:140px; resize:vertical; line-height:1.55; } .input::placeholder,.textarea::placeholder{ color:var(--text-placeholder); } .input:hover,.select:hover,.textarea:hover{ border-color:var(--brand); } .input:focus-visible,.select:focus-visible,.textarea:focus-visible{ outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgba(27,95,168,.25); } .select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23234A78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.5rem; } .field[data-state="error"] .input,.field[data-state="error"] .select,.field[data-state="error"] .textarea{ border-color:var(--error); background:var(--error-surface); } .field__error{ display:none; gap:.375rem; align-items:flex-start; font-size:var(--fs-caption); color:var(--error); margin-top:.15rem; } .field[data-state="error"] .field__error{ display:flex; } .field__error::before{ content:"!"; flex:none; width:1rem; height:1rem; border-radius:50%; background:var(--error); color:#fff; font-weight:600; display:grid; place-items:center; font-size:11px; margin-top:1px; } .consent{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; margin:var(--space-3) 0 var(--space-5); } .consent input[type="checkbox"]{ width:20px; height:20px; margin:0; accent-color:var(--brand-strong); flex:none; } .consent label{ font-size:var(--fs-body-sm); color:var(--text-muted); line-height:1.5; } .consent a{ color:var(--accent-ink); text-decoration:underline; } .consent .field__error{ grid-column:1 / -1; } .consent.field[data-state="error"] label{ color:var(--error); } .form__error-global{ display:none; align-items:flex-start; gap:.5rem; padding:.875rem 1rem; margin-bottom:var(--space-4); background:var(--error-surface); border:1px solid var(--error-border); border-radius:var(--r-sm); color:var(--error); font-size:var(--fs-body-sm); } .form__error-global[data-show="true"]{ display:flex; } .form-success{ display:none; text-align:center; padding:var(--space-6) var(--space-2); } .form-success[data-show="true"]{ display:block; } .form-success__icon{ width:56px; height:56px; margin:0 auto var(--space-4); color:var(--support-ink); } .form-success h3{ font-size:var(--fs-h3); margin-bottom:var(--space-3); } .form-success p{ color:var(--text-muted); margin-bottom:var(--space-5); } .form.is-sent .form__fields,.form.is-sent .form__head{ display:none; } .hp-field{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; } /* ---------- Footer ---------- */ .footer{ position:relative; background:var(--surface-inverse-deep); color:var(--text-on-inverse); overflow:hidden; isolation:isolate; } .footer .tech-grid--dark{ opacity:.5; } .footer__main{ position:relative; z-index:2; padding-block:clamp(56px,6vw,72px); display:grid; gap:var(--space-7); grid-template-columns:1fr; } @media(min-width:680px){ .footer__main{ grid-template-columns:1.6fr 1fr 1.2fr; } } @media(min-width:980px){ .footer__main{ grid-template-columns:1.8fr 1fr 1.2fr 1.2fr; } } .footer__brand img{ width:150px; height:auto; } .footer__phrase{ color:var(--text-on-inverse-muted); font-size:var(--fs-body-sm); margin-top:var(--space-4); max-width:34ch; line-height:1.55; } .footer__col h3{ font-size:1rem; color:#fff; margin-bottom:var(--space-4); font-family:var(--font-body); font-weight:600; letter-spacing:.02em; } .footer__col ul{ display:grid; gap:var(--space-3); } .footer a{ color:var(--text-on-inverse-muted); text-decoration:none; font-size:var(--fs-body-sm); } .footer a:hover{ color:#fff; text-decoration:underline; } .footer a:focus-visible{ outline-color:var(--focus-on-inverse); } .footer__addr{ font-style:normal; color:var(--text-on-inverse-muted); font-size:var(--fs-body-sm); line-height:1.5; } .footer__email{ overflow-wrap:anywhere; } /* Copyright + assinatura da TAG, integrados na base do rodapé (mesmo fundo, divisor sutil) */ .footer__legal{ position:relative; z-index:2; border-top:1px solid var(--border-inverse); } .footer__legal-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2) var(--space-5); padding-block:var(--space-5); } .footer__copy,.footer__brandline{ font-size:.8125rem; color:var(--text-on-inverse-muted); } @media(max-width:640px){ .footer__legal-inner{ flex-direction:column; text-align:center; gap:.4rem; } } /* Faixa DV Digital — banda distinta, LINHA INTEIRA clicável */ .footer__credit-bar{ position:relative; z-index:2; background:#13293F; border-top:1px solid rgba(255,255,255,.05); } .footer__credit{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.35rem .65rem; min-height:44px; padding:.55rem var(--gutter); font-size:.8125rem; color:var(--text-on-inverse-muted); text-decoration:none; } .footer__credit img{ height:20px; width:auto; display:block; } a.footer__credit:hover{ color:#fff; } a.footer__credit:hover img{ opacity:.85; transition:opacity var(--dur-2) var(--ease-out); } a.footer__credit:focus-visible{ outline:3px solid var(--focus-on-inverse); outline-offset:-3px; } @media(max-width:400px){ .footer__credit img{ height:18px; } } /* ---------- Barra mobile ---------- */ .mobilebar{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-mobilebar); display:none; grid-template-columns:1fr 1fr 1.5fr; gap:1px; background:var(--border); border-top:1px solid var(--border-strong); padding-bottom:env(safe-area-inset-bottom,0px); transform:translateY(110%); transition:transform var(--dur-3) var(--ease-out); } .mobilebar[data-visible="true"]{ transform:translateY(0); } @media(max-width:860px){ .mobilebar{ display:grid; } body{ padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)); } } .mobilebar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; background:var(--surface); color:var(--brand-strong); font-size:11px; font-weight:600; text-decoration:none; } .mobilebar a svg{ width:20px; height:20px; } .mobilebar__cta{ background:var(--cta); color:#fff!important; } /* ---------- WhatsApp flutuante (laranja + pulso azul suave) ---------- */ .wa-fab{ position:fixed; right:22px; bottom:22px; z-index:var(--z-mobilebar); width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(28,59,96,.30); transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .wa-fab svg{ width:32px; height:32px; position:relative; z-index:1; } .wa-fab:hover{ transform:translateY(-2px) scale(1.04); background:#C4661D; box-shadow:0 12px 26px rgba(28,59,96,.36); } .wa-fab:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; } .wa-fab__pulse{ position:absolute; inset:0; border-radius:50%; z-index:0; box-shadow:0 0 0 0 rgba(47,85,133,.5); animation:waPulse 2.6s ease-out infinite; } @keyframes waPulse{ 0%{ box-shadow:0 0 0 2px rgba(47,85,133,.45); } 70%{ box-shadow:0 0 0 15px rgba(47,85,133,0); } 100%{ box-shadow:0 0 0 0 rgba(47,85,133,0); } } @media(max-width:860px){ .wa-fab{ right:16px; bottom:calc(56px + env(safe-area-inset-bottom,0px) + 16px); width:54px; height:54px; } .wa-fab svg{ width:29px; height:29px; } } @media (prefers-reduced-motion:reduce){ .wa-fab__pulse{ animation:none; } } /* ---------- Cookies ---------- */ .cookie{ position:fixed; z-index:var(--z-modal); left:var(--gutter); right:var(--gutter); bottom:var(--gutter); max-width:var(--container-narrow); margin-inline:auto; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-3); padding:var(--space-5); } .cookie[hidden]{ display:none; } .cookie__title{ font-size:var(--fs-h3); margin-bottom:var(--space-2); } .cookie__text{ font-size:var(--fs-body-sm); color:var(--text-muted); line-height:1.5; margin-bottom:var(--space-4); } .cookie__text a{ color:var(--accent-ink); } .cookie__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); } .cookie__actions .btn{ min-width:160px; } /* "Aceitar todos" e "Aceitar apenas essenciais": mesma largura (peso igual); destaque do aceite vem só do preenchimento */ .cookie__actions .btn--cookie, .cookie__actions .btn--cookie-outline{ flex:1 1 0; } .cookie__actions .btn--ghost{ flex:0 1 auto; } @media(max-width:860px){ .cookie{ bottom:calc(56px + env(safe-area-inset-bottom,0px) + .5rem); } } .cookie-modal{ position:fixed; inset:0; z-index:calc(var(--z-modal) + 10); display:flex; align-items:center; justify-content:center; padding:var(--gutter); background:rgba(28,59,96,.55); } .cookie-modal[hidden]{ display:none; } .cookie-modal__panel{ position:relative; background:#fff; color:var(--text); max-width:520px; width:100%; border-radius:var(--r-lg); padding:var(--space-6); box-shadow:var(--shadow-3); max-height:90vh; overflow-y:auto; } .cookie-modal__panel h2{ font-size:var(--fs-h3); margin-bottom:var(--space-2); } .cookie-modal__panel > p{ color:var(--text-muted); font-size:var(--fs-body-sm); margin-bottom:var(--space-5); } .cookie-cat{ border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--space-4); margin:0 0 var(--space-4); } .cookie-cat label{ display:flex; align-items:center; gap:.6rem; font-weight:600; } .cookie-cat input{ width:20px; height:20px; accent-color:var(--brand-strong); } .cookie-cat span{ display:block; margin-top:.4rem; font-size:var(--fs-caption); color:var(--text-muted); } .cookie-modal__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); } .cookie-modal__actions .btn{ flex:1 1 auto; min-width:160px; } .cookie-modal__close{ position:absolute; top:.75rem; right:.75rem; width:44px; height:44px; border:0; background:none; font-size:1.6rem; line-height:1; color:var(--text-muted); cursor:pointer; border-radius:var(--r-sm); } .cookie-modal__close:hover{ background:var(--surface-alt); } /* ---------- Reveal ---------- */ .js .reveal{ opacity:0; transform:translateY(16px); } .js .reveal.is-in{ opacity:1; transform:none; transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); } .no-js .faq__panel[hidden]{ display:block; } .no-js .faq__icon{ display:none; } .no-js .mobilebar{ display:none; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } .js .reveal{ opacity:1!important; transform:none!important; } .card:hover{ transform:none; } .mobilebar{ transition:none; } } /* ---------- Páginas legais ---------- */ .legal-header{ position:sticky; top:0; z-index:var(--z-header); background:#fff; border-bottom:1px solid var(--border); } .legal-header__inner{ max-width:var(--container); margin-inline:auto; padding:.5rem var(--gutter); min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); } .legal-header img{ width:135px; height:auto; } .legal-hero{ background:linear-gradient(155deg,#1C3B60,#234A78); color:#fff; padding:var(--section-space) 0 var(--space-8); } .legal-hero h1{ color:#fff; font-size:var(--fs-h2); max-width:20ch; } .legal-hero p{ color:var(--text-on-inverse-muted); margin-top:var(--space-3); } .legal{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--gutter); padding-block:var(--section-space); } .legal h2{ font-size:var(--fs-h3); margin-top:var(--space-8); margin-bottom:var(--space-3); color:var(--brand-strong); } .legal h2:first-child{ margin-top:0; } .legal h3{ font-size:1.0625rem; margin-top:var(--space-5); margin-bottom:var(--space-2); } .legal p,.legal li{ color:var(--text-muted); } .legal p{ margin-bottom:var(--space-4); } .legal ul{ list-style:disc; padding-left:1.25rem; margin-bottom:var(--space-4); display:grid; gap:.4rem; } .legal a{ color:var(--accent-ink); } .legal table{ width:100%; border-collapse:collapse; margin-bottom:var(--space-5); font-size:var(--fs-body-sm); } .legal th,.legal td{ text-align:left; padding:.625rem .75rem; border:1px solid var(--border); vertical-align:top; } .legal th{ background:var(--surface-alt); color:var(--text); } .legal__meta{ font-size:var(--fs-caption); color:var(--text-muted); margin-bottom:var(--space-6); } .pending{ background:#FCF3E3; border:1px dashed #C79A3E; color:#7A5A12; padding:.1rem .4rem; border-radius:4px; font-weight:600; } .legal__note{ background:var(--surface-alt); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:var(--space-4); margin-bottom:var(--space-6); font-size:var(--fs-body-sm); } .field__hint{ font-size:var(--fs-caption); color:var(--text-muted); } /* assinatura DV nas páginas legais */ .dev-credit{ background:#16304F; color:var(--text-on-inverse-muted); border-top:1px solid rgba(255,255,255,.06); padding:var(--space-5) var(--gutter); text-align:center; } .dev-credit__link{ display:inline-flex; align-items:center; justify-content:center; gap:.7rem; color:inherit; text-decoration:none; font-size:.8125rem; } .dev-credit__link img{ height:22px; width:auto; } @media print{ .header,.mobilebar,.cookie,.cookie-modal,.nav-toggle,.tech-grid,.form-wrap,.footer__bar{ display:none!important; } body{ color:#000; background:#fff; } .section{ padding-block:1rem; } }