/* ==========================================================================
   Arcano · sistema visual «Arcano vivo»
   Tokens y componentes de 04-direccion-visual.md y 05-sistema-ornamental.md.
   Un solo archivo, sin build, sin dependencias.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografías propias (nada de proveedores externos en el camino crítico)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fuentes/cinzel-decorative-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel Decorative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fuentes/cinzel-decorative-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fuentes/manrope-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fuentes/manrope-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /*
   * El sitio es oscuro, y hay que decírselo al navegador.
   *
   * Sin esto, los controles que dibuja él mismo —el calendario de
   * `<input type="date">`, el reloj de `type="time"`, las flechitas de `number`,
   * las barras de desplazamiento— se pintan en tema claro: iconos negros sobre
   * un fondo casi negro, invisibles. No son iconos nuestros y por eso no se
   * arreglaban tocando los assets.
   */
  color-scheme: dark;

  /* Paleta aprobada (04-direccion-visual.md §4) */
  --tinta: #07051A;
  --noche: #100B2F;
  --violeta: #7638F2;
  --magenta: #B339FF;
  --azul: #2454FF;
  --cian: #22D7DC;
  --esmeralda: #36D694;
  --oro: #FFC94A;
  --brasa: #FF655D;
  --pergamino: #FFF4DC;

  /* Superficies y filetes derivados */
  --superficie: rgba(16, 11, 47, 0.62);
  --superficie-solida: #130D33;
  --filete: rgba(255, 244, 220, 0.20);
  --filete-interno: rgba(255, 244, 220, 0.10);

  /* Texto */
  --texto: rgba(255, 244, 220, 0.88);
  --texto-fuerte: #FFF4DC;
  --texto-suave: rgba(255, 244, 220, 0.62);

  /* Tipografía */
  --tipo-display: 'Cinzel Decorative', 'Times New Roman', serif;
  --tipo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /*
   * Grano de impresión.
   *
   * SVG en línea (unos 320 bytes, sin petición extra) con `feTurbulence`: da la
   * textura de tinta sobre papel que pide el lenguaje «grabado» de 05 §2 sin
   * inventar ni un símbolo. Es superficie, no iconografía.
   */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");

  /*
   * Pattern de marca: mosaico de 640 px compuesto con los 15 motivos de la
   * entrega y repetible sin costura (`herramientas/preparar-assets.php`).
   * Verificado: el salto de tono en la costura (7.5/255) es igual al salto medio
   * entre columnas vecinas dentro del mosaico (6.6/255).
   *
   * Es una sola pieza de 26 KB, en línea clara sobre negro: el negro desaparece
   * al fundirla con `screen` y el gradiente de cada tratamiento la tinta, así que
   * este archivo resuelve Fantasma, Encantado y la variante cálida sin cargar una
   * imagen por tratamiento.
   */
  --patron: url('../img/patron-arcano.webp');
  --patron-escala: 460px;

  /* Radios: rectangular con esquinas redondeadas, 20–32 px (05 §7) */
  --radio: 24px;
  --radio-grande: 32px;
  --radio-chico: 14px;

  /* Ritmo */
  --ancho: 1200px;
  --canal: clamp(1.25rem, 5vw, 3rem);
  --seccion: clamp(4.5rem, 10vw, 8rem);

  /* Alto real del encabezado: lo define el logotipo más su aire. De aquí salen el
     desplazamiento del panel de navegación en móvil y el margen de las anclas.
     Escala subida un 17 % sobre la primera versión, a petición de diseño. */
  --alto-logo: clamp(3.8rem, 5.9vw, 5rem);
  --alto-cabecera: calc(var(--alto-logo) + 1.5rem);

  --transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--tipo);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--texto);
  background-color: var(--tinta);
  /* Aurora de fondo: luz de taberna encantada, resuelta en CSS y sin imágenes */
  background-image:
    radial-gradient(60rem 40rem at 12% -8%, rgba(118, 56, 242, 0.28), transparent 65%),
    radial-gradient(48rem 32rem at 92% 6%, rgba(34, 215, 220, 0.14), transparent 62%),
    radial-gradient(52rem 38rem at 50% 108%, rgba(179, 57, 255, 0.16), transparent 66%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/*
 * Grano sobre todo el documento. Es la capa que le quita el aspecto de plano
 * digital al fondo: una veladura de tinta impresa, fija, nunca interactiva.
 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grano);
  opacity: 0.055;
  mix-blend-mode: soft-light;
}

img,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--oro); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--pergamino); }

h1, h2, h3, h4 { margin: 0 0 0.6em; line-height: 1.2; color: var(--texto-fuerte); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Utilidades */
.ak-contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}

.ak-seccion { padding-block: var(--seccion); position: relative; }

.ak-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ak-salto {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  transform: translate(-50%, -200%);
  z-index: 100;
  background: var(--oro);
  color: var(--tinta);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radio-chico);
  text-decoration: none;
}
.ak-salto:focus { transform: translate(-50%, 0); color: var(--tinta); }

/* --------------------------------------------------------------------------
   4. Tipografía expresiva
   -------------------------------------------------------------------------- */
.ak-titular {
  font-family: var(--tipo-display);
  font-weight: 700;
  /*
   * Cinzel Decorative es una serif muy ancha: «La aventura también.» necesita
   * unas 12,4 veces el tamaño de fuente en ancho de línea. La escala está
   * calculada para que en escritorio el H1 caiga en dos líneas —la composición
   * aprobada en 07 §4— y no en cuatro. En móvil sí puede partirse: ahí la
   * composición es vertical a propósito.
   */
  font-size: clamp(2.1rem, 1.1rem + 3.4vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  margin-bottom: 0.5em;
  text-wrap: balance;
}
.ak-titular em {
  font-style: normal;
  background: linear-gradient(96deg, var(--oro) 8%, var(--brasa) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Si el navegador no soporta background-clip:text, el color hereda y se lee igual */
}
.ak-titular--medio { font-size: clamp(1.8rem, 1.1rem + 3vw, 3rem); }
.ak-titular--cierre { font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem); }

.ak-titulo-seccion {
  font-family: var(--tipo);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.ak-antetitulo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cian);
  margin-bottom: 1rem;
}

.ak-parrafo-guia {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  max-width: 60ch;
  color: var(--texto);
}

.ak-nota {
  font-size: 0.9375rem;
  color: var(--texto-suave);
  max-width: 62ch;
}

.ak-dato {
  font-weight: 800;
  color: var(--oro);
}

.ak-encabezado-seccion { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ak-encabezado-seccion--centro { margin-inline: auto; text-align: center; }

.ak-enlace-contextual {
  font-weight: 700;
  color: var(--cian);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 215, 220, 0.4);
  padding-bottom: 2px;
  transition: color var(--transicion), border-color var(--transicion);
}
.ak-enlace-contextual::after { content: ' →'; }
.ak-enlace-contextual:hover { color: var(--oro); border-color: var(--oro); }

/*
 * Cierre de sección: la línea que va después de una rejilla de tarjetas.
 *
 * Existe porque sin ella el párrafo quedaba pegado al borde inferior de las
 * tarjetas y se leía como parte de la última, no como el cierre de la sección.
 * Pasaba en varios sitios con marcas distintas —una nota, un enlace— y era el
 * mismo problema: hacía falta aire, no un parche por caso.
 */
.ak-cierre-bloque { margin-top: 2.25rem; }
.ak-cierre-bloque--centro { margin-inline: auto; text-align: center; }

.ak-lista-enlaces { list-style: none; padding: 0; display: grid; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   5. Marcos y ornamentación
   -------------------------------------------------------------------------- */
.ak-marco {
  position: relative;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--superficie);
}
/* El doble filete de 05 §7: segunda línea interior, siempre decorativa */
.ak-marco::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--filete-interno);
  border-radius: calc(var(--radio) - 7px);
  pointer-events: none;
}
.ak-marco--escena {
  border-radius: var(--radio-grande);
  background: rgba(7, 5, 26, 0.55);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.ak-marco--escena::after { inset: 9px; border-radius: calc(var(--radio-grande) - 9px); }

/*
 * Medallón: hueco reservado para un grabado de la biblioteca de marca.
 * 05 §3 prohíbe inventar iconos, así que aquí solo hay luz y color; el anillo
 * punteado marca que falta la pieza definitiva.
 */
.ak-medallon {
  --m-color: var(--violeta);
  display: inline-block;
  width: clamp(2.5rem, 3.4vw, 3.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 244, 220, 0.75), transparent 45%),
    radial-gradient(circle at 50% 55%, var(--m-color), transparent 72%);
  box-shadow: 0 0 0 1px rgba(255, 244, 220, 0.18), 0 0 30px -8px var(--m-color);
  flex: none;
}
.ak-medallon--pendiente::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px dashed rgba(255, 244, 220, 0.26);
  border-radius: 50%;
}
/*
 * Grabado real de la biblioteca de marca.
 *
 * El archivo se usa como máscara, no como imagen: así un solo WebP por motivo
 * sirve para cualquier color y puede tomar el duotono que pide 05 §8 —el grabado
 * conserva uno o dos colores para no perder lectura—. También evita tener una
 * copia del motivo por cada tono.
 */
.ak-grabado {
  --g-color: var(--violeta);
  display: inline-block;
  width: clamp(2.75rem, 4.2vw, 3.75rem);
  aspect-ratio: 1;
  flex: none;
  background-image: linear-gradient(155deg, var(--pergamino) 5%, var(--g-color) 85%);
  -webkit-mask-image: var(--grabado);
          mask-image: var(--grabado);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  filter: drop-shadow(0 0 16px rgba(255, 244, 220, 0.22));
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--transicion);
}
.ak-grabado--violeta   { --g-color: var(--violeta); }
.ak-grabado--magenta   { --g-color: var(--magenta); }
.ak-grabado--cian      { --g-color: var(--cian); }
.ak-grabado--esmeralda { --g-color: var(--esmeralda); }
.ak-grabado--oro       { --g-color: var(--oro); }
.ak-grabado--brasa     { --g-color: var(--brasa); }

/*
 * Icono funcional. Plano, del color del texto que acompaña y sin halo: no finge
 * ser parte del universo ilustrado (05 §3). Se dimensiona con la tipografía, así
 * que crece y se alinea con su etiqueta sin ajustes por sitio.
 */
