/* Hero: texto, navegación y botones HTML; solo el producto procede del asset. */
.exact-hero-page { --hero-content-width: 87.6%; }
.exact-hero-page .header-inner { width: var(--hero-content-width); max-width: none; }
.exact-hero-page .site-header.is-scrolled {
    background: #08090cda;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: #ffffff0b;
}
.exact-hero-page .login-button::after {
    background: linear-gradient(110deg, transparent 30%, #ffffff09 47%, #ffffff13 50%, transparent 68%);
    animation: login-shine 5s ease-in-out infinite;
}
.exact-hero-page .login-button:hover > i:first-child { transform: translateX(2px); }
.hero-exact {
    position: relative;
    width: 100%;
    min-height: clamp(620px, 44.32vw, 850px);
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 78% 50%, #ff005814, transparent 56%), #08090c;
}
.hero-exact::before, .hero-exact::after { content: ''; display: block; position: absolute; pointer-events: none; z-index: -1; }
.hero-exact::before {
    inset: 0;
    background: radial-gradient(ellipse at 77% 47%, rgba(var(--apliton-primary-rgb), .17), transparent 43%), radial-gradient(ellipse at 51% 83%, rgba(var(--apliton-primary-rgb), .13), transparent 48%);
    animation: hero-neon-arrive 4s ease-out both;
}
.hero-exact::after {
    left: -15%; right: -15%; bottom: -12%; height: 48%;
    background: repeating-linear-gradient(90deg, transparent 0 78px, rgba(var(--apliton-primary-rgb), .14) 79px 80px), repeating-linear-gradient(0deg, transparent 0 35px, rgba(var(--apliton-primary-rgb), .12) 36px 37px);
    transform: perspective(450px) rotateX(58deg);
    -webkit-mask-image: linear-gradient(transparent, #000 35%, transparent 95%);
    mask-image: linear-gradient(transparent, #000 35%, transparent 95%);
}
.hero-neon-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--apliton-primary); pointer-events: none; overflow: visible; }
.hero-neon-lines path { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .48; filter: drop-shadow(0 0 4px rgba(var(--apliton-primary-rgb), .65)); }
.hero-neon-lines .neon-wave-soft { opacity: .2; stroke-width: .7; }
.hero-neon-lines .neon-orbit { opacity: .36; }
.hero-neon-lines .neon-nodes { fill: currentColor; opacity: .7; filter: drop-shadow(0 0 4px var(--apliton-primary)); }
.js-ready .hero-neon-lines path { animation: hero-neon-draw 2.2s .2s ease-out both; }
.js-ready .hero-neon-lines path:nth-child(2) { animation-delay: .35s; }
.js-ready .hero-neon-lines path:nth-child(4) { animation-delay: .5s; }
@keyframes hero-neon-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes hero-neon-arrive { from { opacity: .35; } to { opacity: 1; } }
.hero-exact .hero-exact-art {
    position: absolute;
    inset: auto 0 5% auto;
    width: 64%;
    height: auto;
    aspect-ratio: 1672 / 941;
    max-width: none;
    min-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transform: none;
    pointer-events: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.hero-exact-art::after { display: none; }
.hero-exact-image {
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1672 / 941;
    transform: none;
}
.hero-exact-copy {
    position: relative;
    z-index: 2;
    width: 43%;
    min-height: inherit;
    margin-left: calc((100% - var(--hero-content-width)) / 2);
    padding-top: clamp(200px, 14.2vw, 274px);
    padding-bottom: 90px;
}
.hero-exact h1 {
    margin: 0;
    font-size: clamp(43px, 4.15vw, 79px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.055em;
    color: #fff;
}
.hero-exact h1 span { color: var(--apliton-primary); }
.hero-exact-description { color: #c8c3cc; margin-top: 20px; line-height: 1.7; font-size: 14px; max-width: 510px; }
.hero-exact-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.hero-exact .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 54px;
    padding: 16px 24px;
    gap: 12px;
    margin: 0;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
}
.hero-exact .hero-exact-primary { color: #fff; background: var(--apliton-primary); border: 1px solid var(--apliton-primary); min-height: 50px; padding: 14px 22px; font-size: 12px; font-weight: 600; }
.hero-exact .hero-exact-secondary { color: #fff; background: #08090caa; border: 1px solid #ffffff70; }
.hero-exact-primary:hover { background: #e6004f; box-shadow: 0 8px 28px #ff00582b; }
.hero-exact-secondary:hover { border-color: var(--apliton-primary); background: #1c1119; }
.hero-exact-secondary > i:first-child { color: var(--apliton-primary); }
.hero-exact .button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (min-width: 1600px) {
    .hero-exact .button { min-height: 64px; padding-inline: 30px; font-size: 15px; }
    .hero-exact .hero-exact-primary { min-height: 58px; padding-inline: 26px; font-size: 14px; }
    .hero-exact-buttons { margin-top: 40px; gap: 22px; }
}
@media (max-width: 1280px) and (min-width: 1101px) {
    .hero-exact-copy { width: 42%; }
    .hero-exact .button { min-height: 48px; padding-inline: 17px; font-size: 11px; gap: 8px; }
    .hero-exact-buttons { gap: 12px; }
}
@media (max-width: 1100px) {
    .exact-hero-page { --hero-content-width: min(650px, calc(100% - 56px)); }
    .hero-exact { display: flex; flex-direction: column; min-height: 0; padding: 132px 28px 28px; }
    .hero-exact-copy { order: 1; width: 100%; max-width: 650px; margin-inline: auto; padding: 0; min-height: 0; }
    .hero-exact h1 { font-size: clamp(38px, 6.6vw, 65px); }
    .hero-exact-buttons { margin-top: 24px; }
    .hero-exact .button { min-height: 52px; }
    .hero-exact .hero-exact-art {
        display: block;
        position: relative;
        inset: auto;
        order: 2;
        width: calc(100% + 56px);
        max-width: none;
        margin: 30px 0 0 -28px;
        aspect-ratio: 1672 / 941;
    }
    .hero-neon-lines { opacity: .6; }
}
@media (max-width: 540px) {
    .exact-hero-page { --hero-content-width: calc(100% - 40px); }
    .hero-exact { padding: 112px 20px 22px; }
    .hero-exact h1 { font-size: clamp(32px, 9.25vw, 46px); }
    .hero-exact-description { font-size: 12px; margin-top: 17px; }
    .hero-exact-buttons { margin-top: 21px; gap: 11px; }
    .hero-exact .button { font-size: 12px; padding-inline: 20px; }
    .hero-exact .hero-exact-art { width: calc(100% + 40px); margin-left: -20px; margin-top: 26px; }
    .hero-neon-lines .neon-wave-soft { display: none; }
    .hero-exact::after { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
    .exact-hero-page .login-button::after { animation: none; opacity: 0; }
    .exact-hero-page .login-button:hover > i:first-child { transform: none; }
    .hero-exact::before, .js-ready .hero-neon-lines path { animation: none; }
}