/* =====================================================
   🔰 GENERAL (toda la página)
===================================================== */
body{
  margin:0;                         /* quita espacios del navegador */
  font-family:'Roboto', sans-serif; /* tipo de letra */
  background:#f3e3a3;               /* fondo crema */
}

/* contenedor central */
.container{
  width:95%;
  max-width:1100px;
  margin:8px auto;                  /* centra el contenido */
}


/* =====================================================
   🔴 HEADER (parte roja de arriba)
===================================================== */
header{
  background:#8B0000;               /* rojo */
  padding:8px 15px;                /* altura del header */
  border-radius:0 0 20px 20px;     /* bordes abajo redondeados */
  position:relative;               /* necesario para centrar menú */
}

/* acomoda logo y botones */
header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* LOGO */
.photo img{
  width:85px;                      /* tamaño del logo */
}

/* =====================================================
   🟡 TITULO "MENÚ" (centrado)
===================================================== */
.menu-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);      /* centra perfecto */
  color:#f3c75f;                  /* color dorado */
  font-size:36px;                /* tamaño del texto */
  margin:0;
  font-weight:bold;
}


/* =====================================================
   🔘 BOTONES DERECHA (Sesión / SpeakEat)
===================================================== */
.Opciones{
  display:flex;
  flex-direction:column;          /* uno debajo del otro */
  gap:5px;
}

.Opciones a{
  background:#4a1a1a;
  color:#fff;
  padding:5px 8px;
  border-radius:8px;
  text-decoration:none;
  font-size:11px;
  text-align:center;
}


/* =====================================================
   🌐 IDIOMA (arriba derecha)
===================================================== */
.idioma-box{
  position:absolute;
  right:20px;                     /* lo manda a la derecha */
  top:10px;                       /* altura */
  color:white;
  font-size:13px;
}

.idioma-box select{
  margin-left:5px;
  padding:3px;
  border-radius:5px;
  border:none;
}

.label-idioma{
  font-size:13px;
  color:#f3c75f;
  margin-left:900px;
  right: 20px /* lo manda a la izquierda del select */
  
}


/* =====================================================
   🟢 FILTROS
===================================================== */
#section-filters{
  background:#f3e3a3;
  padding:8px;
  border-radius:20px;
  margin:8px auto;
}

.container-filters {
  display: flex;
  align-items: center;
  gap: 5px;
}

#section-filters span{
  font-size:14px;
}

#section-filters button{
  border:none;
  border-radius:20px;
  padding:5px 12px;
  font-size:12px;
  margin-right:8px;
  cursor:pointer;
}

/* colores de botones */
.activo{ background:#5bc75b; color:white; }
.popular{ background:#d63b3b; color:white; }
.oferta{ background:#1fa64a; color:white; }
.nuevo{ background:#ff9800; color:white; }


/* =====================================================
   📂 CATEGORÍAS
===================================================== */
#section-category{
  background:#eee0b8;
  padding:8px;
  border-radius:20px;
  margin-bottom:10px;
  text-align:center;
}

#section-category button{
  border:none;
  background:transparent;
  margin:0 10px;
  font-size:13px;
  cursor:pointer;
}


/* =====================================================
   🧱 GRID (donde están los platillos)
===================================================== */
.container-platillos{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 3 columnas */
  gap:15px;                            /* espacio entre tarjetas */
}


/* =====================================================
   🍔 TARJETA DE COMIDA
===================================================== */
.platillo{
  border-radius:20px;
  overflow:hidden;
}

/* PARTE ROJA (arriba) */
.img-platillo{
  background:#a00000;
  height:180px;
  border-radius:20px 20px 0 0;
  position:relative;
}

/* =====================================================
   🏷️ ETIQUETAS
===================================================== */

.etiqueta{
  position:absolute;
  top:10px;
  right:10px;

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

  color:white;
  font-size:11px;
  font-weight:bold;

  text-transform:uppercase;
}

/* POPULAR */
.popular{
  background:#d63b3b;
}

/* OFERTA */
.oferta{
  background:#1fa64a;
}

/* NUEVO */
.nuevo{
  background:#ff9800;
}

/* PARTE GRIS (abajo) */
.description{
  background:#e6e6e6;
  padding:12px;
  border-radius:0 0 20px 20px;
  text-align:center;
}

/* TITULO DEL PLATILLO */
.description h4{
  font-size:18px;
  margin:5px 0;
}

/* DESCRIPCIÓN */
.description p{
  font-size:14px;
  margin:6px 0;
}

/* =====================================================
   💲 PRECIO
===================================================== */
.precio{
  font-size:18px;
  font-weight:bold;
  color:#8B0000;
  margin-top:10px;
}


/* =====================================================
   🔗 BOTÓN VER DETALLES
===================================================== */
.btn-detalles{
  display:inline-block;
  margin-top:12px;
  padding:8px 16px;
  background:#8B0000;
  color:white;
  text-decoration:none;
  border-radius:10px;
  font-size:14px;
  font-weight:bold;
  transition:0.2s;
}

/* efecto al pasar el mouse */
.btn-detalles:hover{
  background:#c40000;
  transform:scale(1.05);
}

/* LINK */
.btn-detalles{
  display:inline-block;
  margin-top:5px;
  font-size:13px;
  color:#6a00a3;
}


/* =====================================================
   🔻 FOOTER (parte de abajo)
===================================================== */
footer{
  background:#8B0000;
  border-radius:20px 20px 0 0;
  padding:25px;
  margin-top:15px;
  text-align:center;
  color:black;
  font-size:12px;
}