/* =========================================================
   VINÍCIUS SOUZA · PROTOCOLO SOUZA
   Design system: papel, lilás, tinta, violeta.
   Violeta é tinta, não fundo. Exceção: botão primário.
   ========================================================= */

/* Fontes hospedadas aqui (22.09). Latin, woff2, direto do Google Fonts.
   Inter e Space Grotesk sao variaveis: um arquivo cobre 400/500 e 500/600.
   Paginas que ainda linkam o Google Fonts continuam funcionando: estas
   regras vem depois na cascata e vencem, sem baixar nada de fora. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/spacegrotesk-var.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-var.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrumentserif-italic.woff2) format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/caveat-500.woff2) format('woff2')}

:root{
  --papel:#F7F5F0;
  --lilas:#EAE6F4;
  --tinta:#2A2233;
  --violeta:#6B4FD8;
  --apoio:#8D87A0;
  --linha:#DDD9E6;
  --card:#FCFBF9;
  --escuro:#2A2233;
  --regua:#E7E3F0;

  --ff-display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --ff-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --ff-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --maxw:1160px;
  --pad:clamp(20px,5vw,48px);
  --sombra:0 10px 30px rgba(42,34,51,.08);
  --sombra-alta:0 18px 48px rgba(42,34,51,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--ff-body);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:0}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
a{color:inherit}
em{font-style:normal}

/* foco visível */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--violeta);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--ff-mono);font-weight:400;letter-spacing:.12em;text-transform:lowercase}
.v{color:var(--violeta)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--tinta);color:var(--papel);
  font-family:var(--ff-mono);font-size:12px;padding:10px 16px;
}
.skip:focus{left:12px;top:12px}

/* grain */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* eyebrow / rótulo de seção */
.eyebrow{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:lowercase;color:var(--violeta);margin:0 0 18px;
}

/* ---------------- header ---------------- */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,245,240,.86);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--linha);
}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.header__name{font-family:var(--ff-display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.header__reg{font-size:11px;color:var(--apoio)}

/* ---------------- hero ---------------- */
.hero{
  background:linear-gradient(135deg,var(--papel) 30%,var(--lilas) 100%);
  border-bottom:1px solid var(--linha);
  padding:clamp(52px,8vw,104px) 0 clamp(56px,8vw,110px);
}
.hero__grid{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(32px,6vw,72px);align-items:center;
}
.hero__title{
  font-size:clamp(38px,5.4vw,66px);
  letter-spacing:-.035em;margin:0 0 22px;text-wrap:balance;
}
.hero__title em,.sec__title em,.porta__text em{
  font-family:var(--ff-serif);font-style:italic;font-weight:400;
  color:var(--violeta);letter-spacing:0;
}
.hero__sub{
  font-size:clamp(16px,1.25vw,18.5px);color:var(--tinta);
  max-width:52ch;margin:0 0 30px;line-height:1.65;
}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:clamp(34px,5vw,52px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);font-size:13px;letter-spacing:.08em;
  text-decoration:none;border-radius:999px;transition:transform .25s var(--ease),background-color .25s,color .25s,box-shadow .25s;
}
.btn--primary{
  background:var(--violeta);color:#fff;padding:15px 30px;
  box-shadow:0 8px 22px rgba(107,79,216,.24);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(107,79,216,.30)}
.btn--ghost{color:var(--tinta);padding:15px 2px;border-bottom:1px solid var(--linha);border-radius:0}
.btn--ghost:hover{color:var(--violeta);border-bottom-color:var(--violeta)}
.btn--paper{background:var(--papel);color:var(--tinta);padding:15px 30px}
.btn--paper:hover{transform:translateY(-2px);color:var(--violeta)}

.facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  border-top:1px solid var(--linha);padding-top:22px;margin:0;
}
.facts__item dt{font-family:var(--ff-display);font-weight:500;font-size:14.5px;letter-spacing:-.01em;margin-bottom:5px}
.facts__item dd{margin:0;font-family:var(--ff-mono);font-size:11.5px;line-height:1.6;color:var(--apoio);letter-spacing:.04em}

/* foto + órbita */
.hero__media{position:relative}
.portrait{margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--linha);box-shadow:var(--sombra-alta)}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.portrait__ph{
  width:100%;height:100%;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(42,34,51,.028) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,var(--lilas),var(--card));
}
.portrait__ph .mono{font-size:11px;color:var(--apoio);letter-spacing:.18em}
.portrait--alt{aspect-ratio:1/1;border-radius:18px}

/* selo */
.seal{
  position:absolute;top:-18px;right:-14px;width:114px;height:114px;
  border-radius:50%;background:var(--papel);border:1.5px solid var(--violeta);
  display:grid;place-items:center;transform:rotate(8deg);z-index:3;
}
.seal__ring{position:absolute;inset:7px;border:1px solid var(--violeta);opacity:.35;border-radius:50%}
.seal svg{position:absolute;inset:0;width:100%;height:100%}
.seal__type{
  font-family:var(--ff-mono);font-size:9.6px;letter-spacing:.2em;
  fill:var(--violeta);text-transform:uppercase;
}
.seal__core{font-size:10px;color:var(--violeta);letter-spacing:.16em}

/* chips */
.chip{
  position:absolute;background:var(--card);border:1px solid var(--linha);
  border-radius:14px;padding:11px 14px;box-shadow:var(--sombra);z-index:4;
  max-width:230px;
}
.chip__label{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--apoio);margin-bottom:4px}
.chip__value{font-family:var(--ff-display);font-weight:500;font-size:14px;letter-spacing:-.01em;line-height:1.35;display:block}
.chip__value em{font-family:var(--ff-serif);font-style:italic;color:var(--violeta);font-size:1.08em}
.chip__value--sm{font-family:var(--ff-body);font-weight:400;font-size:12.5px;line-height:1.5;color:var(--tinta)}
.chip--1{top:8%;left:-8%}
.chip--2{bottom:20%;right:-9%}
.chip--3{bottom:-5%;left:-6%;max-width:250px}
.type::after{content:"";display:inline-block;width:1px;height:1em;background:var(--violeta);margin-left:2px;vertical-align:-.12em;animation:blink 1s steps(1) infinite}
.type.done::after{display:none}
@keyframes blink{50%{opacity:0}}

/* ---------------- seções ---------------- */
.sec{padding:clamp(64px,9vw,124px) 0;border-bottom:1px solid var(--linha)}
.sec__title{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.sec__title--wide{max-width:26ch}
.sec__sub{margin:22px 0 0;max-width:62ch;color:var(--tinta);font-size:clamp(15.5px,1.1vw,17.5px)}
.prose{max-width:56ch;color:var(--tinta)}
.prose p{line-height:1.7}
.inline-link{color:var(--violeta);text-decoration:none;border-bottom:1px solid rgba(107,79,216,.35);transition:border-color .2s}
.inline-link:hover{border-bottom-color:var(--violeta)}

/* problema */
.problema__grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(28px,5vw,64px);margin-top:clamp(34px,5vw,56px);align-items:start}
.stat{border-radius:20px;padding:clamp(28px,3.5vw,40px);border:1px solid var(--linha);background:var(--card)}
.stat--dark{background:var(--escuro);border-color:var(--escuro);color:var(--papel)}
.stat__num{display:block;font-family:var(--ff-display);font-weight:600;font-size:clamp(52px,6.6vw,86px);letter-spacing:-.045em;line-height:1;margin-bottom:18px}
.stat--dark .stat__num{color:var(--papel)}
.stat__label{display:block;font-size:11.5px;line-height:1.75;letter-spacing:.06em;color:rgba(247,245,240,.66)}
.stat:not(.stat--dark) .stat__label{color:var(--apoio)}

/* tese */
.tese__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);margin-top:clamp(32px,4.5vw,52px)}

/* protocolo */
.steps{list-style:none;margin:clamp(38px,5vw,62px) 0 0;padding:0;border-top:1px solid var(--linha)}
.step{display:grid;grid-template-columns:120px 1fr;gap:clamp(16px,3vw,44px);padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--linha)}
.step__num{font-size:clamp(22px,2.4vw,30px);color:var(--violeta);letter-spacing:.02em;font-weight:500;line-height:1.2}
.step__title{font-size:clamp(21px,2.1vw,27px);letter-spacing:-.02em;margin-bottom:8px}
.step__body p{max-width:58ch;color:var(--tinta);margin:0}

/* cartão de consulta */
.consulta{margin-top:clamp(38px,5vw,60px);background:var(--card);border:1px solid var(--linha);border-radius:20px;padding:clamp(22px,3vw,32px);box-shadow:var(--sombra);max-width:560px}
.consulta__head{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--apoio);padding-bottom:14px;border-bottom:1px solid var(--regua);margin:0 0 6px}
.consulta__fields{margin:0}
.consulta__fields > div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid var(--regua)}
.consulta__fields > div:last-child{border-bottom:0;padding-bottom:0}
.consulta__fields dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--apoio)}
.consulta__fields dd{margin:0;font-family:var(--ff-display);font-weight:500;font-size:15.5px;letter-spacing:-.01em}
.consulta__fields dd em{font-family:var(--ff-serif);font-style:italic;color:var(--violeta);font-size:1.08em}

