/* =========================================================
   VIZALE — Design System
   Estratégia, posicionamento e marketing para empresários
   ========================================================= */

/* ---------- Fontes ---------- */
@font-face {
  font-family: "Bodhi";
  src: url("../assets/fonts/bodhi-regular.woff2") format("woff2"),
       url("../assets/fonts/Bodhi Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodhi";
  src: url("../assets/fonts/bodhi-italic.woff2") format("woff2"),
       url("../assets/fonts/Bodhi Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root{
  /* Paleta extraída da identidade Vizale */
  --c-black:      #1C1714;
  --c-white:      #FDFDFC;
  --c-offwhite:   #E2DEDD;
  --c-greige:     #B7AFA6;
  --c-camel:      #A78768;
  --c-blue:       #253FDA;
  --c-blue-dark:  #1B2FA8;
  --c-navy:       #0A1940;
  --c-lime:       #E4E766;

  /* Papéis semânticos */
  --bg:            var(--c-white);
  --bg-alt:        #F1F3FB;
  --bg-dark:       var(--c-navy);
  --text:          var(--c-navy);
  --text-soft:     #4A5270;
  --text-inverse:  var(--c-white);
  --border:        #E4E1DD;
  --accent:        var(--c-blue);
  --accent-soft:   #EEF0FD;
  --focus:         var(--c-blue);

  /* Tipografia */
  --font-display: "Playfair Display", "Bodhi", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h2: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h3: clamp(1.375rem, 1.4vw + 1rem, 1.75rem);
  --fs-lead: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Espaçamento (escala 8px) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;
  --sp-8: 9rem;

  --container: 1180px;
  --container-narrow: 780px;
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .35s;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font: inherit; cursor:pointer; }
input, textarea, select{ font: inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--c-navy); color:var(--c-white); padding:.8rem 1.2rem; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--sp-3);
}
.container--narrow{ max-width: var(--container-narrow); }
section{ padding-block: var(--sp-7); }
@media (max-width: 640px){
  section{ padding-block: var(--sp-5); }
  .container{ padding-inline: var(--sp-2); }
}

.section-head{
  max-width: 640px;
  margin-bottom: var(--sp-5);
}
.section-head.is-center{ margin-inline:auto; text-align:center; }
.section-head h1 + .lead,
.section-head h2 + .lead,
.section-head h3 + .lead{ margin-top: var(--sp-3); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

h1, .h1{
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -.01em;
  font-weight: 650;
}
h2, .h2{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 600;
}
h3, .h3{
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: -.01em;
}
.lead{
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-soft);
}
.text-soft{ color: var(--text-soft); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding: .95rem 1.7rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .98rem;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; transition: transform var(--dur) var(--ease); flex-shrink:0; }
.btn:hover svg{ transform: translateX(3px); }

.btn--primary{
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: 0 4px 10px -4px rgba(10,25,64,.35);
}
.btn--primary:hover{
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(37,63,218,.45);
}

.btn--on-dark{
  background: var(--c-white);
  color: var(--c-navy);
}
.btn--on-dark:hover{ background: var(--c-lime); }

.btn--ghost{
  background: transparent;
  color: var(--c-navy);
  border-color: var(--border);
}
.btn--ghost:hover{
  border-color: var(--c-navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -14px rgba(10,25,64,.3);
}

.btn--sm{ padding:.7rem 1.2rem; font-size:.9rem; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-navy);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block: .9rem;
}
.brand{
  display:inline-flex;
  align-items:center;
  transition: transform var(--dur) var(--ease);
}
.brand:hover{ transform: translateY(-1px); }
.brand__logo{ height: 30px; width:auto; display:block; }
.brand__word{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: .02em;
  color: var(--c-navy);
}

.nav{
  display:flex;
  align-items:center;
  gap: var(--sp-5);
}
.nav__list{
  display:flex;
  align-items:center;
  gap: var(--sp-4);
}
.nav__list a{
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  position:relative;
  padding-block:.3rem;
}
.nav__list a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background: var(--accent);
  transition: right var(--dur) var(--ease);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after{ right:0; }
.nav__list a[aria-current="page"]{ color: var(--accent); }

