/* Ataque a los Titanes — piedra de las Murallas, verde del Cuerpo de Exploración y alas de la libertad. */

:root {
  --bg: #15171a;
  --fondo:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 68px),
    radial-gradient(900px 420px at 50% -140px, rgba(186, 58, 38, .3), transparent),
    #15171a;
  --surface: #22251f;
  --surface-2: #2d3129;
  --borde: rgba(255, 255, 255, .1);
  --texto: #ece6d6;
  --suave: #a8a494;
  --acento: #3f6b3a;
  --grad: linear-gradient(180deg, #4d7f46, #2f5530);
  --sobre-acento: #fff;
  --ok: #3e9f5a;
  --sobre-ok: #fff;
  --casi: #d9a93a;
  --sobre-casi: #241900;
  --mal: #8e2c22;
  --sobre-mal: #fff;
  --r: 6px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Oswald', 'Inter', sans-serif;
  --cab-bg: linear-gradient(180deg, #8b8577, #6a6558);
}

/* Cabecera: bloques de piedra de la Muralla */
.top { border-bottom: 4px solid #3f6b3a; backdrop-filter: none; }
.top .logo { color: #1b1a16; }
.top .logo b { background: none; color: #7c1f16; -webkit-text-fill-color: #7c1f16; }
.top .tema-link { font: 700 20px/1 'Oswald', sans-serif; color: #1b1a16; text-transform: uppercase; letter-spacing: 1px; }
.top .nav a { color: #2a2820; }
.top .nav a:hover, .top .nav a.on { background: rgba(0, 0, 0, .12); color: #0d0c0a; }
.top .nav a.on { box-shadow: inset 0 -3px 0 #3f6b3a; }
.top .icono { background: rgba(255, 255, 255, .35); border-color: rgba(0, 0, 0, .25); color: #1b1a16; }
@media (max-width: 860px) { .top .nav { background: #7a7568; } }

h1.titulo { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.btn { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.tarjeta, .modal, .juego, .celda.pj, .pista, .pixel, .titan { border-top: 3px solid #8e2c22 !important; }

.aot-hero { text-align: center; padding: 18px 0 30px; }
/* Muralla: hilera de sillares */
.aot-hero .muralla { height: 26px; max-width: 320px; margin: 0 auto 14px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #7a7568 0 38px, #4d493f 38px 40px), #7a7568;
  box-shadow: 0 3px 0 #3a372f; }
.aot-hero h1 { font: 700 clamp(40px, 10vw, 84px)/1 var(--font-d); text-transform: uppercase; letter-spacing: 2px; color: #ece6d6; text-shadow: 0 4px 0 #7c1f16; }
.aot-hero p { color: var(--suave); margin-top: 12px; }
.juego .cuerpo b { font: 700 26px/1 var(--font-d); text-transform: uppercase; }
.juego .muestra { background: repeating-linear-gradient(0deg, #2a2d26 0 22px, #25281f 22px 24px); }

.titan { position: relative; border-radius: 8px; overflow: hidden; background: #0d0e0c; }
.titan img { display: block; width: 100%; max-height: 340px; object-fit: contain; }
.titan .rotulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); }
.titan .rotulo b { display: block; font: 700 24px/1.1 var(--font-d); text-transform: uppercase; color: #ece6d6; }
.titan .rotulo small { color: #ccc; }
.etq { display: inline-block; padding: 1px 6px; margin: 1px; border-radius: 4px; background: rgba(0, 0, 0, .25); font-size: 11px; }