*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#FFFFFF; --bg-2:#F5F2F9; --surface:#FFFFFF;
  --ink:#140E1C; --ink-2:#4B4256; --ink-3:#8B8296;
  --roxo:#5A23A8; --roxo-claro:#7C4DCB; --roxo-fundo:#2A0F52;
  --magenta:#C81E6E; --laranja:#E85D26;
  --line:rgba(20,14,28,.14);
  --moldura:#D8D2E0;
  --cartaz:'Anton',Impact,sans-serif;
  --maquina:'Special Elite','Courier New',monospace;
  --corpo:'Poppins',system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--corpo);font-size:16px;line-height:1.6;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* luz suave no topo + grão */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 560px at 10% -8%,rgba(90,35,168,.10),transparent 68%);}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}

.wrap{max-width:min(1680px,93vw);margin:0 auto;padding:0 clamp(24px,2.6vw,56px);position:relative;z-index:1;}
@media(max-width:600px){.wrap{max-width:100%;padding:0 16px;}}

/* item de grid não encolhe abaixo do conteúdo por padrão (min-width:auto),
   e com overflow-x:hidden no body isso vira texto cortado no celular. */
.hero-grid>*,.tese-grid>*,.case-grid>*,.passos>*,.saidas>*,.nums>*,.mat>*,.reels>*{min-width:0;}
.ad,.mat,.nums,.reels{max-width:100%;}

/* ============ TIPOGRAFIA ============ */
.cartaz{font-family:var(--cartaz);font-weight:400;text-transform:uppercase;
        line-height:1;letter-spacing:.004em;}
.gigante{font-size:clamp(3.2rem,13.5vw,9.5rem);}
.grande{font-size:clamp(2.4rem,8vw,5.4rem);}
.rotulo{font-family:var(--maquina);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
        color:var(--ink-3);}
.corpo-txt{font-size:clamp(.95rem,1.6vw,1.05rem);color:var(--ink-2);max-width:40ch;line-height:1.72;}
@media(min-width:1280px){.corpo-txt{max-width:46ch;}}
.corpo-txt strong{color:var(--ink);font-weight:600;}
.corpo-txt + .corpo-txt{margin-top:1rem;}

.nav{position:sticky;top:0;z-index:6;background:rgba(255,255,255,.86);
     backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
           padding-top:.85rem;padding-bottom:.85rem;}
.nav .marca{font-family:var(--cartaz);text-transform:uppercase;font-size:1.05rem;
            letter-spacing:.02em;text-decoration:none;color:var(--ink);}
.nav .links{display:flex;gap:1.3rem;}
.nav .links a{font-family:var(--maquina);font-size:.76rem;letter-spacing:.08em;
              text-decoration:none;color:var(--ink-2);}
.nav .links a:hover{color:var(--roxo);}
@media(max-width:700px){
  .nav .wrap{gap:.8rem;}
  .nav .marca{font-size:.92rem;white-space:nowrap;}
  .nav .links{gap:.7rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
              -webkit-overflow-scrolling:touch;}
  .nav .links::-webkit-scrollbar{display:none;}
  .nav .links a{font-size:.58rem;letter-spacing:.03em;white-space:nowrap;}
  .so-desk{display:none;}
}
.hero{padding-top:3rem;}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:6rem 0 0;position:relative;
       overflow:hidden;}
/* o wrap é item de flex: sem width:100% ele encolhe até o conteúdo e o auto-margin o centraliza */
.hero .wrap{position:relative;width:100%;padding-bottom:4.5rem;}
.hero.sem-foto{min-height:auto;padding-top:4.5rem;}
.hero.sem-foto .wrap{padding-bottom:2.5rem;}
.hero-grid{display:block;width:100%;position:relative;}
.hero-tipo{position:relative;z-index:1;}
.hero-tipo .linha2{color:var(--roxo);}
.riscado{position:relative;color:var(--ink-3);}
.riscado::after{content:"";position:absolute;left:-.01em;right:-.01em;top:52%;height:.055em;
                background:var(--roxo);transform:rotate(-1.4deg);}
