/* ============================================================
   chula.com.br — folha de estilo principal
   Paleta extraída da imagem da marca (galo pilchado / lanceiro)
   ============================================================ */
:root{
  /* --- cores da marca (extraídas via amostragem da arte original) --- */
  --vermelho:      #A9211C;  /* vermelho farroupilha — crista, lenço, cauda */
  --vermelho-esc:  #8A1A17;
  --vermelho-vivo: #B33629;
  --ouro:          #BC8630;  /* dourado/bronze — ponteira da lança */
  --ouro-claro:    #D9A855;
  --couro:         #90582F;  /* marrom do couro — botas, cabo da lança */
  --couro-esc:     #6E4324;
  --grafite:       #4D392D;  /* bombacha grafite / terroso */
  --carvao:        #1A100C;  /* fundo escuro, contorno da arte */
  --carvao-2:      #241713;
  --creme:         #F4EDE3;  /* fundo claro, respiro */
  --creme-2:       #E8DCCC;
  --tinta:         #231A14;  /* texto sobre claro */
  --muted:         #7C6A5C;

  --radius: 14px;
  --radius-sm: 8px;
  --sombra: 0 10px 30px rgba(26,16,12,.16);
  --sombra-forte: 0 18px 48px rgba(26,16,12,.32);
  --max: 1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--creme); color:var(--tinta);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Bitter','Georgia',serif; line-height:1.2; color:var(--carvao)}
