/* Sala 8 Villalba · Sala de baile · C.C. Zoco, Collado Villalba
 *
 * REGISTRO: el de su propia barra. En la única foto que tienen en Google, las
 * botellas están retroiluminadas en MAGENTA, CIAN y ROSA sobre negro. Ese es el
 * color de la sala, no una paleta de club sacada de una plantilla.
 *
 * Es la única de la tanda que va a negro absoluto y con neón, y tiene que serlo:
 * el resto son un bar de plaza, una churrería y una tienda de frutos secos. Aquí
 * la luz ES el producto.
 *
 * Tipografía: Unbounded, geométrica ancha, para el rótulo; Space Grotesk para
 * leer. Ninguna de las dos se ha usado en las otras webs.
 */

@font-face { font-family:'Unbounded'; src:url(fonts/unbounded.woff2) format('woff2'); font-weight:400 900; font-display:swap; }
@font-face { font-family:'Space'; src:url(fonts/space.woff2) format('woff2'); font-weight:400 700; font-display:swap; }

:root {
  --negro:    #07060a;
  --negro-2:  #100d17;
  --humo:     #1a1622;
  --magenta:  #ff2ca0;
  --cian:     #2ed6ff;
  --violeta:  #a850ff;
  --rosa:     #ff5c78;
  --claro:    #f2eef8;
  --claro-ap: #a79fb8;
  --rotulo: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --texto: 'Space', ui-sans-serif, system-ui, sans-serif;
  --ancho: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--negro); color:var(--claro); font-family:var(--texto); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, picture, canvas, svg { max-width:100%; }
