@font-face {
    font-family: 'Touche'; /* El nombre real de tu fuente */
    src: url('/font/Touche-Regular-BF642a2ebfe9ff0.otf') format('otf');
    font-weight: 400; /* 400 significa peso normal / regular */
    font-style: normal;
    font-display: swap; 
}
:root { --primary: #800080; --bs-primary: #800080; --bs-primary-rgb: 128,0,128; }
* { box-sizing: border-box; }
body { margin: 0; background: #100d16; color: #fff; font-family: 'Touche', sans-serif; }
.landing { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; padding: 180px 24px; }
.backgrounds, .shade { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backgrounds img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.backgrounds img.active { opacity: 1; }
.shade { background: linear-gradient(180deg,rgba(10,7,17,.65),rgba(10,7,17,.35) 38%,rgba(10,7,17,.75)),linear-gradient(90deg,rgba(35,0,35,.32),rgba(10,7,17,.12)); }
.selector { position: absolute; top: max(28px,env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(660px,calc(100% - 32px)); }
.selector .swiper-wrapper { align-items: center; }
.selector:not(.swiper-initialized) .swiper-wrapper { display: flex; overflow-x: auto; }
.selector .swiper-slide { width: 180px; flex-shrink: 0; }
.choice { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 104px; padding: 16px 10px 24px; border: 0; background: none; cursor: pointer; }
.choice img { width: 100%; height: 100px; object-fit: contain; opacity: .5; transition: opacity .25s; }
.choice[aria-pressed="true"] img { opacity: 1; }
.choice::after { content: ''; position: absolute; bottom: 0; left: 15%; width: 70%; height: 5px; background: var(--primary); transform: scaleX(0); transition: transform .25s; }
.choice[aria-pressed="true"]::after { transform: scaleX(1); }
.choice:focus-visible { outline: 2px solid #e9a6e9; outline-offset: -3px; border-radius: 4px; }
.hero-content { width: min(100%,850px); text-align: center; }
.eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .34em; color: #e8cbe8; margin-bottom: 24px; }
h1 { font-size: clamp(2.8rem,7vw,6rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.04; margin-bottom: 26px; text-wrap: balance; }
.description { max-width: 560px; margin: 0 auto 34px; font-size: clamp(1rem,1.6vw,1.16rem); line-height: 1.8; color: #e0dce5; text-wrap: pretty; }
.site-link { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: #650065; --bs-btn-hover-border-color: #650065; --bs-btn-active-bg: #580058; --bs-btn-active-border-color: #580058; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; padding: 15px 30px; border-radius: 4px; font-size: .9rem; font-weight: 600; display: inline-flex; gap: 28px; align-items: center; }
.site-link:focus-visible { outline: 3px solid #e9a6e9; outline-offset: 5px; }
.signature { position: absolute; bottom: 26px; left: 0; width: 100%; text-align: center; color: #c5bacb; font-size: .6rem; letter-spacing: .25em; }
@media(max-width:575px) { .landing { padding: 150px 20px; } .selector { top: 20px; } .selector .swiper-slide { width: 140px; } .choice { height: 88px; } .choice img { height: 48px; } .eyebrow { letter-spacing: .22em; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; animation: none !important; } }