@charset "UTF-8";


:root{
  --bg-deep:    #000000;    /* fundo quase preto da imagem */
  --pure-white: #FFFFFF;
  --soft-white: #FAFBFB;    /* branco levemente quente */
  --muted-gray: #918F8C;    /* cinza médio (145,143,140) */
  --cool-gray:  #505A65;    /* cinza azulado (80,90,101) */
  --dark-accent:#31272B;    /* tom muito escuro, quase marrom (49,39,43) */
  --glass-tint: rgba(255,255,255,0.03);
  --panel-shadow: rgba(0,0,0,0.85);
}

/* ==== RESET ==== */
*{box-sizing:border-box;}
html,body{
  height:100%;margin:0;
  font-family: 'Courier New', monospace;
  background:var(--bg-deep);
  color:var(--soft-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  cursor: url('./imagens/cursorpontinha.png'), auto;
}
body{padding:0;}

/* ==== BACKGROUND RETRO ==== */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 100% 3px;
  mix-blend-mode: overlay;
  opacity:0.6;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.02), transparent 20%),
    radial-gradient(900px 600px at 90% 90%, rgba(145,143,140,0.015), transparent 20%);
  mix-blend-mode: screen; opacity:0.8;
}

/* ==== CONTAINER ==== */
.container{
  position:relative; z-index:1;
  max-width:980px; margin:0 auto; padding:18px;
}

/* ==== HEADER ==== */
.header-container{
  position:relative; width:100%; height:320px; overflow:hidden;
  border-radius:8px; margin-bottom:12px;
  box-shadow: 0 18px 40px var(--panel-shadow);
}
.header-bg{
  width:100%;height:100%;object-fit:cover; display:block;
  filter: saturate(0.95) contrast(0.98);
}
.header-overlay{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(300px,70%,540px); pointer-events:auto;
  mix-blend-mode:screen;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.55));
  transition: transform .6s cubic-bezier(.2,.9,.2,1), filter .24s ease;
  animation: gangorra 4s ease-in-out infinite;
}
.header-overlay:hover{
  transform:translate(-50%,-50%) scale(1.02);
  filter: drop-shadow(0 18px 60px rgba(0,0,0,0.6));
}
@keyframes gangorra {
  0%   { transform: translate(-50%, -50%) rotate(-3deg); }
  50%  { transform: translate(-50%, -50%) rotate(3deg); }
  100% { transform: translate(-50%, -50%) rotate(-3deg); }
}

/* ==== NAVBAR ==== */
nav{
  margin:0 0 14px 0; padding:8px 12px; text-align:center;
  border-radius:8px;
  background: linear-gradient(90deg, rgba(145,143,140,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.02);
}
nav a{
  cursor: url('./imagens/cursormaozinha.png'), auto;
  color:var(--pure-white); margin:0 .9rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px;
  font-size:13px; text-decoration:none; display:inline-block;
  padding:6px 10px; border-radius:6px;
}
nav a:hover{
  color:var(--bg-deep);
  background: linear-gradient(90deg, rgba(145,143,140,0.18), rgba(255,255,255,0.06));
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  transform:translateY(-2px);
}

/* ==== MARQUEE ==== */
.marquee-container{
  overflow:hidden; white-space:nowrap; position:relative;
  border-radius:8px; height:40px; display:flex; align-items:center;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,0.02);
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(145,143,140,0.02));
}
.marquee{
  display:inline-block; padding-left:100%; font-weight:800;
  color: var(--muted-gray);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4),
               0 6px 18px rgba(0,0,0,0.6);
  animation: scroll-left 18s steps(100) infinite;
  font-size:13px; letter-spacing:1px;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}

/* ==== POSTS ==== */
.post{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--soft-white);
  padding:1.4rem; border-radius:10px;
  border:1px solid rgba(145,143,140,0.04);
  margin-bottom:1.8rem; font-family: "Kalam", cursive;
  text-align: justify;
  width:100%; display:block;
  backdrop-filter: blur(6px) saturate(105%);
  transition: transform .28s cubic-bezier(.2,.9,.2,1),
              box-shadow .28s ease, border-color .28s ease;
}
.post:hover{
  transform: translateY(-6px);
  box-shadow: 0 36px 80px rgba(0,0,0,0.6);
  border-color: rgba(145,143,140,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
}
.post time{
  display:block; font-size:.9rem;
  color:var(--muted-gray);
  margin-bottom:.5rem; font-weight:700; letter-spacing:0.6px;
}

/* ==== POST DESTAQUE ==== */
.post.destaque{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(145,143,140,0.01));
  color: var(--soft-white);
  border: 1px solid rgba(255,255,255,0.02);
  text-align:center;
  font-style:italic; padding:1.6rem;
  margin-bottom:2rem; border-radius:10px;
  backdrop-filter: blur(6px) saturate(105%);
  box-shadow: inset 0 -4px 14px rgba(0,0,0,0.12);
}

/* ==== POST COM IMAGEM ==== */
.post-com-imagem .post-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}
.post-com-imagem .post-img-container {
  flex-shrink: 0;
}
.post-com-imagem .post-img-container img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.55);
  cursor: pointer;
  transition: transform .28s ease, filter .28s ease;
}
.post-com-imagem .post-text {
  flex: 1;
}

