/* =========================================================
   BULARIUM — CAMADA 3D
   Carregue DEPOIS de bularium-home.css. Não substitui nada:
   só acrescenta profundidade, vidro e movimento.
   ========================================================= */

.blr {
	--vidro:       rgba(255,255,255,.62);
	--vidro-borda: rgba(255,255,255,.85);
	--perspectiva: 900px;
}

/* =========================================================
   1. FUNDO VIVO DO HERO — blobs de gradiente em deriva lenta
   ========================================================= */
.blr-hero { isolation: isolate; }

.blr-hero::before,
.blr-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
	z-index: 0;
	will-change: transform;
}
.blr-hero::before {
	width: 560px; height: 560px;
	top: -180px; right: -120px;
	background: radial-gradient(circle, rgba(47,212,192,.42), transparent 70%);
	animation: blrDeriva1 22s ease-in-out infinite;
}
.blr-hero::after {
	width: 460px; height: 460px;
	bottom: -140px; left: -140px;
	background: radial-gradient(circle, rgba(77,166,240,.34), transparent 70%);
	animation: blrDeriva2 27s ease-in-out infinite;
}

@keyframes blrDeriva1 {
	0%,100% { transform: translate(0,0) scale(1); }
	50%     { transform: translate(-60px,50px) scale(1.12); }
}
@keyframes blrDeriva2 {
	0%,100% { transform: translate(0,0) scale(1); }
	50%     { transform: translate(70px,-40px) scale(1.08); }
}

/* malha de pontos por cima — dá textura sem pesar */
.blr-hero__glow {
	background:
		radial-gradient(circle, rgba(25,184,166,.14), transparent 68%),
		radial-gradient(rgba(10,37,64,.07) 1px, transparent 1px);
	background-size: auto, 22px 22px;
}

.blr-hero__grid,
.blr-hero .blr-busca { position: relative; z-index: 2; }

/* =========================================================
   2. VIDRO — painel e busca ganham profundidade real
   ========================================================= */
.blr-busca {
	background: linear-gradient(150deg, rgba(255,255,255,.94), rgba(255,255,255,.74));
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid var(--vidro-borda);
	border-top: 4px solid var(--teal);
	box-shadow:
		0 1px 0 rgba(255,255,255,.9) inset,
		0 30px 60px -18px rgba(10,37,64,.28),
		0 4px 12px rgba(10,37,64,.06);
}

.blr-painel {
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(47,212,192,.22), transparent 60%),
		linear-gradient(160deg, #0E2F4F 0%, var(--ink) 100%);
	box-shadow:
		0 1px 0 rgba(255,255,255,.14) inset,
		0 34px 64px -20px rgba(10,37,64,.5);
	transform: perspective(var(--perspectiva)) rotateY(-6deg) rotateX(2deg);
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.blr-painel:hover {
	transform: perspective(var(--perspectiva)) rotateY(-2deg) rotateX(0deg) translateY(-4px);
}

/* =========================================================
   3. ÍCONES 3D
   ========================================================= */
.blr-ic3d {
	display: block;
	filter: drop-shadow(0 6px 10px rgba(10,37,64,.16));
	transition: transform .45s cubic-bezier(.2,.8,.3,1), filter .45s ease;
	transform-origin: 50% 60%;
}

/* o quadrado de fundo do ícone vira uma "plataforma" com brilho */
.blr-cat__icone {
	width: 72px; height: 72px;
	border-radius: 20px;
	background:
		linear-gradient(150deg, rgba(255,255,255,.9), rgba(240,250,251,.55)),
		var(--superficie);
	border: 1px solid rgba(255,255,255,.9);
	box-shadow:
		0 1px 0 rgba(255,255,255,1) inset,
		0 8px 18px -8px rgba(10,37,64,.22);
	overflow: visible;
	position: relative;
	transition: box-shadow .4s ease;
}
.blr-cat__icone::after {
	content: "";
	position: absolute;
	inset: auto 14% 8px 14%;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(10,37,64,.2), transparent 70%);
	filter: blur(4px);
	opacity: 0;
	transition: opacity .4s ease;
}
.blr-cat:hover .blr-cat__icone::after { opacity: 1; }
.blr-cat:hover .blr-ic3d {
	transform: translateY(-8px) rotate(-6deg) scale(1.08);
	filter: drop-shadow(0 14px 18px rgba(10,37,64,.22));
}

