* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
body {
  background-color: #111;
  color: white;
}
.navbar {
  width: 100%;
  height: 100px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-bottom: 0px solid #ffffff1a;
}
.nav-left{
    order:1;
}

.nav-right{
    order:3;
}
.nav-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  display: block;
  transition: all 0.3s ease;
  order: 2; 
}
.nav-logo:hover {
  transform: translate(-50%, -50%) scale(1.05);
}
.logo-desktop {
    display: block;
    width: 70%;
    height: 100%;
    object-fit: contain;
}

.logo-mobile {
    display: none;
    width: 70%;
    height: 100%;
    object-fit: contain;
}
.dropdown {
  position: relative;
}
.dropdown-btn {
  position: relative;
  background-color: #D8C3A5;
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}
.dropdown-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #fcc782;
  transition: left 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  min-width: 240px;
  background: rgba(15,15,15,0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.45);
  z-index: 1001;
}
.dropdown-content .nav-btn.reserva {
  color: #111 !important;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a {
  display: block;
  color: #D8C3A5;
  padding: 18px 22px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.dropdown-content a:hover {
  background: rgba(252,199,130,0.12);
  color: #fcc782;
  padding-left: 28px;
}
.dropdown-btn:hover::before {
  left: 0;
}
.dropdown-btn:hover {
  color: black;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.nav-btn {
  position: relative;
  display: inline-block;

  background: transparent;

  color: white;
  text-decoration: none;

  padding: 12px 22px;

  border-radius: 30px;

  overflow: hidden;

  cursor: pointer;

  transition: all 0.3s ease;

  z-index: 1;
}
.nav-btn.reserva {
  color: white;
}
.nav-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #fcc782;
  transition: left 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
}

.nav-btn:hover::before {
    left: 0;
}

.nav-btn:hover {
    color: white;
}
.nav-btn span {
    position: relative;
    z-index: 1002;
}
.reserva {
  background-color: #D8C3A5;
  color: #111;
}
.cuenta {
  border: 2px solid #D8C3A5;
}
.reserva:hover {
  background-color: #fcc782;
  color: #111;
}
.cuenta:hover {
  background-color: #fcc782;
}
.hero {
  position: relative;
  min-height: 100vh;
  background: url("img/backimage.png.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.hero-content {
  margin-top: 80px;
}
.hero-content h1 {
  font-size: 60px;
  margin-bottom: 20px;
}
.hero-content p {
  font-size: 22px;
  margin-bottom: 30px;
}
.hero-btn {
  background-color: #D8C3A5;
  color: white;
  padding: 14px 30px;
  text-decoration: none;
  border-radius: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
}
.hero-btn:hover {
  background-color: #fcc782;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
/* HERO INFO */
.hero-info {
  position: absolute;
  top: 140px;
  left: 50px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 3;
}
.hero-info-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(5,5,5,0.82);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(184,135,59,0.45);
  border-left: 4px solid #b8873b;
  border-radius: 20px;
  padding: 18px 24px;
  min-width: 260px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.45), 0 0 18px rgba(184,135,59,0.12);
  transition: all 0.3s ease;
}
.hero-info-item:hover {
  transform: translateX(6px);
  background: rgba(20,20,20,0.72);
}
.hero-info-item i {
  color: #ffffff;
  font-size: 28px;
  min-width: 30px;
  text-shadow: 0 0 12px rgba(214,163,84,0.35);
}
.hero-info-item span {
  color: white;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}
/* FOOTER */
.footer {
  background-color: #0a0a0a;
  padding: 80px 60px 30px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
  align-items: start;
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 250px;
}
.footer-column h3 {
  color: #8d8d8d;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.footer-column a {
  color: #D8C3A5;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}
.footer-column a:hover {
  color: #fcc782;
  transform: translateX(4px);
}
.footer-column a i {
  font-size: 16px;
  transition: all 0.3s ease;
}
.footer-column a:hover i {
  transform: translateX(3px);
  color: #fcc782;
}
.footer-bottom {
  margin-top: 60px;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.footer-bottom p {
  color: #6f6f6f;
  font-size: 14px;
  letter-spacing: 0.5px;
}
/* CLUB SECTION */
.club-section {
  position: relative;
  min-height: 500px;
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 40px;
  overflow: hidden;
}
.club-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}
.club-tag {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: #D8C3A5;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 25px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
}
.club-content h2 {
  font-size: 54px;
  line-height: 1.1;
  margin-bottom: 25px;
  color: white;
}
.club-content p {
  font-size: 19px;
  color: #b8b8b8;
  line-height: 1.7;
  margin-bottom: 40px;
}
.club-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.club-btn {
  position: relative;
  display: inline-block;
  padding: 20px 52px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  transition: all 0.4s ease;
  z-index: 1;
}
.club-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #fcc782;
  transition: left 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
}
.club-btn:hover::before {
  left: 0;
}
.club-btn.primary {
  background: #D8C3A5;
  color: black;
  box-shadow: 0 10px 30px rgba(216,195,165,0.18);
}
.club-btn.secondary {
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  backdrop-filter: blur(10px);
}
.club-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.club-btn.secondary:hover {
  background: rgba(255,255,255,0.06);
}
.club-text {
  max-width: 750px;
}
/* RESERVAS */
.reservas-page {
  min-height: 100vh;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 40px 40px;
}
.reservas-card {
  width: 100%;
  max-width: 660px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.reservas-card h1 {
  font-size: 34px;
  margin-bottom: 10px;
}
.reservas-card > p:not(.horario-subtitulo):not(.horario-label):not(.horario-hora) {
  color: #b8b8b8;
  margin-bottom: 20px;
  font-size: 15px;
}
.reservas-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reservas-form input,
.reservas-form textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: white;
  outline: none;
  text-align: left;
  box-sizing: border-box;
}
.reservas-form input::placeholder,
.reservas-form textarea::placeholder {
  color: #aaa;
}
.reservas-form textarea {
  min-height: 70px;
  resize: none;
}
.form-row {
  display: flex;
  gap: 18px;
}
.club-tag {
  margin-bottom: 14px;
}
/* DATE INPUT */
.date-input-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.date-input-container input {
  width: 100%;
  padding-right: 55px;
  box-sizing: border-box;
}
.date-input-container i {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: #D8C3A5;
  font-size: 18px;
  pointer-events: none;
}
/* FLATPICKR */
.flatpickr-calendar {
  background: #1f1f1f !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45) !important;
  padding: 10px;
}
.flatpickr-months { background: transparent !important; }
.flatpickr-current-month { color: #D8C3A5 !important; }
.flatpickr-monthDropdown-months,
.numInput.cur-year { color: #D8C3A5 !important; }
.flatpickr-weekday { color: #a5a5a5 !important; font-weight: 600; }
.flatpickr-day { color: #D8C3A5 !important; border-radius: 12px !important; transition: all 0.25s ease; }
.flatpickr-day:hover { background: rgba(216,195,165,0.18) !important; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange { background: #D8C3A5 !important; border-color: #D8C3A5 !important; color: black !important; }
.flatpickr-day.today { border-color: #fcc782 !important; }
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: #D8C3A5 !important; }
.flatpickr-time { background: #1f1f1f !important; border-top: 1px solid rgba(255,255,255,0.08); }
.numInputWrapper input { color: #D8C3A5 !important; }
/* SELECT PERSONAS */
.personas-select-container {
  position: relative;
  width: 100%;
}
.personas-select-container select {
  width: 100%;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #1f1f1f;
  color: #a5a5a5;
  font-size: 15px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.personas-select-container select:hover { border-color: rgba(216,195,165,0.35); }
.personas-select-container i {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  color: #D8C3A5;
  pointer-events: none;
  font-size: 14px;
}
.personas-select-container select option { background: #1f1f1f; color: #D8C3A5; }
/* CARTA */
.carta-page {
  background: #111;
  min-height: 100vh;
  padding: 160px 50px 90px;
}
.carta-header {
  max-width: 900px;
  margin: 0 auto 70px;
  text-align: center;
}
.carta-header h1 { font-size: 58px; margin: 25px 0 20px; }
.carta-header p { color: #b8b8b8; font-size: 18px; line-height: 1.7; }
.sushi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  max-width: 1400px;
  margin: 0 auto;
}
.sushi-card {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  overflow: hidden;
  transition: all 0.4s ease;
}
.sushi-card:hover { transform: translateY(-8px); box-shadow: 0 18px 45px rgba(0,0,0,0.4); }
.sushi-card img { width: 100%; height: 230px; object-fit: cover; background: #222; }
.sushi-info { padding: 24px; }
.sushi-info h3 { color: #D8C3A5; font-size: 21px; margin-bottom: 12px; }
.sushi-info p { color: #b8b8b8; font-size: 15px; line-height: 1.6; }
.sushi-precio { color: #fcc782; font-size: 16px; font-weight: 600; margin-top: 8px; display: block; }
.menu-categorias { max-width: 1400px; margin: 0 auto; }
.menu-categoria { margin-bottom: 90px; }
.menu-categoria h2 {
  color: #D8C3A5;
  font-size: 38px;
  margin-bottom: 35px;
  border-bottom: 1px solid rgba(216,195,165,0.25);
  padding-bottom: 18px;
}
/* MENÚ PAGE */
.menu-page {
  min-height: 100vh;
  background: #080808;
  padding: 160px 40px 100px;
}
.menu-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}
.menu-card {
  position: relative;
  min-height: 620px;
  height: 100%;
  background: #0b0b0b;
  border: 1px solid #b8873b;
  border-radius: 22px;
  overflow: hidden;
  text-align: center;
  transition: all 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-80px);
  animation: menuReveal 1s ease forwards;
}
.menu-card:nth-child(1) { animation-delay: 0.2s; }
.menu-card:nth-child(2) { animation-delay: 0.5s; }
.menu-card:nth-child(3) { animation-delay: 0.8s; }
.menu-card:hover {
  transform: translateY(-18px) scale(1.02) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.menu-card img { width: 100%; height: 260px; object-fit: cover; display: block; filter: brightness(0.78); }
.menu-card::after {
  content: "";
  position: absolute;
  top: 170px;
  left: 0;
  width: 100%;
  height: 160px;
  background: linear-gradient(to bottom, rgba(11,11,11,0), #0b0b0b 80%);
  pointer-events: none;
}
.menu-card-content {
  position: relative;
  z-index: 2;
  padding: 45px 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 260px);
}
.menu-card-content h2 {
  color: white;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.menu-card-content h2 strong {
  display: block;
  color: #b8873b;
  font-size: 42px;
  margin-top: 10px;
}
.menu-price {
  display: block;
  color: white;
  font-size: 42px;
  font-weight: 300;
  margin: 20px 0 16px;
}
.menu-card-content p { color: #e4e4e4; font-size: 15px; line-height: 1.7; }
.menu-note {
  text-align: center;
  margin-top: 50px;
  color: #b8873b;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.menu-title-block {
  text-align: center;
  max-width: 950px;
  margin: 0 auto 90px;
}
.menu-mini-title {
  display: inline-block;
  color: #b8873b;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid rgba(184,135,59,0.35);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  margin-bottom: 30px;
}
.menu-title-block h1 {
  color: white;
  font-size: 78px;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 28px;
}
.menu-title-block h1 strong {
  display: block;
  color: #b8873b;
  font-size: 92px;
  font-weight: 700;
}
.menu-title-block p { color: #cfcfcf; font-size: 20px; line-height: 1.8; }
@keyframes menuReveal {
  from { opacity: 0; transform: translateY(-80px); }
  to { opacity: 1; transform: translateY(0); }
}
/* EVENTOS */
.eventos-page {
  min-height: 100vh;
  background: #080808;
  padding: 160px 40px 100px;
}
.eventos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}
.evento-card {
  position: relative;
  height: 650px;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
}
.evento-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.evento-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.evento-card:hover img { transform: scale(1.06); }
.evento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.2));
}
.evento-content {
  position: absolute;
  bottom: 40px;
  left: 35px;
  right: 35px;
  z-index: 2;
}
.evento-content span { color: #b8873b; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; }
.evento-content h2 { color: white; font-size: 42px; margin: 18px 0; }
.evento-content p { color: #d0d0d0; font-size: 17px; line-height: 1.7; }
/* LOCATION */
.location-section { background: #111; padding: 100px 40px; }
.location-content {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.location-text h2 { font-size: 50px; margin: 25px 0 20px; color: white; }
.location-text p { color: #b8b8b8; font-size: 18px; line-height: 1.7; }
.location-info { margin: 35px 0; }
.location-info p { color: #D8C3A5; font-size: 16px; margin-bottom: 12px; }
.location-info strong { color: white; }
.location-btn {
  display: inline-block;
  position: relative;
  padding: 16px 36px;
  border-radius: 999px;
  background: #D8C3A5;
  color: black;
  text-decoration: none;
  font-weight: 700;
  overflow: hidden;
  z-index: 1;
  transition: all 0.4s ease;
}
.location-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #fcc782;
  transition: left 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: -1;
}
.location-btn:hover::before { left: 0; }
.location-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.location-map {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.location-map iframe { width: 100%; height: 420px; border: none; display: block; filter: grayscale(30%) contrast(1.05) brightness(0.85); }
/* CUENTA */
.cuenta-page {
  min-height: 100vh;
  background: #080808;
  padding: 160px 40px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cuenta-container {
  width: 100%;
  max-width: 1350px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.cuenta-left h1 { color: white; font-size: 72px; line-height: 1.1; margin: 25px 0; }
.cuenta-left h1 strong { color: #b8873b; }
.cuenta-left p { color: #cfcfcf; font-size: 20px; line-height: 1.8; max-width: 550px; }
.cuenta-right {
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 30px;
  padding: 45px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.45);
}
.tabs { display: flex; margin-bottom: 35px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tab-btn { flex: 1; background: transparent; border: none; color: #888; padding: 18px; font-size: 16px; cursor: pointer; transition: 0.3s; }
.tab-btn.active { color: #b8873b; border-bottom: 2px solid #b8873b; }
.account-form { display: none; flex-direction: column; gap: 20px; }
.active-form { display: flex; }
.account-form input {
  height: 60px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #1a1a1a;
  color: #e4e4e4;
  padding: 0 20px;
  font-size: 16px;
  outline: none;
}
.account-form input::placeholder { color: #777; }
.account-btn {
  height: 60px;
  border: none;
  border-radius: 18px;
  background: #b8873b;
  color: black;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}
.account-btn:hover { transform: translateY(-3px); background: #d8a55a; box-shadow: 0 15px 35px rgba(184,135,59,0.35); }
#auth-error {
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: 8px;
  padding: 10px 14px;
}
.forgot-link { font-size: 13px; color: rgba(252,199,130,0.6); text-align: center; text-decoration: none; transition: color 0.2s; }
.forgot-link:hover { color: #fcc782; }
/* PERFIL */
.perfil-card { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.perfil-nivel { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: bold; color: #fcc782; }
.perfil-puntos { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 20px; text-align: center; }
.perfil-puntos p { font-size: 13px; color: #D8C3A5; margin-bottom: 6px; }
.perfil-puntos h2 { font-size: 42px; color: #fcc782; }
.perfil-info { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #D8C3A5; }
.perfil-info i { color: #fcc782; margin-right: 8px; }
.perfil-barra-container { display: flex; flex-direction: column; gap: 6px; }
.perfil-barra-label { font-size: 13px; color: #D8C3A5; }
.perfil-barra { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; }
.perfil-barra-fill { height: 100%; background: #fcc782; border-radius: 10px; transition: width 0.6s ease; }
.perfil-barra-info { font-size: 12px; color: #D8C3A5; opacity: 0.7; }
.perfil-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.perfil-tab-btn { padding: 9px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #999; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.perfil-tab-btn:hover { background: rgba(255,255,255,0.04); color: #ddd; }
.perfil-tab-btn.active { background: rgba(252,199,130,0.12); border-color: #fcc782; color: #fcc782; }
.perfil-panel { display: none; }
.perfil-panel.active { display: block; }
/* BADGE */
.badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.pendiente { background: rgba(255,193,7,0.15); color: #ffc107; }
.badge.confirmada { background: rgba(76,175,80,0.15); color: #4caf50; }
.badge.cancelada { background: rgba(255,107,107,0.15); color: #ff6b6b; }
.badge.completada { background: rgba(33,150,243,0.15); color: #2196f3; }
/* REFERENCIA */
.referencia-box {
  background: rgba(252,199,130,0.08);
  border: 1px solid rgba(252,199,130,0.25);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin: 10px 0;
}
.referencia-box p { color: #D8C3A5; font-size: 13px; margin-bottom: 8px !important; }
.referencia-box h2 { color: #fcc782; font-size: 28px; font-weight: 700; letter-spacing: 3px; }
/* BLOG */
.blog-page { background: #080808; }
.blog-hero {
  position: relative;
  height: 85vh;
  background: url("img/blog-banner.png");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.blog-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.82)); }
.blog-hero-content { position: relative; z-index: 2; max-width: 900px; }
.blog-hero-content h1 { color: white; font-size: 84px; margin: 25px 0; }
.blog-hero-content h1 strong { color: #b8873b; }
.blog-hero-content p { color: #d0d0d0; font-size: 22px; line-height: 1.8; }
.blog-section {
  max-width: 1350px;
  margin: 0 auto;
  padding: 120px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.blog-text h2 { color: white; font-size: 54px; margin-bottom: 30px; }
.blog-text p { color: #cfcfcf; font-size: 18px; line-height: 1.9; margin-bottom: 25px; }
.blog-image img { width: 100%; border-radius: 28px; object-fit: cover; }
.blog-cards {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-card { background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; overflow: hidden; transition: all 0.4s ease; }
.blog-card:hover { transform: translateY(-12px); box-shadow: 0 30px 60px rgba(0,0,0,0.45); }
.blog-card img { width: 100%; height: 300px; object-fit: cover; }
.blog-card-content { padding: 35px; }
.blog-card-content h3 { color: white; font-size: 28px; margin-bottom: 18px; }
.blog-card-content p { color: #cfcfcf; font-size: 16px; line-height: 1.8; }
/* REVIEWS */
.reviews-section { background: #080808; padding: 100px 40px; }
.reviews-header { max-width: 850px; margin: 0 auto 60px; text-align: center; }
.reviews-header h2 { color: white; font-size: 52px; margin: 25px 0 18px; }
.reviews-header p { color: #cfcfcf; font-size: 18px; }
.reviews-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.review-card { background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 26px; padding: 35px; text-align: center; transition: all 0.3s ease; }
.review-card:hover { transform: translateY(-8px); box-shadow: 0 25px 55px rgba(0,0,0,0.4); }
.review-stars { color: #b8873b; font-size: 22px; margin-bottom: 22px; }
.review-card p { color: #d4d4d4; font-size: 17px; line-height: 1.7; margin-bottom: 25px; }
.review-card h3 { color: #D8C3A5; font-size: 18px; }
/* PAGE LOADER */
.page-loader { position: fixed; inset: 0; background: #080808; z-index: 999999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; }
.page-loader.hide { opacity: 0; visibility: hidden; }
.loader-content { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.loader-content img { width: 120px; animation: sushiFloat 2s ease-in-out infinite; }
.loader-bar { width: 220px; height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.loader-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #b8873b, #f3d19c); border-radius: 999px; animation: loadingBar 0.7s ease forwards; }
@keyframes loadingBar { from { width: 0%; } to { width: 100%; } }
@keyframes sushiFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
/* EQUIPO */
.equipo-page { min-height: 100vh; background: #080808; padding: 160px 40px 100px; display: flex; justify-content: center; }
.equipo-card { width: 100%; max-width: 760px; background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 30px; padding: 50px; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.45); }
.equipo-card h1 { color: white; font-size: 52px; margin: 25px 0 20px; }
.equipo-card p { color: #cfcfcf; font-size: 17px; line-height: 1.7; margin-bottom: 35px; }
.equipo-form { display: flex; flex-direction: column; gap: 18px; }
.equipo-form input, .equipo-form select, .equipo-form textarea { width: 100%; padding: 16px 20px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: #1a1a1a; color: #D8C3A5; outline: none; }
.equipo-form textarea { min-height: 120px; resize: none; }
.cv-upload { cursor: pointer; padding: 18px 20px; border-radius: 18px; border: 1px dashed rgba(216,195,165,0.45); color: #D8C3A5; background: #1a1a1a; }
.cv-upload input { display: none; }
/* ALERGENOS */
.alergenos-page { min-height: 100vh; background: #080808; padding: 160px 40px 100px; display: flex; flex-direction: column; align-items: center; }
.alergenos-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 20px; width: 100%; }
.alergenos-table { width: 100%; border-collapse: collapse; }
.alergenos-table thead { background: #151515; }
.alergenos-table th { color: #b8873b; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; padding: 24px; }
.alergenos-table td { color: #d4d4d4; padding: 22px; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); }
.alergenos-table tr:hover { background: rgba(255,255,255,0.03); }
.alergenos-table td:first-child, .alergenos-table th:first-child { text-align: left; }
.alergeno-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.alergeno-tags span { padding: 10px 16px; border-radius: 999px; background: rgba(184,135,59,0.12); border: 1px solid rgba(184,135,59,0.28); color: #D8C3A5; font-size: 14px; }
/* LEGAL */
.legal-page {
  min-height: 100vh;
  background: #111;
  padding: 160px 40px 100px;
  display: block;
}
.legal-container {
  width: 100%;
  max-width: 950px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 30px;
  padding: 60px;
  color: #d4d4d4;
  line-height: 1.9;
}
.legal-container h1 { color: white; font-size: 64px; margin: 25px 0 35px; }
.legal-container h1 strong { color: #b8873b; }
.legal-container h2 { color: white; font-size: 28px; margin: 45px 0 18px; }
.legal-container p, .legal-container li { font-size: 17px; color: #cfcfcf; }
.legal-container ul { padding-left: 20px; }
/* CONTACTO */
.contact-page { min-height: 100vh; background: #080808; padding: 160px 40px 100px; display: flex; align-items: center; justify-content: center; }
.contact-container { width: 100%; max-width: 1400px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.contact-left h1 { color: white; font-size: 72px; line-height: 1.1; margin: 25px 0; }
.contact-left h1 strong { color: #b8873b; }
.contact-left p { color: #cfcfcf; font-size: 20px; line-height: 1.8; max-width: 550px; margin-bottom: 40px; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-info-item { display: flex; align-items: center; gap: 16px; color: white; font-size: 17px; }
.contact-info-item i { color: #b8873b; font-size: 22px; }
.contact-right { background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 30px; padding: 45px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid rgba(255,255,255,0.08); background: #1a1a1a; border-radius: 18px; padding: 18px 20px; color: #D8C3A5; font-size: 16px; outline: none; }
.contact-form textarea { min-height: 160px; resize: none; }
.upload-wrapper { display: none; }
/* PRECOMPRA */
.precompra-menus { display: flex; flex-direction: row; gap: 16px; width: 100%; }
.menu-opcion { flex: 1; cursor: pointer; }
.menu-opcion input[type="radio"] { display: none; }
.menu-opcion-card { border: 2px solid rgba(255,255,255,0.1); border-radius: 16px; overflow: hidden; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; padding-bottom: 16px; height: 100%; }
.menu-opcion-card h3, .menu-opcion-card p { padding: 6px 16px 0; }
.menu-opcion input[type="radio"]:checked + .menu-opcion-card { border-color: #fcc782; box-shadow: 0 0 0 2px #fcc78244; }
.menu-aviso { font-size: 13px; color: #D8C3A5; text-align: center; opacity: 0.75; margin-top: -4px; }
.menu-opcion-icon { font-size: 32px; color: #fcc782; padding: 20px 16px 8px; text-align: center; }
.menu-price { display: block; font-size: 22px; font-weight: 700; color: #fcc782; padding: 4px 16px; }
/* ASIENTO */
.asiento-opcion { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; cursor: pointer; font-size: 15px; width: 100%; }
.asiento-opcion input[type="checkbox"] { width: 18px; height: 18px; accent-color: #fcc782; cursor: pointer; }
/* HORARIOS */
.horario-container { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.horario-grid { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.horario-grid p { margin: 4px 0 0 0; padding: 0; }
.horario-opcion { cursor: pointer; }
.horario-opcion input[type="radio"] { display: none; }
.horario-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px; border: 2px solid rgba(255,255,255,0.1); border-radius: 14px; transition: border-color 0.3s, box-shadow 0.3s; text-align: center; }
.horario-label { font-size: 12px; color: #D8C3A5; text-transform: uppercase; letter-spacing: 1px; }
.horario-hora { font-size: 18px; font-weight: bold; color: white; }
.horario-opcion input[type="radio"]:checked + .horario-card { border-color: #fcc782; box-shadow: 0 0 0 2px #fcc78244; }
.horario-subtitulo { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #fcc782; margin: 10px 0 4px 0; padding: 0; line-height: 1; }
.horario-subtitulo.primero { margin-top: 0; }
.horario-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }
/* INFANTIL */
.infantil-card { display: flex; align-items: center; gap: 14px; background: rgba(252,199,130,0.08); border: 1px solid rgba(252,199,130,0.25); border-radius: 12px; padding: 14px 18px; font-size: 14px; color: #D8C3A5; }
.infantil-card i { font-size: 24px; color: #fcc782; }
.infantil-precio { font-size: 12px; opacity: 0.7; margin-top: 2px; }
/* SUBTOTAL */
.subtotal-box { display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 18px; width: 100%; }
.subtotal-linea { display: flex; justify-content: space-between; font-size: 14px; color: #D8C3A5; }
.subtotal-total { display: flex; justify-content: space-between; font-size: 17px; font-weight: bold; color: #fcc782; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; margin-top: 4px; }
/* PLANO */
.plano-container { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.plano-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #D8C3A5; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.legend-dot.disponible { background: rgba(252,199,130,0.5); }
.legend-dot.seleccionada { background: #fcc782; box-shadow: 0 0 6px rgba(252,199,130,0.6); }
.legend-dot.ocupada { background: rgba(200,60,60,0.6); }
.plano-mesas { position: relative; width: 100%; aspect-ratio: 0.7073; border-radius: 16px; overflow: hidden; border: 1px solid rgba(252,199,130,0.2); }
.plano-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mesa { position: absolute; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 9px; font-weight: 600; color: #18110a; background: rgba(252,199,130,0.18); border: 2px solid rgba(252,199,130,0.6); transition: all 0.15s; border-radius: 4px; }
.mesa.redonda { border-radius: 50%; }
.mesa.hex { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); border-radius: 0; }
.mesa:hover:not(.ocupada) { background: rgba(252,199,130,0.35); border-color: #fcc782; transform: scale(1.1); z-index: 5; }
.mesa.seleccionada { background: rgba(252,199,130,0.5); border-color: #fcc782; box-shadow: 0 0 10px rgba(252,199,130,0.7); color: #ffffff; z-index: 5; }
.mesa.ocupada { background: rgba(200,60,60,0.25); border-color: rgba(200,60,60,0.6); color: rgba(255,150,150,0.9); cursor: not-allowed; }
.mesa-num { font-size: 9px; line-height: 1; color: black; }
.mesa-info-bar { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; }
.mesa-info-text { font-size: 14px; color: #D8C3A5; }
.mesa-info-text strong { color: white; }
.mesa-select-btn { background: #fcc782; color: #18110a; border: none; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; display: none; flex-shrink: 0; }
.mesa-select-btn:hover { background: #f5b85a; }
/* SEÑAL */
.senal-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.senal-opcion { cursor: pointer; }
.senal-opcion input[type="radio"] { display: none; }
.senal-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 2px solid rgba(255,255,255,0.1); border-radius: 14px; transition: border-color 0.3s, box-shadow 0.3s; text-align: center; }
.senal-titulo { font-size: 14px; color: #D8C3A5; font-weight: 600; }
.senal-importe { font-size: 22px; font-weight: 700; color: #fcc782; }
.senal-opcion input[type="radio"]:checked + .senal-card { border-color: #fcc782; box-shadow: 0 0 0 2px #fcc78244; }
.senal-aviso { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.25); border-radius: 12px; padding: 14px 18px; font-size: 13px; color: #D8C3A5; line-height: 1.6; }
.senal-aviso i { color: #ffc107; font-size: 20px; margin-top: 2px; flex-shrink: 0; }
#resumen-pedido { margin-bottom: 24px; }
/* CONFIRMACIÓN */
.reservas-card i.fa-circle-check { margin-bottom: 10px; }
/* COOKIES */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #111; border-top: 1px solid rgba(255,199,130,0.2); padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; z-index: 9999; flex-wrap: wrap; }
.cookie-banner p { color: #ccc; font-size: 14px; margin: 0; flex: 1; min-width: 200px; }
.cookie-banner a { color: #fcc782; text-decoration: underline; }
.cookie-banner-btns { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-btn-aceptar { background: #fcc782; color: #111; border: none; padding: 10px 22px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; }
.cookie-btn-rechazar { background: transparent; color: #888; border: 1px solid rgba(255,255,255,0.15); padding: 10px 22px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.cookie-btn-configurar { background: transparent; color: #fcc782; border: 1px solid rgba(252,199,130,0.3); padding: 10px 22px; border-radius: 10px; font-size: 14px; cursor: pointer; }

/* ===========================
   PANEL ADMIN
=========================== */
.panel-login { min-height: 100vh; background: #080808; display: flex; align-items: center; justify-content: center; padding: 40px; }
.panel-login-card { width: 100%; max-width: 420px; background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 45px; text-align: center; }
.panel-login-card i { font-size: 40px; color: #fcc782; margin-bottom: 16px; }
.panel-login-card h1 { color: white; font-size: 26px; margin-bottom: 8px; }
.panel-login-card p { color: #999; font-size: 14px; margin-bottom: 28px; }
.panel-login-form { display: flex; flex-direction: column; gap: 16px; }
.panel-login-form input { height: 54px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: #1a1a1a; color: #e4e4e4; padding: 0 18px; font-size: 15px; outline: none; }
.panel-login-error { color: #ff6b6b; font-size: 13px; display: none; }
.panel-app { display: none; min-height: 100vh; background: #0c0c0c; }
.panel-sidebar { position: fixed; top: 0; left: 0; width: 240px; height: 100vh; background: #111; border-right: 1px solid rgba(255,255,255,0.06); padding: 30px 0; display: flex; flex-direction: column; }
.panel-logo { padding: 0 28px 30px; font-size: 20px; font-weight: 700; color: #fcc782; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 20px; }
.panel-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; flex: 1; }
.panel-nav-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; color: #999; font-size: 14px; cursor: pointer; transition: all 0.2s; border: none; background: transparent; text-align: left; width: 100%; }
.panel-nav-item i { width: 18px; text-align: center; }
.panel-nav-item:hover { background: rgba(255,255,255,0.04); color: #ddd; }
.panel-nav-item.active { background: rgba(252,199,130,0.12); color: #fcc782; }
.panel-logout { padding: 0 16px; }
.panel-logout button { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,107,107,0.25); background: transparent; color: #ff6b6b; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.panel-logout button:hover { background: rgba(255,107,107,0.08); }
.panel-main { margin-left: 240px; padding: 40px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.panel-header h1 { color: white; font-size: 28px; }
.panel-section { display: none; }
.panel-section.active { display: block; }
.panel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; }
.panel-stat-card { background: #131313; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 22px; }
.panel-stat-card .stat-label { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.panel-stat-card .stat-value { color: #fcc782; font-size: 32px; font-weight: 700; }
.panel-table-wrap { background: #131313; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; }
.panel-table-filters { display: flex; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
.panel-table-filters input, .panel-table-filters select { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 14px; color: #e4e4e4; font-size: 13px; outline: none; }
table { width: 100%; border-collapse: collapse; }
thead { background: #1a1a1a; }
th { text-align: left; padding: 14px 18px; color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
td { padding: 16px 18px; color: #ddd; font-size: 14px; border-top: 1px solid rgba(255,255,255,0.04); }
tr:hover td { background: rgba(255,255,255,0.02); }
.table-actions { display: flex; gap: 8px; }
.table-actions button { border: none; border-radius: 8px; padding: 7px 12px; font-size: 12px; cursor: pointer; font-weight: 600; }
.btn-confirmar { background: rgba(76,175,80,0.15); color: #4caf50; }
.btn-confirmar:hover { background: rgba(76,175,80,0.25); }
.btn-cancelar { background: rgba(255,107,107,0.15); color: #ff6b6b; }
.btn-cancelar:hover { background: rgba(255,107,107,0.25); }
.panel-empty { padding: 60px 20px; text-align: center; color: #666; }
.panel-loading { padding: 60px 20px; text-align: center; color: #888; }
.panel-plano-wrap { background: #131313; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 24px; margin-bottom: 30px; }
.panel-plano-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.panel-plano-header h2 { color: white; font-size: 18px; }
.panel-plano-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-plano-filters input, .panel-plano-filters select { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 14px; color: #e4e4e4; font-size: 13px; outline: none; }
.panel-plano-filters .date-input-container { position: relative; display: flex; align-items: center; }
.panel-plano-filters .date-input-container i { position: absolute; right: 12px; color: #fcc782; pointer-events: none; }
.panel-plano-filters .date-input-container input { padding-right: 36px; cursor: pointer; width: 100%; }
.panel-plano-legend { display: flex; gap: 16px; margin-bottom: 4px; font-size: 13px; color: #aaa; }
.panel-plano-mesas { width: 100%; max-width: 450px; margin: 0 auto; }
.panel-plano-mesas .mesa { font-size: 8px; }
.panel-plano-mesas .mesa-num { color: black; }
.panel-plano-tip { text-align: center; color: #777; font-size: 13px; margin-top: 14px; }
.panel-turnos-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.panel-turno-grupo { background: #1a1a1a; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 16px; }
.panel-turno-grupo-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: #fcc782; margin-bottom: 12px; font-weight: 600; }
.panel-turno-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel-turno-btn { background: #131313; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px 10px; color: #ddd; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.panel-turno-btn:hover { border-color: rgba(252,199,130,0.4); background: rgba(252,199,130,0.06); }
.panel-turno-btn.active { background: rgba(252,199,130,0.18); border-color: #fcc782; color: #fcc782; }
.panel-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: 5000; padding: 20px; }
.panel-modal { width: 100%; max-width: 440px; background: #131313; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 30px; }
.panel-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.panel-modal-header h3 { color: white; font-size: 18px; }
.panel-modal-header h3 span { color: #fcc782; }
.panel-modal-close { background: transparent; border: none; color: #888; font-size: 16px; cursor: pointer; padding: 6px; }
.panel-modal-close:hover { color: #fff; }
.mesa.disponible-click { cursor: pointer; }

/* ===========================
   MEDIA QUERIES
=========================== */
@media (max-width: 1100px) {
  .sushi-grid { grid-template-columns: repeat(3, 1fr); }
  .eventos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .cuenta-container { grid-template-columns: 1fr; }
  .cuenta-left { text-align: center; }
  .cuenta-left p { margin: 0 auto; }
  .blog-section, .blog-cards { grid-template-columns: 1fr; }
  .blog-hero-content h1 { font-size: 58px; }
  .contact-container { grid-template-columns: 1fr; }
  .contact-left { text-align: center; }
  .contact-left p { margin: 0 auto 40px; }
  .contact-info { align-items: center; }
}

@media (max-width: 900px) {
  .hero-info { top: 120px; left: 20px; gap: 14px; }
  .hero-info-item { min-width: 200px; padding: 14px 18px; }
  .hero-info-item span { font-size: 13px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .alergenos-grid { grid-template-columns: 1fr; }
  .panel-sidebar { width: 70px; }
  .panel-logo { display: none; }
  .panel-nav-item span { display: none; }
  .panel-main { margin-left: 70px; padding: 20px; }
  .panel-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* NAV */
  .navbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .nav-left {
    order: 1;
  }

  .nav-logo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    order: 2;
    margin-left: auto;
    width: 60px !important;
    height: 40px !important;
  }

  .nav-right {
    display: none;
  }

    .logo-desktop{
        display:none;
    }

    .logo-mobile{
        display:block;
        height: 40px;
        width: auto;
        object-fit:contain;
    }

  /* HERO */
  .hero { padding: 100px 20px 60px; text-align: center; }
  .hero-content h1 { font-size: 36px; }
  .hero-content p { font-size: 16px; }
  .hero-info { top: auto; bottom: 30px; left: 20px; right: 20px; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .hero-info-item { min-width: auto; padding: 8px 12px; width: auto; }
  .hero-info-item span { display: none; }
  .hero-info-item i { font-size: 20px; }

  /* CLUB */
 .club-content { flex-direction: column; text-align: justify !important; align-items: flex-start; }
  .club-content h2 { font-size: 36px; text-align: left !important; }
  .club-content p { font-size: 16px; text-align: justify !important; }
  .club-tag { text-align: left !important; }
  .club-buttons { justify-content: flex-start; }

  /* FOOTER */
  .footer-container { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px; }

  /* RESERVAS - DISEÑO MÓVIL */
  .reservas-page {
    padding: 80px 0 0 0;
    align-items: flex-start;
    background: url("img/backimage.png.png");
    background-size: cover;
    background-position: center;
    min-height: 100vh;
  }

  .reservas-card {
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    margin: 0;
    padding: 28px 20px 40px;
    box-shadow: none;
    min-height: calc(100vh - 80px);
  }

  .reservas-card h1 {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .reservas-card > p {
    font-size: 14px;
    margin-bottom: 20px;
    color: #aaa;
  }

  .reservas-card {
    background: rgba(10,10,10,0.97) !important;
  }

  .reservas-form .date-input-container {
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
  }

  .reservas-form .date-input-container input {
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    height: 54px !important;
  }

  .reservas-form {
    gap: 14px;
  }

  .reservas-form input,
  .reservas-form textarea {
    height: 54px;
    border-radius: 12px !important;
    font-size: 15px;
  }

  .reservas-form textarea {
    height: 90px;
  }

  .club-btn.primary {
    height: 54px;
    font-size: 16px;
    border-radius: 12px;
  }

  .reservas-form input,
  .reservas-form textarea {
    background: #1a1a1a !important;
  }

  /* PRECOMPRA - TURNOS */
  .horario-fila { grid-template-columns: 1fr; }

  /* PRECOMPRA - MENÚS */
  .precompra-menus { flex-direction: column; gap: 12px; }
  .menu-opcion-card { width: 100%; }

  /* PRECOMPRA - PLANO */
  .mesa-num { font-size: 6px; }
  .mesa-info-bar { flex-direction: column; gap: 10px; align-items: flex-start; }
  .mesa-select-btn { width: 100%; }

  /* SEÑAL */
  .senal-opciones { grid-template-columns: 1fr; }

  /* CUENTA */
  .cuenta-page { padding: 100px 16px 60px; }
  .cuenta-container { gap: 30px; }
  .cuenta-left h1 { font-size: 42px; }
  .cuenta-right { padding: 24px 16px; }
  .perfil-tabs { flex-direction: column; gap: 8px; }
  .perfil-tab-btn { width: 100%; text-align: center; }
 
  /* CARTA */
  .carta-page { padding: 100px 16px 60px; }
  .carta-header h1 { font-size: 38px; }
  .sushi-grid { grid-template-columns: 1fr; }

  /* MENÚ PAGE */
  .menu-page { padding: 100px 16px 60px; }
  .menu-title-block h1 { font-size: 48px; }
  .menu-title-block h1 strong { font-size: 56px; }
  .menu-cards {
    display: flex !important;
    flex-direction: column !important;
    padding: 0;
    gap: 16px;
  }
  .menu-card {
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    text-align: left;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .menu-card img { width: 130px !important; height: 100% !important; min-height: 160px; object-fit: cover; flex-shrink: 0; border-radius: 22px 0 0 22px; }
  .menu-card::after { display: none; }
  .menu-card-content { padding: 16px !important; height: auto !important; justify-content: center; }
  .menu-card-content h2 { font-size: 16px !important; letter-spacing: 1px; margin-bottom: 8px; }
  .menu-card-content h2 strong { font-size: 18px !important; margin-top: 4px; }
  .menu-price { font-size: 22px !important; margin: 6px 0 !important; }
  .menu-card-content p { font-size: 12px !important; }

  /* EVENTOS */
  .eventos-page { padding: 100px 16px 60px; }

  /* LOCATION */
  .location-content { grid-template-columns: 1fr; }
  .location-text h2 { font-size: 36px; }
  .location-text p {
    text-align: justify !important;
  }

  /* ALÉRGENOS */
  .alergenos-page { padding: 100px 0 60px; }
  .alergenos-table { min-width: 500px; font-size: 12px; }
  .alergenos-table th, .alergenos-table td { padding: 10px 8px; white-space: nowrap; }

  /* LEGAL */
  .legal-page { padding: 100px 16px 60px; }
  .legal-container { padding: 24px; }
  .legal-container h1 { font-size: 36px; }

  /* CONTACTO */
  .contact-page { padding: 100px 16px 60px; }
  .contact-left h1 { font-size: 42px; }

  /* PANEL */
  .panel-sidebar { display: none; }
  .panel-main { margin-left: 0; padding: 16px; }
  .panel-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel-turnos-grupos { grid-template-columns: 1fr; }
  .panel-turno-botones { grid-template-columns: 1fr; }

  /* COOKIES */
  .cookie-banner { padding: 16px 20px; flex-direction: column; align-items: flex-start; }
  .cookie-banner-btns { width: 100%; flex-direction: column; }
  .cookie-btn-aceptar, .cookie-btn-rechazar, .cookie-btn-configurar { width: 100%; text-align: center; }

  /* DROPDOWN */
  .dropdown-content .nav-btn.reserva { color: #111 !important; }
}