/* ==========================================================================
   CatVerse — componentes. Mobile-first; cada media query só acrescenta.
   ========================================================================== */

body {
	background: var(--cv-fundo);
	color: var(--cv-texto);
	font-family: var(--cv-fonte-corpo);
	font-size: var(--cv-t-m);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--cv-fonte-titulo);
	line-height: 1.12;
	text-wrap: balance;
	color: var(--cv-texto);
	margin: 0;
}

a { color: var(--cv-turquesa); text-underline-offset: 3px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--cv-turquesa);
	outline-offset: 3px;
	border-radius: var(--cv-raio-p);
}

.cv-salta-para {
	position: absolute;
	left: -9999px;
	background: var(--cv-turquesa);
	color: #FFF;
	padding: var(--cv-e-3) var(--cv-e-4);
	border-radius: var(--cv-raio-p);
	font-weight: 600;
	z-index: 1000;
}
.cv-salta-para:focus { left: var(--cv-e-4); top: var(--cv-e-4); }

.cv-envolve { width: min(100% - 2.5rem, var(--cv-largura)); margin-inline: auto; }
.cv-seccao { padding-block: var(--cv-e-16); }
.cv-seccao__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cv-e-4); flex-wrap: wrap; margin-bottom: var(--cv-e-8); }
.cv-seccao__cabeca h2 { font-size: var(--cv-t-xl); font-weight: 600; }

/* ==========================================================================
   Cabeçalho
   Sólido por omissão — o menu é claro e precisa de fundo escuro por baixo.
   Só na Home fica transparente sobre o hero, e volta a sólido assim que
   descola do topo, para nunca ficar texto claro sobre conteúdo claro.
   ========================================================================== */

.elementor-location-header .elementor-top-section {
	background-color: var(--cv-marinho-900);
	transition: background-color var(--cv-transicao), box-shadow var(--cv-transicao);
}

body.home .elementor-location-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 99;
}

body.home .elementor-location-header .elementor-top-section:not(.elementor-sticky--effects) {
	background-color: transparent;
	border-bottom-color: transparent;
}

.elementor-sticky--effects {
	box-shadow: 0 6px 24px rgba(10, 17, 30, .32);
	backdrop-filter: saturate(1.2) blur(8px);
}

.elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown {
	border-top: 1px solid var(--cv-marinho-600);
}

