/* Descargar el juego (/ui/descargar), 19-oct-2026. Sin maqueta propia: sigue el sistema de la propuesta
   (Documentacion_Mejoras/Portal_web/propuesta/sistema.css) como Términos y Privacidad: cabecera de tela,
   una ficha de papel con la descarga y, debajo, lo que hace falta y cómo empezar. */

/* Un marco más estrecho que el común, centrado: es una página de una sola decisión */
.cab-descarga .marco, .descarga > .marco { max-width: 948px; }

/* ---------- Cabecera ---------- */
.cab-descarga .marco { padding-block: var(--e-xxl) var(--e-xl); display: grid; gap: var(--e-xs); }
.cab-descarga h1 { font-size: var(--t-titulo); color: var(--marfil); }
.cab-descarga .entradilla { max-width: 36em; }

/* ---------- La ficha de la descarga ---------- */
.descarga { padding-block: var(--e-xl) var(--e-3xl); }
.descarga > .marco { display: grid; gap: var(--e-xxl); }
.entrega { padding: var(--e-xl) var(--e-xxl); display: grid; gap: var(--e-m); justify-items: start; }
.entrega h2 { font-size: var(--t-seccion); }
.entrega p { color: var(--tinta-suave); max-width: 34em; }
.datos-build { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-xs) var(--e-xxl); border-top: 2px solid var(--tinta); padding-top: var(--e-s); width: 100%; }
.datos-build > div { display: grid; gap: 2px; }
.datos-build dt { font-size: var(--t-secundario); color: var(--tinta-suave); }
.datos-build dd { margin: 0; font-family: var(--f-titulo); font-weight: 800; font-size: 1.625rem; font-variant-numeric: lining-nums tabular-nums; }
/* El lacre asoma 16 px por la izquierda: la columna de la acción se sangra para que no se salga de la ficha */
.entrega .accion { display: grid; gap: var(--e-xs); justify-items: start; padding-left: 16px; padding-top: var(--e-xs); }
.entrega .accion .nota { font-size: .9375rem; margin-left: -16px; }
.entrega .lacre[aria-disabled="true"] { min-height: 56px; }
.entrega .lacre[aria-disabled="true"]:hover, .entrega .lacre[aria-disabled="true"]:active { transform: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marfil-suave) 35%, transparent); }
.entrega .lacre[aria-disabled="true"]:hover::before { transform: translateY(-50%) rotate(-7deg); }

/* ---------- Requisitos y primeros pasos ---------- */
.detalle-descarga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--e-xxl); align-items: start; }
.detalle-descarga h2 { font-size: var(--t-sub); color: var(--marfil); margin-bottom: var(--e-s); }
.detalle-descarga h3 { font-size: 1.25rem; color: var(--marfil); }
.lista-requisitos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-xs); }
.lista-requisitos li { position: relative; padding-left: 22px; color: var(--marfil); }
.lista-requisitos li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; background: var(--oro); transform: rotate(45deg); }
.pasos-descarga { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-m); }
.pasos-descarga li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--e-m); align-items: start; }
.pasos-descarga .num { grid-row: 1 / span 2; font-family: var(--f-titulo); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--oro); text-align: center; padding-bottom: 6px; border-bottom: 2px solid var(--oro); font-variant-numeric: lining-nums; }
.pasos-descarga p { grid-column: 2; color: var(--marfil-suave); font-size: var(--t-secundario); }

/* ---------- Cierre ---------- */
.cierre-descarga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-m) var(--e-xl); padding-left: 16px; border-top: 1px solid var(--filete); padding-top: var(--e-l); }

/* ---------- Tableta y móvil ---------- */
@media (max-width: 900px) {
  .detalle-descarga { grid-template-columns: minmax(0, 1fr); gap: var(--e-xl); }
}
@media (max-width: 720px) {
  .cab-descarga .marco { padding-block: var(--e-l); }
  .cab-descarga .entradilla { font-size: var(--t-cuerpo); }
  .descarga { padding-block: var(--e-l) var(--e-xxl); }
  .descarga > .marco { gap: var(--e-xl); }
  .entrega { padding: var(--e-l) var(--e-m); }
  .datos-build { gap: var(--e-xs) var(--e-xl); }
}