/* ═══════════════════════════════════════════════
   Manual dos Padrinhos
   Direção: editorial botânico · papel, tinta, laranja queimado
   ═══════════════════════════════════════════════ */

/* Cores amostradas diretamente da arte do convite
   (Roupas_Madrinhas_E_Padrinhos.pdf · Roupas_Mães_E_Pais.pdf) */
:root{
  /* papel & tinta */
  --paper:        #FBF7EF;
  --paper-warm:   #F5EFE3;
  --paper-deep:   #EFE7D8;
  --ink:          #33261B;
  --ink-mid:      #64513F;
  --ink-soft:     #8F7B67;
  --hair:         #DCCFBB;

  /* acentos — terracota das flores */
  --terracotta:      #A85B35;
  --terracotta-deep: #985431;
  --terracotta-lit:  #AE6844;
  --terracotta-pale: #EDD7C6;

  /* verdes — folhagem e traje das madrinhas */
  --olive:        #727D6B;  /* oliva escuro · vestido madrinha */
  --olive-lit:    #9FAD94;  /* sálvia · vestido madrinha */
  --foliage:      #466855;  /* folha escura da arte */
  --foliage-lit:  #638A76;

  /* cinzas do traje masculino */
  --suit-grey:     #9E9E9E;
  --suit-grey-lit: #C0C0C0;

  /* brancos */
  --shirt-white:  #FFFFFF;
  --petal-cream:  #FEF7DD;

  /* margaridas — pétala quase branca sobre papel creme precisa de contorno,
     senão some no fundo. O miolo dourado é o que segura o calor da página. */
  --daisy-petal:    #FFFCF4;
  --daisy-core:     #E0B455;
  /* contorno da flor — bege acinzentado, só o suficiente para separar a
     pétala creme do papel creme. Escuro demais e a margem rouba a leitura */
  --line:           #C6B49A;

  /* aliases usados pela ilustração */
  --orange:       var(--terracotta);
  --orange-lit:   var(--terracotta-lit);
  --orange-pale:  var(--terracotta-pale);
  --green:        var(--foliage);
  --green-lit:    var(--foliage-lit);

  /* tipografia */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Jost", "Avenir Next", "Segoe UI", sans-serif;

  /* ritmo */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --measure: 60ch;
  --flora-w: clamp(96px, 13vw, 210px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:350;
  font-size:clamp(1rem, .96rem + .28vw, 1.14rem);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* fundo: brumas quentes sobrepostas */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(58% 42% at 12% 4%,  rgba(174,104,68,.17), transparent 62%),
    radial-gradient(52% 40% at 92% 22%, rgba(152,84,49,.10),  transparent 66%),
    radial-gradient(70% 50% at 50% 108%,rgba(70,104,85,.16),  transparent 70%),
    linear-gradient(178deg, var(--paper) 0%, var(--paper-warm) 55%, var(--paper-deep) 100%);
}

/* grão de papel */
.grain{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

img,svg{ max-width:100%; }
.defs{ position:absolute; width:0; height:0; overflow:hidden; }


/* ═══ ILUSTRAÇÃO BOTÂNICA ═══ */

/* traço fino: a flor é enfeite de margem, não desenho de destaque.
   O contorno existe só para a pétala creme não sumir no papel creme. */
.petal--daisy { fill:var(--daisy-petal); stroke:var(--line); stroke-width:.85;
                stroke-linejoin:round; }
.daisy__core  { fill:var(--daisy-core); stroke:var(--line); stroke-width:.85; }
.leaf         { fill:var(--green); }
.stem         { stroke:var(--green); stroke-width:2.4; stroke-linecap:round; fill:none; }
.stem--main   { stroke-width:3.4; }
.hair         { stroke:var(--hair); stroke-width:1.2; }

/* folga vertical: o parallax nunca pode expor a ponta do galho */
.flora{
  position:fixed;
  top:-200px; bottom:-200px;
  width:var(--flora-w);
  z-index:0;
  pointer-events:none;
  opacity:.9;
  will-change:transform;
}
/* `overflow:visible` é o ponto: por padrão o <svg> recorta no próprio
   viewport, e com `slice` as flores próximas à borda do viewBox saem
   cortadas ao meio. Deixando transbordar, elas vazam para fora da tela
   (que é o efeito desejado numa moldura de borda) em vez de serem fatiadas. */
.flora svg{ width:100%; height:100%; display:block; overflow:visible; }
.flora--left  { left:0;  transform-origin:left center; }
.flora--right { right:0; }

.sway{
  transform-box:fill-box;
  transform-origin:center;
  animation:sway 7.5s var(--ease-soft) infinite alternate;
  animation-delay:var(--sd,0s);
}
.sway--wide{ animation-duration:9.5s; }
@keyframes sway{
  from{ transform:rotate(-2.6deg) translateY(0); }
  to  { transform:rotate(2.6deg)  translateY(-4px); }
}

.bloom__ring{
  transform-box:fill-box;
  transform-origin:center;
  animation:breathe 11s ease-in-out infinite alternate;
}
.bloom__ring--in{ animation-duration:8s; animation-direction:alternate-reverse; }
@keyframes breathe{
  from{ transform:scale(.965) rotate(-1.5deg); }
  to  { transform:scale(1.035) rotate(1.5deg); }
}

/* pétalas à deriva */
.drift{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.drift__p{
  position:absolute;
  top:0;
  left:var(--x);
  width:34px; height:44px;
  opacity:0;
  will-change:transform, opacity;
  /* uma queda só, de propósito: no fim o app.js remove a pétala e nasce
     outra sorteada. Com `infinite` o animationend nunca dispararia e a
     mesma pétala repetiria a mesma trajetória para sempre. */
  animation:drift var(--t,24s) linear 1 both;
}
/* `--sw` é a deriva lateral: a pétala vai para um lado na descida e
   volta um pouco no fim, como folha caindo, em vez de cair na vertical */
@keyframes drift{
  0%  { transform:translate3d(0,-14vh,0) rotate(0deg) scale(var(--s)); opacity:0; }
  7%  { opacity:var(--o,.4); }
  50% { transform:translate3d(var(--sw,5vw),50vh,0) rotate(210deg) scale(var(--s)); }
  93% { opacity:var(--o,.4); }
  100%{ transform:translate3d(calc(var(--sw,5vw) * -0.55),116vh,0)
                  rotate(520deg) scale(var(--s)); opacity:0; }
}


/* ═══ NAV ═══ */

.quicknav{
  position:fixed;
  left:50%;
  bottom:max(1rem, env(safe-area-inset-bottom));
  transform:translate(-50%, 150%);
  z-index:60;
  display:flex;
  gap:.15rem;
  padding:.35rem;
  border-radius:999px;
  background:rgba(251,246,238,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--hair);
  box-shadow:0 10px 34px -12px rgba(43,34,28,.35);
  transition:transform .6s var(--ease);
}
.quicknav.is-in{ transform:translate(-50%,0); }
.quicknav a{
  padding:.45rem .85rem;
  border-radius:999px;
  font-size:.76rem;
  letter-spacing:.06em;
  text-transform:lowercase;
  color:var(--ink-mid);
  text-decoration:none;
  white-space:nowrap;
  transition:background .25s, color .25s;
}
.quicknav a:hover{ color:var(--ink); background:var(--orange-pale); }
.quicknav a.is-active{ background:var(--orange); color:var(--paper); }


/* ═══ TIPOGRAFIA BASE ═══ */

.wrap{
  position:relative;
  z-index:2;
  width:min(100% - 2*var(--gutter), 62rem);
  margin-inline:auto;
}

.eyebrow{
  margin:0;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
}

.todo{
  display:inline-block;
  padding:.05em .5em;
  border:1px dashed var(--orange);
  border-radius:.35em;
  color:var(--orange);
  font-size:.82em;
  letter-spacing:.04em;
  background:rgba(226,89,31,.06);
}
.todo--inline{ font-size:1em; }

.hint{
  display:inline-block;
  color:var(--ink-soft);
  font-size:.82em;
  font-style:italic;
}

.amp{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  color:var(--orange);
}


/* ═══ HERO ═══ */

.hero{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(4rem,12vh,7rem) var(--gutter) clamp(3rem,8vh,5rem);
  text-align:center;
}
.hero__inner{ width:min(100%, 44rem); }

.couple{
  margin:1.4rem 0 0;
  font-family:var(--display);
  font-weight:250;
  font-size:clamp(2.9rem, 11vw, 6.4rem);
  line-height:.94;
  letter-spacing:-.025em;
  font-variation-settings:"SOFT" 40, "WONK" 1;
}
.couple .amp{
  display:block;
  font-size:.42em;
  margin:.12em 0;
  opacity:.9;
}

.hero__meta{
  margin:1.5rem 0 0;
  font-size:.82rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-mid);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  flex-wrap:wrap;
}
.dot{ width:4px; height:4px; border-radius:50%; background:var(--orange); }

.hero__rule{ margin:2rem auto 1.6rem; width:150px; }
.hero__rule svg{ width:100%; height:auto; overflow:visible; }

.hero__title{
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.6rem, 5.2vw, 2.6rem);
  line-height:1.1;
  letter-spacing:.01em;
}
.hero__title em{
  font-style:italic;
  font-weight:200;
  color:var(--orange);
}
/* mantém o itálico mas na cor da tinta — para títulos em que a segunda
   linha completa a primeira ("Pais & mães") em vez de contrastar com ela */
.hero__title em.is-ink{ color:inherit; }

.hero__lede{
  margin:1.8rem auto 0;
  max-width:34rem;
  color:var(--ink-mid);
  font-size:1.02rem;
  line-height:1.72;
}
.hero__lede strong{ color:var(--ink); font-weight:500; }

/* ═══ INTRO — o manual, já depois da dobra ═══ */

.intro{
  position:relative;
  padding:clamp(4.5rem,13vh,8rem) var(--gutter) clamp(1rem,3vh,2rem);
  text-align:center;
}
.intro .wrap{ max-width:38rem; }
.intro .hero__lede{ margin-top:1.6rem; }
/* segundo parágrafo: o combinado prático, um degrau abaixo do convite */
.hero__lede--after{
  font-size:.95rem;
  color:var(--ink-soft);
}


.scrollcue{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  margin-top:3.5rem;
  color:var(--ink-soft);
  text-decoration:none;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  transition:color .3s;
}
.scrollcue:hover{ color:var(--orange); }
.scrollcue svg{
  width:12px; height:26px;
  fill:none; stroke:currentColor; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  animation:nudge 2.4s var(--ease-soft) infinite;
}
@keyframes nudge{
  0%,60%,100%{ transform:translateY(0); opacity:.7; }
  30%{ transform:translateY(5px); opacity:1; }
}


/* ═══ SEÇÕES ═══ */

/* sem z-index aqui de propósito: a seção não pode criar contexto de
   empilhamento, senão a faixa do ::before subiria por cima das colunas
   florais e cortaria as pétalas. Ordem desejada: faixa → flores → texto
   (o texto sobe pelo z-index do .wrap). */
.section{
  position:relative;
  padding:clamp(4.5rem,11vh,8rem) 0;
}
.section--alt::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:linear-gradient(180deg, transparent, rgba(241,229,212,.72) 14%, rgba(241,229,212,.72) 86%, transparent);
}

