/* ============================================
   FONTES
   ============================================ */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/* ============================================
   PALETA — fundo bege, tudo mais em roxo
   ============================================ */
:root {
  --bege:        #F0ECE6;
  --roxo:        #8A13DF;
  --roxo-escuro: #4C0875;
  --lilas:       #D0B2FB;
  --lilas-claro: #F3DDFD;

  --bg: var(--bege);
  --text: var(--roxo);
  --roxo-06: rgba(138, 19, 223, .06);
  --roxo-12: rgba(138, 19, 223, .12);
  --roxo-25: rgba(138, 19, 223, .25);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overscroll-behavior: none;
  /* clip (não hidden): impede o Safari iOS de "arrastar" a página pro lado quando algo vaza 1px */
  overflow-x: clip;
}

body {
  font-family: "PP Neue Montreal", sans-serif;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
}
@media (min-width: 700px) {
  body { border-inline: 1px solid var(--roxo-12); }
}

/* ============================================
   LAYOUT DE TELAS (screens) — 1 por vez
   ============================================ */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(48px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.screen.active {
  min-height: 100dvh; /* ocupa a tela toda: o botão principal vai pro rodapé (zona do polegar) */
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
  transform: translateX(0);
  position: relative;
}

.progress { display: flex; gap: 6px; margin-bottom: 20px; }
.progress span {
  height: 4px; flex: 1; border-radius: 2px;
  background: var(--roxo-12);
  transition: background .3s;
}
.progress span.done { background: var(--roxo); }

h1, h2 { font-weight: 700; line-height: 1.15; color: var(--roxo); }
h1 { font-size: 30px; margin-bottom: 8px; }
h2 { font-size: 22px; margin-bottom: 12px; }
p  { font-size: 15px; line-height: 1.5; color: var(--roxo); }

.eyebrow {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--roxo); opacity: .7; margin-bottom: 6px;
}

.btn {
  font-family: inherit; font-weight: 700; font-size: 16px;
  color: var(--bege);
  background: var(--roxo);
  border: none; border-radius: 999px;
  padding: 16px 20px; width: 100%; cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }
.btn.secondary {
  background: transparent;
  color: var(--roxo);
  border: 1.5px solid var(--roxo);
}
.btn:disabled { opacity: .4; pointer-events: none; }
.btn[hidden] { display: none; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.topbar .progress { flex: 1; margin: 0 0 0 12px; }
.back-btn {
  background: none; border: none; color: var(--roxo);
  font-size: 22px; padding: 6px; cursor: pointer;
}

/* ============================================
   TELA 1 — INFO
   ============================================ */
.info-card {
  background: var(--roxo-06);
  border: 1px solid var(--roxo-12);
  border-radius: 18px;
  padding: 16px;
  margin: 18px 0;
}

/* ============================================
   TELAS 2 e 3 — CARROSSÉIS (BEBIDA / COMIDA)
   ============================================ */
.stage {
  position: relative;
  width: 100%;
  margin: 4px auto 0;
  overflow: hidden;
}
/* proporções = crop das animações (bebida 600x864, comida 720x706) */
/* bebida: full-bleed até o topo da tela, fumaça passa por cima do título */
#screen-drink { padding-top: 0; }
#screen-drink .topbar,
#screen-drink h2 { position: absolute; left: 24px; right: 24px; margin: 0; }
#screen-drink .topbar { top: calc(48px + var(--safe-top)); z-index: 3; }
#screen-drink h2 { top: calc(48px + var(--safe-top) + 48px); z-index: 1; }
.stage-drink {
  z-index: 2;
  width: calc(100% + 48px);
  margin: 0 -24px;
  height: min(calc(min(100vw, 480px) * 1.27), 62dvh); /* proporção do webp da bebida (600x762), limitada em telas baixas */
}
.stage-drink .slide img { object-position: top center; }
.stage-drink .swipe-hint { bottom: 0; }
/* comida: sangra nas laterais e cresce pra ocupar o espaço livre da tela (webp quadrado 720x720) */
.stage-food {
  flex: 1;
  min-height: 200px;
  width: calc(100% + 48px);
  margin: 0 -24px;
  max-height: min(100vw, 480px);
}

.carousel {
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; /* o swipe não "vaza" pra página */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
}
.slide img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
/* comidas ~15% menores no palco (a bebida fica no tamanho cheio, a fumaça precisa do topo) */
.stage-food .slide img { transform: scale(.85); }

.swipe-hint {
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center; font-size: 12px; letter-spacing: .08em;
  color: var(--roxo); opacity: .55; pointer-events: none;
  transition: opacity .4s;
}
.swipe-hint.gone { opacity: 0; }

.pick-meta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 10px 0 14px; }
.pick-name { font-weight: 700; font-size: 18px; }
.dots { display: flex; gap: 6px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--roxo-25); transition: background .2s, transform .2s; }
.dots span.active { background: var(--roxo); transform: scale(1.3); }

#brasileiro-btn { margin-bottom: 10px; }

/* ============================================
   TELA 4 — RESUMO: STILLS LADO A LADO
   ============================================ */
