/* ==========================================================================
   Quadrado Soluções Técnicas — Site
   Tokens (fonte da verdade) + estilos da página. CSS único, enxuto.
   ========================================================================== */

/* ---- Tokens ---- */
:root{
  --brand-blue:#0052CC; --brand-navy:#0B2540; --brand-navy-deep:#071A2F;
  --brand-teal:#1BA5BE; --brand-teal-bright:#3FC2D6; --brand-teal-ink:#0E6E7E;
  --brand-silver:#E0E0E0; --brand-energy:#FFB020; --brand-energy-bright:#FFD046;

  --n-900:#1A1A1A; --n-800:#33383F; --n-500:#6B7280; --n-400:#9AA1AB;
  --n-300:#CBD1D8; --n-200:#E5E8EC; --n-100:#F4F6F8; --n-0:#FFFFFF;

  --grad-brand:linear-gradient(120deg,#3FC2D6 0%,#0052CC 55%,#0B2540 100%);
  --grad-teal:linear-gradient(90deg,#3FC2D6,#0052CC);
  --grad-metal:linear-gradient(180deg,#F2F4F7,#B8BEC7);

  --font-head:'Archivo Expanded',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  --elev-1:0 1px 2px rgba(11,37,64,.08);
  --elev-2:0 4px 12px rgba(11,37,64,.10);
  --elev-3:0 12px 28px rgba(11,37,64,.14);
  --glow-teal:0 0 24px rgba(63,194,214,.25);

  --dur:200ms; --ease:cubic-bezier(.2,.8,.2,1);

  --bg:#F4F6F8; --surface:#FFFFFF; --text:#1A1A1A; --text-soft:#6B7280; --line:#E5E8EC;
  --maxw:1180px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  background-color:var(--bg);
  /* textura blueprint sutil no substrato claro (motivo B) */
  background-image:
    linear-gradient(rgba(11,37,64,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,37,64,.05) 1px,transparent 1px);
  background-size:40px 40px;
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--font-head); font-weight:800; line-height:1.05; letter-spacing:-.01em; margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--brand-teal-bright); outline-offset:2px}
::selection{background:var(--brand-teal-bright); color:var(--brand-navy-deep)}

/* ---- Utilitários ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--space-5)}
.mono{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}
.eyebrow{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-teal-ink)}
.grad-text{background:var(--grad-teal); -webkit-background-clip:text; background-clip:text; color:transparent}
.section{padding:var(--space-9) 0}
.section-sm{padding:var(--space-8) 0}
.bg-surface{background:var(--surface)}
.bg-alt{background:var(--n-100)}
.center{text-align:center}
.lead{font-size:1.12rem; color:var(--text-soft); max-width:60ch}

/* Motivo A — colchetes de canto (teal) */
.brackets{position:relative}
.brackets::before,.brackets::after{
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
}
.brackets::before{top:-1px; left:-1px; border-top:2px solid var(--brand-teal); border-left:2px solid var(--brand-teal)}
.brackets::after{bottom:-1px; right:-1px; border-bottom:2px solid var(--brand-teal); border-right:2px solid var(--brand-teal)}

/* Motivo E — faixa de energia (âmbar, fina) */
.energy-rule{height:3px; background:linear-gradient(90deg,var(--brand-energy),var(--brand-energy-bright)); width:56px}

/* Superfícies escuras: blueprint + luz de aresta metálica */
.dark{
  background:var(--brand-navy-deep); color:#fff; position:relative; overflow:hidden;
}
.dark::before{ /* grade blueprint (motivo B) */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(63,194,214,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,194,214,.07) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%,#000 40%,transparent 100%);
          mask-image:radial-gradient(120% 90% at 70% 0%,#000 40%,transparent 100%);
}
.dark .eyebrow{color:var(--brand-teal-bright)}
.dark .lead{color:#CBD1D8}
.edge-light{border-top:1px solid transparent; border-image:linear-gradient(90deg,transparent,rgba(224,224,224,.55),transparent) 1}

/* ---- Botões ---- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:var(--font-body); font-weight:600; font-size:1rem;
  padding:.85em 1.4em; border:2px solid transparent; cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.15em; height:1.15em}
.btn-primary{background:var(--brand-blue); color:#fff}
.btn-primary:hover{background:#0047b0}
.btn-energy{background:var(--brand-energy); color:var(--brand-navy-deep)}
.btn-energy:hover{background:var(--brand-energy-bright)}
.btn-outline{background:transparent; border-color:currentColor; color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.10)}
.btn-outline.on-light{color:var(--brand-navy); border-color:var(--brand-navy)}
.btn-outline.on-light:hover{background:rgba(11,37,64,.06)}
.btn-lg{font-size:1.06rem; padding:1em 1.7em}

.btn-row{display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; gap:var(--space-5)}
.nav-logo{display:flex; align-items:center; gap:10px}
.nav-mark{height:30px; width:auto}
.nav-word{height:16px; width:auto}
.nav-links{display:flex; align-items:center; gap:var(--space-6); list-style:none; margin:0; padding:0}
.nav-links a{font-size:.96rem; font-weight:500; color:var(--n-800); transition:color var(--dur)}
.nav-links a:hover{color:var(--brand-teal-ink)}
.nav-cta{display:flex; align-items:center; gap:var(--space-3)}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--n-900); margin:5px 0; transition:var(--dur)}

/* Dropdown "Para quem" */
.nav-links .has-drop{position:relative}
.nav-drop-btn{
  display:inline-flex; align-items:center; gap:.3em; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:.96rem; font-weight:500; color:var(--n-800); padding:0;
  transition:color var(--dur);
}
.nav-drop-btn:hover,.has-drop:hover .nav-drop-btn,.has-drop[data-open="true"] .nav-drop-btn{color:var(--brand-teal-ink)}
.nav-drop-btn .caret{width:14px; height:14px; transition:transform var(--dur) var(--ease)}
.has-drop:hover .nav-drop-btn .caret,.has-drop[data-open="true"] .nav-drop-btn .caret{transform:rotate(180deg)}
.nav-drop{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  width:328px; background:#fff; border:1px solid var(--line); border-top:2px solid var(--brand-teal);
  box-shadow:var(--elev-3); padding:var(--space-2);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:60;
}
.nav-drop::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px} /* ponte de hover */
.has-drop:hover .nav-drop,.has-drop:focus-within .nav-drop,.has-drop[data-open="true"] .nav-drop{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.nav-drop a{display:block; padding:var(--space-3) var(--space-4); border-left:2px solid transparent; transition:background var(--dur),border-color var(--dur)}
.nav-drop a:hover{background:var(--n-100); border-left-color:var(--brand-teal)}
.nav-drop .d-tag{display:block; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-teal-ink)}
.nav-drop .d-title{display:block; font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--n-900); margin:.15em 0 .12em; line-height:1.1}
.nav-drop .d-desc{display:block; font-size:.85rem; color:var(--text-soft); line-height:1.35}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding:var(--space-7) 0 var(--space-6)}
/* malha quadriculada como fundo do hero inteiro */
.hero.dark::before, .phero.dark::before{
  opacity:1;
  background-image:
    linear-gradient(rgba(63,194,214,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,194,214,.11) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:none; mask-image:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-8); align-items:center}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem); margin:.4em 0 .5em}