.selo-autoral{margin-top:1.6rem;font-family:var(--maquina);font-size:.74rem;
              letter-spacing:.03em;color:var(--ink-3);max-width:40ch;}
.selo-autoral::before{content:"✎";margin-right:.5rem;color:var(--roxo);}
.hero-eyebrow{display:block;margin-bottom:1.4rem;}
/* o título pode atravessar a foto; o texto de leitura, não */
.terminal,.hero-eyebrow,.hero-sub{max-width:min(54%,34em);}
.hero-sub{margin-top:1.8rem;}

/* ============ OLHO (frase em destaque) ============ */
.olho{padding:clamp(4rem,10vw,8rem) 0;}
.olho p{font-family:var(--maquina);font-size:clamp(1.3rem,3.6vw,2.2rem);line-height:1.42;
        max-width:24em;margin:0 auto;text-align:center;color:var(--ink);}
.olho em{font-style:normal;color:var(--roxo);}
.olho-inline{margin:2.5rem 0;}
.olho-inline .lbl{display:block;font-family:var(--maquina);font-size:.62rem;
                  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);
                  margin-bottom:.75rem;}
.olho-inline .frase{display:block;font-family:var(--cartaz);font-weight:400;
                    text-transform:uppercase;line-height:1;
                    font-size:clamp(1.9rem,4.6vw,3rem);color:var(--roxo);}
.case.faixa .olho-inline .frase{color:#fff;}
.case.faixa .olho-inline .lbl{color:rgba(255,255,255,.7);}
.credencial{display:block;margin-top:1.8rem;padding:1.15rem 1.35rem;
            border:1px solid var(--line);font-family:var(--maquina);
            font-size:.86rem;line-height:1.6;}
.credencial b{color:var(--roxo);}
.case.faixa .credencial{border-color:rgba(255,255,255,.45);}
.case.faixa .credencial b{color:#fff;}
@media(max-width:600px){.olho{padding:3.2rem 0;}.olho p{text-align:left;}}
.hero-foto{position:absolute;right:-2%;bottom:0;width:42%;max-width:560px;
           pointer-events:none;z-index:0;}
.hero-foto img{width:100%;filter:grayscale(1) contrast(1.04);border-radius:4px;
               -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%),
                                  linear-gradient(to left,#000 86%,transparent 100%);
               -webkit-mask-composite:source-in;
               mask-image:linear-gradient(to bottom,#000 80%,transparent 100%),
                          linear-gradient(to left,#000 86%,transparent 100%);
               mask-composite:intersect;}
@media(max-width:899px){
  .hero{align-items:flex-start;padding-top:5.5rem;}
  .terminal,.hero-eyebrow,.hero-sub{max-width:100%;}
  /* no estreito ela vira retrato redondo no fim do bloco */
  .hero-foto{position:static;width:clamp(132px,38vw,190px);max-width:none;margin:2.2rem 0 0;}
  .hero-foto img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 18%;
                 border-radius:50%;-webkit-mask-image:none;mask-image:none;
                 border:3px solid var(--bg);box-shadow:0 0 0 2px var(--ink);}
}

/* terminal */
.terminal{font-family:var(--maquina);font-size:clamp(.9rem,2.3vw,1.15rem);line-height:1.6;
          min-height:3.4em;margin-bottom:2.4rem;color:var(--ink-2);}
.terminal .pr{color:var(--roxo);margin-right:.5rem;}
.cursor{display:inline-block;width:.55em;height:1em;background:var(--roxo);
        vertical-align:-.12em;margin-left:.1em;animation:blink 1s steps(1) infinite;}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ============ SEÇÃO ============ */
section{padding:7rem 0;position:relative;}
@media(max-width:600px){section{padding:4.5rem 0;}}
.sec-head{margin-bottom:3.5rem;}
.sec-head .rotulo{display:block;margin-bottom:1.1rem;}

/* ============ TESE ============ */
.tese{background:var(--bg-2);}
.tese-grid{display:grid;grid-template-columns:1fr;gap:2.4rem;}
@media(min-width:900px){.tese-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}}
.tese-frase{font-family:var(--cartaz);text-transform:uppercase;line-height:1;
            font-size:clamp(1.7rem,4.2vw,2.9rem);}
.tese-frase em{font-style:normal;color:var(--roxo);}

/* páginas de manual, lado a lado em largura cheia */
.manual{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-top:2.6rem;}
@media(min-width:760px){.manual{grid-template-columns:repeat(3,1fr);gap:1rem;}}
.manual figure{margin:0;display:flex;flex-direction:column;}
.manual img{width:100%;height:auto;border-radius:10px;display:block;}
.manual figcaption{font-family:var(--maquina);font-size:.62rem;letter-spacing:.14em;
                   text-transform:uppercase;margin-top:auto;padding-top:.7rem;opacity:.72;}

/* ============ CASES ============ */
.case{padding:5.5rem 0;border-top:1px solid var(--line);}
@media(max-width:600px){.case{padding:3.5rem 0;}}
.case-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start;}
@media(min-width:900px){
  .case-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem;}
  .case.inv .case-grid{grid-template-columns:.95fr 1.05fr;}
  .case.inv .col-tipo{order:2;}
  .case.inv .col-mat{order:1;}
@media(min-width:1280px){
  .case-grid{grid-template-columns:.84fr 1.16fr;gap:4.5rem;}
  .case.inv .case-grid{grid-template-columns:1.16fr .84fr;}
}
}
.case-nome{margin-bottom:.9rem;}
.case-nome .sub{display:block;font-family:var(--corpo);font-size:.78rem;letter-spacing:.18em;
                text-transform:uppercase;color:var(--roxo);margin-bottom:.7rem;font-weight:600;}