.head{
  display:flex;
  align-items:baseline;
  gap:clamp(.9rem,3vw,1.6rem);
  margin-bottom:1.4rem;
}
.head .num{
  font-family:var(--display);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--orange);
  padding-top:.2em;
}
.head h2{
  margin:0;
  font-family:var(--display);
  font-weight:250;
  font-size:clamp(2.1rem, 7.5vw, 3.6rem);
  line-height:1;
  letter-spacing:-.02em;
  font-variation-settings:"SOFT" 40, "WONK" 1;
}
.head__sprig{
  width:clamp(60px,12vw,92px);
  height:auto;
  overflow:visible;
  align-self:center;
  opacity:.85;
}

.lede{
  max-width:44ch;
  margin:0 0 2.8rem;
  color:var(--ink-mid);
  font-size:1.04rem;
}
.lede em{ color:var(--ink); font-style:italic; }


/* ═══ PALETA ═══ */

.callout{
  max-width:44rem;
  margin:0 0 2.6rem;
  padding:1.4rem clamp(1.2rem,4vw,1.7rem) 1.5rem;
  border-radius:1rem;
  background:linear-gradient(140deg, rgba(251,220,196,.72), rgba(255,253,249,.66));
  border:1px solid var(--orange-pale);
  box-shadow:0 14px 34px -24px rgba(226,89,31,.7);
}
.callout__tag{
  display:inline-block;
  margin-bottom:.6rem;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
}
.callout p{
  margin:0;
  font-size:1.02rem;
  line-height:1.66;
  color:var(--ink);
}
.callout strong{ font-weight:500; }

