/* ================== ESTILOS GENERALES ================== */


/* BODY */

* {
    box-sizing: border-box;
}
/* ===========================
   ESTILOS GENERALES BODY
   Inspirado en diseño profesional
=========================== */

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', Arial, sans-serif; /* Tipografía moderna */
    background-color: #fafafa;               /* Fondo suave y claro */
    color: #000000;                             /* Texto más oscuro y elegante */
    line-height: 1.6;                        /* Mejora lectura */
    font-size: 16px;                         /* Tamaño base legible */
    -webkit-font-smoothing: antialiased;     /* Suaviza tipografía */
    text-rendering: optimizeLegibility;      /* Mejor lectura en textos */
}


/* Links */
a {
    text-decoration: none;
    color: #0d47a1;       /* Azul elegante */
    transition: color 0.2s ease;
}

a:hover {
    color: #00eeffff;       /* Color de acento */
}

/* Contenedores centrados */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Encabezados */
h1, h2, h3, h4, h5 {
    color: #1b1b1b; /* Color más profundo */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

/* Párrafos */
p {
    margin-bottom: 1.2em;
    font-size: 1rem;
    color: #333;    
}


/* INICIO BLOQUE NUEVO HEADER 22/12/2025 */
/* =========================
   HEADER - SOLO LOGO
========================= */
header {
    background-color: #d41616;
    color: #ffffff;
    padding: 10px 10px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center; /* Centra el logo horizontalmente */
    align-items: center;
    box-shadow: 0 4px 10px rgba(245, 111, 22, 0.3);
    font-family: Arial, sans-serif;
    border-bottom: 1px solid #e0e0e0;

}


/* =========================
   SECCIÓN ACCIONES - MENÚ, LOGIN, CARRITO
========================= */
#acciones-principales {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: #d41616;
    padding: 10px 100px;
    color: #fff;
    position: sticky; /* se queda fija al hacer scroll */
    top: 200px;           /* AJUSTA según la altura de tu logo */
    left: 0;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 999;
}






/* CONTENEDOR */

.header-contenedor {
    position: sticky;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    max-width: 1400px;   /* ancho máximo */
    width: 100%;
    margin: 0 auto;      /* centra el contenido */
    padding: 15px 20px;     /* espacio lateral en pantallas pequeñas */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Logo a la izquierda, menú centrado */
    font-size: 22px;
    font-weight: bold;
    z-index: 1000;
    gap: 20px;
    flex-wrap: nowrap; 
}

/* =========================
   INICIO DE ADAPTACIÓN  HEADER A MÓVIL 15/1/2026
========================= */
@media (max-width: 768px) {

    /* HEADER SOLO LOGO */
    header {
        padding: 8px 10px;
        height: auto;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    /* CONTENEDOR DEL HEADER */
    .header-contenedor {
        flex-direction: column;
        height: auto;
        padding: 10px 15px;
        justify-content: center;
        align-items: center;
        gap:5px;
        font-size: 18px;
    }

    /* SECCIÓN ACCIONES (MENÚ / CARRITO / LOGIN) */
    #acciones-principales {
        padding: 8px 10px;     /* ❌ quita el padding enorme */
        flex-direction: column;
        gap: 10px;
        top: 0;                /* 🔴 MUY IMPORTANTE */
        position: sticky;
    }

}
/* =========================
   FIN DE ADAPTACIÓN  HEADER A MÓVIL 15/1/2026
========================= */


/* ===== MÓVIL - BOTÓN REGISTRAR + ICONO USUARIO ===== */
@media (max-width: 768px) {

  /* Contenedor flotante para botón registrar + icono usuario */
  .bottom-actions {
      position: fixed;
      bottom: 60px; /* sube los botones sobre el menú inferior */
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-around; /* espacio entre botón y icono */
      align-items: center;
      padding: 5px 10px;
      z-index: 9999;
      background-color: transparent; /* no tapa nada visual */
  }


  /* Botón registrar */
  .btn-registrar {
      width: auto;
      padding: 12px 20px; /* agranda el botón para móvil */
      margin: 0;          /* quitar margen superior extra */
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      color: #fff;
      background-color: #28a745;
      border: 1px solid #28a745;
      text-align: center;
      transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .btn-registrar:hover {
      background-color: #218838;
      transform: scale(1.05);
  }

  /* Icono de usuario */
  .usuario-icono {
      position: static;  
      font-size: 28px;
      color: #ffffff;
      cursor: pointer;
      transition: transform 0.2s ease, color 0.2s ease;
  }

  .usuario-icono:hover {
      color: #ff0000;
      transform: scale(1.1);
  }
}

/* Menú */
#acciones-principales nav.menu {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 30px;
     overflow-x: auto;     /* 🔥 permite scroll si no cabe */
    scrollbar-width: thin; /* Firefox */
    width: 100%;
    align-items: center;
    justify-content: center;
}



/* Links del menú */
nav.menu a {
    color: #fff;        /* blanco para que se vea sobre header rojo */
    text-decoration: none;
    font-weight: 600;
    padding: 10px 15px;
    transition: color 0.2s ease, border-bottom 0.2s ease;
}

nav.menu a:hover {
    color: #ffeb3b;
    border-bottom: 2px solid #ffeb3b;
}

/* =====INICIO MENÚ PRINCIPAL - MÓVIL COMPACTO ===== */
@media (max-width: 768px) {

  #acciones-principales nav.menu {
      display: flex;
      flex-wrap: nowrap;
      white-space: nowrap;
      top: 75px;
      right: 0;
      gap: 20px;                /* menos espacio entre links */
      overflow-x: auto;        
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      width: 100%;
      align-items: center;
      justify-content: flex-start;
      position: fixed;
      bottom: 0;              
      left: 0;
      background-color: #d41616;
      padding: 5px 2px;        /* menos alto que antes */
      z-index: 998;
      height: 40px;            /* altura compacta */
  }

  #acciones-principales nav.menu a {
      color: #ffffff;
      text-decoration: none;
      font-size: 13px;          /* un poco más pequeño */
      padding: 4px 8px;         /* menos padding para reducir altura */
      flex: 0 0 auto;
      white-space: nowrap;
      border-radius: 4px;
  }

  #acciones-principales nav.menu a:hover {
      background-color: #ff4d4d;
      color: #ffffff;
  }
}

/* =====FIN MENÚ PRINCIPAL - MÓVIL COMPACTO ===== */


/* ACCIONES HEADER FUERA DEL MENÚ */
.acciones-header-principales {
    position: fixed;       /* Fijo en la pantalla */
    top: 10px;             /* Ajusta según tu header/logo */
    right: 20px;           /* Separado del borde derecho */
    display: flex;             /* Alinea los botones en fila */
    justify-content: flex-end;
    align-items: center;
    gap: 15px;      /* Espacio entre ellos */
    padding: 10px 20px;
    z-index: 10000;        /* Para que esté sobre todo */
  
}


.acciones-header-principales .usuario-icono {
    font-size: 20px;
    cursor: pointer;
    
}

.acciones-header-principales .header-usuario a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    
}



/* Saludo de usuario / login */
.header-usuario {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 16px;
    
}

.header-usuario a.btn-iniciar-sesion,
.header-usuario a.btn-cerrar-sesion {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}


/* ===========================
  INICIO ACCIONES HEADER -  15/1/2026
=========================== */
@media (max-width: 768px) {

    /* Contenedor principal de botones */
    .acciones-header-principales {
        top: 35px;                 /* más cerca de la parte superior */
        right: 30px;              /* menos separación del borde */
        padding: 5px 10px;        /* más compacto */
        gap: 15px;                /* reduce espacio entre botones */
        font-size: 20px;          /* tamaño un poco menor */
    }

    /* Icono de usuario más grande para tocar con el dedo */
    .acciones-header-principales .usuario-icono {
        font-size: 24px;
    }

    /* Links de login / cerrar sesión más pequeños y compactos */
    .acciones-header-principales .header-usuario a {
        font-size: 20px;
        padding: 4px 6px;
    }

    /* Ajuste del contenedor interno del saludo */
    .header-usuario {
        flex-direction: column;    /* apilar si no hay espacio */
        align-items: flex-end;     /* alinear a la derecha */
        gap: 5px;                  /* menos espacio vertical */
        font-size: 14px;
    }

    /* Botones iniciar/cerrar sesión más táctiles */
    .header-usuario a.btn-iniciar-sesion,
    .header-usuario a.btn-cerrar-sesion {
        padding: 4px 6px;
        font-size: 14px;
    }
}


/* ===========================
  FIN ACCIONES HEADER - MÓVIL 15/1/2026
=========================== */


/* Carrito flotante */
#carrito-flotante {
    display: none;
    position: fixed;
    top: 50px;
    right: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(235, 18, 18, 0.2);
    width: 320px;
    padding: 15px;
    color: black;
    z-index: 1000;
}



#carrito-flotante h3 {
    margin-top: 0;
    color: #00ffff;
}

#items-carrito {
    max-height: 400px;
    overflow-y: auto;
}

.item-carrito {
    margin-bottom: 10px;
}

.item-carrito span {
    display: inline-block;
    margin-bottom: 3px;
}


.item-carrito a.btn-mas {
    background: #4caf50;
}

.item-carrito a.btn-menos {
    background: #f44336;
}

.item-carrito span[id^="cant-"] {
    margin: 0 8px;
}

/* Links de ver carrito completo / seguir comprando */
#carrito-flotante a {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
}

#carrito-flotante a:first-of-type {
    background: #e23c30ff;
    color: #fff;
}

#carrito-flotante a:last-of-type {
    background: #00b300;
    color: #fff;
}

/* FIN BLOQUE NUEVO HEADER 22/12/2025 */



