:root{
  --accent:#c89b7b;     /* areia/pêssego suave que combina com tons de pele e roupa */
  --white:#fff;
  --muted:rgba(255,255,255,.9);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Libre Baskerville',serif;
  background:#000;                 /* evita flash branco em load */
  color:var(--white);
  overflow:hidden;
}

/* ===== HERO FULLSCREEN, sem “baço” ===== */
.hero{
  position:relative; width:100%; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  /* sem filtros baços; deixa as cores da foto respirarem */
}

/* Conteúdo acima da foto */
.content{
  position:relative; z-index:2; padding:2rem; width:100%; max-width:980px;
}
.title{
  font-family:'Great Vibes',cursive;
  font-size:clamp(3rem,8vw,6rem);
  color:var(--accent);
  text-shadow:0 6px 22px rgba(0,0,0,.35);
  margin-bottom:.35em;
}
.subtitle{
  font-size:clamp(1rem,2.2vw,1.4rem);
  color:var(--muted);
  font-style:italic;
  margin-bottom:1.8rem;
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}

/* ===== COUNTDOWN numa única linha ===== */
.countdown-wrapper{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.countdown{
  display:flex; flex-wrap:nowrap; justify-content:center; gap:clamp(.6rem,2vw,1.2rem);
  white-space:nowrap;
}
.timebox{
  flex:0 0 auto;
  min-width:clamp(100px,20vw,150px);
  padding:clamp(.9rem,2.2vw,1.2rem);
  border-radius:12px;
  background:rgba(0,0,0,.35);              /* vidro escuro suave p/ legibilidade */
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .3s ease;
}
.timebox:hover{ transform:translateY(-3px); }

.value{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:clamp(2rem,5vw,3.2rem);
  color:var(--accent);
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}
.label{
  display:block; margin-top:.35rem; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}

/* Rodapé */
.footer{
  margin-top:1.8rem; font-size:.95rem; font-style:italic; color:var(--muted);
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}

/* ===== FUMO no fundo apenas ===== */
.smoke{
  position:absolute; left:0; right:0; bottom:0;
  height:28vh; pointer-events:none; z-index:1; /* abaixo do texto */
  /* leve gradação para “assentar” a página */
  background:linear-gradient(to top, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%);
}
.smoke span{
  position:absolute; bottom:-10vh;
  width:40vw; height:20vh; max-width:520px; max-height:240px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  filter:blur(14px); opacity:.55;
  animation:drift linear infinite;
}
.smoke span:nth-child(1){ left:5%;  animation-duration:24s; animation-delay:0s; }
.smoke span:nth-child(2){ left:28%; animation-duration:28s; animation-delay:3s; transform:scale(1.1); }
.smoke span:nth-child(3){ left:52%; animation-duration:26s; animation-delay:6s; transform:scale(0.9); }
.smoke span:nth-child(4){ left:70%; animation-duration:30s; animation-delay:9s; transform:scale(1.2); }
.smoke span:nth-child(5){ left:85%; animation-duration:22s; animation-delay:12s; transform:scale(0.8); }

@keyframes drift{
  0%   { transform:translateY(0)      scale(var(--s,1)); opacity:.55; }
  50%  { transform:translateY(-8vh)   scale(calc(var(--s,1)*1.05)); opacity:.65; }
  100% { transform:translateY(-16vh)  scale(var(--s,1)); opacity:.35; }
}

/* ===== Responsivo ===== */
@media (max-width:600px){
  body{overflow-y:auto}
  .timebox{min-width:clamp(96px,28vw,132px)}
}
