/* Forbici · style.css
   Base tipográfica, layout, componentes y páginas públicas/admin.
   Mantén este archivo como “columna vertebral”. */

/* ---------- Variables ---------- */
:root{
  --brand: #800020;
  --brand-hi: #a0102e;
  --gold: #D4AF37;

  --ink: #111;
  --ink-soft: #333;
  --muted: #666;

  --bg: #fff;
  --bg-dark: #0f0f12;
  --bg-dark-2: #0b0b0e;

  --line: #eee;
  --line-dark: rgba(255,255,255,.08);

  --card: #fff;
  --chip: #f5f5f5;

  --radius: 16px;
}

/* ---------- Reset/Global ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }

/* ---------- Layout genérico ---------- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.page-hero { padding: 18px 0 8px; border-bottom: 1px solid var(--line); background: #fff; }
.page-title { margin: 0; font-family: "Playfair Display", serif; }
.page-lead { margin: .25rem 0 0; color: #555; }

/* Utilidades */
.invert-on-dark{ filter: invert(100%) brightness(115%) contrast(105%); }
.muted { color: var(--muted); }
.center { text-align:center; }
.right { text-align:right; }
.mt-1 { margin-top:.25rem; } .mt-2 { margin-top:.5rem; } .mt-3 { margin-top:.75rem; }
.mb-1 { margin-bottom:.25rem; } .mb-2 { margin-bottom:.5rem; } .mb-3 { margin-bottom:.75rem; }
.p-1 { padding:.25rem; } .p-2 { padding:.5rem; } .p-3 { padding:.75rem; }
.hr { height:1px; background:var(--line); margin:10px 0; }
.list-unstyled { list-style:none; margin:0; padding:0; }

