* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}
html {
    scroll-behavior: smooth;
}
:root {
  --brand-speed: 120s;
}
.brands-carousel {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0;
  position: relative;
}

.brands-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: scrollBrands var(--brand-speed) linear infinite;
}

.brands-track img {
  height: 80px; /* más presencia */
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(180, 0, 255, 0.55));
}

.brands-track img:hover {
  transform: scale(1.15);
  opacity: 1;
}

/* Animación infinita */
@keyframes scrollBrands {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --brand-speed: 80s;
  }

  .brands-track img {
    height: 38px;
  }
}
.destacados{
    padding: 50px 20px;
    max-width: 1200px;
    margin: auto;
}
.destacados h2 {
    text-align: center;
    font-size: 30px;
    color: #ffd700;
    text-shadow: 0 0 20px #ffd700;
    margin: 60px 0 30px;
}
.carousel {
    overflow: hidden;
    position: relative;
}

.destacados .productos {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scroll-carousel 25s linear infinite;
}

/* pausa al pasar el mouse */
.carousel:hover .productos {
    animation-play-state: paused;
}

@keyframes scroll-carousel {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* cards dentro del carrusel */
.destacados .card {
    min-width: 280px;
    max-width: 280px;
}

/* MOBILE */
@media (max-width: 768px) {
    .destacados .card {
        min-width: 240px;
        max-width: 240px;
    }
}

.pulsante2 {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 251, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgb(255, 251, 0);
    }
    100% {
        box-shadow: 0 0 10px rgba(116, 235, 122, 0.582);
    }
}
.wsp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 65px;
    height: 65px;
    background: #25d366;
    color: #fff;
    font-size: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 0 20px #25d366;
    text-decoration: none;
}
@media (max-width: 768px) {

    .wsp-float {
    width: 50px;     /* mismo tamaño que los de la izquierda */
    height: 50px;
    right: 35px;     /* misma distancia del borde que search-bubble usa con left */
    bottom: 28px !important; 

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

}

  body {
    background:
        linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
        url("../img/fondo\ 2.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
}

/* =========================
HEADER PRINCIPAL
========================= */

.main-header{
    background:
    url("../img/header fondo.jpg");
    background-blend-mode:  soft-light;
    background-size:cover;
    background-blend-mode:overlay;
    border-top:3px solid #b026ff;
    color:white;

    display:grid;
    grid-template-columns: 420px 1fr 420px;
    grid-template-rows:auto auto;

    align-items:center;

    padding:10px 30px;
}

/* =========================
LADO IZQUIERDO
LOGO + MASCOTA
========================= */

.header-left{
    display:flex;
    align-items:flex-start;
}

/* contenedor del logo + texto */

.logo-area{
    display:flex;
    flex-direction:column;
}

/* logo */

.logo{
    height:120px;
    
    width:auto;
}

/* texto debajo del logo */

.logo-area span{
    font-size:14px;
    color:#ddd;

    margin-top:5px;
}

/* mascota al lado del logo */

.mascota{
    height: 100px;
    width:auto;

    margin-left:15px;
    margin-top:15px;
}
.header-left span{
    font-family:'Orbitron', sans-serif;
    letter-spacing:1px;
}

/* =========================
CENTRAR TEXTO HEADER SOLO PC
========================= */

@media (min-width:1024px){

    .header-left{
        align-items:center;
    }

    .header-left span{
        margin-left:15px;
        flex:1;
        font-size: 16px;
        display:flex;
        align-items:center;

        white-space:nowrap;
    }

}
.textos-header .servicio-tecnico{
    margin-top:6px;
    text-align:center;
}

.textos-header .linea1{
    color:#ffffff;
    font-size:15px;
    letter-spacing:1.5px;
}

.textos-header .linea2{
    color:#ffffff;
    font-size:12px;
    letter-spacing:1.2px;
}
/* =========================
CENTRO
BUSCADOR
========================= */

.header-center{
    grid-column:2;
    grid-row:1;

    display:flex;
    justify-content:center;

    position:relative;
    left:40px;
}

/* barra buscador */

.search-bar{
    display:flex;
    align-items:center;

    background:#e6e6e6;
    border-radius:25px;

    padding:8px 20px;

    width:520px;
}

.search-bar i{
    color:#555;
    margin-right:10px;
}

.search-bar input{
    border:none;
    outline:none;
    background:transparent;

    width:100%;
    font-size:14px;
}


/* =========================
LADO DERECHO
INFO + REDES
========================= */

.header-right{
    grid-column:3;
    grid-row:1;

    display:flex;
    align-items:center;
    gap:40px;
    text-align:right;
    font-size:12px;

    margin-right:0px; /* antes 20px */
}
.header-info{
    text-align:right;
    font-size:15px;
    margin-right:-45px;
}

.ubicacion i{
    color:#ff3de2;
    margin-right:4px;
}

/* =========================
REDES SOCIALES
========================= */

.redes-sociales{

display:flex;
flex-direction:column;
align-items:flex-end;

margin-top:6px;

}

/* TEXTO */

.redes-title{

font-size:16px;
letter-spacing:1px;
color:#ffffff;

}

/* ICONOS */

.redes-iconos{

display:flex;
gap:12px;
margin-top:4px;
font-size:25px;
margin-right: 55px;

}

/* COLOR ICONOS */

.redes-iconos i{

color:#ffffff;
cursor:pointer;
transition:0.3s;

}

/* HOVER */

.redes-iconos i:hover{

color:#ff3de2;

}
/* =========================
WEB ABIERTA PANEL
========================= */
.header-web{
margin-left:auto;
text-align:right;
}
.header-web span{
display:block;
font-size:20px;
font-weight:320;
letter-spacing:1px;
transform:skewX(15deg);
}
.header-web span{
    display:block;
    font-size:20px;
    transform:skewX(15deg);
    margin-right: 0px;
}

.open-text{
font-size:42px;
font-weight:bold;
color:#ff00ff;
letter-spacing:2px;
transform:skewX(15deg);
 margin-right: 0px;
}

/* =========================
BOTON CAMBIO DE TEMA
========================= */

.theme-switch{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    cursor:pointer;
    margin-top:15px;
}

/* OVALO PEQUEÑO */

.theme-icon{

    width:90px;
    height:45px;

    border-radius:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgb(255, 255, 255);
    color:rgb(0, 0, 0);

    transition:0.3s;

}

/* TEXTO */

.theme-text{

    margin-top:6px;

    font-size:12px;
    font-weight:800;

    letter-spacing:1px;

}

/* HOVER */

.theme-icon:hover{

    transform:scale(1.07);

}
/* =========================
HEADER MOVIL
========================= */

@media (max-width:768px){

.main-header{
display:flex;
flex-direction:column;
align-items:center;
padding:20px 15px;
gap:15px;
}

/* LOGO + MASCOTA */

.header-left{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.logo{
height:90px;
}

.mascota{
height:60px;
}

/* TEXTO DEBAJO DEL LOGO */

.logo-area span{
text-align:center;
font-size:14px;
margin-top:5px;
}

/* BUSCADOR */

.header-center{
width:100%;
display:flex;
justify-content:center;
}

.search-bar{
width:100%;
max-width:400px;
padding:10px 15px;
margin-right: 57px;
}

/* CATEGORIAS */

.header-categorias{
text-align:center;
font-size:16px;
font-weight:bold;
margin-top:10px;
}

/* DIRECCION */

.header-info{
text-align:center;
font-size:12px;
margin-top:5px;
}
 .logo-area{
        align-items:center; /* 🔥 centra TODO el bloque */
}
.logo-area span{
        margin-left:0 !important;
        text-align:center;
}
.textos-header > span{
        display:block !important;
        margin-left:0 !important;
        width:100%;
        text-align:center;
    }
}



/* =========================
REDES SOCIALES
========================= */

.redes-sociales{

display:flex;
flex-direction:column;
align-items:flex-end;

margin-top:8px;

}

/* TEXTO */

.redes-title{

font-size:13    px;
color:#ffffff;
letter-spacing:1px;
margin-bottom:4px;

}

/* ICONOS */

.redes-iconos{

display:flex;
gap:14px;
font-size:24px;
margin-right: 50px;

}

/* COLOR ICONOS */

.redes-iconos a i{

color:#ffffff;
cursor:pointer;
transition:0.3s;

}

/* HOVER */

.redes-iconos a i:hover{

color:#ff3de2;
transform:scale(1.15);

}

/* PANEL WEB ABIERTA */

.header-web{
transform:none;
padding:10px 20px;
margin-top:15px;
}

.header-web span,
.open-text{
transform:none;
text-align:center;
}

/* BOTON DARK MODE */

.theme-toggle{
margin-top:10px;
}



.categoria-ui {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.filtros-panel {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(6px);
}

.filtro-titulo {
    font-size: 13px;
    opacity: 0.7;
    white-space: nowrap;
}

.filtros-categoria {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-filtro {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #444;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    transition: all .25s ease;
}

.btn-filtro:hover {
    border-color: #00ffd5;
    color: #00ffd5;
}

.btn-filtro.activo {
    background: #00ffd5;
    color: #000;
    border-color: #00ffd5;
    box-shadow: 0 0 12px rgba(0,255,213,.4);
}
@media (max-width: 768px) {
    .categoria-ui {
        justify-content: center;
    }

    .filtros-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .filtros-categoria {
        justify-content: center;
    }
}


.productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.card {
    background: rgba(207, 213, 225, 0.05); /* gris claro traslúcido */
    border: 1px solid #cfd5e1;
    backdrop-filter: blur(4px);
}

/* salida animada */
.card.filtrando {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

/* oculto real (SIN position absolute) */
.card.oculta {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}


.card:not(.oculta) {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
}
#categorias{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* BOTON CATEGORIAS */

#categorias{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* BOTON */

.btnCategorias {
    width: 100%;
    padding: 15px 0;
    border-radius: 10px;
    background: #ffffff;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

/* BORDE RGB */

.btnCategorias::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:12px;

    background: linear-gradient(
        90deg,
        #ff0000,
        #00ff00,
        #0000ff,
        #ff00ff,
        #7f00ff,
        #ff0000
    );

    background-size:400% 400%;
    animation: rgbShift 4s linear infinite;

    z-index:-2;
}

/* CAPA BLANCA INTERIOR (para que no se pinte todo) */

.btnCategorias::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:10px;
    background:white;
    z-index:-1;
}

/* TEXTO RGB */

.btnCategorias span{
    font-family: 'Press Start 2P', cursive;
    font-size:16px;

    background: linear-gradient(
        90deg,
        #ff0000,
        #00ff00,
        #0000ff,
        #ff00ff,
        #7f00ff,
        #ff0000
    );

    background-size:400% 400%;
    animation: rgbShift 4s linear infinite;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    background-clip:text;
    color:transparent;
}

/* ANIMACION */

@keyframes rgbShift{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}
/* CONTENEDOR CATEGORIAS */

.categorias-nav{

    position: absolute;
    top: 60px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;

    width: 90%;
    max-width: 900px;

    padding: 20px;

    border-radius: 15px;

    background: rgba(14,0,22,0.95);
    border: 2px solid #7f00ff;

    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;

    transition: all 0.3s ease;
}


/* CUANDO ESTA ACTIVO */

.categorias-nav.active{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* BOTONES */

.categorias-nav a{

    padding: 8px 16px;

    border-radius: 20px;

    background: #0e0016;

    border: 2px solid #7f00ff;

    color: white;

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s;

}


.categorias-nav a:hover{
    box-shadow: 0 0 10px #7f00ff;
}
@media (max-width:768px){

.categorias-nav{

    width: 95%;
    max-width: 95%;

    gap: 8px;

    padding: 15px;

}

.categorias-nav a{

    font-size: 13px;
    padding: 7px 14px;

}

}

/* CATÁLOGO  */
.Gabinetes {
    padding: 50px 20px;
    max-width: 1200px;
    margin: auto;
}

.Gabinetes h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #ffffff;
    text-shadow: 0 0 10px #ff2bff;
}

.categoria {
    margin: 70px 0 25px;
    text-align: center;
    font-size: 28px;
    color: #00ffd5;
    text-shadow: 0 0 15px #00ffd5;
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    .categoria {
        font-size: 22px;
        margin: 45px 0 20px;
    }
}
.productos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 30px;
}

/* TARJETA */
.sin-stock {
    filter: grayscale(1);
    opacity: 0.6;
    pointer-events: none;
}

.sin-stock::before {
    content: "SIN STOCK";
    position: absolute;
    top: 12px;
    right: -10px;
    background: #777;
    color: white;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: bold;
    transform: rotate(10deg);
}

.card {
    background: #0e0016;
    border: 2px solid #7f00ff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 0 15px rgba(255,0,255,0.2);
}
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card p {
    min-height: 70px;
    font-size: 14px;
    color: #d0bfff;
    margin-bottom: 10px;
}

.card .btn-add-cart,
.card .btn-wsp {
    margin-top: 10px;
}
.card .precio {
    margin-top: auto;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(255,0,255,0.6);
}

.card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.card h3 {
    color: #f0f0f0;
    margin-bottom: 10px;
}

.card p {
    font-size: 14px;
    color: #d0bfff;
    margin-bottom: 15px;
}
.card {
    width: 100%;
    max-width: 300px;
}

.card img {
    max-height: 220px;
    object-fit: contain;
}
.precio {
    display: block;
    font-size: 20px;
    margin-bottom: 15px;
    color: #00ffd5;
    font-weight: bold;
}
.pulsante {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(1, 255, 242, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgb(0, 60, 255);
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 224, 253, 0.5);
    }
}
.oferta {
    border: 2px solid #00ff0d;
    box-shadow: 0 0 25px rgba(251, 255, 0, 0.6);
    position: relative;
}

/* CINTA OFERTA */
.oferta::before {
    content: "OFERTA";
    position: absolute;
    top: 12px;
    left: -10px;
    background: #ff0033;
    color: white;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: bold;
    transform: rotate(-10deg);
    box-shadow: 0 0 15px #ff0033;
}

/* PRECIO */
.card.oferta {
  position: relative;
  border: 2px solid #00ff88;
  box-shadow: 0 0 25px rgba(0,255,136,0.25);
}

/* BADGE FECHA (ESQUINA) */
.badge-fecha {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #00ff88;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,255,136,0.6);
  z-index: 2;
}

/* PRECIO ANTES */
.precio-viejo {
  text-decoration: line-through;
  color: #ff6b6b;
  font-size: 15px;
  margin: 6px 0 0;
}

/* PRECIO AHORA */
.precio-oferta {
  font-size: 26px;
  color: #00ff88;
  font-weight: bold;
  margin: 4px 0 12px;
}
.btn-add-cart {
    margin: 10px 0;
    padding: 10px 20px;
    border-radius: 25px;
    border: 2px solid #00ffd5;
    background: transparent;
    color: #00ffd5;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-add-cart:hover {
    background: #00ffd5;
    color: #000;
    box-shadow: 0 0 15px #00ffd5;
}
.fly-product {
  position: fixed;
  width: 80px;
  height: 80px;
  object-fit: contain;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.7s cubic-bezier(.25,.8,.25,1);
}

.cart-icon.shake {
  animation: cartShake 0.4s;
}

@keyframes cartShake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

.cart-count.bump {
  animation: countBump 0.35s;
}

@keyframes countBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
/* BOTÓN */
.btn-wsp {
    display: inline-block;
    padding: 12px 25px;
    background: linear-gradient(45deg, #00d9ff, #1900ff);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: 0 0 15px #0026ff;
    transition: 0.3s;
}

.btn-wsp:hover {
    background: linear-gradient(45deg, #7f00ff, #ff00ff);
    box-shadow: 0 0 25px #ff00ff;
}
 .redes-sociales2 {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
}

.red {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: white;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 0 10px rgba(255,0,255,0.4);
}

/* COLORES */
.facebook { color: #1877f2; }
.instagram { color: #e1306c; }
.tiktok { color: #ffffff; }
.Youtube {color: red;}
/* HOVER */
.red:hover {
    transform: scale(1.15);
    box-shadow: 0 0 25px currentColor;
}
/* FOOTER */
.footer {
    position: relative;              /* referencia para el texto absoluto */
    text-align: center;
    padding: 25px 20px 50px 20px;    /* 👈 espacio real abajo */
    border-top: 1px solid #ff00ff;
    margin-top: 40px;
    color: #bfa0ff;
    z-index: 1;
}

/* TEXTO INFERIOR IZQUIERDO */
.footer-extra {
    position: center;
    left: 20px;
    bottom: 12px;

    font-size: 11px;
    color: #ffffffcc;
    letter-spacing: 1px;
    text-transform: uppercase;

    line-height: 1.4;
    pointer-events: none;
}
@media (max-width: 768px) {

    .footer {
        padding: 20px 15px 60px 15px; /* más espacio abajo */
    }

    .footer-extra {
        font-size: 9px;
        max-width: 75%;
    }

}
.categoria {
    margin: 70px 0 25px;
    text-align: center;
    font-size: 28px;
    color: #00ffd5;
    text-shadow: 0 0 15px #00ffd5;
    letter-spacing: 2px;
}


@media (max-width: 768px) {
    .categoria {
        font-size: 22px;
        margin: 45px 0 20px;
    }

    .footer {
        height: 70px;
        padding: 0 20px;
    }
    .top-bar-image{
        height: 70px;
        padding: 0 20px;
    }
}

.Gabinetes {
    max-width: 1300px;
    margin: auto;
    padding: 0 20px;
}
@media (max-width: 768px) {

    /* contenedor general */
    .Gabinetes,
    .destacados {
        padding: 20px 10px;
    }

    /* productos */
    .productos {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* cards */
    .card {
        max-width: 70%;
        padding: 18px;
    }

    .card img {
        max-height: 180px;
    }

    .card h3 {
        font-size: 18px;
    }

    .card p {
        font-size: 14px;
    }

    .precio {
        font-size: 22px;
    }

    .precio-oferta {
        font-size: 24px;
    }

    /* botones */
    .btn-wsp {
        width: 100%;
        padding: 14px 0;
        font-size: 16px;
    }

    /* categorías */
    .categoria {
        font-size: 22px;
        margin: 40px 0 20px;
    }

    /* redes */
    .red {
        width: 70px;
        height: 70px;
        font-size: 34px;
    }
}
.btn-top {
    position: fixed;
    bottom: 110px;
    right: 25px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(45deg, #7f00ff, #ff00ff);
    color: white;
    font-size: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    box-shadow: 0 0 20px #ff00ff;
    z-index: 999;

    /* oculto por defecto */
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.btn-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.btn-top:hover {
    transform: scale(1.15);
    box-shadow: 0 0 35px #ff00ff;
}

/* MOBILE */
@media (max-width: 768px) {
    .btn-top {
    width: 50px;     /* MISMO tamaño */
    height: 50px;
    right: 35px;     /* MISMA columna derecha */
    bottom: 82px;    /* altura calculada para que quede alineado */
                     /* (20px base + 50px botón + 12px separación) */

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
}
.cart-icon {
    position: fixed;
    bottom: 25px;   /* antes: top */
    left: 25px;     /* antes: right */
    background: color(srgb rgb(255, 255, 255) green blue);
    font-size: 28px;
    cursor: pointer;
    z-index: 1001;
    color: #fff;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #6200ff;
    color: white;
    font-size: 12px;
    padding: 3px 7px;
    border-radius: 50%;
    box-shadow: 0 0 10px #6f00ff;
}
@media (max-width: 768px) {
.cart-icon {
        width: 55px;   /* ← mismo tamaño que buscador */
        height: 55px;
        left: 20px;    /* NO cambiar a right */
        font-size: 30px;
        bottom: 20px !important;   /* podés subirlo o bajarlo */
    }


    /* 🔢 CONTADOR */
    .cart-count {
        font-size: 12px;
        padding: 2px 6px;
        top: -6px;
        right: -6px; /* esto está bien, es relativo al icono */
    }

}

/* =========================
   OVERLAY
========================= */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: .3s;
  z-index: 1000;
}

/* =========================
   MODAL
========================= */

.cart-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.95);

  width: 900px;
  max-width: 95%;
  height: 85dvh;

  background: #0e0016;
  border-radius: 20px;
  border: 1px solid #7f00ff;
  box-shadow: 0 0 40px rgba(255,0,255,.4);

  display: flex;
  flex-direction: column;

  overflow: hidden; /* 🔥 evita scroll lateral */

  opacity: 0;
  pointer-events: none;
  transition: .3s ease;
  z-index: 1001;
}

/* ACTIVAR */

#toggle-cart:checked ~ .cart-overlay {
  opacity: 1;
  pointer-events: auto;
}

#toggle-cart:checked ~ .cart-modal {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* =========================
   HEADER
========================= */

.cart-header {
  padding: 20px;
  border-bottom: 1px solid #7f00ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h3 {
  color: #ffd700;
}

/* =========================
   BODY
========================= */

.cart-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* 🔥 nunca scroll horizontal */
  padding: 20px;
}

/* =========================
   ITEMS LISTA COMPACTA
========================= */

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 8px 10px;

  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);

  border-radius: 8px;
}

/* Imagen */

.cart-item img {
  width: 50px;
  height: 50px;
  min-width: 50px;
  object-fit: contain;
  background: #0b0b0f;
  border-radius: 6px;
  padding: 4px;
}

/* Info */

.cart-item > div:first-of-type {
  flex: 1;
  min-width: 0;
}

.cart-item h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item span {
  font-size: 13px;
  font-weight: 700;
  color: #00ffd5;
}

/* Cantidad */

.cart-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-qty button {
  width: 26px;
  height: 26px;
  font-size: 14px;

  border-radius: 6px;
  border: 1px solid #7f00ff;
  background: #0e0016;
  color: #fff;

  cursor: pointer;
}

.cart-qty button:hover {
  background: #7f00ff;
}

.cart-qty span {
  font-size: 13px;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
}

/* =========================
   FOOTER
========================= */

.cart-footer {
  padding: 20px;
  border-top: 1px solid #7f00ff;
  background: #0b0b0f;

  overflow-y: auto;
  max-height: 45%;
}

/* =========================
   MOBILE OPTIMIZADO
========================= */

@media (max-width:768px) {

  .cart-modal {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .cart-body {
    padding: 15px;
  }

  .cart-item {
    padding: 6px 8px;
  }

  .cart-item img {
    width: 45px;
    height: 45px;
  }

  .cart-item h4 {
    font-size: 13px;
  }

  .cart-footer {
    max-height: 55%;
    padding: 15px;
  }
}


.btn-cart {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    border-radius: 30px;
    background: linear-gradient(45deg, #00d9ff, #1900ff);
    color: white;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 15px #0026ff;
    transition: 0.3s;
}

.btn-cart:hover {
    background: linear-gradient(45deg, #7f00ff, #ff00ff);
    box-shadow: 0 0 25px #ff00ff;
}


/* =========================
   CUOTAS EN CARRITO
========================= */

.cart-cuotas-container {
  margin-top: 15px;
  position: relative; /* 🔥 importante */
  z-index: 1;          /* 🔥 evita superposición */
}

.cart-cuotas-container label {
  font-size: 13px;
  color: #aaa;
  display: block;
  margin-bottom: 5px;
}

.cart-cuotas-container select {
  width: 100%;
  padding: 8px;
  background: #111;
  color: white;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  outline: none;
}

/* Preview cuotas */
.cuotas-preview {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);

  position: relative; /* 🔥 clave */
  z-index: 1;         /* 🔥 clave */
}

/* Item individual */
.cuota-item-carrito {
  background: rgba(255,255,255,0.05);
  padding: 8px 10px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}

.cuota-item-carrito strong {
  color: #00ffcc;
}

/* 🔥 BLOQUEO DE CUALQUIER POSICIONAMIENTO FLOTANTE */
.cuotas-preview,
.cart-cuotas-container {
  position: static !important;
}
.aviso-tarjeta {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #aaa;
  line-height: 1.4;
}

/* 📱 Responsive seguro */
@media (max-width: 768px) {
  .cuota-item-carrito {
    font-size: 12px;
  }
}
/* =========================
   TOTAL
========================= */

.cart-total {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 2px solid #00ffd5;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
}

.cart-total strong {
  color: #00ffd5;
  font-size: 22px;
}

/* =========================
   SECCIONES
========================= */

.cart-section {
  margin-bottom: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}

.cart-section h4 {
  font-size: 13px;
  margin-bottom: 10px;
  color: #00c3ff;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.aviso-envio-pago{
background:#2b1f2b;
border-left:4px solid #ff00ff;
padding:10px 14px;
margin-top:10px;
font-size:13px;
color:#ddd;
display:none;
border-radius:4px;
}

.aviso-envio-pago strong{
color:#ff4dcf;
}
/* =========================
   RADIOS
========================= */

.cart-section label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: 0.2s;
}

.cart-section label:hover {
  color: #00ffd5;
}

.cart-section input[type="radio"] {
  margin-right: 6px;
  accent-color: #7f00ff;
}

/* =========================
   INPUTS
========================= */

.cart-section input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;

  background: #0e0016;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;

  transition: 0.2s;
}

.cart-section input[type="text"]:focus {
  outline: none;
  border-color: #7f00ff;
  box-shadow: 0 0 10px rgba(127,0,255,0.4);
}

/* =========================
   SELECT CUOTAS
========================= */

#selectCuotas {
  width: 100%;
  padding: 8px 10px;
  margin-top: 6px;

  background: #0e0016;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;

  transition: 0.2s;
}

#selectCuotas:focus {
  outline: none;
  border-color: #7f00ff;
  box-shadow: 0 0 10px rgba(127,0,255,0.4);
}

/* =========================
   PREVIEW CUOTAS
========================= */

#cuotasPreviewCarrito {
  margin-top: 8px;
}

.cuota-item-carrito {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 8px 10px;
  border-radius: 8px;

  background: rgba(0,255,204,0.06);
  border: 1px solid rgba(0,255,204,0.3);

  font-size: 14px;
}

.cuota-item-carrito strong {
  color: #00ffcc;
  font-weight: 700;
}

/* =========================
   BOTÓN FINALIZAR
========================= */

.btn-finish {
  width: 100%;
  padding: 12px;
  margin-top: 12px;

  border: none;
  border-radius: 12px;

  background: linear-gradient(90deg,#00c3ff,#0044ff);
  color: #fff;

  font-weight: 700;
  font-size: 15px;
  cursor: pointer;

  transition: 0.2s;
}

.btn-finish:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(255,0,255,0.6);
}

/* =========================
   BOTÓN VACIAR
========================= */

#btn-clear-cart {
  width: 100%;
  padding: 10px;
  margin-top: 8px;

  background: transparent;
  border: 1px solid #7f00ff;
  border-radius: 10px;

  color: #fff;
  font-size: 14px;
  cursor: pointer;

  transition: 0.2s;
}

#btn-clear-cart:hover {
  background: #7f00ff;
  box-shadow: 0 0 10px rgba(127,0,255,0.5);
}
.cart-cuotas-info {
  margin-top: 10px;
}

