/* Estilos de BugZoneGames. Solo tokens: los colores viven en tokens.css. */

/* ---------- Generales ---------- */
h2 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.01em; }
h3 { font-family: var(--fuente-texto); font-size: var(--t-lg); line-height: 1.25; }
a { text-decoration-thickness: 2px; }

main > section { padding-block: var(--e-16); }
.seccion--superficie { background: var(--color-superficie); }
.seccion__intro { margin-top: var(--e-3); color: var(--color-texto-suave); }

.dato {
  background: color-mix(in srgb, var(--color-preventa) 22%, transparent);
  outline: 1px dashed var(--color-preventa);
  padding-inline: 0.2em;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--e-3) var(--e-6);
  border-radius: var(--radio-control);
  font-weight: 700; text-decoration: none; text-align: center;
  transition: background-color var(--duracion);
}
.boton--pedido { background: var(--color-pedido); color: var(--color-sobre-marca); }
.boton--pedido:hover { background: var(--color-pedido-hover); }
.boton--compacto { min-height: 44px; padding-inline: var(--e-4); font-size: var(--t-sm); }
.boton--ancho { width: 100%; }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--color-fondo); border-bottom: 1px solid var(--color-divisor); position: relative; z-index: 10; }
.cabecera__fila { display: flex; align-items: center; gap: var(--e-4); padding-block: var(--e-3); }
.marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.marca img { height: 48px; width: auto; }
.menu ul { list-style: none; padding: 0; display: flex; gap: var(--e-6); }
.menu a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 700; }
.menu a:hover { text-decoration: underline; }
.menu-boton { display: none; min-height: 44px; padding-inline: var(--e-4); background: none; border: 1px solid var(--color-borde); border-radius: var(--radio-control); font-weight: 700; }

@media (max-width: 63.99rem) {
  .menu-boton { display: inline-flex; align-items: center; order: 3; }
  .menu { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--color-fondo); padding: var(--e-4) var(--margen-lateral) var(--e-6); border-bottom: 1px solid var(--color-divisor); }
  .menu[data-abierto="true"] { display: block; }
  .menu ul { flex-direction: column; gap: var(--e-2); }
  .menu a { display: block; padding-block: var(--e-2); }
}
@media (max-width: 29.99rem) {
  .solo-amplio { display: none; }
  .marca img { height: 40px; }
}

/* ---------- Hero: selector de consola ---------- */
main > .hero { padding-block: var(--e-8) var(--e-6); }
@media (min-width: 64rem) { main > .hero { padding-block: var(--e-12) var(--e-8); } }
.hero__rejilla { display: grid; gap: var(--e-8); align-items: end; }
.hero__texto { position: relative; }
.pixeles { position: absolute; top: -0.5rem; right: 0; width: clamp(64px, 14vw, 120px); height: auto; color: var(--color-marca); }
@media (min-width: 64rem) { .pixeles { right: 8%; top: -1.5rem; } }
@media (prefers-reduced-motion: no-preference) {
  .pixeles rect { animation: pixel 900ms ease-out both; animation-delay: calc(var(--i) * 60ms); }
  @keyframes pixel { from { opacity: 0; transform: translateY(8px); } }
}
.hero h1 { font-size: var(--t-3xl); font-weight: 900; letter-spacing: -0.02em; }
.hero__apoyo { margin-top: var(--e-3); font-size: var(--t-lg); line-height: 1.4; max-width: 34ch; }

.selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-2); }
.selector__consola {
  min-height: 64px; padding: var(--e-2) var(--e-4);
  font-family: var(--fuente-titulos); font-size: 2.2rem; font-weight: 800; line-height: 1; text-align: left;
  color: var(--color-texto); background: var(--color-superficie-2);
  border: 2px solid var(--color-borde); border-radius: var(--radio-control); cursor: pointer;
  transition: border-color var(--duracion), background-color var(--duracion);
}
.selector__consola:hover { border-color: var(--color-marca); }
.selector__consola[aria-pressed="true"] { background: var(--color-marca); border-color: var(--color-marca); color: var(--color-sobre-marca); box-shadow: inset 0 -5px 0 var(--color-profundo); }