/* cases */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(34px,5vw,56px)}
.case{background:var(--card);border:1px solid var(--linha);border-radius:20px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.case:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.case__ph{aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(150deg,var(--lilas),var(--card));border-bottom:1px solid var(--linha)}
.case__ph .mono{font-size:10.5px;color:var(--apoio);letter-spacing:.2em}
.case__head{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--violeta);margin:20px 22px 12px}
.case__line{margin:0 22px 12px;font-size:14px;line-height:1.6}
.case__line:last-child{padding-bottom:22px}
.case__line .mono{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--apoio);margin-bottom:2px}

/* quem assina */
.assina__grid{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.assinatura{margin:30px 0 22px;font-family:var(--ff-serif);font-style:italic;font-size:clamp(30px,3.4vw,42px);color:var(--violeta);line-height:1}
.link-quiet{font-size:11.5px;color:var(--apoio);text-decoration:none;border-bottom:1px solid var(--linha);padding-bottom:3px;transition:color .2s,border-color .2s}
.link-quiet:hover{color:var(--violeta);border-bottom-color:var(--violeta)}


/* a porta */
.sec--porta{border-bottom:1px solid var(--linha)}
.porta{
  background:var(--escuro);color:var(--papel);border-radius:24px;
  padding:clamp(40px,6vw,76px) clamp(24px,5vw,64px);text-align:center;
}
.porta__eyebrow{font-size:11px;letter-spacing:.18em;color:rgba(247,245,240,.55);margin:0 0 20px}
.porta__text{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(22px,2.9vw,36px);letter-spacing:-.028em;line-height:1.24;
  max-width:22ch;margin:0 auto 32px;text-wrap:balance;
}
.porta__text em{color:#B9A6FF}

/* rodapé */
.footer{padding:clamp(40px,5vw,62px) 0}
.footer__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.footer__name{font-family:var(--ff-display);font-weight:600;font-size:17px;margin:0 0 8px;letter-spacing:-.01em}
.footer__line{font-size:11px;color:var(--apoio);margin:0 0 4px;letter-spacing:.1em}
.footer__links{display:flex;gap:20px;align-items:flex-end;font-size:11.5px}
.footer__links a{color:var(--apoio);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.footer__links a:hover{color:var(--violeta);border-bottom-color:var(--violeta)}

/* ---------------- movimento ---------------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.js .chip{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease) var(--d),transform .6s var(--ease) var(--d)}
.hero__media.is-in .chip{opacity:1;transform:none}
.js .seal{opacity:0;transform:rotate(8deg) scale(1.5)}
.hero__media.is-in .seal{animation:carimbo .55s cubic-bezier(.2,1.4,.4,1) .18s forwards}
@keyframes carimbo{from{opacity:0;transform:rotate(8deg) scale(1.5)}60%{opacity:1}to{opacity:1;transform:rotate(8deg) scale(1)}}
.js .step__num{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.step.is-in .step__num{opacity:1;transform:none}

/* ---------------- responsivo ---------------- */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{order:2;margin:14px 6% 0}
  .hero__text{order:1}
  .problema__grid,.tese__grid,.assina__grid{grid-template-columns:1fr}
  .assina__media{max-width:360px}
  .cases{grid-template-columns:1fr}
  .case__ph{aspect-ratio:16/9}
  .step{grid-template-columns:1fr;gap:10px}
  .facts{grid-template-columns:1fr;gap:16px}
  .facts__item{display:flex;justify-content:space-between;gap:18px;align-items:baseline;border-bottom:1px solid var(--linha);padding-bottom:14px}
  .facts__item dd{text-align:right;max-width:52%}
  .footer__links{align-items:flex-start}
}
@media (max-width:560px){
  .seal{width:84px;height:84px;top:-12px;right:2px}
  .chip{position:static;max-width:none;margin-top:10px;box-shadow:none}
  .chip--1{margin-top:16px}
  .hero__media{margin:14px 0 0}
  .porta{border-radius:20px}
  .header__reg{font-size:10px}
  .consulta__fields > div{flex-direction:column;gap:4px;align-items:flex-start}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.chip,.step__num{opacity:1!important;transform:none!important}
  .seal{opacity:1;transform:rotate(8deg) scale(1)}
  .type::after{display:none}
  .case:hover,.btn:hover{transform:none}
}

/* =========================================================
   PÁGINAS DE CASE (casos/*.html)
   Mesmo sistema. Nada novo fora dele.
   ========================================================= */

.header__back{font-size:11px;color:var(--apoio);text-decoration:none;letter-spacing:.12em;transition:color .2s}
.header__back:hover{color:var(--violeta)}

/* abertura do case */
.case-hero{background:linear-gradient(135deg,var(--papel) 30%,var(--lilas) 100%);border-bottom:1px solid var(--linha);padding:clamp(44px,6vw,84px) 0 0}
.case-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:end;padding-bottom:clamp(36px,5vw,64px)}
.case-hero__title{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.035em;margin:0 0 20px;text-wrap:balance}
.case-hero__title em{font-family:var(--ff-serif);font-style:italic;color:var(--violeta);letter-spacing:0}
.case-hero__lead{max-width:48ch;color:var(--tinta);margin:0}

/* ficha de registro */
.ficha{background:var(--card);border:1px solid var(--linha);border-radius:20px;padding:clamp(20px,2.6vw,28px);box-shadow:var(--sombra)}
.ficha__head{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--apoio);padding-bottom:13px;border-bottom:1px solid var(--regua);margin:0 0 4px}
.ficha dl{margin:0}
.ficha dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--regua)}
.ficha dl > div:last-child{border-bottom:0;padding-bottom:0}
.ficha dt{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--apoio);flex:0 0 auto}
.ficha dd{margin:0;font-family:var(--ff-display);font-weight:500;font-size:14.5px;letter-spacing:-.01em;text-align:right}
.ficha dd em{font-family:var(--ff-serif);font-style:italic;color:var(--violeta);font-size:1.08em}

/* imagens */
.figura{margin:0}
.figura img{width:100%;border-radius:18px;border:1px solid var(--linha);background:var(--card)}
.figura figcaption{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:lowercase;color:var(--apoio);margin-top:11px}
.figura--larga img{border-radius:0;border-left:0;border-right:0}
.case-capa{border-bottom:1px solid var(--linha)}
.case-capa img{width:100%;display:block;border:0;border-radius:0}

/* etapas do case */
.etapas{margin-top:clamp(34px,4.5vw,56px);border-top:1px solid var(--linha)}
.etapa{display:grid;grid-template-columns:120px 1fr;gap:clamp(16px,3vw,44px);padding:clamp(26px,3.4vw,42px) 0;border-bottom:1px solid var(--linha)}
.etapa__num{font-family:var(--ff-mono);font-size:clamp(20px,2.2vw,27px);color:var(--violeta);font-weight:500;line-height:1.2}
.etapa__title{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;margin-bottom:10px}
.etapa__body p{max-width:60ch;margin:0 0 1em}
.etapa__body .figura{margin-top:22px}

/* sistema: cores e tipografia */
.sistema{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);margin-top:clamp(30px,4vw,48px)}
.bloco{background:var(--card);border:1px solid var(--linha);border-radius:20px;padding:clamp(22px,2.8vw,30px)}
.bloco__head{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--apoio);margin:0 0 20px}
.cores{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.cor{flex:1 1 120px}
.cor__amostra{height:76px;border-radius:12px;border:1px solid rgba(42,34,51,.10);margin-bottom:10px}
.cor__hex{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.1em;display:block;color:var(--tinta)}
.cor__nome{font-family:var(--ff-mono);font-size:10px;letter-spacing:.14em;color:var(--apoio);display:block;margin-top:2px}
.tipo-linha{padding:12px 0;border-bottom:1px solid var(--regua)}
.tipo-linha:last-child{border-bottom:0;padding-bottom:0}
.tipo-linha b{display:block;font-family:var(--ff-display);font-weight:500;font-size:19px;letter-spacing:-.015em;margin-bottom:3px}
.tipo-linha span{font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;color:var(--apoio)}

/* galeria de aplicações */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,26px);margin-top:clamp(30px,4vw,48px)}
.galeria .figura--full{grid-column:1 / -1}

/* navegação entre cases */
.case-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding:clamp(30px,4vw,48px) 0;border-top:1px solid var(--linha)}
.case-nav a{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.12em;color:var(--apoio);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:color .2s,border-color .2s}
.case-nav a:hover{color:var(--violeta);border-bottom-color:var(--violeta)}

