/* ==========================================================================
   Cometa Taller · La mesa del clicker personalizado
   assets/css/pantallas/clicker.css
   ========================================================================== */

/* El primer día que esta página tenga un elemento con [hidden] y con display
   propio, [hidden] va a perder: la regla del navegador es la más débil que
   existe. Ha pasado tres veces en cometa.css. Se cierra aquí, de entrada. */
.ct-clicker-pagina [hidden] {
  display: none !important;
}

/* La página vive sobre violeta, como la mesa de las cometas, así que el crema
   al 84 % que base.css le da a todo <p> es justo lo que hace falta. Sólo hay
   una excepción: la nota bajo la vitrina, que queda sobre el mismo violeta y
   necesita algo menos de peso. */
.ct-clicker-vitrina__marco .ct-clicker-vitrina__pie {
  color: var(--ct-sol);
}

.ct-clicker-pagina {
  background: var(--ct-violeta);
  color: var(--ct-crema);
  padding-bottom: 72px;
}

.ct-clicker-miga-wrap {
  padding: 6px var(--ct-margen) 0;
}

/* --------------------------------------------------------------- PORTADA */

/* Mismo esqueleto que la portada de «Armar una cometa»: el hueco de foto va en
   z-index 0 —encima del fondo de la sección, debajo del texto— y la sección no
   lleva color propio salvo cuando SÍ hay foto. Antes esto tenía el hueco en
   z-index -1 y un fondo hondo fijo encima, así que el marco punteado con las
   notas de encuadre quedaba tapado: no había dónde pinchar para subir la foto,
   y la portada parecía no tenerla prevista. */
.ct-clicker-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 60px var(--ct-margen) 46px;
  overflow: hidden;
}

.ct-clicker-hero--foto {
  background-color: var(--ct-hondo);
}

.ct-clicker-hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ct-clicker-hero__texto {
  position: relative;
  z-index: 2;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.ct-clicker-hero__etiqueta {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-sol);
  margin-bottom: 14px;
}

.ct-clicker-hero__titulo {
  font-family: var(--ct-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: clamp(44px, 7.5vw, 96px);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ct-crema);
}

.ct-clicker-hero__bajada {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--ct-crema-84);
  margin: 0;
  max-width: 54ch;
}

.ct-clicker-hero__desde {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ct-sol);
  margin: 0;
}

.ct-clicker-hero__desde .ct-precio {
  color: var(--ct-sol);
}

/* ------------------------------------------------------------------ MESA */

.ct-clicker-mesa {
  padding: clamp(36px, 5vw, 64px) var(--ct-margen) clamp(20px, 3vw, 40px);
  scroll-margin-top: 80px;
}

.ct-clicker-mesa__cabecera {
  max-width: 62ch;
  margin: 0 auto clamp(28px, 4vw, 48px);
  text-align: center;
}

.ct-clicker-mesa__etiqueta {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ct-sol);
  margin-bottom: 10px;
}

.ct-clicker-mesa__titulo {
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}

