/* jackpotcasinoguide.com - hoja principal */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fuentes/jakarta-cuerpo-variable.woff2') format('woff2');
}

:root {
  --rojo-50: #fff3f3;
  --rojo-100: #fde3e4;
  --rojo-600: #d91023;
  --rojo-700: #b50d1d;
  --rojo-800: #8e0a17;
  --tinta: #1c1517;
  --tinta-suave: #4a4044;
  --hueso: #faf6f3;
  --papel: #ffffff;
  --linea: #e7dedc;
  --tinta-tenue: #817779;
  --oro-300: #f4c542;
  --rosa-claro: #ffe6e8;
  --gris-zocalo: #eadfe1;
  --velo-rojo: rgba(168, 12, 27, 0.9);
  --velo-hondo: rgba(95, 5, 14, 0.36);
  --velo-hondo-2: rgba(95, 5, 14, 0.58);
  --raya-clara: rgba(255, 255, 255, 0.34);
  --letra: 'Plus Jakarta Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --ancho: 1180px;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(28, 21, 23, 0.06), 0 8px 24px rgba(28, 21, 23, 0.07);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  font-family: var(--letra);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: no-contextual;
}

img { max-width: 100%; height: auto; }
a { color: var(--rojo-700); text-underline-offset: 3px; }
a:hover { color: var(--rojo-800); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1.05em; }
ul, ol { padding-left: 1.25em; margin: 0 0 1.05em; }
li { margin-bottom: 0.4em; }

.lienzo { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 18px; }

/* cabecera */
.cabecera-sitio { background: var(--papel); border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.cabecera-lado { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* menu-sitio: una sola linea de ramas, y de cada una cuelga su panel */
.menu-sitio { display: none; }
.menu-sitio > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu-rama { position: relative; margin: 0; }
.menu-boton { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; font-size: 0.93rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.menu-boton::after { content: ""; width: 11px; height: 11px; background-color: currentColor; -webkit-mask: url('/iconos/caret-down-fill.svg') center / contain no-repeat; mask: url('/iconos/caret-down-fill.svg') center / contain no-repeat; }
.menu-boton:hover, .menu-boton[aria-expanded="true"] { background: var(--rojo-50); color: var(--rojo-800); }
.menu-boton[aria-expanded="true"]::after { transform: rotate(180deg); }
.panel { position: absolute; top: 100%; left: 0; z-index: 60; padding-top: 9px; }
.panel--derecha { left: auto; right: 0; }
.panel[hidden] { display: none; }
.panel-caja { min-width: 250px; max-width: calc(100vw - 36px); padding: 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); box-shadow: var(--sombra); }
.panel-lista { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; }
.panel-lista--dos { grid-template-columns: repeat(2, minmax(198px, 1fr)); column-gap: 8px; }
.panel-lista li { margin: 0; }
.panel-lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 8px 10px; border-radius: 8px; color: var(--tinta); text-decoration: none; }
.panel-lista a:hover, .panel-lista a[aria-current="page"] { background: var(--rojo-50); color: var(--rojo-800); }
.panel-lista b { min-width: 0; font-size: 0.93rem; font-weight: 700; line-height: 1.3; }
.panel-lista--sinnota a { grid-template-columns: minmax(0, 1fr); }
.panel-nota { font-size: 0.85rem; font-weight: 800; color: var(--rojo-700); font-variant-numeric: tabular-nums; }
.panel-linea { grid-column: 1 / -1; font-size: 0.82rem; color: var(--tinta-suave); line-height: 1.35; }
.panel-pie { display: block; margin-top: 9px; padding: 10px 10px 2px; border-top: 1px solid var(--linea); font-size: 0.87rem; font-weight: 700; }

/* buscador: el hueco entre el menu y el 18+ lo ocupa la busqueda del sitio */
.buscador { position: relative; display: none; align-items: center; gap: 8px; width: 264px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hueso); }
.buscador-rotulo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.buscador-lupa { flex: none; width: 17px; height: 17px; opacity: 0.5; }
.buscador-campo { flex: 1 1 auto; min-width: 0; height: 38px; border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--tinta); }
.buscador-campo::placeholder { color: var(--tinta-suave); }
.buscador-campo:focus { outline: none; }
.buscador:focus-within { border-color: var(--rojo-600); background: var(--papel); }
.buscador-panel { top: calc(100% + 6px); left: 0; right: 0; padding-top: 0; }
.buscador-panel .panel-caja { min-width: 0; }
.buscador--movil { display: flex; width: auto; margin: 14px 18px 2px; }

/* cajon: el mismo menu en el celular, plegado por secciones */
.menu-movil { border-bottom: 1px solid var(--linea); background: var(--hueso); max-height: 76vh; overflow-y: auto; }
.menu-movil[hidden] { display: none; }
.cajon { border-top: 1px solid var(--linea); }
.cajon:first-child { border-top: 0; }
.cajon summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: 800; font-size: 0.95rem; color: var(--tinta); cursor: pointer; list-style: none; }
.cajon summary::-webkit-details-marker { display: none; }
.cajon summary::after { content: ""; flex: none; width: 13px; height: 13px; background-color: var(--rojo-600); -webkit-mask: url('/iconos/caret-down-fill.svg') center / contain no-repeat; mask: url('/iconos/caret-down-fill.svg') center / contain no-repeat; }
.cajon[open] summary::after { transform: rotate(180deg); }
.cajon ul { list-style: none; margin: 0; padding: 0 18px 12px; }
.cajon li { margin: 0; }
.cajon a { display: block; padding: 11px 4px; border-top: 1px solid var(--linea); color: var(--tinta); font-weight: 600; text-decoration: none; }
.cajon a[aria-current="page"] { color: var(--rojo-800); }
.marca-sitio { flex: none; display: block; line-height: 0; }
.marca-sitio img { width: 108px; height: 39px; display: block; }
/* telegrama: el acceso al canal, con su aviso sin leer */
.telegrama { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--linea); border-radius: 999px; background: var(--papel); }
.telegrama:hover { border-color: var(--rojo-600); background: var(--rojo-50); }
.telegrama img { width: 21px; height: 21px; display: block; }
.telegrama-aviso { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 4px; border: 2px solid var(--papel); border-radius: 999px; background: var(--rojo-600); color: var(--papel); font-size: 0.68rem; font-weight: 800; line-height: 1; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.edad-marca { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 28px; padding: 0 8px; border: 2px solid var(--rojo-600); border-radius: 999px; color: var(--rojo-700); font-weight: 800; font-size: 0.8rem; }
.abre-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); cursor: pointer; }
.abre-menu .icono-cerrar { display: none; }
body.menu-abierto .abre-menu .icono-abrir { display: none; }
body.menu-abierto .abre-menu .icono-cerrar { display: block; }

/* aviso de afiliacion */
.aviso-afiliado { background: var(--hueso); border-bottom: 1px solid var(--linea); font-size: 0.85rem; color: var(--tinta-suave); }
.aviso-afiliado p { margin: 0; padding: 8px 0; }

.insignia-casino { display: inline-block; border-radius: 6px; overflow: hidden; line-height: 0; }
.boton-ir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; background: var(--rojo-600); color: var(--papel); font-weight: 800; text-decoration: none; box-shadow: 0 6px 16px rgba(217, 16, 35, 0.28); transition: background 0.15s ease, transform 0.15s ease; }
.boton-ir:hover { background: var(--rojo-700); color: var(--papel); transform: translateY(-1px); }
.boton-ir img { filter: brightness(0) invert(1); }
.letra-chica { font-size: 0.8rem; color: var(--tinta-suave); margin: 0; }

/* la rejilla de cifras, con la ficha real del juego al lado */
.vitral--fotos li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 13px 14px 14px; }
.vitral--fotos .vitral-foto, .vitral--fotos .vitral-icono { grid-row: auto; margin-bottom: 7px; }
.vitral--fotos .vitral-cifra { font-size: clamp(1.1rem, 2.7vw, 1.35rem); }
.vitral-foto { grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 8px; display: block; }

/* cuando no hay ficha de juego, la celda lleva su icono en el mismo hueco */
.vitral-icono { grid-row: 1 / span 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: var(--rojo-50); }
.vitral-icono::before { content: ""; width: 27px; height: 27px; background-color: var(--rojo-600); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.vitral-icono--clock::before { -webkit-mask-image: url('/iconos/clock-regular.svg'); mask-image: url('/iconos/clock-regular.svg'); }
.vitral-icono--hand-coins::before { -webkit-mask-image: url('/iconos/hand-coins-regular.svg'); mask-image: url('/iconos/hand-coins-regular.svg'); }
.vitral-icono--gauge::before { -webkit-mask-image: url('/iconos/gauge-regular.svg'); mask-image: url('/iconos/gauge-regular.svg'); }
.vitral-icono--warning::before { -webkit-mask-image: url('/iconos/warning-regular.svg'); mask-image: url('/iconos/warning-regular.svg'); }
.vitral-icono--identification-card::before { -webkit-mask-image: url('/iconos/identification-card-regular.svg'); mask-image: url('/iconos/identification-card-regular.svg'); }
.vitral-icono--shield-check::before { -webkit-mask-image: url('/iconos/shield-check-regular.svg'); mask-image: url('/iconos/shield-check-regular.svg'); }
.vitral-icono--list::before { -webkit-mask-image: url('/iconos/list-regular.svg'); mask-image: url('/iconos/list-regular.svg'); }
.vitral-icono--trophy::before { -webkit-mask-image: url('/iconos/trophy-regular.svg'); mask-image: url('/iconos/trophy-regular.svg'); }
.vitral-icono--wallet::before { -webkit-mask-image: url('/iconos/wallet-regular.svg'); mask-image: url('/iconos/wallet-regular.svg'); }
.vitral-icono--equis::before { -webkit-mask-image: url('/iconos/x-regular.svg'); mask-image: url('/iconos/x-regular.svg'); }
.vitral-icono--envelope-simple::before { -webkit-mask-image: url('/iconos/envelope-simple-regular.svg'); mask-image: url('/iconos/envelope-simple-regular.svg'); }
.vitral-icono--gift::before { -webkit-mask-image: url('/iconos/gift-regular.svg'); mask-image: url('/iconos/gift-regular.svg'); }
.vitral-icono--arrow-arc-left::before { -webkit-mask-image: url('/iconos/arrow-arc-left-regular.svg'); mask-image: url('/iconos/arrow-arc-left-regular.svg'); }
.vitral-icono--clock-counter-clockwise::before { -webkit-mask-image: url('/iconos/clock-counter-clockwise-regular.svg'); mask-image: url('/iconos/clock-counter-clockwise-regular.svg'); }
.vitral-icono--currency-circle-dollar::before { -webkit-mask-image: url('/iconos/currency-circle-dollar-regular.svg'); mask-image: url('/iconos/currency-circle-dollar-regular.svg'); }
.vitral-icono--calendar-blank::before { -webkit-mask-image: url('/iconos/calendar-blank-regular.svg'); mask-image: url('/iconos/calendar-blank-regular.svg'); }
.vitral-icono--lock::before { -webkit-mask-image: url('/iconos/lock-regular.svg'); mask-image: url('/iconos/lock-regular.svg'); }
.vitral-icono--arrows-clockwise::before { -webkit-mask-image: url('/iconos/arrows-clockwise-regular.svg'); mask-image: url('/iconos/arrows-clockwise-regular.svg'); }
.vitral-icono--scales::before { -webkit-mask-image: url('/iconos/scales-regular.svg'); mask-image: url('/iconos/scales-regular.svg'); }
.vitral-icono--star::before { -webkit-mask-image: url('/iconos/star-regular.svg'); mask-image: url('/iconos/star-regular.svg'); }
.vitral-icono--star-half::before { -webkit-mask-image: url('/iconos/star-half-regular.svg'); mask-image: url('/iconos/star-half-regular.svg'); }
.vitral-icono--file-text::before { -webkit-mask-image: url('/iconos/file-text-regular.svg'); mask-image: url('/iconos/file-text-regular.svg'); }
.vitral-icono--magnifying-glass::before { -webkit-mask-image: url('/iconos/magnifying-glass-regular.svg'); mask-image: url('/iconos/magnifying-glass-regular.svg'); }
.vitral-icono--link::before { -webkit-mask-image: url('/iconos/link-regular.svg'); mask-image: url('/iconos/link-regular.svg'); }
.vitral-icono--books::before { -webkit-mask-image: url('/iconos/books-regular.svg'); mask-image: url('/iconos/books-regular.svg'); }
.vitral-icono--chart-line::before { -webkit-mask-image: url('/iconos/chart-line-regular.svg'); mask-image: url('/iconos/chart-line-regular.svg'); }
.vitral-icono--chart-bar::before { -webkit-mask-image: url('/iconos/chart-bar-regular.svg'); mask-image: url('/iconos/chart-bar-regular.svg'); }
.vitral-icono--chart-pie-slice::before { -webkit-mask-image: url('/iconos/chart-pie-slice-regular.svg'); mask-image: url('/iconos/chart-pie-slice-regular.svg'); }
.vitral-icono--bank::before { -webkit-mask-image: url('/iconos/bank-regular.svg'); mask-image: url('/iconos/bank-regular.svg'); }
.vitral-icono--phone-call::before { -webkit-mask-image: url('/iconos/phone-call-regular.svg'); mask-image: url('/iconos/phone-call-regular.svg'); }
.vitral-icono--prohibit::before { -webkit-mask-image: url('/iconos/prohibit-regular.svg'); mask-image: url('/iconos/prohibit-regular.svg'); }
.vitral-icono--archive::before { -webkit-mask-image: url('/iconos/archive-regular.svg'); mask-image: url('/iconos/archive-regular.svg'); }
.vitral-icono--buildings::before { -webkit-mask-image: url('/iconos/buildings-regular.svg'); mask-image: url('/iconos/buildings-regular.svg'); }
.vitral-icono--puzzle-piece::before { -webkit-mask-image: url('/iconos/puzzle-piece-regular.svg'); mask-image: url('/iconos/puzzle-piece-regular.svg'); }
.vitral-icono--book-open::before { -webkit-mask-image: url('/iconos/book-open-regular.svg'); mask-image: url('/iconos/book-open-regular.svg'); }
.vitral-icono--copy::before { -webkit-mask-image: url('/iconos/copy-regular.svg'); mask-image: url('/iconos/copy-regular.svg'); }
.vitral-icono--flask::before { -webkit-mask-image: url('/iconos/flask-regular.svg'); mask-image: url('/iconos/flask-regular.svg'); }
.vitral-icono--chat-circle-dots::before { -webkit-mask-image: url('/iconos/chat-circle-dots-regular.svg'); mask-image: url('/iconos/chat-circle-dots-regular.svg'); }
.vitral-icono--game-controller::before { -webkit-mask-image: url('/iconos/game-controller-regular.svg'); mask-image: url('/iconos/game-controller-regular.svg'); }

/* marcas: la fila de logos de casino del balcon, cada uno con su propio fondo y sin caja */
.balcon-rotulo { margin: 18px 0 9px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-suave); text-align: center; }
.marcas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; list-style: none; margin: 0; padding: 0; }
.marcas li { margin: 0; line-height: 0; }
.marcas a { display: block; border-radius: 6px; overflow: hidden; }
.marcas a:hover { outline: 2px solid var(--rojo-600); outline-offset: 2px; }
.marcas img { width: 112px; height: 42px; display: block; border-radius: 6px; }
/* diez marcas caben mal en una linea: se reparten en dos filas parejas de cinco */
.marcas--diez { max-width: 596px; margin-left: auto; margin-right: auto; }

/* indice: un sumario en una sola linea. Se centra si cabe y se desliza si no, con el borde difuminado para que no parezca cortado */
.indice { position: sticky; top: 0; z-index: 30; background: var(--papel); border-bottom: 1px solid var(--linea); }
.indice .lienzo { position: relative; }
.indice ul { display: flex; gap: 0 24px; width: max-content; max-width: 100%; margin: 0 auto; padding: 11px 0 10px; list-style: none; overflow-x: auto; scrollbar-width: none;
  /* la sombra de los bordes solo aparece cuando de verdad queda algo por deslizar */
  background: linear-gradient(90deg, var(--papel) 40%, rgba(255, 255, 255, 0)) left / 44px 100% no-repeat,
    linear-gradient(270deg, var(--papel) 40%, rgba(255, 255, 255, 0)) right / 44px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(28, 21, 23, 0.16), rgba(28, 21, 23, 0)) left / 16px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 21, 23, 0.16), rgba(28, 21, 23, 0)) right / 16px 100% no-repeat;
  background-attachment: local, local, scroll, scroll; }
