@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(/fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Allura"; font-weight: 400; font-display: swap; src: url(/fonts/allura-latin-400-normal.woff2) format("woff2"); }

:root {
  --marfil: #F7F2E9; --tinta: #2A0F44; --texto: #4B3A5E;
  --morado: #5D1991; --violeta: #C84FD8; --dorado: #C8A45D; --dorado-txt: #8A6A22;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --px: 0; --py: 0;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--marfil); }
body {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: 40px 24px 72px; text-align: center; overflow-x: hidden; position: relative;
  font-family: "Montserrat", system-ui, sans-serif; color: var(--texto);
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 255, 255, .85), transparent 70%),
    linear-gradient(180deg, #FBF8F2 0%, var(--marfil) 55%, #F1E8D8 100%);
}

/* Luz ambiental: tres orbes difusos que derivan despacio y reaccionan apenas al cursor */
.aura { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.orbe { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0; animation: entra 2.4s var(--ease) .2s forwards; }
.o1 { width: 52vmax; height: 52vmax; left: -14vmax; top: -16vmax; background: radial-gradient(circle, rgba(200, 79, 216, .34), transparent 66%); --d: 26s; }
.o2 { width: 46vmax; height: 46vmax; right: -16vmax; top: 18vmax; background: radial-gradient(circle, rgba(93, 25, 145, .22), transparent 66%); --d: 32s; }
.o3 { width: 56vmax; height: 40vmax; left: 12vmax; bottom: -20vmax; background: radial-gradient(circle, rgba(200, 164, 93, .46), transparent 66%); --d: 29s; }
.orbe { transform: translate3d(calc(var(--px) * 26px), calc(var(--py) * 20px), 0); }
.o1 { animation: entra 2.4s var(--ease) .2s forwards, deriva1 var(--d) ease-in-out infinite alternate; }
.o2 { animation: entra 2.4s var(--ease) .4s forwards, deriva2 var(--d) ease-in-out infinite alternate; }
.o3 { animation: entra 2.4s var(--ease) .6s forwards, deriva1 var(--d) ease-in-out infinite alternate-reverse; }
@keyframes entra { to { opacity: 1; } }
@keyframes deriva1 { from { margin: 0; } to { margin: 6vmax 0 0 5vmax; } }
@keyframes deriva2 { from { margin: 0; } to { margin: -5vmax 0 0 -6vmax; } }

#polvo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

main { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 680px; width: 100%; }

/* Logo: aparece desenfocándose hasta enfocarse y flota con un latido casi imperceptible */
.halo {
  position: absolute; top: -6px; left: 50%; width: min(520px, 110vw); aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(circle, rgba(200, 164, 93, .42) 0, rgba(200, 79, 216, .16) 38%, transparent 66%);
  filter: blur(14px); opacity: 0; animation: halo 1.8s var(--ease) .5s forwards, latido 6s ease-in-out 2.4s infinite;
}
.logo {
  position: relative; width: min(300px, 64vw); height: auto; margin-bottom: 6px;
  opacity: 0; filter: blur(14px); transform: translateY(18px) scale(.97);
  animation: logo 1.7s var(--ease) .3s forwards, flota 7s ease-in-out 2.2s infinite;
}
@keyframes logo { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes halo { to { opacity: 1; } }
@keyframes latido { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .72; scale: 1.06; } }

/* Filete dorado que se dibuja desde el centro */
.filete { position: relative; width: min(260px, 60vw); height: 1px; margin: 14px 0 26px; background: linear-gradient(90deg, transparent, var(--dorado), transparent); transform: scaleX(0); animation: dibuja 1.5s var(--ease) 1.2s forwards; }
.filete i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--dorado); translate: -50% -50%; rotate: 45deg; opacity: 0; animation: aparece .8s ease 2.3s forwards; }
@keyframes dibuja { to { transform: scaleX(1); } }
@keyframes aparece { to { opacity: 1; } }

h1 {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; color: var(--tinta);
  font-size: clamp(34px, 6.6vw, 56px); line-height: 1.12; letter-spacing: .005em;
}
h1 .l { display: block; }
h1 .l > span { display: inline-block; opacity: 0; transform: translateY(.55em); filter: blur(6px); animation: palabra 1.1s var(--ease) forwards; }
h1 .l:nth-child(1) > span:nth-child(1) { animation-delay: 1.5s; }
h1 .l:nth-child(1) > span:nth-child(2) { animation-delay: 1.65s; }
h1 .l:nth-child(2) > span:nth-child(1) { animation-delay: 1.8s; }
h1 .l:nth-child(2) > span:nth-child(2) { animation-delay: 1.95s; }
@keyframes palabra { to { opacity: 1; transform: none; filter: blur(0); } }

.lema {
  font-family: "Allura", cursive; font-size: clamp(34px, 7vw, 48px); line-height: 1.15; margin-top: 14px;
  color: var(--dorado-txt); opacity: 0; animation: sube 1.2s var(--ease) 2.3s forwards;
  background: linear-gradient(100deg, var(--dorado-txt) 0%, var(--dorado-txt) 40%, #D9B965 50%, var(--dorado-txt) 60%, var(--dorado-txt) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lema { animation: sube 1.2s var(--ease) 2.3s forwards, brillo 7s ease-in-out 3.8s infinite; }
@keyframes brillo { 0%, 55% { background-position: 100% 0; } 100% { background-position: -50% 0; } }

.texto { margin-top: 18px; max-width: 460px; font-size: 16px; line-height: 1.75; opacity: 0; animation: sube 1.2s var(--ease) 2.6s forwards; }

.redes { margin-top: 34px; display: flex; align-items: center; gap: 18px; opacity: 0; animation: sube 1.2s var(--ease) 2.9s forwards; }
.redes a {
  position: relative; padding: 6px 2px; color: var(--morado); text-decoration: none; font-weight: 600;
  font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase;
}
.redes a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dorado); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.redes a:hover::after, .redes a:focus-visible::after { transform: scaleX(1); }
.redes a:focus-visible { outline: 2px solid var(--morado); outline-offset: 4px; border-radius: 2px; }
.redes b { color: var(--dorado); font-size: 8px; font-weight: 400; }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

footer { position: fixed; left: 0; right: 0; bottom: 22px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(75, 58, 94, .6); opacity: 0; animation: aparece 1.2s ease 3.2s forwards; }

@media (max-width: 520px) { body { padding-top: 28px; } .redes { gap: 14px; } }

/* Sin movimiento: todo aparece de una vez, sin deriva ni destellos */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .logo, h1 .l > span { filter: none; }
  #polvo { display: none; }
}