.ak-icono {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: var(--icono);
          mask-image: var(--icono);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.ak-icono--grande { width: 1.6em; height: 1.6em; vertical-align: -0.35em; }

/*
 * Estos iconos están dibujados con detalle —el de ubicación es una rosa de los
 * vientos—, así que en contextos de letra pequeña se les da un tamaño fijo mayor
 * en vez de dejarlos escalar con la tipografía: a 14 px no se leerían.
 */
.ak-visitanos__subtitulo .ak-icono,
.ak-pie__titulo .ak-icono { width: 1.5rem; height: 1.5rem; vertical-align: -0.45rem; color: var(--oro); }
.ak-icono--oro { color: var(--oro); }
.ak-icono--cian { color: var(--cian); }

/*
 * Ilustración flotante de fondo.
 *
 * Su papel es decorar la sección, no ocupar un hueco de imagen: flota, sangra por
 * el borde y se queda detrás del contenido. Es el «objeto flotante» de 04 §8 y el
 * grabado que «sale parcialmente del marco» de 05 §7.
 *
 * Opacidad baja y posición hacia los bordes: nunca compite con el texto ni con la
 * fotografía. Los huecos de imagen quedan libres para las fotos reales.
 */
.ak-flotante {
  --i-color: var(--violeta);
  display: block;
  position: absolute;
  z-index: 0;
  width: clamp(11rem, 26vw, 22rem);
  aspect-ratio: 1;
  /* Tope contra la sección que la hospeda: por alta o angosta que sea, la pieza
     nunca la excede ni la domina, así que siempre se ve completa. */
  max-height: 62%;
  max-width: 44%;
  pointer-events: none;
  opacity: 0.16;
  background-image: linear-gradient(160deg, var(--pergamino) 5%, var(--i-color) 95%);
  -webkit-mask-image: var(--ilustracion);
          mask-image: var(--ilustracion);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.ak-flotante--violeta   { --i-color: var(--violeta); }
.ak-flotante--magenta   { --i-color: var(--magenta); }
.ak-flotante--cian      { --i-color: var(--cian); }
.ak-flotante--esmeralda { --i-color: var(--esmeralda); }
.ak-flotante--oro       { --i-color: var(--oro); }
.ak-flotante--brasa     { --i-color: var(--brasa); }

/*
 * La pieza se ve completa: no se recorta contra el borde de la sección. Los
 * márgenes dejan aire suficiente para que la rotación tampoco la muerda —la caja
 * de un cuadrado girado 6° crece un 10 %—.
 */
.ak-flotante--derecha-abajo    { right: 3%;  bottom: 6%; transform: rotate(-6deg); }
.ak-flotante--derecha-arriba   { right: 3%;  top: 7%;    transform: rotate(7deg); }
.ak-flotante--izquierda-abajo  { left: 3%;   bottom: 6%; transform: rotate(5deg); }
.ak-flotante--izquierda-arriba { left: 3%;   top: 7%;    transform: rotate(-8deg); }
.ak-flotante--centro-abajo     { left: 50%;  bottom: 5%; transform: translateX(-50%) rotate(3deg); }

/*
 * La sección hospeda la pieza sin recortarla. `.ak-patron` ya crea el contexto de
 * apilamiento y sube el contenido a z-index 1, así que la ilustración queda
 * detrás del texto sin más ajustes.
 */
.ak-seccion:has(> .ak-flotante),
.ak-cierre:has(> .ak-flotante),
.ak-hero:has(> .ak-flotante) {
  position: relative;
}

/*
 * REGLA DURA: donde ya hay pattern de fondo no va ilustración. El fondo está
 * ocupado y dos capas de grabado compitiendo se convierten en ruido.
 *
 * No se deja como convención documentada: si alguien coloca una pieza flotante en
 * una sección con pattern, simplemente no se pinta. En modo revisión sí aparece,
 * con un marco de aviso, para que el error se vea en vez de pasar desapercibido.
 */
.ak-patron > .ak-flotante { display: none; }
.ak-revision .ak-patron > .ak-flotante {
  display: block;
  outline: 2px dashed var(--brasa);
  outline-offset: 8px;
  opacity: 0.35;
}

/* En móvil estorban más de lo que aportan: se achican y se atenúan. */
@media (max-width: 700px) {
  .ak-flotante { width: clamp(9rem, 46vw, 13rem); opacity: 0.11; }
}

/* Los grabados de escena respiran más. El techo es 5rem (80 px) a propósito: los
   archivos se generan a 160 px, que es exactamente 2x de ese tamaño. */
.ak-definicion__escena .ak-grabado,
.ak-aventura__escena .ak-grabado,
.ak-comida__escena .ak-grabado,
.ak-categoria__foto .ak-grabado {
  width: clamp(3.5rem, 7vw, 5rem);
}

.ak-medallon--violeta   { --m-color: var(--violeta); }
.ak-medallon--magenta   { --m-color: var(--magenta); }
.ak-medallon--cian      { --m-color: var(--cian); }
.ak-medallon--esmeralda { --m-color: var(--esmeralda); }
.ak-medallon--oro       { --m-color: var(--oro); }
.ak-medallon--brasa     { --m-color: var(--brasa); }

/* Chispas de fondo. Escala de detalle de 05 §10. */
.ak-estrellas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 244, 220, 0.75), transparent 100%),
    radial-gradient(1px 1px at 28% 68%, rgba(34, 215, 220, 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 14%, rgba(255, 244, 220, 0.55), transparent 100%),
    radial-gradient(1px 1px at 63% 52%, rgba(255, 201, 74, 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 28%, rgba(255, 244, 220, 0.6), transparent 100%),
    radial-gradient(1px 1px at 88% 74%, rgba(179, 57, 255, 0.75), transparent 100%),
    radial-gradient(1px 1px at 38% 88%, rgba(255, 244, 220, 0.5), transparent 100%);
  animation: ak-titilar 7s ease-in-out infinite alternate;
}
@keyframes ak-titilar {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   5b. Tratamientos de pattern (05 §6)
   El pattern siempre queda DETRÁS de una capa de contraste, se escala pero no
   se deforma, y nunca se coloca bajo campos de formulario. Por eso vive en un
   ::before con opacidad baja y el contenido se eleva por encima.

   Falta el tratamiento «Tinta» (negro sobre pergamino): es para superficies
   claras y todavía no existe ninguna en el sitio. Se añadirá con la primera.
   -------------------------------------------------------------------------- */
.ak-patron { position: relative; isolation: isolate; }
/*
 * El contenido se eleva sobre la capa de pattern, pero **las capas de fondo se
 * excluyen**: son fondo y necesitan conservar su `position: absolute`.
 *
 * ── LA MISMA TRAMPA, TRES VECES ──
 *
 * Esta regla pisa `position` y `z-index` de todo hijo directo, y gana por
 * especificidad —(0,2,0) contra la (0,1,0) de una clase suelta—. Cada vez que
 * alguien añade una capa de fondo como hijo de una sección con pattern, se rompe:
 *
 * 1. `.ak-flotante` — se detectó al añadirla: siendo `span`, perdía el ancho.
 * 2. `.ak-hero__medio` — **la foto del hero llevaba invisible desde entonces**. Sin
 *    `position: absolute` no tiene altura propia, colapsa a 0 y se lleva la imagen
 *    con ella. El hero se veía como un degradado vacío.
 * 3. `.ak-estrellas` — igual, en las 24 plantillas que la usan: colapsada y encima
 *    del contenido en vez de detrás.
 *
 * Se listan las tres en vez de marcarlas con una clase común porque eso serían 26
 * archivos tocados; si aparece una cuarta, toca hacer la clase. Lo que **no** hay que
 * hacer es asumir que una capa de fondo funciona solo porque su CSS dice `absolute`:
 * aquí no manda su CSS, manda este.
 */
.ak-patron > *:not(.ak-flotante):not(.ak-estrellas):not(.ak-hero__medio) {
  position: relative;
  z-index: 1;
}
.ak-patron::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--patron);
  background-size: var(--patron-escala);
  background-repeat: repeat;
  /* El negro del archivo se cae con screen; solo queda la línea. */
  mix-blend-mode: screen;
  opacity: var(--patron-opacidad, 0.10);
}

/* Fantasma: pergamino al 6–10 % sobre violeta o azul profundo. Fondos de lectura. */
.ak-patron--fantasma { --patron-opacidad: 0.10; }

/*
 * Encantado: duotono cian–magenta. Hero, eventos y transiciones.
 * El gradiente multiplica sobre la línea: el negro sigue en negro y la línea
 * toma el color. Después el `screen` del ::before lo suelta sobre el fondo.
 */
.ak-patron--encantado { --patron-opacidad: 0.20; }
.ak-patron--encantado::before {
  background-image: linear-gradient(120deg, var(--cian), var(--magenta) 75%), var(--patron);
  background-size: cover, var(--patron-escala);
  background-repeat: no-repeat, repeat;
  background-blend-mode: multiply;
}
/* Variante cálida del Encantado: oro–magenta, para el cierre. */
.ak-patron--calido::before {
  background-image: linear-gradient(120deg, var(--oro), var(--magenta) 78%), var(--patron);
}

/*
 * Solo grano, sin la imagen del pattern.
 * Se usa arriba del pliegue: el hero ya precarga la fotografía que mide el LCP y
 * no conviene meterle 63 KB más de fondo decorativo en el camino crítico.
 */
.ak-patron--grano::before {
  background-image: var(--grano);
  background-size: var(--patron-escala);
  mix-blend-mode: soft-light;
  opacity: calc(var(--patron-opacidad, 0.10) * 1.6);
}

/* En móvil, versión más aireada y discreta (05 §6) */
@media (max-width: 700px) {
  .ak-patron { --patron-escala: 300px; }
  .ak-patron::before { opacity: calc(var(--patron-opacidad, 0.10) * 0.75); }
}

/*
 * Extremos: el pattern entra por los costados y desaparece en el centro, para
 * no caer sobre rostros ni detrás del texto (07 §4).
 */
.ak-patron--extremos::before {
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 28%, transparent 72%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0, transparent 28%, transparent 72%, #000 100%);
}

/* --------------------------------------------------------------------------
   5c. Movimiento (04 §9)
   Brillos lentos en marcos y botones, y microinteracciones. Todo se apaga con
   prefers-reduced-motion en §24; nada de esto oculta texto ni retrasa un CTA.
   -------------------------------------------------------------------------- */
@keyframes ak-respirar-oro {
  from { box-shadow: 0 12px 34px -14px rgba(255, 201, 74, 0.55); }
  to   { box-shadow: 0 16px 44px -12px rgba(255, 201, 74, 0.95); }
}
@keyframes ak-respirar-marco {
  from { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9), 0 0 40px -24px rgba(118, 56, 242, 0.5); }
  to   { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9), 0 0 70px -22px rgba(179, 57, 255, 0.75); }
}

.ak-boton--principal { animation: ak-respirar-oro 4.5s ease-in-out infinite alternate; }
.ak-marco--escena { animation: ak-respirar-marco 9s ease-in-out infinite alternate; }

/* Microinteracciones en tarjetas: elevación mínima y filete que se calienta. */
.ak-juego,
.ak-opcion,
.ak-evento,
.ak-categoria,
.ak-programa,
.ak-ruta-extra {
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.ak-juego:hover,
.ak-opcion:hover,
.ak-evento:hover,
.ak-categoria:hover,
.ak-programa:hover,
.ak-ruta-extra:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 201, 74, 0.45);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
}

/* El ornamento reacciona cuando se posa el cursor en su tarjeta */
.ak-medallon { transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow var(--transicion); }
.ak-juego:hover .ak-medallon,
.ak-opcion:hover .ak-medallon,
.ak-categoria:hover .ak-medallon,
.ak-programa:hover .ak-medallon,
.ak-aporte:hover .ak-medallon,
.ak-cinta__item:hover .ak-medallon {
  transform: translateY(-3px) rotate(-4deg) scale(1.06);
  box-shadow: 0 0 0 1px rgba(255, 244, 220, 0.28), 0 0 40px -6px var(--m-color);
}
.ak-juego:hover .ak-grabado,
.ak-opcion:hover .ak-grabado,
.ak-categoria:hover .ak-grabado,
.ak-programa:hover .ak-grabado,
.ak-aporte:hover .ak-grabado,
.ak-cinta__item:hover .ak-grabado,
.ak-ruta-extra:hover .ak-grabado {
  transform: translateY(-3px) rotate(-4deg) scale(1.06);
  filter: drop-shadow(0 0 22px rgba(255, 244, 220, 0.4));
}

/* Parallax mínimo entre fotografía y destellos: lo mueve arcano.js */
.ak-hero .ak-estrellas { will-change: transform; }

/* --------------------------------------------------------------------------
   5d. Niveles de densidad ornamental (05 §10)
   Clases explícitas para no volver a aplicarlos «a ojo»:
     3 · escena      hero y campañas: pattern, marco, luz y grabados protagonistas
     2 · narrativa   eventos, comunidad, ludoteca: fragmento de pattern y un remate
     1 · funcional   fichas y navegación: un motivo pequeño o un filete
     0 · transacción reserva, pago, confirmación: color, tipografía y una firma
   -------------------------------------------------------------------------- */
/*
 * ── LA ESCALA DE DENSIDADES NO SE APLICABA (arreglado el 24-ago-2026) ──
 *
 * Las reglas eran solo de **descendiente** —`.ak-densidad-1 .ak-patron::before`—, y en
 * el sitio las dos clases van en el **mismo** elemento:
 *
 *   <section class="ak-interno-hero ak-densidad-1 ak-patron ak-patron--fantasma">
 *
 * Un selector de descendiente no coincide con el propio elemento, así que la escala
 * estaba inerte. Medido: **45 de las 50** apariciones de `ak-densidad-*` en las
 * plantillas la llevan junta con `ak-patron`; solo 5 la tienen en un ancestro, que son
 * las únicas que funcionaban.
 *
 * El efecto visible era que todo pintaba el pattern a la misma intensidad: un hero de
 * densidad 1, que debía llevarlo al 4 %, lo llevaba al 10 %, igual que la sección de
 * lectura de debajo. De ahí la costura horizontal justo bajo el hero —el hero enmascara
 * el pattern por el centro (`--extremos`) y la sección siguiente no—, que es lo que
 * Arcano reportó como «fondos desfasados».
 *
 * Se añade la variante del mismo elemento (`.ak-densidad-1.ak-patron`) junto a la de
 * descendiente, no en su lugar: las dos formas se usan.
 *
 * `.ak-estrellas` y `.ak-marco--escena` **sí** son descendientes de verdad —van dentro
 * de la sección—, así que esas se quedan como estaban.
 */
.ak-densidad-0 .ak-patron::before,
.ak-densidad-0.ak-patron::before,
.ak-densidad-0 .ak-estrellas { display: none; }
.ak-densidad-0 .ak-marco--escena { animation: none; }
.ak-densidad-1 .ak-patron::before,
.ak-densidad-1.ak-patron::before { opacity: 0.04; }

/* Escenas fotográficas por sustituir: proporción y punto focal ya definidos,
   para que meter la foto real no rompa la composición (07 §18).
   Cuelga de `data-hueco`, que existe siempre, y NO de `data-foto-pendiente`, que
   solo existe en modo revisión: cuando estuvieron fundidos, ocultar la nota en
   producción dejaba los huecos sin fondo y sin alto. */
