/* ================================
   GENERAL
=================================*/
body{
    font-family: 'Poppins', sans-serif;
    background:#f5f6fa;
}

/* ================================
   NAVBAR
=================================*/
.navbar-custom{
    background:#ff7a00;
    padding:10px 0;
}

.logo-img{
    height:60px;
    width:auto;
    object-fit:contain;
}

/* ================================
   BUSCADOR
=================================*/
.search-box{
    width:100%;
    max-width:500px;
}

.search-input{
    border-radius:30px;
    padding:10px 20px;
    border:none;
}

.search-input:focus{
    box-shadow:0 0 0 3px rgba(255,255,255,0.3);
    outline:none;
}

/* ================================
   ICONOS NAVBAR
=================================*/
/* ICONOS MODERNOS */
.icon-circle{
    width:45px;
    height:45px;
    border-radius:50%;
    border:none;
    background:#fff;
    color:#ff7a00;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    transition:0.3s ease;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.icon-circle:hover{
    background:#000;
    color:#fff;
    transform:translateY(-3px);
}

.cart-count{
    position:absolute;
    top:-6px;
    right:-6px;
    background:#ff3b3b;
    color:#fff;
    font-size:11px;
    padding:3px 6px;
    border-radius:50%;
    font-weight:600;
}
.icon-btn{
    color:#fff;
    font-size:20px;
    margin-left:20px;
    position:relative;
    cursor:pointer;
    transition:0.3s ease;
}

.icon-btn:hover{
    color:#ffd700;
}

.cart-count{
    position:absolute;
    top:-8px;
    right:-10px;
    background:red;
    color:#fff;
    font-size:12px;
    padding:2px 6px;
    border-radius:50%;
}

/* ================================
   TÍTULOS
=================================*/
.section-title{
    font-weight:600;
    color:#222;
}

/* ================================
   PRODUCTOS
=================================*/
.product-card{
    border:none;
    border-radius:20px;
    overflow:hidden;
    transition:0.4s ease;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.product-card img{
    width: 100%;
    height: 220px;   /* Altura fija */
    object-fit: cover;  /* Recorta sin deformar */
}

.price{
    font-weight:600;
    color:#ff6b00;
}

.btn-custom{
    background:#ff7a00;
    border:none;
    border-radius:30px;
    color:#fff;
    transition:0.3s ease;
}

.btn-custom:hover{
    background:#e85d00;
}

/* ================================
   SECCIÓN CATEGORÍAS
=================================*/
.categorias-section{
    background:#ff7a00;
    padding:30px 0;
    color:#fff;
}

.titulo-categorias{
    font-weight:600;
    margin:0;
}

.linea-blanca{
    border-top:2px solid rgba(255,255,255,0.5);
    margin:10px 0 20px 0;
}

.category-wrapper{
    overflow:hidden;
}

.category-scroll{
    display:flex;
    gap:15px;
    overflow-x:auto;
    scroll-behavior:smooth;
}

.category-scroll::-webkit-scrollbar{
    display:none;
}

.category-btn{
    flex:0 0 auto;
    padding:8px 18px;
    border-radius:20px;
    border:none;
    background:#f1f1f1;
    color:#000;
    font-size:14px;
    white-space:nowrap;
    transition:0.3s ease;
}

.category-btn:hover{
    background:#000;
    color:#fff;
}

.category-btn.active{
    background:#ff7a00;
    color:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* Flechas */
.arrow-btn{
    background:#ff7a00;
    border:2px solid #fff;
    color:#fff;
    width:38px;
    height:38px;
    border-radius:8px;
    margin-left:8px;
    transition:0.3s;
}

.arrow-btn:hover{
    background:#fff;
    color:#ff7a00;
}

/* ================================
   SECCIÓN PROVEEDORES (SLIDER)
=================================*/
.proveedores-section{
    background:#ff7a00;
    padding:40px 0;
    overflow:hidden;
}

.slider{
    height:140px;
    overflow:hidden;
    position:relative;
}

.slide-track{
    display:flex;
    width:calc(250px * 12);
    animation:scroll 25s linear infinite;
}

.slide{
    width:250px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
}

.slide img{
    max-height:90px;
    width:auto;
    filter:grayscale(100%);
    transition:0.4s ease;
}

.slide img:hover{
    filter:grayscale(0%);
    transform:scale(1.1);
}

@keyframes scroll{
    0% { transform:translateX(0); }
    100% { transform:translateX(calc(-250px * 6)); }
}

.slider:hover .slide-track{
    animation-play-state:paused;
}

/* ================================
   RESPONSIVE
=================================*/
@media(max-width:768px){

    .slide{
        width:180px;
    }

    .slide-track{
        width:calc(180px * 12);
    }

}
/* ================================
  agiliza la pagina
=================================*/

.slide-track{
    display:flex;
    will-change: transform;
    animation:scroll 25s linear infinite;
}
/* ================================
  FOTEER
=================================*/
.footer {
  background: #ff7a00;
  color: #fff;
  padding: 60px 0 20px;
}

.footer-container {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr; /* mapa ocupa 2 */
  gap: 40px;
}

.footer-logo{
  height:120px;
  margin-bottom:15px;
}

.footer-col h3{
  margin-bottom:15px;
  font-weight:600;
}

.footer-col p{
  font-size:14px;
  line-height:1.6;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}

.footer-col i{
  font-size:16px;
  margin-top:3px;
}

.footer-map iframe{
  width:100%;
  height:200px;
  border:none;
  border-radius:12px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.3);
  margin-top: 40px;
  padding-top: 15px;
  text-align: center;
  font-size: 13px;
  opacity:0.9;
}

/* RESPONSIVE */
@media(max-width:768px){
  .footer-container{
    grid-template-columns: 1fr;
  }

  .footer-map iframe{
    height:180px;
  }
}

/* ================================
     NOSOTROS
=================================*/
.nosotros-section{
  padding:80px 0;
  background:#f8f9fa;
}

.nosotros-title{
  font-size:32px;
  font-weight:700;
  margin-bottom:20px;
  color:#222;
  position:relative;
}

.nosotros-title::after{
  content:"";
  width:60px;
  height:4px;
  background:#ff7a00;
  position:absolute;
  left:0;
  bottom:-8px;
  border-radius:4px;
}

.nosotros-section p{
  font-size:15px;
  line-height:1.8;
  color:#555;
}

.nosotros-img img{
  width:100%;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.nosotros-highlight{
  margin-top:20px;
  padding:15px;
  background:#ff7a00;
  color:#fff;
  border-radius:12px;
  font-weight:600;
  text-align:center;
}

@media(max-width:768px){
  .nosotros-section{
    text-align:center;
  }

  .nosotros-title::after{
    left:50%;
    transform:translateX(-50%);
  }

  .nosotros-img{
    margin-bottom:30px;
  }
}