/* ============================================================
   DARK TRIAD SHOP — Web 4c: celular fluido y sin bordes raros
   Lo carga includes/header.php SOLO en páginas con body.dt-darktriad-page
   (Latin Shop no lo usa). Va al final para ganarle al resto del tema.
   ============================================================ */

/* 1. El menú de arriba vuelve a quedarse fijo arriba.
      La regla del tema «body.dt-darktriad-page > * {position:relative}» lo volvía normal:
      dejaba una franja vacía de 64 px arriba y el menú se iba al bajar. */
body.dt-darktriad-page > .tbt-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* 1b. Esa misma regla metía al final de la página cosas que deben flotar: el aviso «Instalar Dark Triad Shop»
       y el puntero decorativo (punto + aro). Por eso se podía bajar más allá del pie de página.
       El aviso vuelve a flotar abajo; el puntero decorativo se quita (en Dark Triad nunca llegó a funcionar). */
body.dt-darktriad-page > #pwa-install-banner,
body.dt-darktriad-page > #pwa-fab,
body.dt-darktriad-page > #pwa-manual-modal {
    position: fixed;
}
body.dt-darktriad-page > .tbt-cursor,
body.dt-darktriad-page > .tbt-cursor-ring {
    display: none !important;
}

/* 2. Nada se sale por los lados (la página no «baila» de lado al deslizar el dedo). */
body.dt-darktriad-page {
    overflow-x: clip;
}

/* 3. Solo en celular / tableta */
@media (max-width: 900px) {
    /* El desenfoque detrás del menú es lo más pesado al hacer scroll en celular, y casi no se ve
       (el fondo ya es 94 % opaco). Además, mientras existe, el menú lateral queda «atrapado»
       dentro del menú de arriba y ensancha la página. */
    body.dt-darktriad-page > .tbt-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #06070a !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.35);
    }
    body.dt-darktriad-page .tbt-header__nav::before {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0,0,0,.72);
    }
    body.dt-darktriad-page .tbt-header__nav {
        height: calc(100dvh - var(--tbt-header-h, 64px)) !important;
        overscroll-behavior: contain;
    }

    /* La cuadrícula de fondo (casi invisible) cubre toda la pantalla y se repinta al bajar. */
    body.dt-darktriad-page::before {
        display: none;
    }

    /* Animaciones de adorno que nunca paran (anillos, brasas, brillos, logo flotando):
       en celular gastan batería y trabaron el scroll. Se quedan quietas. */
    body.dt-darktriad-page .dt-home-hero__logo,
    body.dt-darktriad-page .dt-home-hero__embers,
    body.dt-darktriad-page .dt-home-hero__embers::before,
    body.dt-darktriad-page .dt-home-hero__embers::after,
    body.dt-darktriad-page .tbt-hero > .tbt-wrap::before,
    body.dt-darktriad-page .dt-tools-core__ring,
    body.dt-darktriad-page .dt-tools-core__ring::before,
    body.dt-darktriad-page .dt-tools-core__ring::after,
    body.dt-darktriad-page .dt-tools-core__gem,
    body.dt-darktriad-page .dt-tools-orbit-item,
    body.dt-darktriad-page .dt-tools-commander__eyes::before,
    body.dt-darktriad-page .dt-tools-commander__eyes::after,
    body.dt-darktriad-page .dt-shop-vault__glow,
    body.dt-darktriad-page .dt-bots-hero__ring,
    body.dt-darktriad-page .dt-bots-character__glow,
    body.dt-darktriad-page .dt-bots-character__embers,
    body.dt-darktriad-page .dt-bots-character__embers::before,
    body.dt-darktriad-page .dt-bots-character__embers::after,
    body.dt-darktriad-page .dt-auth-scene__ring,
    body.dt-darktriad-page .dt-auth-scene__halo,
    body.dt-darktriad-page .dt-auth-scene__crest,
    body.dt-darktriad-page .dt-auth-scene__ember,
    body.dt-darktriad-page .dt-support-orbit--1,
    body.dt-darktriad-page .dt-support-orbit--2,
    body.dt-darktriad-page .dt-support-guardian,
    body.dt-darktriad-page .dt-support-ticket-hero__crest span,
    body.dt-darktriad-page .dt-mibot-orbit--1,
    body.dt-darktriad-page .dt-mibot-orbit--2,
    body.dt-darktriad-page .dt-mibot-operator,
    body.dt-darktriad-page .dt-mibot-account-ring--1,
    body.dt-darktriad-page .dt-mibot-account-ring--2 {
        animation: none !important;
    }

    /* Sombras y desenfoques grandes sobre imágenes grandes: se ven casi igual sin ellos. */
    body.dt-darktriad-page .dt-home-hero__logo,
    body.dt-darktriad-page .dt-auth-scene__crest,
    body.dt-darktriad-page .dt-shop-vault img,
    body.dt-darktriad-page .dt-bots-character img,
    body.dt-darktriad-page .dt-support-guardian,
    body.dt-darktriad-page .dt-mibot-operator,
    body.dt-darktriad-page .tbt-hero > .tbt-wrap::after {
        filter: none !important;
    }
    body.dt-darktriad-page .dt-shop-vault::before,
    body.dt-darktriad-page .dt-shop-vault__glow,
    body.dt-darktriad-page .dt-shop-diamond-card::after,
    body.dt-darktriad-page .dt-tools-hub-card::after,
    body.dt-darktriad-page .dt-bots-character__glow,
    body.dt-darktriad-page .dt-auth-scene__halo {
        filter: none !important;
        opacity: .55;
    }
    body.dt-darktriad-page .dt-shop-vault > *,
    body.dt-darktriad-page .dt-account-card__status,
    body.dt-darktriad-page .dt-account-card__photos {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* El contenido aparece de una vez (antes se quedaba en blanco hasta llegar y luego se desvanecía 0.7 s). */
    body.dt-darktriad-page [data-dt-reveal],
    body.dt-darktriad-page .tbt-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Toques más ágiles: sin el destello gris al tocar y sin esperar el doble toque. */
    body.dt-darktriad-page a,
    body.dt-darktriad-page button,
    body.dt-darktriad-page input,
    body.dt-darktriad-page select,
    body.dt-darktriad-page label {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* 4. Dibujos de portada que se veían corridos o cortados.
      El tema apaga «transform» en los elementos con data-dt-parallax (v1.9.2), y con eso se perdía el
      centrado que estas reglas hacían con transform:translateX(50%). Se centra con «translate», que no se apaga. */
@media (max-width: 1100px) {
    body.dt-darktriad-page .dt-shop-vault,
    body.dt-darktriad-page .dt-shop-orbit--one,
    body.dt-darktriad-page .dt-shop-orbit--two {
        translate: 50% 0;
    }
}
@media (max-width: 1050px) {
    body.dt-darktriad-page .dt-bots-hero { grid-template-columns: minmax(0, 1fr); }
    body.dt-darktriad-page .dt-bots-character,
    body.dt-darktriad-page .dt-bots-hero__ring {
        translate: 50% 0;
    }
}
@media (max-width: 700px) {
    /* Botones del recuadro final (p. ej. en «App») que se salían por los lados. */
    body.dt-darktriad-page .tbt-cta-box__actions {
        width: 100%;
        flex-shrink: 1;
    }
    body.dt-darktriad-page .tbt-cta-box__actions > * {
        flex: 1 1 100%;
        justify-content: center;
        white-space: normal;
    }
}