/* ============================================================================
   BLACKFRIDAY-2026: a promoção, até 30/11.
   ----------------------------------------------------------------------------
   Pedido do dono em 03/11/2026: quem entra tem de saber na hora que é Black
   Friday, com cara de venda. Há uma faixa corrida fixa no topo, uma faixa na
   transversal na primeira tela de cada aba e, onde fica o preço normal, um quadro
   de oferta (.bf-oferta) com o preço antigo riscado e o atual muito grande.

   Cor: amarelo sobre a noite do site. O laranja e o roxo foram testados e o dono
   rejeitou os dois; fundo preto também está vetado. A pesquisa não aponta uma cor
   que sempre vence: o que pesa é o contraste com o resto da página, e o site é
   azul-noite com lilás. Vermelho ficou só no risco, e não no preço: em estudo com
   anúncio de curso de idioma (Frontiers in Psychology, 2022) ele ajudou com 30% ou
   mais de desconto e atrapalhou com 5%, e os nossos ficam em 11% e 17%. O amarelo é
   o #FFE100 dos selos do Creators. Para trocar a cor inteira, basta mudar --bf-cor.

   Como liga e desliga: o HTML nasce com o atributo hidden, e um script curto no
   <head> põe a classe bf-on no <html> até 01/12 às 00h de Brasília. Só com essa
   classe o CSS abaixo mostra as faixas. Em 01/12 tudo some sem deploy e sem salto
   de layout.

   O nome das fontes é literal, e não var(--serif), porque /metodo/ e /ingles/
   não usam o site.css.
============================================================================ */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fontes/instrument-serif-400.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fontes/instrument-serif-400-italic.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fontes/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fontes/poppins-600.woff2) format('woff2')}

:root{--bf-cor:#FFE100;--bf-cor-forte:#FFF06A;--bf-tinta:#0A1424;--bf-risco:#E5132E;
  --bf-fita:52px;--bf-pad:var(--pad,clamp(20px,5vw,64px));
  /* A inclinação da faixa, e o quanto as pontas sobem e descem por causa dela (50vw × tan). */
  --bf-giro:-3deg;--bf-sobe:2.7vw}
html.bf-on{scroll-padding-top:calc(var(--bf-fita) + 12px)}

/* A faixa corrida, sempre à vista durante a rolagem. É fixed, e não sticky, porque o
   html,body{overflow-x:hidden} do site faz do body o contêiner de rolagem e o sticky não prende. */
html.bf-on body{padding-top:var(--bf-fita)}
html.bf-on .bf-fita{display:block}
.bf-fita{position:fixed;top:0;left:0;right:0;z-index:1100;height:var(--bf-fita);overflow:hidden;box-sizing:border-box;
  background:var(--bf-cor);color:var(--bf-tinta);text-decoration:none;white-space:nowrap;
  font:500 15px/var(--bf-fita) 'Poppins',system-ui,sans-serif}
.bf-fita:hover{color:var(--bf-tinta)}
.bf-fita:focus-visible{outline:3px solid var(--bf-tinta);outline-offset:-5px}
/* Dois grupos iguais: o trilho anda metade da própria largura e a emenda não aparece. */
.bf-fita-trilho{display:inline-flex;animation:bf-corre 60s linear infinite;will-change:transform}
.bf-fita:hover .bf-fita-trilho,.bf-fita:focus-visible .bf-fita-trilho{animation-play-state:paused}
.bf-fita-item{display:inline-flex;align-items:center;gap:20px;padding-right:20px}
.bf-fita-item b{font-weight:600}
.bf-fita-item s{text-decoration-thickness:2px}
.bf-fita-item i{width:6px;height:6px;border-radius:50%;background:var(--bf-tinta);flex:none}
.bf-fita-item .t{font:italic 400 27px/1 'Instrument Serif',serif}
.bf-fita-item u{font-weight:600;text-underline-offset:3px}
@keyframes bf-corre{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bf-fita-trilho{animation:none}}

/* A faixa na transversal. A caixa corta as pontas, para não criar rolagem lateral, e
   reserva a altura que a inclinação ocupa. A faixa é mais larga que a tela (5vw de cada
   lado) para as pontas nunca aparecerem; o padding traz o conteúdo de volta para dentro. */
html.bf-on .bf-tv-caixa{display:block}
.bf-tv-caixa{position:relative;z-index:2;box-sizing:border-box;width:100%;overflow:hidden;
  padding:calc(var(--bf-sobe) + 12px) 0;pointer-events:none}