.cart-cuotas-mensaje {
  font-size: 14px;
  background: rgba(0,255,213,0.08);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,255,213,0.3);
  line-height: 1.4;
}

.cart-cuotas-mensaje strong {
  color: #00ffd5;
}

.cart-cuotas-mensaje small {
  display: block;
  margin-top: 6px;
  color: #aaa;
  font-size: 12px;
}
.modal-product {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.modal-product.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: #0e0016;
    border: 2px solid #7f00ff;
    border-radius: 20px;
    padding: 25px;
    max-width: 420px;
    width: 90%;
    max-height: 80vh;      /* altura máxima del modal */
    display: flex;
    flex-direction: column;
    overflow: hidden;      /* previene que el modal se salga */
    text-align: center;
    z-index: 1;
    box-shadow: 0 0 40px rgba(127,0,255,.6);
    animation: modalIn .3s ease;
}
.modal-desc {
    flex: 1;               /* ocupa todo el espacio disponible */
    overflow-y: auto;      /* agrega scroll si el contenido excede */
    text-align: left;
    margin-bottom: 15px;
    white-space: pre-line; /* respeta los saltos de línea con 
 */
    color: #d0bfff;
    font-size: 14px;
    line-height: 1.5;
}

@keyframes modalIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-content img {
  max-width: 100%;
  border-radius: 15px;
  margin-bottom: 15px;
}

