/* ============================================================
   ILANNA FERRAZ ADVOCACIA — Landing Page
   Design system: "maison do direito" — alta-costura editorial.
   Blocos: 1) Tokens · 2) Reset/base · 3) Tipografia · 4) Layout
           5) Componentes · 6) Seções · 7) Responsivo · 8) Motion
   ============================================================ */

/* ============ 1 · TOKENS (espelham o guia de identidade) ============ */
:root{
  --ink:#0a0a0a;          /* noir — texto/títulos, fundos escuros */
  --ink-soft:#1a1a1a;
  --paper:#f6f3ee;        /* off-white quente — fundo padrão */
  --paper-2:#efeae1;      /* creme mais fundo — seções alternadas */
  --gold:#a88a4e;         /* ouro discreto — fios e detalhes, nunca dominante */
  --gold-soft:#c9a876;
  --mute:#6b6560;         /* labels, metadados */
  --rule:#d8d2c6;         /* fios sutis */

  /* tipografia */
  --f-display:"Italiana", Georgia, serif;
  --f-serif:"Cormorant Garamond", Georgia, serif;
  --f-didone:"Playfair Display", Georgia, serif;
  --f-sans:"Jost", "Helvetica Neue", Arial, sans-serif;

  /* ritmo */
  --wrap:1200px;
  --pad-x:clamp(22px, 6vw, 96px);
  --pad-y:clamp(72px, 11vw, 150px);
}

/* ============ 2 · RESET / BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-serif);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga","kern";
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* foco acessível e consistente */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ============ 3 · TIPOGRAFIA ============ */
.kicker{
  font-family:var(--f-sans);
  font-weight:300;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:26px;
}
.kicker--light{color:var(--gold-soft)}

.h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(32px, 5.2vw, 64px);
  line-height:1.04;
  letter-spacing:.02em;
  margin-bottom:28px;
}
.h2--light{color:var(--paper)}

.lead{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(19px, 2.4vw, 26px);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:54ch;
  margin-bottom:22px;
}
.body{
  font-size:clamp(16px, 1.9vw, 18px);
  line-height:1.7;
  color:var(--ink-soft);
  max-width:60ch;
  margin-bottom:18px;
}

/* ============ 4 · LAYOUT ============ */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
.section{padding-top:var(--pad-y);padding-bottom:var(--pad-y);position:relative}
.section--paper{background:var(--paper)}
.section--cream{background:var(--paper-2)}
.section--noir{background:var(--ink);color:var(--paper)}

.sec-head{margin-bottom:clamp(40px,6vw,72px);max-width:62ch}

.two-col{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(40px,6vw,88px);
  align-items:start;
}

/* moldura de fio fino (hero / contato) */
.frame{
  position:absolute;
  inset:clamp(16px,3vw,34px);
  border:1px solid var(--rule);
  pointer-events:none;
}
.section--noir .frame{border-color:rgba(246,243,238,.18)}

/* losango 4px a 45° — marcador da casa */
.dia{
  display:inline-block;
  width:5px;height:5px;
  background:var(--gold);
  transform:rotate(45deg);
  flex:0 0 auto;
}

/* fio dourado curto */
.hr-gold{display:block;width:34px;height:1px;background:var(--gold);margin:22px 0}

/* ============ 5 · COMPONENTES ============ */

/* —— Wordmark (Variação I, composto em HTML) —— */
.site-header{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  padding:clamp(26px,4vw,40px) var(--pad-x) 0;
  background:var(--paper);
}
.wordmark{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
  color:var(--ink);
}
.wordmark__name{
  font-family:var(--f-display);
  font-size:clamp(22px,3vw,30px);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.wordmark__rule{
  display:flex;align-items:center;gap:11px;
  margin:9px 0;
}
.wordmark__rule i{display:inline-block;width:26px;height:1px;background:currentColor}
.wordmark__rule b{display:inline-block;width:4px;height:4px;background:currentColor;transform:rotate(45deg)}
.wordmark__tag{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(12px,1.6vw,15px);
  letter-spacing:.34em;
  text-transform:uppercase;
}
.wordmark--light{color:var(--paper)}

/* —— Botões —— */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-sans);
  font-weight:400;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:18px 34px;
  border:1px solid var(--ink);
  transition:background .35s ease, color .35s ease, transform .35s ease, border-color .35s ease;
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn--lg{padding:22px 44px;font-size:13.5px}

