/* ============================================================
   TURICUM — landing de pré-lançamento
   Paleta:  abeto #0F241F · pedra #E9EAE4 · névoa #F4F4F0
            sálvia #C4C8C0 · bronze #B4966E · vermelho 485 #DA291C
   Tipo:    Helvetica Neue (display+texto) / SF Mono (utilitário)
   Assinatura: a escala de ticks — logo, divisores e marcador de tempo
   ============================================================ */

:root{
  --ink:        #0F241F;
  --ink-2:      #17332C;
  --ink-3:      #2C4B43;
  --paper:      #E9EAE4;
  --paper-2:    #F4F4F0;
  --stone:      #CED3C9;
  --sage:       #C4C8C0;
  --bronze:     #B4966E;
  --swiss:      #DA291C;

  --line:       rgba(15,36,31,.16);
  --line-light: rgba(233,234,228,.22);

  --ff-display: "Helvetica Now Display","Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Inter,"Segoe UI",Arial,sans-serif;
  --ff-mono:    ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Roboto Mono",monospace;

  --r-lg: 26px;
  --r-sm: 999px;
  --r-nav: 17px;        /* o pill da navegação é quadradinho, não cápsula */
  --r-nav-in: 12px;

  --pad: clamp(20px, 5vw, 76px);
  --gap-band: clamp(72px, 11vw, 168px);
  --frame: clamp(10px, 1.4vw, 22px);   /* a moldura branca em volta de tudo */

  /* A moldura nunca entra embaixo do notch nem da barra de gestos do iPhone.
     Em retrato os insets são 0 e isto vira o --frame de sempre; em paisagem,
     o lado do notch ganha o respiro que o sistema pede. */
  --frame-t: max(var(--frame), env(safe-area-inset-top));
  --frame-r: max(var(--frame), env(safe-area-inset-right));
  --frame-b: max(var(--frame), env(safe-area-inset-bottom));
  --frame-l: max(var(--frame), env(safe-area-inset-left));

  --tap: 44px;          /* alvo mínimo de toque — iOS HIG e WCAG 2.5.8 */

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

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;          /* no iOS o hidden só no body não segura */
}

body{
  margin:0;
  padding:var(--frame-t) var(--frame-r) var(--frame-b) var(--frame-l);
  /* o retângulo cinza do toque no iOS suja os cartões escuros */
  -webkit-tap-highlight-color:rgba(218,41,28,.14);
  background:#F4F4F1;
  color:var(--ink);
  font-family:var(--ff-display);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.55;
  letter-spacing:-.011em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--swiss); color:#fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:0 0 12px 0; text-decoration:none;
}
.skip:focus{ left:0; }

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

/* ---------- utilidades ---------- */
.wrap{ width:100%; max-width:1400px; margin-inline:auto; padding-inline:var(--pad); }

.mono{
  font-family:var(--ff-mono);
  font-size:.6875rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:400;
  font-variant-numeric:tabular-nums;
}

.eyebrow{
  font-family:var(--ff-mono);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 clamp(20px,3vw,34px);
  display:flex; align-items:center; gap:.7em;
}
.eyebrow--light{ color:rgba(233,234,228,.72); }
/* quando a linha quebra no celular, o local vai inteiro para a linha de
   baixo — em vez de deixar um "/ BA" órfão embaixo do marcador */
.nb{ white-space:nowrap; }

/* marcador — grifo sólido no vermelho da marca */
.hl{
  background:var(--swiss); color:#fff;
  padding:.3em .55em .25em;
  border-radius:3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--swiss);
  animation:pulse 2.6s var(--ease) infinite;
  flex:none;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.35; transform:scale(.75); }
}