.hero .lead{font-size:1.22rem; color:#D7E0EA; max-width:42ch}
.hero .btn-row{margin-top:var(--space-6)}
.hero-trust{margin-top:var(--space-5); display:flex; gap:var(--space-4); flex-wrap:wrap; color:#9FB3C7}
.hero-trust .mono{font-size:.74rem; display:flex; align-items:center; gap:.5em}
.hero-trust .dot{width:6px; height:6px; background:var(--brand-teal-bright); display:inline-block}

/* Vídeo institucional — espaço reservado (16:9), emoldurado por colchetes */
.hero-video{
  position:relative; aspect-ratio:16/9; width:100%;
  background:linear-gradient(160deg,#0d2c4a,#061627);
  border:1px solid rgba(224,224,224,.22); box-shadow:var(--elev-3);
  display:flex; align-items:center; justify-content:center; padding:var(--space-4); overflow:hidden;
}
.hero-video .tag{position:absolute; top:var(--space-4); left:var(--space-4)}
.hero-video .panel-foot{position:absolute; bottom:var(--space-4); left:var(--space-4); color:#7FA6C4}
.hero-video .play{
  width:72px; height:72px; border:2px solid var(--brand-teal-bright);
  background:rgba(7,26,47,.45); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.hero-video .play:hover{background:var(--brand-teal); box-shadow:var(--glow-teal); transform:translateY(-2px)}
.hero-video .play svg{width:26px; height:26px; margin-left:3px}
.tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand-teal-bright); border:1px solid rgba(63,194,214,.4); padding:4px 8px;
}

/* Placa de marca — ocupa o slot 16:9 enquanto não há vídeo institucional */
.hero-video.brandplate{flex-direction:column; gap:var(--space-4)}
.hero-video .bp-mark{height:118px; width:auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
.hero-video .bp-tagline{font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:#fff; letter-spacing:-.01em; line-height:1; margin:0}
.hero-video .bp-cap{color:#7FA6C4}
@media (max-width:640px){
  .hero-video .bp-mark{height:88px}
  .hero-video .bp-tagline{font-size:1.3rem}
}

/* ==========================================================================
   SERVIÇOS (logo após o hero) — cards enxutos
   ========================================================================== */
.head-block{max-width:64ch}
.head-block .energy-rule{margin:var(--space-4) 0 var(--space-5)}
.head-block h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}

.servicos{background:var(--surface)}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-7)}
.svc{
  position:relative; background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1);
  padding:var(--space-5); transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur);
  display:flex; flex-direction:column; gap:var(--space-3); min-height:186px;
}
.svc:hover{border-color:var(--brand-teal); transform:translateY(-3px); box-shadow:var(--elev-2)}
.svc-ico{width:38px; height:38px; color:var(--brand-teal-ink)}
.svc-ico svg{width:100%; height:100%}
.svc h3{font-family:var(--font-head); font-size:1.12rem; font-weight:700; line-height:1.15}
.svc p{color:var(--text-soft); font-size:.95rem; flex:1}
.svc .more{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; color:var(--brand-teal-ink); text-transform:uppercase; display:inline-flex; align-items:center; gap:.4em}
.svc:hover .more{color:var(--brand-blue)}

/* ==========================================================================
   FAIXA DE CREDIBILIDADE
   ========================================================================== */
.strip{background:var(--brand-navy); color:#fff; border-top:1px solid rgba(224,224,224,.12)}
.strip-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); padding:var(--space-4) 0; flex-wrap:wrap}
.strip .services-line{font-family:var(--font-mono); font-size:.84rem; letter-spacing:.06em; color:#fff}
.strip .services-line b{color:var(--brand-teal-bright); font-weight:600}
.strip .creds{display:flex; gap:var(--space-5); flex-wrap:wrap; color:#B9C6D4; font-size:.86rem}
.strip .creds span{display:flex; align-items:center; gap:.5em}
.strip .creds svg{width:16px; height:16px; color:var(--brand-teal-bright)}

/* ==========================================================================
   O PROBLEMA (condensado)
   ========================================================================== */
.problem{background:var(--surface)}
.problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center}
.problem h2{font-size:clamp(2rem,4vw,3.1rem); max-width:14ch}
.problem .fail{color:var(--brand-teal-ink)}
.problem .body{font-size:1.08rem; color:var(--text-soft)}
.problem .kicker{margin-top:var(--space-5); font-family:var(--font-head); font-weight:700; font-size:1.35rem; color:var(--text)}
.problem .kicker b{color:var(--brand-blue)}

/* ==========================================================================
   COMO TRABALHAMOS — régua de 4 passos
   ========================================================================== */
.method{background:transparent}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); margin-top:var(--space-7)}
.step{position:relative; padding-top:var(--space-5); border-top:2px solid var(--line)}
.step .num{font-family:var(--font-mono); font-size:.8rem; color:var(--brand-teal-ink); letter-spacing:.1em}
.step .step-ico{width:30px; height:30px; color:var(--brand-navy); margin:var(--space-3) 0}
.step h3{font-family:var(--font-head); font-size:1.06rem; font-weight:700; margin-bottom:var(--space-2)}
.step p{color:var(--text-soft); font-size:.94rem}
.step:hover{border-top-color:var(--brand-teal)}

