/* Arte Furtivo · estilo propio de la web.
   El mismo idioma que la interfaz del juego (TemaUI + EstiloUI, fases F0-F4 de la interfaz):
   tela entintada (Noche) para lo que habla, papel de archivo (Arena) para lo que se anota,
   un solo acento (Oro) para lo seleccionado y lacre en la acción principal.
   El azul del escáner (#42A8F0) no aparece en la web: es del escáner y de nada más.

   Fase 1 (base común): tokens, cabecera, pie y piezas sueltas. Las páginas que aún usan las
   clases de Tailwind toman los mismos colores de estilos/tailwind.config.js; cada una pasa a
   este archivo cuando se rehace (fases 2 a 4). Documentacion_Mejoras/Portal_web. */

:root {
  /* Tela */
  --noche: #1B2440;
  --noche-suave: #273255;
  --noche-profunda: #171C30;
  --velo: #0F0D17;
  /* Papel */
  --arena: #E8D9B8;
  --arena-tarjeta: #E3D1AB;
  --arena-oscura: #C9B892;
  --arena-sombra: #A89C85;
  /* Tinta */
  --tinta: #33291A;
  --tinta-suave: #5C4E38;
  --tinta-profunda: #100C08;
  /* Luz */
  --marfil: #F4EFE4;
  --marfil-suave: #B9B2A6;
  --oro: #E8C77A;
  --oro-apagado: #BFA34D;
  --oro-oscuro: #59421A;
  /* Tejado y lacre */
  --terracota: #C2643C;
  --terracota-viva: #E07B4C;
  --terracota-oscura: #7A3D22;
  --terracota-clara: #E88E63;
  --lacre: #9E291A;
  /* Estados */
  --exito: #7FB069;
  --exito-tinta: #33562A;
  /* Foco del teclado: Oro sobre tela. Sobre papel el Oro da 1,2:1, así que .papel y .ficha lo pasan a TerracotaOscura (6,0:1). */
  --foco: var(--oro);

  /* Tipografía: Alegreya para los títulos, Alegreya Sans para leer. Las mismas del juego. */
  --f-titulo: "Alegreya", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-cuerpo: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --t-portada: clamp(2.6rem, 5.2vw, 4.25rem);
  --t-titulo: clamp(2rem, 3.4vw, 2.75rem);
  --t-seccion: clamp(1.5rem, 2.4vw, 2rem);
  --t-sub: 1.375rem;
  --t-cuerpo: 1.125rem;
  --t-secundario: 1rem;
  --t-minimo: 0.875rem; /* 14 px: nada por debajo */

  /* Espacio (rejilla de 4, como EstiloUI) */
  --e-xxs: 4px; --e-xs: 8px; --e-s: 12px; --e-m: 16px; --e-l: 24px; --e-xl: 32px; --e-xxl: 48px; --e-3xl: 72px; --e-4xl: 112px;
  /* Radios: recto, fino, ficha, placa. Nada de píldoras. */
  --r-fino: 3px; --r-ficha: 6px; --r-placa: 10px;
  /* Movimiento: papel con inercia */
  --d-papel: 220ms; --d-papel-sale: 160ms; --d-foco: 150ms;
  --curva-papel: cubic-bezier(.22,1,.36,1);
  --curva-ceremonia: cubic-bezier(.34,1.32,.64,1);

  --ancho: 1200px;
  --filete: color-mix(in srgb, var(--oro) 18%, transparent);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .08 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1'/%3E%3Cpath d='M0 0L6 6' stroke='%23000000' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
  --sello: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23C2412B'/%3E%3Cstop offset='.55' stop-color='%239E291A'/%3E%3Cstop offset='1' stop-color='%236A190E'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M96.3 44.4 Q93.7 50.0 94.2 55.1 Q94.8 60.2 93.0 65.0 Q91.2 69.9 88.4 74.1 Q85.5 78.3 81.8 81.8 Q78.1 85.2 74.3 88.9 Q70.5 92.7 64.9 91.8 Q59.3 90.9 54.7 94.6 Q50.0 98.2 45.3 94.5 Q40.7 90.8 35.0 91.9 Q29.3 93.0 26.5 88.0 Q23.8 82.9 19.1 80.6 Q14.4 78.4 12.2 73.8 Q10.1 69.2 5.5 65.2 Q1.0 61.2 4.3 55.6 Q7.6 50.0 6.2 44.8 Q4.7 39.7 6.8 34.9 Q8.9 30.2 9.5 24.2 Q10.1 18.2 15.9 16.4 Q21.8 14.6 25.6 10.9 Q29.4 7.2 34.4 5.3 Q39.4 3.4 44.7 4.0 Q50.0 4.7 55.2 4.4 Q60.5 4.1 65.4 5.9 Q70.3 7.8 73.4 12.3 Q76.5 16.8 81.1 19.1 Q85.8 21.5 87.5 26.3 Q89.3 31.1 94.1 35.0 Q99.0 38.8 96.3 44.4Z'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%236A190E' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23D0553B' stroke-opacity='.5' stroke-width='1' transform='translate(-1 -1)'/%3E%3Cpath d='M28 50 Q50 32 72 50 Q50 68 28 50Z' fill='none' stroke='%236A190E' stroke-width='3.2'/%3E%3Ccircle cx='50' cy='50' r='7.5' fill='%236A190E'/%3E%3Ccircle cx='47.5' cy='47.5' r='2.4' fill='%23D0553B' fill-opacity='.7'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* ---------- Base ---------- */
/* Lo justo para que las páginas viejas (Tailwind) y las nuevas compartan fondo y letra. */
/* Desplazamiento suave solo al pulsar un enlace de la misma página (el enlace queda con el foco).
   Al llegar de otra página a una sección («/#preguntas») el salto es directo: si fuera suave, la
   página aún se está asentando (letras, imágenes) y se pasaba de la sección. */
html:focus-within { scroll-behavior: smooth; }
/* Al bajar a una sección (#casos, #perfil…), que no quede debajo de la cabecera fija. */
:where([id]) { scroll-margin-top: 6rem; }
body {
  margin: 0;
  background-color: var(--noche);
  color: var(--marfil);
  font-family: var(--f-cuerpo);
  -webkit-font-smoothing: antialiased;
}
/* Los títulos grandes de las páginas viejas pasan a Alegreya, como los del juego. */
h1, h2 { font-family: var(--f-titulo); letter-spacing: -0.01em; }
:focus-visible { outline: 2px dashed var(--foco); outline-offset: 3px; }
.sr-only-af { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Saltar al contenido: primera parada del teclado */
.saltar {
  position: absolute; left: var(--e-m); top: -60px; z-index: 60;
  background: var(--arena); color: var(--tinta); padding: 10px 16px; border-radius: var(--r-fino);
  font: 700 var(--t-secundario)/1.2 var(--f-cuerpo); text-decoration: none;
}
.saltar:focus { top: var(--e-s); }

/* ---------- Superficies ---------- */
.tela { background-color: var(--noche); background-image: var(--trama); color: var(--marfil); --foco: var(--oro); }
.tela--profunda { background-color: var(--noche-profunda); }
.papel {
  position: relative;
  background-color: var(--arena);
  background-image: var(--grano), radial-gradient(120% 90% at 50% 0%, rgba(255,250,235,.35), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(168,140,90,.22), transparent 70%);
  color: var(--tinta);
  --foco: var(--terracota-oscura);
}
/* Ficha de papel: papel suelto con escuadras de tinta en las esquinas */
.ficha {
  position: relative;
  background-color: var(--arena);
  background-image: var(--grano), radial-gradient(100% 80% at 30% 0%, rgba(255,250,235,.4), transparent 65%);
  color: var(--tinta);
  --foco: var(--terracota-oscura);
  border-radius: var(--r-ficha);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 3px 0 color-mix(in srgb, var(--tinta) 10%, transparent), 0 10px 26px color-mix(in srgb, var(--velo) 30%, transparent);
  padding: var(--e-xl);
}
/* app.css pinta todos los títulos en claro: sobre papel van en tinta */
.ficha :is(h1, h2, h3, h4), .papel :is(h1, h2, h3, h4) { color: var(--tinta); }
.ficha::before, .ficha::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--tinta); opacity: .75; pointer-events: none; }
.ficha::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ficha::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* ---------- Envoltorio ---------- */
.marco { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--e-l); }
@media (max-width: 720px) { .marco { padding-inline: var(--e-m); } }

