/* ============================================================================
   STYLE.CSS — aparência do "silken diary"
   ----------------------------------------------------------------------------
   Este arquivo cuida SÓ da aparência (cores, fontes, espaçamentos, animações).
   Ele é organizado em blocos, na ordem em que as coisas aparecem na tela:

   1. PALETA E BASE            5. CONTEÚDO PRINCIPAL (cards, listas, gadgets)
   2. CABEÇALHO                6. WIDGETS (gif, câmera, mp3 player, blinkies)
   3. BARRA LATERAL / MENU     7. PET (guaxinim)
   4. CALENDÁRIO                8. EFEITOS (brilho caindo) e RODAPÉ

   Toda nova página que você criar no script.js vai herdar automaticamente
   este estilo, desde que use as mesmas classes já existentes aqui
   (.caixa-texto, .card, .lista-fofa, .gadget, etc.) — veja o TUTORIAL.md
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. PALETA DE CORES E BASE
   Quer mudar a cor geral do site? Mude só as variáveis aqui embaixo —
   todo o resto do arquivo usa essas variáveis, então tudo muda junto.
---------------------------------------------------------------------------- */
:root{
  --fundo-claro: #faf3f5;
  --fundo-medio: #f1e2e8;
  --branco: #fdfaf8;
  --rosa-claro: #f6dbe6;
  --rosa-medio: #dfa7c1;
  --rosa-escuro: #b97e9c;
  --prata: #d6d0da;
  --cinza-medio: #948d9a;
  --cinza-escuro: #4d4756;
  --preto-suave: #2f2a35;
  --sombra-suave: 0 3px 16px rgba(77,71,86,0.10);
  --sombra-fraca: 0 1px 6px rgba(77,71,86,0.08);
}

*{ box-sizing: border-box; }

/* Cursor em formato de coraçãozinho (desenhado em vetor, sem emoji) */
html, body{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='20'><path d='M11 18 C 2 11, 0 6, 4 3 C 7 1, 10 3, 11 6 C 12 3, 15 1, 18 3 C 22 6, 20 11, 11 18 Z' fill='%23dfa7c1' stroke='%232f2a35' stroke-width='1'/></svg>") 11 10, auto;
}
a, button, .clicavel{
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='20'><path d='M11 18 C 2 11, 0 6, 4 3 C 7 1, 10 3, 11 6 C 12 3, 15 1, 18 3 C 22 6, 20 11, 11 18 Z' fill='%23b97e9c' stroke='%232f2a35' stroke-width='1'/></svg>") 11 10, pointer;
}

body{
  margin:0;
  min-height:100vh;
  font-family:'Quicksand', sans-serif;
  color: var(--cinza-escuro);
  background: linear-gradient(180deg, var(--fundo-claro), var(--fundo-medio));
  overflow-x:hidden;
  position:relative;
}

/* Textura de grão sutil (clima de foto antiga) por cima de tudo */
.textura-grao{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1,h2,h3,.titulo-serifado{
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  color: var(--rosa-escuro);
  letter-spacing: 0.5px;
}
.mono{ font-family:'Space Mono', monospace; }

.pagina{
  position: relative;
  z-index: 5;
  display:flex;
  max-width: 1100px;
  margin: 26px auto;
  gap: 22px;
  padding: 0 16px;
  align-items:flex-start;
}

/* ----------------------------------------------------------------------------
   2. CABEÇALHO
---------------------------------------------------------------------------- */
.cabecalho{
  text-align:center;
  padding: 26px 10px 4px;
  position:relative;
  z-index:5;
}
.assinatura{
  font-family:'Meddon', cursive;
  font-size: 2.6rem;
  color: var(--rosa-escuro);
  margin:0;
  line-height:1;
}
.cabecalho p{
  color: var(--cinza-medio);
  font-size: 0.78rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family:'Space Mono', monospace;
  margin-top: 8px;
}
.faixa-perolas{
  height: 10px;
  max-width: 480px;
  margin: 14px auto 0;
  background-image: radial-gradient(circle, var(--prata) 32%, transparent 33%);
  background-size: 16px 16px;
  background-position: center;
  opacity: 0.8;
}

/* ----------------------------------------------------------------------------
   3. BARRA LATERAL / MENU DE NAVEGAÇÃO
---------------------------------------------------------------------------- */
.sidebar{
  flex: 0 0 230px;
  background: var(--branco);
  border: 1px solid var(--prata);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--sombra-fraca);
  position: sticky;
  top: 20px;
}
.avatar-perfil{
  width:64px;height:64px;border-radius:50%;
  border:1px solid var(--rosa-medio);
  overflow:hidden;
  margin:0 auto 14px;
  background:var(--fundo-claro);
  display:flex;align-items:center;justify-content:center;
}
.avatar-perfil img{ width:100%;height:100%;object-fit:cover; }
.sidebar h2{
  font-size: 1.05rem;
  text-align:center;
  margin-top:0;
  margin-bottom: 14px;
}

/* Link único no menu (sem submenu) — usado em "Sobre o blog", "Posts", etc. */
.nav-link-unico{
  display:block;
  text-align:left;
  text-decoration:none;
  background: var(--rosa-claro);
  border: 1px solid var(--rosa-medio);
  color: var(--cinza-escuro);
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  font-size: 0.92rem;
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all .2s ease;
}
.nav-link-unico:hover, .nav-link-unico.link-ativo{
  background: var(--rosa-medio);
  color: var(--branco);
}

/* Link com submenu (sanfona) — usado em "Sobre mim" e "Músicas" */
.nav-grupo{ margin-bottom: 10px; }
.nav-titulo{
  width:100%;
  text-align:left;
  background: var(--fundo-claro);
  border: 1px solid var(--prata);
  color: var(--cinza-escuro);
  font-family:'Quicksand', sans-serif;
  font-weight:600;
  font-size: 0.92rem;
  padding: 9px 12px;
  border-radius: 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition: all .2s ease;
}
.nav-titulo:hover, .nav-titulo.ativo{
  background: var(--rosa-claro);
  border-color: var(--rosa-medio);
}
.nav-titulo .seta{ font-family:'Space Mono', monospace; color: var(--rosa-medio); }
.nav-sub{
  list-style:none; margin:0; padding: 4px 0 4px 8px;
  max-height:0; overflow:hidden; transition: max-height .35s ease;
  border-left: 1px dashed var(--prata); margin-left: 6px;
}
.nav-sub.aberto{ max-height: 400px; }
.nav-sub li a{
  display:block; padding: 6px 10px; color: var(--cinza-medio);
  text-decoration:none; font-size: 0.86rem; border-left: 2px solid transparent;
  transition: all .2s ease;
}
.nav-sub li a:hover, .nav-sub li a.link-ativo{
  color: var(--rosa-escuro); border-left: 2px solid var(--rosa-medio);
  padding-left: 14px; background: var(--fundo-claro);
}

/* ----------------------------------------------------------------------------
   4. CALENDÁRIO FOFO (fim da barra lateral)
---------------------------------------------------------------------------- */
.calendario-fofo{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--prata); }
.calendario-fofo h3{ font-size:.85rem; text-align:center; margin:0 0 8px; }
.calendario-grade{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; font-family:'Space Mono',monospace; font-size:.62rem; text-align:center; }
.calendario-grade span.dia-semana{ color:var(--rosa-medio); font-weight:700; }
.calendario-grade span.dia{ padding:3px 0; color:var(--cinza-medio); border-radius:3px; }
.calendario-grade span.hoje{ background:var(--rosa-medio); color:var(--branco); font-weight:700; }

/* ----------------------------------------------------------------------------
   5. CONTEÚDO PRINCIPAL — estilos herdados por QUALQUER página nova
---------------------------------------------------------------------------- */
.conteudo-principal{
  flex:1;
  background: var(--branco);
  border: 1px solid var(--prata);
  border-radius: 10px;
  padding: 28px 32px;
  min-height: 480px;
  box-shadow: var(--sombra-suave);
  transition: opacity .15s ease;
}
.conteudo-principal h2{ font-size: 1.6rem; border-bottom: 1px dashed var(--rosa-medio); padding-bottom: 10px; }
.conteudo-principal p{ line-height:1.75; color: var(--cinza-escuro); font-size: 0.96rem; }

/* Caixinha de texto simples — use em qualquer página nova para blocos de texto */
.caixa-texto{
  background: var(--fundo-claro);
  border: 1px dashed var(--prata);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
}

/* Placeholder de imagem — aparece sozinho quando "imagem" está null/vazio no script.js */
.img-placeholder{
  width: 100%; min-height: 140px;
  border: 1px dashed var(--rosa-medio); border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  color: var(--cinza-medio); font-family:'Space Mono', monospace; font-size: 0.72rem;
  text-align:center; padding: 10px;
  background: linear-gradient(160deg, #efe8ec, #e4dbe1);
}

.galeria{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 14px; margin-top: 10px; }

/* Cartões — use em qualquer página nova que precise de uma grade de itens
   (personagens, artistas, produtos, o que for) */
.grade-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 18px; }
.card{
  background: var(--fundo-claro); border: 1px solid var(--prata); border-radius: 10px; padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--sombra-suave); border-color: var(--rosa-medio); }