/* card de case na home, agora clicável */
a.case{display:block;text-decoration:none;color:inherit}
.case__status{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--apoio);border:1px solid var(--linha);border-radius:999px;padding:4px 10px;display:inline-block;margin:20px 22px 0}
.case--wip{opacity:.72}
.case--wip:hover{transform:none;box-shadow:none}
.case__ver{display:block;margin:0 22px 22px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.14em;color:var(--violeta)}

@media (max-width:900px){
  .case-hero__grid{grid-template-columns:1fr;align-items:start}
  .etapa{grid-template-columns:1fr;gap:10px}
  .sistema,.galeria{grid-template-columns:1fr}
}


.marca{margin:clamp(28px,4vw,44px) 0 0;background:var(--card);border:1px solid var(--linha);border-radius:20px;padding:clamp(30px,5vw,58px);text-align:center}
.marca img{max-width:min(340px,72%);margin:0 auto;border:0}
.marca figcaption{font-size:10px;letter-spacing:.16em;color:var(--apoio);margin-top:24px}

/* =========================================================
   PASSE VISUAL
   Mais vida, mesmo sistema. Sem cor nova além do lilás e do violeta.
   ========================================================= */

/* retratos reais */
.portrait{position:relative;z-index:1;background:var(--lilas)}
.portrait img{object-position:58% 50%}
.hero__media::before{
  content:"";position:absolute;inset:-10% -12%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 58% at 62% 38%,rgba(107,79,216,.08),transparent 72%);
}

/* faixa de especialidades */
.faixa{background:var(--lilas);border-bottom:1px solid var(--linha);padding:16px 0}
.faixa__in{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap}
.faixa__rotulo{font-size:10.5px;letter-spacing:.16em;color:var(--violeta);flex:0 0 auto}
.faixa__lista{display:flex;flex-wrap:wrap;gap:8px 30px;list-style:none;margin:0;padding:0;font-size:11px;letter-spacing:.14em;color:var(--apoio)}
.faixa__lista li{position:relative}
.faixa__lista li+li::before{content:"·";position:absolute;left:-17px;color:var(--linha)}

/* ritmo: lavagem de lilás em duas seções */
.sec--lilas{background:linear-gradient(180deg,rgba(234,230,244,.60),rgba(234,230,244,.16))}

/* etapas do protocolo com mais presença */
.steps .step{
  border-bottom:1px dotted var(--linha);
  border-radius:16px;
  padding-inline:clamp(0px,1.6vw,22px);
  margin-inline:calc(-1 * clamp(0px,1.6vw,22px));
  transition:background-color .35s var(--ease);
}
.steps .step:last-child{border-bottom:0}
.step__num{
  font-size:clamp(26px,3.4vw,42px);
  letter-spacing:-.01em;
  transition:color .3s var(--ease),transform .35s var(--ease);
}
.step:hover{background:rgba(234,230,244,.55)}
.step:hover .step__num{transform:translateX(4px)}

/* cases: quatro cartões, imagem grande, cor do paciente na fita */
.cases{grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px)}
.case{position:relative;overflow:hidden}
.case__fita{position:absolute;top:0;left:0;right:0;height:3px;background:var(--marca,var(--violeta));z-index:2}
.case__img{overflow:hidden;border-bottom:1px solid var(--linha)}
.case__img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.case:hover .case__img img{transform:scale(1.04)}
.case:hover{box-shadow:var(--sombra-alta)}
.case__head{margin-top:22px}
.case__line:last-of-type{margin-bottom:18px}
.case__status{margin:0 22px 22px}
.case__ver{margin-bottom:22px}
.case--wip{opacity:1}

@media (max-width:900px){
  .cases{grid-template-columns:1fr}
  .case__img img{aspect-ratio:16/9}
  .faixa__lista{gap:6px 22px;font-size:10px}
  .faixa__lista li+li::before{left:-13px}
}

/* selo: texto legível nos dois arcos */
.seal__type{font-size:9.2px;letter-spacing:.18em}
.seal__type--base{font-size:7.4px;letter-spacing:.14em;opacity:.55}
.seal__core{font-size:11px;font-weight:500}
.btn__seta{margin-left:.55em;display:inline-block;transition:transform .25s var(--ease)}
.btn--ghost:hover .btn__seta{transform:translateY(2px)}



/* problema: o card escuro ganha altura e presença */
.problema__grid{align-items:stretch}
.stat{display:flex;flex-direction:column;justify-content:center;gap:4px}
.stat--dark{position:relative;overflow:hidden}
.stat--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 70% at 78% 12%,rgba(107,79,216,.30),transparent 62%);
}
.stat--dark .stat__num,.stat--dark .stat__label{position:relative;z-index:1}

/* lilás um pouco mais presente */
.sec--lilas{background:linear-gradient(180deg,rgba(234,230,244,.85),rgba(234,230,244,.30))}


/* protocolo: cabeçalho em duas colunas, etapas em largura cheia */
.protocolo__topo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:22px}
.protocolo__topo .sec__sub{margin-top:0}
.protocolo__topo .consulta{margin-top:0;max-width:none}

.steps .step{grid-template-columns:130px minmax(180px,.62fr) 1fr;align-items:baseline}
.steps .step__title{margin-bottom:0}
.steps .step__body p{max-width:52ch}

@media (max-width:900px){
  .protocolo__topo{grid-template-columns:1fr}
  .steps .step{grid-template-columns:1fr;align-items:start}
  .steps .step__title{margin-bottom:6px}
}

.assina__text .prose{margin-top:22px}
.case-hero__title + .case-hero__lead{margin-top:0}

/* problema: descarte por eliminação, em linhas de receituário */
.descarte{margin:0 0 30px}
.descarte__item{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:18px 0;border-bottom:1px dotted var(--linha);
}
.descarte__item:first-child{border-top:1px dotted var(--linha)}
.descarte__item dt{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(18px,1.9vw,24px);letter-spacing:-.02em;color:var(--apoio);
  transition:color .3s var(--ease);
}
.descarte__item dd{margin:0;font-size:10.5px;letter-spacing:.14em;color:var(--apoio);text-align:right;flex:0 1 auto}
.descarte__item--certo dt{color:var(--tinta)}
.descarte__item--certo dd{color:var(--violeta)}
.descarte__fecho{max-width:52ch;margin:0}
.stat__fonte{display:block;margin-top:16px;font-size:9.5px;letter-spacing:.14em;color:rgba(247,245,240,.42)}

@media (max-width:560px){
  .descarte__item{flex-direction:column;gap:4px}
  .descarte__item dd{text-align:left}
}

/* =========================================================
   HERO RECOMPOSTO
   Centralizado, com peças espalhadas. Mola na entrada.
   ========================================================= */
:root{--mola:cubic-bezier(.34,1.56,.64,1);
      --sombra-dura:6px 7px 0 rgba(42,34,51,.05),0 14px 34px rgba(42,34,51,.10);}

.hero{position:relative;overflow:hidden;padding:clamp(40px,5vw,72px) 0 clamp(40px,5vw,64px)}
.hero__forma{
  position:absolute;left:50%;top:-14%;width:min(1080px,92vw);aspect-ratio:1/1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(234,230,244,.92),rgba(234,230,244,0));
}
.hero__palco{position:relative;display:grid;place-items:center;min-height:clamp(520px,74vh,720px)}
.hero__nucleo{position:relative;z-index:5;max-width:640px;text-align:center}
.hero__title{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.04em;margin:0 0 22px}
.hero__sub{margin:0 auto 32px;max-width:46ch;font-size:clamp(15.5px,1.15vw,17.5px)}
.hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin:0}

/* botão pill com badge, no registro da referência */
.btn--primary{display:inline-flex;align-items:center;gap:16px;padding:7px 9px 7px 26px}
.btn__badge{
  width:34px;height:34px;border-radius:50%;background:var(--papel);color:var(--violeta);
  display:grid;place-items:center;font-size:14px;line-height:1;
  transition:transform .3s var(--mola);
}
.btn--primary:hover .btn__badge{transform:translateX(3px)}
.btn--paper{display:inline-flex;align-items:center;gap:16px;padding:7px 9px 7px 26px}
.btn--paper .btn__badge{background:var(--violeta);color:var(--papel)}