/* ---------- Texto ---------- */
.sobretitulo {
  margin: 0; font-family: var(--f-cuerpo); font-size: var(--t-minimo); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--oro);
}
.papel .sobretitulo, .ficha .sobretitulo { color: var(--terracota-oscura); }
.nota { font-size: var(--t-minimo); color: var(--marfil-suave); }
.papel .nota, .ficha .nota { color: var(--tinta-suave); }
/* Enlace dentro de texto: subrayado siempre, nunca solo color */
.enlace { font-weight: 700; color: var(--oro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.papel .enlace, .ficha .enlace { color: var(--terracota-oscura); }
.enlace:hover { text-decoration-thickness: 2px; }

/* ---------- Botones (BotonGrabado) ---------- */
.boton {
  --c: var(--marfil);
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-cuerpo); font-size: var(--t-cuerpo); font-weight: 500; line-height: 1.55;
  color: var(--c); text-decoration: none; padding: 10px 2px 10px 20px; background: none; border: 0; cursor: pointer;
  transition: transform var(--d-foco) var(--curva-papel);
}
.papel .boton, .ficha .boton { --c: var(--tinta); }
.boton::before { /* rombo de oro: aparece con el foco y en la página actual */
  content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; background: var(--oro);
  transform: translateY(-50%) rotate(45deg) scale(0); transition: transform var(--d-foco) var(--curva-papel);
}
.papel .boton::before, .ficha .boton::before { background: var(--terracota-oscura); }
.boton > span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--d-foco) var(--curva-papel); padding-bottom: 2px; }
.boton:hover::before, .boton:focus-visible::before, .boton[aria-current="page"]::before { transform: translateY(-50%) rotate(45deg) scale(1); }
.boton:hover > span, .boton:focus-visible > span, .boton[aria-current="page"] > span { background-size: 100% 2px; }
.boton:focus-visible { outline-offset: 4px; }

