/* ===========================================================
   VERTPLANNERS — Site institucional
   Design system aderente ao Brand Book v1 · 2026
   Tipografia: Source Sans 3 (operacional) + JetBrains Mono (técnico)
   Cores: Azul VP #214597 · Taupe #BDB3AB · texto em azul institucional
   =========================================================== */

:root{
  /* ---- Azul ---- */
  --blue:#214597;
  --blue-dark:#1A3778;
  --blue-light:#637CB6;
  --blue-bg:#DDE3EF;
  --blue-deep:#0E1F44;     /* só p/ fundos hero muito escuros */

  /* ---- Taupe ---- */
  --taupe:#BDB3AB;
  --taupe-dark:#8D8680;
  --taupe-light:#D0C9C4;
  --taupe-bg:#E4E0DD;

  /* ---- Neutros (brandbook) ---- */
  --ink:#1A3778;           /* texto principal = azul institucional, "sem grafite/preto" */
  --slate:#707380;         /* texto secundário, legendas, mono labels */
  --mist:#F4F4F2;          /* fundo de cards / blocos secundários, tom quente */
  --mist-2:#ECECE8;
  --line:#E0DDD8;
  --paper:#ffffff;
  --white:#ffffff;

  /* ---- Sombras ---- */
  --shadow-sm:0 1px 2px rgba(26,55,120,.05), 0 1px 1px rgba(26,55,120,.04);
  --shadow:0 14px 40px rgba(26,55,120,.10);
  --shadow-lg:0 28px 70px rgba(26,55,120,.16);

  /* ---- Geometria ---- */
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:14px;
  --container:1200px;
  --container-wide:1320px;

  /* ---- Tipografia ---- */
  --ff-body:"Source Sans 3","Source Sans Pro","Myriad Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-head:"Source Sans 3","Source Sans Pro","Myriad Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono","SF Mono","Consolas","Roboto Mono",monospace;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-dark)}
::selection{background:var(--blue);color:#fff}

/* ---------- bilingual toggle ---------- */
body[data-lang="pt"] [data-lang="en"]{display:none !important}
body[data-lang="en"] [data-lang="pt"]{display:none !important}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.container--wide{max-width:var(--container-wide)}
.section{padding:96px 0}
.section--tight{padding:64px 0}
.section--mist{background:var(--mist)}
.section--taupe{background:var(--taupe-bg)}
.section--dark{background:var(--blue);color:#eef2fb}
.section--deep{background:var(--blue-deep);color:#dfe5f0}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--ff-head);
  font-weight:700;
  line-height:1.08;
  color:var(--blue);
  letter-spacing:-.02em;
}
.section--dark h1,.section--dark h2,.section--dark h3,
.section--deep h1,.section--deep h2,.section--deep h3{color:#fff}

h1{font-size:clamp(2.3rem,5vw,4rem);letter-spacing:-.03em;line-height:1.04}
h2{font-size:clamp(1.85rem,3.4vw,2.75rem);letter-spacing:-.025em;line-height:1.1}
h3{font-size:1.25rem;color:var(--ink);font-weight:600;letter-spacing:-.01em}

/* recurso retórico do brandbook: <em> dentro de heading vira italic light taupe */
h1 em,h2 em{
  font-style:italic;
  font-weight:300;
  color:var(--taupe-dark);
}
.section--dark h1 em,.section--dark h2 em,
.section--deep h1 em,.section--deep h2 em{color:var(--taupe-light)}

p{margin:0 0 1rem}
.lead{
  font-size:1.18rem;
  color:var(--slate);
  line-height:1.6;
  font-weight:300;
  max-width:720px;
}
.section--dark .lead,.section--deep .lead{color:rgba(255,255,255,.78)}

/* ---------- eyebrow / labels técnicas (mono) ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:20px;
}
.section--dark .eyebrow,.section--deep .eyebrow{color:var(--taupe-light)}

.chapter-num{
  font-family:var(--ff-mono);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:14px;
  display:block;
}
.section--dark .chapter-num,.section--deep .chapter-num{color:var(--taupe-light)}

.center{text-align:center}
.measure{max-width:780px}
.measure-center{max-width:780px;margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-body);font-weight:600;font-size:.96rem;
  padding:14px 26px;border-radius:6px;border:1.5px solid transparent;
  cursor:pointer;transition:all .22s ease;line-height:1;
  letter-spacing:.005em;
}
.btn svg{width:16px;height:16px}
.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px rgba(26,55,120,.28)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{background:#fff;color:var(--blue);border-color:#fff}
.btn--outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn--outline:hover{background:var(--blue);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 12px rgba(26,55,120,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:96px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:60px;width:auto}
.nav-menu{display:flex;align-items:center;gap:2px;list-style:none}
.nav-menu a{
  font-family:var(--ff-body);font-weight:600;font-size:.92rem;color:var(--ink);
  padding:10px 16px;border-radius:6px;transition:background .18s,color .18s;
  letter-spacing:.005em;
}
.nav-menu a:hover,.nav-menu a.active{color:var(--blue);background:var(--blue-bg)}
.nav-right{display:flex;align-items:center;gap:16px}

/* dropdown */
.has-drop{position:relative}
.has-drop>a::after{
  content:"";display:inline-block;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-left:8px;vertical-align:middle;opacity:.55;
}
.drop{
  position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s;
}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:11px 14px;border-radius:6px;font-size:.92rem;font-weight:600}
.drop a small{
  display:block;font-family:var(--ff-mono);font-weight:500;
  color:var(--slate);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;margin-top:4px;
}

/* lang toggle */
.lang-toggle{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;font-family:var(--ff-mono)}
.lang-toggle button{
  background:#fff;border:0;padding:7px 11px;font-weight:700;font-size:.74rem;
  color:var(--slate);cursor:pointer;transition:all .18s;letter-spacing:.1em;
}
.lang-toggle button.active{background:var(--blue);color:#fff}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;transition:.25s}

/* ---------- hero (homepage) ---------- */
.hero{position:relative;background:var(--blue-deep);color:#fff;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(110deg, rgba(14,31,68,.97) 0%, rgba(26,55,120,.86) 50%, rgba(33,69,151,.6) 100%),
    url("../img/hero/hero-bg.jpg") center/cover no-repeat;
  z-index:0;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;opacity:.32;pointer-events:none;
  background-image:
    linear-gradient(rgba(189,179,171,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(189,179,171,.18) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(105deg,transparent 30%,#000 100%);
          mask-image:linear-gradient(105deg,transparent 30%,#000 100%);
}
.hero-inner{position:relative;z-index:2;padding:140px 0 130px;max-width:880px}
.hero h1{color:#fff;margin-bottom:26px;letter-spacing:-.035em}
.hero h1 em{color:var(--taupe-light)}
.hero .lead{color:rgba(255,255,255,.82);font-size:1.28rem;max-width:680px;margin-bottom:38px;font-weight:300}
.hero .btn-row{margin-top:10px}
.hero-tag{
  display:inline-block;
  font-family:var(--ff-mono);font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--taupe-light);
  border:1px solid rgba(208,201,196,.32);border-radius:28px;
  padding:7px 16px;margin-bottom:28px;
}

/* page hero (páginas internas) */
.page-hero{position:relative;background:var(--blue-deep);color:#fff;overflow:hidden}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(110deg,rgba(14,31,68,.97),rgba(33,69,151,.65)),url("../img/hero/hero-bg.jpg") center/cover;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;opacity:.22;pointer-events:none;
  background-image:
    linear-gradient(rgba(189,179,171,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(189,179,171,.18) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(105deg,transparent 35%,#000 100%);
          mask-image:linear-gradient(105deg,transparent 35%,#000 100%);
}
.page-hero-inner{position:relative;z-index:2;padding:110px 0 92px;max-width:840px}
.page-hero h1{color:#fff;margin-bottom:18px}
.page-hero .lead{color:rgba(255,255,255,.82)}
.breadcrumb{
  font-family:var(--ff-mono);font-size:.72rem;
  color:rgba(208,201,196,.7);margin-bottom:24px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.breadcrumb a{color:rgba(208,201,196,.7)}
.breadcrumb a:hover{color:#fff}

/* ---------- stats band ---------- */
.stats{background:var(--blue);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14)}
.stat{background:var(--blue);padding:48px 28px;text-align:center}
.stat .num{
  font-family:var(--ff-body);font-weight:700;
  font-size:2.7rem;line-height:1;color:#fff;letter-spacing:-.025em;
}
.stat .lbl{
  font-family:var(--ff-mono);font-size:.68rem;
  color:rgba(221,227,239,.85);margin-top:14px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;line-height:1.5;
}

/* ---------- feature grid ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 32px;transition:border-color .25s,box-shadow .25s,transform .25s;
}
.feature:hover{border-color:var(--blue-light);box-shadow:var(--shadow);transform:translateY(-2px)}
.feature .ic{
  width:48px;height:48px;border-radius:8px;
  background:var(--blue-bg);display:grid;place-items:center;
  margin-bottom:22px;color:var(--blue);
}
.feature .ic svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.5}
.feature h3{margin-bottom:10px;color:var(--blue)}
.feature p{color:var(--slate);font-size:.97rem;margin:0;line-height:1.6}
.feature--media{padding:0;overflow:hidden}
.feature--media .ft-media{height:172px;background:#fff;border-bottom:1px solid var(--line)}
.feature--media .ft-media img{width:100%;height:100%;object-fit:contain;padding:16px;display:block;transition:transform .35s cubic-bezier(.2,.7,.25,1)}
.feature--media:hover .ft-media img{transform:scale(1.05)}
.feature--media .ft-body{padding:24px 26px 26px}

/* ---------- split (text + media) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split--media-first .media{order:-1}
.media-frame{
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--mist);
  border:1px solid var(--line);
}
.media-frame img{width:100%;height:100%;object-fit:cover}
.ulist{list-style:none;margin:20px 0 0}
.ulist li{
  position:relative;padding:11px 0 11px 30px;
  border-bottom:1px solid var(--line);color:var(--ink);font-size:.97rem;
}
.ulist li:last-child{border-bottom:0}
.ulist li::before{
  content:"";position:absolute;left:0;top:18px;
  width:12px;height:7px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}

/* ---------- manifesto / quote block ---------- */
.manifesto{
  font-family:var(--ff-body);font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:300;line-height:1.4;
  color:#fff;max-width:880px;letter-spacing:-.01em;
}
.manifesto em{font-style:italic;color:var(--taupe-light);font-weight:300}
.manifesto strong{font-weight:600;color:#fff}

.voice-quote{
  font-size:clamp(1.4rem,2.4vw,1.75rem);font-style:italic;font-weight:300;
  line-height:1.4;color:var(--blue);max-width:880px;
  border-left:3px solid var(--taupe);padding-left:32px;
}
.voice-quote strong{font-weight:600;font-style:normal;color:var(--blue-dark)}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.pillar{
  padding:32px 28px;border-radius:var(--radius);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
}
.pillar-num{
  font-family:var(--ff-mono);font-size:.7rem;color:var(--taupe-light);
  letter-spacing:.2em;margin-bottom:18px;font-weight:700;
}
.pillar h4{font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:10px;letter-spacing:-.01em}
.pillar p{font-size:.93rem;color:rgba(255,255,255,.75);margin:0;line-height:1.6}

/* ---------- brand / representadas cards ---------- */
.brand-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;
  color:var(--ink);
}
.brand-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--blue-light)}
.brand-card .ph{
  aspect-ratio:16/10;background:var(--mist);
  overflow:hidden;display:grid;place-items:center;padding:20px;
  border-bottom:1px solid var(--line);
}
.brand-card .ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.brand-card .bd{padding:32px 30px 34px;display:flex;flex-direction:column;flex:1}
.brand-card .kicker{
  font-family:var(--ff-mono);font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-dark);
  margin-bottom:12px;
}
.brand-card h3{font-size:1.55rem;margin-bottom:12px;color:var(--blue);font-weight:700;letter-spacing:-.015em}
.brand-card p{color:var(--slate);font-size:.97rem;flex:1;line-height:1.6}
.brand-card .more{
  margin-top:22px;font-family:var(--ff-body);font-weight:600;
  color:var(--blue);font-size:.93rem;display:inline-flex;align-items:center;gap:8px;
}
.brand-card .more::after{content:"→";transition:transform .2s}
.brand-card:hover .more::after{transform:translateX(5px)}

/* kicker (geral, fora do brand-card) */
.kicker{
  display:inline-block;
  font-family:var(--ff-mono);font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-dark);
  margin-bottom:10px;
}

/* ---------- product cards ---------- */
.product{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.product:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--blue-light)}
.product .ph{
  aspect-ratio:4/3;background:#fff;overflow:hidden;
  display:grid;place-items:center;border-bottom:1px solid var(--line);
}
.product .ph img{width:100%;height:100%;object-fit:cover}
.product .bd{padding:26px 24px}
.product h3{font-size:1.15rem;margin-bottom:8px;color:var(--blue)}
.product p{color:var(--slate);font-size:.93rem;margin:0;line-height:1.55}
.product .tag{
  display:inline-block;
  font-family:var(--ff-mono);font-weight:700;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue);
  background:var(--blue-bg);padding:5px 10px;border-radius:4px;margin-bottom:14px;
}

/* ---------- spec list ---------- */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
/* specs aninhado numa coluna do grid-2 (imagem | specs) nao tem largura p/ 2 colunas: usa 1 */
.grid-2 .specs{grid-template-columns:1fr}
.spec{
  display:flex;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.spec dt{color:var(--slate);font-size:.93rem;font-weight:400}
.spec dd{
  font-family:var(--ff-mono);font-weight:500;
  text-align:right;font-size:.88rem;color:var(--blue-dark);
}

/* ---------- callout / CTA ---------- */
.cta{
  position:relative;background:var(--blue);color:#fff;
  border-radius:var(--radius-lg);padding:64px 60px;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:
    linear-gradient(rgba(189,179,171,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(189,179,171,.16) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at top right,#000 30%,transparent 75%);
          mask-image:radial-gradient(circle at top right,#000 30%,transparent 75%);
}
.cta::after{
  content:"";position:absolute;right:-80px;top:-80px;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(208,201,196,.14),transparent 70%);
}
.cta-inner{position:relative;z-index:1;max-width:720px}
.cta h2{color:#fff;margin-bottom:16px}
.cta h2 em{color:var(--taupe-light)}
.cta p{color:rgba(255,255,255,.85);font-size:1.1rem;margin-bottom:28px;font-weight:300}

/* badge row */
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.badge{
  font-family:var(--ff-mono);font-weight:600;font-size:.7rem;
  color:var(--blue-dark);background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:7px 14px;
  letter-spacing:.1em;text-transform:uppercase;
}
.section--dark .badge,.section--deep .badge{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.88);
}
.section--mist .badge{background:#fff}

/* download cards */
.dl{
  display:flex;align-items:center;gap:18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;transition:box-shadow .2s,transform .2s,border-color .25s;
}
.dl:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--blue-light)}
.dl .fic{
  flex:0 0 48px;width:48px;height:48px;border-radius:6px;
  background:var(--blue);display:grid;place-items:center;color:#fff;
  font-family:var(--ff-mono);font-weight:700;font-size:.68rem;letter-spacing:.05em;
}
.dl .meta{flex:1;display:flex;flex-direction:column;gap:3px}
.dl .meta strong{
  display:block;font-family:var(--ff-body);font-size:1rem;
  font-weight:600;color:var(--blue);letter-spacing:-.005em;
}
.dl .meta span{
  font-family:var(--ff-mono);font-size:.68rem;color:var(--slate);
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.dl .go{color:var(--blue);font-weight:700;font-size:1.4rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.info-block{margin-bottom:28px}
.info-block .k{
  font-family:var(--ff-mono);font-weight:700;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-dark);
  margin-bottom:8px;
}
.info-block .v{font-size:1.02rem;color:var(--ink);line-height:1.5}
.info-block .v a{font-weight:600}
.form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:36px;box-shadow:var(--shadow-sm);
}
.field{margin-bottom:18px}
.field label{
  display:block;font-family:var(--ff-body);font-weight:600;
  font-size:.88rem;margin-bottom:8px;color:var(--ink);
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:6px;font-family:var(--ff-body);font-size:.97rem;
  color:var(--ink);background:var(--mist);
  transition:border-color .18s,background .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);background:#fff;
}
.field textarea{resize:vertical;min-height:120px}

/* ---------- footer ---------- */
/* ---------- faixa de contato (pré-footer, todas as páginas) ---------- */
.contact-strip{background:var(--mist);border-top:1px solid var(--mist-2);padding:52px 0}
.contact-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.contact-strip h3{font-family:var(--ff-head);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:6px 0 0}
.contact-strip h3 em{font-style:italic;font-weight:300;color:var(--slate)}
.contact-strip-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn--wa{background:#25D366;color:#fff;border-color:#25D366}
.btn--wa:hover{background:#1fb457;border-color:#1fb457;color:#fff;transform:translateY(-1px);box-shadow:0 10px 22px rgba(37,211,102,.3)}
.btn--wa svg{width:17px;height:17px}

.site-footer{background:var(--blue-deep);color:#9fb0cd;padding:72px 0 30px;font-size:.92rem}
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px;
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer img{height:36px;margin-bottom:20px}
.site-footer .footer-logo{background:#fff;padding:9px 14px;border-radius:9px;box-sizing:content-box;display:inline-block}
.site-footer h4{
  color:#fff;font-family:var(--ff-mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;font-weight:700;
}
.site-footer ul{list-style:none}
.site-footer ul li{margin-bottom:10px;line-height:1.6}
.site-footer a{color:#9fb0cd;transition:color .18s}
.site-footer a:hover{color:#fff}
.footer-desc{max-width:320px;line-height:1.7;color:#9fb0cd;font-weight:300}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:26px;font-family:var(--ff-mono);font-size:.7rem;
  color:#74859f;letter-spacing:.1em;text-transform:uppercase;
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .section{padding:80px 0}
  .split{grid-template-columns:1fr;gap:44px}
  .split--media-first .media{order:0}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .specs{grid-template-columns:1fr;gap:0}
  .pillars{grid-template-columns:1fr;gap:18px;margin-top:36px}
  .cta{padding:48px 36px}
  .hero-inner{padding:100px 0 90px}
}
@media(max-width:760px){
  body{font-size:15.5px}
  .section{padding:64px 0}
  .container{padding:0 22px}
  .nav-menu{
    position:fixed;inset:78px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:14px 22px 28px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-130%);transition:transform .3s;max-height:calc(100vh - 78px);overflow:auto;
  }
  .nav-menu.open{transform:translateY(0)}
  .nav-menu a{padding:14px 8px;border-radius:0;border-bottom:1px solid var(--mist-2)}
  .has-drop .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px}
  .has-drop>a::after{display:none}
  .nav-toggle{display:block}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .cta{padding:36px 24px}
  .hero-inner{padding:80px 0 72px}
  .page-hero-inner{padding:80px 0 64px}
}

/* ===========================================================
   EDITORIAL LAYER — display tipográfico, full-bleed, hero massivo
   Foco: empresa institucional · visual sóbrio, enterprise
   =========================================================== */

/* ---------- display typography ---------- */
.display-1{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.04;letter-spacing:-.035em;
  color:var(--blue);
}
.display-1 em{font-style:italic;font-weight:300;color:var(--taupe-dark)}
.section--dark .display-1,.section--deep .display-1{color:#fff}
.section--dark .display-1 em,.section--deep .display-1 em{color:var(--taupe-light)}

.display-2{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1.04;letter-spacing:-.03em;
  color:var(--blue);
}
.display-2 em{font-style:italic;font-weight:300;color:var(--taupe-dark)}
.section--dark .display-2,.section--deep .display-2{color:#fff}
.section--dark .display-2 em,.section--deep .display-2 em{color:var(--taupe-light)}

.display-num{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(4rem,11vw,9rem);line-height:.9;letter-spacing:-.05em;
  color:var(--blue);
}
.section--dark .display-num,.section--deep .display-num{color:#fff}

.overline{
  display:block;font-family:var(--ff-mono);font-weight:700;
  font-size:.88rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);margin-bottom:24px;
}
.overline::before{content:"";display:inline-block;width:36px;height:1px;background:var(--taupe);vertical-align:middle;margin-right:14px;margin-bottom:3px}
.section--dark .overline,.section--deep .overline{color:var(--taupe-light)}
.section--dark .overline::before,.section--deep .overline::before{background:var(--taupe-light);opacity:.5}

/* ---------- full-bleed utilities ---------- */
.full-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.container-x{max-width:1480px;margin:0 auto;padding:0 48px}
@media(max-width:760px){.container-x{padding:0 22px}}

/* ---------- hero editorial (substitui o .hero atual quando usado com .hero--editorial) ---------- */
.hero--editorial{
  position:relative;background:var(--blue-deep);color:#fff;overflow:hidden;
  min-height:min(540px,58vh);display:flex;align-items:center;
}
.hero--editorial::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%,rgba(99,124,182,.12),transparent 60%),
    linear-gradient(100deg,rgba(11,24,56,.92) 0%,rgba(14,31,68,.55) 42%,rgba(14,31,68,.18) 100%),
    url("../img/hero/platform.png") center/cover no-repeat;
  background-color:#0b1838;
}
.hero--editorial::after{
  content:"";position:absolute;inset:0;z-index:1;opacity:.22;pointer-events:none;
  background-image:
    linear-gradient(rgba(189,179,171,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(189,179,171,.22) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse at 70% 30%,#000 30%,transparent 80%);
}
.hero--editorial .hero-content{position:relative;z-index:2;width:100%;padding:48px 0 40px;max-width:1100px}
.hero--editorial h1{color:#fff;margin-bottom:18px;max-width:18ch;font-size:clamp(2rem,4.2vw,3.6rem)}
.hero--editorial .hero-lead{
  color:rgba(255,255,255,.78);font-size:clamp(1.02rem,1.25vw,1.18rem);
  font-weight:300;line-height:1.55;max-width:520px;margin-bottom:26px;
}
.hero--editorial .hero-meta{
  position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:2;
  font-family:var(--ff-mono);font-size:.7rem;color:rgba(208,201,196,.6);
  letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl;
  border-left:1px solid rgba(208,201,196,.2);padding-left:14px;
}
.hero--editorial .hero-foot{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid rgba(255,255,255,.12);
  padding:32px 0 48px;gap:32px;flex-wrap:wrap;
}
.hero--editorial .hero-foot-item{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(208,201,196,.7);
}
.hero--editorial .hero-foot-item strong{
  display:block;font-family:var(--ff-body);font-weight:700;
  font-size:1.6rem;color:#fff;letter-spacing:-.02em;
  margin-top:8px;text-transform:none;line-height:1;
}
@media(max-width:760px){
  .hero--editorial{min-height:auto}
  .hero--editorial .hero-content{padding:90px 0 60px}
  .hero--editorial .hero-meta{display:none}
}

/* ---------- stats editorial (números massivos) ---------- */
.stats-massive{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stats-massive .stat-cell{
  padding:48px 32px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
}
.stats-massive .stat-cell:last-child{border-right:0}
.stats-massive .stat-num{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;letter-spacing:-.035em;
  color:var(--blue);
}
.stats-massive .stat-num em{font-style:italic;font-weight:300;color:var(--taupe-dark)}
.stats-massive .stat-lbl{
  font-family:var(--ff-mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
  font-weight:600;line-height:1.5;
}
.section--dark .stats-massive,.section--deep .stats-massive{border-color:rgba(255,255,255,.14)}
.section--dark .stats-massive .stat-cell,.section--deep .stats-massive .stat-cell{border-color:rgba(255,255,255,.14)}
.section--dark .stats-massive .stat-num,.section--deep .stats-massive .stat-num{color:#fff}
.section--dark .stats-massive .stat-lbl,.section--deep .stats-massive .stat-lbl{color:rgba(208,201,196,.7)}
@media(max-width:980px){
  .stats-massive{grid-template-columns:repeat(2,1fr)}
  .stats-massive .stat-cell:nth-child(2){border-right:0}
  .stats-massive .stat-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .stats-massive{grid-template-columns:1fr}
  .stats-massive .stat-cell{border-right:0;border-bottom:1px solid var(--line);padding:44px 28px}
  .stats-massive .stat-cell:last-child{border-bottom:0}
}

/* ---------- manifest centerpiece ---------- */
.manifest{
  position:relative;background:var(--blue-deep);color:#fff;overflow:hidden;
  padding:110px 0 120px;
}
.manifest .manifest-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,31,68,.86) 0%,rgba(14,31,68,.78) 50%,rgba(14,31,68,.92) 100%),
    url("../img/manifest/manifest-bg.jpg") center/cover no-repeat;
}
.manifest::before{
  content:"VP";position:absolute;top:50%;right:-6vw;transform:translateY(-50%);
  font-family:var(--ff-head);font-weight:700;font-style:italic;
  font-size:clamp(20rem,42vw,46rem);line-height:.7;
  color:rgba(208,201,196,.05);letter-spacing:-.1em;z-index:1;pointer-events:none;
}
.manifest-inner{position:relative;z-index:2;max-width:920px}
.manifest-text{
  font-family:var(--ff-head);font-weight:300;
  font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.4;
  color:#fff;letter-spacing:-.012em;
}
.manifest-text em{font-style:italic;color:var(--taupe-light);font-weight:300}
.manifest-text strong{font-weight:600;color:#fff}
.manifest-signature{
  margin-top:56px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;
}
.manifest-signature .sig-name{
  font-family:var(--ff-body);font-weight:600;font-size:1.05rem;color:#fff;
}
.manifest-signature .sig-role{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--taupe-light);margin-top:6px;
}
.manifest-signature .sig-cnpj{
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}

/* ---------- proof bar (tipografia massiva de provas) ---------- */
.proof-bar{
  background:var(--blue);color:#fff;padding:64px 0;overflow:hidden;
}
.proof-marquee{
  display:flex;gap:60px;align-items:center;
  width:max-content;
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(1.6rem,3.2vw,2.6rem);letter-spacing:-.025em;
  white-space:nowrap;
  animation:marquee 46s linear infinite;
}
.proof-marquee em{font-style:italic;font-weight:300;color:var(--taupe-light)}
.proof-marquee span{color:rgba(255,255,255,.35)}
.proof-marquee .dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--taupe);flex-shrink:0;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.proof-static{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.14);
}
.proof-static .proof-cell{
  padding:36px 28px;border-right:1px solid rgba(255,255,255,.14);
  text-align:center;
}
.proof-static .proof-cell:last-child{border-right:0}
.proof-static .proof-name{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.02em;color:#fff;
}
.proof-static .proof-sub{
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(208,201,196,.7);margin-top:10px;
}
@media(max-width:760px){
  .proof-static{grid-template-columns:repeat(2,1fr)}
  .proof-static .proof-cell:nth-child(2){border-right:0}
}

/* ---------- clients (operadoras) logo marquee ---------- */
.clients-strip{
  max-width:1240px;margin:56px auto 0;
  background:#fff;border-radius:16px;
  padding:34px 24px 30px;
}
.clients-overline{
  text-align:center;
  font-family:var(--ff-mono);font-weight:700;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;
  color:#8a94a3;
  margin-bottom:28px;
}
.clients-marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.clients-track{
  display:flex;gap:58px;align-items:center;width:max-content;
  animation:clients-scroll 38s linear infinite;
}
.client-logo{
  height:30px;width:auto;flex-shrink:0;
  opacity:.92;transition:opacity .25s,transform .25s;
}
.client-logo:hover{opacity:1;transform:translateY(-2px)}
@keyframes clients-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){
  .clients-track{gap:60px}
  .client-logo{height:28px}
}

/* ---------- editorial section block (text + heading large + foot) ---------- */
.editorial{display:grid;grid-template-columns:280px 1fr;gap:80px;align-items:start}
.editorial-side{position:sticky;top:120px}
.editorial-side .overline{margin-bottom:32px}
.editorial-side .side-meta{
  margin-top:40px;font-family:var(--ff-mono);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
  line-height:1.8;
}
.editorial-body p{font-size:1.02rem;line-height:1.65;color:var(--ink);max-width:62ch;margin-bottom:20px}
.editorial-body p.lede{
  font-size:1.28rem;line-height:1.45;font-weight:300;color:var(--ink);
  letter-spacing:-.008em;margin-bottom:32px;max-width:50ch;
}
.editorial-body p.lede em{font-style:italic;color:var(--taupe-dark)}
@media(max-width:980px){
  .editorial{grid-template-columns:1fr;gap:36px}
  .editorial-side{position:static}
}

/* ---------- tile institucional (substitui imagens ruins) ---------- */
.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,#1A3778 0%,#214597 60%,#2c5cc5 100%);
  color:#fff;aspect-ratio:4/3;padding:36px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.tile::before{
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:
    linear-gradient(rgba(189,179,171,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(189,179,171,.4) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse at top right,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse at top right,#000 20%,transparent 75%);
}
.tile::after{
  content:"";position:absolute;top:24px;right:24px;width:28px;height:28px;
  border:1.5px solid rgba(208,201,196,.5);border-radius:50%;
}
.tile-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start}
.tile-mono{
  font-family:var(--ff-mono);font-weight:700;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--taupe-light);
}
.tile-bottom{position:relative;z-index:1}
.tile-title{
  font-family:var(--ff-head);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;
  letter-spacing:-.02em;color:#fff;margin-bottom:12px;
}
.tile-title em{font-style:italic;font-weight:300;color:var(--taupe-light)}
.tile-specs{
  display:flex;gap:18px;flex-wrap:wrap;
  font-family:var(--ff-mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);
}
.tile-specs span{position:relative}
.tile-specs span + span::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--taupe-light);
}

.tile--taupe{background:linear-gradient(135deg,#8D8680 0%,#BDB3AB 100%)}
.tile--taupe .tile-mono{color:rgba(255,255,255,.85)}
.tile--taupe .tile-title em{color:rgba(255,255,255,.8)}
.tile--deep{background:linear-gradient(160deg,#0E1F44 0%,#1A3778 100%)}
.tile--photo-lts{
  background:#0a1228 url("../img/products/tile-lts-flangetec.jpg") center/cover no-repeat;
}
.tile--photo-nline{
  background:linear-gradient(180deg,rgba(9,17,40,.15) 0%,rgba(9,17,40,.10) 45%,rgba(9,17,40,.72) 100%),#0a1228 url("../img/products/nline-angle-choke.jpg?v=3") center/cover no-repeat;
}

/* tile com render real de produto (catálogo) já tratado em navy
   — background-image vem inline por tile; aqui só ajusta cor/cover e suaviza o grid */
.tile--img{background:#0a1228 center/cover no-repeat}
.tile--img::before{opacity:.10}
.tile--img::after{border-color:rgba(208,201,196,.32)}

/* tile com troca no hover — render fechado (swap-a) vira aberto/explodido (swap-b).
   As duas camadas ficam no DOM (a de cima com opacity 0), então a imagem do hover
   já carrega junto com a página — sem flash na primeira passada do mouse. */
.tile-swap .swap-a,.tile-swap .swap-b{
  position:absolute;inset:0;z-index:0;
  background:#0a1228 center/cover no-repeat;
  transition:opacity .55s ease,transform .9s cubic-bezier(.2,.7,.25,1);
}
.tile-swap::before,.tile-swap::after{z-index:1}
.tile-swap .swap-b{opacity:0;transform:scale(1.04)}
.tile-swap:hover .swap-b{opacity:1;transform:scale(1)}
.tile-swap:hover .swap-a{opacity:0}
@media (prefers-reduced-motion:reduce){
  .tile-swap .swap-a,.tile-swap .swap-b{transition:opacity .55s ease;transform:none}
}

/* ---------- brand spotlight (representada minimalista) ---------- */
.spotlight{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;
}
.spotlight + .spotlight{margin-top:32px}
.spotlight--reverse{direction:rtl}
.spotlight--reverse > *{direction:ltr}
.spotlight-media{position:relative;min-height:420px}
.spotlight-body{padding:56px 56px 56px}
.spotlight-body .kicker{margin-bottom:18px}
.spotlight-body h3{
  font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.05;
  margin-bottom:18px;color:var(--blue);letter-spacing:-.025em;
}
.spotlight-body h3 em{font-style:italic;font-weight:300;color:var(--taupe-dark)}
.spotlight-body p{color:var(--slate);font-size:1.02rem;line-height:1.6;margin-bottom:14px}
.spotlight-body .more{
  margin-top:30px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-weight:700;font-size:.74rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);
}
.spotlight-body .more::after{content:"→";font-family:var(--ff-body);font-size:1rem;transition:transform .2s}
.spotlight:hover .spotlight-body .more::after{transform:translateX(6px)}
@media(max-width:980px){
  .spotlight{grid-template-columns:1fr}
  .spotlight-media{min-height:300px}
  .spotlight-body{padding:40px 32px 44px}
}

/* ---------- callout deep (carta editorial) ---------- */
.callout-deep{
  background:
    linear-gradient(105deg, #0E1F44 0%, #14244a 52%, #1A3778 100%);
  background-color:var(--blue-deep);
  color:#fff;padding:96px 0 104px;
  position:relative;overflow:hidden;
}
.callout-deep::before{
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:
    linear-gradient(rgba(189,179,171,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(189,179,171,.22) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(120deg,#000 0%,transparent 70%);
          mask-image:linear-gradient(120deg,#000 0%,transparent 70%);
}
.callout-deep-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.callout-deep h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;line-height:1.08;max-width:14ch}
.callout-deep h2 em{font-style:italic;font-weight:300;color:var(--taupe-light)}
.callout-deep-body p{color:rgba(255,255,255,.78);font-size:1.08rem;line-height:1.62;margin-bottom:18px;font-weight:300}
.callout-deep-body p strong{font-weight:600;color:#fff}
@media(max-width:980px){
  .callout-deep-inner{grid-template-columns:1fr;gap:32px}
  .callout-deep{padding:72px 0 80px}
}

/* ===========================================================
   POLISH PROFISSIONAL — scroll progress, focus, motion, image slots
   =========================================================== */

/* scroll progress bar no topo */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--taupe),var(--blue-light));
  z-index:200;transition:width .08s ease-out;pointer-events:none;
}

/* focus accessivel */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.lang-toggle button:focus-visible{outline-offset:4px}

/* hover sofisticado em spotlight */
.spotlight{transition:box-shadow .35s ease,transform .35s ease,border-color .35s ease}
.spotlight:hover{box-shadow:var(--shadow-lg);border-color:var(--blue-light)}
.spotlight .spotlight-media .tile{transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.spotlight:hover .spotlight-media .tile{transform:scale(1.015)}

/* hover micro nos features */
.feature{transition:transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s ease,border-color .35s ease}
.feature .ic{transition:background .25s,color .25s,transform .35s cubic-bezier(.2,.7,.25,1)}
.feature:hover .ic{transform:scale(1.06)}

/* hover nos tiles */
.tile{transition:box-shadow .35s ease,transform .35s ease}

/* image slot — substituto do tile quando imagem real chega */
.imgslot{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--mist);aspect-ratio:4/3;
}
.imgslot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.25,1);
}
.imgslot:hover img{transform:scale(1.04)}
.imgslot--portrait{aspect-ratio:3/4}
.imgslot--wide{aspect-ratio:16/9}
.imgslot--square{aspect-ratio:1/1}

/* image overlay (label sobre foto) */
.imgslot-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 50%,rgba(14,31,68,.65) 100%);
}
.imgslot-meta{
  position:absolute;left:24px;right:24px;bottom:22px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;
}
.imgslot-meta strong{font-family:var(--ff-body);font-weight:600;font-size:.95rem;letter-spacing:-.005em;text-transform:none;color:#fff;display:block;margin-bottom:4px}

/* hero com imagem de fundo (uso futuro) */
.hero--bg-image::before{
  background:
    linear-gradient(110deg,rgba(14,31,68,.92) 0%,rgba(26,55,120,.7) 50%,rgba(33,69,151,.45) 100%),
    var(--hero-image,url("../img/hero/hero-bg.jpg")) center/cover no-repeat !important;
}

/* loading skeleton */
.skeleton{
  background:linear-gradient(90deg,var(--mist) 0%,var(--mist-2) 50%,var(--mist) 100%);
  background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* respeitar prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .proof-marquee,.clients-track{animation:none}
}

/* print friendly */
@media print{
  .site-header,.site-footer,.lang-toggle,.nav-toggle,.scroll-progress,.btn,.cta,.callout-deep,.proof-bar{display:none !important}
  body{font-size:11pt;color:#000;background:#fff}
  .hero--editorial,.manifest{background:#fff;color:#000;min-height:auto;padding:20px 0}
  .hero--editorial::before,.hero--editorial::after,.manifest::before{display:none}
  .hero--editorial h1,.manifest-text{color:#000}
  .display-1{font-size:24pt;color:#000}
  .display-2{font-size:18pt;color:#000}
  a{color:#000;text-decoration:underline}
}

/* ---------- Vivace: tags de protocolo, cards macios, artigo em destaque ---------- */
.tech-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tech-tags span{font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--blue);background:var(--blue-bg);padding:7px 13px;border-radius:20px}

.soft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.soft-card{background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(26,55,120,.05);padding:24px 22px;text-decoration:none;display:block;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.soft-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(26,55,120,.12);border-color:var(--blue)}
.soft-card .sc-ico{width:34px;height:34px;color:var(--blue);margin-bottom:14px;display:block}
.soft-card h3{margin:0 0 6px;font-size:1.05rem;color:var(--ink)}
.soft-card p{margin:0;font-size:.9rem;color:var(--slate);line-height:1.5}
.soft-card .sc-go{display:inline-block;margin-top:14px;font-family:var(--ff-mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--blue);text-transform:uppercase}
.soft-card--media{padding:0;overflow:hidden}
.soft-card--media .sc-media{display:block;height:160px;background:var(--taupe-light)}
.soft-card--media .sc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.soft-card--media:hover .sc-media img{transform:scale(1.04)}
.soft-card--media .sc-body{display:block;padding:20px 22px 24px}
.soft-card--media h3{margin-top:0}

.article-feat{display:block;background:linear-gradient(120deg,#0E1F44 0%,#1A3778 100%);color:#fff;border-radius:16px;padding:34px 36px;text-decoration:none;margin-top:26px;transition:transform .18s ease,box-shadow .18s ease}
.article-feat:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(14,31,68,.30)}
.article-feat .af-tag{font-family:var(--ff-mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-light)}
.article-feat h3{color:#fff;font-size:1.5rem;margin:12px 0 8px;letter-spacing:-.01em}
.article-feat p{color:rgba(255,255,255,.82);margin:0 0 14px;max-width:62ch;font-size:1rem;line-height:1.55}
.article-feat .af-go{color:#fff;font-weight:600;font-size:.98rem}

/* ---------- WhatsApp FAB (sóbrio; aparece após rolagem; texto sempre visível) ---------- */
.wa-fab{position:fixed;right:24px;bottom:24px;z-index:900;display:inline-flex;align-items:center;
  padding:15px;border-radius:999px;background:var(--blue);color:#fff;text-decoration:none;
  box-shadow:0 8px 24px rgba(26,55,120,.30);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .35s ease,transform .35s ease,background .2s ease,box-shadow .2s ease}
.wa-fab.is-visible{opacity:1;transform:none;pointer-events:auto}
.wa-fab svg{width:27px;height:27px;fill:#25D366;flex:0 0 auto;display:block}
.wa-fab .wa-label{overflow:hidden;white-space:nowrap;margin-left:11px;
  font-family:inherit;font-weight:600;font-size:.92rem;line-height:1}
.wa-fab:hover{background:#1a3a7e;box-shadow:0 10px 28px rgba(26,55,120,.38)}
.wa-fab:focus-visible{outline:3px solid rgba(33,69,151,.42);outline-offset:2px}
@media (max-width:640px){.wa-fab{right:16px;bottom:16px;padding:14px}.wa-fab svg{width:24px;height:24px}}