/* ==========================================================================
   Racha Aí — landing page

   Referência de composição (rodada 5): klaviyo.com/solutions/ai/customer-agent.
   O que vem de lá: página CLARA com muito ar, headline em sans de caixa baixa
   e tamanho contido, sub-nav fixa com âncoras da própria página, cards de
   imagem sem moldura, e UM painel escuro arredondado no meio (não uma
   alternância de faixas a tela cheia).

   O que continua sendo nosso (`.claude/skills/design-system.md`): a paleta
   (floresta #163300, verde vivo #98EA75) e a pílula para AÇÃO. O Anton deixou
   de ser a voz do hero e virou ACENTO: os números, o fecho e o wordmark.
   ========================================================================== */

:root{
  --forest:#163300;
  --forest-deep:#0B1A00;
  --accent:#98EA75;
  --accent-ink:#2E6B0E;
  --accent-wash:#F1FBEA;
  --paper:#ffffff;
  --bone:#F5F7F2;
  --text:#3A403A;
  --muted:#6A7166;
  --line:#E6E9E3;
  --line-soft:#F0F2ED;
  --on-dark:#EDF7E4;
  --on-dark-muted:#A9BE97;
  --line-dark:rgba(152,234,117,.18);
  --side:clamp(20px,5vw,64px);
  --maxw:1180px;
  --head-h:64px;
  --sub-h:52px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + var(--sub-h) + 16px)}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 17px/1.6 "IBM Plex Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* O Anton virou ACENTO: número, fecho, wordmark. Nunca mais um parágrafo. */
.anton{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;
  font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92;
}

/* --- estrutura ---------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--side)}
section{position:relative}
.bone{background:var(--bone)}

/* --- cabeçalho de seção: centralizado, com ar em volta ------------------- */
.sec-head{max-width:720px;margin:0 auto clamp(40px,5vw,68px);text-align:center}
.sec-head.left{margin-left:0;text-align:left}

.eyebrow{
  display:inline-block;
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 18px;
}
.dark .eyebrow{color:var(--accent)}

.section-title{
  font-size:clamp(29px,3.5vw,47px);line-height:1.1;letter-spacing:-.022em;
  margin:0 0 18px;color:var(--forest);font-weight:400;
}
.dark .section-title{color:var(--on-dark)}
.section-lead{font-size:clamp(16.5px,1.25vw,19px);line-height:1.55;color:var(--muted);margin:0 auto;max-width:56ch}
.sec-head.left .section-lead{margin-left:0}
.dark .section-lead{color:var(--on-dark-muted)}
/* a palavra em destaque: verde escuro, que o verde vivo não se lê em texto */
.em{color:var(--accent-ink)}
.dark .em{color:var(--accent)}

/* --- botões: pílula (a forma de AÇÃO do app), mas discretos -------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 24px;border-radius:999px;border:1px solid transparent;
  font:600 15px/1 "IBM Plex Sans",sans-serif;text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn-primary{background:var(--accent);color:var(--forest)}
.btn-primary:hover{background:#8AE363}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--forest)}
.dark .btn-ghost{color:var(--on-dark);border-color:var(--line-dark)}
.dark .btn-ghost:hover{border-color:var(--accent)}
.btn-outline{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn-outline:hover{background:var(--forest);color:#fff}
.btn .arrow{font-size:17px;line-height:1}

/* --- topo: cabeçalho + sub-nav de âncoras (o traço da referência) -------- */
.site-head{
  position:sticky;top:0;z-index:60;height:var(--head-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:100%}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand .mark{width:30px;height:30px;border-radius:8px}
.wordmark{
  display:block;width:104px;height:24px;background:currentColor;
  -webkit-mask:url("/img/wordmark.png") no-repeat left center/contain;
          mask:url("/img/wordmark.png") no-repeat left center/contain;
  color:var(--forest);
}
.site-foot .wordmark{color:var(--on-dark)}
.head-nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-link{font-size:14.5px;color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-link:hover{color:var(--forest)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:0 4px}
.lang button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:600 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.06em;color:var(--muted);padding:8px 11px;
}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--forest)}
.head-cta{
  display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;
  background:var(--forest);color:#fff;font:600 14px/1 "IBM Plex Sans",sans-serif;text-decoration:none;
}
.head-cta:hover{background:var(--forest-deep)}