.bf-tv{pointer-events:auto;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px clamp(20px,3vw,48px);
  width:110vw;margin-left:-5vw;padding:clamp(12px,1.3vw,20px) calc(var(--bf-pad) + 5vw);
  transform:rotate(var(--bf-giro));transform-origin:50% 50%;
  background:var(--bf-cor);color:var(--bf-tinta);box-shadow:0 18px 44px rgba(0,0,0,.42);
  font:500 14px/1.25 'Poppins',system-ui,sans-serif;text-align:left}
.bf-tv *{box-sizing:border-box}
.bf-tv a{color:var(--bf-tinta);text-decoration:none}
.bf-tv a:focus-visible{outline:3px solid var(--bf-tinta);outline-offset:3px;border-radius:6px}
.bf-tv-chamada{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex:none}
.bf-tv-titulo{font:400 clamp(52px,6.8vw,108px)/.92 'Instrument Serif',serif;letter-spacing:-.02em;white-space:nowrap}
.bf-tv-titulo em{font-style:italic}
.bf-tv-prazo{display:block;white-space:nowrap}
.bf-tv-prazo b{display:block;font:italic 400 clamp(23px,2.3vw,34px)/1.05 'Instrument Serif',serif}
.bf-tv-prazo u{display:block;margin-top:4px;font-weight:600;font-size:14px;text-underline-offset:3px}
.bf-tv s{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--bf-risco)}

/* Os quatro programas: Home, Método, Planos e Inglês. Cada preço leva à aba do programa. */
.bf-tv-precos{display:flex;gap:clamp(14px,2.2vw,36px)}
.bf-tv-preco{display:block;white-space:nowrap}
.bf-tv-preco small{display:block;font-size:13px;font-weight:600}
.bf-tv-preco b{display:block;font:400 clamp(34px,3.9vw,62px)/1.02 'Instrument Serif',serif}
.bf-tv-preco span{display:block;font-size:13.5px;font-weight:500}
.bf-tv a.bf-tv-preco:hover b,.bf-tv a.bf-tv-chamada:hover u{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.1em}

/* Um programa só: a queda do preço toma a faixa. */
.bf-tv-um .bf-tv-chamada{gap:clamp(12px,1.6vw,26px)}
.bf-tv-um .bf-tv-titulo{font-size:clamp(48px,5vw,84px)}
.bf-tv-um .bf-tv-prazo b{font-size:clamp(22px,2vw,31px)}
.bf-tv-queda{display:flex;align-items:center;gap:clamp(10px,1.3vw,20px);min-width:0}
.bf-tv-de{font:400 clamp(24px,2.4vw,38px)/1 'Instrument Serif',serif;white-space:nowrap}
.bf-tv-de s{margin:0 .1em;text-decoration-thickness:max(2px,.07em)}
.bf-tv-por{font:400 clamp(64px,6.8vw,112px)/.9 'Instrument Serif',serif;letter-spacing:-.02em;white-space:nowrap}
.bf-tv-por small{display:inline-block;max-width:4.6em;margin-left:6px;font:600 clamp(14px,1.3vw,19px)/1.1 'Poppins',system-ui,sans-serif;letter-spacing:0;white-space:normal}
/* Com cupom o preço ganha centavos e precisa de menos corpo para caber. */
.bf-tv-por.longo{font-size:clamp(54px,5.6vw,90px)}
.bf-tv-ganho{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:0 1 190px;min-width:140px}
.bf-tv-economia{font-size:clamp(14px,1.15vw,16px);font-weight:600;line-height:1.25}
.bf-tv a.bf-tv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;
  background:var(--bf-tinta);color:var(--bf-cor);font:600 15px/1.15 'Poppins',system-ui,sans-serif;text-align:center;white-space:nowrap;
  transition:transform .15s ease}
