/* ===================================================================
   CASINOS EN MONTERREY — дизайн-система
   ===================================================================
   Город стали и вывесок: холодный базальт как основа, янтарь неона как
   акцент, медь литейной как второй голос. Заголовки — узкий гротеск,
   как на щитах над авенидой; текст — системный шрифт, чтобы не платить
   вторым запросом за читаемость.

   Правило файла: каждый селектор объявлен один раз, значения только из
   токенов, !important нигде, кроме служебного [hidden].

   1 токены · 2 база · 3 раскладка · 4 типографика · 5 кнопки
   6 шапка и подвал · 7 первый экран · 8 карточка зала · 9 сетки
   10 текстовые блоки · 11 воронка · 12 адаптив
   =================================================================== */

/* Шрифт заголовков лежит у нас: сторонний запрос к шрифтовому хосту стоил
   почти секунды на первой отрисовке. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fuentes/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 1. Токены ---------------------------------------------------- */

:root {
  /* Ночь над Монтерреем: базальт с холодным уходом, не серый «из коробки». */
  --noche: #0d1014;
  --acero: #151a21;
  --acero-alto: #1e242e;
  --velo: rgba(13, 16, 20, .72);
  --velo-suave: rgba(13, 16, 20, .46);

  --linea: rgba(255, 182, 61, .16);
  --linea-fuerte: rgba(255, 182, 61, .34);
  --linea-fria: rgba(125, 149, 181, .22);

  /* Янтарь вывески и медь литейной. */
  --ambar: #ffb63d;
  --ambar-alto: #ffd489;
  --ambar-hondo: #d98f1c;
  --cobre: #c4622d;
  --menta: #5ecfae;

  --texto: #eef1f6;
  --texto-suave: #c3ccd9;
  --texto-tenue: #93a1b3;
  --sobre-ambar: #1a1206;

  /* Восьмёрка. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --seccion: clamp(40px, 5vw, 72px);
  --pad-panel: clamp(16px, 2vw, 28px);
  --pad-panel-lg: clamp(20px, 2.6vw, 36px);

  --canal: clamp(18px, 4vw, 48px);
  --ancho: min(1320px, 100% - var(--canal) * 2);
  --medida: 72ch;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --sombra-1: 0 10px 28px rgba(0, 0, 0, .38);
  --sombra-2: 0 24px 60px rgba(0, 0, 0, .5);

  /* Узкий гротеск для заголовков — шрифт городских вывесок. */
  --f-titulo: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --f-texto: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-num: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --t-etiqueta: 11.5px;
  --t-chico: 13.5px;
  --t-base: 16px;
  --t-entrada: clamp(16.5px, 1.3vw, 19px);
  --t-h3: clamp(19px, 1.5vw, 22px);
  --t-h2: clamp(24px, 2.4vw, 32px);
  --t-h1: clamp(30px, 4vw, 52px);
  --t-display: clamp(38px, 5.6vw, 76px);

  --alto-titulo: 1.08;
  --alto-texto: 1.68;

  --curva: cubic-bezier(.22, .61, .36, 1);
  --rapido: .15s;
  --lento: .3s;

  --alto-cabecera: 68px;
  --alto-boton: 50px;
  color-scheme: dark;
}

@media (max-width: 900px) {
  :root { --alto-cabecera: 60px; }
}

/* --- 2. База ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--noche);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + var(--s5));
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 182, 61, .07), transparent 60%),
    var(--noche);
  color: var(--texto);
  font: 400 var(--t-base)/var(--alto-texto) var(--f-texto);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }

a { color: inherit; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ambar); color: var(--sobre-ambar); }

/* Силуэт Сьерра-Мадре: тонкая линия-разделитель, узнаваемая для города. */
.sierra {
  display: block;
  width: 100%;
  height: 26px;
  color: var(--linea-fuerte);
}

/* --- 3. Раскладка -------------------------------------------------- */

.pagina,
.envoltura { width: var(--ancho); margin-inline: auto; }
.pagina > *,
.envoltura > * { width: 100%; margin-inline: 0; }
.pagina { padding-block: var(--seccion); }
.pagina > * + * { margin-top: var(--s6); }

/* --- 4. Типографика ------------------------------------------------ */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--texto);
  font-family: var(--f-titulo);
  font-weight: 600;
  line-height: var(--alto-titulo);
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
p { margin: 0; }

