/* ========================================
   MOBILE FIRST OPTIMIZATIONS
   La Exquisitita de la 28
   ======================================== */

/* ========================================
   BASE MOBILE STYLES (< 480px)
   ======================================== */

/* Mejoras de rendimiento */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Touch targets más grandes (mínimo 44px según Apple) */
a, button, input[type="submit"], input[type="button"], .button {
    min-height: 44px;
    min-width: 44px;
}

/* Tipografía responsive */
body {
    font-size: 16px; /* Previene zoom en iOS */
    line-height: 1.6;
}

/* Header móvil mejorado */
.header {
    padding: 8px 0;
}

.header ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.header ul li {
    width: auto !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    border: none !important;
}

.header ul li i {
    margin-right: 5px !important;
}

/* Logo responsive */
.logo_agile h1 a {
    font-size: 1.2em !important;
}

.logo_agile h1 span {
    display: block;
}

/* Navegación móvil mejorada */
.navbar-toggle {
    padding: 12px 15px !important;
    margin: 10px 15px 10px 0 !important;
    border: 2px solid #fff !important;
    border-radius: 8px !important;
}

.navbar-toggle .icon-bar {
    width: 25px !important;
    height: 3px !important;
    margin: 5px 0 !important;
    background: #fff !important;
    border-radius: 2px !important;
}

.navbar-collapse {
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
}

.nav.navbar-nav {
    margin: 0 !important;
    padding: 10px 0 !important;
}

.nav.navbar-nav li {
    margin: 0 !important;
}

