@font-face { font-family: 'Cormorant Garamond'; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/CormorantGaramond-300-normal-latin.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/CormorantGaramond-400-normal-latin.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/Jost-300-normal-latin.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/Jost-400-normal-latin.woff2) format('woff2'); }

:root { --fondo: #1E1F1E; --crema: #F4F3EF; --tenue: #A9A9A3; --verde: #6E9A7C; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--fondo); color: var(--crema); }
body { font-family: 'Jost', system-ui, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }

main {
  position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 48px 24px;
}

/* Resplandor lento, como una nebulosa detrás del logo */
.brillo {
  position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(40% 35% at 30% 40%, rgba(110, 154, 124, .20), transparent 70%),
    radial-gradient(35% 30% at 72% 62%, rgba(160, 150, 190, .12), transparent 70%);
  filter: blur(30px); animation: deriva 22s ease-in-out infinite alternate;
}
@keyframes deriva { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } }

main > *:not(.brillo) { position: relative; opacity: 0; animation: aparece 1.1s ease-out forwards; }
.logo   { width: min(440px, 78vw); height: auto; animation-delay: .1s; }
.linea  { width: 1px; height: 56px; margin: 36px 0 28px; background: linear-gradient(var(--verde), transparent); animation-delay: .5s; }
.eyebrow{ margin: 0 0 14px; font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: var(--verde); animation-delay: .7s; }
h1      { margin: 0 0 22px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(34px, 6.4vw, 62px); line-height: 1.1; animation-delay: .9s; }
.texto  { max-width: 440px; margin: 0 0 40px; font-size: 16px; line-height: 1.7; color: var(--tenue); animation-delay: 1.1s; }
.lugar  { margin: 0; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--tenue); animation-delay: 1.3s; }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .brillo { animation: none; }
  main > *:not(.brillo) { animation: none; opacity: 1; }
}