.case-papel{font-family:var(--maquina);font-size:.74rem;color:var(--ink-3);margin-bottom:1.6rem;
            letter-spacing:.04em;}
.selo{display:inline-block;font-family:var(--maquina);font-size:.64rem;letter-spacing:.14em;
      text-transform:uppercase;color:#fff;background:var(--roxo);
      padding:.3rem .62rem;border-radius:2px;margin-bottom:1.1rem;}

/* device antes/depois */
.ad{border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:0 0 1.6rem;background:var(--surface);}
.ad-antes{padding:1rem 1.15rem;background:var(--bg-2);border-bottom:1px solid var(--line);}
.ad-depois{padding:1.15rem 1.15rem 1.3rem;}
.ad-lbl{display:block;font-family:var(--maquina);font-size:.6rem;letter-spacing:.24em;
        text-transform:uppercase;color:var(--ink-3);margin-bottom:.55rem;}
.ad-antes .vazio{font-family:var(--maquina);color:var(--ink-3);font-size:.92rem;}
.ad-depois .typed{font-family:var(--maquina);font-size:.95rem;line-height:1.58;color:var(--ink);
                  white-space:pre-wrap;overflow-wrap:anywhere;}
@media(max-width:600px){
  .ad-depois .typed{font-size:.86rem;}
  .ad-antes .vazio{font-size:.84rem;}
  .nums{grid-template-columns:1fr 1fr;}
}

/* números */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
      background:var(--line);border:1px solid var(--line);margin:1.6rem 0 0;}
.nums div{background:var(--bg-2);padding:.95rem .8rem;}
.nums b{display:block;font-family:var(--cartaz);font-size:1.75rem;color:var(--roxo);line-height:1;}
.nums span{display:block;font-size:.68rem;color:var(--ink-3);margin-top:.4rem;line-height:1.35;}