/* peças */
.pecas{position:absolute;inset:0;z-index:4;pointer-events:none}
.peca{
  position:absolute;pointer-events:auto;
  background:var(--card);border:1px solid var(--linha);border-radius:16px;
  padding:12px 15px;box-shadow:var(--sombra-dura);
  transform:rotate(var(--giro));
  transition:transform .4s var(--mola),box-shadow .4s var(--ease);
}
.peca:hover{transform:rotate(0deg) translateY(-3px);box-shadow:8px 10px 0 rgba(42,34,51,.06),0 20px 44px rgba(42,34,51,.13);z-index:6}
.peca img{border-radius:11px;display:block;width:100%}
.peca--foto{left:1%;top:4%;width:clamp(168px,15vw,208px);padding:10px 10px 6px}
.peca--foto img{aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;filter:grayscale(1) contrast(1.04)}
.peca--foto figcaption{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--apoio);text-align:center;padding:9px 0 3px}
.peca--consulta{left:5%;bottom:9%}
.peca--prognostico{right:9%;top:7%}
.peca--case{right:0;bottom:14%;width:clamp(180px,16vw,224px);padding:10px 10px 6px;text-decoration:none;color:inherit}
.peca--case img{aspect-ratio:4/3;object-fit:cover}
.peca__rodape{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--violeta);padding:9px 2px 3px}
.peca--contexto{right:12%;bottom:-3%;max-width:228px}

/* selo solto no palco */
.hero .seal{position:absolute;right:16%;top:-2%;left:auto}

/* anotação à mão */
.nota-mao{position:absolute;left:15%;top:-3%;z-index:6;color:var(--violeta);pointer-events:none;width:190px}
.nota-mao__texto{
  font-family:'Caveat',var(--ff-serif),cursive;font-size:26px;line-height:1.05;
  display:block;transform:rotate(-7deg);transform-origin:left center;
}
.nota-mao__seta{width:86px;height:58px;display:block;margin:2px 0 0 14px;transform:rotate(4deg)}

/* barra de fatos, agora centralizada */
.facts{max-width:900px;margin:clamp(30px,4vw,52px) auto 0;text-align:center}
.facts__item{border-bottom:0}

/* entrada com mola */
.js .peca,.js .nota-mao{opacity:0;transform:translateY(26px) rotate(0deg) scale(.95)}
.js .nota-mao{transform:translateY(18px) scale(.9)}
.hero__palco.is-in .peca{
  opacity:1;transform:rotate(var(--giro));
  transition:opacity .55s var(--ease) var(--d),transform .7s var(--mola) var(--d);
}
.hero__palco.is-in .nota-mao{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) 1.05s,transform .7s var(--mola) 1.05s;
}
.js .hero .seal{opacity:0}
.hero__palco.is-in .seal{animation:carimbo .55s cubic-bezier(.2,1.4,.4,1) .85s forwards}

/* ---- responsivo do hero ---- */
@media (max-width:1180px){
  .hero__nucleo{max-width:560px}
  .peca--prognostico,.peca--contexto{display:none}
  .hero .seal{right:6%}
}
@media (max-width:900px){
  .hero__palco{display:block;min-height:0}
  .hero__nucleo{max-width:none;margin:0 auto}
  .pecas{position:static;display:flex;gap:14px;overflow-x:auto;padding:34px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .peca{position:static!important;flex:0 0 auto;width:auto;max-width:250px;scroll-snap-align:start;display:block}
  .peca--foto{width:180px}
  .peca--case{width:220px}
  .peca--prognostico,.peca--contexto{display:block}
  .hero .seal{position:absolute;right:4%;top:2%}
  .nota-mao{display:none}
  .facts{text-align:left}
  .facts__item{border-bottom:1px solid var(--linha)}
}
@media (prefers-reduced-motion:reduce){
  .peca,.nota-mao{opacity:1!important;transform:rotate(var(--giro))!important}
  .nota-mao{transform:none!important}
}

/* ajustes de composição do hero */
.hero .seal{right:2%;top:1%;width:104px;height:104px}
.peca--prognostico{right:11%;top:23%}
.nota-mao__seta{width:92px;height:64px;margin:0 0 0 10px;transform:rotate(2deg)}
.js .hero .seal{opacity:0}
.hero__palco.is-in .seal{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .hero .seal{opacity:1;transform:rotate(8deg) scale(1)}
}
@media (max-width:1180px){.hero .seal{right:2%;top:0}}

/* fisicalidade nos demais cards */
.case,.stat,.consulta,.ficha,.bloco,.marca{box-shadow:var(--sombra-dura)}
.case{transition:transform .4s var(--mola),box-shadow .4s var(--ease)}
.case:hover{transform:translateY(-4px);box-shadow:8px 10px 0 rgba(42,34,51,.06),0 22px 46px rgba(42,34,51,.13)}

/* anotação do CTA final */
.nota-mao--porta{
  position:absolute;right:clamp(16px,6vw,88px);bottom:clamp(74px,9vw,104px);
  width:180px;text-align:right;color:#B9A6FF;pointer-events:none;
}
.nota-mao--porta .nota-mao__texto{transform:rotate(5deg);transform-origin:right center;font-size:24px}
.nota-mao__seta--porta{width:84px;height:58px;margin:0 8px 2px auto;transform:rotate(-3deg)}
.porta{position:relative}
.js .nota-mao--porta{opacity:0;transform:translateY(14px)}
.porta.is-in .nota-mao--porta,.reveal.is-in .nota-mao--porta{
  opacity:1;transform:none;transition:opacity .6s var(--ease) .5s,transform .7s var(--mola) .5s;
}

@media (max-width:900px){.nota-mao--porta{display:none}}
@media (prefers-reduced-motion:reduce){.js .nota-mao--porta{opacity:1;transform:none}}

/* âncora correta da anotação do CTA: à esquerda do botão, apontando pra ele */
.nota-mao--porta{
  left:clamp(24px,24vw,300px);right:auto;top:auto;
  bottom:clamp(52px,6.4vw,84px);width:186px;text-align:left;
}
.nota-mao--porta .nota-mao__texto{transform:rotate(-5deg);transform-origin:left center;font-size:23px;display:block}
.nota-mao__seta--porta{width:80px;height:56px;margin:0 0 0 86px;transform:rotate(-2deg)}
@media (max-width:1100px){.nota-mao--porta{display:none}}

.nota-mao--porta{left:clamp(24px,17vw,242px);bottom:clamp(92px,10.5vw,146px);width:172px}
.nota-mao--porta .nota-mao__texto{font-size:22px}
.nota-mao__seta--porta{width:78px;height:54px;margin:0 0 0 96px;transform:rotate(-1deg)}

/* anotação do CTA: à direita do botão, apontando pra ele */
.nota-mao--porta{
  left:auto;right:clamp(24px,15vw,206px);
  bottom:clamp(74px,8.4vw,104px);width:176px;text-align:right;
}
.nota-mao--porta .nota-mao__texto{transform:rotate(4deg);transform-origin:right center;font-size:22px}
.nota-mao__seta--porta{width:78px;height:54px;margin:0 auto 0 0;transform:rotate(2deg)}

/* ---- hero no mobile: correções de contenção ---- */
@media (max-width:900px){
  .hero .hero__palco{display:block;min-height:0;place-items:initial}
  .hero .pecas{
    position:static;display:flex;align-items:flex-start;
    width:100%;max-width:100%;overflow-x:auto;
    gap:12px;padding:30px 2px 10px;margin:0;
  }
  .hero .peca{position:static;flex:0 0 auto;align-self:flex-start;width:auto}
  .hero .peca--foto{width:172px}
  .hero .peca--case{width:210px}
  .hero .peca--consulta,.hero .peca--prognostico{width:auto;max-width:210px}
  .hero .peca--contexto{max-width:230px}
  .hero .seal{position:static;margin:28px auto 0;transform:rotate(8deg);width:92px;height:92px}
  .hero__forma{top:-6%;width:130vw}
}

/* =========================================================
   BOTÕES: traço sólido + sombra dura, com badge de seta
   ========================================================= */
:root{--tracado:var(--tinta);--sombra-btn:var(--tinta)}

.btn{
  border:2px solid var(--tracado);
  box-shadow:5px 5px 0 var(--sombra-btn);
  border-radius:999px;
  padding:6px 8px 6px 24px;
  gap:14px;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background-color .2s,color .2s;
}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--sombra-btn)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--sombra-btn)}

