/* =====================================================================
   TEMA "VIRADA" · confraternização, Natal e Réveillon. Paleta, fontes e peças do tema.
   O clima vem do config.js (preset) e chega aqui como <html data-preset="...">:
     confraternizacao  dourado sobre azul-noite (padrão)
     natal             verde, vermelho-vinho e dourado, estrelas e pinheiro
     reveillon         branco, prata e dourado, com a contagem num céu de meia-noite
   O layout comum fica em base.css (carregado antes) e não muda de um tema para outro.
   ===================================================================== */
:root {
  --cor-fundo: #0a1430;
  --cor-fundo-2: #0f1c3f;
  --cor-cartao: rgba(255, 244, 214, .045);
  --cor-linha: rgba(217, 180, 90, .3);
  --cor-texto: #f3ecdc;
  --cor-suave: #b8b4a8;
  --cor-destaque: #d9b45a;
  --cor-destaque-claro: #f3dc9a;
  --cor-destaque-escuro: #9a7426;
  --cor-brilho: #fffaf0;
  --cor-hover: rgba(217, 180, 90, .12);
  --cor-campo: rgba(0, 0, 0, .25);
  --cor-flutuante: rgba(10, 20, 48, .84);
  --cor-botao-texto: #1b1408;
  --cor-confete: #f3dc9a, #d9b45a, #fffaf0, #9a7426, #9fbaff;
  --cor-enfeite: 243, 220, 154;

  /* peças do tema */
  --fogos: #f3dc9a, #d9b45a, #fff3d6, #9fbaff, #ffd27a;   /* cores dos fogos */
  --fogos-nome: #fff6dc, #f3dc9a, #e7c46e, #d9b45a;       /* faíscas que escrevem o nome */
  --ceu: fogos;                                            /* céu da capa: fogos | estrelas | brilhos */
  --ceu-cores: #f3dc9a, #fff3d6, #9fbaff;
  --cor-bebida: #e8c463; --cor-bebida-clara: #f8e7a8;
  --cor-vidro: rgba(255, 255, 255, .62);
  --cor-presente: #1f3770; --cor-presente-2: #16295a; --cor-fita: #d9b45a; --cor-laco: #f3dc9a;
  --cor-pavio: #c9a46a; --cor-cinza: rgba(160, 150, 130, .35);
  --cor-orn: #d9b45a;

  --fundo-capa:
    radial-gradient(120% 70% at 50% 0%, rgba(70, 110, 220, .22), transparent 62%),
    radial-gradient(90% 55% at 50% 108%, rgba(217, 180, 90, .14), transparent 62%),
    var(--cor-fundo);
  --fundo-contagem: radial-gradient(110% 120% at 50% 0%, #13245a, var(--cor-fundo-2) 70%);
  --fundo-abertura: radial-gradient(110% 80% at 50% 30%, #14275e 0%, #0a1430 55%, #050a1c 100%);
  --botao-fundo: linear-gradient(180deg, var(--cor-destaque-claro), var(--cor-destaque) 55%, var(--cor-destaque-escuro));
  --botao-sombra: 0 14px 34px -14px rgba(217, 180, 90, .75), inset 0 1px 0 rgba(255, 255, 255, .5);
  --sombra-foto: 0 30px 60px -30px rgba(0, 0, 0, .8);
  --sombra-flutuante: 0 10px 30px -12px rgba(0, 0, 0, .7);

  --fonte-titulo: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --fonte-texto: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --italico: italic;

  --raio: 20px;
  --largura: 1080px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

/* ---------- clima: Natal ---------- */
:root[data-preset="natal"] {
  --cor-fundo: #0c1f17;
  --cor-fundo-2: #10291e;
  --cor-cartao: rgba(255, 240, 220, .05);
  --cor-linha: rgba(214, 175, 92, .3);
  --cor-texto: #f6eddd;
  --cor-suave: #c1b7a3;
  --cor-destaque: #d6af5c;
  --cor-destaque-claro: #f1d995;
  --cor-destaque-escuro: #96701f;
  --cor-hover: rgba(214, 175, 92, .12);
  --cor-flutuante: rgba(12, 31, 23, .86);
  --cor-confete: #f1d995, #d6af5c, #c4495a, #fffaf0, #3f9a68;
  --fogos: #f1d995, #d6af5c, #e0576a, #5fc48a, #fff3e0;
  --fogos-nome: #fff6dc, #f1d995, #e8c46e, #d6af5c;
  --ceu: estrelas;
  --ceu-cores: #f1d995, #fff3e0, #e0a0a8;
  --cor-bebida: #8e1f30; --cor-bebida-clara: #c23a4c;
  --cor-presente: #7d1d2c; --cor-presente-2: #5c1220; --cor-fita: #d6af5c; --cor-laco: #f1d995;
  --cor-vinho: #8e2433; --cor-vinho-claro: #d4566a;
  --fundo-capa:
    radial-gradient(120% 70% at 50% 0%, rgba(142, 36, 51, .3), transparent 62%),
    radial-gradient(90% 55% at 50% 108%, rgba(214, 175, 92, .14), transparent 62%),
    var(--cor-fundo);
  --fundo-contagem: radial-gradient(110% 120% at 50% 0%, #5a1624, #2c0b13 72%);
  --fundo-abertura: radial-gradient(110% 80% at 50% 30%, #1a3d2c 0%, #0c1f17 55%, #05110b 100%);
}

/* ---------- clima: Réveillon (página clara; a contagem é um céu de meia-noite) ---------- */
:root[data-preset="reveillon"] {
  --cor-fundo: #f7f5f0;
  --cor-fundo-2: #eeebe4;
  --cor-cartao: rgba(255, 255, 255, .8);
  --cor-linha: rgba(140, 120, 80, .28);
  --cor-texto: #1e2228;
  --cor-suave: #5d636d;
  --cor-destaque: #a8842f;
  --cor-destaque-claro: #c9a54e;
  --cor-destaque-escuro: #6f5414;
  --cor-brilho: #fff7e0;
  --cor-hover: rgba(168, 132, 47, .1);
  --cor-campo: rgba(255, 255, 255, .9);
  --cor-flutuante: rgba(255, 255, 255, .88);
  --cor-botao-texto: #1b1408;
  --cor-confete: #d4af5a, #c4c9d1, #ffffff, #a8842f, #e9edf2;
  --fogos: #ffffff, #dfe4ec, #f0d493, #c9cfd9, #fff4d8;
  --fogos-nome: #ffffff, #fff4d8, #f0d493, #dfe4ec;
  --ceu: brilhos;
  --ceu-cores: #c9a54e, #a9afba, #d8b65c, #8f96a3;
  --cor-bebida: #ecd38a; --cor-bebida-clara: #f9edc4;
  --cor-vidro: rgba(60, 70, 85, .5);
  --cor-presente: #ffffff; --cor-presente-2: #e9e6df; --cor-fita: #b9bec7; --cor-laco: #c9a54e;
  --cor-orn: #a8842f;
  --fundo-capa:
    radial-gradient(120% 70% at 50% 0%, rgba(212, 175, 90, .2), transparent 62%),
    radial-gradient(90% 55% at 50% 108%, rgba(170, 180, 200, .32), transparent 62%),
    var(--cor-fundo);
  --fundo-contagem: radial-gradient(120% 110% at 50% 0%, #232a3d, #0d1017 72%);
  --fundo-abertura: radial-gradient(110% 80% at 50% 30%, #222838 0%, #0e1016 60%, #07080b 100%);
  --sombra-flutuante: 0 10px 30px -14px rgba(30, 34, 40, .35);
  --botao-sombra: 0 14px 30px -16px rgba(168, 132, 47, .8), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* no Réveillon a contagem e a abertura são noite: as cores do texto viram as do escuro */
:root[data-preset="reveillon"] .contagem,
:root[data-preset="reveillon"] .abertura {
  --cor-texto: #f4f2ec; --cor-suave: #b4b8c2; --cor-linha: rgba(220, 200, 150, .3);
  --cor-cartao: rgba(255, 255, 255, .05); --cor-destaque: #d4af5a; --cor-destaque-claro: #f0d493; --cor-destaque-escuro: #9a7426;
}
:root[data-preset="reveillon"] .titulo-sec { color: var(--cor-destaque-escuro); }
:root[data-preset="reveillon"] .mapa iframe { filter: saturate(.6) contrast(1.02); }

/* ---------- base do tema ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
section { overflow-x: clip; }
.rotulo { font-weight: 600; }

/* ---------- abertura: pavio, rojão e fogos ---------- */
.abertura { color: var(--cor-texto); }
.tem-abertura .abertura::before { /* céu estrelado parado, só CSS */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 64% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 14%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 46%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 62%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 58%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 56% 52%, #fff 50%, transparent 51%);
}
.tem-abertura .abertura::after { /* clarão do estouro */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 45% at 50% 40%, rgba(255, 246, 220, .55), transparent 70%);
}
.abertura.clarao::after { animation: clarao 1.1s ease-out both; }
@keyframes clarao { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
.abertura-fogos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.abertura-topo {
  position: absolute; left: 20px; right: 20px; top: max(15vh, 70px); text-align: center; pointer-events: none;
  display: grid; gap: 10px; transition: opacity .5s ease, transform .6s var(--ease);
  font: italic 500 clamp(1.15rem, 4.6vw, 1.6rem)/1.35 var(--fonte-titulo); color: var(--cor-texto);
}
.abertura-marca {
  font: 600 .74rem/1.2 var(--fonte-texto); letter-spacing: .34em; text-transform: uppercase; font-style: normal;
  color: var(--cor-destaque-claro);
}
.abertura.acesa .abertura-topo { opacity: 0; transform: translateY(-10px); }
.abertura-pavio {
  position: absolute; left: 50%; bottom: max(22vh, 130px); width: min(86vw, 400px); height: auto;
  transform: translateX(-50%); overflow: visible; pointer-events: none;
}
.pavio-corda, .pavio-cinza { fill: none; stroke-linecap: round; }
.pavio-corda { stroke: var(--cor-pavio); stroke-width: 3.2; }
.pavio-cinza { stroke: var(--cor-cinza); stroke-width: 1.6; opacity: .7; }
.rojao-corpo { fill: #8f1f2c; stroke: rgba(0, 0, 0, .25); }
:root[data-preset="confraternizacao"] .rojao-corpo { fill: #23407e; }
:root[data-preset="reveillon"] .rojao-corpo { fill: #e9ebef; }
.rojao-faixa { stroke: var(--cor-destaque); stroke-width: 3; fill: none; }
.rojao-ponta { fill: var(--cor-destaque-claro); }
.rojao-sombra { fill: rgba(0, 0, 0, .35); }
.rojao { transition: opacity .25s ease, transform .4s ease-in; }
.rojao.saiu { opacity: 0; transform: translateY(-30px); }
.pavio-brasa { fill: #fff1c9; }
.pavio-halo { fill: rgba(255, 196, 100, .5); filter: blur(4px); transform-box: fill-box; transform-origin: center; animation: brasa 1.3s ease-in-out infinite; }
@keyframes brasa { 50% { transform: scale(1.5); opacity: .45; } }
.abertura.acesa .pavio-brasa, .abertura.acesa .pavio-halo { opacity: 0; animation: none; transition: opacity .2s; }
.abertura-toque { padding-bottom: max(10vh, 54px); }
.abertura-dica { letter-spacing: .22em; }
.abertura.acesa .abertura-dica { opacity: 0; animation: none; transition: opacity .3s; }
.abertura.clarao .abertura-pavio { opacity: 0; transition: opacity .9s ease .2s; }
.abertura-pular { z-index: 2; }

/* ---------- capa ---------- */
.capa { overflow: hidden; }
.capa-ceu, .capa-estouros { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.capa-estouros { opacity: .22; }
.est-raio { fill: none; stroke: var(--cor-orn); stroke-width: 1; stroke-linecap: round; }
.est-ponto { fill: none; stroke: var(--cor-orn); stroke-width: 2.4; stroke-linecap: round; }
:root[data-preset="reveillon"] .capa-estouros { opacity: .3; }
.capa-grade { gap: 22px; }
.emblema { position: relative; width: min(58vw, 240px); aspect-ratio: 1; pointer-events: none; }
.orn { position: absolute; inset: 0; width: 100%; height: 100%; display: none; overflow: visible; }
:root[data-preset="confraternizacao"] .orn-raios,
:root[data-preset="natal"] .orn-pinheiro,
:root[data-preset="reveillon"] .orn-relogio { display: block; }
.raios { fill: none; stroke: var(--cor-orn); stroke-width: 1.3; stroke-linecap: round; opacity: .85; }
.raios-pontos { fill: none; stroke: var(--cor-destaque-claro); stroke-width: 3.2; stroke-linecap: round; }
.orn-raios { animation: gira 90s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.rel-aro { fill: none; stroke: var(--cor-linha); stroke-width: 1; }
.rel-min { fill: none; stroke: var(--cor-orn); stroke-width: 1; opacity: .55; }
.rel-hora { fill: none; stroke: var(--cor-orn); stroke-width: 2.2; stroke-linecap: round; }
.rel-ponteiro { fill: none; stroke: var(--cor-destaque-escuro); stroke-width: 3.2; stroke-linecap: round; }
.rel-segundos path { fill: none; stroke: var(--cor-destaque-claro); stroke-width: 1.2; stroke-linecap: round; }
.rel-segundos { animation: gira 60s steps(60) infinite; }
.rel-doze { fill: var(--cor-destaque); }
.pin-tronco { fill: none; stroke: var(--cor-destaque-escuro); stroke-width: 1.6; stroke-linecap: round; }
.pin-galhos { fill: none; stroke: var(--cor-destaque); stroke-width: 2.2; stroke-linecap: round; }
.pin-luz-a, .pin-luz-b { fill: none; stroke-width: 5.5; stroke-linecap: round; }
.pin-luz-a { stroke: var(--cor-vinho-claro, #d4566a); animation: luzinha 2.4s ease-in-out infinite; }
.pin-luz-b { stroke: var(--cor-destaque-claro); animation: luzinha 2.4s ease-in-out -1.2s infinite; }
@keyframes luzinha { 50% { opacity: .35; } }
.pin-estrela { fill: var(--cor-destaque-claro); filter: drop-shadow(0 0 6px rgba(241, 217, 149, .8)); }
.medalha {
  position: absolute; left: 50%; top: 50%; width: 56%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--cor-fundo-2), var(--cor-fundo));
  border: 1px solid var(--cor-destaque);
  box-shadow: inset 0 0 0 5px var(--cor-fundo), inset 0 0 0 6px var(--cor-linha), 0 18px 40px -20px rgba(0, 0, 0, .7);
}
.medalha picture, .medalha img { width: 100%; height: 100%; display: block; }
.medalha img { object-fit: cover; }
.medalha .logo { object-fit: contain; padding: 18%; }
.medalha .monograma {
  width: auto; height: auto; border: 0; border-radius: 0; background: none;
  font: italic 500 clamp(2.4rem, 11vw, 3.6rem)/1 var(--fonte-titulo); letter-spacing: .02em;
  color: var(--cor-destaque-claro);
}
:root[data-preset="natal"] .emblema { aspect-ratio: 200 / 300; width: min(46vw, 190px); }
:root[data-preset="natal"] .orn-pinheiro { height: 83%; }
:root[data-preset="natal"] .medalha { top: auto; bottom: 0; transform: translateX(-50%); width: 34%; }
:root[data-preset="natal"] .medalha .monograma { font-size: clamp(1.5rem, 6vw, 2rem); }
:root[data-preset="reveillon"] .medalha { background: radial-gradient(circle at 50% 35%, #fff, #f0ede6); }
:root[data-preset="reveillon"] .medalha .monograma { color: var(--cor-destaque); }

.marca {
  font: 600 .76rem/1.3 var(--fonte-texto); letter-spacing: .34em; text-transform: uppercase; color: var(--cor-destaque);
}
.titulo { margin-top: 6px; }
.nome {
  font: italic 600 clamp(2.35rem, 10.4vw, 4.4rem)/1.04 var(--fonte-titulo); letter-spacing: -.012em;
  padding: 0 .04em .08em; text-wrap: balance; max-width: 16ch;
}
.chamada {
  font: italic 500 clamp(1.1rem, 4.6vw, 1.38rem)/1.4 var(--fonte-titulo); letter-spacing: 0; text-transform: none;
  color: var(--cor-suave); max-width: 30ch; text-wrap: balance;
}
.capa-data { font-weight: 600; letter-spacing: .02em; margin-top: 4px; }
.capa-local { color: var(--cor-suave); font-size: .95rem; letter-spacing: .04em; margin-top: -4px; }
.capa-local .sep { color: var(--cor-destaque); }
.rolar { margin-top: 14px; }

/* ---------- contagem ---------- */
.contagem { background: var(--fundo-contagem); color: var(--cor-texto); overflow: hidden; }
.contagem-fogos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contagem-miolo { position: relative; }
.casa { position: relative; background: var(--cor-cartao); }
.casa::before {
  content: ''; position: absolute; left: 22%; right: 22%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cor-destaque-claro), transparent);
}
.num { font-weight: 500; color: var(--cor-texto); }
.virou .contagem-hoje { font-size: clamp(2rem, 8vw, 3.2rem); text-shadow: 0 0 24px rgba(255, 220, 140, .45); }

/* ---------- brinde: taças ---------- */
.brinde { text-align: center; background: var(--cor-fundo); overflow: hidden; padding-top: clamp(48px, 9vw, 96px); }
.tacas { position: relative; height: 300px; max-width: 420px; margin: 0 auto; --k: 1; }
.taca { position: absolute; bottom: 0; width: 104px; height: 260px; overflow: visible; transform-origin: 50% 91%; will-change: transform; }
.taca-esq { left: calc(50% - 128px); transform: translateX(calc((1 - var(--k)) * -34vw)) rotate(calc(var(--k) * 15deg)); }
.taca-dir { right: calc(50% - 128px); transform: translateX(calc((1 - var(--k)) * 34vw)) scaleX(-1) rotate(calc(var(--k) * 15deg)); }
.liq-a { stop-color: var(--cor-bebida-clara); }
.liq-b { stop-color: var(--cor-bebida); }
.espuma { fill: var(--cor-bebida-clara); opacity: .9; }
.vidro { fill: rgba(255, 255, 255, .05); stroke: var(--cor-vidro); stroke-width: 1.6; }
.borda { fill: none; stroke: var(--cor-vidro); stroke-width: 1.4; }
.reflexo { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2.2; stroke-linecap: round; }
.haste { fill: none; stroke: var(--cor-vidro); stroke-width: 3; stroke-linecap: round; }
.pe { fill: rgba(255, 255, 255, .06); stroke: var(--cor-vidro); stroke-width: 1.4; }
.b { fill: rgba(255, 255, 255, .85); transform-box: fill-box; animation: bolha 2.8s linear infinite; animation-delay: var(--d, 0s); animation-play-state: paused; }
.brinde.ativo .b { animation-play-state: running; }
@keyframes bolha { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translateY(-104px); opacity: 0; } }
.tim { position: absolute; left: 50%; top: 2px; width: 92px; height: 92px; margin-left: -46px; overflow: visible; opacity: 0; }
.tim path { fill: none; stroke: var(--cor-destaque-claro); stroke-width: 2.4; stroke-linecap: round; }
.tim.vai { animation: tim .9s var(--ease) both; }
@keyframes tim { 0% { opacity: 0; transform: scale(.35); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.brinde-titulo {
  font: italic 600 clamp(2.4rem, 10vw, 3.8rem)/1.05 var(--fonte-titulo); color: var(--cor-destaque-claro);
  margin: 6px 0 20px; transition: opacity .6s var(--ease), transform .7s var(--ease);
}
:root[data-preset="reveillon"] .brinde-titulo { color: var(--cor-destaque); }
.js .brinde-titulo { opacity: 0; transform: translateY(10px) scale(.92); }
.js .brinde.tilintou .brinde-titulo { opacity: 1; transform: none; }
.brinde .recado-texto { max-width: 34ch; margin: 0 auto; }

/* ---------- programação: linha do tempo que acende ---------- */
.programacao { background: var(--cor-fundo-2); text-align: center; }
.linha-do-tempo { position: relative; max-width: 560px; margin: 8px auto 0; text-align: left; --luz: 1; --faisca: 0; }
.momentos { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.momento { position: relative; padding-left: 66px; min-height: 48px; }
.trilho { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: var(--cor-linha); }
.trilho-luz {
  position: absolute; inset: 0; border-radius: 2px; transform-origin: 50% 0; transform: scaleY(var(--luz));
  background: linear-gradient(var(--cor-destaque-claro), var(--cor-destaque)); box-shadow: 0 0 10px var(--cor-destaque);
}
.trilho-faisca {
  position: absolute; left: 50%; top: calc(var(--luz) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, var(--cor-destaque-claro) 40%, transparent 70%);
  box-shadow: 0 0 18px 6px rgba(255, 214, 130, .55); opacity: var(--faisca); transition: opacity .3s;
}
.momento-ponto {
  position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--cor-linha); background: var(--cor-fundo-2); color: var(--cor-suave);
  transition: border-color .5s, color .5s, box-shadow .6s, transform .6s var(--ease);
}
.momento-ponto svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.momento.aceso .momento-ponto, html:not(.js) .momento-ponto {
  border-color: var(--cor-destaque); color: var(--cor-destaque-claro); background: var(--cor-fundo);
  box-shadow: 0 0 0 4px var(--cor-hover), 0 0 26px -2px rgba(217, 180, 90, .55);
}
.js .momento .momento-corpo { opacity: .36; transform: translateX(-6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .momento.aceso .momento-corpo { opacity: 1; transform: none; }
.js .momento.aceso .momento-ponto { transform: scale(1.06); }
.momento-hora { font: 500 1.5rem/1 var(--fonte-titulo); color: var(--cor-destaque-claro); padding-top: 4px; }
:root[data-preset="reveillon"] .momento-hora { color: var(--cor-destaque); }
.momento-titulo { font: 600 1.06rem/1.3 var(--fonte-texto); margin-top: 6px; }
.momento-texto { color: var(--cor-suave); margin-top: 4px; font-size: .95rem; }

/* ---------- quando e onde: o pino cai no mapa ---------- */
.detalhes { background: var(--cor-fundo); }
.cartoes { align-items: start; }
.mapa { position: relative; }
.mapa-pino {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 30px; height: 41px; margin: -41px 0 0 -15px;
  pointer-events: none; opacity: 0; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35));
}
.mapa-pino path { fill: var(--cor-destaque); stroke: var(--cor-destaque-escuro); stroke-width: 1; }
.mapa-pino circle { fill: var(--cor-fundo); }
.mapa-onda {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 60px; height: 22px; margin: -11px 0 0 -30px;
  border-radius: 50%; border: 2px solid var(--cor-destaque); opacity: 0; pointer-events: none;
}
.js .cartao-local.visivel .mapa-pino { animation: pino 3.2s var(--ease) .45s both; }
.js .cartao-local.visivel .mapa-onda { animation: onda 1.4s ease-out 1.05s 2 both; }
@keyframes pino {
  0% { opacity: 0; transform: translateY(-120px); } 16% { opacity: 1; transform: translateY(0); }
  22% { transform: translateY(-12px); } 28% { transform: translateY(0); } 82% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes onda { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }

/* ---------- traje: amostras em leque ---------- */
.traje { background: var(--cor-fundo-2); text-align: center; }
.traje-nome { font: italic 500 clamp(2rem, 8.6vw, 3rem)/1.1 var(--fonte-titulo); color: var(--cor-texto); }
.traje-dica { color: var(--cor-suave); max-width: 38ch; margin: 14px auto 0; }
.cores { list-style: none; display: flex; justify-content: center; gap: clamp(12px, 4vw, 26px); padding: 0; margin: 34px 0 0; }
.cor { display: grid; justify-items: center; align-content: start; gap: 12px; width: clamp(78px, 24vw, 120px); text-align: center; }
.cor-amostra {
  position: relative; width: clamp(66px, 20vw, 96px); aspect-ratio: 3 / 4; border-radius: 14px 14px 40px 40px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 45%), var(--c);
  border: 1px solid var(--cor-linha); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .65);
}
.cor-amostra::before { /* furinho de etiqueta */
  content: ''; position: absolute; left: 50%; top: 10px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--cor-fundo-2); box-shadow: inset 0 0 0 1px var(--cor-linha);
}
.cor-nome { font-size: .74rem; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-suave); }
.js .cores .cor { transition: transform 1s var(--ease), opacity .6s ease; transition-delay: calc(var(--i) * 90ms); }
.js .cores:not(.visivel) .cor {
  opacity: 0;
  transform: translateX(calc(((var(--n) - 1) / 2 - var(--i)) * clamp(78px, 24vw, 122px))) rotate(calc((var(--i) - 1) * -9deg)) translateY(18px);
}

/* ---------- o que levar: o presente abre ---------- */
.levar { background: var(--cor-fundo); text-align: center; }
.presente-caixa { width: min(46vw, 190px); margin: 0 auto 18px; }
.presente { width: 100%; height: auto; overflow: visible; display: block; }
.presente-corpo { fill: var(--cor-presente); stroke: var(--cor-linha); }
.presente-tampa { fill: var(--cor-presente-2); stroke: var(--cor-linha); }
.presente-fita { fill: var(--cor-fita); }
.presente-laco { fill: none; stroke: var(--cor-laco); stroke-width: 4; stroke-linejoin: round; }
.presente-no { fill: var(--cor-laco); }
.presente-luz { opacity: 0; transition: opacity .8s ease .15s; }
.luz-a { stop-color: var(--cor-brilho); stop-opacity: .95; }
.luz-b { stop-color: var(--cor-destaque-claro); stop-opacity: 0; }
.tampa { transform-box: fill-box; transform-origin: 8% 100%; transition: transform .8s cubic-bezier(.3, 1.6, .5, 1); }
.levar.aberto .tampa, html:not(.js) .tampa { transform: translate(-4px, -26px) rotate(-16deg); }
.levar.aberto .presente-luz, html:not(.js) .presente-luz { opacity: .9; }
.itens-levar { list-style: none; padding: 0; margin: 28px auto 0; max-width: 620px; display: grid; gap: 14px; text-align: left; }
.item-levar {
  display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;
  padding: 20px 18px; border: 1px solid var(--cor-linha); border-radius: var(--raio); background: var(--cor-cartao);
}
.item-icone {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--cor-destaque-claro);
  border: 1px solid var(--cor-linha); background: var(--cor-hover);
}
:root[data-preset="reveillon"] .item-icone { color: var(--cor-destaque); }
.item-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.item-titulo { font: 600 1.04rem/1.3 var(--fonte-texto); }
.item-texto { color: var(--cor-suave); margin-top: 4px; font-size: .95rem; }
.item-valor {
  display: inline-flex; gap: .45em; align-items: baseline; margin-top: 12px; padding: 6px 14px 6px 12px;
  border-radius: 999px; border: 1px dashed var(--cor-destaque); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-suave);
}
.item-valor strong { font: italic 600 1.15rem/1 var(--fonte-titulo); letter-spacing: 0; text-transform: none; color: var(--cor-destaque-claro); }
:root[data-preset="reveillon"] .item-valor strong { color: var(--cor-destaque); }
.js .itens-levar .item-levar { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.15s + var(--i) * 120ms); }
.js .itens-levar:not(.visivel) .item-levar { opacity: 0; transform: translateY(16px); }
.levar-link { margin-top: 18px; }

/* ---------- confirmar e rodapé ---------- */
.confirmar { background: var(--cor-fundo-2); }
.rodape { padding-bottom: max(96px, env(safe-area-inset-bottom)); }

/* ---------- telas largas ---------- */
@media (min-width: 860px) {
  .capa-grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; }
  .emblema { width: min(100%, 340px); justify-self: end; }
  :root[data-preset="natal"] .emblema { width: min(80%, 260px); }
  .nome { font-size: clamp(3rem, 4.9vw, 4.6rem); }
  .tacas { height: 420px; max-width: 560px; }
  .taca { width: 148px; height: 370px; }
  .taca-esq { left: calc(50% - 182px); }
  .taca-dir { right: calc(50% - 182px); }
  .chamada { max-width: 34ch; }
  .capa-data { font-size: 1.08rem; }
  .taca-esq { transform: translateX(calc((1 - var(--k)) * -22vw)) rotate(calc(var(--k) * 15deg)); }
  .taca-dir { transform: translateX(calc((1 - var(--k)) * 22vw)) scaleX(-1) rotate(calc(var(--k) * 15deg)); }
  .itens-levar { grid-template-columns: 1fr 1fr; max-width: 820px; }
  .momentos { gap: 36px; }
}

/* ---------- movimento reduzido: tudo no estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  .tacas { --k: 1 !important; }
  .js .brinde-titulo, .js .momento .momento-corpo, .js .cores .cor, .js .itens-levar .item-levar { opacity: 1 !important; transform: none !important; }
  .mapa-pino, .mapa-onda { display: none; }
}