/* Ajustes responsive del sitio principal. Se carga al final para centralizar
   las correcciones móviles sin alterar la composición de escritorio. */

@media (max-width: 767px) {
    :root {
        --mobile-gutter: 14px;
        --mobile-radius: 18px;
    }

    html {
        width: 100%;
        overflow-x: hidden;
        scroll-padding-top: 72px;
    }

    body {
        width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

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

    input,
    select,
    textarea {
        min-width: 0;
        font-size: 16px;
    }

    button,
    a,
    select,
    input[type="checkbox"] {
        touch-action: manipulation;
    }

    .site-top-bar {
        min-width: 0;
        height: calc(58px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 10px 0;
        gap: 8px;
    }

    .site-top-bar .brand {
        min-width: 0;
        max-width: 38vw;
        gap: 7px;
        overflow: hidden;
        font-size: 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .site-top-bar .brand i {
        flex: 0 0 auto;
        font-size: 17px;
    }

    .site-user {
        min-width: 0;
        gap: 6px;
    }

    .top-photo,
    .top-photo-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .top-rank-badge {
        max-width: 78px;
        margin: 0;
        padding: 5px 8px;
        overflow: hidden;
        font-size: 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .site-top-bar .actions {
        flex: 0 0 auto;
        gap: 5px;
    }

    .site-top-bar .actions button,
    .top-icons button {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        display: grid;
        place-items: center;
    }

    .header {
        padding: calc(82px + env(safe-area-inset-top)) var(--mobile-gutter) 20px;
    }

    .shop-title {
        font-size: clamp(30px, 10vw, 38px);
        line-height: 1.05;
        letter-spacing: -1.4px;
    }

    .subtitle {
        margin-top: 7px;
        font-size: 10px;
        letter-spacing: 3px;
    }

    .search-box {
        width: 100%;
        margin-top: 22px;
    }

    .search-input {
        min-height: 52px;
        padding: 14px 14px 14px 46px;
        border-radius: 15px;
    }

    .filter-tabs {
        max-width: 100%;
        margin: 5px 0 14px;
        padding: 8px var(--mobile-gutter) 10px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .filter-tabs::-webkit-scrollbar,
    .tabs::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        min-height: 44px;
        flex: 0 0 auto;
        padding: 11px 16px;
        scroll-snap-align: start;
        font-size: 13px;
    }

    .container {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 8px var(--mobile-gutter) calc(96px + env(safe-area-inset-bottom));
    }

    .product-card {
        min-width: 0;
        border-radius: 21px;
    }

    .product-card:hover {
        transform: none;
    }

    .product-img-container {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .product-info {
        min-width: 0;
        padding: 18px;
    }

    .product-info h3 {
        font-size: 19px;
        line-height: 1.25;
    }

    .product-info p {
        font-size: 13px;
        line-height: 1.55;
    }

    .product-meta,
    .duration-info,
    .catalog-info {
        gap: 10px;
        flex-wrap: wrap;
    }

    .price-sale {
        font-size: 23px;
    }

    .buy-btn,
    .review-btn {
        min-height: 50px;
    }

    .notification-panel,
    .menu-box {
        top: calc(66px + env(safe-area-inset-top));
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 78px - env(safe-area-inset-top));
        border-radius: 20px;
    }

    .notification-header {
        gap: 12px;
        padding: 17px;
    }

    .notification-title {
        font-size: 16px;
    }

    .btn-mark-read {
        padding: 10px 11px;
        font-size: 11px;
    }

    .menu-box {
        padding: 9px;
        overflow-y: auto;
    }

    .menu-box button,
    .floating-menu button {
        min-height: 46px;
    }

    .dashboard-btn {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        width: 54px;
        height: 54px;
        font-size: 19px;
    }

    .floating-menu {
        right: max(12px, env(safe-area-inset-right));
        bottom: calc(78px + env(safe-area-inset-bottom));
        min-width: 190px;
        border-radius: 17px;
    }

    .modal,
    .reviews-modal,
    .dashboard-panel,
    .my-reviews-panel {
        width: 100%;
        overscroll-behavior: contain;
    }

    .modal-content,
    .reviews-content,
    .my-reviews-content {
        width: 100%;
        min-width: 0;
        padding: calc(14px + env(safe-area-inset-top)) var(--mobile-gutter) calc(24px + env(safe-area-inset-bottom));
    }

    .product-modal {
        align-items: flex-end !important;
        padding-top: 20px;
    }

    .product-modal > div {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - 20px);
        padding: 20px 16px calc(18px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto;
        border-radius: 24px 24px 0 0 !important;
    }

    .product-modal h2 {
        font-size: 21px !important;
    }

    .duration-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .duration-buttons button {
        min-height: 64px;
        padding: 12px;
        border-radius: 15px;
    }

    .duration-summary {
        padding: 15px;
        border-radius: 16px;
    }

    .stepper-header,
    .reviews-header,
    .dashboard-header {
        gap: 10px;
        margin-bottom: 20px;
    }

    .stepper-left {
        min-width: 0;
        gap: 10px;
    }

    .step-info {
        min-width: 0;
    }

    .step-info h2,
    .reviews-header h2,
    .dashboard-title {
        font-size: 21px;
        line-height: 1.15;
    }

    .back-btn,
    .close-btn {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .method-cards {
        gap: 12px;
        margin-top: 18px;
    }

    .method-card {
        gap: 13px;
        padding: 15px;
        border-radius: 18px;
    }

    .method-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
        font-size: 20px;
    }

    .method-info {
        min-width: 0;
    }

    .method-info h3 {
        font-size: 17px;
    }

    .country-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 18px;
    }

    .country-card {
        padding: 14px;
        border-radius: 17px;
    }

    .amount-presets {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .amount-preset {
        min-width: 0;
        padding: 14px 8px;
        font-size: 16px;
    }

    .selected-country-display,
    .instruction-header,
    .wallet-credit {
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }

    .instruction-card,
    .payment-details,
    .rules-box {
        padding: 16px;
        border-radius: 18px;
    }

    .amount-display {
        width: 100%;
        text-align: left;
    }

    .payment-row {
        gap: 8px;
        flex-wrap: wrap;
    }

    .payment-row .label {
        width: auto;
        min-width: 72px;
    }

    .payment-row .value {
        min-width: 0;
        word-break: break-word;
    }

    .copy-btn-small {
        min-height: 42px;
        margin: 4px 0 0 30px;
    }

    .upload-area {
        padding: 28px 16px;
        border-radius: 19px;
    }

    .upload-area i {
        font-size: 38px;
    }

    .whatsapp-notice {
        border-radius: 15px;
    }

    .dashboard-content {
        width: 100%;
        min-height: 100dvh;
        margin: 0;
        padding: calc(18px + env(safe-area-inset-top)) var(--mobile-gutter) calc(30px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
    }

    .profile-hero,
    .contact-hero {
        padding: 24px 17px;
        border-radius: 21px;
    }

    .profile-photo-large {
        width: 96px;
        height: 96px;
        font-size: 38px;
    }

    .profile-hero h2,
    .contact-hero h2 {
        font-size: 23px;
    }

    .profile-hero p {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-box {
        min-width: 0;
        padding: 17px 8px;
        border-radius: 16px;
    }

    .stat-box h3 {
        font-size: clamp(19px, 6vw, 25px);
        overflow-wrap: anywhere;
    }

    .tabs-container {
        margin-right: calc(var(--mobile-gutter) * -1);
        margin-left: calc(var(--mobile-gutter) * -1);
        padding: 7px var(--mobile-gutter) 10px;
        overflow: hidden;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tab-btn {
        min-width: auto;
        min-height: 44px;
        flex: 0 0 auto;
        padding: 11px 15px;
        border-radius: 14px;
        font-size: 12px;
    }

    .tab-content,
    .info-card,
    .edit-form,
    .rank-card,
    .rank-benefits,
    .transfer-section,
    .referral-link-box,
    .compra-card {
        min-width: 0;
        padding: 17px;
        border-radius: 18px;
    }

    .info-row {
        align-items: flex-start;
        gap: 11px;
    }

    .info-row i {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        margin-right: 0;
        border-radius: 13px;
    }

    .info-row .content {
        min-width: 0;
    }

    .info-row .content .value {
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    .info-row .edit-btn {
        min-height: 40px;
        padding: 9px 11px;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions > * {
        width: 100%;
        flex: none;
        min-height: 48px;
    }

    .referral-hero {
        padding: 21px 16px;
    }

    .referral-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .ref-stat {
        min-width: 0;
        padding: 12px 5px;
    }

    .ref-label {
        font-size: 9px;
    }

    .ref-value {
        font-size: 15px;
        overflow-wrap: anywhere;
    }

    .referral-link-input {
        flex-direction: column;
    }

    .referral-link-input input,
    .copy-ref-btn {
        width: 100%;
        min-height: 46px;
    }

    .transfer-balance .amount {
        font-size: clamp(30px, 10vw, 40px);
    }

    .transfer-item,
    .compra-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .transfer-details {
        min-width: 0;
    }

    .transfer-amount {
        margin-left: auto;
    }

    .contact-grid,
    .top-vip-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .contact-card,
    .vip-card {
        padding: 22px 16px;
        border-radius: 19px;
    }

    .rating-summary {
        padding: 20px 16px;
        border-radius: 19px;
    }

    .reviews-header {
        padding-top: 5px;
    }

    .reviews-header .step-info h2 {
        font-size: 20px;
    }

    .footer {
        margin-top: 16px !important;
        padding: 30px var(--mobile-gutter) calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .footer-links {
        gap: 9px !important;
    }

    .footer-links a {
        min-height: 42px;
        padding: 10px 13px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .footer-social a {
        width: 44px !important;
        height: 44px !important;
    }

    .welcome-modal {
        align-items: flex-end;
        padding: 14px 10px calc(10px + env(safe-area-inset-bottom));
    }

    .welcome-content {
        max-height: calc(100dvh - 24px);
        padding: 27px 18px 20px;
        overflow-y: auto;
        border-radius: 24px;
    }

    .welcome-content h1 {
        font-size: clamp(26px, 8vw, 34px);
    }

    .welcome-features {
        gap: 10px;
    }

    .welcome-feature {
        padding: 12px;
    }
}

@media (max-width: 420px) {
    .site-top-bar .brand {
        max-width: 34vw;
        font-size: 12px;
    }

    .top-rank-badge {
        display: none;
    }

    .product-actions {
        gap: 8px;
    }

    .duration-buttons {
        grid-template-columns: minmax(0, 1fr);
    }

    .selected-country-display .left {
        min-width: 0;
    }

    .selected-country-display .name {
        overflow-wrap: anywhere;
    }

    .payment-row .value {
        flex-basis: calc(100% - 42px);
    }

    .copy-btn-small {
        width: calc(100% - 30px);
        justify-content: center;
    }

    .referral-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .ref-stat {
        padding: 13px;
    }

    .ref-label {
        font-size: 11px;
    }

    .ref-value {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}