/* ==========================================================================
   PARA QUEM — 3 cards leves
   ========================================================================== */
.audience{background:transparent}
.aud-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-7)}
.aud{
  position:relative; padding:var(--space-6) var(--space-5); background:var(--surface);
  border:1px solid var(--line); transition:var(--dur);
  display:flex; flex-direction:column; gap:var(--space-3);
}
.aud:hover{border-color:var(--brand-teal); box-shadow:var(--elev-2); transform:translateY(-3px)}
.aud .aud-tag{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-teal-ink)}
.aud h3{font-family:var(--font-head); font-size:1.28rem; font-weight:700; line-height:1.1}
.aud p{color:var(--text-soft); font-size:.98rem; flex:1}
.aud .more{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-blue); display:inline-flex; gap:.4em; align-items:center}

/* ==========================================================================
   ÁREA DE ATENDIMENTO
   ========================================================================== */
.area{background:var(--surface)}
.area-box{
  background:var(--n-100); border:1px solid var(--line); padding:var(--space-8);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:center;
}
.area h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.area .cities{font-family:var(--font-mono); font-size:.9rem; line-height:2; color:var(--brand-navy); letter-spacing:.02em}
.area .cities b{color:var(--brand-teal-ink)}
.area .ask{margin-top:var(--space-4); color:var(--text-soft)}
.area .ask a{color:var(--brand-blue); font-weight:600; border-bottom:2px solid var(--brand-energy)}

