/* ==========================================================================
   Grando Advogados Associados — folha de estilo compartilhada
   Redesenho visual · v2
   Identidade: dossiê jurídico — papel quente, tinta grafite, acento âmbar.
   Todos os pares de cor de texto foram verificados em WCAG 2.1 AA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Superfícies */
  --paper:      #EFEBE1;   /* fundo base */
  --paper-alt:  #E7E1D2;   /* faixas alternadas */
  --white:      #FBFAF6;   /* cartões */
  --ink:        #1E2A28;   /* fundo escuro / texto principal */
  --ink-2:      #26332F;   /* fundo escuro elevado */

  /* Texto */
  --ink-soft:   #3E4A46;   /* corpo — 7.76:1 sobre papel */
  --slate:      #56605A;   /* secundário — 5.48:1 sobre papel */

  /* Acento âmbar */
  --amber:       #A6742C;  /* decorativo / traços */
  --amber-deep:  #7C5520;  /* texto sobre papel — 5.55:1 */
  --amber-light: #D2A25E;  /* texto sobre tinta — 6.40:1 */
  --amber-btn:   #C89550;  /* fundo de botão + texto tinta — 5.55:1 */
  --amber-btn-h: #DDB273;  /* hover do botão — 7.54:1 */

  /* Sinalização */
  --oxblood:    #7A2530;   /* prazos, alertas — 8.26:1 sobre papel */
  --success:    #3F6049;
  --danger:     #96323C;

  /* Traços */
  --line:        #C9C0AC;  /* fio decorativo */
  --line-strong: #8F8266;  /* borda de componente interativo — 3.18:1 */
  --line-dark:   #6E7A76;  /* borda sobre fundo tinta — 3.32:1 */

  /* Tipografia */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;

  /* Escala tipográfica fluida */
  --t-xs:  12px;
  --t-sm:  clamp(13px, 0.35vw + 12px, 14px);
  --t-base:clamp(16px, 0.3vw + 15px, 17.5px);
  --t-md:  clamp(17px, 0.5vw + 16px, 19px);
  --t-lg:  clamp(19px, 0.7vw + 17px, 22px);
  --t-h3:  clamp(18px, 0.8vw + 16px, 21px);
  --t-h2:  clamp(27px, 2.4vw + 18px, 38px);
  --t-h1:  clamp(33px, 4.1vw + 16px, 54px);

  /* Espaçamento */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 22px;  --s-6: 28px;  --s-7: 36px;  --s-8: 48px;
  --s-9: 64px;  --s-10: 84px;
  --section-y: clamp(56px, 6vw, 88px);
  --gutter:    clamp(20px, 4vw, 32px);

  /* Forma e profundidade */
  --radius:    3px;
  --radius-lg: 4px;
  --shadow-sm: 0 1px 2px rgba(30,42,40,.05);
  --shadow:    0 1px 2px rgba(30,42,40,.05), 0 4px 14px rgba(30,42,40,.05);
  --shadow-lg: 0 2px 6px rgba(30,42,40,.07), 0 14px 34px rgba(30,42,40,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
  --max: 1120px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET E BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  background-color:var(--paper);
  /* textura de papel: dois gradientes muito sutis, sem custo de imagem */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(166,116,44,.055), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(122,37,48,.03), transparent 65%);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{display:block; max-width:100%;}
img{height:auto;}
a{color:inherit;}
button,input,textarea,select{font:inherit; color:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--ink);
  text-wrap:balance;
}
p{text-wrap:pretty;}

::selection{background:var(--amber); color:var(--white);}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}

.mono{font-family:var(--font-mono); letter-spacing:0.02em; font-variant-ligatures:none;}

/* Link de salto para o conteúdo — acessibilidade por teclado */
.skip-link{
  position:absolute; left:var(--s-4); top:-100px;
  z-index:100;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:var(--t-sm);
  padding:12px 18px; border-radius:var(--radius);
  text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:var(--s-3);}

/* Rótulo de seção */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--amber-deep);
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:currentColor;
  flex-shrink:0;
}

/* --------------------------------------------------------------------------
   3. CABEÇALHO E NAVEGAÇÃO
   -------------------------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(239,235,225,.86);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
/* estado aplicado por site.js ao rolar */
header.is-scrolled{
  box-shadow:0 1px 0 var(--line), 0 6px 20px rgba(30,42,40,.07);
  background:rgba(239,235,225,.95);
}
@supports not (backdrop-filter: blur(1px)){
  header{background:var(--paper);}
}