.btn--primary{background:var(--violeta);color:#fff}
.btn--primary .btn__badge{background:var(--tinta);color:#fff;border-radius:11px;width:36px;height:36px;transform:none}
.btn--primary:hover{background:var(--violeta)}
.btn--primary:hover .btn__badge{transform:none}

.btn--paper{background:var(--papel);color:var(--tinta)}
.btn--paper .btn__badge{background:var(--tinta);color:var(--papel);border-radius:50%;width:36px;height:36px}
.btn--paper:hover{color:var(--tinta)}

/* dentro do card escuro o traço e a sombra viram violeta, senão somem */
.porta{--tracado:var(--violeta);--sombra-btn:var(--violeta)}

/* fantasma ganha o mesmo peso de traço */
.btn--ghost{
  border:0;border-bottom:2px solid var(--linha);border-radius:0;
  box-shadow:none;padding:14px 2px;
}
.btn--ghost:hover{transform:none;box-shadow:none;border-bottom-color:var(--violeta)}
.btn--ghost:active{transform:none}

/* =========================================================
   ILUSTRAÇÃO DA TESE
   ========================================================= */
.tese-ilu{
  margin:0;align-self:start;
  background:var(--card);border:2px solid var(--tinta);border-radius:20px;
  box-shadow:6px 6px 0 var(--tinta);overflow:hidden;
}
.tese-ilu img{width:100%;display:block;border:0;border-radius:0}
.tese-ilu__pe{
  display:flex;justify-content:space-between;gap:14px;
  padding:14px clamp(14px,1.6vw,20px);
  border-top:2px solid var(--tinta);background:var(--card);
  font-size:10px;letter-spacing:.13em;color:var(--apoio);
}
.tese-ilu__um{color:var(--violeta)}


/* tese: prosa centralizada contra a ilustração alta */
.tese__grid{grid-template-columns:1.08fr .92fr;align-items:center}
@media (max-width:900px){.tese__grid{grid-template-columns:1fr}}

@media (max-width:520px){
  .tese-ilu__pe{flex-direction:column;gap:5px}
  .tese-ilu__um{color:var(--violeta)}
}

.portrait--alt{aspect-ratio:3/4}
.tese__cta{margin:28px 0 0}

/* =========================================================
   MÉTODO: cabeçalho centralizado + quadro em escada
   ========================================================= */
.metodo__cabeca{max-width:740px;margin:0 auto;text-align:center}
.metodo__title{max-width:none;margin:0 auto}
.metodo__cabeca .sec__sub{margin:22px auto 0;max-width:60ch}

.selos{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.selo-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--tinta);color:var(--papel);
  border-radius:10px;padding:9px 15px;
  font-size:12.5px;letter-spacing:-.005em;
}
.selo-pill__marca{width:9px;height:9px;border-radius:2px;background:var(--violeta);flex:0 0 auto}

/* o quadro */
.quadro{position:relative;margin-top:clamp(38px,5vw,64px)}
.quadro__rolagem{overflow-x:auto;overflow-y:visible;padding:0 0 8px;-webkit-overflow-scrolling:touch}
.quadro__grade{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:14px 16px;min-width:940px;align-items:start;
  background-image:linear-gradient(to right,var(--linha) 1px,transparent 1px);
  background-size:calc(100%/5) 100%;
  padding:0 0 20px;
}
.quadro__col{
  grid-column:var(--c);grid-row:1;margin:0 6px 10px 6px;
  background:var(--lilas);border:1px solid var(--linha);border-radius:7px;
  padding:8px 10px;text-align:center;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--apoio);
}
.etapa-card{
  position:relative;
  grid-column:var(--c) / span var(--sp);
  grid-row:calc(var(--l) + 1);
  margin:0 6px;padding:16px 18px 18px;
  background:var(--lilas);
  border:2px solid var(--tinta);border-radius:14px;
  box-shadow:5px 5px 0 var(--tinta);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.etapa-card:nth-child(even){background:var(--card)}
.etapa-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--tinta)}
.etapa-card__nome{font-family:var(--ff-display);font-weight:600;font-size:17px;letter-spacing:-.02em;margin:0 0 7px;padding-right:38px}
.etapa-card__texto{font-size:12.6px;line-height:1.55;margin:0;color:var(--tinta)}
.etapa-card__num{
  position:absolute;top:14px;right:14px;
  background:var(--tinta);color:var(--papel);
  border-radius:7px;padding:4px 8px 5px;font-size:10.5px;letter-spacing:.08em;line-height:1;
}

.quadro__dica{display:none;font-size:10px;letter-spacing:.14em;color:var(--apoio);margin:10px 0 0}
.metodo__cta{margin:clamp(30px,4vw,46px) 0 0;text-align:center}

.nota-mao--quadro{
  position:absolute;left:auto;top:-52px;right:2%;width:190px;text-align:left;
  color:var(--violeta);pointer-events:none;z-index:3;
}
.nota-mao--quadro .nota-mao__texto{font-size:22px;transform:rotate(-4deg);transform-origin:left center;display:block}
.nota-mao__seta--quadro{width:76px;height:52px;margin:0 0 0 82px;transform:rotate(6deg)}
.js .nota-mao--quadro{opacity:0;transform:translateY(12px)}
.reveal.is-in .nota-mao--quadro{opacity:1;transform:none;transition:opacity .6s var(--ease) .5s,transform .7s var(--mola) .5s}

@media (max-width:1000px){
  .quadro__dica{display:block}
  .nota-mao--quadro{display:none}
}
@media (max-width:620px){
  .selos{gap:8px}
  .selo-pill{font-size:11.5px;padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){.js .nota-mao--quadro{opacity:1;transform:none}}

/* selos em duas linhas de dois, como na referência */
.selos{max-width:660px;margin-left:auto;margin-right:auto}

/* rótulos de coluna com contraste real */
.quadro__col{color:var(--tinta);opacity:.6;font-weight:500}

/* anotação ocupa o vazio da última coluna e aponta pra Alta */
.nota-mao--quadro{top:52%;right:3%;bottom:auto;width:172px;text-align:left}
.nota-mao--quadro .nota-mao__texto{font-size:21px}
.nota-mao__seta--quadro{width:72px;height:50px;margin:2px 0 0 74px;transform:rotate(10deg)}

/* retrato de quem assina no mesmo traço do sistema */
.portrait{border:2px solid var(--tinta);box-shadow:6px 6px 0 var(--tinta)}

/* =========================================================
   SEÇÃO DOS PACIENTES EM FUNDO ESCURO
   ========================================================= */
.sec--escura{
  background:var(--escuro);
  border-bottom:0;
  color:var(--papel);
  position:relative;
}
.sec--escura .eyebrow{color:#B9A6FF}
.sec--escura .sec__title{color:var(--papel)}
.sec--escura .sec__title em{color:#B9A6FF}
.sec--escura .sec__sub{color:rgba(247,245,240,.68)}

/* os cartões continuam claros, com sombra dura violeta */
.sec--escura .case{
  border-color:var(--escuro);
  box-shadow:7px 7px 0 var(--violeta);
  background:var(--card);color:var(--tinta);
}
.sec--escura .case:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--violeta)}
.sec--escura .case__img,.sec--escura .case__fita{border-bottom-color:var(--tinta)}
.sec--escura .case__head{color:var(--violeta)}
.sec--escura .case__status{border-color:var(--tinta);color:var(--tinta);opacity:.6}
.sec--escura .case__ver{color:var(--violeta)}

/* régua fina separando do que vem antes e depois */
.sec--escura::before,.sec--escura::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--tinta);
}
.sec--escura::before{top:0}
.sec--escura::after{bottom:0}

/* =========================================================
   NOTAS: lista e página de leitura
   ========================================================= */
.notas-lista{list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px)}
.nota-item{
  display:flex;flex-direction:column;height:100%;gap:10px;
  text-decoration:none;color:inherit;
  background:var(--card);border:2px solid var(--tinta);border-radius:18px;
  box-shadow:5px 5px 0 var(--tinta);padding:clamp(18px,2vw,24px);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.nota-item:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--tinta)}
.nota-item__meta{font-size:10px;letter-spacing:.15em;color:var(--apoio);margin:0}
.nota-item__titulo{font-family:var(--ff-display);font-weight:600;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;margin:0;line-height:1.2}
.nota-item__resumo{font-size:13.5px;line-height:1.55;margin:0;color:var(--tinta)}
.nota-item__ler{font-size:10.5px;letter-spacing:.14em;color:var(--violeta);margin-top:auto;padding-top:6px}
.notas__todas{margin:clamp(28px,3.5vw,40px) 0 0}
.notas__vazio{font-size:11.5px;letter-spacing:.14em;color:var(--apoio);margin:0;padding:38px 0;border-top:1px dotted var(--linha);border-bottom:1px dotted var(--linha)}

.sec--notas-topo{padding-bottom:0;border-bottom:0}
.sec--notas-topo .sec__title{max-width:18ch}

