/* ==========================================================
   DATA NEXT — ENCABEZADO PRINCIPAL
   Diseño inspirado en Analíticas V2
   ========================================================== */

.header-datanext {
    position: relative;

    /* Ocupa todo el ancho de la pantalla */
    width: 100vw;
    margin-left: calc(50% - 50vw);

    /* Franja cuadrada */
    margin-top: 0;
    margin-bottom: 1.25rem;
    border-radius: 0;

    background: #000;

    color: #ffffff;

    padding: 28px 40px;

    box-shadow:
        0 3px 14px rgba(0,0,0,.12);

    overflow: visible;
}


/* Contenedor interno */

.header-inner-datanext {
    position: relative;

    width: 100%;
    max-width: 1450px;

    min-height: 150px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;
}


/* ==========================================================
   LOGO DATA NEXT — IZQUIERDA
   ========================================================== */

.header-datanext .logo {
    position: relative;

    margin: 0;

    color: #ffffff;

    font-size: 2.5rem;
    font-weight: 800;

    letter-spacing: 1px;

    line-height: 1.1;

    text-align: left;

    /* Eliminamos cualquier decoración heredada */
    text-shadow: none;
}


/* ==========================================================
   ESLOGAN
   ========================================================== */

.header-datanext .tagline {
    margin-top: 10px;
    margin-left: 12px;

    color: rgba(255,255,255,.82);

    font-size: .95rem;
    font-weight: 500;

    text-align: left;
}


/* Quitamos efectos visuales extra del eslogan */

.header-datanext .eslogan-animado {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    white-space: nowrap;
    animation: none !important;
}

.header-datanext .eslogan-palabra {
    position: static;
    transform: none;
    opacity: 1 !important;
    animation: none !important;
    text-shadow: none !important;
    white-space: nowrap;
}

.header-datanext .eslogan-palabra:not(:last-child)::after {
    content: " · ";
    opacity: .75;
}


/* ==========================================================
   UBICACIÓN
   ========================================================== */


/* ==========================================================
   BOTONES LOGIN / REGISTRO — ARRIBA DERECHA
   ========================================================== */

.header-datanext .auth-buttons {
    position: absolute;

    top: -6px;
    right: -22px;
    left: auto;

    transform: none;

    z-index: 20;

    display: flex;
    align-items: center;

    gap: 10px;
}


.header-datanext .auth-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 5px 8px;

    border-radius: 9px;

    border: 1px solid rgba(255,255,255,.20);

    background: rgba(255,255,255,.08);

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    backdrop-filter: blur(6px);

    transition:
        background .2s ease,
        transform .2s ease;
}


.header-datanext .auth-button:hover {
    background: rgba(255,255,255,.18);

    transform: translateY(-1px);
}


.header-datanext .auth-button.register {
    background: rgba(255,255,255,.14);
}


/* ==========================================================
   TOGGLE DÍA/NOCHE — VISUAL SURREALISTA
   ========================================================== */

.header-datanext .theme-toggle {
    position: absolute;
    right: 0;
    top: 38px;
    left: auto;
    bottom: auto;
    z-index: 22;

    width: 100px;
    height: 100px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: transparent;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0;
    line-height: 0;

    -webkit-tap-highlight-color: transparent;
    outline: none;

    transition: none;
}

.header-datanext .theme-toggle:hover {
    background: transparent;
    transform: none;
}

.header-datanext .theme-toggle:active {
    transform: none;
}

.header-datanext .theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(0,220,255,.6);
}

/* Visual SVG independiente de la lógica existente */
.header-datanext .theme-surreal-visual {
    position: absolute;

    right: 0;
    top: 38px;

    width: 100px;
    height: 100px;

    z-index: 23;

    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;

    transform-origin: center;
}

.header-datanext .theme-surreal-visual svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
    shape-rendering: geometricPrecision;
}


/* ==========================================================
   TEMA SURREAL — AJUSTE MÓVIL
   ========================================================== */

@media (max-width: 700px) {
    .header-datanext .theme-surreal-visual {
        width: 55px;
        height: 55px;
    }

    .header-datanext .theme-toggle {
        width: 55px;
        height: 55px;
    }
}

/* ==========================================================
   NÚCLEO
   ========================================================== */

.theme-surreal-visual .dn-nucleo {
    fill: rgba(20,20,40,.6);
    stroke: rgba(0,200,255,.3);
    stroke-width: .5;

    transform-origin: 50px 50px;

    animation: dnRespirar 3s ease-in-out infinite;
    transition: all .7s ease;
}

body:not(.dark) .theme-surreal-visual .dn-nucleo {
    fill: rgba(255,250,200,.4);
    stroke: rgba(255,200,0,.5);
}