/* ==== LEIA MAIS (CORRIGIDO) ==== */
.post .texto-reduzido {
  max-height: 120px;
  overflow: hidden;
  position: relative;
  transition: max-height .4s ease;
}
.post .texto-reduzido::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-deep));
}
.post .texto-expandido {
  max-height: none !important;
  overflow: visible !important;
}
.post .texto-expandido::after {
  display: none !important;
}
.leia-mais-btn {
  display: inline-block;
  margin-top: 10px;
  color: var(--muted-gray);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.leia-mais-btn:hover {
  color: var(--soft-white);
}

/* ==== BACK BUTTON ==== */
.back-button{text-align:center;margin:2rem 0;}
.back-button a{
  text-decoration:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(145,143,140,0.02));
  color: var(--soft-white);
  font-size:0.95rem;
  padding:0.5rem 0.9rem;
  border:1px solid rgba(255,255,255,0.02);
  border-radius:6px; display:inline-block;
  transition: transform .18s ease, box-shadow .18s ease, filter .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.back-button a:hover{
  transform:translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  filter:brightness(1.02);
  color: var(--pure-white);
}

/* ==== FOOTER ==== */
footer{
  text-align:center;
  font-size:.9rem;
  color:var(--muted-gray);
  padding:2rem;
  margin-top:3rem;
  opacity:.95;
}

/* ==== SCROLLBAR ==== */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{
  background: linear-gradient(180deg, rgba(16,16,16,0.6), rgba(10,10,10,0.5));
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--muted-gray), var(--cool-gray));
  border-radius:6px;
  border:2px solid rgba(10,10,10,0.6);
}
::-webkit-scrollbar-thumb:hover{
  filter:brightness(1.05);
}

/* ==== MODAL ==== */
.modal{
  display:none; position:fixed; z-index:9999;
  left:0; top:0; width:100%; height:100%; overflow:auto;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,0.95);
}
.modal.show{ display:flex; }
.modal-content{
  margin:auto; display:block;
  max-width:92%; max-height:84vh;
  border-radius:8px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.9);
  border:3px solid rgba(145,143,140,0.06);
}
.modal-close{
  position:absolute; top:8px; right:24px;
  color:var(--pure-white); font-size:36px;
  font-weight:700; cursor:pointer;
}

/* ==== RESPONSIVO ==== */
@media (max-width:720px){
  .container{ padding:12px; }
  .header-container{ height:220px; }
  .post-com-imagem .post-wrapper{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .post-com-imagem .post-img-container img{
    width: 100%;
    max-width: 300px;
    margin-bottom: 10px;
  }
  nav a{ padding:6px 8px; font-size:12px; }
  .marquee{ animation-duration:22s; font-size:12px; color:var(--muted-gray); }
}

/* POSTS COM IMAGEM — CSS CORRIGIDO */
.post-com-imagem .post-wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
}

.post-com-imagem .post-img-container {
  flex-shrink: 0;
}

.post-com-imagem .post-img-container img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.55);
  cursor: pointer;
  transition: transform .28s ease, filter .28s ease;
}

.post-com-imagem .post-img-container img:hover {
  transform: scale(1.06);
  filter: brightness(1.03) saturate(1.02);
}

.post-com-imagem .post-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: justify;
}

.post-com-imagem time {
  display: block;
  font-size: .9rem;
  color: var(--muted-gray);
  margin-bottom: .5rem;
  font-weight: 700;
  letter-spacing: .6px;
}

.post-com-imagem h4 {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.post-com-imagem .leia-mais-btn {
  align-self: flex-start;
  margin-top: 10px;
  color: var(--muted-gray);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  text-decoration: underline;
}

.post-com-imagem .leia-mais-btn:hover {
  color: var(--soft-white);
}

/* Samsung Galaxy S10e — 360px */
@media screen and (max-width: 380px) {

  .post .texto-reduzido {
    max-height: 100px !important;
  }

  .post .texto-expandido {
    max-height: none !important;
    overflow: visible !important;
  }

  .post .texto-reduzido::after {
    height: 50px !important;
  }

  .conteudo-post {
    overflow: hidden !important;
  }

  .post {
    padding-bottom: 20px !important;
  }
}


/* CURSOR ESPECIAL APENAS NO "LEIA MAIS" */
.leia-mais-btn {
  cursor: url('./imagens/cursormaozinha.png'), pointer;
}

.leia-mais-btn:hover {
  cursor: url('./imagens/cursormaozinha.png'), pointer;
}


/* --- Estilo básico do modal de imagem --- */
.modal{
  display: none;               /* escondido por padrão */
  position: fixed;
  inset: 0;                    /* top:0; right:0; bottom:0; left:0 */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.75);
  z-index: 2000;
  padding: 20px;
}

.modal.show{
  display: flex;               /* mostra como flex quando tem .show */
}

.modal-content{
  max-width: 96%;
  max-height: 92%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  border-radius: 6px;
  object-fit: contain;
  display: block;
}

.modal-close{
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 28px;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2100;
  line-height: 1;
  padding: 4px 8px;
}

/* pequeno ajuste para toque */
.modal-close:focus{ outline: 3px solid rgba(255,255,255,0.15); border-radius: 4px; }


.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  font-family: monospace;
}