.antetitulo {
  margin: 0;
  color: var(--ambar);
  font: 700 var(--t-etiqueta)/1.4 var(--f-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cifra { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 5. Кнопки ----------------------------------------------------- */

.boton,
.boton-neon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--alto-boton);
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: 700 14.5px/1.1 var(--f-texto);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.boton-neon {
  background: linear-gradient(135deg, var(--ambar-alto), var(--ambar-hondo));
  border-color: rgba(255, 212, 137, .55);
  color: var(--sobre-ambar);
  box-shadow: 0 0 0 rgba(255, 182, 61, 0);
}
.boton {
  background: var(--acero-alto);
  border-color: var(--linea-fria);
  color: var(--texto);
}
.boton:active, .boton-neon:active { transform: translateY(1px); }
@media (hover: hover) {
  .boton-neon:hover { box-shadow: 0 8px 26px rgba(255, 182, 61, .3); }
  .boton:hover { background: #273040; }
}

.saltar {
  position: fixed;
  z-index: 200;
  left: var(--s4);
  top: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-pill);
  background: var(--ambar-alto);
  color: var(--sobre-ambar);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--lento) var(--curva);
}
.saltar:focus { transform: translateY(0); }

/* --- 6. Шапка и подвал --------------------------------------------- */

.cabecera {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  min-height: var(--alto-cabecera);
  padding: var(--s2) var(--canal);
  border-bottom: 1px solid var(--linea);
  background: linear-gradient(180deg, rgba(10, 13, 17, .96), rgba(10, 13, 17, .82));
}
@supports (backdrop-filter: blur(12px)) {
  .cabecera { backdrop-filter: blur(14px) saturate(1.1); }
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  color: var(--texto);
  text-decoration: none;
}
.marca__silla {
  flex: none;
  width: 38px; height: 26px;
  color: var(--ambar);
}
.marca__nombre {
  display: block;
  font: 600 19px/1 var(--f-titulo);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.marca__nombre b { color: var(--ambar); font-weight: 600; }
.marca small {
  display: block;
  margin-top: 3px;
  color: var(--texto-tenue);
  font: 600 9.5px/1 var(--f-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  color: var(--texto-suave);
  font: 600 13.5px/1 var(--f-texto);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.nav a[aria-current="page"] { color: var(--ambar); background: rgba(255, 182, 61, .1); }
@media (hover: hover) { .nav a:hover { color: var(--texto); background: rgba(238, 241, 246, .07); } }

.menu-boton {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--linea-fria);
  border-radius: var(--r-sm);
  background: var(--acero);
  cursor: pointer;
}
.menu-boton span { display: grid; gap: 5px; place-items: center; }
.menu-boton i { display: block; width: 17px; height: 2px; background: var(--texto); }

.pie {
  margin-top: var(--seccion);
  padding-block: var(--seccion) var(--s6);
  border-top: 1px solid var(--linea);
  background: var(--acero);
}
.pie__mapa {
  width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s5);
  padding-bottom: var(--s6);
}
.pie__col h2 {
  margin-bottom: var(--s3);
  color: var(--ambar);
  font: 700 var(--t-etiqueta)/1.4 var(--f-texto);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pie__col ul { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.pie__col a { color: var(--texto-tenue); font-size: var(--t-chico); text-decoration: none; }
.pie__base {
  width: var(--ancho);
  margin-inline: auto;
  display: grid;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--linea);
  color: var(--texto-tenue);
  font-size: var(--t-chico);
}
.pie__base nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.pie__base a { text-decoration: none; }
@media (hover: hover) { .pie a:hover { color: var(--texto); } }

/* --- 7. Первый экран ----------------------------------------------- */

.portada {
  position: relative;
  border-bottom: 1px solid var(--linea);
  background:
    radial-gradient(90% 120% at 78% 12%, rgba(196, 98, 45, .22), transparent 58%),
    radial-gradient(70% 90% at 10% 0%, rgba(255, 182, 61, .14), transparent 60%),
    var(--noche);
}
.portada__inner {
  width: var(--ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: var(--s7);
  padding-block: clamp(36px, 5vw, 76px);
}
.portada h1 {
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.portada h1 i { color: var(--ambar); font-style: normal; }
.portada__entrada {
  max-width: var(--medida);
  margin-top: var(--s4);
  color: var(--texto-suave);
  font-size: var(--t-entrada);
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* Табло: сколько залов и сколько открыто прямо сейчас. */
.tablero {
  display: grid;
  gap: var(--s3);
  padding: var(--pad-panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--acero-alto), var(--acero));
  box-shadow: var(--sombra-1);
}
.tablero__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--linea);
}
.tablero__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.tablero__num {
  font: 600 clamp(30px, 3.6vw, 46px)/1 var(--f-titulo);
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.tablero__eti { color: var(--texto-tenue); font-size: var(--t-chico); text-align: right; }

/* --- 8. Карточка зала ---------------------------------------------- */

.ficha {
  display: grid;
  gap: var(--s4);
  padding: var(--pad-panel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r-lg);
  background: var(--acero);
}
.ficha__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s4);
}
.ficha__dato { display: grid; gap: 2px; }
.ficha__dato dt {
  color: var(--texto-tenue);
  font: 700 var(--t-etiqueta)/1.4 var(--f-texto);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ficha__dato dd { margin: 0; color: var(--texto); }
.ficha__dato a { color: var(--ambar); text-decoration: none; }

.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px var(--s3);
  border-radius: var(--r-pill);
  font: 700 var(--t-etiqueta)/1.6 var(--f-texto);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.estado::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.estado--abierto { background: rgba(94, 207, 174, .14); color: var(--menta); }
.estado--cerrado { background: rgba(147, 161, 179, .14); color: var(--texto-tenue); }

/* Вывеска зала вместо фотографии: снимков залов у нас нет, а рисовать
   несуществующие интерьеры настоящих заведений нельзя. */
.marquesina {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: var(--s5);
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, rgba(255, 182, 61, .05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--acero-alto), #0b0e13);
  border: 1px solid var(--linea);
}
.marquesina__nombre {
  color: var(--ambar-alto);
  font: 600 clamp(20px, 3vw, 34px)/1.02 var(--f-titulo);
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255, 182, 61, .45);
}
.marquesina__pie {
  position: absolute;
  bottom: var(--s3);
  color: var(--texto-tenue);
  font: 700 var(--t-etiqueta)/1 var(--f-texto);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --- 9. Сетки и карточки ------------------------------------------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: var(--s4);
}
.tarjeta {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--acero);
  color: inherit;
  text-decoration: none;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.tarjeta__cuerpo { display: grid; align-content: start; gap: var(--s2); padding: var(--pad-panel); }
.tarjeta__cuerpo p { color: var(--texto-tenue); font-size: var(--t-chico); }
.tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  color: var(--texto-tenue);
  font-size: var(--t-chico);
}
.tarjeta__ir { margin-top: var(--s2); color: var(--ambar); font-size: var(--t-chico); font-weight: 700; }
@media (hover: hover) {
  .tarjeta:hover { transform: translateY(-3px); border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
}

.grupo { display: grid; gap: var(--s4); }
.grupo__titulo { color: var(--ambar-alto); }

/* --- 10. Текстовые блоки ------------------------------------------- */

.migas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  color: var(--texto-tenue);
  font-size: var(--t-chico);
}
.migas a { color: var(--ambar); text-decoration: none; }

.cabeza { display: grid; gap: var(--s4); max-width: 940px; margin-inline: auto; }
.entrada { max-width: var(--medida); color: var(--texto-suave); font-size: var(--t-entrada); }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  color: var(--texto-tenue);
  font-size: var(--t-chico);
}