@keyframes dnRespirar {
    0%,100% {
        transform: scale(1);
        opacity: .9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* ==========================================================
   AURA
   ========================================================== */

.theme-surreal-visual .dn-aura {
    fill: url(#dnGradAuraNoche);

    transform-origin: 50px 50px;

    animation: dnPulsarAura 3s ease-in-out infinite;
    transition: all .8s ease;
}

body:not(.dark) .theme-surreal-visual .dn-aura {
    fill: url(#dnGradAuraDia);
}

@keyframes dnPulsarAura {
    0%,100% {
        transform: scale(1);
        opacity: .6;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* ==========================================================
   ANILLOS ORBITANDO
   ========================================================== */

.theme-surreal-visual .dn-anillo {
    fill: none;
    stroke-width: .6;
    transform-origin: 50px 50px;
    opacity: .6;
}

.theme-surreal-visual .dn-anillo-1 {
    stroke: #00c6ff;
    animation: dnGirarAnillo 12s linear infinite;
}

.theme-surreal-visual .dn-anillo-2 {
    stroke: #a86aff;
    animation: dnGirarAnillo 16s linear infinite reverse;
}

.theme-surreal-visual .dn-anillo-3 {
    stroke: #38ef7d;
    animation: dnGirarAnillo 20s linear infinite;
}

body:not(.dark) .theme-surreal-visual .dn-anillo-1 {
    stroke: #ffaa00;
}

body:not(.dark) .theme-surreal-visual .dn-anillo-2 {
    stroke: #ff6600;
}

body:not(.dark) .theme-surreal-visual .dn-anillo-3 {
    stroke: #ffd700;
}

@keyframes dnGirarAnillo {
    from {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    to {
        transform: rotate(360deg) scale(1);
    }
}

/* ==========================================================
   PARTÍCULAS
   ========================================================== */

.theme-surreal-visual .dn-particula {
    fill: #00ffff;
    filter: url(#dnGlowFuerte);
}

body:not(.dark) .theme-surreal-visual .dn-particula {
    fill: #ffdd00;
}

.theme-surreal-visual .dn-p1 {
    animation: dnOrbitar 4s linear infinite;
}

.theme-surreal-visual .dn-p2 {
    animation: dnOrbitar 5.5s linear infinite reverse;
}

.theme-surreal-visual .dn-p3 {
    animation: dnOrbitar 7s linear infinite;
}

.theme-surreal-visual .dn-p4 {
    animation: dnOrbitar 6s linear infinite reverse;
}

.theme-surreal-visual .dn-p5 {
    animation: dnOrbitar 8s linear infinite;
}

.theme-surreal-visual .dn-p6 {
    animation: dnOrbitar 5s linear infinite reverse;
}

@keyframes dnOrbitar {
    from {
        transform: rotate(0deg) translateX(42px) rotate(0deg);
        transform-origin: 50px 50px;
    }
    to {
        transform: rotate(360deg) translateX(42px) rotate(-360deg);
        transform-origin: 50px 50px;
    }
}

/* ==========================================================
   SOL
   ========================================================== */

.theme-surreal-visual .dn-icono-sol {
    transform-origin: 50px 50px;
    transition: all .7s cubic-bezier(.34,1.56,.64,1);
}

body.dark .theme-surreal-visual .dn-icono-sol {
    opacity: 0;
    transform: scale(.2) rotate(180deg);
}

body:not(.dark) .theme-surreal-visual .dn-icono-sol {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.theme-surreal-visual .dn-rayos-grupo {
    transform-origin: 50px 50px;
    animation: dnGirarRayos 20s linear infinite;
}

@keyframes dnGirarRayos {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.theme-surreal-visual .dn-rayo {
    stroke: #FFD93D;
    stroke-width: 2.5;
    stroke-linecap: round;
    filter: url(#dnGlowSuave);

    animation: dnPulsarRayo 2s ease-in-out infinite;
}

.theme-surreal-visual .dn-r1 { animation-delay: 0s; }
.theme-surreal-visual .dn-r2 { animation-delay: .1s; }
.theme-surreal-visual .dn-r3 { animation-delay: .2s; }
.theme-surreal-visual .dn-r4 { animation-delay: .3s; }
.theme-surreal-visual .dn-r5 { animation-delay: .4s; }
.theme-surreal-visual .dn-r6 { animation-delay: .5s; }
.theme-surreal-visual .dn-r7 { animation-delay: .6s; }
.theme-surreal-visual .dn-r8 { animation-delay: .7s; }
.theme-surreal-visual .dn-r9 { animation-delay: .8s; }
.theme-surreal-visual .dn-r10 { animation-delay: .9s; }
.theme-surreal-visual .dn-r11 { animation-delay: 1s; }
.theme-surreal-visual .dn-r12 { animation-delay: 1.1s; }

@keyframes dnPulsarRayo {
    0%,100% {
        stroke-width: 2.5;
        opacity: 1;
    }
    50% {
        stroke-width: 3.5;
        opacity: .7;
    }
}

.theme-surreal-visual .dn-sol-cuerpo {
    fill: url(#dnGradSol);
    transform-origin: 50px 50px;
    animation: dnPulsarSol 2.5s ease-in-out infinite;
}

@keyframes dnPulsarSol {
    0%,100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

.theme-surreal-visual .dn-sol-brillo {
    fill: rgba(255,255,200,.7);
}

.theme-surreal-visual .dn-sol-chispa {
    fill: #fff;
    filter: url(#dnGlowSuave);
    animation: dnParpadearChispa 1.5s ease-in-out infinite;
}

.theme-surreal-visual .dn-sol-chispa:nth-of-type(2) {
    animation-delay: .5s;
}

.theme-surreal-visual .dn-sol-chispa:nth-of-type(3) {
    animation-delay: 1s;
}

@keyframes dnParpadearChispa {
    0%,100% {
        opacity: .3;
    }
    50% {
        opacity: 1;
    }
}


/* ==========================================================
   MODO LUNA — SIN ANILLOS NI PARTÍCULAS ORBITANDO
   ========================================================== */

body.dark .theme-surreal-visual .dn-anillos,
body.dark .theme-surreal-visual .dn-particulas {
    display: none;
}

/* ==========================================================
   LUNA
   ========================================================== */

.theme-surreal-visual .dn-icono-luna {
    transform-origin: 50px 50px;
    transition: all .7s cubic-bezier(.34,1.56,.64,1);
}

body:not(.dark) .theme-surreal-visual .dn-icono-luna {
    opacity: 0;
    transform: scale(.2) rotate(-180deg);
}

body.dark .theme-surreal-visual .dn-icono-luna {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.theme-surreal-visual .dn-luna-aura {
    fill: rgba(168,176,232,.15);
    animation: dnPulsarLunaAura 4s ease-in-out infinite;
}

@keyframes dnPulsarLunaAura {
    0%,100% {
        transform: scale(1);
        opacity: .5;
    }
    50% {
        transform: scale(1.1);
        opacity: .8;
    }
}

.theme-surreal-visual .dn-luna-cuerpo {
    fill: url(#dnGradLuna);
    transform-origin: 50px 50px;
    animation: dnFlotarLuna 5s ease-in-out infinite;
}

@keyframes dnFlotarLuna {
    0%,100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-2px) rotate(3deg);
    }
}

.theme-surreal-visual .dn-crater {
    fill: rgba(90,100,150,.5);
    animation: dnPulsarCrater 3s ease-in-out infinite;
}

.theme-surreal-visual .dn-crater:nth-of-type(2) {
    animation-delay: .5s;
}

.theme-surreal-visual .dn-crater:nth-of-type(3) {
    animation-delay: 1s;
}

.theme-surreal-visual .dn-crater:nth-of-type(4) {
    animation-delay: 1.5s;
}

@keyframes dnPulsarCrater {
    0%,100% {
        opacity: .5;
    }
    50% {
        opacity: .8;
    }
}

.theme-surreal-visual .dn-estrella {
    fill: #fff;
    filter: url(#dnGlowFuerte);
    transform-origin: center;
    animation: dnTitilarEstrella 2s ease-in-out infinite;
}

.theme-surreal-visual .dn-s1 { animation-delay: 0s; }
.theme-surreal-visual .dn-s2 { animation-delay: .4s; }
.theme-surreal-visual .dn-s3 { animation-delay: .8s; }
.theme-surreal-visual .dn-s4 { animation-delay: 1.2s; }
.theme-surreal-visual .dn-s5 { animation-delay: 1.6s; }

@keyframes dnTitilarEstrella {
    0%,100% {
        opacity: .3;
        transform: scale(.6) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.3) rotate(180deg);
    }
}

/* ==========================================================
   MODO LUNA — ESTRELLAS FIJAS
   ========================================================== */

body.dark .theme-surreal-visual .dn-estrella {
    animation: none;
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ==========================================================
   RIPPLE VISUAL SIN TOCAR LA LÓGICA
   ========================================================== */

.header-datanext .theme-toggle::after {
    content: '';
    position: absolute;
    inset: -13px;

    border-radius: 50%;
    border: 2px solid rgba(0,220,255,.6);

    opacity: 0;
    pointer-events: none;

    transform: scale(.5);
}

.header-datanext .theme-toggle:active::after {
    animation: dnRippleExpand .7s ease-out;
}

@keyframes dnRippleExpand {
    0% {
        opacity: 1;
        transform: scale(.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

/* Rebote físico visual al pulsar */
.header-datanext .theme-toggle:active + .theme-surreal-visual {
    animation: dnRebote .6s cubic-bezier(.34,1.56,.64,1);
}

@keyframes dnRebote {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(.85) rotate(-8deg);
    }
    55% {
        transform: scale(1.15) rotate(8deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ==========================================================
   TRANSICIÓN GLOBAL DEL VISUAL
   ========================================================== */

.header-datanext .theme-surreal-visual,
.header-datanext .theme-surreal-visual svg {
    overflow: visible;
}

/* ==========================================================
   MÓVIL — MISMA POSICIÓN DEL TOGGLE, SIN TOCAR EL HEADER
   ========================================================== */

@media (max-width: 700px) {

    .header-datanext {
        padding: 30px 18px 26px;
    }

    .header-inner-datanext {
        min-height: 215px;
        padding-top: 55px;
        box-sizing: border-box;
    }

    .header-datanext .logo {
        font-size: 2rem;
    }

    .header-datanext .tagline {
        font-size: .85rem;
    }

    .header-datanext .auth-buttons {
        top: -11px;
        right: -16px;

        gap: 4px;
    }

    .header-datanext .auth-button {
        padding: 2px 4px;

        font-size: 8px;
    }

    .header-datanext .theme-toggle {
        right: 0;
        top: 38px;
        bottom: auto;
    }

    .header-datanext .theme-surreal-visual {
        right: 0;
        top: 38px;
    }
}


/* ==========================================================
   DATA NEXT — ENCABEZADO FUTURISTA
   DATANEXT · COMPRA · VENDE · CONECTA
   ========================================================== */

.datanext-futurista {
    position: relative;
    width: min(900px, 100%);
    min-height: 165px;
    transform: translate(-140px, -10px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1000px;
    isolation: isolate;
}

.datanext-futurista-contenido {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* GRID */

.datanext-futurista-grid {
    position: absolute;
    inset: -100%;
    z-index: 0;
    opacity: .18;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0,198,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,198,255,.14) 1px, transparent 1px);
    background-size: 42px 42px;
    transform: perspective(500px) rotateX(60deg) scale(1.8);
    transform-origin: center bottom;
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 68%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 68%);
    animation: datanext-futurista-grid-move 10s linear infinite;
}

@keyframes datanext-futurista-grid-move {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 42px;
    }
}

/* ORBES */

.datanext-futurista-orbe {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(45px);
    opacity: .32;
    animation: datanext-futurista-orbe 16s ease-in-out infinite;
}

.datanext-futurista-orbe.orbe-1 {
    width: 180px;
    height: 180px;
    left: -70px;
    top: -90px;
    background: radial-gradient(circle, rgba(0,150,255,.45), transparent 70%);
}

.datanext-futurista-orbe.orbe-2 {
    width: 220px;
    height: 220px;
    right: -90px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(150,0,255,.38), transparent 70%);
    animation-delay: -5s;
}

.datanext-futurista-orbe.orbe-3 {
    width: 130px;
    height: 130px;
    left: 50%;
    top: 45%;
    background: radial-gradient(circle, rgba(0,255,200,.28), transparent 70%);
    animation-delay: -10s;
}

@keyframes datanext-futurista-orbe {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(25px, -15px) scale(1.08);
    }
}

/* TÍTULO */

.datanext-futurista-titulo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 18px rgba(0,198,255,.35));
    transform-style: preserve-3d;
}

.datanext-futurista-titulo {
    display: flex;
    gap: .015em;
    margin: 0;
    padding: 0;
    font-size: clamp(42px, 7vw, 72px);
    font-weight: 900;
    line-height: .9;
    letter-spacing: .035em;
    transform-style: preserve-3d;
}

.datanext-futurista-titulo .letra {
    display: inline;
    color: transparent;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #b8ecff 38%,
        #6ac8ff 70%,
        #a86aff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
}

/* ESLOGAN */

.datanext-futurista-eslogan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
}

.datanext-futurista-palabra {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    overflow: hidden;
    animation: datanext-futurista-palabra 11s infinite;
}

.datanext-futurista-palabra span {
    position: relative;
    z-index: 2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.datanext-futurista-palabra.compra span {
    color: #00c6ff;
    text-shadow: 0 0 14px rgba(0,198,255,.8);
}

.datanext-futurista-palabra.vende span {
    color: #38ef7d;
    text-shadow: 0 0 14px rgba(56,239,125,.8);
}

.datanext-futurista-palabra.conecta span {
    color: #ff6b6b;
    text-shadow: 0 0 14px rgba(255,107,107,.8);
}

@keyframes datanext-futurista-palabra {
    0%, 14% {
        opacity: 0;
        transform: translateY(12px) scale(.88);
        filter: blur(5px);
    }
    22% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    72% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    80%, 100% {
        opacity: 0;
        transform: translateY(12px) scale(.88);
        filter: blur(5px);
    }
}

.datanext-futurista-palabra.compra {
    animation-delay: 0s;
}

.datanext-futurista-palabra.vende {
    animation-delay: .35s;
}

.datanext-futurista-palabra.conecta {
    animation-delay: .70s;
}

/* SEPARADORES */

.datanext-futurista-separador {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #00c6ff;
    box-shadow: 0 0 10px #00c6ff;
    animation: datanext-futurista-separador 11s infinite;
}

@keyframes datanext-futurista-separador {
    0%, 14% {
        opacity: 0;
        transform: scale(0);
    }
    24%, 72% {
        opacity: 1;
        transform: scale(1);
    }
    80%, 100% {
        opacity: 0;
        transform: scale(0);
    }
}

/* MÓVIL */

@media (max-width: 700px) {

    /* DATA NEXT — BLOQUE FUTURISTA COMPLETO
       translateX: mueve TODO el objeto horizontalmente.
       translateY: mueve TODO el objeto verticalmente.
       No modificar dimensiones ni posiciones internas. */
    .datanext-futurista {
        min-height: 105px;
        transform: translate(-18px, -75px);
    }

    .datanext-futurista-contenido {
        transform: none;
        gap: 10px;
    }

    .datanext-futurista-titulo {
        font-size: clamp(34px, 11vw, 52px);
        letter-spacing: .025em;
        transform: translateX(-20px);
    }

    .datanext-futurista-eslogan {
        gap: 6px;
    }

    .datanext-futurista-palabra {
        min-width: 0;
        padding: 6px 8px;
    }

    .datanext-futurista-palabra span {
        font-size: 9px;
        letter-spacing: .10em;
    }

    .datanext-futurista-separador {
        width: 4px;
        height: 4px;
        flex-basis: 4px;
    }

    .datanext-futurista-grid {
        opacity: .10;
        animation-duration: 18s;
    }

    .datanext-futurista-orbe {
        filter: blur(30px);
        opacity: .18;
        animation: none;
    }

    .datanext-futurista-orbe.orbe-1 {
        width: 120px;
        height: 120px;
    }

    .datanext-futurista-orbe.orbe-2 {
        width: 140px;
        height: 140px;
    }

    .datanext-futurista-orbe.orbe-3 {
        display: none;
    }
}

@media (max-width: 380px) {

    .datanext-futurista {
        min-height: 96px;
    }

    .datanext-futurista-titulo {
        font-size: 31px;
    }

    .datanext-futurista-palabra {
        padding: 5px 6px;
    }

    .datanext-futurista-palabra span {
        font-size: 8px;
    }
}

/* ==========================================================
   DATA NEXT — MINI CUBO 3D PARA COMPRA
   ========================================================== */

.datanext-compra-cubo {
    width: 78px;
    min-width: 78px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    perspective: 500px;
}

.datanext-compra-cubo-wrap {
    width: 78px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
    transform-style: preserve-3d;
}

.datanext-compra-cubo-escena {
    width: 78px;
    height: 30px;
    position: relative;
    transform-style: preserve-3d;
}

.datanext-compra-cubo-cuerpo {
    position: absolute;
    width: 78px;
    height: 30px;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    animation: datanext-compra-cubo-giro 10s linear infinite;
}

.datanext-compra-cubo-cara {
    position: absolute;
    width: 78px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    color: #00c6ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    white-space: nowrap;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(0,198,255,.035)
        );

    border: 1px solid rgba(0,198,255,.38);

    box-shadow:
        inset 0 0 10px rgba(0,198,255,.10),
        0 0 10px rgba(0,198,255,.22);

    text-shadow:
        0 0 8px rgba(0,198,255,.85);
}

.datanext-compra-cubo-cara.frente {
    transform: translateZ(15px);
}

.datanext-compra-cubo-cara.atras {
    transform: rotateY(180deg) translateZ(15px);
}

.datanext-compra-cubo-cara.derecha {
    width: 30px;
    left: 24px;
    transform: rotateY(90deg) translateZ(39px);
    font-size: 7px;
    letter-spacing: .08em;
    overflow: hidden;
}

.datanext-compra-cubo-cara.izquierda {
    width: 30px;
    left: 24px;
    transform: rotateY(-90deg) translateZ(39px);
    font-size: 7px;
    letter-spacing: .08em;
    overflow: hidden;
}

.datanext-compra-cubo-cara.arriba {
    height: 30px;
    top: 0;
    transform: rotateX(90deg) translateZ(15px);
    font-size: 7px;
    letter-spacing: .08em;
}

.datanext-compra-cubo-cara.abajo {
    height: 30px;
    top: 0;
    transform: rotateX(-90deg) translateZ(15px);
    font-size: 7px;
    letter-spacing: .08em;
}

@keyframes datanext-compra-cubo-giro {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

/* El cubo conserva la animación de aparición del eslogan,
   pero el giro 3D ocurre únicamente en su interior. */

.datanext-compra-cubo .datanext-compra-cubo-wrap,
.datanext-compra-cubo .datanext-compra-cubo-escena {
    transform-style: preserve-3d;
}

@media (max-width: 700px) {

    .datanext-compra-cubo {
        width: 70px;
        min-width: 70px;
        height: 27px;
        min-height: 27px;
    }

    .datanext-compra-cubo-wrap,
    .datanext-compra-cubo-escena,
    .datanext-compra-cubo-cuerpo,
    .datanext-compra-cubo-cara.frente,
    .datanext-compra-cubo-cara.atras {
        width: 70px;
        height: 27px;
    }

    .datanext-compra-cubo-cara.frente {
        transform: translateZ(13.5px);
        font-size: 9px;
    }

    .datanext-compra-cubo-cara.atras {
        transform: rotateY(180deg) translateZ(13.5px);
    }

    .datanext-compra-cubo-cara.derecha,
    .datanext-compra-cubo-cara.izquierda {
        width: 27px;
        left: 21.5px;
        transform: rotateY(90deg) translateZ(35px);
        font-size: 6px;
    }

    .datanext-compra-cubo-cara.izquierda {
        transform: rotateY(-90deg) translateZ(35px);
    }

    .datanext-compra-cubo-cara.arriba {
        transform: rotateX(90deg) translateZ(13.5px);
    }

    .datanext-compra-cubo-cara.abajo {
        transform: rotateX(-90deg) translateZ(13.5px);
    }
}

/* ==========================================================
   DATA NEXT — MINI CUBO 3D PARA COMPRA
   ========================================================== */

.datanext-compra-cubo {
    width: 78px;
    min-width: 78px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    perspective: 500px;
}

.datanext-compra-cubo-wrap {
    width: 78px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
    transform-style: preserve-3d;
}

.datanext-compra-cubo-escena {
    width: 78px;
    height: 30px;
    position: relative;
    transform-style: preserve-3d;
}

.datanext-compra-cubo-cuerpo {
    position: absolute;
    width: 78px;
    height: 30px;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    animation: datanext-compra-cubo-giro 10s linear infinite;
}

.datanext-compra-cubo-cara {
    position: absolute;
    width: 78px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    color: #00c6ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    white-space: nowrap;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10),
            rgba(0,198,255,.035)
        );

    border: 1px solid rgba(0,198,255,.38);

    box-shadow:
        inset 0 0 10px rgba(0,198,255,.10),
        0 0 10px rgba(0,198,255,.22);

    text-shadow:
        0 0 8px rgba(0,198,255,.85);
}

.datanext-compra-cubo-cara.frente {
    transform: translateZ(15px);
}

.datanext-compra-cubo-cara.atras {
    transform: rotateY(180deg) translateZ(15px);
}

.datanext-compra-cubo-cara.derecha {
    width: 30px;
    left: 24px;
    transform: rotateY(90deg) translateZ(39px);
    font-size: 7px;
    letter-spacing: .08em;
    overflow: hidden;
}

.datanext-compra-cubo-cara.izquierda {
    width: 30px;
    left: 24px;
    transform: rotateY(-90deg) translateZ(39px);
    font-size: 7px;
    letter-spacing: .08em;
    overflow: hidden;
}

.datanext-compra-cubo-cara.arriba {
    height: 30px;
    top: 0;
    transform: rotateX(90deg) translateZ(15px);
    font-size: 7px;
    letter-spacing: .08em;
}

.datanext-compra-cubo-cara.abajo {
    height: 30px;
    top: 0;
    transform: rotateX(-90deg) translateZ(15px);
    font-size: 7px;
    letter-spacing: .08em;
}

@keyframes datanext-compra-cubo-giro {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

/* El cubo conserva la animación de aparición del eslogan,
   pero el giro 3D ocurre únicamente en su interior. */

.datanext-compra-cubo .datanext-compra-cubo-wrap,
.datanext-compra-cubo .datanext-compra-cubo-escena {
    transform-style: preserve-3d;
}

@media (max-width: 700px) {

    .datanext-compra-cubo {
        width: 70px;
        min-width: 70px;
        height: 27px;
        min-height: 27px;
    }

    .datanext-compra-cubo-wrap,
    .datanext-compra-cubo-escena,
    .datanext-compra-cubo-cuerpo,
    .datanext-compra-cubo-cara.frente,
    .datanext-compra-cubo-cara.atras {
        width: 70px;
        height: 27px;
    }

    .datanext-compra-cubo-cara.frente {
        transform: translateZ(13.5px);
        font-size: 9px;
    }

    .datanext-compra-cubo-cara.atras {
        transform: rotateY(180deg) translateZ(13.5px);
    }

    .datanext-compra-cubo-cara.derecha,
    .datanext-compra-cubo-cara.izquierda {
        width: 27px;
        left: 21.5px;
        transform: rotateY(90deg) translateZ(35px);
        font-size: 6px;
    }

    .datanext-compra-cubo-cara.izquierda {
        transform: rotateY(-90deg) translateZ(35px);
    }

    .datanext-compra-cubo-cara.arriba {
        transform: rotateX(90deg) translateZ(13.5px);
    }

    .datanext-compra-cubo-cara.abajo {
        transform: rotateX(-90deg) translateZ(13.5px);
    }
}

/* ==========================================================
   MINI CUBO 3D — VENDE
   ========================================================== */

.datanext-vende-cubo {
    width: 78px;
    min-width: 78px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    perspective: 500px;
}

.datanext-vende-cubo-wrap,
.datanext-vende-cubo-escena {
    width: 78px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
    transform-style: preserve-3d;
}

.datanext-vende-cubo-cuerpo {
    position: absolute;
    width: 78px;
    height: 30px;
    transform-style: preserve-3d;
    animation: datanext-vende-cubo-giro 10s linear infinite;
}

.datanext-vende-cubo-cara {
    position: absolute;
    width: 78px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    color: #38ef7d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    white-space: nowrap;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.10),
        rgba(56,239,125,.035)
    );

    border: 1px solid rgba(56,239,125,.38);

    box-shadow:
        inset 0 0 10px rgba(56,239,125,.10),
        0 0 10px rgba(56,239,125,.22);

    text-shadow:
        0 0 8px rgba(56,239,125,.85);
}

.datanext-vende-cubo-cara.frente {
    transform: translateZ(15px);
}

.datanext-vende-cubo-cara.atras {
    transform: rotateY(180deg) translateZ(15px);
}

.datanext-vende-cubo-cara.derecha,
.datanext-vende-cubo-cara.izquierda {
    width: 30px;
    left: 24px;
    font-size: 7px;
    letter-spacing: .08em;
    overflow: hidden;
}

.datanext-vende-cubo-cara.derecha {
    transform: rotateY(90deg) translateZ(39px);
}

.datanext-vende-cubo-cara.izquierda {
    transform: rotateY(-90deg) translateZ(39px);
}

.datanext-vende-cubo-cara.arriba {
    transform: rotateX(90deg) translateZ(15px);
    font-size: 7px;
    letter-spacing: .08em;
}

.datanext-vende-cubo-cara.abajo {
    transform: rotateX(-90deg) translateZ(15px);
    font-size: 7px;
    letter-spacing: .08em;
}

@keyframes datanext-vende-cubo-giro {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

@media (max-width: 700px) {

    .datanext-vende-cubo {
        width: 70px;
        min-width: 70px;
        height: 27px;
        min-height: 27px;
    }

    .datanext-vende-cubo-wrap,
    .datanext-vende-cubo-escena,
    .datanext-vende-cubo-cuerpo,
    .datanext-vende-cubo-cara.frente,
    .datanext-vende-cubo-cara.atras {
        width: 70px;
        height: 27px;
    }

    .datanext-vende-cubo-cara.frente {
        transform: translateZ(13.5px);
        font-size: 9px;
    }

    .datanext-vende-cubo-cara.atras {
        transform: rotateY(180deg) translateZ(13.5px);
    }

    .datanext-vende-cubo-cara.derecha,
    .datanext-vende-cubo-cara.izquierda {
        width: 27px;
        left: 21.5px;
        transform: rotateY(90deg) translateZ(35px);
        font-size: 6px;
    }

    .datanext-vende-cubo-cara.izquierda {
        transform: rotateY(-90deg) translateZ(35px);
    }

    .datanext-vende-cubo-cara.arriba {
        transform: rotateX(90deg) translateZ(13.5px);
    }

    .datanext-vende-cubo-cara.abajo {
        transform: rotateX(-90deg) translateZ(13.5px);
    }
}

/* ==========================================================
   MINI CUBO 3D — CONECTA
   ========================================================== */

.datanext-conecta-cubo {
    width: 78px;
    min-width: 78px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    perspective: 500px;
}

.datanext-conecta-cubo-wrap,
.datanext-conecta-cubo-escena {
    width: 78px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 500px;
    transform-style: preserve-3d;
}

.datanext-conecta-cubo-cuerpo {
    position: absolute;
    width: 78px;
    height: 30px;
    transform-style: preserve-3d;
    animation: datanext-conecta-cubo-giro 10s linear infinite;
}

.datanext-conecta-cubo-cara {
    position: absolute;
    width: 78px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    color: #ff6b6b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    white-space: nowrap;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,.10),
        rgba(255,107,107,.035)
    );

    border: 1px solid rgba(255,107,107,.38);

    box-shadow:
        inset 0 0 10px rgba(255,107,107,.10),
        0 0 10px rgba(255,107,107,.22);

    text-shadow:
        0 0 8px rgba(255,107,107,.85);
}

.datanext-conecta-cubo-cara.frente {
    transform: translateZ(15px);
}

.datanext-conecta-cubo-cara.atras {
    transform: rotateY(180deg) translateZ(15px);
}

.datanext-conecta-cubo-cara.derecha,
.datanext-conecta-cubo-cara.izquierda {
    width: 30px;
    left: 24px;
    font-size: 7px;
    letter-spacing: .08em;
    overflow: hidden;
}

.datanext-conecta-cubo-cara.derecha {
    transform: rotateY(90deg) translateZ(39px);
}

.datanext-conecta-cubo-cara.izquierda {
    transform: rotateY(-90deg) translateZ(39px);
}

.datanext-conecta-cubo-cara.arriba {
    transform: rotateX(90deg) translateZ(15px);
    font-size: 7px;
    letter-spacing: .08em;
}

.datanext-conecta-cubo-cara.abajo {
    transform: rotateX(-90deg) translateZ(15px);
    font-size: 7px;
    letter-spacing: .08em;
}

@keyframes datanext-conecta-cubo-giro {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

@media (max-width: 700px) {

    .datanext-conecta-cubo {
        width: 70px;
        min-width: 70px;
        height: 27px;
        min-height: 27px;
    }

    .datanext-conecta-cubo-wrap,
    .datanext-conecta-cubo-escena,
    .datanext-conecta-cubo-cuerpo,
    .datanext-conecta-cubo-cara.frente,
    .datanext-conecta-cubo-cara.atras {
        width: 70px;
        height: 27px;
    }

    .datanext-conecta-cubo-cara.frente {
        transform: translateZ(13.5px);
        font-size: 9px;
    }

    .datanext-conecta-cubo-cara.atras {
        transform: rotateY(180deg) translateZ(13.5px);
    }

    .datanext-conecta-cubo-cara.derecha,
    .datanext-conecta-cubo-cara.izquierda {
        width: 27px;
        left: 21.5px;
        transform: rotateY(90deg) translateZ(35px);
        font-size: 6px;
    }

    .datanext-conecta-cubo-cara.izquierda {
        transform: rotateY(-90deg) translateZ(35px);
    }

    .datanext-conecta-cubo-cara.arriba {
        transform: rotateX(90deg) translateZ(13.5px);
    }

    .datanext-conecta-cubo-cara.abajo {
        transform: rotateX(-90deg) translateZ(13.5px);
    }
}

/* ==========================================================
   DATA NEXT — SECUENCIA DE LOS TRES MINI CUBOS
   COMPRA → VENDE → CONECTA
   ========================================================== */

/*
   Los tres comparten exactamente el mismo ciclo.
   Solo uno se muestra en cada momento.
*/

.datanext-futurista-eslogan .datanext-futurista-palabra.compra,
.datanext-futurista-eslogan .datanext-futurista-palabra.vende,
.datanext-futurista-eslogan .datanext-futurista-palabra.conecta {
    animation-name: datanext-cubo-secuencia;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* COMPRA: 0 → 5 segundos */
.datanext-futurista-eslogan .datanext-futurista-palabra.compra {
    animation-delay: 0s;
}

/* VENDE: 5 → 10 segundos */
.datanext-futurista-eslogan .datanext-futurista-palabra.vende {
    animation-delay: 5s;
}

/* CONECTA: 10 → 15 segundos */
.datanext-futurista-eslogan .datanext-futurista-palabra.conecta {
    animation-delay: 10s;
}

/*
   Cada cubo entra suavemente, permanece visible,
   y sale antes de que aparezca el siguiente.
*/

@keyframes datanext-cubo-secuencia {

    0% {
        opacity: 0;
        transform: translateY(12px) scale(.86);
        filter: blur(5px);
    }

    8% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    28% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    33% {
        opacity: 0;
        transform: translateY(-8px) scale(.92);
        filter: blur(4px);
    }

    100% {
        opacity: 0;
        transform: translateY(12px) scale(.86);
        filter: blur(5px);
    }
}

/*
   Evita que el espacio del eslogan cambie cuando cambia
   la palabra visible.
*/

.datanext-futurista-eslogan {
    min-height: 46px;
}

@media (max-width: 700px) {

    .datanext-futurista-eslogan {
        min-height: 40px;
    }

    .datanext-futurista-eslogan .datanext-futurista-palabra.compra,
    .datanext-futurista-eslogan .datanext-futurista-palabra.vende,
    .datanext-futurista-eslogan .datanext-futurista-palabra.conecta {
        animation-duration: 15s;
    }
}


/* ==========================================================
   DATA NEXT — EL CUBO ACTIVO TOMA TODO EL ESCENARIO
   ========================================================== */

/*
   El eslogan deja de reservar espacio individual para
   COMPRA, VENDE y CONECTA.
*/

.datanext-futurista-eslogan {
    position: relative;
    width: min(100%, 520px);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
   Los separadores ya no ocupan espacio durante la
   presentación individual.
*/

.datanext-futurista-eslogan .datanext-futurista-separador {
    display: none;
}

/*
   Cada palabra pasa a ocupar TODO el escenario.
   Solo la que está activa se hace visible.
*/

.datanext-futurista-eslogan
.datanext-futurista-palabra.compra,

.datanext-futurista-eslogan
.datanext-futurista-palabra.vende,

.datanext-futurista-eslogan
.datanext-futurista-palabra.conecta {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    min-width: 0;
    height: 64px;
    min-height: 64px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    transform-origin: center center;

    overflow: visible;
}

/*
   El cubo aprovecha ahora el espacio completo.
   Se aumenta mediante escala sin deformar su geometría 3D.
*/

.datanext-futurista-eslogan
.datanext-compra-cubo
.datanext-compra-cubo-wrap,

.datanext-futurista-eslogan
.datanext-vende-cubo
.datanext-vende-cubo-wrap,

.datanext-futurista-eslogan
.datanext-conecta-cubo
.datanext-conecta-cubo-wrap {

    transform-origin: center center;
}

/*
   El escenario 3D crece suavemente cuando la palabra
   entra en pantalla.
*/

.datanext-futurista-eslogan
.datanext-futurista-palabra.compra {
    transform: translate(-50%, -50%);
}

.datanext-futurista-eslogan
.datanext-futurista-palabra.vende {
    transform: translate(-50%, -50%);
}

.datanext-futurista-eslogan
.datanext-futurista-palabra.conecta {
    transform: translate(-50%, -50%);
}

/*
   Agrandamiento visual del cubo activo.
   La animación de entrada mantiene la elegancia,
   pero ahora puede utilizar el escenario completo.
 */

@keyframes datanext-cubo-secuencia {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.70);
        filter: blur(7px);
    }

    8% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.22);
        filter: blur(0);
    }

    15% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.22);
        filter: blur(0);
    }

    27% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.18);
        filter: blur(0);
    }

    33% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.88);
        filter: blur(5px);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.70);
        filter: blur(7px);
    }
}

/*
   Evita que el contenedor general se encoja al cambiar
   entre las tres palabras.
*/

.datanext-futurista-contenido {
    overflow: visible;
}

@media (max-width: 700px) {

    .datanext-futurista-eslogan {
        width: 100%;
        min-height: 52px;
    }

    .datanext-futurista-eslogan
    .datanext-futurista-palabra.compra,

    .datanext-futurista-eslogan
    .datanext-futurista-palabra.vende,

    .datanext-futurista-eslogan
    .datanext-futurista-palabra.conecta {

        width: 100%;
        height: 52px;
        min-height: 52px;
    }

    @keyframes datanext-cubo-secuencia {

        0% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                scale(.72);
            filter: blur(6px);
        }

        8% {
            opacity: 1;
            transform:
                translate(-50%, -50%)
                scale(1.12);
            filter: blur(0);
        }

        15% {
            opacity: 1;
            transform:
                translate(-50%, -50%)
                scale(1.12);
            filter: blur(0);
        }

        27% {
            opacity: 1;
            transform:
                translate(-50%, -50%)
                scale(1.08);
            filter: blur(0);
        }

        33% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                scale(.88);
            filter: blur(4px);
        }

        100% {
            opacity: 0;
            transform:
                translate(-50%, -50%)
                scale(.72);
            filter: blur(6px);
        }
    }
}



/* ==========================================================
   DATA NEXT — INICIAR SESIÓN FUTURISTA
   SOLO BOTÓN LOGIN
   ========================================================== */

.header-datanext .auth-button.login {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(100, 210, 255, .55);

    background:
        linear-gradient(
            135deg,
            rgba(0, 198, 255, .18),
            rgba(90, 70, 255, .16)
        );

    box-shadow:
        0 0 0 1px rgba(0, 198, 255, .08),
        0 0 14px rgba(0, 198, 255, .16),
        inset 0 0 14px rgba(0, 198, 255, .06);

    text-shadow:
        0 0 8px rgba(120, 225, 255, .35);

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/* Brillo tecnológico que cruza el botón */
.header-datanext .auth-button.login::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform: skewX(-20deg);

    animation: datanext-login-brillo 4.5s ease-in-out infinite;

    pointer-events: none;
}


/* Punto de luz */
.header-datanext .auth-button.login::after {
    content: "";

    position: absolute;
    width: 5px;
    height: 5px;

    right: 7px;
    top: 6px;

    border-radius: 50%;

    background: rgba(120, 225, 255, .95);

    box-shadow:
        0 0 6px rgba(0, 198, 255, .9),
        0 0 12px rgba(0, 198, 255, .45);

    opacity: .75;

    pointer-events: none;
}


.header-datanext .auth-button.login:hover {
    background:
        linear-gradient(
            135deg,
            rgba(0, 198, 255, .30),
            rgba(90, 70, 255, .25)
        );

    border-color: rgba(120, 225, 255, .85);

    box-shadow:
        0 0 0 1px rgba(0, 198, 255, .14),
        0 0 22px rgba(0, 198, 255, .32),
        0 0 42px rgba(90, 70, 255, .12),
        inset 0 0 18px rgba(0, 198, 255, .10);

    transform: translateY(-1px);
}


@keyframes datanext-login-brillo {

    0%,
    55% {
        left: -120%;
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    82% {
        left: 150%;
        opacity: 0;
    }

    100% {
        left: 150%;
        opacity: 0;
    }
}


/* Móvil: conserva exactamente su tamaño compacto */
@media (max-width: 700px) {

    .header-datanext .auth-button.login {
        box-shadow:
            0 0 0 1px rgba(0, 198, 255, .07),
            0 0 10px rgba(0, 198, 255, .13),
            inset 0 0 10px rgba(0, 198, 255, .05);
    }

    .header-datanext .auth-button.login:hover {
        box-shadow:
            0 0 0 1px rgba(0, 198, 255, .10),
            0 0 16px rgba(0, 198, 255, .25),
            inset 0 0 12px rgba(0, 198, 255, .08);
    }
}


/* ==========================================================
   DATA NEXT — HALO ORBITAL GIRATORIO LOGIN
   El botón permanece estable; gira únicamente la luz.
   ========================================================== */

.header-datanext .auth-button.login {
    isolation: isolate;
    overflow: hidden;
}


/* Halo giratorio */
.header-datanext .auth-button.login .login-halo {
    position: absolute;
}


/* Creamos el halo mediante una capa adicional */
.header-datanext .auth-button.login {
    z-index: 1;
}

.header-datanext .auth-button.login::before {
    z-index: -1;

    width: 45%;
    height: 180%;

    top: -40%;
    left: 27%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 198, 255, 0.05) 20%,
            rgba(120, 225, 255, 0.95) 50%,
            rgba(120, 90, 255, 0.25) 70%,
            transparent 100%
        );

    transform-origin: center center;
    animation:
        datanext-login-orbita 3.2s linear infinite;
}


/* Capa interior que conserva el aspecto cristalino */
.header-datanext .auth-button.login::after {
    z-index: -1;

    width: calc(100% - 2px);
    height: calc(100% - 2px);

    right: 1px;
    top: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 198, 255, .20),
            rgba(90, 70, 255, .17)
        );

    border-radius: 8px;

    box-shadow:
        inset 0 0 12px rgba(0, 198, 255, .08);

    opacity: 1;

    animation: datanext-login-pulso 3.2s ease-in-out infinite;
}


