/*
  Sistema de marca cocotres v2 (identidad "la C y los tres puntos", ver
  "cocotres - identidad v2.dc.html"). Tema claro, abstracto, sin fruta y sin
  cerebro dibujado (sección 19.1: un icono de cerebro es el mismo claim
  psicométrico que el texto ya prohíbe, solo que por vía gráfica).

  Variables canónicas = las de la identidad. Los alias de abajo (--bg,
  --surface, --pulpa...) existen para que game.css no tuviera que reescribirse
  regla a regla: mismo rol, nombre antiguo, valor nuevo.
*/

:root {
  --ink: #0F172A;
  --teal: #22C1A2;
  --amber: #FFC145;
  --violet: #8B5CF6;
  --mist: #F1F5F9;
  --card: #FFFFFF;
  --mut: #64748B;
  --line: #E2E8F0;
  --coral: #E0684B; /* único color de alarma: últimos 10s del cronómetro */

  /* Alias por rol, usados por game.css */
  --bg: var(--mist);
  --surface: var(--card);
  --pulpa: var(--ink);
  --texto-secundario: var(--mut);
  --acento: var(--teal);
  --impacto: var(--amber);

  --radius: 20px;
  --radius-sm: 12px;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --max-width: 640px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

a {
  color: #0E9C82;
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 193, 162, 0.35);
}
a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.contenedor {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 20px 48px;
}

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: -0.03em;
  border-bottom: none;
}
.marca:hover {
  border-bottom: none;
  color: var(--ink);
}
.marca-icono {
  height: 28px;
  width: 32px;
  flex-shrink: 0;
}

nav.nav-secundaria {
  display: flex;
  gap: 14px;
  font-size: 0.9rem;
}
nav.nav-secundaria a {
  color: var(--mut);
  border-bottom: none;
}
nav.nav-secundaria a:hover {
  color: var(--ink);
}

.tarjeta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 24px;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
.boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
  text-decoration: none;
}
.boton.secundario {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: none;
}
.boton.secundario:hover {
  border-color: var(--ink);
  box-shadow: none;
  transform: none;
}
.boton.acento {
  background: var(--teal);
}
.boton.acento:hover {
  box-shadow: 0 8px 20px rgba(34, 193, 162, 0.35);
}
.boton svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.texto-secundario {
  color: var(--mut);
}

.impacto {
  color: var(--amber);
}

footer.pie {
  border-top: 1px solid var(--line);
  padding: 24px 20px 40px;
  text-align: center;
  color: var(--mut);
  font-size: 0.85rem;
}
footer.pie a {
  color: var(--mut);
  border-bottom: none;
}
footer.pie a:hover {
  color: var(--ink);
}
footer.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  margin-bottom: 10px;
}

/* Contenedores de anuncio (sección 21.3): min-height fijo para no generar CLS.
   Solo se insertan estos bloques en las pantallas autorizadas por la tabla de la
   sección 21.3 — nunca en la ficha del reto ni en un reto en curso. */
.ad-slot {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--mut);
  font-size: 0.8rem;
  margin: 20px 0;
}

article.contenido h1,
article.contenido h2 {
  color: var(--ink);
  letter-spacing: -0.03em;
}
article.contenido p,
article.contenido li {
  color: var(--ink);
}
article.contenido .aviso {
  border-left: 3px solid var(--amber);
  padding-left: 12px;
  color: var(--mut);
  font-size: 0.9rem;
}

/* Cifras: cronómetro, puntos, percentil — DM Mono para que los dígitos no
   bailen al decrementar (sección 05 de la identidad). */
.cifra {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Páginas de error (404/500) y el aviso de error dentro del propio juego:
   mismo icono de estado "fallo" que ya usa el marcador, en gris, nunca en
   rojo — es justo la regla que evita que un error se lea como una alarma. */
.pagina-error {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pagina-error .codigo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--mut);
  letter-spacing: 0.08em;
}
.pagina-error svg {
  width: 64px;
  height: 64px;
  margin: 10px 0 6px;
}
.pagina-error h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.pagina-error p {
  color: var(--mut);
  max-width: 420px;
  margin: 4px 0 18px;
}
.pagina-error .acciones {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}