.indice ul::-webkit-scrollbar { display: none; }
.indice li { margin: 0; flex: none; }
.indice a { display: block; padding: 3px 0; border-bottom: 2px solid transparent; font-size: 0.9rem; font-weight: 700; color: var(--tinta-suave); text-decoration: none; white-space: nowrap; }
.indice a:hover { color: var(--tinta); }
.indice a.en-vista { color: var(--rojo-700); border-bottom-color: var(--rojo-600); }

.medios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.medios li { margin: 0; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); overflow: hidden; line-height: 0; }
.medios img { width: 100%; height: auto; display: block; }
.tambo .medios { display: flex; flex-wrap: wrap; justify-content: center; max-width: none; margin: 18px 0 22px; }
.tambo .medios li { flex: 0 0 calc((100% - 16px) / 3); max-width: 132px; }

/* cuerpo */
.cuerpo-resena { padding-top: 18px; padding-bottom: 40px; }
.cuerpo-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); }
.cuerpo-texto { min-width: 0; overflow-wrap: break-word; }
.acompanante { display: none; }
.tambo { padding: 34px 0 6px; border-bottom: 1px solid var(--linea); }
.tambo:last-of-type { border-bottom: 0; }
.tambo > p, .tambo > ul, .tambo > ol, .tambo > h3 { max-width: 78ch; }
.lo-corto { border-left: 4px solid var(--rojo-600); background: var(--rojo-50); padding: 14px 18px; margin: 0 0 1.2em; font-weight: 600; max-width: 78ch; }
.lo-corto p { margin: 0; }

.evidencia { margin: 22px 0 26px; max-width: 1000px; }
.evidencia img { display: block; width: 100%; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.evidencia figcaption { font-size: 0.86rem; color: var(--tinta-suave); margin-top: 8px; }
.evidencia--angosta { max-width: 720px; margin-left: auto; margin-right: auto; }
.evidencia--objeto { max-width: 320px; margin-left: auto; margin-right: auto; text-align: center; }
.evidencia--objeto img { border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 10px 16px rgba(28, 21, 23, 0.18)); }

.cuadro { overflow-x: auto; margin: 18px 0 24px; border: 1px solid var(--linea); border-radius: var(--radio); }
.cuadro table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 560px; }
.cuadro caption { caption-side: top; text-align: left; padding: 12px 14px; font-weight: 800; background: var(--hueso); border-bottom: 1px solid var(--linea); }
.cuadro th, .cuadro td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.cuadro thead th { background: var(--tinta); color: var(--papel); font-size: 0.82rem; letter-spacing: 0.03em; white-space: nowrap; }
.cuadro tbody tr:last-child td, .cuadro tbody tr:last-child th { border-bottom: 0; }
.cuadro tbody th { font-weight: 700; }
.cuadro .junto { white-space: nowrap; }
.cuadro tbody tr:nth-child(even) { background: var(--hueso); }

.pozos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 20px 0 8px; }
.pozos li { container-type: inline-size; min-width: 0; margin: 0; padding: 16px 13px; border-radius: var(--radio); background: var(--tinta); color: var(--papel); }
.pozo-nombre { display: block; font-size: 0.82rem; font-weight: 700; color: var(--gris-zocalo); }
.pozo-inti { display: block; font-size: clamp(0.8rem, 8.4cqi, 1.6rem); font-weight: 800; letter-spacing: -0.02em; color: var(--oro-300); margin: 2px 0; overflow-wrap: anywhere; }
.pozo-cuantos { display: block; font-size: 0.82rem; color: var(--gris-zocalo); }

.pasos { counter-reset: paso; list-style: none; padding: 0; max-width: 78ch; }
.pasos li { counter-increment: paso; position: relative; padding: 2px 0 12px 46px; margin: 0; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--rojo-600); color: var(--papel); font-weight: 800; display: grid; place-items: center; font-size: 0.95rem; }

.balanza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 18px 0 24px; }
.balanza-lado { min-width: 0; border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; background: var(--papel); }
.balanza-lado h3 img { vertical-align: -4px; margin-right: 6px; }
.balanza-lado ul { list-style: none; padding: 0; margin: 0; }
.balanza-lado li { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.balanza-lado li:last-child { border-bottom: 0; }

.notas-parciales { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; list-style: none; padding: 0; margin: 18px 0 24px; max-width: 78ch; }
.notas-parciales li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.notas-parciales .barra { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--rojo-100); overflow: hidden; }
.notas-parciales .barra i { display: block; height: 100%; border-radius: 99px; background: var(--rojo-600); }
.notas-parciales b { font-variant-numeric: tabular-nums; }
.barra i[data-nota="10"] { width: 10%; }
.barra i[data-nota="15"] { width: 15%; }
.barra i[data-nota="20"] { width: 20%; }
.barra i[data-nota="25"] { width: 25%; }
.barra i[data-nota="30"] { width: 30%; }
.barra i[data-nota="35"] { width: 35%; }
.barra i[data-nota="40"] { width: 40%; }
.barra i[data-nota="45"] { width: 45%; }
.barra i[data-nota="50"] { width: 50%; }
.barra i[data-nota="55"] { width: 55%; }
.barra i[data-nota="60"] { width: 60%; }
.barra i[data-nota="65"] { width: 65%; }
.barra i[data-nota="70"] { width: 70%; }
.barra i[data-nota="75"] { width: 75%; }
.barra i[data-nota="80"] { width: 80%; }
.barra i[data-nota="85"] { width: 85%; }
.barra i[data-nota="90"] { width: 90%; }
.barra i[data-nota="95"] { width: 95%; }
.barra i[data-nota="100"] { width: 100%; }
.otras { list-style: none; padding: 0; max-width: 78ch; }
.otras li { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.otras li:last-child { border-bottom: 0; }

.cierre-accion { margin: 26px 0 8px; padding: 22px; border-radius: var(--radio); background: var(--rojo-50); border: 1px solid var(--rojo-100); display: grid; gap: 12px; justify-items: start; }
.cierre-accion p { margin: 0; }

.dudas details { border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 10px; background: var(--papel); max-width: 860px; }
.dudas summary { cursor: pointer; padding: 15px 18px; font-weight: 700; }
.dudas details[open] summary { border-bottom: 1px solid var(--linea); }
.dudas details p { padding: 14px 18px 4px; margin: 0 0 10px; }

.firma { font-size: 0.9rem; color: var(--tinta-suave); margin: 0 0 6px; }

/* zocalo: arriba las columnas sobre hueso, abajo la banda oscura */
.zocalo-sitio { margin-top: 34px; }
.zocalo-alto { background: var(--hueso); border-top: 1px solid var(--linea); padding: 34px 0 30px; }
.zocalo-hondo { background: var(--tinta); color: var(--gris-zocalo); }
.zocalo-hondo a { color: var(--papel); }


.zocalo-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.zocalo-marca { min-width: 0; }
.zocalo-logo { width: 139px; height: 50px; display: block; margin-bottom: 12px; }
.zocalo-marca p { margin: 0 0 10px; font-size: 0.92rem; color: var(--tinta-suave); line-height: 1.55; max-width: 48ch; }
.zocalo-fuente { font-weight: 700; }
.zocalo-columna h2 { margin: 0 0 11px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-suave); }
.zocalo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.zocalo-lista--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; }
.zocalo-lista li { margin: 0; }
.zocalo-lista a { font-size: 0.92rem; color: var(--tinta); text-decoration: none; }
.zocalo-lista a:hover { color: var(--rojo-700); text-decoration: underline; }
.zocalo-mas { margin: 12px 0 0; font-size: 0.88rem; font-weight: 700; }

.zocalo-amparo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 26px; padding-bottom: 22px; }
.zocalo-amparo img { border-radius: 6px; }
.zocalo-amparo p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.6; }
.zocalo-fono { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; border: 1px solid var(--raya-clara); border-radius: var(--radio); font-size: 0.82rem; text-decoration: none; }
.zocalo-fono span { font-size: 1.6rem; font-weight: 800; color: var(--oro-300); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.zocalo-fin { padding-top: 16px; padding-bottom: 26px; font-size: 0.84rem; }
.zocalo-fin p:first-child { border-top: 1px solid var(--raya-clara); padding-top: 16px; }
.zocalo-fin p { margin: 0 0 6px; }

.subir-arriba { position: fixed; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--raya-clara); background: var(--tinta); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 40; }
.subir-arriba img { filter: brightness(0) invert(1); }
.subir-arriba.visible { opacity: 1; pointer-events: auto; }

