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

html, body{
margin: 0;
}

body{
min-height: 100dvh;
min-height: 100vh;
display: flex;
flex-direction: column;
background: #8BCB63;
color:#333;
}

header{
background:#3F6F2A;
color:white;
padding:20px;
text-align:center;
}

header img{
width: 140px;
height: auto;
vertical-align:middle;
}

nav{
background:#5F973F;
display:flex;
justify-content:center;
gap:20px;
padding:10px;
flex-wrap:wrap;
}

nav a{
color:white;
text-decoration:none;
font-weight:bold;
}

main{
flex:1;
display: flex;
flex-direction: column;
}

.home{
    height: calc(100vh - 100px);
}

section{
padding:40px 20px;
max-width:1200px;
margin:auto;
}

h1{
margin-bottom:20px;
text-align:center;
color: #fafafa;
}

#menu, #panes, #especiales{
    width: 100%;
}


.menu-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.sandwich{
background: #5F973F;
color: #fafafa;
padding:20px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
transition:transform 0.2s;
}

.sandwich:hover{
transform:scale(1.05);
}

.sucursales{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.sucursal{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
text-align:center;
cursor:pointer;
transition:transform 0.2s;
}

.sucursal:hover{
transform:scale(1.05);
}

footer{
background:#3F6F2A;
color:white;
text-align:center;
padding: 20px;
margin-top: auto;
}

.whatsapp{
position:fixed;
bottom:20px;
right:20px;
width:80px;
height:80px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
font-size:50px;
color:white;
text-decoration:none;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
transition:transform 0.2s;
}

.whatsapp:hover{
transform:scale(1.1);
}

.pedidosya-menu{
position:fixed;
bottom:110px;
right:20px;
display:flex;
z-index:1000;
}

.pedidosya-btn{
width:80px;
height:80px;
border-radius:50%;
background:#ff2b55;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
cursor:pointer;
transition:0.25s ease;
}

.pedidosya-btn.activo{
transform:scale(1.12);
box-shadow:0 6px 16px rgba(0,0,0,0.4);
}

.pedidosya-btn:hover{
transform:scale(1.05);
}

.pedidosya-btn img{
width: 60px;
}

.pedidosya-opciones{
display:none;
position:absolute;
bottom:95px;
right:0;
background:#fff0f4;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,0.25);
overflow:hidden;
min-width:220px;
font-size:16px;
}

.pedidosya-opciones.abierto{
display:block;
}

.pedidosya-opciones a{
display:block;
padding:14px 22px;
text-decoration:none;
color:#ff2b55;
font-weight:600;
border-bottom:1px solid #ffd3dc;
transition:0.2s;
}

.pedidosya-opciones a:hover{
background:#ff2b55;
color:white;
}

.pedidosya-opciones a:last-child{
border-bottom:none;
}

.contacto{
text-align:center;
font-size:18px;
}

.contacto a{
color:#d62828;
text-decoration:none;
font-weight:bold;
}

.animar{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}

.animar.visible{
opacity:1;
transform:translateY(0);
}

.pan-img{
width:100%;
height:120px;
object-fit:contain;
margin-bottom:10px;
border-radius: 20%;
}

.hero{
background:
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("img/sandwich-hero.png") center/cover no-repeat;
height:400px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
padding: 30px 20px;
display:flex;
flex: 1;
flex-direction:column;
align-items:center;
justify-content:center;
color:white;
text-align:center;

}

.hero h1{
font-size:40px;
margin-bottom:10px;
}

.hero-btn{
background:#5F973F;
padding:12px 28px;
border-radius:30px;
color:white;
text-decoration:none;
font-weight:bold;
margin-top:10px;
}

/* contenedor general */
.best-sellers{
padding:40px 20px;
background: #8BCB63;
text-align:center;
flex: 0 0 220px;
width: 100%;
}

.best-sellers h2{
font-size:32px;
margin-bottom:20px;
color: #fafafa;
}

/* slider */
.slider{
overflow: hidden;
display: block;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
scrollbar-width: none;
position:relative;
}

.slider::-webkit-scrollbar {
  display: none;
}
.slides{
display:flex;
gap: 10px;
width: max-content;
will-change: transform;
cursor: grab;
}

.slides:active {
  cursor: grabbing;
}

.slide {
  flex: 0 0 220px; /* ancho fijo */
  text-align: center;
}

.slide img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
}

.slide p {
  font-weight: bold;
  color: #fafafa;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-height: 1.2;
  height: 2.4em; /* asegura altura fija */
}

.google-mini{
    display:inline-block;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    background:#5F973F;
    padding:10px 16px;
    border-radius:999px;
}

/* animación continua */
@keyframes slide{
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* -50% porque duplicamos los slides */
}



@media (max-width: 900px){
  .slide {
    flex: 0 0 200px;
    margin-right: 10px;
  }

  .slide img{
    height: 140px;
  }
}

@media (max-width: 600px){
  .slide {
    flex: 0 0 160px;
    margin-right: 8px;
  }

  .slide img{
    height: 110px;
  }
}