/* ==========================================================
   BRIEF — STUDIO Coffee Room
   1. Negocio y lugar: café de especialidad + sesiones de música (hip-hop, listening sessions, DJs) en Av. Río Bravo, zona Marrón, Tijuana; público 20-35 creativo que llega a quedarse; bagels solo en fin de semana.
   2. Personalidad: industrial, sin prisa, con ritmo (de noche, crudo, con humor: “empleado del mes: Wybie”).
   3. Mundo visual: equipo de estudio de grabación — placa de acero cepillado, perilla naranja con la S (post02), logo condensado grabado (post11), créditos de disco y tracklist, monitores CRT, tipografía mono de etiqueta.
   4. Recurso firma: la perilla naranja. En el hero gira la frase “designed to…”, y en la galería es el selector de canales de un monitor CRT (zapping con estática).
   5. Qué NO es: ni café rústico de madera/kraft y pizarrón, ni minimal escandinavo blanco con plantas.
   ========================================================== */

:root {
  /* Paleta sacada del IG: acero cepillado, naranja del vaso/logo, café espresso de fondos, hueso de los textos */
  --naranja-perilla: #ff4d00;
  --naranja-brasa: #d93f00;
  --espresso: #231b17;
  --tabaco: #3a2c25;
  --acero: #c3c5c7;
  --acero-claro: #e3e4e5;
  --acero-sombra: #8d9093;
  --hueso: #efe9de;
  --tinta: #141110;

  --f-logo: "Antonio", "Arial Narrow", sans-serif;
  --f-text: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --brushed: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.04) 1px 3px, rgba(255,255,255,.05) 3px 4px),
             linear-gradient(170deg, #d9dadb 0%, #b9bbbe 45%, #d4d5d7 70%, #a9acaf 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--espresso);
  color: var(--hueso);
  font: 400 1rem/1.55 var(--f-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--naranja-perilla); color: var(--tinta); padding: 8px 12px; font-weight: 600; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--naranja-perilla); outline-offset: 3px; }

/* ---------- Tipos comunes ---------- */
.label {
  font: 500 .72rem/1.3 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
  color: var(--naranja-perilla);
}
.label--light { color: var(--naranja-perilla); }
.label--orange { color: var(--naranja-brasa); }
.h-big {
  font: 700 clamp(3.2rem, 14vw, 7.5rem)/.86 var(--f-logo);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 1.2rem;
  color: var(--tinta);
}
.h-big span { color: var(--naranja-brasa); font-family: var(--f-text); text-transform: none; font-weight: 600; letter-spacing: -.05em; font-size: .62em; display: block; line-height: 1; margin-top: .02em; }
.h-big--light { color: var(--hueso); }
.h-big--light span { color: var(--naranja-perilla); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.3em;
  font: 500 .82rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; border-radius: 999px;
  transition: transform .25s var(--ease), background .25s, color .25s;
}
.btn--orange { background: var(--naranja-perilla); color: var(--tinta); border-color: var(--naranja-perilla); }
.btn--line { border-color: var(--hueso); color: var(--hueso); }
.btn--line-dark { border-color: var(--tinta); color: var(--tinta); }
.btn--full { width: 100%; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn--orange:hover { background: var(--hueso); border-color: var(--hueso); }
  .btn--line:hover { background: var(--hueso); color: var(--tinta); }
  .btn--line-dark:hover { background: var(--tinta); color: var(--hueso); }
}

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter);
  background: rgba(35, 27, 23, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(239, 233, 222, .12);
}
.top__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.top__brand img { width: 36px; height: 36px; border-radius: 50%; }
.top__brand span { font: 700 1.35rem/1 var(--f-logo); letter-spacing: .02em; }
.top__brand small { display: block; font: 400 .6rem/1.2 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--acero); }
.top__nav {
  display: flex; gap: 4px; margin-left: auto;
  overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.top__nav::-webkit-scrollbar { display: none; }
.top__nav a {
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; padding: 10px 10px; white-space: nowrap; color: var(--acero-claro);
  border-radius: 999px;
}
.top__nav a.is-on { background: var(--hueso); color: var(--tinta); }
.top__cta {
  flex-shrink: 0; text-decoration: none;
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--naranja-perilla); color: var(--tinta);
  padding: 11px 14px; border-radius: 999px;
}
@media (max-width: 759px) {
  .top { flex-wrap: wrap; row-gap: 4px; padding-bottom: 4px; }
  .top__cta { margin-left: auto; }
  .top__nav { order: 3; width: 100%; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); width: calc(100% + var(--gutter) * 2); }
  html { scroll-padding-top: 110px; }
}
@media (hover: hover) { .top__nav a:hover { color: var(--naranja-perilla); } }