/* flutuação ambiente, dessincronizada por posição */
.blr-cats .blr-cat:nth-child(3n+1) .blr-ic3d { animation: blrFlutua 5.4s ease-in-out infinite; }
.blr-cats .blr-cat:nth-child(3n+2) .blr-ic3d { animation: blrFlutua 6.2s ease-in-out infinite .7s; }
.blr-cats .blr-cat:nth-child(3n+3) .blr-ic3d { animation: blrFlutua 5.8s ease-in-out infinite 1.3s; }

@keyframes blrFlutua {
	0%,100% { transform: translateY(0) rotate(0deg); }
	50%     { transform: translateY(-6px) rotate(-2.5deg); }
}
.blr-cat:hover .blr-ic3d { animation-play-state: paused; }

/* ícone pequeno dentro da tag de categoria do post */
.blr-post__cat-icone .blr-ic3d {
	width: 18px; height: 18px;
	filter: drop-shadow(0 2px 3px rgba(10,37,64,.2));
	animation: none;
}

/* =========================================================
   4. CARDS COM INCLINAÇÃO 3D
   ========================================================= */
.blr-cats, .blr-posts { perspective: 1400px; }

.blr-cat, .blr-post {
	transform-style: preserve-3d;
	transition:
		transform .45s cubic-bezier(.2,.8,.3,1),
		box-shadow .45s ease,
		border-color .3s ease;
	position: relative;
}

.blr-cat::before, .blr-post::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(255,255,255,0) 55%);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
.blr-cat:hover::before, .blr-post:hover::before { opacity: 1; }

.blr-cat:hover {
	transform: translateY(-8px) rotateX(4deg) rotateY(-3deg);
	box-shadow: 0 28px 44px -20px rgba(10,37,64,.3);
}
.blr-post:hover {
	transform: translateY(-8px) rotateX(3deg);
	box-shadow: 0 30px 50px -22px rgba(10,37,64,.28);
}

/* borda que acende no hover */
.blr-cat::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, var(--teal-claro), transparent 45%, var(--teal));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
.blr-cat:hover::after { opacity: 1; }

/* =========================================================
   5. FAIXA DE NÚMEROS — profundidade e brilho itinerante
   ========================================================= */
.blr-numeros {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(90% 140% at 15% 0%, rgba(47,212,192,.3), transparent 55%),
		linear-gradient(100deg, var(--ink) 0%, #0D5C6B 55%, var(--teal) 100%);
}
.blr-numeros::after {
	content: "";
	position: absolute;
	top: 0; left: -60%;
	width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.13), transparent);
	transform: skewX(-18deg);
	animation: blrBrilho 7s ease-in-out infinite;
}
@keyframes blrBrilho {
	0%   { left: -60%; }
	60%,100% { left: 130%; }
}