/* corpo da nota */
.sec--nota{border-bottom:0}
.nota-corpo{max-width:760px}
.nota-corpo__titulo{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(30px,4vw,50px);letter-spacing:-.035em;line-height:1.06;
  margin:0 0 18px;text-wrap:balance;
}
.nota-corpo__titulo em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--violeta);letter-spacing:0}
.nota-corpo__meta{font-size:10.5px;letter-spacing:.16em;color:var(--apoio);margin:0 0 clamp(30px,4vw,46px);padding-bottom:22px;border-bottom:1px dotted var(--linha)}
.nota-corpo__texto{max-width:66ch;font-size:clamp(16px,1.15vw,17.5px);line-height:1.78}
.nota-corpo__texto p{margin:0 0 1.3em}
.nota-corpo__abertura{font-size:1.12em;line-height:1.62}
.nota-corpo__texto h2{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(21px,2.1vw,27px);letter-spacing:-.025em;
  margin:2.2em 0 .7em;
}
.nota-corpo__texto ul{margin:0 0 1.3em;padding-left:1.1em}
.nota-corpo__texto li{margin-bottom:.5em}
.nota-corpo__texto blockquote{
  margin:1.8em 0;padding:2px 0 2px 22px;border-left:3px solid var(--violeta);
  font-family:var(--ff-serif);font-style:italic;font-size:1.24em;line-height:1.4;color:var(--tinta);
}
.nota-corpo__texto a{color:var(--violeta);text-decoration:none;border-bottom:1px solid rgba(107,79,216,.35)}
.nota-corpo__texto a:hover{border-bottom-color:var(--violeta)}
.nota-corpo__assinatura{
  margin:clamp(34px,4vw,50px) 0 0;padding-top:26px;border-top:1px dotted var(--linha);
  font-family:var(--ff-serif);font-style:italic;font-size:clamp(24px,2.6vw,32px);color:var(--violeta);line-height:1;
}

@media (max-width:900px){.notas-lista{grid-template-columns:1fr}}

/* =========================================================
   PÁGINA DE CASE NA LINGUAGEM ATUAL
   ========================================================= */
.case-hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,84px) 0 0}
.case-hero__nucleo{position:relative;z-index:5;max-width:820px;text-align:center;padding-bottom:clamp(34px,4.5vw,58px)}
.case-hero__title{
  font-size:clamp(32px,4.6vw,58px);letter-spacing:-.038em;line-height:1.04;
  margin:0 auto 20px;max-width:18ch;text-wrap:balance;
}
.case-hero__lead{max-width:56ch;margin:0 auto;color:var(--tinta)}
.case-hero__nucleo .selos{margin-top:28px}
/* carimbo: o nucleo e o titulo dividem a mesma caixa de 820px, entao o selo
   precisa sair dela. Sobe para a folga do padding e escorre para a margem
   livre, sem nunca passar da viewport. */
.case-hero .seal{position:absolute;top:-26px;left:auto;
  right:calc(-1 * min(62px, max(0px, (100vw - 892px) / 2)))}
.js .case-hero .seal{opacity:1}
.case-hero .seal{animation:carimbo .55s cubic-bezier(.2,1.4,.4,1) .45s forwards}  /* forwards, nao backwards: o estado base de .js .seal e scale(1.5), entao
     com backwards o carimbo terminava a animacao e voltava a 1,5x do tamanho */

.case-capa{border-top:2px solid var(--tinta);border-bottom:2px solid var(--tinta)}
.case-capa img{width:100%;display:block;border:0;border-radius:0}

/* ficha como placa sobreposta à capa */
.ficha--placa{
  position:relative;z-index:3;
  max-width:min(940px,calc(100% - 2 * var(--pad)));
  margin:-46px auto 0;padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px) clamp(14px,1.6vw,20px);
}
.ficha__linha{display:flex;flex-wrap:wrap;gap:14px 30px;margin:0}
.ficha__linha > div{flex:1 1 140px;display:block;padding:0;border:0}
.ficha__linha dt{
  display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--apoio);margin-bottom:5px;
}
.ficha__linha dd{
  margin:0;text-align:left;font-family:var(--ff-display);font-weight:500;
  font-size:14px;letter-spacing:-.01em;line-height:1.3;
}
.ficha__linha dd em{font-family:var(--ff-serif);font-style:italic;color:var(--violeta);font-size:1.1em}

/* marca centralizada */
.marca{margin-top:clamp(30px,4vw,46px)}

/* galeria sobre fundo escuro */
.sec--escura .galeria{margin-top:clamp(30px,4vw,48px)}
.sec--escura .figura img{border-color:var(--escuro);box-shadow:7px 7px 0 var(--violeta)}
.sec--escura .figura figcaption{color:rgba(247,245,240,.55)}
.galeria .figura--full{grid-column:1 / -1}

@media (max-width:900px){
  .case-hero .seal{right:2%;top:-6px;width:88px;height:88px}
  .ficha--placa{margin-top:-30px}
  .ficha__linha{gap:12px 22px}
}
@media (max-width:560px){
  .case-hero .seal{position:static;margin:22px auto 0;display:grid}
  .ficha--placa{margin-top:18px;max-width:calc(100% - 2 * var(--pad))}
  .ficha__linha > div{flex:1 1 100%}
}
.case-hero__nucleo .selos{max-width:560px}
@media (prefers-reduced-motion:reduce){.case-hero .seal{animation:none;transform:rotate(8deg)}}

/* placa horizontal: precisa vencer as regras base da ficha */
.ficha dl.ficha__linha{display:flex;flex-wrap:wrap;gap:16px 34px;margin:0}
.ficha dl.ficha__linha > div{
  display:block;flex:1 1 150px;padding:0;border:0;justify-content:flex-start;
}
.ficha dl.ficha__linha dt{
  display:block;flex:none;font-family:var(--ff-mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--apoio);margin:0 0 6px;
}
.ficha dl.ficha__linha dd{
  margin:0;text-align:left;font-family:var(--ff-display);font-weight:500;
  font-size:14px;letter-spacing:-.01em;line-height:1.32;
}

/* =========================================================
   BENTO DA CONDUÇÃO
   ========================================================= */
.bento{
  list-style:none;margin:clamp(36px,4.6vw,58px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px);
  align-items:start;
}
.bento__box{
  position:relative;
  background:var(--card);color:var(--tinta);
  border:2px solid var(--tinta);border-radius:20px;
  box-shadow:6px 6px 0 var(--tinta);
  padding:clamp(20px,2.2vw,28px);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.bento__box:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--tinta)}
.bento__box--lilas{background:var(--lilas)}
.bento__box--escura{background:var(--escuro);color:var(--papel);box-shadow:6px 6px 0 var(--violeta)}
.bento__box--escura:hover{box-shadow:9px 9px 0 var(--violeta)}
.bento__box--larga{grid-column:span 2}
.bento__box--nota{grid-column:1 / -1;display:flex;gap:clamp(16px,2vw,24px);align-items:flex-start;background:var(--papel)}

.bento__rotulo{
  display:inline-block;margin:0 0 14px;
  background:var(--tinta);color:var(--papel);
  border-radius:8px;padding:5px 10px 6px;
  font-size:10.5px;letter-spacing:.12em;line-height:1;
}
.bento__box--escura .bento__rotulo{background:var(--violeta);color:#fff}
.bento__titulo{
  font-family:var(--ff-display);font-weight:600;
  font-size:clamp(19px,1.75vw,23px);letter-spacing:-.02em;
  margin:0 0 10px;line-height:1.18;
}
.bento__texto{font-size:14px;line-height:1.62;margin:0;color:inherit}
.bento__box--escura .bento__texto{color:rgba(247,245,240,.76)}

/* badge flutuante, sobreposto à borda */
.bento__flutua{
  position:absolute;top:-14px;right:18px;z-index:2;
  background:var(--violeta);color:#fff;
  border:2px solid var(--tinta);border-radius:999px;
  padding:6px 14px 7px;font-size:10px;letter-spacing:.12em;line-height:1;
  box-shadow:3px 3px 0 var(--tinta);
}

/* lista com marca de conferido */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.checks li{position:relative;padding-left:30px;font-size:14px;line-height:1.5}
.checks li::before{
  content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--violeta);
}
.checks li::after{
  content:"";position:absolute;left:5.5px;top:7px;width:8px;height:4.5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}

/* caixa de observação */
.bento__alerta{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:2px solid var(--violeta);color:var(--violeta);
  display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:600;font-size:19px;line-height:1;
}
.bento__box--nota .bento__texto{max-width:76ch}

@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__box--larga{grid-column:span 2}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .bento__box--larga,.bento__box--nota{grid-column:span 1}
  .bento__box--nota{flex-direction:column;gap:14px}
}

/* =========================================================
   LUPA: ampliar imagens da galeria
   ========================================================= */
.figura__ampliar{
  display:block;position:relative;width:100%;padding:0;margin:0;
  border:0;background:none;cursor:zoom-in;border-radius:18px;
  -webkit-appearance:none;appearance:none;
}
.figura__ampliar img{display:block;width:100%}
.figura__lupa{
  position:absolute;right:12px;bottom:12px;width:38px;height:38px;
  border-radius:50%;background:var(--papel);color:var(--tinta);
  border:2px solid var(--tinta);display:grid;place-items:center;
  opacity:0;transform:scale(.85);
  transition:opacity .25s var(--ease),transform .25s var(--mola);
}
.figura__lupa svg{width:16px;height:16px}
.figura__ampliar:hover .figura__lupa,.figura__ampliar:focus-visible .figura__lupa{opacity:1;transform:none}

