/* Home page specific layout and components. */
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Paleta oficial Inglaterra Antecipa
     7694C #304560 (navy) · 1675C #A6402A (terracota) · 2471C #998376 (taupe) · 426C #1E1E1E (quase preto) */
  --deep:#304560;
  --ink:#1E1E1E;
  --text:#33302D;
  --muted:#6B6560;
  --line:#E7E2DF;
  --line-2:#D2C7C1;
  --bg:#FFFFFF;
  --soft:#F7F5F3;
  --brand:#304560;
  --brand-hover:#24354A;
  --accent:#A6402A;        /* terracota — sobre fundos claros */
  --accent-ink:#A6402A;    /* mesma cor, já legível sobre branco (6,2:1) */
  --taupe:#998376;
  --r:8px;
  --maxw:1140px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;letter-spacing:-.022em;line-height:1.18}

h1{font-size:clamp(2.1rem,4.6vw,3.25rem);font-weight:700;letter-spacing:-.035em}

h2{font-size:clamp(1.5rem,2.7vw,2rem);font-weight:600}

h3{font-size:1.06rem;font-weight:600;letter-spacing:-.012em}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 16px;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r);font-size:.95rem;font-weight:600;
  border:1px solid var(--brand);background:var(--brand);color:#fff;cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
  white-space:nowrap;
}

.btn:active{transform:translateY(0)}

.btn-light{background:#fff;color:var(--deep);border-color:#fff}

.btn-light:hover{background:#EDE8E4;color:var(--deep)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:70px;display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),height .3s var(--ease);
}

.nav .lnk:hover::after,.nav .lnk.is-active::after{right:0}

.site-header.scrolled .nav .lnk:hover{color:var(--ink)}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:101;transition:width .1s linear}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;color:#fff;overflow:hidden;min-height:640px;display:flex;align-items:flex-end}

.hero-bg{position:absolute;inset:0;z-index:0;background:var(--deep)}

.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:78% center;display:block}

/* Sombreado sobre a foto: escurece o lado do texto e a base, garantindo leitura
   sem esconder o ambiente do lado direito da imagem. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,  rgba(20,29,38,.94) 0%, rgba(20,29,38,.72) 32%, rgba(20,29,38,.18) 60%, rgba(20,29,38,0) 78%),
    linear-gradient(to top, rgba(20,29,38,.85) 0%, rgba(20,29,38,0) 46%);
}

.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 0);
  background-size:26px 26px;opacity:.14;
  mask-image:linear-gradient(to right,#000 0%,transparent 55%);
  -webkit-mask-image:linear-gradient(to right,#000 0%,transparent 55%);
}

.hero-grid{position:relative;z-index:2;padding:150px 0 84px;width:100%}

.hero>.wrap{width:100%}

.hero-copy{max-width:34rem}

.hero h1{color:#fff}

.hero-lede{font-size:1.14rem;color:#E4DED9;max-width:30rem;margin-bottom:30px}

.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}

@media(max-width:900px) and (min-width:641px){
  .hero{min-height:560px}
  .hero-bg img{object-position:82% center}
  .hero-bg::after{
    background:
      linear-gradient(to right, rgba(20,29,38,.94) 0%, rgba(20,29,38,.8) 55%, rgba(20,29,38,.5) 100%),
      linear-gradient(to top, rgba(20,29,38,.9) 0%, rgba(20,29,38,.15) 55%, rgba(20,29,38,0) 100%);
  }
  .hero-grid{padding:126px 0 56px}
}

/* Telas pequenas: sem a foto. Em vez de competir por espaço com um recorte
   estreito da imagem, a capa no mobile é só o bloco de texto sobre o navy
   sólido da marca, com a mesma trama de pontos usada nas outras faixas
   escuras do site. A foto continua no tablet e no desktop, onde tem espaço
   de sobra para funcionar bem. */
@media(max-width:640px){
  .hero{display:block;min-height:0;padding:104px 0 44px;background:var(--deep)}
  .hero-bg{display:none}
  .hero::before{
    display:block;opacity:.16;
    mask-image:none;-webkit-mask-image:none;
  }
  .hero-grid{padding:0}
  .hero-copy{max-width:none}
}