.modal-content h3 {
  color: #fff;
  margin-bottom: 8px;
}

.modal-content p {
  font-size: 14px;
  color: #d0bfff;
  margin-bottom: 12px;
}

#modalDesc {
  max-height: 200px;       /* altura máxima de la descripción */
  overflow-y: auto;        /* scroll vertical si hay exceso */
  padding-right: 5px;      /* evita que el scroll corte el texto */
  text-align: left;        /* alineación del texto */
  margin-bottom: 12px;     /* conserva el margen original */
  font-size: 14px;
  color: #d0bfff;
}

/* Scroll solo visible al pasar el mouse */
#modalDesc::-webkit-scrollbar {
  width: 6px;
}

#modalDesc::-webkit-scrollbar-thumb {
  background: rgba(127,0,255,0.6);
  border-radius: 3px;
}

#modalDesc::-webkit-scrollbar-track {
  background: transparent;
}

#modalDesc:hover {
  overflow-y: auto;
}
.modal-price {
  display: block;
  font-size: 20px;
  color: #00ffd5;
  margin-bottom: 15px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 15px;
  background: none;
  border: none;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}
.btn-review {
  background: #ff0033;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 15px rgba(255,0,51,.6);
}

.btn-review:hover {
  background: #ff3355;
}
.modal-content .btn-review {
  margin-bottom: 12px;
}
/* =====================================================
   DESKTOP GRANDE (solo en pantallas grandes)
===================================================== */
@media (min-width: 901px) {

  .modal-content {
      max-width: 1100px;
      width: 95%;
      max-height: 90vh;
      padding: 30px;
  }

  .modal-grid {
      display: grid;
      grid-template-columns: 90px 1fr 1fr;
      gap: 30px;
      align-items: start;
  }

  /* GALERÍA */
  .modal-gallery {
      display: contents;
  }

  .modal-thumbs {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .modal-thumbs img {
      width: 75px;
      height: 75px;
      object-fit: contain;
      background: #160020;
      border-radius: 10px;
      padding: 5px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: .3s;
  }

  .modal-thumbs img:hover {
      border-color: #ff00ff;
  }

  .modal-img-zoom {
      background: #160020;
      border-radius: 15px;
      padding: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .modal-img-zoom img {
      max-height: 650px;
  }

  /* INFO */
  .modal-info {
      display: flex;
      flex-direction: column;
  }

  .modal-info h3 {
      font-size: 24px;
  }

  .modal-info .modal-price {
      font-size: 22px;
  }


.modal-info{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:80vh;
    overflow-y:auto;
}

/* 🔥 evitar que la descripción se colapse */
.modal-desc{
    flex:0 0 auto;
}

/* limitar altura pero mantener visible */
#modalDesc{
    max-height:220px;
    overflow-y:auto;
}

}

@media (min-width: 900px) {

  .modal-grid {
      align-items: stretch;
  }

  .modal-img-zoom {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .modal-img-zoom img {
      height: 100%;
      max-height: none;
      object-fit: contain;
  }

}

/* =====================================================
   MODAL MOBILE FIX
===================================================== */
@media (max-width: 900px) {

  .modal-content{
      max-width:420px;
      width:90%;
      max-height:90vh;
      padding:25px;

      display:flex;
      flex-direction:column;

      overflow-y:auto; /* 🔥 solo el modal scrollea */
  }

  .modal-grid{
      display:flex;
      flex-direction:column;
      gap:15px;
  }

  .modal-gallery{
      flex-shrink:0;
  }

  .modal-info{
      display:flex;
      flex-direction:column;
      gap:10px;
  }

  /* thumbs */
  .modal-thumbs{
      display:flex;
      gap:10px;
      justify-content:center;
      overflow-x:auto;
  }

  .modal-thumbs img{
      width:55px;
      height:55px;
  }

  /* imagen principal */
  .modal-img-zoom img{
      max-height:300px;
      width:100%;
      object-fit:contain;
  }

  /* descripción con scroll interno */
  #modalDesc{
      max-height:200px;
      overflow-y:auto;
  }

}
/* =================================
   FIX BOTÓN WHATSAPP MODAL
================================= */

.modal-info .btn-wsp {
    display: block;
    text-align: center;
    margin-top: 10px;
    position: relative;
    z-index: 5;
}

.modal-info {
    position: relative;
    z-index: 2;
}

.card {
    transition: transform 0.45s ease, opacity 0.3s ease;
    will-change: transform;
}
.envios-logo {
    position: absolute;   /* ahora depende de #categorias */
    top: -120px;           /* ajusta altura exacta */
    left: 20px;           /* lo pega al lado izquierdo */
    z-index: 5;

    display: inline-block;
}

/* IMAGEN DEL CARTEL */
.envios-logo img {
    width: 150px;
    height: auto;
    display: block;
}

/* TEXTO ¡MUY PRONTO! */
.envios-texto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);

    color: #ff0033;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
    pointer-events: none;

    -webkit-text-stroke: 1.5px #ffffff;

    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff,
         0 0 8px rgba(0,0,0,0.6);
}