/* ---------- Perilla (recurso firma) ---------- */
.knob {
  --rot: 0deg;
  position: relative; display: grid; place-items: center;
  width: 92px; aspect-ratio: 1; border-radius: 50%;
  background: var(--brushed);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.45);
  border: 0; padding: 0;
  touch-action: none;
}
.knob__cap {
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a4d 0%, var(--naranja-perilla) 38%, var(--naranja-brasa) 100%);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 0 22px rgba(255, 77, 0, .45);
  position: relative;
  transform: rotate(var(--rot));
  transition: transform .45s var(--ease);
}
.knob__cap i {
  position: absolute; left: 50%; top: 7%; width: 4px; height: 26%;
  margin-left: -2px; border-radius: 2px; background: var(--tinta);
}
.knob__s {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 1.6rem/1 var(--f-text); color: var(--tinta); pointer-events: none;
}
.knob.is-drag .knob__cap { transition: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid; gap: 28px;
  padding: 28px var(--gutter) 40px;
  background:
    radial-gradient(120% 70% at 85% 10%, rgba(255, 77, 0, .16), transparent 60%),
    var(--espresso);
}
.hero__plate {
  position: relative;
  background: var(--brushed);
  color: var(--tinta);
  border-radius: 6px;
  padding: 22px 20px 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 20px 40px rgba(0,0,0,.4);
}
.hero__plate::before, .hero__plate::after {
  /* tornillos de la placa */
  content: ""; position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f3f3f3, #7d8083 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.hero__plate::before { left: 12px; }
.hero__plate::after { right: 12px; }
.hero__plate .label { color: var(--tinta); opacity: .7; padding-left: 18px; }
.hero__logo {
  margin: 4px 0 6px;
  font: 700 clamp(5.2rem, 30vw, 13rem)/.8 var(--f-logo);
  letter-spacing: -.01em;
  color: #b4b6b9;
  /* grabado en la placa, como en el reel del logo */
  text-shadow: -1px -1px 0 rgba(0,0,0,.35), 1px 1px 0 rgba(255,255,255,.85), 2px 3px 2px rgba(255,255,255,.35);
}
.hero__line {
  font: 500 clamp(1.25rem, 5vw, 2rem)/1.15 var(--f-text);
  letter-spacing: -.035em;
  margin: 0 0 18px; max-width: 18ch;
}
.hero__dial {
  display: inline-block; vertical-align: bottom;
  background: var(--tinta); color: var(--naranja-perilla);
  padding: .05em .35em .12em; border-radius: 4px;
  overflow: hidden; min-width: 7ch;
}
.hero__dial-word { display: inline-block; transition: transform .35s var(--ease), opacity .35s; }
.hero__dial-word.is-out { transform: translateY(-110%); opacity: 0; }
.knob--hero { position: absolute; right: 16px; top: 52%; width: 74px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__actions .btn--line { border-color: var(--tinta); color: var(--tinta); }

.hero__shot {
  position: relative; margin: 0;
  border-radius: 6px; overflow: hidden;
  background: var(--tabaco);
}
.hero__shot img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: contrast(1.05) saturate(1.08); }
.hero__shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(20,17,16,.85));
}
.hero__shot figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1;
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
  font: 400 .78rem/1.35 var(--f-mono);
}
.hero__shot figcaption b { color: var(--naranja-perilla); font-weight: 500; }
.hero__shot figcaption small { grid-column: 2; color: var(--acero); font-size: .7rem; }
.rec { width: 10px; height: 10px; border-radius: 50%; background: var(--naranja-perilla); box-shadow: 0 0 10px var(--naranja-perilla); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

.event {
  margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline;
  border-top: 1px dashed rgba(239,233,222,.3); padding-top: 16px;
  font: 400 .85rem/1.45 var(--f-mono); color: var(--acero-claro);
}
.event b { color: var(--hueso); font-weight: 500; }
.event__tag { background: var(--naranja-perilla); color: var(--tinta); padding: 3px 8px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.25fr 1fr; align-items: center; padding-top: 48px; padding-bottom: 56px; column-gap: 0; }
  .hero__plate { padding: 34px 36px 36px; margin-right: -60px; z-index: 2; }
  .hero__shot { transform: rotate(1.5deg); }
  .knob--hero { width: 96px; right: 28px; top: auto; bottom: 34px; }
  .event { grid-column: 1 / -1; }
}