.blr-numero {
	position: relative;
	z-index: 1;
	padding: 22px 12px;
	border-radius: 16px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	backdrop-filter: blur(6px);
	transition: transform .4s cubic-bezier(.2,.8,.3,1), background .4s ease;
}
.blr-numero:hover {
	transform: translateY(-6px) scale(1.03);
	background: rgba(255,255,255,.1);
}
.blr-numero strong {
	background: linear-gradient(180deg, #FFFFFF, #B9F2EA);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* =========================================================
   6. BOTÕES COM RELEVO
   ========================================================= */
.blr-btn--primario {
	background: linear-gradient(180deg, var(--teal-claro), var(--teal));
	box-shadow:
		0 1px 0 rgba(255,255,255,.4) inset,
		0 10px 22px -8px rgba(14,148,136,.65);
	position: relative;
	overflow: hidden;
}
.blr-btn--primario::after {
	content: "";
	position: absolute;
	top: 0; left: -80%;
	width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
	transform: skewX(-20deg);
	transition: left .6s ease;
}
.blr-btn--primario:hover::after { left: 130%; }
.blr-btn--primario:active { transform: translateY(1px); }

/* =========================================================
   7. BLOCO DE OFERTA — vira uma peça de vitrine
   ========================================================= */
.blr-oferta__caixa {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(80% 120% at 88% 12%, rgba(47,212,192,.28), transparent 58%),
		linear-gradient(115deg, var(--ink) 0%, #0E5F6E 100%);
	box-shadow: 0 40px 70px -30px rgba(10,37,64,.55);
}
.blr-oferta__caixa::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
}
.blr-oferta__conteudo, .blr-oferta__slot { position: relative; z-index: 1; }

.blr-oferta__placeholder {
	background: rgba(255,255,255,.06);
	backdrop-filter: blur(8px);
	border: 1px dashed rgba(255,255,255,.28);
	box-shadow: 0 1px 0 rgba(255,255,255,.14) inset;
	transition: transform .5s cubic-bezier(.2,.8,.3,1);
	transform: perspective(800px) rotateY(-8deg);
}
.blr-oferta__caixa:hover .blr-oferta__placeholder {
	transform: perspective(800px) rotateY(-3deg) translateY(-5px);
}

/* =========================================================
   8. SELOS EM RELEVO
   ========================================================= */
.blr-selo {
	background: linear-gradient(155deg, #FFFFFF, var(--superficie));
	border: 1px solid var(--borda);
	border-left: 3px solid var(--teal);
	box-shadow: 0 1px 0 #fff inset, 0 10px 22px -14px rgba(10,37,64,.3);
	transition: transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.blr-selo:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 34px -18px rgba(10,37,64,.35);
}

/* =========================================================
   9. REVELAÇÃO NA ROLAGEM
   ========================================================= */
.blr-revela {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.blr-revela.blr-visivel { opacity: 1; transform: none; }

/* atraso em cascata dentro dos grids */
.blr-cats .blr-revela:nth-child(1),  .blr-posts .blr-revela:nth-child(1)  { transition-delay: .00s; }
.blr-cats .blr-revela:nth-child(2),  .blr-posts .blr-revela:nth-child(2)  { transition-delay: .06s; }
.blr-cats .blr-revela:nth-child(3),  .blr-posts .blr-revela:nth-child(3)  { transition-delay: .12s; }
.blr-cats .blr-revela:nth-child(4),  .blr-posts .blr-revela:nth-child(4)  { transition-delay: .18s; }
.blr-cats .blr-revela:nth-child(5),  .blr-posts .blr-revela:nth-child(5)  { transition-delay: .24s; }
.blr-cats .blr-revela:nth-child(6),  .blr-posts .blr-revela:nth-child(6)  { transition-delay: .30s; }
.blr-cats .blr-revela:nth-child(n+7) { transition-delay: .36s; }

/* =========================================================
   10. FREIO DE MÃO — acessibilidade e telas pequenas
   ========================================================= */
@media (max-width: 900px) {
	/* inclinação 3D em toque só atrapalha */
	.blr-painel { transform: none; }
	.blr-cat:hover, .blr-post:hover { transform: translateY(-4px); }
	.blr-oferta__placeholder { transform: none; }
	.blr-cat__icone { width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
	.blr-hero::before, .blr-hero::after,
	.blr-numeros::after,
	.blr-cats .blr-cat .blr-ic3d { animation: none !important; }
	.blr-revela { opacity: 1; transform: none; transition: none; }
	.blr-painel, .blr-cat:hover, .blr-post:hover,
	.blr-oferta__placeholder { transform: none !important; }
}

/* fallback: navegador sem backdrop-filter recebe fundo sólido */
@supports not (backdrop-filter: blur(1px)) {
	.blr-busca { background: #fff; }
	.blr-numero { background: rgba(255,255,255,.09); }
}

/* =========================================================
   11. CORREÇÃO DE ESPECIFICIDADE
   O CSS base define .blr-cat__icone svg { width:23px }.
   Os ícones 3D precisam de mais área para o volume aparecer.
   ========================================================= */
.blr-cat__icone svg.blr-ic3d { width: 42px; height: 42px; }
.blr-post__cat-icone svg.blr-ic3d { width: 18px; height: 18px; }

/* =========================================================
   12. CORREÇÕES DE CONTRASTE — WCAG 2.1 AA
   Valores calculados, não escolhidos no olho.
   Cada linha abaixo passou de reprovado para >= 4.5:1.
   ========================================================= */
.blr {
	--texto-fraco:   #5E7586;  /* era #6B8598 — 3.86:1 → 4.52:1 */
	--teal-texto:    #0C7F75;  /* era #0E9488 — 3.52:1 → 4.58:1 */
	--placeholder:   #66747D;  /* era #9DB2C0 — 2.06:1 → 4.53:1 */
}

/* o verde claro continua sendo o acento GRÁFICO (ícones, bordas, botões).
   para TEXTO pequeno usamos a versão escurecida. */
.blr-eyebrow            { color: var(--teal-texto); }
.blr-post__link         { color: var(--teal-texto); }
.blr-busca__campo input::placeholder { color: var(--placeholder); }
.blr-cat__qtd,
.blr-busca__dica,
.blr-post__rodape       { color: var(--texto-fraco); }

/* a pílula de categoria no card: fundo mais denso + texto mais escuro */
.blr-post__cat {
	color: #0A6D64;
	background: rgba(14,148,136,.13);
}

/* sobre fundo escuro */
.blr-oferta__aviso        { color: rgba(255,255,255,.71); } /* era .55 */
.blr-oferta__placeholder  { color: rgba(255,255,255,.71); } /* era .50 */
.blr-numero span          { color: rgba(255,255,255,.82); }
.blr-painel__rotulo       { color: #9BB6CC; }

/* o eyebrow claro não pode herdar o teal escuro */
.blr-eyebrow--claro { color: #A9EFE4; }

/* corpo do texto um pouco mais leve, para o layout respirar */
.blr-lead, .blr-secao__sub { color: #2F4E63; }

/* =========================================================
   13. CABEÇALHO
   ========================================================= */

/* -- barra de aviso -- */
.blr-avisofaixa {
	background: linear-gradient(100deg, #0A2540, #0E5F6E);
	color: #DCEEF2;
	font-size: .84rem;
	position: relative;
	z-index: 60;
}
.blr-avisofaixa__linha {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 9px;
}
.blr-avisofaixa__linha svg { width: 17px; height: 17px; color: #7BE3D4; flex-shrink: 0; }
.blr-avisofaixa p { margin: 0; }
.blr-avisofaixa__x {
	margin-left: auto;
	background: none;
	border: 0;
	color: #9CC0CC;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.blr-avisofaixa__x:hover { color: #fff; }
.blr-avisofaixa[hidden] { display: none; }

/* -- barra principal -- */
.blr-topo {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.72);
	backdrop-filter: blur(16px) saturate(1.6);
	-webkit-backdrop-filter: blur(16px) saturate(1.6);
	border-bottom: 1px solid rgba(220,232,238,.9);
	transition: box-shadow .3s ease, background .3s ease;
}
.blr-topo--colado {
	background: rgba(255,255,255,.93);
	box-shadow: 0 8px 28px -14px rgba(10,37,64,.28);
}
.blr-topo__linha {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 74px;
}

/* marca */
.blr-marca {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}
.blr-marca__selo {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 13px;
	background: linear-gradient(150deg, #FFFFFF, #EAF6F7);
	border: 1px solid rgba(255,255,255,.95);
	box-shadow: 0 1px 0 #fff inset, 0 6px 14px -6px rgba(10,37,64,.3);
	transition: transform .45s cubic-bezier(.2,.8,.3,1);
}
.blr-marca__selo svg {
	width: 30px; height: 30px;
	filter: drop-shadow(0 3px 5px rgba(10,37,64,.22));
}
.blr-marca:hover .blr-marca__selo { transform: translateY(-2px) rotate(-6deg); }

.blr-marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.blr-marca__texto strong {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 1.24rem;
	color: var(--ink);
	letter-spacing: -.02em;
}
.blr-marca__texto small {
	font-size: .71rem;
	color: var(--texto-fraco);
	letter-spacing: .01em;
}

/* navegação */
.blr-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}
.blr-nav__link {
	position: relative;
	padding: 9px 15px;
	border-radius: 9px;
	font-size: .95rem;
	font-weight: 600;
	color: #2F4E63;
	text-decoration: none;
	transition: color .2s ease, background .2s ease;
}
.blr-nav__link:hover { color: var(--teal-texto); background: rgba(14,148,136,.08); }
.blr-nav__link--ativo { color: var(--teal-texto); }
.blr-nav__link--ativo::after {
	content: "";
	position: absolute;
	left: 15px; right: 15px; bottom: 3px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--teal-claro), var(--teal));
}
.blr-nav__emergencia { display: none; }

/* ações */
.blr-topo__acoes { display: flex; align-items: center; gap: 10px; }
.blr-topo__busca {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 11px;
	border: 1px solid var(--borda);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.blr-topo__busca svg { width: 19px; height: 19px; }
.blr-topo__busca:hover { border-color: var(--teal); color: var(--teal-texto); transform: translateY(-1px); }
.blr-topo__cta { padding: 12px 22px; font-size: .9rem; }

/* hamburguer */
.blr-hamburguer {
	display: none;
	width: 42px; height: 42px;
	border-radius: 11px;
	border: 1px solid var(--borda);
	background: #fff;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.blr-hamburguer span {
	position: absolute;
	left: 11px;
	width: 20px; height: 2px;
	border-radius: 2px;
	background: var(--ink);
	transition: transform .3s ease, opacity .2s ease;
}
.blr-hamburguer span:nth-child(1) { top: 14px; }
.blr-hamburguer span:nth-child(2) { top: 20px; }
.blr-hamburguer span:nth-child(3) { top: 26px; }
.blr-hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.blr-hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.blr-hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* véu do menu mobile */
.blr-veu {
	position: fixed; inset: 0;
	background: rgba(10,37,64,.45);
	backdrop-filter: blur(3px);
	z-index: 45;
	opacity: 0;
	transition: opacity .3s ease;
}
.blr-veu.blr-veu--ativo { opacity: 1; }

/* -- mobile -- */
@media (max-width: 940px) {
	.blr-topo__linha { min-height: 66px; gap: 14px; }
	.blr-hamburguer { display: block; }
	.blr-topo__cta { display: none; }
	.blr-marca__texto small { display: none; }

	.blr-nav {
		position: fixed;
		top: 0; right: 0;
		width: min(320px, 86vw);
		height: 100dvh;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		margin: 0;
		padding: 92px 22px 32px;
		background: #fff;
		box-shadow: -20px 0 50px -20px rgba(10,37,64,.4);
		transform: translateX(102%);
		transition: transform .38s cubic-bezier(.2,.8,.3,1);
		z-index: 55;
		overflow-y: auto;
	}
	.blr-nav.blr-nav--aberta { transform: none; }
	.blr-nav__link {
		padding: 15px 16px;
		font-size: 1.05rem;
		border-bottom: 1px solid var(--borda);
		border-radius: 0;
	}
	.blr-nav__link--ativo::after { display: none; }

	.blr-nav__emergencia {
		display: block;
		margin-top: 22px;
		padding: 16px 18px;
		border-radius: 13px;
		background: linear-gradient(140deg, #0A2540, #0E5F6E);
		color: #fff;
		font-family: 'Manrope', sans-serif;
		font-weight: 800;
		font-size: 1.1rem;
		text-decoration: none;
	}
	.blr-nav__emergencia span {
		display: block;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		font-size: .72rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: #9BD8CE;
		margin-bottom: 3px;
	}

	/* trava a rolagem do fundo */
	body.blr-travado { overflow: hidden; }
}

@supports not (backdrop-filter: blur(1px)) {
	.blr-topo { background: #fff; }
}