:root {
  --ink: #03172a;
  --ink-deep: #020d18;
  --paper: #f4efe6;
  --gold: #d9a957;
  --gold-light: #f5d394;
  --line: rgba(244, 239, 230, 0.27);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink-deep); font-family: Manrope, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 80% 24%, #0e3653 0%, var(--ink) 39%, var(--ink-deep) 100%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 9, 18, .5) 0%, transparent 62%), linear-gradient(0deg, rgba(2, 13, 24, .5), transparent 45%);
}

.hero__grain { position: absolute; inset: 0; z-index: -1; opacity: .25; background-image: url("img/identidad.png"); background-size: cover; background-position: 50% 10%; mix-blend-mode: soft-light; filter: grayscale(1) contrast(1.4); }
.hero__grain {
  opacity: .8;
  background-image:
    repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(2deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 40%, rgba(0,0,0,.24));
  background-size: 6px 6px, 5px 5px, 100% 100%;
  background-position: 0 0, 0 0, center;
  mix-blend-mode: soft-light;
  filter: contrast(1.1);
}
.hero__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.hero__glow--one { width: 38vw; height: 38vw; top: 6%; right: -11%; background: radial-gradient(circle, rgba(217,169,87,.18), transparent 68%); animation: breathe 8s ease-in-out infinite; }
.hero__glow--two { width: 26vw; height: 26vw; bottom: -12%; left: 21%; background: radial-gradient(circle, rgba(36,99,139,.32), transparent 70%); animation: breathe 10s ease-in-out infinite reverse; }

.hero__center { width: min(760px, 88vw); padding: 10vh 0 9vh; text-align: center; }
.brand { display: block; width: min(520px, 83vw); margin: 0 auto; animation: reveal 1s .1s both; }
.brand img { width: 100%; display: block; }

.hero__rule { width: min(320px, 55vw); height: 1px; margin: clamp(36px, 5vw, 58px) auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: reveal .8s .25s both; }
.hero__content { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 18px; color: var(--gold-light); font: 600 10px/1.4 Manrope, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; animation: reveal .8s .35s both; }
h1, h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; }
h1 { font-size: clamp(2.1rem, 4.2vw, 4.2rem); line-height: 1; letter-spacing: -.05em; animation: reveal .9s .45s both; }
.hero__intro { max-width: 460px; margin: 0 auto 32px; color: rgba(244,239,230,.76); font-size: 15px; line-height: 1.75; animation: reveal .8s .58s both; }
.cta { display: inline-flex; align-items: center; gap: 24px; padding-bottom: 11px; border-bottom: 1px solid var(--gold); color: var(--gold-light); font: 600 10px/1 Manrope, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; transition: color .3s ease, gap .3s ease; animation: reveal .8s .72s both; }
.cta svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cta:hover { color: #fff4dd; gap: 34px; }

.footer { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 36px; padding: 31px 4.5vw 28px; color: rgba(244,239,230,.72); background: #020d18; overflow: hidden; }
.footer__line { position: absolute; top: 0; left: 4.5vw; right: 4.5vw; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(217,169,87,.12)); }
.footer__kicker, .footer__copyright { margin: 0; align-self: end; font: 600 9px/1.3 Manrope, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.footer__email { grid-column: 2; font: 500 clamp(1rem, 1.5vw, 1.35rem)/1.2 "Playfair Display", serif; color: var(--gold-light); transition: color .25s; }
.footer__email:hover { color: white; }
.footer__copyright { grid-column: 1; grid-row: 2; color: rgba(244,239,230,.38); }

@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes monogram-in { from { opacity: 0; transform: translate(8%, 8%); } to { opacity: 1; transform: translate(0); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes line-pulse { 50% { transform: scaleX(.45); transform-origin: right; opacity: .25; } }

@media (max-width: 720px) {
  .hero__center { width: min(460px, 86vw); padding: 9vh 0 8vh; }.brand { width: min(360px, 82vw); }.hero__rule { margin: 42px auto; }.hero__intro { font-size: 14px; }
  .footer { grid-template-columns: 1fr; padding: 27px 7vw 24px; gap: 18px; }.footer__email, .footer__copyright { grid-column: 1; }.footer__email { grid-row: 2; }.footer__copyright { grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }