/* ========================================================================= */
@font-face {
  font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/gentium-book-plus-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/gentium-book-plus-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-latin-600-normal.woff2') format('woff2');
}


/* =========================================================================
   JULIO JAQUES CONSULTORIA — style.css
   Paleta e proporções extraídas do layout "Site Oficial.pdf".
   Organização: 1) tokens  2) reset  3) utilitários  4) componentes
                5) seções  6) animações  7) media queries
   ========================================================================= */


/* =========================================================================
   1. TOKENS — variáveis globais (:root)
   ========================================================================= */
:root {
  
  --navy:          #171F2F;   
  --navy-deep:     #101725;   
  --navy-line:     #2C3646;   
  --black:         #060606;   
  --cream:         #FAF3ED;   
  --cream-2:       #F2E9DF;   
  --cream-line:    #E2D5C7;   
  --orange:        #F5821F;   
  
  --terracotta:    #D36228;
  --brass:         #D77F48;   
  --white:         #FFFFFF;

  
  --text-dark:      #171F2F;
  --text-dark-soft: #545C6B;              
  --text-light:     #FAF3ED;
  --text-light-soft: rgba(250,243,237,.72); 

  
  
  --font-display: 'Gentium Book Plus', Georgia, 'Times New Roman', serif;
  --font-body:    'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;

  
  --fs-h1:      clamp(1.4rem, 0.85rem + 2vw, 2.4rem);
  --fs-h2:      clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-stat:    clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-lead:    clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.6875rem;

  
  --container:        1180px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --section-y:        clamp(4rem, 8vw, 7.5rem);   
  --header-h:         84px;
  --hero-overhang:    0;   
  
  --hero-h:           clamp(380px, calc(72vh - var(--header-h)), 590px);

  
  --radius: 2px;
  
  --radius-btn: 8px;
  
  --pilar-gutter: clamp(30px, 3vw, 40px);

  
  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  
  scroll-padding-top: var(--header-real-h, var(--header-h));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;   
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

p  { margin: 0 0 1.15em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}
a:hover { color: var(--terracotta); }

/* ---- OTIMIZAÇÃO DE IMAGENS -------------------------------------------
   Regra global: nenhuma imagem estoura o container e a proporção nunca
   é distorcida. `height:auto` mantém o aspect ratio declarado em
   width/height no HTML (o que também evita layout shift / CLS).
   `object-fit: cover` é aplicado só onde a imagem preenche uma área fixa.
   --------------------------------------------------------------------- */
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea { font: inherit; color: inherit; }


:focus-visible {
  
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}


.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 999;
  padding: .65rem 1.1rem;
  background: var(--orange);
  color: var(--navy);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--navy); }


/* =========================================================================
   3. UTILITÁRIOS
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); margin-inline: auto; }

.center { text-align: center; }


:root          { --accent: var(--orange); }
.section--cream { --accent: var(--terracotta); }
.c-orange      { color: var(--accent); }


.section { padding-block: var(--section-y); }
.section--cream { background-color: var(--cream); color: var(--text-dark); }
.section--navy  { background-color: var(--navy);  color: var(--text-light); }
.section--black { background-color: var(--black); color: var(--text-light); }


.section--navy p, .section--black p { color: var(--white); }


.h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700;
      color: var(--text-dark); margin: 2.5rem 0 1rem; }

.lead { font-size: var(--fs-lead); color: var(--text-dark-soft); }
.section--navy .lead, .section--black .lead { color: var(--white); }


.eyebrow {
  font-family: var(--font-display);
  
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 2.5rem;
}
.section--navy .eyebrow, .section--black .eyebrow { color: var(--orange); }


.eyebrow--dark { color: var(--text-dark); }


.statement {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .55vw, 1.4rem);
  font-weight: 700;
  color: var(--terracotta);
  margin-top: 2.5rem;
}
.statement--left { text-align: left; }

.section--navy .statement,
.section--black .statement { color: var(--orange); }


/* =========================================================================
   4. COMPONENTES
   ========================================================================= */


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);   
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}

.btn--outline { border-color: var(--orange); color: var(--white); background: transparent; }
.btn--outline:hover { background-color: var(--orange); color: var(--navy); }

.btn--solid { background-color: var(--orange); color: var(--navy); border-color: var(--orange); }

.section--cream .btn--solid { border-color: var(--terracotta); }
.btn--solid:hover { background-color: var(--terracotta); border-color: var(--terracotta); color: var(--cream); }

.btn:active { transform: translateY(1px); }



.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  
  background-color: var(--black);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.site-header.is-stuck {
  
  background-color: rgba(6, 6, 6, .96);
  border-bottom-color: var(--navy-line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.header__logo {
  display: flex;
  align-items: center;
  min-height: 44px;          
}
.header__logo img { width: clamp(120px, 18vw, 168px); }
.header__logo:hover { opacity: .8; }

.header__right { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.header__crest { width: 30px; }

.header__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }


.header__nav .btn {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .2em;
  padding: .6rem 1.5rem;
}

.nav-list { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav-list a {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-light);
  padding-block: .5rem;      
}
.nav-list a:hover { color: var(--orange); }


.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 24px; height: 2px;
  margin-inline: auto;
  background-color: var(--text-light);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =========================================================================
   5. SEÇÕES
   ========================================================================= */

/* ---- HERÓI ------------------------------------------------------------
   A foto É o fundo da seção: o preto do arquivo funde com o preto da
   página, sem borda visível. O bloco .hero__bg avança --hero-overhang
   para baixo, recortando o topo da faixa navy que vem em seguida.
   Empilhamento: .hero (z-index 2) fica acima de .stats (z-index 1),
   por isso a foto pode "vazar" sobre a faixa.
   ----------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 2;
  background-color: var(--black);
  color: var(--text-light);
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
}

.hero__bg {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0; 
  transform: translateX(-50%);
  
  width: min(86%, calc(var(--hero-h) * 1.9));
  background-color: var(--black);
  
  background-image: url('assets/img/foto-color.jpg');
  background-image: image-set(url('assets/img/foto-color.webp') type('image/webp'),
                              url('assets/img/foto-color.jpg')  type('image/jpeg'));
  background-repeat: no-repeat;
  
  background-position: center 25%;
  background-size: 100% auto;              
  z-index: 1;
}


.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              var(--black) 0%,
              rgba(6, 6, 6, .88) 18%,
              rgba(6, 6, 6, 0) 48%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 3; padding-block: clamp(2rem, 4vw, 3rem); }
.hero__content { max-width: 40ch; }

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;          
  line-height: 1.12;
  letter-spacing: 0;
  margin-bottom: 2.2rem;
}

.hero__lead {
  max-width: 34ch;
  font-size: clamp(0.9rem, 0.86rem + 0.15vw, 1.025rem);
  color: var(--white);
}


.stats {
  position: relative;
  z-index: 1;                
  background-color: var(--navy);
  border-bottom: 1px solid var(--navy-line);
  padding-block: clamp(2rem, 3.2vw, 3.125rem);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat { padding-inline: clamp(1rem, 3vw, 2.5rem); }
.stat + .stat { border-left: 1px solid var(--navy-line); }
.stat:first-child { padding-left: 0; }

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1.1;
  color: var(--orange);
  margin-bottom: .5rem;
}
.stat__value--sm { font-size: clamp(1.25rem, .95rem + 1.1vw, 1.75rem); line-height: 1.2; }

.stat__label {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}


.problema { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.problema .lead { margin-bottom: 0; }

.quote {
  margin: 1.75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .75vw, 1.6rem);
  font-weight: 700;
  color: var(--text-dark);   
}
.quote p { margin: 0; }


.foco { padding-top: clamp(2.5rem, 5vw, 4rem); }
.foco__list {
  display: grid;
  
  margin-top: 2rem;
  font-size: var(--fs-lead);
  color: var(--text-dark-soft);
}


.abordagem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.abordagem__intro p { max-width: 46ch; }
.abordagem__crest { width: clamp(58px, 6vw, 76px); margin-top: 2.5rem; }


.pilares { display: grid; gap: 0; padding-left: var(--pilar-gutter); }

.pilar { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.pilar + .pilar { border-top: 1px solid var(--navy-line); }
.pilar:first-child { padding-top: 0; }

.pilar__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .9rem;
  position: relative;
  line-height: 1.2;        
}


.pilar__arrow {
  position: absolute;
  left: calc(var(--pilar-gutter) * -1);
  top: .6em;
  transform: translateY(-50%);
  width: 12px;              
}
.pilar p { margin: 0; max-width: 46ch; }


.metodo .lead { max-width: 55ch; margin:0 auto }
.fases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.fase {
  display: flex;
  background-color: var(--cream-2);
  border: 1px solid var(--cream-line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.fase:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(23,31,47,.10); }
.fase > article { padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.1rem, 2vw, 1.6rem); width: 100%; }

.fase__title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--terracotta);
  margin-bottom: 1.5rem;
}
.fase__list { display: grid; gap: 1.1rem; text-align: center; }
.fase__list li { font-size: .9rem; line-height: 1.65; color: var(--text-dark-soft); }
.fase__list li + li { padding-top: 1.1rem; border-top: 1px solid var(--cream-line); }

/* ---- Sobre ------------------------------------------------------------
   Mesmo princípio do herói: a foto P&B é o fundo da seção, sangrando à
   direita, e o texto corre por cima. O gradiente de .sobre::after mantém
   a leitura confortável na coluna de texto.
   ----------------------------------------------------------------------- */
.sobre { position: relative; overflow: hidden; }

.sobre__bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(78%, 1100px);
  background-image: url('assets/img/foto-pb.png');
  background-image: image-set(url('assets/img/foto-pb.webp') type('image/webp'),
                              url('assets/img/foto-pb.png')  type('image/png'));
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 100%;   
  z-index: 0;
}

.sobre::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
              var(--black) 0%,
              rgba(6, 6, 6, .92) 34%,
              rgba(6, 6, 6, 0) 66%);
  pointer-events: none;
}