[data-hueco] {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 30% 25%, rgba(255, 244, 220, 0.10), transparent 70%),
    linear-gradient(150deg, var(--escena-a, rgba(118, 56, 242, 0.55)), var(--escena-b, rgba(36, 84, 255, 0.35)));
  display: grid;
  place-items: center;
}
/*
 * Hueco con fotografía puesta.
 *
 * Va DESPUÉS de `[data-hueco]` a propósito: los dos selectores tienen la misma
 * especificidad, así que decide el orden. Se sobrescribe solo `background-image`,
 * de modo que si la foto tarda o falla se sigue viendo el degradado de debajo en
 * lugar de un rectángulo vacío.
 *
 * Cada hueco tiene su propia proporción —hay de 4/3, 5/6, 3/2, 4/5 y cuadrados—,
 * así que las fotos se guardan completas y recorta `cover`. Recortarlas al
 * convertirlas habría acertado en una de cada cinco.
 */
/*
 * La foto va dentro, como `<img>`, no como fondo.
 *
 * Antes era `background-image` con `image-set`, y funcionaba mientras hubo cuatro
 * fotos. Un fondo CSS **no se puede diferir**: al llenar 26 huecos, `/menu/` se
 * traía 712 KB de fotografía de golpe, casi toda por debajo del pliegue. Con un
 * `<img loading="lazy">` lo decide el navegador. Ver `foto_diferida()`.
 *
 * El degradado de `[data-hueco]` se queda debajo, así que mientras la foto no
 * llega —o si falla— no aparece un rectángulo vacío.
 */
.ak-hueco__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Cada hueco tiene su proporción —4/3, 5/6, 3/2, 4/5, cuadrado— y las fotos se
     guardan completas: recorta `cover`, igual que hacía el fondo. */
  object-fit: cover;
  object-position: center;
  /* Sin esto, un `img` es `inline` y deja un hueco de línea base debajo. */
  display: block;
}

/*
 * La etiqueta que dice qué fotografía va en el hueco es una nota para quien
 * revisa, no contenido: solo se pinta en modo revisión (`?revision=1`). En la
 * primera versión se imprimía siempre y el visitante leía instrucciones internas
 * dentro del diseño.
 */
.ak-revision [data-foto-pendiente]::before {
  content: attr(data-foto-pendiente);
  position: absolute;
  inset: auto 1.25rem 1.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 244, 220, 0.5);
  text-align: center;
}

/* Aviso de contenido de ejemplo mientras no hay CMS */
.ak-sello-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cian);
  border: 1px dashed rgba(34, 215, 220, 0.45);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */
.ak-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tipo);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion),
              background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.ak-boton:hover { transform: translateY(-2px); }
.ak-boton--compacto { padding: 0.75rem 1.15rem; font-size: 0.9375rem; }

/* Principal: el oro está reservado a esta acción (04 §4) */
.ak-boton--principal {
  background-image: linear-gradient(120deg, #FFD873, var(--oro) 55%, #F2A93B);
  color: #1A1204;
  box-shadow: 0 12px 34px -14px rgba(255, 201, 74, 0.85);
}
.ak-boton--principal:hover { color: #1A1204; box-shadow: 0 16px 40px -14px rgba(255, 201, 74, 0.95); }

.ak-boton--secundario {
  background-color: rgba(255, 244, 220, 0.06);
  border-color: rgba(255, 244, 220, 0.32);
  color: var(--pergamino);
}
.ak-boton--secundario:hover {
  border-color: var(--oro);
  color: var(--oro);
  background-color: rgba(255, 201, 74, 0.08);
}

.ak-boton--fantasma {
  background: none;
  color: var(--cian);
  padding-inline: 0.5rem;
}
.ak-boton--fantasma:hover { color: var(--oro); }

.ak-boton__externo { font-size: 0.85em; opacity: 0.8; }

.ak-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: center;
  margin-block: 1.75rem 0;
}
.ak-acciones--centro { justify-content: center; }

.ak-pruebas {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto);
}
.ak-pruebas li { display: flex; align-items: center; gap: 0.6rem; }
.ak-pruebas li + li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 10px var(--oro);
  margin-right: 0.35rem;
}

/* --------------------------------------------------------------------------
   7. Cabecera
   -------------------------------------------------------------------------- */
.ak-cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background-color var(--transicion), border-color var(--transicion), backdrop-filter var(--transicion);
  border-bottom: 1px solid transparent;
}
.ak-cabecera.es-fijo {
  background-color: rgba(16, 11, 47, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 244, 220, 0.10);
}

.ak-cabecera__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0.75rem var(--canal);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.ak-marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
/*
 * Logotipo oficial en negativo (SVG de marca rasterizado y recortado al arte).
 * Ya no necesita `invert` ni `mix-blend-mode`: tiene transparencia real y se ve
 * igual sobre cualquier fondo. El tamaño manda sobre la altura del encabezado:
 * el logo es la firma de la marca, no un detalle.
 */
.ak-marca__logo {
  height: var(--alto-logo);
  width: auto;
}
.ak-pie__logo {
  width: clamp(9rem, 16vw, 12rem);
  height: auto;
}

.ak-nav { margin-inline-start: auto; }
.ak-nav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
.ak-nav__enlace {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  position: relative;
  padding-block: 0.4rem;
}
.ak-nav__enlace::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--oro), var(--brasa));
  transition: right var(--transicion);
}
.ak-nav__enlace:hover { color: var(--texto-fuerte); }
.ak-nav__enlace:hover::after,
.ak-nav__enlace.es-activo::after { right: 0; }
.ak-nav__enlace.es-activo { color: var(--oro); }
.ak-nav__enlace--externo { color: var(--texto-suave); }

/* --- Secciones con páginas hijas -------------------------------------------
   El desplegable es solo CSS: `:hover` para ratón y `:focus-within` para
   teclado. Sin JavaScript, así que funciona igual si el script falla o tarda,
   que es la misma regla que sigue el resto del sitio. */
.ak-nav__item--con-hijos { position: relative; }

.ak-nav__flecha {
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin-left: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  opacity: 0.6;
}