#btn-clear-cart {
    background: #ff0033;
    color: #fff;
    box-shadow: 0 0 15px #ff0033;
}

#btn-clear-cart:hover {
    background: #ff6666;
    box-shadow: 0 0 25px #ff6666;
}
.switch-precio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin-left: auto;
}

.switch-precio input {
  display: none;
}

/* base del switch */
.slider {
  width: 46px;
  height: 24px;
  background: #333;
  border-radius: 50px;
  position: relative;
  transition: .3s;
  box-shadow: inset 0 0 5px rgba(0,0,0,.6);
}

/* circulito */
.slider::before {
  content: "";
  width: 18px;
  height: 18px;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  transition: .3s;
}

/* estado ON */
.switch-precio input:checked + .slider {
  background: linear-gradient(45deg, #7f00ff, #ff00ff);
  box-shadow: 0 0 12px #ff00ff;
}

.switch-precio input:checked + .slider::before {
  transform: translateX(22px);
}

/* texto */
.switch-text {
  font-size: 13px;
  color: #fff;
}
.productos {
  position: relative;
  display: grid;
}


.card {
  transition:
    transform .35s ease,
    opacity .25s ease;
}

/* ocultar por filtro */
.card.oculta {
  display: none;
}
.card {
  transition: transform .25s ease, opacity .25s ease;
}

.card.filtrando {
  opacity: 0;
  transform: scale(.96);
}


.buscador-productos {
  max-width: 420px;
  margin: 30px auto 15px;
  text-align: center;
}

.buscador-wrapper {
  position: relative;
}

.icon-search {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity: 0.7;
  pointer-events: none;
}

#searchInput {
  width: 100%;
  padding: 14px 18px 14px 45px; /* espacio para la lupa */
  border-radius: 30px;
  border: 2px solid #fafafa;
  background: #0e0016;
  color: #fff;
  font-size: 15px;
  outline: none;
}