/* Acción principal: placa de terracota oscura con el lacre montado en el borde. Una por pantalla. */
.lacre {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 26px 12px 54px;
  background: var(--terracota-oscura); color: var(--marfil);
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.55; letter-spacing: .005em; text-decoration: none;
  border-radius: var(--r-fino); border: 0; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro) 55%, transparent), inset 0 0 0 4px var(--terracota-oscura), inset 0 0 0 5px color-mix(in srgb, var(--oro) 25%, transparent), 0 4px 0 #4E2614, 0 10px 22px color-mix(in srgb, var(--velo) 35%, transparent);
  transition: transform var(--d-foco) var(--curva-papel), box-shadow var(--d-foco);
}
.lacre::before {
  content: ""; position: absolute; left: -16px; top: 50%; width: 58px; height: 58px; transform: translateY(-50%) rotate(-7deg);
  background: var(--sello) center / contain no-repeat; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
  transition: transform var(--d-papel) var(--curva-ceremonia);
}
.lacre:hover { transform: translateY(-1px) scale(1.012); }
.lacre:hover::before { transform: translateY(-50%) rotate(-14deg) scale(1.05); }
.lacre:active { transform: translateY(2px) scale(.99); }
.lacre:focus-visible { outline-offset: 5px; }
.lacre--pequeno { min-height: 42px; font-size: 1.0625rem; padding: 8px 18px 8px 44px; }
.lacre--pequeno::before { width: 44px; height: 44px; left: -12px; }

/* Papel que entra (DESIGN.md §6): sube unos píxeles mientras aparece. Lo usan la portada y la cartela de la vitrina. */
@keyframes papel-entra { from { opacity: 0; transform: translateY(var(--sube, 12px)); } }