.header-inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-5);
  padding:var(--s-4) var(--gutter);
  max-width:var(--max); margin:0 auto;
  min-height:var(--header-h);
}

.brand{
  font-family:var(--font-sans);
  font-size:clamp(17px, 1.1vw + 14px, 19.5px);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.2;
  z-index:2;
}
.brand a{text-decoration:none; color:inherit;}
.brand span{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:400;
  color:var(--slate);
  letter-spacing:0.07em;
  margin-top:3px;
}

.nav-areas{display:flex; gap:var(--s-5); align-items:center; flex-wrap:wrap;}
.nav-areas a{
  font-family:var(--font-mono);
  font-size:12.5px;
  text-decoration:none;
  color:var(--ink-soft);
  padding-bottom:3px;
  position:relative;
  transition:color .18s var(--ease);
}
/* sublinhado que cresce a partir da esquerda */
.nav-areas a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1.5px;
  background:var(--amber-deep);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-areas a:hover{color:var(--ink);}
.nav-areas a:hover::after{transform:scaleX(1);}
.nav-areas a.ativo{color:var(--ink); font-weight:500;}
.nav-areas a.ativo::after{transform:scaleX(1);}

.header-cta{
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:10px 18px;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.header-cta::after{display:none;}
.header-cta:hover{background:var(--ink); color:var(--paper); transform:translateY(-1px);}

/* Botão hambúrguer — visível apenas no mobile */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.nav-toggle:hover{border-color:var(--ink); background:rgba(30,42,40,.04);}
.nav-toggle span{
  position:absolute; left:50%; top:50%;
  width:19px; height:1.6px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .26s var(--ease), opacity .18s var(--ease);
}
.nav-toggle span:nth-child(1){transform:translate(-50%,-7px);}
.nav-toggle span:nth-child(2){transform:translate(-50%,-50%);}
.nav-toggle span:nth-child(3){transform:translate(-50%,5px);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg);}

