/* RESTify Front — Design System (v0.8 - fixed header + spacing normalized) */
:root{
  --bg:#0b0d10; --card:#11141a; --muted:#8b94a7; --text:#eaf0ff;
  --brand:#5dd3ff; --brand-2:#7d72ff; --accent:#4cffb3; --danger:#ff6372;
  --radius:18px; --container:1180px;

  /* Altura del header fijo (ajústala si tu logo es más alto) */
  --rf-header-h: 66px;

  /* CONTROL DEL “COLGADO” DE LA TARJETA en el hero */
  --intro-hang: 180px;       /* cuánto sale fuera del slider */
  --intro-gap: 0px;          /* espacio extra bajo el hero */
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font:400 16px/1.6 system-ui, Segoe UI, Roboto, Inter, Arial;
  background:linear-gradient(180deg,#0a0c10 0%, #0b0d10 100%);
  color:var(--text);
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 22px}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#061018; font-weight:600;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 30px rgba(93,211,255,.25)
}
.btn.btn-ghost{background:transparent; color:var(--text); border-color:rgba(255,255,255,.15)}

.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#0e1420; border:1px solid rgba(255,255,255,.08); color:var(--brand);
  font-weight:600; font-size:13px
}

.card{
  background:linear-gradient(180deg,#0d1117,#0d1015);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 12px 40px rgba(0,0,0,.25)
}

.h0{font-size:clamp(38px,6vw,62px); line-height:1.05; letter-spacing:-.02em; margin:0}
.h1{font-size:clamp(28px,5vw,42px); line-height:1.1; letter-spacing:-.02em; margin:0}
.h2{font-size:clamp(22px,3.5vw,28px); margin:0 0 8px}
.muted{color:var(--muted)}

/* ===== Header fijo translúcido ===== */
.header{
  position: fixed !important;
  top:0; left:0; right:0; z-index:1000;
  background:rgba(10,12,16,.35);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header.header--solid{
  background:#0b0d10;
  backdrop-filter:none;
}
.header .row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.nav{display:flex; gap:14px; align-items:center}

/* Empuje global bajo header fijo */
main, .container main, body > main.container{
  margin-top: calc(var(--rf-header-h) + 50px) !important;
}

/* ===== Carrito en header (icono + superíndice) ===== */
.cart-link{
  position:relative; display:inline-flex; align-items:center;
  padding:6px 4px; border:none; color:var(--text); line-height:1;
}
.cart-link .icon{width:22px; height:22px; display:block; stroke:currentColor; fill:none; stroke-width:1.8}
.cart-link:hover{ color:#ffffff; }
.cart-badge{
  position:absolute; top:-6px; right:-8px; font-size:12px; line-height:1;
  color:var(--brand); font-weight:800;
}
.cart-link:hover .cart-badge{ color:var(--brand-2); }

/* ===== Secciones base ===== */
.section{padding:48px 0}
.footer{padding:48px 0; border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,#0b0d10,#0a0c10)}

/* =========================================================
   HERO SLIDER (full-bleed)
   ========================================================= */
.hero--flush{ margin-top:0 !important; padding-top:0 !important; }

.hero.slider{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  /* deja espacio para el “colgado” de la tarjeta */
  padding-bottom: calc(var(--intro-hang) + var(--intro-gap));
}
.hero.slider .slider-track{ width:100vw; display:flex; overflow:hidden; scroll-behavior:smooth; }
.hero.slider .slide{
  position:relative; min-width:100vw;
  min-height:clamp(420px, 65vh, 780px);
  display:flex; align-items:center;
}
.hero.slider .slide-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(1.02);
}
.hero.slider .slide-link{ position:absolute; inset:0; z-index:1; }

.hero.slider .slide-inner{
  position:relative; z-index:2;
  width:min(1180px, 92vw); margin:0 auto;
  color:var(--txt,#fff);
  display:flex; flex-direction:column; gap:14px;
}
.hero.slider .slide-inner.align-left{  align-items:flex-start; text-align:left;  }
.hero.slider .slide-inner.align-center{align-items:center;     text-align:center;}
.hero.slider .slide-inner.align-right{ align-items:flex-end;   text-align:right; }

.hero.slider .h0{   font-size:clamp(40px, 6vw, 84px); line-height:1.0; letter-spacing:-.02em; }
.hero.slider .lead{ font-size:clamp(16px, 2vw, 20px); max-width:760px; opacity:.95; }
.hero.slider .txt-shadow{ text-shadow:0 2px 16px rgba(0,0,0,.45); }

/* Controles */
.hero.slider .nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(0,0,0,.25); color:#fff;
  font-size:28px; line-height:42px; text-align:center; cursor:pointer;
}
.hero.slider .nav-btn:hover{ background:rgba(0,0,0,.4); }
.hero.slider .nav-btn.prev{ left:16px; } .hero.slider .nav-btn.next{ right:16px; }

/* =========================================================
   Tarjeta de intro (bloque base + temas)
   ========================================================= */
.rf-hero-intro{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: calc(-1 * var(--intro-hang)); /* cuelga fuera del hero */
  z-index:4;
  border-radius:16px;
  padding:1.2rem 1.4rem;
  max-width:700px;
  box-shadow:0 14px 36px rgba(0,0,0,.25);
  border:1px solid transparent; /* se define en cada tema */
}
.rf-hero-intro h3{ margin:0 0 .35rem 0; font-weight:800; font-size:clamp(1.05rem, 1.6vw, 1.25rem); }
.rf-hero-intro p{ margin:0; line-height:1.5; font-size:clamp(.9rem, 1.4vw, 1rem); }

/* Temas */
.rf-hero-intro.theme-dark{
  background:linear-gradient(180deg,#0d1117,#0d1015);
  color:#fff; border-color:rgba(255,255,255,.08);
}
.rf-hero-intro.theme-dark p{ opacity:.92; }
.rf-hero-intro.theme-light{
  background:#ffffff; color:#0b1220; border-color:rgba(0,0,0,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.20);
}
.rf-hero-intro.theme-light p{ color:#1f2a37; opacity:.95; }

/* Dots */
.rf-hero-dots{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:6;
}
.rf-hero-dots .dot{
  width:10px; height:10px; border-radius:999px;
  background:rgba(0,0,0,.2); border:2px solid #fff; cursor:pointer; opacity:.9;
}
.rf-hero-dots .dot.is-active{ background:var(--brand-2,#7d72ff); }

/* Responsive tarjeta/colgado */
@media (max-width:768px){
  :root{ --intro-hang:40px; --intro-gap:12px; }
  .rf-hero-intro{ left:5vw; right:5vw; transform:none; max-width:none; }
}

/* ===== Grid de destacados ===== */
.menu-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.menu-item{padding:16px; border:1px solid rgba(255,255,255,.06); border-radius:14px; background:#0e1218}
.menu-item .price{font-weight:700; color:var(--accent)}

/* ===== Tarjetas de categorías ===== */
.cat-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.cat-tile{padding:18px; border:1px solid rgba(255,255,255,.06); border-radius:16px; background:linear-gradient(180deg,#0e1218,#0d1116)}
.cat-tile .name{font-weight:700}
.cat-tile .cta{margin-top:10px}
.cat-tile .muted.small{ display:none; }

/* ===== Promos ===== */
.promos-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.promo{padding:16px; border:1px dashed rgba(255,255,255,.16); border-radius:14px; background:#0b0f16}

/* ===== Hero glow de fondo suave ===== */
.hero{position:relative; padding:8px 0 0}
.hero .bg-glow{position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(600px 220px at 10% 10%, rgba(125,114,255,.25), transparent 60%),
  radial-gradient(600px 260px at 90% 15%, rgba(93,211,255,.20), transparent 60%)}

/* ===== Banner modo To-Go dentro del header ===== */
.mode-banner{
  margin-top:8px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:8px 12px;
  background:#0e1420; border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
}
.mode-banner .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#0b0f16; border:1px solid rgba(255,255,255,.10);
  font-weight:600;
}
.mode-banner .close{
  margin-left:6px; cursor:pointer; border:none; background:transparent;
  color:var(--muted); font-size:16px; line-height:1; padding:4px 6px; border-radius:8px;
}
.mode-banner .close:hover{ color:#fff; }

/* ===== Responsive nav ===== */
@media (max-width:640px){ .nav{display:none} }

/* ===== Ajustes de páginas internas (títulos) ===== */
.page-head{ margin-top:12px; margin-bottom:12px; }
.page-head .h1{ margin:0; }

/* ===== Hero sin espacio arriba (consistente) ===== */
.hero, .slider, .hero.slider{ padding-top:0 !important; }
.hero--flush{ margin-top:0 !important; padding-top:0 !important; }

/* ===== Separación consistente: Slider → primera section ===== */
.hero.slider + .section{
  margin-top:0 !important;
  padding-top:14px !important;
}
@media (max-width:768px){
  .hero.slider + .section{ padding-top:12px !important; }
}

/* ===== Limpieza de reglas condicionales que daban diferencias ===== */
/* (evita variaciones entre orders_active.php y my_reservations.php) */
.breadcrumbs{ margin-top:0 !important; }

/* Altura del header fijo (ajústala si cambia) */
:root { --rf-header-h: 66px; }

/* Deja margen al hacer scroll a un #ancla para que no tape el título */
[id] { scroll-margin-top: calc(var(--rf-header-h) + 14px); }

/* Por si el id está en el propio título */
h1[id], h2[id], h3[id] { scroll-margin-top: calc(var(--rf-header-h) + 14px); }

/* Fallback para navegadores viejos */
:target::before {
  content: "";
  display: block;
  height: calc(var(--rf-header-h) + 14px);
  margin-top: calc(-1 * (var(--rf-header-h) + 14px));
}
/* Altura del header fijo */
:root { --rf-header-h: 66px; }

/* Offset universal para cualquier #ancla */
[id] { scroll-margin-top: calc(var(--rf-header-h) + 14px); }

/* Refuerzo específico para #categorias */
section#categorias, [id="categorias"] { scroll-margin-top: calc(var(--rf-header-h) + 14px) !important; }

/* Fallback para navegadores sin scroll-margin-top */
section#categorias::before {
  content: "";
  display: block;
  height: calc(var(--rf-header-h) + 14px);
  margin-top: calc(-1 * (var(--rf-header-h) + 14px));
  pointer-events: none;
}