/* Sitio publico - Entrega 301 */

:root {
  --sitio-oscuro: #16202e;
  --sitio-texto: #2b3545;
  --sitio-suave: #65748b;
  --sitio-borde: #e3e8ef;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--sitio-texto);
  margin: 0;
}

.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 18px; }

/* -------------------------------- Barra -------------------------------- */
.sitio-barra {
  background: #fff;
  border-bottom: 1px solid var(--sitio-borde);
  position: sticky; top: 0; z-index: 40;
}

.sitio-barra-interna {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px;
}

.sitio-marca {
  font-size: 19px; font-weight: 700;
  color: var(--sitio-oscuro); text-decoration: none;
  margin-right: auto;
}

.sitio-menu { display: flex; gap: 4px; }
.sitio-menu a {
  color: var(--sitio-texto); text-decoration: none;
  padding: 8px 13px; border-radius: 7px;
  font-size: 15px;
}
.sitio-menu a:hover { background: #f3f5f9; }
.sitio-menu a.activo { background: var(--sitio-oscuro); color: #fff; }

.sitio-menu-boton {
  display: none;
  border: 1px solid var(--sitio-borde); background: #fff;
  border-radius: 7px; width: 42px; height: 42px; font-size: 17px;
}

/* ------------------------------- Portada ------------------------------- */
.portada {
  background: var(--sitio-oscuro);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 96px 0;
  text-align: center;
}
.portada-interna { max-width: 760px; }
.portada h1 { font-size: 42px; font-weight: 700; margin: 0 0 14px; line-height: 1.15; }
.portada-bajada { font-size: 18px; color: #d7dfea; margin: 0 auto 22px; max-width: 620px; }

.portada-estado {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14);
  border-radius: 20px; padding: 5px 16px;
  font-size: 14px; margin-bottom: 26px;
}
.portada-estado .punto { width: 9px; height: 9px; border-radius: 50%; background: #adb5bd; }
.portada-estado.abierto .punto { background: #40c057; }
.portada-estado.cerrado .punto { background: #fa5252; }

.portada-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.pagina-portada {
  background: var(--sitio-oscuro);
  background-size: cover; background-position: center;
  color: #fff; padding: 76px 0; text-align: center;
}
.pagina-portada h1 { font-size: 34px; font-weight: 700; margin: 0 0 10px; }
.pagina-portada p { color: #d7dfea; margin: 0; }

/* ------------------------------ Secciones ------------------------------ */
.seccion { padding: 56px 0; }
.seccion-gris { background: #f5f6f8; }
.seccion-titulo { font-size: 27px; font-weight: 700; margin: 0 0 24px; }

/* ------------------------------ Productos ------------------------------ */
.grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.producto {
  background: #fff;
  border: 1px solid var(--sitio-borde);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.producto img { width: 100%; height: 170px; object-fit: cover; display: block; }
.producto-sin-foto {
  height: 170px; background: #eef1f6; color: #b4bfcd;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.producto-cuerpo { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.producto h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.producto p { font-size: 14px; color: var(--sitio-suave); margin: 0 0 10px; flex: 1; }
.producto-precio { font-size: 18px; font-weight: 700; }
.producto-precio span { font-size: 13px; font-weight: 400; color: var(--sitio-suave); }

/* -------------------------------- Carta -------------------------------- */
.carta-indice {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px;
}
.carta-indice a {
  background: #f3f5f9; color: var(--sitio-texto);
  text-decoration: none; border-radius: 20px;
  padding: 6px 15px; font-size: 14px;
}
.carta-indice a:hover { background: var(--sitio-oscuro); color: #fff; }

.carta-categoria {
  font-size: 20px; font-weight: 700;
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sitio-borde);
  scroll-margin-top: 80px;
}

.carta-lista { display: flex; flex-direction: column; }

.carta-fila {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f3f7;
}
.carta-fila img { width: 76px; height: 76px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.carta-datos { flex: 1; min-width: 0; }
.carta-datos h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 3px; }
.carta-datos p { font-size: 14px; color: var(--sitio-suave); margin: 0; }
.carta-precio { font-size: 17px; font-weight: 700; white-space: nowrap; }
.carta-precio span { font-size: 12.5px; font-weight: 400; color: var(--sitio-suave); }

.etiqueta-destacado {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  background: #fff3bf; color: #845e00;
  border-radius: 20px; padding: 2px 8px; margin-left: 6px;
  vertical-align: middle;
}

/* ------------------------------- Galeria ------------------------------- */
.grilla-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.grilla-galeria img {
  width: 100%; height: 165px; object-fit: cover;
  border-radius: 10px; display: block;
}

/* ------------------------------- Horarios ------------------------------- */
.tabla-horarios { width: 100%; border-collapse: collapse; }
.tabla-horarios th, .tabla-horarios td {
  padding: 9px 4px;
  border-bottom: 1px solid #f0f3f7;
  font-size: 15px;
  text-align: left;
}
.tabla-horarios th { font-weight: 500; color: var(--sitio-suave); width: 42%; }
.tabla-horarios tr.hoy th, .tabla-horarios tr.hoy td { font-weight: 700; color: var(--sitio-texto); }
.tabla-horarios .nota { display: block; font-size: 12.5px; color: var(--sitio-suave); font-weight: 400; }

/* ------------------------------ Formulario ------------------------------ */
.tarjeta-form, .tarjeta-datos {
  background: #fff;
  border: 1px solid var(--sitio-borde);
  border-radius: 12px;
  padding: 22px;
}

.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.tarjeta-datos .dato {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0;
  font-size: 15px;
}
.tarjeta-datos .dato i { width: 20px; color: var(--sitio-suave); margin-top: 3px; }

/* ------------------------------ Contenido ------------------------------ */
.contenido-pagina { max-width: 780px; }
.texto-rico { font-size: 16.5px; line-height: 1.75; }
.texto-rico h2 { font-size: 22px; font-weight: 700; margin: 30px 0 12px; }
.texto-rico h3 { font-size: 18px; font-weight: 600; margin: 24px 0 10px; }
.texto-rico p { margin: 0 0 16px; }
.texto-rico ul, .texto-rico ol { margin: 0 0 16px; padding-left: 22px; }
.texto-rico li { margin-bottom: 6px; }
.texto-rico img { max-width: 100%; height: auto; border-radius: 10px; }

.llamada {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #f5f6f8;
  border: 1px solid var(--sitio-borde);
  border-radius: 12px;
  padding: 20px;
  flex-wrap: wrap;
}

/* --------------------------------- Pie --------------------------------- */
.sitio-pie {
  background: var(--sitio-oscuro);
  color: #c7d2e0;
  padding: 44px 0 22px;
  margin-top: 40px;
}
.sitio-pie-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px;
  font-size: 15px;
}
.sitio-pie-titulo { color: #fff; font-weight: 600; margin-bottom: 10px; }

.sitio-redes { display: flex; gap: 12px; font-size: 21px; }
.sitio-redes a { color: #c7d2e0; }
.sitio-redes a:hover { color: #fff; }

.sitio-pie-legal {
  margin-top: 28px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px; color: #8b97a6;
}

.boton-whatsapp {
  position: fixed; right: 18px; bottom: 18px;
  width: 54px; height: 54px;
  background: #25d366; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  z-index: 35;
}
.boton-whatsapp:hover { color: #fff; }

/* ------------------------------- Celular ------------------------------- */
@media (max-width: 767.98px) {
  .sitio-menu-boton { display: block; }

  .sitio-menu {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--sitio-borde);
    flex-direction: column;
    padding: 10px 14px 16px;
    gap: 2px;
  }
  .sitio-menu.abierto { display: flex; }
  .sitio-menu a { padding: 11px 13px; }

  .portada { padding: 62px 0; }
  .portada h1 { font-size: 30px; }
  .portada-bajada { font-size: 16px; }

  .seccion { padding: 38px 0; }
  .seccion-titulo { font-size: 23px; }

  .carta-fila img { width: 62px; height: 62px; }
  .grilla-galeria img { height: 130px; }
}