/* ═══════════════════════════════════════════════════════
   LA POINT — MEJORAS VISUALES v7 FINAL
   Sin cambios de fuente, solo mejoras funcionales
═══════════════════════════════════════════════════════ */

/* ── TARJETAS DE PRODUCTO ────────────────────────────── */
.prod-card {
    border-radius: 16px !important;
    transition: all .25s ease !important;
}
.prod-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.12) !important;
    border-color: rgba(230,57,70,.2) !important;
}
.prod-img { transition: transform .35s ease !important; }
.prod-card:hover .prod-img { transform: scale(1.04) !important; }

/* ── CATEGORÍAS ──────────────────────────────────────── */
.cat-tile { transition: all .25s ease !important; }
.cat-tile:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 24px rgba(230,57,70,.1) !important;
}
.cat-tile:hover .cat-tile-icon {
    background: linear-gradient(135deg, var(--accent), #c1121f) !important;
    color: white !important;
}

/* ── WHY-US ──────────────────────────────────────────── */
.why-us-card { transition: all .25s ease !important; }
.why-us-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.08) !important;
}

/* ── JUEGOS ──────────────────────────────────────────── */
.juego-card { transition: all .25s ease !important; }
.juego-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(230,57,70,.35) !important;
    box-shadow: 0 16px 48px rgba(230,57,70,.12) !important;
}
.juego-icon { transition: transform .25s ease !important; }
.juego-card:hover .juego-icon { transform: scale(1.12) rotate(-4deg) !important; }

