/* Fichas del Puerto — hoja de /juego-responsable/ */

.portada-pag, .alerta__nota { --fuerte: #ffffff; }

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

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

/* control: qué significa mantener el control */
.control__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e8); }
.control__txt > * + * { margin-top: var(--e4); }
.control__txt p { color: var(--tinta); }
.pauta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.pauta li { margin-top: 0; display: grid; grid-template-columns: 12px 1fr; gap: var(--e4); font-size: .96rem; }
.pauta li::before {
  content: "";
  margin-top: .55em;
  width: 12px; height: 12px;
  background: var(--acento);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

/* herramientas del operador */
.herr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
.herr__it .marco__in { padding: var(--e5); height: 100%; display: grid; gap: var(--e3); align-content: start; }
.herr__it h3 { font-size: 1.05rem; }
.herr__it p { font-size: .93rem; color: var(--apagado); }
.herr__it dl { margin: var(--e2) 0 0; display: grid; gap: var(--e2); }
.herr__it dt {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marino-700);
}
.herr__it dd { margin: 0; font-size: .9rem; color: var(--tinta); }

/* señales de alerta */
.alerta__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e5); }
.alerta__in { padding: var(--e5); display: grid; gap: var(--e3); }
.alerta__in h3 { font-size: 1.05rem; }
.alerta__in ul { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.alerta__nota {
  margin-top: var(--e6);
  padding: var(--e5);
  background: var(--marino-900);
  color: #d3dae6;
  font-size: .95rem;
  max-width: 80ch;
}
.alerta__nota strong { color: #fff; }

/* banda de apoyo con fondo generado */
.apoyo {
  position: relative;
  padding: var(--e9) 0;
  background: var(--porcelana) url("/assets/img/banda-apoyo.webp") center / cover no-repeat;
  isolation: isolate;
}
.apoyo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(246, 243, 237, .7);
  z-index: -1;
}
.apoyo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--e8);
  align-items: start;
}
.apoyo__txt > * + * { margin-top: var(--e4); }
.apoyo__txt p { color: var(--tinta); }
.apoyo__tel .marco__in { padding: var(--e5); display: grid; gap: var(--e3); }
.apoyo__tel .num {
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.apoyo__tel p { font-size: .88rem; color: #d3dae6; }
.apoyo__tel strong { color: #fff; }

/* pasos para verificar y jugar seguro */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); counter-reset: p; }
.paso .marco__in { padding: var(--e5); height: 100%; display: grid; gap: var(--e2); align-content: start; }
.paso__n {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--acento);
}
.paso h3 { font-size: 1rem; }
.paso p { font-size: .92rem; color: var(--apagado); }

/* preguntas */
.qa { display: grid; gap: var(--e6); max-width: 84ch; }
.qa h3 { font-size: 1.1rem; }
.qa p { margin-top: var(--e3); color: var(--tinta); }
.qa__marca { width: 40px; height: 3px; background: var(--acento); margin-bottom: var(--e4); }

@media (max-width: 1080px) {
  .pasos { grid-template-columns: 1fr 1fr; }
  .herr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .portada-pag { background-image: none; padding: var(--e7) 0; }
  .portada-pag__grid, .control__grid, .apoyo__grid { grid-template-columns: 1fr; gap: var(--e6); }
  .seccion, .apoyo { padding: var(--e8) 0; }
}
@media (max-width: 620px) {
  .pasos, .herr__grid, .alerta__grid { grid-template-columns: 1fr; }
}