/* Faixa de números — atravessa a divisa escuro/claro */
.stats-band{position:relative;z-index:5;margin-top:-46px}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 44px -26px rgba(14,21,32,.4);overflow:hidden;
}

.stats div{padding:24px;border-right:1px solid var(--line)}

.stats div:last-child{border-right:0}

.stats b{display:block;font-size:1.85rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.1}

.stats small{display:block;font-size:.84rem;color:var(--muted);margin-top:6px;line-height:1.45}

@media(max-width:780px){
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2n){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stats b{font-size:1.5rem}
}

/* ============================================================
   SEÇÕES
   ============================================================ */
section{padding:88px 0;position:relative}

.sec-head{max-width:44rem;margin-bottom:38px}

.sec-head p{font-size:1.06rem;margin-bottom:0}

.answer{font-size:1.04rem;max-width:60ch}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px}

@media(max-width:880px){section{padding:64px 0}.grid-2{grid-template-columns:1fr;gap:36px}}

/* ============================================================
   DIAGRAMA DE FLUXO
   ============================================================ */
.flow{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:34px 30px;
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center;margin-top:36px;
}

.flow-node{text-align:left}

.flow-node .ico{
  width:46px;height:46px;margin:0 0 14px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--brand);background:var(--soft);
}

.flow-node h3{font-size:.98rem;margin-bottom:.3em}

.flow-node p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.5}

.flow-arrow{color:var(--accent);display:flex;align-items:center;justify-content:center}

.flow-arrow svg{width:44px;height:12px}

@media(max-width:880px){
  .flow{grid-template-columns:1fr;gap:22px;padding:28px 22px}
  .flow-arrow{transform:rotate(90deg);height:22px}
}

/* ============================================================
   BARRA 80 / 20
   ============================================================ */
.split{margin-top:38px;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;background:#fff}

.split-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;flex-wrap:wrap}

.split-head h3{margin:0;font-size:1rem}

.split-head span{font-size:.86rem;color:var(--muted)}

.split-bar{height:16px;border-radius:4px;background:var(--soft);border:1px solid var(--line);overflow:hidden;display:flex}

.split-bar i{display:block;height:100%;width:0;transition:width 1.1s var(--ease)}

.split-bar .p80{background:var(--brand)}

.split-bar .p20{background:repeating-linear-gradient(45deg,var(--line-2),var(--line-2) 3px,#fff 3px,#fff 6px)}

.split.is-in .split-bar .p80{width:80%}

.split.is-in .split-bar .p20{width:20%}

.split-legend{display:flex;gap:26px;margin-top:14px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}

.split-legend b{color:var(--ink);font-weight:600}

.split-legend span{display:flex;align-items:center;gap:8px}

.split-legend i{width:10px;height:10px;border-radius:2px;flex:none}

.split-legend .k1{background:var(--brand)}

.split-legend .k2{background:var(--line-2)}

/* ============================================================
   FICHA TÉCNICA
   ============================================================ */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:0}

.spec > div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}

.spec dt{color:var(--muted);font-size:.93rem;margin:0}

.spec dd{margin:0;color:var(--ink);font-weight:600;font-size:.95rem;text-align:right}

@media(max-width:780px){.spec{grid-template-columns:1fr}}