/* Contenedor del logo */
.logo-abajo {
    position: fixed;
    top: 70px;                 /* debajo de la barra superior */
    left: 0;
    width: 100%;
    height: 120px;
    background: white;
    display: flex;
    justify-content: center;   /* 👈 centra horizontal */
    align-items: center;       /* centra vertical */
    margin: 30px auto;         /* centra el contenedor */
    z-index: 999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}



/* Imagen logo */
.logo-abajo img {
    width: 200px;        /* ancho del logo */
    height: auto;        /* mantiene proporción */
    object-fit: contain;
    max-width: 100%; 

    /* Efecto hover */
    transition: transform 0.3s ease;
}




.logo-abajo img:hover {
    transform: scale(1.2);  /* aumenta 20% al pasar el mouse */
}


/* Si quieres también puedes darle estilo al <p> debajo del logo */
.logo p {
    text-align: center;
    color: white;
    font-size: 15px;
    font-weight: bold;
    margin-top: 5px;
}

/* =========================
  INICIO DE  LOGO ABAJO – ADAPTACIÓN MÓVIL
========================= */
@media (max-width: 768px) {

    /* Contenedor del logo */
    .logo-abajo {
        position: relative;
        top: 30px;          /* más cerca del header */
        height: auto;       /* más bajo */
        margin: 10px auto;     /* elimina espacios raros */
        padding: 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    }

    /* Imagen del logo */
    .logo-abajo img {
        width: 150px;       /* logo más pequeño */
        max-width: 100%;
        transition: none;  /* quita animación hover */
        height: auto;
    }

    /* Quitar zoom hover en móvil */
    .logo-abajo img:hover {
        transform: none;
    }

    /* Texto debajo del logo (si existe) */
    .logo p {
        font-size: 13px;
        margin-top: 3px;
    }

}

/* =========================
  FIN DE LOGO ABAJO – ADAPTACIÓN MÓVIL
========================= */



/* NUEVO 17/12/2025 */
* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}



/* HOVER */
nav.menu a:hover {
    color: #ffeb3b; /* Cambié a rojo fuerte, más visible */
    border-bottom: 2px solid #ff0000;
    transform: translateY(-2px);
}




/* ================== SCROLL HORIZONTAL DEL MENÚ ================== */
.menu {
    scrollbar-width: thin;
}

.menu::-webkit-scrollbar {
    height: 6px;
}

.menu::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.4);
    border-radius: 3px;
}

.menu::-webkit-scrollbar-track {
    background: transparent;
}

/* Evita que los links se compriman */
.menu a {
    flex: 0 0 auto;
}

/* Separación correcta del contenido */
main {
    margin-top: 90px;
}



/* ================== SLIDER ================== */
.slider {
    width: calc(100% - 600px);
    margin: 0 auto;
    border-radius: 0;
    overflow: hidden;
    height: 380px;
}

.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slides img {
    display: none;
}

/* Imagen activa */
.slides img.active {
    display: block;
}

/* Botones */
.slider-buttons {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 15px;
    pointer-events: none; /* evita errores de clic */
}

.slider-buttons span {
    background: transparent;
    color: #ffffff;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
    pointer-events: auto;
}




/* ================== SECCIONES ================== */
section {
    padding: 50px 20px;
    margin: 20px auto;
    max-width: 1200px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(21, 20, 20, 0.1);
}

/* Títulos dentro de secciones */
section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #ac1906;
}



/* ================== PRODUCTOS ================== */

/* Contenedores */
.contenedor-productos,
.contenedor-ofertas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    justify-items: center; /* centra los productos */
}

