:root{
  --color-header:#ff4d4d;
  --color-footer:#111111;
  --color-boton-principal:#25d366;
  --color-boton-secundario:#ff4d4d;
  --color-boton-cancelar:#777777;

  --color-fondo:#f5f7fb;
  --color-fondo-secciones:#fafafa;
  --color-fondo-blanco:#ffffff;
  --color-fondo-suave:#f7f7f7;
  --color-fondo-suave-hover:#ececec;

  --color-texto-principal:#333333;
  --color-texto-secundario:#666666;
  --color-texto-modal:#555555;
  --color-texto-claro:#ffffff;

  --color-precio:#ff4d4d;
  --color-borde:#eeeeee;
  --color-borde-input:#dddddd;
  --color-borde-textarea:#cccccc;

  --color-boton-categoria:#f1f1f1;
  --color-boton-categoria-hover:#e7e7e7;

  --color-eliminar:red;

  --sombra-header:0 2px 10px rgba(0,0,0,0.1);
  --sombra-slider:0 6px 16px rgba(0,0,0,0.10);
  --sombra-producto:0 10px 25px rgba(0,0,0,0.07);
  --sombra-carrito:0 10px 25px rgba(0,0,0,0.08);
  --sombra-modal:0 10px 25px rgba(0,0,0,0.2);
  --sombra-boton-flotante:0 8px 20px rgba(0,0,0,0.18);

  --overlay-modal:rgba(0,0,0,0.6);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Poppins', sans-serif;
}

html,
body{
  width:100%;
  overflow-x:hidden;
  background-image:url("Images/Background.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;

  color:var(--color-texto-principal);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

body.no-scroll{
  overflow:hidden;
  position:fixed;
  width:100%;
  overscroll-behavior:none;
}

/* HEADER */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 25px;
  background:var(--color-header);
  color:var(--color-texto-claro);
  box-shadow:var(--sombra-header);
  position:sticky;
  top:0;
  z-index:1000;
}

.logo h1{
  color:var(--color-texto-claro);
  font-weight:600;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logoImg{
  width:40px;
  height:40px;
  object-fit:contain;
}

.btnCarrito{
  font-size:20px;
  background:var(--color-fondo-blanco);
  border:none;
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
}

.accionesHeader{
  display:flex;
  align-items:center;
  gap:10px;
}

.btnHorarios{
  background:var(--color-fondo-blanco);
  border:none;
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
  font-weight:500;
  color:var(--color-texto-principal);
}

/* ZONA CENTRAL SOLO PARA DESKTOP */

.zonaCentral{
  width:100%;
  background:transparent;
  display:flex;
  justify-content:center;
}

.contenidoCentrado{
  width:100%;
    flex:1;
  max-width:860px;
  margin:0 auto;
  background:var(--color-fondo-blanco);
  box-shadow:0 0 0 1px rgba(0,0,0,0.04);
}

/* HORARIOS */

.modalHorarios{
  width:340px;
  text-align:left;
}

.modalHorarios h2{
  text-align:left;
  margin-bottom:15px;
}

.listaHorarios{
  margin-top:15px;
  text-align:left;
}

.listaHorarios p{
  margin-bottom:10px;
  color:var(--color-texto-principal);
  font-size:15px;
  line-height:1.4;
}

/* SLIDER PRODUCTOS */

.sliderProductos{
  width:100%;
  overflow:hidden;
  background:var(--color-fondo-blanco);
  padding:18px 0;
  border-bottom:1px solid var(--color-borde);
  position:relative;
}

.sliderTrack{
  display:flex;
  align-items:center;
  gap:30px;
  width:max-content;
  will-change:transform;
}

.sliderTrack img{
  width:320px;
  height:200px;
  object-fit:contain;
  border-radius:16px;
  flex-shrink:0;
  box-shadow:var(--sombra-slider);
}

@keyframes deslizarProductos{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-1720px);
  }
}

/* CATEGORIAS */