/* ── BOTONES ─────────────────────────────────────────── */
.btn-primary { transition: all .2s ease !important; }
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(230,57,70,.28) !important;
}
.btn-carrusel-nav { transition: all .2s ease !important; }
.btn-carrusel-nav:hover {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(230,57,70,.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ════════════════════════════════════════════════════════
   DARK MODE — FIX COMPLETO
════════════════════════════════════════════════════════ */

/* Tarjetas producto */
html.dark .prod-card {
    background: #161616 !important;
    border-color: rgba(255,255,255,.07) !important;
}
html.dark .prod-card:hover {
    background: #1c1c1c !important;
    border-color: rgba(230,57,70,.22) !important;
}
html.dark .prod-img,
html.dark .prod-img-placeholder { background: #1e1e1e !important; }

/* Why us cards */
html.dark .why-us-card {
    background: #161616 !important;
    border-color: rgba(255,255,255,.07) !important;
}
html.dark .why-us-card:hover { background: #1c1c1c !important; }

/* Cat tiles */
html.dark .cat-tile {
    background: #161616 !important;
    border-color: rgba(255,255,255,.06) !important;
}
html.dark .cat-tile:hover { background: #1c1c1c !important; }

/* Chips filtro */
html.dark .chip-filtro {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #d1d5db !important;
}
html.dark .chip-filtro.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* Formularios */
html.dark .form-control,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
    background: #1a1a1a !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #e5e7eb !important;
}

/* Página de producto — fix dark mode */
html.dark .prod-detalle-wrap,
html.dark [class*="prod-detalle"] { background: transparent !important; }
html.dark .prod-info-box,
html.dark .prod-right,
html.dark [style*="background:#f"] { background: #161616 !important; }
html.dark .prod-galeria-wrap,
html.dark .prod-galeria { background: #161616 !important; border-color: rgba(255,255,255,.07) !important; }
html.dark .prod-thumb { background: #1e1e1e !important; border-color: rgba(255,255,255,.1) !important; }
html.dark .prod-thumb.active { border-color: var(--accent) !important; }

/* Social proof */
html.dark .social-proof-bar {
    background: linear-gradient(135deg,#0a0a0a,#150505) !important;
}
html.dark .sp-label { color: rgba(255,255,255,.4) !important; }

/* Breadcrumb */
html.dark .breadcrumb,
html.dark [style*="color:var(--gray3)"] { color: rgba(255,255,255,.4) !important; }

/* Secciones con fondo gris/blanco hardcodeado */
html.dark [style*="background:var(--lighter)"],
html.dark [style*="background: var(--lighter)"] { background: #0f0f0f !important; }
html.dark [style*="background:var(--white)"],
html.dark [style*="background: var(--white)"],
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:white"] { background: #161616 !important; }
html.dark [style*="border:1.5px solid var(--light)"],
html.dark [style*="border: 1.5px solid var(--light)"],
html.dark [style*="border:1px solid var(--light)"] { border-color: rgba(255,255,255,.08) !important; }
html.dark [style*="color:var(--dark)"],
html.dark [style*="color: var(--dark)"] { color: #e5e7eb !important; }
html.dark [style*="color:var(--gray3)"],
html.dark [style*="color: var(--gray3)"] { color: rgba(255,255,255,.4) !important; }

/* ════════════════════════════════════════════════════════
   MOBILE COMPLETO
════════════════════════════════════════════════════════ */
@media (max-width: 820px) {

    /* Fuente consistente en tarjetas — igual que desktop */
    .prod-nombre {
        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }
    .prod-precio {
        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
        font-size: 15px !important;
    }

    /* Desactivar hovers en touch */
    .prod-card:hover,
    .juego-card:hover,
    .cat-tile:hover,
    .why-us-card:hover { transform: none !important; box-shadow: none !important; }
    .prod-card:hover .prod-img { transform: none !important; }

    /* Chips de filtro en scroll horizontal */
    .cat-filtro-mobile { position: static !important; }
    .cat-filtro-chips {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding: 10px 16px 12px !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cat-filtro-chips::-webkit-scrollbar { display: none; }
    .cat-chip { flex-shrink: 0 !important; }

    /* Grid 2 columnas */
    .productos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    /* Título producto más chico en mobile */
    .prod-detalle h1,
    h1.prod-titulo { font-size: 20px !important; line-height: 1.3 !important; }

    /* Why us 2 col */
    .why-us-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    /* Features strip scroll */
    .features-strip { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
    .features-strip::-webkit-scrollbar { display: none; }
    .feature-item { flex-shrink: 0 !important; }
}

@media (max-width: 480px) {
    .why-us-grid { grid-template-columns: 1fr !important; }
}

/* ── DARK MODE PRODUCTO DETALLE ──────────────────────── */
html.dark .prod-detalle-img,
html.dark #img-magnifier-wrap,
html.dark .prod-detalle-img > div[style*="background:var(--lighter)"] {
    background: #1a1a1a !important;
}
html.dark .prod-detalle-info > div[style*="background:var(--lighter)"],
html.dark .prod-detalle-info > div[style*="background:var(--white)"],
html.dark [style*="background:var(--lighter)"],
html.dark [style*="background: var(--lighter)"] {
    background: #161616 !important;
    border-color: rgba(255,255,255,.07) !important;
    color: #e5e7eb !important;
}
html.dark [style*="background:var(--white)"],
html.dark [style*="background: var(--white)"] {
    background: #161616 !important;
    border-color: rgba(255,255,255,.07) !important;
}
html.dark .prod-detalle-nombre { color: #f0f0f0 !important; }
html.dark .prod-detalle-desc { color: rgba(255,255,255,.7) !important; }
html.dark .prod-detalle-cat { color: var(--accent) !important; }

/* Título producto en mobile — reducir tamaño */
@media (max-width: 820px) {
    .prod-detalle-nombre,
    h1.prod-detalle-nombre,
    #prod-nombre-h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
    .prod-detalle-precio { font-size: 28px !important; }
    .prod-detalle { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════
   FIX MOBILE NAV — Header fijo arriba, Bottom nav fijo abajo
   Soluciona el problema de la barra flotante en mobile
═══════════════════════════════════════════════════════════════ */

/* Header siempre fijo arriba, nunca tapado */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 19500 !important;
    transform: none !important;
    will-change: auto !important;
}

/* Bottom nav siempre fijo abajo — bloquear cualquier transformación problemática */
#mob-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 19000 !important;
}

/* Mobile: asegurar que nada tape las barras */
@media (max-width: 820px) {
    /* Evitar overflow-x que corta el header */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Espacio correcto para no quedar tapado por el header */
    #header-spacer {
        display: block !important;
    }

    /* Espacio para bottom nav */
    body {
        padding-bottom: max(72px, env(safe-area-inset-bottom, 0px) + 72px) !important;
    }

    /* Botón de sonido: encima del bottom nav */
    #lp-sfx-btn {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Botón pausa en juegos: no tapar el header */
    #hud-pause-lp {
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* iOS safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #mob-bottom-nav {
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    }
}

/* ── CAT-NAV pegada al header en mobile ──
   NO sobreescribir top — el JS del header lo calcula dinámicamente.
   Solo eliminar márgenes/padding que generan el gap visual. */
@media (max-width: 820px) {
    .cat-nav {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    /* El header-spacer NO debe tener margen inferior */
    #header-spacer {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Asegurar que el elemento justo después del spacer no tenga margen */
    #header-spacer + * {
        margin-top: 0 !important;
    }
}