/* =========================================================
   XCLUSIVE SHOP - AJUSTES RESPONSIVE
   Carga este archivo DESPUÉS de tus estilos principales.
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas {
    max-width: 100%;
}

body {
    min-width: 0;
}

/* Evita que textos largos rompan el diseño */
h1,
h2,
h3,
p,
span,
a {
    overflow-wrap: anywhere;
}

/* =========================================================
   TABLETS Y TELÉFONOS
========================================================= */
@media (max-width: 980px) {

    /* ---------- MENÚ SUPERIOR ---------- */
    body {
        padding-top: 118px !important;
    }

    .top-nav {
        height: auto !important;
        min-height: 65px;
        padding: 5px 16px 10px !important;
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .nav-left {
        flex: 1 1 auto;
    }

    .main-logo {
        height: 72px !important;
    }

    .nav-right {
        margin-left: auto;
    }

    .profile-circle {
        width: 32px !important;
        height: 32px !important;
    }

    .nav-center {
        order: 3;
        width: 100%;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        padding: 6px 2px 3px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .nav-center::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex: 0 0 auto;
        font-size: 0.72rem !important;
    }

    /* Si catalogo.html usa menú hamburguesa, no interferir */
    .nav-center.active {
        display: grid !important;
    }

    /* ---------- INDEX ---------- */
    .hero {
        padding: 55px 16px 25px !important;
    }

    .reviews-wrapper-main {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: min(100%, 340px) !important;
        margin: 0 auto 35px !important;
    }

    .reviews-container {
        height: 350px !important;
    }

    .owners-section {
        flex-wrap: wrap !important;
        gap: 22px !important;
    }

    .owner-card {
        width: min(100%, 280px) !important;
    }

    .stats-container {
        flex-wrap: wrap !important;
        margin: 30px auto !important;
    }

    .stat-card {
        flex: 1 1 180px !important;
        max-width: 280px !important;
    }

    .discord-card {
        flex-direction: column !important;
        gap: 22px;
        text-align: center;
    }

    .discord-info {
        text-align: center !important;
    }

    .podium-container {
        gap: 12px !important;
        margin-top: 75px !important;
        padding: 0 10px !important;
    }

    .ranking-list {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ---------- TIENDA ---------- */
    .main-shop-container {
        flex-direction: column !important;
        width: 100%;
        padding: 24px 14px !important;
        gap: 22px !important;
    }

    .shop-sidebar {
        position: static !important;
        width: 100% !important;
        padding: 20px !important;
    }

    .category-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
    }

    .category-btn {
        padding: 10px 0 !important;
    }

    .shop-content {
        width: 100%;
        min-width: 0;
    }

    .content-header {
        gap: 10px;
        flex-wrap: wrap;
        padding: 14px 16px !important;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .product-img-container {
        height: auto !important;
        aspect-ratio: 4 / 3;
    }

    .product-details {
        padding: 16px !important;
    }

    .cart-sidebar {
        width: min(100%, 380px) !important;
    }

    /* ---------- CATÁLOGO ---------- */
    .catalog-hero {
        padding: 55px 16px 35px !important;
    }

    .sections-container,
    .catalog-container {
        width: calc(100% - 24px) !important;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .category-card,
    .category-cover {
        min-height: 310px !important;
    }

    .modal-panel {
        width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
    }

    .slider-stage {
        min-height: 0;
    }
}

/* =========================================================
   TELÉFONOS
========================================================= */
@media (max-width: 600px) {

    body {
        padding-top: 110px !important;
    }

    .top-nav {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .main-logo {
        height: 65px !important;
    }

    .nav-center {
        gap: 14px !important;
    }

    .nav-link {
        font-size: 0.67rem !important;
    }

    /* ---------- INDEX ---------- */
    .hero {
        padding-top: 40px !important;
    }

    h1,
    .catalog-title {
        font-size: clamp(2rem, 13vw, 3.2rem) !important;
        line-height: 1.05;
    }

    .hero-btns {
        flex-direction: column !important;
        width: min(100%, 320px);
        margin-left: auto;
        margin-right: auto;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .owners-title {
        font-size: 1.15rem !important;
        letter-spacing: 3px !important;
    }

    .stats-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        width: 100% !important;
        max-width: none !important;
    }

    .discord-wrapper {
        margin: 40px auto !important;
        padding: 0 12px !important;
    }

    .discord-card {
        padding: 22px 16px !important;
    }

    .btn-discord {
        width: 100%;
        box-sizing: border-box;
    }

    .podium-container {
        align-items: flex-end !important;
        gap: 6px !important;
    }

    .podium-user-name {
        font-size: 0.58rem !important;
        overflow-wrap: anywhere;
    }

    .p1 .podium-base {
        height: 140px !important;
    }

    .p2 .podium-base {
        height: 95px !important;
    }

    .p3 .podium-base {
        height: 75px !important;
    }

    .podium-base {
        font-size: 1.8rem !important;
    }

    .rank-item {
        padding: 13px 14px !important;
        font-size: 0.78rem;
        gap: 10px;
    }

    /* ---------- TIENDA ---------- */
    .main-shop-container {
        padding: 18px 10px !important;
    }

    .category-list {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr !important;
    }

    .product-img-container {
        aspect-ratio: 16 / 11;
    }

    .product-title {
        font-size: 0.9rem !important;
    }

    .product-price {
        font-size: 1rem !important;
    }

    .add-to-cart-btn {
        padding: 8px 12px !important;
    }

    .cart-sidebar {
        width: 100% !important;
        right: -100% !important;
    }

    .cart-sidebar.active {
        right: 0 !important;
    }

    /* ---------- CATÁLOGO ---------- */
    .catalog-description {
        font-size: 0.86rem !important;
        padding: 0 4px;
    }

    .category-grid {
        grid-template-columns: 1fr !important;
    }

    .category-card,
    .category-cover {
        min-height: 330px !important;
    }

    .category-info {
        left: 16px !important;
        right: 16px !important;
        bottom: 17px !important;
    }

    .catalog-modal {
        padding: 0 !important;
    }

    .modal-panel {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .modal-header {
        padding: 12px 14px !important;
        min-height: 62px !important;
    }

    .slider-stage {
        padding: 10px 42px !important;
    }

    .slider-image {
        max-height: 100% !important;
        max-width: 100% !important;
    }

    .slider-arrow {
        width: 38px !important;
        height: 38px !important;
    }

    .slider-arrow.prev {
        left: 4px !important;
    }

    .slider-arrow.next {
        right: 4px !important;
    }

    .thumbnails-wrapper {
        padding: 10px !important;
    }

    .thumbnail-btn {
        flex-basis: 66px !important;
        width: 66px !important;
        height: 52px !important;
    }
}

/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
========================================================= */
@media (max-width: 380px) {
    .profile-circle {
        display: none !important;
    }

    .reviews-wrapper-main {
        width: 100% !important;
    }

    .review-card {
        padding: 12px !important;
    }

    .category-card,
    .category-cover {
        min-height: 300px !important;
    }

    .slider-stage {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
}