/* Tarjetas de producto/oferta */
.producto,
.oferta {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    padding: 15px;
    max-width: 250px;
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* Hover */
.producto:hover,
.oferta:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
    .contenedor-productos,
    .contenedor-ofertas {
        gap: 15px;
        padding: 15px;
    }

    .producto,
    .oferta {
        max-width: 220px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .contenedor-productos,
    .contenedor-ofertas {
        gap: 10px;
        padding: 10px;
    }

    .producto,
    .oferta {
        max-width: 180px;
        padding: 10px;
    }
}





/* ================== IMÁGENES DE PRODUCTOS/OFERTAS ================== */
.producto img,
.oferta img {
    width: 100%;
    max-width: 250px;
    height: 250px;
    border-radius: 10px;
    object-fit: cover;  /* mantiene proporción y recorta lo necesario */
    transition: transform 0.3s ease;
}

/* Varias imágenes pequeñas dentro del producto */
.imagenes-producto-multiple {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

.imagenes-producto-multiple img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
    .producto img,
    .oferta img {
        max-width: 220px;
        height: 220px;
    }

    .imagenes-producto-multiple img {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .producto img,
    .oferta img {
        max-width: 180px;
        height: 180px;
    }

    .imagenes-producto-multiple img {
        width: 50px;
        height: 50px;
    }
}




/* ================== TEXTO Y BOTONES ================== */

/* Títulos de productos/ofertas */
.producto h3,
.oferta h3 {
    margin: 10px 0 5px;
    font-size: 1.2em;
    color: #c40e0e;
}

/* Descripción */
.producto p,
.oferta p {
    margin: 5px 0;
    font-size: 0.95em;
    color: #555;
}

/* Precio */
.precio {
    color: #d32f2f;
    font-weight: bold;
    margin: 10px 0;
}

/* Hover en botones/links */
.producto a:hover,
.oferta a:hover {
    background: #c40e0e;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
    .producto h3,
    .oferta h3 {
        font-size: 1.1em;
    }

    .producto p,
    .oferta p {
        font-size: 0.9em;
    }

    .precio {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .producto h3,
    .oferta h3 {
        font-size: 1em;
    }

    .producto p,
    .oferta p {
        font-size: 0.85em;
    }

    .precio {
        font-size: 0.95em;
    }
}



/* ================== BUSCADOR ================== */
.buscador {
    text-align: center;
    margin: 30px 0;
}

.buscador input {
    padding: 10px;
    width: 100%;
    max-width: 250px; /* nunca más ancho que 250px */
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* importante para responsive */
}

/* ================== FOOTER ================== */
footer {
    background-color: #928c8cff;
    color: white;
    text-align: center;
    padding: 40px 20px;
}

footer a {
    color: #ffeb3b;
    text-decoration: none;
    font-weight: 600;
}

footer a:hover {
    text-decoration: underline;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
    .buscador {
        margin: 20px 0;
    }

    footer {
        padding: 30px 15px;
    }
}

@media (max-width: 480px) {
    .buscador {
        margin: 15px 0;
    }

    footer {
        padding: 20px 10px;
    }
}



/* ================== DEPARTAMENTOS ================== */
.departamentos-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.departamentos-scroll {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px;
    scrollbar-width: none; /* Oculta la barra en Firefox */
}

.departamentos-scroll::-webkit-scrollbar {
    display: none; /* Oculta la barra en Chrome */
}

/* Botones de departamentos */
.dep-link {
    flex: 0 0 auto;
    background-color: #ff0000;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
}

.dep-link:hover {
    background-color: #cc0000;
    transform: scale(1.05);
}

/* ================== RESPONSIVE ================== */
@media (max-width: 768px) {
    .dep-link {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .dep-link {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}




.scroll-btn {
    background-color: #ff0000;
    color: white;
    border: none;
    border-radius: 50%;
    width: 8vw; /* ancho relativo a la pantalla */
    max-width: 50px; /* no crece demasiado en pantallas grandes */
    height: 8vw;
    max-height: 50px;
    font-size: 4vw; /* relativo al ancho de la pantalla */
    max-font-size: 18px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s;
    z-index: 2;
}

.scroll-btn:hover {
    background-color: #cc0000;
}

.scroll-btn.left {
    left: 1%;
}

.scroll-btn.right {
    right: 1%;
}

/* Tablets */
@media (max-width: 768px) {
    .scroll-btn {
        width: 12vw;
        height: 12vw;
        font-size: 5vw;
    }
}

/* Móviles */
@media (max-width: 480px) {
    .scroll-btn {
        width: 14vw;
        height: 14vw;
        font-size: 6vw;
    }

    .scroll-btn.left {
        left: 2%;
    }

    .scroll-btn.right {
        right: 2%;
    }
}



/* ==========================
   PAGINACION
========================== */
.paginacion {
    text-align: center;
    margin: 30px 0;
}

.paginacion .pagina {
    display: inline-block;
    background-color: #f0f0f0;
    color: #333;
    padding: 10px 15px;
    margin: 3px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px; /* base para desktop */
}

.paginacion .pagina:hover {
    background-color: #ff0000;
    color: white;
}

.paginacion .activa {
    background-color: #ff0000;
    color: white;
    font-weight: bold;
}

/* ==========================
   PRECIOS
========================== */
.precio-antes {
    color: #777;
    font-size: 14px;
}

.precio-oferta {
    color: #c40e0e;
    font-size: 18px;
    font-weight: bold;
}

/* ==========================
   BOTON DE REGISTRO
========================== */
.boton-registro {
    background-color: #ff0000;
    color: white;
    border: 3px solid #000000;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: all 0.3s;
}

.boton-registro:hover {
    background-color: #cc0000; /* cambio sutil para resaltar */
    border-color: #000;
}

/* ==========================
   MEDIA QUERIES TABLET
========================== */
@media (max-width: 768px) {
    .paginacion .pagina {
        padding: 2vw 4vw;
        font-size: 3vw;
        margin: 0.5vw;
    }

    .precio-antes {
        font-size: 3vw;
    }

    .precio-oferta {
        font-size: 3.5vw;
    }

    .boton-registro {
        padding: 3vw 5vw;
        font-size: 3.5vw;
        box-shadow: 0 0.5vw 0.7vw rgba(0,0,0,0.25);
    }
}

/* ==========================
   MEDIA QUERIES MOVIL
========================== */
@media (max-width: 480px) {
    .paginacion .pagina {
        padding: 3vw 5vw;
        font-size: 4vw;
        margin: 1vw;
    }

    .precio-antes {
        font-size: 4vw;
    }

    .precio-oferta {
        font-size: 4.5vw;
    }

    .boton-registro {
        padding: 4vw 6vw;
        font-size: 4.5vw;
        box-shadow: 0 0.6vw 0.8vw rgba(0,0,0,0.3);
    }
}





/* MODALES */

.modal {
    display: none; /* 🔹 Oculto por defecto */
    position: fixed; /* 🔹 Siempre fijo en la pantalla */
    z-index: 1000; /* 🔹 Encima de todo el contenido */
    left: 0;
    top: 0;
    width: 100%; /* 🔹 Ocupa toda la pantalla */
    height: 100%;
    overflow: auto; /* 🔹 Habilita scroll si el contenido es más grande que la pantalla */
    background-color: rgba(0,0,0,0.5); /* 🔹 Fondo semi-transparente */
    transition: all 0.3s ease; /* 🔹 Transición suave al mostrar/ocultar */
}


.modal-contenido {
    background-color: #ffffff; /* 🔹 Fondo blanco para el contenido */
    margin: 10% auto; /* 🔹 Centrado vertical y horizontal */
    padding: 20px;
    border-radius: 10px; /* 🔹 Bordes redondeados */
    width: 90%; /* 🔹 Ocupa la mayor parte de la pantalla */
    max-width: 450px; /* 🔹 Tamaño máximo para desktop */
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 🔹 Sombra para resaltar */
}



/* Tablet */
@media (max-width: 768px) {
    .modal-contenido {
        width: 95%;
        margin: 5% auto;
        padding: 15px;
    }
}

/* Móvil */
@media (max-width: 480px) {
    .modal-contenido {
        width: 95%;
        margin: 3% auto;
        padding: 10px;
        border-radius: 8px;
    }
}




/* ------------------------------ */
/* CERRAR MODAL (X) */
/* ------------------------------ */
.modal .cerrar,
.modal .cerrarLogin {
    position: absolute;       /* 🔹 Posiciona el botón relativo al modal */
    top: 10px;                /* 🔹 Distancia desde la parte superior del modal */
    right: 15px;              /* 🔹 Distancia desde la parte derecha */
    color: #A9A9A9;           /* 🔹 Color gris por defecto */
    font-size: 28px;           /* 🔹 Tamaño del icono de cierre */
    font-weight: bold;         /* 🔹 Negrita para destacar */
    cursor: pointer;           /* 🔹 Cambia el cursor a mano al pasar */
    transition: color 0.2s ease; /* 🔹 Transición suave al cambiar color */
}

.modal .cerrar:hover,
.modal .cerrarLogin:hover {
    color: #ff0000; /* 🔹 Color rojo al pasar el mouse, indicando acción */
}


/* Tablet */
@media (max-width: 768px) {
    .modal .cerrar,
    .modal .cerrarLogin {
        font-size: 24px;
        top: 8px;
        right: 12px;
    }
}

/* Móvil */
@media (max-width: 480px) {
    .modal .cerrar,
    .modal .cerrarLogin {
        font-size: 22px;
        top: 6px;
        right: 10px;
    }
}


/* ------------------------------ */
/* FORMULARIOS */
/* ------------------------------ */
.modal form {
    display: flex;                /* 🔹 Usa flexbox para ordenar los campos */
    flex-direction: column;       /* 🔹 Coloca los elementos en columna */
}

.modal form .form-group {
    margin-bottom: 15px;          /* 🔹 Espacio entre cada grupo de campos */
}

.modal form label {
    margin-bottom: 5px;           /* 🔹 Separación del input */
    font-weight: bold;            /* 🔹 Destaca el texto del label */
}

.modal form input[type="text"],
.modal form input[type="email"],
.modal form input[type="password"] {
    padding: 8px 10px;            /* 🔹 Espacio interno del campo */
    font-size: 16px;              /* 🔹 Tamaño de fuente legible */
    border: 1px solid #ccc;       /* 🔹 Borde gris claro */
    border-radius: 10px;          /* 🔹 Bordes redondeados */
    width: 100%;                  /* 🔹 Ocupa todo el ancho del contenedor */
    box-sizing: border-box;       /* 🔹 Incluye padding en el ancho total */
}

.modal form input[type="submit"],
.modal .btn-registrar {
    background-color: #ff0000;    /* 🔹 Botón rojo */
    color: #ffffff;               /* 🔹 Texto blanco */
    border: none;                 /* 🔹 Sin borde */
    padding: 10px 15px;           /* 🔹 Espaciado interno */
    font-size: 16px;              /* 🔹 Tamaño de texto */
    border-radius: 10px;          /* 🔹 Bordes redondeados */
    cursor: pointer;              /* 🔹 Cursor tipo mano */
    transition: background-color 0.2s ease; /* 🔹 Transición suave al hover */
}

.modal form input[type="submit"]:hover,
.modal .btn-registrar:hover {
    background-color: #A9A9A9;    /* 🔹 Cambio de color al pasar el mouse */
}




/* ------------------------------ */
/* BOTÓN PRINCIPAL PARA ABRIR LOGIN */
/* ------------------------------ */
.btn {
    background-color: #27ae60;          /* 🔹 Botón verde */
    color: #ffffff;                     /* 🔹 Texto blanco */
    border: none;                       /* 🔹 Sin borde */
    padding: 10px 15px;                 /* 🔹 Espaciado interno */
    font-size: 16px;                    /* 🔹 Tamaño de texto */
    border-radius: 50px;                /* 🔹 Bordes redondeados tipo “píldora” */
    cursor: pointer;                    /* 🔹 Cursor tipo mano */
    transition: background-color 0.2s ease; /* 🔹 Transición suave al hover */
}

.btn:hover {
    background-color: #1e8449;          /* 🔹 Cambio de color al pasar el mouse */
}

/* ------------------------------ */
/* RESPONSIVE MODAL */
/* ------------------------------ */
@media (max-width: 500px) {
    .modal-contenido {
        margin: 20% auto;               /* 🔹 Centrado vertical reducido */
        width: 95%;                      /* 🔹 Ocupa casi todo el ancho de móviles */
    }
}

/* ------------------------------ */
/* PARTE SUPERIOR PARA ARRASTRAR MODAL */
/* ------------------------------ */
#modalDraggable {
    cursor: move;                        /* 🔹 Indica que se puede arrastrar */
}



/* ------------------------------ */
/* BOTÓN CERRAR MODAL */
/* ------------------------------ */
.cerrar {
    position: absolute;      /* 🔹 Posicionamiento absoluto dentro del modal */
    top: 10px;               /* 🔹 Distancia desde la parte superior */
    right: 15px;             /* 🔹 Distancia desde la parte derecha */
    font-size: 24px;         /* 🔹 Tamaño del botón */
    cursor: pointer;         /* 🔹 Cursor tipo mano */
    color: #555;             /* 🔹 Color gris oscuro */
    float: right;            /* 🔹 No es necesario en absoluto, pero se mantiene si lo necesitas */
}

.cerrar:hover {
    color: red;              /* 🔹 Cambia a rojo al pasar el mouse */
}

/* ------------------------------ */
/* FORM-GROUPS: LABELS E INPUTS */
/* ------------------------------ */
.form-group {
    margin-bottom: 10px;     /* 🔹 Separación entre campos */
}

.form-group label {
    font-weight: bold;       /* 🔹 Negrita para destacar */
    margin-bottom: 4px;      /* 🔹 Separación del input */
    display: block;          /* 🔹 Se comporta como bloque */
}

.form-group input {
    width: 100%;             /* 🔹 Ocupa todo el ancho */
    padding: 8px;            /* 🔹 Espacio interno */
    border-radius: 4px;      /* 🔹 Bordes redondeados */
    border: 1px solid #bbb;  /* 🔹 Borde gris claro */
}

/* Inputs específicos de tipo texto y email (redundante, se puede unificar) */
input[type="text"],
input[type="email"] {
    border-radius: 5px;      /* 🔹 Bordes redondeados ligeramente mayores */
    border: 1px solid #aaa;  /* 🔹 Borde gris */
    padding: 8px;            /* 🔹 Espacio interno */
    width: 100%;             /* 🔹 Ocupa todo el ancho */
}

/* ------------------------------ */
/* BOTONES */
/* ------------------------------ */
.btn-modal {
    background: #007bff;     /* 🔹 Azul */
    color: white;            /* 🔹 Texto blanco */
    padding: 10px 15px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.btn-guardar {
    width: 100%;             /* 🔹 Ocupa todo el ancho del contenedor */
    background: #ff0000;     /* 🔹 Rojo */
    color: white;            /* 🔹 Texto blanco */
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}




/* ------------------------------ */
/* ICONO USUARIO */
/* ------------------------------ */
.usuario-icono {
    position: static;       /* 🔹 Lo saca del modo absoluto, ahora fluye en el layout */
    font-size: 30px;        /* 🔹 Tamaño del icono */
    cursor: pointer;        /* 🔹 Cursor tipo mano */
    color: white;           /* 🔹 Color inicial */
}

.usuario-icono:hover {
    color: #ff0000;         /* 🔹 Cambia a rojo al pasar el cursor */
}

/* ===== BOTÓN REGISTRAR + ICONO USUARIO MÓVIL ===== */
@media (max-width: 768px) {
    /* Contenedor inferior para registrar + usuario */
    .bottom-actions {
        position: fixed;
        bottom: 10px;               /* distancia desde la parte inferior */
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-around; /* distribuir los elementos */
        align-items: center;
        padding: 10px;
        background-color: #d41616;  /* igual que barra inferior */
        z-index: 9999;
    }

    /* Botón registrar */
    .btn-registrar {
        width: auto;                /* que se ajuste al contenido */
        padding: 12px 20px;
        border-radius: 6px;
        font-size: 14px;
    }

    /* Icono de usuario */
    .usuario-icono {
        position: static;           /* ya dentro del contenedor */
        font-size: 28px;
        color: #ffffff;
        cursor: pointer;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .usuario-icono:hover {
        color: #ff0000;
        transform: scale(1.1);
    }
}


/* ------------------------------ */
/* PANEL LOGIN */
/* ------------------------------ */
.panel-login {
    position: fixed;        /* 🔹 Fija el panel sobre toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(f,f,f,f.65); /* 🔹 Fondo semi-transparente */
    display: none;          /* 🔹 Oculto por defecto */
    justify-content: center; /* 🔹 Centrado horizontal */
    align-items: center;     /* 🔹 Centrado vertical */
    z-index: 9999;           /* 🔹 Por encima de todo */
}

.login-contenido {
    background: white;      /* 🔹 Fondo blanco */
    padding: 25px;          /* 🔹 Espaciado interno */
    width: 350px;           /* 🔹 Ancho fijo */
    border-radius: 10px;    /* 🔹 Bordes redondeados */
    text-align: center;     /* 🔹 Centrado de texto */
    position: relative;     /* 🔹 Para poder posicionar elementos hijos */
    animation: aparecer 0.3s ease; /* 🔹 Animación al aparecer */
}

.login-contenido input {
    width: 100%;            /* 🔹 Ocupa todo el ancho */
    padding: 10px;          /* 🔹 Espaciado interno */
    margin-bottom: 12px;    /* 🔹 Separación entre campos */
    border: 1px solid #df1c1cb7; /* 🔹 Borde rojo semi-transparente */
    border-radius: 6px;     /* 🔹 Bordes redondeados */
}

/* ------------------------------ */
/* BOTONES LOGIN */
/* ------------------------------ */
.btn-iniciar {
    background: #ff0000;    /* 🔹 Rojo */
    color: white;
    padding: 10px;
    width: 100%;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 10px;    /* 🔹 Separación con otros elementos */
}

.btn-iniciar:hover {
    background: #ff2d2d;    /* 🔹 Rojo más claro al pasar cursor */
}

.btn-img {
    margin-right: 8px;   /* separación icono-texto */
}


.btn-registrar {
    background: #333;        /* 🔹 Gris oscuro */
    color: white;
    padding: 10px;
    width: 100%;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.btn-registrar:hover {
    background: #444;        /* 🔹 Gris más claro al pasar cursor */
}

/* ------------------------------ */
/* OLVIDÉ CONTRASEÑA */
/* ------------------------------ */
.olvide {
    display: block;
    margin-bottom: 15px;
    font-size: 13px;
}

/* ------------------------------ */
/* BOTÓN CERRAR LOGIN */
/* ------------------------------ */
.cerrar {
    top: 8px;               /* 🔹 Ajustado para login */
    right: 12px;
    float: right;           /* 🔹 Se mantiene por compatibilidad */
    font-size: 22px;        /* 🔹 Tamaño más pequeño que otros modales */
    cursor: pointer;
    color: #555;
}




/* ------------------------------ */
/* CONTENEDOR DE USUARIO EN HEADER */
/* ------------------------------ */
.header-usuario {
    display: flex;            /* 🔹 Usamos flexbox para alinear elementos en fila */
    align-items: center;      /* 🔹 Centrado vertical */
    gap: 15px;                /* 🔹 Separación entre saludo y botones */
    font-size: 16px;          /* 🔹 Tamaño de fuente base */
    color: #fff;           /* 🔹 Texto blanco */
    margin-left: 20px;        /* 🔹 Separación desde el borde izquierdo */
}

/* Saludo del usuario */
.header-usuario .saludo-usuario {
    font-weight: bold;        /* 🔹 Destaca el nombre del usuario */
}

/* ------------------------------ */
/* BOTÓN CERRAR SESIÓN */
/* ------------------------------ */
.header-usuario .btn-cerrar-sesion {
    background-color: #ff0000;        /* 🔹 Rojo */
    color: #ffffff;                   /* 🔹 Texto blanco */
    border: none;                     /* 🔹 Sin borde */
    padding: 6px 12px;                /* 🔹 Espaciado interno */
    border-radius: 5px;               /* 🔹 Bordes redondeados */
    cursor: pointer;                  /* 🔹 Cursor tipo mano */
    text-decoration: none;            /* 🔹 Sin subrayado */
    transition: background-color 0.2s ease; /* 🔹 Transición suave */
}

.header-usuario .btn-cerrar-sesion:hover {
    background-color: #25e9e9;      /* 🔹 Cambia a azul al pasar cursor */
}



/* ------------------------------ */
/* BOTÓN INICIAR SESIÓN - PRO */
/* ------------------------------ */
.header-usuario .btn-iniciar-sesion {
    background: linear-gradient(135deg, #ff0000, #ff0000); /* Gradiente */
    color: #ffffff;
    padding: 8px 9px;              /* 🔥 Ajustado para altura consistente */
    border-radius: 90px;             /* 🔥 Forma redondeada */
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Iluminación */
    box-shadow:
        0 6px 15px rgba(205, 241, 231, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.3);

    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.header-usuario .btn-iniciar-sesion:hover {
    background: #25e9e9;      /* 🔹 Cambia a azul al pasar cursor */
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 8px 20px rgba(255, 0, 0, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.4);

}


/* ===== BOTÓN INICIAR SESIÓN MÓVIL ===== */
@media (max-width: 768px) {
    .header-usuario .btn-iniciar-sesion {
        padding: 6px 19px;         /* más ancho para tocar con el dedo */
        font-size: 14px;           /* tamaño legible en pantalla pequeña */
        border-radius: 50px;       /* mantiene redondez elegante */
        position: static;           /* no flotante */
        z-index: 10000;            /* encima de todo */
        display: flex;             /* mantener flex interno */
        align-items: center;
        justify-content: center;
    }

    .header-usuario .btn-iniciar-sesion:hover {
        transform: translateY(0) scale(1.05); /* hover suave en móvil */
    }
}




/* ------------------------------ */
/* BOTÓN CARRITO - PRO */
/* ------------------------------ */
.btn-carrito {
    background: linear-gradient(135deg, #ff0000, #ff0000); /* Gradiente */
    color: #ffffff !important;   /* 🔹 Fuerza el color blanco */
    padding: 12px 15px;              /* Más largo */
    border-radius: 90px;             /* Más elegante */
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
     border: none;       /* quita cualquier borde */
    outline: none;      /* quita el borde que aparece al hacer click o focus */

    /* Iluminación */
    box-shadow:
        0 6px 15px rgba(205, 241, 231, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.3);*/

    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}



/* Hover */
.btn-carrito:hover {
    background: linear-gradient(135deg, #25e9e9, #00a0a0);
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 8px 20px rgba(255, 0, 0, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.4);
}


.btn-carrito:focus,
.btn-carrito:active {
    outline: none;      /* asegura que no aparezca al click o tab */
}

/* ===== BOTÓN CARRITO MÓVIL ===== */
@media (max-width: 768px) {
    .btn-carrito {
        padding: 8px 13px;        /* más estrecho para móvil */
        font-size: 10px;           /* tamaño más legible en pantalla pequeña */
        border-radius: 50px;       /* mantiene el estilo redondeado */
        position: static;           /* no flotante */
        right: 10px;               /* distancia desde la derecha */
        z-index: 10000;            /* encima de todo */
    }

    .btn-carrito:hover {
        transform: translateY(0) scale(1.05); /* hover suave para móvil */
    }
}

/* ------------------------------ */
/* CONTENEDOR DE BOTONES DERECHA */
/* ------------------------------ */
.acciones-header {
    display: flex;
    align-items: center;
    gap: 20px;        /* 🔹 Separación entre botones */
    margin-left: 20px;
}




/* Contenedor adicional para acciones en header */
.header-acciones {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;        /* 🔹 No se rompen los botones a otra línea */
    white-space: nowrap;      /* 🔹 Mantiene el contenido en una sola línea */
}



/* ------------------------------ */
/* BOTÓN GENERAL */
/* ------------------------------ */
.btn {
    padding: 12px 20px;          /* 🔹 Espaciado interno */
    margin: 15px 10px 0 0;       /* 🔹 Separación entre botones */
    border-radius: 6px;           /* 🔹 Bordes redondeados */
    border: 1px solid #333;       /* 🔹 Borde gris oscuro */
    background-color: #111;       /* 🔹 Fondo negro */
    color: #fff;                  /* 🔹 Texto blanco */
    cursor: pointer;              /* 🔹 Cursor tipo mano */
    font-size: 14px;              /* 🔹 Tamaño de texto */
}

.btn:hover {
    background-color: #333;       /* 🔹 Fondo más claro al pasar cursor */
}

/* ------------------------------ */
/* BOTÓN INICIAR SESIÓN / GUARDAR */
/* ------------------------------ */
.btn-guardar {
    width: 100%;                  /* 🔹 Ocupa todo el ancho del contenedor */
    padding: 12px;
    margin-top: 15px;
    border-radius: 6px;
    border: 1px solid #1a73e8;   /* 🔹 Borde azul */
    background-color: #1a73e8;   /* 🔹 Fondo azul */
    color: #fff;
    cursor: pointer;
}

.btn-guardar:hover {
    background-color: #0c5fd8;   /* 🔹 Azul más oscuro al pasar cursor */
}

/* ------------------------------ */
/* BOTÓN REGISTRAR */
/* ------------------------------ */
.btn-registrar {
    width: 100%;
    padding: 12px;
    margin-top: 12px;
    border-radius: 6px;
    border: 1px solid #28a745;   /* 🔹 Borde verde */
    background-color: #28a745;   /* 🔹 Fondo verde */
    color: #fff;
    cursor: pointer;
}

.btn-registrar:hover {
    background-color: #218838;   /* 🔹 Verde más oscuro al pasar cursor */
}


/* ------------------------------ */
/* CONTENEDOR ACCIONES HEADER */
/* ------------------------------ */
.acciones-header {
    display: flex;
    align-items: center;
    gap: 15px;                   /* 🔹 Separación entre botones */
    position: relative;
    margin-right: 50px;
}

/* ------------------------------ */
/* BOTÓN CARRITO */
/* ------------------------------ */
.acciones-header button {
    background: #fd0707ff;         /* 🔹 Fondo rojo */
    color: white;                /* 🔹 Texto blanco */
    border: 1px solid #28a792ff;   /* 🔹 Borde azul */
    padding: 10px 15px;
    border-radius: 15px;          /* 🔹 Bordes redondeados */
    cursor: pointer;             /* 🔹 Cursor tipo mano */
    transition: all 0.3s ease;
}




/* ------------------------------ */
/* ICONO USUARIO */
/* ------------------------------ */
.usuario-icono {
    width: 0px;                     /* 🔹 Ancho del icono */
    height: 0px;                    /* 🔹 Alto del icono */
    background: #ff0000;           /* 🔹 Fondo rojo */
    color: #ffffff;                /* 🔹 Color del contenido (icono) */
    border-radius: 50%;              /* 🔹 Forma circular */
    display: flex;                   /* 🔹 Flexbox para centrar contenido */
    align-items: center;             /* 🔹 Centrado vertical */
    justify-content: center;         /* 🔹 Centrado horizontal */
    cursor: pointer;                 /* 🔹 Cursor tipo mano */
    font-size: 200px;                 /* 🔹 Tamaño del icono */
}

.usuario-icono:hover {
    background: #25c2e9ff;                /* 🔹 Fondo gris oscuro al pasar cursor */
}

/* ------------------------------ */
/* HOVER BOTÓN CARRITO EN HEADER */
/* ------------------------------ */
.acciones-header button {
    transition: all 0.3s ease;      /* 🔹 Transición suave para hover */
}

.acciones-header button:hover {
    background-color: #cc0000;      /* 🔹 Rojo más oscuro */
    transform: scale(1.05);         /* 🔹 Pequeño zoom al pasar cursor */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* 🔹 Sombra para resaltar */
}

/* ------------------------------ */
/* MODAL RECUPERAR CONTRASEÑA */
/* ------------------------------ */
#modalRecuperar .modal-contenido {
    width: 400px;                    /* 🔹 Ancho fijo */
    max-width: 90%;                  /* 🔹 Máximo 90% en pantallas pequeñas */
    padding: 20px;                   /* 🔹 Espaciado interno */
}

#modalRecuperar .cerrarRecuperar {
    float: right;                    /* 🔹 Ubicado en la esquina superior derecha */
    cursor: pointer;                 /* 🔹 Cursor tipo mano */
    font-size: 22px;                 /* 🔹 Tamaño del botón cerrar */
}


/* NUEVO 18/12/2025 */
.solo-movil {
  display: none;
}
@media (max-width: 768px) {
  .solo-movil {
    display: inline-block;
  }
}




/* ===== DESKTOP ===== */
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 12px 0;
}



.menu-hamburguesa {
  display: none;
  
}


/* ===== MÓVIL INICIO ===== */

@media (max-width: 768px) {

  .menu-hamburguesa {
    display: none;
    position: fixed;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    padding: 10px;
    top: 10px;
    right: 15px;
    z-index: 10000;
    pointer-events: auto;
    
  }

  
  .menu {
    display: none;              /* oculto por defecto */
    position: fixed;            /* mejor que absolute */
    bottom: 0;                  /* barra inferior */
    left: 0;
    width: 100%;
    background-color: #d41616;
    flex-direction: row;
    justify-content: space-evenly;     /* más espacio entre los links */
    align-items: center;
    padding: 15px 0;
    z-index: 9999;
    pointer-events: auto;
  }


  .menu a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;          /* enlaces más grandes */
    padding: 10px 15px;       /* más espacio dentro de cada enlace */
    flex: 1;                  /* que cada enlace ocupe espacio disponible */
    white-space: nowrap;
    text-align: center;       /* centrado */
    
  }

 /* Mostrar menú al activar */
   .menu.activo {
    display: flex;              /* se muestra al activar */
  }
 
  
  
nav.menu {
    display: none;          /* oculto por defecto */
    flex-direction: row; /* horizontal en móvil, más natural */
    position: fixed;            /* fijo en la pantalla */
    top: 50px;              /* debajo de la hamburguesa */
    left: 0;
    width: 100%;
    background-color: #d41616;
   z-index: 1000;
    padding: 15px 0;
  } 


}



/* TIENDAS FOOTER */

/* Ocultar teléfono en PC */
@media (min-width: 769px) {
    .solo-movil {
        display: none ;
    }
}

/* Mostrar teléfono en móvil */
@media (max-width: 768px) {
    .solo-movil {
        display: inline-block ;
    }
}


/* MAPAS TIENDAS FOOTER */
@media (max-width: 768px) {
    .solo-movil {
        display:inline-block;
    }
}


/*   BOTONES */
.btn-iniciar-sesion img.btn-img {
    width: 130px;      /* Ajusta el ancho que quieras */
    height: auto;      /* Mantiene proporción */
    cursor: pointer;   /* Manito al pasar mouse */
    transition: transform 0.2s ease, opacity 0.2s ease;
    display: block;
    background: transparent;

}

.btn-iniciar-sesion img.btn-img:hover {
    transform: scale(1.05);  /* Efecto pequeño al pasar mouse */
    opacity: 0.9;            /* Efecto de sombreado */
}

.btn-iniciar-sesion {
    background: none;
    border: none;
    padding: 0;
}



/* Responsive */
@media (max-width: 768px) {
    .btn-iniciar-sesion img.btn-img {
        width: 90px;
    }
}

@media (max-width: 480px) {
    .btn-iniciar-sesion img.btn-img {
        width: 70px;
    }
}


/* ==============================
   SUBCATEGORÍAS – ESTILO PROFESIONAL
   23/12/2025
============================== */


.bloque-departamento {
    position: relative;
    display: none; /* OCULTOS POR DEFECTO */
    margin: 10px 18px;
    text-align: center;
}


.bloque-departamento:not(.activo) {
    display: none;
}

.bloque-departamento.activo {
    display: block;
}



/* TÍTULO DEL DEPARTAMENTO */
.titulo-departamento {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.titulo-departamento:hover {
    color: #d40000;
}

/* Flecha */
.flecha-subcategorias {
    font-size: 12px;
    transition: transform 0.3s ease;
}

/* Flecha girada cuando está abierto */
.bloque-departamento.abierto .flecha-subcategorias {
    transform: rotate(180deg);
}

/* LISTA DE SUBCATEGORÍAS */
.subcategorias {
    display: none;
    margin-top: 8px;
    padding: 0;
    list-style: none;
    text-align: center;
}



.subcategorias.abiertas { 
    display: block; /* se muestran cuando se les agrega esta clase */ }


/* ITEM */
.subcategorias li {
    padding: 6px 0;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.25s ease;
}

/* Hover elegante */
.subcategorias li:hover {
    color: #d40000;
    transform: translateX(3px);
}

/* Subcategoría seleccionada */
.subcategoria-activa {
    color: #d40000;
    font-weight: 600;
}



.subcategorias li.subcategoria-todas {
    font-weight: bold;
    color: #000;
}




/* Mostrar todos al inicio */
.bloque-departamento.inicio {
   /*display: inline-block; */
    display: block;
    vertical-align: top; 
    width: 100%; /* ajusta según tu diseño */
}


/* NUEVO 2/1/2026 */

/* ==========================
   Mensaje de producto agregado - FORZADO
========================== */
.mensaje-exito {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: rgba(23, 252, 61, 0.9) !important; /* rojo */
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    z-index: 9999 !important;

    display: none;  /* ancho solo del contenido */
    width: auto !important;            /* ignora anchos globales */
    max-width: 90% !important;         /* evita salirse de la pantalla */
    text-align: center !important;
    box-sizing: content-box !important; /* ❌ content-box para que padding no agrande el cuadro */
}


.cantidad-control {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0;
}

.cantidad-control button {
    width: 30px;
    height: 30px;
    background: #d41616;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

.cantidad-control input {
    width: 40px;
    text-align: center;
    margin: 0 5px;
    border: 1px solid #ccc;
    font-weight: bold;
}

.btn-agregar {
    width: 100%;
    padding: 8px;
    background: #0a8f3c;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 6px;
}

.btn-agregar:hover {
    background: #0caa47;
}


/* NUEVO 5/1/2026 */
/* Mensaje simple flotante */
.mensaje-carrito {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(238, 34, 51, 0.9) !important; /* rojo */
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 9999;
    display: none; /* inicialmente oculto */
    font-family: Arial, sans-serif;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}



/* ============================= */
/* Mensaje individual de producto - 6/1/2026 */
/* ============================= */
.mensaje-producto {
    display: none;              /* Oculto por defecto */
    font-size: 14px;            /* Tamaño de letra */
    color: #ffffff;             /* Color del texto */
    background-color: #ec4f44ff;  /* Fondo verde para éxito */
    padding: 5px 10px;          /* Espaciado interno */
    border-radius: 6px;         /* Bordes redondeados */
    margin-top: 5px;            /* Separación del botón */
    text-align: center;         /* Centrado del texto */
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Opcional: sombra suave */
    transition: all 0.3s ease;  /* Suaviza fadeIn/fadeOut */
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}






/* ESTILOS PARA LOS ICONOS DE WHATSAPP FACEBOOK TELEFONO Y CORREO DE LA SECCION DE CONTACTO Y TIENDAS*/

.social-btn {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 8px 12px;
     border-radius: 6px; 
     text-decoration: none; 
     color: white; 
     font-weight: bold; 
     transition: transform 0.3s ease, box-shadow 0.3s ease; }


     

/* WhatsApp */
.social-btn.whatsapp {
    background-color: #25D366;
}

.social-btn.whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Facebook */
.social-btn.facebook {
    background-color: #1877F2;
}

/* Facebook */
.social-btn.facebook {
    background-color: #1877F2;
}

.social-btn.facebook:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Tik tok */
.social-btn.tiktok {
    background-color: #000000; /* color TikTok */
    color: #ffffff;
}

/* Tik tok */
.social-btn.tiktok:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}


/* Iconos */
.social-btn i {
    font-size: 18px;
}

.social-btn.correo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    background-color: #d32f2f; /* rojo estilo correo */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.social-btn.correo:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background-color: #b71c1c; /* rojo más oscuro al pasar mouse */
}

.social-btn.correo i {
    font-size: 18px;
}

/* ===== BOTÓN TELÉFONO SOLO MÓVIL ===== */
.social-btn.telefono {
    display: none;  /* ❌ Oculto por defecto en PC */
}

/* ===== BOTONES CONTACTO ARRIBA DERECHA ===== */
.contacto {
    position: fixed;     /* Fijos al hacer scroll */
    top: 15px;          /* altura respecto al header */
   /* right: 1700px;        /* pegados a la derecha */
    left: 200px;  /* distancia desde el borde izquierdo */
    flex-direction: row;  /* Asegura fila */
    display: flex;             /* Horizontal */
    gap: 10px;
    z-index: 9999;
}

html {
    scroll-behavior: smooth;
}




/* ===== REDES SOCIALES FLOTANTES EN MÓVIL LADO IZQUIERDO ===== */
@media (max-width: 768px) {
    .contacto {
        position: fixed;
        top: 250px;          /* altura desde arriba, debajo del header/logo */
        left: 10px;          /* pegados al borde izquierdo */
        flex-direction: column; /* vertical */
        gap: 10px;
        z-index: 9999;
        background: transparent;
    }

    .social-btn {
        padding: 10px;
        border-radius: 50%;     /* botones redondos */
        width: 45px;
        height: 45px;
        justify-content: center;
        font-size: 0;           /* oculta texto */
    }

    .social-btn i {
        font-size: 20px;
        margin: 0;
    }

    /* botón teléfono visible solo en móvil */
    .social-btn.telefono {
        display: inline-flex;
        background-color: #2e7d32;
    }

    .social-btn.telefono:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
}


/* Estilos generales */
#inicio {
    text-align: center;
    margin-top: 50px;
}

/* Animación para el título */
#inicio h2 {
    font-size: 2.5em;
    color: #2c3e50;
    animation: moverLetras 3s infinite alternate;
}

/* Animación para el párrafo */
#inicio p {
    font-size: 1.2em;
    color: #34495e;
    animation: moverLetras 4s infinite alternate;
}

/* Definición de la animación */
@keyframes moverLetras {
    from {
        transform: translateX(-20px);
    }
    to {
        transform: translateX(20px);
    }
}


/* NUEVO AGREGADO EL 14/1/2026 */
.miniaturas {
    display: flex;
    flex-wrap: wrap;       /* Permite que las filas bajen si hay más de 4 */
    justify-content: flex-start; /* O center si quieres centrar la fila */
    gap: 10px;             /* Espacio entre cuadros */
}


.miniatura-cuadro {
    width: calc(25% - 10px); /* 25% del contenedor - gap */
    box-sizing: border-box;   /* Para que el padding/border no rompa el ancho */
}




.miniatura-cuadro img.miniatura {
    width: 100%;        /* Ocupa todo el cuadro */
    height: auto;       /* Mantiene proporción */
    object-fit: cover;  /* Para que se recorte si es necesario */
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: transform 0.2s, border-color 0.2s;
}



.miniatura-cuadro img.miniatura:hover {
    transform: scale(1.1);
    border-color: #e71313;
}


.miniatura {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}




/* ESTILOS PARA MI ZOOM */

.imagen-producto {
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

/* imagen normal */
.imagen-producto img.imagen-principal {
    width: 100%;
    display: block;
    transition: opacity 0.2s ease;
    user-select: none;
    pointer-events: none;
}



/* Botón "Volver al catálogo" */
.btn-volver {
    display: inline-block;
    background-color: #f51710; /* rojo intenso */
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
    margin-bottom: 15px;
}

.btn-volver:hover {
    background-color: #d10f0c; /* rojo más oscuro al pasar el mouse */
    transform: scale(1.05);
}

/* Estilo responsive para móviles */
@media (max-width: 768px) {
    .btn-volver {
        font-size: 14px;
        padding: 8px 14px;
        margin-bottom: 12px;
    }
}


/* ============================================================
   🔵 SUBCATEGORIAS HORIZONTALES — 24/1/2026
   🔹 Adaptación de estilo para scroll horizontal
=============================================================== */


/* Subcategorías horizontales y visibles */
.subcategorias {
    display: flex;          /* Poner los li en fila horizontal */
    flex-wrap: nowrap;        /* Si hay muchas*/
    gap: 10px;              /* Espacio entre subcategorías */
    margin: 10px 0;         /* Margen arriba y abajo */
    padding: 0;             /* Quitar padding por defecto */
    list-style: none;       /* Quitar los bullets */
}

.subcategorias li {
    background-color: #f0f0f0;   /* Color de fondo de la subcategoría */
    border-radius: 20px;          /* Bordes redondeados */
    padding: 5px 12px;            /* Espaciado interno */
    cursor: pointer;              /* Mano al pasar el mouse */
    transition: all 0.2s;
}

.subcategorias li a {
    text-decoration: none;        /* Quitar subrayado */
    color: #333;                  /* Color de texto */
    font-size: 0.9rem;
}

.subcategorias li:hover {
    background-color: #e71313;    /* Cambio de color al pasar el mouse */
}

.subcategorias li a:hover {
    color: #fff;                  /* Texto blanco al pasar el mouse */
}

/* Subcategoria "todas" destacada */
.subcategoria-todas {
    font-weight: bold;
    background-color: #d1d1d1;
}


.subcategorias-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden; /* 🔹 evita scroll nativo vertical */
    margin: 10px 0 20px 0;
}

.subcategorias-scroll {
    display: flex; /* 🔹 horizontal */
    gap: 10px;
    overflow-x: auto; /* 🔹 permite scroll horizontal */
    scroll-behavior: smooth; /* 🔹 animación suave */
    padding: 5px 0;
    -webkit-overflow-scrolling: touch; /* mejora scroll en móviles */
}



.subcategoria {
    flex: 0 0 auto; /* 🔹 evita que se encogen las subcategorías */
    padding: 8px 16px;
    background-color: #f0f0f0;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap; /* 🔹 evita que el texto se parta */
    transition: background-color 0.3s;
}

.subcategoria:hover {
    background-color: #d9d9d9; /* 🔹 efecto hover 24/1/2026 */
}

/* Flechas de navegación 24/1/2026 */
.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    padding: 5px 10px;
    border-radius: 50%;
}

.flecha.izquierda {
    left: 0;
}

.flecha.derecha {
    right: 0;
}

/* 🔹 Subcategorías ocultas por defecto */
.subcategorias-container {
    display: none;
}

/* 🔹 Cuando esté activa */
.subcategorias-container.activa {
    display: flex;
}



/* ================================
   🔹 STICKER OFERTA — 24/1/2026
================================ */




/* Sticker de oferta redondo y pequeño */
.sticker-oferta {
    position: absolute;
    top: 8px;      /* Ajusta la distancia desde arriba */
    left: 8px;     /* Ajusta la distancia desde la izquierda */
    width: 25px;   /* Tamaño del sticker */
    height: 50px;  /* Igual que el ancho para que sea cuadrado */
    border-radius: 50%; /* Lo hace redondo */
    z-index: 10;
    pointer-events: none; /* Para que no bloquee clics */
    object-fit: cover;    /* Que la imagen no se deforme */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Opcional: sombra ligera */
}

.sticker-oferta {
    position: absolute !important;    /* Permite posicionar el sticker encima de la imagen del producto. Funciona junto con position: relative en el contenedor padre */
    top: 1px !important;   /* Distancia desde la parte superior del contenedor, 1px evita que quede pegado totalmente a la esquina */
    left: 1px !important;    /* Distancia desde el lado izquierdo del contenedor */
    width: 60px !important;     /* Ancho fijo del sticker. Entre más grande, más tapa la prenda */
    height: 60px !important;   /* Alto fijo del sticker */
    border-radius: 10% !important;   /* Redondea un poco las esquinas del sticker, 10% = ligeramente redondeado */
    object-fit: contain !important; /* 🔥 importante */    /* Hace que la imagen del sticker se vea completa. No la recorta y mantiene la proporción */
    z-index: 5 !important;  /* Controla la capa del sticker. Un valor medio evita que tape otros elementos importantes */
}



/* ==========================
   BOTONES Y ENLACES
   ========================== */
.btn-mostrar-mas, .btn-volver, .btn-volver-inicio {
    display: inline-block;
    padding: 8px 16px;
    margin: 10px 0;
    background-color: #e71313;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.btn-mostrar-mas:hover,
.btn-volver:hover,
.btn-volver-inicio:hover {
    background-color: #b0100f;
}



/* Sticker NUEVO PRODUCTO */
.sticker-nuevo {

                    /* Posiciona el sticker encima de la imagen */
    position: absolute !important;

    /* Separación desde la parte superior */
    top: 5px !important;

    /* Separación desde el lado derecho */
    right: 5px !important;

    /* Tamaño del sticker */
    width: 50% !important;
    height: 50px !important;

    /* Mantiene la imagen completa sin recortarla */
    object-fit: contain !important;

    /* Bordes ligeramente redondeados */
    border-radius: 10% !important;

    /* Control de capa (no tapa miniaturas ni botones) */
    z-index: 6 !important;

    /* Evita que bloquee clics en la imagen */
    pointer-events: none !important;
}
/* =========================
   🚫 PRODUCTO SIN EXISTENCIA
========================= */

.sin-existencia {

    /* Posición absoluta sobre la imagen */
    position: absolute !important;

    /* Centrado exacto */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* Fondo oscuro translúcido */
    background: rgba(0, 0, 0, 0.8) !important;

    /* Texto */
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;

    /* Espaciado */
    padding: 10px 16px !important;
    border-radius: 6px !important;

    /* Siempre arriba */
    z-index: 30 !important;

    /* No bloquea clics */
    pointer-events: none !important;
}

/* CONTENEDOR GENERAL DE PRODUCTOS */
.contenedor-productos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 👈 4 productos por fila */
    gap: 30px;
}

.producto {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.imagen-producto {
    width: 100%;
    height: 395px;              /* 👈 AQUÍ crece el cuadro */
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
    cursor: zoom-in;
}

/* =========================================
   FILTRO DE PRECIO MEJORADO
========================================= */
.filtro-precio {
    margin: 20px auto;                   /* centrado horizontal y separación */
    max-width: 1200px;                   /* ancho máximo */
    display: flex;
    justify-content: center;             /* centrado de los elementos */
    align-items: center;
    gap: 20px;                           /* espacio entre elementos */
    padding: 15px 25px;                  /* más grande */
    background: #f0f8ff;                 /* fondo suave más llamativo */
    border-radius: 15px;                 /* esquinas más redondeadas */
    box-shadow: 0 6px 15px rgba(0,0,0,0.1); /* sombra más visible */
    font-family: Arial, sans-serif;
    transform: scale(1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* animación hover */
}

.filtro-precio:hover {
    transform: scale(1.05);              /* aumenta un poco al pasar el mouse */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.filtro-precio select {
    padding: 12px 18px;                  /* más grande */
    border-radius: 10px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 16px;                      /* tamaño de letra más grande */
    cursor: pointer;
    transition: all 0.3s ease;            /* animación hover */
}

.filtro-precio select:hover {
    border-color: #007bff;
    transform: scale(1.05);
}

.filtro-precio select:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 8px rgba(0,123,255,0.3);
}

.filtro-precio button {
    padding: 12px 20px;                  /* botón más grande */
    border-radius: 10px;
    border: none;
    background: #007bff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;           /* animación hover */
}

.filtro-precio button:hover {
    background: #0056b3;
    transform: scale(1.1);               /* agranda el botón al pasar mouse */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


/* 🔹 Contenedor centrado y con ancho fijo */
.buscador-centrado {
    width: 100%;
    display: flex;
    justify-content: center;  /* centra horizontalmente */
    margin: 20px 0;
}

/* 🔹 Formulario con ancho fijo y que no se estire */
.buscador-centrado form {
    display: flex;
    width: 400px;       /* ancho fijo */
    max-width: 90%;     /* se ajusta en pantallas pequeñas */
}

/* 🔹 Input del buscador */
.buscador-centrado input[type="text"] {
    flex: 1;
    min-width: 0;        /* evita que se estire demasiado */
    padding: 10px 15px;
    border: 2px solid #f51710;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box; /* importante para que padding no aumente ancho */
}

/* 🔹 Botón */
.buscador-centrado button {
    padding: 10px 20px;
    border: none;
    background-color: #f51710;
    color: white;
    font-weight: bold;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

.buscador-centrado button:hover {
    background-color: #d40f0f;
}


/* ESTILOS PARA TRAER LA IMAGEN AL FRENTE
/* estado normal 
.imagen-producto img.imagen-principal {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease;
    user-select: none; /* no selecciona texto al mover 
}

/* 🔥 CUANDO SE ACTIVA EL ZOOM 
.imagen-producto.zoom-activo img.imagen-principal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80vw;
    max-width: 900px;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 9999;
    cursor: grab;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* Zoom activo 
img.zoom-activo {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80vw;
    max-width: 900px;
    transform: translate(-50%, -50%);
    z-index: 9999;
    cursor: grab;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    background: #fff;
}
*/

/* ================== Fin Estilos Generales ================== */


/* =========================
   AJUSTES FINALES SOLO MOVIL
   No afectan desktop
========================= */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    header {
        padding: 6px 0;
        min-height: 54px;
    }

    .logo-abajo {
        margin: 16px auto 10px;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    .logo-abajo img {
        width: 150px;
        max-width: 62vw;
    }

    .acciones-header-principales {
        position: static;
        width: 100%;
        padding: 10px 12px 6px;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .header-usuario {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: auto;
    }

    .header-usuario a.btn-iniciar-sesion,
    .header-usuario a.btn-cerrar-sesion,
    .btn-carrito {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 10px 14px;
        font-size: 15px;
        border-radius: 999px;
    }

    .acciones-header-principales .usuario-icono {
        font-size: 28px;
        margin-left: 0;
    }

    #acciones-principales {
        position: static;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    #acciones-principales nav.menu,
    .menu,
    nav.menu {
        position: sticky;
        top: 0;
        bottom: auto;
        left: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        width: 100%;
        height: auto;
        padding: 10px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        background: #d41616;
        z-index: 900;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    #acciones-principales nav.menu a,
    .menu a,
    nav.menu a {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 8px;
    }

    main {
        margin-top: 18px;
        padding-bottom: 24px;
    }

    .slider {
        width: calc(100% - 24px);
        max-width: none;
        height: 190px;
        margin: 12px auto 18px;
        border-radius: 18px;
    }

    .slides img {
        height: 190px;
    }

    .slider-buttons {
        padding: 0 8px;
    }

    section {
        width: calc(100% - 24px);
        margin: 16px auto;
        padding: 24px 14px;
    }

    .contacto {
        position: fixed;
        top: auto;
        bottom: 16px;
        left: 10px;
        gap: 8px;
        z-index: 950;
    }

    .social-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    }

    .social-btn i {
        font-size: 18px;
    }

    #carrito-flotante {
        top: 120px !important;
        right: 10px !important;
        left: 10px;
        width: auto !important;
        max-width: calc(100vw - 20px);
    }
}

@media (max-width: 480px) {
    .logo-abajo img {
        max-width: 56vw;
    }

    .header-usuario a.btn-iniciar-sesion,
    .header-usuario a.btn-cerrar-sesion,
    .btn-carrito {
        font-size: 14px;
        padding: 9px 12px;
    }

    .acciones-header-principales .usuario-icono {
        font-size: 24px;
    }

    .slider,
    .slides img {
        height: 160px;
    }

    section {
        width: calc(100% - 16px);
        padding: 20px 12px;
    }
}

/* =========================
   CARDS DE PRODUCTO SOLO MOVIL
   Inspirado en grilla de 2 columnas compacta
========================= */
@media (max-width: 768px) {
    .contenedor-productos,
    .contenedor-ofertas {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 10px 12px !important;
        align-items: start;
    }

    .producto,
    .oferta {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 14px !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    }

    .imagen-producto {
        height: 170px !important;
        margin-bottom: 10px !important;
        border-radius: 12px;
    }

    .producto img,
    .oferta img,
    .imagen-producto img.imagen-principal {
        width: 100% !important;
        max-width: none !important;
        height: 170px !important;
        object-fit: cover !important;
        border-radius: 12px;
    }

    .miniaturas,
    .imagenes-producto-multiple {
        display: none !important;
    }

    .producto h3,
    .oferta h3 {
        font-size: 14px !important;
        line-height: 1.25 !important;
        margin: 0 0 4px !important;
        min-height: 34px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .producto p,
    .oferta p {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin: 0 0 5px !important;
    }

    .producto label,
    .oferta label {
        display: block;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .producto select,
    .oferta select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 8px 9px;
        font-size: 12px;
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .producto br,
    .oferta br {
        display: none;
    }

    .precio-total,
    .precio {
        margin: 6px 0 !important;
        font-size: 13px !important;
    }

    .precio strong,
    .precio-total strong {
        font-size: 18px;
        line-height: 1.1;
    }

    .precio del {
        display: block;
        font-size: 12px;
        color: #777;
        margin-bottom: 2px;
    }

    .boton-carrito {
        width: 100%;
        min-height: 42px;
        padding: 9px 10px;
        font-size: 13px;
        border-radius: 10px;
        margin-top: 6px;
    }

    .mensaje-producto {
        min-height: 18px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .contenedor-productos,
    .contenedor-ofertas {
        gap: 10px !important;
        padding: 8px !important;
    }

    .producto,
    .oferta {
        padding: 8px !important;
        border-radius: 12px !important;
    }

    .imagen-producto,
    .producto img,
    .oferta img,
    .imagen-producto img.imagen-principal {
        height: 145px !important;
    }

    .producto h3,
    .oferta h3 {
        font-size: 13px !important;
        min-height: 32px;
    }

    .producto p,
    .oferta p,
    .producto label,
    .oferta label,
    .producto select,
    .oferta select {
        font-size: 11px !important;
    }

    .precio strong,
    .precio-total strong {
        font-size: 16px;
    }

    .boton-carrito {
        font-size: 12px;
        min-height: 40px;
    }
}

@media (max-width: 768px) {
    .sticker-nuevo {
        top: 6px !important;
        right: 6px !important;
        width: 34% !important;
        height: 28px !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    .sticker-nuevo {
        width: 38% !important;
        height: 24px !important;
    }
}

@media (max-width: 768px) {
    .imagen-producto .sticker-nuevo,
    .producto .sticker-nuevo {
        top: 4px !important;
        right: 4px !important;
        width: 72px !important;
        max-width: 42% !important;
        height: 22px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {
    .imagen-producto .sticker-nuevo,
    .producto .sticker-nuevo {
        width: 64px !important;
        max-width: 44% !important;
        height: 20px !important;
    }
}

/* =========================
   GALERIA DE IMAGENES SOLO MOVIL
   Desktop conserva su zoom actual
========================= */
@media (max-width: 768px) {
    .imagen-producto {
        cursor: pointer;
        background-image: none !important;
    }

    .imagen-producto.zoom-activo,
    .producto.galeria-movil-activa .imagen-producto,
    .oferta.galeria-movil-activa .imagen-producto {
        background-image: none !important;
    }

    .producto .imagen-principal,
    .oferta .imagen-principal {
        opacity: 1 !important;
    }

    .producto .miniaturas,
    .oferta .miniaturas {
        display: none !important;
        margin-top: 8px;
        padding-top: 8px;
        gap: 8px;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .producto.galeria-movil-activa .miniaturas,
    .oferta.galeria-movil-activa .miniaturas {
        display: flex !important;
    }

    .producto .miniatura-cuadro,
    .oferta .miniatura-cuadro {
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e5e5e5;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .producto .miniatura,
    .oferta .miniatura {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

@media (max-width: 480px) {
    .producto .miniatura-cuadro,
    .oferta .miniatura-cuadro {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 768px) {
    .producto.galeria-movil-activa .imagen-producto,
    .oferta.galeria-movil-activa .imagen-producto {
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 6px;
    }

    .producto.galeria-movil-activa .imagen-principal,
    .oferta.galeria-movil-activa .imagen-principal {
        height: 170px !important;
        display: block;
    }
}

@media (max-width: 480px) {
    .producto.galeria-movil-activa .imagen-principal,
    .oferta.galeria-movil-activa .imagen-principal {
        height: 145px !important;
    }
}

@media all {
    body.mobile-image-viewer-open {
        overflow: hidden;
    }

    .mobile-image-viewer {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 30000;
    }

    .mobile-image-viewer.is-open {
        display: flex;
    }

    /* Fondo más elegante */
    .mobile-image-viewer__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.65);
        backdrop-filter: blur(3px);
    }

    /* Caja del modal */
    .mobile-image-viewer__dialog {
        position: relative;
        width: min(92vw, 420px);
        max-height: 88vh;
        background: #f6f6f6;
        border-radius: 22px;
        padding: 18px 14px 16px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
        overflow: hidden;
        z-index: 1;
    }

    /* Botón cerrar moderno */
    .mobile-image-viewer__close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 999px;
        background: #eeeeee;
        color: #222;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 3px 8px rgba(0,0,0,0.18);
        transition: all .2s ease;
    }

    .mobile-image-viewer__close:hover {
        background:#d41616;
        color:#ffffff;
    }

    /* Marco de imagen */
    .mobile-image-viewer__frame {
        background: #ffffff;
        border: 1px solid #e8e8e8;
        border-radius: 18px;
        padding: 14px;
        margin-bottom: 14px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }

    /* pa pc */
    @media (min-width: 769px) {
    .mobile-image-viewer__dialog {
        width: 700px;
        border-radius: 26px;
        padding: 24px 20px 18px;
    }
    
    .mobile-image-viewer__frame {
        overflow: hidden;
        cursor: zoom-in;
    }

    .mobile-image-viewer__main.is-zoomable {
        transform: scale(1.8);
        transform-origin: center center;
        will-change: transform;
    }

    .mobile-image-viewer__frame {
        border-radius: 20px;
        padding: 18px;
    }

    .mobile-image-viewer__main {
        height: 520px;
    }

    .mobile-image-viewer__thumb {
        width: 96px;
        height: 96px;
    }
}
/* fin pc */



    .mobile-image-viewer__main {
        display: block;
        width: 100%;
        height: min(52vh, 380px);
        object-fit: contain;
        margin: 0 auto;
    }

    /* Miniaturas */
    .mobile-image-viewer__thumbs {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 2px 2px 6px;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-image-viewer__thumb {
        flex: 0 0 auto;
        width: 84px;
        height: 84px;
        border: 1px solid #e5e5e5;
        border-radius: 16px;
        background: #ffffff;
        padding: 4px;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        transition: transform .15s ease;
    }

    .mobile-image-viewer__thumb:hover{
        transform:scale(1.05);
    }

    .mobile-image-viewer__thumb.is-active {
        border-color: #d41616;
        box-shadow: 0 0 0 2px rgba(212, 22, 22, 0.14);
    }

    .mobile-image-viewer__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }
}

@media (max-width: 480px) {
    .mobile-image-viewer {
        padding: 10px;
    }

    .mobile-image-viewer__dialog {
        width: 100%;
        border-radius: 18px;
        padding: 16px 12px 14px;
    }

    .mobile-image-viewer__frame {
        border-radius: 16px;
        padding: 12px;
    }

    .mobile-image-viewer__main {
        height: min(46vh, 320px);
    }

    .mobile-image-viewer__thumb {
        width: 72px;
        height: 72px;
        border-radius: 14px;
    }
}
.subcategorias li {
    cursor: pointer;
    overflow: hidden;
}

.subcategorias li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 14px;
    color: inherit;
    text-decoration: none;
}

/* Mobile sticky login and cart */
@media (max-width: 768px) {
    .acciones-header-principales {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        background: #e11111 !important;
        box-shadow: 0 8px 18px rgba(215, 19, 19, 0.18) !important;
        z-index: 20 !important;
        transform: none !important;
        margin: 0 !important;
    }

    .acciones-header-principales .header-usuario {
        display: flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        gap: 8px !important;
        flex-direction: row !important;
    }

    .acciones-header-principales .btn-iniciar-sesion,
    .acciones-header-principales .btn-carrito {
    min-height: 54px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    border: 2px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
    white-space: nowrap !important;
        width: auto !important;
        max-width: none !important;
    width: auto !important;
    max-width: none !important;
}


    .acciones-header-principales .btn-iniciar-sesion {
        background: linear-gradient(135deg, #ff1e1e 0%, #d10000 100%) !important;
        color: #fff !important;
        text-decoration: none !important;
    }

    .acciones-header-principales .btn-carrito {
        background: linear-gradient(135deg, #ff1e1e 0%, #d10000 100%) !important;
        color: #fff !important;
    }
    .acciones-header-principales .usuario-icono {
        display: none !important;
    }

    .acciones-header-principales .saludo-usuario {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 54px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #ff1e1e 0%, #d10000 100%) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
    }

    .acciones-header-principales .btn-cerrar-sesion {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 54px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        background: #222 !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
    }

    .logo-abajo {
        margin-top: 10px !important;
        top: 0 !important;
    }

    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
}

@media (max-width: 430px) {
    .acciones-header-principales {
        padding: 6px 8px !important;
        gap: 6px !important;
    }

    .acciones-header-principales .btn-iniciar-sesion,
    .acciones-header-principales .btn-carrito {
        min-height: 44px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
    }

    .acciones-header-principales .btn-iniciar-sesion span {
        display: inline-block !important;
    }
}

/* Mobile top bar for login and cart */
@media (max-width: 768px) {
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 92px !important;
        padding: 0 !important;
        display: block !important;
        background: #e11111 !important;
        z-index: 10030 !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;
    }

    .header-contenedor {
        height: 92px !important;
        padding: 0 !important;
        display: block !important;
    }

    .acciones-header-principales {
        position: fixed !important;
        top: 18px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        z-index: 10040 !important;
    }

    .acciones-header-principales .header-usuario {
        display: flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        flex-direction: row !important;
    }

    .acciones-header-principales .btn-iniciar-sesion,
    .acciones-header-principales .btn-carrito {
        min-height: 54px !important;
        border-radius: 999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        border: 2px solid rgba(255,255,255,0.18) !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
        white-space: nowrap !important;
        width: auto !important;
        max-width: none !important;
    }

    .acciones-header-principales .btn-iniciar-sesion {
        flex: 0 1 auto !important;
        background: linear-gradient(135deg, #f35050 0%, #d10000 100%) !important;
        color: #fff !important;
        text-decoration: none !important;
    }

    .acciones-header-principales .btn-carrito {
        flex: 0 1 auto !important;
        background: linear-gradient(135deg, #f65656 0%, #d10000 100%) !important;
        color: #fff !important;
    }    .acciones-header-principales .usuario-icono,
    .acciones-header-principales .saludo-usuario {
        display: none !important;
    }

    .acciones-header-principales .btn-cerrar-sesion {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 54px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #f65656 0%, #d10000 100%) !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
    }

    .logo-abajo {
        margin-top: 110px !important;
        position: relative !important;
        top: 0 !important;
        z-index: 1 !important;
    }

    #acciones-principales {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    main {
        margin-top: 0 !important;
    }
}

@media (max-width: 430px) {
    .acciones-header-principales {
        top: 20px !important;
        left: 8px !important;
        right: 8px !important;
        gap: 8px !important;
    }

    .acciones-header-principales .btn-iniciar-sesion,
    .acciones-header-principales .btn-carrito {
        min-height: 48px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 768px) {
    .sticker-oferta {
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        top: 6px !important;
        left: 6px !important;
        right: auto !important;
        bottom: auto !important;
        border-radius: 10% !important;
    }

    .producto img.sticker-oferta,
    .oferta img.sticker-oferta,
    .imagen-producto img.sticker-oferta {
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        object-fit: contain !important;
        border-radius: 10% !important;
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        right: auto !important;
    }
}

@media (max-width: 480px) {
    .sticker-oferta {
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        top: 5px !important;
        left: 5px !important;
        right: auto !important;
    }

    .producto img.sticker-oferta,
    .oferta img.sticker-oferta,
    .imagen-producto img.sticker-oferta {
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        object-fit: contain !important;
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        right: auto !important;
    }
}

.correo-movil,
.correo-pc {
    display: none !important;
}

@media (max-width: 768px) {
    .correo-movil {
        display: inline-flex !important;
    }
}

@media (min-width: 769px) {
    .correo-pc {
        display: inline-flex !important;
    }
}