/* =========================================================
   Chá de Livros — folha de estilos
   Paleta e linguagem visual inspiradas na versão gerada no
   Google AI Studio que a Luanna aprovou (cores, tipografia,
   fotos em estilo polaroid com fita, cards com "bento" de
   vidro, cartões com fita adesiva) — todo o conteúdo é o
   conteúdo real do Chá de Livros, nada foi inventado.

   Paleta fixa de propósito: o site é uma identidade visual
   única (creme/rosa/vinho/magenta), pensada pra ficar igual
   pra todo mundo — não segue o tema claro/escuro do sistema
   operacional de quem visita.
   ========================================================= */

:root{
  /* --- cores base --- */
  --cream:        #FFF9F4;
  --cream-deep:   #FBF1E7;
  --paper:        #FFF9F4; /* mantém compatibilidade de nome usado no HTML */
  --tan:          #F6EBDD;
  --ink:          #33262B;
  --ink-soft:     #5C4851;
  --mauve:        #5C4851;

  --pink-pale:    #FAF2F3;
  --pink-tint:    #F3DDE5;

  --wine:         #713445;
  --wine-deep:    #5A2838;

  --magenta:      #A91F5B;
  --magenta-deep: #92174C;
  --magenta-tint: #F4C9DC;

  --gold:         #E4B87A; /* fita/adesivo, detalhes quentes */

  --white:        #FFFFFF;

  /* tokens usados por seções específicas (divisores) */
  --rose:         #E8B9CB;
  --rose-tint:    #F3DDE5;

  /* --- tipografia --- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-hand:  'Caveat', cursive;

  /* --- ritmo --- */
  --wrap: 1120px;
  --wrap-wide: 1320px;
  --radius: 18px;
  --shadow-soft: 0 20px 44px -18px rgba(51,26,36,.28);
  --shadow-card: 0 14px 30px -16px rgba(51,26,36,.22);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
figure{ margin:0; }

h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:600;
  color:var(--ink);
  line-height:1.14;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem, 5.4vw, 4.1rem); font-weight:600; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); }
h3{ font-size:1.28rem; font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-soft); }

:focus-visible{ outline:2.5px solid var(--magenta); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.wrap-wide{ max-width:var(--wrap-wide); margin:0 auto; padding:0 28px; }

/* textura de papel — pontinhos discretos, usada em fundos claros */
.paper-texture{
  background-image:radial-gradient(rgba(113,52,69,.05) 1px, transparent 0);
  background-size:22px 22px;
}
.paper-texture-dark{
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 0);
  background-size:22px 22px;
}

/* eyebrow / kicker */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-hand);
  font-size:1.35rem;
  font-weight:600;
  color:var(--magenta);
  margin-bottom:.4em;
}
.eyebrow::before{
  content:"";
  width:26px; height:1.5px;
  background:var(--magenta);
  opacity:.65;
  display:inline-block;
}

.section-head{ max-width:56ch; font-size:1.08rem; }

/* watermark numeral/palavra decorativa ao fundo das seções */
.watermark{
  position:absolute;
  font-family:var(--font-serif);
  font-weight:700;
  color:var(--ink);
  opacity:.05;
  line-height:1;
  pointer-events:none;
  user-select:none;
  z-index:0;
  white-space:nowrap;
}
.section-dark .watermark{ color:var(--white); opacity:.06; }

/* =========================================================
   REVEAL AO ROLAR
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.95em 1.7em;
  border-radius:100px;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.01em;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{
  background:var(--magenta);
  color:var(--cream);
  box-shadow:0 12px 26px -10px rgba(169,31,91,.55);
}
.btn-primary:hover{ background:var(--magenta-deep); transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(169,31,91,.65); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.section-dark .btn-ghost, .section-magenta .btn-ghost{ color:var(--cream); border-color:rgba(255,249,244,.55); }
.section-magenta .btn-primary{ background:var(--cream); color:var(--magenta-deep); box-shadow:0 12px 26px -10px rgba(0,0,0,.35); }
.section-magenta .btn-primary:hover{ background:var(--white); }
.btn-block{ width:100%; }

/* =========================================================
   MENU (header)
   ========================================================= */
