/* ═══════════════════════════════════════════════════════════════════════════
   BAR MANDALA · Sistema

   La paleta NO está inventada: sale de muestrear su propio local en las fotos
   de su web. Salieron tres familias —magenta y violeta del neón, turquesa de
   la barra, ámbar de la madera y de la comida— sobre un negro con tirada
   violeta. Son sus colores, subidos a valores de neón utilizables.

   La regla del sistema: **el color lo pone la hora, no la sección.** Todo lo
   que se tiñe usa `--hora`, que el JavaScript va cambiando según el momento de
   la noche. Si una regla fija un color de acento a mano, está mal.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --noche:#0a0710;        /* negro con tirada violeta, no negro puro */
  --noche2:#120c1c;
  --humo:#a79db8;
  --tiza:#f4f0f7;

  --violeta:#6d28d9;      /* las paredes */
  --magenta:#e0269b;      /* el rótulo «Lounge» */
  --turquesa:#17c4c4;     /* la barra */
  --ambar:#f2a93b;        /* la madera y la comida */

  --hora:var(--magenta);  /* lo mueve el reloj */
  --luz:1;                /* intensidad del momento, 0–1 */

  --max:1360px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sombra:0 24px 70px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--noche); color:var(--tiza);
  font-family:'Manrope',system-ui,sans-serif; font-size:16px; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0; font-weight:400}
::selection{background:var(--hora); color:#0a0710}
:focus-visible{outline:2px solid var(--hora); outline-offset:3px}

/* Anton para display. Nunca por debajo de 20 px: a tamaño pequeño se cierra. */
.display{font-family:'Anton',Impact,sans-serif; text-transform:uppercase;
  line-height:.92; letter-spacing:.005em}

.env{width:min(100% - 1.6rem, var(--max)); margin-inline:auto}
@media(min-width:900px){ .env{width:min(100% - 4rem, var(--max))} }
.eti{font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--humo)}

/* ── Navegación ──────────────────────────────────────────────────────────── */
nav{position:fixed; inset:0 0 auto; z-index:60; padding:.9rem 0;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease),
             border-color .5s var(--ease);
  border-bottom:1px solid transparent}
nav.posada{background:rgba(10,7,16,.82); backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:rgba(255,255,255,.09)}
nav .env{display:flex; align-items:center; justify-content:space-between; gap:1rem}
nav .marca{display:flex; align-items:center; gap:.65rem;
  font-family:'Anton',sans-serif; text-transform:uppercase; font-size:1.2rem;
  letter-spacing:.02em}
nav .marca i{display:block; width:9px; height:9px; border-radius:50%;
  background:var(--hora); box-shadow:0 0 14px var(--hora);
  transition:background .9s var(--ease), box-shadow .9s var(--ease)}
nav ul{display:none; list-style:none; margin:0; padding:0; gap:1.9rem}
@media(min-width:1000px){ nav ul{display:flex} }
nav ul a{font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,240,247,.66); transition:color .3s var(--ease)}
nav ul a:hover, nav ul a[aria-current]{color:var(--tiza)}
nav ul a[aria-current]{position:relative}
nav ul a[aria-current]::after{content:''; position:absolute; left:0; right:0; bottom:-7px;
  height:2px; background:var(--hora)}

/* ── Acciones ────────────────────────────────────────────────────────────── */
.bt{display:inline-flex; align-items:center; gap:.6rem; min-height:46px;
  padding:.78rem 1.5rem; border-radius:9999px; cursor:pointer;
  font-size:.75rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap;   /* «Reservar mesa» partido en dos renglones parece roto */
  background:var(--hora); color:#0a0710; border:1px solid var(--hora);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background .9s var(--ease), border-color .9s var(--ease)}
.bt:hover{box-shadow:0 0 34px -4px var(--hora)}
.bt.hueca{background:transparent; color:var(--tiza); border-color:rgba(255,255,255,.28)}
.bt.hueca:hover{border-color:var(--hora); color:var(--hora); box-shadow:none}
.bt svg{width:16px; height:16px; flex:none}

/* ── Bloques ─────────────────────────────────────────────────────────────── */
.bloque{padding:clamp(4.5rem,13vh,9rem) 0; position:relative}
.rotulo{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.4rem; margin-bottom:clamp(2rem,5vh,3.4rem)}
.rotulo h2{font-size:clamp(2.1rem,6.4vw,5rem); max-width:17ch}
.rotulo p{max-width:36ch; color:var(--humo); font-size:.9375rem; line-height:1.8}
.hora-txt{color:var(--hora); transition:color .9s var(--ease)}

/* ── Revelados ───────────────────────────────────────────────────────────── */
[data-rev]{opacity:0; transform:translateY(26px)}
[data-rev].visto{opacity:1; transform:none;
  transition:opacity .85s var(--ease), transform .85s var(--ease)}
[data-tanda] > *{opacity:0; transform:translateY(26px)}
[data-tanda].visto > *{opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-tanda].visto > *:nth-child(2){transition-delay:.07s}
[data-tanda].visto > *:nth-child(3){transition-delay:.14s}
[data-tanda].visto > *:nth-child(4){transition-delay:.21s}
[data-tanda].visto > *:nth-child(5){transition-delay:.28s}
[data-tanda].visto > *:nth-child(6){transition-delay:.35s}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid rgba(255,255,255,.09); padding:3.4rem 0 2rem;
  background:var(--noche2)}
footer .env{display:grid; gap:2rem}
@media(min-width:800px){ footer .env{grid-template-columns:repeat(4,1fr)} }
footer b{display:block; font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--humo); margin-bottom:.7rem; font-weight:700}
footer a:hover{color:var(--hora)}
.pie-fin{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.07);
  font-size:.75rem; color:var(--humo)}

/* ── Aviso de demostración ───────────────────────────────────────────────── */
.aviso{background:linear-gradient(90deg, rgba(109,40,217,.22), rgba(224,38,155,.16));
  border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1)}
.aviso .env{display:flex; gap:1.1rem; align-items:flex-start; padding:1.5rem 0}
.aviso i{font-style:normal; font-size:1.3rem; line-height:1}
.aviso p{font-size:.875rem; line-height:1.75; color:rgba(244,240,247,.86); max-width:82ch}
.aviso b{color:var(--tiza)}

/* ── Grano ───────────────────────────────────────────────────────────────── */
canvas.grano{position:fixed; inset:0; width:100%; height:100%;
  z-index:9999; pointer-events:none; mix-blend-mode:overlay; opacity:.44}
@media print{ canvas.grano{display:none} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-rev],[data-tanda] > *{opacity:1 !important; transform:none !important}
  canvas.grano{display:none}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* El color con el que `tacto.css` tiñe las superficies del navegador
   —selección, cursor, barra y anillo de foco—. Aquí, su morado. */
:root{ --tinte: #7c3aed }