/* placeholders de texto */
.ph-inline{
  font-style:normal;
  background:rgba(218,41,28,.10);
  box-shadow:inset 0 -1px 0 rgba(218,41,28,.45);
  padding:0 .28em;
  border-radius:3px;
  justify-self:start;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.note-ph{
  font-size:.875rem;
  color:var(--ink-3);
  border-left:2px solid var(--swiss);
  padding-left:14px;
}

/* filete vermelho à esquerda, sem reduzir o texto */
.barred{ border-left:2px solid var(--swiss); padding-left:18px; }
.band--dark .note-ph{ color:rgba(233,234,228,.6); }

/* placeholders de imagem */
.ph{
  margin:0;
  border:1px dashed var(--line);
  border-radius:16px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(15,36,31,.045) 9px 10px);
  display:grid; place-items:center;
  min-height:180px;
  position:relative;
}
.ph figcaption{
  font-family:var(--ff-mono);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  text-align:center; padding:14px;
}
.ph--4x3{ aspect-ratio:4/3; }
.ph--3x4{ aspect-ratio:3/4; }
.band--dark .ph{
  border-color:var(--line-light);
  background:repeating-linear-gradient(-45deg, transparent 0 9px, rgba(233,234,228,.05) 9px 10px);
}
.band--dark .ph figcaption{ color:rgba(233,234,228,.5); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:stretch;
  text-decoration:none;
  border:0; padding:0; background:none;
  cursor:pointer;
  gap:3px;
}
.btn__label{
  background:var(--ink); color:var(--paper);
  font-family:var(--ff-mono);
  font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase;
  padding:15px 24px;
  border-radius:var(--r-sm);
  transition:background .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn__tab{
  background:var(--swiss); color:#fff;
  width:46px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.btn__tab svg{ width:16px; height:16px; }

.btn--lg .btn__label{ padding:19px 32px; font-size:.75rem; }
.btn--lg .btn__tab{ width:56px; }
.btn--sm .btn__label{ padding:12px 18px; }
.btn--sm .btn__tab{ width:38px; }

.band--dark .btn__label{ background:var(--paper); color:var(--ink); }

.btn--outline .btn__label{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}

.link-quiet{
  font-family:var(--ff-mono);
  font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none;
  color:rgba(233,234,228,.8);
  padding-bottom:4px;
  border-bottom:1px solid rgba(233,234,228,.3);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}

/* ---------- marca ----------
   O "i" é o símbolo: haste no vermelho suíço, pingo na cor do fundo claro.
   Um gradiente com corte seco na altura do vão entre pingo e haste, recortado
   pelo texto — assim continua sendo texto de verdade, em qualquer tamanho.   */
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand__word{
  font-size:3.2rem; font-weight:400; letter-spacing:-.03em;
  line-height:1;
}
.brand__i{
  display:inline-block;
  line-height:1;
  /* Medido nos pixels do glifo (Helvetica Neue, line-height:1, % da caixa):
     pingo termina em ~26%, haste começa em ~35%. 31% cai no vão nos pesos 300–500. */
  background:linear-gradient(to bottom,
    var(--logo-dot, #FFFFFF) 0 31%,
    var(--swiss) 31% 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; z-index:50;
  top:var(--frame-t); left:var(--frame-l); right:var(--frame-r);
}
.hdr__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  /* respiro entre a navegação e a borda do cartão do hero */
  padding:clamp(10px,1.5vw,24px) clamp(10px,1.6vw,26px);
}

/* logo solto sobre o hero; ganha um chip claro assim que a página rola */
.brand{
  padding:10px 16px; border-radius:var(--r-nav);
  color:var(--paper-2);
  background:transparent;
  transition:background .45s var(--ease), color .45s var(--ease),
             box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.hdr.is-scrolled .brand{
  color:var(--ink);
  --logo-dot:var(--ink);          /* o pingo acompanha o fundo que ficou claro */
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}

.hdr__cluster{
  display:flex; align-items:center; gap:6px;
  padding:8px;
  border-radius:var(--r-nav);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
  color:var(--ink);
}
.hdr.is-scrolled .hdr__cluster{
  background:rgba(255,255,255,.95);
  box-shadow:0 10px 30px -18px rgba(15,36,31,.55), inset 0 0 0 1px rgba(255,255,255,.6);
}

.hdr__nav{ display:flex; gap:4px; }
.hdr__nav a{
  font-family:var(--ff-mono);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  position:relative; padding:13px 18px;
  color:var(--ink-3);
  border-radius:var(--r-nav-in);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.hdr__nav a::after{
  content:""; position:absolute; left:18px; right:18px; bottom:10px; height:1px;
  background:var(--swiss);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.hdr__cta{
  font-family:var(--ff-mono);
  font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none;
  border:0; cursor:pointer;          /* é <button>: zera a borda do navegador */
  background:var(--swiss); color:#fff;
  padding:13px 24px;
  border-radius:var(--r-nav-in);
  transition:background .35s var(--ease);
  white-space:nowrap;
}

.hdr__burger{
  display:none; width:var(--tap); height:var(--tap);
  border:0; border-radius:var(--r-nav-in); background:var(--ink);
  cursor:pointer; padding:0;
  /* place-items NÃO define align-content: sem esta linha as duas trilhas
     esticam para encher os 44px e as barras ficam a 23px uma da outra —
     o hambúrguer abre demais e o X vira um ">". */
  place-items:center; align-content:center; gap:5px;
}
.hdr__burger span{
  display:block; width:18px; height:1.5px; background:var(--paper);
  transition:transform .35s var(--ease);
}
.hdr__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

.menu{
  margin-top:8px; padding:14px;
  border-radius:22px;
  background:rgba(244,244,240,.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:grid; gap:2px;
}
.menu a{
  text-decoration:none; font-size:1.35rem; letter-spacing:-.02em;
  /* a linha inteira é o alvo, não só as letras */
  display:flex; align-items:center;
  min-height:var(--tap); padding:6px 10px;
  border-radius:12px;
}
.menu a:active{ background:rgba(15,36,31,.07); }

/* o CTA vermelho do desktop reaparece aqui — no celular ele sumia por completo */
.menu__cta{
  margin-top:12px;
  border:0; cursor:pointer; width:100%;
  min-height:var(--tap);
  background:var(--swiss); color:#fff;
  font-family:var(--ff-mono);
  font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase;
  padding:16px 20px;
  border-radius:14px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:min(calc(100svh - var(--frame) * 2), 920px);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(150deg, #0B6B4F 0%, #10B981 38%, #2DD4BF 66%, #A7F3D0 100%);
  display:flex; flex-direction:column;
  padding:clamp(120px,16vh,190px) var(--pad) clamp(30px,6vh,66px);
  color:var(--paper-2);
  isolation:isolate;
}
.hero__gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.hero__gl.is-ready{ opacity:1; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  /* mantém o texto legível sobre as áreas claras do shader */
  background:
    linear-gradient(to bottom, rgba(4,45,33,.42) 0%, rgba(4,45,33,0) 42%),
    linear-gradient(to top,    rgba(4,45,33,.46) 0%, rgba(4,45,33,0) 46%),
    linear-gradient(to right,  rgba(4,45,33,.30) 0%, rgba(4,45,33,0) 55%);
}
.hero__top,
.hero__base{ max-width:1400px; width:100%; margin-inline:auto; }
.hero__base{
  margin-top:auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px,5vw,80px);
}

.hero__h1{
  margin:0 0 clamp(22px,3vw,36px);
  font-size:clamp(2.6rem, 8.4vw, 7.4rem);
  line-height:.94;
  letter-spacing:-.04em;
  font-weight:400;
  max-width:20ch;
}
.hero__sub{
  margin:0;
  max-width:50ch;
  font-size:clamp(1.0625rem,1.3vw,1.3125rem);
  line-height:1.5;
  color:rgba(244,244,240,.9);
}

/* linhas com máscara — o recorte por linha é feito em JS (data-split) */
.ln{
  display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;
}
.ln > span{
  display:block;
  transform:translateY(115%);
  transition:transform 1.05s var(--ease);
}
.is-in .ln > span{ transform:translateY(0); }
.ln:nth-child(1) > span{ transition-delay:.05s; }
.ln:nth-child(2) > span{ transition-delay:.13s; }
.ln:nth-child(3) > span{ transition-delay:.21s; }
.ln:nth-child(4) > span{ transition-delay:.29s; }
.ln:nth-child(5) > span{ transition-delay:.37s; }
.ln:nth-child(6) > span{ transition-delay:.45s; }
/* antes do split, o texto fica invisível para não piscar (só quando há JS) */
.js [data-split]:not(.is-split){ opacity:0; }
.w{ font-style:normal; }

/* ============================================================
   BANDAS
   ============================================================ */
.band{ padding-block:var(--gap-band); position:relative; }
.band--paper{ background:var(--paper); }
.band--stone{ background:var(--stone); }
.band--dark{ background:var(--ink); color:var(--paper); }
.rounded{ border-radius:var(--r-lg); }

.band + .band.rounded{ margin-top:0; }
.band--paper + .band--paper{ padding-top:0; }

.band__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-bottom:22px;
  border-bottom:1px solid var(--line-light);
  margin-bottom:clamp(24px,4vw,44px);
}
.band__head .eyebrow{ margin-bottom:0; }
.band__hint{ color:rgba(233,234,228,.5); }

/* tese */
.thesis{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,5vw,90px);
  align-items:end;
}
.thesis .eyebrow{ grid-column:1/-1; }
.lede{
  margin:0;
  font-size:clamp(1.6rem, 4.1vw, 3.5rem);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:400;
  max-width:22ch;
}
.lede__note{
  margin:0; max-width:46ch;
  padding-bottom:.45em;
  color:var(--ink-3);
  font-size:clamp(1rem,1.15vw,1.125rem);
}
@media (max-width:900px){
  .thesis{ grid-template-columns:1fr; align-items:start; }
  .lede{ max-width:none; }
  .lede__note{ padding-bottom:0; }
}

.h2{
  margin:0 0 clamp(24px,3vw,34px);
  font-size:clamp(1.7rem,3.4vw,2.9rem);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:400;
  max-width:18ch;
}

/* ============================================================
   EXAMES
   ============================================================ */
.tick{
  display:inline-block; width:2px; height:13px; background:var(--swiss);
  flex:none; margin-right:10px; vertical-align:-2px;
}

.poc{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,80px);
  align-items:center;
  padding-bottom:clamp(40px,5vw,64px);
  margin-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--line-light);
}
.poc__tag{ color:var(--paper); margin:0 0 18px; display:flex; align-items:center; }
.h2--light{ color:var(--paper); max-width:22ch; }
.poc__copy p{ margin:0; max-width:58ch; color:rgba(233,234,228,.75); }

.poc__time{
  margin:0; display:grid; justify-items:end; text-align:right; gap:6px;
  color:var(--paper);
}
.poc__num{
  font-size:clamp(4rem,9vw,8rem); line-height:.85; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.poc__unit{ color:rgba(233,234,228,.55); line-height:1.5; }

.exams{ display:grid; gap:clamp(20px,2.4vw,30px); }
.exam-group{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  align-items:start;
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line-light);
}
.exam-group:first-child{ border-top:0; padding-top:0; }
.exam-group__lbl{
  margin:0; color:rgba(233,234,228,.6);
  display:flex; align-items:center;
}

.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.chips li{
  font-family:var(--ff-mono);
  font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 14px; border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line-light);
  color:rgba(233,234,228,.8);
}
.chip--ph{ color:var(--swiss); box-shadow:inset 0 0 0 1px rgba(218,41,28,.5); }

.band--dark .note-ph{ margin-top:clamp(30px,4vw,46px); }

/* ============================================================
   SERVIÇOS
   ============================================================ */
.srv{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2vw,24px);
  margin-top:clamp(34px,4vw,54px);
}
.srv__card{
  padding:clamp(28px,3vw,44px);
  border-radius:22px;
  box-shadow:inset 0 0 0 1px var(--line);
  background:rgba(255,255,255,.4);
}
.srv__lbl{ color:var(--swiss); margin:0 0 20px; }
.srv__title{
  margin:0 0 16px;
  font-size:clamp(1.3rem,2vw,1.75rem);
  line-height:1.15; letter-spacing:-.03em; font-weight:400;
  max-width:20ch;
}
.srv__card p{ margin:0 0 14px; color:var(--ink-3); max-width:46ch; }
.srv__card p:last-child{ margin-bottom:0; }
.srv__link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  margin-top:6px;
  padding-bottom:5px;
  border-bottom:1px solid var(--line);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.srv__link svg{ width:14px; height:14px; transition:transform .35s var(--ease); }

/* ============================================================
   LEGISLAÇÃO
   ============================================================ */
.grid-2{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(34px,6vw,110px);
  align-items:start;
}
.grid-2--wide{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); }
.col-sticky{ position:sticky; top:110px; }

