/* Área do cliente · telas do presente */
.carregando { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }

/* Abertura */
.abertura { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; color: #FFF8EE; }
.abertura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: respira 9s ease-in-out infinite alternate; }
@keyframes respira { to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .abertura img { animation: none; } }
.abertura .veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,15,10,.45), rgba(30,15,10,.1) 35%, rgba(30,15,10,.75)); }
.abertura .conteudo { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 28px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.abertura .topo-capa { position: absolute; top: 30px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: .34em; font-weight: 500; }
.abertura .eyebrow { color: #F3E3CB; }
.abertura p { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; margin: 10px 0 22px; color: #FFF3E4; max-width: 340px; }

/* Início (hub) */
.hero { position: relative; height: 250px; overflow: hidden; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,15,10,.2), rgba(30,15,10,0) 40%, var(--paper)); }
.hero .topo-capa { position: absolute; top: 22px; left: 0; right: 0; text-align: center; color: #FFF8EE; font-size: 10px; letter-spacing: .34em; font-weight: 500; }
.cabeca { margin-top: -54px; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 24px; }
.passos { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 8px; }
.passo {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: 16px;
  border: 1px solid var(--line); background: #FFFDF9; color: var(--ink); text-decoration: none;
}
.passo:hover { border-color: var(--gold); }
.passo .num { flex: 0 0 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font-family: var(--serif); font-size: 17px; color: var(--accent); }
.passo .num.feito { background: var(--accent); border-color: var(--accent); color: #FFF8EE; }
.passo .txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.passo .txt strong { font-family: var(--serif); font-weight: 500; font-size: 20px; }
.passo .txt span { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.passo .seta { color: var(--ink-soft); }
.passo.verao { position: relative; overflow: hidden; border: none; color: #FFF8EE; min-height: 128px; align-items: flex-end; }
.passo.verao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.passo.verao::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,30,40,.82), rgba(20,30,40,.35)); z-index: 1; }
.passo.verao > *:not(img) { position: relative; z-index: 2; }
.passo.verao .num { border-color: #F3E3CB; color: #FFF8EE; }
.passo.verao .txt span { color: #F3E3CB; }
.passo.verao .seta { color: #FFF8EE; }
.selo { display: inline-block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; background: #EEF5EC; color: var(--ok); font-weight: 500; }
.selo.atencao { background: #FFF1E0; color: #8A5A12; }
.rodape-hub { padding: 18px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Dedicatórias */
.lista-ded { display: flex; flex-direction: column; gap: 12px; }
.ded { display: flex; flex-direction: column; gap: 10px; }
.ded .para { font-family: var(--serif); font-size: 22px; }
.ded .previa { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-soft); line-height: 1.4; overflow-wrap: anywhere; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.wa { background: #1F7A4D; border-color: #1F7A4D; }
.wa:hover { background: #17603C; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.consent input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.previa-ded { text-align: center; padding: 20px 16px; border: 1px dashed var(--gold); border-radius: 14px; background: var(--paper); }
.previa-ded .t { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.previa-ded .a { font-family: var(--script); font-size: 30px; color: var(--accent); }
.recado { border-left: 2px solid var(--gold); padding: 4px 0 4px 12px; display: flex; flex-direction: column; gap: 6px; }
.recado .nome { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.recado .t { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }

/* Calendário */
.folha { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 12px 30px rgba(60,30,20,.18); background: #fff; }
.miniaturas { display: flex; justify-content: center; gap: 10px; }
.miniaturas button { width: 72px; height: 72px; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: none; opacity: .75; }
.miniaturas button[aria-checked="true"] { border: 2px solid var(--accent); opacity: 1; }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Verão */
.verao-hero { position: relative; height: 300px; overflow: hidden; }
.verao-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.verao-hero .fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, var(--paper)); }
.preco { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.preco .de { font-size: 13px; color: var(--ink-soft); }
.preco .de s { text-decoration-thickness: 1px; }
.preco .por { font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--accent); }
.preco .por small { font-size: 22px; }
.etiqueta { display: inline-block; background: var(--accent); color: #FFF8EE; font-size: 11px; letter-spacing: .18em; padding: 5px 10px; border-radius: 12px; }
.inclui { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.inclui li { position: relative; padding-left: 16px; }
.inclui li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.contador-pessoas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.contador-pessoas + .contador-pessoas { border-top: 1px solid var(--line); }
.contador-pessoas .rot { display: flex; flex-direction: column; font-size: 14px; }
.contador-pessoas .rot small { color: var(--ink-soft); font-size: 12px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #FFFDF9; font-size: 18px; color: var(--ink); }
.stepper output { min-width: 28px; text-align: center; font-size: 17px; }
.resumo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.resumo div { display: flex; justify-content: space-between; gap: 10px; }
.resumo div span:last-child { white-space: nowrap; }
.resumo .total { font-weight: 500; font-size: 16px; padding-top: 8px; border-top: 1px solid var(--line); }
.codigo-pass { font-family: var(--serif); font-size: 24px; letter-spacing: .14em; color: var(--accent); }

/* Pix */
.campo textarea.pix-codigo, .pix-codigo { width: 100%; min-height: 96px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.4; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #FFFDF9; resize: none; word-break: break-all; }
.qr { display: flex; justify-content: center; }
.qr canvas, .qr img { width: 200px; height: 200px; image-rendering: pixelated; }
.valor-grande { font-family: var(--serif); font-size: 48px; color: var(--accent); line-height: 1; text-align: center; }
.passos-pix { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Barra da demonstração */
.demo-btn { position: fixed; right: 12px; top: 64px; z-index: 40; border: none; border-radius: 20px; background: #2F2A26; color: #fff; font-size: 11px; letter-spacing: .12em; padding: 10px 14px; text-transform: uppercase; opacity: .85; }
.demo-painel { position: fixed; right: 12px; top: 108px; z-index: 41; width: 250px; background: #2F2A26; color: #fff; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.demo-painel button, .demo-painel a { background: #4A433D; color: #fff; border: none; border-radius: 8px; padding: 9px 10px; text-align: left; font-size: 12px; text-decoration: none; }
.demo-painel .info { opacity: .75; line-height: 1.4; }