@media (max-width: 900px){
  :root{--header-h:68px;}
  .nav-toggle{display:block;}
  .header-inner{flex-wrap:nowrap;}

  /* painel de navegação em coluna, colapsado por padrão.
     Usa max-height (e não display:none) para permitir a transição e
     manter os links fora da ordem de tabulação quando fechado. */
  .nav-areas{
    position:absolute;
    left:0; right:0; top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    padding:0 var(--gutter);
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:max-height .32s var(--ease), padding .32s var(--ease),
               opacity .22s var(--ease), visibility .32s;
  }
  .nav-areas.is-open{
    max-height:min(72vh, 440px);
    overflow-y:auto;
    padding:var(--s-2) var(--gutter) var(--s-5);
    opacity:1;
    visibility:visible;
  }
  .nav-areas a{
    font-size:15px;
    padding:15px 2px;
    border-bottom:1px solid var(--line);
  }
  .nav-areas a::after{display:none;}
  .nav-areas a.ativo{color:var(--amber-deep);}
  .header-cta{
    margin-top:var(--s-4);
    text-align:center;
    background:var(--ink);
    color:var(--paper);
    border-bottom:1px solid var(--ink);
    padding:15px 18px;
  }
}

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero{
  padding:clamp(48px, 7vw, 92px) 0 clamp(44px, 6vw, 76px);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
/* filete âmbar no topo, marca discreta do dossiê */
.hero::before{
  content:'';
  position:absolute; left:0; right:0; top:0;
  height:2px;
  background:linear-gradient(90deg, var(--amber) 0%, var(--oxblood) 42%, transparent 88%);
  opacity:.5;
}
.hero .wrap{position:relative;}
.hero-inner{max-width:760px;}

.hero h1{
  font-size:var(--t-h1);
  line-height:1.1;
  margin:var(--s-5) 0 var(--s-5);
  letter-spacing:-0.025em;
}
.hero h1 em{
  font-style:normal;
  color:var(--oxblood);
  position:relative;
  white-space:nowrap;
}
/* traço sob a palavra em destaque */
.hero h1 em::after{
  content:'';
  position:absolute; left:0; right:0; bottom:.06em;
  height:.09em;
  background:var(--oxblood);
  opacity:.22;
  border-radius:2px;
}

.hero p.lede{
  font-size:var(--t-md);
  color:var(--ink-soft);
  max-width:600px;
  margin-bottom:var(--s-7);
  line-height:1.6;
}

.hero-actions{display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap;}

/* Aviso lateral — antes escondido abaixo de 960px, agora presente em todas as larguras */
.case-tag{
  border:1px solid var(--line);
  border-left:3px solid var(--oxblood);
  border-radius:var(--radius);
  background:var(--white);
  padding:var(--s-4) var(--s-5);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  color:var(--slate);
  box-shadow:var(--shadow-sm);
  margin-top:var(--s-7);
  max-width:520px;
}
.case-tag b{
  color:var(--oxblood);
  display:block;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:var(--s-2);
}
/* no desktop volta a flutuar à direita do hero */
@media (min-width: 1040px){
  .case-tag{
    position:absolute;
    right:0; top:var(--s-2);
    max-width:230px;
    margin-top:0;
  }
}

/* --------------------------------------------------------------------------
   5. BOTÕES
   -------------------------------------------------------------------------- */
.btn-primary{
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:0.03em;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  padding:16px 28px;
  border-radius:var(--radius);
  display:inline-block;
  box-shadow:var(--shadow);
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-primary:hover{
  background:#2C3A36;
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.btn-primary:active{transform:translateY(0); box-shadow:var(--shadow-sm);}

.btn-whatsapp{
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:0.03em;
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  padding:15px 24px;
  border-radius:var(--radius);
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line-strong);
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.btn-whatsapp:hover{
  background:var(--ink); color:var(--paper);
  border-color:var(--ink);
  transform:translateY(-2px);
}
.btn-whatsapp svg{width:16px; height:16px; flex-shrink:0;}

.hero-note{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--slate);
}

/* Botão flutuante do WhatsApp */
.wa-float{
  position:fixed;
  right:clamp(16px, 3vw, 24px);
  bottom:clamp(16px, 3vw, 24px);
  z-index:35;
  width:56px; height:56px;
  border-radius:50%;
  background:#1FAF54;              /* tom escurecido: o ícone branco fica legível */
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,.24), 0 0 0 4px rgba(31,175,84,.14);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), opacity .25s var(--ease);
}
.wa-float:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 8px 24px rgba(0,0,0,.28), 0 0 0 6px rgba(31,175,84,.18);
}
.wa-float svg{width:31px; height:31px;}
/* site.js recolhe o botão quando o formulário está na tela, para não cobrir o "Enviar" */
.wa-float.is-hidden{
  opacity:0;
  transform:translateY(14px) scale(.85);
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   6. SEÇÕES
   -------------------------------------------------------------------------- */
section{
  padding:var(--section-y) 0;
  border-bottom:1px solid var(--line);
}
.section-head{max-width:660px; margin-bottom:var(--s-8);}
.section-head h2{
  font-size:var(--t-h2);
  margin-top:var(--s-3);
  line-height:1.18;
  letter-spacing:-0.022em;
}
.section-head p{color:var(--ink-soft); margin-top:var(--s-4); font-size:var(--t-md);}

/* --------------------------------------------------------------------------
   7. BLOCO EXPLICATIVO + CAIXA DE FATOS
   -------------------------------------------------------------------------- */
.explain-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:start;
}
@media (max-width: 860px){ .explain-grid{grid-template-columns:1fr;} }
.explain-grid p{margin-bottom:var(--s-4); color:var(--ink-soft);}
.explain-grid p b{color:var(--ink); font-weight:600;}

.fact-box{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  padding:var(--s-6);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
/* faixa de acento no topo da caixa */
.fact-box::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--oxblood), var(--amber));
}
.fact-box h3{
  font-family:var(--font-mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.11em;
  color:var(--oxblood);
  margin-bottom:var(--s-4);
  font-weight:500;
}
.fact-item{
  display:flex; gap:var(--s-3);
  padding:var(--s-3) 0;
  border-top:1px solid var(--line);
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-soft);
  align-items:flex-start;
}
.fact-item:first-of-type{border-top:none; padding-top:0;}
.fact-item:last-child{padding-bottom:0;}
.fact-icon{width:20px; height:20px; flex-shrink:0; margin-top:2px;}
.fact-item .k{
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--slate);
  min-width:104px;
  flex-shrink:0;
  padding-top:2px;
}
@media (max-width: 460px){
  .fact-item{flex-wrap:wrap; gap:var(--s-2);}
  .fact-item .k{min-width:0; width:100%;}
}