/* Estampado (js/animaciones.js, data-estampa en «Crear cuenta» y «Pedir el canje»): el sello se levanta, cae sobre la placa y
   se asienta con un rebote corto, y un aro de cera se abre y se borra. Solo el lacre rebota (DESIGN.md §6). */
@media (prefers-reduced-motion: no-preference) {
  .lacre.estampando::before { animation: lacre-estampa 480ms both; }
  .lacre.estampando::after { content: ""; position: absolute; left: -14px; top: 50%; width: 54px; height: 54px; margin-top: -27px; border: 3px solid var(--lacre); border-radius: 50%; pointer-events: none; animation: lacre-aro 480ms ease-out both; }
  .lacre--pequeno.estampando::after { left: -10px; width: 40px; height: 40px; margin-top: -20px; }
}
@keyframes lacre-estampa {
  0%   { transform: translateY(-50%) rotate(-7deg) scale(1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  30%  { transform: translateY(calc(-50% - 9px)) rotate(-12deg) scale(1.2); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  56%  { transform: translateY(-50%) rotate(-7deg) scale(.94); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  78%  { transform: translateY(-50%) rotate(-7deg) scale(1.03); animation-timing-function: ease-in-out; }
  100% { transform: translateY(-50%) rotate(-7deg) scale(1); }
}
@keyframes lacre-aro { 0%, 52% { opacity: 0; transform: scale(.8); } 60% { opacity: .75; } 100% { opacity: 0; transform: scale(1.55); } }

/* «Descargar el juego» (BotonDescarga): placa de oro, la segunda acción que más se ve después del lacre. */
.placa-descarga {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 22px 8px 16px;
  background: var(--oro); color: var(--tinta-profunda); text-decoration: none; border-radius: var(--r-fino);
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.2; white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro-oscuro) 55%, transparent), 0 4px 0 var(--oro-oscuro), 0 10px 22px color-mix(in srgb, var(--velo) 35%, transparent);
  transition: transform var(--d-foco) var(--curva-papel);
}
.placa-descarga svg { width: 26px; height: 26px; flex: none; }
.placa-descarga small { display: block; font-family: var(--f-cuerpo); font-weight: 500; font-size: var(--t-minimo); color: var(--oro-oscuro); }
.placa-descarga:hover { transform: translateY(-1px) scale(1.012); }
.placa-descarga:active { transform: translateY(2px) scale(.99); }
.placa-descarga:focus-visible { outline-offset: 5px; }

/* ---------- Iconos de grabado ---------- */
.icono { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Páginas de la propuesta (rediseño completo, 10-10-2026) ----------
   Las páginas rehechas igual que las maquetas de Documentacion_Mejoras/Portal_web/propuesta
   pasan CanvasClasses="lienzo" a ExperienceShell: la letra base de sistema.css (18 px, 1,55) sin
   tocar las páginas de administración, que siguen con su Tailwind. Su CSS propio va en
   wwwroot/css/paginas/<pagina>.css y se carga con <HeadContent>. */
.lienzo { font-size: var(--t-cuerpo); line-height: 1.55; color: var(--marfil); }
/* :where() deja estas reglas con el peso de un selector de etiqueta, como en sistema.css */
:where(.lienzo) :is(h1, h2, h3, h4) { font-family: var(--f-titulo); font-weight: 700; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
:where(.lienzo) p { margin: 0; text-wrap: pretty; }
:where(.lienzo) img { max-width: 100%; display: block; }
:where(.lienzo) a { color: inherit; }
.ficha--tarjeta { background-color: var(--arena-tarjeta); }
.seccion { padding-block: var(--e-4xl); }
@media (max-width: 720px) { .seccion { padding-block: var(--e-3xl); } }
.entradilla { font-size: var(--t-sub); line-height: 1.5; color: var(--marfil-suave); max-width: 34em; }
.papel .entradilla, .ficha .entradilla { color: var(--tinta-suave); }
.filete-oro { display: block; width: 72px; height: 2px; background: var(--oro); border: 0; margin: 0; }
.papel .filete-oro { background: var(--terracota-oscura); }
.boton:hover { transform: scale(1.018); }
.lacre[aria-disabled="true"] { background: var(--noche-suave); color: var(--marfil-suave); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marfil-suave) 35%, transparent); cursor: not-allowed; font-style: italic; }
.lacre[aria-disabled="true"]::before { filter: grayscale(1) opacity(.5); }
/* Cinta con el nombre (CintaNombre) */
.cinta {
  display: inline-block; position: relative; padding: 6px 30px; color: var(--marfil);
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; line-height: 1.2;
  background: var(--terracota-oscura);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  box-shadow: inset 0 2px 0 var(--oro), inset 0 -2px 0 var(--oro);
}
.icono .sombra { stroke-opacity: .28; transform: translate(1.2px, 1.2px); }

/* ---------- Cabecera común ----------
   Igual que la de las maquetas (propuesta/sistema.css y la cabecera con sesión de cuaderno.html):
   sin sesión, «Entrar» y el lacre «Crear cuenta»; con sesión, el nombre y la XP para canjear en
   texto, sin pastilla, y «Salir». */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--noche-profunda) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filete);
  font-family: var(--f-cuerpo); font-size: var(--t-cuerpo); line-height: 1.55;
}
.cabecera > .marco { display: flex; align-items: center; gap: var(--e-xl); min-height: 76px; }
.cabecera .logo { display: inline-flex; align-items: center; gap: var(--e-s); text-decoration: none; flex: none; }
.cabecera .logo img { display: block; height: 30px; width: auto; }
.cabecera .logo .zona { font-size: var(--t-minimo); color: var(--marfil-suave); border-left: 1px solid var(--filete); padding-left: var(--e-s); }
.cabecera .principal { display: flex; gap: var(--e-xs); margin-left: auto; }
.cabecera .principal .boton { font-size: 1.0625rem; padding-block: 6px; }
/* Con «Descargar» son seis enlaces: ninguno se parte en dos líneas («El / juego»); si no caben, se pasa al menú (ver abajo). */
.cabecera .principal .boton > span { white-space: nowrap; }
.cabecera .acciones { display: flex; align-items: center; gap: var(--e-l); }
.cabecera .acciones--sesion { gap: var(--e-m); }