img { height:auto; display:block; }
a { color:inherit; }
.saltar { position:absolute; left:-9999px; top:0; z-index:99; background:var(--magenta); color:#fff; padding:.8rem 1.2rem; font-weight:700; text-decoration:none; }
.saltar:focus { left:0; }
:focus-visible { outline:3px solid var(--cian); outline-offset:3px; }

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cab { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.3rem; padding:.8rem clamp(1rem,4vw,2.2rem); background:#07060ae8; backdrop-filter:blur(14px); border-bottom:1px solid #ffffff12; transition:border-color .25s; }
.cab--pegada { border-color:#ffffff22; }
.cab__marca { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.cab__marca svg { width:38px; height:38px; flex:none; }
.cab__nom { font-family:var(--rotulo); font-weight:800; font-size:1rem; line-height:1.08; letter-spacing:.01em; display:flex; flex-direction:column; gap:.28rem; }
.cab__nom span { font-family:var(--texto); font-size:.6rem; font-weight:500; letter-spacing:.22em; color:var(--claro-ap); text-transform:uppercase; white-space:nowrap; }
.nav { display:flex; gap:1.4rem; margin-left:auto; }
.nav a { text-decoration:none; font-size:.86rem; font-weight:500; color:#f2eef8b0; padding:.3rem 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s; }
.nav a:hover { color:#fff; border-color:var(--magenta); }
.cab__wa { display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(100deg,var(--magenta),var(--violeta)); color:#fff; text-decoration:none; padding:.62rem 1.15rem; border-radius:999px; font-weight:700; font-size:.87rem; transition:filter .18s, transform .18s; }
.cab__wa svg { width:17px; height:17px; flex:none; }
.cab__wa:hover { filter:brightness(1.16); transform:translateY(-1px); }
@media (max-width:920px) { .nav { display:none; } .cab__wa { margin-left:auto; } }

/* ── Portada ──────────────────────────────────────────────────────── */
.portada { position:relative; min-height:min(92vh,820px); display:grid; overflow:hidden; background:var(--negro); }
.portada__luces { grid-area:1/1; width:100%; height:100%; }
.portada__caja { grid-area:1/1; position:relative; z-index:3; max-width:var(--ancho); width:100%; margin:0 auto; padding:clamp(2.4rem,6vw,4rem) clamp(1rem,4vw,2.2rem); align-self:center; display:grid; grid-template-columns:1fr auto; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
@media (max-width:900px) { .portada__caja { grid-template-columns:1fr; } }

.rotulo { margin:0 0 1rem; font-size:.71rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--cian); display:flex; align-items:center; gap:.7rem; }
.rotulo::before { content:''; width:26px; height:2px; background:var(--cian); flex:none; }
.portada h1 { font-family:var(--rotulo); font-weight:900; font-size:clamp(2.2rem,5.6vw,4.1rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 1.1rem; text-wrap:balance; }
.portada h1 em { font-style:normal; background:linear-gradient(100deg,var(--magenta),var(--cian)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.portada__bajo { margin:0 0 1.7rem; max-width:32rem; font-size:clamp(1rem,1.5vw,1.12rem); color:#f2eef8b8; }
.portada__acc { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.7rem; align-items:center; }
.bot { display:inline-flex; align-items:center; gap:.55rem; padding:.82rem 1.5rem; text-decoration:none; font-weight:700; font-size:.94rem; min-height:44px; border-radius:999px; transition:transform .18s, filter .18s, border-color .18s, color .18s; }
.bot svg { width:18px; height:18px; flex:none; }
.bot--fuerte { background:linear-gradient(100deg,var(--magenta),var(--violeta)); color:#fff; }
.bot--fuerte:hover { filter:brightness(1.16); transform:translateY(-2px); }
.bot--linea { border:1.5px solid #f2eef844; color:var(--claro); }
.bot--linea:hover { border-color:var(--cian); color:var(--cian); transform:translateY(-2px); }

.estado { display:inline-flex; align-items:baseline; gap:.5rem; padding:.55rem .95rem; border-radius:999px; font-size:.86rem; border:1px solid #ffffff1f; background:#ffffff0a; }
.estado b { font-weight:700; }
.estado--no b { color:var(--rosa); }
.estado--quiza b { color:var(--cian); }
.estado span { color:#f2eef899; }

.portada__pie { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-top:1.2rem; border-top:1px solid #ffffff17; font-size:.81rem; color:#f2eef893; max-width:34rem; }
.portada__pie b { display:block; font-family:var(--rotulo); font-weight:800; font-size:1.5rem; line-height:1.1; color:var(--claro); }
@media (max-width:560px) { .portada__pie { gap:.6rem; font-size:.73rem; } .portada__pie b { font-size:1.25rem; } }

/* El ocho de neón. El brillo lo gobierna --luz desde motor.js. */
.ocho { --luz:.9; display:grid; place-items:center; }
.ocho svg { width:min(230px,52vw); height:auto; overflow:visible; }
.ocho__tubo { fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; opacity:calc(.55 + var(--luz) * .45); }
.ocho__halo1 { fill:none; stroke:var(--magenta); stroke-width:20; stroke-linecap:round; filter:blur(11px); opacity:calc(var(--luz) * .95); }
.ocho__halo2 { fill:none; stroke:var(--cian); stroke-width:34; stroke-linecap:round; filter:blur(26px); opacity:calc(var(--luz) * .55); }
.ocho__pie { margin:.9rem 0 0; text-align:center; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:#f2eef870; }

/* ── Secciones ────────────────────────────────────────────────────── */
.sec { padding:clamp(3.2rem,7vw,5.6rem) clamp(1rem,4vw,2.2rem); position:relative; }
.sec__caja { max-width:var(--ancho); margin:0 auto; }
.sec--humo { background:var(--humo); }
h2 { font-family:var(--rotulo); font-weight:800; font-size:clamp(1.7rem,3.8vw,2.6rem); line-height:1.1; letter-spacing:-0.01em; margin:0 0 1rem; max-width:22ch; text-wrap:balance; }
.entradilla { margin:0 0 2.2rem; max-width:58ch; font-size:1.04rem; color:#f2eef8a8; }
.sube { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.sube.dentro { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .sube { opacity:1; transform:none; } }

/* ── La barra (foto grande) ───────────────────────────────────────── */
.barra { position:relative; min-height:clamp(320px,48vw,560px); display:grid; overflow:hidden; }
.barra picture, .barra img { grid-area:1/1; width:100%; height:100%; object-fit:cover; }
.barra__tinte { grid-area:1/1; background:linear-gradient(#07060aa8, #07060a30 42%, #07060ae8); }
.barra__texto { grid-area:1/1; position:relative; z-index:2; align-self:end; padding:clamp(1.6rem,5vw,3rem); max-width:44rem; text-shadow:0 2px 22px #000, 0 1px 4px #000; }
.barra__texto b { display:block; font-family:var(--rotulo); font-weight:800; font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.1; margin-bottom:.55rem; letter-spacing:-.02em; }
.barra__texto span { font-size:1.01rem; color:#f2eef8d8; }

/* ── Lo que es ────────────────────────────────────────────────────── */
.cosas { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; list-style:none; margin:0; padding:0; }
@media (max-width:820px) { .cosas { grid-template-columns:1fr; } }
.cosas li { background:#ffffff07; border:1px solid #ffffff14; border-radius:14px; padding:1.5rem 1.35rem; display:flex; flex-direction:column; gap:.5rem; transition:border-color .2s, background .2s; }
.cosas li:hover { border-color:#ffffff2e; background:#ffffff0c; }
.cosas svg { width:30px; height:30px; color:var(--magenta); }
.cosas li:nth-child(2) svg { color:var(--cian); }
.cosas li:nth-child(3) svg { color:var(--violeta); }
.cosas h3 { margin:0; font-family:var(--rotulo); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.cosas p { margin:0; font-size:.93rem; color:#f2eef8a0; }

/* ── Dónde ────────────────────────────────────────────────────────── */
.donde { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:stretch; }
@media (max-width:860px) { .donde { grid-template-columns:1fr; } }
.ficha { display:grid; gap:1.15rem; align-content:center; }
.ficha__fila { display:flex; gap:.9rem; align-items:flex-start; }
.ficha__fila svg { width:21px; height:21px; color:var(--cian); flex:none; margin-top:.2rem; }
.ficha__fila b { display:block; font-size:.7rem; letter-spacing:.19em; text-transform:uppercase; color:#f2eef880; font-weight:700; margin-bottom:.18rem; }
.ficha__fila > div { font-size:1.01rem; }
.donde__foto img { border-radius:14px; }
.donde__foto figcaption { margin-top:.7rem; font-size:.82rem; color:#f2eef880; }

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie { background:var(--negro-2); color:#f2eef893; padding:clamp(2.4rem,5vw,3.4rem) clamp(1rem,4vw,2.2rem) 1.9rem; font-size:.87rem; border-top:1px solid #ffffff12; }
.pie__caja { max-width:var(--ancho); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; }
@media (max-width:780px) { .pie__caja { grid-template-columns:1fr; } }
.pie h3 { font-family:var(--rotulo); font-weight:700; color:var(--claro); font-size:.98rem; margin:0 0 .7rem; }
.pie a { color:#f2eef8b8; text-decoration:none; }
.pie a:hover { color:var(--cian); text-decoration:underline; }
.pie ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.pie__legal { max-width:var(--ancho); margin:2rem auto 0; padding-top:1.3rem; border-top:1px solid #ffffff14; display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; font-size:.79rem; }

/* ── Legales ──────────────────────────────────────────────────────── */
.legal { max-width:46rem; margin:0 auto; padding:clamp(2.4rem,6vw,4.2rem) clamp(1rem,4vw,2.2rem); }
.legal h1 { font-family:var(--rotulo); font-weight:800; font-size:clamp(1.7rem,4.4vw,2.4rem); line-height:1.12; margin:0 0 1.5rem; letter-spacing:-0.01em; }
.legal h2 { font-size:1.16rem; margin:2.1rem 0 .6rem; max-width:none; }
.legal p, .legal li { color:#f2eef8bb; }
.legal a { color:var(--cian); }
.legal .volver { display:inline-block; margin-bottom:1.5rem; font-weight:700; text-decoration:none; color:var(--magenta); }
.legal .volver:hover { text-decoration:underline; }

/* MEDIDO en un móvil de 390 px: el subtítulo de la marca lleva "nowrap" y, al no
   poder encoger, empujaba el botón de WhatsApp fuera de la pantalla — la página
   se movía de lado. En móvil el subtítulo sobra: el nombre ya está ahí. */
@media (max-width: 560px) {
  .cab__nom span { display: none; }
  .cab__marca { min-width: 0; }
  .cab__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}