/* --------------------------------------------------------------------------
   8. LINHA DO TEMPO
   Desktop: horizontal. Mobile: vertical — elimina o scroll lateral.
   -------------------------------------------------------------------------- */
.timeline-wrap{padding-bottom:var(--s-2);}
.timeline{display:flex; position:relative; padding-top:var(--s-2);}
.timeline::before{
  content:'';
  position:absolute;
  top:37px; left:20px; right:20px;
  height:1px;
  background-image:linear-gradient(to right, var(--line) 0 6px, transparent 6px 12px);
  background-size:12px 1px;
}
.t-step{flex:1; padding-right:var(--s-6); position:relative;}
.t-step:last-child{padding-right:0;}
.t-stamp{
  width:56px; height:56px;
  border:1.5px solid var(--oxblood);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--oxblood);
  background:var(--paper);
  box-shadow:0 0 0 5px var(--paper);
  transform:rotate(-6deg);
  position:relative;
  z-index:2;
  margin-bottom:var(--s-5);
  flex-shrink:0;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.t-step:nth-child(even) .t-stamp{
  transform:rotate(5deg);
  border-color:var(--amber-deep);
  color:var(--amber-deep);
}
.t-step:hover .t-stamp{transform:rotate(0deg) scale(1.06);}
.t-stamp svg{width:24px; height:24px;}
/* etapas ilustradas por ícone não recebem a rotação de "carimbo" */
.t-stamp.t-icon,
.t-step:nth-child(even) .t-stamp.t-icon{transform:none;}
.t-step:hover .t-stamp.t-icon{transform:scale(1.06);}

.t-step h3{
  font-size:16.5px;
  font-weight:600;
  margin-bottom:var(--s-2);
  line-height:1.3;
}
.t-step p{font-size:14px; color:var(--slate); max-width:210px; line-height:1.55;}

/* Até 860px: empilha na vertical com fio contínuo à esquerda */
@media (max-width: 860px){
  .timeline{flex-direction:column; min-width:0; padding-top:0;}
  .timeline::before{
    top:8px; bottom:28px; left:27px; right:auto;
    width:1px; height:auto;
    background-image:linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
    background-size:1px 12px;
  }
  .t-step{
    display:grid;
    grid-template-columns:56px 1fr;
    column-gap:var(--s-5);
    padding:0 0 var(--s-7) 0;
  }
  .t-step:last-child{padding-bottom:0;}
  .t-stamp{margin-bottom:0; grid-row:1 / span 2; align-self:start;}
  .t-step h3{align-self:center; padding-top:var(--s-3);}
  .t-step p{max-width:none; padding-top:var(--s-2);}
}

.timeline-note{
  margin-top:var(--s-7);
  font-size:14px;
  color:var(--slate);
  border-left:2px solid var(--amber-deep);
  padding-left:var(--s-4);
  max-width:660px;
  line-height:1.65;
}

/* --------------------------------------------------------------------------
   9. GRADE DE SERVIÇOS
   -------------------------------------------------------------------------- */
