:root{
  --paper:#F1E6D0;
  --cover:#7A4B36;
  --cover-2:#5F3A29;
  --ink:#3B2A20;
  --rose:#B85C6B;
  --rose-2:#8F4353;
  --gold:#B8934F;
  color-scheme: light;
}
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper:#2A2119;
    --cover:#3E2A1F;
    --cover-2:#2A1B13;
    --ink:#EFE2CC;
    --rose:#D98194;
    --rose-2:#B85C6B;
    --gold:#D9B876;
  }
}
:root[data-theme="dark"]{
  --paper:#2A2119;
  --cover:#3E2A1F;
  --cover-2:#2A1B13;
  --ink:#EFE2CC;
  --rose:#D98194;
  --rose-2:#B85C6B;
  --gold:#D9B876;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background: var(--paper);
  color: var(--ink);
  font-family:'Karla', sans-serif;
  overflow-x:hidden;
}

/* ---------- PORTADA / CUENTA REGRESIVA ---------- */
#cover{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(155deg, var(--cover), var(--cover-2) 65%);
}
#cover::before{
  content:"";
  position:absolute; inset:14px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:6px;
  pointer-events:none;
}
.cover-inner{
  text-align:center;
  padding: 2rem 1.75rem;
  max-width: 480px;
}
.cover-seal{
  width:88px; height:88px;
  margin:0 auto 1.4rem;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--rose), var(--rose-2));
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 0 0 3px rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  font-family:'Caveat', cursive;
  font-size:1.9rem;
  color:#fff9ef;
  position:relative;
  overflow:hidden;
}
.cover-photo{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
}
.cover-seal-fallback{
  position:relative;
  z-index:1;
}
.cover-eyebrow{
  font-family:'Caveat', cursive;
  font-size: 1.5rem;
  color: #E9D9B8;
  margin: 0 0 0.15rem;
  letter-spacing:0.01em;
}
.cover-title{
  font-family:'Fraunces', serif;
  font-optical-sizing:auto;
  font-weight:600;
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  color:#FBF3E3;
  margin: 0 0 1.8rem;
  line-height:1.15;
}
.countdown{
  display:flex;
  justify-content:center;
  gap: 0.6rem;
  margin: 0 auto 1.6rem;
  flex-wrap:wrap;
}
.cd-unit{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 0.7rem 0.4rem 0.55rem;
  min-width: 68px;
}
.cd-num{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  color:#FBF3E3;
  font-variant-numeric: tabular-nums;
  display:block;
  line-height:1;
}
.cd-label{
  display:block;
  margin-top:0.35rem;
  font-size:0.68rem;
  color:#D8C6A4;
  letter-spacing:0.04em;
}
.cover-sub{
  font-family:'Caveat', cursive;
  font-size:1.25rem;
  color:#D8C6A4;
  margin:0;
}
#enter-now{
  margin-top:1.6rem;
  background:transparent;
  border:1px solid rgba(255,255,255,0.35);
  color:#F1E4C8;
  font-family:'Karla', sans-serif;
  font-size:0.85rem;
  padding:0.5rem 1.1rem;
  border-radius:999px;
  cursor:pointer;
  display:none;
}
#enter-now:focus-visible{
  outline: 2px solid var(--gold); outline-offset:3px;
}

@media (max-width: 480px){
  .cd-unit{ min-width:58px; padding:0.55rem 0.3rem 0.45rem; }
}