.ak-nav__sublista {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: 14rem;
  background: rgba(10, 7, 30, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid var(--filete, rgba(255, 244, 220, 0.16));
  border-radius: var(--radio-chico, 14px);
  box-shadow: 0 18px 40px rgba(7, 5, 26, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  z-index: 30;
}
/* Un puente invisible sobre el hueco entre el enlace y el panel: sin él, el
   menú se cierra al mover el ratón hacia abajo y no se puede llegar a él. */
.ak-nav__sublista::before {
  content: '';
  position: absolute;
  inset: -0.75rem 0 100% 0;
}
.ak-nav__item--con-hijos:hover .ak-nav__sublista,
.ak-nav__item--con-hijos:focus-within .ak-nav__sublista {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ak-nav__subenlace {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: calc(var(--radio-chico, 14px) - 6px);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.ak-nav__subenlace:hover,
.ak-nav__subenlace:focus-visible { background: rgba(255, 244, 220, 0.08); color: var(--texto-fuerte); }
.ak-nav__subenlace.es-activo { color: var(--oro); }
.ak-nav__separador {
  width: 1px;
  height: 1.25rem;
  background: rgba(255, 244, 220, 0.18);
}

.ak-cabecera__acciones { display: flex; align-items: center; gap: 0.75rem; flex: none; }

.ak-hamburguesa {
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 244, 220, 0.24);
  border-radius: var(--radio-chico);
  background: rgba(255, 244, 220, 0.05);
  cursor: pointer;
  position: relative;
}
/* Los iconos de marca sustituyeron a las tres líneas dibujadas en CSS: el de menú
   son tres trazos de pincel y el de cerrar una cruz de tinta. */
.ak-hamburguesa { display: none; place-items: center; color: var(--pergamino); }
.ak-hamburguesa__cerrar { display: none; }
.ak-hamburguesa[aria-expanded="true"] .ak-hamburguesa__abrir { display: none; }
.ak-hamburguesa[aria-expanded="true"] .ak-hamburguesa__cerrar { display: inline-block; }

@media (max-width: 1040px) {
  .ak-hamburguesa { display: grid; }
  .ak-nav {
    position: fixed;
    inset: var(--alto-cabecera) 0 auto;
    background: rgba(10, 7, 30, 0.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 244, 220, 0.12);
    padding: 1.25rem var(--canal) 2rem;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity var(--transicion), transform var(--transicion);
  }
  .ak-nav.es-abierto { opacity: 1; transform: none; pointer-events: auto; }
  .ak-nav__lista { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .ak-nav__enlace { display: block; padding: 0.85rem 0; font-size: 1.05rem; }
  .ak-nav__separador { width: 100%; height: 1px; margin-block: 0.5rem; }

  /* En móvil el menú ya está desplegado dentro de la hamburguesa: esconder las
     subsecciones tras un segundo toque sería añadir un paso para nada. Se
     muestran indentadas y la flecha sobra. */
  .ak-nav__flecha { display: none; }
  .ak-nav__sublista {
    position: static;
    translate: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 0.5rem 0.9rem;
    margin-block: -0.35rem 0.35rem;
    background: none;
    backdrop-filter: none;
    border: 0;
    border-left: 1px solid rgba(255, 244, 220, 0.14);
    border-radius: 0;
    box-shadow: none;
  }
  .ak-nav__sublista::before { content: none; }
  .ak-nav__subenlace { padding: 0.5rem 0; white-space: normal; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.ak-hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid;
  /*
   * El cuadro va **por encima del centro**, no centrado.
   *
   * Historia de tres pasos: estaba pegado al fondo y se leía «muy abajo»; se centró; y
   * Arcano pidió «subir un poco más el cuadro». Centrado no alcanza, así que el hueco
   * libre se reparte 1:3 en vez de 1:1.
   *
   * Se hace con tracks `fr` y no con relleno asimétrico por dos razones medidas:
   *
   *  1. **El hueco es chico.** El cuadro mide 520 px en un hero de 900, así que solo
   *     sobran 141 px de recorrido: ±70 desde el centro. Un relleno en `rem` que
   *     pidiera más que eso estiraría el hero por encima de la ventana y cortaría la
   *     cinta de abajo.
   *  2. **`fr` se colapsa solo.** Cuando no sobra espacio —móvil, donde el cuadro llena
   *     la caja de contenido— los tracks valen 0 y el cuadro se queda donde está. Un
   *     margen fijo, en cambio, lo empujaría bajo la cabecera, que mide 105 px y es
   *     `fixed`.
   *
   * A 1440×900 esto lo sube 35 px y deja 74 px de aire bajo la cabecera.
   */
  grid-template-rows: 1fr auto 3fr;
  padding-block: 9rem clamp(3rem, 7vw, 6rem);
  isolation: isolate;
}
.ak-hero__medio { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ak-hero__medio picture { display: block; }
.ak-hero__imagen,
.ak-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}

/* El video se cruza sobre la fotografía cuando arranca; si el navegador rechaza
   la reproducción automática, se queda la foto y no se nota. */
.ak-hero__video { opacity: 0; transition: opacity 900ms ease; }
.ak-hero__video.es-visible { opacity: 1; }

/* Veladura azul–violeta que protege la lectura sin apagar la imagen (07 §4) */
.ak-hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--tinta) 4%, rgba(7, 5, 26, 0.75) 32%, rgba(16, 11, 47, 0.30) 62%, rgba(7, 5, 26, 0.45) 100%),
    linear-gradient(100deg, rgba(36, 84, 255, 0.35) 0%, transparent 55%),
    radial-gradient(45rem 30rem at 78% 78%, rgba(255, 201, 74, 0.18), transparent 70%);
}

/* Explícito: el contenido va en el track del medio. Es el único hijo en flujo del
   hero —`.ak-hero__medio` es absoluto—, así que sin esto la colocación automática lo
   metería en el primer track y el reparto 1:3 no haría nada. */
.ak-hero__contenido { position: relative; grid-row: 2; }
/*
 * El cuadro del titular, centrado y no pegado al borde inferior.
 *
 * Estaba alineado a la izquierda del contenedor y al fondo del hero: con `max-width` y sin
 * márgenes automáticos quedaba 120 px a la izquierda del centro en una pantalla de 1520, y
 * `align-items: end` lo dejaba abajo. Arcano pidió centrarlo en los dos ejes.
 *
 * ── LO QUE ESTO CAMBIA DEL DISEÑO ──
 *
 * El doc 07 §4 encuadra el video «con el grupo a la derecha del cuadro; el tercio izquierdo
 * queda bajo el texto». Centrado, el cuadro ya no ocupa el tercio izquierdo sino el centro,
 * así que **pasa por encima del grupo**. Si el video se vuelve a encuadrar, ese es el
 * motivo.
 */
.ak-hero__bloque {
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.ak-hero__texto {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  max-width: 46ch;
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   9. Franja de beneficios
   -------------------------------------------------------------------------- */
.ak-cinta {
  position: relative;
  /* Atraviesa el cierre del hero, no se apila debajo (07 §5) */
  margin-top: clamp(-4.5rem, -6vw, -2.5rem);
  z-index: 2;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background-image:
    linear-gradient(rgba(7, 5, 26, 0.42), rgba(7, 5, 26, 0.42)),
    linear-gradient(100deg, var(--violeta) 0%, var(--magenta) 46%, var(--brasa) 100%);
  border-block: 1px solid rgba(255, 244, 220, 0.16);
}
.ak-cinta__lista {
  list-style: none;
  /*
   * `0 auto`, no `0`. La franja lleva también la clase `.ak-contenedor`, que centra con
   * `margin-inline: auto`, pero esta regla va después en la hoja y con la misma
   * especificidad: su `margin: 0` ganaba y borraba el centrado. La franja quedaba pegada
   * al borde izquierdo con 321 px de aire a la derecha, que es lo que se veía.
   */
  margin: 0 auto;
  padding-inline: var(--canal);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Centrado, como el resto de la portada. Estaba a la izquierda con
   `justify-items: start` y desentonaba con los encabezados de sección. */
.ak-cinta__item { display: grid; gap: 0.6rem; justify-items: center; text-align: center; }
.ak-cinta__titulo {
  font-family: var(--tipo);
  font-size: 1.125rem;
  font-weight: 800;
  margin: 0.35rem 0 0;
  color: var(--texto-fuerte);
}
.ak-cinta__item p { margin: 0; color: rgba(255, 244, 220, 0.86); }

/* --------------------------------------------------------------------------
   10. Definición
   -------------------------------------------------------------------------- */
.ak-definicion__rejilla {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ak-definicion__escena {
  --escena-a: rgba(118, 56, 242, 0.6);
  --escena-b: rgba(179, 57, 255, 0.3);
  aspect-ratio: 5 / 6;
  border-radius: var(--radio-grande);
}

/* --------------------------------------------------------------------------
   11. Aventuras
   -------------------------------------------------------------------------- */
.ak-aventuras__lista { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.ak-aventura {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.ak-aventura:nth-child(even) .ak-aventura__escena { order: 2; }
.ak-aventura__escena { border-radius: var(--radio-grande); }
.ak-aventura__titulo {
  font-family: var(--tipo-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  color: var(--acento, var(--pergamino));
}
.ak-aventura__texto p { max-width: 52ch; }

.ak-aventura--amigos   { --acento: #D8A6FF; --escena-a: rgba(118, 56, 242, 0.75); --escena-b: rgba(179, 57, 255, 0.45); }
.ak-aventura--familias { --acento: #7CE7E9; --escena-a: rgba(34, 215, 220, 0.55);  --escena-b: rgba(54, 214, 148, 0.4); }
.ak-aventura--parejas  { --acento: #FFC08A; --escena-a: rgba(255, 101, 93, 0.6);   --escena-b: rgba(255, 201, 74, 0.35); }

/* --------------------------------------------------------------------------
   12. Primera visita
   -------------------------------------------------------------------------- */
.ak-pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  position: relative;
}
/* La «ruta» que une los tres pasos: una línea de luz, no una infografía */
.ak-pasos__lista::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 201, 74, 0.5), rgba(34, 215, 220, 0.5), transparent);
}
.ak-paso { position: relative; padding-top: 0.5rem; }
.ak-paso__numero {
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  font-family: var(--tipo-display);
  font-size: 1.35rem;
  color: var(--oro);
  background: var(--tinta);
  border: 1px solid rgba(255, 201, 74, 0.45);
  box-shadow: 0 0 26px -8px rgba(255, 201, 74, 0.8);
  margin-bottom: 1.1rem;
}
.ak-paso__titulo { font-size: 1.125rem; font-weight: 800; }
.ak-paso p { color: var(--texto); max-width: 40ch; }

/* --------------------------------------------------------------------------
   13. Ludoteca
   -------------------------------------------------------------------------- */
.ak-ludoteca {
  background-image:
    radial-gradient(60rem 40rem at 85% 10%, rgba(36, 84, 255, 0.30), transparent 65%),
    linear-gradient(180deg, rgba(7, 5, 26, 0) 0%, rgba(19, 13, 51, 0.85) 45%, rgba(7, 5, 26, 0) 100%);
}
.ak-juegos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ak-juego { overflow: hidden; display: flex; flex-direction: column; }
.ak-juego__imagen {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(80% 70% at 30% 20%, rgba(255, 244, 220, 0.12), transparent 70%),
    linear-gradient(160deg, rgba(36, 84, 255, 0.5), rgba(118, 56, 242, 0.35));
  border-bottom: 1px solid var(--filete);
  display: grid;
  place-items: center;
  position: relative;
}
.ak-juego__imagen::before {
  content: attr(data-monograma);
  font-family: var(--tipo-display);
  font-size: 2.6rem;
  color: rgba(255, 244, 220, 0.35);
}
.ak-revision .ak-juego__imagen::after {
  content: 'imagen pendiente';
  position: absolute;
  bottom: 0.6rem;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 244, 220, 0.4);
}
.ak-juego__cuerpo { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.ak-juego__nombre { font-size: 1.125rem; font-weight: 800; margin: 0; }
.ak-juego__frase { margin: 0; font-size: 0.9375rem; color: var(--texto); }
.ak-juego__datos {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cian);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
}
.ak-juego__dato { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.ak-juego__etiquetas { margin: 0; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.ak-juego__enlace {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--oro);
  text-decoration: none;
}
.ak-juego__enlace:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Comida
   -------------------------------------------------------------------------- */
.ak-comida {
  background-image: radial-gradient(50rem 34rem at 18% 40%, rgba(255, 101, 93, 0.22), transparent 68%);
}
.ak-comida__rejilla {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ak-comida__escena {
  --escena-a: rgba(255, 101, 93, 0.6);
  --escena-b: rgba(255, 201, 74, 0.4);
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-grande);
}

/* Categorías del menú */
.ak-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ak-categoria { overflow: hidden; display: flex; flex-direction: column; }
.ak-categoria__foto {
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--filete);
  --escena-a: rgba(255, 101, 93, 0.5);
  --escena-b: rgba(255, 201, 74, 0.3);
}
.ak-categoria__cuerpo { padding: 1.15rem 1.35rem 1.5rem; }
.ak-categoria__nombre { font-size: 1.125rem; font-weight: 800; margin-bottom: 0.35rem; }
.ak-categoria__cuerpo p { margin: 0; font-size: 0.9375rem; color: var(--texto); }

/*
 * Grupos del menú: una categoría por grupo, con sus platillos dentro.
 *
 * La categoría dejó de ser una tarjeta y pasó a ser el encabezado de su grupo (decisión
 * de Arcano, 23-ago-2026). El aire entre grupos es lo único que los separa, así que es
 * generoso a propósito: con menos, diecinueve tarjetas se leen como una sola rejilla y
 * la categoría se pierde.
 */
.ak-menu-grupo + .ak-menu-grupo { margin-top: clamp(2.5rem, 5vw, 4rem); }

/*
 * La rejilla de platillos **no** estira las tarjetas para llenar la fila.
 *
 * `.ak-categorias` usa `auto-fit` con `minmax(15rem, 1fr)`, que estaba bien cuando había
 * una sola rejilla de siete. Con grupos de tamaño distinto se rompe: medido a 1440 px,
 * las tarjetas salían de 349, 538, 255 y 1104 px según cuántas tuviera su grupo, y
 * Costillas y Ensaladas —con una sola cada una— ocupaban el ancho completo. Esto no lo
 * veía ninguna prueba de HTML: hubo que abrir la página.
 *
 * `auto-fill` y no `auto-fit` es la pieza clave: `auto-fit` colapsa los tracks vacíos, y
 * con eso la única tarjeta de un grupo se estira otra vez.
 */
.ak-menu-grupo .ak-categorias {
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

/*
 * El tope de ancho, solo cuando caben dos columnas.
 *
 * Sin el `@media`, en móvil la tarjeta se quedaba 15 px corta del contenedor (320 de
 * 335) y dejaba un borde irregular a la derecha. Ahí abajo hay una sola columna y lo
 * correcto es que llene; el tope existe para que una tarjeta suelta no se estire en
 * pantalla ancha, que es un problema que solo aparece con sitio de sobra.
 */
@media (min-width: 40rem) {
  .ak-menu-grupo .ak-platillo { max-width: 20rem; }
}

/*
 * El precio dentro de la tarjeta con foto.
 *
 * El selector va con `.ak-categoria__cuerpo` delante a propósito: `.ak-categoria__cuerpo
 * p` ya fija `color: var(--texto)` y con una sola clase esta regla perdía por
 * especificidad. Se vio abriendo la página —el precio salía en color de texto, no en
 * oro—, no en ninguna prueba de HTML.
 */
.ak-categoria__cuerpo .ak-platillo__precio {
  margin: 0.55rem 0 0;
  font-weight: 800;
  color: var(--oro);
}

/*
 * Índice de categorías, al principio de la carta.
 *
 * La carta completa mide **13.000 px de alto** medidos a 1440×900: son 77 platillos en
 * doce grupos, y sin un índice llegar a «Café y té» es rodar doce pantallas. No es
 * decoración, es la única navegación que tiene la página.
 */
.ak-menu-indice {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
}
.ak-menu-indice a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--filete);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}
.ak-menu-indice a:hover,
.ak-menu-indice a:focus-visible { border-color: var(--oro); color: var(--oro); }

/* Que el ancla no deje el título debajo de la cabecera fija, que mide 105 px. */
.ak-menu-grupo { scroll-margin-top: 7.5rem; }

/*
 * La carta: los platillos que no tienen fotografía, en renglones.
 *
 * Son 58 de 77. Con tarjeta y hueco vacío se leerían como fotos que faltan; en renglón
 * se leen como lo que son, una carta. El punteado entre nombre y precio es el recurso
 * clásico de una carta impresa y aquí hace falta de verdad: sin él, con precios de dos y
 * de tres cifras, la vista no sabe qué precio va con qué platillo.
 */
.ak-carta { margin: 0; display: grid; gap: 0.15rem; }
.ak-carta__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted var(--filete);
}
.ak-carta__fila:last-child { border-bottom: 0; }
.ak-carta__nombre { font-weight: 700; }
/* En bloque y no en línea: la descripción es una segunda línea, no una aclaración
   pegada al nombre. */
.ak-carta__detalle {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--texto);
  margin-top: 0.15rem;
  max-width: 58ch;
}
.ak-carta__precio {
  margin: 0;
  font-weight: 800;
  white-space: nowrap;
  color: var(--oro);
}
.ak-carta__sin { font-weight: 400; font-size: 0.875rem; color: var(--texto); }
.ak-menu-grupo__encabezado { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.ak-menu-grupo__titulo {
  font-family: var(--tipo-display);
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 800;
  margin-bottom: 0.3rem;
}
.ak-menu-grupo__texto {
  margin: 0;
  max-width: 62ch;
  color: var(--texto);
  font-size: 0.9375rem;
}

/*
 * La foto del platillo va en 4/5 vertical, no en el 3/2 apaisado de la tarjeta de
 * categoría.
 *
 * ── POR QUÉ, CON NÚMEROS ──
 *
 * Las 27 fotos de alimentos de Arcano van de proporción 0.56 a 1.00, con **mediana
 * 0.89**: son cuadradas o verticales, ni una apaisada. Con `object-fit: cover`, el
 * recorte medio de cada foto sale así:
 *
 *   4/3 → pierde 35.3 % de media, 57.8 % la peor
 *   1/1 → pierde 13.7 %, 43.8 % la peor
 *   4/5 → pierde 14.8 %, 29.7 % la peor   ← esta
 *   3/4 → pierde 18.2 %, 25.0 % la peor
 *
 * 4/5 empata en media con la cuadrada y mejora mucho el peor caso. Con 3/2 se estaba
 * tirando un tercio de cada plato, que es lo que Arcano vio.
 *
 * Cuesta alto: la tarjeta pasa de 170 a 319 px de foto. Se acepta: en una carta, la foto
 * del plato es el contenido.
 */
.ak-platillo .ak-categoria__foto { aspect-ratio: 4 / 5; }

/* La tarjeta de platillo es un enlace entero. Sin esto hereda el subrayado y el color de
   enlace, y diecinueve tarjetas azules subrayadas no se leen como tarjetas. */
a.ak-platillo { text-decoration: none; color: inherit; }
a.ak-platillo:hover .ak-categoria__nombre,
a.ak-platillo:focus-visible .ak-categoria__nombre { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. Eventos
   -------------------------------------------------------------------------- */
.ak-eventos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ak-evento { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ak-evento::before {
  content: '';
  position: absolute;
  left: 1.6rem;
  top: 0;
  width: 3.5rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cian), var(--violeta));
}
/*
 * Imagen del evento. Se sangra hasta el borde de la tarjeta con márgenes
 * negativos: dentro del acolchado quedaba como una estampita pegada, no como la
 * cabecera de la tarjeta.
 *
 * `aspect-ratio` propio en vez del 4/3 general de `[data-hueco]`: en una tarjeta
 * alta, una imagen 4/3 se come la mitad y empuja el texto fuera de vista.
 */
.ak-evento__imagen {
  aspect-ratio: 16 / 9;
  margin: -1.5rem -1.6rem 0.9rem;   /* el acolchado de .ak-evento, en negativo */
  border-radius: var(--radio) var(--radio) 0 0;
}
/* La rayita de acento del borde superior sobra cuando hay imagen: quedaría
   pintada encima de ella. Con imagen, la imagen es el remate de la tarjeta. */
.ak-evento:has(.ak-evento__imagen)::before { content: none; }

.ak-evento__fecha {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cian);
}
.ak-evento__nombre { margin: 0.2rem 0; font-size: 1.1875rem; font-weight: 800; }

/*
 * Eventos que ya pasaron, cuando la agenda está vacía.
 *
 * Tienen que **leerse como pasados sin parecer un error**. La fecha deja el cian de lo
 * vigente y pasa a color apagado, y lleva al lado un «ya ocurrió» escrito, que es lo único
 * que funciona igual para quien no distingue colores. La foto baja de saturación: dice
 * «archivo» sin necesidad de explicarlo.
 *
 * Lo que NO se hace es bajarles la opacidad entera: eso las deja ilegibles y parece que la
 * página se está cargando.
 */
.ak-eventos__pasados { margin-top: clamp(2rem, 4vw, 3rem); }
.ak-eventos__pasados-titulo {
  font-family: var(--tipo-display);
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
  color: var(--texto-fuerte);
}
.ak-evento--pasado .ak-evento__fecha { color: var(--texto-suave); }
.ak-evento--pasado .ak-evento__ya {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}
.ak-evento--pasado .ak-evento__ya::before { content: '· '; }
.ak-evento--pasado .ak-hueco__foto { filter: saturate(0.55); }
.ak-evento--pasado .ak-evento__costo { color: var(--texto-suave); }
.ak-evento__tipo { margin: 0; font-size: 0.875rem; color: var(--texto-suave); }
.ak-evento__costo { margin: 0.15rem 0 0; font-size: 0.9375rem; font-weight: 700; color: var(--oro); }
.ak-evento__enlace {
  margin-top: auto;
  padding-top: 0.9rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--pergamino);
  text-decoration: none;
}
.ak-evento__enlace::after { content: ' →'; }
.ak-evento__enlace:hover { color: var(--oro); }

/* Estados vacíos honestos: nunca tarjetas huecas ni datos inventados */
.ak-vacio {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 62ch;
  text-align: center;
  margin-inline: auto;
}
.ak-vacio h3 { font-size: 1.25rem; font-weight: 800; }
.ak-vacio p { margin: 0; color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   16. Comunidad
   -------------------------------------------------------------------------- */
.ak-comunidad__par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Tres accesos de Comunidad (14 §5). Mesas de juego se distingue con esmeralda
   porque no es un programa de Arcano, es contenido de la comunidad. */
.ak-programas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.ak-programa--mesas {
  background-image: radial-gradient(24rem 16rem at 88% 8%, rgba(54, 214, 148, 0.16), transparent 70%);
  border-color: rgba(54, 214, 148, 0.30);
}
.ak-programa--mesas .ak-programa__titulo { color: var(--esmeralda); }

/* Placa de precio de la Cofradía */
.ak-precio {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  align-self: start;
  background-image: radial-gradient(20rem 14rem at 50% 0%, rgba(255, 201, 74, 0.16), transparent 70%);
  border-color: rgba(255, 201, 74, 0.32);
}
.ak-precio__etiqueta {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.35rem;
}
.ak-precio__monto {
  font-family: var(--tipo-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--oro);
  margin: 0 0 0.75rem;
}
.ak-precio .ak-nota { margin: 0; }

.ak-criterios--dos {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem 2rem;
}
.ak-programa { padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 0.75rem; justify-items: start; }
.ak-programa__titulo {
  font-family: var(--tipo-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  margin: 0.4rem 0 0;
}
.ak-programa--cofradia {
  background-image: radial-gradient(24rem 16rem at 88% 8%, rgba(255, 201, 74, 0.16), transparent 70%);
  border-color: rgba(255, 201, 74, 0.32);
}
.ak-programa--cofradia .ak-programa__titulo { color: var(--oro); }
.ak-programa--dm {
  background-image: radial-gradient(24rem 16rem at 88% 8%, rgba(34, 215, 220, 0.16), transparent 70%);
  border-color: rgba(34, 215, 220, 0.28);
}
.ak-programa--dm .ak-programa__titulo { color: var(--cian); }

/* --------------------------------------------------------------------------
   17. Reseñas
   -------------------------------------------------------------------------- */
.ak-resenas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ak-resena { margin: 0; padding: clamp(1.5rem, 3vw, 2rem); }
.ak-resena blockquote { margin: 0 0 1rem; font-size: 1.0625rem; }
.ak-resena blockquote p::before { content: '«'; color: var(--oro); }
.ak-resena blockquote p::after { content: '»'; color: var(--oro); }
.ak-resena figcaption { display: grid; gap: 0.15rem; font-size: 0.875rem; }
.ak-resena__autor { font-weight: 800; color: var(--texto-fuerte); }
.ak-resena__fuente { color: var(--texto-suave); }

/* --------------------------------------------------------------------------
   18. Visítanos y mapa
   -------------------------------------------------------------------------- */
.ak-visitanos__rejilla {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.ak-visitanos__datos { padding: clamp(1.75rem, 4vw, 2.75rem); }
.ak-visitanos__bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem 2rem;
  margin-block: 1.5rem;
}
.ak-visitanos__subtitulo {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.5rem;
}

.ak-nap { font-style: normal; display: grid; gap: 0.15rem; }
.ak-nap__linea { display: block; }
.ak-nap__telefono { font-weight: 800; color: var(--oro); text-decoration: none; }

.ak-horarios,
.ak-pie__horarios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9375rem;
}
.ak-horarios li,
.ak-pie__horarios li { display: flex; justify-content: space-between; gap: 1rem; }
.ak-horarios li span:first-child,
.ak-pie__horarios li span:first-child { color: var(--texto-suave); }
.ak-horarios .es-cerrado,
.ak-pie__horarios .es-cerrado { opacity: 0.6; }

.ak-mapa {
  min-height: 22rem;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(34, 215, 220, 0.16), transparent 70%),
    linear-gradient(160deg, rgba(16, 11, 47, 0.95), rgba(36, 84, 255, 0.25));
  display: grid;
  place-items: center;
}
.ak-mapa__previo { text-align: center; padding: 2rem; display: grid; gap: 1rem; justify-items: center; }
.ak-mapa__titulo { margin: 0; font-weight: 800; color: var(--texto-fuerte); }
.ak-mapa__nota { margin: 0; font-size: 0.8125rem; color: var(--texto-suave); max-width: 26ch; }
.ak-mapa iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; display: block; }
.ak-mapa.es-cargado { background: none; }
.ak-mapa.es-cargado::after { display: none; }

/* --------------------------------------------------------------------------
   19. Preguntas frecuentes
   -------------------------------------------------------------------------- */
.ak-faq__interior { max-width: 52rem; }
.ak-faq__lista { display: grid; gap: 0.75rem; }
.ak-faq__item {
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: rgba(16, 11, 47, 0.5);
  overflow: hidden;
}
.ak-faq__item summary {
  cursor: pointer;
  padding: 1.15rem 3.25rem 1.15rem 1.4rem;
  position: relative;
  list-style: none;
}
.ak-faq__item summary::-webkit-details-marker { display: none; }
.ak-faq__item summary h3 {
  display: inline;
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0;
}
/* Flecha del acordeón: el icono de marca en vez del triángulo dibujado en CSS. */
.ak-faq__flecha {
  position: absolute;
  right: 1.35rem;
  top: 50%;
  margin-top: -0.6em;
  color: var(--oro);
  transition: transform var(--transicion);
}
.ak-faq__item[open] .ak-faq__flecha { transform: rotate(180deg); }
.ak-faq__item[open] summary { color: var(--oro); }
.ak-faq__respuesta { padding: 0 1.4rem 1.35rem; }
.ak-faq__respuesta p { margin: 0; color: var(--texto); max-width: 62ch; }

/* --------------------------------------------------------------------------
   20. Cierre
   -------------------------------------------------------------------------- */
.ak-cierre {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  background-image:
    radial-gradient(46rem 26rem at 50% 100%, rgba(255, 201, 74, 0.22), transparent 70%),
    radial-gradient(40rem 24rem at 20% 0%, rgba(118, 56, 242, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(7, 5, 26, 0.2), rgba(7, 5, 26, 0.85));
  overflow: hidden;
}
.ak-cierre__interior {
  position: relative;
  text-align: center;
  max-width: 46rem;
  padding: clamp(2rem, 5vw, 3.5rem);
}
.ak-cierre__interior .ak-antetitulo { color: var(--oro); }

/*
 * Placa de acción (05 §7).
 * Conserva la teatralidad de `Boton-Reserva.png` —cielo encantado y remate
 * ilustrado— pero el texto y el botón son HTML accesible: el CTA principal no
 * depende de una imagen raster con texto dentro. Las «manos grabadas» del
 * recurso original son los dos huecos de la base, pendientes del maestro.
 */
.ak-placa { overflow: hidden; }
.ak-placa::before {
  content: '';
  position: absolute;
  inset: auto -10% -35% -10%;
  height: 60%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 201, 74, 0.35), transparent 70%);
}
.ak-placa > * { position: relative; z-index: 1; }
/* Las manos grabadas de la placa **ya existen** (entrega del 10-ago), así que el remate
   se muestra siempre. Estuvo oculto fuera de modo revisión mientras eran medallones de
   relleno: dos halos colgando del borde no aportaban nada a quien visita el sitio. */
.ak-placa__manos {
  position: absolute;
  inset: auto 0 -1.25rem;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding-inline: clamp(1rem, 6vw, 4rem);
  pointer-events: none;
}
.ak-placa__manos .ak-medallon,
.ak-placa__manos .ak-grabado { width: clamp(3rem, 6vw, 4.5rem); }
.ak-cierre__texto { max-width: 46ch; margin-inline: auto; }
.ak-cierre__apoyo { font-size: 0.875rem; color: var(--texto-suave); margin: 1rem 0 0; }

/* --------------------------------------------------------------------------
   20b. Páginas internas
   Densidad ornamental Nivel 1 (05 §10): estas páginas informan, no deslumbran.
   -------------------------------------------------------------------------- */
/*
 * Hero de las páginas internas.
 *
 * Los dos degradados van en **porcentaje del alto, no en `rem` fijos**. Medían 26 y 20
 * rem —416 y 320 px— y eso funciona mientras el hero mida algo parecido. En una página de
 * texto largo no: en `/eventos/eventos-corporativos-en-queretaro/` el hero mide 758 px a
 * 375 px de ancho y 842 a 320, así que los últimos 340 px quedaban apagados y el texto
 * seguía más allá de donde se veía el fondo. Arcano lo reportó como «el texto sobrepasa el
 * fondo y cae en la siguiente sección».
 *
 * Con `100%` de alto el degradado acompaña al hero midiendo lo que mida, y el ancho se
 * queda en `rem` porque ahí sí interesa que no se estire en pantallas anchas.
 */
.ak-interno-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(7.5rem, 13vw, 10rem) clamp(2rem, 4vw, 3rem);
  background-image:
    radial-gradient(40rem 100% at 8% 0%, rgba(118, 56, 242, 0.35), transparent 68%),
    radial-gradient(32rem 85% at 88% 10%, rgba(34, 215, 220, 0.14), transparent 66%);
}
.ak-interno-hero .ak-titular { max-width: 34ch; }