/* --------------------------------------------------- Barra de estado da live */
.cv-barra-live {
	display: flex; align-items: center; justify-content: center; gap: var(--cv-e-3);
	background: var(--cv-marinho-800);
	color: #A9B8CE;
	padding: var(--cv-e-2) var(--cv-e-4);
	font-size: var(--cv-t-s);
}
.cv-barra-live__ponto { width: 9px; height: 9px; border-radius: 50%; background: #7F91AB; flex: none; }
.cv-barra-live--ao-vivo { color: #FFF; }
.cv-barra-live--ao-vivo .cv-barra-live__ponto { background: #EF5B4C; animation: cv-pulso 1.8s ease-in-out infinite; }
.cv-barra-live__etiqueta { font-family: var(--cv-fonte-dados); font-size: var(--cv-t-xs); letter-spacing: .12em; text-transform: uppercase; }
.cv-barra-live a { color: var(--cv-turquesa-vivo); }
@keyframes cv-pulso { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* --------------------------------------------------- Botões */
.cv-botao {
	display: inline-flex; align-items: center; gap: var(--cv-e-2);
	padding: var(--cv-e-3) var(--cv-e-6);
	border-radius: 999px; border: 1px solid transparent;
	font-weight: 600; font-size: var(--cv-t-s); text-decoration: none;
	transition: transform var(--cv-transicao), background-color var(--cv-transicao);
}
.cv-botao--primario { background: var(--cv-turquesa); color: #FFF; }
.cv-botao--primario:hover { transform: translateY(-1px); background: #0A7B75; }
.cv-escuro .cv-botao--primario { background: var(--cv-turquesa-vivo); color: var(--cv-marinho-900); }
.cv-escuro .cv-botao--primario:hover { background: #46E0D3; }
.cv-botao--fantasma { border-color: var(--cv-linha); color: var(--cv-texto); }
.cv-botao--fantasma:hover { border-color: var(--cv-turquesa); color: var(--cv-turquesa); }

/* --------------------------------------------------- Player (fachada) */
.cv-player { position: relative; background: var(--cv-superficie); border: 1px solid var(--cv-linha); border-radius: var(--cv-raio); overflow: hidden; box-shadow: var(--cv-elevacao); }
.cv-player__palco { position: relative; aspect-ratio: 16 / 9; background: var(--cv-marinho-700); }
.cv-player__palco img, .cv-player__palco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.cv-player__botao {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: linear-gradient(180deg, rgba(10,17,30,.15), rgba(10,17,30,.65));
	border: 0; cursor: pointer; width: 100%; color: #FFF;
}
.cv-player__seta {
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--cv-turquesa-vivo); color: var(--cv-marinho-900);
	display: grid; place-items: center; font-size: 26px;
	transition: transform var(--cv-transicao);
}
.cv-player__botao:hover .cv-player__seta { transform: scale(1.07) }
.cv-player__legenda { padding: var(--cv-e-4) var(--cv-e-6); border-top: 1px solid var(--cv-linha-suave); }
.cv-player__legenda h2 { font-size: var(--cv-t-l); font-weight: 600 }
.cv-player__legenda p { color: var(--cv-texto-medio); font-size: var(--cv-t-s); margin: var(--cv-e-2) 0 0 }

.cv-player--offline .cv-player__palco { display: grid; place-items: center; text-align: center; padding: var(--cv-e-8); }
.cv-player__offline { max-width: 46ch; color: #A9B8CE }
.cv-player__horarios { font-family: var(--cv-fonte-dados); font-size: var(--cv-t-xs); color: #7F91AB; white-space: pre-line; margin-top: var(--cv-e-3) }

.cv-aviso-bem-estar {
	margin-top: var(--cv-e-4); padding: var(--cv-e-3) var(--cv-e-4);
	border-left: 3px solid var(--cv-dourado); background: var(--cv-dourado-fraco);
	border-radius: var(--cv-raio-p); font-size: var(--cv-t-s); color: var(--cv-texto-medio);
}

/* --------------------------------------------------- Cards de personagem */
.cv-gangue { display: grid; gap: var(--cv-e-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .cv-gangue { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1024px) { .cv-gangue { grid-template-columns: repeat(4, 1fr) } }

.cv-gato {
	--cor: var(--cv-turquesa);
	display: flex; flex-direction: column; height: 100%;
	background: var(--cv-superficie);
	border: 1px solid var(--cv-linha);
	border-top: 3px solid var(--cor);
	border-radius: var(--cv-raio);
	overflow: hidden; text-decoration: none; color: inherit;
	box-shadow: var(--cv-elevacao);
	transition: transform var(--cv-transicao), box-shadow var(--cv-transicao);
}
.cv-gato:hover { transform: translateY(-4px); box-shadow: var(--cv-elevacao-alta); }
.cv-gato__retrato { aspect-ratio: 4 / 3; background: var(--cv-superficie-2); position: relative; }
.cv-gato__retrato img { width: 100%; height: 100%; object-fit: cover; display: block }
.cv-gato__olhos { position: absolute; inset: 0; display: grid; place-items: center }
.cv-gato__corpo { padding: var(--cv-e-4) var(--cv-e-4) var(--cv-e-6); display: flex; flex-direction: column; gap: var(--cv-e-2); flex: 1 }
.cv-gato__nome { font-family: var(--cv-fonte-titulo); font-size: var(--cv-t-l); font-weight: 700 }
.cv-gato__alcunha { font-family: var(--cv-fonte-dados); font-size: var(--cv-t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--cor) }
.cv-gato__poder { font-size: var(--cv-t-s); color: var(--cv-texto-medio) }
.cv-gato__bordao { font-family: var(--cv-fonte-titulo); font-size: var(--cv-t-m); color: var(--cv-texto); margin-top: auto; padding-top: var(--cv-e-3) }
.cv-gato__bordao::before { content: "\201C" }
.cv-gato__bordao::after  { content: "\201D" }

.cv-estado {
	align-self: flex-start;
	font-family: var(--cv-fonte-dados); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
	padding: 2px 8px; border-radius: 4px;
	background: var(--cv-superficie-2); color: var(--cv-texto-medio);
}
.cv-estado--ativo { background: var(--cv-turquesa-fraco); color: var(--cv-turquesa) }
.cv-estado--descansando { background: var(--cv-dourado-fraco); color: var(--cv-dourado) }

/* --------------------------------------------------- Cards de episódio */
.cv-episodios { display: grid; gap: var(--cv-e-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .cv-episodios { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1024px) { .cv-episodios { grid-template-columns: repeat(3, 1fr) } }

.cv-episodio {
	display: flex; flex-direction: column; height: 100%;
	background: var(--cv-superficie); border: 1px solid var(--cv-linha);
	border-radius: var(--cv-raio); overflow: hidden;
	text-decoration: none; color: inherit; box-shadow: var(--cv-elevacao);
	transition: border-color var(--cv-transicao), box-shadow var(--cv-transicao);
}
.cv-episodio:hover { border-color: var(--cv-turquesa); box-shadow: var(--cv-elevacao-alta) }
.cv-episodio__miniatura { aspect-ratio: 16 / 9; background: var(--cv-superficie-2) }
.cv-episodio__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block }
.cv-episodio__corpo { padding: var(--cv-e-4); display: flex; flex-direction: column; gap: var(--cv-e-2); flex: 1 }
.cv-episodio__titulo { font-size: var(--cv-t-m); font-weight: 600; line-height: 1.3 }
.cv-episodio__resumo { font-size: var(--cv-t-s); color: var(--cv-texto-medio) }
.cv-episodio__meta { display: flex; align-items: center; gap: var(--cv-e-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--cv-e-3); font-size: var(--cv-t-xs); color: var(--cv-texto-fraco); font-variant-numeric: tabular-nums }
.cv-participantes { display: flex; gap: var(--cv-e-1); flex-wrap: wrap }
.cv-participante { font-family: var(--cv-fonte-dados); font-size: .6875rem; padding: 1px 7px; border-radius: 4px; background: var(--cv-superficie-2); color: var(--cv-texto-medio); text-decoration: none }

.cv-selo-ia {
	display: inline-flex; align-items: center; gap: var(--cv-e-1);
	font-family: var(--cv-fonte-dados); font-size: .6875rem; letter-spacing: .06em;
	padding: 2px 8px; border-radius: 4px;
	background: var(--cv-dourado-fraco); color: var(--cv-dourado);
}

/* --------------------------------------------------- Artigo */
.cv-artigo { max-width: var(--cv-medida); margin-inline: auto }
.cv-artigo p, .cv-artigo li { color: var(--cv-texto-medio) }
.cv-artigo h2 { font-size: var(--cv-t-xl); margin-top: var(--cv-e-8) }

.cv-trilho { font-size: var(--cv-t-xs); color: var(--cv-texto-fraco); padding-block: var(--cv-e-4) }
.cv-trilho ol { display: flex; flex-wrap: wrap; gap: var(--cv-e-2); list-style: none; margin: 0; padding: 0 }
.cv-trilho li + li::before { content: "/"; margin-right: var(--cv-e-2); color: var(--cv-linha) }
.cv-trilho a { color: var(--cv-texto-medio); text-decoration: none }
.cv-trilho a:hover { color: var(--cv-turquesa) }

.cv-divulgacao {
	border-left: 3px solid var(--cv-dourado); background: var(--cv-dourado-fraco);
	padding: var(--cv-e-3) var(--cv-e-4); border-radius: var(--cv-raio-p);
	font-size: var(--cv-t-s); color: var(--cv-texto-medio); margin-bottom: var(--cv-e-6);
}
.cv-divulgacao strong { color: var(--cv-dourado) }

/* --------------------------------------------------- Publicidade */
.cv-slot { display: grid; place-items: center; margin-block: var(--cv-e-12); background: var(--cv-superficie-2); border: 1px dashed var(--cv-linha); border-radius: var(--cv-raio) }
.cv-slot__etiqueta { font-family: var(--cv-fonte-dados); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cv-texto-fraco) }

.cv-vazio { color: var(--cv-texto-fraco); padding: var(--cv-e-8) 0 }

/* --------------------------------------------------- Rodapé */
.cv-rodape a { color: #A9B8CE; text-decoration: none }
.cv-rodape a:hover { color: var(--cv-turquesa-vivo) }

/* --------------------------------------------------- Carrossel
   Scroll-snap nativo: sem biblioteca, sem JavaScript, funciona com o dedo,
   com a roda do rato e com as setas do teclado. Um carrossel com JS pesaria
   mais do que os quatro cards que mostra. */
.cv-carrossel { margin-inline: calc(var(--cv-e-4) * -1); padding-inline: var(--cv-e-4); overflow: hidden }
.cv-carrossel__pista {
	display: flex; gap: var(--cv-e-4);
	overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--cv-e-4);
	padding-block: var(--cv-e-2) var(--cv-e-6);
	scrollbar-width: thin;
	scrollbar-color: var(--cv-linha) transparent;
	-webkit-overflow-scrolling: touch;
}
.cv-carrossel__item { flex: 0 0 min(84%, 300px); scroll-snap-align: start; display: flex }
.cv-carrossel__item > * { width: 100% }
@media (min-width: 768px)  { .cv-carrossel__item { flex-basis: 300px } }
.cv-carrossel__pista::-webkit-scrollbar { height: 8px }
.cv-carrossel__pista::-webkit-scrollbar-thumb { background: var(--cv-linha); border-radius: 999px }
.cv-carrossel:focus-visible { outline: 3px solid var(--cv-turquesa); outline-offset: 4px; border-radius: var(--cv-raio) }