/* ==========================================================================
   DIPLOMADO INTERCEPT - Página "Estudie Ahora"
   --------------------------------------------------------------------------
   Sumário
   --------------------------------------------------------------------------
   01. TOKENS ......... variáveis de cor, tipografia e medidas
   02. RESET .......... normalização mínima
   03. BASE ........... html/body, container e utilitários de texto
   04. COMPONENTES .... botão verde, pill dourada, selo de pagamento seguro
   05. ESTADOS DO JS .. classes aplicadas pelo script.js (reveal, carrossel)
   06. SEÇÕES ......... uma faixa/dobra por bloco, na mesma ordem do HTML
       06.01 Faixa superior (marquee)
       06.02 Hero
       06.03 En los próximos 4 meses aprenderás
       06.04 ¿Quién puede hacer el Diplomado?
       06.05 Pilares del Intercept
       06.06 Módulos
       06.07 Inversión
       06.08 Testimonios
       06.09 Paquetes
       06.10 Bonos para alumnos
       06.11 Exclusivos para esta oportunidad
       06.12 Certificado internacional
       06.13 Garantía
       06.14 ¿Quién te guiará? (mentora)
       06.15 FAQ + Contacto
       06.16 Rodapé
   --------------------------------------------------------------------------
   Breakpoints (mobile-last: as regras de tablet também valem no mobile,
   sendo sobrescritas pelo bloco de mobile logo abaixo):
     - Desktop ....... acima de 1180px  (referência do Figma: 1920px)
     - Tablet ........ até 1180px
     - Mobile ........ até 768px        (referência do Figma: 480px)
   O CSS usa aninhamento nativo e segue a mesma hierarquia do HTML.
   --------------------------------------------------------------------------
   As classes que o assets/js/script.js liga e desliga (is-deferred,
   will-reveal/is-revealed, is-visible, carousel__*, is-open) estão todas na
   seção 05 — o JS só troca classes, a aparência mora aqui.
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
	/* -- Dourado -------------------------------------------------------- */
	--oro-1: #ca9421;
	--oro-2: #f5da4e;
	--oro-3: #c99521;
	--grad-oro: linear-gradient(90deg, var(--oro-1) 0%, var(--oro-2) 50%, var(--oro-3) 100%);
	--grad-oro-vertical: linear-gradient(175.12deg, var(--oro-1) 0.96%, var(--oro-2) 49.89%, var(--oro-3) 97.14%);
	--grad-oro-titulo: linear-gradient(173.3deg, var(--oro-1) 0.96%, var(--oro-2) 49.89%, var(--oro-3) 97.14%);

	/* -- Azuis / verdes petróleo ---------------------------------------- */
	--teal-1: #d7f5ff;
	--teal-4: #5dd5fd;
	--teal-9: #014359;
	/* fundo padrão da página          */
	--teal-10: #012e3d;
	/* fundo da dobra de pilares       */
	--teal-modulo: #004b63;
	/* card de módulo                  */
	--teal-vidro: rgb(1 41 54 / 40%);
	/* card de vidro da dobra 02       */
	--teal-vidro-borde: rgb(1 41 54 / 25%);
	--teal-sello: rgb(0 53 69 / 62%);
	--azul-8: #001829;
	/* certificado / faq               */
	--azul-hero: #011e27;
	--azul-hero-movil: #002332;
	--azul-testimonios: #001f2c;
	--azul-cian: #25c5d9;
	--azul-cian-2: #0096a2;
	--card-testimonio: #346279;

	/* -- Tintas --------------------------------------------------------- */
	--tinta-oscura: #002433;
	--tinta-azul: #19465c;
	--tinta-lista: #002231;
	--tinta-precio: #002130;
	--tinta-mas: #013d51;
	--tinta-boton: #191919;

	/* -- Claros --------------------------------------------------------- */
	--blanco: #fff;
	--gris-1: #f5f5f5;
	--gris-f4: #f4f4f4;
	--amarillo-7: #fbf2c5;

	/* -- Verde do CTA --------------------------------------------------- */
	--verde-1: #7fd111;
	--verde-2: #aeec5b;
	--grad-verde: linear-gradient(90deg, var(--verde-1) 0%, var(--verde-2) 50%, var(--verde-1) 100%);
	--verde-halo: rgb(199 255 124 / 14%);
	--verde-brillo: 0 0 4.15px rgb(188 228 135 / 43%);
	--verde-whats: #56ca6a;

	/* -- Tipografia ----------------------------------------------------- */
	--f-sora: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--f-poppins: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--f-montserrat: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* -- Medidas -------------------------------------------------------- */
	--container: 1060px;
	/* largura de conteúdo padrão (1920 - 2x430) */
	--container-padding: 20px;
}


/* ==========================================================================
   02. RESET
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd,
hr {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
}

strong,
b {
	font-weight: 700;
}

s {
	text-decoration: line-through;
}

summary {
	list-style: none;
	cursor: pointer;

	&::-webkit-details-marker {
		display: none;
	}
}


/* ==========================================================================
   03. BASE
   ========================================================================== */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	min-width: 320px;
	overflow-x: hidden;
	font-family: var(--f-sora);
	color: var(--blanco);
	background-color: var(--teal-9);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Empilhamento das dobras. O <main> é flex só para permitir a inversão de
   ordem entre depoimentos e pacotes no mobile: no Figma desktop os
   depoimentos vêm antes dos pacotes, no mobile vêm depois. As dobras
   precisam ser filhas diretas de <main>, porque é assim que a seção 07 do
   script.js as encontra para o carregamento diferido. */
.pagina {
	display: flex;
	flex-direction: column;

	/* --- Mobile --- */
	@media (max-width: 768px) {
		&>.paquetes {
			order: 1;
		}

		&>.testimonios {
			order: 2;
		}

		/* tudo o que vem depois dos depoimentos precisa de ordem maior */
		&>.bonos,
		&>.exclusivos,
		&>.certificado,
		&>.garantia,
		&>.mentora,
		&>.faq {
			order: 3;
		}
	}
}

/* Container central de cada dobra. Cada seção pode sobrescrever
   --container com a largura de conteúdo do próprio layout. */
.container {
	width: 100%;
	max-width: calc(var(--container) + var(--container-padding) * 2);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* Texto com preenchimento em degradê dourado. */
.texto-oro {
	background-image: var(--grad-oro);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* Rótulo só para leitor de tela. O popup usa placeholder no lugar de label
   visível, mas todo campo precisa de um nome acessível. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip-path: inset(50%);
}

/* A seção 04 do script.js põe esta classe no <body> enquanto o popup está
   aberto, para a página de trás não rolar junto. */
.no-scroll {
	overflow: hidden;
}


/* ==========================================================================
   04. COMPONENTES
   ========================================================================== */

/* --------------------------------------------------------------------------
   04.1 Botão verde (CTA principal)
   Estrutura: <a class="boton-verde"><span class="boton-verde__label">
   O <a> é o halo externo translúcido; o <span> é a pílula em degradê.
   -------------------------------------------------------------------------- */
.boton-verde {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 397px;
	max-width: 100%;
	height: 80px;
	padding: 8px;
	background-color: var(--verde-halo);
	border-radius: 50px;

	& .boton-verde__label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding-inline: 32.622px;
		font-family: var(--f-sora);
		font-size: 18px;
		font-weight: 700;
		line-height: 0.975;
		color: var(--tinta-boton);
		text-align: center;
		text-transform: uppercase;
		background-image: var(--grad-verde);
		border-radius: 50px;
		filter: drop-shadow(var(--verde-brillo));
	}

	/* Variações de largura conforme cada dobra do Figma */
	&.boton-verde--406 {
		width: 406px;
	}

	&.boton-verde--531 {
		width: 531px;
		padding-inline: 10px;

		& .boton-verde__label {
			font-size: 24px;
		}
	}

	&.boton-verde--ancho {
		width: 100%;
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		& .boton-verde__label {
			padding-inline: 20px;
		}

		&.boton-verde--531 {
			width: 100%;
			padding-inline: 10px;

			& .boton-verde__label {
				font-size: 20px;
			}
		}
	}
}

/* --------------------------------------------------------------------------
   04.2 Pill dourada (títulos de dobra com fundo em degradê)
   -------------------------------------------------------------------------- */
.pill-oro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
	font-family: var(--f-sora);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.26;
	color: var(--tinta-oscura);
	text-align: center;
	text-transform: uppercase;
	background-image: var(--grad-oro);
	border-radius: 29.106px;
}

/* --------------------------------------------------------------------------
   04.3 Selo "Pago 100% seguro"
   -------------------------------------------------------------------------- */
.pago-seguro {
	display: flex;
	align-items: center;
	font-family: var(--f-poppins);
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	color: var(--blanco);
	gap: 8px;

	& img {
		flex-shrink: 0;
		width: 9.667px;
		height: auto;
	}

	/* --- Mobile: ganha uma pílula escura ao redor ------------------------ */
	@media (max-width: 768px) {
		gap: 8.16px;
		height: 25.628px;
		padding-inline: 10.29px;
		font-size: 13.981px;
		background-color: var(--azul-hero-movil);
		border-radius: 12.814px;

		& img {
			width: 11.262px;
		}
	}
}


/* --------------------------------------------------------------------------
   04.4 Formulário de captura (dentro do popup)
   O contêiner .field é obrigatório: a seção 03 do script.js escreve a
   mensagem de erro no .field__error de dentro dele.
   -------------------------------------------------------------------------- */
.formulario {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.field {
	position: relative;
}

.field__input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	font-family: var(--f-poppins);
	font-size: 16px;
	color: var(--tinta-oscura);
	background-color: var(--blanco);
	border: 1px solid rgb(1 67 89 / 25%);
	border-radius: 10px;
	outline: 0;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;

	&::placeholder {
		color: rgb(1 67 89 / 45%);
		opacity: 1;
	}

	&:focus-visible {
		border-color: var(--verde-1);
		box-shadow: 0 0 0 3px rgb(127 209 17 / 22%);
	}

	&[aria-invalid='true'] {
		border-color: #d64545;
	}
}

/* Caixa única para DDI + telefone: por fora tem o mesmo desenho dos outros
   campos, por dentro são dois controles com um divisor no meio. */
.field__tel {
	display: flex;
	align-items: stretch;
	height: 52px;
	background-color: var(--blanco);
	border: 1px solid rgb(1 67 89 / 25%);
	border-radius: 10px;
	overflow: hidden;

	&:focus-within {
		border-color: var(--verde-1);
		box-shadow: 0 0 0 3px rgb(127 209 17 / 22%);
	}

	/* O aria-invalid vai no <select>/<input> de dentro; a moldura de erro
     precisa aparecer na caixa inteira. */
	&:has([aria-invalid='true']) {
		border-color: #d64545;
	}
}

.field__ddi {
	flex: 0 0 auto;

	/* Espaço para "🇲🇽+52 — México" sem espremer o telefone ao lado. Nomes
     muito longos ficam cortados no estado fechado; a lista aberta mostra o
     nome inteiro. */
	width: 148px;

	/* OBRIGATÓRIO. Sem isto o min-width:auto de item flex faz o <select>
     reservar a largura da MAIOR das 249 opções ("San Vicente y las
     Granadinas"), o que empurrava a caixa do telefone e estourava o popup
     inteiro para fora da tela no celular. */
	min-width: 0;
	padding: 0 4px 0 14px;
	text-overflow: ellipsis;
	font-family: var(--f-poppins);
	font-size: 14px;
	color: var(--tinta-oscura);
	background-color: transparent;
	border: 0;
	border-right: 1px solid rgb(1 67 89 / 20%);
	outline: 0;
	cursor: pointer;
}

.field__input--tel {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	border-radius: 0;

	&:focus-visible {
		box-shadow: none;
	}
}

.field__error {
	display: block;
	margin-top: 5px;
	font-family: var(--f-poppins);
	font-size: 12px;
	line-height: 1.25;
	color: #ff8a8a;

	&:empty {
		display: none;
	}
}

.formulario__error {
	padding: 9px 12px;
	font-family: var(--f-poppins);
	font-size: 13px;
	line-height: 1.3;
	color: #ffdada;
	background-color: rgb(214 69 69 / 22%);
	border-radius: 8px;
}


/* --------------------------------------------------------------------------
   04.5 Popup de inscrição (#form-popup)
   Quem abre e fecha é a seção 04 do script.js. Ela só mexe em duas coisas:
   tira o [hidden] do overlay e põe/tira a classe .is-open — toda a aparência
   e a animação estão aqui.
   -------------------------------------------------------------------------- */
.popup {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: rgb(0 12 18 / 72%);
	opacity: 0;
	backdrop-filter: blur(3px);
	transition: opacity 0.25s ease;

	&[hidden] {
		display: none;
	}

	&.is-open {
		opacity: 1;
	}
}

.popup__dialog {
	position: relative;
	width: 460px;
	max-width: 100%;

	/* Item de flex: sem isto o min-width:auto deixa o conteúdo mais largo
     ditar a caixa, e o max-width acima não segura. */
	min-width: 0;
	max-height: calc(100vh - 40px);
	padding: 40px 32px 28px;
	overflow-y: auto;
	background-color: var(--teal-9);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 20px;
	box-shadow: 0 24px 60px rgb(0 0 0 / 45%);

	/* Entrada: sobe e cresce um pouco junto com o fade do fundo. */
	transform: translateY(16px) scale(0.98);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);

	.popup.is-open & {
		transform: none;
	}
}

.popup__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--blanco);
	background-color: rgb(255 255 255 / 10%);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;

	&:hover {
		background-color: rgb(255 255 255 / 20%);
	}
}

.popup__titulo {
	font-family: var(--f-sora);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--blanco);
	text-align: center;
}

.popup__subtitulo {
	margin-top: 10px;
	font-family: var(--f-poppins);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	color: rgb(255 255 255 / 78%);
	text-align: center;
}

.popup__form {
	margin-top: 24px;
}

/* O botão do popup é a pílula ELE MESMO, sem o <span class="boton-verde__label">
   dos CTAs da página: durante o envio a seção 03 troca o textContent do botão
   por "Enviando…", o que apagaria o span e o desenho junto. */
.popup__enviar {
	width: 100%;
	height: 62px;
	padding-inline: 20px;
	font-family: var(--f-sora);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--tinta-boton);
	text-align: center;
	text-transform: uppercase;
	background-image: var(--grad-verde);
	border-radius: 50px;
	cursor: pointer;
	filter: drop-shadow(var(--verde-brillo));
	transition: transform 0.18s ease, filter 0.18s ease;

	&:hover {
		filter: drop-shadow(var(--verde-brillo)) brightness(1.04);
		transform: translateY(-1px);
	}

	&:disabled {
		cursor: progress;
		filter: grayscale(0.4);
		transform: none;
	}
}

.popup__aviso {
	margin-top: 14px;
	font-family: var(--f-poppins);
	font-size: 12px;
	line-height: 1.4;
	color: rgb(255 255 255 / 60%);
	text-align: center;

	& a {
		color: rgb(255 255 255 / 85%);
		text-decoration: underline;
	}
}

@media (max-width: 768px) {
	.popup {
		padding: 12px;
	}

	.popup__dialog {
		padding: 36px 20px 24px;
		max-height: calc(100dvh - 24px);
	}

	.popup__titulo {
		font-size: 22px;
	}

	.popup__subtitulo {
		font-size: 14px;
	}

	.popup__enviar {
		height: 58px;
		font-size: 15px;
	}

	/* Tela estreita: o DDI cede espaço para o número caber sem truncar. */
	.field__ddi {
		width: 116px;
		padding-left: 10px;
		font-size: 13px;
	}

	.field__input {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.popup,
	.popup__dialog {
		transition: none;
	}
}


/* ==========================================================================
   05. ESTADOS DO JS
   --------------------------------------------------------------------------
   O script.js não escreve estilo nenhum: ele só põe e tira classes. Tudo o
   que essas classes fazem está aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   05.1 Carregamento diferido e entrada das dobras (seção 07 do script.js)
   Só a primeira dobra é pintada de saída; as de baixo entram com fade e
   subida quando chegam à tela.
   -------------------------------------------------------------------------- */
.is-deferred {
	content-visibility: auto;
	contain-intrinsic-size: auto 720px;
}

.will-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;

	&.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   05.2 Entrada dos cards, escalonada (marcados com data-reveal no HTML)
   --------------------------------------------------------------------------
   O estado escondido só existe DENTRO de uma dobra que já recebeu
   "will-reveal" do script.js. Isso é de propósito: se o script.js não
   carregar, "will-reveal" nunca aparece, nenhum card fica escondido e a
   página continua legível. Nada de conteúdo dependendo de JS para existir.

   O card aparece quando a dobra é revelada (.is-revealed) ou quando a
   seção 09 do script.js marca o próprio card (.is-visible) — os dois
   caminhos levam ao mesmo estado.
   -------------------------------------------------------------------------- */
.will-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;

	/* pequeno escalonamento dentro de cada grade */
	&:nth-child(2) {
		transition-delay: 0.09s;
	}

	&:nth-child(3) {
		transition-delay: 0.18s;
	}

	&:nth-child(4) {
		transition-delay: 0.27s;
	}

	&:nth-child(5) {
		transition-delay: 0.36s;
	}

	&:nth-child(6) {
		transition-delay: 0.45s;
	}

	&:nth-child(7) {
		transition-delay: 0.54s;
	}
}

.will-reveal.is-revealed [data-reveal],
.will-reveal [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   05.3 Carrossel (seção 10 do script.js)
   O JS translada .carousel__track em múltiplos de 100% e cria os botões de
   .carousel__dots. Cada slide ocupa a largura inteira da janela do carrossel.
   -------------------------------------------------------------------------- */
.carousel__track {
	display: flex;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
}

.carousel__dots {
	display: flex;
	align-items: center;
}

.carousel__dot {
	padding: 0;
	cursor: pointer;
	background-color: var(--blanco);
	border-radius: 50%;
	opacity: 0.6;
	transition: opacity 0.25s ease;

	&.is-active {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   05.4 Movimento reduzido
   Quem pede menos animação recebe a página inteira parada.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.will-reveal,
	.will-reveal [data-reveal],
	.carousel__track,
	.carousel__dot {
		transition: none;
		transition-delay: 0s;
	}

	.will-reveal,
	.will-reveal [data-reveal] {
		opacity: 1;
		transform: none;
	}
}


/* ==========================================================================
   06. SEÇÕES
   ========================================================================== */

/* --------------------------------------------------------------------------
   06.01 FAIXA SUPERIOR - selo "bonos exclusivos activos"
   Texto duplicado e recortado; a animação de marquee entra depois no JS/CSS.
   -------------------------------------------------------------------------- */
.faixa {
	display: flex;
	align-items: center;
	padding: 10px;
	overflow: hidden;
	background-color: var(--oro-2);

	/* O texto é duplicado no HTML: deslocar metade da largura faz o laço
     fechar sem emenda. */
	& .faixa__texto {
		display: flex;
		flex-shrink: 0;
		animation: faixa-desliza 45s linear infinite;
		font-family: var(--f-montserrat);
		font-size: 24px;
		font-weight: 700;
		line-height: 39.891px;
		color: var(--teal-9);
		text-transform: uppercase;
		letter-spacing: 2.4px;
		white-space: nowrap;
	}

	/* --- Movimento reduzido ---------------------------------------------- */
	@media (prefers-reduced-motion: reduce) {
		justify-content: center;

		& .faixa__texto {
			animation: none;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		padding: 10px 0;

		& .faixa__texto {
			font-size: 20px;
			line-height: 40px;
			letter-spacing: 2px;
		}
	}
}

@keyframes faixa-desliza {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}


/* --------------------------------------------------------------------------
   06.02 HERO - logo, selo de acesso imediato, headline e CTA
   -------------------------------------------------------------------------- */
.hero {
	padding-block: 134px 78.554px;
	background-color: var(--azul-hero);
	background-image: url('../images/bg--header--desk.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	& .hero__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	& .hero__logo {
		width: 182px;
		height: auto;
	}

	& .hero__bloque {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;

		&.hero__bloque--cta {
			gap: 20px;
		}
	}

	& .hero__badge {
		width: 259px;
		height: auto;
	}

	& .hero__titulo {
		width: 485.247px;
		max-width: 100%;
		font-size: 32px;
		font-weight: 400;
		line-height: 1.25;
		color: var(--blanco);

		& strong {
			font-weight: 700;
		}
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		padding-block: 90px 70px;
		background-position: 70% center;

		& .hero__titulo {
			width: 440px;
			font-size: 30px;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		--container-padding: 18px;

		padding-block: 47px 474px;
		background-color: var(--azul-hero-movil);
		background-image: url('../images/mobile/bg--header--mobile.webp');
		background-position: center bottom;

		& .hero__inner {
			align-items: center;
			gap: 21px;
		}

		/* Sem width:100% os blocos ficam do tamanho do maior filho (o botão de
       423px) e passam da largura da tela em aparelhos estreitos. */
		& .hero__bloque {
			width: 100%;
		}

		& .hero__logo {
			width: 210.719px;
		}

		& .hero__bloque {
			align-items: center;
			gap: 21px;

			&.hero__bloque--cta {
				gap: 21px;
			}
		}

		& .hero__titulo {
			width: 100%;
			max-width: 442.409px;
			font-size: 29.126px;
			text-align: center;
		}

		/* No mobile o CTA do hero é maior que os das outras dobras */
		& .boton-verde {
			width: 423.798px;
			height: 93.204px;
			padding: 9px;
			border-radius: 58.252px;

			& .boton-verde__label {
				font-size: 20.971px;
				border-radius: 58.252px;
			}
		}
	}
}


/* --------------------------------------------------------------------------
   06.03 "EN LOS PRÓXIMOS 4 MESES APRENDERÁS" - 4 cards de vidro
   -------------------------------------------------------------------------- */
.aprenderas {
	padding-block: 80px;
	background-color: var(--azul-hero-movil);
	background-image: url('../images/bg--section--2--desk.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	& .aprenderas__inner {
		--container: 788px;

		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}

	/* Título em pill dourada */
	& .aprenderas__titulo {
		width: 684px;
		padding: 11px 15px;
	}

	/* Grade 2x2 */
	& .aprenderas__lista {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		width: 100%;
	}

	& .aprenderas__card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 15px;
		padding: 25px;
		overflow: hidden;
		background-color: var(--teal-vidro);
		border: 1px solid var(--teal-vidro-borde);
		border-radius: 8px;
		backdrop-filter: blur(10.8px);
	}

	& .aprenderas__icono {
		width: 60px;
		height: 60px;
	}

	& .aprenderas__card-titulo {
		margin-top: -7px;
		/* compensa o gap de 15px: no Figma o bloco de texto tem gap próprio de 8px */
		font-size: 20px;
		font-weight: 700;
		line-height: normal;
		color: var(--blanco);
	}

	& .aprenderas__card-texto {
		font-size: 16px;
		font-weight: 400;
		line-height: 20px;
		color: var(--blanco);
	}

	/* Selo inferior */
	& .aprenderas__sello {
		width: 693.943px;
		max-width: 100%;
		padding: 5px 27px;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.26;
		color: var(--blanco);
		text-align: center;
		background-color: var(--teal-sello);
		border: 1px solid var(--oro-1);
		border-radius: 16.99px;
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .aprenderas__titulo {
			width: 100%;
			font-size: 24px;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		padding-block: 40px;
		background-image: url('../images/mobile/bg--section--2--mobile.webp');

		& .aprenderas__inner {
			--container: 440px;

			gap: 18px;
		}

		& .aprenderas__titulo {
			padding: 12.816px 17.476px;
			font-size: 29.126px;
			border-radius: 33.91px;
		}

		/* Uma coluna e ordem própria do mobile:
       Protocolos > Plan de Tratamientos > Documentación > Aparatología */
		& .aprenderas__lista {
			display: flex;
			flex-direction: column;
			gap: 18px;
		}

		& .aprenderas__card {
			gap: 15.099px;
			width: 100%;
			max-width: min(386.35px, 100%);
			padding: 25.165px;
			border-width: 1.007px;
			border-radius: 8.053px;

			&:nth-child(1) {
				order: 1;
			}

			&:nth-child(2) {
				order: 3;
			}

			&:nth-child(3) {
				order: 2;
			}

			&:nth-child(4) {
				order: 4;
			}
		}

		& .aprenderas__icono {
			width: 60.396px;
			height: 60.396px;
		}

		& .aprenderas__card-titulo {
			margin-top: -7.05px;
			font-size: 18.641px;
		}

		& .aprenderas__card-texto {
			font-size: 16.106px;
			line-height: 20.132px;
		}

		& .aprenderas__sello {
			max-width: min(405.437px, 100%);
			padding: 5.825px 23.301px;
			font-size: 20.971px;
			border-width: 1.165px;
			border-radius: 19.794px;
		}
	}
}


/* --------------------------------------------------------------------------
   06.04 "¿QUIÉN PUEDE HACER EL DIPLOMADO INTERCEPT?"
   -------------------------------------------------------------------------- */
.publico {
	padding-block: 57px;
	background-color: var(--blanco);

	& .publico__inner {
		--container: 814px;

		display: flex;
		align-items: center;
		gap: 24px;
	}

	& .publico__foto {
		flex-shrink: 0;
		width: 296.67px;
		height: auto;
	}

	& .publico__contenido {
		display: flex;
		flex-direction: column;
		gap: 22px;
		width: 495.365px;
	}

	& .publico__titulo {
		font-size: 28px;
		font-weight: 700;
		line-height: normal;
		color: var(--tinta-oscura);
		text-transform: uppercase;
	}

	& .publico__lista {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	& .publico__item {
		display: flex;
		align-items: flex-start;
		gap: 8px;

		& img {
			flex-shrink: 0;
			width: 17.222px;
			height: auto;
			margin-top: 6.5px;
		}

		& p {
			width: 439.975px;
			max-width: 100%;
			font-size: 16px;
			font-weight: 400;
			line-height: normal;
			color: var(--tinta-oscura);
		}
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .publico__contenido {
			width: auto;
			flex: 1;
		}

		& .publico__titulo {
			font-size: 24px;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		padding-block: 40px;

		& .publico__inner {
			--container: 440px;

			flex-direction: column;
			gap: 24px;
		}

		& .publico__foto {
			width: 280.24px;
		}

		& .publico__contenido {
			gap: 24px;
			width: 100%;
		}

		& .publico__titulo {
			max-width: min(387.02px, 100%);
			margin-inline: auto;
			font-size: 29.126px;
			text-align: center;
		}

		& .publico__lista {
			gap: 11.65px;
			width: 100%;
			max-width: min(397.14px, 100%);
			margin-inline: auto;
		}

		& .publico__item {
			gap: 9.32px;

			& img {
				width: 20.064px;
				margin-top: 7.5px;
			}

			& p {
				font-size: 18.641px;
			}
		}
	}
}


/* --------------------------------------------------------------------------
   06.05 "PILARES DEL INTERCEPT"
   Diagrama central com 3 pilares posicionados ao redor.
   -------------------------------------------------------------------------- */
.pilares {
	padding-block: 40.166px 68.947px;
	background-color: var(--teal-10);
	/* barra dourada no topo da dobra */
	background-image: var(--grad-oro);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 12.365px;

	& .pilares__inner {
		--container: 966.32px;
	}

	& .pilares__encabezado {
		text-align: center;
	}

	& .pilares__titulo {
		font-size: 70px;
		font-weight: 700;
		line-height: 1.007;
		color: var(--azul-cian);
		text-transform: uppercase;
	}

	& .pilares__subtitulo {
		font-size: 28px;
		font-weight: 700;
		line-height: normal;
		color: var(--blanco);
		text-transform: uppercase;
	}

	& .pilares__diagrama {
		display: grid;
		grid-template-columns: 265px 1fr 265px;
		align-items: start;
		margin-top: 9.95px;
	}

	& .pilares__centro {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	& .pilares__grafico {
		width: 446.035px;
		max-width: none;
		height: auto;
		margin-inline: -4.86px;
	}

	& .pilares__pilar {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 265px;

		&.pilares__pilar--ciencia {
			margin-top: 131.57px;
			text-align: right;

			& .pilares__pilar-titulo {
				color: var(--azul-cian);
			}
		}

		&.pilares__pilar--colectiva {
			justify-self: end;
			margin-top: 131.57px;

			& .pilares__pilar-titulo {
				color: var(--azul-cian-2);
			}
		}

		&.pilares__pilar--practica {
			margin-top: 20.55px;
			text-align: center;

			& .pilares__pilar-titulo {
				background-image: var(--grad-oro);
				background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
			}
		}
	}

	& .pilares__pilar-titulo {
		font-size: 20px;
		font-weight: 700;
		line-height: normal;
	}

	& .pilares__pilar-texto {
		font-size: 16px;
		font-weight: 400;
		line-height: 20px;
		color: var(--blanco);
	}

	/* --- Tablet: diagrama vira coluna única ------------------------------ */
	@media (max-width: 1180px) {
		padding-block: 40px 60px;

		& .pilares__inner {
			--container: 720px;
		}

		& .pilares__diagrama {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 24px;
			margin-top: 16px;
		}

		& .pilares__centro {
			display: contents;
		}

		& .pilares__grafico {
			order: -1;
			width: min(446.035px, 100%);
			margin-inline: 0;
		}

		& .pilares__pilar {
			width: 100%;
			max-width: 520px;

			&.pilares__pilar--ciencia,
			&.pilares__pilar--colectiva,
			&.pilares__pilar--practica {
				margin-top: 0;
				text-align: center;
			}
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		padding-block: 0 80px;
		background-size: 100% 14.406px;

		& .pilares__inner {
			--container: 400px;
			--container-padding: 40px;

			padding-top: 54.406px;
			/* 14.406 da barra dourada + 40 de respiro */
		}

		& .pilares__titulo {
			font-size: 46.602px;
			line-height: normal;
		}

		& .pilares__subtitulo {
			font-size: 22.949px;
		}

		& .pilares__diagrama {
			gap: 20px;
			margin-top: 15px;
		}

		& .pilares__grafico {
			width: min(365.58px, 100%);
			margin-bottom: -5px;
		}

		& .pilares__pilar {
			gap: 6.557px;
			max-width: none;

			&.pilares__pilar--ciencia,
			&.pilares__pilar--colectiva,
			&.pilares__pilar--practica {
				text-align: left;
			}

			/* No mobile a ordem é Ciencia > Práctica > Inteligencia Colectiva */
			&.pilares__pilar--ciencia {
				order: 1;
			}

			&.pilares__pilar--practica {
				order: 2;
			}

			&.pilares__pilar--colectiva {
				order: 3;
			}
		}

		& .pilares__pilar-titulo {
			font-size: 18.641px;
		}

		& .pilares__pilar-texto {
			max-width: 374.62px;
			font-size: 18.641px;
			line-height: 20.971px;
		}
	}
}


/* --------------------------------------------------------------------------
   06.06 MÓDULOS - acordeão com os 12 módulos
   -------------------------------------------------------------------------- */
.modulos {
	position: relative;
	padding-block: 288px 80px;
	overflow: hidden;
	/* Camadas: barra dourada do topo + faixa decorativa com o notebook */
	background-color: var(--teal-9);
	background-image: var(--grad-oro), url('../images/bg--modulos--desk.webp');
	background-repeat: no-repeat, no-repeat;
	background-position: top center, top center;
	background-size: 100% 12.365px, 100% auto;

	& .modulos__inner {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	& .modulos__titulo {
		font-size: 70px;
		font-weight: 700;
		line-height: 1.257;
		color: var(--blanco);
		text-align: center;
		text-transform: uppercase;
	}

	& .modulos__lista {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px 11px;
		align-items: start;
	}

	& .modulo {
		min-height: 90px;
		padding: 20px;
		background-color: var(--teal-modulo);
		border: 1px solid rgb(0 75 99 / 25%);
		border-radius: 18px;
		backdrop-filter: blur(8.7px);

		/* Acompanha a abertura do corpo: sem isto, o min-height do card salta de
       uma vez e a animação de dentro parece solta. */
		transition: min-height 0.38s cubic-bezier(0.22, 1, 0.36, 1);

		& .modulo__cabecera {
			display: flex;
			align-items: center;
			gap: 4px;
			cursor: pointer;
		}

		& .modulo__chevron {
			flex-shrink: 0;
			width: 20px;
			height: 20px;
			transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
		}

		/* Fechado aponta para baixo; aberto, para o lado (como no Figma). */
		&[open] .modulo__chevron {
			transform: rotate(-90deg);
		}

		& .modulo__titulo {
			font-size: 20px;
			font-weight: 400;
			line-height: normal;
			color: var(--blanco);

			& .texto-oro {
				font-weight: 700;
			}
		}

		/* -- Abertura suave -------------------------------------------------
       O <details> nativo abre "seco" porque o navegador só liga/desliga o
       display do corpo. Aqui o corpo fica SEMPRE renderizado (o display
       grid abaixo sobrescreve a regra do próprio navegador) e quem abre e
       fecha é a linha do grid, de 0fr para 1fr — que é animável.

       O min-height:0 no filho é obrigatório: sem ele o Chromium se recusa a
       colapsar a linha até zero e sobra uma tira do texto aparecendo com o
       card fechado. */
		& .modulo__cuerpo {
			display: grid;
			grid-template-rows: 0fr;
			margin-top: 0;
			padding-top: 0;
			opacity: 0;
			background-image: var(--grad-oro);
			background-repeat: no-repeat;
			background-position: top left;
			background-size: 274.064px 1px;
			transition:
				grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1),
				margin-top 0.38s cubic-bezier(0.22, 1, 0.36, 1),
				padding-top 0.38s cubic-bezier(0.22, 1, 0.36, 1),
				opacity 0.28s ease;
		}

		& .modulo__temas {
			min-height: 0;
			overflow: hidden;
			list-style: disc;
			padding-left: 21px;
			font-size: 14px;
			font-weight: 400;
			line-height: normal;
			color: var(--blanco);
		}

		&[open] .modulo__cuerpo {
			grid-template-rows: 1fr;
			margin-top: 14px;
			padding-top: 14px;
			opacity: 1;
		}
	}

	/* --- Tablet: duas colunas -------------------------------------------- */
	@media (max-width: 1180px) {
		padding-block: 200px 60px;

		& .modulos__inner {
			--container: 720px;
		}

		& .modulos__titulo {
			font-size: 56px;
		}

		& .modulos__lista {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* --- Mobile: coluna única -------------------------------------------- */
	@media (max-width: 768px) {
		padding-block: 220.396px 0;
		background-image: var(--grad-oro), url('../images/mobile/bg--modulos--mobile.webp');
		background-size: 100% 14.406px, 100% auto;

		& .modulos__inner {
			--container: 440px;

			gap: 32px;
		}

		& .modulos__titulo {
			font-size: 46.602px;
			line-height: 1.266;
		}

		& .modulos__lista {
			grid-template-columns: 1fr;
			gap: 14px;
		}

		& .modulo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 130.485px;
			padding: 23.301px;
			border-width: 1.165px;
			border-radius: 20.971px;

			&[open] {
				justify-content: flex-start;
				min-height: 263.301px;
			}

			& .modulo__cabecera {
				gap: 5px;
			}

			& .modulo__titulo {
				font-size: 24px;
			}

			&[open] .modulo__cabecera {
				gap: 8px;
			}

			/* A margem e o padding só valem com o card ABERTO — no desktop é a
         mesma coisa, logo acima. Se ficarem no estado base, o card fechado
         mostra uma tira de 16px com a linha dourada aparecendo. */
			& .modulo__cuerpo {
				background-size: 100% 1.165px;
			}

			&[open] .modulo__cuerpo {
				margin-top: 16.311px;
				padding-top: 16.311px;
			}

			& .modulo__temas {
				padding-left: 24px;
				font-size: 16px;
				line-height: 20px;
			}
		}
	}
}


/* --------------------------------------------------------------------------
   06.07 INVERSIÓN - card de preço com instrumentais decorativos
   -------------------------------------------------------------------------- */
.inversion {
	position: relative;
	padding-block: 113px 96.03px;
	overflow: hidden;
	background-color: var(--azul-hero-movil);
	background-image: url('../images/bg--card--preco--desk.webp');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;

	/* Barras douradas de topo e base da dobra */
	&::before,
	&::after {
		position: absolute;
		right: 0;
		left: 0;
		height: 4.031px;
		background-image: var(--grad-oro);
		content: '';
	}

	&::before {
		top: 0;
	}

	&::after {
		bottom: 0;
	}

	& .inversion__inner {
		--container: 560.76px;
	}

	& .inversion__card {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 545px;

		/* Moldura branca arredondada */
		&::before {
			position: absolute;
			top: 39px;
			left: 0;
			width: 100%;
			height: 506px;
			border: 1px solid var(--blanco);
			border-radius: 28px;
			content: '';
		}
	}

	/* Instrumentais decorativos (espelho e pinça) */
	& .inversion__deco {
		position: absolute;
		z-index: 1;
		height: auto;
		max-width: none;
		pointer-events: none;

		/* As artes vêm exportadas em 3x, então a medida de tela é a natural / 3.
       O left/top acerta a posição do instrumento dentro da exportação, que
       traz margem transparente e sombra. */
		&.inversion__deco--lupa {
			top: 241.3px;
			left: -63.1px;
			width: 235.33px;
		}

		&.inversion__deco--pinza {
			top: -29.7px;
			left: 502.7px;
			width: 231px;
		}
	}

	& .inversion__contenido {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: 397px;
		max-width: 100%;
	}

	& .inversion__titulo {
		padding: 8px 24px;
		font-size: 48.133px;
		font-weight: 700;
		line-height: normal;
		color: var(--tinta-precio);
		text-align: center;
		text-transform: uppercase;
		background-color: var(--blanco);
	}

	/* As três linhas de preço são compactas de propósito: entrelinha curta e
     espaçamento pequeno, como no Figma. Nada de text-box-trim aqui — ele
     encolhia a caixa a ponto de o valor invadir a linha de cima. */
	& .inversion__precios {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		width: 305px;
		max-width: 100%;
		text-align: center;
	}

	& .inversion__antes {
		font-size: 30px;
		font-weight: 400;
		line-height: 1.15;
		color: var(--blanco);

		& s {
			color: red;
			text-decoration-thickness: 2px;
		}
	}

	& .inversion__cuotas {
		display: flex;
		align-items: baseline;
		justify-content: center;
		line-height: 1;
		white-space: nowrap;

		& .inversion__cuotas-x {
			font-size: 36px;
			font-weight: 400;
			color: var(--blanco);
		}

		& .inversion__cuotas-valor {
			font-size: 77.177px;
			font-weight: 800;
		}

		& .inversion__cuotas-centavos {
			font-size: 47.418px;
			font-weight: 800;
		}
	}

	& .inversion__contado {
		font-size: 20px;
		font-weight: 400;
		line-height: 1.15;
		color: var(--blanco);

		& strong {
			font-weight: 600;
		}

		& b {
			font-weight: 800;
		}
	}

	& .inversion__linea {
		width: 216.957px;
		max-width: 100%;
		height: 1px;
		background-image: var(--grad-oro);
		border: 0;
	}

	& .inversion__aviso {
		width: 323.57px;
		max-width: 100%;
		font-family: var(--f-poppins);
		font-size: 20px;
		font-weight: 400;
		line-height: 1.2;
		color: var(--blanco);
		text-align: center;
	}

	& .inversion__urgencia {
		width: 100%;
		max-width: 376px;
		padding: 15px 18px 14px;
		border: 1px solid rgb(245 218 78 / 55%);
		border-radius: 14px;
		background: rgb(0 36 51 / 62%);
		box-shadow: inset 0 0 24px rgb(37 197 217 / 10%);
		text-align: center;
	}

	& .inversion__urgencia-label {
		margin-bottom: 10px;
		font-family: var(--f-sora);
		font-size: 12px;
		font-weight: 800;
		line-height: 1.2;
		color: var(--blanco);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	& .inversion__contador {
		display: grid;
		grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
		align-items: center;
		gap: 8px;
	}

	& .inversion__tiempo {
		display: flex;
		min-width: 0;
		min-height: 63px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		background: rgb(255 255 255 / 8%);
	}

	& .inversion__tiempo strong {
		display: block;
		font-family: var(--f-sora);
		font-size: 28px;
		font-weight: 800;
		line-height: 1;
		color: var(--oro-2);
		font-variant-numeric: tabular-nums;
	}

	& .inversion__tiempo small {
		display: block;
		margin-top: 5px;
		font-family: var(--f-poppins);
		font-size: 10px;
		font-weight: 600;
		line-height: 1;
		color: rgb(255 255 255 / 82%);
		text-transform: uppercase;
	}

	& .inversion__separador {
		font-family: var(--f-sora);
		font-size: 26px;
		font-weight: 800;
		line-height: 1;
		color: var(--oro-2);
	}

	& .inversion__urgencia-nota {
		margin-top: 10px;
		font-family: var(--f-poppins);
		font-size: 11px;
		font-weight: 500;
		line-height: 1.35;
		color: rgb(255 255 255 / 78%);
	}

	& .inversion__urgencia.is-expired .inversion__urgencia-label {
		color: var(--oro-2);
	}

	& .inversion__cta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		width: 100%;
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .inversion__deco {
			display: none;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		/* A arte do mobile é 1440x2250. Com o `100% auto` herdado do desktop ela
       renderizava 609px de altura num bloco de ~929px, e o terço de baixo
       ficava sem fundo, no azul chapado — era o corte feio que aparecia
       embaixo do card. `cover` garante a cobertura em qualquer altura; como
       a foto é uma textura de centro cirúrgico, sem nada importante nas
       bordas, o recorte lateral não tira conteúdo. */
		background-image: url('../images/mobile/bg--card--preco--mobile.webp');
		background-position: center top;
		background-size: cover;

		& .inversion__inner {
			--container: 440px;
		}

		& .inversion__deco {
			display: block;

			&.inversion__deco--lupa {
				top: 241.3px;
				left: -63.1px;
				width: 235.33px;
			}

			&.inversion__deco--pinza {
				top: -29.7px;
				left: 84.4%;
				width: 231px;
			}
		}

		& .inversion__card::before {
			top: 39.36px;
		}

		& .inversion__titulo {
			font-size: 40px;
		}

		& .inversion__urgencia {
			max-width: 360px;
			padding-inline: 12px;
		}

		& .inversion__contador {
			gap: 5px;
		}

		& .inversion__tiempo {
			min-height: 58px;
		}

		& .inversion__tiempo strong {
			font-size: 24px;
		}

		& .inversion__cuotas {
			& .inversion__cuotas-valor {
				font-size: 64px;
			}

			& .inversion__cuotas-centavos {
				font-size: 40px;
			}
		}
	}
}


/* --------------------------------------------------------------------------
   06.08 TESTIMONIOS - carrossel de depoimentos
   -------------------------------------------------------------------------- */
.testimonios {
	padding-block: 80px;
	background-color: var(--azul-testimonios);

	& .testimonios__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 96px;
	}

	/* Raiz do carrossel: a fila (setas + janela) e, abaixo, os pontos. Os
     pontos precisam ficar aqui dentro porque o script.js os procura em
     [data-carousel] .carousel__dots. */
	& .testimonios__carrusel {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 96px;
		width: 100%;
	}

	& .testimonios__titulo {
		font-size: 32px;
		font-weight: 700;
		line-height: 1.25;
		color: var(--blanco);
		text-align: center;
		text-transform: uppercase;
	}

	& .testimonios__fila {
		display: flex;
		align-items: center;
		gap: 137px;
		max-width: 100%;
	}

	& .testimonios__flecha {
		flex-shrink: 0;
		cursor: pointer;

		& img {
			width: 30.192px;
			height: 61px;
		}

		&.testimonios__flecha--prev {
			transform: scaleX(-1);
		}
	}

	/* Janela do carrossel: recorta o trilho que o JS translada. */
	& .testimonios__pista {
		width: 1120px;
		max-width: 100%;
		overflow: hidden;
	}

	/* Cada slide é uma página de três depoimentos. Os cards já vêm do design
     com o balão, o rodapé escuro e os cantos arredondados embutidos, então
     aqui só dividimos a largura entre eles.

     align-items: flex-end e não flex-start: os depoimentos têm alturas bem
     diferentes (o texto de cada um tem o tamanho que tem), e alinhados pelo
     topo as tarjas escuras do rodapé ficavam em degrau. Pelo pé, elas se
     alinham numa linha só. */
	& .carousel__slide {
		display: flex;
		align-items: flex-end;
		gap: 24px;
		justify-content: center;
	}

	& .testimonio {
		flex: 1 1 0;
		min-width: 0;

		& img {
			width: 100%;
			height: auto;
		}
	}

	/* Os pontos são criados pelo script.js dentro deste contêiner. */
	& .testimonios__dots {
		gap: 9px;

		& .carousel__dot {
			width: 8px;
			height: 8px;
		}
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {

		& .testimonios__inner,
		& .testimonios__carrusel {
			gap: 56px;
		}

		& .testimonios__fila {
			gap: 24px;
		}

		& .testimonios__pista {
			width: 100%;
		}

		& .carousel__slide {
			gap: 16px;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		padding-block: 40px;
		background-color: var(--azul-8);

		& .testimonios__inner,
		& .testimonios__carrusel {
			gap: 40px;
		}

		& .testimonios__titulo {
			max-width: min(350.68px, 100%);
			font-size: 27.961px;
		}

		& .testimonios__fila {
			gap: 0;
			width: 100%;
			padding-inline: 20px;
			justify-content: center;
		}

		/* Sem setas no layout mobile */
		& .testimonios__flecha {
			display: none;
		}

		/* -- Um depoimento por vez, deslizando com o dedo -------------------
       O data-carousel-viewport="(min-width: 769px)" no HTML deixa a seção 10
       do script.js INERTE aqui: ela devolve o trilho ao CSS (limpa o
       transform) e não liga o autoplay. A rolagem passa a ser nativa, com
       scroll-snap — que no celular é melhor do que botão: responde ao gesto,
       tem inércia e não depende de JS nenhum.

       Os .carousel__slide viram `display: contents` para que os 9 <figure>
       fiquem lado a lado no mesmo trilho, em vez de agrupados de 3 em 3. */
		& .testimonios__pista {
			width: 100%;
			overflow-x: auto;
			overscroll-behavior-x: contain;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		& .carousel__track {
			display: flex;
			gap: 14px;

			/* O padding lateral é o que deixa o primeiro e o último card serem
         centralizados pelo snap, e é ele que cria a "espiada" no card
         seguinte. Com 16px de cada lado, o card ocupa a largura da pista
         inteira menos 32 — ou seja, quase a tela toda. */
			padding-inline: 16px;
		}

		& .carousel__slide {
			display: contents;
		}

		& .testimonio {
			flex: 0 0 min(388.933px, 100%);
			scroll-snap-align: center;
			scroll-snap-stop: always;
		}

		/* Os pontos ficam inertes com o carrossel desligado — quem indica a
       posição agora é o próprio deslize, com o card seguinte espiando. */
		& .testimonios__dots {
			display: none;
		}
	}
}


/* --------------------------------------------------------------------------
   06.09 PAQUETES - "EMPIEZA A ESTUDIAR AHORA"
   -------------------------------------------------------------------------- */
.paquetes {
	padding-block: 80px;

	& .paquetes__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	& .paquetes__titulo {
		font-family: var(--f-poppins);
		font-size: 70px;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
	}

	& .paquetes__grid {
		display: flex;
		align-items: stretch;
		gap: 20px;
		width: 100%;
	}

	& .paquete {
		display: flex;
		flex: 1 0 0;
		flex-direction: column;
		gap: 20px;
		min-width: 0;
		padding: 16px;
		border-radius: 16px;

		&.paquete--exclusivo {
			background-color: var(--amarillo-7);
		}

		&.paquete--estandar {
			align-self: stretch;
			background-color: var(--gris-1);
		}
	}

	& .paquete__titulo {
		font-family: var(--f-poppins);
		font-size: 24px;
		font-weight: 700;
		line-height: 1;
		color: var(--teal-9);
		text-align: center;
		text-transform: uppercase;
	}

	& .paquete__lista {
		display: flex;
		flex-direction: column;
		gap: 20px;

		& li {
			padding-bottom: 5px;
			font-family: var(--f-poppins);
			font-size: 19.051px;
			font-weight: 400;
			line-height: 1;
			color: var(--tinta-lista);
			border-bottom: 0.585px solid rgb(0 34 49 / 20%);
		}
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .paquetes__inner {
			--container: 720px;
		}

		& .paquetes__titulo {
			font-size: 48px;
		}

		& .paquetes__grid {
			flex-direction: column;
		}

		& .paquete {
			flex: none;
			width: 100%;
		}

		& .paquete__lista li {
			font-size: 18px;
			line-height: 1.25;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		& .paquetes__inner {
			--container: 440px;
		}

		& .paquetes__grid {
			gap: 20px;
		}

		& .paquete__lista li {
			font-size: 19.051px;
			line-height: 1;
		}
	}
}


/* --------------------------------------------------------------------------
   06.10 BONOS PARA ALUMNOS - 7 cards brancos
   Cada card define suas próprias medidas de imagem via variáveis locais,
   reproduzindo o recorte e o deslocamento do Figma (as imagens já vêm
   exportadas com a sombra embutida).
   -------------------------------------------------------------------------- */
.bonos {
	padding-block: 80px;

	& .bonos__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48px;
	}

	& .bonos__titulo {
		font-family: var(--f-montserrat);
		font-size: 70px;
		font-weight: 700;
		line-height: 1.2143;
		color: var(--blanco);
		text-align: center;
		text-transform: uppercase;
	}

	& .bonos__lista {
		display: grid;
		grid-template-columns: repeat(3, 343.333px);
		justify-content: center;
		gap: 15px;
		width: 100%;
	}

	/* São 7 cards em 3 colunas: as duas primeiras linhas ficam cheias e a
     terceira sobra com um só. Sem isto ele encosta na coluna da esquerda e
     a dobra termina torta. */
	& .bono:last-child {
		grid-column: 2;
	}

	& .bono {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		background-color: var(--blanco);
		border-radius: 6px;

		/* Aba dourada superior */
		& .bono__pestana {
			width: 239.293px;
			height: 13.945px;
			background-image: var(--grad-oro-vertical);
			border-radius: 0 0 5px 5px;
		}

		& .bono__titulo {
			width: var(--bono-titulo-w);
			max-width: calc(100% - 24px);
			margin-top: var(--bono-gap);
			font-size: 16.323px;
			font-weight: 400;
			line-height: 1;
			color: var(--tinta-azul);
			text-align: center;

			& strong {
				font-weight: 700;
			}
		}

		/* Moldura da imagem: mesmas dimensões do nó do Figma */
		& .bono__imagen {
			position: relative;
			width: var(--bono-img-caja-w);
			height: var(--bono-img-caja-h);
			margin-top: var(--bono-gap);

			& img {
				position: absolute;
				top: calc(var(--bono-img-off) * -1);
				left: calc(var(--bono-img-off) * -1);
				width: var(--bono-img-w);
				height: var(--bono-img-h);
				max-width: none;
			}
		}

		& .bono__texto {
			width: 100%;
			height: 187.675px;
			margin-top: auto;
			padding: 26px var(--bono-texto-px) 0;
			font-size: 16px;
			font-weight: 400;
			line-height: 20px;
			color: var(--tinta-azul);
			background-color: var(--gris-f4);
			border-radius: 0 0 6px 6px;

			& strong {
				font-weight: 700;
			}
		}

		/* -- Medidas por card ---------------------------------------------- */
		&.bono--mentoria {
			--bono-titulo-w: 343.333px;
			--bono-texto-px: 27px;
			--bono-gap: 21px;
			--bono-img-caja-w: 343.333px;
			--bono-img-caja-h: 210px;
			--bono-img-w: 393.333px;
			--bono-img-h: 257px;
			--bono-img-off: 3px;
		}

		&.bono--clases {
			--bono-titulo-w: 180.877px;
			--bono-texto-px: 27px;
			--bono-gap: 24px;
			--bono-img-caja-w: 270.91px;
			--bono-img-caja-h: 156.777px;
			--bono-img-w: 337px;
			--bono-img-h: 219px;
			--bono-img-off: 3.1px;

			& .bono__texto {
				margin-top: 24px;
			}
		}

		&.bono--biblioteca {
			--bono-titulo-w: 236.922px;
			--bono-texto-px: 18px;
			--bono-gap: 16px;
			--bono-img-caja-w: 177px;
			--bono-img-caja-h: 200px;
			--bono-img-w: 308px;
			--bono-img-h: 324px;
			--bono-img-off: 7.5px;
		}

		&.bono--material {
			--bono-titulo-w: 311.969px;
			--bono-texto-px: 27px;
			--bono-gap: 20px;
			--bono-img-caja-w: 267px;
			--bono-img-caja-h: 190px;
			--bono-img-w: 340px;
			--bono-img-h: 258px;
			--bono-img-off: 4px;
		}

		&.bono--preguntas {
			--bono-titulo-w: 255.881px;
			--bono-texto-px: 27px;
			--bono-gap: 17px;
			--bono-img-caja-w: 132px;
			--bono-img-caja-h: 197px;
			--bono-img-w: 208px;
			--bono-img-h: 286px;
			--bono-img-off: 5px;
		}

		&.bono--visibilidad {
			--bono-titulo-w: 218.793px;
			--bono-texto-px: 27px;
			--bono-gap: 21px;
			--bono-img-caja-w: 178px;
			--bono-img-caja-h: 187px;
			--bono-img-w: 256px;
			--bono-img-h: 260px;
			--bono-img-off: 4px;
		}

		&.bono--articulos {
			--bono-titulo-w: 218.793px;
			--bono-texto-px: 27px;
			--bono-gap: 16px;
			--bono-img-caja-w: 266.611px;
			--bono-img-caja-h: 198.19px;
			--bono-img-w: 339.667px;
			--bono-img-h: 266.333px;
			--bono-img-off: 4.1px;
		}
	}

	/* --- Tablet: duas colunas -------------------------------------------- */
	@media (max-width: 1180px) {
		& .bonos__inner {
			--container: 720px;
		}

		& .bonos__titulo {
			font-size: 48px;
		}

		& .bonos__lista {
			grid-template-columns: repeat(2, 343.333px);
		}

		/* Em 2 colunas os 7 cards deixam o último sozinho na quarta linha:
       ele atravessa as duas colunas e se centraliza dentro delas. */
		& .bono:last-child {
			grid-column: 1 / -1;
			justify-self: center;
			width: 343.333px;
			max-width: 100%;
		}
	}

	/* --- Mobile: coluna única -------------------------------------------- */
	@media (max-width: 768px) {
		& .bonos__inner {
			--container: 440px;
		}

		/* Em coluna única não há o que centralizar. */
		& .bono:last-child {
			grid-column: auto;
			width: auto;
		}

		& .bonos__titulo {
			font-size: 48px;
			line-height: 1.417;
		}

		& .bonos__lista {
			grid-template-columns: minmax(0, 343.333px);
		}
	}
}


/* --------------------------------------------------------------------------
   06.11 EXCLUSIVOS PARA ESTA OPORTUNIDAD - módulos extras e bônus
   -------------------------------------------------------------------------- */
.exclusivos {
	padding-block: 80px;
	background-color: var(--azul-hero-movil);
	background-image: url('../images/bg--exclusivo--desk.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	& .exclusivos__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48px;
	}

	& .exclusivos__titulo {
		font-family: var(--f-montserrat);
		font-size: 70px;
		font-weight: 700;
		line-height: normal;
		text-align: center;
		text-transform: uppercase;
	}

	& .exclusivos__lista {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
		width: 100%;
	}

	& .exclusivo {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		background-color: var(--blanco);
		border-radius: 6px;

		& .exclusivo__pestana {
			width: 239.293px;
			height: 13.945px;
			background-image: var(--grad-oro-vertical);
			border-radius: 0 0 5px 5px;

			&.exclusivo__pestana--corta {
				width: 180px;
				height: 14px;
				background-image: var(--grad-oro-titulo);
			}
		}

		& .exclusivo__titulo {
			width: var(--exclusivo-titulo-w, auto);
			max-width: calc(100% - 16px);
			margin-top: var(--exclusivo-gap);
			font-size: 16.323px;
			font-weight: 400;
			line-height: 1;
			color: var(--tinta-azul);
			text-align: center;

			& strong {
				font-weight: 700;
			}

			&.exclusivo__titulo--estrecho {
				width: 100%;
				max-width: none;
				padding-inline: 8px;
			}
		}

		/* Moldura da imagem: a caixa tem a altura do nó do Figma e o mockup
       (exportado com a sombra embutida) é reposicionado dentro dela.
       As porcentagens são relativas à caixa, então o recorte acompanha
       qualquer largura de card. */
		& .exclusivo__imagen {
			position: relative;
			width: 100%;
			height: var(--exclusivo-img-caja-h);
			margin-top: var(--exclusivo-gap);

			& img {
				position: absolute;
				top: var(--exclusivo-img-top);
				left: var(--exclusivo-img-left);
				width: var(--exclusivo-img-w);
				height: var(--exclusivo-img-h);
				max-width: none;
			}

			/* Cards 4 a 7: a exportação já corresponde ao recorte do card */
			&.exclusivo__imagen--llena {
				height: auto;

				& img {
					position: static;
					width: 100%;
					height: auto;
				}
			}
		}

		/* -- Medidas por card ---------------------------------------------- */
		--exclusivo-gap: 16px;
		--exclusivo-img-caja-h: auto;
		--exclusivo-img-w: 100%;
		--exclusivo-img-h: auto;
		--exclusivo-img-top: 0;
		--exclusivo-img-left: 0;

		&:nth-child(1) {
			--exclusivo-titulo-w: 260.828px;
			--exclusivo-gap: 25px;
			--exclusivo-img-caja-h: 180px;
			--exclusivo-img-w: 141.36%;
			--exclusivo-img-h: 174.44%;
			--exclusivo-img-left: -2.33%;
			--exclusivo-img-top: -4.444%;
		}

		&:nth-child(2) {
			--exclusivo-titulo-w: 304.158px;
			--exclusivo-gap: 20px;
			--exclusivo-img-caja-h: 174px;
			--exclusivo-img-w: 141.36%;
			--exclusivo-img-h: 177.01%;
			--exclusivo-img-left: -2.33%;
			--exclusivo-img-top: -4.598%;
		}

		&:nth-child(3) {
			--exclusivo-titulo-w: 274.723px;
			--exclusivo-gap: 16px;
			--exclusivo-img-caja-h: 181px;
			--exclusivo-img-w: 141.36%;
			--exclusivo-img-h: 174.03%;
			--exclusivo-img-left: -2.33%;
			--exclusivo-img-top: -4.42%;
		}

		/* O 7º card fica centralizado na última linha */
		&.exclusivo--centrado {
			grid-column: 2;
		}
	}

	/* --- Tablet: duas colunas -------------------------------------------- */
	@media (max-width: 1180px) {
		& .exclusivos__inner {
			--container: 720px;
		}

		& .exclusivos__titulo {
			font-size: 48px;
		}

		& .exclusivos__lista {
			grid-template-columns: repeat(2, 1fr);
		}

		& .exclusivo.exclusivo--centrado {
			grid-column: auto;
		}
	}

	/* --- Mobile: coluna única -------------------------------------------- */
	@media (max-width: 768px) {
		background-image: url('../images/mobile/bg--exclusivo--mobile.webp');

		& .exclusivos__inner {
			--container: 440px;
		}

		& .exclusivos__titulo {
			font-size: 40px;
		}

		& .exclusivos__lista {
			grid-template-columns: 1fr;
			gap: 16px;
		}

		/* Cards 4 a 7: o mockup mantém o tamanho da exportação e fica centralizado,
       para o card não crescer junto com a largura da tela. */
		& .exclusivo .exclusivo__imagen--llena img {
			max-width: 343.33px;
			margin-inline: auto;
		}
	}
}


/* --------------------------------------------------------------------------
   06.12 CERTIFICADO INTERNACIONAL
   -------------------------------------------------------------------------- */
.certificado {
	padding-block: 80px;
	background-color: var(--azul-8);

	& .certificado__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	& .certificado__contenido {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 29px;
		width: 517px;
	}

	& .certificado__texto p {
		font-size: 20px;
		font-weight: 400;
		line-height: 20px;
		color: var(--blanco);

		&+p {
			margin-top: 20px;
		}
	}

	& .certificado__imagen {
		flex-shrink: 0;
		width: 424px;
		height: auto;
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .certificado__inner {
			--container: 720px;

			flex-direction: column;
			align-items: center;
		}

		& .certificado__contenido {
			width: 100%;
		}

		& .certificado__titulo {
			align-self: center;
			font-size: 24px;
		}

		& .certificado__imagen {
			order: -1;
			width: min(424px, 100%);
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		padding-block: 40px;

		& .certificado__inner {
			--container: 440px;

			align-items: flex-start;
			gap: 35px;
		}

		& .certificado__contenido {
			gap: 29px;
		}

		& .certificado__titulo {
			align-self: stretch;
			width: 100%;
			font-size: min(24px, 5.2vw);
			white-space: nowrap;
		}
	}
}


/* --------------------------------------------------------------------------
   06.13 GARANTÍA
   -------------------------------------------------------------------------- */
.garantia {
	padding-block: 80px;

	& .garantia__inner {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	& .garantia__contenido {
		display: flex;
		flex: 1 0 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
		min-width: 0;
	}

	& .garantia__texto p {
		font-size: 20px;
		font-weight: 400;
		line-height: normal;
		color: var(--blanco);

		&+p {
			margin-top: 25.2px;
		}
	}

	& .garantia__sello {
		flex-shrink: 0;
		width: 252.02px;
		height: 252.02px;
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .garantia__inner {
			--container: 720px;

			flex-direction: column;
			align-items: center;
		}

		& .garantia__contenido {
			flex: none;
			width: 100%;
		}

		& .garantia__titulo {
			align-self: center;
		}

		& .garantia__sello {
			order: -1;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		padding-block: 40px;

		& .garantia__inner {
			--container: 440px;

			gap: 20px;
		}

		/* No layout mobile do Figma esta dobra não exibe a pill "Garantía";
       o título fica acessível a leitores de tela e ao SEO. */
		& .garantia__titulo {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			white-space: nowrap;
			clip-path: inset(50%);
		}

		& .garantia__contenido {
			align-items: center;
			gap: 15px;
		}
	}
}


/* --------------------------------------------------------------------------
   06.14 ¿QUIÉN TE GUIARÁS? - apresentação da mentora
   -------------------------------------------------------------------------- */
.mentora {
	position: relative;
	padding-block: 80px;
	background-color: var(--blanco);

	& .mentora__inner {
		display: flex;
		align-items: center;
		gap: 64px;
	}

	& .mentora__contenido {
		display: flex;
		flex: 1 0 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		min-width: 0;
	}

	& .mentora__titulo {
		width: 389px;
		max-width: 100%;
		padding: 11px 15px;
		border-radius: 58px;
	}

	& .mentora__texto {
		opacity: 0.6;

		& p {
			font-size: 16px;
			font-weight: 400;
			line-height: 20px;
			color: var(--tinta-azul);
			text-align: justify;

			&+p {
				margin-top: 20px;
			}
		}
	}

	& .mentora__foto {
		flex-shrink: 0;
		width: 439px;
		height: auto;
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .mentora__inner {
			--container: 720px;

			flex-direction: column;
			gap: 32px;
		}

		& .mentora__contenido {
			flex: none;
			width: 100%;
			align-items: center;
		}

		& .mentora__foto {
			order: -1;
			width: min(439px, 100%);
		}
	}

	/* --- Mobile: foto sobreposta à dobra anterior ------------------------ */
	@media (max-width: 768px) {
		padding-block: 588px 80px;

		& .mentora__inner {
			--container: 440px;

			flex-direction: column;
			gap: 64px;
		}

		& .mentora__contenido {
			align-items: center;
			gap: 16px;
		}

		& .mentora__foto {
			position: absolute;
			top: -32.41px;
			right: var(--container-padding);
			left: var(--container-padding);
			order: 0;
			width: auto;
			max-width: 439px;
			margin-inline: auto;
		}
	}
}


/* --------------------------------------------------------------------------
   06.15 FAQ + CONTACTO
   -------------------------------------------------------------------------- */
.faq {
	padding-block: 80px;
	background-color: var(--azul-8);

	& .faq__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 59px;
	}

	/* -- Bloco de perguntas -------------------------------------------- */
	& .faq__grupo {
		display: flex;
		flex-direction: column;
		gap: 48px;
		width: 1021.838px;
		max-width: 100%;
	}

	& .faq__titulo {
		font-size: 29.405px;
		font-weight: 700;
		line-height: normal;
		color: var(--blanco);
	}

	& .faq__columnas {
		display: flex;
		justify-content: space-between;
		gap: 24px;
	}

	& .faq__columna {
		display: flex;
		flex-direction: column;
		gap: 22px;
		width: 413.514px;

		&.faq__columna--ancha {
			width: 525.622px;
		}
	}

	& .faq__item {
		position: relative;
		padding-bottom: 21.132px;

		/* Linha divisória com largura fixa, como no Figma */
		&::after {
			position: absolute;
			bottom: 0;
			left: 0;
			width: min(395.135px, 100%);
			height: 0.919px;
			background-color: rgb(25 70 92 / 30%);
			content: '';
		}
	}

	& .faq__q {
		display: flex;
		align-items: center;
		gap: 20.212px;
		width: 100%;
		padding: 0;
		font-family: var(--f-sora);
		font-size: 18.378px;
		font-weight: 400;
		line-height: normal;
		color: var(--blanco);
		text-align: left;
		cursor: pointer;
	}

	/* O quadrado dourado fica parado; só o sinal gira, virando um "x". */
	& .faq__mas {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 44.108px;
		height: 44.108px;
		font-family: var(--f-poppins);
		font-size: 41.346px;
		font-weight: 400;
		line-height: 1;
		color: var(--tinta-mas);
		background-image: linear-gradient(90deg, var(--oro-1) 0%, var(--oro-2) 51.832%, var(--oro-3) 100%);
		border-radius: 7.351px;

		&::before {
			display: block;
			padding-bottom: 4px;
			content: '+';
			transition: transform 0.3s ease;
		}
	}

	& .faq__item.is-open .faq__mas::before {
		padding-bottom: 0;
		transform: rotate(45deg);
	}

	/* O JS abre e fecha escrevendo max-height a partir do scrollHeight. */
	& .faq__a {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease;

		&>* {
			padding: 12px 0 4px 64.32px;
			font-size: 16px;
			font-weight: 400;
			line-height: 22px;
			color: rgb(255 255 255 / 80%);
		}
	}

	/* -- Bloco de contato ---------------------------------------------- */
	& .contacto {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 35px;
		width: 764.615px;
		max-width: 100%;
	}

	& .contacto__linea {
		width: 100%;
		height: 1.564px;
		background-image: var(--grad-oro);
	}

	& .contacto__encabezado {
		display: flex;
		flex-direction: column;
		gap: 7px;
		width: 463px;
		max-width: 100%;
		text-align: center;
	}

	& .contacto__titulo {
		font-size: 32px;
		font-weight: 700;
		line-height: normal;
		color: var(--blanco);
	}

	& .contacto__subtitulo {
		font-size: 20px;
		font-weight: 400;
		line-height: normal;
		color: var(--blanco);
	}

	& .contacto__aviso {
		font-size: 20px;
		font-weight: 400;
		line-height: normal;
		color: var(--blanco);
		text-align: center;
		opacity: 0.6;
	}

	& .contacto__boton {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 37px;
		width: 430px;
		max-width: 100%;
		height: 70px;
		padding-inline: 20px;
		font-family: var(--f-poppins);
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
		color: var(--blanco);
		background-color: var(--verde-whats);
		border-radius: 8px;

		& img {
			flex-shrink: 0;
			width: 40px;
			height: 40px;
		}
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .faq__inner {
			--container: 720px;
		}

		& .faq__columnas {
			flex-direction: column;
			gap: 22px;
		}

		/* A regra base usa .faq__columna.faq__columna--ancha (duas classes),
       então aqui é preciso a mesma especificidade para vencer. */
		& .faq__columna,
		& .faq__columna.faq__columna--ancha {
			width: 100%;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		& .faq__inner {
			--container: 440px;
		}

		& .faq__grupo {
			width: 100%;
		}

		& .faq__columnas {
			gap: 48px;
		}

		& .faq__columna {
			gap: 48px;
		}

		& .faq__q {
			gap: 16px;
		}

		& .faq__a>* {
			padding-left: 60px;
		}

		& .contacto {
			width: 100%;
		}

		& .contacto__boton {
			gap: 12px;
			justify-content: space-between;
			width: 100%;
			padding-inline: 14%;
		}
	}
}


/* --------------------------------------------------------------------------
   06.16 RODAPÉ
   -------------------------------------------------------------------------- */
.footer {
	padding-block: 40px;
	background-color: var(--blanco);

	& .footer__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	& .footer__marca {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		width: 169px;
	}

	& .footer__realizacion {
		font-family: var(--f-poppins);
		font-size: 18px;
		font-weight: 400;
		line-height: 0.975;
		color: rgb(25 70 92 / 87%);
		text-align: center;
	}

	& .footer__logo {
		width: 142px;
		height: auto;
	}

	& .footer__legal {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 22px;
		font-family: var(--f-poppins);
		font-size: 18px;
		font-weight: 400;
		line-height: 0.975;
		color: var(--tinta-azul);
		text-align: center;
		opacity: 0.87;
	}

	& .footer__derechos .footer__sep {
		display: inline;
	}

	& .footer__enlaces {
		display: flex;
		align-items: center;
		gap: 0.4em;

		& a:hover {
			text-decoration: underline;
		}
	}

	/* --- Tablet ---------------------------------------------------------- */
	@media (max-width: 1180px) {
		& .footer__inner {
			--container: 720px;

			flex-direction: column;
			gap: 32px;
		}
	}

	/* --- Mobile ---------------------------------------------------------- */
	@media (max-width: 768px) {
		& .footer__inner {
			--container: 440px;

			flex-direction: column;
			gap: 0;
		}

		& .footer__marca {
			gap: 19px;
			width: 100%;
		}

		& .footer__realizacion {
			font-size: 20.971px;
		}

		& .footer__logo {
			width: min(194px, 100%);
		}

		/* Os filhos passam a ser itens diretos do container para
       respeitar os espaçamentos do layout mobile. */
		& .footer__legal {
			display: contents;
		}

		& .footer__derechos {
			margin-top: 19px;
			font-family: var(--f-poppins);
			font-size: 18.641px;
			line-height: 1.39;
			color: var(--tinta-azul);
			text-align: center;
			opacity: 0.87;

			& span {
				display: block;
			}

			& .footer__sep {
				display: none;
			}
		}

		& .footer__enlaces {
			flex-direction: column;
			gap: 0;
			width: 253.981px;
			max-width: 100%;
			margin-top: 44px;
			font-family: var(--f-poppins);
			font-size: 20.971px;
			line-height: 1.6;
			color: var(--tinta-azul);
			text-align: center;
			opacity: 0.6;

			& .footer__sep {
				display: none;
			}
		}
	}
}



.aviso-vacantes {
	width: 100%;
	max-width: 460px;
	margin: 22px auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.aviso-vacantes__texto {
	color: #ff2727;
	text-align: left;
	text-transform: uppercase;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 19px;
}

.aviso-vacantes__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 58px;
	padding: 12px 22px;
	border-radius: 50px;
	background-color: #7fd111;
	background-image: linear-gradient(90deg, #7fd111, #aeec5b 50%, #7fd111);
	color: #160f40;
	text-transform: uppercase;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 20px;
	text-decoration: none;
	text-align: center;
	transition: filter 0.2s ease;
}