/* ===== Reset básico ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== Fonte geral ===== */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f2f2f2;
  color: #333;
  line-height: 1.6;
  padding-top: 80px; /* espaço para o menu fixo */
}

/* ===== Cabeçalho e menu ===== */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #004466;
  padding: 15px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.menu h1 {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 24px;
}

.menu ul {
  list-style: none;
  display: flex;
  gap: 15px;
}

.menu a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  transition: color 0.3s;
}

.menu a:hover {
  color: #ffcc00;
}

/* ===== Seções ===== */
section {
  max-width: 1100px;
  margin: 40px auto;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  margin-bottom: 10px;
  color: #004466;
}

/* ===== Rodapé ===== */
footer {
  text-align: center;
  padding: 20px;
  font-size: 14px;
  background-color: #004466;
  color: white;
  margin-top: 40px;
}
/* ===== Estilo Sobre Mim ===== */
.sobre-mim {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  padding: 20px;
  max-width: 1100px;
  margin: 40px auto;
}

.sobre-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.sobre-imagem img {
  max-width: 250px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.sobre-texto {
  flex: 1;
}

.sobre-texto h2 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #004466;
  margin-bottom: 10px;
}

.sobre-texto p {
  margin-bottom: 15px;
  text-align: justify;
}

/* Responsividade para celular */
@media (max-width: 768px) {
  .sobre-container {
    flex-direction: column;
    text-align: center;
  }

  .sobre-imagem img {
    max-width: 180px;
  }
}
/* ===== HERO (capa) ===== */
.hero {
  position: relative;
  min-height: 60vh;
  display: grid;
  place-items: center;
  background: linear-gradient( to bottom, rgba(0, 68, 102, 0.85), rgba(0, 68, 102, 0.85) ), 
              url('capa.jpg') center/cover no-repeat; /* troque ou remova a imagem */
  color: #fff;
  border-radius: 10px;
  margin: 40px auto;
  max-width: 1100px;
  padding: 40px 20px;
}

.hero-conteudo {
  text-align: center;
  max-width: 800px;
}

.hero h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  margin-bottom: 12px;
}

.hero p {
  font-size: 18px;
  opacity: 0.95;
  margin-bottom: 20px;
}

.hero-botoes {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.botao-secundario {
  display: inline-block;
  padding: 10px 18px;
  background: transparent;
  color: #fff;
  border: 2px solid #ffcc00;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.botao-secundario:hover {
  background: #ffcc00;
  color: #004466;
}

.hero-links {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
  font-weight: 600;
}

.hero-links a {
  color: #ffcc00;
  text-decoration: none;
}

.hero-links a:hover {
  text-decoration: underline;
}

/* Ajuste de margem das demais seções para aproximar visualmente do hero */
section:not(.hero) {
  margin-top: 24px;
}

/* Responsivo */
@media (max-width: 768px) {
  .hero {
    min-height: 50vh;
    border-radius: 8px;
  }
  .hero h2 { font-size: 28px; }
  .hero p  { font-size: 16px; }
}
/* ===== Cabeçalho escuro (mantém fixo) ===== */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #1f1f1f;        /* mais próximo do seu site antigo */
  padding: 10px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 1000;
}
.menu.colorido { 
  max-width: 1100px; 
  margin: 0 auto; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 16px;
}
.menu.colorido h1 {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
}

