/**
 * Botoes de CTA da Home (e do resto do site).
 *
 * Os CTAs vieram do Figma como flexbox + paragrafo, sem link e sem semantica.
 * Viraram e-button do Elementor V4: com link o widget renderiza <a href>, que e
 * o que o Google segue.
 *
 * O badge da seta era um elemento filho, e e-button nao aceita filhos. Como o
 * twig do widget passa o texto por striptags permitindo <span>, o badge voltou
 * como dois spans dentro do proprio texto do botao:
 *
 *   <span class="els-cta__badge"><span class="els-cta__arrow"></span></span>
 *
 * Sao dois e nao um de proposito: no hover gira SO a seta de dentro. Com um
 * elemento unico o quadrado inteiro girava e virava losango.
 *
 * As cores saem da escala Primary do Design System V2, as mesmas do header.
 */

/**
 * Invólucro dos widgets ELS: largura propria, sempre.
 *
 * As seccoes da Home centram os filhos (`align-items: center`), portanto o
 * invólucro do widget mede-se pelo conteudo. Nos widgets que declaram
 * `container-type: inline-size` isso e circular: com o containment o conteudo
 * deixa de contar para a largura do pai, o pai colapsa, e o `cqw` da zero.
 * Ja aconteceu no slider de cursos, no blog e no formulario; fica resolvido
 * aqui para todos, que e onde se carrega sempre.
 */
/* Vale para todos os widgets ELS, presentes e futuros: sao todos seccoes de
   largura total. Era uma lista de nomes e eu esquecia-me de la meter cada
   widget novo, que aparecia entao encolhido ate ao conteudo. */
[class*="elementor-widget-els_"] {
	align-self: stretch;
}

/**
 * Altura de 50px, a medida do Figma nos dois formatos.
 *
 * O padding vertical e 5 e nao 6 porque `box-sizing: border-box` conta a borda
 * de 1px: 5+38+5+2 da os 50 certos. No Figma a borda e um stroke, que nao
 * consome altura, e por isso la o padding e 6.
 */