.indice {
  padding: var(--pad-panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--velo-suave);
}
.indice h2 {
  margin-bottom: var(--s3);
  color: var(--ambar);
  font: 700 var(--t-etiqueta)/1.4 var(--f-texto);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.indice ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s2) var(--s5);
  margin: 0;
  padding-left: var(--s5);
  color: var(--texto-tenue);
  font-size: var(--t-chico);
}
.indice a { color: var(--texto-suave); text-decoration: none; }

.prosa {
  display: grid;
  gap: var(--s5);
  padding: var(--pad-panel-lg);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--acero);
}
.prosa > * { min-width: 0; }
.prosa > p,
.prosa > .lista,
.prosa > .pasos { max-width: var(--medida); }
.prosa > h2 { margin-top: var(--s4); }
.prosa > h2:first-child { margin-top: 0; }
.prosa a { color: var(--ambar); text-underline-offset: 3px; }

.lista { display: grid; gap: var(--s2); margin: 0; padding-left: var(--s5); color: var(--texto-suave); }
.lista--num { list-style: decimal; }

.pasos { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  padding: var(--s4);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--velo-suave);
}
.pasos li::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  grid-row: span 2;
  color: var(--ambar);
  font: 700 15px/1.2 var(--f-num);
}
.pasos strong { color: var(--texto); }
.pasos span { grid-column: 2; color: var(--texto-suave); font-size: var(--t-chico); }

.tabla { margin: 0; overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r-lg); }
.tabla table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-chico); }
.tabla th, .tabla td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.tabla thead th {
  color: var(--ambar);
  font: 700 var(--t-etiqueta)/1.4 var(--f-texto);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tabla tbody th { color: var(--texto); font-weight: 700; }
.tabla tr:last-child th, .tabla tr:last-child td { border-bottom: 0; }
.tabla figcaption { padding: var(--s3) var(--s4); color: var(--texto-tenue); font-size: var(--t-chico); }

.aviso {
  display: grid;
  gap: var(--s2);
  padding: var(--pad-panel);
  border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r-md);
  background: rgba(255, 182, 61, .06);
}
.aviso strong { color: var(--ambar-alto); }
.aviso p { color: var(--texto-suave); font-size: var(--t-chico); }

.fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.mini {
  display: grid;
  align-content: start;
  gap: var(--s2);
  padding: var(--pad-panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  background: var(--velo-suave);
}
.mini p { color: var(--texto-tenue); font-size: var(--t-chico); }
.mini a { color: var(--ambar); text-decoration: none; }

.cita {
  margin: 0;
  padding-left: var(--s5);
  border-left: 2px solid var(--cobre);
  color: var(--texto-suave);
  font-style: italic;
}
.cita cite { display: block; margin-top: var(--s2); color: var(--texto-tenue); font-size: var(--t-chico); font-style: normal; }

.faq { display: grid; gap: var(--s4); }
.faq__lista { display: grid; gap: var(--s3); }
.faq details {
  padding: var(--s4) var(--pad-panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--velo-suave);
}
.faq summary { color: var(--texto); cursor: pointer; font-weight: 600; }
.faq details[open] summary { margin-bottom: var(--s3); color: var(--ambar-alto); }
.faq p { color: var(--texto-suave); font-size: var(--t-chico); }

.enlaces { display: grid; gap: var(--s4); }
.enlaces ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.enlaces a {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: var(--s4);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--velo-suave);
  text-decoration: none;
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.enlaces strong { color: var(--texto); font-weight: 600; }
.enlaces span { color: var(--texto-tenue); font-size: var(--t-chico); }
@media (hover: hover) { .enlaces a:hover { border-color: var(--linea-fuerte); background: var(--acero-alto); } }

/* --- 11. Воронка --------------------------------------------------- */

/* Блок оператора: не призыв, а факт о владельце зала. */
.operador {
  display: grid;
  gap: var(--s3);
  padding: var(--pad-panel-lg);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 14% 0%, rgba(255, 182, 61, .14), transparent 62%),
    var(--acero);
}
.operador__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.operador p { color: var(--texto-suave); }

.banda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  padding: var(--pad-panel-lg);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(196, 98, 45, .2), transparent 60%),
    var(--acero-alto);
}
.banda > div { display: grid; gap: var(--s2); }
.banda p:not(.antetitulo) { color: var(--texto-suave); font-size: var(--t-chico); }

.revelacion {
  color: var(--texto-tenue);
  font-size: var(--t-chico);
}

/* Барная строка снизу на телефоне: сколько открыто и переход. */
.barra {
  position: fixed;
  z-index: 90;
  left: 0; right: 0; bottom: 0;
  display: none;
  border-top: 1px solid var(--linea);
  background: rgba(10, 13, 17, .96);
}
.barra a {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 0 var(--s3);
  font: 700 13.5px/1.2 var(--f-texto);
  text-align: center;
  text-decoration: none;
}
.barra a + a { border-left: 1px solid var(--linea); color: var(--sobre-ambar); background: var(--ambar); }

/* На страницах трагедии монетизации нет — правило страхует от случайной
   вставки блока при будущих правках. */
[data-monetizacion="off"] .operador,
[data-monetizacion="off"] .banda,
[data-monetizacion="off"] .barra,
[data-monetizacion="off"] .boton-neon { display: none; }

/* --- 12. Адаптив --------------------------------------------------- */

@media (max-width: 1100px) {
  .portada__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--s6); }
}

@media (max-width: 900px) {
  .cabecera { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3); }
  .menu-boton { display: grid; place-items: center; }
  .nav {
    position: absolute;
    left: var(--canal); right: var(--canal);
    top: calc(100% + var(--s2));
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: var(--s3);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: rgba(10, 13, 17, .98);
    box-shadow: var(--sombra-2);
  }
  .cabecera[data-menu="abierto"] .nav { display: flex; }
  .nav a { justify-content: flex-start; min-height: 46px; font-size: 15px; }
  .marca small { display: none; }

  .portada__inner { grid-template-columns: minmax(0, 1fr); }
  .banda { grid-template-columns: minmax(0, 1fr); }
  .indice ol { grid-template-columns: minmax(0, 1fr); }
  .barra { display: flex; }
  body { padding-bottom: 54px; }
}

@media (max-width: 560px) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Узкий экран: шапка в один ряд без переносов названия. */
@media (max-width: 620px) {
  .cabecera { gap: var(--s2); padding-inline: var(--s4); }
  .marca__silla { width: 30px; height: 20px; }
  .marca__nombre { font-size: 15px; white-space: nowrap; }
  .cabecera .boton-neon { min-height: 42px; padding: 0 var(--s3); font-size: 13px; }
  .menu-boton { width: 42px; height: 42px; }
}