/* =========================================================
   JEY - AJUSTES RESPONSIVE / MÓVIL
   Se carga al final para corregir y unificar toda la tienda.
   ========================================================= */

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }

/* Ocultos solo en escritorio. En móvil se muestran dentro del media query. */
.mobile-menu-toggle,
.mobile-menu,
.mobile-menu-overlay { display: none; }

@media (max-width: 900px) {
    body.menu-movil-abierto { overflow: hidden; }

    .header {
        position: absolute;
        height: 76px;
        min-height: 76px;
        padding: 0 10px;
        align-items: center;
        background: linear-gradient(to bottom, rgba(255,255,255,.96), rgba(255,255,255,.62), rgba(255,255,255,0));
    }

    .header.scroll-header {
        position: fixed;
        height: 68px;
        min-height: 68px;
        padding: 0 10px;
        background: rgba(255,255,255,.96);
        box-shadow: 0 5px 22px rgba(0,0,0,.08);
        backdrop-filter: blur(14px);
    }

    .header_logo {
        width: auto;
        flex: 1 1 auto;
        height: 76px !important;
        justify-content: flex-start;
    }

    .header_logo > a { width: 165px; height: 76px !important; justify-content: flex-start; }
    .logo-switcher { width: 150px !important; height: 58px !important; margin: 0 !important; }
    .logo-switcher .logo { width: 150px !important; max-height: 58px !important; }

    .header.scroll-header .header_logo { height: 68px !important; }
    .header.scroll-header .header_logo > a { height: 68px !important; }
    .header.scroll-header .logo-switcher { width: 138px !important; height: 52px !important; }
    .header.scroll-header .logo-switcher .logo { width: 138px !important; max-height: 52px !important; }

    .header_derecho {
        width: auto;
        flex: 0 0 auto;
        height: 76px !important;
        display: flex;
        align-items: center;
    }
    .header.scroll-header .header_derecho { height: 68px !important; }

    .header_funciones { width: auto; height: 76px; align-items: center; }
    .header.scroll-header .header_funciones { height: 68px; }
    .cont_categorias { display: none; }

    .cont_botones {
        width: auto;
        height: auto;
        gap: 1px;
        justify-content: flex-end;
    }

    .botones-btn {
        width: 38px;
        height: 42px;
        border-radius: 50%;
    }
    .botones-btn svg,
    .icono-carrito,
    .icono-usuario { width: 26px !important; height: 26px !important; }
    .contador_carrito { top: 1px; right: 0; min-width: 16px; height: 16px; font-size: 9px; }

    .header-buscador {
        position: absolute;
        top: 12px;
        right: 55px;
        width: 42px;
        height: 44px;
        z-index: 10005;
    }
    .search-container { width: 100%; height: 44px; padding: 0; }
    .search-box { top: 0; right: 0; width: 42px; height: 42px; border-radius: 50%; }
    .search-box.activo {
        position: fixed;
        top: 76px;
        left: 10px;
        right: 10px;
        width: calc(100vw - 20px);
        height: 50px;
        border-radius: 14px;
        z-index: 10030;
    }
    .search-box.activo input { padding-left: 16px; font-size: 15px; }
    .search-icon { flex-basis: 42px; height: 42px; }
    .search-suggestions { max-height: min(60vh, 420px); border-radius: 14px; }
    .btnBuscar { padding: 0 13px; margin-right: 5px; }

    .mobile-menu-toggle {
        position: relative;
        z-index: 10020;
        width: 42px;
        height: 42px;
        margin-left: 3px;
        padding: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 50%;
        background: rgba(255,255,255,.78);
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
    }
    .mobile-menu-toggle span { width: 18px; height: 2px; border-radius: 2px; background: #333; transition: .25s ease; }
    .mobile-menu-toggle.activo span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-menu-toggle.activo span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.activo span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        display: block;
        background: rgba(0,0,0,.42);
        opacity: 0;
        visibility: hidden;
        transition: .28s ease;
        z-index: 10040;
    }
    .mobile-menu-overlay.activo { opacity: 1; visibility: visible; }

    .mobile-menu {
        position: fixed;
        top: 0;
        right: -340px;
        width: min(86vw, 340px);
        height: 100dvh;
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: -18px 0 45px rgba(0,0,0,.16);
        transition: right .32s cubic-bezier(.2,.8,.2,1);
        z-index: 10050;
        overflow-y: auto;
    }
    .mobile-menu.activo { right: 0; }
    .mobile-menu-head { min-height: 76px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; color: #9D005D; letter-spacing: 2px; font-size: 13px; }
    .mobile-menu-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f6f6f6; color: #333; font-size: 30px; line-height: 1; cursor: pointer; }
    .mobile-menu-links { padding: 12px 18px; display: flex; flex-direction: column; }
    .mobile-menu-links a { padding: 15px 8px; border-bottom: 1px solid #f0f0f0; color: #333; font-size: 14px; font-weight: 600; text-transform: uppercase; }
    .mobile-menu-links a:first-child { color: #9D005D; }
    .mobile-menu-extra { margin-top: auto; padding: 20px; border-top: 1px solid #eee; display: grid; gap: 10px; }
    .mobile-menu-extra a { padding: 13px 14px; border-radius: 12px; background: #f8f8f8; color: #444; font-size: 14px; font-weight: 600; }

    .cart-drawer { width: min(100%, 420px); }
    #carrito-dropdown, .carrito-dropdown { max-width: calc(100vw - 20px); }

    /* HERO */
    .hero { height: min(680px, 88svh); min-height: 560px; }
    .hero-bg { object-position: 62% center; transform: scale(1.01); }
    .hero-overlay {
        align-items: flex-end;
        background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.78) 100%);
        padding: 0;
    }
    .hero-content {
        left: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0 24px 76px;
        justify-content: flex-end;
        text-align: left;
    }
    .hero-subtitulo { margin-bottom: 10px; font-size: 11px; letter-spacing: 2.5px; }
    .hero-content h1 { margin-bottom: 12px; font-size: clamp(36px, 10vw, 48px); line-height: 1.02; letter-spacing: -.8px; }
    .hero-content p { margin-bottom: 22px; max-width: 290px; font-size: 16px; line-height: 1.45; }
    .hero-buttons { width: auto; justify-content: flex-start; }
    .btn-principal { width: auto; min-width: 160px; padding: 15px 25px; border-radius: 10px; text-align: center; }
    .btn-secundario { display: none; }
    .hero-arrow { width: 44px; height: 44px; font-size: 25px; background: rgba(0,0,0,.20); }
    .hero-prev { left: 10px; }
    .hero-next { right: 10px; }
    .hero-dots { bottom: 22px; gap: 9px; }
    .hero-dot { width: 9px; height: 9px; }

    /* HOME / CARRUSELES */
    .pagina-home .hero + .cont-categorias { margin-top: 16px; }
    .pagina-home .cont-categorias { width: calc(100% - 20px); margin: 16px 10px; padding: 18px 12px 16px; border-radius: 16px; }
    .pagina-home .nombre_categoria { margin-bottom: 12px; padding-bottom: 10px; }
    .pagina-home .nombre_categoria h2 { font-size: 19px; }
    .pagina-home .contenedor_producto { gap: 10px; padding: 4px 2px 16px; scroll-snap-type: x mandatory; }
    .pagina-home .contenedor_producto > .card-producto { flex: 0 0 78vw; width: 78vw; min-width: 78vw; scroll-snap-align: start; }
    .pagina-home .card-producto__imagen { height: 330px; }
    .pagina-home .carrusel-btn { display: none; }

    /* TARJETAS */
    .card-producto__article { border-radius: 15px; }
    .card-producto__imagen { height: 250px; }
    .card-producto__contenido { padding: 13px 12px 14px; }
    .card-producto__titulo { min-height: 36px; font-size: 13px; }
    .card-producto__precio { font-size: 18px; }
    .card-producto__favorito { width: 34px; height: 34px; top: 9px; right: 9px; }
    .card-producto__badge { top: 9px; left: 9px; font-size: 8px; }

    /* LISTADOS */
    .pagina-productos, .pagina-categoria { width: calc(100% - 24px); padding: 104px 0 50px; }
    .productos-encabezado, .categoria-encabezado { min-height: 0; margin-bottom: 20px; padding: 22px 18px; gap: 16px; border-radius: 20px; }
    .productos-encabezado h1, .categoria-encabezado h1 { font-size: 30px; }
    .productos-encabezado p, .categoria-encabezado p { font-size: 14px; line-height: 1.45; }
    .productos-catalogo, .categoria-productos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .productos-catalogo .card-producto__imagen { height: 220px; }
    .categoria-productos-grid .card-producto__imagen { height: 220px; }

    /* CATEGORÍAS */
    .categorias { padding: 96px 12px 35px; }
    .cat-hero { height: 430px; margin-bottom: 22px; border-radius: 16px; }
    .cat-hero .contenido { left: 22px; right: 22px; bottom: 26px; max-width: none; }
    .cat-hero h1 { font-size: 34px; line-height: 1.05; }
    .cat-hero p { font-size: 14px; }
    .cat-grid { gap: 14px; }
    .cat-card { height: 300px; border-radius: 16px; }
    .cat-card .contenido { left: 22px; right: 22px; max-width: none; }
    .cat-card h3 { font-size: 22px; }

    /* FOOTER */
    .footer { margin-top: 42px; }
    .footer-superior { width: calc(100% - 40px); padding: 38px 0; gap: 34px; }
    .footer-marca, .footer-suscripcion h2 { font-size: 25px; }
    .footer-mapa { height: 280px; }
}

@media (max-width: 520px) {
    .header { padding: 0 7px; }
    .header_logo > a { width: 136px; }
    .logo-switcher, .logo-switcher .logo { width: 128px !important; }
    .logo-switcher { height: 52px !important; }
    .logo-switcher .logo { max-height: 52px !important; }
    .header.scroll-header .logo-switcher, .header.scroll-header .logo-switcher .logo { width: 120px !important; }

    .cont_botones .botones-btn:nth-of-type(n+3) { display: none; }
    .botones-btn { width: 36px; }
    .header-buscador { right: 47px; }
    .mobile-menu-toggle { width: 40px; height: 40px; }

    .hero { height: min(650px, 84svh); min-height: 530px; }
    .hero-bg { object-position: 66% center; }
    .hero-content { padding: 0 20px 70px; }
    .hero-content h1 { font-size: clamp(34px, 10.2vw, 43px); }
    .hero-content p { font-size: 15px; }
    .btn-principal { min-width: 150px; padding: 14px 22px; }

    .pagina-home .contenedor_producto > .card-producto { flex-basis: 84vw; width: 84vw; min-width: 84vw; }
    .pagina-home .card-producto__imagen { height: 315px; }

    .productos-catalogo, .categoria-productos-grid { gap: 8px; }
    .productos-catalogo .card-producto__imagen, .categoria-productos-grid .card-producto__imagen { height: 205px; }
    .productos-catalogo .card-producto__contenido, .categoria-productos-grid .card-producto__contenido { padding: 11px 9px; }
    .productos-catalogo .card-producto__titulo, .categoria-productos-grid .card-producto__titulo { font-size: 12px; min-height: 34px; }
    .productos-catalogo .card-producto__precio, .categoria-productos-grid .card-producto__precio { font-size: 16px; }
    .productos-catalogo .card-producto__btn, .categoria-productos-grid .card-producto__btn { min-height: 36px; font-size: 11px; }
}

@media (max-width: 360px) {
    .header_logo > a { width: 120px; }
    .logo-switcher, .logo-switcher .logo { width: 112px !important; }
    .cont_botones .botones-btn:nth-of-type(n+2) { display: none; }
    .hero-content h1 { font-size: 33px; }
}


/* Blindaje adicional: evita que el menú móvil aparezca fuera de pantalla en escritorio */
@media (min-width: 901px) {
    .mobile-menu-toggle,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}


/* =========================================================
   MENÚ HAMBURGUESA PREMIUM - CORRECCIÓN FINAL
   ========================================================= */
@media (max-width: 900px) {
    .mobile-menu-toggle {
        display: inline-flex !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin: 0 0 0 8px;
        border: 1px solid rgba(157,0,93,.14);
        border-radius: 14px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 8px 22px rgba(0,0,0,.10);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-menu-toggle:active { transform: scale(.94); }
    .mobile-menu-toggle span {
        width: 20px;
        height: 2px;
        background: linear-gradient(90deg,#111,#9D005D);
    }
    .header.scroll-header .mobile-menu-toggle {
        background: #fff;
        box-shadow: 0 6px 18px rgba(0,0,0,.09);
    }

    .mobile-menu-overlay { display: block !important; }
    .mobile-menu { display: flex !important; }
    .mobile-menu {
        right: -360px;
        width: min(88vw, 360px);
        border-radius: 24px 0 0 24px;
        overflow: hidden auto;
    }
    .mobile-menu.activo { right: 0; }
    .mobile-menu-head {
        min-height: 86px;
        padding: 0 22px;
        background: linear-gradient(135deg,#111 0%,#2a0920 55%,#9D005D 140%);
        color: #fff;
        border-bottom: 0;
        font-weight: 800;
    }
    .mobile-menu-close {
        background: rgba(255,255,255,.13);
        color: #fff;
        border: 1px solid rgba(255,255,255,.16);
        transition: transform .2s ease, background .2s ease;
    }
    .mobile-menu-close:active { transform: rotate(90deg) scale(.92); }
    .mobile-menu-links { padding: 16px 20px 24px; gap: 4px; }
    .mobile-menu-links a {
        position: relative;
        padding: 16px 14px;
        border: 0;
        border-radius: 12px;
        font-size: 13px;
        letter-spacing: .3px;
        transition: background .2s ease, color .2s ease, transform .2s ease;
    }
    .mobile-menu-links a::after {
        content: '›';
        position: absolute;
        right: 14px;
        font-size: 22px;
        font-weight: 300;
        color: #aaa;
        top: 50%;
        transform: translateY(-52%);
    }
    .mobile-menu-links a:hover, .mobile-menu-links a:active {
        background: #f8eef4;
        color: #9D005D;
        transform: translateX(3px);
    }
    .mobile-menu-extra {
        margin: 0 20px 20px;
        padding: 16px;
        border: 0;
        border-radius: 18px;
        background: #f8f7f8;
    }
    .mobile-menu-extra a {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 11px;
    }
}


/* ===== AJUSTE GLOBAL MÓVIL HEADER Y BUSCADOR ===== */
@media (max-width:900px){
  body.search-mobile-open{overflow:hidden}
  .header{overflow:visible!important}
  .header-buscador{right:58px!important;top:12px!important;z-index:10060!important}
  .search-box.activo{top:calc(76px + env(safe-area-inset-top))!important;left:8px!important;right:8px!important;width:calc(100vw - 16px)!important;max-width:none!important;z-index:10070!important;box-shadow:0 14px 35px rgba(0,0,0,.18)!important}
  .header.scroll-header .search-box.activo{top:calc(68px + env(safe-area-inset-top))!important}
  .search-suggestions{z-index:10071!important}
  .mobile-menu-toggle{position:relative!important;z-index:10080!important;flex:0 0 auto}
  .header_derecho{position:relative;z-index:10075}
  .search-box.activo + *{pointer-events:auto}
  .pagina-productos,.pagina-categoria,.producto-detalle,.pagina-carrito,.pagina-checkout{overflow-x:hidden}
  table{max-width:100%}
}
@media (max-width:520px){
  .header-buscador{right:51px!important}
  .search-box.activo{height:52px!important}
  .search-box.activo input{font-size:14px!important}
  .btnBuscar{padding:0 10px!important;font-size:11px!important}
}

/* =========================================================
   FIX DEFINITIVO MOBILE 2026 - HEADER + MENU LATERAL
   Esta sección se carga al final para ganar a reglas antiguas.
   ========================================================= */
@media (max-width: 900px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  body.menu-movil-abierto { overflow:hidden !important; touch-action:none; }

  /* Header: una sola fila limpia */
  .header{
    position:fixed !important;
    top:0 !important; left:0 !important;
    height:72px !important;
    min-height:72px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:0 10px !important;
    background:rgba(255,255,255,.96) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 3px 18px rgba(0,0,0,.08);
    z-index:9999 !important;
    overflow:visible !important;
  }
  .header_logo{
    width:auto !important; height:72px !important;
    flex:0 0 auto !important; justify-content:flex-start !important;
    min-width:118px;
  }
  .header_logo a{width:126px !important;}
  .logo-switcher,.logo-switcher .logo{width:126px !important;max-width:126px !important;height:auto !important;padding:0 !important;}
  .header_derecho{
    width:auto !important; height:72px !important;
    flex:1 1 auto !important; min-width:0 !important;
    display:flex !important; flex-direction:row !important;
    align-items:center !important; justify-content:flex-end !important;
  }
  .header_funciones{width:auto !important;height:72px !important;display:flex !important;align-items:center !important;}
  .cont_categorias{display:none !important;}
  .cont_botones{width:auto !important;height:72px !important;gap:2px !important;align-items:center !important;justify-content:flex-end !important;}
  .cont_botones .botones-btn{width:40px !important;height:40px !important;flex:0 0 40px !important;}
  .cont_botones .botones-btn:nth-of-type(n+2){display:none !important;}
  .botones-btn svg,.icono-carrito,.icono-usuario{width:26px !important;height:26px !important;}

  /* Buscador cerrado como icono y abierto debajo del header */
  .header-buscador{position:static !important;width:42px !important;height:42px !important;margin:0 2px !important;z-index:10020 !important;}
  .search-container{width:42px !important;height:42px !important;position:relative !important;}
  .search-box{position:absolute !important;top:0 !important;right:0 !important;width:42px !important;height:42px !important;overflow:visible !important;z-index:10021 !important;}
  .search-box:not(.activo) input,.search-box:not(.activo) .btnBuscar{display:none !important;}
  .search-box.activo{
    position:fixed !important;
    top:80px !important; left:10px !important; right:10px !important;
    width:calc(100vw - 20px) !important; max-width:none !important;
    height:54px !important; border-radius:15px !important;
    display:flex !important; z-index:11050 !important;
    background:#fff !important; box-shadow:0 16px 45px rgba(0,0,0,.2) !important;
  }
  .search-box.activo input{display:block !important;min-width:0 !important;flex:1 1 auto !important;}
  .search-box.activo .btnBuscar{display:block !important;flex:0 0 auto !important;}
  .search-suggestions{position:fixed !important;top:140px !important;left:10px !important;right:10px !important;width:calc(100vw - 20px) !important;z-index:11051 !important;max-height:55vh !important;overflow:auto !important;}

  /* Botón hamburguesa SIEMPRE visible y encima del header */
  .mobile-menu-toggle{
    display:inline-flex !important;
    position:relative !important;
    flex:0 0 44px !important;
    width:44px !important;height:44px !important;
    margin:0 0 0 5px !important;padding:0 !important;
    align-items:center !important;justify-content:center !important;
    flex-direction:column !important;gap:5px !important;
    border:1px solid rgba(157,0,93,.18) !important;
    border-radius:13px !important;background:#111 !important;
    box-shadow:0 8px 20px rgba(0,0,0,.16) !important;
    z-index:10030 !important; cursor:pointer !important;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu-toggle span{display:block !important;width:21px !important;height:2px !important;background:#fff !important;border-radius:3px !important;transition:.25s ease !important;}
  .mobile-menu-toggle.activo span:nth-child(1){transform:translateY(7px) rotate(45deg) !important;}
  .mobile-menu-toggle.activo span:nth-child(2){opacity:0 !important;}
  .mobile-menu-toggle.activo span:nth-child(3){transform:translateY(-7px) rotate(-45deg) !important;}

  /* Menú lateral: fuera del header, fijo a toda la pantalla */
  .mobile-menu-overlay{
    display:block !important; position:fixed !important; inset:0 !important;
    background:rgba(0,0,0,.52) !important; opacity:0 !important; visibility:hidden !important;
    pointer-events:none !important; transition:opacity .28s ease,visibility .28s ease !important;
    z-index:20000 !important;
  }
  .mobile-menu-overlay.activo{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;}
  .mobile-menu{
    display:flex !important; position:fixed !important; top:0 !important; bottom:0 !important;
    right:0 !important; width:min(88vw,360px) !important; height:100dvh !important;
    transform:translateX(105%) !important; transition:transform .32s cubic-bezier(.2,.8,.2,1) !important;
    background:#fff !important; border-radius:24px 0 0 24px !important;
    z-index:20001 !important; box-shadow:-18px 0 50px rgba(0,0,0,.25) !important;
    overflow:hidden !important; flex-direction:column !important;
    pointer-events:auto !important;
  }
  .mobile-menu.activo{right:0 !important;transform:translateX(0) !important;}
  .mobile-menu-head{flex:0 0 auto !important;min-height:82px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;padding:0 18px !important;background:linear-gradient(135deg,#111,#3a0829 65%,#9d005d) !important;color:#fff !important;}
  .mobile-menu-close{display:grid !important;place-items:center !important;width:42px !important;height:42px !important;border-radius:50% !important;border:1px solid rgba(255,255,255,.2) !important;background:rgba(255,255,255,.13) !important;color:#fff !important;font-size:30px !important;line-height:1 !important;}
  .mobile-menu-links{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;padding:14px 16px !important;display:flex !important;flex-direction:column !important;gap:4px !important;}
  .mobile-menu-links a{display:flex !important;align-items:center !important;min-height:50px !important;padding:12px 14px !important;border-radius:12px !important;color:#222 !important;text-decoration:none !important;font-size:13px !important;font-weight:700 !important;text-transform:uppercase !important;}
  .mobile-menu-links a:active{background:#f7edf3 !important;color:#9d005d !important;}
  .mobile-menu-extra{flex:0 0 auto !important;margin:0 !important;padding:14px 16px calc(14px + env(safe-area-inset-bottom)) !important;background:#faf8f9 !important;border-top:1px solid #eee !important;display:grid !important;gap:8px !important;}
  .mobile-menu-extra a{display:block !important;padding:13px !important;border:1px solid #eee !important;border-radius:11px !important;background:#fff !important;color:#333 !important;text-decoration:none !important;}
}
@media (max-width: 420px){
  .header_logo a,.logo-switcher,.logo-switcher .logo{width:112px !important;max-width:112px !important;}
  .header_logo{min-width:106px !important;}
  .cont_botones .botones-btn{width:38px !important;height:38px !important;flex-basis:38px !important;}
  .header-buscador,.search-container{width:40px !important;height:40px !important;}
  .mobile-menu-toggle{width:42px !important;height:42px !important;flex-basis:42px !important;}
}