/* 
  Terra de Micélio — Direção de arte editorial
  Paleta: verde floresta #1B2B1B, musgo #5A6E5A, terra #8B6F4A, creme #F6F1E8, branco suave #FFFCF7
  Tipografia: Cormorant Garamond (serif) + Inter (sans)
  Princípio: fotografia domina, texto respira, nada de ruído
*/

:root{
  --bg:#FFFCF7;
  --ink:#1A231A;
  --forest:#1B2B1B;
  --moss:#5E7360;
  --earth:#8B6F4A;
  --cream:#F6F1E8;
  --line:rgba(26,35,26,0.12);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter", system-ui, sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Grain sutil - sofisticação analógica */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:100;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* HEADER */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:20;
  padding:24px 32px;
  mix-blend-mode:normal;
}
.header-inner{
  display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(246,241,232,0.8);
}
.mark{font-weight:500}

/* HERO - cartaz */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  overflow:hidden;
  background:var(--forest);
}

.hero-media{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  filter:saturate(0.9) contrast(1.05);
  will-change:transform;
}
.hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,43,27,0.15) 0%, rgba(27,43,27,0.1) 35%, rgba(27,43,27,0.55) 100%);
}
.hero-vignette{
  position:absolute; inset:0;
  background:radial-gradient(80% 70% at 50% 45%, transparent 60%, rgba(0,0,0,0.35) 100%);
}

.hero-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  justify-content:space-between;
  min-height:100svh;
  padding:clamp(72px, 12vh, 120px) clamp(24px, 4vw, 48px) clamp(32px, 5vh, 48px);
}

.kicker{
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--cream); opacity:0.75; margin-bottom:24px;
}

.title{
  font-family:"Cormorant Garamond", serif;
  font-weight:300; line-height:0.88; letter-spacing:-0.03em;
  color:var(--cream);
  font-size:clamp(56px, 13vw, 168px);
}
.title .line{display:block; overflow:hidden}
.title .line-2{font-style:italic; font-weight:400; margin-left:0.08em}

.hero-bottom{
  margin-top:auto;
  display:grid; gap:20px;
  max-width:980px;
}

.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:end;
  border-top:1px solid rgba(246,241,232,0.22);
  padding-top:18px;
  gap:16px 32px;
}

.info{display:flex; flex-direction:column; gap:4px}
.label{font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(246,241,232,0.55)}
.value{font-family:"Cormorant Garamond", serif; font-size:clamp(16px, 2.2vw, 22px); color:var(--cream); letter-spacing:-0.01em}

.btn-programa{
  appearance:none; border:1px solid rgba(246,241,232,0.35);
  background:rgba(246,241,232,0.08); backdrop-filter:blur(12px);
  color:var(--cream);
  padding:14px 22px;
  font-family:"Inter", sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  cursor:pointer; display:inline-flex; align-items:center; gap:12px;
  transition:all 0.6s var(--ease-out);
}
.btn-programa:hover{background:var(--cream); color:var(--forest); border-color:var(--cream)}
.btn-icon{width:18px; height:1px; background:currentColor; position:relative; display:inline-block; transition:width 0.6s var(--ease-out)}
.btn-icon:after{content:""; position:absolute; right:0; top:50%; width:5px; height:5px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:translateY(-50%) rotate(45deg)}
.btn-programa:hover .btn-icon{width:28px}

.tagline{
  font-family:"Cormorant Garamond", serif; font-style:italic; font-size:clamp(15px, 1.6vw, 19px);
  color:rgba(246,241,232,0.7); max-width:32ch;
}

.side-note{
  position:absolute; right:12px; top:50%; z-index:3;
  writing-mode:vertical-rl; transform:translateY(-50%);
  font-size:9px; letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(246,241,232,0.35);
}

/* PROGRAMA - drawer editorial */
.programa{
  position:relative; background:var(--cream);
  max-height:0; overflow:hidden;
  opacity:0;
  transition:max-height 1.1s var(--ease-in-out), opacity 0.7s var(--ease-out);
}
.programa.is-open{max-height:1200px; opacity:1}

.programa-inner{
  max-width:1200px; margin:0 auto;
  padding:56px clamp(24px, 4vw, 48px) 64px;
}
.programa-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:28px}
.programa-title{font-family:"Cormorant Garamond", serif; font-size:clamp(26px, 3vw, 36px); font-weight:300; letter-spacing:-0.02em}
.programa-nota{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss); margin-bottom:32px}
.btn-fechar{background:none; border:none; font-size:32px; line-height:1; cursor:pointer; color:var(--forest); opacity:0.6; transition:opacity 0.3s}
.btn-fechar:hover{opacity:1}

.dias{display:grid; grid-template-columns:repeat(3,1fr); gap:40px 48px}
.dia header{margin-bottom:18px}
.dia-data{display:block; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--earth); margin-bottom:6px}
.dia h3{font-family:"Cormorant Garamond", serif; font-size:20px; font-weight:400}
.dia ul{list-style:none; display:grid; gap:14px}
.dia li{display:grid; grid-template-columns:52px 1fr; gap:12px; font-size:14px; line-height:1.5; border-top:1px solid rgba(0,0,0,0.06); padding-top:12px}
.dia li:first-child{border-top:none; padding-top:0}
.dia time{font-variant-numeric:tabular-nums; font-weight:500; color:var(--forest)}

/* PATROCINADORES - discreto */
.patrocinadores{background:var(--bg); border-top:1px solid var(--line)}
.patrocinadores-inner{max-width:1200px; margin:0 auto; padding:36px clamp(24px,4vw,48px)}
.patrocinadores-label{font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--moss); margin-bottom:20px}
.patrocinadores-grid{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:center; opacity:0.7}
.patrocinador{height:28px; transition:opacity 0.4s, transform 0.6s var(--ease-out)}
.patrocinador img{height:100%; width:auto; filter:grayscale(1)}
.patrocinador:hover{opacity:1; transform:translateY(-1px)}

/* FOOTER */
.site-footer{border-top:1px solid var(--line); padding:20px clamp(24px,4vw,48px); display:flex; justify-content:space-between; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss)}
.footer-inner{display:flex; gap:24px; width:100%; justify-content:space-between; flex-wrap:wrap}

/* ANIMAÇÕES ENTRADA */
@media (prefers-reduced-motion: no-preference){
  .kicker{animation:kickerIn 1.2s var(--ease-out) 0.3s both}
  .title .line{animation:titleIn 1.3s var(--ease-out) both}
  .title .line-2{animation-delay:0.15s}
  .info-grid{animation:fadeUp 1s var(--ease-out) 0.8s both}
  .tagline{animation:fadeUp 1s var(--ease-out) 1s both}
}
@keyframes kickerIn{from{opacity:0; transform:translateY(10px)} to{opacity:0.75; transform:none}}
@keyframes titleIn{from{transform:translateY(110%)} to{transform:none}}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* RESPONSIVE - mobile é editorial vertical */
@media (max-width:860px){
  .site-header{padding:18px 20px}
  .header-inner{flex-direction:column; gap:4px}
  .hero-content{padding-top:84px}
  .info-grid{grid-template-columns:1fr 1fr; gap:18px}
  .cta-wrap{grid-column:1 / -1; margin-top:8px}
  .btn-programa{width:100%; justify-content:space-between}
  .side-note{display:none}
  .dias{grid-template-columns:1fr; gap:36px}
  .site-footer .footer-inner{flex-direction:column; gap:8px}
}
@media (max-width:480px){
  .title{font-size:clamp(48px, 18vw, 72px)}
}