.categoriasAcordeon{
  padding:90px 20px 40px 20px;
  background:var(--color-fondo-blanco);
  border-bottom:1px solid var(--color-borde);
  flex:1;
}

.categoriaBloque{
  max-width:1100px;
  margin:0 auto 44px auto;
}

.categoriaBtn{
  width:100%;
  padding:14px 18px;
  border:none;
  border-radius:20px;
  background:var(--color-boton-categoria);
  cursor:pointer;
  font-weight:500;
  transition:0.2s;
  text-align:center;
  color:var(--color-texto-principal);
  font-size:20px;
}

.categoriaBtn:hover{
  background:var(--color-boton-categoria-hover);
}

.categoriaPanel{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height 0.4s ease, opacity 0.25s ease, margin-top 0.25s ease;
  margin-top:0;
}

.categoriaPanel.abierto{
  max-height:2000px;
  overflow:visible;
  opacity:1;
  margin-top:16px;
}

.panelProductos{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-bottom:30px;
}

/* PRODUCTOS */

.producto{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  background:var(--color-fondo-blanco);
  border-radius:14px;
  padding:20px;

  border:1px solid #a7a7a7;
  box-shadow:var(--sombra-producto);
  transition:0.2s;
  cursor:pointer;
}

.producto:hover{
  transform:translateY(-3px);
}

.producto-info{
  flex:1;
  text-align:left;
}

.producto-info h3{
  margin-bottom:8px;
  font-weight:600;
  color:var(--color-texto-principal);
}

.producto-descripcion{
  font-size:14px;
  color:var(--color-texto-secundario);
  line-height:1.4;
}

.producto-lado-derecho{
  width:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
}

.producto-img{
  width:100%;
  height:120px;
  object-fit:contain;
  border-radius:10px;
  margin-bottom:8px;
  background:var(--color-fondo-blanco);
}

.producto-precio{
  font-weight:600;
  color:var(--color-precio);
  font-size:18px;
  text-align:center;
}

/* CARRITO */

.carrito{
  display:none;
  position:fixed;
  right:20px;
  top:100px;
  width:270px;
  max-height:420px;
  background:var(--color-fondo-blanco);
  padding:20px;
  border-radius:14px;
  box-shadow:var(--sombra-carrito);
  z-index:1000;
  overflow:hidden;
  border:1px solid #8f8f8f;
}

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

.tituloCarrito{
  display:flex;
  align-items:center;
  gap:8px;
}

.tituloCarrito img{
  width:20px;
  height:20px;
  object-fit:contain;
}

.carrito ul{
  list-style:none;
  margin-bottom:10px;
  max-height:200px;
  overflow-y:auto;
}

.carrito li{
  margin-bottom:8px;
  font-size:14px;
  line-height:1.4;
}

.carrito li button{
  border:none;
  cursor:pointer;
  font-size:14px;
  margin-left:0;
}

.total{
  margin-top:10px;
  font-weight:600;
  font-size:18px;
}

.btnPedido{
  margin-top:10px;
  width:100%;
  padding:12px;
  background:var(--color-boton-principal);
  border:none;
  color:var(--color-texto-claro);
  font-size:16px;
  cursor:pointer;
  border-radius:8px;
  font-weight:600;
}

.btnCarrito img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}

.carrito-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 0;
  border-bottom:1px solid var(--color-borde);
  align-items:flex-start;
}

.carrito-item:last-child{
  border-bottom:none;
}

.carrito-item-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.carrito-item-texto{
  font-size:14px;
  line-height:1.3;
}

.carrito-comentario{
  font-size:12px;
  color:var(--color-texto-secundario);
}

.carrito-item-acciones{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
}

.carrito-item-acciones button{
  border:none;
  border-radius:8px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  margin-left:0;
}

.btnEditarItem{
  background:var(--color-boton-cancelar);
  color:var(--color-texto-claro);
}

.btnEliminarItem{
  background:var(--color-boton-secundario);
  color:var(--color-texto-claro);
}

/* MODAL */

