:root {
  --cream:  #f5efe6;
  --sand:   #e7dac6;
  --taupe:  #d8c7ad;
  --gold:   #c4ac84;
  --ink:    #2b2723;
  --line:   #b9a583;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Jost", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow: hidden;
  position: relative;
}

/* ---------- Fondo en degradé en movimiento ---------- */
.bg-gradient {
  position: fixed;
  inset: -25%;
  z-index: -2;
  background: linear-gradient(
    125deg,
    #fdfaf4 0%,
    #f3e8d6 20%,
    #e6d4b6 40%,
    #f0e1c8 60%,
    #e3d0ac 80%,
    #fbf6ee 100%
  );
  background-size: 360% 360%;
  filter: saturate(1.08);
  animation: drift 13s ease-in-out infinite;
}

/* Halo de luz suave que respira sobre el degradé */
.bg-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 50% at 30% 35%, rgba(196,172,132,0.55), transparent 70%),
    radial-gradient(45% 55% at 72% 70%, rgba(255,255,255,0.7), transparent 70%);
  animation: glow 10s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow {
  from { transform: translate3d(-6%, -4%, 0) scale(1);    opacity: 0.7; }
  to   { transform: translate3d(6%, 4%, 0)  scale(1.2);   opacity: 1; }
}

#particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Escenario central ---------- */
.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vh, 3rem);
  padding: 2rem;
  text-align: center;
}

.logo {
  width: min(78vw, 460px);
  height: auto;
  /* El logo trae fondo blanco: multiply lo funde con el degradé */
  mix-blend-mode: multiply;
  filter: drop-shadow(0 18px 40px rgba(120, 96, 60, 0.18));
  opacity: 0;
  animation:
    rise 1.4s cubic-bezier(.2,.7,.2,1) 0.2s forwards,
    float 7s ease-in-out 1.8s infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- Contacto ---------- */
.contact {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.9rem 2rem;
  border: 1px solid rgba(185, 165, 131, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  animation: rise 1.2s cubic-bezier(.2,.7,.2,1) 0.9s forwards;
  transition: transform .35s ease, background .35s ease,
              border-color .35s ease, box-shadow .35s ease;
}

.contact:hover,
.contact:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(150, 120, 70, 0.18);
  outline: none;
}

.contact__label {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}

.contact__mail {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  letter-spacing: 0.02em;
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-gradient, .bg-gradient::after, .logo, .contact { animation: none; }
  .logo, .contact { opacity: 1; }
}