/* ---------- Carta (contraportada de disco) ---------- */
.carta {
  background: var(--hueso);
  color: var(--tinta);
  padding: 56px var(--gutter) 64px;
  position: relative;
}
.carta__head { max-width: 760px; }
.carta__intro { font-size: 1.05rem; max-width: 46ch; margin: 0 0 28px; }
.bag {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--espresso); color: var(--hueso);
  border-radius: 6px; overflow: hidden; margin-bottom: 40px;
}
.bag img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 70%; }
.bag__txt { padding: 22px 20px 24px; }
.bag h3 { font: 700 clamp(2.2rem, 9vw, 3.6rem)/.9 var(--f-logo); text-transform: uppercase; margin: 0 0 12px; }
.bag p { margin: 0 0 10px; }
.credits { font: 400 .78rem/1.4 var(--f-mono); color: var(--acero); }
.credits a { color: var(--naranja-perilla); }
@media (min-width: 760px) {
  .bag { grid-template-columns: 1fr 1.2fr; align-items: center; }
  .bag img { aspect-ratio: 1; height: 100%; }
  .bag__txt { padding: 32px 36px; }
}

.sides { display: grid; gap: 40px; }
@media (min-width: 900px) { .sides { grid-template-columns: 1.3fr 1fr; gap: 56px; } }
.side__name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font: 500 .78rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 3px solid var(--tinta); padding-bottom: 10px; margin: 0 0 6px;
}
.side__name span { background: var(--tinta); color: var(--hueso); padding: 4px 8px; }
.stamp {
  font-style: normal; color: var(--naranja-brasa);
  border: 2px solid currentColor; padding: 3px 7px; border-radius: 3px;
  transform: rotate(-3deg); display: inline-block;
}
.tracks { list-style: none; margin: 0; padding: 0; }
.track {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 4px 10px;
  padding: 16px 0; border-bottom: 1px solid rgba(20,17,16,.18);
}
.track__n { font: 500 .8rem/1.9 var(--f-mono); color: var(--acero-sombra); }
.track h3 { font: 600 1.25rem/1.15 var(--f-text); letter-spacing: -.03em; margin: 0 0 4px; }
.track p { margin: 0; font-size: .95rem; color: #3b3330; }
.track .price { grid-column: 2; }
.price { font: 500 .95rem/1 var(--f-mono); color: var(--naranja-brasa); }
.price:empty { display: none; }
.track--star {
  background: var(--tinta); color: var(--hueso);
  margin: 8px 0; padding: 20px 16px; border-radius: 6px; border: 0;
  grid-template-columns: 2.4rem 1fr;
}
.track--star p { color: var(--acero-claro); }
.track--star .track__n { color: var(--naranja-perilla); }
.track--star h3 { font-size: 1.6rem; }
.flag {
  display: inline-block; vertical-align: middle; margin-left: 4px;
  font: 500 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  background: var(--naranja-perilla); color: var(--tinta); padding: 5px 7px; border-radius: 999px;
}
.side__note { font: 400 .8rem/1.5 var(--f-mono); color: #5a4f4a; margin: 14px 0 0; }
.side__pic { margin: 18px 0 0; border-radius: 6px; overflow: hidden; }
.side__pic img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.combo {
  margin: 14px 0 0; padding: 12px 14px; border: 2px dashed var(--tinta); border-radius: 6px;
  font: 400 .85rem/1.4 var(--f-mono);
}
.carta__cta {
  margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--brushed); padding: 20px; border-radius: 6px;
}
.carta__cta p { flex: 1 1 260px; margin: 0; font: 600 1.15rem/1.25 var(--f-text); letter-spacing: -.02em; }

/* ---------- Galería: monitor CRT ---------- */
.canales {
  padding: 60px var(--gutter) 70px;
  background:
    radial-gradient(80% 50% at 20% 0%, rgba(255,77,0,.12), transparent 70%),
    var(--tinta);
}
.canales__head { max-width: 640px; margin-bottom: 28px; }
.canales__head p:last-child { color: var(--acero); margin: 0; }
.console {
  display: grid; gap: 18px;
  background: var(--brushed);
  padding: 16px; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 30px 60px rgba(0,0,0,.55);
  max-width: 1040px;
}
@media (min-width: 820px) { .console { grid-template-columns: 1fr 260px; padding: 22px; gap: 24px; } }
.crt {
  background: #0d0b0a; padding: 12px; border-radius: 18px;
  box-shadow: inset 0 0 0 2px #2a2422, inset 0 6px 16px rgba(0,0,0,.8);
}
.crt__screen {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 4 / 3.4;
  border-radius: 28px / 22px; overflow: hidden; background: #000;
  cursor: zoom-in;
}
.crt__screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.1) contrast(1.06);
  transition: opacity .2s;
}
.crt__lines {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%);
}
.crt__static {
  position: absolute; inset: -50%; opacity: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-color: #444;
}
.crt.is-zap .crt__static { opacity: 1; animation: static .12s steps(3) infinite; }
.crt.is-zap img { opacity: 0; }
@keyframes static {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-12%, 8%); }
  66% { transform: translate(9%, -14%); }
}
.crt__ch {
  position: absolute; top: 16px; right: 22px;
  font: 500 1.4rem/1 var(--f-mono); color: #7dff6a;
  text-shadow: 0 0 8px rgba(125,255,106,.8);
}
.crt__cap {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  text-align: left; font: 400 .85rem/1.35 var(--f-mono); color: var(--hueso);
  background: rgba(20,17,16,.78); padding: 8px 10px; border-left: 3px solid var(--naranja-perilla);
}
.console__ctrl { display: grid; gap: 16px; justify-items: center; align-content: start; }
.console__lcd {
  width: 100%; margin: 0; display: flex; justify-content: space-between; align-items: center;
  background: #1c2a14; color: #9cff7d; border-radius: 4px; padding: 10px 12px;
  font: 500 1rem/1 var(--f-mono); box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
  text-shadow: 0 0 6px rgba(156,255,125,.6);
}
.console__lcd i { font-style: normal; font-size: .65rem; letter-spacing: .2em; opacity: .7; }
.knob--big { width: 150px; cursor: grab; }
.knob--big:active { cursor: grabbing; }
.knob--big::before {
  /* marcas del dial */
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  background: repeating-conic-gradient(from -2deg, var(--tinta) 0 4deg, transparent 4deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 63%, #000 64%, #000 70%, transparent 71%);
          mask: radial-gradient(circle, transparent 63%, #000 64%, #000 70%, transparent 71%);
  opacity: .55;
}
.console__step { display: flex; gap: 8px; width: 100%; }
.console__step button, .guide button {
  flex: 1; min-height: 44px; border: 0; border-radius: 4px;
  background: var(--tinta); color: var(--hueso);
  font: 500 .8rem/1 var(--f-mono); letter-spacing: .1em;
  box-shadow: 0 3px 0 #000;
}
.console__step button:active, .guide button:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.guide { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; }
.guide button { min-height: 38px; background: #4a4441; font-size: .72rem; }
.guide button[aria-pressed="true"] { background: var(--naranja-perilla); color: var(--tinta); }
@media (max-width: 819px) {
  .console__ctrl { grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; }
  .console__lcd { grid-column: 1 / -1; }
  .knob--big { width: 120px; grid-row: 2 / span 2; grid-column: 2; margin: 8px 6px; }
  .console__step { grid-column: 1; grid-row: 2; }
  .guide { grid-column: 1; grid-row: 3; grid-template-columns: repeat(4, 1fr); }
}
@media (hover: hover) {
  .guide button:hover, .console__step button:hover { background: var(--naranja-brasa); color: var(--tinta); }
}

/* ---------- Prensa / reseñas ---------- */
.prensa {
  background: var(--naranja-perilla); color: var(--tinta);
  padding: 56px var(--gutter);
}
.prensa .label { color: var(--tinta); }
.prensa__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .prensa__grid { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.quote { margin: 0; position: relative; }
.quote__mark { font: 700 9rem/.6 var(--f-logo); display: block; height: .5em; }
.quote blockquote { margin: 0; }
.quote p { font: 600 clamp(2rem, 8vw, 4.2rem)/1 var(--f-text); letter-spacing: -.05em; margin: 0 0 16px; }
.quote figcaption { font: 400 .85rem/1.4 var(--f-mono); }
.meters { display: grid; gap: 0; border-top: 3px solid var(--tinta); }
.meter { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 6px; padding: 12px 0; border-bottom: 1px solid rgba(20,17,16,.35); }
.meter b { font: 700 2.8rem/1 var(--f-logo); }
.meter span { font: 700 1.4rem/1 var(--f-logo); }
.meter p { margin: 0; grid-column: 3; font: 400 .8rem/1.35 var(--f-mono); padding-left: 8px; }
.meter b + p { grid-column: 2 / span 2; }
.prensa__cta { margin: 28px 0 0; font: 500 1rem/1.4 var(--f-text); }
.prensa__cta a { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Pago ---------- */
.pago {
  background: var(--hueso); color: var(--tinta);
  padding: 60px var(--gutter);
  display: grid; gap: 32px;
}
@media (min-width: 900px) { .pago { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.chips { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 500 .78rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; border: 2px solid var(--tinta); border-radius: 999px; padding: 9px 14px; }
.chips li.is-on { background: var(--tinta); color: var(--naranja-perilla); }
.pago__note { max-width: 40ch; margin: 0; }
.tape {
  background: var(--espresso); color: var(--hueso);
  border-radius: 8px; padding: 22px 18px 18px;
  border-top: 10px solid var(--naranja-perilla);
  box-shadow: 10px 10px 0 var(--tinta);
}
.tape__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tape h3 { font: 700 2.4rem/1 var(--f-logo); text-transform: uppercase; margin: 0; }
.tape__reels { display: flex; gap: 10px; }
.tape__reels i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--acero); background: repeating-conic-gradient(var(--acero) 0 20deg, transparent 20deg 60deg); animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tape__rows { margin: 0 0 18px; }
.tape__row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 12px 0; border-bottom: 1px dashed rgba(239,233,222,.25);
}
.tape__row dt { font: 500 .68rem/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--acero); grid-column: 1; }
.tape__row dd { margin: 0; grid-column: 1; font-weight: 600; font-size: 1.05rem; word-break: break-all; }
.tape__row dd.mono { font-family: var(--f-mono); letter-spacing: .04em; }
.copy {
  grid-column: 2; grid-row: 1 / span 2;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--naranja-perilla); background: transparent; color: var(--naranja-perilla);
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
}
.copy.is-ok { background: var(--naranja-perilla); color: var(--tinta); }
@media (hover: hover) { .copy:hover { background: var(--naranja-perilla); color: var(--tinta); } }
.tape__toast { min-height: 1.4em; margin: 10px 0 0; font: 400 .8rem/1.4 var(--f-mono); color: var(--acero); }

/* ---------- Redes ---------- */
.redes { background: var(--tinta); padding: 60px var(--gutter); }
.redes__btns { display: grid; gap: 12px; margin-bottom: 28px; }
@media (min-width: 760px) { .redes__btns { grid-template-columns: 1.4fr 1fr; } }
.social {
  display: grid; gap: 4px; text-decoration: none;
  background: var(--naranja-perilla); color: var(--tinta);
  padding: 22px 20px; border-radius: 8px;
  transition: transform .3s var(--ease);
}
.social--alt { background: var(--brushed); }
.social__k { font: 500 .72rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; }
.social__h { font: 700 clamp(1.8rem, 8vw, 3rem)/1 var(--f-logo); word-break: break-all; }
.social__n { font: 400 .9rem/1.3 var(--f-text); }
.social__n b { font-size: 1.2rem; }
@media (hover: hover) { .social:hover { transform: rotate(-1deg) translateY(-3px); } }
.feed { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 760px) { .feed { grid-template-columns: repeat(6, 1fr); } }
.feed a { display: block; overflow: hidden; border-radius: 4px; }
.feed img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(.4); transition: filter .3s, transform .4s var(--ease); }
@media (hover: hover) { .feed a:hover img { filter: none; transform: scale(1.05); } }

/* ---------- Horario ---------- */
.horario {
  background: var(--brushed); color: var(--tinta);
  padding: 60px var(--gutter);
  display: grid; gap: 28px;
}
@media (min-width: 900px) { .horario { grid-template-columns: 1fr 1.2fr; align-items: stretch; } }
.horario .h-big span { color: var(--naranja-brasa); }
.status {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  background: var(--tinta); color: var(--hueso); padding: 10px 14px; border-radius: 4px;
  font: 500 .85rem/1.2 var(--f-mono);
}
.status__led { width: 12px; height: 12px; border-radius: 50%; background: var(--acero-sombra); }
.status.is-open .status__led { background: #6bff5a; box-shadow: 0 0 10px #6bff5a; }
.status.is-closed .status__led { background: var(--naranja-perilla); box-shadow: 0 0 10px var(--naranja-perilla); }
.week { width: 100%; max-width: 420px; border-collapse: collapse; font: 400 .9rem/1.3 var(--f-mono); }
.week th, .week td { text-align: left; padding: 8px 0; border-bottom: 1px solid rgba(20,17,16,.2); }
.week th { font-weight: 500; width: 40%; }
.week tr.is-today th, .week tr.is-today td { color: var(--naranja-brasa); font-weight: 500; }
.horario__nota { font-size: .9rem; max-width: 42ch; }
.horario address { font: 600 1.15rem/1.35 var(--f-text); font-style: normal; margin: 0 0 16px; letter-spacing: -.02em; }
.map { min-height: 320px; border-radius: 8px; overflow: hidden; border: 6px solid var(--tinta); }
.map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: grayscale(.6) contrast(1.05); }

/* ---------- Footer ---------- */
.foot { background: var(--espresso); padding: 30px var(--gutter) 28px; overflow: hidden; }
.foot__logo {
  margin: 0; font: 700 clamp(6rem, 34vw, 22rem)/.8 var(--f-logo);
  color: var(--tabaco); letter-spacing: -.01em; text-align: center;
  text-shadow: -1px -1px 0 rgba(0,0,0,.4), 1px 1px 0 rgba(255,255,255,.08);
}
.foot__row { display: grid; gap: 6px; margin-top: 18px; font: 400 .78rem/1.4 var(--f-mono); color: var(--acero); }
@media (min-width: 760px) { .foot__row { grid-template-columns: repeat(3, auto); justify-content: space-between; } }
.foot__row b { color: var(--naranja-perilla); font-weight: 500; }

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 11, 10, .96);
  display: grid; grid-template-rows: auto 1fr auto; gap: 12px;
  padding: 14px var(--gutter) 20px;
}
.lb[hidden] { display: none; }
.lb__close { justify-self: end; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--hueso); background: transparent; font: 500 .8rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.lb__fig { margin: 0; display: grid; place-items: center; min-height: 0; gap: 12px; }
.lb__fig img { max-height: 72vh; width: auto; max-width: 100%; border-radius: 6px; object-fit: contain; }
.lb__fig figcaption { font: 400 .9rem/1.4 var(--f-mono); text-align: center; border-left: 3px solid var(--naranja-perilla); padding-left: 10px; }
.lb__nav { display: flex; justify-content: center; gap: 10px; }
.lb__nav button { min-height: 48px; min-width: 110px; border: 0; border-radius: 999px; background: var(--naranja-perilla); color: var(--tinta); font: 500 .85rem/1 var(--f-mono); letter-spacing: .1em; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}