.padron-ancho { padding-top: 6px; padding-bottom: 8px; }
.padron-ancho .tambo { border-bottom: 0; }

/* grafica: SVG inline de las paginas de estadisticas */
.grafica { margin: 18px 0 26px; }
.grafica .grafico { width: 100%; height: auto; display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 6px; }
.grafica figcaption { margin-top: 10px; }

/* vitrina: los pozos del mes en la portada, con la ficha real del juego */

/* probanza: lo que el lector puede verificar, una tarjeta con su icono cada cosa */

/* rotulillo: el letrero corto que presenta una fila de logos */
.rotulillo { margin: 20px 0 9px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-suave); }

/* retablo: rejilla de tarjetas del indice de estadisticas */
.retablo { display: grid; grid-template-columns: 1fr; gap: 14px; list-style: none; padding: 0; margin: 22px 0 8px; }
.retablo li { min-width: 0; margin: 0; padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; }
.retablo-icono { width: 52px; height: 52px; }
.retablo-icono::before { width: 25px; height: 25px; }
.retablo-cifra { font-size: 1.5rem; font-weight: 800; color: var(--rojo-700); line-height: 1.1; font-variant-numeric: tabular-nums; }
.retablo-titulo { font-size: 1.02rem; font-weight: 700; }
.retablo-titulo a { text-decoration: none; }
.retablo-titulo a:hover { text-decoration: underline; }
.retablo-linea { margin: 0; font-size: 0.94rem; color: var(--tinta-suave); line-height: 1.5; }

/* franja: cada banda de la portada, con su fondo y su titulo marcado por una raya */
.franja { padding: 40px 0 44px; border-bottom: 1px solid var(--linea); }
.franja--hueso { background: var(--hueso); }
.franja--honda { background: var(--tinta); color: var(--gris-zocalo); border-bottom-color: var(--tinta); }
.franja h2 { margin: 0 0 10px; font-size: clamp(1.4rem, 3.4vw, 1.95rem); line-height: 1.16; }
.franja h2::before { content: ""; display: block; width: 46px; height: 3px; margin-bottom: 13px; border-radius: 2px; background: var(--rojo-600); }
.franja--honda h2::before { background: var(--oro-300); }
.franja > .lienzo > p { max-width: 76ch; color: var(--tinta-suave); }
.franja--honda > .lienzo > p { color: var(--gris-zocalo); }
.franja--honda a { color: var(--papel); }
.franja-cierre { margin-top: 16px; font-weight: 700; }

/* escalinata: las diez casas en orden de nota, cada una con su barra */
.escalinata { list-style: none; margin: 24px 0 0; padding: 0; }
.escalinata li { margin: 0; padding: 15px 0 16px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 34px 112px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; }
.escalinata li:first-child { border-top: 0; padding-top: 4px; }
.escalinata-puesto { grid-column: 1; grid-row: 1; font-size: 1.45rem; font-weight: 800; color: var(--tinta-tenue); line-height: 1; font-variant-numeric: tabular-nums; }
.escalinata li:nth-child(-n+3) .escalinata-puesto { color: var(--rojo-600); }
.escalinata-marca { grid-column: 2; grid-row: 1; display: block; border-radius: 6px; overflow: hidden; line-height: 0; }
.escalinata-marca img { width: 112px; height: 42px; display: block; }
.escalinata-nombre { grid-column: 3; grid-row: 1; font-weight: 700; font-size: 1.02rem; }
.escalinata-nota { grid-column: 4; grid-row: 1; justify-self: end; font-size: 1.15rem; font-weight: 800; color: var(--rojo-700); font-variant-numeric: tabular-nums; }
.escalinata-nota span { font-size: 0.72rem; font-weight: 700; color: var(--tinta-suave); }
.escalinata-riel { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 999px; background: var(--rosa-claro); overflow: hidden; }
.escalinata-riel span { display: block; height: 100%; border-radius: 999px; background: var(--rojo-600); }
.escalinata-linea { grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: 0.93rem; color: var(--tinta-suave); line-height: 1.5; }
.escalinata-ir { grid-column: 1 / -1; grid-row: 4; font-size: 0.88rem; font-weight: 700; justify-self: start; }
.escalinata--85 span, .escalinata span.escalinata--85 { width: 85%; }
.escalinata span.escalinata--83 { width: 83%; }
.escalinata span.escalinata--82 { width: 82%; }
.escalinata span.escalinata--76 { width: 76%; }
.escalinata span.escalinata--67 { width: 67%; }
.escalinata span.escalinata--61 { width: 61%; }
.escalinata span.escalinata--59 { width: 59%; }
.escalinata span.escalinata--52 { width: 52%; }
.escalinata span.escalinata--42 { width: 42%; }

/* cajero: los medios de pago agrupados por lo que son, con el rotulo al costado */
.cajero { display: grid; gap: 20px; margin: 24px 0 0; }
.cajero-grupo { display: grid; gap: 9px; align-content: start; }
.cajero-titulo { margin: 0; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-suave); }
.cajero-fila { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cajero-fila li { margin: 0; line-height: 0; border: 1px solid var(--linea); border-radius: 8px; background: var(--papel); overflow: hidden; }
.cajero-fila img { width: 128px; height: 48px; display: block; }

/* vitrina: los pozos del mes, con la ficha del juego y la barra a escala */
.vitrina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 24px 0 0; }
.vitrina li { min-width: 0; margin: 0; padding: 15px 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); display: grid; gap: 3px; justify-items: center; text-align: center; align-content: start; }
.vitrina img { width: 88px; height: 88px; border-radius: 10px; margin-bottom: 8px; }
.vitrina-monto { font-size: 1.4rem; font-weight: 800; color: var(--rojo-700); line-height: 1.1; font-variant-numeric: tabular-nums; }
.vitrina-riel { width: 100%; height: 5px; border-radius: 999px; background: var(--rosa-claro); overflow: hidden; margin: 5px 0 7px; }
.vitrina-riel span { display: block; height: 100%; border-radius: 999px; background: var(--rojo-600); }
.vitrina span.vitrina--100 { width: 100%; }
.vitrina span.vitrina--13 { width: 13%; }
.vitrina span.vitrina--5 { width: 5%; }
.vitrina span.vitrina--4 { width: 4%; }
.vitrina-juego { font-size: 0.98rem; font-weight: 700; }
.vitrina-casa { font-size: 0.89rem; color: var(--tinta-suave); }
.vitrina-pie { margin: 14px 0 0; font-size: 0.9rem; color: var(--tinta-suave); }