.modal{
  overscroll-behavior:contain;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:var(--overlay-modal);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  overflow:hidden;
  padding:20px;
}

.modal-content{
  background:var(--color-fondo-blanco);
  padding:30px;
  border-radius:14px;
  width:320px;
  text-align:center;
  box-shadow:var(--sombra-modal);
  max-height:90vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

.modal-content h2{
  margin-bottom:10px;
  color:var(--color-texto-principal);
}

.modal-content p{
  font-size:14px;
  margin-bottom:10px;
  color:var(--color-texto-modal);
}

.modal-content h3{
  margin-top:10px;
  margin-bottom:10px;
  color:var(--color-texto-principal);
}

.modal-content label{
  display:block;
  margin-top:10px;
  font-weight:500;
  color:var(--color-texto-principal);
}

.modal-content input{
  margin-top:10px;
  padding:6px;
  width:60px;
}

.modal-content button{
  margin-top:10px;
  padding:10px;
  border:none;
  border-radius:8px;
  background:var(--color-boton-secundario);
  color:var(--color-texto-claro);
  cursor:pointer;
  width:100%;
  font-weight:500;
}

.cancelar{
  background:var(--color-boton-cancelar) !important;
}

.modal-img{
  width:100%;
  max-height:220px;
  object-fit:contain;
  border-radius:12px;
  margin:10px 0 14px 0;
}

/* EXTRAS */

#extrasContainer{
  margin-top:10px;
  max-height:200px;
  overflow-y:auto;
}

.extra-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-radius:6px;
  margin-bottom:6px;
  background:var(--color-fondo-suave);
  font-size:14px;
}

.extra-item:hover{
  background:var(--color-fondo-suave-hover);
}

.extra-left{
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.extra-left input[type="checkbox"]{
  margin:0;
  transform:translateY(3px);
}

/* CHECKOUT */

.checkout{
  width:360px;
  max-height:90vh;
  overflow-y:auto;
}

.checkout input,
.checkout select{
  width:100%;
  margin-top:8px;
  margin-bottom:12px;
  padding:8px;
  border-radius:6px;
  border:1px solid var(--color-borde-input);
  color:var(--color-texto-principal);
  background:var(--color-fondo-blanco);
}

#resumenPedido{
  background:var(--color-fondo-suave);
  padding:10px;
  border-radius:8px;
  margin-bottom:10px;
  font-size:14px;
  text-align:left;
}

/* TEXTAREA */

textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--color-borde-textarea);
  font-family:'Poppins', sans-serif;
  font-size:14px;
  resize:none;
  margin-top:6px;
  margin-bottom:12px;
  color:var(--color-texto-principal);
  background:var(--color-fondo-blanco);
}

#comentarioProducto{
  min-height:80px;
}

#comentariosPedido{
  min-height:100px;
}

/* FOOTER */

footer{
  margin-top:auto;
  background:var(--color-footer);
  color:var(--color-texto-claro);
  padding:25px;
  text-align:center;
}