/* ---------- Header oscuro (no tocamos PHP) ---------- */
.site-header { position: sticky; top: 0; z-index: 30; }
.site-header.site-header--dark{
  background: linear-gradient(180deg, rgba(12,12,15,.96), rgba(14,14,18,.96));
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 2px 18px rgba(0,0,0,.35);
}
/* fondo sólido cuando el header tiene la clase .scrolled */
.site-header.site-header--dark.scrolled{
  background:#0f0f13;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:8px 0; min-height:88px; }
.brand { display:flex; align-items:center; gap:.9rem; text-decoration:none; color:#f1f1f3; }
.brand .logo, .brand-logo { height:54px; width:auto; display:block; }

.site-nav ul{ display:flex; gap:.35rem; align-items:center; list-style:none; margin:0; padding:0; }
.site-nav a{ text-decoration:none; color:#f0f0f2; padding:.62rem .9rem; border-radius:999px; font-weight:700; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); }
.site-nav a:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); box-shadow: 0 6px 20px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04); }
.site-nav .is-active{ color:#fff; background:rgba(179,14,43,.22); border-color:rgba(179,14,43,.55); box-shadow:0 8px 24px rgba(179,14,43,.35), inset 0 0 0 1px rgba(179,14,43,.25); }

/* Navegación móvil */
.nav-toggle{ display:none; }
@media (max-width: 920px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; padding:.45rem .6rem;
    border:1px solid rgba(255,255,255,.14); border-radius:.6rem; background:transparent; color:#fff;
  }
  /* Fuerza contraste del botón en móvil (visible sobre fotos) */
  .site-header--dark .nav-toggle{
    background:#800020 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px !important;
    box-shadow:0 6px 16px rgba(128,0,32,.35) !important;
  }

  .site-nav{
    position: fixed; inset: 88px 0 0 auto; right:-100%;
    width:min(360px,88vw);
    background:linear-gradient(180deg, #121217, #0f0f13);
    border-left:1px solid rgba(255,255,255,.12);
    transition:right .24s ease; box-shadow:-14px 0 40px rgba(0,0,0,.55);
  }
  .site-nav.open{ right:0; }
  .site-nav ul{ flex-direction:column; align-items:stretch; padding:14px; gap:6px; }
}

/* ---------- Botones genéricos ---------- */
.btn { display:inline-block; padding:.58rem .95rem; border-radius:.8rem; font-weight:600; text-decoration:none; background:#f5f5f5; color:var(--ink); transition:.2s ease; border:1px solid transparent; }
.btn:hover { background:#fff; }
.btn-primary{ background: linear-gradient(180deg,#9a0a29,#800020); color:#fff; border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 30px rgba(128,0,32,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
.btn-primary:hover{ filter:brightness(1.06); box-shadow:0 16px 38px rgba(128,0,32,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
.btn-ghost { background: transparent; border:1px solid var(--line); }

/* ---------- Chips/Badges ---------- */
.chip { display:inline-block; padding:.25rem .6rem; background:var(--chip); border-radius:999px; text-decoration:none; color:inherit; }
.badge { display:inline-block; padding:.1rem .45rem; border-radius:999px; font-size:.75rem; background:#111; color:#fff; }

/* ---------- Grids ---------- */
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 1000px){ .grid-3 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- RTE ---------- */
.rte p { margin: .4rem 0 1rem; color:var(--ink-soft); }

/* ---------- Barra de categorías (sticky) ---------- */
.catbar {
  position: sticky; top: 88px; z-index: 50; /* aseguramos que no quede detrás */
  background:#fff; border-bottom:1px solid var(--line);
}
.catbar .scroll { display:flex; gap:.35rem; overflow:auto; padding:8px 0; scrollbar-width: thin; }
.catbar a {
  text-decoration:none; color:#222; padding:.32rem .55rem;
  border-radius:.6rem; border:1px solid #e7e7e7; white-space:nowrap;
  background:#fafafa; font-weight:600; font-size:.95rem;
}
.catbar a:hover { background:#f0f0f0; }
.catbar a.is-active { border-color:#d9d9d9; background:#fff; }

/* ---------- Tarjetas de menú ---------- */
.menu-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.menu-item { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; gap:10px; }
.menu-item .img { width:120px; flex:0 0 120px; background:#f7f7f7; display:flex; align-items:center; justify-content:center; }
.menu-item .img img { width:100%; height:100%; object-fit:cover; display:block; }
.menu-item .body { padding:10px 12px; flex:1; }
.menu-item .item-title { margin:.1rem 0 .2rem; font-weight:700; }
.menu-item .desc { color:#444; margin:0; }
.menu-item .meta { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; margin-top:.25rem; }
.menu-item .price { font-weight:700; }
@media (max-width: 980px){ .menu-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .menu-grid { grid-template-columns: 1fr; } .menu-item { flex-direction:row; } .menu-item .img { width:110px; flex-basis:110px; } }

/* Search del menú */
.menu-search { display:flex; align-items:center; gap:.5rem; padding:.35rem .55rem; border:1px solid #ddd; border-radius:.7rem; background:#fff; }
.menu-search input { border:0; outline:none; flex:1; padding:.35rem; font-size:1rem; }
mark.__hl { background: #ffec99; padding:0 .15rem; border-radius:.2rem; }

/* ---------- Promos ---------- */
.promo-card { border:1px solid var(--line); border-radius: var(--radius); background:#fff; overflow:hidden; }
.promo-card .media img { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9; }
.promo-card .body { padding:12px 14px; }
.promo-card .p-title { margin:.1rem 0 .2rem; }
.promo-card .meta { color:#666; font-size:.9rem; }
.promo-card .price { font-weight:700; }

/* ---------- Galería ---------- */
.gallery-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.gallery-grid figure { margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.gallery-grid img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 900px){ .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .gallery-grid { grid-template-columns: 1fr; } }

/* ---------- Embeds diferidos ---------- */
.embed-ready { background:#f7f7f7; border:1px solid var(--line); border-radius:12px; display:grid; place-items:center; min-height:220px; }
.embed-btn { appearance:none; border:1px solid #ccc; background:#fff; border-radius:.6rem; padding:.5rem .8rem; cursor:pointer; font-weight:600; }
.embed-iframe { width:100%; height:420px; border:0; border-radius:12px; }

/* ---------- Tablas (admin) ---------- */
.table { width:100%; border-collapse:separate; border-spacing:0 8px; }
.table th, .table td { text-align:left; padding:.35rem .5rem; vertical-align:top; }
.table thead th { color:#555; font-size:.9rem; border-bottom:1px solid var(--line); }
.table tbody tr { background:#fff; border:1px solid var(--line); }

/* ---------- Formularios ---------- */
.form .field { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.6rem; }
.form input[type="text"], .form input[type="email"], .form input[type="number"], .form input[type="date"], .form textarea, .form select {
  border:1px solid #ddd; border-radius:.6rem; padding:.55rem .7rem; background:#fff;
}
.form textarea { resize:vertical; }
.flash { padding:.6rem .8rem; border-radius:8px; margin:.6rem 0; }
.flash.ok { background:#eaf6ed; color:#165b2f; border:1px solid #c4e6cf; }
.flash.error { background:#fff3f2; color:#8a1f17; border:1px solid #f3c1bd; }

/* ============================================================
   FOOTER OSCURO (no vuelve a claro). También fuerza botones.
   ============================================================ */
.site-footer{
  background: linear-gradient(180deg, var(--bg-dark), var(--bg-dark-2));
  color: #eee;
  margin-top: 20px;
  border-top: 1px solid var(--line-dark);
}
.site-footer a{ color:#e6e6ea; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }

/* Grid básico si hiciera falta (el PHP mete su propio grid) */
.site-footer .wrap { padding: 16px 0; display:grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 820px){ .site-footer .wrap { grid-template-columns: 1fr; }}

/* Botones SIEMPRE oscuros dentro del footer */
.site-footer .btn,
.site-footer .btn-light,
.site-footer .btn:not(.btn-primary){
  background: #141418 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.site-footer .btn:hover,
.site-footer .btn-light:hover{
  background: #1b1b21 !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Botón primario en footer = vinotinto consistente */
.site-footer .btn-primary{
  background: linear-gradient(180deg, var(--brand-hi), var(--brand)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 12px 30px rgba(128,0,32,.45), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Pequeños helpers visuales en footer */
.site-footer .muted{ color:#bdbdc7; }
.footer-dark-text{ color:#eee; } /* por si necesitas forzar textos puntuales */

/* ==== FORCE: header y hamburguesa opacos en móvil ==== */
@media (max-width: 920px){
  .site-header--dark{
    background:#0f0f13 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    backdrop-filter:none !important;
    box-shadow:0 6px 22px rgba(0,0,0,.45) !important;
  }
  .site-header--dark .nav-toggle{
    display:inline-flex !important;
    background:#800020 !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px !important;
    box-shadow:0 6px 16px rgba(128,0,32,.35) !important;
  }
  .site-header--dark .nav-toggle svg path{
    stroke:#fff !important;
  }
}

/* ==== FIX: asegurar clics del menú móvil por encima del overlay ==== */
@media (max-width: 920px){
  .site-header--dark { z-index: 60 !important; }
  .site-nav { z-index: 70 !important; }
  .nav-overlay { z-index: 50 !important; }
}

/* ===== FABs =====
   - WhatsApp: SIEMPRE visible (desktop y móvil)
   - Rappi: SOLO móvil
*/
.fb-wa-fab{
  position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  z-index:1000; width:64px; height:64px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(100% 100% at 80% 20%, rgba(212,175,55,.22) 0%, rgba(212,175,55,0) 55%),
    linear-gradient(180deg, var(--brand-hi), var(--brand));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 28px rgba(128,0,32,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fb-wa-fab:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 16px 36px rgba(128,0,32,.58), 0 0 0 6px rgba(212,175,55,.12), inset 0 0 0 1px rgba(255,255,255,.10);
  filter:brightness(1.05);
}
.fb-wa-fab::before{
  content:""; position:absolute; inset:7px; border-radius:50%;
  box-shadow: inset 0 0 0 2px rgba(212,175,55,.45), inset 0 12px 26px rgba(212,175,55,.12);
  pointer-events:none;
}
.fb-wa-ico{ width:30px; height:30px; display:block }
.fb-wa-ico path{ fill:#D4AF37 !important; stroke:#D4AF37 !important }

/* Rappi: solo en móvil */
@media (min-width: 921px){
  .fb-rappi-fab { display:none !important; }
}
@media (max-width: 920px){
  .fb-rappi-fab{
    position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px) + 58px + 12px);
    z-index:3000; width:58px; height:58px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
    background:
      radial-gradient(100% 100% at 80% 20%, rgba(212,175,55,.22) 0%, rgba(212,175,55,0) 55%),
      linear-gradient(180deg, var(--brand-hi), var(--brand));
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 12px 28px rgba(128,0,32,.45), inset 0 0 0 1px rgba(255,255,255,.06);
    -webkit-tap-highlight-color:transparent;
  }
  .fb-rappi-fab:hover{
    transform: translateY(-2px) scale(1.03);
    box-shadow:0 16px 36px rgba(128,0,32,.58), 0 0 0 6px rgba(212,175,55,.12), inset 0 0 0 1px rgba(255,255,255,.10);
    filter: brightness(1.05);
  }
  .fb-rappi-ico{ width:28px; height:28px; display:block; }
}

/* Pequeño ajuste XS */
@media (max-width: 560px){
  .fb-wa-fab{ width:58px; height:58px; right:16px; bottom:16px }
  .fb-wa-ico{ width:28px; height:28px }
  .fb-rappi-fab{ width:56px; height:56px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px) + 56px + 10px) }
  .fb-rappi-ico{ width:26px; height:26px }
}
/* ===== FIX específico: reseñas debajo de header sticky ===== */
body.resenas-fix .page-header{
  /* evitamos cualquier colapso y garantizamos espacio interno */
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
}

/* pseudo-elemento que empuja el primer bloque por debajo del header (88px) */
body.resenas-fix .page-header::before{
  content: "";
  display: block;
  height: 88px;   /* altura real del header */
}

@media (max-width: 920px){
  /* en móvil el header conserva altura similar; si la cambias, ajusta aquí */
  body.resenas-fix .page-header::before{ height: 88px; }
}
/* ==== FIX robusto: reseñas debajo de header sticky ==== */
body.resenas-fix .page-header{
  /* nunca colapsa con el header */
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
  /* empuje dinámico según altura real del header */
  padding-top: calc(var(--headerH, 88px) + 12px);
}

/* anclas y saltos de página no quedarán ocultos por el header */
body.resenas-fix .page-header,
body.resenas-fix [id]{
  scroll-margin-top: calc(var(--headerH, 88px) + 10px);
}
/* ==== Página Reseñas: antibloqueo header sticky ==== */
body.resenas-fix .header-spacer{ height: var(--headerH, 88px); }
body.resenas-fix .page-header{ display: flow-root; padding-top: 12px; }
body.resenas-fix .page-header h1{ margin-top: 0; }