.nav.navbar-nav .menu__link {
    padding: 15px 20px !important;
    font-size: 16px !important;
    display: block !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Productos - Grid responsive */
.product-men {
    width: 100% !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
}

.men-pro-item {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

.men-thumb-item {
    position: relative;
}

.men-thumb-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

.item-info-product {
    padding: 15px !important;
    text-align: center;
}

.item-info-product h4 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

.item-info-product h4 a {
    color: #333 !important;
}

.info-product-price {
    margin-bottom: 15px !important;
}

.info-product-price .item_price {
    font-size: 22px !important;
    font-weight: bold !important;
    color: #c41e3a !important;
}

.info-product-price del {
    font-size: 14px !important;
    color: #999 !important;
    margin-left: 10px !important;
}

/* Botones de producto más grandes para touch */
.snipcart-details input[type="submit"],
.button {
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
}

/* Etiqueta de oferta */
.product-new-top {
    padding: 8px 15px !important;
    font-size: 12px !important;
    border-radius: 0 0 0 12px !important;
}

/* Banner de oferta */
.sale-w3ls {
    padding: 20px 15px !important;
}

.sale-w3ls h6 {
    font-size: 14px !important;
}

.sale-w3ls h3 {
    font-size: 20px !important;
}

/* Sección de estadísticas */
.w3l_schedule_bottom_right_grid1 {
    width: 100% !important;
    margin-bottom: 20px !important;
    text-align: center;
}

.w3l_schedule_bottom_right_grid1 i {
    font-size: 40px !important;
}

.w3l_schedule_bottom_right_grid1 h5 {
    font-size: 28px !important;
}

/* Footer móvil */
.footer {
    padding: 30px 15px !important;
}

.footer-left {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

.footer-left h2 {
    font-size: 24px !important;
}

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

.sign-gd, .sign-gd-two {
    width: 100% !important;
    margin-bottom: 25px !important;
    text-align: center !important;
}

.sign-gd ul li {
    display: inline-block !important;
    margin: 5px 10px !important;
}

/* Formularios móviles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
    font-size: 16px !important; /* Previene zoom en iOS */
    padding: 15px !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

textarea {
    min-height: 120px !important;
}

/* Modal responsive */
.modal-dialog {
    margin: 10px !important;
    width: calc(100% - 20px) !important;
}

.modal-body {
    padding: 20px !important;
}

.modal_body_left {
    width: 100% !important;
}

.modal_body_right {
    display: none !important; /* Ocultar imagen en móvil */
}

/* Mapa responsive */
.map iframe {
    width: 100% !important;
    height: 300px !important;
}

/* Galería navideña móvil */
.christmas-gallery {
    padding: 30px 15px !important;
}

.christmas-gallery h3 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
}

.gallery-grid {
    gap: 15px !important;
}

.gallery-item {
    width: 100% !important;
    max-width: 100% !important;
}

.gallery-item img {
    height: 200px !important;
}

/* Banner navideño móvil */
.christmas-banner {
    font-size: 13px !important;
    padding: 10px !important;
    line-height: 1.4 !important;
}

.christmas-banner::before,
.christmas-banner::after {
    display: none !important;
}

/* Mensaje flotante móvil */
.christmas-message {
    font-size: 11px !important;
    padding: 10px 15px !important;
    bottom: 90px !important;
    max-width: 90% !important;
}

/* Copos de nieve - reducir en móvil para rendimiento */
.snowflake:nth-child(n+11) {
    display: none !important;
}

/* Luces navideñas - reducir */
.christmas-lights li:nth-child(2n) {
    display: none;
}

/* Botones flotantes móvil */
.floating-buttons {
    bottom: 15px !important;
    right: 10px !important;
    gap: 10px !important;
}

.float-btn {
    width: 50px !important;
    height: 50px !important;
}

.float-btn i {
    font-size: 22px !important;
}

.float-btn-whatsapp {
    width: 55px !important;
    height: 55px !important;
}

.float-btn-call,
.float-btn-menu {
    width: 45px !important;
    height: 45px !important;
}

.whatsapp-badge {
    font-size: 8px !important;
    padding: 2px 4px !important;
}

/* Ocultar tooltips en móvil */
.float-btn::after {
    display: none !important;
}

/* Sección de contacto móvil */
.contact-grid-agile-w3 {
    width: 100% !important;
    margin-bottom: 20px !important;
}

.contact-grid-agile-w31,
.contact-grid-agile-w32,
.contact-grid-agile-w33 {
    padding: 20px !important;
}

/* Breadcrumb móvil */
.page-head_agile_info_w3l {
    padding: 30px 15px !important;
}

.page-head_agile_info_w3l h3 {
    font-size: 28px !important;
}

/* Coupons section */
.w3layouts_mail_grid_left {
    width: 100% !important;
    margin-bottom: 25px !important;
}

.w3layouts_mail_grid_left1 i {
    font-size: 35px !important;
}

.w3layouts_mail_grid_left2 h3 {
    font-size: 16px !important;
}

/* Scroll to top - más visible */
#toTop {
    width: 45px !important;
    height: 45px !important;
    bottom: 80px !important;
    right: 70px !important;
}

/* ========================================
   TABLET STYLES (481px - 768px)
   ======================================== */

@media (min-width: 481px) {
    .product-men {
        width: 50% !important;
    }

    .gallery-item {
        width: calc(50% - 10px) !important;
    }

    .header ul li {
        font-size: 12px !important;
    }

    .christmas-banner {
        font-size: 15px !important;
    }

    .christmas-banner::before,
    .christmas-banner::after {
        display: inline !important;
        font-size: 18px !important;
    }

    .w3l_schedule_bottom_right_grid1 {
        width: 33.33% !important;
        float: left;
    }

    .contact-grid-agile-w3 {
        width: 33.33% !important;
        float: left;
    }

    .snowflake:nth-child(n+11) {
        display: block !important;
    }
}

/* ========================================
   DESKTOP STYLES (769px+)
   ======================================== */

@media (min-width: 769px) {
    .product-men {
        width: 33.33% !important;
    }

    .gallery-item {
        width: 300px !important;
    }

    .header ul li {
        font-size: 13px !important;
        padding: 7px 15px !important;
    }

    .logo_agile h1 a {
        font-size: 1.5em !important;
    }

    .sign-gd, .sign-gd-two {
        width: auto !important;
        text-align: left !important;
    }

    .footer-left {
        width: 25% !important;
        text-align: left !important;
    }

    .footer-right {
        width: 75% !important;
    }

    .modal_body_right {
        display: block !important;
    }

    .christmas-message {
        font-size: 16px !important;
    }
}

@media (min-width: 992px) {
    .product-men {
        width: 25% !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Lazy loading placeholder */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .snowflakes,
    .christmas-lights {
        display: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* Mantener colores originales por ahora - el sitio es principalmente visual */
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .item_price {
        color: #000 !important;
        background: #ffd700 !important;
        padding: 5px 10px !important;
    }
}

/* ========================================
   TOUCH IMPROVEMENTS
   ======================================== */

/* Mejor feedback táctil */
.btn-christmas:active,
.hvr-outline-out.button2:active,
.float-btn:active,
.button:active {
    transform: scale(0.95) !important;
    opacity: 0.9 !important;
}

/* Prevenir selección de texto en botones */
button,
.button,
.float-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ========================================
   SAFE AREAS (iPhone X+)
   ======================================== */

@supports (padding: max(0px)) {
    .header {
        padding-top: max(8px, env(safe-area-inset-top)) !important;
    }

    .footer {
        padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
    }

    .floating-buttons {
        bottom: max(15px, env(safe-area-inset-bottom)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .snowflakes,
    .christmas-lights,
    .christmas-banner,
    .christmas-message,
    .floating-buttons,
    .navbar,
    #toTop {
        display: none !important;
    }

    .product-men {
        width: 33% !important;
        page-break-inside: avoid;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}