/* Con sesión: nombre y XP para canjear, en texto, separados por un filete */
.sesion {
  display: grid; justify-items: end; line-height: 1.2; gap: 2px; text-decoration: none; color: var(--marfil);
  padding-left: var(--e-l); border-left: 1px solid color-mix(in srgb, var(--oro) 25%, transparent);
}
.sesion b { font-family: var(--f-titulo); font-weight: 700; font-size: 1.125rem; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesion span { font-size: var(--t-minimo); color: var(--marfil-suave); }
.sesion:hover b, .sesion:focus-visible b { text-decoration: underline; text-underline-offset: 4px; }
.sesion:focus-visible { outline-offset: 4px; }

/* Menú del móvil: un <details>, funciona sin JavaScript */
.menu-movil { display: none; position: static; }
.menu-movil > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  color: var(--marfil); border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent); border-radius: var(--r-fino);
  padding: 8px 12px; font: 600 1rem/1.2 var(--f-cuerpo);
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil > summary .icono { width: 28px; height: 28px; }
.menu-movil .cerrar-icono { display: none; }
.menu-movil[open] .abrir-icono { display: none; }
.menu-movil[open] .cerrar-icono { display: block; }
.panel-movil {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--noche-profunda); border-bottom: 1px solid var(--filete);
  box-shadow: 0 24px 40px color-mix(in srgb, var(--velo) 55%, transparent);
  padding: var(--e-s) var(--e-m) var(--e-l);
  display: grid; gap: var(--e-xxs);
}
.panel-movil .grupo { display: grid; gap: 2px; padding-block: var(--e-xs); }
.panel-movil .grupo + .grupo { border-top: 1px solid var(--filete); }
.panel-movil .grupo > p { margin: 0 0 var(--e-xxs); }
.panel-movil .quien-movil { display: grid; gap: 2px; padding: var(--e-xs) var(--e-s); }
.panel-movil .quien-movil b { font-family: var(--f-titulo); font-size: 1.25rem; color: var(--marfil); }
.panel-movil .quien-movil span { font-size: var(--t-minimo); color: var(--marfil-suave); }
.panel-movil a:not(.lacre) { display: flex; align-items: center; min-height: 48px; padding-inline: var(--e-s); border-radius: var(--r-fino); color: var(--marfil); text-decoration: none; font-size: var(--t-cuerpo); }
.panel-movil a:not(.lacre)[aria-current="page"] { background: color-mix(in srgb, var(--oro) 10%, transparent); box-shadow: inset 3px 0 0 var(--oro); }
.panel-movil a:not(.lacre):hover { text-decoration: underline; text-underline-offset: 4px; }
.panel-movil .lacre { justify-self: start; margin: var(--e-s) 0 var(--e-xxs) 16px; }

