/* Fichas del Puerto — hoja de /tragamonedas-y-juegos/ */

.cab-pag, .prov, .aviso { --fuerte: #ffffff; }

.cab-pag {
  background: var(--marino-900);
  background-image: linear-gradient(90deg, var(--marino-900) 0 48%, var(--marino-800) 48% 100%);
  color: var(--porcelana);
  padding: var(--e8) 0;
}
.cab-pag__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--e8);
  align-items: center;
}
.cab-pag h1 { color: #fff; }
.cab-pag__intro { margin-top: var(--e5); max-width: 56ch; font-size: 1.06rem; color: #d9dfe9; }
.cab-pag__meta { margin-top: var(--e5); font-size: .8rem; color: var(--apagado-claro); }
.cab-pag__meta strong { color: #fff; }
.cab-pag__fig .marco__in { padding: var(--e4); }

.bloque { padding: var(--e9) 0; }
.bloque--tinte { background: var(--porcelana-tinte); }
.bloque__cab { max-width: 66ch; margin-bottom: var(--e7); }
.bloque__cab h2 + p { margin-top: var(--e4); color: var(--apagado); font-size: 1.02rem; }

/* categorías de juego */
.cat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
.cat__in { padding: var(--e5); height: 100%; display: grid; gap: var(--e3); align-content: start; }
.cat__in h3 { font-size: 1.08rem; }
.cat__in p { font-size: .93rem; color: var(--apagado); }
.cat__dato {
  margin-top: var(--e2);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
  font-size: .86rem;
  color: var(--tinta);
}
.cat__dato b { color: var(--marino-900); }

/* mecánica de las tragamonedas */
.mec__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--e8);
  align-items: start;
}
.mec__txt > * + * { margin-top: var(--e4); }
.mec__txt p { color: var(--tinta); }
.mec__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); }
.mec__lista li {
  margin-top: 0;
  position: relative;
  padding-left: var(--e5);
  font-size: .96rem;
}
.mec__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 10px; height: 10px;
  background: var(--acento);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.mec__lista b { display: block; margin-bottom: var(--e2); color: var(--marino-900); }
.mec__fig .marco__in { padding: var(--e5); }
.mec__fig figcaption { margin-top: var(--e4); font-size: .82rem; color: var(--apagado); }
.ficha { margin: var(--e5) 0 0; display: grid; gap: var(--e3); }
.ficha > div { padding-top: var(--e3); border-top: 1px solid var(--linea); }
.ficha dt {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
}
.ficha dd { margin: var(--e1) 0 0; font-size: .9rem; color: var(--tinta); }

/* banda oscura: proveedores */
.prov {
  position: relative;
  padding: var(--e9) 0;
  background: var(--marino-900) url("/assets/img/banda-catalogo.webp") center / cover no-repeat;
  color: var(--porcelana);
  isolation: isolate;
}
.prov::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 45, .84);
  z-index: -1;
}
.prov h2 { color: #fff; }
.prov__cab { max-width: 68ch; margin-bottom: var(--e7); }
.prov__cab p { margin-top: var(--e4); color: #d3dae6; }
.prov__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5); }
.prov__it .marco__in { padding: var(--e5); height: 100%; }
.prov__it h3 { color: #fff; font-size: 1.05rem; margin-bottom: var(--e2); }
.prov__it p { font-size: .93rem; color: #d3dae6; }
.prov__nota { margin-top: var(--e6); font-size: .86rem; color: var(--apagado-claro); max-width: 78ch; }
.nota-pie { margin-top: var(--e5); font-size: .86rem; color: var(--apagado); max-width: 80ch; }

/* catálogos por operador */
.cat-op { display: grid; gap: var(--e5); }
.cat-op__in {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 150px;
  gap: var(--e6);
  padding: var(--e5);
  align-items: start;
}
.cat-op__marca { display: flex; align-items: center; gap: var(--e3); }
.cat-op__marca img {
  width: 52px; height: 52px;
  object-fit: cover;
  flex: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cat-op__marca h3 { font-size: 1.08rem; }
.cat-op__marca p { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.cat-op__cuerpo p { font-size: .95rem; color: var(--tinta); max-width: 66ch; }
.cat-op__cuerpo .etq-fila { margin-top: var(--e4); }
.cat-op__lado { display: grid; gap: var(--e3); justify-items: start; }
.cat-op__lado .etq--jurisdiccion { white-space: normal; }
.cat-op__lado .lnk { font-size: .9rem; }

/* qué mirar */
.mirar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); }
.mirar__in { padding: var(--e5); height: 100%; display: grid; gap: var(--e2); align-content: start; }
.mirar__n { font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--acento); }
.mirar__in h3 { font-size: 1rem; }
.mirar__in p { font-size: .92rem; color: var(--apagado); }

/* datos y advertencia */
.aviso {
  margin-top: var(--e6);
  padding: var(--e5);
  background: var(--marino-900);
  color: #d3dae6;
  font-size: .95rem;
  max-width: 82ch;
}
.aviso strong { color: #fff; }

/* glosario breve */
.glos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linea); }
.glos > div { background: var(--superficie); padding: var(--e4) var(--e5); }
.glos dt { font-weight: 800; color: var(--marino-900); font-size: .95rem; }
.glos dd { margin: var(--e1) 0 0; font-size: .93rem; color: var(--apagado); }

@media (max-width: 1080px) {
  .cat__grid { grid-template-columns: 1fr 1fr; }
  .mirar__grid { grid-template-columns: 1fr 1fr; }
  .cat-op__in { grid-template-columns: 180px minmax(0, 1fr); }
  .cat-op__lado { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--e5); }
}
@media (max-width: 900px) {
  .cab-pag { background-image: none; padding: var(--e7) 0; }
  .cab-pag__grid, .mec__grid { grid-template-columns: 1fr; gap: var(--e6); }
  .prov__grid { grid-template-columns: 1fr; }
  .bloque, .prov { padding: var(--e8) 0; }
}
@media (max-width: 620px) {
  .cat__grid, .mirar__grid, .glos { grid-template-columns: 1fr; }
  .cat-op__in { grid-template-columns: 1fr; gap: var(--e4); }
  .cat-op__lado { grid-auto-flow: row; align-items: start; gap: var(--e3); }
}