.sobre__inner { position: relative; z-index: 2; }
.sobre__content { max-width: 62ch; }

.sobre__wordmark { margin-bottom: 2.5rem; }
.sobre__wordmark img { width: min(100%, 460px); }
.sobre__content p { max-width: 60ch; }


.depoimentos .h2 { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.depo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.depo {
  background-color: var(--cream);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
}
.depo figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin: 0;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  text-align: center;
}
.depo blockquote { margin: 0 0 1.75rem; }
.depo blockquote p {
  color: var(--text-dark);   
  font-size: .9375rem;
  line-height: 1.75;
  margin: 0;
}
.depo figcaption { display: grid; gap: .15rem; }
.depo__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--terracotta);
}
.depo__company { font-size: var(--fs-small); color: var(--text-dark-soft); }


.form { margin-top: clamp(2.5rem, 5vw, 4rem); }

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-dark-soft);
}
.field label span { color: var(--terracotta); margin-left: 2px; }


.field input {
  padding: .55rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--navy);
  border-radius: 0;
  transition: border-color .25s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: #A79B8E; }
.field input:focus { outline: none; border-bottom-color: var(--accent); }
.field input:focus-visible { outline: none; }

.field--message { margin-top: 2.5rem; }
.field textarea {
  padding: 1rem;
  background: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  resize: vertical;
  min-height: 160px;
  transition: border-color .25s var(--ease);
}
.field textarea:focus { outline: none; border-color: var(--accent); }


.field.has-error input,
.field.has-error textarea { border-color: #C0392B; }
.field__error { font-size: .8125rem; color: #C0392B; }


.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.field__opt {
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-dark-soft);
  text-transform: lowercase;
}

.form__notice {
  max-width: 62ch;
  margin: 2rem 0 0;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--text-dark-soft);
}

.form__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.form__status { margin: 0; margin-right: auto; font-size: var(--fs-small); color: var(--terracotta); }


