:root {
	--bg-color: #0d0d0f;
	--vermelho: #ff3e3e;
	--term-white: #eaeaea;
	--term-white-dim: rgba(255, 255, 255, 0.25);
	--term-white-glow: rgba(234, 234, 234, 0.45);
	--accent-code: #00f0ff;
	--accent-warning: #ffb800;
	--preto: #121212;
	--branco: #e0e0e0;
	--cinza: #1a1a1d;
	--link: #43d162;
	--glow: #E60000;
	--cinza-dark: #121212;
	--font-terminal: 'VT323', monospace;
	--font-code: 'Fira Code', monospace;
	--font-main: 'Quantico', sans-serif;
	--font-title: 'Michroma', sans-serif;
	--font-texto: 'Google Sans Flex', sans-serif;
	--border-glow: rgba(230, 0, 0, 0.3);
	--descricao: 15px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: var(--bg-color);
	color: var(--term-white);
	font-family: var(--font-code);
	min-height: 100vh;
	padding: 20px;
	position: relative;
	overflow-x: hidden;
	text-shadow: 0 0 4px var(--term-white-glow);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}


body.crt-off .crt-overlay {
	display: none !important;
}

.terminal-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px dashed var(--term-white-dim);
	padding-bottom: 15px;
	margin-bottom: 25px;
}

.terminal-status {
	font-family: var(--font-code);
	font-size: 13px;
	color: var(--term-white);
	letter-spacing: 1px;
}

.terminal-status .status-indicator {
	color: var(--link);
	animation: status-pulse 2s infinite;
}

@keyframes status-pulse {
	0% { opacity: 0.4; }
	50% { opacity: 1; }
	100% { opacity: 0.4; }
}

/* Estrutura do Switch CRT */
.crt-toggle-container {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(18, 18, 20, 0.9);
	border: 1px solid var(--term-white-dim);
	padding: 6px 12px;
	border-radius: 4px;
	font-family: var(--font-code);
	font-size: 12px;
	box-shadow: 0 0 8px var(--term-white-dim);
	user-select: none;
}

.crt-toggle-label {
	color: var(--term-white);
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-shadow: 0 0 5px var(--term-white-glow);
}

.crt-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 20px;
}

.crt-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.crt-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #1a1a1d;
	border: 1px solid var(--term-white-dim);
	transition: .3s;
	border-radius: 10px;
}

.crt-slider:before {
	position: absolute;
	content: "";
	height: 12px;
	width: 12px;
	left: 3px;
	bottom: 3px;
	background-color: var(--vermelho);
	box-shadow: 0 0 6px var(--glow);
	transition: .3s;
	border-radius: 50%;
}

input:checked + .crt-slider {
	border-color: var(--link);
	box-shadow: 0 0 8px rgba(67, 209, 98, 0.3);
}

input:checked + .crt-slider:before {
	transform: translateX(24px);
	background-color: var(--link);
	box-shadow: 0 0 8px var(--link);
}

.canal{
	text-align:center;
	color:var(--branco);
	text-shadow:0px 0px 1px var(--branco);
	cursor:pointer;
	transition: all 0.2s linear;
}
.canal:hover{
	transition: all 0.2s linear;
	color:var(--glow);
	text-shadow:0px 0px 3px var(--glow);
}
.canal svg{
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.crt-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
	background-size: 100% 4px;
	z-index: 9999;
	pointer-events: none;
}

.terminal-container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border: 1px solid var(--term-white);
	padding: 25px;
	box-shadow: inset 0 0 15px var(--term-white-dim), 0 0 15px var(--term-white-dim);
	background-color: rgba(0, 0, 0, 0.84);
}

.terminal-prompt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	margin-bottom: 25px;
	font-family: var(--font-code);
	font-size: 15px;
	color: var(--term-white);
}

.terminal-prompt .user {
	color: var(--term-white);
	font-weight: 700;
}

.terminal-prompt .path {
	color: #00f0ff;
}

.terminal-prompt .separator {
	color: var(--term-white);
	transition:all 0.5s linear;
}
.terminal-prompt .separator:hover {
	color: var(--term-white);
	transition:all 0.2s linear;
}

.cursor {
	width: 9px;
	height: 18px;
	background: var(--term-white);
	margin-left: 4px;
	animation: blink 1s steps(1) infinite;
}

@keyframes blink {50% {opacity: 0;}}

.ascii-art {
	font-family: var(--font-terminal);
	font-size: clamp(5px, 2.2vw, 15px);
	line-height: 1;
	color: var(--term-white);
	text-align: center;
	margin-bottom: 15px;
}

.status-bar {
	display: flex;
	justify-content: space-between;
	border-top: 1px dashed var(--term-white);
	border-bottom: 1px dashed var(--term-white);
	padding: 6px 10px;
	font-size: 12px;
	margin-bottom: 25px;
	flex-wrap: wrap;
	gap: 10px;
}

.centro-roller {
	text-align: center;
	margin: 25px 0 35px 0;
	padding: 15px;
	background: rgba(18, 18, 18, 0.75);
	border: 1px solid var(--term-white-dim);
	width: 100%;
}

.mini-prompt {
	font-size: 12px;
	letter-spacing: 2px;
	opacity: 0.8;
	margin-bottom: 8px;
}

.roller-window{
	height:70px;
	overflow:hidden;
	position:relative;
}


.roller-track{
	display:flex;
	flex-direction:column;
	animation:roller 8s cubic-bezier(.76,0,.24,1) infinite;
}