.ct-clicker-mesa__bajada {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

.ct-clicker-mesa__tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

/* --------------------------------------------------------------- VITRINA */

.ct-clicker-vitrina {
  position: sticky;
  top: 90px;
}

.ct-clicker-vitrina__marco {
  --ct-cl-base: var(--ct-lila);
  --ct-cl-keycap: var(--ct-crema);
  --ct-cl-letra: var(--ct-tinta);
  --ct-cl-hueco: #2A1560;

  position: relative;
  background: var(--ct-hondo);
  border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(22px, 3vw, 38px);
  min-height: clamp(280px, 34vw, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* La cuadrícula del taller, muy tenue, para que la pieza no flote en el vacío. */
.ct-clicker-vitrina__marco::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(247, 245, 240, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 245, 240, .07) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.ct-clicker-vitrina__rotulo {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-sol);
}

.ct-clicker-vitrina__escena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(180px, 22vw, 280px);
  padding-bottom: 14px;
}

.ct-clicker-vitrina__espera {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 13px;
  color: var(--ct-crema);
  opacity: .6;
  margin: 0;
  text-align: center;
}

.ct-clicker-vitrina__pieza {
  width: 100%;
  animation: ct-cl-entra .34s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes ct-cl-entra {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.ct-clicker-vitrina__pieza .ct-cl-svg {
  width: calc(var(--ct-cl-u, 100) * 4.4px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.ct-clicker-vitrina__pie {
  position: relative;
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ct-sol);
  min-height: 1.2em;
}

.ct-clicker-vitrina__nota {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ct-crema-60, rgba(247, 245, 240, .6));
}

/* El dibujo de la pieza vive en componentes.css: lo usan esta mesa Y la sección
   de las dos mesas del home, que carga otra hoja de pantalla. Aquí se quedan
   sólo los estados que son de esta página: los dos perfiles y el hover. */

/* Los dos perfiles, vistos desde arriba: la de teclado tiene el tope hundido
   y más pequeño; la plana es casi todo tope. */
.ct-clicker-vitrina__escena.is-cap-teclado .ct-cl-svg__tope {
  transform: scale(.84);
  transform-origin: center;
  transform-box: fill-box;
}

.ct-clicker-vitrina__escena.is-cap-plana .ct-cl-svg__tope {
  transform: scale(1.06);
  transform-origin: center;
  transform-box: fill-box;
}

.ct-cl-svg--montada .ct-cl-svg__campo {
  cursor: pointer;
}

/* El grupo interior ya está centrado en el origen, así que aquí el origen de
   la transformación es 0 0 y no hace falta fill-box. */
.ct-cl-svg--montada .ct-cl-svg__tecla {
  transition: transform .16s ease;
  transform-origin: 0 0;
}

.ct-cl-svg--montada .ct-cl-svg__campo:hover .ct-cl-svg__tecla {
  transform: scale(1.07);
}

.ct-cl-svg--montada .ct-cl-svg__campo.is-pulsada .ct-cl-svg__tecla {
  transform: scale(.88);
}

/* ---------------------------------------------------------------- PASOS */

.ct-clicker-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ct-clicker-paso {
  padding: 16px 18px;
  border-radius: var(--ct-r-teja, 18px);
  background: rgba(247, 245, 240, .05);
  border: 1px solid rgba(247, 245, 240, .12);
  border-left: 3px solid rgba(247, 245, 240, .18);
  transition: opacity .2s ease, border-color .2s ease, background .2s ease;
}

.ct-clicker-paso.is-hecho {
  border-left-color: rgba(249, 224, 105, .55);
}

.ct-clicker-paso.is-activo {
  background: rgba(249, 224, 105, .12);
  border-color: rgba(249, 224, 105, .4);
  border-left-color: var(--ct-sol);
}

.ct-clicker-paso.is-bloqueado {
  opacity: .42;
  pointer-events: none;
}

.ct-clicker-paso__cabeza {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ct-clicker-paso__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(247, 245, 240, .3);
  font-size: 10px;
  font-weight: 600;
  color: var(--ct-crema);
}

.ct-clicker-paso.is-activo .ct-clicker-paso__num,
.ct-clicker-paso.is-hecho .ct-clicker-paso__num {
  background: var(--ct-sol);
  border-color: var(--ct-sol);
  color: var(--ct-tinta);
}

.ct-clicker-paso__titulo {
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  line-height: 1.2;
}

.ct-clicker-paso__ayuda {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.ct-clicker-paso__elegido {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-sol);
  text-align: right;
  max-width: 12ch;
}

.ct-clicker-paso__aviso {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ct-crema-60, rgba(247, 245, 240, .6));
}

/* -------------------------------------------------------------- OPCIONES */

.ct-clicker-opciones {
  display: grid;
  gap: 10px;
}

.ct-clicker-opciones--bases {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ct-clicker-opciones--caps {
  grid-template-columns: 1fr 1fr;
}

/* --- Los tres filamentos ---------------------------------------------- */

.ct-clicker-tinta + .ct-clicker-tinta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(247, 245, 240, .14);
}

.ct-clicker-tinta__cabeza {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 8px;
}

.ct-clicker-tinta__rotulo {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-sol);
}

.ct-clicker-tinta__ayuda {
  font-size: 12px;
  color: var(--ct-crema-84, rgba(247, 245, 240, .84));
}

.ct-clicker-tinta__elegido {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ct-crema);
}

.ct-clicker-tintas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ct-clicker-tinta-btn {
  width: 34px;
  height: 34px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}

.ct-clicker-tinta-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(247, 245, 240, .45);
}

.ct-clicker-tinta-btn.is-elegida {
  border-color: var(--ct-sol);
}

/* El aro fino evita que un filamento casi blanco desaparezca sobre la tarjeta. */
.ct-clicker-tinta-btn__gota {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(26, 15, 46, .35);
}

.ct-clicker-paso__aviso--ojo {
  color: var(--ct-sol);
  font-weight: 600;
}

.ct-clicker-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid rgba(247, 245, 240, .18);
  border-radius: var(--ct-r-teja, 14px);
  background: var(--ct-hondo);
  color: var(--ct-crema);
  cursor: pointer;
  text-align: center;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.ct-clicker-opcion:hover:not(:disabled) {
  border-color: var(--ct-sol);
  transform: translateY(-2px);
}

.ct-clicker-opcion:disabled {
  cursor: default;
}

/* Escogida: lila con tinta encima, 11,83:1. El aro de sol es el que dice cuál
   es, sin depender del color de fondo. */