.nav__cta{ display:flex; align-items:center; }
.nav__toggle{
  display:none;
  background:none; border:none; padding:.4rem;
}
.nav__toggle span{
  display:block; width:24px; height:2px; background:var(--c-white); margin:5px 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Header escuro: ajustes de contraste no desktop (o menu mobile abre em painel claro à parte) */
@media (min-width: 881px){
  .nav__list a{ color: rgba(255,255,255,.88); }
  .nav__list a:hover{ color: var(--c-white); }
  .nav__list a[aria-current="page"]{ color: var(--c-white); }
  .nav__list a::after{ background: var(--c-lime); }
  .nav__cta .btn--primary{ background: var(--c-white); color: var(--c-navy); box-shadow:none; }
  .nav__cta .btn--primary:hover{ background: var(--c-lime); color: var(--c-navy); }
}

@media (max-width: 880px){
  .brand{ position:relative; z-index:3; }
  .nav__toggle{ display:block; position:relative; z-index:3; }

  /* Menu em tela cheia (fundo marinho), estilo overlay */
  .nav__list{
    position:fixed; inset:0;
    z-index:1;
    background: var(--c-navy);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding: calc(var(--sp-6) + 1.4rem) var(--sp-4) var(--sp-4);
    gap: var(--sp-4);
    opacity:0;
    pointer-events:none;
    transition: opacity var(--dur) var(--ease);
  }
  .nav__list a{
    color: rgba(255,255,255,.9);
    font-size:1.5rem;
    padding-block:.15rem;
  }
  .nav__list a[aria-current="page"]{ color: var(--c-lime); }
  .nav__list a::after{ display:none; }
  .nav.is-open .nav__list{ opacity:1; pointer-events:auto; }

  /* Hambúrguer vira X quando aberto */
  .nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* CTA em destaque no rodapé do menu */
  .nav__cta{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:2;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    opacity:0;
    pointer-events:none;
    transition: opacity var(--dur) var(--ease);
  }
  .nav.is-open .nav__cta{ opacity:1; pointer-events:auto; }
  .nav__cta .btn{ width:100%; justify-content:center; }
  .nav__cta .btn--primary{ background: var(--c-lime); color: var(--c-navy); box-shadow:none; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding-top: calc(var(--sp-7) + var(--sp-2));
  padding-bottom: var(--sp-7);
  overflow: hidden;
  isolation: isolate;
}
.hero::before{
  content:"";
  position:absolute;
  top:-30%; right:-12%;
  width:min(60vw,780px);
  aspect-ratio:1;
  background:
    radial-gradient(circle at 32% 30%, var(--c-blue) 0%, var(--c-blue) 46%, transparent 47%);
  opacity:.08;
  z-index:-1;
}
@media (min-width: 960px){
  .hero::before{ opacity:.12; width:min(46vw,620px); top:-22%; right:2%; }
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:6px;
  background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-blue) 33%, var(--c-lime) 33%, var(--c-lime) 66%, var(--c-camel) 66%);
}
.hero__grid{
  display:grid;
  gap: var(--sp-5);
  align-items:center;
}
@media (min-width: 960px){
  .hero__grid{
    grid-template-columns: 1.15fr .85fr;
    gap: var(--sp-6);
  }
}
.hero h1{
  max-width: 34ch;
  font-size: clamp(2rem, 2.4vw + 1.1rem, 3.2rem);
}