.more{margin-top:26px;border:1px solid var(--line);border-radius:var(--r);background:#fff}

.more > summary{
  cursor:pointer;list-style:none;padding:15px 20px;font-weight:600;color:var(--brand);
  font-size:.94rem;display:flex;align-items:center;gap:10px;
}

.more > summary::-webkit-details-marker{display:none}

.more > summary::before{content:"+";font-size:1.15rem;font-weight:400;color:var(--muted)}

.more[open] > summary::before{content:"–"}

.more .more-body{padding:0 20px 20px}

/* ============================================================
   PASSOS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:36px}

.step{background:#fff;padding:26px 24px 28px;transition:background .22s var(--ease)}

.step:hover{background:var(--soft)}

.step .n{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--brand);font-size:.75rem;font-weight:700;
  font-variant-numeric:tabular-nums;margin-bottom:16px;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}

.step:hover .n{border-color:var(--accent);color:var(--accent-ink)}

.step h3{margin-bottom:.35em}

.step p{margin:0;font-size:.93rem;color:var(--muted)}

@media(min-width:881px) and (max-width:1040px){.steps{grid-template-columns:repeat(2,1fr)}}

@media(max-width:880px){.steps{grid-template-columns:1fr}}

/* ============================================================
   LISTAS
   ============================================================ */
ul.check{list-style:none;padding:0;margin:20px 0 0}

/* ============================================================
   CARDS
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}

.card{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:#fff;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}

.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -22px rgba(14,21,32,.4);border-color:var(--line-2)}

.card .ico{width:38px;height:38px;border-radius:9px;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brand);margin-bottom:16px}

.card h3{font-size:1rem}

.card p{margin:0;font-size:.93rem;color:var(--muted)}

@media(max-width:880px){.cards{grid-template-columns:1fr}}

.notice{
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);
  padding:22px 24px;background:var(--soft);margin-top:26px;display:flex;gap:16px;align-items:flex-start;
}

.notice svg{flex:none;color:var(--accent-ink);margin-top:2px}

.notice h3{font-size:.99rem;margin-bottom:.3em}

.notice p{margin:0;font-size:.94rem}

/* ============================================================
   TABELA
   ============================================================ */
.table-wrap{overflow-x:auto;margin-top:34px;border:1px solid var(--line);border-radius:var(--r);background:#fff}

table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:660px}

caption{text-align:left;font-size:.85rem;color:var(--muted);padding:16px 20px 0}

th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}

tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;background:var(--soft);border-bottom:1px solid var(--line-2)}

tbody th{font-weight:500;color:var(--text);width:26%}

.col-hi{background:rgba(166,64,42,.06);box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent)}

thead .col-hi{color:var(--accent-ink);background:rgba(166,64,42,.12)}

td.col-hi{font-weight:600;color:var(--ink)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-filters{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 26px}

.chip{
  padding:8px 16px;border-radius:100px;border:1px solid var(--line-2);background:#fff;
  font-size:.87rem;font-weight:500;color:var(--text);cursor:pointer;font-family:inherit;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}

.chip:hover{border-color:var(--brand);color:var(--brand)}

.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

.faq{border-top:1px solid var(--line)}

.faq details[hidden]{display:none}

.faq summary{
  cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-weight:600;color:var(--ink);font-size:1.01rem;transition:color .18s var(--ease);
}

.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease),border-color .25s var(--ease);
}

/* ============================================================
   FAIXA ESCURA
   ============================================================ */
.band{background:var(--deep);color:#fff;position:relative;overflow:hidden}

.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.18) 1px, transparent 0);
  background-size:26px 26px;opacity:.14;
}

.band .wrap{position:relative;z-index:2}

.band h2{color:#fff}

.band p{color:#C9C1BB}

.band-inner{display:flex;gap:36px;align-items:center;justify-content:space-between;flex-wrap:wrap}

.band-inner > div{max-width:46ch}

.band-inner p{margin:0}

/* ============================================================
   CONTATO
   ============================================================ */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}

.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.contact-side{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:#fff}

.contact-side h3{font-size:.95rem;margin-bottom:6px}

@media(max-width:880px){.contact{grid-template-columns:1fr;gap:30px}}

/* ============================================================
   RODAPÉ
   ============================================================ */
footer{padding:52px 0 64px;font-size:.87rem;color:var(--muted);border-top:1px solid var(--line)}

footer .legal{border-top:1px solid var(--line);padding-top:22px;margin-top:22px;max-width:82ch;line-height:1.7}

/* ============================================================
   REVELAÇÃO NO SCROLL
   ============================================================ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
  .split-bar .p80{width:80%}
  .split-bar .p20{width:20%}
}