/* ==========================================================
   Wiliane Kerber — estilo das páginas internas
   Usa exatamente os mesmos tokens da home (index.html):
   mesmas cores, mesmas fontes, mesmas sombras.
   ========================================================== */

:root{
  --radius: 1.25rem;
  --background: oklch(0.975 0.008 85);
  --foreground: oklch(0.28 0.03 55);
  --card: oklch(0.985 0.006 85);
  --muted-foreground: oklch(0.52 0.028 60);
  --border: oklch(0.9 0.018 82);

  --cream: oklch(0.97 0.012 85);
  --sand: oklch(0.9 0.024 80);
  --cocoa: oklch(0.32 0.045 55);
  --gold: oklch(0.76 0.075 78);
  --ink: oklch(0.16 0.012 60);

  --shadow-soft: 0 1px 2px oklch(0.32 0.045 55 / 0.05), 0 18px 40px -24px oklch(0.32 0.045 55 / 0.35);
  --shadow-lift: 0 2px 4px oklch(0.32 0.045 55 / 0.06), 0 30px 60px -28px oklch(0.32 0.045 55 / 0.45);
  --transition-silk: 620ms cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Jost", system-ui, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;border-color:var(--border);}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background-color:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
img{display:block;}
a{color:inherit;text-decoration:none;}

.font-display{font-family:var(--font-display);}

.eyebrow{
  font-family:var(--font-sans);
  font-size:0.6875rem;
  font-weight:400;
  letter-spacing:0.24em;
  text-transform:uppercase;
}

.hairline{
  height:1px;
  background:linear-gradient(to right, transparent, color-mix(in oklab, var(--gold) 70%, transparent), transparent);
}

/* ---------- estrutura ---------- */
.wrap{
  margin:0 auto;
  width:100%;
  max-width:560px;
  padding:2rem 1.25rem 4rem;
}

.back{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  color:var(--muted-foreground);
  transition:color 300ms;
}
.back:hover{color:var(--cocoa);}
.back:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.page-head{margin-top:2.5rem;text-align:center;}
.page-head .kicker{color:var(--muted-foreground);}
.page-head h1{
  font-family:var(--font-display);
  margin-top:0.75rem;
  font-size:2.4rem;
  line-height:0.98;
  letter-spacing:-0.025em;
  color:var(--cocoa);
  font-weight:500;
}
.page-head .sub{
  font-family:var(--font-display);
  font-style:italic;
  margin-top:1rem;
  font-size:1.2rem;
  line-height:1.35;
  color:var(--cocoa);
}
.page-head .hairline{margin:1.75rem auto 0;width:6rem;}

/* ---------- blocos de texto ---------- */
section{margin-top:3rem;}
section h2{
  font-family:var(--font-display);
  font-size:1.75rem;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--cocoa);
  font-weight:500;
}
section h2 + p{margin-top:0.9rem;}
p{
  font-size:0.95rem;
  line-height:1.7;
  color:var(--muted-foreground);
}
p + p{margin-top:0.9rem;}
strong{color:var(--cocoa);font-weight:500;}

.pull{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.3rem;
  line-height:1.4;
  color:var(--cocoa);
  text-align:center;
  margin:2.5rem 0;
}

/* ---------- caixa ---------- */
.box{
  margin-top:1.25rem;
  background-color:var(--card);
  border:1px solid var(--border);
  border-radius:1.5rem;
  box-shadow:var(--shadow-soft);
  padding:1.5rem;
}
.box.dark{
  background-color:var(--ink);
  border:1px solid color-mix(in oklab, var(--gold) 30%, transparent);
}
.box.dark h3{color:var(--gold);}
.box.dark p, .box.dark li{color:color-mix(in oklab, var(--cream) 78%, transparent);}
.box h3{
  font-family:var(--font-display);
  font-size:1.35rem;
  line-height:1.1;
  color:var(--cocoa);
  font-weight:500;
}
.box h3 + p{margin-top:0.6rem;}