header.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,249,244,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(113,52,69,.1);
}
.nav-inner{
  max-width:var(--wrap-wide);
  margin:0 auto;
  padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand img{ height:38px; width:auto; }
.brand span{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.18rem;
  color:var(--ink);
}
nav{ flex:1; display:flex; justify-content:center; }
.menu{ display:flex; align-items:center; gap:2.1rem; }
.menu a{
  font-size:.95rem; font-weight:500; color:var(--ink-soft);
  position:relative; padding:.3em 0;
  transition:color .2s ease;
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--magenta); transition:right .28s ease;
}
.menu a:hover{ color:var(--ink); }
.menu a:hover::after{ right:0; }
.menu-cta-mobile{ display:none; }
/* o CTA dentro do menu é um botão, não um link de navegação — precisa
   vencer a especificidade de ".menu a" para manter o texto claro sobre o magenta */
.menu a.btn-primary{ color:var(--cream); }
.menu a.btn-primary::after{ display:none; }
.menu a.btn-primary:hover{ color:var(--cream); background:var(--magenta-deep); }

.nav-cta{ display:flex; align-items:center; gap:14px; flex:none; }
.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  color:var(--ink);
}
.menu-toggle svg{ width:22px; height:22px; }

@media (max-width:900px){
  nav{ position:fixed; inset:0 0 0 auto; }
  .menu{
    position:fixed; top:0; right:0; height:100vh; width:min(320px, 82vw);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:0; padding:96px 32px 32px;
    background:var(--cream-deep);
    box-shadow:-16px 0 40px -20px rgba(51,26,36,.4);
    transform:translateX(100%);
    transition:transform .32s ease;
  }
  .menu.open{ transform:translateX(0); }
  .menu li{ width:100%; border-bottom:1px solid rgba(113,52,69,.12); }
  .menu a{ display:block; padding:1em 0; font-size:1.05rem; }
  .menu-cta-mobile{ display:block; padding-top:1.3em; }
  .nav-cta .btn-primary{ display:none; }
  .menu-toggle{ display:inline-flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:76px 0 96px;
  background:
    radial-gradient(1100px 480px at 82% -10%, var(--pink-tint) 0%, transparent 60%),
    var(--cream);
}
.hero-deco{ position:absolute; width:64px; height:64px; color:var(--magenta); opacity:.16; pointer-events:none; }
.hero-deco-book{ top:20%; left:3%; transform:rotate(-8deg); }
.hero-deco-cup{ bottom:12%; left:9%; width:50px; height:50px; transform:rotate(6deg); }

.hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.85rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--magenta-deep);
  background:var(--pink-tint);
  padding:.5em 1em; border-radius:100px;
  margin-bottom:1.4em;
}
.hero-kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--magenta); }
.hero-copy h1{ margin-bottom:.42em; }
.hero-copy h1 em{ font-style:italic; color:var(--magenta); }
.hero-copy .lede{ font-size:1.14rem; max-width:46ch; margin-bottom:2em; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; }

/* --- composição das duas fotos do hero (início + hoje), como polaroids --- */
.hero-art{
  position:relative;
  min-height:420px;
  display:flex; align-items:center; justify-content:center;
}
.hero-art .polaroid{ width:100%; }
.hero-photo-then{
  position:absolute;
  top:2%; left:0;
  width:46%;
  z-index:1;
  --r:-7deg;
}
.hero-photo-now{
  position:absolute;
  bottom:0; right:2%;
  width:62%;
  z-index:2;
  --r:4deg;
}
/* Foto real de 2016 é mais larga que alta — proporção própria para não cortar o grupo */
.hero-photo-then .polaroid-img{ aspect-ratio:161/95; }
.hero-photo-now .polaroid-img{ aspect-ratio:4/5; }
.hero-badge{
  position:absolute; z-index:3;
  top:-6%; left:38%;
  width:104px; height:104px;
  border-radius:50%;
  background:var(--magenta);
  color:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 16px 30px -10px rgba(169,31,91,.55);
  transform:rotate(-8deg);
  font-family:var(--font-serif);
}
.hero-badge span{ font-size:2.1rem; font-weight:700; line-height:1; }
.hero-badge i{ font-style:normal; font-family:var(--font-sans); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }

@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; gap:64px; }
  .hero-art{ min-height:360px; order:-1; }
}
@media (max-width:560px){
  .hero{ padding:52px 0 70px; }
  .hero-art{ min-height:300px; }
  .hero-badge{ width:82px; height:82px; }
  .hero-badge span{ font-size:1.6rem; }
}

/* =========================================================
   POLAROID — foto com "adesivo" (fita) e cantos de moldura
   Motivo mais elogiado pela Luanna: reutilizado na timeline e
   na galeria "Memórias".
   ========================================================= */