.roller-track span{
	height:70px;
	line-height:70px;
	display:block;
	text-align:center;
	font-family:var(--font-terminal);
	font-size:clamp(24px,5vw,32px);
	font-weight:bold;
	letter-spacing:2px;
	color:var(--term-white);
	text-shadow:0 0 8px var(--term-white-glow);
}

@keyframes roller{

	0%,18%{
		transform:translateY(0);
	}

	25%,43%{
		transform:translateY(-70px);
	}

	50%,68%{
		transform:translateY(-140px);
	}

	75%,92%{
		transform:translateY(-210px);
	}

	96%,100%{
		transform:translateY(0);
	}

}

.terminal-nav {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 30px;
	border-bottom: 1px dashed var(--term-white);
	padding-bottom: 20px;
	width: 100%;
}

.nav-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.nav-label {
	font-size: 12px;
	opacity: 0.85;
}

.nav-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
}

.btn-term {
	background: transparent;
	color: var(--term-white);
	border: 1px solid var(--term-white);
	padding: 8px 14px;
	font-family: var(--font-code);
	font-size: 13px;
	cursor: pointer;
	text-decoration: none;
}

.btn-term {
	transition: all .2s ease;
}

.btn-term:hover {
	background: var(--term-white);
	color: var(--bg-color);
	box-shadow:0 0 8px var(--term-white-glow), 0 0 20px var(--term-white-dim);
	transform: translateY(-2px);
}

.btn-term:active {
	transform: translateY(0);
}

.btn-term.active {
	background: var(--term-white);
	color: var(--bg-color);
	box-shadow: 0 0 12px var(--term-white-glow);
}
.btn-term.active svg{
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.preview-area{
	margin-top:25px;
}

.preview-text,
.preview-grid{
	width:100%;
	opacity:1;
	transform:translateY(0);
	transition:opacity .35s ease, transform .35s ease;
}

.preview-text.hide,
.preview-grid.hide{
	opacity:0;
	transform:translateY(12px);
	pointer-events:none;
}

.preview-text{
	font-size:15px;
	line-height:1.9;
}

.preview-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	gap:18px;
}

#preview-equipe,
#preview-parceiros{
	display:none;
}

.preview-card{
	display:flex;
	gap:18px;
	align-items:center;
}

.preview-card img{
	width:100px;
	height:100px;
	object-fit:cover;
	border:1px solid var(--term-white);
	border-radius:100%;
	flex-shrink:0;
	transition:.25s;

}

.preview-card:hover img{
	transform:scale(1.1);
}

.preview-info{
	flex:1;
}

.preview-card:hover{
	cursor:pointer;
	border-color:var(--term-white);
	box-shadow:0 0 15px rgba(255, 255, 255, 0.46);
	margin-left:2px;
	transition:.25s;

}

.preview-card h3{
    margin:12px 0;
}

.tipo{
    font-size:11px;
    opacity:.7;
    letter-spacing:2px;
}

.socials {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.socials svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}


.socials:hover svg{
	fill:#ffffff;
	transform:scale(1.12);
}

.socials a {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.31);
	border-radius: 8px;
	color: var(--term-white);
	transition: .2s;
}

.socials a:hover {
	border-color: var(--term-white);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
	transform: translateY(-2px);
	color: #fff;
}

.posts-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.post-card{
    position: relative;
    overflow: hidden;
    height: 260px;
    border: 1px solid var(--term-white-dim);
    margin:5px;
    transition: opacity .35s ease, transform .35s ease;
}

.post-card.hide{
	opacity: 0;
	transform: scale(.92);
	pointer-events: none;
}

.post-card img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:.35s;
	filter: blur(4px) brightness(27%);
-webkit-filter: blur(4px) brightness(27%);
-moz-filter: blur(4px) brightness(27%);
}

.overlay{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	opacity:0;
	transform:translateY(15px);
	transition:.3s;
	background:rgba(255, 255, 255, 0.55);
}

.post-card:hover img{
	filter:none;
	transform:scale(1.08);
}

.post-card:hover .overlay{
	opacity:1;
	transform:translateY(0);
}
.overlay h3{
	margin:12px 0;
}

.overlay .autor{
	color:var(--accent-code);
}
.overlay p{
	margin-bottom:20px;
}

.categoria{
	color:var(--term-white);
	letter-spacing:2px;
	font-size:12px;
}

.post-info{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 18px;
	opacity: 0;
	transform: translateY(15px);
	transition: .3s;
	background: rgba(20, 20, 20, 0.80);
}

.post-card:hover .post-info{
	opacity: 1;
	transform: translateY(0);
}

.post-info h3{
	margin: 10px 0;
	color: var(--term-white);
}

.post-info p{
	font-size: 13px;
	opacity: .85;
	line-height: 1.6;
}

.post-footer{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
}

.post-footer .autor{
	color: var(--accent-code);
	font-size: 13px;
}

.post-footer a{
	color: var(--term-white);
	text-decoration: none;
	border: 1px solid var(--term-white);
	padding: 5px 12px;
	font-size: 13px;
	font-family: var(--font-code);
	transition: .2s;
}

.post-footer a:hover{
	background: var(--term-white);
	color: var(--bg-color);
	box-shadow: 0 0 8px var(--term-white-glow);
	transform: translateY(-1px);
}

.section-label{
	font-family: var(--font-code);
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--term-white);
	opacity: .85;
	border-bottom: 1px dashed var(--term-white);
	padding-bottom: 8px;
	margin: 30px 0 15px 0;
}