.site-footer { background-color: var(--navy); color: var(--text-light-soft); }
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 1.75rem;
}
.footer__crest { width: 22px; }
.footer__text {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer__sep { margin-inline: .4rem; opacity: .5; }
.footer__text a {
  display: inline-block;
  padding-block: .35rem;     
  color: var(--text-light-soft);
}
.footer__text a:hover { color: var(--orange); }


/* =========================================================================
   6. ANIMAÇÃO DE ENTRADA (usada pelo IntersectionObserver)
   Estado inicial: invisível + deslocado 28px para baixo.
   O JS adiciona .is-visible uma única vez, e a transição faz o resto.
   O atributo data-delay no HTML vira um atraso escalonado (stagger).
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}


.no-js .reveal { opacity: 1; transform: none; }


/* =========================================================================
   7. MEDIA QUERIES
   ========================================================================= */


@media (max-width: 1024px) {
  .fases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .depo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .sobre { display: flex; flex-direction: column; }
  .sobre::after { display: none; }
  .sobre__inner { order: 1; }
  .sobre__bg {
    order: 2;
    position: static;
    width: 100%;
    max-width: 640px;
    margin: clamp(2rem, 6vw, 3rem) auto 0;
    aspect-ratio: 7000 / 4584;      
    background-position: center bottom;
    background-size: contain;
  }
  .sobre__content { max-width: none; }
}


@media (max-width: 900px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: flex; }
  .header__crest { display: none; }

  
  .header__nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 var(--gutter);
    background-color: var(--navy);
    border-bottom: 1px solid var(--navy-line);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .35s var(--ease), padding .35s var(--ease), visibility .35s;
  }
  .header__nav.is-open {
    max-height: 70vh;
    padding-block: 1rem 2rem;
    visibility: visible;
    overflow-y: auto;
  }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-list li { width: 100%; }
  
  .nav-list a {
    display: block;
    padding: 1rem 0;
    font-size: .8125rem;
    border-bottom: 1px solid var(--navy-line);
  }
  .header__nav .btn { margin-top: 1.5rem; font-size: .8125rem; }

  
  .hero { display: flow-root; min-height: 0; }  
  .hero__bg::after { display: none; }   
  .hero__inner { padding-top: clamp(2.5rem, 8vw, 4rem); }
  .hero__content { max-width: none; }
  .hero__bg {
    position: relative;                 
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 6000 / 4360;          
    background-position: center;
    background-size: contain;
    margin: clamp(2rem, 7vw, 3rem) auto calc(var(--hero-overhang) * -1);
  }
  .hero__lead { max-width: 46ch; }

  .abordagem__grid { grid-template-columns: 1fr; }

  .stats__grid { gap: 1.5rem; }
}


@media (max-width: 640px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { padding-inline: 0; padding-block: 1.25rem; }
  .stat__label { font-size: .75rem; }   
  .stat + .stat { border-left: 0; border-top: 1px solid var(--navy-line); }

  .fases { grid-template-columns: 1fr; }
  .depo-grid { grid-template-columns: 1fr; }

  .form__grid { grid-template-columns: 1fr; }
  .form__footer { justify-content: stretch; }
  .form__footer .btn { width: 100%; }
  .form__status { margin-right: 0; text-align: center; width: 100%; }

  .footer__inner { flex-direction: column; text-align: center; }
}


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


