/* ============================================================
   grande-boton.css · EL BOTÓN "PEDIDO GRANDE" DE LA CARTA
   Con el local atendiendo es un link discreto bajo "Pedir ahora".
   Sin atención (html.sin-atencion, lo pone canal.js) es lo que sí se
   puede hacer a esa hora, y se ve como botón.
   ============================================================ */
.btn-grande {
  display: block; text-align: center; text-decoration: underline; text-underline-offset: 3px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .4px; color: #b8b8b8;
  padding: 8px 4px 0;
}
.btn-grande b { color: #F5C518; font-weight: 700; }
.btn-grande span::before { content: ' · '; }

.sin-atencion .btn-grande {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-decoration: none;
  background: rgba(8,8,8,.6); border: 1.5px solid #F5C518; border-radius: 100px; padding: 14px 20px; font-size: 14px;
}
.sin-atencion .btn-grande b { font-weight: 800; font-size: 17px; letter-spacing: 1.5px; text-transform: uppercase; }
.sin-atencion .btn-grande span::before { content: ''; }

@media (max-width: 768px) {
  .hero-ctas { display: flex !important; flex-direction: column; gap: 9px !important; }
  /* La portada del teléfono cabe en una pantalla: la foto cede lo que ocupa el botón. */
  .hero-img-wrap { max-height: clamp(190px, 34svh, 340px) !important; }
  .sin-atencion .hero-img-wrap { max-height: clamp(170px, 30svh, 300px) !important; }
}
@media (max-width: 768px) and (max-height: 700px) {
  .btn-grande { padding-top: 4px; font-size: 14px; }
  .sin-atencion .btn-grande { padding: 10px 14px; }
  .sin-atencion .btn-grande b { font-size: 15px; }
}

/* En el computador va al lado de "Pedir ahora". */
@media (min-width: 769px) {
  .hero-ctas { flex-wrap: wrap; align-items: center; }
  .btn-grande { padding: 0 6px; font-size: 17px; }
  .sin-atencion .btn-grande { padding: 15px 24px; flex-wrap: nowrap; white-space: nowrap; }
}

/* En el pie de la carta */
.footer-grande a b { color: #F5C518; font-weight: 700; }