/* ═══════════════════════════════════════════════════════════════════════
   QUANTUM CLUB — AJUSTES DE MÓVIL
   ───────────────────────────────────────────────────────────────────────
   El grueso de las ventas entra por móvil, así que aquí se corrigen tres
   cosas que sólo se notan con el dedo y en una pantalla pequeña:

     1. Zonas de toque por debajo del mínimo cómodo (~44 px).
     2. Los sliders, con una pista de 3 px imposible de agarrar.
     3. Etiquetas de 7-8 px, que a mano alzada no se leen.

   Todo va dentro de media queries: en escritorio la página no cambia ni
   un píxel. Borrar este fichero revierte el ajuste entero.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   1 · ZONAS DE TOQUE
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* CTA de la barra: era de 30 px de alto. Los CTA grandes (héroe y barra
       fija) ya estaban bien, este se había quedado atrás. */
    nav a[href*="hotmart"],
    nav a[href="#descargar"] {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Botones y selectores de los widgets: 24-27 px → 36 px */
    button[onclick^="restartGBM"],
    button[onclick^="runMC"],
    button[onclick^="newEquityCurve"],
    button[onclick^="runVaR"],
    #pf-conf,
    #pf-pos {
        min-height: 36px;
    }

    /* Iconos sociales del pie: el glifo mide 16 px, el enlace también.
       Con padding pasan a una zona de toque holgada sin moverse de sitio. */
    .social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    footer .flex.justify-center.space-x-12 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 1.5rem;   /* compensa el ancho nuevo de cada icono */
    }
}


/* ───────────────────────────────────────────────────────────────────────
   2 · SLIDERS
   Con puntero grueso la pista pasa de 3 px a una banda de 24 px que se
   puede agarrar, pintando la línea fina sólo en el centro. Visualmente
   queda igual; lo que cambia es lo que el dedo puede tocar.
   ─────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
    /* !important: el <style> de la página va después de este fichero */
    .quant-slider {
        height: 24px !important;
        border-radius: 0 !important;
        background: linear-gradient(
            to bottom,
            transparent calc(50% - 2px),
            rgba(59, 130, 246, 0.25) calc(50% - 2px),
            rgba(59, 130, 246, 0.25) calc(50% + 2px),
            transparent calc(50% + 2px)
        ) !important;
    }
    html[data-theme="light"] .quant-slider {
        background: linear-gradient(
            to bottom,
            transparent calc(50% - 2px),
            rgba(37, 99, 235, 0.22) calc(50% - 2px),
            rgba(37, 99, 235, 0.22) calc(50% + 2px),
            transparent calc(50% + 2px)
        ) !important;
    }
    .quant-slider::-webkit-slider-thumb { width: 20px; height: 20px; }
    .quant-slider::-moz-range-thumb     { width: 20px; height: 20px; }
    .quant-slider::-moz-range-track     { background: transparent; }
}


/* ───────────────────────────────────────────────────────────────────────
   3 · LEGIBILIDAD
   Las etiquetas mono de 7 y 8 px son parte del aire "terminal quant" de la
   página, pero en un móvil dejan de leerse. Se suben a 10 px sólo ahí; de
   9 px para arriba se quedan como están.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .text-\[7px\] { font-size: 10px !important; line-height: 1.35 !important; }
    .text-\[8px\] { font-size: 10px !important; line-height: 1.4  !important; }
}