.subnav{
  position:sticky;top:var(--head-h);z-index:55;height:var(--sub-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.subnav .wrap{display:flex;align-items:center;gap:6px;height:100%;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav .sub-brand{
  font-size:13.5px;font-weight:600;color:var(--forest);flex:none;
  padding-right:16px;margin-right:6px;border-right:1px solid var(--line);
}
.subnav a{
  flex:none;font-size:14px;color:var(--muted);text-decoration:none;
  padding:7px 13px;border-radius:999px;white-space:nowrap;
}
.subnav a:hover{background:var(--bone);color:var(--forest)}

@media (max-width:840px){
  .head-nav .nav-opt{display:none}
  .subnav .sub-brand{display:none}
}
@media (max-width:520px){
  .head-cta{display:none}
}

/* --- hero: centralizado, muito ar, uma arte só -------------------------- */
/* o rodapé do hero existe por causa dos aparelhos: eles são INCLINADOS, e o
   canto de baixo do recorte desce ~7% da largura além da caixa. Sem esse
   respiro o `overflow:hidden` (que existe para a fita) corta os dois pés. */
.hero{padding:clamp(56px,7vw,96px) 0 clamp(32px,4vw,56px);text-align:center;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero h1{
  font-size:clamp(35px,4.7vw,66px);line-height:1.07;letter-spacing:-.028em;
  font-weight:400;color:var(--forest);margin:0 auto 22px;max-width:19ch;
}
.hero h1 .em{color:var(--accent-ink)}
.hero-lead{
  font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--muted);
  margin:0 auto 32px;max-width:58ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-note{margin:20px 0 0;font-size:14px;color:var(--muted)}

/* a fita: o equivalente calmo da seda vermelha da referência, na paleta daqui */
.ribbon{
  position:absolute;left:50%;top:clamp(300px,34vw,470px);transform:translateX(-50%);
  width:min(1700px,168vw);pointer-events:none;z-index:0;opacity:.9;
}
.hero-art{
  position:relative;z-index:1;margin-top:clamp(44px,5vw,72px);
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(22px,4.2vw,58px);
}
.hero-art .phone{width:min(246px,40vw)}
/* a inclinação é para FORA (o topo abre em leque): girando para dentro os dois
   pés se encontravam no meio, e nenhum `gap` resolvia sozinho */
.hero-art .phone:first-child{transform:rotate(-4deg)}
.hero-art .phone:last-child{transform:rotate(4deg)}

/* --- a régua de provas (o "trusted by" da referência) -------------------- */
.proof{padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,96px)}
.proof-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px);
  border-top:1px solid var(--line);padding-top:clamp(28px,3.4vw,40px);text-align:center;
}
@media (min-width:760px){.proof-list{grid-template-columns:repeat(4,1fr)}}
.proof-list b{display:block;font-size:clamp(28px,3vw,40px);color:var(--forest)}
.proof-list span{display:block;margin-top:8px;font-size:13px;color:var(--muted);letter-spacing:.02em}

/* --- cards de imagem (o molde de três colunas da referência) ------------- */
.feats{padding:clamp(64px,8vw,110px) 0}
.grid{display:grid;gap:clamp(28px,3vw,40px)}
@media (min-width:700px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.grid{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.2vw,30px)}}
.cell{display:flex;flex-direction:column}
.cell .art{
  background:var(--bone);border-radius:18px;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,2.4vw,30px);
  margin-bottom:20px;overflow:hidden;
}
.cell .art img{width:100%;height:100%;object-fit:contain}
.cell h3{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 8px;color:var(--forest)}
.cell p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}

/* --- como funciona: três passos, hairline, sem número gritado ----------- */
.steps{padding:clamp(64px,8vw,110px) 0}
.steps-list{display:grid;gap:0;max-width:880px;margin:0 auto}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,42px);
  padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--line);align-items:start;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step .idx{
  font-size:15px;color:var(--accent-ink);line-height:1.6;
  font-variant-numeric:tabular-nums;font-weight:600;
}
.step h3{margin:0 0 7px;font-size:19px;font-weight:600;color:var(--forest);line-height:1.3}
.step p{margin:0;color:var(--muted);font-size:16px;max-width:58ch}

/* --- o ÚNICO painel escuro: as telas do app ----------------------------- */
.appstrip{padding:clamp(28px,4vw,56px) 0}
.appstrip .panel{
  background:var(--forest);border-radius:clamp(20px,2.4vw,32px);
  padding:clamp(44px,5.5vw,84px) 0 clamp(44px,5.5vw,76px);overflow:hidden;
}
.appstrip .panel > .inner{padding:0 clamp(24px,4vw,64px)}
.strip-rail{
  display:flex;gap:clamp(18px,2.4vw,34px);align-items:flex-end;
  margin-top:clamp(36px,4vw,56px);padding:0 clamp(24px,4vw,64px);
  transform:translateX(calc(var(--sp,0) * -70px));will-change:transform;
}
.strip-item{display:flex;flex-direction:column;gap:16px;flex:none;width:236px;max-width:70vw}
.strip-item h4{margin:0;font-size:16px;font-weight:600;color:var(--accent);line-height:1.3}
.strip-item p{margin:0;color:var(--on-dark-muted);font-size:14.5px;line-height:1.5}
.strip-item:nth-child(2) .phone{transform:translateY(-18px)}
.strip-item:nth-child(4) .phone{transform:translateY(-10px)}