@media print {
  .site-header, .nav-toggle, .form { display: none; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
}


/* =========================================================================
   PÁGINA DE POLÍTICA DE PRIVACIDADE (privacidade.html)
   ========================================================================= */
.legal { padding-top: clamp(3rem, 6vw, 5rem); }
.legal__header { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.legal__date { font-size: var(--fs-small); color: var(--text-dark-soft); margin: .75rem 0 0; }

.legal__body h2 {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  margin: 2.75rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cream-line);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body p, .legal__body li { color: var(--text-dark-soft); max-width: 68ch; }
.legal__body ul { display: grid; gap: .6rem; margin: 0 0 1.15em; }
.legal__body li { padding-left: 1.1rem; position: relative; }
.legal__body li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 5px; height: 5px;
  background-color: var(--accent);
}
.legal__body strong { color: var(--text-dark); font-weight: 600; }


.pendente {
  background-color: #FFE9C7;
  border-bottom: 2px solid var(--terracotta);
  padding: 0 .3em;
  color: var(--text-dark);
  font-weight: 500;
}


/* =========================================================================
   FORMULÁRIO — ESTADOS DE ENVIO
   Três estados visuais: enviando, enviado e erro. A ideia é que a pessoa
   nunca fique olhando para um botão parado sem saber se algo aconteceu.
   ========================================================================= */

.form-wrap {
  position: relative;
  
  transition: height .45s var(--ease);
}

.form { transition: opacity .3s var(--ease), transform .3s var(--ease); }


.btn--enviar {
  position: relative;
  min-width: 168px;
}
.btn__label {
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.btn__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border: 2px solid rgba(23, 31, 47, .25);
  border-top-color: var(--navy);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .22s var(--ease);
}

.form.is-sending .btn__label   { opacity: 0; transform: translateY(-6px); }
.form.is-sending .btn__spinner { opacity: 1; animation: girar .7s linear infinite; }

@keyframes girar { to { transform: rotate(360deg); } }


.form.is-sending .form__grid,
.form.is-sending .field--message,
.form.is-sending .form__notice {
  opacity: .45;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}


.form__progress {
  height: 2px;
  margin-top: 1.5rem;
  background-color: var(--cream-line);
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.form.is-sending .form__progress { opacity: 1; }
.form__progress span {
  display: block;
  width: 38%;
  height: 100%;
  background-color: var(--accent);
  transform: translateX(-100%);
}
.form.is-sending .form__progress span { animation: varrer 1.15s var(--ease) infinite; }

@keyframes varrer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(365%); }
}


.form__status--erro {
  color: #C0392B;
  animation: tremor .5s var(--ease);
}

@keyframes tremor {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px);  }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px);  }
}

/* =========================================================================
   PAINEL DE CONFIRMAÇÃO
   O anel e o "certo" são desenhados por stroke-dashoffset: o traço nasce
   escondido e a animação o revela, dando a sensação de algo sendo escrito.
   ========================================================================= */
.form-sucesso {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.form-sucesso:focus { outline: none; }
.form-sucesso.is-visivel { opacity: 1; transform: none; }

.form-sucesso__marca {
  width: clamp(64px, 9vw, 84px);
  height: auto;
  margin: 0 auto 1.75rem;
  display: block;
}
.form-sucesso__anel,
.form-sucesso__risco {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-sucesso__anel  { stroke-width: 2.5; stroke-dasharray: 227; stroke-dashoffset: 227; }
.form-sucesso__risco { stroke-width: 4;   stroke-dasharray: 48;  stroke-dashoffset: 48;  }

.form-sucesso.is-visivel .form-sucesso__anel {
  animation: desenharAnel .75s var(--ease) forwards;
}
.form-sucesso.is-visivel .form-sucesso__risco {
  animation: desenharRisco .4s .45s var(--ease) forwards;
}

@keyframes desenharAnel  { to { stroke-dashoffset: 0; } }
@keyframes desenharRisco { to { stroke-dashoffset: 0; } }

.form-sucesso__titulo {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  color: var(--text-dark);
  margin-bottom: .75rem;
}
.form-sucesso__texto {
  max-width: 44ch;
  margin-inline: auto;
  color: var(--text-dark-soft);
}
.form-sucesso__voltar {
  margin-top: 1.5rem;
  padding: .5rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--terracotta);
  color: var(--terracotta);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.form-sucesso__voltar:hover { color: var(--navy); border-color: var(--navy); }


@media (prefers-reduced-motion: reduce) {
  .form-wrap { transition: none; }
  .form.is-sending .btn__spinner { animation: none; }
  .form.is-sending .form__progress span { animation: none; transform: none; width: 100%; }
  .form__status--erro { animation: none; }
  .form-sucesso { transition: none; }
  .form-sucesso__anel,
  .form-sucesso__risco { stroke-dashoffset: 0; animation: none !important; }
}