.polaroid{
  position:relative;
  background:var(--white);
  padding:14px 14px 46px;
  border-radius:3px;
  box-shadow:var(--shadow-soft);
  transform:rotate(var(--r, -3deg));
  transition:transform .35s ease, box-shadow .35s ease;
}
.polaroid:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:0 26px 50px -18px rgba(51,26,36,.34); }
.polaroid-img{
  position:relative;
  overflow:hidden;
  border-radius:1px;
  background:var(--tan);
}
.polaroid-img img{ width:100%; height:100%; object-fit:cover; }
.polaroid-caption{ display:none; }
/* fita adesiva no topo */
.polaroid::before{
  content:"";
  position:absolute;
  top:-13px; left:50%;
  width:84px; height:26px;
  transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(180deg, rgba(243,221,229,.92), rgba(243,221,229,.62));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 3px 6px rgba(51,26,36,.14);
}
/* canto de moldura superior-esquerdo */
.polaroid::after{
  content:"";
  position:absolute; top:8px; left:8px;
  width:22px; height:22px;
  border-top:2px solid var(--magenta);
  border-left:2px solid var(--magenta);
  opacity:.55;
}
/* canto de moldura inferior-direito */
.polaroid .corner-br{
  position:absolute; right:22px; bottom:54px;
  width:22px; height:22px;
  border-bottom:2px solid var(--magenta);
  border-right:2px solid var(--magenta);
  opacity:.55;
}

/* =========================================================
   SEÇÕES — ritmo de cores
   ========================================================= */
.section{ position:relative; padding:100px 0; overflow:hidden; }
.section-alt{ background:var(--cream); }
.section-rose{ background:var(--pink-pale); }
.section-tint{ background:var(--pink-tint); }
.section-dark{ background:var(--wine); color:var(--cream); }
.section-dark h2, .section-dark h3{ color:var(--cream); }
.section-dark p{ color:rgba(255,249,244,.78); }
.section-dark .eyebrow{ color:var(--gold); }
.section-dark .eyebrow::before{ background:var(--gold); }
.section-magenta{ background:linear-gradient(155deg, var(--magenta) 0%, var(--magenta-deep) 100%); color:var(--cream); }
.section-magenta h2{ color:var(--cream); }
.section-magenta p{ color:rgba(255,249,244,.86); }

@media (max-width:640px){ .section{ padding:70px 0; } }

/* scallop — divisor ondulado entre seções */
.scallop{ display:block; width:100%; height:26px; color:var(--cream); filter:drop-shadow(0 -3px 6px rgba(51,26,36,.08)); }
.scallop.flip{ transform:scaleY(-1); }

/* =========================================================
   2. MAIS QUE UM CLUBE DE LEITURA
   ========================================================= */
#conceito{ position:relative; }
#conceito .wrap{ position:relative; z-index:1; }
#conceito > .wrap > p{ max-width:62ch; font-size:1.08rem; }

.highlights{
  margin-top:2.6rem;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px;
}
.highlight-card{
  background:var(--white);
  border:1px solid rgba(113,52,69,.1);
  border-radius:var(--radius);
  padding:1.9rem 1.6rem;
  box-shadow:var(--shadow-card);
  transform:rotate(var(--r,0deg));
  transition:transform .28s ease, box-shadow .28s ease;
}
.highlights .highlight-card:nth-child(1){ --r:-1.4deg; }
.highlights .highlight-card:nth-child(2){ --r:1.1deg; }
.highlights .highlight-card:nth-child(3){ --r:-.8deg; }
.highlights .highlight-card:nth-child(4){ --r:1.3deg; }
.highlight-card:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:var(--shadow-soft); }
.hi-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:var(--pink-tint); color:var(--magenta-deep);
  margin-bottom:1em;
}
.hi-mark svg{ width:22px; height:22px; }
.highlight-card h3{ font-size:1.12rem; margin-bottom:.3em; }
.highlight-card p{ font-size:.95rem; margin:0; }