.card img, .card .img-placeholder{ width:100%; height: 150px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.card h3{ margin: 6px 0 4px; font-size: 1.1rem; }
.card .origem{ font-family:'Space Mono', monospace; font-size: 0.7rem; color: var(--rosa-escuro); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.card p{ font-size: 0.86rem; color: var(--cinza-medio); }
.card button.tocar-card{
  margin-top:6px; background:var(--branco); border:1px solid var(--rosa-medio); color:var(--rosa-escuro);
  border-radius:6px; padding:5px 10px; font-family:'Space Mono',monospace; font-size:.7rem;
}

/* Listas simples — use em qualquer página nova de lista (gostos, regras, etc.) */
.lista-fofa{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.lista-fofa li{
  background: var(--fundo-claro); border-left: 2px solid var(--rosa-medio);
  padding: 9px 14px 9px 30px; border-radius: 6px; font-size: 0.92rem; position:relative;
}
.lista-fofa li::before{
  content:""; position:absolute; left:12px; top:50%; width:7px; height:7px;
  border-radius:50%; background:var(--rosa-escuro); box-shadow:6px 2px 0 0 var(--rosa-escuro);
  transform:translateY(-50%);
}

/* Gadgets — blocos livres que você pode adicionar em QUALQUER página
   (veja gadgetsPorPagina no script.js) */
.gadget{ margin-top:18px; padding:14px; border:1px dashed var(--prata); border-radius:8px; background:var(--fundo-claro); }

/* Posts */
.post-card{ border:1px solid var(--prata); border-radius:10px; padding:16px; margin-bottom:14px; background:var(--fundo-claro); }
.post-card .post-data{ font-family:'Space Mono',monospace; font-size:.7rem; color:var(--rosa-escuro); margin-bottom:4px; }
.post-card h3{ margin:0 0 6px; }

/* ----------------------------------------------------------------------------
   6. WIDGETS ESPECIAIS (gif grande, câmera, mp3 player, blinkies)
---------------------------------------------------------------------------- */

/* Caixa grande de GIF — página "Sobre o blog", mas pode ser usada em qualquer lugar */
.caixa-gif-grande{
  width:100%; min-height:220px; border:1px dashed var(--rosa-medio); border-radius:10px;
  overflow:hidden; background: linear-gradient(160deg,#efe8ec,#e4dbe1);
  display:flex; align-items:center; justify-content:center; margin:14px 0;
}
.caixa-gif-grande img{ width:100%; height:100%; object-fit:cover; }

/* Câmera digital — página "Fotos" */
.camera-widget{
  max-width:360px; margin:0 auto; background: linear-gradient(160deg,#f3d7e3,#e7b7cd);
  border-radius:20px; padding:18px; box-shadow: var(--sombra-suave); border:1px solid var(--rosa-medio);
  display:flex; gap:14px; align-items:center;
}
.camera-tela{
  flex:1; aspect-ratio:4/3; background:#1e1c22; border-radius:8px; border:3px solid var(--preto-suave);
  overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative;
}
.camera-tela img{ width:100%; height:100%; object-fit:cover; }
.camera-tela .aviso{ color:var(--prata); font-family:'Space Mono',monospace; font-size:.7rem; text-align:center; padding:8px; }
.camera-botao-lado{
  width:42px; height:42px; border-radius:50%; background:var(--branco); border:1px solid var(--preto-suave);
  display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:1rem;
  color:var(--cinza-escuro); flex-shrink:0;
}
.camera-indicadores{ text-align:center; margin-top:10px; font-family:'Space Mono',monospace; font-size:.72rem; color:var(--cinza-medio); }

/* MP3 player — páginas de música */
.mp3-player{
  max-width:340px; margin:0 auto 22px; background: linear-gradient(160deg,#f6dbe6,#e8b8cf);
  border-radius:22px; padding:16px; border:1px solid var(--rosa-medio); box-shadow: var(--sombra-suave);
}
.mp3-tela{ background:var(--branco); border:2px solid var(--preto-suave); border-radius:6px; padding:14px; text-align:center; margin-bottom:14px; }
.mp3-tela .faixa-titulo{ font-weight:600; color:var(--cinza-escuro); font-size:.95rem; }
.mp3-tela .faixa-artista{ font-family:'Space Mono',monospace; font-size:.72rem; color:var(--cinza-medio); margin-top:4px; }
.mp3-controles{ display:flex; justify-content:center; gap:16px; align-items:center; }
.mp3-controles button{
  background:var(--branco); border:1px solid var(--preto-suave); border-radius:50%; width:38px; height:38px;
  font-family:'Space Mono',monospace;
}
.mp3-controles button.tocar{ width:48px; height:48px; font-size:1.1rem; }

/* Blinkies — página "Blinkies" */
.blinkie-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.blinkie-item{
  width:88px; height:31px; border:1px solid var(--prata); background:var(--fundo-claro);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:'Space Mono',monospace; font-size:.5rem; color:var(--cinza-medio); text-align:center; padding:2px;
}
.blinkie-item img{ width:100%; height:100%; object-fit:cover; }

/* ----------------------------------------------------------------------------
   7. PET (guaxinim) — avatar fixo no canto inferior direito
---------------------------------------------------------------------------- */
.pet-container{ position: fixed; right: 22px; bottom: 18px; z-index: 50; display:flex; flex-direction:column; align-items:center; }

/* Laçinho decorativo em CSS puro, sobre o pet */
.laco{ width: 28px; height: 14px; position: relative; margin-bottom: -6px; z-index: 2; }
.laco::before, .laco::after{ content:""; position:absolute; top:0; width:13px; height:13px; background: var(--rosa-medio); border: 1px solid var(--preto-suave); }
.laco::before{ left:0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.laco::after{ right:0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.laco .no{ position:absolute; left:50%; top:50%; width:7px; height:7px; background: var(--rosa-escuro); border: 1px solid var(--preto-suave); transform: translate(-50%,-50%) rotate(45deg); }

.pet{
  width: 76px; height: 76px; border-radius: 50%; background: var(--branco); border: 1px solid var(--rosa-medio);
  overflow: hidden; box-shadow: var(--sombra-fraca); animation: respirar 3.4s ease-in-out infinite; padding: 10px;
}
#pet-imagem{ width:100%; height:100%; }
@keyframes respirar{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05); } }

/* Balão de fala flutuante, usado quando o pet é clicado/acariciado */
.balao-flutuante{
  position:fixed; z-index:61; background:var(--branco); border:1px solid var(--rosa-medio); border-radius:12px;
  padding:8px 12px; font-size:.8rem; color:var(--cinza-escuro); max-width:180px; box-shadow:var(--sombra-fraca);
  opacity:0; transform:translateY(8px); transition:all .25s ease; pointer-events:none;
}
.balao-flutuante.visivel{ opacity:1; transform:translateY(0); }

/* Coraçõezinhos de brilho ao "acariciar" o guaxinim */
.particula-coracao{ position:fixed; z-index:60; pointer-events:none; width:12px; height:12px; animation: subir-coracao 1.1s ease-out forwards; }
.particula-coracao::before, .particula-coracao::after{ content:""; position:absolute; width:6px; height:9px; background:var(--rosa-medio); border-radius:6px 6px 0 0; top:0; }
.particula-coracao::before{ left:0; transform:rotate(-45deg); transform-origin:bottom right; }
.particula-coracao::after{ left:6px; transform:rotate(45deg); transform-origin:bottom left; }
@keyframes subir-coracao{ 0%{ opacity:1; transform: translateY(0) scale(0.8); } 100%{ opacity:0; transform: translateY(-50px) scale(1.15); } }

/* ----------------------------------------------------------------------------
   8. EFEITOS AMBIENTE E RODAPÉ
---------------------------------------------------------------------------- */
.brilho{
  position: fixed;
  top: -5%;
  z-index: 3;
  pointer-events: none;
  font-family: 'Space Mono', monospace;
  color: var(--rosa-medio);
  text-shadow: 0 0 4px rgba(223,167,193,0.5);
  animation: cair linear forwards;
}
@keyframes cair{ to{ transform: translateY(110vh) rotate(200deg); opacity: 0; } }

.rodape{
  text-align:center; padding: 34px 10px 46px; color: var(--cinza-medio); font-family: 'Space Mono', monospace;
  font-size: 0.72rem; letter-spacing: 1px; position:relative; z-index:5;
}

/* Layout responsivo para telas menores — todas as páginas herdam isso também */
@media (max-width: 760px){
  .pagina{ flex-direction:column; }
  .sidebar{ position:static; width:100%; }
}