/* Original Eclipse artwork shared by the Spanish and English home pages. */
.eclipse{--_factor: min(600px, 80vh); --_size: min(var(--_factor), 80vw); font-size: max(calc(var(--_size) * 0.03), 10px);  --ecl-bg: #07060d; --ecl-glow: #8b7bff;  --ecl-glow-2: #35d6c8;  --ecl-line: #c7bfff;  --ecl-line-soft: rgba(199, 191, 255, 0.18); --ecl-text-hi: #efeaff; --ecl-text-lo: #b3a8ff; --ecl-spot: 139, 123, 255;  --ecl-panel: #14121f; position: relative; overflow: hidden; background: var(--ecl-bg) linear-gradient(0deg, rgba(139, 123, 255, 0.05), rgba(53, 214, 200, 0.05)); min-height: 47em;}
.eclipse.eclipse--oro{--ecl-glow: #ffb454; --ecl-glow-2: #ffd39b; --ecl-line: #ffd9a8; --ecl-line-soft: rgba(255, 217, 168, 0.18); --ecl-text-hi: #fff3e2; --ecl-text-lo: #ffcf94; --ecl-spot: 255, 180, 84;}
.eclipse::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9em; background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--bg, #0a0a0f) 18%, transparent) 34%,
    color-mix(in srgb, var(--bg, #0a0a0f) 55%, transparent) 62%,
    color-mix(in srgb, var(--bg, #0a0a0f) 86%, transparent) 84%,
    var(--bg, #0a0a0f) 100%); pointer-events: none; z-index: 3;}
.eclipse h1,.eclipse p{margin: 0; padding: 0;}
.eclipse .cabecera{display: flex; width: 100%; justify-content: center; padding: 2em; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; opacity: 0; translate: 0 -1em; animation: ecl-load 2s ease-in 1.6s forwards, ecl-up 1.4s ease-out 1.6s forwards;}
.eclipse .disco{position: relative; width: 1.8em; height: 1.8em; border-radius: 50%; background: #000; border: none; padding: 0; box-shadow: 0 0 1em 0 var(--ecl-glow); cursor: pointer; transition: box-shadow 1s ease-in-out, scale 400ms var(--rebote, cubic-bezier(0.34, 1.56, 0.64, 1));}
.eclipse .disco::after{content: ""; position: absolute; inset: -0.35em; border-radius: 50%; border: 1px solid var(--ecl-glow); opacity: 0; animation: ecl-latido 3.2s ease-out 3.4s infinite; pointer-events: none;}
@keyframes ecl-latido{0% { transform: scale(0.85); opacity: 0; } 25% { opacity: 0.75; } 100% { transform: scale(2.1); opacity: 0; }}
.eclipse .disco:hover,.eclipse .disco:focus-visible{scale: 1.18;}
.eclipse .disco-pista{position: absolute; top: 3.4em; left: 50%; translate: -50% 0; font-size: 0.92em; letter-spacing: 0.06em; white-space: nowrap; color: var(--ecl-text-lo); opacity: 0; transition: opacity 260ms ease, translate 260ms ease; pointer-events: none;}
.eclipse .cabecera:hover .disco-pista,.eclipse .disco:focus-visible ~ .disco-pista{opacity: 0.85; translate: -50% 0.3em;}
.eclipse .disco:hover,.eclipse .disco:focus-visible{box-shadow: -0.3em 0.1em 0.3em 0 #ffb454;}
.eclipse.eclipse--oro .disco:hover,.eclipse.eclipse--oro .disco:focus-visible{box-shadow: -0.3em 0.1em 0.3em 0 #8b7bff;}
.eclipse .disco:focus-visible{outline: 2px solid var(--ecl-line); outline-offset: 3px;}
.eclipse .spotlight{pointer-events: none; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; transition: filter 1s ease-in-out; height: 42em; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);}
.eclipse .spotlight > div{border-radius: 0 0 50% 50%; position: absolute; left: 0; right: 0; margin: 0 auto; top: 3em; width: 30em; height: max(42em, 86vh); background-image: conic-gradient(from 0deg at 50% -5%,
    transparent 45%,
    rgba(var(--ecl-spot), 0.3) 49%,
    rgba(var(--ecl-spot), 0.5) 50%,
    rgba(var(--ecl-spot), 0.3) 51%,
    transparent 55%); transform-origin: 50% 0; filter: blur(15px) opacity(0.5); z-index: 0; animation: ecl-load 2s ease-in-out forwards, ecl-loadrot 2s ease-in-out forwards, ecl-spotlight 21s ease-in-out infinite reverse;}
.eclipse .spotlight > div:nth-child(1){rotate: 20deg; animation: ecl-load 2s ease-in-out forwards, ecl-loadrot 2s ease-in-out forwards, ecl-spotlight 17s ease-in-out infinite;}
.eclipse .spotlight > div:nth-child(2){rotate: -20deg; animation: ecl-load 2s ease-in-out forwards, ecl-loadrot 2s ease-in-out forwards, ecl-spotlight 14s ease-in-out infinite;}
@keyframes ecl-loadrot{0% { rotate: 0deg; scale: 0; } 100% { scale: 1; }}
@keyframes ecl-spotlight{0% { transform: rotateZ(0deg) scale(1);    filter: blur(15px) opacity(0.5); } 20% { transform: rotateZ(-1deg) scale(1.2); filter: blur(16px) opacity(0.6); } 40% { transform: rotateZ(2deg) scale(1.3);  filter: blur(14px) opacity(0.4); } 60% { transform: rotateZ(-2deg) scale(1.2); filter: blur(15px) opacity(0.6); } 80% { transform: rotateZ(1deg) scale(1.1);  filter: blur(13px) opacity(0.4); } 100% { transform: rotateZ(0deg) scale(1);    filter: blur(15px) opacity(0.5); }}
.eclipse canvas.particulas{position: absolute; inset: 0; pointer-events: none; animation: ecl-load 0.4s ease-in-out forwards; z-index: 1; width: 100%; height: 100%;}
.eclipse .accent-lines{pointer-events: none; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 42em; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);}
.eclipse .accent-lines > div{position: absolute; top: 0; right: 0; left: 0; margin: auto; height: 100%; width: 100%;}
.eclipse .accent-lines > div:nth-child(1) > div{position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--ecl-line-soft), transparent); opacity: 0; scale: 0; animation: ecl-accentload 2s ease-out 2.4s forwards;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(1){top: 6em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(2){top: 11em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(3){top: 16em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(4){top: 24em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(5){top: 29em;}
.eclipse .accent-lines > div:nth-child(2) > div{position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 1px; height: 100%; background: var(--ecl-line-soft); opacity: 0; scale: 0; animation: ecl-accentload 2s ease-out 2s forwards;}
.eclipse .accent-lines > div:nth-child(2) > div:nth-child(1){left: 24em;}
.eclipse .accent-lines > div:nth-child(2) > div:nth-child(2){left: 34em;}
.eclipse .accent-lines > div:nth-child(2) > div:nth-child(3){right: 24em;}
.eclipse .accent-lines > div:nth-child(2) > div:nth-child(4){right: 34em;}
@keyframes ecl-accentload{0% { opacity: 0; scale: 0; } 100% { opacity: 1; scale: 1; }}
.eclipse .accent-lines > div:nth-child(1) > div::before,.eclipse .accent-lines > div:nth-child(1) > div::after{content: ""; display: none; position: absolute; width: 0.2em; height: 0.2em; border-radius: 1em; background: var(--ecl-glow); left: 0; right: 0; margin: auto; translate: 0 -1px; opacity: 0; scale: 0; animation: ecl-accentload 2s ease-out 4.4s forwards;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(3)::before{display: block; left: 24em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(3)::after{display: block; right: 24em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(4)::before{display: block; left: 24em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(4)::after{display: block; right: 24em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(5)::before{display: block; left: 24em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(5)::after{display: block; right: 24em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(2)::before,.eclipse .accent-lines > div:nth-child(1) > div:nth-child(2)::after{display: block; width: 5em; height: 1px; border-radius: 0; animation: ecl-accentload2 2s ease-out 2.4s forwards;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(2)::before{right: 24em; rotate: 45deg; translate: -2.5em 2.5em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(2)::after{right: 24em; rotate: -45deg; translate: -2.5em 2.5em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(1)::before,.eclipse .accent-lines > div:nth-child(1) > div:nth-child(1)::after{display: block; width: 5em; height: 1px; border-radius: 0; animation: ecl-accentload3 2s ease-out 2.4s forwards;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(1)::before{left: 24em; rotate: 45deg; translate: 2.5em 7.5em;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(1)::after{left: 24em; rotate: -45deg; translate: 2.5em 7.5em;}
@keyframes ecl-accentload2{0% { opacity: 0; scale: 0; transform: rotate(360deg); } 50% { scale: 0; } 100% { opacity: 0.12; scale: 1; transform: rotate(0deg); }}
@keyframes ecl-accentload3{0% { opacity: 0; scale: 0; transform: rotate(-360deg); } 50% { scale: 0; } 100% { opacity: 0.12; scale: 1; transform: rotate(0deg); }}
.eclipse .sub-eyebrow{position: absolute; left: 0; right: 0; top: 13em; margin: auto; height: fit-content; opacity: 0.7; translate: 0; z-index: 2;}
@keyframes ecl-load3{0% { opacity: 0; } 100% { opacity: 0.7; }}
.eclipse .sub-eyebrow p{font-size: 1.1em; position: relative; width: fit-content; margin: auto; letter-spacing: 0.08em; color: var(--ecl-text-hi); text-shadow: 0 2px 16px rgba(var(--ecl-spot), 0.24); background: linear-gradient(0deg, var(--ecl-text-hi) 0, var(--ecl-text-lo) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.eclipse .sub-eyebrow p::before,.eclipse .sub-eyebrow p::after{position: absolute; top: 60%; display: block; content: ""; width: 5em; height: 1px; opacity: 0; animation: ecl-load2 1.4s ease-in-out 0s forwards, ecl-up 1.4s ease-out 0s forwards;}
@keyframes ecl-load2{0% { opacity: 0; } 100% { opacity: 0.3; }}
.eclipse .sub-eyebrow p::before{background: linear-gradient(-90deg, var(--ecl-glow) 0%, transparent 100%); right: 120%; translate: -5em 0;}
.eclipse .sub-eyebrow p::after{background: linear-gradient(90deg, var(--ecl-glow) 0%, transparent 100%); left: 120%; translate: 5em 0;}
.eclipse .titular{position: absolute; left: 0; right: 0; top: 16em; margin: auto; height: 20em; padding-top: 2em; translate: 0 -1.6em; opacity: 1; z-index: 2;}
@keyframes ecl-load{0% { opacity: 0; } 100% { opacity: 1; }}
.eclipse .titular > *{position: absolute; left: 0; right: 0; margin: auto; width: fit-content; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 7em; font-weight: 600; line-height: 1.1; color: var(--ecl-text-lo);  background: linear-gradient(100deg, var(--ecl-glow) 10%, var(--ecl-glow-2) 90%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 16px rgba(var(--ecl-spot), 0.24);}
.eclipse .titular > .titular-glow{background: linear-gradient(100deg, var(--ecl-glow) 10%, var(--ecl-glow-2) 90%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: blur(16px) opacity(0.4);}
.eclipse .titular .sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.eclipse .pie{position: absolute; left: 0; right: 0; top: 26.9em; display: flex; flex-direction: column; align-items: center; gap: 1.4em; z-index: 2; padding: 0 1em;}
.eclipse .lema{font-size: 1.35em; line-height: 1.55; width: fit-content; max-width: 34em; text-align: center; opacity: 1; translate: 0; color: var(--ecl-text-hi); text-shadow: 0 2px 16px rgba(var(--ecl-spot), 0.24); background: linear-gradient(0deg, var(--ecl-text-hi) 0, var(--ecl-text-lo) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
@keyframes ecl-up{100% { translate: 0; }}
.eclipse .cta{position: relative; width: fit-content; min-width: 11em; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 20em; border: 1px solid rgba(199, 191, 255, 0.2); padding: 0.55em 1.6em 0.45em; background: var(--ecl-panel); text-decoration: none; white-space: nowrap; z-index: 2; opacity: 1; translate: 0; transition: background 0.5s;}
.eclipse .cta::before{content: ""; display: block; position: absolute; left: 0; top: 0; border-radius: 20em; width: 100%; height: 100%; background: rgba(var(--ecl-spot), 0.55) radial-gradient(farthest-side at 50% 100%, var(--ecl-line), transparent); opacity: 0.1; transition: all 0.4s ease-in-out;}
.eclipse .cta:hover::before,.eclipse .cta:focus-visible::before{opacity: 0.3;}
.eclipse .cta:focus-visible{outline: 2px solid var(--ecl-line); outline-offset: 3px;}
.eclipse .cta .cta-texto{background: linear-gradient(0deg, var(--ecl-text-hi), var(--ecl-text-lo)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.2em; font-weight: 600; line-height: 142%;}
.eclipse .montanas{position: absolute; left: 0; right: 0; top: 33em; margin: auto; width: 100%; height: 10em; pointer-events: none; z-index: 1;}
.eclipse .montanas::before{content: ""; display: block; width: 100%; height: 500%; position: absolute; top: 0%; background: linear-gradient(0deg,
    var(--ecl-bg) 55%,
    color-mix(in srgb, var(--ecl-bg) 62%, transparent) 74%,
    color-mix(in srgb, var(--ecl-bg) 24%, transparent) 86%,
    transparent 95%); z-index: 2;}
.eclipse .montanas > div{box-shadow: -1em -0.2em 0.4em -1.1em var(--ecl-line), inset 0em 0em 0em 2px var(--ecl-line), inset 0.2em 0.3em 0.2em -0.2em var(--ecl-line), inset 10.2em 10.3em 2em -10em rgba(var(--ecl-spot), 0.18); background: var(--ecl-panel); z-index: 1; filter: brightness(0.8); position: absolute; left: 0; right: 0; margin: auto; width: 20em; height: 20em; rotate: 45deg;}
.eclipse .montanas > div:nth-child(1){bottom: -140%; --mountain-x: -6em; --mountain-y: 2em; translate: var(--mountain-x) var(--mountain-y); animation: ecl-mountain1 2s ease-out 2.4s both;}
.eclipse .montanas > div:nth-child(2){bottom: -108%; --mountain-x: -2em; --mountain-y: 0em; translate: var(--mountain-x) var(--mountain-y); width: 14em; height: 20em; animation: ecl-mountain2 2s ease-out 2.2s both;}
.eclipse .montanas > div:nth-child(3){bottom: -140%; --mountain-x: 6em; --mountain-y: 3em; translate: var(--mountain-x) var(--mountain-y); animation: ecl-mountain1 2s ease-out 2s both;}
@keyframes ecl-mountain1{0% { translate: var(--mountain-x) calc(var(--mountain-y) + 10em); } 100% { translate: var(--mountain-x) var(--mountain-y); }}
@keyframes ecl-mountain2{0% { translate: var(--mountain-x) calc(var(--mountain-y) + 13.2em); } 100% { translate: var(--mountain-x) var(--mountain-y); }}
.eclipse .montanas > div::before{content: ""; display: block; background: repeating-radial-gradient(at 100% 100%, transparent 0%, rgba(199, 191, 255, 0.13) 2px, transparent 4px); width: 12em; height: 12em; position: absolute; left: 0; top: 0; border-bottom-right-radius: 100%;}
.eclipse .espaciador{height: 43.5em; pointer-events: none;}
@media (prefers-reduced-motion: reduce){.eclipse .disco::after{animation: none; opacity: 0.45; transform: scale(1.25);}
.eclipse .disco:hover,.eclipse .disco:focus-visible{scale: 1;}
.eclipse .cabecera,.eclipse .spotlight > div,.eclipse .accent-lines > div:nth-child(1) > div,.eclipse .accent-lines > div:nth-child(2) > div,.eclipse .accent-lines > div:nth-child(1) > div::before,.eclipse .accent-lines > div:nth-child(1) > div::after,.eclipse .sub-eyebrow,.eclipse .sub-eyebrow p::before,.eclipse .sub-eyebrow p::after,.eclipse .titular,.eclipse .titular > *,.eclipse .lema,.eclipse .cta{animation: none !important; opacity: 1; translate: 0; scale: 1;}
.eclipse .sub-eyebrow{opacity: 0.7;}
.eclipse .sub-eyebrow p::before,.eclipse .sub-eyebrow p::after{opacity: 0.3;}
.eclipse .accent-lines > div:nth-child(1) > div:nth-child(1)::before,.eclipse .accent-lines > div:nth-child(1) > div:nth-child(1)::after,.eclipse .accent-lines > div:nth-child(1) > div:nth-child(2)::before,.eclipse .accent-lines > div:nth-child(1) > div:nth-child(2)::after{opacity: 0.12;}
.eclipse .montanas > div:nth-child(1){animation: none; bottom: -140%;}
.eclipse .montanas > div:nth-child(2){animation: none; bottom: -108%;}
.eclipse .montanas > div:nth-child(3){animation: none; bottom: -140%;}
.eclipse canvas.particulas{display: none;}}
@media (max-width: 640px){.eclipse{min-height: 52em;}
.eclipse .lema{font-size: 1.5em; max-width: 20em;}
.eclipse .montanas{top: 37em;}
.eclipse .espaciador{height: 48em;}}