/* ---------- listas ---------- */
ul.marks{list-style:none;margin-top:1rem;}
ul.marks li{
  position:relative;
  padding-left:1.5rem;
  font-size:0.95rem;
  line-height:1.65;
  color:var(--muted-foreground);
}
ul.marks li + li{margin-top:0.7rem;}
ul.marks li::before{
  content:"";
  position:absolute;
  left:0;top:0.65rem;
  width:0.45rem;height:0.45rem;
  border-radius:9999px;
  background:var(--gold);
}

/* ---------- encontros numerados ---------- */
.steps{list-style:none;margin-top:1.5rem;}
.steps li{
  display:flex;
  gap:1rem;
  padding:1.1rem 0;
  border-top:1px solid var(--border);
}
.steps li:last-child{border-bottom:1px solid var(--border);}
.steps .n{
  font-family:var(--font-display);
  font-size:1.4rem;
  line-height:1;
  color:var(--gold);
  min-width:2.1rem;
  padding-top:0.1rem;
}
.steps h4{
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.15;
  color:var(--cocoa);
  font-weight:500;
}
.steps p{margin-top:0.35rem;font-size:0.9rem;line-height:1.6;}

/* ---------- botão ---------- */
.cta{
  margin-top:1.75rem;
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  border-radius:9999px;
  padding:0.85rem 1.6rem;
  background-color:var(--cocoa);
  color:var(--cream);
  box-shadow:var(--shadow-soft);
  transition:transform var(--transition-silk), box-shadow var(--transition-silk);
}
.cta:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.cta:active{transform:translateY(0) scale(0.99);}
.cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.cta .arrow{display:inline-block;transition:transform 300ms;}
.cta:hover .arrow{transform:translateX(0.25rem);}
.cta.ghost{
  background-color:transparent;
  color:var(--cocoa);
  border:1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  box-shadow:none;
}
.cta.disabled{
  background-color:transparent;
  color:var(--muted-foreground);
  border:1px dashed color-mix(in oklab, var(--gold) 45%, transparent);
  box-shadow:none;
  cursor:default;
}
.cta.disabled:hover{transform:none;box-shadow:none;}
.cta-center{text-align:center;}

/* ---------- vídeo ---------- */
.video{
  margin-top:1.5rem;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:1.5rem;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--border);
  background-color:var(--ink);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video .placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0.9rem;
  background:linear-gradient(180deg, color-mix(in oklab, var(--ink) 70%, transparent), var(--ink));
  color:color-mix(in oklab, var(--cream) 75%, transparent);
  text-align:center;
  padding:1.5rem;
}
.video .placeholder .play{
  width:3.5rem;height:3.5rem;
  border-radius:9999px;
  border:1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
}
.video .placeholder img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0.25;z-index:-1;
}

/* ---------- página de evento ---------- */
.event-banner{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:1.5rem;
  box-shadow:var(--shadow-soft);
  border:1px solid var(--border);
}
.tag{
  display:inline-block;
  margin-top:1.5rem;
  border-radius:9999px;
  padding:0.45rem 1rem;
  background-color:color-mix(in oklab, var(--gold) 22%, transparent);
  color:var(--cocoa);
}
.meta{margin-top:1.75rem;display:flex;flex-direction:column;gap:1.1rem;}
.meta-row{display:flex;gap:0.9rem;align-items:flex-start;}
.meta-row svg{flex:none;margin-top:0.15rem;color:var(--gold);}
.meta-row .label{font-size:0.98rem;color:var(--cocoa);}
.meta-row .value{margin-top:0.15rem;font-size:0.88rem;line-height:1.5;color:var(--muted-foreground);}

/* ---------- rodapé ---------- */
footer{
  margin-top:4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
footer .eyebrow{color:var(--muted-foreground);}
footer .hairline{margin-top:2rem;width:8rem;}

@media (min-width:640px){
  .wrap{padding-left:2rem;padding-right:2rem;}
  .page-head h1{font-size:3rem;}
  .page-head .sub{font-size:1.4rem;}
  .box{padding:2rem;}
  section h2{font-size:2rem;}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important;}
  html{scroll-behavior:auto;}
  .cta:hover{transform:none;}
}