@media (min-width: 48rem) {
  .selector { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .hero__rejilla { grid-template-columns: 1.1fr 1fr; gap: var(--e-12); }
  .selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selector__consola { min-height: 104px; font-size: clamp(2rem, 2.6vw, 3.2rem); }
}

/* ---------- Catálogo ---------- */
main > .catalogo { padding-top: var(--e-8); }
.catalogo__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-6); }
.catalogo__resumen { color: var(--color-texto-suave); font-weight: 700; }
.rejilla { list-style: none; padding: 0; margin-top: var(--e-6); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
@media (min-width: 48rem) { .rejilla { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); } }
@media (min-width: 80rem) { .rejilla { grid-template-columns: repeat(5, 1fr); } }

.juego {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; aspect-ratio: 3 / 4; padding: var(--e-3);
  border: 0; border-radius: var(--radio-portada); overflow: hidden; cursor: pointer; text-align: left;
  color: var(--color-texto); background: var(--color-superficie-2);
}
.juego--profundo { background: var(--color-profundo); }
.juego--contorno { background: var(--color-fondo); box-shadow: inset 0 0 0 2px var(--color-marca); }
.juego--contorno .juego__portada { color: var(--color-marca); }
.juego img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.juego img ~ .juego__portada { visibility: hidden; }
.juego__portada {
  font-family: var(--fuente-titulos); font-weight: 900; line-height: 0.9;
  font-size: clamp(2rem, 7vw, 3.1rem); letter-spacing: -0.01em; overflow-wrap: anywhere;
}
@media (min-width: 48rem) { .juego__portada { font-size: clamp(1.9rem, 3vw, 3.2rem); } }
.juego__pie { position: relative; display: grid; gap: var(--e-1); padding-top: var(--e-2); border-top: 2px solid currentColor; }
.juego__titulo { font-weight: 700; font-size: var(--t-sm); line-height: 1.3; }
.juego__consolas { font-size: var(--t-sm); line-height: 1.3; }
.juego__precio { font-weight: 700; font-size: var(--t-md); }
.juego__preventa {
  position: absolute; top: var(--e-3); right: var(--e-3);
  background: var(--color-preventa); color: var(--color-sobre-marca); font-weight: 700; font-size: var(--t-sm);
  padding: 0.15em 0.5em; border-radius: var(--radio-control); outline: 2px solid var(--color-fondo);
}
.juego:hover .juego__titulo { text-decoration: underline; }
.juego:focus-visible { outline-offset: 4px; }
.juego:focus-visible { outline: 3px solid var(--color-foco); }

.catalogo__nota { margin-top: var(--e-6); }

/* ---------- Cómo comprar (secuencia real) ---------- */
.pasos { list-style: none; padding: 0; margin-top: var(--e-6); display: grid; gap: var(--e-6); counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: start; column-gap: var(--e-4); row-gap: var(--e-2); }
.pasos p { font-size: var(--t-md); }
.pasos li::before {
  content: counter(paso); grid-row: span 2;
  font-family: var(--fuente-titulos); font-size: 4rem; font-weight: 900; line-height: 0.8;
  color: var(--color-marca); min-width: 1ch;
}
@media (min-width: 64rem) { .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--e-8); } }

/* ---------- Qué recibes ---------- */
.entregas { margin-top: var(--e-8); display: grid; gap: var(--e-6); }
.entregas article { border-top: 1px solid var(--color-borde); padding-top: var(--e-4); }
.entregas p { margin-top: var(--e-2); }
@media (min-width: 48rem) { .entregas { grid-template-columns: repeat(3, 1fr); gap: var(--e-8); } }
.garantia { margin-top: var(--e-8); }