@keyframes datanext-login-orbita {

    0% {
        transform:
            rotate(0deg)
            translateX(0)
            scaleY(1);
    }

    100% {
        transform:
            rotate(360deg)
            translateX(0)
            scaleY(1);
    }
}


@keyframes datanext-login-pulso {

    0%,
    100% {
        box-shadow:
            inset 0 0 10px rgba(0, 198, 255, .06),
            0 0 8px rgba(0, 198, 255, .10);
    }

    50% {
        box-shadow:
            inset 0 0 15px rgba(0, 198, 255, .11),
            0 0 18px rgba(0, 198, 255, .20);
    }
}


/* Mantener compacto en móvil */
@media (max-width: 700px) {

    .header-datanext .auth-button.login::before {
        width: 42%;
        height: 190%;
        top: -45%;
    }

    .header-datanext .auth-button.login::after {
        border-radius: 8px;
    }
}


/* ==========================================================
   DATA NEXT — BRILLO GIRATORIO GRANDE LOGIN
   Quieto normalmente / gira al tocar o pasar el mouse
   ========================================================== */

.header-datanext .auth-button.login::before {
    width: 115%;
    height: 300%;

    top: -100%;
    left: -7.5%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 55deg,
            rgba(0, 198, 255, .08) 75deg,
            rgba(120, 225, 255, .95) 100deg,
            rgba(130, 90, 255, .55) 125deg,
            rgba(0, 198, 255, .08) 150deg,
            transparent 175deg,
            transparent 360deg
        );

    border-radius: 50%;

    transform-origin: center center;

    animation: none;

    opacity: .85;
}


