:root {
  --fondo: #0E1110;
  --superficie: #171B19;
  --linea: #2A302D;
  --texto: #E8ECE9;
  --apagado: #9AA59F;
  --acento: #FF5A36;
  --acento-hover: #FF7A5C;
  --titulos: 'Chakra Petch', sans-serif;
  --cuerpo: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); line-height: 1.5; }
h1, h2, h3 { margin: 0; font-family: var(--titulos); line-height: 1.1; }
p { margin: 0; }
a { color: var(--acento); }
a:hover { color: var(--acento-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.etiqueta { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--acento); }
.apagado { color: var(--apagado); }
.grande { font-size: 18px; color: var(--apagado); max-width: 620px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  border-radius: 14px; border: 0; background: var(--acento); color: var(--fondo);
  font: 600 17px var(--cuerpo); text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--acento-hover); color: var(--fondo); }
.boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--linea); }
.boton.secundario:hover { border-color: var(--apagado); }
.boton.chico { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* Top bar */
.barra {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px;
  padding: 12px max(16px, calc((100% - 1080px) / 2)); background: rgba(14, 17, 16, 0.92);
  border-bottom: 1px solid var(--linea); backdrop-filter: blur(8px);
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; font: 700 18px var(--titulos); letter-spacing: 0.08em; }
.logo:hover { color: var(--texto); }
.barra nav { display: flex; gap: 24px; margin-left: auto; }
.barra nav a { color: var(--apagado); text-decoration: none; font-weight: 500; }
.barra nav a:hover { color: var(--texto); }

main > section { padding: 0 max(16px, calc((100% - 1080px) / 2)); }

/* Hero */
.hero { display: flex; align-items: center; gap: 48px; min-height: calc(100vh - 69px); padding-top: 48px !important; padding-bottom: 48px !important; }
.hero-texto { flex: 1 1 520px; display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-size: clamp(42px, 7vw, 76px); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.mira { flex: 0 1 380px; position: relative; aspect-ratio: 1; }
.mira svg { width: 100%; height: 100%; }
.personaje-mira { position: absolute; inset: 31%; border-radius: 50%; overflow: hidden; }
.personaje-mira svg { width: 100%; height: 100%; }

/* Sections */
.seccion { display: flex; flex-direction: column; gap: 16px; padding-top: 96px !important; }
.seccion h2 { font-size: clamp(32px, 4.5vw, 48px); margin-bottom: 16px; }
h3 { font-size: 22px; font-weight: 600; }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pasos li { background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.pasos p { color: var(--apagado); }
.numero { font: 500 14px var(--mono); color: var(--acento); }

.tira-personajes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tira-personajes svg { width: 52px; height: 52px; border-radius: 50%; }

.reglas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reglas article, .tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.reglas ul, .tarjeta ul, .tarjeta ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--apagado); }
.reglas strong, .tarjeta strong { color: var(--texto); font-weight: 600; }

.instalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.nota { font-size: 14px; color: var(--apagado); border-top: 1px solid var(--linea); padding-top: 12px; margin-top: auto; }
#instalar { align-self: flex-start; }

.cierre { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding-top: 120px !important; padding-bottom: 120px !important; }
.cierre h2 { font-size: clamp(32px, 4.5vw, 48px); }

.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 24px max(16px, calc((100% - 1080px) / 2)); border-top: 1px solid var(--linea); color: var(--apagado); font-size: 14px; }

@media (max-width: 900px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reglas, .instalar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .barra nav { display: none; }
  .barra .boton { margin-left: auto; }
  .hero { flex-direction: column-reverse; min-height: 0; gap: 24px; padding-top: 24px !important; }
  .mira { width: 70%; max-width: 280px; flex: none; }
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .seccion { padding-top: 64px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }