/* Banner Aniversário 14 anos (CssBanner da promocaohome) */

/* navbar - cores da campanha aniversario (padrao do designer) */
.header-container {
	background-color: #eddcd2;
}

.sticky-header {
	background: #eddcd2 !important;
}

/* links da barra (Planos, Funcionalidades, Blog, Entrar) */
.header-container .button-light {
	color: #942968 !important;
}

/* botao "Teste gratis": fundo magenta + texto amarelo (invertido do base) */
.header-container .button-primary {
	background-color: #ad246a !important;
	color: #ffcc00 !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* hover: inverte fundo <-> texto */
.header-container .button-primary:hover {
	background-color: #ffcc00 !important;
	color: #ad246a !important;
}

/* barra clara -> mostrar a logo colorida (a branca sumiria no bege) */
.header-container .logo-colorida {
	display: block !important;
}

.header-container .logo-branca {
	display: none !important;
}

/* fundo de papel (3 tamanhos responsivos) */
.banner-background.aniversario-bg {
	position: relative;
	overflow: hidden;
	background-color: #f5efe7;
	background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/cf099ae0-af81-4c64-b55c-6de05cd9aec6.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

@media (max-width: 992px) {
	.banner-background.aniversario-bg {
		background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/60d4fadf-0ebb-490c-9c56-55d79275be8b.webp");
	}
}

@media (max-width: 530px) {
	.banner-background.aniversario-bg {
		background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/f291014d-0fe9-4423-84e7-298b8ccb748e.webp");
	}
}

/* layout do hero */
.hero-container.hero-content-aniversario {
	height: 600px;
	min-height: initial;
	max-height: initial;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2%;
}

/* tintas (respingos) estaticas, encaixadas BEM NA QUINA inferior do banner (full-width):
   cortadas na lateral E embaixo (offset de meia-largura + meia-altura pra fora),
   entao so o quarto interno aparece; overflow do .banner-background clipa o resto */
.aniversario-bg .splash {
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 0;
}

/* quina inferior-ESQUERDA -> Tinta 2 (e0ebc27d) */
.aniversario-bg .splash1 {
	width: 240px;
	height: 200px;
	left: -120px;
	bottom: -100px;
	background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/e0ebc27d-7c2e-4787-b939-e9104ec1b67b.webp");
}

/* quina inferior-DIREITA -> Tinta 1 (e924adbb) */
.aniversario-bg .splash2 {
	width: 240px;
	height: 240px;
	right: -120px;
	bottom: -120px;
	background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/e924adbb-e6cf-4ad4-84a3-3f4ea3f02a89.webp");
}

/* coluna de texto */
.hero-container .texto-aniversario {
	width: 52%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	z-index: 2;
}

/* ancora sem caixa: com display:contents o <a> nao entra no layout, entao as
   <img> continuam sendo os flex items diretos e todo o CSS existente (width,
   order, flex-shrink, o display:none do titulo do outro breakpoint) segue
   valendo sem mudanca. Envolver a imagem num <a> normal faria o <a> virar o
   flex item no lugar dela e derrubaria as `order` do tablet, que estao
   declaradas nas proprias imagens. */
.hero-container .texto-aniversario .link-promo {
	display: contents;
	cursor: pointer;
}

.hero-container .texto-aniversario .titulo-desktop {
	width: 560px;
	max-width: 100%;
}

.hero-container .texto-aniversario .titulo-mobile {
	display: none;
}

/* frase (subtitulo) em HTML, entre o titulo e os selos */
.hero-container .texto-aniversario .subtitulo-aniversario {
	margin: -8px 0;
	max-width: 520px;
	color: #525252;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 400;
}

.hero-container .texto-aniversario .subtitulo-aniversario strong {
	font-weight: 700;
}

/* faixa unica dos dois descontos (790x127 = 6,2:1). Dimensionar por LARGURA, nao
   por altura como os selos antigos: numa proporcao dessas, altura de 100px daria
   622px de largura e estouraria a coluna de texto. 440px mantem a densidade em
   1,8x (mesma dos titulos, que sao 1010px em 560px) - subir a largura aqui deixa
   a arte mole em tela retina. */
.hero-container .texto-aniversario .descontos {
	width: 440px;
	max-width: 100%;
}

.hero-container .texto-aniversario .botao-aniversario {
	display: inline-block;
	cursor: pointer;
	animation: shake-sides 0.9s ease-in-out infinite;
}

/* TETO: a arte tem 384x61 e o shake chega a scale(1.07), entao altura acima de
   ~57px faz o pico da animacao ampliar alem do nativo (serrilha). Nao subir daqui
   sem o designer reexportar o botao maior. */
.hero-container .texto-aniversario .botao-aniversario img {
	height: 56px;
	width: auto;
	max-width: 100%;
}

/* coluna das fotos */
.hero-container .equipe-aniversario {
	width: 46%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-container .equipe-aniversario .fotos-carrossel {
	position: relative;
	width: 100%;
	height: 94%;
	align-self: center;
	background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/2f74289b-6315-432a-9d24-f803ad1a2c0a.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.hero-container .equipe-aniversario .foto {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	opacity: 0;
	animation: crossfade4 20s ease-in-out infinite;
}

.hero-container .equipe-aniversario .foto1 {
	background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/d58d4fc5-e10c-4357-8296-02f73ce00e83.webp");
	animation-delay: 0s;
}

.hero-container .equipe-aniversario .foto2 {
	background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/301cdf82-d7e6-4f18-8ccc-7bb2a040f0c9.webp");
	animation-delay: 5s;
}

.hero-container .equipe-aniversario .foto3 {
	background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/53d38c32-2e1d-49cc-aa89-bcf4b30940bf.webp");
	animation-delay: 10s;
}

.hero-container .equipe-aniversario .foto4 {
	background-image: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/56613f4e-9b62-4bff-ae13-42d3a5d3ec53.webp");
	animation-delay: 15s;
}

@keyframes crossfade4 {
	0%   { opacity: 0; }
	4%   { opacity: 1; }
	22%  { opacity: 1; }
	26%  { opacity: 0; }
	100% { opacity: 0; }
}

/* decorativos da coluna das fotos */
.hero-container .equipe-aniversario .postit {
	position: absolute;
	width: 198px;
	height: 186px;
	top: 2%;
	right: -24%;
	background: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/ba96f221-ad5c-40ae-98b2-8eabd4ba7387.webp") no-repeat center / contain;
	transform: rotate(6deg);
	z-index: 1;
}

.hero-container .equipe-aniversario .baloes {
	position: absolute;
	width: 167px;
	height: 160px;
	right: -14%;
	bottom: 2%;
	background: url("https://cdn.empresaria.online/Promocoes/Aniversario2026/54f02bdd-5c72-4993-b50e-6a98dcf0f01b.webp") no-repeat center / contain;
	z-index: 1;
}

/* animações (padrão da casa) */
@keyframes floating-up-right {
	0%   { transform: rotate(0deg) translate(0, 0); }
	50%  { transform: rotate(-5deg) translate(10px, -10px); }
	100% { transform: rotate(0deg) translate(0, 0); }
}

@keyframes floating-down-left {
	0%   { transform: rotate(0deg) translate(0, 0); }
	50%  { transform: rotate(5deg) translate(-10px, 10px); }
	100% { transform: rotate(0deg) translate(0, 0); }
}

@keyframes floating-up-left {
	0%   { transform: rotate(0deg) translate(0, 0); }
	50%  { transform: rotate(5deg) translate(-10px, -10px); }
	100% { transform: rotate(0deg) translate(0, 0); }
}

@keyframes floating-down-right {
	0%   { transform: rotate(0deg) translate(0, 0); }
	50%  { transform: rotate(-5deg) translate(10px, 10px); }
	100% { transform: rotate(0deg) translate(0, 0); }
}

@keyframes shake-sides {
	0%   { transform: scale(1.00) rotate(0deg); }
	25%  { transform: scale(1.04) rotate(2deg); }
	50%  { transform: scale(1.07) rotate(0deg); }
	75%  { transform: scale(1.04) rotate(-2deg); }
	100% { transform: scale(1.00) rotate(0deg); }
}

/* tablet */
@media (max-width: 992px) {
	.aniversario {
		padding-top: 80px;
	}

	.hero-container.hero-content-aniversario {
		flex-direction: column;
		height: 640px;
		max-height: 70dvh;
		padding: 24px 0 0;
		justify-content: flex-start;
		align-items: center;
		gap: 16px;
	}

	.hero-container .desktop,
	.aniversario-bg .splash {
		display: none;
	}

	/* achata a coluna de texto pra a imagem poder entrar no meio (ordem do mockup);
	   text-align:center e' herdado pelos filhos mesmo com display:contents */
	.hero-container .texto-aniversario {
		display: contents;
		text-align: center;
	}

	.hero-container .texto-aniversario .titulo-desktop {
		display: none;
	}

	/* ordem no tablet: titulo(1) -> frase(2) -> imagem(3) -> selos(4) -> botao(5) */
	.hero-container .texto-aniversario .titulo-mobile {
		display: block;
		width: 440px;
		max-width: 90%;
		order: 1;
	}

	.hero-container .texto-aniversario .subtitulo-aniversario {
		order: 2;
	}

	/* imagem elastica: absorve a folga do 70dvh (cresce/encolhe), mantendo a
	   proporcao do quadro rosa (800x655); os decorativos, ancorados nela, acompanham */
	.hero-container .equipe-aniversario {
		flex: 1 1 0;
		min-height: 0;
		aspect-ratio: 800 / 655;
		width: auto;
		max-width: 92%;
		order: 3;
	}

	/* itens de texto/selos/botao nao encolhem; so a imagem cede espaco */
	.hero-container .texto-aniversario .titulo-mobile,
	.hero-container .texto-aniversario .subtitulo-aniversario,
	.hero-container .texto-aniversario .descontos,
	.hero-container .texto-aniversario .botao-aniversario {
		flex-shrink: 0;
	}

	/* a foto preenche a coluna (agora menor); os decorativos, ancorados nesta
	   coluna, passam a grudar na foto automaticamente */
	.hero-container .equipe-aniversario .fotos-carrossel {
		width: 100%;
		height: 100%;
	}

	/* reexibe os decorativos no tablet (o .desktop os esconde por padrao) */
	.hero-container .postit,
	.hero-container .baloes {
		display: block !important;
	}

	/* post-it: dimensoes fixas (90x90) + posicao em px (transbordo constante, nao invade mais quando o card encolhe) */
	.hero-container .equipe-aniversario .postit {
		width: 90px;
		height: 90px;
		top: 6px;
		right: -60px;
	}

	/* baloes colados na quina inferior-esquerda da foto */
	.hero-container .equipe-aniversario .baloes {
		width: 78px;
		height: 90px;
		left: -9%;
		right: auto;
		bottom: 0;
	}

	.hero-container .texto-aniversario .descontos {
		width: 440px;
		max-width: 90%;
		order: 4;
	}

	.hero-container .texto-aniversario .botao-aniversario {
		order: 5;
	}

	.hero-container .texto-aniversario .botao-aniversario img {
		height: 48px;
	}
}

/* celular */
@media (max-width: 530px) {
	/* metade do tamanho: a coluna era `flex: 1 1 0` (absorvia toda a folga
	   vertical), entao so mexer na largura nao liberaria altura nenhuma pro
	   botao. Com `flex: 0 0 auto` ela para de esticar e a altura passa a sair do
	   aspect-ratio 800/655 herdado -> 46% de largura (metade dos 92%) = metade
	   da altura. A folga que sobra fica embaixo, por conta do
	   justify-content: flex-start do hero. Post-it e baloes acompanham sozinhos:
	   sao % desta coluna. */
	.hero-container .equipe-aniversario {
		flex: 0 0 auto;
		width: 46%;
		max-width: 46%;
		height: auto;
	}

	/* a altura de 640px/70dvh so fazia sentido enquanto a foto era elastica e
	   preenchia a sobra. Com ela fixa, o que sobrava virava banner vazio, entao
	   aqui a altura passa a sair do conteudo. */
	.hero-container.hero-content-aniversario {
		height: auto;
		max-height: none;
		padding-bottom: 10px;
	}

	/* caminho 1: itens fixos fluidos (clamp min/dvh/max) -> encolhem em telas
	   baixas p/ o piso caber sempre; no MAX ficam iguais ao tamanho atual */
	.hero-container .texto-aniversario .titulo-mobile {
		width: clamp(210px, 38dvh, 320px);
	}

	.hero-container .texto-aniversario .subtitulo-aniversario {
		font-size: clamp(12px, 2.1dvh, 15px);
	}

	/* decorativos proporcionais ao quadro rosa (% da coluna da foto, que e'
	   aspect-locked) -> encolhem junto com o card em telas pequenas */
	.hero-container .equipe-aniversario .postit {
		width: 34%;
		height: auto;
		aspect-ratio: 1 / 1;
		top: 2%;
		right: -15%;
	}

	.hero-container .equipe-aniversario .baloes {
		width: 30%;
		height: auto;
		aspect-ratio: 78 / 90;
	}

	.hero-container .texto-aniversario .descontos {
		width: clamp(210px, 38dvh, 320px);
	}

	.hero-container .texto-aniversario .botao-aniversario img {
		height: clamp(34px, 6.5dvh, 46px);
	}
}

/* desktop menor (993-1200px): decorativos menores + posicao em px p/ respeitarem o container
   (nao afeta desktop grande >1200 nem o tablet <=992) */
@media (min-width: 993px) and (max-width: 1200px) {
	.hero-container .equipe-aniversario .postit {
		width: 150px;
		height: 140px;
		top: -15px;
		right: -20px;
	}

	.hero-container .equipe-aniversario .baloes {
		width: 124px;
		height: 143px;
		right: 0px;
		bottom: 8px;
	}
}