:root{
  --bg:#F8F5F1;
  --bg-soft:#E9DCCB;
  --brown:#6B5848;
  --brown-dark:#3F332B;
  --taupe:#B59F8A;
  --white:#FFFFFF;
  --rose:#C88A83;
  --line:rgba(107,88,72,.18);
  --shadow:0 18px 46px rgba(63,51,43,.08);
  --shadow-strong:0 28px 72px rgba(63,51,43,.14);
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--brown-dark);
  font-family:"Montserrat",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}

.grain{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
  opacity:.028;
  background-image:radial-gradient(rgba(63,51,43,.25) .45px,transparent .45px);
  background-size:13px 13px;
}

/* =========================================================
   CAPA — simples, delicada e fiel à referência aprovada
   ========================================================= */
.intro{
  position:relative;
  z-index:1;
  min-height:100svh;
  overflow:hidden;
  padding:0 clamp(20px,6vw,78px) 24px;
  display:block;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.82) 0%,rgba(255,255,255,.46) 30%,transparent 62%),
    linear-gradient(180deg,#FAF7F3 0%,var(--bg) 74%,#F7F0E8 100%);
}
.intro::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 42%,rgba(233,220,203,.17) 43% 48%,transparent 49% 100%),
    linear-gradient(24deg,transparent 0 56%,rgba(255,255,255,.28) 57% 65%,transparent 66% 100%);
  opacity:.75;
}
.intro>*{position:relative;z-index:2}
.intro-hero-stage{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(38px,6vh,64px) 0;
}
.intro-topbar,.intro-center{position:relative;z-index:4}
.intro-features,.intro-footer{position:relative;z-index:4}