.bf-tv a.bf-tv-btn:hover{transform:translateY(-2px);color:#fff}

/* O quadro de oferta: onde fica o preço normal, o antigo riscado e o atual em destaque.
   Os seletores são fortes de propósito, porque cada página estiliza os spans do próprio preço. */
html.bf-on span.bf-oferta{display:block;box-sizing:border-box;margin:6px 0 14px;padding:16px 18px 16px;
  border:0;border-radius:14px;background:var(--bf-cor);color:var(--bf-tinta);
  box-shadow:0 14px 40px rgba(255,225,0,.2);font-style:normal;text-align:left;letter-spacing:0;text-transform:none}
html.bf-on .bf-oferta .bf-oferta-selo{display:inline-block;margin:0 0 10px;padding:5px 11px 4px;border-radius:6px;
  background:var(--bf-tinta);color:var(--bf-cor);font:600 12px/1.15 'Poppins',system-ui,sans-serif;letter-spacing:0;text-transform:none;transform:rotate(-2deg)}
html.bf-on .bf-oferta .bf-oferta-de{display:block;margin:0;color:var(--bf-tinta);font:600 15px/1.25 'Poppins',system-ui,sans-serif;letter-spacing:0;text-transform:none}
/* O risco do preço antigo: uma diagonal vermelha que se lê de longe sem apagar os números. */
html.bf-on .bf-oferta s{position:relative;display:inline-block;margin:0 .16em;color:var(--bf-tinta);font-size:1.75em;line-height:1.1;text-decoration:none;white-space:nowrap}
html.bf-on .bf-oferta s::after{content:"";position:absolute;left:-3%;right:-3%;top:50%;height:max(3px,.1em);border-radius:99px;
  background:var(--bf-risco);transform:rotate(-8deg);pointer-events:none}
html.bf-on .bf-oferta .bf-oferta-por{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;margin:2px 0 0;color:var(--bf-tinta);
  font:400 clamp(76px,6.2vw,92px)/.98 'Instrument Serif',serif;letter-spacing:-.02em;text-transform:none;white-space:nowrap}
html.bf-on .bf-oferta small{display:inline;margin:0;color:var(--bf-tinta);font:600 15px/1.1 'Poppins',system-ui,sans-serif;letter-spacing:0;text-transform:none}
html.bf-on .bf-oferta .bf-oferta-ganho{display:block;margin:10px 0 0;color:var(--bf-tinta);font:600 14px/1.3 'Poppins',system-ui,sans-serif;letter-spacing:0;text-transform:none}
html.bf-on .bf-oferta .bf-oferta-ganho:empty{display:none}
/* Nos cards o quadro atravessa de ponta a ponta. */
html.bf-on .stcard span.bf-oferta{margin:2px -22px 6px;border-radius:0;box-shadow:none;padding:14px 22px 16px}
/* O card já tem o selo Black Friday sobre a foto. */
html.bf-on .stcard .bf-oferta-selo{display:none}
/* Nas áreas de investimento e no bilhete do Private o preço é ainda maior. */
html.bf-on .invest-valor .bf-oferta .bf-oferta-por{font-size:clamp(84px,9.6vw,136px)}
html.bf-on .b-preco .bf-oferta .bf-oferta-por{font-size:clamp(72px,6.8vw,100px)}
html.bf-on .invest-valor .bf-oferta .bf-oferta-por.longo{font-size:clamp(58px,6.8vw,96px)}
html.bf-on .invest-valor .bf-oferta .bf-oferta-de{font-size:17px}
html.bf-on .invest-valor span.bf-oferta{padding:20px 24px 22px;border-radius:18px}
/* A mentoria para provas: entra na promoção, mas o valor é sob consulta e não tem número. */
html.bf-on .bf-oferta.bf-consulta .bf-oferta-por{font-size:clamp(54px,4.8vw,72px);font-style:italic;line-height:1;white-space:normal}
/* A área de investimento inteira ganha borda da cor da oferta. */
html.bf-on .invest{border:3px solid var(--bf-cor)}
/* O rótulo antigo do preço sai quando o quadro o substitui. */
html.bf-on [data-bf=""]{display:none}

/* Versão curta, para as linhas de informação do topo das páginas. */
html.bf-on span.bf-mini{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 .45em;padding:5px 13px;border-radius:999px;
  background:var(--bf-cor);color:var(--bf-tinta);font:600 13px/1.35 'Poppins',system-ui,sans-serif;letter-spacing:0;text-transform:none}
html.bf-on .bf-mini b{font:400 21px/1 'Instrument Serif',serif;color:var(--bf-tinta)}
html.bf-on .bf-mini s{color:var(--bf-tinta);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--bf-risco)}

/* Durante a promoção os selos e os cards em destaque seguem a mesma cor. */
html.bf-on .stcard-badge.hot{background:var(--bf-cor);color:var(--bf-tinta)}
html.bf-on .stcard.feat{border-color:var(--bf-cor);box-shadow:0 22px 54px rgba(255,225,0,.16)}

