/* El Límite Rock Bar — Collado Villalba
   ---------------------------------------------------------------------------
   LA PALETA SALE DE SU PROPIO CARTEL Y DE SUS PAREDES, muestreados:
     · #d11001  el rojo del arco de su logotipo
     · #a23a31  el granate de las paredes del local (fotos 04, 08, 09, 10)
   El fondo NO es negro: es un granate muy cerrado, que es el color que tiene
   el local con las luces bajas. «Casi negro + un acento chillón» es justo el
   tópico que hay que esquivar, y aquí el color lo pone la casa.

   Tipografías: Alfa Slab One (los rótulos, como un cartel de conciertos) y
   Kanit (el texto). Kanit no se ha usado en ninguna de las 36 webs.
   -------------------------------------------------------------------------- */

@font-face{font-family:'Cartel';src:url('fonts/alfa.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Texto';src:url('fonts/kanit-400.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'Texto';src:url('fonts/kanit-600.woff2') format('woff2');
  font-weight:600;font-display:swap}
@font-face{font-family:'Texto';src:url('fonts/kanit-800.woff2') format('woff2');
  font-weight:800;font-display:swap}

:root{
  --noche:#180a08;          /* el local con las luces bajas */
  --noche-2:#0e0605;
  --pared:#5e211c;          /* el granate de sus paredes */
  --pared-clara:#7c2c24;
  --rojo:#d11001;           /* el rojo de su logotipo */
  --rojo-vivo:#f0270f;
  --ambar:#f0a830;          /* las luces del escenario */
  --hueso:#f7f0e8;
  --hueso-tenue:rgba(247,240,232,.62);
  --linea:rgba(209,16,1,.3);
  --linea-2:rgba(247,240,232,.14);

  --cartel:'Cartel',Georgia,serif;
  --texto:'Texto',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --ancho:min(1560px,100% - 6vw);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noche);color:var(--hueso);
  font-family:var(--texto);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--cartel);font-weight:400;line-height:1;
  letter-spacing:-.01em;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.centro{width:var(--ancho);margin-inline:auto}
.saltar{position:absolute;left:-9999px;top:0;background:var(--rojo);color:#fff;
  padding:.7rem 1.1rem;z-index:99}
.saltar:focus{left:1rem;top:1rem}

/* ------------------------------------------------------- FRANJA DE PROPUESTA */
.propuesta{position:relative;z-index:100;display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem .9rem;padding:.6rem clamp(1rem,4vw,2rem);background:var(--noche-2);
  color:var(--hueso);font-size:max(12.5px,.85rem);line-height:1.45}
.propuesta__p{flex:none;padding:.2rem .6rem;border-radius:999px;background:var(--rojo);
  color:#fff;font-weight:800;font-size:max(12.5px,.72rem);letter-spacing:.09em;
  text-transform:uppercase}
.propuesta__t{opacity:.82}
.propuesta__t b{opacity:1;font-weight:600}

/* ------------------------------------------------------------------ CABECERA */
.cab{position:sticky;top:0;z-index:40;background:rgba(24,10,8,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.cab .centro{display:flex;align-items:center;gap:1.3rem;min-height:74px;padding-block:.5rem}
.marca{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.marca img{height:54px;width:auto;border-radius:6px}
.nav{display:flex;gap:.2rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:.94rem;font-weight:600;padding:.55rem .8rem;
  border-radius:8px;color:var(--hueso-tenue);letter-spacing:.02em;
  transition:color .2s,background .2s}
.nav a:hover,.nav a[aria-current]{color:var(--hueso);background:rgba(209,16,1,.2)}
.nav a[aria-current]{color:var(--ambar)}
.cab .boton{margin-left:.4rem}
.menu-btn{display:none;background:none;border:1px solid var(--linea);color:var(--hueso);
  border-radius:9px;padding:.5rem .7rem;font:inherit;font-size:.9rem;cursor:pointer;
  margin-left:auto;min-height:44px}
@media (max-width:1040px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--noche);
    border-bottom:1px solid var(--linea);flex-direction:column;align-items:stretch;
    padding:.6rem 3vw 1rem;gap:.15rem}
  .nav.abierto{display:flex}
  .nav a{padding:.85rem .8rem;font-size:1.02rem}
  .cab .boton{margin:.5rem 0 0}
  .marca img{height:46px}
}

/* -------------------------------------------------------------------- BOTONES */
.boton{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-weight:600;font-size:.97rem;padding:.82rem 1.35rem;border-radius:9px;
  border:1px solid transparent;cursor:pointer;font-family:var(--texto);min-height:44px;
  transition:background .2s,border-color .2s,color .2s}
.boton svg{width:18px;height:18px;flex:0 0 auto}
.boton.rojo{background:var(--rojo);color:#fff}
.boton.rojo:hover{background:var(--rojo-vivo)}
.boton.ambar{background:var(--ambar);color:#2a1503}
.boton.ambar:hover{background:#ffbe4d}
.boton.hueco{border-color:var(--linea-2);color:var(--hueso);background:rgba(247,240,232,.05)}
.boton.hueco:hover{border-color:var(--ambar);background:rgba(240,168,48,.14)}
.boton[disabled]{opacity:.4;cursor:not-allowed}

/* --------------------------------------------------------------------- PORTADA */
.hero{position:relative;min-height:min(90svh,860px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate}
.hero-foto{position:absolute;inset:-8% 0 0;z-index:-2;will-change:transform}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(24,10,8,.78) 0%,rgba(24,10,8,.3) 32%,
    rgba(24,10,8,.86) 74%,var(--noche) 100%)}
#focos{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero .centro{padding:6.5rem 0 4rem;position:relative}
.hero h1{font-size:clamp(2.6rem,8vw,8rem);max-width:13ch;
  text-shadow:0 4px 40px rgba(10,4,3,.8)}
.hero h1 em{font-style:normal;color:var(--ambar);display:block}
.antetitulo{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;
  letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--ambar);
  margin-bottom:1.3rem}
.antetitulo::before{content:'';width:32px;height:2px;background:var(--rojo)}
.hero p.lema{font-size:clamp(1.04rem,1.6vw,1.34rem);max-width:46ch;
  color:var(--hueso-tenue);margin:1.4rem 0 1.9rem}
.hero-acc{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.chapa{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;
  color:var(--hueso-tenue);padding:.55rem .85rem;border-radius:9px;
  border:1px solid var(--linea-2);background:rgba(10,4,3,.5)}
.chapa b{color:var(--hueso);font-weight:700}
.chapa .estrellas{display:inline-flex;gap:1px;color:var(--ambar)}
.chapa .estrellas svg{width:14px;height:14px}

/* --------------------------------------------------------------------- BLOQUES */
.bloque{padding:clamp(3.6rem,6.5vw,6.4rem) 0}
.bloque.pared{background:var(--pared)}
.bloque.honda{background:var(--noche-2)}
.rotulo-sec{font-size:clamp(1.9rem,4.4vw,4rem);max-width:20ch;margin-bottom:.4em}
.entradilla{font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:58ch;color:var(--hueso-tenue)}
.cabeza-sec{display:flex;gap:2rem;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:clamp(1.8rem,3.5vw,3rem)}

/* --------------------------------------------------------------------- REJILLAS */
.rejilla{display:grid;gap:1rem;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:1000px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.rejilla{grid-template-columns:1fr}}

.ambiente{border:1px solid var(--linea-2);border-radius:14px;overflow:hidden;
  background:rgba(247,240,232,.04);display:flex;flex-direction:column}
.ambiente img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ambiente .txt{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.ambiente h3{font-size:1.5rem}
.ambiente p{margin:0;color:var(--hueso-tenue);font-size:.97rem}
.ambiente .cita{margin-top:auto;font-style:italic;font-size:.92rem;
  border-left:2px solid var(--rojo);padding-left:.85rem}

.plato{border:1px solid var(--linea-2);border-radius:14px;padding:1.5rem;
  background:rgba(247,240,232,.04);display:flex;flex-direction:column;gap:.6rem}
.plato h3{font-size:1.45rem}
.plato p{margin:0;color:var(--hueso-tenue);font-size:.97rem}
.plato .cita{margin-top:auto;font-style:italic;font-size:.92rem;
  border-left:2px solid var(--ambar);padding-left:.85rem;color:var(--hueso-tenue)}

/* --------------------------------------------------------- LA LÍNEA DEL TIEMPO */
/* Su historia es de verdad y es lo que ninguna otra web del pueblo tiene:
   dieciocho años, un cierre contado en Instagram y una vuelta. */
.linea{position:relative;display:grid;gap:0;margin-top:1rem}
.hito{position:relative;padding:0 0 2.2rem 3.4rem;border-left:2px solid var(--linea)}
.hito:last-child{border-left-color:transparent;padding-bottom:0}
.hito::before{content:'';position:absolute;left:-9px;top:.35rem;width:16px;height:16px;
  border-radius:50%;background:var(--rojo);border:3px solid var(--noche)}
.hito.fin::before{background:var(--ambar)}
.hito .cuando{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--ambar);display:block;margin-bottom:.3rem}
.hito h3{font-size:1.7rem;margin-bottom:.4rem}
.hito p{margin:0;color:var(--hueso-tenue)}
.bloque.pared .hito{border-left-color:rgba(255,255,255,.22)}
.bloque.pared .hito::before{border-color:var(--pared)}

/* --------------------------------------------------------- EL BOLO (la firma) */
/* Son sala de conciertos y hay bandas que dejan reseña contando que tocaron
   aquí. Pero no tienen web, así que proponer bolo es llamar por teléfono un
   jueves por la noche. Esto lo convierte en un mensaje ya escrito. */
.bolo{background:var(--noche-2);border:1px solid var(--linea);border-radius:16px;
  padding:clamp(1.4rem,2.8vw,2.4rem);display:grid;gap:1.3rem}
.paso{display:grid;gap:.8rem}
.paso > h3{font-family:var(--texto);font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:800;color:var(--ambar);display:flex;
  align-items:center;gap:.6rem}
.paso > h3 i{font-style:normal;width:24px;height:24px;border-radius:50%;
  background:var(--rojo);color:#fff;display:grid;place-items:center;font-size:.8rem;
  font-weight:800;flex:0 0 auto}
.opciones{display:grid;gap:.55rem;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:760px){.opciones{grid-template-columns:1fr 1fr}}
.opcion{position:relative;display:block;cursor:pointer}
.opcion input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opcion span{display:block;border:1px solid var(--linea-2);border-radius:10px;
  padding:.75rem .9rem;background:rgba(247,240,232,.04);font-weight:600;
  text-align:center;transition:border-color .2s,background .2s,color .2s}
.opcion input:hover + span{border-color:var(--ambar)}
.opcion input:checked + span{border-color:var(--rojo);background:rgba(209,16,1,.22);
  color:#fff}
.opcion input:focus-visible + span{outline:3px solid var(--ambar);outline-offset:3px}
.campo{display:grid;gap:.35rem}
.campo label{font-size:.86rem;color:var(--hueso-tenue);font-weight:600}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1rem;
  background:rgba(10,4,3,.6);border:1px solid var(--linea-2);color:var(--hueso);
  border-radius:9px;padding:.75rem .9rem;min-height:44px;width:100%}
.campo textarea{min-height:88px;resize:vertical}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media (max-width:560px){.dos{grid-template-columns:1fr}}
.resumen{border-top:1px solid var(--linea-2);padding-top:1.3rem;display:grid;gap:1rem}
.resumen-txt{margin:0;font-size:1.02rem;color:var(--hueso-tenue)}
.resumen-txt strong{color:var(--ambar);font-weight:600}

/* ----------------------------------------------------------------------- VOCES */
.voz{background:rgba(247,240,232,.05);border:1px solid var(--linea-2);border-radius:14px;
  padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.bloque.pared .voz{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.16)}
.voz .estrellas{display:flex;gap:2px;color:var(--ambar)}
.voz .estrellas svg{width:16px;height:16px}
.voz blockquote{margin:0;font-size:1.03rem;line-height:1.5}
.voz cite{font-style:normal;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  opacity:.5;margin-top:auto}

/* --------------------------------------------------------------------- GALERIA */
.galeria{display:grid;gap:.7rem;grid-template-columns:repeat(var(--gcols,3),minmax(0,1fr))}
.galeria figure{margin:0;border-radius:12px;overflow:hidden;background:var(--noche-2)}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.galeria .ancha{grid-column:span 2}
.galeria .ancha img{aspect-ratio:2/1}
@media (max-width:620px){.galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .galeria .ancha{grid-column:span 2}}

/* ---------------------------------------------------------------------- DATOS */
.datos{display:grid;gap:1rem;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:900px){.datos{grid-template-columns:1fr}}
.dato{border:1px solid var(--linea-2);border-radius:14px;padding:1.5rem;
  background:rgba(247,240,232,.04);display:flex;flex-direction:column;gap:.45rem}
.dato h3{font-family:var(--texto);font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:800;color:var(--ambar)}
.dato p{margin:0;font-size:1.02rem}
.dato a{color:var(--ambar);display:inline-block;padding:.16rem 0;min-height:24px}

/* --------------------------------------------------------------------- TAPEO */
.tapas{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 0}
.tapas span{font-size:.92rem;padding:.36rem .85rem;border-radius:999px;
  border:1px solid var(--linea);background:rgba(209,16,1,.12);font-weight:600}

/* ------------------------------------------------------------------------- PIE */
.pie{background:var(--noche-2);border-top:1px solid var(--linea);padding:3.6rem 0 2rem;
  font-size:.93rem}
.pie-rej{display:grid;gap:2.2rem;grid-template-columns:1.4fr 1fr 1fr;padding-bottom:2.2rem;
  border-bottom:1px solid var(--linea-2)}
@media (max-width:820px){.pie-rej{grid-template-columns:1fr}}
.pie img.logo{height:76px;width:auto;border-radius:6px;margin-bottom:1rem}
.pie h4{font-family:var(--texto);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:800;color:var(--ambar);margin:0 0 .85rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pie ul a{color:var(--hueso-tenue);text-decoration:none;display:inline-block;
  padding:.26rem 0;min-height:24px}
.pie ul a:hover{color:var(--hueso);text-decoration:underline}
.pie-fin{padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  color:rgba(247,240,232,.42);font-size:.85rem}

/* --------------------------------------------------------- MOVIMIENTO (motor.js) */
.sube{opacity:0;transform:translate3d(0,24px,0)}
.sube.dentro{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.sube.d1.dentro{transition-delay:.07s}
.sube.d2.dentro{transition-delay:.14s}
.sube.d3.dentro{transition-delay:.21s}
.sube.d4.dentro{transition-delay:.28s}
.sube.d5.dentro{transition-delay:.35s}

/* ------------------------------------------------------------------- LEGALES */
.legal{max-width:76ch;margin-inline:auto;padding:clamp(3rem,7vw,5.5rem) 0}
.legal h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:1.2rem}
.legal h2{font-size:1.4rem;margin:2.2rem 0 .6rem;color:var(--ambar)}
.legal a{color:var(--ambar);display:inline-block;padding:.16rem 0;min-height:24px}
.legal ul{padding-left:1.2rem}
.legal li{margin-bottom:.4rem}

/* --------------------------------------------- SUELO TECNICO EN EL MOVIL */
@media (max-width:760px){
  .antetitulo,.pie h4,.dato h3,.paso > h3,.hito .cuando{font-size:.78rem}
  .voz cite{font-size:.8rem}
}