.intro-topbar{
  width:min(1180px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.couple-label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(22px,2.45vw,31px);
  color:#4A382F;
  line-height:1.06;
}
.couple-line{white-space:nowrap}
.couple-label strong{font-weight:500}
.mini-heart{color:var(--rose);margin-left:.34em;font-size:.82em;vertical-align:middle}

.intro-center{
  align-self:auto;
  width:min(620px,68vw);
  margin:clamp(26px,3.4vh,38px) auto 0;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.intro-kicker{
  margin:0 0 15px;
  color:#59443A;
  font-size:clamp(11px,1.15vw,15px);
  font-weight:600;
  letter-spacing:.34em;
  white-space:nowrap;
}
.intro-kicker span{color:#D6AD58;letter-spacing:0;margin:0 .28em}
.wordmark{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(72px,9.2vw,116px);
  line-height:.9;
  font-weight:500;
  letter-spacing:-.045em;
  color:#543E32;
}
.intro-divider{
  width:min(520px,88%);
  margin:20px auto 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.intro-divider i{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,124,116,.84));
}
.intro-divider i:last-child{background:linear-gradient(90deg,rgba(196,124,116,.84),transparent)}
.intro-divider span{color:#C77C74;font-size:22px;line-height:1}
.intro-message{
  margin:0;
  max-width:560px;
  color:#4F3A31;
  font-size:clamp(20px,2.35vw,30px);
  font-weight:400;
  line-height:1.42;
  letter-spacing:-.02em;
}
.enter-button{
  position:relative;
  overflow:hidden;
  width:min(430px,100%);
  min-height:clamp(58px,5.8vw,70px);
  margin-top:28px;
  padding:7px 7px 7px clamp(20px,2.2vw,28px);
  border:1px solid rgba(255,244,235,.18);
  border-radius:999px;
  background:linear-gradient(105deg,#725340 0%,#5B4032 48%,#4A3328 100%);
  color:#FFF9F4;
  box-shadow:0 18px 34px rgba(63,51,43,.13), inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
  animation:delicatePulse 2.8s ease-in-out infinite;
}
.enter-button::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.enter-button::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(107,88,72,.16);
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  animation:buttonHalo 2.8s ease-in-out infinite;
}
.enter-button:hover{transform:translateY(-2px);box-shadow:0 24px 44px rgba(63,51,43,.18), inset 0 1px 0 rgba(255,255,255,.1);filter:saturate(1.02)}
.enter-button span{
  position:relative;
  z-index:1;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(16px,1.65vw,21px);
  font-weight:600;
  letter-spacing:.01em;
}
.enter-button b{
  position:relative;
  z-index:1;
  width:clamp(44px,4.8vw,56px);
  height:clamp(44px,4.8vw,56px);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#F6EBE1;
  color:#48342B;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:400;
  flex:0 0 auto;
  box-shadow:0 6px 16px rgba(63,51,43,.12);
}
.enter-hint{
  margin:20px 0 0;
  color:#654D43;
  font-size:clamp(9px,.9vw,12px);
  font-weight:600;
  letter-spacing:.32em;
  white-space:nowrap;
}
.enter-hint span{color:#B66D68;margin-right:.54em}

/* Polaroids da capa */
.intro-photo{
  position:absolute;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}
.intro-photo-left{
  left:clamp(-58px,-3vw,-24px);
  top:58%;
  bottom:auto;
  transform:translateY(-50%) rotate(-7deg);
}
.intro-photo-right{
  right:clamp(-58px,-3vw,-18px);
  top:37%;
  transform:translateY(-50%) rotate(8deg);
}
.intro-photo-frame{
  width:clamp(150px,17vw,215px);
  padding:clamp(9px,1.15vw,13px) clamp(9px,1.15vw,13px) clamp(39px,4.2vw,50px);
  background:#EFE1D3;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(63,51,43,.12);
}
.intro-photo-frame img{
  width:100%;
  aspect-ratio:1/1.08;
  object-fit:cover;
  border-radius:9px;
  opacity:1;
  background:#E9DCCB;
  transition:opacity .28s ease;
}
.intro-photo-frame img:not(.is-loaded){opacity:.94}
.intro-photo>span{
  margin-top:clamp(-35px,-3.4vw,-42px);
  font-family:"Great Vibes",cursive;
  font-size:clamp(17px,2.15vw,26px);
  color:#705447;
  white-space:nowrap;
}
.intro-photo>span b{font-family:"Montserrat",sans-serif;font-size:.55em;color:var(--rose);margin-left:.3em}

.intro-features{
  width:min(920px,100%);
  margin:0 auto;
  padding:24px 0 11px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(181,159,138,.18);
}
.feature-item{
  min-height:103px;
  padding:4px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
}
.feature-item + .feature-item{border-left:1px solid rgba(181,159,138,.28)}
.feature-item svg{
  width:32px;
  height:32px;
  fill:none;
  stroke:#4B382F;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature-item strong,.feature-item span{
  display:block;
  color:#4D3A31;
  font-size:clamp(8px,.72vw,10px);
  line-height:1.4;
  letter-spacing:.17em;
}
.feature-item strong{font-weight:600}
.feature-item span{font-weight:500}
.intro-footer{
  width:min(760px,100%);
  margin:0 auto;
  padding-top:6px;
  text-align:center;
  color:#695247;
  font-size:clamp(8px,.78vw,11px);
  letter-spacing:.34em;
  white-space:nowrap;
}
.intro-footer span{letter-spacing:.34em}

/* SOUND GATE */
.sound-gate{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:22px;
  background:rgba(63,51,43,.26);backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.sound-gate.open{opacity:1;pointer-events:auto}
.sound-gate-card{
  width:min(470px,94vw);padding:42px 36px 34px;border-radius:28px;
  background:rgba(255,255,255,.96);box-shadow:var(--shadow-strong);
  border:1px solid rgba(107,88,72,.12);text-align:center;
}
.sound-gate-icon{width:54px;height:54px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:var(--bg-soft);color:var(--brown);font-size:24px}
.sound-gate-kicker{margin:0 0 8px;text-transform:uppercase;letter-spacing:.24em;font-size:10px;color:#8C7160}
.sound-gate h2{margin:0;font-family:"Cormorant Garamond",serif;font-size:clamp(40px,5vw,52px);font-weight:500;color:var(--brown-dark)}
.sound-gate-card>p:not(.sound-gate-kicker){margin:15px auto 24px;max-width:350px;font-size:17px;line-height:1.55;color:#6D584A}
.sound-gate-primary{border:0;border-radius:999px;background:linear-gradient(105deg,#6B4F3F,#4A3328);color:#fff;padding:8px 8px 8px 21px;display:inline-flex;align-items:center;gap:16px;cursor:pointer;box-shadow:0 15px 30px rgba(63,51,43,.16)}
.sound-gate-primary span{font-family:"Cormorant Garamond",serif;font-size:21px}
.sound-gate-primary b{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#F4E6DB;color:#48342B;font-weight:500}

/* CONTEÚDO INTERNO */
.site{position:relative;z-index:1;padding-bottom:50px;animation:fadeIn .5s ease;background:linear-gradient(180deg,#F8F5F1,#fff)}
.site-header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:82px;padding:0 clamp(18px,4vw,44px);backdrop-filter:blur(12px);background:rgba(248,245,241,.86);border-bottom:1px solid rgba(107,88,72,.08)}
.mini-wordmark{justify-self:start;font-family:"Cormorant Garamond",serif;font-size:34px;color:var(--brown-dark)}
.site-header-center{justify-self:center;color:#5E4B3E;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.site-header-center b{color:var(--rose);margin:0 8px}
.music-toggle{justify-self:end;border:1px solid rgba(107,88,72,.18);background:#fff;border-radius:999px;padding:10px 15px;display:inline-flex;align-items:center;gap:10px;color:var(--brown-dark);font-size:12px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}
.music-dot{width:10px;height:10px;border-radius:50%;background:#7BB581;box-shadow:0 0 0 5px rgba(123,181,129,.14)}
.music-toggle.paused .music-dot{background:#D69B96;box-shadow:0 0 0 5px rgba(214,155,150,.14)}
.story-hero{width:min(1180px,92vw);margin:0 auto;padding:90px 0 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.section-kicker{margin:0 0 10px;color:#9E7F6B;text-transform:uppercase;letter-spacing:.2em;font-size:12px}
.story-hero-copy h2,.closing-card h2,.empty-gallery h3{margin:0;font-family:"Cormorant Garamond",serif;font-weight:500;line-height:.98;color:var(--brown-dark)}
.story-hero-copy h2{font-size:clamp(56px,7vw,92px)}
.story-hero-copy h2 em{font-style:italic;color:var(--brown)}
.story-hero-copy>p:last-child{max-width:620px;margin:26px 0 0;color:#6A574A;font-size:20px;line-height:1.6}
.story-counter{border:1px solid rgba(107,88,72,.12);background:rgba(255,255,255,.88);border-radius:28px;padding:24px 28px;min-width:220px;box-shadow:var(--shadow)}
.story-counter>span{display:block;font-family:"Cormorant Garamond",serif;font-size:72px;line-height:.9;color:var(--brown-dark)}
.story-counter small{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#7A6657}
.gallery-section{width:min(1180px,92vw);margin:0 auto;padding:18px 0 0}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-flow:dense}
.photo-card{position:relative;grid-column:span 6;min-height:340px;border:0;padding:0;overflow:hidden;border-radius:20px;cursor:pointer;background:var(--bg-soft);box-shadow:var(--shadow)}
.photo-card.wide{grid-column:span 8}.photo-card.tall{grid-row:span 2;min-height:690px}.photo-card.square{min-height:390px}
.photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.photo-card::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(46,34,34,.28));opacity:0;transition:.35s}
.photo-card:hover img{transform:scale(1.035);filter:saturate(1.03)}.photo-card:hover::after{opacity:1}
.photo-index{position:absolute;right:16px;bottom:14px;z-index:2;color:#fff;font-family:"Cormorant Garamond",serif;font-size:15px;letter-spacing:.08em;opacity:0;transform:translateY(4px);transition:.35s}.photo-card:hover .photo-index{opacity:.95;transform:none}
.empty-gallery{text-align:center;padding:80px 20px;border:1px dashed rgba(107,88,72,.18);border-radius:28px;background:rgba(255,255,255,.5)}
.empty-gallery span{font-size:34px;color:var(--rose)}.empty-gallery h3{font-size:38px}.empty-gallery p{color:#8D7A6E;font-size:13px}.empty-gallery code{background:#F0E7DE;padding:2px 5px;border-radius:5px}
.quote-section{width:min(980px,90vw);margin:80px auto 150px;padding:20px;text-align:center}
.quote-mark{font-family:"Cormorant Garamond",serif;font-size:110px;line-height:.5;color:#D8B2AE}
.quote-section blockquote{margin:24px auto 34px;font-family:"Cormorant Garamond",serif;font-size:clamp(32px,4.4vw,56px);line-height:1.12;font-weight:400;color:#695647}.quote-line{height:1px;width:70px;background:var(--brown);margin:auto}
.closing-section{padding:0 clamp(16px,3vw,42px) 40px}.closing-card{position:relative;overflow:hidden;width:min(1320px,100%);margin:auto;padding:clamp(80px,10vw,145px) 30px;border-radius:36px;text-align:center;background:linear-gradient(135deg,rgba(233,220,203,.88) 0%,rgba(255,255,255,.95) 46%,rgba(248,245,241,1) 100%);border:1px solid rgba(107,88,72,.08);box-shadow:var(--shadow)}
.closing-card::before,.closing-card::after{content:"";position:absolute;border-radius:50%;opacity:.35}.closing-card::before{width:420px;height:420px;background:rgba(181,159,138,.26);left:-130px;top:-160px}.closing-card::after{width:360px;height:360px;background:rgba(233,220,203,.55);right:-120px;bottom:-130px}.closing-card>*{position:relative;z-index:2}.closing-card h2{font-size:clamp(48px,7vw,88px)}.closing-card h2 em{color:var(--brown);font-style:italic}.closing-heart{font-size:22px;color:var(--brown);margin:32px 0 22px}.closing-note{max-width:520px;margin:auto;color:#6B584B;font-size:19px;line-height:1.5}.signature{margin-top:48px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#897568}.signature strong{display:block;margin-top:7px;font-family:"Great Vibes",cursive;font-size:48px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--brown)}.site-footer{text-align:center;padding:34px 20px 50px;font-size:10px;letter-spacing:.24em;color:#8B7465}.site-footer span{color:#C18482;margin:0 4px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}.reveal.visible{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(49,38,38,.94);backdrop-filter:blur(10px);display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}.lightbox.open{opacity:1;pointer-events:auto}.lightbox figure{margin:0;display:grid;place-items:center;gap:10px}.lightbox img{max-width:min(1050px,100%);max-height:86svh;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.25)}.lightbox figcaption{color:rgba(255,255,255,.65);font-size:10px;letter-spacing:.15em;text-transform:uppercase}.lightbox-close,.lightbox-nav{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:white;border-radius:50%;cursor:pointer;backdrop-filter:blur(8px)}.lightbox-close{position:absolute;right:22px;top:22px;width:44px;height:44px;font-size:28px;line-height:1}.lightbox-nav{width:48px;height:48px;font-size:32px;justify-self:center}.lightbox-nav:hover,.lightbox-close:hover{background:rgba(255,255,255,.15)}
@keyframes delicatePulse{
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 16px 28px rgba(63,51,43,.12), inset 0 1px 0 rgba(255,255,255,.08)}
  50%{transform:translateY(-1px) scale(1.018);box-shadow:0 21px 36px rgba(63,51,43,.18), inset 0 1px 0 rgba(255,255,255,.10)}
}
@keyframes buttonHalo{
  0%,100%{opacity:0;transform:scale(.99)}
  50%{opacity:.75;transform:scale(1.025)}
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(max-width:900px){
  .story-hero{grid-template-columns:1fr}.story-counter{justify-self:start}.photo-card{grid-column:span 6}.photo-card.wide{grid-column:span 12}.photo-card.tall{min-height:600px}
}

@media(max-width:680px){
  .intro{padding:0 16px 18px;min-height:50svh}
  .intro-hero-stage{min-height:50svh;padding:50px 0}
  .couple-label{font-size:18px;gap:6px}
  .intro-center{width:min(300px,82vw);margin:26px auto 0}
  .intro-kicker{font-size:9px;letter-spacing:.27em;margin-bottom:10px}
  .wordmark{font-size:62px}
  .intro-divider{width:250px;margin:12px auto 16px}.intro-divider span{font-size:15px}
  .intro-message{font-size:18px;line-height:1.42;max-width:290px}
  .enter-button{width:268px;max-width:80vw;min-height:54px;margin-top:20px;padding:6px 6px 6px 17px}.enter-button span{font-size:13px}.enter-button b{width:40px;height:40px;font-size:18px}
  .enter-hint{margin-top:15px;font-size:6.5px;letter-spacing:.22em;max-width:94vw}
  .intro-photo-left{left:-58px;top:61%;bottom:auto}.intro-photo-right{right:-58px;top:36%}
  .intro-photo-frame{width:118px;padding:8px 8px 30px;border-radius:9px}.intro-photo-frame img{border-radius:7px}.intro-photo>span{margin-top:-26px;font-size:13px}
  .intro-features{width:100%;padding:17px 0 7px}.feature-item{min-height:82px;padding:3px 5px;gap:5px}.feature-item svg{width:25px;height:25px}.feature-item strong,.feature-item span{font-size:6.2px;letter-spacing:.14em}.intro-footer{font-size:6.8px;letter-spacing:.23em}
  .site-header{grid-template-columns:1fr auto;height:64px}.site-header-center{display:none}.mini-wordmark{font-size:28px}.music-toggle{font-size:9px}.story-hero{padding-top:80px;gap:40px}.story-hero-copy h2{font-size:56px}.story-hero-copy>p:last-child{font-size:18px;margin-top:24px}.story-counter>span{font-size:58px}.gallery{gap:8px}.photo-card,.photo-card.wide{grid-column:span 6;min-height:250px;border-radius:13px}.photo-card.tall{min-height:510px}.photo-card:nth-child(5n+1){grid-column:span 12;min-height:430px}.photo-index{display:none}.quote-section{margin-bottom:100px}.closing-card{border-radius:24px}.closing-card h2{font-size:49px}.closing-section{padding-inline:10px}.lightbox{grid-template-columns:1fr;padding:14px}.lightbox-nav{position:absolute;bottom:25px;width:44px;height:44px}.lightbox-prev{left:calc(50% - 52px)}.lightbox-next{right:calc(50% - 52px)}.lightbox img{max-height:78svh}.lightbox-close{right:14px;top:14px}.sound-gate-card{padding:34px 24px 28px;border-radius:24px}.sound-gate-card>p:not(.sound-gate-kicker){font-size:16px}
}

@media(max-height:760px) and (min-width:681px){
  .intro-hero-stage{min-height:100svh;padding:24px 0}.intro-center{margin:20px auto 0}.intro-photo-left{top:60%}.intro-photo-right{top:35%}.intro-features{padding-top:15px}.feature-item{min-height:76px}.intro-footer{padding-top:0}
}

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


/* =========================================================
   V4.6 · alinhamento final da capa
   Todos os elementos centrais compartilham o mesmo eixo visual.
   ========================================================= */
.intro-topbar,
.intro-center,
.intro-features,
.intro-footer{
  justify-self:center;
  margin-left:auto;
  margin-right:auto;
}

.intro-topbar{
  max-width:760px;
  text-align:center;
}

.couple-label,
.couple-line{
  text-align:center;
}

.intro-center{
  justify-self:center;
  text-align:center;
}

.intro-kicker,
.wordmark,
.intro-message,
.enter-hint{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.intro-message{
  width:100%;
}

.enter-button{
  width:clamp(280px,52vw,430px);
  max-width:78vw;
  margin-left:auto;
  margin-right:auto;
}

.enter-button span{
  font-size:clamp(14px,1.55vw,20px);
}

.enter-button b{
  width:clamp(40px,4.8vw,54px);
  height:clamp(40px,4.8vw,54px);
  font-size:clamp(18px,2.1vw,24px);
}

.enter-hint{
  width:100%;
}

.intro-features{
  max-width:920px;
}

.intro-footer{
  max-width:760px;
}

/* As fotos permanecem decorativas e sempre atrás do conteúdo. */
.intro-photo{
  z-index:1 !important;
}
.intro-topbar,
.intro-center,
.intro-features,
.intro-footer{
  position:relative;
  z-index:5 !important;
}

@media (max-width:900px){
  .intro-center{
    width:min(520px,82vw);
  }
  .enter-button{
    width:clamp(270px,58vw,360px);
    max-width:76vw;
  }
  .enter-button span{
    font-size:clamp(20px,1.9vw,17px);
  }
  .enter-button b{
    width:44px;
    height:44px;
    font-size:20px;
  }
  .intro-photo-left{left:-66px}
  .intro-photo-right{right:-66px}
}

@media (max-width:680px){
  .intro-topbar{width:100%}
  .intro-center{
    width:min(304px,84vw);
    margin:26px auto 36px;
  }
  .couple-label{gap:5px}
  .wordmark{font-size:60px}
  .intro-message{
    max-width:286px;
    font-size:17px;
    line-height:1.44;
  }
  .enter-button{
    width:258px;
    max-width:78vw;
    min-height:52px;
    margin-top:19px;
    padding:6px 6px 6px 16px;
  }
  .enter-button span{
    font-size:18.5px;
  }
  .enter-button b{
    width:39px;
    height:39px;
    font-size:18px;
  }
  .enter-hint{
    margin-top:14px;
    font-size:6.3px;
    letter-spacing:.21em;
  }
  .intro-photo-left{left:-64px}
  .intro-photo-right{right:-64px}
}


/* =========================================================
   V4.8 · responsividade mobile + transição sem travar no áudio
   Esta camada final substitui os ajustes mobile anteriores.
   ========================================================= */

/* O palco principal sempre ocupa a altura útil do aparelho. */
@media (max-width: 680px){
  .intro{
    min-height:auto;
    padding:0 14px max(18px, env(safe-area-inset-bottom));
    overflow:hidden;
  }

  .intro-hero-stage{
    min-height:100svh;
    min-height:100dvh;
    width:100%;
    padding:max(22px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .intro-topbar{
    width:100%;
    flex:0 0 auto;
  }

  .couple-label{
    gap:clamp(4px, .8dvh, 7px);
    font-size:clamp(16px, 4.8vw, 20px);
    line-height:1.02;
  }

  .intro-center{
    width:min(88vw, 340px);
    margin:clamp(18px, 3.2dvh, 30px) auto 0;
  }

  .intro-kicker{
    margin-bottom:clamp(8px, 1.5dvh, 12px);
    font-size:clamp(8px, 2.35vw, 10px);
    letter-spacing:.28em;
  }

  .wordmark{
    font-size:clamp(52px, 16vw, 68px);
    line-height:.9;
  }

  .intro-divider{
    width:min(72vw, 280px);
    margin:clamp(10px, 1.6dvh, 14px) auto clamp(13px, 2.1dvh, 18px);
  }

  .intro-divider span{font-size:clamp(14px, 4vw, 17px)}

  .intro-message{
    width:100%;
    max-width:320px;
    font-size:clamp(16px, 4.65vw, 19px);
    line-height:1.4;
  }

  .enter-button{
    width:min(82vw, 300px);
    max-width:none;
    min-height:clamp(50px, 8.2dvh, 58px);
    margin-top:clamp(18px, 2.8dvh, 24px);
    padding:6px 6px 6px clamp(16px, 4.5vw, 20px);
  }

  .enter-button span{
    font-size:clamp(20px, 3.8vw, 16px);
    line-height:1;
  }

  .enter-button b{
    width:clamp(38px, 11vw, 44px);
    height:clamp(38px, 11vw, 44px);
    font-size:clamp(17px, 5vw, 20px);
  }

  .enter-hint{
    margin-top:clamp(12px, 2dvh, 16px);
    width:auto;
    max-width:92vw;
    font-size:clamp(6.2px, 1.85vw, 8px);
    letter-spacing:.2em;
    white-space:normal;
    line-height:1.45;
  }

  /* Fotos permanecem decorativas, atrás e fora do eixo de leitura. */
  .intro-photo{
    z-index:1 !important;
  }

  .intro-photo-frame{
    width:clamp(92px, 28vw, 122px);
    padding:7px 7px clamp(27px, 8vw, 32px);
  }

  .intro-photo>span{
    margin-top:clamp(-28px, -6.8vw, -23px);
    font-size:clamp(11px, 3.4vw, 14px);
  }

  .intro-photo-left{
    left:clamp(-66px, -15vw, -44px);
    top:62%;
    bottom:auto;
  }

  .intro-photo-right{
    right:clamp(-66px, -15vw, -44px);
    top:35%;
  }

  /* Faixa inferior continua fluida em todos os mobiles. */
  .intro-features{
    width:100%;
    max-width:520px;
    padding:18px 0 9px;
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .feature-item{
    min-height:78px;
    padding:4px 4px;
    gap:5px;
  }

  .feature-item svg{
    width:clamp(22px, 6.4vw, 28px);
    height:clamp(22px, 6.4vw, 28px);
  }

  .feature-item strong,
  .feature-item span{
    font-size:clamp(5.8px, 1.7vw, 7.2px);
    letter-spacing:.11em;
    line-height:1.35;
  }

  .intro-footer{
    width:100%;
    padding-top:7px;
    font-size:clamp(6px, 1.7vw, 7.5px);
    letter-spacing:.2em;
    white-space:normal;
  }
}

/* 320–359 px: mantém tudo dentro da tela sem esmagar o centro. */
@media (max-width: 359px){
  .intro-hero-stage{padding-top:max(18px, env(safe-area-inset-top));padding-bottom:20px}
  .couple-label{font-size:15px}
  .intro-center{width:min(90vw, 294px);margin-top:16px}
  .wordmark{font-size:50px}
  .intro-message{font-size:15.5px;max-width:282px}
  .enter-button{width:min(84vw, 266px);min-height:50px;margin-top:17px}
  .enter-button span{font-size:12.5px}
  .enter-button b{width:37px;height:37px;font-size:17px}
  .enter-hint{font-size:6px;letter-spacing:.16em}
  .intro-photo-frame{width:94px}
  .intro-photo-left{left:-52px}
  .intro-photo-right{right:-52px}
}

/* 360–430 px: faixa mais comum de celulares atuais. */
@media (min-width: 360px) and (max-width: 430px){
  .intro-center{width:min(86vw, 326px)}
  .wordmark{font-size:clamp(56px, 15.5vw, 66px)}
  .enter-button{width:min(80vw, 286px)}
}

/* 431–680 px: phones grandes / dobráveis estreitos. */
@media (min-width: 431px) and (max-width: 680px){
  .intro-center{width:min(76vw, 350px)}
  .couple-label{font-size:20px}
  .wordmark{font-size:68px}
  .intro-message{font-size:19px}
  .enter-button{width:min(68vw, 300px)}
}

/* Telas baixas e mobile em paisagem: prioriza fluidez e rolagem, sem cortar. */
@media (max-width: 900px) and (max-height: 620px){
  .intro-hero-stage{
    min-height:auto;
    padding:max(18px, env(safe-area-inset-top)) 0 26px;
  }
  .couple-label{font-size:16px;gap:3px}
  .intro-center{margin-top:15px}
  .intro-kicker{margin-bottom:7px}
  .wordmark{font-size:50px}
  .intro-divider{margin:8px auto 10px}
  .intro-message{font-size:15px;line-height:1.34}
  .enter-button{margin-top:14px;min-height:48px}
  .enter-hint{margin-top:10px}
  .intro-photo-frame{width:92px}
}

/* A transição de entrada é curta; o áudio não bloqueia mais esta animação. */
.intro.leaving{
  animation:introLeaveFast .32s ease forwards;
  pointer-events:none;
}
@keyframes introLeaveFast{
  to{opacity:0;transform:scale(1.006)}
}


/* =========================================================
   V4.9 · distribuição vertical melhor no mobile
   Remove o espaço vazio entre a capa e os ícones,
   usando o respiro extra na parte superior.
   ========================================================= */
@media (max-width: 680px){
  .intro{
    min-height:100svh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:0 14px max(14px, env(safe-area-inset-bottom));
  }

  .intro-hero-stage{
    flex:1 0 auto;
    min-height:auto;
    width:100%;
    justify-content:flex-start;
    padding:max(40px, calc(env(safe-area-inset-top) + 22px)) 0 8px;
  }

  .intro-topbar{
    margin-top:0;
  }

  .intro-center{
    margin:clamp(22px, 3.8dvh, 34px) auto 0;
  }

  .intro-features{
    flex:0 0 auto;
    margin-top:clamp(18px, 3.2dvh, 28px);
    padding:15px 0 8px;
  }

  .intro-footer{
    flex:0 0 auto;
    padding-top:6px;
    padding-bottom:0;
  }
}

@media (max-width: 359px){
  .intro-hero-stage{
    padding-top:max(34px, calc(env(safe-area-inset-top) + 18px));
  }
  .intro-center{
    margin-top:18px;
  }
  .intro-features{
    margin-top:16px;
  }
}

@media (min-width: 360px) and (max-width: 430px){
  .intro-hero-stage{
    padding-top:max(100px, calc(env(safe-area-inset-top) + 24px));
  }
}

@media (min-width: 431px) and (max-width: 680px){
  .intro-hero-stage{
    padding-top:max(48px, calc(env(safe-area-inset-top) + 26px));
  }
}

@media (max-width: 900px) and (max-height: 620px){
  .intro{
    min-height:auto;
  }
  .intro-hero-stage{
    flex:none;
    min-height:auto;
    padding:max(18px, env(safe-area-inset-top)) 0 10px;
  }
  .intro-features{
    margin-top:14px;
  }
}