/* hallazgo: el dato que abre la seccion de datos, citado en grande */
.hallazgo { display: grid; gap: 20px; margin: 22px 0 0; }
.hallazgo-cita { margin: 0; padding: 2px 0 2px 18px; border-left: 4px solid var(--rojo-600); }
.hallazgo-cita p { margin: 0; font-size: clamp(1.2rem, 2.9vw, 1.68rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.hallazgo-texto p { margin: 0 0 11px; }

/* cifrario: cinco cifras sueltas bajo una raya, sin caja */
.cifrario { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 26px 0 0; padding: 0; }
.cifrario li { margin: 0; padding: 11px 0 13px; border-top: 2px solid var(--rojo-100); display: grid; gap: 2px; align-content: start; }
.cifrario-cifra { font-size: 1.45rem; font-weight: 800; color: var(--rojo-700); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifrario-rotulo { font-size: 0.93rem; font-weight: 700; color: var(--tinta); text-decoration: none; }
.cifrario-rotulo:hover { text-decoration: underline; }

/* probanza: lo que el lector puede verificar, marcado una a una */
.probanza { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 22px 0 0; padding: 0; }
.probanza li { margin: 0; padding: 15px 0 16px 38px; border-top: 1px solid var(--linea); position: relative; }
.probanza li::before { content: ""; position: absolute; left: 0; top: 17px; width: 24px; height: 24px; background-color: var(--rojo-600); -webkit-mask: url('/iconos/check-circle-fill.svg') center / contain no-repeat; mask: url('/iconos/check-circle-fill.svg') center / contain no-repeat; }
.probanza h3 { margin: 0 0 5px; font-size: 1.04rem; }
.probanza p { margin: 0; font-size: 0.95rem; color: var(--tinta-suave); line-height: 1.55; }

/* baremo: los cien puntos de la nota en una sola barra, con su leyenda */
.baremo { display: flex; width: 100%; height: 48px; border-radius: 8px; overflow: hidden; margin: 26px 0 0; }
.baremo-parte { display: grid; place-items: center; font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.baremo--jackpots { background: var(--rojo-600); color: var(--papel); }
.baremo--pagos { background: var(--rojo-700); color: var(--papel); }
.baremo--licencia { background: var(--rojo-800); color: var(--papel); }
.baremo--bono { background: var(--oro-300); color: var(--tinta); }
.baremo--soporte { background: var(--gris-zocalo); color: var(--tinta); }
.baremo span.baremo--jackpots { width: 30%; }
.baremo span.baremo--pagos { width: 25%; }
.baremo span.baremo--licencia { width: 20%; }
.baremo span.baremo--bono { width: 15%; }
.baremo span.baremo--soporte { width: 10%; }
.baremo-leyenda { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 20px 0 0; padding: 0; }
.baremo-leyenda li { margin: 0; padding: 12px 0 13px; border-top: 1px solid rgba(234, 223, 225, 0.2); display: grid; grid-template-columns: 15px auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.baremo-tinte { width: 15px; height: 15px; border-radius: 4px; }
.baremo-peso { font-weight: 800; color: var(--papel); font-variant-numeric: tabular-nums; }
.baremo-nombre { font-weight: 700; color: var(--papel); }
.baremo-linea { grid-column: 2 / -1; margin: 5px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--gris-zocalo); }

/* crono: las ultimas cuatro paginas colgando de una linea de tiempo */
.crono { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 26px 0 0; padding: 0; }
.crono li { margin: 0; position: relative; padding: 0 0 20px 22px; border-left: 2px solid var(--rojo-100); display: grid; gap: 4px; align-content: start; }
.crono li:last-child { border-left-color: transparent; }
.crono li::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--rojo-600); border: 2px solid var(--hueso); }
.crono-fecha { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); }
.crono-titulo { font-size: 1.02rem; font-weight: 700; }
.crono-titulo a { text-decoration: none; }
.crono-titulo a:hover { text-decoration: underline; }
.crono-linea { margin: 0; font-size: 0.92rem; color: var(--tinta-suave); line-height: 1.5; }
/* padron: rejilla de fichas de licencia (casinos-online-legales-peru) */
.padron { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 20px 0 8px; }
.padron li { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); display: grid; gap: 8px; justify-items: start; }
.padron .insignia-casino img { width: 112px; height: 42px; }
.padron-dominio { font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; }
.padron-codigo { font-size: 0.86rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.padron-codigo b { color: var(--tinta); font-weight: 700; white-space: nowrap; }
.padron a.padron-ir { font-size: 0.88rem; font-weight: 700; }

@media (min-width: 400px) {
  .marca-sitio img { width: 122px; height: 44px; }
}

@media (min-width: 600px) {
  .medios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .balanza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .padron { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
 .escalinata li { grid-template-columns: 34px 112px minmax(130px, 0.9fr) minmax(0, 1.9fr) 150px auto auto; column-gap: 16px; row-gap: 0; }
  .escalinata li:first-child { padding-top: 15px; border-top: 1px solid var(--linea); }
  .escalinata-linea { grid-column: 4; grid-row: 1; }
  .escalinata-riel { grid-column: 5; grid-row: 1; }
  .escalinata-nota { grid-column: 6; grid-row: 1; justify-self: start; }
  .escalinata-ir { grid-column: 7; grid-row: 1; justify-self: end; white-space: nowrap; }
  .cajero-grupo { grid-template-columns: 148px minmax(0, 1fr); align-items: start; column-gap: 18px; }
  .cajero-titulo { padding-top: 16px; }
  .vitrina { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hallazgo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
  .cifrario { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; }
  .probanza { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .baremo-leyenda { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 22px; border-top: 0; }
  .baremo-leyenda li { grid-template-columns: 15px minmax(0, 1fr); align-items: center; align-content: start; }
  .baremo-nombre { grid-column: 1 / -1; }
  .crono { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crono li { border-left: 0; border-top: 2px solid var(--rojo-100); padding: 22px 22px 0 0; }
  .crono li:last-child { border-left-color: var(--rojo-100); }
  .crono li::before { left: -1px; top: -7px; }
  .retablo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .medios { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .medios { grid-template-columns: repeat(11, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .cuerpo-rejilla { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; }
  .acompanante { display: grid; gap: 14px; justify-items: center; align-self: start; position: sticky; top: 74px; margin-top: 34px; padding: 22px 20px; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); background: var(--papel); text-align: center; }
  .acompanante-nota { margin: 0; color: var(--tinta-suave); font-weight: 700; }
  .acompanante-nota strong { font-size: 1.9rem; color: var(--rojo-700); letter-spacing: -0.03em; }
  .acompanante ul { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; }
  .acompanante li { margin: 0; padding: 9px 0; border-top: 1px solid var(--linea); font-weight: 700; font-size: 0.93rem; line-height: 1.35; }
  /* pauta: el desglose de la nota, en barras, junto al numero que explican */
  .pauta li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; align-items: baseline; padding: 10px 0 13px; }
  .pauta-criterio { font-size: 0.85rem; font-weight: 700; }
  .pauta-nota { font-size: 0.95rem; font-weight: 800; color: var(--rojo-700); font-variant-numeric: tabular-nums; }
  .pauta-riel { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--rosa-claro); overflow: hidden; }
  .pauta-riel span { display: block; height: 100%; border-radius: 999px; background: var(--rojo-600); font-size: 0; }
  .pauta-riel .pauta--10 { width: 10%; }
  .pauta-riel .pauta--15 { width: 15%; }
  .pauta-riel .pauta--20 { width: 20%; }
  .pauta-riel .pauta--25 { width: 25%; }
  .pauta-riel .pauta--30 { width: 30%; }
  .pauta-riel .pauta--35 { width: 35%; }
  .pauta-riel .pauta--40 { width: 40%; }
  .pauta-riel .pauta--45 { width: 45%; }
  .pauta-riel .pauta--50 { width: 50%; }
  .pauta-riel .pauta--55 { width: 55%; }
  .pauta-riel .pauta--60 { width: 60%; }
  .pauta-riel .pauta--65 { width: 65%; }
  .pauta-riel .pauta--70 { width: 70%; }
  .pauta-riel .pauta--75 { width: 75%; }
  .pauta-riel .pauta--80 { width: 80%; }
  .pauta-riel .pauta--85 { width: 85%; }
  .pauta-riel .pauta--90 { width: 90%; }
  .pauta-riel .pauta--95 { width: 95%; }
  .pauta-riel .pauta--100 { width: 100%; }
  .acompanante .boton-ir { width: 100%; }
}

/* tira de resenas bajo la cabecera */

/* guias: balcon, la portada clara */
.balcon { background: var(--hueso); border-bottom: 1px solid var(--linea); padding: 22px 0 26px; }
.balcon-fila { display: grid; grid-template-columns: minmax(0, 1fr); }
.balcon-texto { min-width: 0; text-align: center; }
.balcon-texto h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 3.9vw, 2.3rem); line-height: 1.12; letter-spacing: -0.015em; }
.balcon-entrada { margin: 0 auto 12px; color: var(--tinta-suave); font-size: 1.05rem; line-height: 1.55; }
.balcon-texto .firma { margin: 0; }
.balcon .vitral { margin: 20px 0 0; }
.balcon .tranca { margin-top: 16px; justify-content: center; }
.boton-linea { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--tinta); color: var(--tinta); font-weight: 800; text-decoration: none; background: var(--papel); }
.boton-linea:hover { border-color: var(--rojo-700); color: var(--rojo-800); }

/* escalafon: la lista de casinos */
.escalafon { padding: 30px 0 8px; }
.escalafon > .lienzo > p { max-width: 78ch; }
.escalafon-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.escalafon-fila { min-width: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra); }
.escalafon-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.escalafon-puesto { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--papel); font-weight: 800; font-variant-numeric: tabular-nums; }
.escalafon-fila:first-child .escalafon-puesto { background: var(--rojo-600); }
.escalafon-marca .insignia-casino img { width: 128px; height: 48px; }
.escalafon-cifra { container-type: inline-size; min-width: 0; }
.escalafon-cifra span { display: block; font-size: 0.8rem; font-weight: 700; color: var(--tinta-suave); }
.escalafon-cifra strong { display: block; font-size: clamp(0.95rem, 9.5cqi, 1.65rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--rojo-800); overflow-wrap: anywhere; }
.escalafon-cifra small { display: block; font-size: 0.84rem; color: var(--tinta-suave); margin-top: 2px; }
.escalafon-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.92rem; min-width: 0; }
.escalafon-datos li { margin: 0; line-height: 1.4; }
.escalafon-datos b { font-weight: 700; }
.escalafon-hacer { display: grid; gap: 8px; justify-items: stretch; align-content: center; text-align: center; min-width: 0; }
.escalafon-hacer .boton-ir { min-height: 46px; padding: 0 18px; }
.escalafon-hacer > a:not(.boton-ir) { font-size: 0.9rem; font-weight: 700; }
.puntos-tema { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; font-weight: 700; font-size: 0.84rem; color: var(--tinta-suave); }
.puntos-tema b { font-size: 1.35rem; letter-spacing: -0.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* pututu: la ventana que abre el boton de la portada */
.pututu { width: min(700px, calc(100% - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0; border-radius: 14px; color: var(--tinta); background: var(--papel); box-shadow: 0 24px 60px rgba(28, 21, 23, 0.35); }
.pututu::backdrop { background: rgba(28, 21, 23, 0.62); }
.pututu-cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--tinta); color: var(--papel); }
.pututu-cabeza h2 { margin: 0; font-size: 1.08rem; color: var(--papel); }
.pututu-cerrar { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--raya-clara); background: transparent; display: grid; place-items: center; cursor: pointer; }
.pututu-cerrar img { filter: brightness(0) invert(1); }
.pututu-lista { list-style: none; margin: 0; padding: 4px 18px; }
.pututu-fila { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pututu-fila:last-child { border-bottom: 0; }
.pututu-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pututu-quien .insignia-casino { padding: 4px 8px; }
.pututu-quien .insignia-casino img { width: 96px; height: 36px; }
.pututu-datos { margin: 0; font-size: 0.9rem; line-height: 1.45; min-width: 0; }
.pututu-datos strong { display: block; font-size: 1.02rem; color: var(--rojo-800); }
.pututu-hacer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pututu-hacer .boton-ir { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }
.pututu-hacer > a:not(.boton-ir) { font-size: 0.88rem; font-weight: 700; }
.pututu-pie { padding: 12px 18px 16px; background: var(--hueso); border-top: 1px solid var(--linea); font-size: 0.82rem; color: var(--tinta-suave); }
.pututu-pie p { margin: 0 0 4px; }

/* vara: con que medimos esta lista */
.vara { margin: 18px 0 24px; padding: 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hueso); max-width: 860px; }
.vara h3 { margin-bottom: 8px; }
.vara ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vara li { margin: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.vara li b { font-size: 1.15rem; color: var(--rojo-800); font-variant-numeric: tabular-nums; }

/* cumbre: el escalafon de POZOS (una familia de jackpot por fila), no de casinos */
.cumbre { padding: 30px 0 8px; }
.cumbre > .lienzo > p { max-width: 78ch; }
.cumbre-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cumbre-fila { min-width: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra); }
.cumbre-fila:first-child { border-color: var(--rojo-100); background: var(--rojo-50); }
.cumbre-quien { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cumbre-quien .escalafon-puesto { margin-top: 2px; }
.cumbre-quien h3 { margin: 0 0 2px; font-size: 1.12rem; line-height: 1.25; }
.cumbre-quien p { margin: 0; font-size: 0.88rem; color: var(--tinta-suave); }
.cumbre-cifra { container-type: inline-size; min-width: 0; }
.cumbre-cifra b { display: block; font-size: clamp(1rem, 10cqi, 1.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--rojo-800); }
.cumbre-cifra span { display: block; font-size: 0.82rem; font-weight: 700; color: var(--tinta-suave); margin-top: 2px; }
.cumbre-donde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cumbre-donde > b { flex: none; font-size: 0.82rem; font-weight: 700; color: var(--tinta-suave); }
.donde-ficha { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--hueso); color: var(--tinta); font-size: 0.86rem; font-weight: 700; text-decoration: none; }
.donde-ficha:hover { border-color: var(--rojo-700); color: var(--rojo-800); background: var(--papel); }