/* botões em fundo noir */
.section--noir .btn--solid{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.section--noir .btn--solid:hover{background:transparent;color:var(--gold)}
.section--noir .btn--ghost{border-color:var(--paper);color:var(--paper)}
.section--noir .btn--ghost:hover{background:var(--paper);color:var(--ink)}

/* ============ 6 · SEÇÕES ============ */

/* —— 1 · Hero —— */
.hero{
  padding-top:clamp(56px,8vw,96px);
  padding-bottom:var(--pad-y);
  position:relative;
}
.hero__inner{position:relative;text-align:center;padding-top:clamp(40px,7vw,80px);padding-bottom:clamp(40px,7vw,80px)}
.hero__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(34px, 6.4vw, 78px);
  line-height:1.06;
  letter-spacing:.012em;
  max-width:18ch;
  margin:0 auto 30px;
}
.hero__lead{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(20px,2.8vw,30px);
  line-height:1.4;
  color:var(--gold);
  margin:0 auto 34px;
  max-width:30ch;
}
.hero__sub{
  font-size:clamp(16px,1.9vw,19px);
  line-height:1.7;
  color:var(--ink-soft);
  max-width:60ch;
  margin:0 auto 44px;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* —— 2 · Quem é (card de credenciais) —— */
.col-card{position:relative}
.card{
  border:1px solid var(--rule);
  background:var(--paper);
  padding:clamp(30px,4vw,44px);
  text-align:center;
  position:relative;
}
.card::before{
  /* cantos de moldura interna sutil */
  content:"";position:absolute;inset:9px;border:1px solid var(--rule);pointer-events:none;
}
.card__seal{margin:0 auto 22px;width:120px;height:120px}
.card__name{font-family:var(--f-display);font-size:26px;letter-spacing:.04em}
.card__role{font-family:var(--f-serif);font-style:italic;color:var(--mute);font-size:16px;margin-top:4px}
.card .hr-gold{margin-left:auto;margin-right:auto}
.card__list{display:grid;gap:16px;text-align:left;margin-top:6px}
.card__list dt{
  font-family:var(--f-sans);font-weight:300;font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:3px;
}
.card__list dd{font-family:var(--f-serif);font-size:17px;color:var(--ink-soft)}

/* —— Formação & Trajetória (currículo) —— */
.formacao{margin-top:clamp(48px,7vw,84px)}
.formacao__head{
  font-family:var(--f-display);font-size:clamp(22px,3vw,30px);
  letter-spacing:.02em;display:flex;align-items:center;gap:14px;
  margin-bottom:clamp(28px,4vw,44px);
}
.formacao__head .dia{width:7px;height:7px}

.trilha{
  --pad:clamp(24px,3vw,36px);
  list-style:none;display:grid;gap:clamp(22px,3vw,32px);
  border-left:1px solid var(--gold);padding-left:var(--pad);max-width:70ch;
}
.trilha__item{position:relative}
.trilha__node{
  position:absolute;left:calc(-1 * var(--pad) - 3px);top:.5em;
  width:7px;height:7px;background:var(--gold);transform:rotate(45deg);
}
.trilha__when{
  font-family:var(--f-sans);font-weight:300;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--mute);margin-bottom:4px;
}
.trilha__what{
  font-family:var(--f-serif);font-size:clamp(16px,1.9vw,18px);
  line-height:1.5;color:var(--ink-soft);
}