.lupa{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;
  padding:clamp(16px,4vw,52px);
  background:rgba(42,34,51,.94);
}
.lupa.is-aberta{display:flex;animation:lupa-entra .28s var(--ease)}
@keyframes lupa-entra{from{opacity:0}to{opacity:1}}
.lupa__palco{margin:0;max-width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px}
.lupa__palco img{
  display:block;max-width:100%;max-height:calc(100vh - 150px);
  width:auto;height:auto;object-fit:contain;
  border:2px solid var(--papel);border-radius:14px;background:var(--card);
}
.lupa__palco figcaption{
  font-size:10.5px;letter-spacing:.16em;color:rgba(247,245,240,.62);text-align:center;
}
.lupa__fechar{
  position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px);
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:var(--papel);color:var(--tinta);border:2px solid var(--tinta);
  display:grid;place-items:center;
  transition:transform .18s var(--mola);
}
.lupa__fechar svg{width:19px;height:19px}
.lupa__fechar:hover{transform:scale(1.07)}
body.sem-rolagem{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .lupa.is-aberta{animation:none}
  .figura__lupa{opacity:1;transform:none}
}

/* em telas de toque não existe hover: a lupa fica sempre visível */
@media (hover:none){.figura__lupa{opacity:1;transform:none}}

/* =========================================================
   HERO MAIS LIMPO: as peças voltam a ser decorativas
   ========================================================= */
.peca{transition:none;cursor:default}
.peca:hover{transform:rotate(var(--giro));box-shadow:6px 6px 0 var(--tinta);z-index:auto}
.peca--foto{left:2%;top:6%}
.peca--consulta{left:6%;bottom:12%}
.peca--prognostico{right:8%;top:10%}
.peca--contexto{right:5%;bottom:8%}

/* texto só para leitor de tela */
.sr-apenas{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================
   LETREIRO EM LOOP
   ========================================================= */
.faixa{
  background:var(--tinta);color:var(--papel);
  border-top:2px solid var(--tinta);border-bottom:2px solid var(--tinta);
  overflow:hidden;padding:15px 0;position:relative;
}
.faixa__trilho{display:flex;width:max-content;animation:desliza 42s linear infinite}
.faixa:hover .faixa__trilho{animation-play-state:paused}
.faixa__lista{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:0}
.faixa__lista li{
  position:relative;white-space:nowrap;padding:0 26px;
  font-family:var(--ff-display);font-weight:500;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--papel);
}
.faixa__lista li::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--violeta);
}
.faixa__marco{color:#B9A6FF}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:620px){
  .faixa__lista li{font-size:11.5px;padding:0 18px}
  .faixa__trilho{animation-duration:30s}
}
@media (prefers-reduced-motion:reduce){
  .faixa__trilho{animation:none}
}
.peca--prognostico{right:7%;top:24%}
@media (max-width:1180px){.peca--prognostico{display:none}}

/* =========================================================
   TRAÇO SÓLIDO EM TODAS AS SUPERFÍCIES
   (bloco recuperado: uma limpeza anterior o havia removido)
   ========================================================= */
.case,.stat,.consulta,.ficha,.bloco,.marca,.peca{
  border:2px solid var(--tinta);
  box-shadow:6px 6px 0 var(--tinta);
}
.peca{border-radius:16px}
.case:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--tinta)}
.stat--dark{border-color:var(--tinta);box-shadow:6px 6px 0 var(--violeta)}
.porta{border:2px solid var(--tinta);box-shadow:8px 8px 0 var(--violeta)}
.case__img{border-bottom:2px solid var(--tinta)}
.figura img{border:2px solid var(--tinta)}
.case__fita{height:7px;border-bottom:2px solid var(--tinta)}
.case__status{border:1.5px solid var(--tinta);color:var(--tinta);opacity:.62}

/* peças do hero continuam decorativas: sem reação ao passar o mouse */
.peca{transition:none;cursor:default}
.peca:hover{transform:rotate(var(--giro));box-shadow:6px 6px 0 var(--tinta);z-index:auto}

/* a seção escura precisa vir depois, senão o traço tinta some no fundo */
.sec--escura .case{border-color:var(--escuro);box-shadow:7px 7px 0 var(--violeta)}
.sec--escura .case:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--violeta)}
.sec--escura .figura img{border-color:var(--escuro);box-shadow:7px 7px 0 var(--violeta)}
.faixa__lista li.faixa__marco{color:#B9A6FF}

/* letreiro: ciclo exato de uma lista, velocidade constante */
.faixa__trilho{animation-duration:var(--duracao,42s)}
@keyframes desliza{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--ciclo, 50%)))}
}

/* =========================================================
   HERO: só a foto e o carimbo, com mais presença
   ========================================================= */
.peca--foto{
  left:3%;top:50%;margin-top:-19vh;
  width:clamp(200px,19vw,272px);
  padding:12px 12px 8px;
}
.peca--foto figcaption{font-size:9.5px;padding:11px 0 4px}
.hero .seal{
  right:4%;top:50%;margin-top:-15vh;
  width:clamp(112px,10.5vw,148px);height:clamp(112px,10.5vw,148px);
  border-width:2px;
}
.hero .seal__ring{inset:9px}
.hero .seal__type{font-size:8.6px}
.hero .seal__type--base{font-size:6.9px}
.hero .seal__core{font-size:12px}
.nota-mao{left:17%;top:8%}

@media (max-width:1180px){
  .peca--foto{left:1%;width:clamp(180px,18vw,230px)}
  .hero .seal{right:2%}
  .nota-mao{left:15%;top:5%}
}
@media (max-width:900px){
  .peca--foto{margin-top:0}
  .hero .seal{margin-top:0}
}

/* =========================================================
   HERO EM TRÊS COLUNAS: foto, texto, carimbo
   Sem posicionamento absoluto, então nada colide.
   ========================================================= */
.hero__palco{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(18px,3vw,54px);
  min-height:clamp(500px,68vh,660px);
  place-items:center;
}
.hero__nucleo{grid-column:2;max-width:620px;margin:0 auto}

.peca--foto{
  position:static;grid-column:1;grid-row:1;
  left:auto;top:auto;margin:0;
  width:clamp(168px,17vw,248px);
  padding:12px 12px 8px;
  align-self:center;justify-self:start;
}
.hero .seal{
  position:static;grid-column:3;grid-row:1;
  right:auto;top:auto;left:auto;margin:0;
  align-self:center;justify-self:end;
  width:clamp(104px,10vw,142px);height:clamp(104px,10vw,142px);
}
.nota-mao{position:absolute;left:2%;top:2%;z-index:6}

@media (max-width:1080px){
  .hero__palco{grid-template-columns:auto minmax(0,1fr)}
  .hero__nucleo{max-width:none}
  .hero .seal{grid-column:2;grid-row:2;justify-self:center;margin-top:8px}
  .nota-mao{display:none}
}
@media (max-width:900px){
  .hero__palco{
    display:grid;grid-template-columns:1fr;justify-items:center;
    min-height:0;gap:26px;
  }
  .hero__nucleo{grid-column:1;grid-row:1}
  .peca--foto{grid-column:1;grid-row:2;justify-self:center;width:min(230px,62vw)}
  .hero .seal{grid-column:1;grid-row:3;justify-self:center;margin:0}
}

/* marca isolada sobre o próprio fundo institucional, quando a versão é clara */
.marca--fundo{background:var(--fundo-marca,var(--card))}
.marca--fundo figcaption{color:rgba(247,245,240,.55)}

/* =========================================================
   ANOTAÇÕES À MÃO: posição por variante
   A regra base não fixa mais coordenadas, senão ela vence
   as variantes por ordem de cascata.
   ========================================================= */
.nota-mao{position:absolute;left:auto;right:auto;top:auto;bottom:auto;z-index:6;pointer-events:none}

.nota-mao--hero{left:5%;top:5%;width:190px;text-align:left}  /* top baixo de proposito: a foto e girada, o canto superior sobe, e a
     segunda linha da anotacao encostava na borda do cartao nos dois idiomas */
.nota-mao--hero .nota-mao__texto{transform:rotate(-7deg);transform-origin:left center;font-size:26px}
.nota-mao--hero .nota-mao__seta{width:92px;height:64px;margin:2px 0 0 14px;transform:rotate(2deg)}

.nota-mao--quadro{right:3%;top:52%;width:172px;text-align:left}
.nota-mao--porta{right:clamp(24px,15vw,214px);bottom:clamp(84px,10.5vw,116px);width:176px;text-align:right}

@media (max-width:1180px){.nota-mao--hero{left:3%;top:3%}}
@media (max-width:1000px){.nota-mao--quadro{display:none}}
@media (max-width:1100px){.nota-mao--porta{display:none}}
@media (max-width:900px){.nota-mao--hero{display:none}}