/* imagens: cantos generosos, escalas diferentes */
.mat{display:grid;gap:.9rem;}
.mat img{border-radius:18px;width:100%;height:auto;filter:contrast(1.03);}
.mat img[style*="aspect-ratio"],.mat.duo>img,.mat.tri>img{object-fit:cover;}
.mat.duo{grid-template-columns:1fr 1fr;}
.mat.duo > img:first-child{aspect-ratio:3/4;}
.mat.duo > img:last-child{aspect-ratio:3/4;margin-top:2.2rem;}
.mat.solo img{aspect-ratio:4/3;}
.mat.tri{grid-template-columns:1fr 1fr;}
.mat.tri > img:first-child{grid-column:1/-1;aspect-ratio:16/10;}
.mat.tri > img:not(:first-child){aspect-ratio:1;}

/* ---- mockup de notebook ---- */
.note{position:relative;}
.note .tela{background:#fff;border:10px solid #1B1520;border-radius:14px 14px 3px 3px;
            overflow:hidden;aspect-ratio:16/10;}
.note .tela img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0;}
.note .base{height:11px;background:linear-gradient(#CFC8D8,#A79DB4);border-radius:0 0 11px 11px;
            margin:0 -5%;position:relative;}
.note .base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
                   width:58px;height:4px;background:#8D849C;border-radius:0 0 5px 5px;}

/* ---- mockup de celular ---- */
.fone{position:relative;border:9px solid #1B1520;border-radius:30px;overflow:hidden;
      background:#000;aspect-ratio:430/932;box-shadow:0 16px 40px rgba(20,14,28,.22);}
.fone img,.fone video{width:100%;height:100%;object-fit:cover;object-position:top;
                      border-radius:0;display:block;}
.fone::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
              width:74px;height:18px;background:#1B1520;border-radius:11px;z-index:2;}

/* ---- vitrine: celular ao centro, vídeos ao lado ---- */
.vitrine{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem;align-items:start;}
.vitrine .coluna{display:grid;gap:1rem;}
.vitrine .reel{aspect-ratio:9/16;}
@media(max-width:600px){.vitrine{grid-template-columns:1fr;}}

/* ---- faixa com a cor da marca do cliente ---- */
.case.faixa{background:var(--cor);color:var(--cor-txt);border-top:0;}
.case.faixa .case-papel,.case.faixa .corpo-txt,.case.faixa .legenda,.case.faixa .trio p{color:rgba(255,255,255,.82);}
.case.faixa .corpo-txt strong,.case.faixa .trio h4{color:var(--cor-txt);}
.case.faixa .case-nome .sub{color:rgba(255,255,255,.9);}
.case.faixa .selo{background:#fff;color:var(--cor);}
.case.faixa .citado{border-left-color:rgba(255,255,255,.6);}
.case.faixa .citado p{color:var(--cor-txt);}
.case.faixa .citado span{color:rgba(255,255,255,.65);}
.case.faixa .case-corpo a{color:#fff;border-bottom-color:rgba(255,255,255,.5);}
.case.faixa .trio{border-color:rgba(255,255,255,.28);}
.case.faixa .trio div{border-color:rgba(255,255,255,.28);}

/* peça de marca em vídeo */
.peca{border-radius:14px;overflow:hidden;background:rgba(0,0,0,.14);}
.peca video{width:100%;display:block;}

/* três colunas curtas no pé do case */
.trio{display:grid;grid-template-columns:1fr;gap:0;margin-top:3rem;
      border-top:1px solid var(--line);}
@media(min-width:820px){.trio{grid-template-columns:repeat(3,1fr);}}
.trio div{padding:1.5rem 1.6rem 1.5rem 0;border-bottom:1px solid var(--line);}
@media(min-width:820px){.trio div{border-bottom:0;}}
.trio h4{font-size:1rem;font-weight:600;margin-bottom:.4rem;}
.trio p{font-size:.9rem;color:var(--ink-2);line-height:1.6;max-width:32ch;}

/* ---- carrossel de textos ---- */
.carrossel{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.6rem;
           scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.carrossel::-webkit-scrollbar{height:6px;}
.carrossel::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.txtcard{flex:0 0 190px;scroll-snap-align:start;text-decoration:none;color:inherit;
         border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);
         display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease;}
.txtcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(20,14,28,.45);}
.txtcard img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0;}
.txtcard .d{font-family:var(--maquina);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
            color:var(--ink-3);padding:.7rem .8rem .2rem;}
.txtcard .t{font-size:.84rem;font-weight:600;line-height:1.35;padding:0 .8rem 1rem;}

/* ---- a frase do cliente, citada ---- */
.citado{border-left:3px solid var(--roxo);padding:.2rem 0 .2rem 1.1rem;margin:1.4rem 0;}
.citado p{font-family:var(--maquina);font-size:1.02rem;line-height:1.55;color:var(--ink);
          margin:0 0 .5rem;}
.citado span{font-family:var(--corpo);font-size:.72rem;letter-spacing:.14em;
             text-transform:uppercase;color:var(--ink-3);}

/* print de site: moldura de navegador */
.site{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#EDE9F2;}
.site .barra{display:flex;align-items:center;gap:.4rem;padding:.55rem .7rem;background:#E2DCEA;}
.site .barra i{width:9px;height:9px;border-radius:50%;background:#B6ACC4;display:block;}
.site .barra span{font-family:var(--maquina);font-size:.62rem;color:var(--ink-3);margin-left:.5rem;
                  letter-spacing:.04em;}
.site img{border-radius:0;}

/* reels verticais */
.reels{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
.reel{position:relative;border-radius:18px;overflow:hidden;background:#000;
      aspect-ratio:9/16;border:1px solid var(--line);}
.reel video{width:100%;height:100%;object-fit:cover;display:block;}
.reel .som{position:absolute;right:.55rem;bottom:.55rem;width:30px;height:30px;border:0;
           border-radius:50%;background:rgba(20,14,28,.6);color:#fff;font-size:.8rem;
           cursor:pointer;line-height:30px;text-align:center;padding:0;}
.reel .som:hover{background:rgba(10,8,12,.9);}
.mat .legenda{font-family:var(--maquina);font-size:.64rem;letter-spacing:.14em;
              text-transform:uppercase;color:var(--ink-3);margin-top:.2rem;}

.case-corpo a{color:var(--roxo);font-weight:600;text-decoration:none;
              border-bottom:1px solid rgba(90,35,168,.35);}

/* ============ MÉTODO ============ */
.metodo{background:var(--bg-2);}
.passos{display:grid;grid-template-columns:1fr;gap:0;margin-top:3rem;
        border-top:1px solid var(--line);}
@media(min-width:820px){.passos{grid-template-columns:1fr 1fr;}
  .passos.tres{grid-template-columns:repeat(3,1fr);}
  .passos.tres .passo{padding:2.2rem 1.6rem 2.2rem 0;border-right:1px solid var(--line);}
  .passos.tres .passo:last-child{border-right:0;}
  .passos.tres .passo:nth-child(even){padding-left:1.6rem;}
  .passos.tres .passo:nth-child(3){padding-left:1.6rem;}}
.passo{padding:2rem 0;border-bottom:1px solid var(--line);}
@media(min-width:820px){
  .passo{padding:2.2rem 2.4rem 2.2rem 0;}
  .passo:nth-child(odd){border-right:1px solid var(--line);}
  .passo:nth-child(even){padding-left:2.4rem;padding-right:0;}
}
.passo .n{font-family:var(--cartaz);font-size:2.4rem;color:var(--roxo);line-height:1;
          display:block;margin-bottom:.6rem;}
.passo h3{font-family:var(--cartaz);text-transform:uppercase;font-weight:400;
          font-size:1.35rem;margin-bottom:.5rem;letter-spacing:.01em;}

.passo{display:flex;flex-direction:column;}
.passo .btn{align-self:flex-start;}
.passo > p:last-child{margin-top:auto;padding-top:1.2rem;}

/* ============ SAÍDAS ============ */
.saidas{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
        border:1px solid var(--line);margin-top:3rem;}
@media(min-width:760px){.saidas{grid-template-columns:1fr 1fr;}.saidas.tres{grid-template-columns:repeat(3,1fr);}}
.saida{background:var(--bg-2);padding:2.4rem 2rem;display:flex;flex-direction:column;}
.saida h3{font-family:var(--cartaz);text-transform:uppercase;font-weight:400;
          font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1;margin-bottom:.9rem;}
.saida p{color:var(--ink-2);font-size:.94rem;flex:1;margin-bottom:1.6rem;max-width:34ch;}
.btn{display:inline-block;font-family:var(--maquina);font-size:.82rem;letter-spacing:.12em;
     text-transform:uppercase;padding:.95rem 1.3rem;text-decoration:none;
     background:var(--roxo);color:#fff;border-radius:2px;align-self:flex-start;
     transition:transform .15s ease,filter .15s ease;}
.btn:hover{transform:translateY(-2px);filter:brightness(1.12);}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);}

footer{padding:4rem 0 5rem;border-top:1px solid var(--line);}
footer .rotulo{display:block;margin-bottom:1rem;}
footer a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);}

/* ============ REVEAL ============ */
.js-anim .rv{opacity:0;transform:translateY(30px);
             transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1);}
.js-anim .rv.on{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js-anim .rv{opacity:1;transform:none;transition:none;}
  .cursor{animation:none;}
}

/* ============ CORREÇÕES DE CELULAR ============
   No fim da folha de propósito: precisam vencer as regras acima. */
@media(max-width:700px){
  /* tudo que é material do case vira uma coluna só */
  .mat,.mat.duo,.mat.tri,.vitrine,.vitrine .coluna{grid-template-columns:1fr;gap:1rem;}
  .mat.tri > img:first-child,.mat.solo{grid-column:auto;}
  .mat img,.site,.site img,.note,.peca{width:100%;max-width:100%;}
  /* nada de escadinha no celular */
  .mat.duo img:last-child,.mat.duo>*:last-child,.vitrine .fone{margin-top:0;}
  .mat>*,.mat.duo>*,.vitrine>*{margin-left:0;margin-right:0;}

  /* os dois reels continuam lado a lado, que é o formato deles */
  .reels{grid-template-columns:1fr 1fr;gap:.7rem;}

  /* celular dentro da página nunca maior que a tela */
  .fone{width:min(100%,260px);margin-left:auto;margin-right:auto;}
  .vitrine .fone{margin-left:0;}

  .nums{grid-template-columns:1fr 1fr;}
  .case-grid,.col-mat,.col-tipo,.tese-grid,.hero-grid{max-width:100%;}
  .case-nome .sub{font-size:.68rem;letter-spacing:.14em;}
  .passo .n{font-size:2rem;}
  .saida{padding:1.8rem 1.3rem;}

  /* legenda em caixa-alta monoespaçada ocupa quatro linhas no celular */
  .legenda{text-transform:none;letter-spacing:.02em;font-size:.72rem;line-height:1.45;}

  .txtcard{flex-basis:160px;}
}

/* ============ ACESSIBILIDADE ============ */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--roxo);outline-offset:3px;border-radius:2px;}
.case.faixa :where(a,button):focus-visible{outline-color:#fff;}
.pular{position:absolute;left:-9999px;top:0;z-index:50;background:var(--roxo);color:#fff;
       font-family:var(--maquina);font-size:.8rem;padding:.8rem 1.1rem;text-decoration:none;}
.pular:focus{left:.6rem;top:.6rem;}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line);margin-top:3rem;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:1.3rem 2.4rem 1.3rem 0;position:relative;
             font-size:1.02rem;font-weight:600;line-height:1.45;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:1.05rem;
                    font-family:var(--maquina);font-size:1.3rem;color:var(--roxo);line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq summary:hover{color:var(--roxo);}
.faq .resposta{padding:0 2.4rem 1.5rem 0;}
.faq .resposta p{font-size:.95rem;color:var(--ink-2);line-height:1.7;max-width:62ch;}
.faq .resposta p+p{margin-top:.8rem;}