.service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}
@media (max-width: 720px){ .service-grid{grid-template-columns:1fr;} }
.service-item{
  background:var(--white);
  padding:clamp(24px, 3vw, 34px);
  transition:background .2s var(--ease);
  position:relative;
}
.service-item::after{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--amber-deep);
  transform:scaleY(0); transform-origin:top;
  transition:transform .28s var(--ease);
}
.service-item:hover{background:var(--paper);}
.service-item:hover::after{transform:scaleY(1);}
.service-item .icon{width:32px; height:32px; margin-bottom:var(--s-4); display:block;}
.service-item .n{
  font-family:var(--font-mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.09em;
  color:var(--amber-deep);
  margin-bottom:var(--s-3);
  display:block;
}
.service-item h3{font-size:var(--t-h3); margin-bottom:var(--s-2); font-weight:600;}
.service-item p{color:var(--ink-soft); font-size:15px;}

/* --------------------------------------------------------------------------
   10. GUIA GRATUITO
   -------------------------------------------------------------------------- */
.guide-section{
  background:var(--paper-alt);
  background-image:radial-gradient(ellipse 70% 60% at 20% 0%, rgba(166,116,44,.07), transparent 70%);
}
.guide-box{
  display:flex;
  gap:clamp(20px, 3vw, 32px);
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  padding:clamp(24px, 3vw, 34px);
  box-shadow:var(--shadow);
}
@media (max-width: 780px){ .guide-box{flex-direction:column; align-items:flex-start;} }
.guide-icon{
  width:58px; height:58px;
  flex-shrink:0;
  border:1.5px solid var(--amber-deep);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  background:rgba(166,116,44,.06);
}
.guide-icon svg{width:26px; height:26px;}
.guide-text h3{font-size:var(--t-h3); margin-bottom:var(--s-2); font-weight:600;}
.guide-text p{color:var(--ink-soft); font-size:15px; margin-bottom:0;}
.guide-actions{
  display:flex; flex-direction:column; gap:var(--s-3);
  flex-shrink:0; margin-left:auto;
}
@media (max-width: 780px){ .guide-actions{margin-left:0; width:100%;} }

.btn-download{
  font-family:var(--font-mono);
  font-size:13px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  padding:15px 24px;
  border-radius:var(--radius);
  text-align:center;
  white-space:nowrap;
  box-shadow:var(--shadow);
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-download:hover{
  background:#2C3A36;
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}

.updates-optin{
  margin-top:var(--s-5);
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
}
.updates-optin p{font-size:13px; color:var(--slate); margin-bottom:var(--s-3);}
.updates-form{display:flex; gap:var(--s-2); flex-wrap:wrap;}
.updates-form input[type="email"]{
  flex:1; min-width:190px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--paper);
  padding:12px 14px;
  font-family:var(--font-sans);
  font-size:16px;                 /* 16px evita o zoom automático do iOS */
  color:var(--ink);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.updates-form input[type="email"]:focus{
  outline:none;
  border-color:var(--amber-deep);
  box-shadow:0 0 0 3px rgba(124,85,32,.15);
}
.updates-form button{
  font-family:var(--font-mono);
  font-size:12.5px;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  background:transparent;
  color:var(--ink);
  padding:12px 20px;
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.updates-form button:hover{background:var(--ink); color:var(--paper);}
.updates-status{font-size:12.5px; margin-top:var(--s-2); display:none;}

/* --------------------------------------------------------------------------
   11. PERFIS E "SOBRE"
   -------------------------------------------------------------------------- */
.about-grid{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:clamp(28px, 4vw, 52px);
  align-items:start;
}
@media (max-width: 820px){ .about-grid{grid-template-columns:1fr;} }
.about-grid p{color:var(--ink-soft); margin-bottom:var(--s-4);}

.about-card{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  padding:var(--s-5);
  box-shadow:var(--shadow-sm);
}
.about-card .mono{font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); display:block; margin-bottom:var(--s-1);}
.about-card .oab{font-size:16px; color:var(--ink); font-weight:600;}

.profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-5);
  margin-bottom:var(--s-5);
}
@media (max-width: 480px){ .profile-grid{grid-template-columns:1fr;} }
.profile-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--s-5) var(--s-4);
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.profile-card:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.profile-photo{
  width:104px; height:104px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto var(--s-4);
  display:block;
  border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--line), var(--shadow-sm);
}
.profile-placeholder{
  width:104px; height:104px;
  border-radius:50%;
  margin:0 auto var(--s-4);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #2A3835, var(--ink));
  color:var(--amber-light);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:26px;
  letter-spacing:0.04em;
  border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--line), var(--shadow-sm);
}
.profile-card .name{font-weight:600; font-size:16px; margin-bottom:var(--s-1); color:var(--ink);}
.profile-card .mono{font-size:11.5px; color:var(--slate); display:block;}

/* --------------------------------------------------------------------------
   12. FORMULÁRIO (seção escura)
   -------------------------------------------------------------------------- */