/* O menu fica acima da faixa, senão a gaveta do celular abre por baixo dela. */
html.bf-on .subhero > .nav{z-index:3}
/* Na home a primeira dobra desconta a faixa, para o ticker do filme seguir à vista. */
@media (min-width:641px){html.bf-nav-fixa .hero{min-height:calc(100vh - var(--bf-fita));min-height:calc(100svh - var(--bf-fita))}}

@media (max-width:1240px){
  .bf-tv{flex-wrap:wrap}
  .bf-tv-precos{flex:1 1 100%;justify-content:space-between}
  .bf-tv-ganho{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between}
}
@media (max-width:640px){
  /* No celular a tela é estreita: inclina um pouco mais para a diagonal seguir à vista. */
  :root{--bf-fita:44px;--bf-giro:-3.5deg;--bf-sobe:3.1vw}
  .bf-fita{font-size:13.5px}
  .bf-fita-item .t{font-size:23px}

  .bf-tv-caixa{padding:calc(var(--bf-sobe) + 6px) 0}
  .bf-tv{padding:12px calc(var(--bf-pad) + 5vw);gap:6px 12px}
  .bf-tv-chamada{flex:1 1 100%;justify-content:space-between;gap:10px}
  .bf-tv-titulo{font-size:min(13.2vw,60px)}
  .bf-tv-um .bf-tv-titulo{font-size:min(13.2vw,60px)}
  .bf-tv-prazo{text-align:right}
  .bf-tv-prazo b,.bf-tv-um .bf-tv-prazo b{font-size:min(5.2vw,24px)}
  .bf-tv-prazo u{font-size:12px;margin-top:2px}
  .bf-tv-precos{gap:6px}
  .bf-tv-preco small{font-size:11.5px}
  .bf-tv-preco b{font-size:min(7.4vw,31px)}
  .bf-tv-preco span{font-size:10.5px}
  .bf-tv-queda{flex:1 1 100%;gap:10px;justify-content:space-between}
  .bf-tv-de{font-size:min(5.8vw,26px);white-space:normal;max-width:5em;line-height:1.05}
  .bf-tv-por{font-size:min(20vw,88px)}
  .bf-tv-por small{font-size:13px;margin-left:3px}
  .bf-tv-por.longo{font-size:min(16.5vw,70px)}
  .bf-tv-ganho{gap:10px}
  .bf-tv-economia{flex:1 1 0;font-size:12.5px}
  .bf-tv a.bf-tv-btn{min-height:44px;padding:0 16px;font-size:13.5px}

  /* Home no celular: o menu também é fixo, logo abaixo da faixa corrida. */
  html.bf-nav-fixa .nav{top:var(--bf-fita)}
  html.bf-nav-fixa .nav-links.open{top:calc(var(--bf-fita) + 52px)!important}
  html.bf-nav-fixa .hero > .bf-tv-caixa{margin-top:52px}
  /* A faixa da home tem altura previsível para o botão de som caber logo abaixo dela. */
  html.bf-nav-fixa{--bf-hero-h:calc(158px + 2 * var(--bf-sobe))}
  html.bf-nav-fixa .sound-toggle{top:calc(52px + var(--bf-hero-h) + 14px)}

  /* Fora da home o menu não é fixo: a gaveta abre sob a faixa corrida e o menu. */
  html.bf-on:not(.bf-nav-fixa) .nav-links.open{top:calc(var(--bf-fita) + 64px)!important}

  /* Celular bem estreito: a queda do preço com "na 1ª parcela" precisa de menos corpo. */
  @media (max-width:380px){.bf-tv-por{font-size:18.5vw}.bf-tv-de{font-size:5.2vw}}

  /* O quadro de oferta no celular. */
  html.bf-on .bf-oferta .bf-oferta-por{font-size:min(22vw,88px)}
  html.bf-on .invest-valor .bf-oferta .bf-oferta-por,html.bf-on .b-preco .bf-oferta .bf-oferta-por{font-size:min(23vw,96px)}
  html.bf-on .invest-valor .bf-oferta .bf-oferta-por.longo{font-size:min(16vw,68px)}
  html.bf-on .invest-valor span.bf-oferta{padding:16px 16px 18px}
  html.bf-on .bf-oferta.bf-consulta .bf-oferta-por{font-size:min(15vw,62px)}
}