/* ============================================================
   O CÉU NO TOPO DAS PÁGINAS INTERNAS (10/10/2026)
   Mesma abertura da página de curso, para blog, novidades, contato, lista de espera, 404,
   termos e as páginas de aula/post. A home tem o hero dela e não carrega este arquivo.
   Dois jeitos de usar:
     .tbc-hero        o bloco de abertura inteiro vira céu (título e texto em branco);
     .tbc-com-faixa   só uma faixa de céu atrás do menu, que some antes do conteúdo
                      (páginas de leitura: o texto continua escuro).
   Caminhos absolutos (/assets/…): valem em qualquer pasta, inclusive na 404.
   ============================================================ */
.tbc-hero { position: relative !important; margin: 12px 12px 0 !important; border-radius: 28px; overflow: hidden; isolation: isolate; background: #F5F5F5 !important; }
.tbc-hero [class*="-bg-"] { display: none !important; }
.tbc-ceu { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.45) 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.45) 82%, transparent 100%); }
.tbc-ceu img, .tbc-faixa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 1 !important; }
.tbc-hero h1, .tbc-hero h1 * { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.tbc-hero h1 { text-shadow: 0 2px 28px rgba(6,60,120,.3); }
.tbc-hero p { color: #fff !important; text-shadow: 0 1px 16px rgba(6,60,120,.35); }
.tbc-hero label { background: #fff !important; border: 0 !important; box-shadow: 0 24px 46px -22px rgba(6,40,90,.5) !important; }

.tbc-masc { opacity: 1 !important; position: absolute; width: 150px; height: 150px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 16px 22px rgba(20,40,90,.28)); animation: tbcFlutua 4.4s ease-in-out infinite; }
.tbc-masc--1 { left: 8%; top: 37%; }
.tbc-masc--2 { right: 8%; top: 31%; animation-delay: -1.4s; }
@keyframes tbcFlutua { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -10px; rotate: 2deg; } }

.tbc-masc--meio { left: 43%; top: 92px; width: 108px; height: 108px; }
@media (max-width: 1100px) { .tbc-masc--meio { display: none; } }

/* páginas de leitura: só a faixa atrás do menu */
.tbc-com-faixa { position: relative; isolation: isolate; }
.tbc-faixa { position: absolute; top: 12px; left: 12px; right: 12px; height: 330px; z-index: -1; border-radius: 28px 28px 0 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 100%); }

@media (max-width: 1100px) { .tbc-masc { width: 104px; height: 104px; } .tbc-masc--1 { left: 2%; top: 24%; } .tbc-masc--2 { right: 2%; top: 20%; } }
@media (max-width: 720px) { .tbc-hero { margin: 8px 8px 0 !important; border-radius: 22px; } .tbc-masc { width: 72px; height: 72px; } .tbc-masc--1 { left: 3%; top: 88px; } .tbc-masc--2 { right: 3%; top: 88px; } .tbc-faixa { top: 8px; left: 8px; right: 8px; height: 250px; border-radius: 22px 22px 0 0; } }
@media (prefers-reduced-motion: reduce) { .tbc-masc { animation: none; } }
/* nas páginas de aula e de post a faixa é da página inteira, não da coluna de leitura */
.tbc-faixa--pagina { z-index: -1; height: 240px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 24%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 24%, transparent 100%); }
.tbc-faixa--pagina + article { background: transparent !important; }
/* contato: o texto de abertura vai até embaixo, então o céu só some no finzinho */
.tb-contact-hero.tbc-hero .tbc-ceu { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%); }
body:has(> .tbc-faixa--pagina) { position: relative; }