.ct-clicker-opcion.is-elegida {
  border-color: var(--ct-sol);
  background: var(--ct-lila);
  color: var(--ct-tinta);
}

.ct-clicker-opcion__dibujo {
  display: block;
  width: 100%;
}

/* En la rejilla de bases el esquema va en un solo color: aquí se está
   escogiendo una forma, no un color. El color es el paso 03.

   Y todas a la misma escala: el ancho sale de las unidades del dibujo, no del
   hueco que le toque en la rejilla. Una base de cinco campos tiene que verse
   cinco veces más larga que una de uno, porque lo es. */
.ct-clicker-opcion__dibujo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.ct-clicker-opcion__dibujo .ct-cl-svg {
  --ct-cl-base: var(--ct-lila);
  --ct-cl-hueco: var(--ct-hondo);
  width: calc(var(--ct-cl-u, 100) * 1.5px);
  max-width: 100%;
  height: auto;
}

.ct-clicker-opcion.is-elegida .ct-clicker-opcion__dibujo .ct-cl-svg {
  --ct-cl-base: var(--ct-violeta);
  --ct-cl-hueco: var(--ct-lila);
}

.ct-clicker-opcion__nombre {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.ct-clicker-opcion__dato {
  font-size: 12px;
  font-weight: 600;
}

/* Sol sobre hondo se lee; sobre la tarjeta escogida, que es lila, no: 1,17:1.
   Ahí el precio pasa a tinta. */
.ct-clicker-opcion.is-elegida .ct-clicker-opcion__dato .ct-precio {
  color: var(--ct-tinta);
}

.ct-clicker-opcion__dato .ct-precio {
  font-size: 12px;
}

.ct-clicker-cuenta__cifra .ct-precio {
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: inherit;
  color: var(--ct-crema);
}

.ct-clicker-provisional {
  font-style: normal;
  color: var(--ct-sol);
}

.ct-clicker-opcion.is-elegida .ct-clicker-provisional {
  color: var(--ct-violeta);
}

.ct-clicker-opcion__ayuda {
  font-size: 11px;
  line-height: 1.45;
  opacity: .8;
}

.ct-clicker-opcion--cap .ct-cl-cap {
  width: 100%;
  max-height: 64px;
  color: var(--ct-lila);
}

.ct-clicker-opcion--cap.is-elegida .ct-cl-cap {
  color: var(--ct-violeta);
}

.ct-cl-cap__falda {
  fill: currentColor;
  stroke: currentColor;
}

.ct-cl-cap__tope rect {
  fill: var(--ct-sol);
  stroke: currentColor;
  stroke-width: 3;
}

.ct-clicker-opcion__muestra {
  display: flex;
  gap: 4px;
}

.ct-clicker-opcion__muestra i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 15, 46, .22);
}

/* ------------------------------------------------------------ LOS CAMPOS */

.ct-clicker-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ct-clicker-campos.is-vacio::after {
  content: 'Escoge primero una base.';
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  color: var(--ct-crema-60, rgba(247, 245, 240, .6));
}

.ct-clicker-campo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
  padding: 10px 8px;
  border: 2px dashed rgba(247, 245, 240, .3);
  border-radius: var(--ct-r-teja, 14px);
  background: var(--ct-hondo);
  color: var(--ct-crema);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.ct-clicker-campo:hover:not(:disabled) {
  border-color: var(--ct-sol);
  transform: translateY(-2px);
}

.ct-clicker-campo.is-puesta {
  border-style: solid;
  border-color: var(--ct-sol);
  background: var(--ct-lila);
  color: var(--ct-tinta);
}

.ct-clicker-campo__rotulo {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .78;
}

.ct-clicker-campo__glifo {
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
}

.ct-clicker-campo__nombre {
  font-size: 10px;
  opacity: .78;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- CUENTA */

.ct-clicker-cuenta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding: 18px 24px;
  max-width: 460px;
  background: var(--ct-hondo);
  border: 1px solid rgba(247, 245, 240, .16);
  border-radius: var(--ct-r-teja, 18px);
  text-align: center;
}

.ct-clicker-cuenta__rotulo {
  display: block;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-crema-60, rgba(247, 245, 240, .6));
}

.ct-clicker-cuenta__cifra {
  display: block;
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
}

.ct-clicker-cuenta__nota {
  display: block;
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ct-crema-60, rgba(247, 245, 240, .6));
  margin-top: 2px;
}

.ct-clicker-cuenta__btn:disabled {
  opacity: .5;
  cursor: default;
}

/* ----------------------------------------------------------------- MODAL */

/* El bloqueo de scroll con el cajón abierto. Estaba sólo en cometa.css, que no
   se carga aquí: cada pantalla trae su hoja y nada más. */
.ct-sin-scroll,
.ct-sin-scroll body {
  overflow: hidden;
}