/* lista horizontal colorida */
.menu.colorido ul {
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.menu.colorido a {
  display: inline-block;
  padding: 8px 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  transition: transform .05s ease, filter .2s ease;
}
.menu.colorido a:active { transform: translateY(1px); }

/* cores individuais (ajuste se quiser outras) */
.menu.colorido a.home     { background:#146C94; }   /* azul */
.menu.colorido a.sobre    { background:#2E8BC0; }   /* azul claro */
.menu.colorido a.xadrez   { background:#1ABC9C; }   /* verde água */
.menu.colorido a.arte     { background:#FF7A59; }   /* coral */
.menu.colorido a.public   { background:#F4B400; }   /* amarelo */
.menu.colorido a.produtos { background:#C0392B; }   /* vermelho */
.menu.colorido a.contato  { background:#8E44AD; }   /* roxo */

/* hover: um pouco mais claro */
.menu.colorido a:hover { filter: brightness(1.08); }

/* responsivo */
@media (max-width: 768px) {
  .menu.colorido {
    flex-direction: column;
    align-items: flex-start;
  }
  .menu.colorido ul { gap: 6px; }
  .menu.colorido a { padding: 8px 12px; border-radius: 5px; }
}
/* ====== SLIDER (FADE) ====== */
.hero-slider {
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 0 10px;
  border-radius: 12px;
}

.slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  background: #111;
}

/* Contêiner com altura fixa do hero */
.slides {
  position: relative;
  width: 100%;
  height: 56vh;              /* ajuste a gosto */
}

/* Cada slide empilhado (fade) */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  overflow: hidden;          /* garante corte interno */
}

/* Slide visível */
.slide.active { opacity: 1; }

/* Imagem preenche o slide */
.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* troque por 'contain' se quiser a imagem inteira */
  display: block;
  z-index: 1;
}

/* ===== Legendas do Slideshow ===== */
.caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 20px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease;
  z-index: 2;
}
.caption h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-bottom: 4px;
}
.caption p {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* Legenda aparece no slide ativo (independe de hover) */
.slide.active .caption {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Controles e Pontinhos ===== */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 0;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s ease;
  z-index: 3;
}
.nav:hover { background: rgba(0,0,0,0.65); }
.prev { left: 12px; }
.next { right: 12px; }

.dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}
.dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.dots button.active {
  background: #ffcc00;
  transform: scale(1.2);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .slides { height: 42vh; }
  .caption h3 { font-size: 18px; }
  .caption p  { font-size: 13px; }
}

/* ===== Legendas do Slideshow ===== */
.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: rgba(0,0,0,0.55);
  color: white;
  font-family: 'Open Sans', sans-serif;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s ease;
}

.caption h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-bottom: 4px;
}

.caption p {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* Efeito: legenda aparece ao passar o mouse */
.slide {
  position: relative;
  overflow: hidden;
}

.slide:hover .caption {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: legenda sempre visível */
@media (max-width: 768px) {
  .caption {
    opacity: 1;
    transform: translateY(0);
    font-size: 14px;
  }
  .caption h3 {
    font-size: 18px;
  }
}
/* --- FADE SLIDER --- */

/* Remova/ignore o display:flex das .slides do slider antigo */
.slides {
  position: relative;
  height: 56vh;             /* mesma altura usada nas imagens */
}

/* cada slide ocupa a mesma área e fica "empilhado" */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* slide visível */
.slide.active {
  opacity: 1;
}

/* imagem preenche o slide */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* troque por 'contain' se quiser ver imagem inteira */
  display: block;
}

/* (opcional) altura menor em mobile */
@media (max-width: 768px) {
  .slides { height: 42vh; }
}
/* Mostrar legenda no slide ativo (fade) */
.slide.active .caption {
  opacity: 1;
  transform: translateY(0);
}

/* Garanta que a legenda fique acima da imagem */
.slide { position: absolute; inset: 0; }
.slide img { position: absolute; inset: 0; z-index: 1; }
.caption { z-index: 2; }

/* Se você ainda tiver isso de antes, remova/sobrescreva: */
.slides {
  position: relative;       /* ok */
  height: 56vh;             /* ok */
  /* NÃO use display:flex aqui no modo fade */
}
/* =========================
   Design pass — Xadrez & Educação
   ========================= */

/* Variáveis de cor (opcional, facilita ajustes de tema) */
:root{
  --azul:#004466;
  --azul-escuro:#00334d;
  --azul-claro:#e8f1f5;
  --destaque:#ffcc00;
  --texto:#333;
  --bg:#f2f2f2;
  --branco:#fff;
}

/* Hero interno: tipografia maior e contraste suave */
.hero.hero-interna {
  border-radius: 12px;
  margin: 28px auto 0;
  max-width: 1100px;
  padding: 56px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.hero.hero-interna .hero-conteudo{
  text-align:center;
  max-width: 760px;
  margin: 0 auto;
}
.hero.hero-interna h2{
  font-size: 36px;
  letter-spacing: .2px;
}
.hero.hero-interna p{
  font-size: 18px;
  opacity: .95;
  margin-top: 8px;
}

/* Submenu interno "sticky" logo abaixo do header */
.subnav{
  position: sticky;
  top: 80px;              /* altura do header fixo */
  z-index: 900;
  background: linear-gradient(to bottom, var(--branco), rgba(255,255,255,.92));
  backdrop-filter: blur(2px);
  border-radius: 10px;
  max-width: 1100px;
  margin: 14px auto 6px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.subnav a{
  text-decoration: none;
  font-weight: 700;
  color: var(--azul);
  background: var(--azul-claro);
  border-radius: 999px;
  padding: 8px 14px;
  transition: filter .2s ease, transform .02s ease;
}
.subnav a:active{ transform: translateY(1px); }
.subnav a:hover{ filter: brightness(0.95); }
.subnav a.is-active{
  background: var(--azul);
  color: var(--branco);
  box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset;
}

/* Headings de seção com barra decorativa */
main section h2{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
main section h2::before{
  content: "";
  width: 28px; height: 4px;
  border-radius: 4px;
  background: var(--destaque);
}

/* Espaçamento mais respirado entre seções desta página */
main section{
  scroll-margin-top: 110px;   /* evita que o título fique oculto sob o header */
  margin-top: 26px;
}

/* Lista timeline mais elegante */
.timeline{
  position: relative;
  margin: 14px 0 0 0;
  padding-left: 22px;
}
.timeline::before{
  content:"";
  position:absolute; left:8px; top:2px; bottom:2px;
  width:2px; background: rgba(0,0,0,.08);
}
.timeline li{
  margin-bottom: 8px; list-style: none; position: relative;
}
.timeline li::before{
  content:"";
  position:absolute; left:-14px; top:.55em;
  width:8px; height:8px; border-radius:50%;
  background: var(--azul);
}

/* Cards / grids reusáveis (toque de hover) */
.card-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.card{
  background: var(--branco);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.card h3{ color: var(--azul); font-family: 'Playfair Display', serif; margin-bottom: 6px; }
.card-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* Grid de projetos reaproveitando estilo dos produtos (com altura de imagem consistente) */
.grid-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.produto{
  background: var(--branco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  display: grid; grid-template-rows: auto 1fr;
  transition: transform .15s ease, box-shadow .15s ease;
}
.produto:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.produto-img img{
  width: 100%; height: 200px; object-fit: cover; display: block;
}
.produto-body{ padding: 14px 16px; }
.produto h3{ color: var(--azul); font-family: 'Playfair Display', serif; margin-bottom: 6px; }
.produto-lista{ margin: 0 0 12px 18px; }

/* Botão primário coerente (caso ainda não tenha) */
.botao-primario{
  display:inline-block; padding:10px 18px; border-radius:8px;
  background: var(--azul); color: var(--branco); text-decoration:none;
  transition: background .2s ease, transform .02s ease;
}
.botao-primario:hover{ background:#006699; }
.botao-primario:active{ transform: translateY(1px); }

/* Mobile refinamentos */
@media (max-width: 768px){
  .hero.hero-interna{ padding: 40px 16px; }
  .hero.hero-interna h2{ font-size: 28px; }
  .hero.hero-interna p{ font-size: 16px; }
}
/* ===== XADREZ & EDUCAÇÃO – HERO ===== */
.hero.hero-interna {
  border-radius: 12px;
  margin: 28px auto 0;
  max-width: 1100px;
  padding: 56px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.hero.hero-interna .hero-conteudo{ text-align:center; max-width:760px; margin:0 auto; }
.hero.hero-interna h1{ font-size:36px; letter-spacing:.2px; }
.hero.hero-interna p{ font-size:18px; opacity:.95; margin-top:8px; }

/* fundo do hero desta página (tira o inline do HTML) */
.hero-xadrez{
  background: linear-gradient(to bottom, rgba(0,68,102,.85), rgba(0,68,102,.85)),
              url('imagens/hero/xadrez.jpg') center/cover no-repeat;
}

/* ===== SUBMENU INTERNO (STICKY) ===== */
.subnav{
  position: sticky; top: 80px; z-index: 900;
  background: linear-gradient(to bottom, #fff, rgba(255,255,255,.92));
  backdrop-filter: blur(2px);
  border-radius: 10px;
  max-width: 1100px;
  margin: 14px auto 6px; padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.subnav a{
  text-decoration: none; font-weight: 700; color: #004466;
  background: #e8f1f5; border-radius: 999px; padding: 8px 14px;
  transition: filter .2s ease, transform .02s ease;
}
.subnav a:hover{ filter: brightness(0.95); }
.subnav a:active{ transform: translateY(1px); }
.subnav a.is-active{
  background: #004466; color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.06) inset;
}

/* ===== HEADINGS COM DETALHE E ÂNCORAS CORRETAS ===== */
main section{ scroll-margin-top: 110px; margin-top: 26px; }
main section h2{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
}
main section h2::before{
  content:""; width:28px; height:4px; border-radius:4px; background:#ffcc00;
}

/* ===== TIMELINE ===== */
.timeline{ position:relative; margin:14px 0 0 0; padding-left:22px; }
.timeline::before{
  content:""; position:absolute; left:8px; top:2px; bottom:2px; width:2px; background:rgba(0,0,0,.08);
}
.timeline li{ list-style:none; margin-bottom:8px; position:relative; }
.timeline li::before{
  content:""; position:absolute; left:-14px; top:.55em; width:8px; height:8px; border-radius:50%; background:#004466;
}

/* ===== CARDS / GRIDS (hover suave) ===== */
.card-list{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px;
}
.card{
  background:#fff; border-radius:12px; padding:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.10); }
.card h3{ color:#004466; font-family:'Playfair Display', serif; margin-bottom:6px; }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* projetos (reaproveita estilo de produtos) */
.grid-produtos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:18px; margin-top:12px;
}
.produto{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.07); display:grid; grid-template-rows:auto 1fr;
  transition: transform .15s ease, box-shadow .15s ease;
}
.produto:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.10); }
.produto-img img{ width:100%; height:200px; object-fit:cover; display:block; }
.produto-body{ padding:14px 16px; }
.produto h3{ color:#004466; font-family:'Playfair Display', serif; margin-bottom:6px; }
.produto-lista{ margin:0 0 12px 18px; }

/* Botão primário (se precisar padronizar) */
.botao-primario{
  display:inline-block; padding:10px 18px; border-radius:8px;
  background:#004466; color:#fff; text-decoration:none;
  transition: background .2s ease, transform .02s ease;
}
.botao-primario:hover{ background:#006699; }
.botao-primario:active{ transform: translateY(1px); }

/* Mobile */
@media (max-width:768px){
  .hero.hero-interna{ padding:40px 16px; }
  .hero.hero-interna h1{ font-size:28px; }
  .hero.hero-interna p{ font-size:16px; }
}
/* ===== Topo simples (sem bloco azul) ===== */
.page-intro{
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 28px 20px;
  text-align: center;
  color: #1e3d4c;           /* contraste em fundo claro */
}

.page-intro h1{
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 6px;
  font-family: 'Playfair Display', serif;
}

.page-intro p{
  font-size: 18px;
  color: #333;
  opacity: .95;
}

/* linha decorativa antes do h1 (opcional) */
.page-intro h1::before{
  content:"";
  display:block;
  width: 36px; height: 4px;
  margin: 0 auto 10px;
  border-radius: 4px;
  background: #ffcc00;
}

/* como removemos o hero, mantemos o submenu “colado” ao topo */
.subnav{ margin-top: 10px; }

/* mobile */
@media (max-width:768px){
  .page-intro{ padding: 22px 16px; }
  .page-intro h1{ font-size: 28px; }
  .page-intro p{ font-size: 16px; }
}
/* ===== Cards de Publicações ===== */
.pub-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.pub-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  overflow: hidden;
}

.pub-head {
  padding: 14px 16px 8px;
}
.pub-badge {
  display:inline-block; font-size:12px; font-weight:700;
  background:#e8f1f5; color:#004466; padding:4px 8px; border-radius:999px;
  margin-bottom:6px;
}
.pub-title {
  font-family: 'Playfair Display', serif;
  color:#004466; font-size:18px; margin:4px 0 6px;
}
.pub-meta {
  font-size:14px; opacity:.85; line-height:1.45;
}

.pub-actions {
  display:flex; gap:10px; flex-wrap:wrap;
  padding: 0 16px 12px;
}
.pub-actions a {
  text-decoration:none; border-radius:8px; font-weight:700;
  padding:8px 12px; display:inline-block;
}
.btn-primary { background:#004466; color:#fff; }
.btn-primary:hover { background:#006699; }
.btn-ghost { background:#e8f1f5; color:#004466; }
.btn-ghost:hover { filter:brightness(.95); }

/* details / summary como “ver mais” */
.pub-body details {
  border-top:1px solid rgba(0,0,0,.06);
}
.pub-body summary {
  cursor:pointer; list-style:none;
  padding:12px 16px; font-weight:700; color:#004466;
}
.pub-body summary::-webkit-details-marker { display:none; }
.pub-body summary::after {
  content:"Ver mais"; float:right; font-weight:700; color:#004466; opacity:.9;
}
.pub-body[open] summary::after { content:"Ver menos"; }
.pub-abstract {
  padding: 0 16px 14px;
  color:#333; line-height:1.55;
}
/* ===== Lista de faixas (Música) ===== */
.tracks-grid{
  max-width:1100px; margin:24px auto; 
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.track-card{
  background:#fff; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  overflow:hidden; display:flex; flex-direction:column;
}
.track-cover{
  width:100%;
  aspect-ratio:1 / 1;           /* mantém quadrado */
  object-fit:cover;              /* recorte elegante */
  display:block;
}
.track-body{ padding:12px 14px; }
.track-title{
  font-family:'Playfair Display', serif;
  color:#004466; font-size:16px; margin-bottom:6px;
}
.track-meta{ font-size:13px; opacity:.85; margin-bottom:8px; }

/* “Ver letra” com <details> */
.track-lyrics details{
  border-top:1px solid rgba(0,0,0,.06);
}
.track-lyrics summary{
  cursor:pointer; list-style:none;
  padding:10px 14px; font-weight:700; color:#004466;
}
.track-lyrics summary::-webkit-details-marker{ display:none; }
.track-lyrics .lyrics{
  padding:0 14px 12px; line-height:1.55;
  white-space:pre-wrap;
}
/* Fundo escuro */
.modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  overflow: auto;
}

/* Caixa central */
.modal-conteudo {
  background: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 12px;
  max-width: 600px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  font-family: "Open Sans", sans-serif;
}

/* Botão fechar */
.fechar {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.fechar:hover {
  color: red;
}
.gallery-grid{
  max-width:1100px; margin:24px auto;
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.gallery-item img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-item img:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
/* Modal (reutiliza .modal e .modal-conteudo que você já usa) */
.lightbox-content{ max-width:min(92vw, 1000px); }
.icon-projeto {
  width: 80px !important;
  height: 80px !important;
  display: block;
  margin: 0 auto; /* centraliza */
}
.timeline {
  margin: 12px 0 0 0;
  padding-left: 18px;
}
.timeline li {
  margin: 6px 0;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .2s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
}
.botao-doacao {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.05s ease;
}

.botao-doacao:active {
  transform: translateY(1px);
}

.botao-paypal {
  background: #0070ba;
  color: #fff;
}

.botao-paypal:hover {
  background: #005c99;
}

.botao-mercado {
  background: #ffe600;
  color: #333;
}

.botao-mercado:hover {
  filter: brightness(0.9);
}
/* ==== Destaque do e-book ==== */
.ebook-bloco{
  padding: clamp(24px, 5vw, 48px);
  background: #f7f7f9;          /* pode trocar para #fff se preferir */
  border-top: 1px solid #e9e9ee;
  border-bottom: 1px solid #e9e9ee;
}
.ebook-wrap{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  flex-wrap: wrap;               /* evita sobreposição */
}
.ebook-capa img{
  max-width: 280px;   /* limite fixo mesmo em telas grandes */
  width: 100%;        /* ocupa o espaço permitido */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  display: block;
}

.ebook-info{
  flex: 1 1 320px;               /* cresce mas respeita mínimo */
  min-width: 280px;
}
.ebook-titulo{
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.15;
  margin: 0 0 6px 0;
}
.ebook-subtitulo{
  font-family: "Playfair Display", serif;
  font-size: clamp(16px, 2vw, 20px);
  color: #555;
  margin: 0 0 14px 0;
}
.ebook-descricao{
  color: #333;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 16px 0;
}
.ebook-botao{
  display: inline-block;         /* garante que não sobreponha nada */
  background: #d32f2f;
  color: #fff;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(211,47,47,.35);
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
}
.ebook-botao:hover{
  background: #b02626;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(211,47,47,.45);
}

/* Responsivo: empilha no mobile e centraliza */
@media (max-width: 820px){
  .ebook-wrap{flex-direction: column; text-align: center;}
  .ebook-botao{margin: 6px auto 0;}
}
/* --- Hard-fix do bloco do e-book --- */
main #ebook .ebook-capa { 
  flex: 0 0 auto; 
  max-width: 320px;      /* largura máxima do bloco da capa */
}

main #ebook .ebook-capa img{
  width: 100% !important;
  max-width: 280px !important;   /* nunca passa disso */
  height: auto !important;
  object-fit: contain;
  display: block;
}