.form-section{
  background-color:var(--ink);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(166,116,44,.13), transparent 65%),
    radial-gradient(ellipse 50% 50% at 95% 100%, rgba(122,37,48,.15), transparent 70%);
  color:var(--paper);
  border-bottom:none;
}
.form-section .eyebrow{color:var(--amber-light);}
.form-section .section-head h2{color:var(--paper);}
.form-section .section-head p{color:#BFC7C3;}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-5) var(--s-6);
  max-width:780px;
}
@media (max-width: 660px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:var(--s-2);}
.field.full{grid-column:1 / -1;}
.field label{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.09em;
  color:#BFC7C3;
}
.field input, .field textarea{
  background:rgba(255,255,255,.045);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:16px;                 /* 16px evita o zoom automático do iOS */
  padding:13px 14px;
  outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.field input:hover, .field textarea:hover{border-color:#8B9793;}
.field input:focus, .field textarea:focus{
  border-color:var(--amber-light);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(210,162,94,.2);
}
.field input::placeholder, .field textarea::placeholder{color:#96A09C;}
.field textarea{resize:vertical; min-height:110px; line-height:1.55;}
/* o preenchimento automático do Chrome não pode voltar a fundo branco */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--paper);
  -webkit-box-shadow:0 0 0 1000px var(--ink-2) inset;
  caret-color:var(--paper);
}

.consent{
  display:flex; gap:var(--s-3); align-items:flex-start;
  font-size:13.5px; color:#AEB6B2;
  margin-top:var(--s-2);
  line-height:1.55;
}
.consent input[type="checkbox"]{
  margin-top:3px;
  width:17px; height:17px;
  accent-color:var(--amber-btn);
  flex-shrink:0;
  cursor:pointer;
}
.consent a{color:var(--amber-light); text-decoration:underline; text-underline-offset:2px;}
.consent a:hover{color:var(--amber-btn-h);}

.form-submit{
  margin-top:var(--s-7);
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:0.03em;
  background:var(--amber-btn);     /* 5.55:1 com o texto — passa em AA */
  color:var(--ink);
  font-weight:500;
  border:none;
  border-radius:var(--radius);
  padding:16px 34px;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.form-submit:hover:not(:disabled){
  background:var(--amber-btn-h);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.form-submit:active:not(:disabled){transform:translateY(0);}
.form-submit:disabled{opacity:.6; cursor:progress; transform:none;}

/* --------------------------------------------------------------------------
   13. RODAPÉ
   -------------------------------------------------------------------------- */
footer{padding:var(--s-9) 0 var(--s-7); background:var(--paper-alt);}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:var(--s-7);
  font-size:13.5px;
  color:var(--slate);
}
@media (max-width: 760px){ .footer-grid{grid-template-columns:1fr; gap:var(--s-6);} }
.footer-grid h3{
  font-family:var(--font-mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--ink-soft);
  margin-bottom:var(--s-3);
  padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line);
}
.footer-grid p{margin-bottom:var(--s-1);}
.footer-grid a{
  display:inline-block;
  text-decoration:none;
  color:var(--amber-deep);
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease);
}
.footer-grid a:hover{border-bottom-color:var(--amber-deep);}
.footer-legal{
  margin-top:var(--s-8);
  padding-top:var(--s-5);
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--slate);
  line-height:1.75;
  max-width:900px;
}
.footer-legal a{color:var(--slate); text-decoration:underline; text-underline-offset:2px;}

/* --------------------------------------------------------------------------
   14. CARTÕES DE ÁREA (institucional)
   -------------------------------------------------------------------------- */
.areas-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}
@media (max-width: 860px){ .areas-grid{grid-template-columns:1fr;} }
.area-card{
  background:var(--white);
  padding:clamp(26px, 3vw, 36px) clamp(22px, 2.5vw, 32px);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  position:relative;
  transition:background .2s var(--ease);
}
.area-card::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--amber-deep);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.area-card:hover{background:var(--paper);}
.area-card:hover::after{transform:scaleX(1);}
.area-card .icon{width:34px; height:34px; margin-bottom:var(--s-5);}
.area-card h3{font-size:var(--t-lg); margin-bottom:var(--s-3); font-weight:600; line-height:1.25;}
.area-card p{color:var(--ink-soft); font-size:15px; margin-bottom:var(--s-5); flex-grow:1;}
.area-card .seta{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--amber-deep);
  display:inline-flex; align-items:center; gap:6px;
  transition:gap .22s var(--ease);
}
.area-card:hover .seta{gap:11px;}

/* --------------------------------------------------------------------------
   15. DESTAQUE E LISTAS
   -------------------------------------------------------------------------- */
