/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
  --principal: #f4366b;
  --secundario: #914f4a;
  --terceario: #f5ba27;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: 'Roboto Condensed', sans-serif;
  color: #fff;
  background:#f7f7f7;
}

a { text-decoration: none; }
a:hover { color: #d9ba85; text-decoration: none; }

h1,h2,h3,h4,h5,h6 { font-family: "Roboto Condensed", sans-serif; }
p { font-family: 'Roboto Condensed', sans-serif; }

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader{
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background: var(--principal);
}
#preloader:before{
  content:""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px);
  width:60px; height:60px; border:6px solid #fff;
  border-top-color: var(--secundario); border-bottom-color: var(--secundario);
  border-radius: 50%; animation: animate-preloader 1s linear infinite;
}
@keyframes animate-preloader{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/*--------------------------------------------------------------
# Mobile AOS tweak
--------------------------------------------------------------*/
@media (max-width: 768px){
  [data-aos-delay]{ transition-delay:0 !important; }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header{
  background: rgba(12,11,9,0); transition: all .5s; z-index: 997; padding: 15px 0;
}
#header.header-scrolled{ background: rgba(255,255,255,.2); }
#header .logo img{ max-height: 80px !important; }

nav #social{ color: var(--principal) !important; transition:.5s ease !important; }
nav #social:hover{ color: var(--secundario); }
nav .reservar{
  background:#fff; font-weight:400; border:1px solid var(--principal) !important; transition:.5s ease; border-radius: 0px;
  color: var(--principal);
}
nav .reservar:hover{ color:#fff; background: var(--principal); }

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
#hero{
  position: relative; z-index:1; width:100%; height:100vh; padding:0;
  background: url("../img/hero-bg.png") top center/cover;
}
#hero:before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,0); }
#hero .container{ padding-top:110px; }
#hero img{ width:80%; padding-bottom:16px; }

@media (max-width: 992px){ #hero .container{ padding-top:98px; } }

#hero h1{
  margin:0; font-size:40px; font-weight:400; line-height:60px;
  color: var(--principal); font-family:"Roboto Condensed", serif;
}
#hero h2{ color: var(--secundario); margin-bottom:10px; font-size:24px; font-weight:400; }

#hero .btns{ margin-top:30px; }
#hero .btn-menu, #hero .btn-book{
  font-weight:600; font-size:13px; letter-spacing:.5px; text-transform:uppercase;
  display:inline-block; padding:12px 30px; border-radius:50px; transition:.3s; line-height:1;
  color: var(--principal); border:2px solid var(--secundario); background:#fff; border-radius: 0px;
}
#hero .btn-menu:hover, #hero .btn-book:hover{ background: var(--secundario); color:#fff; }
#hero .btn-book{ margin-left:15px; }

@media (max-width: 768px){
  #hero h1{ font-size:40px; line-height:36px; }
  #hero h2{ font-size:18px; line-height:24px; }
}
@media (max-width: 576px){ #hero h1{ font-size:28px !important; } }

/*--------------------------------------------------------------
# Menu Section
--------------------------------------------------------------*/
.menu{
  background: url("../img/menu-back.png") no-repeat center/cover;
  background-attachment: fixed;
}
@media (max-width: 991.98px){ .menu{ background-attachment: scroll; } }

.menu h1{
  color: var(--principal); font-size:60px; font-weight:700; text-transform:uppercase;
}
.menu h3{ color:#000; font-size:24px; }
.menu p{ color:var(--principal); }
.menu span{ color: var(--secundario); font-size:30px; }
.menu img{ width:100%; }
@media (max-width: 576px){ .menu h1 {text-align: center;} .menu p {text-align: center} }

/* Swiper (promos) */
.swiper{ width:100%; height:100%; }
.swiper-slide img{ width:100%; height:auto; border-radius:10px; object-fit:cover; }
.swiper-pagination-bullet{ background-color:#ccc; opacity:1; }
.swiper-pagination-bullet-active{ background-color: var(--secundario); }

/* Chips */
.filter-scroller{
  display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  position: sticky; top:0; z-index:100; padding:.5rem 0;
}
.filter-scroller::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-flex; align-items:center; white-space:nowrap; cursor:pointer;
  border:1px solid var(--principal); background:#fff; color:#222; font-weight:400;
  border-radius:999px; padding:.4rem .9rem; transition: background .25s,color .25s,border-color .25s,transform .1s;
}
.chip:hover{ transform: translateY(-1px); }
.chip.active{ background:var(--principal); color:#fff; border-color:var(--principal); font-weight:600; }
#chipPromos.hidden-chip{ display:none !important; }

/* Product cards */
.product-card .card-body{
  display:flex; flex-direction:column; justify-content:space-between;
}
.product-card .price{ font-weight:700; color: var(--principal); font-size:24px; }
.product-card .card-body h3{ color: var(--principal); font-size:20px; margin-top: 16px;}
.product-card .btn-add{ background: var(--principal); border:none; color:#fff; margin-top:auto; border-radius: none; }
.product-card .btn-add:hover{ background: var(--secundario); border-radius: none !important;  }

/* Promo ribbon */
.product-card .ribbon-promo{
  position:absolute; top:10px; left:-10px; background:var(--principal); color:#fff;
  font-size:12px; font-weight:700; padding:6px 12px; transform:rotate(-6deg);
  border-radius:4px; letter-spacing:.3px; z-index:2; box-shadow:0 5px 12px rgba(229,33,46,.35);
}

/* FLIP effects */
.product-col{ will-change: transform, opacity; transition: transform .28s ease, opacity .22s ease; }
.product-col.is-showing{ opacity:1; transform:scale(1); }
.product-col.is-hiding{ opacity:0; transform:scale(.9); }
.product-col.hidden{ display:none !important; }

/*--------------------------------------------------------------
# Modal (Paquetes)
--------------------------------------------------------------*/
.modal-content{
  border-radius:16px; border:none; box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden;
}
.modal-header{
  background: var(--principal); color:#fff; border-bottom:none; padding:1rem 1.25rem;
}
.modal-header .modal-title{ font-weight:700; font-size:18px; }
.modal-header .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); opacity:.8; }
.modal-header .btn-close:hover{ opacity:1; }

.modal-body{ padding:1.5rem; }
.modal-body h5{ font-size:16px; font-weight:600; color: var(--principal); margin-bottom:.75rem; }
.modal-body .form-check-label{ font-size:14px; color:#333; }
.modal-body .form-check-input:checked{ background-color: var(--principal); border-color: var(--principal); }
.opciones label{ color: var(--principal); }

/* Botones +/- unificados */
.mix-inc,.mix-dec{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; min-width:28px; min-height:28px;
  margin-top:10px; padding:0; cursor:pointer;
  border:1px solid var(--principal); border-radius:6px;
  background:transparent; color: var(--principal);
  font-weight:600; font-size:16px; line-height:1; transition:.2s ease;
}
.mix-inc:hover,.mix-dec:hover{ background: var(--principal); color:#fff; }
.mix-count{ font-weight:600; font-size:15px; color:#333; min-width:20px; text-align:center; }

.modal-footer{
  border-top:none; padding:1rem 1.25rem; justify-content:space-between;
}
.modal-footer .btn{ border-radius:999px; padding:.6rem 1.5rem; font-weight:600; }
.modal-footer .btn-primary{ background: var(--principal); border:none; }
.modal-footer .btn-primary:hover{ background: var(--secundario); }

/*--------------------------------------------------------------
# Chip Abierto/Cerrado
--------------------------------------------------------------*/
.open-chip{
  display:inline-flex; align-items:center; white-space:nowrap; vertical-align:middle;
  padding:12px; min-height:24px;
  border-radius:999px; border:0 !important; background:#999 !important;
  font-size:12px !important; font-weight:600; line-height:1; color:#fff !important;
}
.open-chip.open{  background:#1bb55c !important; }
.open-chip.closed{ background:#e5212e !important; }
#openChip{ visibility:visible !important; opacity:1 !important; }

@media (max-width:575px){
  .open-chip{ display:block; margin:16px auto; width:fit-content; text-align:center; }
}

/*--------------------------------------------------------------
# Carrito
--------------------------------------------------------------*/
.cart-box{ background:#fff; border:1px solid #eee; border-radius:.75rem; }
.cart-box .pedido{ background:none; border:none; }
.cart-box h2{ font-size:24px; color: var(--principal); }
.cart-box .badge{ font-size:18px; background: var(--principal) !important; margin-left:16px; }
.cart-box span{ color: var(--principal); font-size:18px; }
.cart-box .fw-semibold{ color: var(--principal) !important; }

.cart-item{ border-bottom:1px dashed #e9ecef; }
.cart-item:last-child{ border-bottom:0; }
.btn-qty{ min-width:2.25rem; }

/* Sticky desktop */
@media (min-width:576px){
  .cart-sheet.sticky-top{ top:1rem; }
}
@media (min-width:992px){
  .cart-box{ position: sticky; top:96px; }
  .cart-box .sheet-content{ max-height: calc(100vh - 160px); overflow:auto; }
}

/* Bottom sheet móvil */
@media (max-width:575.98px){
  #menu{ padding-bottom:96px; }
  .cart-sheet{
    position: fixed !important; left:0; right:0; bottom:0; top:auto !important;
    z-index:1050; width:100%; margin:0; padding:.75rem 1rem;
    border:1px solid #eee; border-radius:16px 16px 0 0; background:#fff;
    box-shadow:0 -10px 30px rgba(0,0,0,.15);
    transform: translateY(calc(100% - 70px)); transition: transform .5s ease;
    display:flex; flex-direction:column; max-height: calc(100vh - env(safe-area-inset-bottom) - 8px);
  }
  .cart-sheet[data-open="true"]{ transform: translateY(0); }

  .sheet-handle{
    background:transparent; border:0; padding:.5rem 0; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  }
  .sheet-content{
    flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; max-height:unset;
  }
  .sheet-backdrop{
    position: fixed; inset:0; z-index:1040; background: rgba(0,0,0,.35);
  }
}

/* Bloqueo de scroll cuando el carrito está abierto */
body.sheet-open{ overflow:hidden; height:100%; touch-action:none; }

/* Botón cerrar (móvil) */
.btn-close-mobile{ display:none; }
@media (max-width:575.98px){ .btn-close-mobile{ display:block; } }

section.menu, .menu .container, .menu .row{ overflow:visible !important; }

#closeCart{ background:#007bff; border:none; font-weight:600; }
#closeCart:hover{ background:#0056b3; }

/*--------------------------------------------------------------
# Menu
--------------------------------------------------------------*/

.footer {background-color: var(--principal);}
.footer .logo-footer {width: 100%;}
.footer p {font-weight: 300;}
.footer a {color: #fff; transition: .5s ease;font-size: 16px;}
.footer a:hover {color: var(--rojo);}
.footer .social {font-size: 24px !important;}
.pl-3 {padding-left: 16px;}

@media (max-width: 576px) {
  .footer h2 {text-align: center;}
  .footer p {text-align: center;}
  .footer .ref {text-align: center;margin: 0 auto;}
}

/* ====== Pedido: Modo Recoger / Entrega ====== */
#orderModeGroup {
  background: #fff;
  border: 1px solid #eee;
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

#orderModeGroup label.form-label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: var(--principal);
  margin-bottom: .75rem;
}

#orderModeGroup .form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
}

#orderModeGroup .form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 0;
  border: 2px solid var(--principal);
  cursor: pointer;
}

#orderModeGroup .form-check-input:checked {
  background-color: var(--secundario);
  border-color: var(--secundario);
  box-shadow: 0 0 0 2px rgba(192, 51, 19, 0.25);
}

#orderModeGroup .form-check-label {
  font-weight: 500;
  color: var(--principal);
  font-size: 15px;
  cursor: pointer;
}

/* Mejorar hover de radios */
#orderModeGroup .form-check-input:hover {
  border-color: var(--secundario);
}

#sendWA.disabled, #sendWA:disabled { opacity:.5; cursor:not-allowed; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
#sendWA.shake { animation: shake .35s linear; }