.curriculo-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:clamp(32px,4vw,48px);
  font-family:var(--f-sans);font-weight:300;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  padding-bottom:4px;border-bottom:1px solid var(--gold);
  transition:color .25s,border-color .25s,gap .25s;
}
.curriculo-cta:hover{color:var(--gold);gap:12px}
.curriculo-cta:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* —— 3 · Áreas —— */
.areas{border-top:1px solid var(--rule);max-width:74ch}
.areas li{
  display:flex;align-items:center;gap:18px;
  padding:22px 4px;
  border-bottom:1px solid var(--rule);
  font-size:clamp(17px,2.1vw,21px);
  font-family:var(--f-serif);
  color:var(--ink-soft);
}
.areas__foot{
  margin-top:34px;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(18px,2.2vw,22px);
  color:var(--ink);
  max-width:52ch;
}

/* —— 4 · Como funciona (etapas) —— */
.steps{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:8px}
.step{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:clamp(20px,4vw,48px);
  align-items:baseline;
  padding:clamp(26px,3.6vw,40px) 4px;
  border-bottom:1px solid var(--rule);
}
.step__num{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(40px,5vw,58px);
  color:var(--gold);
  line-height:1;
}
.step__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(20px,2.6vw,28px);
  letter-spacing:.02em;
  margin-bottom:8px;
}
.step__body p{font-size:clamp(16px,1.9vw,18px);color:var(--ink-soft);max-width:54ch}

.note{
  margin-top:40px;
  border-left:1px solid var(--gold);
  padding:6px 0 6px 26px;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(16px,2vw,19px);
  color:var(--ink-soft);
  max-width:62ch;
}
.note__label{
  display:block;
  font-family:var(--f-sans);
  font-style:normal;
  font-weight:400;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}

/* —— 5 · Diferencial (noir) —— */
.dif{text-align:center;max-width:68ch;margin:0 auto}
.dif__mark{
  display:inline-block;
  font-family:var(--f-display);
  font-size:clamp(56px,9vw,104px);
  letter-spacing:.04em;
  line-height:.9;
  color:var(--paper);
  margin-bottom:34px;
}
.dif__mark i{font-family:var(--f-serif);font-style:italic;font-weight:300;color:var(--gold-soft)}
.dif__lead{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(20px,2.6vw,28px);
  line-height:1.5;
  color:var(--paper);
  margin:0 auto 20px;
  max-width:46ch;
  opacity:.92;
}

/* —— 6 · FAQ —— */
.faq{border-top:1px solid var(--rule);max-width:80ch}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:none;border:0;cursor:pointer;
  text-align:left;
  padding:28px 4px;
  font-family:var(--f-serif);
  font-size:clamp(18px,2.2vw,23px);
  color:var(--ink);
  line-height:1.35;
}
.faq__q:hover{color:var(--ink-soft)}
.faq__icon{
  position:relative;flex:0 0 auto;
  width:16px;height:16px;margin-top:6px;
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:50%;
  width:14px;height:1px;background:var(--gold);
  transform:translate(-50%,-50%);
  transition:transform .35s ease;
}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{
  overflow:hidden;
}
.faq__a p{
  padding:0 4px 30px;
  font-size:clamp(16px,1.9vw,18px);
  line-height:1.7;
  color:var(--ink-soft);
  max-width:70ch;
}

/* —— 7 · Contato —— */
.contact__inner{position:relative;text-align:center;padding:clamp(40px,7vw,80px) 0}
.contact__inner .lead{margin-left:auto;margin-right:auto}
.contact__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:8px}
.contact__tel{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:34px;
  font-family:var(--f-sans);
  font-weight:300;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
}
.contact__tel:hover{color:var(--gold)}