.ak-seccion--compacta { padding-block: clamp(2.5rem, 5vw, 4rem); }

.ak-migas { margin-bottom: 1.5rem; }
.ak-migas ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}
.ak-migas a { color: var(--texto-suave); text-decoration: none; }
.ak-migas a:hover { color: var(--oro); text-decoration: underline; }
.ak-migas li:not(:last-child)::after {
  content: '/';
  margin-left: 0.6rem;
  color: rgba(255, 244, 220, 0.3);
}

.ak-subtitulo { font-size: 1.125rem; font-weight: 800; margin-bottom: 0.5rem; }

.ak-columnas-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/*
 * Aviso de dato no confirmado. Existe porque el proyecto prefiere decir «esto no
 * lo sabemos todavía, pregúntanos» antes que publicar una respuesta plausible
 * (10-contenido-visitanos.md §1). Acento cian: informa, no alarma.
 */
.ak-aviso {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-color: rgba(34, 215, 220, 0.30);
  background-image: radial-gradient(24rem 16rem at 92% 6%, rgba(34, 215, 220, 0.12), transparent 70%);
}
.ak-aviso p:last-child { margin-bottom: 0; }
.ak-aviso--ancho { max-width: 62rem; margin-inline: auto; }

.ak-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 1.5rem;
}
.ak-galeria__pieza { border-radius: var(--radio); }