/* Painel visual do hero (dá densidade no desktop, onde sobra espaço) */
.hero__visual{
  display:none;
  position:relative;
  aspect-ratio: 4/5;
  border-radius: 20px;
  background: linear-gradient(155deg, var(--c-navy) 0%, var(--c-blue) 78%);
  overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(10,25,64,.45);
}
@media (min-width: 960px){
  .hero__visual{ display:block; }
}
.hero__visual::before{
  content:"";
  position:absolute; top:-10%; right:-10%;
  width:70%; aspect-ratio:1;
  background: url("../assets/img/vizale-mark-192.png") no-repeat center / contain;
  opacity:.16;
}
.hero__visual::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:45%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}
.hero__visual-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 34px 34px;
}
.hero__flow{
  position:absolute;
  left: var(--sp-3); right: var(--sp-3);
  top: 6.5rem; bottom: 8.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:.75rem;
  z-index:1;
}
.hero__flow-step strong{
  display:block;
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  color: var(--c-white);
  line-height:1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero__flow-step span{
  display:block;
  margin-top:.2rem;
  font-size:.85rem;
  color: rgba(253,253,252,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.hero__flow-arrow{
  color: rgba(253,253,252,.5);
  font-size:.85rem;
  line-height:1;
  padding-left:.1rem;
}
.hero__badge{
  position:absolute; left: var(--sp-3); bottom: var(--sp-3); right: var(--sp-3);
  background: rgba(253,253,252,.96);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  z-index:1;
}
.hero__badge strong{
  display:block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  color: var(--c-navy);
  line-height:1;
}
.hero__badge span{
  display:block;
  margin-top:.4rem;
  font-size:.85rem;
  color: var(--text-soft);
}
.hero__chip{
  position:absolute; top: var(--sp-3); left: var(--sp-3);
  background: var(--c-lime);
  color: var(--c-navy);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:.5rem .9rem;
  border-radius: 999px;
  z-index:1;
}
.hero h1 em{
  font-style:normal;
  color: var(--accent);
  position:relative;
}
.hero .lead{ max-width: 46ch; margin-top: var(--sp-3); }
.hero__cta{
  display:flex; align-items:center; gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap:wrap;
}
.hero__note{ font-size:.85rem; color:var(--text-soft); padding-left:.9rem; border-left:2px solid var(--c-lime); }
@media (max-width: 560px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}

/* ---------- Faixa de prova ---------- */
.proof-strip{
  padding-block: 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background: var(--bg-alt);
}
.proof-strip .container{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}
.proof-item{ text-align:left; }
.proof-item{
  padding-left: var(--sp-2);
  border-left: 3px solid var(--accent);
}
.proof-item:nth-child(2){ border-left-color: var(--c-lime); }
.proof-item:nth-child(3){ border-left-color: var(--c-camel); }
.proof-item strong{
  display:block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem,2.6vw + 1rem,3rem);
  color: var(--c-navy);
  line-height:1;
}
.proof-item span{
  display:block;
  margin-top:.5rem;
  font-size:.9rem;
  color: var(--text-soft);
}

/* ---------- Cards de filosofia / diferenciais ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items:start; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
.grid-6{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
@media (max-width: 1100px) and (min-width: 901px){
  .grid-6{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-6{ grid-template-columns:1fr; }
}

.bg-alt{ background: var(--bg-alt); }

.card{
  background: var(--c-white);
  border:1px solid var(--border);
  border-top: 3px solid var(--c-navy);
  border-radius: 2px var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: var(--sp-4);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover{
  border-color: var(--border);
  border-top-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -24px rgba(10,25,64,.4);
}
.grid-3 .card:nth-child(3n+2){ border-top-color: var(--c-camel); }
.grid-3 .card:nth-child(3n+2):hover{ border-top-color: var(--c-camel); }
.grid-3 .card:nth-child(3n+3){ border-top-color: var(--accent); }
.grid-6 .card:nth-child(3n+2){ border-top-color: var(--c-camel); }
.grid-6 .card:nth-child(3n+3){ border-top-color: var(--accent); }
.card__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background: var(--accent-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.card h3{ margin-bottom: var(--sp-1); }
.card p{ color: var(--text-soft); font-size:.98rem; }
.card__list{ margin-top: var(--sp-2); }
.card__list li{
  font-size:.92rem;
  color: var(--text-soft);
  padding-left: 1.1rem;
  position:relative;
  margin-bottom:.35rem;
}
.card__list li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:5px; height:5px;
  background: var(--accent);
  border-radius:50%;
}
.card--service{ display:flex; flex-direction:column; height:100%; }
.card--service .btn{ margin-top:auto; padding-top:var(--sp-3); }

/* Processo (linha do tempo) */
.process{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--sp-3);
  counter-reset: step;
}
@media (max-width: 900px){ .process{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .process{ grid-template-columns:1fr; } }
.process__step{
  border-top: 4px solid var(--c-navy);
  padding-top: var(--sp-2);
}
.process__step:nth-child(2){ border-top-color: var(--accent); }
.process__step:nth-child(3){ border-top-color: var(--c-camel); }
.process__step:nth-child(4){ border-top-color: var(--c-lime); }
.process__step em{
  font-style:normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size:2.1rem;
  color: var(--accent);
  display:block;
  margin-bottom:.3rem;
  line-height:1;
}
.process__step p{ color: var(--text-soft); font-size:.95rem; margin-top:.35rem; }

/* Faixa de destaque colorida (quebra visual) */
.band-accent{
  background: var(--c-blue);
  color: var(--c-white);
  position:relative;
  overflow:hidden;
}
.band-accent::before{
  content:"";
  position:absolute; right:-6%; top:-30%;
  width:420px; aspect-ratio:1;
  background: url("../assets/img/vizale-mark-192.png") no-repeat center / contain;
  opacity:.14;
}
.band-accent .h2, .band-accent h2{ color: var(--c-white); }
.band-accent p{ color: rgba(255,255,255,.82); }
.band-accent__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: var(--sp-4);
  position:relative;
  z-index:1;
}

/* Faixa escura (filosofia / CTA) */
.band-dark{
  background: var(--c-navy);
  color: var(--c-white);
}
.band-dark .text-soft{ color: #B9C0DA; }
.band-dark .card{ background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
.band-dark .card:hover{ border-color: var(--c-lime); box-shadow:none; }

/* Citação / filosofia */
.philosophy .grid-2{ align-items:center; }
.philosophy blockquote{
  margin:0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem,3vw + 1rem,2.6rem);
  line-height:1.3;
  max-width: 16ch;
  position:relative;
  padding-left: 1.3rem;
  border-left: 4px solid var(--c-lime);
}
.philosophy cite{ font-style:normal; }

/* Quem é / não é */
.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-4); }
@media (max-width: 760px){ .fit-grid{ grid-template-columns:1fr; } }
.fit-card{
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.fit-card--yes{ background: var(--accent-soft); border:1px solid #D9DEFA; }
.fit-card--no{ background: var(--bg-alt); border:1px solid var(--border); }
.fit-card h3{ margin-bottom: var(--sp-2); }
.fit-card li{
  padding-left:1.4rem;
  position:relative;
  margin-bottom:.6rem;
  font-size:.98rem;
}
.fit-card--yes li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.fit-card--no li::before{ content:"–"; position:absolute; left:0; color:var(--text-soft); font-weight:700; }

/* Depoimento / cases */
.quote-block{
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-3);
}
.quote-block p{ font-size: var(--fs-lead); font-family: var(--font-display); font-weight: 600; }
.quote-block footer{ margin-top: var(--sp-2); font-size:.9rem; color:var(--text-soft); }

/* Tira de logos de clientes (acima dos depoimentos) */
.logo-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.logo-strip__item{
  display:flex;
  align-items:center;
  gap:.65rem;
  opacity:.55;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.logo-strip__item:hover{ opacity:1; filter:none; }
.logo-strip__mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:6px;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-display);
  font-weight:600;
  font-size:.78rem;
  flex-shrink:0;
}
.logo-strip__item:nth-child(2) .logo-strip__mark{ background: var(--accent); }
.logo-strip__item:nth-child(3) .logo-strip__mark{ background: var(--c-camel); }
.logo-strip__word{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:-.01em;
  color: var(--text);
}
@media (max-width:640px){
  .logo-strip{ gap: var(--sp-4) var(--sp-3); }
  .logo-strip__word{ font-size:.95rem; }
}