/* =========================================================
   QUADRO NO MOBILE: vira lista, cada caixa com a sua fase
   Abaixo de 1000px o cronograma não cabe, e arrastar de lado
   esconde conteúdo. Então ele deixa de ser quadro.
   ========================================================= */
.etapa-card__fase{display:none}

@media (max-width:1000px){
  .quadro__rolagem{overflow-x:visible;padding:0}
  .quadro__grade{
    display:flex;flex-direction:column;gap:14px;
    min-width:0;padding:0;background-image:none;
  }
  .quadro__col{display:none}
  .etapa-card{margin:0;grid-column:auto;grid-row:auto;padding-top:14px}
  .etapa-card__fase{
    display:inline-block;margin:0 0 12px;
    background:var(--lilas);border:1px solid var(--linha);border-radius:7px;
    padding:6px 11px 7px;line-height:1;
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--tinta);opacity:.62;font-weight:500;
  }
  .etapa-card__num{top:16px;right:16px}
  .etapa-card__nome{padding-right:52px}
  .quadro__dica{display:none}
}

/* marca que já traz o próprio fundo: vira placa sobre o cartão */
.marca--placa img{
  max-width:min(500px,88%);border-radius:12px;
  border:1px solid rgba(42,34,51,.14);
}

/* ============================================================
   VERSÃO EM INGLÊS: seletor de idioma e formulário de contato
   Nada aqui é usado pelas páginas em português, mas mora no
   mesmo arquivo de propósito: uma folha só para os dois idiomas.
   ============================================================ */

/* seletor PT / EN no cabeçalho, no lugar do registro */
.idioma{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em}
.idioma a{color:var(--apoio);text-decoration:none;transition:color .2s}
.idioma a:hover{color:var(--violeta)}
.idioma__sep{color:var(--linha)}
.idioma__ativo{color:var(--tinta)}

/* o formulário vive dentro do card escuro da porta */
.porta--form{text-align:left}
.porta--form .porta__eyebrow,
.porta--form .porta__text{text-align:center}
.porta--form .porta__text{margin-bottom:clamp(30px,4vw,44px)}

.form{max-width:620px;margin:0 auto}
.form__par{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.campo{display:block;margin:0 0 20px;border:0;padding:0}
.campo__rot{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,245,240,.55);margin-bottom:9px}
.campo__opt{text-transform:none;letter-spacing:.06em;opacity:.7}

.campo__in{
  width:100%;box-sizing:border-box;
  font-family:var(--ff-body);font-size:15px;color:var(--papel);
  background:rgba(247,245,240,.06);
  border:1.5px solid rgba(247,245,240,.22);border-radius:12px;
  padding:13px 15px;transition:border-color .2s,background .2s;
}
.campo__in::placeholder{color:rgba(247,245,240,.35)}
.campo__in:focus{outline:0;border-color:#B9A6FF;background:rgba(247,245,240,.1)}
.campo__in:user-invalid{border-color:#E8A0A0}
textarea.campo__in{resize:vertical;min-height:76px;line-height:1.5}

/* "what do you need": rádios desenhados como as pílulas do método */
.campo--opcoes{margin-bottom:22px}
.opcoes{display:flex;flex-wrap:wrap;gap:9px}
.opcao{position:relative;display:inline-flex}
.opcao input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opcao span{
  display:inline-flex;align-items:center;
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.02em;
  color:rgba(247,245,240,.7);
  border:1.5px solid rgba(247,245,240,.22);border-radius:999px;
  padding:9px 16px;transition:all .2s;
}
.opcao input:hover + span{border-color:rgba(247,245,240,.45);color:var(--papel)}
.opcao input:checked + span{background:var(--papel);border-color:var(--papel);color:var(--escuro)}
.opcao input:focus-visible + span{outline:2px solid #B9A6FF;outline-offset:3px}

.form__acao{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;margin:28px 0 0}
.form__ou{font-size:11.5px;color:rgba(247,245,240,.5)}
.form__ou a{color:rgba(247,245,240,.8);text-decoration:underline;text-underline-offset:3px}
.form__ou a:hover{color:#B9A6FF}

/* armadilha de robô: fora da tela, mas não display:none, que alguns robôs detectam */
.form__mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* aviso depois do envio */
.form__aviso{
  max-width:620px;margin:0 auto clamp(24px,3vw,32px);
  font-family:var(--ff-mono);font-size:12.5px;line-height:1.6;text-align:left;
  border-radius:12px;padding:15px 18px;border:1.5px solid;
}
.form__aviso--ok{border-color:#B9A6FF;background:rgba(185,166,255,.12);color:#DCD2FF}
.form__aviso--erro{border-color:#E8A0A0;background:rgba(232,160,160,.12);color:#F3C9C9}

@media (max-width:640px){
  .form__par{grid-template-columns:1fr;gap:0}
  .form__acao{gap:14px}
  .form__ou{flex:1 1 100%}
}

/* a anotação da porta assume que o card está quase vazio. Com o formulário
   dentro, ela cai sobre o campo de mensagem: aqui ela vai para a calha
   livre à direita do formulário, que tem 620px num card bem mais largo. */
.porta--form .nota-mao--porta{
  right:clamp(14px,2.4vw,34px);
  bottom:clamp(34px,4.4vw,58px);
  width:158px;
}
@media (max-width:1080px){
  /* abaixo disso o formulário ocupa a largura toda e não sobra calha */
  .porta--form .nota-mao--porta{display:none}
}

/* =========================================================
   HOME REORGANIZADA (22.09): chegada, entrega, perguntas
   Só acrescenta regras. Nenhuma regra anterior foi alterada,
   então as páginas ainda em ?v=4 não mudam de aparência.
   ========================================================= */

/* problema: o fecho ganha a consequência comercial */
.descarte__fecho strong{font-weight:500;color:var(--tinta)}
.descarte__fecho + .descarte__fecho{margin-top:1.15em}
.descarte__fecho--forte{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em;line-height:1.35;
}
.descarte__fecho--forte em{font-family:var(--ff-serif);font-style:italic;font-weight:400;color:var(--violeta);letter-spacing:0;font-size:1.08em}

/* a chegada */
.chegada__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);
  margin-top:clamp(32px,4.5vw,52px);align-items:center;
}
.chegada__ficha{margin-top:0;max-width:none}
.chegada__lista{list-style:none;margin:0;padding:0}
.chegada__lista li{
  display:flex;align-items:baseline;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--regua);
  font-family:var(--ff-display);font-weight:500;font-size:clamp(17px,1.6vw,20px);
  letter-spacing:-.015em;line-height:1.3;
}
.chegada__lista li:last-child{border-bottom:0;padding-bottom:0}
.chegada__lista .mono{flex:0 0 auto;font-size:11px;letter-spacing:.12em;color:var(--violeta)}
.chegada__fecho{
  margin-top:24px;padding-top:22px;border-top:1px dotted var(--linha);
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.015em;line-height:1.4;
}

/* o que você recebe */
.entrega .bento__titulo{margin-bottom:16px}
.entrega .bento__box{height:100%}
.entrega{align-items:stretch}
@media (min-width:641px) and (max-width:980px){
  .entrega .bento__box:last-child{grid-column:span 2}
}

/* cases: a linha de conduta fecha o cartão, mais discreta */
.case__line--conduta{font-size:13px;color:var(--apoio)}

/* perguntas */
.faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px);align-items:start}
.faq__cabeca{position:sticky;top:96px}
.faq__item{border-bottom:1px dotted var(--linha)}
.faq__item:first-child{border-top:1px dotted var(--linha)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.015em;line-height:1.3;
  transition:color .2s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";flex:0 0 auto;font-family:var(--ff-mono);font-size:20px;line-height:1;
  color:var(--violeta);transition:transform .25s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:hover{color:var(--violeta)}
.faq__item summary:focus-visible{outline:2px solid var(--violeta);outline-offset:3px;border-radius:4px}
.faq__item p{margin:0 0 22px;max-width:60ch;font-size:15.5px;line-height:1.68}

/* porta: a anotação agora se prende ao botão, não ao fundo do card.
   Assim qualquer texto novo acima ou abaixo não a derruba de novo. */
.porta__acao{position:relative;display:inline-block}
.porta__acao .nota-mao--porta{right:auto;left:calc(100% + 16px);bottom:38px}
/* abaixo de 1220 a última linha do título desce até a altura da anotação
   (medido: colidia de 1101 a 1180; no layout anterior ia além de 1260) */
@media (max-width:1219px){.porta__acao .nota-mao--porta{display:none}}
.porta__apoio{margin:26px 0 0;font-size:11px;letter-spacing:.12em;color:rgba(247,245,240,.55)}

@media (max-width:900px){
  .chegada__grid,.faq__grid{grid-template-columns:1fr}
  .faq__cabeca{position:static}
}