#searchInput::placeholder {
  color: #ffffff;
}

#searchInput:focus {
  box-shadow: 0 0 20px #ffffff;
}


/* =========================
   MENSAJE SIN RESULTADOS
========================= */
.no-resultados {
  margin-top: 15px;
  font-size: 15px;
  color: #ff5c5c;
  display: none;
  animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
body.buscando .productos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* responsive */
@media (max-width: 1024px) {
  body.buscando .productos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  body.buscando .productos {
    grid-template-columns: 1fr;
  }
}
#searchResults {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 20px 0;
}

body.buscando .card {
  position: relative !important;
  opacity: 1;
  transform: none;
}

/* responsive */
@media (max-width: 1024px) {
  #searchResults {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #searchResults {
    grid-template-columns: 1fr;
  }
}
.separador-categoria {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 25px 0;
}
.checkout-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 15px 0;
}

.checkout-data input {
  background: #111;
  border: 1px solid #7f00ff;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  outline: none;
}

.checkout-data input::placeholder {
  color: #aaa;
}
@media (max-width: 768px) {
  .envios-logo {
    display: none !important;
  }
}
/* TEXTO SEGUINOS */
.footer-follow {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    margin: 20px;
}

.footer-follow span {
    font-size: 15px;
    letter-spacing: 3px;
    color: #ff00ff;
    font-weight: 600;

    animation: pixisGlow 2s ease-in-out infinite alternate;
}