/* —— 8 · Rodapé —— */
.footer{padding-top:clamp(64px,8vw,96px);padding-bottom:48px}
.footer__brand{text-align:center;padding-bottom:clamp(40px,6vw,64px);border-bottom:1px solid rgba(246,243,238,.16)}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,56px);
  padding:clamp(40px,5vw,56px) 0;
}
.footer__label{
  font-family:var(--f-sans);font-weight:300;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px;
}
.footer__col p{font-family:var(--f-sans);font-weight:300;font-size:14px;line-height:1.9;color:rgba(246,243,238,.82);letter-spacing:.02em}
.footer__col a:hover{color:var(--gold-soft)}
.footer__legal{
  border-top:1px solid rgba(246,243,238,.16);
  padding-top:32px;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:14px;
  line-height:1.7;
  color:rgba(246,243,238,.6);
  max-width:80ch;
}
.footer__mark{
  margin-top:32px;text-align:center;
  font-family:var(--f-display);font-size:16px;letter-spacing:.4em;color:rgba(246,243,238,.55);
}
.footer__mark i{font-family:var(--f-serif);font-style:italic;color:var(--gold-soft)}

/* —— Botão flutuante WhatsApp —— */
.wa-float{
  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:clamp(16px,3vw,28px);
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ink);
  color:var(--paper);
  padding:14px 20px;
  border:1px solid var(--gold);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
  font-family:var(--f-sans);
  font-weight:400;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .35s ease,color .35s ease,transform .35s ease;
}
.wa-float:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.wa-float svg{flex:0 0 auto}

/* ============ MÍDIA · HERO (still desktop / vídeo mobile) ============ */
.hero{position:relative;overflow:hidden}
.hero__inner{position:relative;z-index:1}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__still,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.hero__still img{width:100%;height:100%;object-fit:cover;display:block}
.hero__video{display:none}            /* ativado só no mobile via swap abaixo */
/* Véu de papel: garante contraste AA do título ink sobre o mármore claro */
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(246,243,238,.82) 0%,
    rgba(246,243,238,.74) 42%,
    rgba(246,243,238,.86) 100%);
}

/* ============ MÍDIA · FAIXAS FULL-BLEED ============ */
.band{
  position:relative;
  margin:0;
  width:100vw;
  margin-left:calc(50% - 50vw);
  aspect-ratio:21/9;
  overflow:hidden;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--paper-2);
}
.band picture{position:absolute;inset:0}
.band img{width:100%;height:100%;object-fit:cover;display:block}
/* Tratamento leve: gradação sutil p/ casar com --paper/--ink (sem filtro pesado) */
.band__overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,10,.04) 0%,
    rgba(10,10,10,0) 30%,
    rgba(10,10,10,.18) 100%);
}
/* Acento de marca (apenas na faixa da recepção) */
.band__mark{
  position:absolute;left:clamp(20px,4vw,52px);bottom:clamp(20px,4vw,52px);
  width:clamp(44px,6vw,60px);height:auto;opacity:.92;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
.band__mark img{display:block;width:100%;height:auto}

/* ============ 7 · RESPONSIVO (breakpoint principal ~900px) ============ */
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .col-card{max-width:440px;margin:0 auto;width:100%}
  .footer__cols{grid-template-columns:1fr;gap:32px}
  .step{grid-template-columns:64px 1fr}
  /* Hero: troca still → vídeo vertical no mobile */
  .hero__still{display:none}
  .hero__video{display:block}
  /* Faixas menos cropadas no mobile (mais próximas do 3:2 original) */
  .band{aspect-ratio:16/9}
}
@media (max-width:560px){
  .hero__cta .btn,.contact__cta .btn{width:100%}
  .curriculo-cta{display:flex;justify-content:center}
  .wa-float__txt{display:none}
  .wa-float{padding:14px;border-radius:50%}
  .band{aspect-ratio:3/2}
}

/* ============ 8 · MOTION (reveals + reduced-motion) ============ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.wa-float,.faq__icon::before,.faq__icon::after{transition:none}
  /* Sem vídeo em movimento: mostra o still/poster também no mobile.
     (O JS não dá play; aqui garantimos o fallback visual mesmo se o
     vídeo carregar o poster.) */
  .hero__still{display:block!important}
  .hero__video{display:none!important}
}