/* --- comparação: hairline no claro, a coluna vencedora em verde d'água --- */
.versus{padding:clamp(64px,8vw,110px) 0}
.vs-grid{display:grid;gap:clamp(16px,1.8vw,22px);max-width:1060px;margin:0 auto}
@media (min-width:820px){.vs-grid{grid-template-columns:repeat(3,1fr)}}
.vs-col{border:1px solid var(--line);border-radius:18px;padding:clamp(24px,2.6vw,32px);background:var(--paper)}
.vs-col.win{background:var(--accent-wash);border-color:#CFEEBC}
.vs-col h4{margin:0 0 18px;font-size:17px;font-weight:600;color:var(--muted);line-height:1.3}
.vs-col.win h4{color:var(--forest)}
.vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vs-col li{display:flex;gap:11px;font-size:15px;color:var(--muted);align-items:flex-start;line-height:1.5}
.vs-col li::before{content:"–";flex:none;width:11px;color:#AFB5AA}
.vs-col.win li{color:var(--text)}
.vs-col.win li::before{content:"✓";color:var(--accent-ink);font-weight:700;font-size:13px;line-height:1.55}

/* --- a virada: citação + marcas ----------------------------------------- */
.showcase{padding:clamp(64px,8vw,110px) 0}
.showcase .wrap{display:grid;gap:clamp(32px,4.5vw,64px);align-items:center;max-width:1080px}
@media (min-width:920px){.showcase .wrap{grid-template-columns:1.05fr .95fr}}
.quote{
  font-size:clamp(26px,3.1vw,42px);line-height:1.12;letter-spacing:-.022em;
  font-weight:400;margin:0 0 20px;color:var(--forest);
}
.checks{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:15px}
.checks li{display:flex;gap:13px;align-items:flex-start;color:var(--muted);font-size:15.5px;line-height:1.5}
.checks li::before{
  content:"";width:20px;height:20px;flex:none;margin-top:2px;border-radius:50%;
  background:var(--accent);
  -webkit-mask:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  mask:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  mask-composite:exclude;
}
/* a arte desta seção é um APARELHO (a tela de parcelar), não uma ilustração
   solta: a caixa centra a moldura e a inclina de leve, como no hero */
.showcase-art{width:100%;max-width:400px;justify-self:center;display:flex;justify-content:center}
.showcase-art .phone{transform:rotate(-3deg)}

/* --- privacidade --------------------------------------------------------- */
.trust{padding:clamp(64px,8vw,110px) 0}
.trust-grid{display:grid;gap:clamp(18px,2vw,26px);max-width:1060px;margin:0 auto}
@media (min-width:820px){.trust-grid{grid-template-columns:repeat(3,1fr)}}
.trust-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,2.6vw,32px)}
.trust-card .tag{
  display:inline-block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:14px;font-weight:600;
}
.trust-card h4{margin:0 0 10px;font-size:17px;font-weight:600;line-height:1.3;color:var(--forest)}
.trust-card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}
.trust-foot{text-align:center;margin:clamp(32px,4vw,44px) 0 0}

/* --- perguntas ----------------------------------------------------------- */
.faq{padding:clamp(64px,8vw,110px) 0}
.faq-list{max-width:800px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 42px 22px 0;position:relative;
  font-size:17px;font-weight:600;color:var(--forest);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;background:var(--forest);
  transition:transform .3s ease;
}
.faq summary::before{
  content:"";position:absolute;right:11.75px;top:50%;width:1.5px;height:13px;background:var(--forest);
  transform:translateY(-50%);transition:opacity .3s ease,transform .3s ease;
}
.faq summary::after{transform:translateY(-50%)}
.faq details[open] summary::before{opacity:0;transform:translateY(-50%) rotate(90deg)}
.faq details p{margin:0 0 24px;color:var(--muted);font-size:16px;line-height:1.6;max-width:66ch}