/* animación neon */
@keyframes pixisGlow {
    from {
        opacity: 0.6;
        text-shadow: 0 0 5px #ff00ff,
                     0 0 10px #ff00ff,
                     0 0 20px #7f00ff;
        transform: translateY(0px);
    }

    to {
        opacity: 1;
        text-shadow: 0 0 10px #ff00ff,
                     0 0 25px #ff00ff,
                     0 0 40px #7f00ff;
        transform: translateY(-2px);
    }
}
@media (max-width:768px){
    .footer-follow span{
        font-size:11px;
        letter-spacing:2px;
    }
    .footer-follow{
        text-align: center;
    }
}
.footer-box {
    position: absolute;
    left: 20px;
    bottom: 15px;

    width: 300px;
    min-height: 85px;

    border-radius: 10px;
    padding: 10px;

    background: rgba(10, 0, 20, 0.85);
    backdrop-filter: blur(6px);

    overflow: hidden;
}
.footer-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 12px;

    background: linear-gradient(
        120deg,
        #ff00ff,
        #7f00ff,
        #00eaff,
        #7f00ff,
        #ff00ff
    );

    background-size: 300% 300%;
    animation: pixisRGB 6s linear infinite;

    z-index: 0;
    filter: blur(6px); /* suaviza el RGB */
    opacity: 0.6;
}

/* capa interna para que el brillo NO toque el texto */
.footer-box::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: rgba(8, 0, 18, 0.95);
    border-radius: 9px;
    z-index: 1;
}
.footer-box-content {
    position: relative;
    z-index: 2;
}

.footer-box-text {
    color: #ffffff;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.6px;
    font-weight: 500;
}

/* espacio fiscal reservado */
.footer-box-fiscal {
    margin-top: 6px;
    height: 18px; /* espacio reservado */
}
@keyframes pixisRGB {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (max-width:768px){

    .footer-box {
        width: 85%;
        left: 50%;
        transform: translateX(-50%);
        bottom: 8px;
    }

    .footer-box-text {
        font-size: 8px;
        text-align: center;
    }
}
@media (max-width: 768px) {
    body {
        padding-bottom: 120px;
    }
}

/* ============================
   FOOTER MOBILE FLOW FIX
============================ */
@media (max-width: 768px) {

    /* el contenedor principal del footer pasa a ser vertical */
    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 20px 120px; /* dejamos espacio para botones flotantes */
        height: auto; /* importante: que no tenga altura fija */
    }

    /* la caja principal ya no debe flotar ni superponerse */
    .footer-box {
         order: 2;
        position: center;   /* 🔥 clave: vuelve al flujo normal */
        width: 100%;
        max-width: 500px;
        margin-bottom: 15px;
    }

    /* el texto informativo baja debajo */
    .footer-extra {
        order: 1;
        position: static;   /* quitamos absolute */
        transform: none;    /* anulamos translate si tenía */
        width: 100%;
        max-width: 500px;
        margin: 0 auto 15px;
        text-align: center;
        font-size: 11px;
        line-height: 1.6;
    }

    /* copyright también abajo de todo */
    .footer-copy {
         order: 3;
        position: static;
        transform: none;
        text-align: center;
        font-size: 11px;
        opacity: 0.8;
    }
}

  

    /* redes sociales más compactas */
    .social-icons {
        gap: 14px;
        flex-wrap: wrap;
    }

    .social-icons a {
        width: 48px;
        height: 48px;
    }
    .footer-box2 {
    position: absolute;
    left: 20px;
    bottom: 15px;

    width: 200px;
    min-height: 50px;

    border-radius: 10px;
    padding: 10px;

    background: rgba(10, 0, 20, 0.85);
    backdrop-filter: blur(6px);

    overflow: hidden;
}
.footer-box2::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 12px;

    background: linear-gradient(
        120deg,
        #ff00ff,
        #7f00ff,
        #00eaff,
        #7f00ff,
        #ff00ff
    );

    background-size: 300% 300%;
    animation: pixisRGB 6s linear infinite;

    z-index: 0;
    filter: blur(6px); /* suaviza el RGB */
    opacity: 0.6;
}

/* capa interna para que el brillo NO toque el texto */
.footer-box2::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: rgba(8, 0, 18, 0.95);
    border-radius: 9px;
    z-index: 1;
}
.footer-box2-content {
    position: relative;
    z-index: 2;
}

.footer-box2-text {
    color: #ffffff;
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: 0.6px;
    font-weight: 500;
}

/* espacio fiscal reservado */
.footer-box2-fiscal {
    margin-top: 6px;
    height: 18px; /* espacio reservado */
}
@keyframes pixisRGB {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (max-width:768px){

    .footer-box2 {
        width: 85%;
        left: 50%;
        transform: translateX(-50%);
        bottom: 8px;
    }

    .footer-box2-text {
        font-size: 8px;
        text-align: center;
    }
}

.modal-img-zoom {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  cursor: zoom-in;
}

/* imagen */
.modal-img-zoom img {
  width: 100%;
  height: auto;
  transition: transform 0.25s ease;
  transform-origin: center center;
}

/* icono lupa */
.modal-img-zoom::after {
  content: "+";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.modal-img-zoom:hover::after {
  opacity: 1;
}
.search-bubble {
    position: fixed;
    bottom: 100px; /* arriba del carrito */
    left: 25px;
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #ffffff, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
    box-shadow: 0 0 20px #00d9ff;
    overflow: hidden;
    transition: 0.4s ease;
}

.search-bubble input {
    width: 0;
    opacity: 0;
    border: none;
    outline: none;
    background: transparent;
    color: rgb(0, 0, 0);
    font-size: 14px;
    transition: 0.4s ease;
}

/* Expandir */
.search-bubble.active {
    width: 220px;
    border-radius: 40px;
    padding: 0 15px;
    justify-content: flex-start;
}

.search-bubble.active input {
    width: 100%;
    opacity: 1;
}
.search-icon {
    width: 22px;
    height: 22px;
    pointer-events: none;
    transition: 0.3s ease;
}
.search-bubble.active .search-icon {
    opacity: 0;
    transform: scale(0.7);
}
@media (max-width: 768px) {

    /* 🔍 BURBUJA BUSCADOR (izquierda) */
    .search-bubble {
        width: 50px;   /* ← cambiá este valor para escalar */
        height: 50px;
        left: 18px;
        bottom: 81px;    /* mantiene lado izquierdo */
    }

    .search-bubble.active {
        height: 50px;
        width: 180px;  /* ancho cuando se abre */
    }

    .search-icon {
        width: 18px;
        height: 18px;
    }
}
/* Botón ubicación */
.btn-ubicacion {
    display: inline-block;
    width: 90px;           /* mismo tamaño visual que el texto */
    height: 22px;
    margin-left: 8px;
    background: #ffffff;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

/* Texto flotante al pasar el mouse */
.btn-ubicacion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;      /* tamaño similar al texto */
    height: 22px;
    margin-left: 6px;
    position: relative;
    cursor: pointer;
}

.icono-ubicacion {
    width: 100%;
    height: 100%;
}

/* Tooltip */
/* Ícono ubicación */
.btn-ubicacion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;      /* tamaño similar al texto */
    height: 22px;
    margin-left: 6px;
    position: relative;
    cursor: pointer;
}

.icono-ubicacion {
    width: 100%;
    height: 100%;
}

/* Tooltip */
.btn-ubicacion::after {
    content: "VISITANOS AQUI EN NUESTRO LOCAL";
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%);
    background: #6f00ff;
    color: #fff;
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.25s ease;
}