/* ==========================================================================
   CTA FINAL + FORMULÁRIO
   ========================================================================== */
.cta{padding:var(--space-9) 0}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:start}
.cta h2{font-size:clamp(2rem,3.6vw,2.9rem); max-width:16ch}
.cta .lead{color:#CBD7E3; margin-top:var(--space-4)}
.cta .direct{margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3)}
.cta .direct a{display:inline-flex; align-items:center; gap:.6em; color:#fff; font-family:var(--font-mono); font-size:.86rem}
.cta .direct svg{width:18px; height:18px; color:var(--brand-teal-bright)}

/* Formulário */
.form{background:var(--surface); color:var(--text); padding:var(--space-6); border:1px solid rgba(224,224,224,.2)}
.form h3{font-family:var(--font-head); font-size:1.2rem; margin-bottom:var(--space-2)}
.form .form-sub{color:var(--text-soft); font-size:.9rem; margin-bottom:var(--space-5)}
.field{margin-bottom:var(--space-4)}
.field label{display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--n-500); margin-bottom:var(--space-2)}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--text);
  padding:.72em .85em; border:1px solid var(--n-300); background:#fff; border-radius:0;
  transition:border-color var(--dur);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-teal); outline:none}
.field textarea{resize:vertical; min-height:92px}
.form .btn{width:100%; margin-top:var(--space-2)}
.form .note{font-size:.8rem; color:var(--text-soft); margin-top:var(--space-3); text-align:center}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.footer{background:#050f1c; color:#B9C6D4; padding:var(--space-8) 0 var(--space-6)}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-7)}
.footer-logo{display:flex; align-items:center; gap:10px; margin-bottom:var(--space-4)}
.footer-logo img{height:42px; width:auto}
.footer-logo span{font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:#fff; letter-spacing:.02em}
.footer-brand .descr{color:#fff; font-weight:600}
.footer-brand .tagline{color:var(--brand-teal-bright); font-family:var(--font-head); font-weight:700; margin-top:var(--space-2)}
.footer h4{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#7FA6C4; margin:0 0 var(--space-4)}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3)}
.footer a:hover{color:#fff}
.footer .contact-line{font-family:var(--font-mono); font-size:.82rem; line-height:1.9}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:var(--space-7); padding-top:var(--space-5); display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; font-size:.8rem; color:#5E7A96}

/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--brand-navy); color:#fff; padding:.8em 1.1em;
  box-shadow:var(--elev-3); border:1px solid rgba(63,194,214,.35);
  font-weight:600; font-size:.95rem; transition:var(--dur);
}
.wa-float:hover{background:var(--brand-navy-deep); transform:translateY(-2px)}
.wa-float svg{width:22px; height:22px}
.wa-float .wa-glyph{color:#25D366}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:var(--space-6)}
  .hero-video{aspect-ratio:16/9}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr); gap:var(--space-6)}
  .aud-grid{grid-template-columns:1fr}
  .problem-grid,.area-box,.cta-grid{grid-template-columns:1fr; gap:var(--space-6)}
  .area-box{padding:var(--space-6)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:var(--space-8) 0}

  /* Menu mobile: fluxo natural (sem offset fixo), a barra cresce ao abrir */
  .nav-inner{flex-wrap:wrap; height:auto; min-height:68px; row-gap:0}
  .nav-logo{height:68px}
  .nav-inner nav{order:3; flex-basis:100%}
  .nav-cta{order:4; flex-basis:100%}
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block; margin-left:auto}

  .nav[data-open="true"] .nav-links{
    display:flex; flex-direction:column; gap:var(--space-4);
    padding:var(--space-4) 0; border-top:1px solid var(--line);
  }
  .nav[data-open="true"] .nav-cta{display:flex; padding:0 0 var(--space-5)}
  .nav[data-open="true"] .nav-cta .btn{display:inline-flex; width:100%}

  /* Dropdown "Para quem" vira lista recuada dentro do menu mobile */
  .nav[data-open="true"] .has-drop{width:100%}
  .nav-drop-btn{width:100%; justify-content:space-between; font-size:1rem}
  .nav-drop{
    position:static; width:100%; box-shadow:none; border:0; border-top:0;
    border-left:2px solid var(--line); padding:0 0 0 var(--space-4);
    transform:none; margin-top:var(--space-3);
    display:none; opacity:1; visibility:visible; pointer-events:auto;
  }
  .has-drop[data-open="true"] .nav-drop{display:block; transform:none}
  .nav-drop::before{display:none}

  .svc-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .hero .btn-row .btn{flex:1}
  .wa-float span{display:none}
  .wa-float{padding:.9em; border-radius:0}
}