/* --- fecho: painel arredondado, como o card de preço da referência ------- */
.closing{padding:clamp(24px,4vw,56px) 0 clamp(64px,8vw,110px)}
.closing .panel{
  background:linear-gradient(150deg,#EAF9DE 0%,#F6FBF1 46%,#FFFFFF 100%);
  border:1px solid #DCEFCC;border-radius:clamp(20px,2.4vw,32px);
  padding:clamp(48px,6vw,88px) clamp(24px,4vw,64px);text-align:center;
}
.closing h2{
  font-size:clamp(34px,5vw,64px);line-height:.96;margin:0 0 20px;color:var(--forest);
}
.closing p{max-width:46ch;margin:0 auto 32px;color:var(--muted);font-size:clamp(16.5px,1.3vw,19px);line-height:1.55}
.mailform{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:520px;margin:0 auto}
.mailform input{
  flex:1 1 260px;height:46px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--text);
  font:400 15.5px/1 "IBM Plex Sans",sans-serif;
}
.mailform input:focus{outline:none;border-color:var(--forest)}
.mailform button{
  height:46px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
  background:var(--forest);color:#fff;font:600 15px/1 "IBM Plex Sans",sans-serif;
}
.mailform button:hover{background:var(--forest-deep)}
.closing .hero-note{margin-top:18px}

/* --- rodapé ------------------------------------------------------------- */
.site-foot{background:var(--forest);color:var(--on-dark-muted);padding:clamp(40px,5vw,60px) 0 clamp(26px,3vw,36px);font-size:14.5px}
.foot-top{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;padding-bottom:26px;border-bottom:1px solid var(--line-dark)}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--on-dark)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;padding-top:22px;font-size:13.5px}

/* --- o aparelho: moldura leve (a captura já traz a barra de status) ------ */
.phone{
  position:relative;width:100%;max-width:260px;aspect-ratio:720/1561;flex:none;
  background:#0b1a00;border:8px solid #0b1a00;border-radius:40px;
  box-shadow:0 24px 60px rgba(22,51,0,.22);overflow:hidden;
}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:33px;display:block}
.dark .phone,.panel .phone{box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.07)}

/* ==========================================================================
   MOVIMENTO
   A faixa correndo e o selo girando SAÍRAM nesta rodada (eles eram o oposto
   do ar da referência). Ficaram: a entrada dos títulos palavra a palavra, o
   parallax leve, a barra de progresso e o CTA flutuante. Tudo desligado sob
   prefers-reduced-motion.
   ========================================================================== */

.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

.wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wd > i{display:inline-block;font-style:normal;transform:translateY(105%);animation:wdIn .66s cubic-bezier(.2,.8,.25,1) both}
@keyframes wdIn{to{transform:none}}

.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:70}

.floating-cta{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:65;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.floating-cta.show{opacity:1;transform:none;pointer-events:auto}
.floating-cta .btn{box-shadow:0 12px 30px rgba(22,51,0,.22)}

.hero-art{transform:translateY(calc(var(--p,0) * -20px))}
.showcase-art{transform:translateY(calc(var(--p,0) * -16px))}

.proof-list.in div{animation:revealIn .6s cubic-bezier(.2,.7,.3,1) both}
.proof-list.in div:nth-child(2){animation-delay:.07s}
.proof-list.in div:nth-child(3){animation-delay:.14s}
.proof-list.in div:nth-child(4){animation-delay:.21s}
@keyframes revealIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .wd > i{animation:none;transform:none}
  .hero-art,.showcase-art,.strip-rail{transform:none}
  .proof-list.in div{animation:none}
  .floating-cta{transition:none}
}

/* --- a vitrine vira carrossel de arrastar no celular -------------------- */
@media (max-width:820px){
  .strip-rail{
    overflow-x:auto;scroll-snap-type:x mandatory;transform:none;
    padding-bottom:8px;scrollbar-width:none;
  }
  .strip-rail::-webkit-scrollbar{display:none}
  .strip-item{scroll-snap-align:center}
  .hero-art{gap:16px}
  .hero-art .phone{width:min(206px,42vw)}
  /* no estreito a fita subia para trás dos botões, e o CTA verde ficava sobre
     verde: ela desce para o lugar onde os aparelhos estão de fato */
  .ribbon{top:clamp(520px,132vw,660px);opacity:.75}
}

/* ==========================================================================
   BILÍNGUE NO MESMO ENDEREÇO
   O conteúdo pt e en vive na mesma página e o botão PT/EN alterna o
   `data-active` do body (lang.js). Uma URL por finalidade, que é o que o App
   Store Connect pede.
   ========================================================================== */
[data-lang]{display:none}
body[data-active="pt"] [data-lang="pt"],
body[data-active="en"] [data-lang="en"]{display:block}
body[data-active="pt"] .site-head [data-lang="pt"],
body[data-active="en"] .site-head [data-lang="en"],
body[data-active="pt"] .site-foot [data-lang="pt"],
body[data-active="en"] .site-foot [data-lang="en"],
body[data-active="pt"] .inline[data-lang="pt"],
body[data-active="en"] .inline[data-lang="en"]{display:inline}
/* na sub-nav o grupo não pode virar caixa: ele some do fluxo e deixa os
   links serem filhos diretos do flex */
body[data-active="pt"] .subnav [data-lang="pt"],
body[data-active="en"] .subnav [data-lang="en"]{display:contents}