/* =============================================================================
   OAB Fácil — landing page
   Paleta e tipografia extraídas do material gráfico do aplicativo (APP.psd).
   Display: Outfit · Texto: Roboto
   ========================================================================== */

:root{
  /* Cores da marca */
  --azul:        #064EF6;
  --azul-forte:  #0039C4;
  --azul-noite:  #041B4D;
  --azul-suave:  #9FB6F8;
  --azul-nevoa:  #E9EFFE;
  --rosa:        #E22294;
  --rosa-escuro: #B8156F;
  --claro:       #F4F4F4;
  --branco:      #FFFFFF;
  --carvao:      #141619;   /* alternativa escura para o rodapé */
  --tinta:       #0B0B0F;
  --grafite:     #55565E;

  /* Escala tipográfica fluida */
  --t-h1:  clamp(2.5rem, 1.2rem + 4.4vw, 4.9rem);
  --t-h2:  clamp(2rem, 1.2rem + 3vw, 3.6rem);
  --t-h3:  clamp(1.1rem, 1rem + .35vw, 1.35rem);
  --t-txt: clamp(1rem, .96rem + .22vw, 1.125rem);

  --raio:   22px;
  --raio-g: 34px;
  --wrap:   1220px;
  --gut:    clamp(20px, 5vw, 56px);

  --sombra:    0 18px 44px -22px rgba(4, 27, 77, .45);
  --sombra-g:  0 44px 90px -40px rgba(4, 27, 77, .6);
  --transicao: .45s cubic-bezier(.2, .7, .3, 1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font:400 var(--t-txt)/1.65 Roboto, "Segoe UI", system-ui, sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,.olho,.loja__txt strong,.passos__n,.ticker b{
  font-family:Outfit, Roboto, system-ui, sans-serif;
}

h1,h2,h3{ margin:0; line-height:1.02; letter-spacing:-.03em; font-weight:800; }
h1{ font-size:var(--t-h1); font-weight:900; letter-spacing:-.045em; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.2; letter-spacing:-.02em; }
p{ margin:0; }

.wrap{ width:min(100% - var(--gut) * 2, var(--wrap)); margin-inline:auto; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.pular{
  position:absolute; left:12px; top:-100px; z-index:200;
  background:var(--rosa); color:#fff; padding:12px 20px;
  border-radius:0 0 14px 14px; font-weight:700; text-decoration:none;
  transition:top .2s;
}
.pular:focus{ top:0; }

:focus-visible{ outline:3px solid var(--rosa); outline-offset:3px; border-radius:6px; }

/* Ícones Phosphor aplicados como máscara para herdar a cor do contexto */
[data-ico]{
  display:block;
  background:currentColor;
  -webkit-mask:var(--u) center/contain no-repeat;
          mask:var(--u) center/contain no-repeat;
}
[data-ico="newspaper"]           { --u:url(../icons/newspaper.svg); }
[data-ico="note-pencil"]         { --u:url(../icons/note-pencil.svg); }
[data-ico="briefcase"]           { --u:url(../icons/briefcase.svg); }
[data-ico="phone-disconnect"]    { --u:url(../icons/phone-disconnect.svg); }
[data-ico="piggy-bank"]          { --u:url(../icons/piggy-bank.svg); }
[data-ico="robot"]               { --u:url(../icons/robot.svg); }
[data-ico="identification-card"] { --u:url(../icons/identification-card.svg); }
[data-ico="headset"]             { --u:url(../icons/headset.svg); }
[data-ico="user"]                { --u:url(../icons/user.svg); }
[data-ico="map-pin-area"]        { --u:url(../icons/map-pin-area.svg); }
[data-ico="check-circle"]        { --u:url(../icons/check-circle.svg); }
[data-ico="gear-six"]            { --u:url(../icons/gear-six.svg); }

/* --------------------------------------------------------------- botões -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border-radius:100px; border:0;
  font:700 1rem/1 Outfit, sans-serif; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s;
}
.btn--rosa{ background:var(--rosa); color:#fff; box-shadow:0 12px 26px -14px rgba(226,34,148,.9); }
.btn--rosa:hover{ background:var(--rosa-escuro); transform:translateY(-2px); }
.btn--sm{ padding:12px 22px; font-size:.94rem; }

/* Botões de loja */
.lojas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.loja{
  display:inline-flex; align-items:center; gap:13px;
  padding:12px 24px 12px 20px; border-radius:16px;
  background:var(--branco); color:var(--azul-noite);
  text-decoration:none; border:2px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s;
  box-shadow:0 14px 30px -18px rgba(4,27,77,.9);
}
.loja:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -20px rgba(4,27,77,.85); }
.loja__mark{ width:26px; height:26px; flex:none; fill:currentColor; }
.loja__txt{ display:grid; line-height:1.15; text-align:left; }
.loja__txt small{ font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; opacity:.62; }
.loja__txt strong{ font-size:1.14rem; font-weight:700; letter-spacing:-.02em; }
.loja--inverso{ background:var(--azul-noite); color:#fff; }
.loja--inverso:hover{ background:#06266b; }
.loja[aria-current="true"]{ border-color:var(--rosa); }

/* ------------------------------------------------------------- cabeçalho -- */
.topo{
  position:sticky; top:0; z-index:100;
  transition:background .3s, box-shadow .3s, backdrop-filter .3s;
}
.topo__in{
  display:flex; align-items:center; gap:24px;
  padding:18px 0;
}
.topo__marca{ flex:none; display:block; }
.topo__marca img{ width:clamp(96px, 10vw, 124px); height:auto; }

.topo__nav{ display:flex; gap:30px; margin-left:auto; }
.topo__nav a{
  position:relative; color:#fff; text-decoration:none;
  font-weight:500; font-size:.97rem; padding:4px 0; opacity:.88;
  transition:opacity .2s;
}
.topo__nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--rosa); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.topo__nav a:hover{ opacity:1; }
.topo__nav a:hover::after{ transform:scaleX(1); }

.topo__menu{ display:none; }

/* Estado sólido depois da rolagem */
.topo.is-preso{
  background:rgba(6,78,246,.92);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 34px -20px rgba(4,27,77,.9);
}

.nav-movel{ display:none; }

/* ------------------------------------------------------------------ hero -- */
.hero{
  position:relative; isolation:isolate;
  background:var(--azul); color:#fff;
  padding:clamp(40px, 7vw, 80px) 0 clamp(80px, 10vw, 130px);
  margin-top:calc(-1 * (18px + 45px + 18px)); /* o cabeçalho flutua sobre o hero */
  padding-top:calc(clamp(40px, 7vw, 80px) + 18px + 45px + 18px);
  overflow:hidden;
}
/* Curvas orgânicas — assinatura visual do app */
.hero__curva,.hero__curva2{ position:absolute; z-index:-1; border-radius:50%; }
.hero__curva{
  width:150vw; height:150vw; left:-88vw; top:-14vw;
  background:var(--azul-forte); opacity:.55;
}
.hero__curva2{
  width:78vw; height:78vw; right:-34vw; top:-40vw;
  background:#0B5CFF;
}

.hero__grade{
  display:grid; gap:clamp(40px, 5vw, 72px);
  grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
  align-items:center;
}

.olho{
  font-size:.78rem; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--azul-suave); margin-bottom:22px;
}
.olho--escuro{ color:var(--rosa); }

.realce{ color:#fff; background:var(--rosa); padding:0 .16em .06em; border-radius:6px; }

.hero__linha{
  margin-top:26px; max-width:31em;
  font-size:clamp(1.02rem, .96rem + .38vw, 1.25rem);
  line-height:1.6; color:rgba(255,255,255,.9);
}
.hero__aviso{
  margin-top:26px; max-width:30em;
  font-size:.86rem; line-height:1.55; color:rgba(255,255,255,.62);
}

.hero__visual{ position:relative; }

/* Cartão do QR Code */
.qrcard{
  position:absolute; z-index:3; left:-9%; bottom:4%;
  display:flex; align-items:center; gap:16px;
  background:#fff; color:var(--azul-noite);
  padding:16px 22px 16px 16px; border-radius:20px;
  box-shadow:var(--sombra-g);
}
.qrcard::after{ /* quadrado da marca, fora da área do aparelho */
  content:""; position:absolute; left:-10px; bottom:-10px;
  width:34px; height:34px; background:var(--rosa); border-radius:10px;
  z-index:-1;
}
.qrcard__qr{ width:88px; height:88px; flex:none; }
.qrcard__qr svg{ width:100%; height:100%; display:block; }
.qrcard__txt{ display:grid; gap:2px; line-height:1.25; }
.qrcard__txt strong{ font:700 1.02rem Outfit, sans-serif; letter-spacing:-.02em; }
.qrcard__txt span{ font-size:.82rem; color:var(--grafite); }

/* Mockups de aparelho */
.palco{ position:relative; display:flex; justify-content:center; padding-block:10px; }

.fone{
  margin:0; position:relative; border-radius:38px;
  background:#0B0B0F; padding:9px;
  box-shadow:var(--sombra-g), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.fone img{ border-radius:30px; display:block; }
.fone::before{ /* recorte da câmera */
  content:""; position:absolute; top:19px; left:50%; translate:-50% 0;
  width:34%; height:20px; background:#0B0B0F; border-radius:0 0 14px 14px; z-index:2;
}

.fone--frente{ width:min(300px, 74%); z-index:2; }
.fone--tras{
  position:absolute; width:min(258px, 62%); right:-2%; top:8%;
  rotate:7deg; opacity:.94; z-index:1;
}
.fone--solo{ width:min(320px, 78%); justify-self:center; }
.fone--mini{ width:214px; padding:7px; border-radius:30px; }
.fone--mini img{ border-radius:24px; }
.fone--mini::before{ top:15px; height:16px; border-radius:0 0 11px 11px; }

/* ---------------------------------------------------------------- ticker -- */
.ticker{
  background:var(--rosa); color:#fff; overflow:hidden;
  padding:15px 0; border-block:3px solid var(--azul-noite);
}
.ticker__pista{ display:flex; width:max-content; animation:desliza 34s linear infinite; }
.ticker__grupo{ display:flex; align-items:center; }
.ticker b{ font:800 clamp(1rem, .9rem + .5vw, 1.35rem) Outfit, sans-serif; letter-spacing:-.02em; white-space:nowrap; }
.ticker i{ width:9px; height:9px; background:#fff; border-radius:50%; margin:0 26px; flex:none; }
@keyframes desliza{ to{ transform:translateX(-50%); } }

/* --------------------------------------------------------------- seções -- */
.secao{ padding:clamp(72px, 9vw, 132px) 0; position:relative; }
.secao--claro{ background:var(--claro); }
.secao--azul{
  background:var(--azul-noite); color:#fff; overflow:hidden; isolation:isolate;
}
.secao__curva{
  position:absolute; z-index:-1; border-radius:50%;
  width:120vw; height:120vw; right:-70vw; bottom:-64vw;
  background:var(--azul); opacity:.34;
}

.cabeca{ max-width:44rem; margin:0 auto clamp(48px, 6vw, 76px); text-align:center; }
.cabeca--esq{ margin-inline:0; text-align:left; }
.cabeca--linha{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; max-width:none; text-align:left; flex-wrap:wrap;
}
.cabeca--rotulo{ margin-bottom:clamp(38px, 4vw, 54px); }
.cabeca__sub{ margin-top:22px; color:var(--grafite); font-size:1.06rem; }
.cabeca__dica{ font-size:.86rem; color:var(--grafite); letter-spacing:.02em; }

/* ------------------------------------------------------ grade de recursos -- */
/* Nove recursos: em telas largas fecha uma grade 3 × 3 exata. */
.grade-rec{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}
.rec{
  background:var(--claro); border-radius:var(--raio-g);
  padding:34px 30px 32px; position:relative; overflow:hidden;
  transition:transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.rec::after{ /* quadrado rosa da marca, revelado no hover */
  content:""; position:absolute; right:-14px; top:-14px;
  width:64px; height:64px; background:var(--rosa); border-radius:16px;
  opacity:0; transform:scale(.4) rotate(-18deg);
  transition:opacity var(--transicao), transform var(--transicao);
}
.rec:hover{ transform:translateY(-6px); box-shadow:var(--sombra); background:var(--azul-nevoa); }
.rec:hover::after{ opacity:1; transform:scale(1) rotate(0); }

.rec__ico{
  width:46px; height:46px; color:var(--azul); margin-bottom:22px;
  transition:color var(--transicao), transform var(--transicao);
}
.rec:hover .rec__ico{ transform:translateY(-2px) scale(1.06); }
.rec h3{ margin-bottom:12px; }
.rec > p{ color:var(--grafite); font-size:.98rem; }

.rec__lista{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; }
.rec__lista li{
  position:relative; padding-left:22px; font-size:.92rem; color:var(--grafite);
  line-height:1.5;
}
.rec__lista li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:3px; background:var(--rosa);
}

.rec--rosa{ background:var(--rosa); color:#fff; }
.rec--rosa .rec__ico{ color:#fff; }
.rec--rosa > p,.rec--rosa .rec__lista li{ color:rgba(255,255,255,.9); }
.rec--rosa .rec__lista li::before{ background:#fff; }
.rec--rosa:hover{ background:var(--rosa-escuro); }
.rec--rosa::after{ background:var(--azul-noite); }

/* ------------------------------------------------------- blocos em duas -- */
.duas{
  display:grid; gap:clamp(40px, 6vw, 84px);
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:center;
}
.duas--inversa .duas__texto{ order:2; }
.duas--inversa .fone{ order:1; }
.duas__linha{ margin-top:24px; max-width:32em; color:rgba(255,255,255,.82); font-size:1.06rem; }
.duas__linha--escura{ color:var(--grafite); }

.passos{ list-style:none; margin:44px 0 0; padding:0; display:grid; gap:26px; }
.passos li{
  display:grid; column-gap:20px; row-gap:5px;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:start;
}
.passos__n{
  grid-row:1 / span 2; grid-column:1;
  width:48px; height:48px; border-radius:15px;
  display:grid; place-items:center;
  background:var(--rosa); color:#fff;
  font:800 1.3rem Outfit, sans-serif;
}
.passos h3{ grid-column:2; align-self:center; }
.passos p{ grid-column:2; }
.passos p{ color:rgba(255,255,255,.72); font-size:.96rem; }

.nota{
  display:flex; align-items:center; gap:12px; margin-top:38px;
  padding:16px 22px; border-radius:100px;
  background:rgba(255,255,255,.09); font-size:.92rem; color:rgba(255,255,255,.86);
}
.nota__ico{ width:22px; height:22px; flex:none; color:var(--azul-suave); }

.cartoes-ia{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:38px; }
.ia-card{
  background:var(--claro); border-radius:24px; padding:28px 26px;
  border:2px solid transparent; transition:border-color var(--transicao), transform var(--transicao);
}
.ia-card:hover{ border-color:var(--azul); transform:translateY(-4px); }
.ia-card__ico{ width:34px; height:34px; color:var(--azul); margin-bottom:16px; }
.ia-card h3{ margin-bottom:8px; }
.ia-card p{ font-size:.92rem; color:var(--grafite); }

.alerta{
  display:flex; gap:13px; align-items:flex-start; margin-top:32px;
  padding:18px 22px; border-radius:18px;
  background:var(--azul-nevoa); color:var(--azul-forte);
  font-size:.9rem; line-height:1.5;
  border-left:5px solid var(--azul);
}
.alerta__ico{ width:20px; height:20px; flex:none; margin-top:2px; }

/* --------------------------------------------------------------- acesso -- */
.grade-acesso{
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.acesso{
  background:#fff; border-radius:26px; padding:32px 28px;
  transition:transform var(--transicao), box-shadow var(--transicao);
}
.acesso:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.acesso__ico{ width:36px; height:36px; color:var(--rosa); margin-bottom:20px; }
.acesso h3{ margin-bottom:9px; }
.acesso p{ font-size:.93rem; color:var(--grafite); }

/* --------------------------------------------------------------- telas -- */
.secao--telas{ background:var(--azul-nevoa); overflow:hidden; }
.carrossel{ margin-top:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; }
.carrossel__pista{
  display:flex; gap:26px; width:max-content;
  padding-inline:max(var(--gut), calc((100vw - var(--wrap)) / 2));
}
.tela{ margin:0; scroll-snap-align:center; text-align:center; }
.tela figcaption{
  margin-top:18px; font:600 .92rem Outfit, sans-serif;
  color:var(--azul-forte); letter-spacing:-.01em;
}

/* -------------------------------------------------------------- baixar -- */
.baixar{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--azul); color:#fff;
  padding:clamp(72px, 9vw, 122px) 0;
}
.baixar__curva{
  position:absolute; z-index:-1; border-radius:50%;
  width:110vw; height:110vw; left:-56vw; top:-46vw;
  background:var(--azul-forte); opacity:.5;
}
.baixar__grade{
  display:grid; gap:clamp(38px, 5vw, 70px);
  grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
  align-items:center;
}
.baixar__logo{ width:80px; height:80px; border-radius:20px; margin-bottom:26px; box-shadow:var(--sombra-g); }
.baixar__texto p{ margin-top:20px; max-width:30em; color:rgba(255,255,255,.86); }

.baixar__qr{
  background:#fff; color:var(--azul-noite); border-radius:var(--raio-g);
  padding:30px; text-align:center; box-shadow:var(--sombra-g);
  justify-self:end; width:min(100%, 320px); position:relative;
}
.baixar__qr::before{
  content:""; position:absolute; left:-13px; bottom:-13px;
  width:56px; height:56px; background:var(--rosa); border-radius:16px; z-index:-1;
}
.qrgrande{ width:100%; aspect-ratio:1; }
.qrgrande svg{ width:100%; height:100%; display:block; }
.baixar__qr p{ margin-top:20px; display:grid; gap:4px; line-height:1.3; }
.baixar__qr strong{ font:700 1.05rem Outfit, sans-serif; letter-spacing:-.02em; }
.baixar__qr span{ font-size:.82rem; color:var(--grafite); word-break:break-word; }

/* -------------------------------------------------------------- dúvidas -- */
.duvidas{ display:grid; gap:clamp(34px, 5vw, 70px); grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); align-items:start; }
.duvidas .cabeca{ margin-bottom:0; position:sticky; top:120px; }

.faq{ display:grid; gap:12px; }
.faq__item{
  background:#fff; border-radius:20px; padding:4px 26px;
  transition:box-shadow var(--transicao);
}
.faq__item[open]{ box-shadow:var(--sombra); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font:700 1.03rem Outfit, sans-serif; letter-spacing:-.02em; line-height:1.35;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:2px; top:50%; translate:0 -50%;
  width:15px; height:15px;
  background:
    linear-gradient(var(--rosa), var(--rosa)) center/100% 3px no-repeat,
    linear-gradient(var(--rosa), var(--rosa)) center/3px 100% no-repeat;
  transition:rotate var(--transicao);
}
.faq__item[open] summary::after{ rotate:135deg; }
.faq__corpo{ padding:0 0 24px; color:var(--grafite); font-size:.97rem; }

/* --------------------------------------------------------------- rodapé -- */
.rodape{ background:var(--azul-noite); color:#fff; padding:clamp(58px, 7vw, 86px) 0 0; }
.rodape__in{
  display:grid; gap:40px;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1.7fr) minmax(0, 1.15fr);
  align-items:start;
}
.rodape__marca img{ width:150px; margin-bottom:20px; }
.rodape__marca p{ font-size:.92rem; color:rgba(255,255,255,.62); max-width:24em; }

.rodape__links{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); }
.rodape__links h3{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul-suave); margin-bottom:15px; font-weight:700;
}
.rodape__links a{
  display:block; text-decoration:none; font-size:.94rem;
  color:rgba(255,255,255,.8); padding:5px 0; transition:color .2s, translate .2s;
}
.rodape__links a:hover{ color:#fff; translate:4px 0; }

/* Endereço e contato da Seccional */
.rodape__contato{ font-style:normal; display:grid; gap:15px; }
.rodape__contato h3{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul-suave); margin-bottom:0; font-weight:700;
}
.rodape__contato p{ font-size:.9rem; line-height:1.6; color:rgba(255,255,255,.72); }
.rodape__orgao{ font-weight:700; color:#fff !important; }
.rodape__contato a{ text-decoration:none; color:rgba(255,255,255,.82); transition:color .2s; }
.rodape__contato a:hover{ color:#fff; text-decoration:underline; }
.rodape__cnpj{ font-size:.82rem !important; color:rgba(255,255,255,.52) !important; }

.rodape__base{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:52px; padding:26px 0 30px; border-top:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.52); font-size:.82rem;
}

/* --------------------------------------------------- barra institucional --
   Mesma superfície do rodapé, separada apenas por um filete. */
.citare{ background:var(--azul-noite); }
.citare__in{
  display:flex; align-items:center; gap:clamp(20px, 3vw, 44px); flex-wrap:wrap;
  padding:26px 0 30px; border-top:1px solid rgba(255,255,255,.13);
}
.citare__logo{ flex:none; display:block; opacity:.55; transition:opacity .25s; }
.citare__logo:hover{ opacity:1; }
.citare__logo img{ width:clamp(88px, 7.5vw, 112px); height:auto; }
.citare__txt{
  font-size:.82rem; line-height:1.6; font-weight:500;
  color:rgba(255,255,255,.55); margin-right:auto;
}
.citare__txt a{
  display:block; color:rgba(255,255,255,.72); text-decoration:none;
  font-weight:700; transition:color .2s;
}
.citare__txt a:hover{ color:#fff; text-decoration:underline; }

.rodape__selo{
  flex:none; display:flex; align-items:center; gap:18px;
  background:#fff; border-radius:15px; padding:13px 22px;
}
.rodape__selo img{ width:auto; height:42px; }
.rodape__brasao{ height:50px !important; }

/* ------------------------------------------------------------- revelação --
   Só esconde quando o JavaScript está ativo; sem JS a página aparece inteira. */
.js .reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-visivel{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1) var(--atraso, 0ms),
             transform .7s cubic-bezier(.2,.7,.3,1) var(--atraso, 0ms);
}

/* =========================================================== responsivo == */
@media (max-width:1080px){
  .hero__grade,.duas,.baixar__grade,.duvidas{ grid-template-columns:1fr; }
  .duas--inversa .duas__texto{ order:0; }
  .duas--inversa .fone{ order:0; }
  .hero__texto{ text-align:center; }
  .hero__linha,.hero__aviso{ margin-inline:auto; }
  .lojas{ justify-content:center; }
  .duas__texto{ text-align:center; }
  .duas__linha{ margin-inline:auto; }
  .passos li{ text-align:left; }
  .nota{ justify-content:center; }
  .fone--solo{ margin-inline:auto; }
  .duvidas .cabeca{ position:static; text-align:center; margin-inline:auto; }
  .baixar__qr{ justify-self:center; }
  .rodape__in{ grid-template-columns:1fr; }
  .citare__in{ justify-content:center; text-align:center; }
  .citare__txt{ margin-right:0; }
}

@media (max-width:860px){
  .topo__nav,.topo__cta{ display:none; }
  .topo__menu{
    display:grid; place-items:center; margin-left:auto;
    width:46px; height:46px; border:0; border-radius:14px; cursor:pointer;
    background:rgba(255,255,255,.15);
  }
  .topo__menu-barra,
  .topo__menu-barra::before,
  .topo__menu-barra::after{
    content:""; display:block; width:20px; height:2.5px; border-radius:2px;
    background:#fff; transition:transform .3s, opacity .2s;
  }
  .topo__menu-barra{ position:relative; }
  .topo__menu-barra::before{ position:absolute; top:-7px; }
  .topo__menu-barra::after{ position:absolute; top:7px; }
  .topo__menu[aria-expanded="true"] .topo__menu-barra{ background:transparent; }
  .topo__menu[aria-expanded="true"] .topo__menu-barra::before{ transform:translateY(7px) rotate(45deg); }
  .topo__menu[aria-expanded="true"] .topo__menu-barra::after{ transform:translateY(-7px) rotate(-45deg); }

  .nav-movel{
    display:grid; gap:2px; padding:10px var(--gut) 26px;
    background:var(--azul-forte);
  }
  .nav-movel[hidden]{ display:none; }
  .nav-movel a{
    padding:14px 4px; color:#fff; text-decoration:none;
    font:600 1.05rem Outfit, sans-serif;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .nav-movel__cta{
    margin-top:16px; border:0 !important; text-align:center;
    background:var(--rosa); border-radius:100px;
  }

  /* Empilhada, a faixa institucional começa pelo selo da OAB. */
  .citare__in{ flex-direction:column; gap:22px; }
  .citare .rodape__selo{ order:-1; }

  .qrcard{
    position:static; margin:0 auto 34px; width:max-content; max-width:100%;
  }
  .fone--tras{ display:none; }
  .fone--frente{ width:min(280px, 82%); }
}

@media (max-width:520px){
  .rec{ padding:28px 24px; }
  .lojas{ flex-direction:column; align-items:stretch; }
  .loja{ justify-content:center; }
  .fone--mini{ width:180px; }
  .qrcard{ flex-direction:column; text-align:center; padding:22px; }
  .qrcard__qr{ width:132px; height:132px; }
}

/* ------------------------------------------------------ acessibilidade -- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .topo,.ticker,.carrossel,.nav-movel{ display:none; }
  body{ color:#000; }
  .hero,.secao--azul,.baixar,.rodape{ background:#fff !important; color:#000 !important; }
}