/* tesoro: la lista de juegos reales de una familia, con su codigo del registro */
.tesoro { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.tesoro li { margin: 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 8px; background: var(--hueso); font-size: 0.92rem; line-height: 1.4; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; }
.tesoro b { font-weight: 700; min-width: 0; }
.tesoro code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.84rem; color: var(--tinta-suave); white-space: nowrap; }

/* sin-pozo: los jackpots famosos que aqui no existen */
.sin-pozo { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.sin-pozo li { margin: 0; padding: 12px 14px; border: 1px solid var(--linea); border-left: 4px solid var(--rojo-600); border-radius: 8px; background: var(--papel); font-size: 0.94rem; line-height: 1.45; }
.sin-pozo b { display: block; }

/* expediente: el bloque de cada casino */
.expediente { margin: 26px 0 30px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra); overflow: hidden; }
.expediente-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 16px 18px; background: var(--hueso); border-bottom: 1px solid var(--linea); }
.expediente-cabeza .escalafon-puesto { width: 38px; height: 38px; }
.expediente-cabeza h3 { margin: 0; font-size: 1.22rem; }
.expediente-cabeza .puntos-tema { grid-column: 1 / -1; justify-content: flex-start; }
.expediente-cuerpo { padding: 18px; min-width: 0; }
.expediente-cuerpo > p, .expediente-cuerpo > ul { max-width: 78ch; }
.expediente .evidencia { margin: 4px 0 18px; }
.expediente .pozos { margin: 0 0 18px; }
.expediente .balanza { margin: 14px 0 18px; }
.fallo { margin: 0 0 16px; padding: 14px 16px; border-radius: 8px; background: var(--rojo-50); border: 1px solid var(--rojo-100); font-weight: 600; max-width: 78ch; }
.fallo p { margin: 0; }
.expediente-hacer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.expediente-hacer > a:not(.boton-ir) { font-weight: 700; }

.acompanante-tres { list-style: none; margin: 0; padding: 0; width: 100%; text-align: left; counter-reset: tres; }
.acompanante-tres li { counter-increment: tres; }
.acompanante-tres li::before { content: counter(tres) ". "; color: var(--rojo-700); }