/* ==========================================================================
   PÁGINAS INTERNAS — hero interno, listas, painéis, princípios, callout, CTA band
   ========================================================================== */
.phero{padding:var(--space-7) 0 var(--space-6)}
.phero h1{font-size:clamp(2.1rem,4.6vw,3.3rem); max-width:20ch; margin:.35em 0 .5em; text-wrap:balance}
.phero .lead{font-size:1.15rem; color:#D7E0EA; max-width:54ch}
.phero .btn-row{margin-top:var(--space-6)}

/* Lista com marcador de colchete (motivo A) */
.ilist{list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3) var(--space-6)}
.ilist.one{grid-template-columns:1fr}
.ilist li{position:relative; padding-left:26px; font-size:1.02rem; line-height:1.5}
.ilist li::before{content:""; position:absolute; left:0; top:.45em; width:11px; height:11px; border-left:2px solid var(--brand-teal); border-bottom:2px solid var(--brand-teal)}

/* Painéis (dois grupos lado a lado) */
.panels{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-top:var(--space-7)}
.panel{background:var(--surface); border:1px solid var(--line); box-shadow:var(--elev-1); padding:var(--space-6)}
.panel .p-tag{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-teal-ink)}
.panel h3{font-family:var(--font-head); font-size:1.18rem; margin:var(--space-2) 0 var(--space-4)}
.panel .ilist{margin-top:0}

/* Princípios (valores — sem numeração, não é sequência) */
.principles{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5) var(--space-7); margin-top:var(--space-7)}
.principle{border-top:2px solid var(--line); padding-top:var(--space-4); transition:border-color var(--dur)}
.principle:hover{border-top-color:var(--brand-teal)}
.principle h3{font-family:var(--font-head); font-size:1.1rem; margin-bottom:var(--space-2)}
.principle p{color:var(--text-soft); font-size:.98rem}

/* Bloco de texto legível */
.prose{max-width:62ch}
.prose p{font-size:1.08rem; color:var(--text-soft)}
.prose p + p{margin-top:var(--space-4)}