.brevity__block{ padding-bottom:clamp(26px,3vw,40px); }
.brevity__key{
  margin:0;
  font-size:clamp(1.2rem,2vw,1.6rem);
  line-height:1.32;
  letter-spacing:-.025em;
  padding-bottom:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--line);
}
.brevity__lbl{ color:var(--swiss); margin:0 0 12px; }
.brevity__block p{ margin:0; max-width:56ch; color:var(--ink-3); }

.numlist{ list-style:none; margin:0; padding:0; counter-reset:n; }
.numlist li{
  display:flex; gap:18px; align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.numlist li:first-child{ border-top:1px solid var(--line); }
.numlist .mono{ color:var(--ink-3); flex:none; }

.disclaimer{
  margin:0;
  font-size:.8125rem; line-height:1.5;
  color:var(--ink-3);
  max-width:56ch;
  opacity:.8;
}

/* ============================================================
   HISTÓRIA
   ============================================================ */
.portrait{
  margin:0;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  aspect-ratio:3/4;
}
.portrait img{
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
}

.etym{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 clamp(22px,3vw,32px);
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.etym__word{ font-size:1.5rem; letter-spacing:-.03em; }
.etym__gram{
  font-family:var(--ff-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--swiss);
}
.etym__def{ color:var(--ink-3); font-size:1rem; }

.story__copy p{ margin:0 0 16px; max-width:54ch; color:var(--ink-3); }
.story__copy strong{ color:var(--ink); font-weight:500; }

.facts{ list-style:none; margin:clamp(28px,4vw,40px) 0 0; padding:0; }
.facts li{
  display:grid; grid-template-columns:130px 1fr; gap:16px;
  padding:12px 0; border-top:1px solid var(--line);
  align-items:baseline;
}
.facts .mono{ color:var(--ink-3); }

/* ============================================================
   CONTATO
   ============================================================ */
.cta-h2{
  margin:0 0 clamp(20px,3vw,30px);
  font-size:clamp(2rem,5.6vw,4.6rem);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:400;
  max-width:16ch;
}
.cta-sub{
  margin:0 0 clamp(38px,5vw,60px);
  max-width:52ch;
  color:rgba(233,234,228,.75);
}
.cta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
.cta-card{
  display:grid; gap:8px;
  padding:clamp(22px,2.6vw,32px);
  border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--line-light);
  text-decoration:none;
  position:relative;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.cta-card__lbl{ color:rgba(233,234,228,.5); }
.cta-card__val{ font-size:clamp(1.05rem,1.5vw,1.3rem); letter-spacing:-.02em; }
.cta-card__go{
  position:absolute; top:clamp(22px,2.6vw,32px); right:clamp(22px,2.6vw,32px);
  color:var(--swiss);
  transition:transform .4s var(--ease);
}
.cta-card--static{ opacity:.72; }
.band--dark .ph-inline{
  background:rgba(218,41,28,.22);
  box-shadow:inset 0 -1px 0 rgba(218,41,28,.7);
}


/* ============================================================
   LOGIN — mesmo material de vidro do pill da navegação
   ============================================================ */
.login{
  border:0; padding:0; background:none;
  max-width:min(420px, calc(100vw - 2 * var(--frame)));
  width:100%;
  margin:auto;                       /* centraliza na viewport */
  color:var(--ink);
  overflow:visible;
}
.login::backdrop{
  background:rgba(8,26,22,.45);
  backdrop-filter:blur(14px) saturate(.9);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
}
.login[open]{ animation:loginIn .35s var(--ease); }
@keyframes loginIn{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to  { opacity:1; transform:none; }
}

.login__box{
  position:relative;
  padding:clamp(28px,4vw,40px);
  border-radius:20px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 30px 70px -30px rgba(8,26,22,.6), inset 0 0 0 1px rgba(255,255,255,.8);
  display:grid; gap:16px;
}

.login__close{
  position:absolute; top:10px; right:10px;
  width:var(--tap); height:var(--tap); padding:0;
  border:0; border-radius:13px;
  background:transparent; color:var(--ink-3);
  cursor:pointer;
  display:grid; place-items:center;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.login__close svg{ width:15px; height:15px; }

.login__eyebrow{ margin:0; color:var(--swiss); }
.login__title{
  margin:0;
  font-size:clamp(1.5rem,3vw,1.9rem);
  letter-spacing:-.03em; line-height:1.1; font-weight:400;
}
.login__sub{ margin:-8px 0 4px; color:var(--ink-3); font-size:.9375rem; }

.field{ display:grid; gap:7px; }
.field label{
  font-family:var(--ff-mono);
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.field__wrap{ position:relative; display:flex; }
.field input{
  width:100%;
  /* 16px é o piso: abaixo disso o iOS dá zoom sozinho ao focar o campo */
  font-family:var(--ff-display); font-size:1rem;
  min-height:var(--tap);
  color:var(--ink);
  background:rgba(255,255,255,.7);
  border:0; box-shadow:inset 0 0 0 1px rgba(15,36,31,.18);
  border-radius:12px;
  padding:14px 16px;
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
  -webkit-appearance:none; appearance:none;   /* tira o relevo do iOS */
}
.field__wrap input{ padding-right:96px; }
.field input:focus{
  outline:none;
  background:#fff;
  box-shadow:inset 0 0 0 2px var(--ink);
}
.field input:user-invalid{ box-shadow:inset 0 0 0 2px var(--swiss); }
.field__toggle{
  /* centralizado em vez de esticado: preso ao topo e à base do campo ele
     ficava com 39px, abaixo do alvo mínimo */
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  min-width:var(--tap); min-height:var(--tap);
  border:0; border-radius:10px; padding:0 14px;
  background:transparent; color:var(--ink-3);
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}

.login__msg{
  margin:0; min-height:0;
  font-size:.875rem; color:var(--swiss);
}
.login__msg:empty{ display:none; }

.login__submit{
  border:0; cursor:pointer;
  background:var(--swiss); color:#fff;
  font-family:var(--ff-mono);
  font-size:.6875rem; letter-spacing:.15em; text-transform:uppercase;
  min-height:var(--tap);
  padding:17px 24px;
  border-radius:12px;
  transition:background .3s var(--ease);
}

.login__foot{
  display:flex; flex-wrap:wrap; gap:4px 18px;
  font-family:var(--ff-mono);
  font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
}
.login__foot a{
  color:var(--ink-3); text-decoration:none;
  display:inline-flex; align-items:center; min-height:var(--tap);
  border-bottom:1px solid var(--line);
}

.login__note{
  margin:0; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:.75rem; color:var(--ink-3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{ background:var(--paper); padding-block:clamp(48px,6vw,80px); }
.ftr__in{ display:grid; gap:clamp(30px,4vw,48px); }
.ftr__legal{
  margin:0; font-size:.8125rem; color:var(--ink-3); max-width:62ch;
}

/* ============================================================
   REVELAÇÕES
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s; }
.reveal[data-d="2"]{ transition-delay:.14s; }
.reveal[data-d="3"]{ transition-delay:.21s; }
.reveal[data-d="4"]{ transition-delay:.28s; }
.reveal[data-d="5"]{ transition-delay:.35s; }
.reveal[data-d="6"]{ transition-delay:.42s; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1000px){
  .hdr__nav{ display:none; }
  .hdr__burger{ display:grid; }
  .hdr__cta{ display:none; }        /* volta como .menu__cta dentro do menu */
  /* sobrando só o hambúrguer, o vidro do pill vira um anel solto em volta
     de um botão — sem os links ao lado ele não tem o que agrupar */
  .hdr__cluster{
    padding:0; background:none; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .hdr.is-scrolled .hdr__cluster{ background:none; box-shadow:none; }

  .hero__base{ flex-direction:column; align-items:flex-start; gap:32px; }
  .grid-2,.grid-2--wide{ grid-template-columns:1fr; }
  .col-sticky{ position:static; }
  .poc{ grid-template-columns:1fr; }
  /* empilhado, o número alinhado à direita fica solto longe do texto */
  .poc__time{ justify-items:start; text-align:left; }
  .exam-group{ grid-template-columns:1fr; gap:14px; }
}

@media (max-width:720px){
  .lede__note{ margin-left:0; }
  .facts li{ grid-template-columns:1fr; gap:4px; }

  /* a marca acompanha o hambúrguer de 44px — em 1rem ela sumia ao lado dele */
  .brand{ padding:8px 12px; }        /* 28px de letra + 16 = os 44px do alvo */
  .brand__word{ font-size:1.75rem; }

  /* em flex os três pedaços (texto, marcador, "/ BA") não quebram junto e
     a linha racha no meio da palavra — em bloco isso volta a ser texto */
  .eyebrow{ display:block; }
  .eyebrow .dot{ display:inline-block; margin-right:.7em; vertical-align:.1em; }
  .hero .eyebrow{ line-height:2.1; }

  /* headline mais para cima: o topo generoso é do desktop, aqui só afasta
     o texto do vídeo sem ganhar nada */
  .hero{ padding-top:clamp(88px,13vh,120px); }
}

/* ============================================================
   HOVER — só onde existe ponteiro de verdade

   Num touchscreen o :hover gruda: o dedo toca o cartão, o estado de hover
   fica aplicado e só sai quando se toca em outro lugar. Por isso todo
   :hover da página mora aqui dentro, e o feedback de toque fica com
   :active e com o -webkit-tap-highlight-color definido no body.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn__tab{ transform:translateX(4px); }
  .btn:hover .btn__label{ background:var(--ink-2); }
  .band--dark .btn:hover .btn__label{ background:#fff; }
  .btn--outline:hover .btn__label{ background:var(--ink); color:var(--paper); }

  .link-quiet:hover{ color:#fff; border-color:#fff; }

  .hdr__nav a:hover{ color:var(--ink); }
  .hdr__nav a:hover::after{ transform:scaleX(1); }
  .hdr__cta:hover{ background:#BE2317; }
  .menu__cta:hover{ background:#BE2317; }
  .menu a:hover{ background:rgba(15,36,31,.07); }

  .srv__link:hover{ color:var(--swiss); border-color:var(--swiss); }
  .srv__link:hover svg{ transform:translateX(4px); }

  .cta-card:hover{ background:rgba(233,234,228,.06); box-shadow:inset 0 0 0 1px rgba(233,234,228,.4); }
  .cta-card:hover .cta-card__go{ transform:translate(4px,-4px); }

  .login__close:hover{ background:rgba(15,36,31,.07); color:var(--ink); }
  .field__toggle:hover{ background:rgba(15,36,31,.07); color:var(--ink); }
  .login__submit:hover{ background:#BE2317; }
  .login__foot a:hover{ color:var(--swiss); border-color:var(--swiss); }
}

/* resposta ao toque, já que o hover não vale aqui */
@media (hover:none){
  .cta-card:active{ background:rgba(233,234,228,.08); }
  .btn:active .btn__label{ opacity:.85; }
  .menu__cta:active,.hdr__cta:active,.login__submit:active{ background:#BE2317; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .ln > span{ transform:none; }
  .marquee__track{ animation:none; }
}