@media (max-width:980px){ .highlights{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .highlights{ grid-template-columns:1fr; } }

/* =========================================================
   3. NOSSA HISTÓRIA — timeline em página única (estilo álbum)
   ========================================================= */
#historia{ position:relative; }
#historia .wrap-wide{ position:relative; z-index:1; }

.tl-years{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 14px;
  scrollbar-width:none; margin-top:2.2rem;
}
.tl-years::-webkit-scrollbar{ display:none; }
.tl-year-btn{
  flex:none;
  padding:.55em 1.05em;
  border-radius:100px;
  font-size:.92rem; font-weight:600;
  color:var(--ink-soft);
  background:var(--white);
  border:1.5px solid rgba(113,52,69,.14);
  transition:all .22s ease;
}
.tl-year-btn .tl-year-sep{ margin:0 1px; opacity:.6; }
.tl-year-btn--placeholder{ opacity:.62; font-style:italic; }
.tl-year-btn:hover{ border-color:var(--magenta); color:var(--ink); }
.tl-year-btn.is-active{
  background:var(--magenta); border-color:var(--magenta); color:var(--cream);
}

.tl-stage{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  margin-top:1.6rem;
}
.tl-arrow{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; flex:none;
  background:var(--white); color:var(--ink);
  border:1.5px solid rgba(113,52,69,.16);
  transition:all .2s ease;
}
.tl-arrow svg{ width:20px; height:20px; }
.tl-arrow:hover:not(:disabled){ background:var(--magenta); color:var(--cream); border-color:var(--magenta); }
.tl-arrow:disabled{ opacity:.35; cursor:default; }
.tl-counter{
  display:block; text-align:center; margin-top:.9rem;
  font-family:var(--font-hand); font-size:1.2rem; color:var(--wine);
}

.tl-viewport{ overflow:hidden; }
.tl-panels{ display:flex; transition:transform .5s cubic-bezier(.65,0,.35,1); }
.tl-panel{
  flex:none; width:100%;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center;
  min-height:400px;
  padding:8px 4px;
}
.tl-panel--placeholder{ grid-template-columns:1fr; }
.tl-panel-media{ margin:0; position:relative; display:flex; justify-content:center; }
.tl-panel-media .polaroid{ width:min(100%, 380px); --r:-3deg; }
.tl-panel-media .polaroid-img{ aspect-ratio:4/5; }
.tl-panel-media--vintage .polaroid{ background:#FBF6EF; width:min(100%, 460px); }
/* Foto real de 2016 é mais larga que alta — proporção própria para não cortar o grupo */
.tl-panel-media--vintage .polaroid-img{ filter:sepia(.18) saturate(.92); aspect-ratio:161/95; }
.tl-panel-stamp{
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%) rotate(-2deg);
  font-family:var(--font-hand); font-size:1.1rem; color:var(--wine);
  background:var(--pink-tint); padding:.15em .8em; border-radius:6px;
  white-space:nowrap;
}
.tl-panel-copy{ max-width:44ch; }
.tl-panel-year{
  display:inline-block; font-family:var(--font-hand); font-size:1.5rem; font-weight:600;
  color:var(--magenta); margin-bottom:.2em;
}
.tl-panel-copy h3{ margin-bottom:.35em; }
.tl-panel--placeholder .tl-panel-copy{
  max-width:60ch; padding:2.2rem; background:var(--white);
  border:1.5px dashed rgba(113,52,69,.28); border-radius:var(--radius);
}
.tl-panel--placeholder h3, .tl-panel--placeholder p{ color:var(--ink-soft); font-style:italic; }

@media (max-width:900px){
  .tl-panel{ grid-template-columns:1fr; text-align:center; min-height:0; gap:28px; }
  .tl-panel-media{ order:-1; }
  .tl-panel-copy{ max-width:52ch; margin:0 auto; }
  .tl-stage{ grid-template-columns:1fr; }
  .tl-arrow{ display:none; }
}

/* =========================================================
   4. MEMÓRIAS — galeria em colagem de polaroids
   ========================================================= */
#memorias{ position:relative; }
#memorias .wrap-wide{ position:relative; z-index:1; }

/* Grid de verdade (não masonry por colunas) — garante 4 fotos por linha,
   todas alinhadas, e evita que a fita de uma foto invada a legenda da foto
   de cima (o que acontecia com o layout antigo baseado em `columns`). */
.gallery{
  margin-top:2.6rem;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:44px 26px;
}
.gallery figure{ margin:0; }
.gallery .polaroid{ width:100%; }
.gallery .polaroid-img{ aspect-ratio:4/5; }
.gallery figure:nth-child(4n+1) .polaroid{ --r:-3deg; }
.gallery figure:nth-child(4n+2) .polaroid{ --r:2.4deg; }
.gallery figure:nth-child(4n+3) .polaroid{ --r:-1.6deg; }
.gallery figure:nth-child(4n+4) .polaroid{ --r:2deg; }
.gallery .polaroid{ cursor:zoom-in; }
.gallery figcaption{
  margin-top:8px;
  display:flex; flex-direction:column; gap:1px;
}
.gallery .g-title{ font-family:var(--font-serif); font-weight:600; font-size:.98rem; color:var(--ink); }
.gallery .g-year{ font-size:.82rem; color:var(--ink-soft); }

@media (max-width:980px){ .gallery{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:640px){ .gallery{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:36px 16px; } }

/* lightbox simples */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(51,26,36,.88);
  display:flex; align-items:center; justify-content:center;
  padding:32px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ max-width:min(90vw, 760px); max-height:88vh; text-align:center; position:relative; }
.lightbox img{ max-width:100%; max-height:74vh; border-radius:4px; box-shadow:0 30px 60px rgba(0,0,0,.5); margin:0 auto; }
.lightbox-caption{ color:var(--cream); margin-top:16px; font-family:var(--font-serif); font-size:1.05rem; }
.lightbox-close{
  position:absolute; top:-52px; right:-6px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); color:var(--cream);
  font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background:rgba(255,255,255,.24); }