/* Callout emoldurado */
.callout{background:var(--n-100); border:1px solid var(--line); padding:var(--space-7)}
.callout.bg-surface{background:var(--surface)}
.callout h3{font-family:var(--font-head); font-size:1.3rem; margin-bottom:var(--space-3)}
.callout p{color:var(--text-soft); font-size:1.05rem; max-width:66ch}
.callout .btn-row{margin-top:var(--space-5)}

/* CTA band (fim de página) */
.cta-band{padding:var(--space-8) 0}
.cta-band .wrap{max-width:760px; text-align:center}
.cta-band h2{font-size:clamp(1.7rem,3.2vw,2.5rem); margin:0 auto; text-wrap:balance}
.cta-band .lead{color:#CBD7E3; margin:var(--space-4) auto 0; max-width:52ch}
.cta-band .btn-row{justify-content:center; margin-top:var(--space-6)}

/* Contato: grid form + direto */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:start; margin-top:var(--space-7)}
.contact-grid .form{border-color:var(--line)}
.contact-direct .direct{display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-5)}
.contact-direct .direct a{display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.9rem; color:var(--text)}
.contact-direct .direct svg{width:20px; height:20px; color:var(--brand-teal-ink)}

@media (max-width:960px){
  .ilist{grid-template-columns:1fr}
  .panels,.principles,.contact-grid{grid-template-columns:1fr; gap:var(--space-5)}
}

/* ==========================================================================
   LANDING DE CONVERSÃO — breadcrumb, chips de confiança, FAQ, hero c/ form
   ========================================================================== */
/* Breadcrumb (SEO + orientação) */
.breadcrumb{background:var(--surface); border-bottom:1px solid var(--line)}
.breadcrumb ol{
  max-width:var(--maxw); margin:0 auto; padding:var(--space-3) var(--space-5);
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft);
}
.breadcrumb a{color:var(--brand-teal-ink)}
.breadcrumb a:hover{color:var(--brand-blue)}
.breadcrumb li{display:flex; align-items:center; gap:.5em}
.breadcrumb li+li::before{content:"›"; color:var(--n-400)}
.breadcrumb [aria-current="page"]{color:var(--text)}

/* Chips de confiança (no hero escuro) */
.trust-chips{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); margin-top:var(--space-5)}
.trust-chips .chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color:#D7E0EA; border:1px solid rgba(63,194,214,.35); padding:.5em .7em; background:rgba(63,194,214,.06);
}
.trust-chips .chip svg{width:14px; height:14px; color:var(--brand-teal-bright); flex:none}

/* Prova de equipe (números honestos, sem inventar) */
.cred-row{display:flex; flex-wrap:wrap; gap:var(--space-6) var(--space-8); margin-top:var(--space-7)}
.cred{border-left:2px solid var(--brand-teal); padding-left:var(--space-4)}
.cred b{display:block; font-family:var(--font-head); font-weight:800; font-size:2rem; line-height:1; color:var(--brand-navy)}
.cred span{display:block; font-size:.92rem; color:var(--text-soft); margin-top:var(--space-2); max-width:26ch}

/* FAQ (acordeão nativo <details> — zero JS) */
.faq{margin-top:var(--space-7); border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:var(--space-5) 0;
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  font-family:var(--font-head); font-weight:700; font-size:1.08rem; color:var(--text); transition:color var(--dur);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--brand-teal-ink)}
.faq-item summary::after{
  content:""; width:12px; height:12px; flex:none; margin-top:-4px;
  border-right:2px solid var(--brand-teal); border-bottom:2px solid var(--brand-teal);
  transform:rotate(45deg); transition:transform var(--dur) var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg); margin-top:2px}
.faq-item .faq-a{color:var(--text-soft); font-size:1rem; line-height:1.6; padding:0 var(--space-6) var(--space-5) 0; max-width:74ch}
.faq-item .faq-a a{color:var(--brand-blue); font-weight:600}

/* Hero de landing com formulário embutido (2 colunas) */
.lp-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-8); align-items:start}
.lp-hero-grid .form{box-shadow:var(--elev-3)}
.lp-hero-grid .phero-copy .lead{max-width:46ch}

@media (max-width:960px){
  .lp-hero-grid{grid-template-columns:1fr; gap:var(--space-7)}
  .cred-row{gap:var(--space-5) var(--space-6)}
}