/* Depoimentos em grade */
.testimonial-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-4);
}
@media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr; } }
.testimonial-card{
  background: var(--c-white);
  border:1px solid var(--border);
  border-radius: 2px var(--radius-lg) var(--radius-lg) var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  padding: var(--sp-4);
  display:flex;
  flex-direction:column;
  height:100%;
}
.testimonial-card:hover{
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -24px rgba(10,25,64,.4);
}
.testimonial-card__stars{ color: var(--c-camel); letter-spacing:.15em; margin-bottom: var(--sp-2); font-size:.95rem; }
.testimonial-card p{ color: var(--text); font-size:1rem; flex:1; }
.testimonial-card footer{
  display:flex; align-items:center; gap:.8rem;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top:1px solid var(--border);
}
.testimonial-card__avatar{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size:1rem;
  flex-shrink:0;
}
.testimonial-card:nth-child(2) .testimonial-card__avatar{ background: var(--accent); }
.testimonial-card:nth-child(3) .testimonial-card__avatar{ background: var(--c-camel); }
.testimonial-card__who strong{ display:block; font-size:.92rem; }
.testimonial-card__who span{ display:block; font-size:.82rem; color:var(--text-soft); }
.testimonial-disclaimer{
  font-size:.78rem;
  color: var(--text-soft);
  margin-top: var(--sp-3);
  opacity:.75;
}

/* ---------- Formulário ---------- */
.form{
  display:grid;
  gap: var(--sp-3);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3); }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.88rem; font-weight:600; }