/* =========================================================
   5. COMO FUNCIONA — bento de vidro sobre fundo vinho
   ========================================================= */
#como-funciona{ position:relative; }
#como-funciona .wrap-wide{ position:relative; z-index:1; }

.steps{
  margin-top:2.6rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:20px;
}
.step-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  border-radius:var(--radius);
  padding:1.8rem 1.6rem;
  display:flex; flex-direction:column;
  transition:background .22s ease, transform .22s ease;
}
.step-card:hover{ background:rgba(255,255,255,.11); transform:translateY(-4px); }
.step-num{
  font-family:var(--font-serif); font-size:1.6rem; font-weight:700;
  color:var(--gold); margin-bottom:.5em; display:block;
}
.step-card h3{ color:var(--cream); font-size:1.08rem; margin-bottom:.3em; }
.step-card p{ color:rgba(255,249,244,.75); font-size:.95rem; margin:0; }
.steps-note{
  margin-top:2.2rem; max-width:56ch;
  font-style:italic; color:rgba(255,249,244,.72);
}
/* Pedido explícito: essa frase deve caber numa única linha (a largura de
   56ch forçava a quebra em duas) */
.steps-note--oneline{ max-width:none; white-space:nowrap; }

@media (max-width:900px){ .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .steps-note--oneline{ white-space:normal; } /* em telas estreitas, melhor quebrar do que estourar a largura */
}

/* =========================================================
   6. TEMAS — cartões com fita adesiva
   ========================================================= */
#temas{ position:relative; }
.themes-grid{
  margin-top:2.6rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:26px;
}
.theme-card{
  position:relative;
  background:var(--white);
  border-radius:14px;
  padding:2rem 1.7rem 1.7rem;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; justify-content:flex-start;
  transform:rotate(var(--r,0deg));
  transition:transform .25s ease, box-shadow .25s ease;
}
.themes-grid .theme-card:nth-child(1){ --r:-1.6deg; }
.themes-grid .theme-card:nth-child(2){ --r:1.4deg; }
.themes-grid .theme-card:nth-child(3){ --r:-1deg; }
.theme-card:hover{ transform:rotate(0deg) translateY(-5px); box-shadow:var(--shadow-soft); }
.theme-card::before{
  content:"";
  position:absolute; top:-11px; left:26px;
  width:64px; height:22px;
  background:linear-gradient(180deg, rgba(217,165,102,.85), rgba(217,165,102,.55));
  border:1px solid rgba(255,255,255,.5);
  transform:rotate(-4deg);
  box-shadow:0 3px 6px rgba(51,26,36,.12);
}
.theme-card h3{ font-size:1.15rem; margin-bottom:.35em; }
.theme-card p{ font-size:.95rem; margin:0; }
.themes-note{ margin-top:2rem; font-style:italic; max-width:56ch; }

@media (max-width:900px){ .themes-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .themes-grid{ grid-template-columns:1fr; } }

/* =========================================================
   7. PRÓXIMOS ENCONTROS
   ========================================================= */
#encontros{ position:relative; }
#encontros .wrap-wide{ position:relative; z-index:1; }

