.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --preto:#111111; --creme:#fbf7ee; --rosa:#ff014c; --vermelho:#d30032; --vinho:#6d001a; --branco:#fcfcfc; --verde:#1fb259; --verde-escuro:#0a6b33; }
/* Start custom CSS *//* ==========================================================================
Black: O Renascimento — base do site
O layout, as cores e a tipografia de cada elemento estão nas classes globais
do Elementor. Aqui fica só o que o painel não faz: fontes, a escala da página,
detalhes desenhados (contornos, barras, ícones) e as animações.
Medidas: N * var(--u) = "N px do layout" (1920 no desktop, 420 no celular).
========================================================================== */
/* ---------- Fontes ---------- */
@font-face{font-family:"Valty";src:url("https://blackanalisboa.com.br/wp-content/uploads/2026/10/black-valty-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Valty";src:url("https://blackanalisboa.com.br/wp-content/uploads/2026/10/black-valty-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("https://blackanalisboa.com.br/wp-content/uploads/2026/10/black-plus-jakarta-sans.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("https://blackanalisboa.com.br/wp-content/uploads/2026/10/black-libre-franklin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Marcellus";src:url("https://blackanalisboa.com.br/wp-content/uploads/2026/10/black-marcellus.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Grotesk Display";src:url("https://blackanalisboa.com.br/wp-content/uploads/2026/10/black-neue-haas-display-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* ---------- Base ---------- */
:root{
--u:calc(1rem / 16);
--k-preto:#111;--k-creme:#fbf7ee;--k-rosa:#ff014c;--k-vermelho:#d30032;--k-vinho:#6d001a;
--f-texto:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--suave:cubic-bezier(.2,.7,.2,1);
}
/* a raiz acompanha a largura da tela: 420 de largura = 16px (celular), 1920 = 16px (desktop).
No desktop ela acompanha também a ALTURA: barra da contagem + topo da página somam 905 de altura no layout
(73 + 28 + 776 + 28) e têm que caber na 1ª tela; em janela baixa a página inteira diminui junto
(100vh / 56.6 = 16px quando a janela tem 905 de altura). */
html{font-size:calc(100vw / 26.25);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (min-width:600px){html{font-size:22.857px}}
@media (min-width:1025px){html{font-size:clamp(9.5px,min(calc(100vh / 56.6),max(12px,calc(100vw / 120))),21.3333px);font-size:clamp(9.5px,min(calc(100svh / 56.6),max(12px,calc(100vw / 120))),21.3333px)}}
html body{margin:0;background:var(--k-preto);color:#fff;font-family:var(--f-texto);font-weight:500;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
.elementor button,.elementor input{font-family:inherit}
.elementor :focus-visible{outline:2px solid var(--k-rosa);outline-offset:3px}
/* ---------- Títulos ----------
São aparados da altura da maiúscula até a linha de base, como no Figma
(0,733 = maiúscula da Valty; 0,408 = eixo vertical da fonte).
No texto do título: itálico = trecho em destaque;
= quebra só
no celular;
= quebra só no desktop;
= quebra nos dois. */
.elementor .titulo{font-synthesis:none}
.elementor .titulo::before,.elementor .titulo::after{content:"";display:table}
.elementor .titulo::before{margin-bottom:-.175em;margin-bottom:calc(.325em - .5lh)}
.elementor .titulo::after{margin-top:-.092em;margin-top:calc(.408em - .5lh)}
.elementor .titulo em{--tinta:var(--k-rosa);font-style:normal;color:var(--tinta)}
.elementor .titulo u{text-decoration:none}
.elementor .titulo span{display:none}
.elementor .secao__cabeca .titulo em{font-weight:500}
.elementor .hero__titulo em{--tinta:var(--k-vermelho)}
.elementor .hero__titulo[data-pagina="1"] em{--tinta:var(--k-rosa)}
@media (max-width:1024px){
.elementor .titulo span{display:inline}
.elementor .titulo u{display:none}
.elementor .hero__titulo[data-pagina="1"] em{--tinta:var(--k-creme)} /* no celular da página 1 o título é todo creme */
}
/* ---------- Contorno fino (cards e rodapé) e barra do topo dos cards ---------- */
.elementor .card{--k:1;--c:calc(var(--u) * var(--k));--borda:calc(1 * var(--c))}
@media (max-width:1024px){
.elementor .card{--k:.96} /* no celular o card é o do desktop x 0,96 */
.elementor .card:nth-child(2){--k:.952381}
}
.elementor .card::before{content:"";position:absolute;z-index:1;top:0;left:50%;width:calc(244 * var(--c));height:calc(8 * var(--c));background:var(--k-rosa);transform:translateX(-50%)}
.elementor .card::after,.elementor .rodape::after{content:"";position:absolute;inset:0;z-index:3;padding:var(--borda,calc(1 * var(--u)));background:radial-gradient(93.8% 100% at 50% 0,rgba(12,12,12,0) 0%,rgba(22,22,22,.25) 25%,rgba(32,32,32,.5) 50%,rgba(41,41,41,.75) 75%,#333 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
@media (max-width:1024px){.elementor .rodape::after{content:none}}
/* ---------- Botões ---------- */
.elementor .btn{transition:filter .25s ease,transform .35s var(--suave)}
.elementor .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.3) 50%,transparent 64%);translate:-130% 0;pointer-events:none}
.elementor .btn-seta{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='66' fill='none'%3E%3Crect width='80' height='66' fill='url(%23a)' rx='33'/%3E%3Cpath stroke='%23FCFCFC' stroke-linecap='round' stroke-width='1.8' d='m34 39 12-12m0 9v-9h-9'/%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='0' r='1' gradientTransform='matrix(52.6381 -.1098 .00587 237.635 40 33)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D30032'/%3E%3Cstop offset='1' stop-color='%236D001A'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");background-position:center;background-size:100% 100%;background-repeat:no-repeat;transition:filter .25s ease,scale .35s var(--suave)}
.elementor .btn-seta[data-cor="verde"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='66' fill='none'%3E%3Crect width='80' height='66' fill='url(%23a)' rx='33'/%3E%3Cpath stroke='%23FCFCFC' stroke-linecap='round' stroke-width='1.8' d='m34 39 12-12m0 9v-9h-9'/%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='0' r='1' gradientTransform='matrix(52.6381 -.1098 .00587 237.635 40 33)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%231FB259'/%3E%3Cstop offset='1' stop-color='%230A6B33'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E")}
.elementor .btn:hover,.elementor .btn-seta:hover,.elementor .cta:hover .btn,.elementor .cta:hover .btn-seta{filter:brightness(1.14)}
.elementor .cta:hover .btn-seta{scale:1.07}
.elementor .btn:active,.elementor .btn-seta:active{transform:scale(.985)}
.elementor .btn:disabled,.elementor .btn-seta:disabled{cursor:progress}
.elementor .btn--whats::before{content:"";flex:none;width:calc(24 * var(--u));height:calc(24 * var(--u));background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat}
.elementor .btn-topo{transition:background-color .25s ease,color .25s ease,transform .35s var(--suave)}
.elementor .btn-topo::after{content:"";flex:none;width:calc(10.35 * var(--u));height:calc(10.35 * var(--u));margin:calc(-.675 * var(--u));background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.35 10.35' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.35' d='m.68 9.68 9-9m0 6.75V.67H2.93'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.35 10.35' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.35' d='m.68 9.68 9-9m0 6.75V.67H2.93'/%3E%3C/svg%3E") center / contain no-repeat}
/* ---------- Barra da contagem ---------- */
.elementor .contagem__sep{font-family:"Marcellus",serif}
/* ---------- Fotos de fundo ---------- */
@media (max-width:1024px){
/* esmaece a foto para o fundo */
.elementor .hero::after,.elementor .sobre::after,.elementor .ob::after{content:"";position:absolute;left:0;right:0}
.elementor .hero::after{top:calc(var(--hf) * .36);height:calc(var(--hf) * .57);background:linear-gradient(to bottom,rgba(17,17,17,0),rgba(17,17,17,.8) 38%,var(--k-preto) 62%)}
.elementor .sobre::after{top:calc(143.49 * var(--u));height:calc(397 * var(--u));background:linear-gradient(to bottom,rgba(17,17,17,0),var(--k-preto) 70%)}
.elementor .ob::after{top:calc(120 * var(--u));height:calc(380 * var(--u));background:linear-gradient(to bottom,rgba(17,17,17,0),var(--k-preto) 57.6%)}
}
@media (min-width:600px) and (max-width:1024px){
.elementor .hero__foto,.elementor .sobre__foto,.elementor .ob__foto{-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
}
/* telas acima de 2560px: o layout para de crescer e as bordas das fotos esmaecem */
@media (min-width:2561px){
.elementor .hero__foto,.elementor .sobre__foto,.elementor .ob__foto{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.elementor .luz-topo,.elementor .luz-lado{-webkit-mask-image:linear-gradient(to right,#000 78%,transparent);mask-image:linear-gradient(to right,#000 78%,transparent)}
}
/* ---------- 1ª tela: o formulário do topo aparece sem rolar ----------
--barra = altura da barra da contagem (a mesma da classe "topbar": 73 no desktop, 58 no celular).
Desktop: o topo ocupa o que sobra da tela abaixo da barra, no máximo os 1080 do layout; a foto é cortada
embaixo. O selo do canto da foto ficaria pela metade, então some numa sombra da cor do fundo assim que o
corte passa de 85 (a altura da sombra cresce com o corte: 100% = altura do topo).
Celular: o topo termina 34px antes do fim da tela e o conteúdo fica encostado embaixo, então o botão do
formulário sempre aparece. A foto usa o espaço que sobra em cima e encolhe junto com ele:
--p = altura livre acima do logo (de 84 a 300); --hf = altura da foto (o queixo fica logo acima do logo)
--topo-conteudo = altura de logo + título + texto + formulário (468). Se o texto do topo mudar bastante,
ajustar esse número para a foto continuar acompanhando.
Navegador sem a unidade svh: vale o valor fixo da classe "hero" (150 de foto). */
:root{--barra:calc(73 * var(--u))}
@media (min-width:1025px){
.elementor .hero.hero{min-height:min(calc(1080 * var(--u)),calc(100vh - var(--barra)));min-height:min(calc(1080 * var(--u)),calc(100svh - var(--barra)))}
.elementor .hero::after{content:"";position:absolute;z-index:0;bottom:0;left:calc(50% + 660 * var(--u));width:calc(352 * var(--u));height:clamp(0px,calc((1080 * var(--u) - 100%) * 20 - 1700 * var(--u)),calc(272 * var(--u)));background:radial-gradient(ellipse 50% 100% at 50% 100%,#0e0c0d 62%,rgba(14,12,13,0) 100%);pointer-events:none}
}
@media (max-width:1024px){
:root{--barra:calc(58 * var(--u));--topo-conteudo:calc(468 * var(--u))}
/* barra numa linha só: chamada e data à esquerda (uma sobre a outra), contagem à direita */
.elementor .topbar__rotulo{grid-area:1 / 1;align-self:end}
.elementor .topbar__data{grid-area:2 / 1;align-self:start}
.elementor .contagem{grid-area:1 / 2 / 3 / 3}
.elementor .hero{--p:calc(150 * var(--u));--hf:min(calc(416.4 * var(--u)),calc(var(--p) * 2.36))}
@supports (height:100svh){
.elementor .hero{--livre:calc(100svh - var(--barra) - 34px);--p:clamp(calc(84 * var(--u)),calc(var(--livre) - var(--topo-conteudo) - 24 * var(--u)),calc(300 * var(--u)))}
.elementor .hero.hero{min-height:min(var(--livre),calc(var(--topo-conteudo) + 324 * var(--u)));padding-top:calc(84 * var(--u))}
}
/* 840 x 833 = proporção da foto do celular; 7,2% dela (o vazio acima do cabelo) fica escondido atrás da barra */
.elementor .hero__foto.hero__foto{top:calc(var(--hf) * -.072);width:calc(var(--hf) * 1.0084);height:var(--hf);-webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
}
/* ---------- Formulário ---------- */
.elementor .campo.campo{appearance:none;-webkit-appearance:none;box-shadow:none}
.elementor .campo.campo::placeholder{color:var(--k-preto);opacity:1}
.elementor .campo.campo:focus{border-color:rgba(252,252,252,.2)}
.elementor .campo.campo:focus-visible{outline:2px solid var(--k-rosa);outline-offset:2px}
.elementor .form__aviso.message-error{border:1px solid rgba(255,1,76,.55)}
.elementor .form[data-repetindo] .message-error{display:none!important} /* o script está tentando o envio de novo */
.elementor [data-ocultos]{display:none!important} /* campos ocultos dos formulários (UTMs etc.), preenchidos pelo script do */
/* ---------- Faixa animada ---------- */
.elementor .faixa::before{content:"";position:absolute;top:calc(16.5 * var(--u));left:calc(50% - 1742.9 * var(--u));width:calc(274.187 * 14 * var(--u));height:calc(45 * var(--u));background:url("https://blackanalisboa.com.br/wp-content/uploads/2026/10/black-faixa.webp") 0 0 / calc(274.187 * var(--u)) calc(45 * var(--u)) repeat-x;animation:faixa 11s linear infinite;will-change:transform}
@keyframes faixa{to{transform:translateX(calc(-274.187 * var(--u)))}}
/* ---------- "Essa aula é pra você que" ---------- */
.elementor .publico__txt{font-family:"Neue Haas Grotesk Display","Helvetica Neue",Helvetica,Arial,sans-serif}
/* o ::before dos contêineres do Elementor nasce como camada absoluta (overlay); aqui ele volta a ser um item comum */
.elementor .publico__item::before{content:"";position:static;flex:none;width:calc(48 * var(--u));height:calc(48 * var(--u));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Crect width='48' height='48' fill='%236D001A' rx='24'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m15 24 6 6 12-12'/%3E%3C/svg%3E") center / contain no-repeat}
/* ---------- Rodapé e selo ---------- */
.elementor .rodape__txt{font-family:"Libre Franklin",var(--f-texto)}
.elementor .ob__data strong{font-weight:700;color:#fff}
.elementor .selo::before{content:"";position:static;flex:none;width:calc(24 * var(--u));height:calc(24 * var(--u));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23d30032'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m7.5 12.2 3 3 6-6.2'/%3E%3C/svg%3E") center / contain no-repeat}
/* ---------- Popup de cadastro ----------
No site o bloco "Popup de cadastro" fica guardado e só abre nos botões marcados
com data-popup; no editor ele aparece no fim da página para ser editado. */
.elementor .popup.popup{display:none}
.elementor-editor-active .elementor .popup.popup,.elementor .popup-janela .popup.popup{display:flex}
.elementor-editor-active .elementor .popup.popup{background:rgba(8,8,8,.82)}
html.trava{overflow:hidden;scrollbar-gutter:stable}
.elementor .popup-janela{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:none;color:#fff;overflow-y:auto;overscroll-behavior:contain}
.elementor .popup-janela::backdrop{background:rgba(8,8,8,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.elementor .popup__caixa:focus{outline:none}
.elementor .popup__caixa::before{content:"";position:absolute;top:0;left:50%;width:calc(244 * var(--u));height:calc(8 * var(--u));background:var(--k-rosa);transform:translateX(-50%)}
.elementor .popup__caixa::after{content:"";position:absolute;inset:0;padding:calc(1 * var(--u));border-radius:inherit;background:radial-gradient(93.8% 100% at 50% 0,rgba(255,1,76,.6) 0%,rgba(109,0,26,.5) 30%,#2b2b2b 70%,#333 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.elementor .popup__fechar{transition:background-color .25s ease,border-color .25s ease,rotate .45s var(--suave)}
.elementor .popup__fechar::before{content:"";position:absolute;inset:0;margin:auto;width:calc(15 * var(--u));height:calc(15 * var(--u));background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.6' d='m3 3 10 10M13 3 3 13'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.6' d='m3 3 10 10M13 3 3 13'/%3E%3C/svg%3E") center / contain no-repeat}
.elementor .popup__fechar:hover{border-color:rgba(252,252,252,.45);background-color:rgba(252,252,252,.1);rotate:90deg}
@media (max-width:1024px){.elementor .popup__caixa::before{width:calc(150 * var(--u));height:calc(6 * var(--u))}}
/* ==========================================================================
Animações
Entradas usam translate/scale/rotate (propriedades separadas), então não
mexem nos transform de posicionamento. As de rolagem só valem com o script
ativo (classe .js no ) e para quem não pediu "reduzir movimento".
========================================================================== */
@keyframes sobe{from{opacity:0;translate:0 calc(30 * var(--u));filter:blur(calc(8 * var(--u)))}}
@keyframes desce{from{opacity:0;translate:0 calc(-18 * var(--u))}}
@keyframes assenta{from{scale:1.08}}
@keyframes pinta{from{background-position:100% 0}to{background-position:0 0}}
@keyframes brilho{0%{translate:-130% 0}22%,100%{translate:130% 0}}
@keyframes tique{from{opacity:.25;translate:0 -32%}}
@keyframes pisca{50%{opacity:.25}}
@keyframes paralaxe{to{translate:0 calc(110 * var(--u))}}
@keyframes aparece{from{opacity:0}}
@keyframes some{to{opacity:0}}
@keyframes entra{from{opacity:0;translate:0 calc(16 * var(--u))}}
@keyframes abre{from{scale:0 1}}
@keyframes estala{from{scale:0}}
@keyframes popup-entra{from{opacity:0;translate:0 calc(30 * var(--u));scale:.96}}
@keyframes popup-sai{to{opacity:0;translate:0 calc(14 * var(--u));scale:.98}}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(31,178,89,.55)}70%,100%{box-shadow:0 0 0 calc(18 * var(--u)) rgba(31,178,89,0)}}
@media (prefers-reduced-motion:no-preference){
/* ---- ao carregar: barra + hero ---- */
.elementor .topbar__inner{animation:desce .8s var(--suave) both}
.elementor .contagem__sep{animation:pisca 1s ease-in-out infinite}
.elementor .contagem__num.tique{animation:tique .4s var(--suave)}
.elementor .hero__foto{transform-origin:68% 40%;animation:assenta 2.8s var(--suave) both}
.elementor .hero__logo,.elementor .hero__titulo,.elementor .hero__sub,.elementor .hero .form .campo,.elementor .hero .form .cta{animation:sobe 1s var(--suave) both}
.elementor .hero__logo{animation-delay:.15s}
.elementor .hero__titulo{animation-delay:.3s}
.elementor .hero__sub{animation-delay:.45s}
.elementor .hero .form .campo:nth-child(1){animation-delay:.6s}
.elementor .hero .form .campo:nth-child(2){animation-delay:.7s}
.elementor .hero .form .cta{animation-delay:.8s}
/* destaque do título "pinta" de creme para a cor */
.elementor .titulo em{background:linear-gradient(90deg,var(--tinta) 50%,var(--k-creme) 50%) 100% 0 / 200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.elementor .hero__titulo em{animation:pinta 1.1s var(--suave) 1s both}
.elementor .ob__titulo em{animation:pinta 1.1s var(--suave) 1.1s both}
.js .elementor [data-anima] em{transition:background-position 1.1s var(--suave) .55s}
.js .elementor [data-anima].visivel em{background-position:0 0}
html:not(.js) .elementor .titulo em{background-position:0 0}
/* brilho periódico no botão do formulário e ao passar o mouse nos demais */
.elementor .form .btn::after,.elementor .btn--whats::after{animation:brilho 4.8s ease-in-out 2.2s infinite}
.elementor .btn:hover::after{translate:130% 0;transition:translate .9s var(--suave)}
.elementor .btn:hover,.elementor .btn-topo:hover{transform:translateY(calc(-2 * var(--u)))}
.elementor .btn--whats{animation:pulso 2.6s ease-out 2s infinite}
/* ---- popup: o fundo escurece, a caixa sobe e o conteúdo chega em sequência ---- */
.elementor .popup-janela[open]::backdrop{animation:aparece .4s ease both}
.elementor .popup-janela[open] .popup__caixa{animation:popup-entra .55s var(--suave) both}
.elementor .popup-janela[open] .popup__caixa::before{animation:abre .8s var(--suave) .25s both}
.elementor .popup-janela[open] .popup__logo,.elementor .popup-janela[open] .popup__titulo,.elementor .popup-janela[open] .popup__sub,.elementor .popup-janela[open] .form .campo,.elementor .popup-janela[open] .form .cta{animation:entra .6s var(--suave) both}
.elementor .popup-janela[open] .popup__logo{animation-delay:.12s}
.elementor .popup-janela[open] .popup__titulo{animation-delay:.18s}
.elementor .popup-janela[open] .popup__sub{animation-delay:.24s}
.elementor .popup-janela[open] .form .campo:nth-child(1){animation-delay:.3s}
.elementor .popup-janela[open] .form .campo:nth-child(2){animation-delay:.36s}
.elementor .popup-janela[open] .form .cta{animation-delay:.42s}
.elementor .popup-janela[open] .titulo em{animation:pinta .9s var(--suave) .5s both}
.elementor .popup-janela.fechando::backdrop{animation:some .24s ease both}
.elementor .popup-janela.fechando .popup__caixa{animation:popup-sai .24s ease both}
/* ---- página de obrigado ---- */
.elementor .ob__foto{transform-origin:30% 35%;animation:assenta 2.8s var(--suave) both}
.elementor .ob__logo,.elementor .selo,.elementor .ob__titulo,.elementor .ob__sub,.elementor .ob__cta,.elementor .ob__data{animation:sobe 1s var(--suave) both}
.elementor .ob__logo{animation-delay:.15s}
.elementor .selo{animation-delay:.3s}
.elementor .ob__titulo{animation-delay:.42s}
.elementor .ob__sub{animation-delay:.56s}
.elementor .ob__cta{animation-delay:.7s}
.elementor .ob__data{animation-delay:.84s}
.elementor .selo::before{animation:estala .55s cubic-bezier(.3,1.7,.5,1) .85s both}
/* ---- ao rolar ----
O estado inicial entra sem transição (some na hora, antes de ser visto);
a transição fica só na chegada, quando o script marca o elemento com .visivel. */
.js .elementor [data-anima]{opacity:0;translate:0 calc(38 * var(--u))}
.js .elementor [data-anima="titulo"]{filter:blur(calc(10 * var(--u)))}
.js .elementor [data-anima="assina"]{opacity:1;translate:none}
.js .elementor [data-anima="zoom"]{translate:none;scale:.9}
.js .elementor [data-anima].visivel{opacity:1;translate:none;scale:none;filter:none;transition:opacity .9s var(--suave),translate 1s var(--suave),filter 1s var(--suave),scale 1.2s var(--suave);transition-delay:calc(var(--i,0) * 120ms)}
/* cards: foto assenta, barra abre do centro, texto chega por último */
.js .elementor .card .card__img{scale:1.16}
.js .elementor .card.visivel .card__img{scale:1;transition:scale 1.8s var(--suave);transition-delay:calc(var(--i,0) * 120ms)}
.js .elementor .card::before{scale:0 1}
.js .elementor .card.visivel::before{scale:1 1;transition:scale .9s var(--suave);transition-delay:calc(var(--i,0) * 120ms + .4s)}
.js .elementor .card .card__titulo,.js .elementor .card .card__nome,.js .elementor .card .card__desc{opacity:0;translate:0 calc(18 * var(--c))}
.js .elementor .card.visivel .card__titulo,.js .elementor .card.visivel .card__nome,.js .elementor .card.visivel .card__desc{opacity:1;translate:none;transition:opacity .8s var(--suave),translate .9s var(--suave);transition-delay:calc(var(--i,0) * 120ms + .45s)}
.js .elementor .card.visivel .card__desc{transition-delay:calc(var(--i,0) * 120ms + .6s)}
/* "essa aula é pra você que": o check estala depois do item */
.js .elementor .publico__item::before{scale:0}
.js .elementor .publico__item.visivel::before{scale:1;transition:scale .55s cubic-bezier(.3,1.7,.5,1);transition-delay:calc(var(--i,0) * 120ms + .3s)}
/* Ana Lisboa: foto assenta e a assinatura é "escrita" */
.js .elementor .sobre .sobre__foto{scale:1.08}
.js .elementor .sobre.visivel .sobre__foto{scale:1;transition:scale 2.4s var(--suave)}
.js .elementor .sobre__nome img{clip-path:inset(-10% 100% -10% 0)}
.js .elementor .sobre__nome.visivel img{clip-path:inset(-10% -2% -10% 0);transition:clip-path 1.7s cubic-bezier(.6,0,.2,1) .15s}
}
/* desktop: cards reagem ao mouse e o fundo do hero acompanha o scroll */
@media (min-width:1025px) and (hover:hover) and (prefers-reduced-motion:no-preference){
.elementor .card{transition:translate .5s var(--suave)}
.elementor .card:hover,.js .elementor .card.visivel:hover{translate:0 calc(-8 * var(--u));transition-delay:0s;transition-duration:.5s}
.js .elementor .card.visivel:hover .card__img{scale:1.06;transition-delay:0s}
.js .elementor .card.visivel:hover::before{scale:1.3 1;transition-delay:0s}
}
@supports (animation-timeline:scroll()){
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
.elementor .hero__foto{animation:assenta 2.8s var(--suave) both,paralaxe linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.elementor .faixa::before{animation:none}
.elementor .btn,.elementor .btn-seta,.elementor .btn-topo,.elementor .popup__fechar{transition:none}
}/* End custom CSS */