.summary {
  margin: 0 -24px 6px;
  flex: 1;
  min-height: 0;
  /* grid: a fileira (bebida + comida) fica centralizada no espaço livre, com as bases alinhadas */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  align-content: center;
}
.summary-item {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.summary-item img { width: 118%; max-width: none; max-height: 46dvh; object-fit: contain; object-position: bottom; }
.summary-item span { font-weight: 700; font-size: 16px; }
.summary-plus { font-size: 28px; font-weight: 700; padding-bottom: 110px; opacity: .6; margin: 0 -14px; position: relative; z-index: 1; }
.summary-note { text-align: center; margin-bottom: 18px; opacity: .8; }

/* ============================================
   TELA 5 — EMBRULHAR / "PEGAR SUA QUENTINHA"
   ============================================ */
#wrap-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}
#pegar-quentinha-btn { transition: opacity .4s ease; }

/* ============================================
   TELA 6 — AGRADECIMENTO + MENSAGEM
   ============================================ */
.thanks-title { font-size: clamp(30px, 9.5vw, 38px); margin: 32px 0 40px; text-align: center; }
.msg-invite { margin-bottom: 20px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--roxo); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
  color: var(--roxo-escuro);
  background: #fff;
  border: 1px solid var(--roxo-25);
  border-radius: 12px; padding: 14px; resize: none;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--roxo); outline-offset: -1px; }
.field textarea { min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: var(--roxo); opacity: .4; }
.form-msg { font-size: 13px; margin-top: 10px; min-height: 18px; }
.form-msg.ok { color: #1f8a4c; }
.form-msg.err { color: #c0392b; }

/* ============================================
   ACESSIBILIDADE / POLIMENTO MOBILE
   ============================================ */
button, .carousel, .slide img { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 4px; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: -1px; border-radius: 12px; }


@media (prefers-reduced-motion: reduce) {
  .screen, .progress span, .dots span, .btn, .swipe-hint, #pegar-quentinha-btn { transition: none !important; }
  .carousel { scroll-behavior: auto; }
}

/* rodapé de contatos (tela final) */
.contacts {
  margin-top: auto;
  padding-top: 28px;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  font-size: 14px; color: var(--roxo); opacity: .85;
}
.contacts a { color: inherit; text-decoration: none; font-weight: 700; }
.contacts a:active { opacity: .6; }

/* tela de embrulho: marmita um pouco menor no palco + bloco de ações no rodapé */
#wrap-stage img { inset: 8%; width: 84%; height: 84%; }
.wrap-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.wrap-note { text-align: center; font-size: 14px; line-height: 1.45; margin-bottom: 4px; }
.wrap-note a { color: inherit; font-weight: 700; text-decoration: underline; }
.wrap-note[hidden], #wrap-skip[hidden] { display: none; }

/* ============================================
   DESKTOP — layout horizontal: texto à esquerda, animação à direita
   ============================================ */
/* pane-top / pane-bottom só existem pro grid do desktop; no celular somem do layout */
.pane-top, .pane-bottom:not(.wrap-actions) { display: contents; }

/* setas do carrossel (aparecem só onde há mouse) */
.car-arrow {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--roxo);
  background: rgba(240, 236, 230, .88);
  color: var(--roxo); font-size: 26px; line-height: 1;
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: opacity .2s, transform .15s;
}
.car-arrow.prev { left: 14px; }
.car-arrow.next { right: 14px; }
.car-arrow:hover { background: var(--roxo); color: var(--bege); }
.car-arrow:active { transform: translateY(-50%) scale(.94); }
.car-arrow:disabled { opacity: .2; pointer-events: none; }
.stage-drink .car-arrow { top: 74%; } /* na altura da xícara, não da fumaça */
@media (hover: hover) and (pointer: fine) {
  .car-arrow { display: flex; }
}

.desktop-aside { display: none; }



/* ============================================
   DESKTOP (>= 700px): moldura de celular centralizada, arte grande, setas/teclado no carrossel
   ============================================ */
/*   ============================================ */
@media (min-width: 700px) {
  html {
    min-height: 100%;
    display: grid; place-items: center;
    background:
      radial-gradient(55% 45% at 50% 42%, rgba(138, 19, 223, .10), transparent 70%),
      var(--bege);
  }
  body {
    height: min(calc(100vh - 48px), 900px);
    min-height: 0;
    margin: 24px auto;
    border: 1px solid var(--roxo-12);
    border-radius: 36px;
    box-shadow: 0 30px 80px rgba(76, 8, 117, .16), 0 2px 8px rgba(76, 8, 117, .08);
    overflow: hidden auto;
    scrollbar-width: none;
  }
  body::-webkit-scrollbar { display: none; }
  .screen.active { min-height: 100%; }
}

@media (min-width: 1000px) {
  .desktop-aside {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    position: fixed; top: 50%; left: calc(50% + 240px + 56px);
    transform: translateY(-50%);
    width: 230px; text-align: center; color: var(--roxo);
  }
  .desktop-aside img {
    width: 150px; height: 150px; border-radius: 18px;
    background: #fff; border: 1px solid var(--roxo-12); padding: 8px;
  }
  .desktop-aside p { font-size: 14px; line-height: 1.5; }
}