.redes{
  margin-top:15px;
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.redes a{
  display:inline-flex;
}

.redes img{
  width:28px;
  height:28px;
  object-fit:contain;
  transition:0.2s;
}

.redes img:hover{
  transform:scale(1.15);
}

.copy{
  margin-top:20px;
  font-size:14px;
  opacity:0.7;
}

/* BOTON FLOTANTE DESKTOP */

.btnPedidoFlotante{
  position:sticky;
  bottom:20px;
  display:block;
  width:calc(100% - 40px);
  max-width:820px;
  margin:20px auto;
  padding:14px 20px;
  background:var(--color-boton-principal);
  border:none;
  border-radius:12px;
  color:var(--color-texto-claro);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  z-index:3000;
  box-shadow:var(--sombra-boton-flotante);
}

/* MOBILE REAL */

@media (max-width: 768px){

  .topbar{
    padding:12px 10px;
    gap:8px;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:0;
  }

  .logoImg{
    width:28px;
    height:28px;
    flex-shrink:0;
  }

  .logo h1{
    font-size:20px;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .accionesHeader{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
  }

  .btnHorarios{
    padding:6px 10px;
    font-size:13px;
    border-radius:10px;
    white-space:nowrap;
  }

  .btnCarrito{
    padding:6px 8px;
    border-radius:10px;
  }

  .btnCarrito img{
    width:18px;
    height:18px;
  }

  .contenidoCentrado{
    width:100%;
    max-width:100%;
    margin:0;
  }

  .sliderProductos{
    padding:14px 0;
  }

  .sliderTrack{
    gap:16px;
    animation:deslizarProductosMobile 35s linear infinite;
  }

  .sliderTrack img{
    width:220px;
    height:140px;
    border-radius:14px;
  }

   @keyframes deslizarProductosMobile{
    from{
      transform:translateX(0);
    }
    to{
      transform:translateX(-1164px);
    }
  }

  .categoriasAcordeon{
    padding:40px 16px 30px 16px;
  }

  .categoriaBloque{
    margin:0 auto 28px auto;
  }

  .categoriaBtn{
    font-size:18px;
    padding:14px 16px;
  }

  .panelProductos{
    gap:14px;
    padding-bottom:20px;
  }

  .producto{
    gap:12px;
    padding:16px;
  }

  .producto-info h3{
    font-size:16px;
  }

  .producto-descripcion{
    font-size:13px;
  }

  .producto-lado-derecho{
    width:110px;
  }

  .producto-img{
    height:80px;
  }

  .producto-precio{
    font-size:16px;
  }

  .btnPedidoFlotante{
    width:calc(100% - 32px);
    max-width:none;
    margin:16px auto;
    padding:14px 16px;
    font-size:15px;
    bottom:12px;
  }

  .carrito{
    right:10px;
    left:10px;
    top:90px;
    width:auto;
    max-width:none;
    max-height:70vh;
    padding:16px;
  }

  .carrito ul{
    max-height:32vh;
  }

  .checkout{
    width:100%;
    max-width:360px;
  }

  .modal{
    padding:16px;
  }

  .modal-content{
    width:100%;
    max-width:360px;
    margin:0 auto;
    max-height:calc(100vh - 32px);
  }

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

/* PANTALLAS ALTAS / MONITOR VERTICAL */

@media (min-width: 769px) and (min-height: 1200px){

  .zonaCentral{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:300px 0;
  }

  .contenidoCentrado{
    margin:0 auto;
  }

  .logo h1{
    font-size:20px;
  }

  .logoImg{
    width:32px;
    height:32px;
  }

  .carrito{
    position:fixed;
    right:12px;
    top:90px;
    bottom:auto;
    width:260px;
    max-width:260px;
    max-height:320px;
    padding:14px;
    margin:0;
    overflow:hidden;
  }

  .accionesHeader{
    gap:8px;
  }

  .btnHorarios{
    padding:8px 10px;
    font-size:14px;
  }

  .modalHorarios{
    width:320px;
  }

  .sliderProductos{
    padding:18px 0;
  }

  .sliderTrack{
    gap:16px;
  }

  .sliderTrack img{
    width:220px;
    height:140px;
    border-radius:14px;
  }

  @keyframes deslizarProductosMobile{
    from{
      transform:translateX(0);
    }
    to{
      transform:translateX(calc(-50% - 8px));
    }
  }

  .categoriasAcordeon{
    padding:90px 20px 40px 20px;
    background:var(--color-fondo-secciones);
    flex:1; 
  }

  .categoriaBloque{
    margin-bottom:44px;
  }

  .categoriaBtn{
    width:100%;
  }

  .panelProductos{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-bottom:20px;
  }

  .producto{
    gap:14px;
    padding:16px;
  }

  .producto-info h3{
    font-size:16px;
  }

  .producto-descripcion{
    font-size:13px;
  }

  .producto-lado-derecho{
    width:120px;
  }

  .producto-img{
    height:90px;
  }

  .producto-precio{
    font-size:16px;
  }

  .btnPedidoFlotante{
    position:sticky;
    bottom:20px;
    display:block;
    width:100%;
    max-width:810px;
    margin:20px auto;
    padding:14px 20px;
    left:auto;
    right:auto;
    transform:none;
  }

  .carrito h2{
    font-size:15px;
    margin-bottom:8px;
  }

  .carrito ul{
    max-height:120px;
    margin-bottom:8px;
  }

  .carrito li{
    font-size:12px;
    margin-bottom:6px;
    line-height:1.3;
  }

  .total{
    font-size:15px;
    margin-top:8px;
  }

  .btnPedido{
    padding:10px;
    font-size:14px;
  }

  .checkout{
    width:100%;
    max-width:360px;
  }

  .modal{
    align-items:center;
    justify-content:center;
    padding:16px;
    overflow:hidden;
  }

  .modal-content{
    width:100%;
    max-width:360px;
    margin:20px auto;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
  }

  .modal-img{
    max-height:180px;
    object-fit:contain;
  }
}

/*@media (min-width: 769px) and (min-height: 1200px){


  .zonaCentral{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:300px 0;
  }

  .contenidoCentrado{
    margin:0 auto;
  }

  .logo h1{
    font-size:20px;
  }

  .logoImg{
    width:32px;
    height:32px;
  }

  .carrito{
    position:fixed;
    right:12px;
    top:90px;
    bottom:auto;
    width:260px;
    max-width:260px;
    max-height:320px;
    padding:14px;
    margin:0;
    overflow:hidden;
  }

  .accionesHeader{
    gap:8px;
  }

  .btnHorarios{
    padding:8px 10px;
    font-size:14px;
  }

  .modalHorarios{
    width:320px;
  }

  .sliderProductos{
    padding:18px 0;
  }

  .sliderTrack{
    gap:16px;
    animation:deslizarProductosMobile 35s linear infinite;
  }

  .sliderTrack img{
    width:220px;
    height:140px;
    border-radius:14px;
  }

  @keyframes deslizarProductosMobile{
    from{
      transform:translateX(0);
    }
    to{
      transform:translateX(calc(-50% - 8px));
    }
  }

  .categoriasAcordeon{
    padding:90px 20px 40px 20px;
    background:var(--color-fondo-secciones);
    flex:1; 
  }

  .categoriaBloque{
    margin-bottom:44px;
  }

  .categoriaBtn{
    width:100%;
  }

  .panelProductos{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-bottom:20px;
  }

  .producto{
    gap:14px;
    padding:16px;
  }

  .producto-info h3{
    font-size:16px;
  }

  .producto-descripcion{
    font-size:13px;
  }

  .producto-lado-derecho{
    width:120px;
  }

  .producto-img{
    height:90px;
  }

  .producto-precio{
    font-size:16px;
  }

  .btnPedidoFlotante{
    position:sticky;
    bottom:20px;
    display:block;
    width:100%;
    max-width:810px;
    margin:20px auto;
    padding:14px 20px;
    left:auto;
    right:auto;
    transform:none;
  }

  .carrito h2{
    font-size:15px;
    margin-bottom:8px;
  }

  .carrito ul{
    max-height:120px;
    margin-bottom:8px;
  }

  .carrito li{
    font-size:12px;
    margin-bottom:6px;
    line-height:1.3;
  }

  .total{
    font-size:15px;
    margin-top:8px;
  }

  .btnPedido{
    padding:10px;
    font-size:14px;
  }

  .checkout{
    width:100%;
    max-width:360px;
  }

  .modal{
    align-items:center;
    justify-content:center;
    padding:16px;
    overflow:hidden;
  }

  .modal-content{
     width:100%;
    max-width:360px;
    margin:20px auto;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
  }

  .modal-img{
    max-height:180px;
    object-fit:contain;
  }
}*/

/*

para iphone en un futuro
.modal{
  -webkit-overflow-scrolling: touch;
}*/