.field .hint{ font-size:.8rem; color:var(--text-soft); font-weight:400; }
.field input, .field select, .field textarea{
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--c-white);
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--accent);
}
.field textarea{ resize: vertical; min-height:120px; }
.form__consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color:var(--text-soft); }
.form__consent input{ margin-top:.25rem; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{
  padding: var(--sp-3);
  border-radius: var(--radius);
  font-size:.95rem;
  display:none;
}
.form-status.is-visible{ display:block; }
.form-status.success{ background:#E9F7EE; color:#1B5E33; }
.form-status.error{ background:#FBEAEA; color:#7A1F1F; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--c-black);
  color: #C9C4BE;
  padding-block: var(--sp-6) var(--sp-4);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width:760px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
.footer__brand img{ height:30px; width:auto; margin-bottom: var(--sp-2); }
.footer__logo{ height:30px; width:auto; }
.footer__brand p{ font-size:.92rem; max-width:32ch; }
.footer h4{
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:#8B8781; margin-bottom: var(--sp-2); font-family:var(--font-body); font-weight:600;
}
.footer__list li{ margin-bottom:.6rem; font-size:.92rem; overflow-wrap:anywhere; }
.footer__list a{ overflow-wrap:anywhere; }
.footer__list a:hover{ color: var(--c-lime); }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: var(--sp-3);
  font-size:.82rem;
  color:#7C7873;
  flex-wrap:wrap; gap: var(--sp-2);
}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; right: var(--sp-3); bottom: var(--sp-3);
  z-index: 90;
  width:56px; height:56px;
  border-radius:50%;
  background: var(--c-navy);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -10px rgba(10,25,64,.5);
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275), background var(--dur) var(--ease);
}
.wa-float:hover{ transform: scale(1.08) translateY(-4px); background: var(--accent); }
.wa-float svg{ width:26px; height:26px; }

/* ---------- Utilitários de animação de entrada ---------- */
.reveal{
  opacity:0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Página interna (hero simples) ---------- */
.page-hero{
  position:relative;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  overflow:hidden;
  isolation:isolate;
}
.page-hero::before{
  content:"";
  position:absolute; top:-60%; right:-8%;
  width:min(42vw,520px); aspect-ratio:1;
  background: radial-gradient(circle at 35% 35%, var(--c-blue) 0%, var(--c-blue) 45%, transparent 46%);
  opacity:.07;
  z-index:-1;
}
.page-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:4px;
  background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-blue) 33%, var(--c-lime) 33%, var(--c-lime) 66%, var(--c-camel) 66%);
}
.page-hero .eyebrow{ margin-bottom: var(--sp-2); }
.page-hero .lead{ margin-top: var(--sp-3); max-width: 56ch; }

.breadcrumb{
  font-size:.85rem; color:var(--text-soft); margin-bottom: var(--sp-3);
}
.breadcrumb a:hover{ color: var(--accent); }

/* Serviço - página hub */
.service-block{
  padding-block: var(--sp-6);
  border-top:1px solid var(--border);
}
.service-block__head{ display:grid; grid-template-columns: 2fr 3fr; gap: var(--sp-5); }
@media (max-width:840px){ .service-block__head{ grid-template-columns:1fr; } }
.service-block__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:50%;
  background: var(--accent-soft);
  font-family:var(--font-display);
  font-weight:600;
  color:var(--accent);
  font-size:1.1rem;
  margin-bottom:var(--sp-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.service-block:nth-of-type(3n+2) .service-block__num{ background:#F3ECE4; color:var(--c-camel); }
.service-block:nth-of-type(3n+3) .service-block__num{ background:#FBFAE4; color:#8C8E1F; }
.service-block ul{ columns:2; gap: var(--sp-3); margin-top: var(--sp-3); }
@media (max-width:640px){ .service-block ul{ columns:1; } }
.service-block li{ break-inside: avoid; font-size:.95rem; color:var(--text-soft); padding-left:1.1rem; position:relative; margin-bottom:.5rem;}
.service-block li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background:var(--accent); border-radius:50%; }

/* Time / sobre */
.founders{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-4); }
@media (max-width:700px){ .founders{ grid-template-columns:1fr; } }
.founder-card{
  padding: var(--sp-4);
  border:1px solid var(--border);
  border-top: 3px solid var(--c-navy);
  border-radius: 2px var(--radius-lg) var(--radius-lg) var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.founder-card:hover{
  border-top-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -24px rgba(10,25,64,.4);
}
.founders .founder-card:nth-child(2){ border-top-color: var(--c-camel); }
.founders .founder-card:nth-child(2):hover{ border-top-color: var(--c-camel); }
.founder-card h3{ margin-bottom:.2rem; }
.founder-card .role{ color: var(--accent); font-size:.88rem; font-weight:600; margin-bottom: var(--sp-2); display:block; }

/* Text link com seta */
.link-arrow{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }
.link-arrow svg{ width:14px; height:14px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg{ transform: translateX(3px); }

/* Divider sutil de textura de marca (padrão dos "7") */
.brand-pattern{
  position:relative;
  overflow:hidden;
}
.brand-pattern::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("../assets/img/vizale-mark-192.png");
  background-repeat: no-repeat;
  background-position: right -60px top -60px;
  background-size: 260px;
  opacity:.06;
  pointer-events:none;
}