.btn-ubicacion:hover::after {
    opacity: 1;
}
@media (max-width: 768px) {

    .wsp-float,
    .btn-top,
    .search-bubble,
    .cart-icon {
        transition: transform 0.25s ease-out;
        will-change: transform;
    }

}
.wsp-float,
.btn-top,
.search-bubble,
.cart-icon {
    transition: transform 0.25s ease-out;
}
.checkout-options {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #7f00ff;
}

.opt-title {
    color: #ffd700;
    font-size: 14px;
    margin: 10px 0 5px;
}

.opt-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #fff;
    margin-bottom: 6px;
    cursor: pointer;
}

.opt-check input {
    accent-color: #7f00ff;
    transform: scale(1.1);
}
/* ============================================================
   ESTADO VISUAL SIN STOCK
============================================================ */

.card.sin-stock {
    opacity: 0.55;
}

/* botones desactivados */
.card.sin-stock .btn-add-cart,
.card.sin-stock .btn-wsp {
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(100%);
    transform: none !important;
    box-shadow: none !important;
}

/* opcional: evita animaciones hover */
.card.sin-stock:hover {
    transform: none;
}
/* =========================
   ADVERTENCIA CANTIDAD
========================= */

.cart-warning {
    margin: 15px 20px 0 20px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 165, 0, 0.08);
    border: 1px solid #ff9900;
    color: #ffcc80;
    font-size: 13px;
    line-height: 1.4;
    animation: fadeWarning 0.3s ease;
}

@keyframes fadeWarning {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* MOBILE */
@media (max-width: 768px) {
    .cart-warning {
        font-size: 12px;
        margin: 10px 15px 0 15px;
    }
}
/* ===============================
   MEDIOS DE PAGO MODAL
================================ */

.modal-pagos {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: left;
}

.pagos-info {
    font-size: 13px;
    color: #c9b6ff;
    line-height: 1.5;
    text-align: left;
}
@media (max-width: 900px) {

  .modal-content {
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .modal-grid {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
  }

  /* 🔥 SCROLL ÚNICO */
  .modal-info {
      flex: 1;
      overflow-y: auto;
      padding-right: 5px;
  }

  /* Sacamos el scroll individual */
  #modalDesc {
      overflow: visible;
      max-height: none;
  }

}
.pagos-logos-mini {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.pagos-logos-mini img {
    height: 22px;
    object-fit: contain;
}
.modal-precios {
  margin-top: 10px;
}

.modal-precios span {
  font-size: 13px;
  color: #aaa;
  display: block;
}

.modal-precios strong {
  font-size: 20px;
  display: block;
  margin-bottom: 8px;
}

.precio-local strong {
  color: #00ff88;
}

.precio-lista strong{
   color: #84918b;
}
.preciolista-text p{
  color: #39ff14;
}
.btn-ver-cuotas {
  background: none;
  border: 1px solid #00ffcc;
  color: #00ffcc;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
}

.logos-tarjetas {
  margin-top: 8px;
  display: flex;
  gap: 10px;
}

.logos-tarjetas img {
  height: 40px;
}

/* =========================
   MODAL CUOTAS SUPERPUESTO
========================= */

.modal-cuotas-detalle {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 🔥 más alto que el modal principal */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}


.modal-cuotas-detalle.active {
  opacity: 1;
  pointer-events: all;
}
.modal-cuotas-detalle h3{
  color: #00ff0d;
}
.modal-cuotas-detalle h1{
  color: #00e1ff;
}
.cuotas-content {
  background: #646363;
  width: 380px;
  max-width: 90%;
  padding: 25px;
  border-radius: 10px;
  position: relative;
  animation: aparecerCuotas 0.25s ease;
}

@keyframes aparecerCuotas {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cerrar-cuotas {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 18px;
}
.cabecera-cuotas{
display:grid;
grid-template-columns:1fr 1fr 1fr;
font-weight:bold;
padding:10px 16px;
margin-bottom:10px;
color:#39ff14;
}

.cabecera-cuotas span:nth-child(1){
text-align:left;
justify-self:start;
}

.cabecera-cuotas span:nth-child(2){
text-align:center;
justify-self:center;
}

.cabecera-cuotas span:nth-child(3){
text-align:right;
justify-self:end;
}
.fila-cuota{
display:grid;
grid-template-columns:1fr 1fr 1fr;
align-items:center;
background:#000;
padding:12px 16px;
border-radius:8px;
margin-bottom:10px;
color:white;
font-weight:500;
}

.col-cuotas{
text-align:left;
}

.col-valor{
text-align:center;
}

.col-total{
text-align:right;
color:#00ffe1;
font-weight:bold;
}
@media (max-width:600px){

.fila-cuota{
grid-template-columns: 1fr 1fr 1fr;
font-size:14px;
padding:10px;
}

.cabecera-cuotas{
grid-template-columns: 1fr 1fr 1fr;
font-size:13px;
padding:8px;
}

.col-cuotas{
text-align:left;
}

.col-valor{
text-align:center;
}

.col-total{
text-align:right;
}

}
.sin-interes{
background:#00ff6a;
color:#000;
font-size:10px;
font-weight:bold;
padding:3px 6px;
border-radius:4px;
margin-left:8px;
box-shadow:0 0 6px #00ff6a;
}
.sin-interes{
animation: brilloInteres 2s infinite;
}

@keyframes brilloInteres{
0%{box-shadow:0 0 5px #00ff6a;}
50%{box-shadow:0 0 12px #00ff6a;}
100%{box-shadow:0 0 5px #00ff6a;}
}
/* =========================
   MODAL CUOTAS - PC GRANDE
========================= */

@media (min-width: 769px) {

  #modalCuotasDetalle .cuotas-content {
    width: 700px;       /* antes seguro era 500px aprox */
    max-width: 90%;
    padding: 30px;
  }

}
#selectCuotas,
#cuotasPreviewCarrito {
  display: none;
}
.hide-search-bubble {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: all .3s ease;
}

#cart-toast{
  position: fixed;

  bottom: 30px;      /* 🔥 lo baja al centro inferior */
  left: 50%;
  transform: translateX(-50%) scale(0.9);

  background: #16a34a;
  color: white;

  padding: 14px 28px;
  border-radius: 30px;

  font-size: 15px;
  font-weight: 600;

  opacity: 0;
  pointer-events: none;

  transition: all .3s ease;

  z-index: 999999;
}

#cart-toast.show{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
/* =========================
TERMINOS CHECK
========================= */
.modal-terminos{
opacity:0;
transition:0.3s;
}

.modal-terminos.active{
opacity:1;
}
.cart-terminos{
margin:15px 0;
font-size:13px;
}

.terminos-check{
display:flex;
align-items:center;
gap:8px;
line-height:1.4;
}

.terminos-check input{
transform:scale(1.2);
cursor:pointer;
}

#btnAbrirTerminos{
background:none;
border:none;
color:#00b7ff;
cursor:pointer;
font-weight:600;
}


/* =========================
MODAL TERMINOS
========================= */

.modal-terminos{
position:fixed;
inset:0;
background:rgba(0,0,0,0.7);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.modal-terminos.active{
display:flex;
}

.terminos-contenido{

position:relative;

background:#111;
color:#fff;

width:90%;
max-width:700px;
max-height:80vh;

padding:25px;
border-radius:12px;

display:flex;
flex-direction:column;
overflow:hidden;

}

/* TITULO */

.terminos-contenido h3{
margin-bottom:15px;
color:#ff00ff;
}

/* TEXTO SCROLL */

.terminos-texto{
overflow-y:auto;
font-size:14px;
line-height:1.6;
padding-right:10px;
}

/* BOTON CERRAR */

.cerrar-terminos{

position:absolute;
right:15px;
top:10px;

background:none;
border:none;

font-size:24px;
color:white;
cursor:pointer;

}


/* =========================
MOBILE
========================= */

@media(max-width:600px){

.terminos-contenido{

width:95%;
max-height:85vh;
padding:20px;

}

.terminos-texto{
font-size:13px;
}

}
.transferencia-info{
display:none;
margin-top:10px;
padding:12px;
border-radius:8px;
background:#f5f5f5;
color:#000;
font-size:14px;
line-height:1.4;
border:1px solid #ddd;
}
.btn-copiar{

margin-left:8px;
padding:4px 8px;

border:none;
border-radius:6px;

background:#00b7ff;
color:white;

font-size:12px;
cursor:pointer;

transition:0.2s;

}

.btn-copiar:hover{
background:#0095d1;
}
#bubbleCategorias{
    position: fixed;
    left: 20px;
    bottom: 30px;

    width: 55px;
    height: 55px;

    border-radius: 50%;
    background: linear-gradient(45deg,#7f00ff,#00d4ff);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 26px;
    color: white;

    cursor: pointer;

    box-shadow: 0 0 15px rgba(0,0,0,0.3);

    z-index: 999999; /* 🔥 más alto */

    opacity: 0;
    transform: translateY(20px);
    transition: all .3s ease;
}


/* cuando aparece */

#bubbleCategorias.active{
    opacity: 1;
    transform: translateY(0);
}
.modal-efectivo{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:0.3s;
z-index:9999999;
}

.modal-efectivo.active{
opacity:1;
pointer-events:auto;
}

.modal-efectivo-box{
background:#1f1b1f;
padding:30px;
border-radius:10px;
text-align:center;
max-width:380px;
width:90%;
color:white;
position:relative;
z-index:99999999;
}

.cerrar-modal-efectivo{
position:absolute;
right:12px;
top:8px;
font-size:24px;
cursor:pointer;
}

.efectivo-descuento{
font-size:60px;
font-weight:bold;
color:#00ff9c;
text-shadow:
0 0 8px #00ff9c,
0 0 18px #00ff9c;
}

.efectivo-descuento span{
font-size:40px;
}
.btn-toggle-desc{
    display:none;
}
/* =========================
   DESCRIPCIÓN COLAPSABLE MOBILE
========================= */

@media (max-width:900px){

   #modalDesc{
      max-height:0;
      overflow:hidden;
      transition:max-height .35s ease;
  }

  #modalDesc.active{
      max-height:300px;
      overflow-y:auto;
  }

  .btn-toggle-desc{
      display:block;
      background:#160020;
      border:1px solid #7f00ff;
      color:#d0bfff;
      padding:8px;
      border-radius:10px;
      font-size:13px;
      cursor:pointer;
      margin-bottom:10px;
  }

}
@media (max-width:900px){

  .btn-toggle-desc{
      display:block;
  }

  #modalDesc{
      display:none;
  }

  #modalDesc.active{
      display:block;
  }

}
@media (max-width:900px){

  #modalDesc{
      display:none;
      flex:none;
      height:auto;
      max-height:none;
      overflow:visible;
      margin-top:10px;
  }

  #modalDesc.active{
      display:block;
  }

}
@media (max-width:900px){
.modal-info{
    overflow-y:auto;
    max-height:80vh;
}
}
@media (min-width:1024px){

.theme-switch{
display:none;
}

}