a{color:var(--vermelho); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.sec{padding:74px 0}
.sec--clara{background:var(--creme)}
.sec--areia{background:var(--creme-2)}
.sec--escura{background:var(--carvao); color:var(--creme)}
.sec--escura h2,.sec--escura h3{color:var(--creme)}

/* ---------- Cabeçalho ---------- */
.topo{
  position:sticky; top:0; z-index:60;
  background:rgba(26,16,12,.96); backdrop-filter:blur(10px);
  border-bottom:3px solid var(--ouro);
}
.topo__in{display:flex; align-items:center; gap:22px; min-height:70px}
.topo__marca{display:flex; align-items:center; gap:12px; color:var(--creme); text-decoration:none}
.topo__marca img{width:44px; height:44px; object-fit:contain}
.topo__marca b{font-family:'Bitter',serif; font-size:1.22rem; letter-spacing:.4px}
.topo__marca span{display:block; font-size:.66rem; letter-spacing:2.6px;
  text-transform:uppercase; color:var(--ouro); font-weight:600}
.topo__nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.topo__nav a{
  color:var(--creme-2); padding:9px 13px; border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:500; text-decoration:none; transition:.18s;
}
.topo__nav a:hover{background:var(--vermelho); color:#fff}
.burger{display:none; margin-left:auto; background:none; border:0; color:var(--creme); font-size:1.6rem; cursor:pointer}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% 8%, rgba(188,134,48,.30), transparent 62%),
    radial-gradient(760px 460px at 10% 90%, rgba(169,33,28,.36), transparent 60%),
    linear-gradient(160deg,#1A100C 0%,#2A1712 55%,#3A1D16 100%);
  color:var(--creme); padding:74px 0 82px;
}
.hero__grade{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.hero__selo{
  display:inline-block; font-size:.7rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--ouro-claro); border:1px solid rgba(188,134,48,.5);
  padding:7px 15px; border-radius:99px; margin-bottom:22px; font-weight:600;
}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem); color:var(--creme); margin-bottom:16px}
.hero h1 em{color:var(--ouro-claro); font-style:normal}
.hero p{font-size:1.12rem; color:#E4D6C4; max-width:60ch}
.hero__acoes{display:flex; gap:13px; flex-wrap:wrap; margin-top:30px}
.hero__arte{position:relative; text-align:center}
.hero__arte img{
  width:100%; max-width:430px; margin:0 auto; filter:drop-shadow(0 22px 44px rgba(0,0,0,.55));
  animation:flutua 7s ease-in-out infinite;
}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero__arte figcaption{font-size:.76rem; color:#B9A48D; margin-top:12px; letter-spacing:.4px}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 25px; border-radius:99px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition:.2s; text-decoration:none;
}
.btn--primario{background:var(--vermelho); color:#fff; border-color:var(--vermelho)}
.btn--primario:hover{background:var(--vermelho-vivo); border-color:var(--vermelho-vivo);
  color:#fff; text-decoration:none; transform:translateY(-2px); box-shadow:var(--sombra)}
.btn--ouro{background:var(--ouro); color:var(--carvao); border-color:var(--ouro)}
.btn--ouro:hover{background:var(--ouro-claro); border-color:var(--ouro-claro); color:var(--carvao);
  text-decoration:none; transform:translateY(-2px)}
.btn--vazio{background:transparent; color:var(--creme); border-color:rgba(244,237,227,.45)}
.btn--vazio:hover{border-color:var(--ouro); color:var(--ouro-claro); text-decoration:none}

/* ---------- Títulos de seção ---------- */
.cabeco{max-width:760px; margin-bottom:42px}
.cabeco--centro{margin-left:auto; margin-right:auto; text-align:center}
.cabeco__tag{
  font-size:.72rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--vermelho); font-weight:700;
}
.sec--escura .cabeco__tag{color:var(--ouro)}
.cabeco h2{font-size:clamp(1.6rem,3.4vw,2.35rem); margin:10px 0 12px}
.cabeco p{color:var(--muted); font-size:1.04rem}
.sec--escura .cabeco p{color:#C9B8A5}

/* ---------- Cartões de texto histórico ---------- */
.prosa{display:grid; gap:20px}
.prosa__item{
  background:#fff; border-left:5px solid var(--vermelho);
  border-radius:var(--radius); padding:26px 30px; box-shadow:var(--sombra);
}
.sec--areia .prosa__item{background:#FFFDF9}
.prosa__item h3{font-size:1.22rem; margin-bottom:10px}
.prosa__item p{color:#3D3128}
.fonte{
  margin-top:14px; font-size:.82rem; color:var(--muted);
  border-top:1px dashed var(--creme-2); padding-top:10px;
}
.fonte a{font-weight:600}
.fonte::before{content:"Fonte: "; font-weight:700; color:var(--couro)}

/* ---------- Linha do tempo ---------- */
.tempo{position:relative; margin-top:14px; padding-left:34px}
.tempo::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:3px;
  background:linear-gradient(180deg,var(--ouro),var(--vermelho),var(--couro)); border-radius:3px}
.tempo__item{position:relative; padding:0 0 34px 8px}
.tempo__item::before{
  content:""; position:absolute; left:-31px; top:7px; width:15px; height:15px; border-radius:50%;
  background:var(--creme); border:4px solid var(--vermelho); box-shadow:0 0 0 3px rgba(169,33,28,.14);
}
.tempo__ano{
  display:inline-block; font-family:'Bitter',serif; font-weight:700;
  color:var(--ouro); background:var(--carvao); padding:3px 13px;
  border-radius:99px; font-size:.88rem; margin-bottom:8px;
}
.tempo__item h3{font-size:1.12rem; margin-bottom:6px}
.tempo__item p{color:#4A3B30; font-size:.96rem}

/* ---------- Fotos de época ---------- */
.galeria{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:22px}
.foto{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.foto__moldura{
  position:relative; background:#211511; overflow:hidden;
  aspect-ratio:4/3;
}
.foto__moldura img{width:100%; height:100%; object-fit:cover; transition:.5s}
.foto:hover .foto__moldura img{transform:scale(1.05)}
.foto__sepia::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,rgba(144,88,47,.22),rgba(26,16,12,.30));
  mix-blend-mode:multiply;
}
.foto__ano{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--ouro); color:var(--carvao); font-weight:700; font-size:.74rem;
  padding:3px 11px; border-radius:99px; letter-spacing:.5px;
}
.foto__corpo{padding:18px 20px 20px; flex:1; display:flex; flex-direction:column}
.foto__corpo h3{font-size:1.02rem; margin-bottom:7px}
.foto__corpo p{font-size:.9rem; color:#54463B; flex:1}
.credito{
  margin-top:13px; padding-top:10px; border-top:1px solid var(--creme-2);
  font-size:.76rem; color:var(--muted); line-height:1.45;
}
.credito b{color:var(--couro)}
.lic{
  display:inline-block; margin-top:5px; background:var(--creme-2); color:var(--couro-esc);
  font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:.4px;
}

/* ---------- Vídeos ---------- */
.abas{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px}
.aba{
  border:1.5px solid var(--creme-2); background:#fff; color:var(--tinta);
  padding:9px 17px; border-radius:99px; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:.18s;
}
.aba:hover{border-color:var(--ouro)}
.aba[aria-selected="true"]{background:var(--vermelho); border-color:var(--vermelho); color:#fff}
.videos{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:24px}
.video{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.video__play{position:relative; aspect-ratio:16/9; background:#130C09; cursor:pointer; border:0; padding:0; width:100%}
.video__play img{width:100%; height:100%; object-fit:cover; opacity:.9; transition:.3s}
.video__play:hover img{opacity:1}
.video__bt{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,transparent 40%,rgba(19,12,9,.55));
}
.video__bt i{
  width:62px; height:62px; border-radius:50%; background:var(--vermelho);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.video__bt i::before{content:""; border-left:19px solid #fff; border-top:12px solid transparent;
  border-bottom:12px solid transparent; margin-left:5px}
.video iframe{width:100%; aspect-ratio:16/9; border:0; display:block}
.video__corpo{padding:17px 19px 19px; flex:1; display:flex; flex-direction:column}
.video__cat{
  font-size:.68rem; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--vermelho); font-weight:700; margin-bottom:7px;
}
.video__corpo h3{font-size:1rem; margin-bottom:7px}
.video__corpo p{font-size:.88rem; color:#54463B; flex:1}
.video__canal{margin-top:11px; font-size:.78rem; color:var(--muted)}
.video__canal b{color:var(--couro)}

/* ---------- Eventos ---------- */
.eventos{display:grid; gap:20px}
.evento{
  background:#fff; border-radius:var(--radius); box-shadow:var(--sombra);
  display:grid; grid-template-columns:104px 1fr auto; gap:0; overflow:hidden;
  border-left:5px solid var(--ouro);
}
.evento--destaque{border-left-color:var(--vermelho)}
.evento__data{
  background:var(--carvao); color:var(--creme); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:18px 10px; text-align:center;
}
.evento__data b{font-family:'Bitter',serif; font-size:2rem; line-height:1; color:var(--ouro-claro)}
.evento__data span{font-size:.72rem; letter-spacing:1.6px; text-transform:uppercase; color:#C9B8A5; margin-top:5px}
.evento__data em{font-size:.72rem; font-style:normal; color:#9C8A78}
.evento__corpo{padding:20px 24px}
.evento__corpo h3{font-size:1.12rem; margin-bottom:8px}
.evento__meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.chip{
  font-size:.72rem; font-weight:600; padding:3px 11px; border-radius:99px;
  background:var(--creme-2); color:var(--couro-esc);
}
.chip--local{background:rgba(169,33,28,.10); color:var(--vermelho)}
.evento__corpo p{font-size:.93rem; color:#4A3B30}
.evento__acao{display:flex; align-items:center; padding:20px 24px 20px 0}
.vazio{
  background:#FFFDF9; border:2px dashed var(--creme-2); border-radius:var(--radius);
  padding:42px 26px; text-align:center; color:var(--muted);
}
.vazio b{display:block; color:var(--carvao); font-size:1.05rem; margin-bottom:6px; font-family:'Bitter',serif}

/* ---------- Config / destaque duplo ---------- */
.duplo{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center}
.duplo h2{font-size:clamp(1.5rem,3.2vw,2.15rem); margin:10px 0 14px}
.duplo p{color:var(--muted); margin-bottom:14px}
.lista{list-style:none; display:grid; gap:11px; margin-top:18px}
.lista li{display:flex; gap:11px; align-items:flex-start; font-size:.96rem; color:#3D3128}
.lista li::before{content:"◆"; color:var(--ouro); font-size:.8rem; margin-top:5px}

/* ---------- Rodapé ---------- */
.pe{background:var(--carvao); color:#C9B8A5; padding:56px 0 26px; margin-top:0}
.pe__grade{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:38px; margin-bottom:36px}
.pe h4{color:var(--creme); font-size:1rem; margin-bottom:14px}
.pe__grade p{font-size:.9rem; line-height:1.7}
.pe ul{list-style:none; display:grid; gap:9px}
.pe a{color:#C9B8A5; font-size:.9rem}
.pe a:hover{color:var(--ouro-claro)}
.pe__fim{
  border-top:1px solid rgba(201,184,165,.2); padding-top:20px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem;
}
.pe img{width:52px; margin-bottom:12px}

@media(max-width:900px){
  .hero__grade,.duplo,.pe__grade{grid-template-columns:1fr}
  .hero__arte{order:-1}
  .topo__nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--carvao); flex-direction:column; padding:14px;
  }
  .topo__nav.aberto{display:flex}
  .burger{display:block}
  .evento{grid-template-columns:80px 1fr}
  .evento__acao{grid-column:2; padding:0 24px 20px}
}