/* Generado al sacar los <style> del cuerpo del documento: un <style> ahi es
   invalido en HTML5 y abortaba la validacion W3C. El <link> queda en la MISMA
   posicion del documento, asi que el orden de cascada no cambia.
   No mover este <link> de sitio sin revisar la cascada. */

/* ===== Areas tactiles minimas 24x24 (WCAG 2.5.8) (antes inline en footer-tech.php L12) ===== */

/* Accesibilidad — área táctil mínima 24x24px (WCAG 2.5.8). El punto VISIBLE no
   cambia de tamaño: solo se agranda la caja interactiva del control. */

/* Dots del slider del hero: el botón pasa a 48x48 (tamaño de dedo que exige el
   audit "tap-targets"); el pill visible (.mod-dot) sigue del mismo tamaño,
   centrado. Implica que los puntos quedan más separados entre sí. */
.mod-dot-btn {
    min-width: 48px;
    min-height: 48px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* .mod-progress usa inset-0; al crecer el botón quedaría alta. La fijamos a la
   altura del pill (8px) y centrada, conservando su animación scaleX. */
.mod-dot-btn .mod-progress {
    top: calc(50% - 4px);
    bottom: auto;
    height: 8px;
}

/* Bullets de Swiper: caja 24x24; punto visible (~8px) vía padding +
   background-clip (no cambia el color ni el tamaño aparente del punto). */
.swiper-pagination-bullet {
    width: 24px !important;
    height: 24px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background-clip: content-box !important;
}

/* ===== Redes destacadas + bloque social del footer (antes inline en footer-tech.php L463) ===== */

    /* ── Redes destacadas (iconos grandes) — degradado principal NYXIVO (#0055cc→#0a8df5) ── */
    .nyx-social-feature{
        max-width:none;margin:16px 0 0;padding:22px;
        text-align:center;border-radius:20px;position:relative;overflow:hidden;
        background:linear-gradient(145deg,rgba(0,85,204,.10),rgba(10,141,245,.05));
        border:1px solid rgba(0,85,204,.22);
    }
    .nyx-social-feature::before{
        content:"";position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(10,141,245,.16),transparent 65%);
    }
    .nyx-social-feature-head{display:flex;align-items:center;justify-content:center;gap:16px;position:relative;z-index:1}
    .nyx-social-feature-spark{color:#0a8df5;font-size:1.1rem;animation:nyxSparkPulse 2s ease-in-out infinite}
    @keyframes nyxSparkPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.65}}
    .nyx-social-feature-title{
        font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;margin:0;letter-spacing:-.02em;
        background:linear-gradient(135deg,#4f9fff 0%,#0a8df5 55%,#0055cc 100%);
        -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .nyx-social-feature-sub{
        position:relative;z-index:1;
        color:rgba(148,163,184,.85);font-size:.92rem;margin:.35rem auto 1rem;max-width:480px;
    }
    .nyx-social-feature-grid{
        display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:14px;position:relative;z-index:1;
    }
    .nyx-social-big{
        display:flex;flex-direction:column;align-items:center;gap:9px;
        text-decoration:none;padding:10px;border-radius:16px;border:2px solid transparent;
        background:rgba(255,255,255,.02);
        transition:transform .4s cubic-bezier(.22,1.2,.36,1),background .3s,border-color .3s;
    }
    .nyx-social-big-icon{
        width:58px;height:58px;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        background:linear-gradient(145deg,rgba(0,85,204,.20),rgba(10,141,245,.07));
        border:1px solid rgba(0,85,204,.34);
        box-shadow:0 10px 28px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
        transition:transform .4s cubic-bezier(.22,1.2,.36,1),background .4s,border-color .4s,box-shadow .4s;
    }
    .nyx-social-big-icon svg{width:27px;height:27px;fill:#5fa8ff;transition:fill .35s}
    .nyx-social-big-name{
        font-size:.82rem;font-weight:600;color:rgba(226,232,240,.75);transition:color .3s,transform .3s;
    }
    .nyx-social-big:hover{transform:translateY(-7px);background:rgba(255,255,255,.04);border-color:rgba(10,141,245,.45)}
    .nyx-social-big:hover .nyx-social-big-icon{
        transform:rotate(360deg) scale(1.08);
        background:linear-gradient(135deg,#0055cc 0%,#0a8df5 100%);
        border-color:transparent;
        box-shadow:0 16px 38px -6px rgba(0,85,204,.6),0 0 0 4px rgba(10,141,245,.22);
    }
    .nyx-social-big:hover .nyx-social-big-icon svg{fill:#fff}
    .nyx-social-big:hover .nyx-social-big-name{color:#4f9fff;transform:scale(1.05)}

    /* ── Crédito desarrollador (LinkedIn) — degradado principal NYXIVO ── */
    .nyx-dev-credit{
        position:relative;overflow:hidden;text-align:center;
        padding:16px 20px;margin-top:8px;
        background:linear-gradient(135deg,rgba(8,13,26,.96),rgba(15,23,42,.96));
        border:1px solid rgba(10,141,245,.22);
    }
    .nyx-dev-credit::before{
        content:"";position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(circle at 50% 0%,rgba(0,85,204,.18),transparent 70%);
    }
    .nyx-dev-box{position:relative;z-index:1;max-width:680px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
    .nyx-dev-text{margin:0;font-size:.95rem;color:rgba(203,213,225,.85);line-height:1.5}
    .nyx-dev-highlight{
        font-weight:700;
        background:linear-gradient(135deg,#4f9fff,#0a8df5);
        -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .nyx-dev-cta{
        display:inline-flex;align-items:center;gap:10px;
        padding:12px 28px;border-radius:9999px;text-decoration:none;
        font-weight:700;font-size:.95rem;color:#fff;
        background:linear-gradient(135deg,#0055cc 0%,#0a8df5 100%);
        border:2px solid transparent;
        box-shadow:0 8px 22px -6px rgba(0,85,204,.6),0 0 0 2px rgba(10,141,245,.3);
        position:relative;overflow:hidden;
        transition:transform .4s cubic-bezier(.22,1.2,.36,1),box-shadow .4s,border-color .3s;
    }
    .nyx-dev-cta::before{
        content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .6s;
    }
    .nyx-dev-cta:hover::before{left:100%}
    .nyx-dev-cta:hover{
        transform:translateY(-4px) scale(1.02);color:#fff;
        border-color:rgba(10,141,245,.55);
        box-shadow:0 16px 38px -8px rgba(0,85,204,.7),0 0 0 2px #0a8df5;
    }
    .nyx-dev-cta svg{width:18px;height:18px;fill:#fff;transition:transform .4s ease}
    .nyx-dev-cta:hover svg{transform:scale(1.15)}

    /* ── Volver arriba ── */
    .nyx-backtop-wrap{display:flex;justify-content:center;padding:14px 0 4px;position:relative}
    .nyx-backtop-wrap::before{
        content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
        width:min(680px,80%);height:1px;
        background:linear-gradient(90deg,transparent,rgba(10,141,245,.4),transparent);
    }
    .nyx-backtop{
        display:inline-flex;align-items:center;gap:9px;cursor:pointer;
        padding:9px 20px;border-radius:9999px;
        font-size:.84rem;font-weight:600;color:#9fc6ff;
        background:rgba(0,85,204,.10);
        border:1px solid rgba(10,141,245,.30);
        transition:transform .35s cubic-bezier(.22,1.2,.36,1),background .3s,color .3s,border-color .3s,box-shadow .3s;
    }
    .nyx-backtop i{transition:transform .35s cubic-bezier(.22,1.2,.36,1)}
    .nyx-backtop:hover{
        color:#fff;border-color:transparent;
        background:linear-gradient(135deg,#0055cc 0%,#0a8df5 100%);
        box-shadow:0 10px 26px -8px rgba(0,85,204,.7);
        transform:translateY(-3px);
    }
    .nyx-backtop:hover i{transform:translateY(-3px)}
    .nyx-backtop:active{transform:translateY(-1px) scale(.97)}

    /* ── Trust strip clicable ── */
    .footer-trust-link{text-decoration:none;color:inherit;border-radius:14px;transition:background .3s,transform .3s cubic-bezier(.22,1.2,.36,1),box-shadow .3s}
    .footer-trust-link:hover{transform:translateY(-3px);background:rgba(0,85,204,.10);box-shadow:0 12px 28px -12px rgba(0,85,204,.55)}
    .footer-trust-link:hover .footer-trust-title{color:#9fc6ff}

    /* ── Iconos de pago (logos a color) ── */
    .footer-payments-icons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .nyx-pay{
        width:46px;height:30px;background:#fff;border-radius:7px;
        display:flex;align-items:center;justify-content:center;padding:4px;
        box-shadow:0 2px 10px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.22,1.2,.36,1),box-shadow .3s;
    }
    .nyx-pay img{max-width:100%;max-height:100%;object-fit:contain;display:block}
    .nyx-pay:hover{transform:translateY(-3px);box-shadow:0 9px 22px -5px rgba(0,85,204,.5)}

    /* ── Barra inferior reorganizada en DOS filas (sin hueco al medio) ── */
    .footer-bottom{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:1.1rem}
    .footer-bottom-row{display:flex;align-items:center;gap:.8rem 1.4rem;flex-wrap:wrap}
    .footer-bottom-top{justify-content:space-between}
    .footer-bottom-legal{justify-content:space-between;gap:1rem 1.4rem;border-top:1px solid rgba(148,163,184,.14);padding-top:1.05rem}
    .footer-copyright{margin:0}
    .footer-legal{flex-wrap:wrap;row-gap:.35rem;column-gap:.55rem}
    .footer-libro-destacado{margin:0 !important}

    /* Pagos (derecha de la fila 1): iconos en línea + sello Culqi debajo */
    .footer-payments{flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.45rem .7rem}
    .footer-payments-icons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .nyx-pay--yape{background:#742284;color:#fff;font-weight:800;font-size:.66rem;letter-spacing:.4px;font-style:italic}
    .footer-payments-culqi{font-size:.72rem;color:#94a3b8;display:inline-flex;align-items:center;gap:.35rem;width:100%;justify-content:flex-end}
    .footer-payments-culqi i{color:#22c55e}
    .footer-payments-culqi strong{color:#cbd5e1}

    @media(max-width:768px){
        .footer-bottom-row,.footer-bottom-top,.footer-bottom-legal{justify-content:center;text-align:center}
        .footer-legal{justify-content:center}
        .footer-payments,.footer-payments-icons,.footer-payments-culqi{justify-content:center}
        .footer-payments-culqi{width:auto}
    }

    /* ── Ritmo vertical uniforme entre bandas (compacto) ── */
    .nyx-app-banner{margin:16px 0;border-radius:20px}
    .nyx-dev-credit{margin-top:16px;border-radius:20px}

    /* ── Compactar paddings del footer base ── */
    .footer-tech{padding-top:2rem}
    .footer-trust-strip{padding:1rem 0;margin-bottom:1.25rem}
    .footer-tech-grid{padding-bottom:1.5rem}
    .footer-bottom{padding:1rem 0}

    @media(prefers-reduced-motion:reduce){
        .nyx-social-feature-spark,.nyx-social-big,.nyx-social-big-icon,.nyx-dev-cta,.nyx-backtop,.nyx-backtop i{animation:none;transition:none}
        .nyx-social-big:hover .nyx-social-big-icon{transform:scale(1.06)}
    }
    @media(max-width:768px){
        .nyx-social-feature{padding:26px 14px}
        .nyx-social-feature-grid{gap:12px}
        .nyx-social-big{padding:8px}
        .nyx-social-big-icon{width:52px;height:52px}
        .nyx-social-big-icon svg{width:24px;height:24px}
        .nyx-social-big-name{font-size:.78rem}
    }
    @media(max-width:576px){
        .nyx-social-big-icon{width:48px;height:48px}
        .nyx-social-big-icon svg{width:22px;height:22px}
        .nyx-social-big-name{font-size:.72rem}
    }

/* ===== Carrito flotante oculto en movil (antes inline en footer-tech.php L654) ===== */
@media(max-width:639px){#nyxFloatCart{position:fixed!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;}}

/* ===== Burbuja y ventana del chat (antes inline en footer-tech.php L686) ===== */

#nyx-chat-bubble{display:none}
#nyx-chat-window{position:fixed;opacity:0;pointer-events:none}
/* Mobile: bubble invisible pero .click() de JS sigue funcionando */
@media(max-width:639px){
    #nyx-chat-bubble{
        position:fixed!important;
        width:1px!important;
        height:1px!important;
        opacity:0!important;
        pointer-events:none!important;
        overflow:hidden!important;
        clip:rect(0,0,0,0)!important;
    }
}

/* ===== Utilidad de texto accesible pero no visible =====
   Duplica la definicion de critical-bundle.css (identica, no hay conflicto)
   porque views/asistente/index.php usa este pie SIN cargar ese bundle. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