.ak-indice {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ak-indice a {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  border: 1px solid var(--filete);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  transition: border-color var(--transicion), color var(--transicion), background-color var(--transicion);
}
.ak-indice a:hover {
  color: var(--oro);
  border-color: var(--oro);
  background-color: rgba(255, 201, 74, 0.08);
}

/* Pruebas sueltas bajo el encabezado de una página interna */
.ak-pruebas--suelto { margin-block: 0 clamp(1rem, 2vw, 2rem); }

/* Tonos y dinámicas de las páginas de experiencia */
.ak-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ak-opcion {
  padding: clamp(1.35rem, 3vw, 2rem);
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  align-content: start;
}
/*
 * Secuencia diagonal en escritorio: no una matriz uniforme (08 §12).
 * Se fija en dos columnas para que la alternancia se lea como diagonal —con tres
 * columnas el desplazamiento parece arbitrario— y el contenedor compensa con
 * margen inferior el empuje del `translateY`, que no ocupa espacio de layout.
 */
@media (min-width: 60rem) {
  .ak-opciones {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 3.5rem;
  }
  .ak-opciones > :nth-child(even) { transform: translateY(2rem); }
}
.ak-opcion__titulo { font-size: 1.1875rem; font-weight: 800; margin: 0.35rem 0 0; }
.ak-opcion p { margin: 0; font-size: 0.9375rem; }
.ak-opcion__filtro {
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento-opcion, var(--cian));
}
.ak-opcion__enlace { font-size: 0.875rem; font-weight: 700; color: var(--oro); text-decoration: none; }
.ak-opcion__enlace::after { content: ' →'; }
.ak-opcion__enlace:hover { text-decoration: underline; }
.ak-opcion--violeta   { --acento-opcion: #C9A6FF; border-color: rgba(118, 56, 242, 0.4); }
.ak-opcion--magenta   { --acento-opcion: #E4A6FF; border-color: rgba(179, 57, 255, 0.4); }
.ak-opcion--cian      { --acento-opcion: var(--cian); border-color: rgba(34, 215, 220, 0.35); }
.ak-opcion--esmeralda { --acento-opcion: var(--esmeralda); border-color: rgba(54, 214, 148, 0.35); }
.ak-opcion--oro       { --acento-opcion: var(--oro); border-color: rgba(255, 201, 74, 0.35); }
.ak-opcion--brasa     { --acento-opcion: #FF9A94; border-color: rgba(255, 101, 93, 0.4); }

/* Listas de criterios y ocasiones: viñeta de luz, sin icono inventado */
.ak-criterios { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; }
.ak-criterios li { position: relative; padding-left: 1.5rem; }
.ak-criterios li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 0 12px var(--oro);
}

/* Qué aporta una partida */
.ak-aportes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ak-aporte { display: grid; gap: 0.4rem; justify-items: start; }
.ak-aporte__titulo { font-size: 1.125rem; font-weight: 800; margin: 0.35rem 0 0; }
.ak-aporte p { margin: 0; font-size: 0.9375rem; color: var(--texto); }

/* Rutas adicionales de la portada de Experiencias */
.ak-rutas-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ak-ruta-extra { padding: clamp(1.35rem, 3vw, 1.85rem); }
.ak-ruta-extra p { font-size: 0.9375rem; }

.ak-vacio--ancho { max-width: 52rem; }

/* Filete editorial que separa cada grupo de preguntas (11 §3) */
.ak-faq__grupo { position: relative; padding-top: 1.35rem; margin-bottom: 1.5rem; }
.ak-faq__grupo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--oro), transparent);
}

/* --------------------------------------------------------------------------
   21. Página pendiente / 404
   -------------------------------------------------------------------------- */
.ak-pendiente { padding-top: clamp(8rem, 16vw, 12rem); }
.ak-pendiente__interior { padding: clamp(2rem, 5vw, 3.5rem); max-width: 46rem; }

/* --------------------------------------------------------------------------
   22. Pie
   -------------------------------------------------------------------------- */
.ak-pie {
  border-top: 1px solid rgba(255, 244, 220, 0.12);
  background: rgba(7, 5, 26, 0.75);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.ak-pie__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 var(--canal) clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.ak-pie__logo { width: 64px; margin-bottom: 1rem; }
.ak-pie__nombre { font-family: var(--tipo-display); font-size: 1.15rem; margin: 0 0 0.25rem; color: var(--texto-fuerte); }
.ak-pie__definicion { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); }
.ak-pie .ak-nap { margin-block: 1.25rem; font-size: 0.9375rem; }
.ak-pie__navegacion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem 1.5rem;
}
.ak-pie__titulo {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 0.9rem;
}
.ak-pie__navegacion ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
/* La flecha de salida externa, junto al nombre del canal y no separada por el hueco de
   la lista: es parte del enlace, no otro elemento. */
.ak-pie__externo { font-size: 0.8em; opacity: 0.75; margin-left: 0.3em; }

/*
 * Canales oficiales en la página de Comunidad.
 *
 * Fichas y no una lista de enlaces: son cinco destinos equivalentes y en fila se eligen
 * de un vistazo. Sin logo de marca —el juego de iconos del sitio no los tiene—, así que
 * lo que distingue cada ficha es el nombre, y por eso va con peso.
 */
.ak-canales {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.5vw, 0.9rem);
}
.ak-canal {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  color: inherit;
}
.ak-canal__nombre { font-weight: 700; }
.ak-canal__externo { font-size: 0.85em; opacity: 0.7; }
.ak-canal:hover .ak-canal__nombre,
.ak-canal:focus-visible .ak-canal__nombre { text-decoration: underline; }
.ak-pie__navegacion a {
  font-size: 0.9375rem;
  color: var(--texto);
  text-decoration: none;
}
.ak-pie__navegacion a:hover { color: var(--oro); text-decoration: underline; }
/*
 * Boletín del pie.
 *
 * Cruza las dos columnas del pie y se separa con una regla: es una acción, no otra
 * columna de enlaces, y ponerlo al mismo nivel visual que la navegación lo escondería
 * entre listas.
 */
.ak-pie__boletin {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 244, 220, 0.1);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: 0.6rem;
  max-width: 34rem;
}
.ak-pie__boletin-texto { font-size: 0.9375rem; color: var(--texto); margin: 0; max-width: 46ch; }
.ak-pie__boletin-etiqueta {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro);
}
/* En una fila mientras quepa; el `wrap` evita que el botón empuje al campo a 3 rem. */
.ak-pie__boletin-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ak-pie__boletin-fila input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--texto-fuerte);
  background: rgba(255, 244, 220, 0.06);
  border: 1px solid rgba(255, 244, 220, 0.22);
  border-radius: 4px;
}
.ak-pie__boletin-fila input::placeholder { color: rgba(255, 244, 220, 0.4); }
.ak-pie__boletin-fila input:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 1px;
  background: rgba(255, 244, 220, 0.1);
}
.ak-pie__boletin-fila button {
  flex: 0 0 auto;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--violeta);
  border: 1px solid var(--violeta);
  border-radius: 4px;
  cursor: pointer;
}
.ak-pie__boletin-fila button:hover { background: #8a52ff; }
.ak-pie__boletin-fila button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.ak-pie__boletin-nota { font-size: 0.8125rem; color: var(--texto-suave); }
.ak-pie__boletin-nota a { color: var(--texto-suave); text-decoration: underline; }
.ak-pie__boletin-nota a:hover { color: var(--oro); }
/* El resultado del envío. Hereda el color del estado, no un rojo suelto. */
.ak-pie__boletin-aviso {
  margin: 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.9375rem;
  color: var(--texto-fuerte);
  border: 1px solid rgba(54, 214, 148, 0.45);
  background: rgba(54, 214, 148, 0.1);
  border-radius: 4px;
}
.ak-pie__boletin-aviso--error {
  border-color: rgba(255, 101, 93, 0.5);
  background: rgba(255, 101, 93, 0.1);
}

.ak-pie__legal {
  border-top: 1px solid rgba(255, 244, 220, 0.1);
  padding: 1.25rem var(--canal);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  max-width: var(--ancho);
  margin-inline: auto;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}
.ak-pie__legal p { margin: 0; }

/* --------------------------------------------------------------------------
   23. Adaptación a pantallas chicas
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ak-definicion__rejilla,
  .ak-comida__rejilla,
  .ak-visitanos__rejilla,
  .ak-columnas-dos,
  .ak-aventura { grid-template-columns: 1fr; }

  .ak-aventura:nth-child(even) .ak-aventura__escena { order: 0; }
  .ak-definicion__escena { aspect-ratio: 4 / 3; }
  .ak-comida__escena { aspect-ratio: 4 / 3; }
  .ak-pasos__lista::before { display: none; }
  .ak-pie__interior { grid-template-columns: 1fr; }
  .ak-hero { min-height: auto; padding-block: 7.5rem 3rem; }
  .ak-hero__medio::after {
    /* En vertical la escena necesita más protección para que el texto respire */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tinta) 12%, rgba(7, 5, 26, 0.55) 55%, transparent 100%);
  }
}

/* --------------------------------------------------------------------------
   24. Movimiento
   Toda la animación es opcional: si el sistema pide menos movimiento, se apaga
   (04 §9 y 05 §11).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .ak-boton:hover { transform: none; }
}

/* Estado público del evento (taxonomía del doc 12 §2). Solo se pinta cuando el
   dato es real, así que su presencia ya significa algo. */
.ak-evento__estado {
  margin: 0.35rem 0 0;
  align-self: start;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--esmeralda);
  border: 1px solid rgba(54, 214, 148, 0.4);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

/* --------------------------------------------------------------------------
   25. Beneficios, precio y tablas
   Piezas de las páginas de programa: Cofradía y DM Residente.
   -------------------------------------------------------------------------- */
.ak-beneficios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ak-beneficio { padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.ak-beneficio__marca { color: var(--esmeralda); }
.ak-beneficio__titulo { margin: 0.5rem 0 0.3rem; font-weight: 800; color: var(--texto-fuerte); }
.ak-beneficio__detalle { margin: 0; font-size: 0.9375rem; color: var(--texto-suave); }

.ak-precio__nota {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--texto);
}

/* Tabla: se desplaza dentro de su propia caja, nunca ensancha la página. */
.ak-tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  margin-bottom: 1rem;
}
.ak-tabla { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 30rem; }
.ak-tabla th,
.ak-tabla td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--filete-interno); }
.ak-tabla thead th {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro);
  background: rgba(255, 201, 74, 0.06);
}
.ak-tabla tbody th { font-weight: 800; color: var(--texto-fuerte); }
.ak-tabla tbody tr:last-child th,
.ak-tabla tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   26. Grimorio
   Índice de categorías, tarjetas de artículo y la entrada larga.
   -------------------------------------------------------------------------- */