.swatches{
  list-style:none;
  margin:0 0 2.4rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(9.5rem,1fr));
  gap:clamp(.7rem,2vw,1.2rem);
}
.sw button{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.15rem;
  padding:1rem 1rem 1.05rem;
  border:1px solid var(--hair);
  border-radius:.9rem;
  background:rgba(255,253,249,.55);
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.sw button:hover{
  transform:translateY(-4px);
  border-color:var(--orange-pale);
  box-shadow:0 14px 30px -18px rgba(43,34,28,.55);
}
.sw button:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.sw__chip{
  width:100%;
  height:3.6rem;
  border-radius:.55rem;
  background:var(--c);
  margin-bottom:.7rem;
  box-shadow:inset 0 0 0 1px rgba(43,34,28,.07);
}
.sw__chip--light{ box-shadow:inset 0 0 0 1px var(--hair); }

.sw__name{
  font-size:.95rem;
  font-weight:400;
  line-height:1.3;
}
.sw__who{
  font-size:.72rem;
  line-height:1.35;
  color:var(--ink-soft);
  margin:.1rem 0 .35rem;
}
.sw__hex{
  font-size:.74rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.sw button.is-copied .sw__hex::after{
  content:" · copiado";
  color:var(--green);
}

.note{
  max-width:52ch;
  margin:0;
  padding:1.1rem 1.3rem;
  border-left:2px solid var(--orange);
  background:rgba(255,253,249,.6);
  border-radius:0 .6rem .6rem 0;
  font-size:.95rem;
  color:var(--ink-mid);
}
.note strong{ color:var(--ink); font-weight:500; }


/* nota sobre os noivos */
.couplenote{
  max-width:46rem;
  margin-top:1.6rem;
  padding:1.4rem clamp(1.2rem,4vw,1.7rem) 1.5rem;
  border:1px solid var(--hair);
  border-radius:1rem;
  background:rgba(255,253,249,.55);
}
.couplenote p{
  margin:0 0 .9rem;
  font-size:.97rem;
  line-height:1.62;
  color:var(--ink-mid);
}
.couplenote p:last-child{ margin-bottom:0; }
.couplenote strong{ color:var(--ink); font-weight:500; }


/* ═══ ARTE OFICIAL DO CONVITE ═══ */

/* conteúdo à esquerda, cartaz à direita — o cartaz acompanha a leitura */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(200px, 24vw, 290px);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.layout__main{ min-width:0; }

.art{
  margin:0;
  position:sticky;
  top:2.5rem;
  order:2;
  text-align:center;
}
.art img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 28px rgba(51,38,27,.13));
}