/* El subtítulo de zona (solo las páginas de administración) estorba antes que nada. */
@media (max-width: 1500px) {
  .cabecera .logo .zona { display: none; }
}
/* La cabecera de escritorio necesita unos 1200 px sin sesión (logo + seis enlaces + Entrar + Crear cuenta) y 1235 con la de administración;
   por debajo, el menú (antes 980 px, con cinco enlaces: «Descargar» ya no cabe y partía «El juego» y «La ciudad»). */
@media (max-width: 1240px) {
  .cabecera .principal, .cabecera .acciones > .boton { display: none; }
  .cabecera .acciones { margin-left: auto; }
  .menu-movil { display: block; }
}
@media (max-width: 560px) {
  .cabecera .sesion { display: none; }
}
@media (max-width: 520px) {
  .cabecera > .marco { gap: var(--e-s); min-height: 64px; }
  .cabecera .logo img { height: 22px; }
  .cabecera .logo .zona { display: none; }
  .cabecera .acciones > .lacre { display: none; }
}

/* ---------- Pie común ---------- */
.pie {
  background-color: var(--noche-profunda);
  border-top: 1px solid var(--filete);
  padding-block: var(--e-3xl) var(--e-xl);
  font-family: var(--f-cuerpo); font-size: var(--t-secundario); line-height: 1.55; color: var(--marfil-suave);
}
.pie > .marco { display: grid; gap: var(--e-xl); grid-template-columns: 1.4fr repeat(3, 1fr); }
.pie .firma { display: grid; gap: var(--e-m); align-content: start; }
.pie .firma img { height: 26px; width: auto; }
.pie .firma p { margin: 0; }
.pie h2 { font-family: var(--f-cuerpo); font-size: var(--t-minimo); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin: 0 0 var(--e-s); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie a { color: var(--marfil-suave); text-decoration: none; }
.pie a:hover, .pie a:focus-visible { color: var(--marfil); text-decoration: underline; text-underline-offset: 4px; }
.pie .legal { grid-column: 1 / -1; margin: 0; border-top: 1px solid color-mix(in srgb, var(--marfil-suave) 18%, transparent); padding-top: var(--e-l); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-s); font-size: var(--t-minimo); }
@media (max-width: 820px) { .pie > .marco { grid-template-columns: 1fr 1fr; } .pie .firma { grid-column: 1 / -1; } }

/* ---------- Avisos de página (404, acceso restringido) ---------- */
.aviso { padding-block: var(--e-4xl); }
.aviso .ficha { max-width: 40rem; display: grid; gap: var(--e-m); padding: var(--e-xxl) var(--e-xl); }
.aviso h1 { font-size: var(--t-titulo); line-height: 1.1; margin: 0; }
.aviso p { margin: 0; font-size: var(--t-cuerpo); }
.aviso .acciones { display: flex; flex-wrap: wrap; gap: var(--e-l); align-items: center; margin-top: var(--e-s); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}