@media (min-width: 600px) {
  .pututu-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pututu-quien, .pututu-datos { grid-column: 1; }
  .pututu-hacer { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; text-align: center; }
  .expediente-cabeza { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .expediente-cabeza .puntos-tema { grid-column: auto; }
}

@media (min-width: 900px) {
  .menu-sitio { display: flex; }
  .buscador { display: flex; }
  .buscador--movil { display: none; }
  .abre-menu, .menu-movil { display: none; }
  .balcon { padding: 30px 0 34px; }
  .escalafon-fila { grid-template-columns: 210px minmax(0, 1.05fr) minmax(0, 1.5fr) 184px; align-items: center; gap: 20px; padding: 18px 20px; }
  .cumbre-fila { grid-template-columns: minmax(0, 1.5fr) 190px minmax(0, 1.35fr); align-items: center; gap: 22px; padding: 18px 20px; }
  .escalafon-marca { flex-direction: row; }
}

/* la cifra se mide contra su propia ficha (cqi), asi nunca se parte en dos lineas */
@media (max-width: 399px) {
  .padron { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1280px) {
  .padron { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
  .pozos { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) {
  .pozos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 899px) {
  .cuerpo-texto .pozos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* cabecera de expediente SIN logo (paginas de pozos): la cifra manda su propia columna */
.expediente-cabeza--pozo .puntos-tema { grid-column: 1 / -1; white-space: nowrap; }
@media (min-width: 700px) {
  .expediente-cabeza--pozo { grid-template-columns: auto minmax(0, 1fr) auto; }
  .expediente-cabeza--pozo .puntos-tema { grid-column: auto; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton-ir { transition: none; }
}

/* cedazo: filtro de texto sobre una tabla larga */
.cedazo { margin: 16px 0 14px; }
.cedazo label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.cedazo input { width: 100%; max-width: 420px; padding: 11px 14px; font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.cedazo input:focus-visible { outline: 2px solid var(--rojo-600); outline-offset: 1px; border-color: var(--rojo-600); }
.cedazo-cuenta { margin: 8px 0 0; font-size: 0.88rem; font-weight: 700; color: var(--tinta-suave); }
.cuadro tbody tr[hidden] { display: none; }

/* cuadro alto: tabla larga con su propio desplazamiento y cabecera fija */
.cuadro--alto { max-height: 68vh; overflow-y: auto; }
.cuadro--alto thead th { position: sticky; top: 0; z-index: 2; }

/* cita: bloque de texto legal citado literalmente */
.cita { margin: 20px 0 22px; padding: 16px 20px; max-width: 78ch; background: var(--hueso); border-left: 4px solid var(--oro-300); border-radius: 0 var(--radio) var(--radio) 0; }
.cita p { margin: 0; font-size: 1.02rem; line-height: 1.6; }

/* crestas: estante compacto de casinos, sin captura ni boton al operador */
.crestas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 20px 0 8px; }
.crestas li { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); display: grid; gap: 8px; justify-items: start; align-content: start; }
.cresta-marca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cresta-marca img { width: 112px; height: 42px; border: 1px solid var(--linea); border-radius: 6px; background: var(--papel); }
.cresta-nota { display: inline-flex; align-items: baseline; gap: 2px; padding: 3px 9px; border-radius: 999px; background: var(--rojo-50); color: var(--rojo-800); font-weight: 800; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.cresta-nota span { font-size: 0.74rem; font-weight: 700; }
.cresta-nombre { font-weight: 700; font-size: 1rem; }
.cresta-linea { margin: 0; font-size: 0.9rem; color: var(--tinta-suave); line-height: 1.5; }
.cresta-codigo { font-size: 0.82rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.crestas a.cresta-ir { font-size: 0.88rem; font-weight: 700; }
@media (min-width: 700px) {
  .crestas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .crestas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 399px) {
  .crestas { grid-template-columns: minmax(0, 1fr); }
}

/* barra de notas: el reparto de las diez notas en una sola linea */
.reparto { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 8px; max-width: 78ch; }
.reparto li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; font-size: 0.92rem; }
.reparto b { font-variant-numeric: tabular-nums; }
.reparto-barra { height: 12px; border-radius: 999px; background: var(--rojo-600); min-width: 4px; }
.reparto-cuantos { color: var(--tinta-suave); font-size: 0.86rem; white-space: nowrap; }
.reparto-barra--una { width: 25%; }
.reparto-barra--dos { width: 50%; }
.reparto-barra--cuatro { width: 100%; }
/* retrato de la editora: cabecera a dos columnas, el retrato manda su propia columna */
.retrato-cabecera { background: var(--hueso); border-bottom: 1px solid var(--linea); padding: 26px 0 30px; }
.retrato-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.retrato-marco { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); box-shadow: var(--sombra); }
.retrato-marco img { display: block; width: 100%; height: auto; border-radius: 4px; }
.retrato-marco figcaption { margin-top: 8px; font-size: 0.82rem; color: var(--tinta-suave); }
.retrato-texto { min-width: 0; }
.retrato-texto h1 { margin: 0 0 6px; }
.retrato-oficio { margin: 0 0 12px; font-weight: 700; color: var(--rojo-700); }
.retrato-texto > p { max-width: 62ch; }
@media (min-width: 700px) {
  .retrato-rejilla { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 28px; }
}

/* firma con cara: el chip de 26px que va en la linea de credito */
.firma-cara { display: inline-block; width: 26px; height: 26px; border-radius: 4px; vertical-align: -8px; margin-right: 6px; }

/* credito: la tarjeta de autoria al pie del cuerpo del articulo */
.credito { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; margin: 26px 0 8px; padding: 16px 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.credito-cara { width: 72px; height: 72px; border-radius: 6px; border: 1px solid var(--linea); }
.credito-texto { min-width: 0; }
.credito-texto h2 { font-size: 1.02rem; margin: 0 0 4px; }
.credito-texto p { margin: 0 0 6px; font-size: 0.94rem; color: var(--tinta-suave); line-height: 1.55; }
.credito-texto p:last-child { margin-bottom: 0; }

/* grados de gravedad del anexo de infracciones */
.grado { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.grado--muy-grave { background: var(--rojo-700); color: #fff; }
.grado--grave { background: var(--rojo-100); color: var(--rojo-800); }
.grado--leve { background: #fdf0cf; color: #6b5310; }
.grado--sin-rango { background: var(--tinta); color: #fff; }

/* ===== PORTADA: vocabulario propio, bandas a todo lo ancho, sin columna de articulo ===== */

/* plaza: la banda de entrada */
.plaza { background: var(--hueso); border-bottom: 1px solid var(--linea); padding: 30px 0 34px; }
.plaza h1 { margin: 0 auto 12px; max-width: 20ch; text-align: center; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.08; }
.plaza-lema { max-width: 60ch; margin: 0 auto 6px; text-align: center; color: var(--tinta-suave); font-size: 1.04rem; }
.plaza-firma { text-align: center; }

/* cordelada: el quipu de entrada, un cordel por seccion del sitio */
.cordelada { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; list-style: none; padding: 0; margin: 26px 0 10px; }
.cordel { min-width: 0; margin: 0; padding: 0 14px 22px; border-top: 3px solid var(--rojo-600); display: grid; justify-items: start; gap: 4px; }
.cordel-hilo { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; width: 22px; min-height: 132px; padding: 8px 0 10px; position: relative; }
.cordel-hilo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--tinta); opacity: 0.45; }
.cordel-grupo { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.cordel-grupo + .cordel-grupo { margin-top: 9px; }
.cordel-nudo { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--oro-300); border: 1px solid var(--tinta); }
.cordel-nudo--diez { background: var(--rojo-600); border-color: var(--rojo-800); }
.cordel-cifra { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--rojo-700); font-variant-numeric: tabular-nums; }
.cordel-rotulo { font-size: 1.02rem; font-weight: 700; }
.cordel-rotulo a { text-decoration: none; }
.cordel-rotulo a:hover { text-decoration: underline; }
.cordel-linea { margin: 0; font-size: 0.92rem; color: var(--tinta-suave); line-height: 1.5; }
.cordelada-pie { max-width: 64ch; margin: 4px auto 0; text-align: center; font-size: 0.88rem; color: var(--tinta-suave); }

/* hitos: la tira oscura de cifras comprobables */
.hitos { background: var(--tinta); color: var(--gris-zocalo); }
.hitos .lienzo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.hito { min-width: 0; }
.hito b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--oro-300); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hito span { display: block; font-size: 0.86rem; margin-top: 2px; }
.hito a { color: var(--papel); }

/* dupla: tarjeta de relato junto a tarjeta de datos */

/* escribano: quien firma el sitio, con su retrato como columna */
.escribano { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.escribano-marco { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.escribano-marco img { display: block; width: 100%; height: auto; border-radius: 4px; }
.escribano-texto { min-width: 0; }
.escribano-texto h2 { margin: 0 0 4px; }
.escribano-oficio { margin: 0 0 12px; font-weight: 700; color: var(--rojo-700); }
.escribano-credos { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; max-width: 70ch; }
.escribano-credos li { margin: 0; padding-left: 16px; border-left: 3px solid var(--oro-300); font-size: 0.96rem; }

/* muestrario: lo ultimo publicado, en tarjetas con imagen */

/* amparo: la banda de juego responsable de la portada */
.amparo { background: var(--rojo-50); border-bottom: 1px solid var(--rojo-100); padding: 26px 0 28px; }
.amparo .lienzo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
.amparo h2 { margin: 0 0 6px; }
.amparo h2::before { content: ""; display: block; width: 46px; height: 3px; margin-bottom: 13px; border-radius: 2px; background: var(--rojo-600); }
.amparo p { margin: 0 0 8px; max-width: 70ch; }
.amparo-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.amparo-fono { font-size: 1.5rem; font-weight: 800; color: var(--rojo-700); font-variant-numeric: tabular-nums; }

@media (min-width: 640px) {
  .zocalo-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cordelada { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hitos .lienzo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .zocalo-rejilla { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; }
  .zocalo-amparo { grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; }
  .escribano { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: 26px; }
  .amparo .lienzo { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
}
@media (min-width: 1100px) {
  .cordelada { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* en celular el cordel se tumba: los nudos en fila, para no gastar media pantalla en cuerda */
@media (max-width: 639px) {
  .cordelada { grid-template-columns: minmax(0, 1fr); }
  .cordel { padding: 0 0 18px; }
  .cordel-hilo { flex-direction: row; align-items: center; width: auto; min-height: 0; padding: 12px 0 8px; gap: 6px; }
  .cordel-hilo::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
  .cordel-grupo { flex-direction: row; gap: 3px; }
  .cordel-grupo + .cordel-grupo { margin-top: 0; margin-left: 10px; }
}
@media (max-width: 399px) {
  .hitos .lienzo { grid-template-columns: minmax(0, 1fr); }
}

/* ===== RESENA: chapa de identidad + taquillas de respuesta rapida ===== */

/* chapa: la barra de identidad, compacta. Sustituye al heroe de bandera */
.chapa { background: var(--hueso); border-bottom: 1px solid var(--linea); padding: 18px 0 20px; }
.chapa-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
.chapa-marca { display: inline-flex; align-items: center; justify-content: flex-start; width: 132px; height: 50px; line-height: 0; }
.chapa-marca img { width: 132px; height: 50px; display: block; border-radius: 6px; }
.chapa-texto { min-width: 0; }
.chapa-texto h1 { margin: 0 0 4px; font-size: clamp(1.45rem, 3.6vw, 2.05rem); line-height: 1.15; }
.chapa-entrada { margin: 0; color: var(--tinta-suave); font-size: 0.98rem; max-width: 70ch; }
.chapa-nota { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chapa-cifra { display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 12px; border-radius: 999px; background: var(--rojo-700); color: var(--papel); font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.chapa-cifra span { font-size: 0.78rem; font-weight: 700; }
.chapa-sello { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rojo-100); background: var(--rojo-50); color: var(--rojo-800); font-size: 0.84rem; font-weight: 700; }
.chapa-sello img { width: 15px; height: 15px; }
.chapa-fino { margin: 0; font-size: 0.8rem; color: var(--tinta-suave); }

/* taquillas: la fila de ventanillas numeradas que abre cada respuesta */
.zona-taquillas { background: var(--papel); border-bottom: 1px solid var(--linea); padding: 0 0 26px; }
.taquillas { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin: 0 0 -1px; padding: 0; list-style: none; border-bottom: 1px solid var(--linea); }
.taquillas::-webkit-scrollbar { display: none; }
.taquilla { flex: none; display: grid; gap: 7px; justify-items: center; align-content: center; min-height: 82px; min-width: 124px; max-width: 176px; padding: 13px 16px 14px; border: 0; border-top: 3px solid transparent; border-right: 1px solid var(--linea); background: var(--hueso); color: var(--tinta-suave); font: inherit; text-align: center; cursor: pointer; }
.taquilla:first-child { border-left: 1px solid var(--linea); }
.taquilla-rotulo { font-size: 1rem; font-weight: 800; line-height: 1.2; color: var(--tinta); }
.taquilla:hover { background: var(--rojo-50); color: var(--tinta); }
.taquilla[aria-selected="true"] { background: var(--papel); color: var(--tinta); border-top-color: var(--rojo-600); border-bottom: 1px solid var(--papel); }
.taquilla:focus-visible { outline: 2px solid var(--rojo-600); outline-offset: -3px; }

/* boleto: la hoja que entrega la ventanilla */
.boleto { border: 1px solid var(--linea); border-top: 0; border-radius: 0 0 var(--radio) var(--radio); background: var(--papel); padding: 20px; }
.boleto[hidden] { display: none; }

.boleto-rotulo { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tinta-suave); }

/* vitral: las cifras de la hoja, en celdas grandes y legibles de un vistazo */
.vitral { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.vitral li { container-type: inline-size; margin: 0 -1px -1px 0; padding: 12px 14px 13px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: grid; gap: 2px; align-content: start; }
.vitral-cifra { font-size: clamp(1.2rem, 3.4vw, 1.55rem); font-weight: 800; line-height: 1.12; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.vitral .vitral-cifra--larga { font-size: clamp(0.95rem, 9cqi, 1.3rem); }
.vitral-cifra small { font-size: 0.62em; font-weight: 700; color: var(--tinta-suave); }
.vitral-rotulo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); line-height: 1.3; }
.vitral-cola { font-size: 0.83rem; color: var(--tinta-suave); line-height: 1.4; }
.vitral li.vitral--alto { background: var(--rojo-50); }
.vitral li.vitral--alto .vitral-cifra { color: var(--rojo-800); }

/* pastillas: los si/no y los tipos de juego, sin una sola frase de por medio */
.pastillas { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.pastillas li { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linea); background: var(--hueso); font-size: 0.89rem; font-weight: 700; line-height: 1.2; }
.pastillas img { width: 15px; height: 15px; flex: none; }
.pastillas li.pastilla--si { border-color: var(--rojo-100); background: var(--rojo-50); color: var(--rojo-800); }
.pastillas li.pastilla--no { color: var(--tinta-suave); }
.pastillas li b { font-weight: 800; }

/* mosaico de logos dentro de la hoja: medios de pago y talleres de juego */
.boleto .medios { margin: 0 0 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.boleto-pie { margin: 0; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 0.86rem; color: var(--tinta-suave); }
.boleto-pie b { color: var(--tinta); }
.boleto-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: 0.92rem; }

/* iconos de ventanilla: mascara para que tomen el rojo de la marca */
.taquilla-icono { width: 24px; height: 24px; background-color: var(--rojo-600); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.taquilla-icono--pagos { -webkit-mask-image: url('/iconos/wallet-regular.svg'); mask-image: url('/iconos/wallet-regular.svg'); }
.taquilla-icono--limites { -webkit-mask-image: url('/iconos/gauge-regular.svg'); mask-image: url('/iconos/gauge-regular.svg'); }
.taquilla-icono--juegos { -webkit-mask-image: url('/iconos/game-controller-regular.svg'); mask-image: url('/iconos/game-controller-regular.svg'); }
.taquilla-icono--capturas { -webkit-mask-image: url('/iconos/monitor-regular.svg'); mask-image: url('/iconos/monitor-regular.svg'); }
.taquilla-icono--pozos { -webkit-mask-image: url('/iconos/trophy-regular.svg'); mask-image: url('/iconos/trophy-regular.svg'); }
.taquilla-icono--bono { -webkit-mask-image: url('/iconos/gift-regular.svg'); mask-image: url('/iconos/gift-regular.svg'); }
.taquilla-icono--licencia { -webkit-mask-image: url('/iconos/shield-check-regular.svg'); mask-image: url('/iconos/shield-check-regular.svg'); }
.taquilla-icono--soporte { -webkit-mask-image: url('/iconos/chat-circle-dots-regular.svg'); mask-image: url('/iconos/chat-circle-dots-regular.svg'); }

/* galeria: los pantallazos del casino, dos por fila */
.galeria { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.galeria li { margin: 0; }
.galeria figure { margin: 0; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: var(--papel); }
.galeria img { width: 100%; height: auto; display: block; }
.galeria figcaption { padding: 10px 13px 12px; border-top: 1px solid var(--linea); font-size: 0.86rem; line-height: 1.45; color: var(--tinta-suave); }

/* la llamada a la accion, una sola vez, debajo de las taquillas */
.tranca { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.tranca .letra-chica { margin: 0; }

@media (min-width: 760px) {
  .vitral .vitral-cifra--larga { font-size: clamp(0.9rem, 7cqi, 1.3rem); }
  .chapa-fila { grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; }
  .chapa-nota { flex-direction: column; align-items: flex-end; gap: 7px; }
  .boleto { padding: 24px 26px; }
  .vitral { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vitral--fotos li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 15px 15px; }
  .vitral--fotos .vitral-foto, .vitral--fotos .vitral-icono { grid-row: 1 / span 3; margin-bottom: 0; }
  .boleto .medios { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* en pantalla ancha las ventanillas reparten el ancho del lienzo */
  .taquilla { flex: 1 1 0; max-width: none; }
}
@media (min-width: 1060px) {
  .panel-lista--sinnota.panel-lista--dos { grid-template-columns: repeat(2, minmax(222px, 1fr)); }
  .vitral { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* seis celdas caen en dos filas enteras, sin huecos al final */
  .vitral--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .boleto .medios { grid-template-columns: repeat(11, minmax(0, 1fr)); }
}