.ak-indice { margin-block: clamp(1.5rem, 4vw, 2.5rem); }
.ak-indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.ak-indice__lista a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--filete);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--texto);
  text-decoration: none;
  transition: border-color var(--transicion), color var(--transicion);
}
.ak-indice__lista a:hover { border-color: var(--oro); color: var(--oro); }
.ak-indice__cuenta {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.ak-articulos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ak-articulo { display: flex; flex-direction: column; overflow: hidden; }
.ak-articulo__portada {
  display: block;
  /* La proporción la fijan las imágenes reales: 600×450. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--filete-interno);
}
.ak-articulo__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-articulo__cuerpo {
  padding: clamp(1rem, 2.2vw, 1.35rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ak-articulo__meta {
  margin: 0 0 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--texto-suave);
}
.ak-articulo__meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ak-articulo__categoria {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cian);
}
.ak-articulo__titulo { margin: 0 0 0.5rem; font-size: 1.0625rem; line-height: 1.35; font-weight: 800; }
.ak-articulo__titulo a { color: var(--texto-fuerte); text-decoration: none; }
.ak-articulo__titulo a:hover { color: var(--oro); }
.ak-articulo__resumen { margin: 0; font-size: 0.9375rem; color: var(--texto-suave); line-height: 1.6; }
/* La fecha al fondo alinea todas las tarjetas de una fila. */
.ak-articulo__fecha { margin: 0.85rem 0 0; padding-top: 0; font-size: 0.75rem; color: var(--texto-suave); margin-top: auto; }

/* Entrada larga -------------------------------------------------------- */
.ak-entrada__interior { max-width: 52rem; }
/* El titular de un artículo es un titular periodístico, no un eslogan: llega
   largo por definición. Con la escala de `--medio` el más largo de los 13 se iba
   a cuatro líneas, así que baja un paso y gana una medida más ancha. */
.ak-entrada__interior .ak-titular--medio {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
}
.ak-entrada__categoria {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ak-entrada__categoria a { color: var(--cian); text-decoration: none; }
.ak-entrada__categoria a:hover { color: var(--oro); }
.ak-entrada__meta {
  margin: 0.9rem 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}
.ak-entrada__meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ak-entrada__portada {
  max-width: 44rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radio-grande);
}
.ak-entrada__portada img { width: 100%; height: auto; display: block; }

/* El cuerpo del artículo viene del CMS y se estila por etiqueta, así que hereda
   `.ak-prosa`. Lo único propio es que las tablas de comparación —hay cuatro entre
   los artículos migrados— tienen que poder desplazarse sin ensanchar la página. */
.ak-prosa--entrada table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.ak-prosa--entrada th,
.ak-prosa--entrada td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border: 1px solid var(--filete-interno);
  vertical-align: top;
}
.ak-prosa--entrada th { color: var(--texto-fuerte); background: rgba(255, 201, 74, 0.05); }
.ak-prosa--entrada hr { border: 0; border-top: 1px solid var(--filete); margin-block: 2rem; }
.ak-prosa--entrada blockquote {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--violeta);
  color: var(--texto-fuerte);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   27. Línea de tiempo
   La historia de Nosotros. El sitio anterior la reparte en pestañas por año y
   solo se lee un año a la vez; aquí los tres hitos existen en el HTML y se leen
   de corrido, sin JavaScript.
   -------------------------------------------------------------------------- */
.ak-linea-tiempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
.ak-hito {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
/* El filete vertical marca la continuidad entre hitos; el último no lo lleva
   porque no hay nada después que conectar. */
.ak-hito__anio {
  position: relative;
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  line-height: 1;
  color: var(--oro);
}
.ak-hito:not(:last-child) .ak-hito__anio::after {
  content: '';
  position: absolute;
  left: 0.15em;
  top: 2em;
  bottom: calc(-1 * clamp(1.75rem, 3.5vw, 2.75rem) - 0.5em);
  border-left: 1px solid var(--filete);
}
.ak-hito__titulo {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--texto-fuerte);
}
.ak-hito__cuerpo p { margin: 0; line-height: 1.75; }

@media (max-width: 34rem) {
  .ak-hito { grid-template-columns: 1fr; gap: 0.6rem; }
  .ak-hito:not(:last-child) .ak-hito__anio::after { display: none; }
}

/* Hueco de foto en formato vertical, para composiciones a dos columnas donde la
   imagen acompaña un bloque de texto largo. */
.ak-escena-vertical {
  --escena-a: rgba(118, 56, 242, 0.55);
  --escena-b: rgba(34, 215, 220, 0.28);
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-grande);
  align-self: stretch;
}

/* --------------------------------------------------------------------------
   28. Promociones
   Tarjeta por promoción. El orden visual invierte el del sitio anterior: primero
   el beneficio y la mecánica, y los términos plegados al final. Siguen estando
   completos en el HTML —son condiciones de una promoción y deben poder leerse e
   indexarse—, pero dejan de ser lo primero que se ve.
   -------------------------------------------------------------------------- */
.ak-promos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ak-promo {
  padding: clamp(1.2rem, 2.6vw, 1.6rem);
  display: flex;
  flex-direction: column;
  /* El ancla de cada promoción debe quedar visible al saltar desde el índice o
     desde un enlace externo, no debajo de la cabecera fija. */
  scroll-margin-top: 6rem;
}
.ak-promo__categoria {
  margin: 0 0 0.6rem;
  align-self: start;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cian);
  border: 1px solid rgba(34, 215, 220, 0.4);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.ak-promo__nombre {
  margin: 0 0 0.4rem;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--texto-fuerte);
}
.ak-promo__resumen {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--oro);
}
.ak-promo__mecanica {
  margin: 0 0 0.8rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--texto);
}
/* Mecánica que Arcano todavía no confirmó: se dice, no se finge. */
.ak-promo__mecanica--consultar { color: var(--texto-suave); font-style: italic; }

.ak-promo__vigencia {
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cian);
}

/* Los términos empujan el enlace al fondo de la tarjeta, así que todas las
   tarjetas de una fila alinean su enlace a la misma altura. */
.ak-promo__terminos { margin-top: auto; border-top: 1px solid var(--filete-interno); }
.ak-promo__terminos > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--texto-suave);
}
.ak-promo__terminos > summary::-webkit-details-marker { display: none; }
.ak-promo__terminos > summary:hover { color: var(--oro); }
.ak-promo__terminos[open] > summary { color: var(--texto-fuerte); }
.ak-promo__terminos[open] .ak-faq__flecha { transform: rotate(180deg); }
.ak-promo__terminos .ak-criterios {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.875rem;
  color: var(--texto-suave);
}
.ak-promo__terminos .ak-criterios li::before { top: 0.55em; }

.ak-promo .ak-evento__enlace { margin-top: 0.9rem; }

/* Nota de revisión por promoción: solo con `?revision=1`. */
.ak-promo__revision {
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--brasa);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--brasa);
}

/* --------------------------------------------------------------------------
   29. Prosa
   Columna de lectura para texto largo y continuo: aviso de privacidad,
   términos, artículos del Grimorio. Es el único lugar del sitio donde los
   elementos se estilan por etiqueta y no por clase, porque el contenido
   viene del CMS y no puede llevar clases en cada párrafo.
   Ancho de medida: 38rem da ~70 caracteres por línea a 16px, dentro del rango
   legible para texto corrido (60–75). Medido, no estimado: con 44rem se iban a
   83 caracteres, que ya cansa en un documento largo.
   -------------------------------------------------------------------------- */
.ak-prosa {
  max-width: 38rem;
  margin-inline: auto;
  color: var(--texto);
}
.ak-prosa > * + * { margin-top: 1.05rem; }
.ak-prosa p { margin: 0; line-height: 1.75; }

/* El primer párrafo hace de resumen: entra un poco más grande. Se excluye la
   fecha, que cuando existe es el primer elemento y debe seguir siendo un pie
   discreto: sin el :not() esta regla le gana por especificidad. */
.ak-prosa > p:first-child:not(.ak-prosa__fecha) { font-size: 1.0625rem; color: var(--texto-fuerte); }

.ak-prosa h2 {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--texto-fuerte);
  margin-top: 2.75rem;
}
.ak-prosa h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--oro);
  margin-top: 2rem;
}
.ak-prosa h2 + p,
.ak-prosa h3 + p,
.ak-prosa h2 + ul,
.ak-prosa h3 + ul { margin-top: 0.75rem; }

.ak-prosa ul,
.ak-prosa ol { padding-left: 1.35rem; display: grid; gap: 0.5rem; }
.ak-prosa li { line-height: 1.7; }
.ak-prosa ol { list-style: decimal; }
.ak-prosa ul { list-style: none; padding-left: 1.5rem; }
.ak-prosa ul > li { position: relative; }
.ak-prosa ul > li::before {
  content: '';
  position: absolute;
  left: -1.1rem;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  transform: rotate(45deg);
  background: var(--violeta);
}
.ak-prosa a { color: var(--cian); text-underline-offset: 0.2em; }
.ak-prosa strong { color: var(--texto-fuerte); }

/* Datos de contacto dentro del texto legal: se leen como bloque, no como
   párrafo suelto, para que quien busca a quién reclamar los encuentre. */
.ak-prosa__contacto {
  list-style: none;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  gap: 0.4rem;
}
.ak-prosa__contacto > li::before { display: none; }
.ak-prosa__contacto li { padding-left: 0; }

/* Nota de revisión: solo existe con `?revision=1`. Se ve deliberadamente
   distinta al resto del sitio —filete punteado en brasa— para que sea imposible
   confundirla con contenido publicable. La regla dura vive en el PHP
   (`es_revision()`); esto solo la hace evidente. */
.ak-nota-revision {
  border-style: dashed;
  border-color: var(--brasa);
  margin-bottom: 2.5rem;
}
.ak-nota-revision > p:first-child { color: var(--brasa); }
.ak-nota-revision ul { margin: 0.75rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }

/* Fecha de última actualización: obligatoria en un aviso de privacidad. */
.ak-prosa__fecha {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   30. Reservación
   Formulario y pantallas del flujo. Los controles se estilan por clase y no por
   etiqueta: el `input` de un buscador futuro no tiene por qué heredar esto.
   -------------------------------------------------------------------------- */
.ak-formulario { max-width: 46rem; }
.ak-formulario__grupo {
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.ak-formulario__grupo > legend {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fuerte);
}
.ak-formulario__paso {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--violeta);
  color: var(--pergamino);
  font-size: 0.75rem;
}
/* Tres campos por fila en escritorio, uno debajo de otro en móvil: un `date` y un
   `time` apretados a menos de 12rem se vuelven imposibles de tocar. */
.ak-formulario__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

.ak-campo { margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ak-campo__etiqueta { font-size: 0.875rem; font-weight: 700; color: var(--texto-fuerte); }
.ak-campo__opcional { font-weight: 400; color: var(--texto-suave); }
.ak-campo__control {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--texto-fuerte);
  background: rgba(7, 5, 26, 0.55);
  border: 1px solid var(--filete);
  border-radius: var(--radio-chico, 0.5rem);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.ak-campo__control:focus-visible {
  outline: none;
  border-color: var(--cian);
  box-shadow: 0 0 0 3px rgba(34, 215, 220, 0.25);
}
.ak-campo__control--error { border-color: var(--brasa); }
.ak-campo__control::placeholder { color: rgba(255, 244, 220, 0.38); }
textarea.ak-campo__control { resize: vertical; min-height: 5rem; }

.ak-campo__ayuda { font-size: 0.8125rem; color: var(--texto-suave); }
.ak-campo__error { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--brasa); }

/* Desglose de novedades. Cerrado por omisión: quien solo quiere mesa no debería
   toparse con cuatro casillas en medio del formulario (19 §3). */
.ak-detalles-novedades { margin: 0.5rem 0 0 1.7rem; }
.ak-detalles-novedades > summary {
  font-size: 0.875rem;
  color: var(--cian);
  cursor: pointer;
  width: fit-content;
}
.ak-detalles-novedades > summary:hover { color: var(--oro); }
.ak-novedad {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}
.ak-detalles-novedades .ak-nota { margin-top: 0.75rem; font-size: 0.8125rem; }

.ak-campo--casilla { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.ak-campo--casilla label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9375rem; }
.ak-campo--casilla input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: none; }

.ak-politica { margin-bottom: 1.2rem; font-size: 0.9375rem; }
.ak-politica > p { margin: 0 0 0.6rem; }

/* Aviso de disponibilidad. Solo aparece con JS; sin él el servidor valida igual. */
.ak-disponibilidad {
  margin: 0.4rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radio-chico, 0.5rem);
  border: 1px solid var(--filete);
  font-size: 0.9375rem;
}
.ak-disponibilidad--si { border-color: rgba(54, 214, 148, 0.45); color: var(--esmeralda); }
.ak-disponibilidad--no { border-color: rgba(255, 201, 74, 0.45); color: var(--oro); }

.ak-captcha { margin-bottom: 1.1rem; }

/* Botón de una acción que no se puede deshacer. Se distingue del principal a
   propósito: cancelar no debería verse igual que confirmar. */
.ak-boton--peligro {
  background: transparent;
  color: var(--brasa);
  border: 1px solid var(--brasa);
}
.ak-boton--peligro:hover { background: rgba(255, 101, 93, 0.12); }

.ak-aviso--error { border-color: var(--brasa); }

/* Resumen de la reservación en las pantallas de desenlace. */
.ak-resumen {
  max-width: 40rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
}
.ak-resumen__folio {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.ak-resumen__folio strong { color: var(--texto-fuerte); font-variant-numeric: tabular-nums; }
.ak-resumen__datos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.9rem 1.4rem;
}
.ak-resumen__datos dt {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.2rem;
}
.ak-resumen__datos dd { margin: 0; font-weight: 700; color: var(--texto-fuerte); }
/* El borde izquierdo dice de un golpe en qué estado quedó la reserva. */
.ak-resumen--confirmado { border-left: 3px solid var(--esmeralda); }
.ak-resumen--espera     { border-left: 3px solid var(--oro); }
.ak-resumen--cancelado  { border-left: 3px solid var(--brasa); }

/* --------------------------------------------------------------------------
   31. Ludoteca
   Catálogo de 143 juegos. La rejilla es densa a propósito: quien busca un título
   quiere verlo, no leer tarjetas grandes de uno en uno.
   -------------------------------------------------------------------------- */
.ak-atajos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem;
}
.ak-atajos a {
  display: block;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  text-decoration: none;
  transition: border-color var(--transicion), background var(--transicion);
}
.ak-atajos a:hover { border-color: var(--oro); background: rgba(255, 201, 74, 0.05); }
.ak-atajos__texto { display: block; font-weight: 800; color: var(--texto-fuerte); }
.ak-atajos__detalle { display: block; font-size: 0.8125rem; color: var(--texto-suave); }