/* ---------- Preguntas ---------- */
.preguntas { margin-top: var(--e-6); max-width: 48rem; border-top: 1px solid var(--color-divisor); }
.preguntas details { border-bottom: 1px solid var(--color-divisor); }
.preguntas summary {
  cursor: pointer; padding-block: var(--e-4); font-weight: 700; font-size: var(--t-lg);
  list-style: none; display: flex; justify-content: space-between; gap: var(--e-4);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; font-family: var(--fuente-titulos); font-size: 1.8rem; line-height: 1; color: var(--color-marca); }
.preguntas details[open] summary::after { content: '–'; }
.preguntas details p { padding-bottom: var(--e-4); }

/* ---------- Cierre ---------- */
main > .cierre { background: var(--color-marca); color: var(--color-sobre-marca); padding-block: var(--e-12); }
.cierre .boton--pedido { background: var(--color-fondo); color: var(--color-marca); }
.cierre .boton--pedido:hover { background: var(--color-profundo); }
.cierre :focus-visible { outline-color: var(--color-fondo); }
.cierre__fila { display: grid; gap: var(--e-6); align-items: center; }
.cierre h2 { max-width: 20ch; }
@media (min-width: 48rem) { .cierre__fila { grid-template-columns: 1fr auto; } }

/* ---------- Pie ---------- */
.pie { background: var(--color-profundo); color: var(--color-texto); padding-block: var(--e-12); font-size: var(--t-sm); }
.pie__rejilla { display: grid; gap: var(--e-6); }
.pie__marca { font-family: var(--fuente-titulos); font-size: 1.8rem; font-weight: 800; }
.pie__enlaces { list-style: none; padding: 0; display: grid; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; }
.pie__aviso { color: var(--color-texto-suave); }
.pie__rejilla > div { display: grid; gap: var(--e-2); }
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }

/* ---------- Ficha (diálogo) ---------- */
.ficha {
  width: min(100% - 2rem, 30rem); max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; border-radius: var(--radio-panel);
  background: var(--color-superficie); color: var(--color-texto);
}
.ficha::backdrop { background: var(--color-velo); }
.ficha__cuerpo { display: grid; gap: var(--e-4); padding: var(--e-6); }
.ficha h2 { font-size: var(--t-2xl); padding-right: 5rem; }
.ficha__cerrar {
  position: absolute; top: var(--e-4); right: var(--e-4); min-height: 44px; padding-inline: var(--e-4);
  background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio-control); font-weight: 700; cursor: pointer;
}
.ficha__estado { color: var(--color-texto-suave); }
.ficha__estado[data-estado="preventa"] { color: var(--color-preventa); font-weight: 700; }
.ficha h2, .ficha__precio { color: var(--color-texto); }
.ficha fieldset { border: 0; padding: 0; }
.ficha legend { font-weight: 700; margin-bottom: var(--e-2); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--e-4);
  border: 2px solid var(--color-borde); border-radius: var(--radio-control); font-weight: 700;
}
.opcion input:checked + span { border-color: var(--color-marca); background: var(--color-marca); color: var(--color-sobre-marca); }
.opcion input:focus-visible + span { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.ficha__version { font-size: var(--t-sm); color: var(--color-texto-suave); margin-top: calc(var(--e-2) * -1); }
.ficha__ayuda a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); }
.ficha__nota { font-size: 0.9375rem; color: var(--color-texto-suave); margin-top: calc(var(--e-2) * -1); }
.ficha__precio { font-family: var(--fuente-titulos); font-size: 2rem; font-weight: 800; line-height: 1.1; }

/* ---------- Transición del catálogo ---------- */
::view-transition-group(*) { animation-duration: 260ms; }

/* ---------- Páginas simples (legales, 404) ---------- */
main.pagina-simple { padding-block: var(--e-16); }
.pagina-simple h1 { font-size: var(--t-2xl); margin-block: var(--e-6); }
.pagina-simple ul { margin-top: var(--e-4); }