.theme-bubble{
display:none;
}

/* SOLO PC */
@media (min-width:1024px){

.theme-bubble{
display:flex;
position:fixed;
top:420px;
right:25px;

flex-direction:column;
align-items:center;
gap:6px;

cursor:pointer;
z-index:999;
}

}

.theme-bubble-icon{

width:60px;
height:60px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(145deg,#ffffff,#ffffff);

color:rgb(0, 0, 0);

box-shadow:
0 0 15px rgba(176,38,255,0.6),
0 0 25px rgba(255,0,255,0.3);

transition:0.3s;
position:relative;
overflow:hidden;
}
.theme-bubble-icon::before{

content:"";

position:absolute;

top:-3px;
left:-3px;
right:-3px;
bottom:-3px;

border-radius:50%;

background:linear-gradient(
45deg,
red,
orange,
yellow,
lime,
cyan,
blue,
violet,
red
);

background-size:400%;

z-index:-1;

animation:rgbBorder 6s linear infinite;

}
@keyframes rgbBorder{

0%{
background-position:0% 50%;
}

100%{
background-position:400% 50%;
}

}

.theme-bubble-icon:hover{

transform:scale(1.1);

}

.theme-bubble .theme-text2{

font-size:11px;
font-weight:800;

letter-spacing:1px;

}
.btn-videos{
    display:block;
    text-align:center;
    margin:40px auto;
    padding:14px 25px;
    width: fit-content;

    border-radius:25px;
    background:#0e0016;
    border:2px solid #ff00ff;

    color:#fff;
    text-decoration:none;
    font-size:14px;
    letter-spacing:1px;

    box-shadow: 0 0 15px rgba(255,0,255,0.4);
    transition:0.3s;
}

.btn-videos:hover{
    transform:scale(1.05);
    box-shadow: 0 0 25px rgba(255,0,255,0.8);
}
.videos-page{
    min-height:100vh;
    padding:80px 20px;

    background: rgba(0,0,0,0.85);

    display:flex;
    flex-direction:column;
    align-items:center;
}

/* =========================
AJUSTE PARA RESOLUCIONES BAJAS (REAL)
========================= */

@media (max-width:1280px) and (max-height:900px){

    .main-header{
        transform: scale(0.75);
        transform-origin: top center;
        width:135%;
        margin-left:-17.5%;
    }

    .logo{
        height:85px;
    }

    .mascota{
        height:65px;
    }

    .search-bar{
        max-width:320px;
    }

}
/* =========================
AJUSTES PROGRESIVOS PC
========================= */

/* 1600px ↓ */
@media (max-width:1600px){

    .logo{ height:110px; }
    .mascota{ height:90px; }

    .search-bar{ max-width:480px; }

}

/* 1440px ↓ */
@media (max-width:1440px){

    .logo{ height:105px; }
    .mascota{ height:85px; }

    .search-bar{ max-width:450px; }

}

/* 1366px ↓ (notebooks comunes) */
@media (max-width:1366px){

    .logo{ height:100px; }
    .mascota{ height:80px; }

    .search-bar{ max-width:420px; }

    .header-left span{
        font-size:15px;
    }

}

/* 1280px ↓ */
@media (max-width:1280px){

    .logo{ height:90px; }
    .mascota{ height:70px; }

    .search-bar{ max-width:380px; }

    .textos-header .linea1{
        font-size:14px;
    }

    .textos-header .linea2{
        font-size:11px;
    }

}

/* 1152px ↓ */
@media (max-width:1152px){

    .logo{ height:80px; }
    .mascota{ height:60px; }

    .search-bar{ max-width:340px; }

}

/* 1024px ↓ */
@media (max-width:1024px){

    .logo{ height:75px; }
    .mascota{ height:55px; }

    .search-bar{ max-width:300px; }

}