/* =====================================================================
   Agenda de Dezembro — editorial vermelho e branco (inspirado em Canva)
   Páginas 9:16 medidas em cqw (1cqw = 1% da largura da página).
   ===================================================================== */
:root {
  --verm: #8E1418;
  --verm-vivo: #B11E24;
  --tinta: #2B1D1D;
  --suave: #6F5F5C;
  --papel: #F6F3F0;
  --fantasma: #E6E0DC;
  --titulo: "Instrument Serif", "Bodoni Moda", Didot, Georgia, serif;
  --sc: "Playfair Display SC", "Instrument Serif", Georgia, serif;
  --script: "Pinyon Script", "Brush Script MT", cursive;
  --txt: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #E8E2DE; color: var(--tinta); font-family: var(--txt); }
h1, h2, p, ul, figure { margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
#paginas { width: 100%; max-width: 480px; margin: 0 auto; padding: 10px 8px 90px; display: flex; flex-direction: column; gap: 12px; }

.pg {
  position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px;
  container-type: inline-size; background: radial-gradient(120% 70% at 50% 0%, #fff 0%, var(--papel) 70%);
  box-shadow: 0 14px 34px -16px rgba(43, 29, 29, .55); font-size: 3.4cqw; line-height: 1.45;
}
.pg > * { position: absolute; z-index: 1; }
.fundo { inset: 0; z-index: 0 !important; background-size: cover; background-position: center; }
.veu { inset: 0; z-index: 0 !important; }
.contador { top: 3cqw; left: 3cqw; z-index: 9 !important; font-size: 2.5cqw; font-weight: 600; color: var(--verm); background: rgba(255,255,255,.85); padding: .5cqw 2cqw; border-radius: 99px; }
.script { font-family: var(--script); font-weight: 400; }
.ic { width: 6cqw; height: 6cqw; flex: none; }

/* Polaroid com foto real + laço de cetim recortado */
.polaroid { background: #fff; padding: 1.6cqw 1.6cqw 5.4cqw; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0,0,0,.45); }
.polaroid > img:first-child { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroid__laco { position: absolute; left: 50%; top: -6.4cqw; width: 11cqw; transform: translateX(-50%) rotate(-4deg); filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.35)); }

/* ---------- 1. Capa ---------- */
.arroba { top: 11cqw; left: 0; right: 0; text-align: center; font-size: 3.2cqw; letter-spacing: .04em; color: var(--tinta); font-style: italic; font-family: var(--titulo); }
.capa__titulo { top: 15cqw; left: 0; right: 0; text-align: center; }
.capa__titulo h1 { position: relative; font-family: var(--titulo); font-weight: 400; font-size: 26cqw; line-height: .85; letter-spacing: .01em; text-transform: uppercase; color: var(--verm); transform: scaleY(1.18); transform-origin: top; }
.fantasma { position: absolute; left: 0; right: 0; top: 13cqw; font-family: var(--script); font-size: 22cqw; color: var(--fantasma); line-height: 1; opacity: .85; }
.capa__lado { top: 51cqw; font-family: var(--titulo); font-style: italic; font-size: 8cqw; color: var(--verm); }
.capa__lado--e { left: 12cqw; }
.capa__lado--d { right: 12cqw; font-style: normal; letter-spacing: .04em; }
.capa__arvore { left: 0; right: 0; bottom: -2cqw; height: 118cqw; }
.arvore { position: absolute; left: 50%; bottom: 0; height: 100%; transform: translateX(-50%); filter: drop-shadow(0 2cqw 3cqw rgba(0,0,0,.25)); }
.capa__arvore .polaroid { position: absolute; width: 17cqw; padding: 1.1cqw 1.1cqw 3.6cqw; }
.capa__arvore .polaroid__laco { width: 8.5cqw; top: -4.6cqw; }
/* o laço do QR fica pendurado ACIMA da moldura para não cobrir o código (senão a câmera não lê) */
.pol-qr .polaroid__laco { width: 8.5cqw; top: -12.6cqw; transform: translateX(-50%) rotate(-6deg); }
.pol-topo { left: 40cqw; top: 6cqw; width: 20cqw !important; transform: rotate(3deg); }
.pol-1 { left: 21cqw; top: 38cqw; transform: rotate(-8deg); }
.pol-2 { left: 61cqw; top: 42cqw; transform: rotate(7deg); }
.pol-3 { left: 12cqw; top: 76cqw; transform: rotate(5deg); }
.pol-4 { left: 42cqw; top: 70cqw; transform: rotate(-4deg); }
.pol-5 { left: 72cqw; top: 80cqw; transform: rotate(-9deg); }
.capa__nome { bottom: 4cqw; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 3 !important; font-family: var(--sc); font-size: 3cqw; letter-spacing: .14em; color: #fff; background: var(--verm); padding: 1.2cqw 4.4cqw; border-radius: 99px; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0,0,0,.45); }

/* ---------- 2. Política ---------- */
.disco { filter: drop-shadow(0 2cqw 3cqw rgba(0,0,0,.35)); }
.disco--grande { width: 44cqw; right: -12cqw; top: -8cqw; }
.disco--pend { width: 16cqw; right: 33cqw; top: -17cqw; }
.script--kicker { top: 30cqw; left: 7cqw; font-size: 7.6cqw; color: var(--tinta); }
.titulo-bloco { top: 40cqw; left: 7cqw; font-family: var(--titulo); font-weight: 400; text-transform: uppercase; color: var(--verm); font-size: 13cqw; line-height: .86; transform: scaleY(1.15); transform-origin: top left; letter-spacing: .005em; }
.regras { top: 73cqw; left: 7cqw; right: 7cqw; list-style: none; display: flex; flex-direction: column; gap: 2.2cqw; }
.regras li { position: relative; padding-left: 4.6cqw; font-size: 3.05cqw; line-height: 1.38; color: var(--suave); }
.regras li::before { content: ""; position: absolute; left: 0; top: 1.3cqw; width: 2cqw; height: 2cqw; background: var(--verm); transform: rotate(45deg); }
.regras strong { color: var(--tinta); font-weight: 600; }
.pilula { display: inline-block; border: .35cqw solid var(--verm); color: var(--verm); border-radius: 99px; padding: 1cqw 4cqw; font-family: var(--sc); font-size: 3cqw; letter-spacing: .16em; text-decoration: none; }
.pg--pol .pilula { left: 7cqw; bottom: 14cqw; }
.pol-pol { width: 27cqw; right: 7cqw; bottom: 6cqw; transform: rotate(6deg); }
.assina-arroba { bottom: 5cqw; left: 7cqw; font-family: var(--titulo); font-style: italic; font-size: 4cqw; color: var(--tinta); }

/* ---------- 3. Calendário (etiqueta) ---------- */
.veu--vermelho { background: linear-gradient(180deg, rgba(90,8,12,.15), rgba(90,8,12,.35)); }
.etiqueta {
  left: 10cqw; right: 10cqw; top: 22cqw; padding: 26cqw 6cqw 6cqw; text-align: center; background: #FBF9F7;
  clip-path: polygon(14% 0, 86% 0, 100% 6%, 100% 100%, 0 100%, 0 6%);
  box-shadow: 0 3cqw 6cqw rgba(0,0,0,.4);
}
.etiqueta::before { content: ""; position: absolute; left: 50%; top: 3.4cqw; width: 4.4cqw; height: 4.4cqw; transform: translateX(-50%); border-radius: 50%; background: #d9cfca; box-shadow: inset 0 .4cqw .6cqw rgba(0,0,0,.35); }
.etiqueta__laco { position: absolute; left: 50%; top: -14cqw; width: 26cqw; transform: translateX(-50%) rotate(-3deg); z-index: 3; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.45)); }
.pg--cal .etiqueta { position: absolute; overflow: visible; }
.cal-laco { left: 50%; top: 21.5cqw; width: 18cqw; transform: translateX(-50%) rotate(-3deg); z-index: 4 !important; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.45)); }
.pg--cal { overflow: hidden; }
.script--mes { font-size: 15cqw; line-height: 1; color: var(--verm); margin-top: 0; }
.etiqueta__sub { font-family: var(--sc); font-size: 2.8cqw; letter-spacing: .12em; color: var(--tinta); margin-top: .6cqw; }
.etiqueta__cab { margin: 3.4cqw 0 2cqw; font-size: 2.6cqw; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--verm); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .8cqw .4cqw; }
.cs { font-family: var(--titulo); font-size: 4.4cqw; color: var(--verm); }
.cd { display: grid; place-items: center; aspect-ratio: 1; font-size: 3.5cqw; font-weight: 500; color: var(--tinta); border-radius: 50%; }
.cd--f { color: #C7BCB8; text-decoration: line-through; }
.cd--e { background: var(--verm); color: #fff; font-weight: 600; }
.legenda { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: .6cqw 3cqw; margin-top: 2.4cqw; font-size: 2.5cqw; color: var(--suave); }
.legenda li { display: flex; align-items: center; gap: 1cqw; }
.lg { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: .3cqw solid var(--tinta); display: inline-block; }
.lg--f { border-color: #C7BCB8; background: repeating-linear-gradient(45deg, #C7BCB8 0 .3cqw, transparent .3cqw .9cqw); }
.lg--e { background: var(--verm); border-color: var(--verm); }
.horario { margin-top: 3cqw; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; padding: 2.4cqw 3cqw; border-radius: 99px; background: var(--verm); color: #fff; }
.horario .ic { width: 6cqw; height: 6cqw; }
.horario p { text-align: left; font-size: 3.6cqw; line-height: 1.2; }
.horario small { display: block; font-size: 2.4cqw; opacity: .9; }

/* ---------- 4. Sinal ---------- */
.bengala { width: 22cqw; right: -2cqw; top: 6cqw; transform: rotate(14deg); filter: drop-shadow(0 2cqw 2cqw rgba(0,0,0,.25)); }
.bola { filter: drop-shadow(0 1.6cqw 1.6cqw rgba(0,0,0,.28)); }
.bola--a { width: 18cqw; left: -4cqw; bottom: 4cqw; }
.bola--b { width: 13cqw; left: 13cqw; bottom: 1cqw; transform: rotate(-12deg); }
.titulo-bloco--esq { top: 12cqw; font-size: 15cqw; }
.titulo-bloco span { font-size: .62em; }
.valor { top: 44cqw; left: 7cqw; display: flex; flex-direction: column; }
.valor span { font-family: var(--sc); font-size: 2.8cqw; letter-spacing: .2em; color: var(--suave); }
.valor strong { font-family: var(--titulo); font-weight: 400; font-size: 14cqw; line-height: 1; color: var(--verm); }
.sinal__texto { top: 63cqw; left: 7cqw; width: 50cqw; }
.sinal__texto p { font-size: 3.1cqw; color: var(--suave); margin-bottom: 1.8cqw; }
.sinal__texto strong { color: var(--tinta); }
.pol-qr { right: 7cqw; top: 58cqw; width: 34cqw; transform: rotate(4deg); padding-bottom: 2cqw; }
.pol-qr__qr { background: #fff; }
.pol-qr__qr svg { display: block; width: 100%; height: auto; }
.pol-qr figcaption { text-align: center; font-family: var(--titulo); font-style: italic; font-size: 3cqw; color: var(--tinta); margin-top: 1cqw; }
.pix-dados { left: 7cqw; right: 7cqw; top: 102cqw; display: flex; flex-direction: column; align-items: flex-start; gap: .4cqw; }
.pix-dados__tipo { font-size: 2.5cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--verm); }
.pix-dados__chave { font-family: ui-monospace, Consolas, monospace; font-size: 3cqw; color: var(--tinta); word-break: break-all; }
.pix-dados__nome { font-size: 2.6cqw; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.botoes { display: flex; gap: 2cqw; margin-top: 1.4cqw; }
.botoes button { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.6cqw 3cqw; border-radius: 99px; border: .3cqw solid var(--verm); background: #fff; color: var(--verm); font-size: 2.8cqw; font-weight: 600; cursor: pointer; }
.botoes .ic { width: 3.6cqw; height: 3.6cqw; }
.botao-vermelho { display: inline-flex; align-items: center; justify-content: center; gap: 2cqw; margin-top: 2.4cqw; padding: 2.8cqw 6cqw; border-radius: 99px; background: var(--verm); color: #fff; text-decoration: none; font-weight: 600; font-size: 3.4cqw; box-shadow: 0 1.6cqw 3cqw -1.4cqw rgba(142,20,24,.9); }
.botao-vermelho .ic { width: 5cqw; height: 5cqw; }

/* ---------- 5. Localização e pagamento ---------- */
.laco-solto { filter: drop-shadow(0 1.4cqw 1.6cqw rgba(0,0,0,.3)); }
.laco-solto--a { width: 20cqw; left: 5cqw; top: 30cqw; transform: rotate(-16deg); }
.laco-solto--b { width: 15cqw; right: 1.5cqw; top: 2cqw; transform: rotate(14deg); }
.laco-solto--c { width: 15cqw; right: 4cqw; bottom: 22cqw; transform: rotate(-8deg); }
.script--titulo { left: 0; right: 0; top: 10cqw; text-align: center; font-size: 17cqw; line-height: 1; color: var(--verm); }
.script--titulo2 { top: 86cqw; font-size: 15cqw; }
.formas { top: 37cqw; left: 32cqw; right: 8cqw; list-style: none; display: flex; flex-direction: column; gap: 3.6cqw; }
.formas li { display: flex; align-items: center; gap: 4cqw; font-family: var(--sc); font-size: 4.6cqw; letter-spacing: .1em; color: var(--tinta); }
.formas .ic { width: 10cqw; height: 10cqw; color: var(--verm); }
.endereco { top: 110cqw; left: 10cqw; right: 10cqw; display: flex; align-items: center; justify-content: center; gap: 3cqw; text-decoration: none; }
.endereco .ic { width: 9cqw; height: 9cqw; }
.ic--verm { color: var(--verm); }
.endereco span { font-size: 3.2cqw; color: var(--suave); display: flex; flex-direction: column; }
.endereco strong { font-family: var(--titulo); font-weight: 400; font-size: 6cqw; color: var(--tinta); line-height: 1.05; }
.pilula--cheia { top: 127cqw; left: 50%; transform: translateX(-50%); background: var(--verm); color: #fff; white-space: nowrap; font-size: 2.7cqw; padding: 1.6cqw 5cqw; }
.redes { left: 0; right: 0; bottom: 8cqw; display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.redes a { display: inline-flex; align-items: center; gap: 2cqw; text-decoration: none; font-size: 3.4cqw; color: var(--tinta); }
.redes .ic { width: 5.4cqw; height: 5.4cqw; color: var(--verm); }

/* ---------- 6. Agradecimento ---------- */
.fundo--guirlanda { background-position: 50% 80%; }
.veu--escuro { background: linear-gradient(180deg, rgba(10,16,18,.9) 0%, rgba(10,16,18,.72) 40%, rgba(10,16,18,.78) 62%, rgba(10,16,18,.7) 82%, rgba(10,16,18,.55) 100%); }
.pol-studio { width: 54cqw; left: 23cqw; top: 13cqw; transform: rotate(-3deg); }
.pol-studio .polaroid__laco { width: 16cqw; top: -9cqw; }
.fim__titulo { left: 0; right: 0; top: 81cqw; text-align: center; font-size: 15cqw; line-height: 1; color: #fff; text-shadow: 0 .6cqw 2cqw rgba(0,0,0,.5); }
.fim__texto { left: 9cqw; right: 9cqw; top: 103cqw; text-align: center; }
.fim__texto p { font-size: 3.2cqw; color: rgba(255,255,255,.92); margin-bottom: 1.6cqw; }
.fim__assina { left: 0; right: 0; top: 129cqw; text-align: center; font-size: 9cqw; color: #fff; line-height: 1; }
.botao-vermelho--claro { left: 50%; bottom: 6cqw; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--verm); }

/* ---------- Flutuante e aviso ---------- */
.flutuante { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 99px; background: var(--verm); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(142,20,24,.8); transform: translateY(120px); opacity: 0; transition: .35s; }
.flutuante .ic { width: 22px; height: 22px; }
.flutuante--ver { transform: none; opacity: 1; }
.aviso { position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 16px); z-index: 30; background: #2B1D1D; color: #fff; padding: 10px 18px; border-radius: 99px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; }
.aviso--ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Exportação (PDF / imagens) ---------- */
body.exportar { background: none; }
body.exportar #paginas { max-width: none; padding: 0; gap: 0; }
body.exportar .pg { border-radius: 0; box-shadow: none; }
body.exportar .web, body.exportar .flutuante, body.exportar .aviso { display: none !important; }