/* --------------------------------------------------
   Variables de diseño (paleta y espaciados)
-------------------------------------------------- */
:root {
    --color-primary: #1a73e8;
    --color-primary-dark: #0c5db0;
    --color-secondary: #004d7a;
    --color-accent: #ffdd57;
    --color-bg: #f4f2ec;
    --color-text-dark: #34495e;
    --color-footer-bg: #2c3e50;
    --color-footer-text: #ecf0f1;
    --trust-line-h: 48px;
    --navbar-h: 62px;
    --shadow-soft: 0 4px 8px rgba(0,0,0,.1);
}

/* --------------------------------------------------
   Reset / base
-------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
    font-family: 'Arial',sans-serif;
    background: var(--color-bg);
    color: var(--color-text-dark);
    padding-top: calc(var(--trust-line-h) + var(--navbar-h) + 10px);
    overscroll-behavior-y: none;
}

/* --------------------------------------------------
   Trust‑line superior
-------------------------------------------------- */
.trust-line{
    background: linear-gradient(45deg,var(--color-secondary),#00a6b4);
    color:#fff;font-size:.9rem;text-align:center;padding:.6rem 0;
    position:fixed;top:0;left:0;width:100%;z-index:1100;
    border-bottom:2px solid var(--color-accent);
    box-shadow:0 2px 5px rgba(0,0,0,.3);height:var(--trust-line-h);
}
.trust-line marquee{font-weight:600;text-transform:uppercase;letter-spacing:1px;}
.trust-line marquee:hover{color:var(--color-accent);}

/* --------------------------------------------------
   Navbar fijo
-------------------------------------------------- */
.navbar{
    position:fixed;top:var(--trust-line-h);left:0;width:100%;z-index:1050;
    background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);padding-block:.5rem;
    height:var(--navbar-h);
}
.navbar-brand{font-size:1.35rem;}
.navbar-nav .nav-link{padding-inline:.75rem;font-size:1rem;color:var(--color-text-dark);}
.navbar-toggler{padding:.25rem .75rem;}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */
footer{background:var(--color-footer-bg);color:var(--color-footer-text);}
footer h5{margin-bottom:1.5rem;}
footer a{color:#bdc3c7;transition:color .3s;}
footer a:hover{color:var(--color-accent);}
footer .bi{font-size:1.2rem;}

/* --------------------------------------------------
   Formularios
-------------------------------------------------- */
form label{font-weight:700;color:var(--color-text-dark);}
form input,form textarea{border:1px solid #ced4da;border-radius:.25rem;padding:.75rem;}
form input:focus,form textarea:focus{border-color:var(--color-primary);box-shadow:0 0 5px rgba(26,115,232,.5);}
form button[type=submit]{background:var(--color-primary);color:#fff;border:0;transition:.3s;}
form button[type=submit]:hover{background:var(--color-secondary);cursor:pointer;}

/* --------------------------------------------------
   Zoom universal (tarjetas & galerías)
-------------------------------------------------- */
.zoom-container{overflow:hidden;position:relative;}
.zoom-image{transition:transform .5s;width:100%;height:auto;}
.zoom-container:hover .zoom-image{transform:scale(1.06);}

/* --------------------------------------------------
   Tarjetas de categorías / productos
-------------------------------------------------- */
.category-card,.product-card{
    border-radius:.25rem;box-shadow:var(--shadow-soft);overflow:hidden;cursor:pointer;
    transition:transform .3s,box-shadow .3s;height:100%;display:flex;flex-direction:column;
}
.category-card:hover,.product-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px rgba(0,0,0,.15);}
.category-card .card-title,.product-card .card-title{font-weight:700;font-size:1.2rem;color:var(--color-primary);}
.category-card .btn-primary,.product-card .btn-primary{
    background:var(--color-primary);border:0;text-transform:uppercase;font-size:.9rem;
    padding:.5rem 1rem;transition:background .3s;
}
.category-card .btn-primary:hover,.product-card .btn-primary:hover{background:var(--color-primary-dark);}

/* --------------------------------------------------
   Galería de producto en oferta y genérica
-------------------------------------------------- */
#productCarousel .carousel-item img{max-height:400px;object-fit:contain;transition:transform .5s;}
@media(max-width:768px){#productCarousel .carousel-item img{max-height:300px;}}
@media(max-width:576px){#productCarousel .carousel-item img{max-height:250px;}}
.carousel-control-prev-icon,.carousel-control-next-icon{background:rgba(0,0,0,.5);border-radius:50%;}

/* --------------------------------------------------
   Botón flotante y carrito
-------------------------------------------------- */
.draggable{
    position:fixed;bottom:20px;left:20px;background:#28a745;color:#fff;padding:10px;border-radius:50%;
    font-size:18px;cursor:grab;z-index:1001;width:60px;height:60px;display:flex;justify-content:center;align-items:center;
}
.draggable:active{cursor:grabbing;}

.cart-summary{position:fixed;bottom:20px;right:20px;background:#fff;border-radius:8px;
              box-shadow:0 4px 12px rgba(0,0,0,.15);padding:16px;max-width:320px;display:none;z-index:1100}
.cart-summary.active{display:block}
.cart-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cart-item input{width:60px}
@media(max-width:768px){
    .cart-summary{max-width:100%;left:0;right:0;bottom:0;}
    .product-card img{max-height:200px;}
}


/* --------------------------------------------------
   CTA (Contacto)
-------------------------------------------------- */
section[aria-label=Contacto]{background:var(--color-primary);color:#fff;}
section[aria-label=Contacto] .btn-warning{background:var(--color-accent);color:var(--color-primary);border:0;}
section[aria-label=Contacto] .btn-warning:hover{background:#f2c700;color:var(--color-primary-dark);}

/* --------------------------------------------------
   Accesibilidad
-------------------------------------------------- */
:focus-visible{outline:3px dashed var(--color-accent);outline-offset:2px;}