.meetings{
  margin-top:2.6rem;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:22px;
}
.meeting-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.meeting-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-soft); }
.meeting-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:1rem 1.5rem;
  background:var(--wine);
  color:var(--cream);
}
.meeting-month{ font-family:var(--font-serif); font-weight:600; font-size:1.05rem; }
.meeting-date{ font-size:.85rem; color:rgba(255,249,244,.75); font-variant-numeric:tabular-nums; }
.meeting-body{ padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.meeting-tag{
  align-self:flex-start;
  font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--magenta-deep); background:var(--pink-tint);
  padding:.3em .8em; border-radius:100px; margin-bottom:.8em;
}
.meeting-body h3{ margin-bottom:.4em; }
.meeting-prompt{ font-family:var(--font-serif); font-style:italic; color:var(--ink); }
.meeting-sorteio{ font-size:.92rem; margin-bottom:1.3em; min-height:1.4em; }
.meeting-body .btn{ margin-top:auto; align-self:flex-start; }

@media (max-width:760px){ .meetings{ grid-template-columns:1fr; } }

/* =========================================================
   8. PARTICIPE (CTA)
   ========================================================= */
#participe{ position:relative; text-align:center; }
#participe .watermark{
  top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:min(70vw, 26rem); color:var(--cream); opacity:.07;
}
.participe-card{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.participe-card .eyebrow{ justify-content:center; }
.participe-card .eyebrow::before{ display:none; }
.participe-card h2{ margin-bottom:.5em; }
.participe-card p{ margin:0 auto 2em; max-width:52ch; }

/* =========================================================
   9. REDES SOCIAIS
   ========================================================= */
#redes{ text-align:center; }
#redes h2{ max-width:36ch; margin-inline:auto; }
.socials{
  margin-top:2.4rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px;
}
.social-card{
  display:flex; align-items:center; gap:14px;
  padding:1rem 1.6rem;
  background:var(--white);
  border-radius:100px;
  box-shadow:var(--shadow-card);
  transition:transform .22s ease, box-shadow .22s ease;
}
.social-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.social-card .icon{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--pink-tint); color:var(--magenta-deep); flex:none;
}
.social-card .icon svg{ width:20px; height:20px; }
.social-card span:last-child{ display:flex; flex-direction:column; align-items:flex-start; }
.social-card strong{ font-size:.98rem; }
.social-card span span{ font-size:.82rem; color:var(--ink-soft); }
.socials-note{ margin-top:1.8rem; font-family:var(--font-hand); font-size:1.3rem; color:var(--wine); }

/* =========================================================
   QR FLUTUANTE
   ========================================================= */
.qr-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  display:flex; align-items:center; gap:12px;
  background:var(--white);
  padding:12px 16px 12px 12px;
  border-radius:100px;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(113,52,69,.1);
  max-width:min(90vw, 340px);
  transition:opacity .25s ease, transform .25s ease;
}
.qr-float.hidden{ opacity:0; transform:translateY(12px) scale(.96); pointer-events:none; }
.qr-float img{ width:56px; height:56px; border-radius:10px; flex:none; }
.qr-text{ font-size:.82rem; line-height:1.35; color:var(--ink-soft); }
.qr-text strong{ display:block; color:var(--ink); font-family:var(--font-serif); }
.qr-close{
  position:absolute; top:-9px; right:-9px;
  width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; line-height:1;
}
@media (max-width:560px){ .qr-float{ left:16px; right:16px; bottom:16px; max-width:none; } }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ background:var(--cream-deep); border-top:1px solid rgba(113,52,69,.12); padding:64px 0 40px; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55em; }
.footer-inner .brand{ justify-content:center; }
.footer-inner .brand img{ height:56px; margin-bottom:.4em; }
.foot-tagline{ font-family:var(--font-serif); font-size:1.15rem; color:var(--ink); margin:0; }
.foot-meta{ font-size:.9rem; margin:0 0 .6em; }
.foot-socials{ display:flex; gap:14px; margin-bottom:.8em; }
.foot-socials a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--white); color:var(--ink-soft);
  transition:all .2s ease;
}
.foot-socials a:hover{ background:var(--magenta); color:var(--cream); }
.foot-socials svg{ width:18px; height:18px; }
.foot-form-link{ font-weight:600; color:var(--magenta-deep); margin-bottom:1.4em; }
.foot-form-link:hover{ text-decoration:underline; }
.foot-sign{ font-family:var(--font-hand); font-size:1.35rem; color:var(--wine); margin:0; }

/* =========================================================
   AJUSTES GERAIS RESPONSIVOS
   ========================================================= */
@media (max-width:560px){
  .wrap, .wrap-wide{ padding:0 20px; }
}