/* Aurora adaptation for Tailwind v4: local CSS tokens replace the v3 palette plugin. */
.hero{position:relative;isolation:isolate;background:linear-gradient(115deg,#380b17 0%,#650e22 52%,#440a19 100%)}
#hero-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora-motion,.aurora-background,.aurora-clip{position:absolute;inset:0;pointer-events:none}
.aurora-background{--aurora:repeating-linear-gradient(110deg,#6b122c 10%,#c4434e 16%,#e1a04f 21%,#91243c 27%,#4e0c21 34%);--aurora-shade:repeating-linear-gradient(100deg,#270811 0%,#270811 7%,transparent 10%,transparent 12%,#270811 16%)}
.aurora-lights{position:absolute;inset:-12%;background-image:var(--aurora-shade),var(--aurora);background-size:300% 200%,200% 160%;background-position:50% 50%,50% 50%;filter:blur(18px);opacity:.55;transform:translateZ(0)}
.aurora-lights::after{content:'';position:absolute;inset:0;background-image:var(--aurora);background-size:200% 150%;background-position:50% 50%;mix-blend-mode:screen;opacity:.36;animation:aurora-flow 60s linear infinite}
.aurora-lights{animation:aurora-flow 60s linear infinite}
.aurora-radial{mask-image:radial-gradient(ellipse at 80% 45%,black 12%,#000b 42%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 80% 45%,black 12%,#000b 42%,transparent 78%)}
/* The entire content layer, including the solid yellow disc, is above the light. */
.hero .hero-grid{position:relative;z-index:1}
.hero .hero-art{isolation:isolate}
.hero .hero-art::before{z-index:-1}
.hero .hero-copy{position:relative;z-index:2}
.hero .hero-actions .cta.ghost{background:#3b081c66;border-color:#ffffff66}
.aurora-paused .aurora-lights,.aurora-paused .aurora-lights::after{animation-play-state:paused}
@keyframes aurora-flow{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
@media(max-width:760px){
 .hero{background:linear-gradient(160deg,#380b17,#650e22 65%,#380b17)}
 .aurora-lights{opacity:.42;filter:blur(12px)}
 .aurora-radial{mask-image:radial-gradient(ellipse at 65% 75%,black 12%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at 65% 75%,black 12%,transparent 74%)}
}
@media(prefers-reduced-motion:reduce){.aurora-lights,.aurora-lights::after{animation:none!important}.aurora-lights{filter:none;opacity:.2}}

/* Visible from the first HTML paint, with or without the React enhancement. */
#inicio.hero{background:linear-gradient(115deg,#270911 0%,#510e20 55%,#320914 100%)}
#hero-aurora .aurora-lights{opacity:.85;filter:blur(14px);background-image:repeating-linear-gradient(115deg,transparent 0%,transparent 18%,#d4526555 23%,#ffa95e99 27%,#ef729366 31%,transparent 38%,transparent 52%);background-size:200% 200%;animation:aurora-flow 24s linear infinite}
#hero-aurora .aurora-lights::after{opacity:.65;background-image:repeating-linear-gradient(105deg,transparent 0%,transparent 27%,#ffbc7066 31%,#ea477a88 35%,transparent 41%,transparent 65%);background-size:250% 150%;mix-blend-mode:screen;animation:aurora-flow 34s linear infinite reverse}
#hero-aurora .aurora-radial{mask-image:linear-gradient(90deg,#0001 0%,#0005 30%,#000 57%,#000 100%);-webkit-mask-image:linear-gradient(90deg,#0001 0%,#0005 30%,#000 57%,#000 100%)}
#hero-aurora .aurora-paused .aurora-lights,#hero-aurora .aurora-paused .aurora-lights::after{animation-play-state:paused}
@media(max-width:760px){#hero-aurora .aurora-radial{mask-image:linear-gradient(180deg,#0002 0%,#0006 40%,#000 65%);-webkit-mask-image:linear-gradient(180deg,#0002 0%,#0006 40%,#000 65%)}#hero-aurora .aurora-lights{opacity:.7;filter:blur(10px)}}
@media(prefers-reduced-motion:reduce){#hero-aurora .aurora-lights,#hero-aurora .aurora-lights::after{animation:none!important}}