@media (max-width:860px){
  .layout{ grid-template-columns:1fr; }
  .art{
    position:static;
    order:0;
    width:min(100%, 17rem);
    margin:0 auto 2.2rem;
  }
}


/* ═══ DUO / TRIO DE CORES ═══ */

.duo{
  display:flex;
  align-items:center;
  gap:clamp(.9rem,3vw,1.8rem);
  flex-wrap:wrap;
  margin:0 0 2.4rem;
  padding:1.2rem clamp(1rem,3vw,1.5rem);
  border:1px solid var(--hair);
  border-radius:1rem;
  background:rgba(255,253,249,.5);
  max-width:fit-content;
}
.duo--trio{ gap:clamp(1.2rem,4vw,2.4rem); }
.duo--tight{
  margin:0 0 1.1rem;
  padding:.8rem 1rem;
  gap:.9rem;
}
.duo__item{ display:flex; flex-direction:column; gap:.28rem; }
.duo__chip{
  width:clamp(3.2rem,9vw,4.4rem);
  height:clamp(3.2rem,9vw,4.4rem);
  border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(51,38,27,.08);
}
.duo--tight .duo__chip{ width:2.6rem; height:2.6rem; }
.duo__chip--light{ box-shadow:inset 0 0 0 1px var(--hair); }

/* peça que aceita dois tons: dois círculos sobrepostos, para o rótulo
   "#9E9E9E ou #C0C0C0" ter as duas amostras e não só uma */
.duo__pair{ display:flex; }
.duo__pair .duo__chip + .duo__chip{
  margin-left:calc(clamp(3.2rem,9vw,4.4rem) * -0.34);
  box-shadow:inset 0 0 0 1px rgba(51,38,27,.08), -2px 0 0 0 var(--paper-warm);
}
.duo__name{ font-size:.9rem; line-height:1.25; }
.duo__hex{
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.duo__arrow{
  font-family:var(--display);
  font-style:italic;
  font-size:.9rem;
  color:var(--ink-soft);
  align-self:center;
}




/* ═══ SPEC LIST ═══ */

.spec{
  margin:0 0 2.6rem;
  max-width:46rem;
  border-top:1px solid var(--hair);
}
.spec__row{
  display:grid;
  grid-template-columns:minmax(9rem,14rem) 1fr;
  gap:.4rem clamp(1rem,4vw,2.5rem);
  padding:1.05rem .3rem;
  border-bottom:1px solid var(--hair);
  transition:background .3s;
}
.spec__row:hover{ background:rgba(255,253,249,.5); }
.spec__row dt{
  font-size:.73rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:.32em;
}
.spec__row dd{
  margin:0;
  font-size:1.05rem;
  line-height:1.5;
}
.spec__row--star{
  background:rgba(251,220,196,.42);
  border-radius:.5rem;
  border-bottom-color:transparent;
}
.spec__row--star dd strong{ font-weight:500; }
.spec__row--star:hover{ background:rgba(251,220,196,.55); }


/* ═══ O QUE NÃO USAR ═══ */

.avoid{
  max-width:46rem;
  padding:1.4rem clamp(1.2rem,4vw,1.8rem) 1.5rem;
  border:1px solid var(--hair);
  border-radius:1rem;
  background:rgba(255,253,249,.5);
}
.avoid h3{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0 0 .8rem;
  font-family:var(--display);
  font-weight:400;
  font-size:1.1rem;
  color:var(--orange);
}
.avoid h3 svg{ width:19px; height:19px; flex:none; }
.avoid ul{ margin:0; padding-left:1.1rem; }
.avoid li{
  margin-bottom:.5rem;
  color:var(--ink-mid);
  font-size:.98rem;
}
.avoid li::marker{ color:var(--orange-lit); }
.avoid li:last-child{ margin-bottom:0; }


/* ═══ TIMELINE ═══ */

.timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 1.9rem;
  max-width:42rem;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:5px; top:.7rem; bottom:1.4rem;
  width:1px;
  background:linear-gradient(var(--orange-pale), var(--green-lit));
}
.timeline li{
  position:relative;
  padding:0 0 2.1rem;
}
.timeline li::before{
  content:"";
  position:absolute;
  left:-1.9rem; top:.55rem;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--orange);
}
.timeline--end::before{ background:var(--orange) !important; box-shadow:0 0 0 4px rgba(226,89,31,.16); }
.timeline li:last-child{ padding-bottom:0; }
.timeline__when{
  display:block;
  font-size:.73rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.3rem;
}
.timeline__what{
  display:block;
  font-family:var(--display);
  font-weight:300;
  font-size:1.25rem;
  line-height:1.32;
}


/* ═══ LOCAL ═══ */

/* seção centrada: é a única sem coluna de arte ao lado, então alinhar à
   esquerda deixava um vazio grande à direita */
#onde .head{ justify-content:center; }
#onde .head .num{ order:-1; }

.venue{
  margin:2.8rem auto 0;
  max-width:34rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.4rem;
  padding:1.8rem clamp(1.2rem,4vw,2rem);
  border:1px solid var(--hair);
  border-radius:1rem;
  background:rgba(255,253,249,.62);
}
.venue__label{
  display:block;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.5rem;
}
.venue__label--second{ margin-top:1.5rem; }
.venue__when,
.venue__addr{
  margin:0;
  font-family:var(--display);
  font-weight:300;
  font-size:1.16rem;
  line-height:1.42;
}
.venue__when strong{ font-weight:500; }
.venue__map{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem 1.1rem;
  border:1px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  font-size:.86rem;
  white-space:nowrap;
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.venue__map svg{ width:13px; height:13px; }
.venue__map:hover{
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-2px);
}


/* ═══ VERSÍCULO ═══ */