/* Gira únicamente al pasar el mouse */
.header-datanext .auth-button.login:hover::before {
    animation: datanext-login-brillo-giratorio 1.8s linear infinite;
}


/* Gira mientras se toca/presiona en dispositivos táctiles */
.header-datanext .auth-button.login:active::before {
    animation: datanext-login-brillo-giratorio 1.2s linear infinite;
}


@keyframes datanext-registro-atencion {

    0%, 100% {
        outline-color: rgba(255, 145, 0, .30);
    }

    50% {
        outline-color: rgba(255, 145, 0, 1);
    }
}


@keyframes datanext-login-brillo-giratorio {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* En móvil, el brillo sigue siendo grande pero contenido */
@media (max-width: 700px) {

    .header-datanext .auth-button.login::before {
        width: 125%;
        height: 320%;
        top: -110%;
        left: -12.5%;
    }

    .header-datanext .auth-button.login:active::before {
        animation-duration: 1.2s;
    }
}

/* ==========================================================
   DATA NEXT — 3 CUBITOS PEQUEÑOS SIEMPRE VISIBLES
   COMPRA · VENDE · CONECTA
   PC + MÓVIL
   ========================================================== */

.datanext-futurista-eslogan {
    width: auto;
    min-height: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Cada cubito vuelve a ocupar solamente su propio espacio */
.datanext-futurista-eslogan
.datanext-futurista-palabra.compra,
.datanext-futurista-eslogan
.datanext-futurista-palabra.vende,
.datanext-futurista-eslogan
.datanext-futurista-palabra.conecta {
    position: relative;
    left: auto;
    top: auto;

    width: auto;
    min-width: 0;
    height: 36px;
    min-height: 36px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: none !important;
    opacity: 1 !important;
    filter: none !important;

    animation: none !important;

    overflow: visible;
}

/* Separadores visibles nuevamente */
.datanext-futurista-eslogan
.datanext-futurista-separador {
    display: block;
    flex: 0 0 4px;
    width: 4px;
    height: 4px;
}

/* Mantener los tres cubos compactos */
.datanext-compra-cubo-wrap,
.datanext-vende-cubo-wrap,
.datanext-conecta-cubo-wrap {
    flex: 0 0 auto;
}

/* En móvil: exactamente el mismo concepto, ligeramente más compacto */
@media (max-width: 700px) {

    .datanext-futurista-eslogan {
        width: auto;
        min-height: 38px;
        height: 38px;
        gap: 5px;
    }

    .datanext-futurista-eslogan
    .datanext-futurista-palabra.compra,
    .datanext-futurista-eslogan
    .datanext-futurista-palabra.vende,
    .datanext-futurista-eslogan
    .datanext-futurista-palabra.conecta {
        width: auto;
        height: 34px;
        min-height: 34px;
    }

    .datanext-futurista-eslogan
    .datanext-futurista-separador {
        flex-basis: 3px;
        width: 3px;
        height: 3px;
    }
}


/* ==========================================================
   DATA NEXT — REGISTRARSE FUTURISTA
   Mismo tratamiento visual que INICIAR SESIÓN
   ========================================================== */

.header-datanext .auth-button.register {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;

    border: 1px solid rgba(100, 210, 255, .55);

    background:
        linear-gradient(
            135deg,
            rgba(0, 198, 255, .18),
            rgba(90, 70, 255, .16)
        );

    box-shadow:
        0 0 0 1px rgba(0, 198, 255, .08),
        0 0 14px rgba(0, 198, 255, .16),
        inset 0 0 14px rgba(0, 198, 255, .06);

    text-shadow:
        0 0 8px rgba(120, 225, 255, .35);

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

    /* Resalte de registro — línea naranja fina y pulsante */
    outline: 1px solid rgba(255, 145, 0, .35);
    outline-offset: 2px;
    animation: datanext-registro-atencion 2.6s ease-in-out infinite;

}


/* Halo grande */
.header-datanext .auth-button.register::before {
    content: "";

    position: absolute;

    width: 125%;
    height: 320%;

    top: -110%;
    left: -12.5%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 55deg,
            rgba(0, 198, 255, .08) 75deg,
            rgba(120, 225, 255, .95) 100deg,
            rgba(130, 90, 255, .55) 125deg,
            rgba(0, 198, 255, .08) 150deg,
            transparent 175deg,
            transparent 360deg
        );

    border-radius: 50%;

    transform-origin: center center;

    animation: none;

    opacity: .85;

    z-index: -1;
    pointer-events: none;
}


/* Capa interior */
.header-datanext .auth-button.register::after {
    content: "";

    position: absolute;

    width: calc(100% - 2px);
    height: calc(100% - 2px);

    right: 1px;
    top: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 198, 255, .20),
            rgba(90, 70, 255, .17)
        );

    border-radius: 8px;

    box-shadow:
        inset 0 0 12px rgba(0, 198, 255, .08);

    opacity: 1;

    z-index: -1;
    pointer-events: none;
}


