/* ===== TOKENS ===== */
:root{
  --max-w-desktop: 1120px;
  --max-w-tablet: 664px;
  --pad-mobile: 16px;

  --space-section: 96px;

  --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-50:#eff6ff;
  --emerald-600:#059669; --emerald-500:#10b981; --emerald-50:#ecfdf5;
  --purple-600:#7c3aed; --purple-500:#8b5cf6;
  --indigo-600:#4f46e5; --indigo-500:#6366f1;

  --slate-900:#F9FAFC; --slate-700:#F9FAFC; --slate-600:#F9FAFC; --slate-500:#F9FAFC; --txt-preto:#292d36;
  --surface:#ffffff; --surface-50:#f8fafc; --border:#e2e8f0;

  --green-cta:#22c55e; --green-cta-600:#16a34a;

  --radius:16px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

:root{
  --brand:#ec6726; --bg:#eaeaeb; --text:#292d36; --muted:#bdbec1;
  --card:#ffffff; --card-stroke:#e5e7eb; --shadow:0 8px 24px rgba(2,6,23,.06);
  --radius:14px; --footer-bg:#292d36; --footer-text:#F9FAFC; --footer-muted:#bdbec1;
}

/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{height:100%; font-family: 'Filson Pro', sans-serif;}
body.page{
  margin:0; font-family: 'Filson Pro', sans-serif;
  color: var(--slate-900); background: linear-gradient(135deg, #f8fafc, #eef2ff);
  line-height:1.6;
}
.container{ margin-inline:auto; padding-inline:var(--pad-mobile); max-width:var(--max-w-desktop); padding:80px 10px 100px 10px }
@media (min-width:740px){ .container{ max-width: var(--max-w-tablet) } }
@media (min-width:1120px){ .container{ max-width: var(--max-w-desktop) } }


/* ÍCONES */
.icon-img{ display:inline-block; vertical-align:middle }
.icon-16{ width:16px; height:16px }
.icon-20{ width:20px; height:20px }
.icon-24{ width:24px; height:24px }
.icon-48{ width:48px; height:48px }

/* Ícone via máscara — pinta com currentColor */
.icon-mask{
  display:inline-block; vertical-align:middle;
  background-color: #fff;
  mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  mask-position:center; -webkit-mask-position:center;
  mask-size:contain; -webkit-mask-size:contain;
}
.icon-mask2{
  display:inline-block; vertical-align:middle;
  background-color: #292d36;
  mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
  mask-position:center; -webkit-mask-position:center;
  mask-size:contain; -webkit-mask-size:contain;
}


/* Topbar */
.topbar{background:#fff}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding:25px 0}
.nav a{color:var(--brand);text-decoration:none;margin-left:20px;opacity:.95;font-size:12px}
.nav a:hover{opacity:1;font-weight:600}
.nav .active{font-weight:600}
.hamburger{display:none;background:transparent;border:0;color:var(--brand);font-size:22px;cursor:pointer}
.logo img{height:10px;width:auto}

.btn-menu{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:600}
.btn-menu:hover {display:inline-block;opacity:1;color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:600;}

@media (max-width:860px){
  .nav{display:none}
  .hamburger{display:inline-block}
  .nav.open{display:block;position:absolute;right:4%;top:56px;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow);border:1px solid var(--card-stroke)}
  .nav.open a{display:block;margin:10px 0;color:var(--brand)}
}

/* ===== HERO ===== */
.hero{ background-color:#292d36; position:relative; overflow:hidden; padding: 100px 0 0 0}
.hero-decor{ position:absolute; filter: blur(48px); border-radius:999px; pointer-events:none; }
.hero-decor--a{ top:60px; left:20px; width:280px; height:280px; background: #f9d0bc }
.hero-decor--b{ bottom:60px; right:20px; width:360px; height:360px; background: #823915 }
.hero-inner{ text-align:center }
.eyebrow{
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:999px; font-weight:600; margin-bottom:18px;
  color:#ec6726; background: linear-gradient(90deg, #f9d0bc, #fdf0e9);
}
.hero-title{ width:100%; height:100px; margin:5px 0 20px 0 }
.hero-subtitle{ font-size: clamp(18px, 3.2vw, 24px); color: var(--slate-600); margin: 10px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center; margin: 10px 0 24px;
  border-radius:12px; padding:14px 22px; text-decoration:none; font-weight:700; transition: .2s ease; box-shadow: var(--shadow);
}
.btn-primary{ color:#fff; background: #ec6726 }
.btn-primary:hover{ transform: translateY(-1px); filter: brightness(.98) }

/* ===== JOURNEY ===== */
.journey{ background-color:#292d36;}
.journey-copy{ max-width: 760px; margin-inline: auto; text-align:center; margin-bottom: 28px}
.journey-copy h2{ color:var(--bg); font-size: clamp(28px, 4vw, 44px); margin:0 0 50px 0 }
.journey-copy p{ color: var(--bg); font-size: clamp(16px, 2.4vw, 20px) }

.pilares-grid{ display:grid; grid-template-columns: auto auto; gap:16px; margin-top: 50px }
@media (min-width: 860px){ .pilares-grid{ grid-template-columns: auto auto} }
.pilar-card{
  background: var(--bg); color:var(--text); border:1px solid var(--border); border-radius: 20px;
  padding:18px; text-align:center; box-shadow: var(--shadow); transition:.2s ease;
}
.pilar-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(2,6,23,.10) }
.pilar-icon{
  width:64px; height:64px; margin: 0 auto 10px; border-radius: 16px;
  display:grid; place-items:center; background: #292d36;
}
.pilar-img{ width:30px; height:30px }

/* ===== PROGRAMAÇÃO ===== */
.programacao{ padding-block: var(--text); margin:0 0 100px 0}
.section-head{ color:var(--brand) ;text-align:center; margin:80px 10px 30px 10px }
.section-head h2{ font-size: clamp(28px, 4vw, 40px); margin:0 0 6px }
.section-head p{ color: var(--text); font-size: 18px; margin:0 }

.program-list{ display:grid; gap: 36px }

/* Card da programação (flex, alternado) */
.prog-item{ display:flex; flex-direction: column; gap:24px; align-items:center }
@media (min-width: 980px){ .prog-item{ flex-direction: row } .prog-item.reverse{ flex-direction: row-reverse } }

.prog-badge{ text-align:center; }
.prog-icon{
  width:84px; height:84px; border-radius:999px; display:grid; place-items:center; color:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}
.grad-blue{ background: linear-gradient(90deg, var(--blue-600), var(--blue-700)) }
.grad-emerald{ background: linear-gradient(90deg, #f2996e, #ec6726) }
.grad-purple{ background: linear-gradient(90deg, #ec6726, #a8491b) }
.grad-indigo{ background: linear-gradient(90deg, #7b0ceb, #a75cf2) }

.badge-week{
  margin-top:10px; display:inline-block; padding:6px 10px; font-weight:600; border-radius:999px;
  color:#0f172a; background:#f1f5f9; border:1px solid #e2e8f0;
}

.prog-card{
  flex:1; width:100%;
  background: rgba(255,255,255,.9); color:var(--text); backdrop-filter: blur(8px);border-radius: 18px; box-shadow: var(--shadow);
}
.prog-card .card-head{ padding:20px 20px 8px 20px }
.prog-card h3{ margin:0; font-size: clamp(22px, 3vw, 30px) }
.prog-card .event-chip{
  display:inline-block;
  margin: 0 0 8px 0;   /* antes tinha margin-top */
  padding:8px 12px; color:#fff; border-radius:10px; font-weight:700;
}
.prog-card .card-body{ padding:0 20px 20px 20px }
.prog-card .card-body .prog-desc{
  margin-top: 10px;
  color: var(--txt-preto);
}
.prog-card p{ color: var(--txt-preto) }
.prog-card .event-meta{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  margin: 10px 0 0 0;   /* 10px abaixo do subtítulo */
  padding: 0;           /* remove recuo padrão da UL */
  list-style: none;     /* remove marcadores */
  font-size: calc(1rem + 1px); /* -2px em relação ao que estava (+3 -> +1) */
  line-height: 1.4;
}
.prog-card .event-meta .meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.prog-card .meta{ display:flex; align-items:center; gap:8px }
.prog-card .event-subtitle{
  margin: 5px 0 0 0;   /* 5px abaixo do título */
  font-weight: 700;
  color: var(--txt-preto);
}

.prog-card .card-head h3,
.prog-card .card-head .event-subtitle,
.prog-card .card-head .event-meta { margin-left: 0; }

.prog-callout{
  margin-top:14px; padding:12px; border-radius:12px; border-left:4px solid #7b0ceb;
  background: linear-gradient(90deg, #d6b4f9, #f2e7fd);
  color: #5709a7; font-weight:600;
}
.prog-observ{
  margin-top:10px; padding:12px; border-radius:12px; border-left:4px solid #f59e0b; background:#fffbeb; color:#92400e; font-weight:600;
}

.prog-cta{ padding: 12px 20px 20px 20px }
.btn-cta{
  display:inline-flex; align-items:center; font-weight:700; color:#fff; text-decoration:none;
  padding:12px 16px; border-radius:12px; box-shadow: var(--shadow); transition:.2s ease; border: none; -webkit-appearance: none; appearance: none; outline: none;
}

}
.btn-cta:focus-visible{
  outline: 3px solid rgba(236,103,38,.35); /* foco acessível opcional */
  outline-offset: 3px;
}
.btn-cta:hover{ transform: translateY(-1px); filter: brightness(.98) }

/* ===== MENSAGEM FINAL ===== */
.closing{
  background: linear-gradient(90deg, #ec6726, #000000);
  padding-block: var(--space-section);
}
.closing-card{
  color:#fff; text-align:center; max-width: 840px; margin-inline:auto;
  background: rgba(255,255,255,.10); backdrop-filter: blur(8px); border-radius: 20px; padding: 28px; box-shadow: var(--shadow)
}
.closing-card h2{ font-size: clamp(26px, 4vw, 40px); margin: 0 0 10px }
.closing-card p{ color:var(--bg); font-size: 16px; margin: 0 0 16px }
.closing-bullets{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; color: #dbeafe }
.closing-bullets span{ color:var(--bg); display:inline-flex; align-items:center; gap:8px }

.foot-brand{margin:0 35px 0 35px}
.foot-brand img{width:100%; height: 15px;}

/* ====== Footer ====== */
.footer{ background:var(--footer-bg); color:var(--footer-text); padding:50px 16px 0 16px; padding:100px 0 }
.footer-grid{
  display:grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap:24px;
}
.footer a{ color:var(--footer-text); text-decoration:none; opacity:.9 }
.footer a:hover{ opacity:1; text-decoration:bold }
.footer .copyright{ color:var(--footer-muted); margin-top:30px }
.footer h5{ margin:0 0 8px }

/* ====== Responsivo ====== */
@media (max-width: 1120px){
  .grid-3-9{ grid-template-columns: 1fr; }
}
@media (max-width: 664px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ===== REVEAL ===== */
.reveal{ opacity:0; transform: translateY(24px); transition: .7s ease }
.reveal.in-view{ opacity:1; transform: translateY(0) }

@media (max-width: 420px){
  .prog-card .event-meta{ flex-wrap: wrap; row-gap: 6px }
}