.ct-clicker-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ct-clicker-modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(26, 15, 46, .72);
}

.ct-clicker-modal__caja {
  position: relative;
  width: min(640px, 100%);
  max-height: 84vh;
  overflow: auto;
  background: var(--ct-hondo);
  color: var(--ct-crema);
  border: 1px solid rgba(247, 245, 240, .18);
  border-radius: var(--ct-r-carta, 20px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  padding: clamp(18px, 3vw, 28px);
}

.ct-clicker-modal__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.ct-clicker-modal__etiqueta {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-sol);
}

.ct-clicker-modal__titulo {
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 4px 0 0;
}

.ct-clicker-modal__cerrar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(247, 245, 240, .3);
  background: transparent;
  color: var(--ct-crema);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ct-clicker-modal__grupo {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-crema-60, rgba(247, 245, 240, .6));
  margin: 18px 0 8px;
}

.ct-clicker-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 8px;
}

.ct-clicker-signo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  border: 1px solid rgba(247, 245, 240, .18);
  border-radius: 12px;
  background: rgba(247, 245, 240, .06);
  color: var(--ct-crema);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.ct-clicker-signo:hover {
  border-color: var(--ct-sol);
  transform: translateY(-2px);
}

.ct-clicker-signo.is-elegida {
  border-color: var(--ct-sol);
  background: var(--ct-lila);
  color: var(--ct-tinta);
}

.ct-clicker-signo__glifo {
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}

.ct-clicker-signo--vacio {
  width: 100%;
  flex-direction: row;
  gap: 10px;
  min-height: 46px;
}

.ct-clicker-signo__nombre {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .82;
}

/* -------------------------------------------------------------- VENTAJAS */

/* Banda Sol. Sol con crema es 1,21:1 y con lila 1,17:1: los dos están en la
   lista de pares prohibidos. Sobre amarillo, todo en tinta, sin excepciones. */
.ct-clicker-ventajas,
.ct-clicker-ventajas .ct-banda__dentro,
.ct-clicker-ventajas h2,
.ct-clicker-ventajas h3,
.ct-clicker-ventajas p,
.ct-clicker-ventajas span,
.ct-clicker-ventajas li {
  color: var(--ct-tinta);
}

.ct-clicker-ventajas__titulo {
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.04;
  margin: 0 0 10px;
}

.ct-clicker-ventajas__bajada {
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  opacity: .84;
  margin: 0 0 22px;
}

.ct-clicker-ventajas__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}

.ct-clicker-ventajas__lista h3 {
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px;
}

.ct-clicker-ventajas__lista p {
  font-size: 14px;
  line-height: 1.6;
  opacity: .82;
  margin: 0;
}

/* --------------------------------------------------------------- GALERÍA */

/* Las mismas medidas que «Cometas ya armadas»: cabecera a la izquierda, tres
   fotos 4:5 con sombra de carta, pie en dos renglones. Antes esta sección
   estaba centrada y sobre crema, y las dos mesas no se leían como la misma
   familia, que es justo lo que son. */

.ct-clicker-galeria {
  padding: 56px var(--ct-margen) 0;
}

.ct-clicker-galeria__cabecera {
  max-width: 620px;
  margin-bottom: 24px;
}

.ct-clicker-galeria__etiqueta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ct-sol);
}

.ct-clicker-galeria__titulo {
  font-family: var(--ct-titular);
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 8px 0 10px;
}

.ct-clicker-galeria__bajada {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ct-crema-84);
  margin: 0;
}

.ct-clicker-galeria__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.ct-clicker-galeria__pieza {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ct-clicker-galeria__foto {
  box-shadow: var(--ct-sombra-carta);
}

.ct-clicker-galeria__pie {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ct-clicker-galeria__pie-titulo {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-sol);
}

.ct-clicker-galeria__pie-texto {
  font-size: 13px;
  color: var(--ct-crema-84);
}

/* ---------------------------------------------------------------- CIERRE */

.ct-clicker-cierre {
  text-align: center;
  padding: 46px var(--ct-margen) 0;
}

.ct-clicker-cierre__texto {
  font-family: var(--ct-titular);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}

.ct-clicker-cierre__enlaces {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ct-clicker-cierre__btn-linea {
  background: transparent;
  color: var(--ct-crema);
  border: 1px solid rgba(247, 245, 240, .35);
}

/* ------------------------------------------------------------- RESPONSIVE */

@media (max-width: 900px) {
  .ct-clicker-mesa__tablero {
    grid-template-columns: 1fr;
  }

  .ct-clicker-vitrina {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-clicker-vitrina__pieza,
  .ct-cl-svg--montada .ct-cl-svg__tecla,
  .ct-clicker-opcion,
  .ct-clicker-campo,
  .ct-clicker-signo {
    animation: none !important;
    transition: none !important;
  }
}