.destaque{
  border-left:3px solid var(--amber-deep);
  background:linear-gradient(90deg, rgba(166,116,44,.06), transparent 65%);
  padding:var(--s-4) var(--s-5);
  margin:var(--s-5) 0;
  color:var(--ink-soft);
  font-size:15px;
  border-radius:0 var(--radius) var(--radius) 0;
}

.lista-itens{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
@media (max-width: 720px){ .lista-itens{grid-template-columns:1fr;} }
.lista-itens li{
  background:var(--white);
  padding:var(--s-5);
  font-size:15px;
  color:var(--ink-soft);
}
.lista-itens li b{
  color:var(--ink); display:block; margin-bottom:var(--s-1);
  font-size:13px; font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:0.06em;
}

/* --------------------------------------------------------------------------
   16. PRAZOS
   -------------------------------------------------------------------------- */
.prazos-section{
  background:var(--paper-alt);
  background-image:radial-gradient(ellipse 60% 70% at 85% 10%, rgba(122,37,48,.06), transparent 70%);
}
.prazos-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5);}
@media (max-width: 760px){ .prazos-grid{grid-template-columns:1fr;} }
.prazo-card{
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--amber-deep);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:clamp(24px, 3vw, 32px);
  display:flex;
  gap:var(--s-5);
  align-items:flex-start;
  box-shadow:var(--shadow);
}
.prazo-numero{
  font-family:var(--font-mono);
  font-size:clamp(36px, 4vw, 46px);
  line-height:1;
  color:var(--amber-deep);
  font-weight:500;
  flex-shrink:0;
  text-align:center;
}
.prazo-numero span{
  display:block; font-size:12px;
  text-transform:uppercase; letter-spacing:0.09em;
  margin-top:var(--s-2); color:var(--slate);
}
.prazo-card h3{font-size:var(--t-h3); margin-bottom:var(--s-2); font-weight:600;}
.prazo-card p{color:var(--ink-soft); font-size:14.5px; margin-bottom:var(--s-3);}
.prazo-card .obs{
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--oxblood);
  display:block;
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
.prazos-aviso{
  margin-top:var(--s-6);
  font-size:14.5px;
  color:var(--ink-soft);
  border-left:3px solid var(--oxblood);
  padding-left:var(--s-4);
  line-height:1.65;
}

/* --------------------------------------------------------------------------
   17. PERGUNTAS FREQUENTES
   -------------------------------------------------------------------------- */
.faq-lista{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--shadow-sm);
}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:none;}
.faq-item summary{
  cursor:pointer;
  padding:var(--s-5) 52px var(--s-5) var(--s-5);
  font-weight:600;
  font-size:16px;
  color:var(--ink);
  list-style:none;
  position:relative;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'';
  position:absolute;
  right:var(--s-5); top:50%;
  width:11px; height:11px;
  border-right:1.8px solid var(--amber-deep);
  border-bottom:1.8px solid var(--amber-deep);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .26s var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
.faq-item summary:hover{background:var(--paper); color:var(--amber-deep);}
.faq-item[open] summary{color:var(--amber-deep);}
.faq-item .resposta{
  padding:0 52px var(--s-5) var(--s-5);
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.68;
}
.faq-item[open] .resposta{animation:faq-in .28s var(--ease);}
@keyframes faq-in{
  from{opacity:0; transform:translateY(-4px);}
  to{opacity:1; transform:none;}
}
@media (max-width: 560px){
  .faq-item summary{padding-right:44px;}
  .faq-item .resposta{padding-right:var(--s-5);}
}

/* --------------------------------------------------------------------------
   18. FOCO, MOVIMENTO E IMPRESSÃO
   -------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--amber-deep);
  outline-offset:3px;
  border-radius:2px;
}
.form-section :focus-visible{outline-color:var(--amber-light);}

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

@media print{
  header, .wa-float, .nav-toggle, .form-section, .guide-actions, .skip-link{display:none !important;}
  body{background:#fff; color:#000; font-size:11pt;}
  section{padding:16pt 0; border-bottom:1px solid #ccc; break-inside:avoid;}
  .timeline{flex-direction:column;}
  .fact-box, .prazo-card, .service-grid, .areas-grid, .guide-box{box-shadow:none; break-inside:avoid;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8pt; color:#555;}
  .faq-item .resposta{display:block !important;}
}