/* =====================================================================
   TEMA "NUVEM" · chá de bebê. Paleta e fontes do tema + a abertura do móbile.
   Para um tema novo, troque este arquivo (e o link das fontes no index.html).
   O layout comum fica em base.css (carregado antes) e não muda de um tema para outro.
   ===================================================================== */
:root {
  --cor-fundo: #f8f3ec;          /* creme */
  --cor-fundo-2: #eef1e8;        /* sálvia bem clara */
  --cor-cartao: rgba(255, 255, 255, .66);
  --cor-linha: rgba(116, 142, 122, .32);
  --cor-texto: #3e3a35;
  --cor-suave: #776d64;
  --cor-destaque: #6f8f78;       /* sálvia */
  --cor-destaque-claro: #cfe0d2;
  --cor-destaque-escuro: #4f6a58;
  --cor-brilho: #fff7ef;
  --cor-hover: rgba(111, 143, 120, .13);
  --cor-campo: #fffdf9;
  --cor-flutuante: rgba(255, 252, 247, .9);
  --cor-botao-texto: #3a261c;
  --cor-papel: #fffdf8;
  --cor-papel-verso: #f1e9dc;
  --cor-papel-tinta: #3e3a35;
  --cor-pessego: #e7a988;
  --cor-ceu: #9fb6cb;
  --cor-enfeite: 231, 169, 136; 159, 182, 203; 143, 170, 150;  /* pêssego; azul; sálvia */
  --cor-confete: #e7a988, #9fb6cb, #8faa96, #f4dcc4;

  --fundo-capa:
    radial-gradient(70% 45% at 15% 5%, rgba(159, 182, 203, .32), transparent 70%),
    radial-gradient(60% 45% at 90% 20%, rgba(231, 169, 136, .22), transparent 70%),
    var(--cor-fundo);
  --fundo-abertura: linear-gradient(180deg, #e3ecf3 0%, #f3efe8 60%, #f8f3ec 100%);
  --botao-fundo: linear-gradient(180deg, #f6d2be, #eab094 60%, #dc9a79);
  --botao-sombra: 0 14px 30px -14px rgba(220, 154, 121, .65), inset 0 1px 0 rgba(255, 255, 255, .6);
  --sombra-foto: 0 26px 50px -30px rgba(80, 60, 40, .5);
  --sombra-flutuante: 0 10px 26px -14px rgba(80, 60, 40, .45);
  --gradiente-nome: linear-gradient(100deg, #4f6a58 0%, #6f8f78 35%, #d79673 50%, #6f8f78 65%, #4f6a58 100%);

  --fonte-titulo: 'Young Serif', Georgia, 'Times New Roman', serif;
  --fonte-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --italico: normal;             /* a Young Serif não tem itálico */

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

/* ---------- ajustes do tema ---------- */
.nome { letter-spacing: -.02em; }
.retrato::before { border-style: dashed; }
.campo input { border-color: rgba(116, 142, 122, .4); }
.contagem .casa { background: #fffdf9; }

/* ---------- abertura: móbile de berço ---------- */
.abertura-movel .movel { position: absolute; inset: 0 0 auto 0; height: 62vh; pointer-events: none; }
.movel-barra {
  position: absolute; top: 9vh; left: 50%; width: min(78vw, 420px); height: 6px; border-radius: 6px;
  transform: translateX(-50%); background: linear-gradient(90deg, #c8a984, #e2c9a8, #c8a984);
  box-shadow: 0 6px 14px -8px rgba(80, 60, 40, .5);
  transition: transform 1s var(--ease) .15s, opacity .6s ease .3s;
}
.movel-barra::before {
  content: ''; position: absolute; left: 50%; bottom: 6px; width: 1px; height: 9vh; background: rgba(120, 100, 80, .5);
}
.peca {
  position: absolute; top: calc(9vh + 5px); left: var(--x); width: 0; transform-origin: 0 0;
  animation: balanca var(--d, 3.2s) ease-in-out var(--atraso, 0s) 9 alternate;
}
.peca::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: var(--fio); background: rgba(120, 100, 80, .45); }
.peca svg {
  position: absolute; top: var(--fio); left: 0; width: var(--t, 64px); height: auto; transform: translateX(-50%);
  filter: drop-shadow(0 8px 10px rgba(80, 60, 40, .16));
}
@keyframes balanca { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.abertura-centro {
  position: absolute; left: 50%; top: 58vh; transform: translate(-50%, -50%); width: min(86vw, 420px);
  text-align: center; pointer-events: none; transition: opacity .6s ease, transform .9s var(--ease);
}
.abertura-titulo { font: 400 clamp(1.9rem, 8vw, 2.6rem)/1.15 var(--fonte-titulo); color: var(--cor-destaque-escuro); }
.abertura-movel .abertura-dica { color: var(--cor-suave); }
/* ao tocar: as peças sobem como balões e o céu clareia */
.abertura-movel.abrindo .peca { animation: none; transform: translateY(-80vh) rotate(var(--giro, 8deg)); transition: transform 1.1s cubic-bezier(.5, 0, .3, 1) var(--i, 0s); }
.abertura-movel.abrindo .movel-barra { transform: translate(-50%, -40vh); opacity: 0; }
.abertura-movel.abrindo .abertura-centro { opacity: 0; transform: translate(-50%, -70%) scale(.96); }
/* títulos de destaque em tom escuro (o fundo é claro) */
.titulo-sec, .contagem-hoje, .contagem-depois, .recado-assinatura { color: var(--cor-destaque-escuro); }
.rotulo, .cartao h3, .prazo { color: var(--cor-destaque-escuro); }