/* fica dentro do hero, entre o filete e o título da página */
.hero__verse{
  margin:0 auto 2.4rem;
  max-width:30rem;
  font-family:var(--display);
  font-weight:250;
  font-style:italic;
  font-size:clamp(1.05rem,3.2vw,1.35rem);
  line-height:1.5;
  letter-spacing:-.005em;
  color:var(--ink-mid);
  font-variation-settings:"SOFT" 40, "WONK" 1;
}
.hero__verse cite{
  display:block;
  margin-top:.7rem;
  font-family:var(--body);
  font-style:normal;
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--terracotta);
}


/* ═══ OUTRO ═══ */

.outro{
  position:relative;
  z-index:2;
  padding:clamp(5rem,13vh,9rem) 0 clamp(6rem,14vh,8rem);
  text-align:center;
}
.outro .wrap{ max-width:38rem; }
.outro__bloom{
  width:78px; height:78px;
  overflow:visible;
  margin-bottom:1.4rem;
}
.outro__line{
  margin:0;
  font-family:var(--display);
  font-weight:250;
  font-size:clamp(1.8rem,6vw,2.8rem);
  line-height:1.14;
  letter-spacing:-.02em;
  font-variation-settings:"SOFT" 40, "WONK" 1;
}
.outro__sub{
  margin:.8rem 0 2.2rem;
  color:var(--ink-mid);
  font-size:1rem;
}

.wa{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.95rem 1.7rem;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-size:.95rem;
  letter-spacing:.01em;
  transition:transform .35s var(--ease), background .35s, box-shadow .35s;
  box-shadow:0 12px 30px -16px rgba(43,34,28,.7);
}
.wa svg{ width:19px; height:19px; }
.wa:hover{
  transform:translateY(-3px);
  background:var(--orange);
  box-shadow:0 18px 38px -16px rgba(226,89,31,.8);
}
.wa .todo{ border-color:currentColor; color:inherit; background:rgba(255,255,255,.12); }

.outro__thanks{
  margin:3.4rem auto 0;
  max-width:30rem;
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:1.12rem;
  line-height:1.6;
  color:var(--ink-mid);
}
.outro__mark{
  margin:1.6rem 0 0;
  font-family:var(--display);
  font-size:1.05rem;
  letter-spacing:.1em;
  color:var(--ink-soft);
}
.amp--sm{ font-size:1.1em; }


/* ═══ REVEAL ═══ */

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* hero revela sozinho no load */
.hero .reveal{ transition-delay:calc(var(--i,0) * 130ms + 160ms); }


/* ═══ RESPONSIVO ═══ */

@media (max-width:1180px){
  .flora{ opacity:.55; }
  .wrap{ width:min(100% - 2*var(--gutter), 62rem); }
}

@media (max-width:900px){
  .flora--right{ display:none; }
  .flora--left{ opacity:.3; }
  /* metade das pétalas no celular: menos camadas animadas para compor */
  /* o app.js já semeia menos pétalas em tela estreita */
}

@media (max-width:640px){
  .flora{ display:none; }
  /* empilha data/hora/cidade — os pontos separadores ficariam pendurados
     no fim da linha quando o flex quebra */
  .hero__meta{ flex-direction:column; gap:.4rem; }
  .hero__meta .dot{ display:none; }
  .spec__row{ grid-template-columns:1fr; gap:.2rem; }
  .spec__row dt{ padding-top:0; }
  .quicknav a{ padding:.45rem .7rem; font-size:.72rem; }
  .head{ flex-wrap:wrap; }
  .head__sprig{ display:none; }
}

/* espaço pra nav flutuante não cobrir o fim */
@media (max-width:900px){
  .outro{ padding-bottom:clamp(8rem,20vh,10rem); }
}


/* ═══ ACESSIBILIDADE ═══ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .drift{ display:none; }
}

::selection{ background:var(--orange); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:.2rem;
}


/* ═══ IMPRESSÃO — caso alguém imprima o manual ═══ */

@media print{
  .flora,.drift,.quicknav,.grain,.scrollcue{ display:none !important; }
  body{ background:#fff; }
  body::before{ display:none; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .section{ padding:1.5rem 0; break-inside:avoid; }
  .hero{ min-height:auto; padding:2rem 0 1rem; }
}