/* Brillo gira al pasar el mouse */
.header-datanext .auth-button.register:hover::before {
    animation:
        datanext-login-brillo-giratorio
        1.8s
        linear
        infinite;
}


/* En móvil gira al tocar */
.header-datanext .auth-button.register:active::before {
    animation:
        datanext-login-brillo-giratorio
        1.2s
        linear
        infinite;
}


/* Iluminación al pasar el mouse */
.header-datanext .auth-button.register:hover {
    background:
        linear-gradient(
            135deg,
            rgba(0, 198, 255, .30),
            rgba(90, 70, 255, .25)
        );

    border-color: rgba(120, 225, 255, .85);

    box-shadow:
        0 0 0 1px rgba(0, 198, 255, .14),
        0 0 22px rgba(0, 198, 255, .32),
        0 0 42px rgba(90, 70, 255, .12),
        inset 0 0 18px rgba(0, 198, 255, .10);

    transform: translateY(-1px);
}


/* ==========================================================
   MÓVIL
   Conserva el tamaño compacto existente
   ========================================================== */

@media (max-width: 700px) {

    .header-datanext .auth-button.register::before {
        width: 125%;
        height: 320%;
        top: -110%;
        left: -12.5%;
    }

    .header-datanext .auth-button.register:hover {
        box-shadow:
            0 0 0 1px rgba(0, 198, 255, .10),
            0 0 16px rgba(0, 198, 255, .25),
            inset 0 0 12px rgba(0, 198, 255, .08);
    }

    .header-datanext .auth-button.register:active::before {
        animation-duration: 1.2s;
    }
}

/* DATA NEXT — AJUSTE HORIZONTAL DEL TÍTULO EN MÓVIL */
@media (max-width: 700px) {
    .datanext-futurista-titulo-wrap {
        transform: translateX(-37px);
    }
}

/* DATA NEXT — ajuste horizontal solo del encabezado en PC */
@media (min-width: 701px) {
    .datanext-futurista-titulo-wrap {
        transform: translateX(-55px);
    }
}

/* DATA NEXT — prueba fondo negro solo PC */
@media (min-width: 701px) {
    .datanext-futurista {
        background: #000;
    }
}


/* DATA NEXT — fondo negro definitivo */
.datanext-futurista {
    background: #000;
}