.els-cta {
	/* Os botoes do site sao em maiusculas e a 700. E o que esta no Figma e o
	   que a home ja fazia nos elementos V4; os widgets desenhavam-nos em caixa
	   normal e a 400, e as duas metades do site nao batiam certo. */
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .01em;
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	padding: 5px 5px 5px 15px;
	min-height: 50px;
	box-sizing: border-box;
	border-radius: 5px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/**
 * Um botao escondido fica mesmo escondido.
 *
 * A regra acima poe `display: inline-flex !important` para vencer o que o tema
 * e o Elementor dizem sobre `a` e `button`, mas com isso passou tambem a vencer
 * o `hidden` do HTML, que vem da folha do navegador em peso normal. O botao
 * Back do teste de nivel aparecia na primeira pergunta por causa disto.
 */
.els-cta[hidden] { display: none !important; }

/**
 * Sem badge o padding tem de ser simetrico. Os 5px da direita so fazem sentido
 * quando o badge esta la a preencher aquele espaco: sem ele o texto ficava a
 * 7px da borda direita e a 16px da esquerda, visivelmente torto.
 * No Figma o botao sem badge tem 16px dos dois lados.
 */
.els-cta:not(.els-cta--badge) {
	/* 12 e nao 16: com box-sizing border-box a conta e 2 de borda + 24 de
	   line-height + 12+12, que da os mesmos 50px do botao com badge */
	padding: 12px 15px;
	justify-content: center;
}

/* o quadrado do badge: nunca gira */
.els-cta__badge {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--els-cta-badge-bg, #b5d5f0);
	transition: background-color .25s ease;
}

/* a seta: em repouso aponta na diagonal, no hover fica reta */
.els-cta__arrow {
	width: 12px;
	height: 12px;
	display: block;
	background-image: var(--els-cta-arrow);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	rotate: 0deg;
	transition: rotate .25s ease;
}

.els-cta:hover .els-cta__arrow,
.els-cta:focus-visible .els-cta__arrow {
	rotate: 45deg;
}

/**
 * O mesmo simbolo, desenhado sem markup.
 *
 * Nos botoes nativos do V4 o simbolo nao pode vir dentro do texto: o Elementor
 * sanitiza o HTML do prop e deita fora os atributos, entao o
 * `class="els-cta__badge"` desaparecia e ficava um <span> vazio. Aqui ele e
 * desenhado a partir da propria classe do botao, e so quando o markup nao
 * esta la, para os widgets que ainda o escrevem nao ficarem com dois.
 *
 * Sao precisas duas pecas porque no padrao o quadrado fica QUIETO e so a seta
 * gira: o `::after` e o quadrado, o `::before` e a seta por cima dele. Com uma
 * peca so, o quadrado girava junto e virava um losango.
 */
.els-cta--badge:not(:has(.els-cta__badge)) {
	position: relative;
	--els-cta-quadrado: 38px;
	--els-cta-seta: 12px;
}

.els-cta--badge:not(:has(.els-cta__badge))::after {
	content: "";
	flex: 0 0 auto;
	width: var(--els-cta-quadrado);
	height: var(--els-cta-quadrado);
	border-radius: 5px;
	background-color: var(--els-cta-badge-bg, #b5d5f0);
	transition: background-color .25s ease;
}

.els-cta--badge:not(:has(.els-cta__badge))::before {
	content: "";
	position: absolute;
	/* ao meio do quadrado: os 5px de padding a direita mais metade do que
	   sobra entre o quadrado e a seta */
	right: calc(5px + (var(--els-cta-quadrado) - var(--els-cta-seta)) / 2);
	top: 50%;
	width: var(--els-cta-seta);
	height: var(--els-cta-seta);
	margin-top: calc(var(--els-cta-seta) / -2);
	background-image: var(--els-cta-arrow);
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--els-cta-seta) var(--els-cta-seta);
	rotate: 0deg;
	transition: rotate .25s ease;
	pointer-events: none;
}

.els-cta--badge:not(:has(.els-cta__badge)):hover::after,
.els-cta--badge:not(:has(.els-cta__badge)):focus-visible::after {
	background-color: var(--els-cta-badge-hover, #b5d5f0);
}

.els-cta--badge:not(:has(.els-cta__badge)):hover::before,
.els-cta--badge:not(:has(.els-cta__badge)):focus-visible::before {
	rotate: 45deg;
}

/* ---------------------------------------------------------------- variantes */
/**
 * A cor do texto leva a classe duplicada de proposito. O Global Kit do
 * Elementor tem `.elementor-kit-5 a { color: var(--e-global-color-accent) }`
 * (0,2,0) e todos estes botoes sao <a>: com uma classe unica o texto saia
 * azul em vez da cor do desenho. Os e-button da Home escapavam porque tem
 * estilo de elemento V4 proprio, que carrega depois; os botoes que os meus
 * widgets renderizam nao tem, e por isso perdiam.
 */

.els-cta.els-cta--solid-dark,
.els-cta--solid-dark {
	background-color: #101828;
	color: #ffffff;
	/* Ambar do Website V3 DEVs, onde substituiu o Primary/500 em 253 botoes.
	   A seta por dentro continua #101828, igual nas duas versoes. */
	--els-cta-badge-bg: #ffcc7f;
	--els-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0.782609 11.2174L11.2174 0.782609M11.2174 8.71304V0.782609H3.28696' stroke='%23101828' stroke-width='1.56522' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.els-cta.els-cta--ghost,
.els-cta--ghost {
	background-color: #ffffff;
	color: #101828;
	border-color: #e4e7ec;
	--els-cta-badge-bg: #b5d5f0;
	--els-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0.782609 11.2174L11.2174 0.782609M11.2174 8.71304V0.782609H3.28696' stroke='%23101828' stroke-width='1.56522' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.els-cta.els-cta--soft,
.els-cta--soft {
	background-color: #e4e7ec;
	color: #101828;
	--els-cta-badge-bg: #b5d5f0;
	--els-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0.782609 11.2174L11.2174 0.782609M11.2174 8.71304V0.782609H3.28696' stroke='%23101828' stroke-width='1.56522' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.els-cta.els-cta--solid-light,
.els-cta--solid-light {
	background-color: #b5d5f0;
	color: #101828;
	--els-cta-badge-bg: #101828;
	/* badge escuro, entao a seta e branca */
	--els-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0.782609 11.2174L11.2174 0.782609M11.2174 8.71304V0.782609H3.28696' stroke='%23ffffff' stroke-width='1.56522' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Branco com badge escuro: e o botao sobre fundos escuros, como o card em
   destaque do blog. So havia a azul-clara (`solid-light`). */
.els-cta.els-cta--solid-white,
.els-cta--solid-white {
	background-color: #ffffff;
	color: #101828;
	--els-cta-badge-bg: #ffcc7f;
	/* Ambar no Website V3 DEVs. No V2 o emblema era #101828 com a seta
	   branca; no V3 inverte-se: emblema #FFCC7F e seta escura. E o botao
	   do post em destaque do blog, sobre o cartao #286191. */
	--els-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0.782609 11.2174L11.2174 0.782609M11.2174 8.71304V0.782609H3.28696' stroke='%23101828' stroke-width='1.56522' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.els-cta.els-cta--solid-blue,
.els-cta--solid-blue {
	background-color: #286191;
	color: #ffffff;
	--els-cta-badge-bg: #ffffff;
	--els-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M0.782609 11.2174L11.2174 0.782609M11.2174 8.71304V0.782609H3.28696' stroke='%23101828' stroke-width='1.56522' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ------------------------------------------------------------------ hover */

/**
 * Padrao de hover do site, escolhido a partir do "Find your course":
 * o fundo do botao NAO muda. Quem responde e o badge, que muda de tom, e a
 * seta, que gira 45deg e fica reta.
 *
 * A regra do tom: o badge claro escurece, o badge escuro clareia. Sempre na
 * familia da propria cor, nunca a saltar para outra.
 *
 * O #E4B169 do botao escuro e o unico valor aqui que nao sai de um swatch.
 * O V3 pos o badge em #FFCC7F, que ja nao esta na escala Amber - cai entre
 * Amber/300 e Amber/500 -, e a escala nao oferece um degrau mais escuro que
 * sirva: Amber/500 (#FFC176) fica a dois pontos de luminosidade do original
 * e nao se ve, e Amber/700 (#B2936F) perde saturacao e fica barro. O valor
 * usado e o proprio #FFCC7F andado 25% na direccao de Amber/900: mesma
 * matiz, dez pontos mais escuro, dentro da familia.
 *
 * A excepcao sao os botoes sem badge: ali nao ha nada para reagir, entao o
 * fundo muda, senao ficariam sem qualquer resposta ao mouse.
 */

.els-cta--badge:hover .els-cta__badge,
.els-cta--badge:focus-visible .els-cta__badge {
	background-color: var(--els-cta-badge-hover, #b5d5f0);
}

.els-cta--solid-dark  { --els-cta-badge-hover: #e4b169; }
.els-cta--ghost       { --els-cta-badge-hover: #7cb1e5; }
.els-cta--soft        { --els-cta-badge-hover: #7cb1e5; }
.els-cta--solid-light { --els-cta-badge-hover: #286191; }
.els-cta--solid-white { --els-cta-badge-hover: #e4b169; }
.els-cta--solid-blue  { --els-cta-badge-hover: #b5d5f0; }

/* o texto tambem responde ao hover, em qualquer variante clara */
.els-cta.els-cta--ghost:hover,
.els-cta.els-cta--ghost:focus-visible,
.els-cta.els-cta--soft:hover,
.els-cta.els-cta--soft:focus-visible {
	color: #286191;
}

/* sem badge: o fundo e a unica coisa que pode responder */
.els-cta--ghost:not(.els-cta--badge):hover,
.els-cta--ghost:not(.els-cta--badge):focus-visible {
	background-color: #eaf2fb;
	border-color: #b5d5f0;
	color: #286191;
}

.els-cta--soft:not(.els-cta--badge):hover,
.els-cta--soft:not(.els-cta--badge):focus-visible {
	background-color: #eaf2fb;
}

.els-cta--solid-dark:not(.els-cta--badge):hover,
.els-cta--solid-dark:not(.els-cta--badge):focus-visible {
	background-color: #286191;
}

.els-cta--solid-light:not(.els-cta--badge):hover,
.els-cta--solid-light:not(.els-cta--badge):focus-visible {
	background-color: #7cb1e5;
}

.els-cta--solid-blue:not(.els-cta--badge):hover,
.els-cta--solid-blue:not(.els-cta--badge):focus-visible {
	background-color: #101828;
}

/* ------------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	/* No Figma mobile o botao tem 56 de altura e o badge 44, contra os 50 e 38
	   do desktop: o alvo cresce onde se toca com o dedo em vez do rato.
	   56 = 2 de borda + 44 do badge + 5 e 5 de padding. Nos botoes sem badge a
	   mesma altura sai de 2 + 24 de linha + 15 e 15. */
	.els-cta {
		min-height: 56px;
		padding: 5px 5px 5px 13px;
		gap: 10px;
	}
	.els-cta:not(.els-cta--badge) {
		padding: 15px 13px;
	}
	.els-cta__badge {
		width: 44px;
		height: 44px;
	}
	.els-cta--badge:not(:has(.els-cta__badge)) { --els-cta-quadrado: 44px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.els-cta,
	.els-cta__badge,
	.els-cta__arrow {
		transition: none;
	}
}

/* ------------------------------------------------------------------------ */
/* Avatares da hero                                                         */
/* ------------------------------------------------------------------------ */

/**
 * Sao os tres alunos em circulos sobrepostos, ao lado do "98% would
 * recommend". Vem do Figma como uma imagem so (o grupo 783:4277 exportado
 * a 4x): a sobreposicao e os aneis brancos ja estao desenhados, entao nao
 * dependem de CSS para ficarem fieis ao desenho.
 *
 * O e-image do V4 nao usa wrapper, o filho do contentor e o proprio <img>.
 */
.els-avatars {
	display: flex !important;
	align-items: center;
	width: fit-content !important;
	/* A caixa tem de deixar de encolher, tal como a imagem la dentro. Travar so
	   a imagem passou o problema para c: a caixa continuava a encolher, a
	   imagem ja nao, e passava por cima do "98% would recommend" ao lado. */
	flex: 0 0 auto;
	min-width: fit-content !important;
}

.els-avatars > img {
	/* Sem isto a imagem encolhe: e um item flex, e `width: auto` deixa o
	   flex-shrink comer a largura natural. Renderizava 61x46 em vez de 96x46,
	   ou seja os avataressaiam achatados. */
	flex: 0 0 auto;
	height: 56px !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	max-height: none !important;
	display: block;
	object-fit: contain;
}

@media (max-width: 767px) {
	.els-avatars > img {
		height: 60px !important;
	}
}

/* ------------------------------------------- botoes nativos do Elementor */

/**
 * O emblema do site num botao do Elementor.
 *
 * As seccoes construidas so com elementos nativos precisam do mesmo botao que
 * os widgets desenham. Poe-se a classe `els-cta-nativo` no botao, escolhe-se a
 * seta como icone a direita, e fica com a medida e o emblema dos outros.
 */
.els-cta-nativo .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 6px 6px 6px 24px;
}

.els-cta-nativo .elementor-button-content-wrapper {
	align-items: center;
	gap: 12px;
}

.els-cta-nativo .elementor-button-icon {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background-color: #ffcc7f;
	transition: background-color .25s ease;
}

/**
 * No hover o fundo do botao fica quieto.
 *
 * E a regra dos botoes com emblema em todo o site: quem responde ao rato e o
 * quadrado da seta, que clareia, e a seta que gira. O fundo escuro so muda nos
 * botoes que nao tem emblema.
 */
.els-cta-nativo .elementor-button:hover .elementor-button-icon,
.els-cta-nativo .elementor-button:focus-visible .elementor-button-icon {
	background-color: #e4b169;
}

.els-cta-nativo .elementor-button-icon svg {
	width: 10px;
	height: 10px;
	rotate: 0deg;
	transition: rotate .25s ease;
}

/* o mesmo gesto dos outros botoes: quem anda e a seta, nao o fundo */
.els-cta-nativo .elementor-button:hover .elementor-button-icon svg,
.els-cta-nativo .elementor-button:focus-visible .elementor-button-icon svg {
	rotate: 45deg;
}

@media (max-width: 767px) {
	/**
	 * A largura toda, texto a esquerda e o emblema encostado a ponta.
	 *
	 * O `justify-content` tem de ir no wrapper interno, nao no `<a>`: o botao
	 * do Elementor so tem um filho - o `elementor-button-content-wrapper` - e e
	 * la dentro que estao o texto e o icone. Posto no `<a>`, o espaco ia todo
	 * para depois do wrapper e o emblema ficava a meio.
	 */
	.els-cta-nativo .elementor-button {
		width: 100%;
		padding: 6px 6px 6px 16px;
	}

	.els-cta-nativo .elementor-button-content-wrapper {
		flex: 1 1 auto;
		width: 100%;
		justify-content: space-between;
	}
}

/**
 * Familia dos CTAs: Urbanist, sempre (QA do design, 15/09).
 *
 * O Global Kit do Elementor define a tipografia de Links com
 * `.elementor-kit-5 a { font-family: Inter }`. Os CTAs sao <a>, e essa regra
 * (0,1,1) ganhava ao `.els-cta` (0,1,0): todos os botoes saiam em Inter e so
 * o de envio do formulario, que e um <button>, escapava.
 *
 * O `body` a frente leva a especificidade a (0,1,2) sem !important e sem mexer
 * no kit, que continua a valer para os links de texto, esses sim em Inter.
 */
body a.els-cta,
body button.els-cta {
	font-family: Urbanist, sans-serif;
}

/* ------------------------------------------- navegadores sem :has() */
/* Firefox < 121 e Chrome < 105 nao leem `:has()` e as regras do badge desenhado
   sem markup caiam inteiras: o botao ficava sem o quadrado com a seta. O
   els-anim.js poe `.els-sem-has` no <html> e `.els-cta--auto` nesses botoes;
   estas regras repetem as de cima com essas classes. Nos navegadores atuais
   as classes nao existem e isto nao faz nada. */
.els-sem-has .els-cta--auto {
	position: relative;
	--els-cta-quadrado: 38px;
	--els-cta-seta: 12px;
}
.els-sem-has .els-cta--auto::after {
	content: "";
	flex: 0 0 auto;
	width: var(--els-cta-quadrado);
	height: var(--els-cta-quadrado);
	border-radius: 5px;
	background-color: var(--els-cta-badge-bg, #b5d5f0);
	transition: background-color .25s ease;
}
.els-sem-has .els-cta--auto::before {
	content: "";
	position: absolute;
	right: calc(5px + (var(--els-cta-quadrado) - var(--els-cta-seta)) / 2);
	top: 50%;
	width: var(--els-cta-seta);
	height: var(--els-cta-seta);
	margin-top: calc(var(--els-cta-seta) / -2);
	background-image: var(--els-cta-arrow);
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--els-cta-seta) var(--els-cta-seta);
	transition: transform .25s ease;
	pointer-events: none;
}
.els-sem-has .els-cta--auto:hover::after { background-color: var(--els-cta-badge-hover, #b5d5f0); }
.els-sem-has .els-cta--auto:hover::before { transform: rotate(45deg); }
@media (max-width: 767px) {
	.els-sem-has .els-cta--auto { --els-cta-quadrado: 44px; }
}