/*
 * Los filtros se quedan pegados arriba mientras se recorre el catálogo: en una lista
 * de 143 juegos, tener que volver al principio para buscar es el problema, no la
 * longitud en sí. El fondo es opaco porque debajo pasan tarjetas.
 */
.ak-filtros {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.9rem 0 0.6rem;
  background: linear-gradient(var(--tinta) 82%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento, un bloque que sigue al scroll molesta más de lo que ayuda. */
  .ak-filtros { position: static; background: none; }
}
.ak-filtros__buscar { max-width: 28rem; }
.ak-filtros__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
}
.ak-filtros__estado {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/*
 * Dos columnas desde el móvil más chico. Con una sola columna las 143 tarjetas dan
 * una página de 75 000 px de alto —medido—, que nadie va a recorrer. Con dos baja a
 * unos 20 000, y el buscador de arriba es el que de verdad resuelve «no quiero
 * scrollear»: por eso se queda pegado al borde superior mientras se recorre.
 */
.ak-juegos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /*
   * `auto-fit` y no `auto-fill`. La diferencia solo se nota cuando hay **menos tarjetas
   * que columnas**: `auto-fill` deja las columnas vacías ocupando sitio, así que las
   * cuatro tarjetas destacadas de la portada se apiñaban a la izquierda con una quinta
   * columna vacía a la derecha. `auto-fit` colapsa las vacías y las que hay reparten el
   * ancho.
   *
   * En el catálogo de la ludoteca no cambia nada: con 143 tarjetas nunca sobran columnas.
   * Esta misma clase la usan los tres sitios —portada, catálogo y ficha— y por eso el
   * arreglo va aquí y no en una de las tres.
   */
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: clamp(0.6rem, 1.8vw, 1.2rem);
}
@media (min-width: 40rem) {
  /* `auto-fit` también aquí: **esta es la regla que gana en escritorio** y era la que
     dejaba la quinta columna vacía con las cuatro tarjetas destacadas de la portada
     (12rem de mínimo y 19.2 px de hueco dan exactamente 5 columnas de 205 px en 1104).
     Cambiar solo la de arriba no servía de nada. */
  .ak-juegos { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
.ak-juego { display: flex; flex-direction: column; overflow: hidden; }
.ak-juego__foto {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--filete-interno);
  background: radial-gradient(80% 70% at 30% 20%, rgba(118, 56, 242, 0.16), transparent 70%);
}
.ak-juego__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * Panel claro para las 16 fotos de caja sobre blanco (decisión del 7-ago-2026).
 * El fondo de la foto y el del panel son el mismo pergamino, así que el blanco deja
 * de leerse como un recorte pegado y se lee como el marco del producto. La imagen NO
 * se recorta ni se retoca: es el único tratamiento de los tres que no toca el pixel.
 */
.ak-juego__foto--clara {
  background: var(--pergamino);
  padding: 0.7rem;
}
.ak-juego__foto--clara img { object-fit: contain; mix-blend-mode: multiply; }

.ak-juego__foto--vacia { color: rgba(255, 244, 220, 0.22); }
.ak-juego__foto--vacia .ak-icono { width: 2.5rem; height: 2.5rem; }

.ak-juego__cuerpo { padding: 0.7rem 0.75rem 0.8rem; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 40rem) {
  .ak-juego__cuerpo { padding: 0.9rem 1rem 1rem; }
}
.ak-juego__nombre {
  margin: 0 0 0.45rem;
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--texto-fuerte);
}
.ak-juego__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.ak-juego__datos li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--texto-suave);
}
@media (min-width: 40rem) {
  .ak-juego__datos li { font-size: 0.8125rem; }
}
.ak-juego__datos .ak-icono { width: 0.9rem; height: 0.9rem; flex: none; }
.ak-juego__etiquetas { margin: 0.7rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ak-juego__etiquetas span {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cian);
  border: 1px solid rgba(34, 215, 220, 0.35);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
.ak-juego__revision {
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--brasa);
  font-size: 0.75rem;
  color: var(--brasa);
}

/* Formulario centrado, para las páginas donde es el contenido y no un paso lateral. */
.ak-formulario--centrado { margin-inline: auto; }
.ak-nota--centro { text-align: center; max-width: 44rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   32. Mesas de juego
   Convocatorias de la comunidad. Ojo con el vocabulario: «mesa de juego» no es la
   mesa del restaurante, y las clases lo respetan (`ak-mesa` aquí es convocatoria).
   -------------------------------------------------------------------------- */
.ak-mesas {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
/* El aire va en una variable para que la foto pueda restarlo y salirse del marco. */
.ak-mesa {
  --mesa-aire: clamp(1.1rem, 2.4vw, 1.5rem);
  padding: var(--mesa-aire);
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* la foto sangra hasta el borde: sin esto pisa el radio del marco */
}
.ak-mesa__cuando {
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cian);
}
.ak-mesa__cuando .ak-icono { width: 0.95rem; height: 0.95rem; }
/* --------------------------------------------------------------------------
   La caja del juego, a todo lo ancho de la tarjeta.

   Sale del aire de la tarjeta con márgenes negativos, como la foto de la
   ludoteca: una imagen con un marco de aire alrededor se lee como una imagen
   pegada dentro de una caja, no como la cara de la tarjeta. El aire va en una
   variable propia justo para poder restarlo sin repetir el `clamp()`.

   4/3 y no cuadrado: a 17rem de ancho, un cuadrado son 17rem de alto y empujaría
   fecha, cupo y botón fuera de la primera pantalla en móvil.
   -------------------------------------------------------------------------- */
.ak-mesa__foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: calc(var(--mesa-aire) * -1) calc(var(--mesa-aire) * -1) 0.9rem;
  border-bottom: 1px solid var(--filete-interno);
  background: radial-gradient(80% 70% at 30% 20%, rgba(118, 56, 242, 0.16), transparent 70%);
}
.ak-mesa__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Caja fotografiada sobre blanco: `contain` y `multiply` la funden con el fondo
   oscuro. Con `cover` se recortaría la caja y el blanco quedaría como un parche.
   Es el mismo trato que `.ak-juego__foto--clara` en la ludoteca. */
.ak-mesa__foto--clara img { object-fit: contain; mix-blend-mode: multiply; }

/* Sin foto —la mayoría: 94 de 143 juegos no tienen— el hueco tiene que leerse como
   un emblema y no como una imagen que no cargó. De ahí el dado grande sobre el mismo
   halo violeta, y no una caja vacía más grande. */
.ak-mesa__foto--vacia { color: rgba(255, 244, 220, 0.28); }
.ak-mesa__foto--vacia .ak-icono { width: 3.5rem; height: 3.5rem; }

.ak-mesa__juego { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 800; color: var(--texto-fuerte); }
.ak-mesa__juego a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--filete); }
.ak-mesa__juego a:hover { color: var(--oro); border-bottom-color: var(--oro); }
.ak-mesa__meta {
  margin: 0 0 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  font-size: 0.8125rem;
  color: var(--texto-suave);
}
.ak-mesa__meta > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ak-mesa__meta .ak-icono { width: 0.9rem; height: 0.9rem; }
.ak-mesa__tipo {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violeta-claro, var(--cian));
  border: 1px solid var(--filete);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.ak-mesa__descripcion { margin: 0 0 0.7rem; font-size: 0.9375rem; line-height: 1.6; color: var(--texto); }
.ak-mesa__convoca { margin: 0 0 0.7rem; font-size: 0.8125rem; color: var(--texto-suave); }
.ak-mesa__convoca strong { color: var(--texto-fuerte); }

/* --------------------------------------------------------------------------
   Contacto de una mesa · solo lo ve quien la convoca
   Va plegado en un `<details>` y no abierto: son datos personales de otras
   personas y no tienen por qué estar a la vista mientras se ojea el feed. El
   permiso lo comprueba `mesas_participantes()`, no este CSS.
   -------------------------------------------------------------------------- */
.ak-mesa__contacto {
  margin: 0 0 0.9rem;
  border: 1px solid var(--filete);
  border-radius: 0.6rem;
  /* `rgba` con el oro expandido, como el resto de la hoja (ver la tabla del Grimorio
     y el aviso destacado): `color-mix` no se usa en ningún otro sitio y estrenarlo
     para un fondo del 6 % no vale la inconsistencia. */
  background: rgba(255, 201, 74, 0.06);
}
.ak-mesa__contacto > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--oro);
}
.ak-mesa__contacto-num {
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--tinta);
  background: var(--oro);
  border-radius: 999px;
  min-width: 1.35em;
  padding: 0.05rem 0.4rem;
  text-align: center;
}
.ak-mesa__contacto-nota {
  margin: 0;
  padding: 0 0.75rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--texto-suave);
}
.ak-mesa__contacto-lista {
  margin: 0;
  padding: 0 0.75rem 0.7rem;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.ak-mesa__contacto-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  font-size: 0.8125rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--filete-interno);
}
.ak-mesa__contacto-lista li:first-child { padding-top: 0; border-top: 0; }
.ak-mesa__contacto-lista strong { color: var(--texto-fuerte); }
.ak-mesa__contacto-lista a { color: var(--cian); word-break: break-all; }
.ak-mesa__contacto-espera {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* Enlace de la tarjeta de la portada. Mismo trato que el de un evento —incluida la
   flecha— para que las dos tiras de la portada se lean como la misma familia. Solo
   existe en el resumen: en la página de la función ahí van los botones de acción. */
.ak-mesa__enlace {
  margin-top: auto;
  padding-top: 0.9rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--pergamino);
  text-decoration: none;
}
.ak-mesa__enlace::after { content: ' →'; }
.ak-mesa__enlace:hover { color: var(--oro); }

/* El estado del cupo se lee de un golpe por color, no solo por texto. */
.ak-mesa__estado {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.ak-mesa__estado--libre { color: var(--esmeralda); }
.ak-mesa__estado--pocos { color: var(--oro); }
.ak-mesa__estado--lleno { color: var(--texto-suave); }

/* Las acciones al fondo alinean todas las tarjetas de una fila. */
.ak-mesa__acciones {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--filete-interno);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ak-mesa__mio { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--esmeralda); }
.ak-boton--chico { padding: 0.45rem 0.85rem; font-size: 0.8125rem; }

/* Reportar es deliberadamente discreto: tiene que estar siempre visible, pero no
   competir con «Unirme». */
.ak-mesa__reportar {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.ak-mesa__reportar:hover { color: var(--brasa); }

/* Desplegable del formulario de convocatoria. */
.ak-desplegable { border: 1px solid var(--filete); border-radius: var(--radio); }
.ak-desplegable > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  font-weight: 800;
  color: var(--texto-fuerte);
}
.ak-desplegable > summary::-webkit-details-marker { display: none; }
.ak-desplegable[open] > summary { border-bottom: 1px solid var(--filete-interno); }
.ak-desplegable[open] .ak-faq__flecha { transform: rotate(180deg); }
.ak-desplegable .ak-formulario { padding: clamp(1rem, 2.4vw, 1.5rem); max-width: none; }

.ak-salir { margin-top: 1.2rem; }
.ak-salir button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Historial: una línea por mesa jugada, sin tarjetas. Es referencia, no contenido. */
.ak-historial { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ak-historial li {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--filete-interno);
  font-size: 0.9375rem;
}
.ak-historial__fecha { font-size: 0.8125rem; color: var(--texto-suave); }
.ak-historial__juego { color: var(--texto-fuerte); font-weight: 700; }
.ak-historial__gente { font-size: 0.8125rem; color: var(--texto-suave); white-space: nowrap; }
@media (max-width: 32rem) {
  .ak-historial li { grid-template-columns: 1fr auto; }
  .ak-historial__fecha { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   33. Ficha de juego
   La ficha individual. La cabeza es a dos columnas —datos y foto— porque quien
   llega buscando «cuántos juegan a Azul» tiene que verlo sin desplazarse.
   -------------------------------------------------------------------------- */
.ak-ficha__cabeza {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 48rem) {
  .ak-ficha__cabeza { grid-template-columns: 1.2fr 0.8fr; }
}
.ak-ficha__foto {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radio-grande);
  border: 1px solid var(--filete);
  background: radial-gradient(80% 70% at 30% 20%, rgba(118, 56, 242, 0.16), transparent 70%);
}
.ak-ficha__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El panel claro de la ficha usa la misma regla del índice, con más aire: aquí la
   imagen es grande y el margen evita que el borde de la caja toque el marco. */
.ak-ficha__foto.ak-juego__foto--clara { padding: clamp(1rem, 3vw, 2rem); }

.ak-ficha__datos {
  margin: 1.2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.9rem 1.4rem;
}
.ak-ficha__datos dt {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.ak-ficha__datos dt .ak-icono { width: 0.85rem; height: 0.85rem; }
.ak-ficha__datos dd { margin: 0; font-weight: 800; color: var(--texto-fuerte); }