/* ==========================================================================
   Cometa Taller · Armar una cometa (pantallas/cometa.css)
   --------------------------------------------------------------------------
   Una mesa de equipamiento. El holder en el centro, grande, porque es la
   pieza que trae el aro; los dos accesorios a los lados, pequeños, porque
   cuelgan de él. La jerarquía del sistema, dibujada.

   Las listas de piezas no están en la página: viven en una ventana por línea.
   Antes iban debajo y obligaban a bajar a escoger y subir a mirar cómo iba
   quedando, que es justo lo que no se quiere hacer mientras se arma algo.
   ========================================================================== */

/*
 * Tres veces en esta pantalla un elemento con `hidden` siguió ocupando sitio
 * porque la hoja le daba un `display`. La última fue el <img> vacío de las
 * ranuras, que se leía como un marco dentro de la tarjeta y empujaba el «+»
 * fuera del centro. Se cierra de una vez para toda la página.
 */
.ct-cometa-pagina [hidden] {
  display: none !important;
}

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

.ct-sin-scroll,
.ct-sin-scroll body {
  overflow: hidden;
}

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

/* ---- Portada ---- */

.ct-cometa-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 60px var(--ct-margen) 46px;
  overflow: hidden;
}

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

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

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

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

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

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

.ct-cometa-hero__btn {
  margin-top: 4px;
}

/* ---- Los tres pasos ---- */

.ct-cometa-pasos {
  padding: 54px var(--ct-margen) 10px;
}

.ct-cometa-pasos__cabecera {
  max-width: 620px;
  margin-bottom: 26px;
}

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

.ct-cometa-pasos__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-cometa-pasos__bajada {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ct-crema-84);
  margin: 0;
}

.ct-cometa-pasos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/*
 * Las tres tarjetas llevan una línea en Sol arriba y el número grande detrás:
 * son los tres movimientos del sistema, y conviene que se lean como una serie
 * y no como tres párrafos sueltos.
 */
.ct-cometa-paso-card {
  position: relative;
  padding: 22px 20px 20px;
  background: rgba(247, 245, 240, .06);
  border: 1px solid rgba(247, 245, 240, .14);
  border-top: 3px solid var(--ct-sol);
  border-radius: var(--ct-r-teja);
  overflow: hidden;
}

.ct-cometa-paso-card__num {
  position: absolute;
  right: 10px;
  bottom: -18px;
  font-family: var(--ct-titular);
  font-size: 84px;
  font-weight: 800;
  line-height: 1;
  color: rgba(247, 245, 240, .09);
  pointer-events: none;
}

.ct-cometa-paso-card__nombre {
  font-family: var(--ct-titular);
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}

.ct-cometa-paso-card__texto {
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ct-crema-84);
  margin: 0;
}

/* ---- La mesa ---- */

.ct-cometa-mesa__tablero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: clamp(14px, 3vw, 44px);
  padding: 26px var(--ct-margen) 0;
}

.ct-cometa-mesa__lado--izq { justify-self: end; }
.ct-cometa-mesa__lado--der { justify-self: start; }

.ct-cometa-mesa__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ct-cometa-mesa__pie {
  font-size: 12px;
  color: var(--ct-crema-60);
  text-align: center;
  margin: 0;
  max-width: 30ch;
}

/* ---- Una ranura ---- */

.ct-cometa-ranura {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

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

.ct-cometa-ranura__hueco {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 10px;
  box-sizing: border-box;
  background: var(--ct-lila);
  border: 2px solid rgba(247, 245, 240, .22);
  border-radius: var(--ct-r-teja);
  cursor: pointer;
  overflow: hidden;
  color: var(--ct-tinta);
  transition: border-color var(--ct-dur-micro) var(--ct-ease),
              transform var(--ct-dur-micro) var(--ct-ease);
}

.ct-cometa-ranura__hueco:hover:not([disabled]),
.ct-cometa-ranura__hueco:focus-visible {
  border-color: var(--ct-sol);
  transform: translateY(-2px);
}

.ct-cometa-ranura__hueco[disabled] {
  cursor: not-allowed;
  opacity: .45;
}

/* El recorte va DENTRO de la caja, con aire: es un objeto sobre un color. */
.ct-cometa-ranura__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* El navegador esconde lo que lleva [hidden] con display:none, pero cualquier
   `display` de la hoja le gana. Sin esta línea el «+» y el rótulo se quedaban
   encima de la pieza ya escogida. */
.ct-cometa-ranura__vacia[hidden] {
  display: none;
}

.ct-cometa-ranura__vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(26, 15, 46, .62);
}

.ct-cometa-ranura__mas {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(26, 15, 46, .3);
}

.ct-cometa-ranura__mas svg {
  width: 17px;
  height: 17px;
}

.ct-cometa-ranura__nohay {
  color: rgba(26, 15, 46, .5);
}

.ct-cometa-ranura.is-puesta .ct-cometa-ranura__hueco {
  border-color: var(--ct-sol);
}

.ct-cometa-ranura__nombre {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}

.ct-cometa-ranura__paleta {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-crema-60);
  min-height: 1em;
}

.ct-cometa-ranura__paleta.is-falta {
  color: var(--ct-sol);
}

.ct-cometa-ranura__acciones {
  display: flex;
  gap: 10px;
}

.ct-cometa-ranura__cambiar,
.ct-cometa-ranura__quitar {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-crema-60);
  text-decoration: underline;
}

.ct-cometa-ranura__cambiar:hover,
.ct-cometa-ranura__quitar:hover {
  color: var(--ct-sol);
}

/* Tamaños: el holder manda. */
.ct-cometa-ranura--grande { width: clamp(190px, 22vw, 280px); }

/*
 * La ranura de accesorio no impone proporción: recibe el alto de su fila y el
 * hueco se estira con lo que sobre después del rótulo y el nombre. Si
 * mantuviera el 4:5, las dos juntas siempre pasarían del alto del holder.
 */
.ct-cometa-ranura--chica {
  width: clamp(104px, 13vw, 148px);
  min-height: 0;
  justify-content: flex-start;
}

.ct-cometa-ranura--chica .ct-cometa-ranura__hueco {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 52px;
}

.ct-cometa-ranura--grande .ct-cometa-ranura__nombre { font-size: 17px; }
.ct-cometa-ranura--grande .ct-cometa-ranura__rol { font-size: 10px; }

/* ---- La cuenta ---- */

.ct-cometa-cuenta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 20px auto 0;
  padding: 16px 22px;
  max-width: 460px;
  background: var(--ct-hondo);
  border: 1px solid rgba(247, 245, 240, .16);
  border-radius: var(--ct-r-teja);
  text-align: center;
}

.ct-cometa-cuenta__numeros {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ct-cometa-cuenta__label {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-crema-60);
}

.ct-cometa-cuenta__total {
  font-family: var(--ct-fuente-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--ct-sol);
  text-align: left;
}

.ct-cometa-cuenta__btn {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}

.ct-cometa-cuenta__btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.ct-cometa-cuenta__nota {
  font-size: 11px;
  line-height: 1.4;
  color: var(--ct-crema-60);
  margin: 4px 0 0;
}

/* ---- La ventana de escoger ---- */

.ct-cometa-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
}

.ct-cometa-modal[hidden] {
  display: none;
}

.ct-cometa-modal__velo {
  position: absolute;
  inset: 0;
  background: rgba(26, 15, 46, .8);
  backdrop-filter: blur(3px);
  border: none;
}

.ct-cometa-modal__caja {
  position: relative;
  width: min(760px, 100%);
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--ct-hondo);
  border: 1px solid rgba(247, 245, 240, .18);
  border-radius: var(--ct-r-carta);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  overflow: hidden;
}

.ct-cometa-modal__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(247, 245, 240, .14);
}

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

.ct-cometa-modal__titulo {
  font-family: var(--ct-titular);
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 2px 0 4px;
}

.ct-cometa-modal__ayuda {
  font-size: 13px;
  color: var(--ct-crema-84);
  margin: 0;
}

.ct-cometa-modal__cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(247, 245, 240, .28);
  background: none;
  color: var(--ct-crema);
  cursor: pointer;
}

.ct-cometa-modal__cerrar:hover {
  border-color: var(--ct-sol);
  color: var(--ct-sol);
}

.ct-cometa-modal__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  padding: 18px 22px;
  overflow-y: auto;
}

.ct-cometa-modal__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid rgba(247, 245, 240, .14);
}

.ct-cometa-modal__aviso {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-crema-60);
}

.ct-cometa-modal__listo[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

/* ---- Una opción dentro de la ventana ---- */

.ct-cometa-opcion {
  display: flex;
  flex-direction: column;
  background: rgba(247, 245, 240, .06);
  border: 1px solid rgba(247, 245, 240, .14);
  border-radius: var(--ct-r-teja);
  overflow: hidden;
}

.ct-cometa-opcion.is-elegida {
  border-color: var(--ct-sol);
  background: rgba(249, 224, 105, .1);
}

.ct-cometa-opcion__btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.ct-cometa-opcion__foto {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: var(--ct-lila);
  padding: 10px;
  box-sizing: border-box;
}

.ct-cometa-opcion__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ct-cometa-opcion__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
}

.ct-cometa-opcion__col {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-crema-60);
}

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

.ct-cometa-opcion__precio {
  font-size: 12px;
  color: var(--ct-sol);
}

.ct-cometa-opcion__paletas {
  padding: 0 12px 12px;
}

.ct-cometa-opcion__paletas-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ct-cometa-paleta {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(26, 15, 46, .4);
  border: 1px solid transparent;
  border-radius: var(--ct-r-pildora);
  padding: 4px 9px 4px 5px;
  cursor: pointer;
  color: var(--ct-crema);
  font-family: var(--ct-fuente-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ct-cometa-paleta.is-elegida {
  border-color: var(--ct-sol);
  background: rgba(249, 224, 105, .18);
}

.ct-cometa-paleta__puntos {
  display: flex;
}

.ct-cometa-paleta__puntos span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: -3px;
  box-shadow: inset 0 0 0 1px rgba(26, 15, 46, .35);
}

.ct-cometa-vacio {
  margin: 0 var(--ct-margen) 60px;
  color: var(--ct-crema-60);
}

/* ---- Estrecho: el holder arriba, los accesorios debajo ---- */

@media (max-width: 720px) {
  .ct-cometa-mesa__tablero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ct-cometa-mesa__centro {
    grid-column: 1 / -1;
    order: -1;
  }
  .ct-cometa-mesa__lado--izq,
  .ct-cometa-mesa__lado--der {
    justify-self: center;
  }
  .ct-cometa-ranura--chica {
    width: min(150px, 40vw);
  }
  .ct-cometa-modal__lista {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
}


/* ---- La cabecera de la mesa ---- */

.ct-cometa-mesa__cabecera {
  text-align: center;
  max-width: 560px;
  margin: 54px auto 0;
  padding: 0 var(--ct-margen);
}

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

.ct-cometa-mesa__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 8px;
}

.ct-cometa-mesa__bajada {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ct-crema-84);
  margin: 0;
}

/* ---- El tablero: armador a la izquierda, guía a la derecha ---- */

/*
 * Las dos columnas del mismo alto: el armador manda y la guía se estira hasta
 * donde llegue él. `stretch` es lo que hace que los recuadros de la derecha
 * ocupen lo mismo que la mesa, en vez de quedar cortos y dejar un hueco.
 */
.ct-cometa-mesa__tablero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: stretch;
  margin: 22px var(--ct-margen) 0;
}

.ct-cometa-armador {
  position: relative;
  padding: 24px clamp(14px, 2.4vw, 32px);
  border-radius: var(--ct-r-carta);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(247, 245, 240, .10), rgba(247, 245, 240, 0) 62%),
    var(--ct-hondo);
  border: 1px solid rgba(247, 245, 240, .14);
  overflow: hidden;
}

/* La cometa de la marca, girando despacio detrás de la mesa. */
.ct-cometa-armador__fantasma {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: .07;
  pointer-events: none;
  animation: ct-girar 120s linear infinite;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ct-cometa-armador__fantasma { animation: none; }
}

/*
 * El holder a la izquierda y los dos accesorios en columna a su derecha: se
 * enganchan a él, así que se leen como lo que le cuelga y no como vecinos.
 */
/*
 * El holder pone el alto y los accesorios se reparten ese mismo alto entre
 * los dos. Antes crecían por su cuenta y la mesa terminaba más alta que la
 * pantalla, que era el problema.
 */
.ct-cometa-armador__piezas {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
}

.ct-cometa-armador__accesorios {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}

/* La cinta con el número y el papel de cada ranura. */
.ct-cometa-ranura__cinta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ct-cometa-ranura__num {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--ct-r-pildora);
  background: var(--ct-sol);
  color: var(--ct-tinta);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ---- Por qué armarla ---- */

/*
 * Sobre Sol todo va en tinta, sin excepción.
 *
 * La banda hereda `color: crema` de la página, y crema sobre Sol mide 1,21:1
 * —está en la lista de pares prohibidos—. Los títulos y los párrafos se
 * escribían y no se leían. Se fija la tinta en la banda entera en vez de ir
 * elemento por elemento, que es como se escapan.
 */
.ct-banda--sol,
.ct-banda--sol .ct-banda__dentro,
.ct-banda--sol h2,
.ct-banda--sol h3,
.ct-banda--sol p,
.ct-banda--sol span {
  color: var(--ct-tinta);
}

.ct-cometa-ventajas {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 54px);
  align-items: start;
  color: var(--ct-tinta);
}

.ct-cometa-ventajas__titulo {
  font-family: var(--ct-titular);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.ct-cometa-ventajas__bajada {
  font-size: 15px;
  line-height: 1.5;
  opacity: .82;
  margin: 0;
}

.ct-cometa-ventajas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 26px;
}

.ct-cometa-ventaja__titulo {
  font-family: var(--ct-titular);
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  padding-top: 10px;
  border-top: 2px solid rgba(26, 15, 46, .3);
}

.ct-cometa-ventaja__texto {
  font-size: 14px;
  line-height: 1.5;
  opacity: .82;
  margin: 0;
}

/* ---- Cierre ---- */

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

.ct-cometa-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-cometa-cierre__enlaces {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .ct-cometa-ventajas {
    grid-template-columns: 1fr;
  }
}

/*
 * Un botón de contorno para el cierre. Va aquí y con nombre de esta pantalla:
 * `ct-btn--linea` sonaría a modificador general del sistema y no lo es —no
 * existe en componentes.css—, así que llamarlo así sería prometer algo que el
 * resto del tema no tiene.
 */
.ct-cometa-cierre__btn-linea {
  background: transparent;
  color: var(--ct-crema);
  border: 1px solid rgba(247, 245, 240, .45);
}

.ct-cometa-cierre__btn-linea:hover,
.ct-cometa-cierre__btn-linea:focus-visible {
  border-color: var(--ct-sol);
  color: var(--ct-sol);
}

/* ==========================================================================
   La guía, que se va encendiendo
   --------------------------------------------------------------------------
   Tres pasos a la derecha del armador. Sólo uno está encendido a la vez: el
   que toca. Los que ya se resolvieron quedan en Sol apagado con la pieza
   escogida escrita debajo; los que todavía no tocan, atenuados.

   Es la misma regla que la mesa: sin holder no hay aro, y sin aro no hay de
   dónde colgar nada. La guía no inventa un orden, enseña el que ya existe.
   ========================================================================== */

.ct-cometa-guia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* Los tres pasos se reparten el alto de la mesa en partes iguales. */
.ct-cometa-guia__paso {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--ct-r-teja);
  background: rgba(247, 245, 240, .05);
  border: 1px solid rgba(247, 245, 240, .12);
  border-left: 3px solid rgba(247, 245, 240, .18);
  opacity: .42;
  transition: opacity var(--ct-dur-micro) var(--ct-ease),
              border-color var(--ct-dur-micro) var(--ct-ease),
              background var(--ct-dur-micro) var(--ct-ease);
}

.ct-cometa-guia__paso.is-hecho {
  opacity: 1;
  border-left-color: rgba(249, 224, 105, .55);
}

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

.ct-cometa-guia__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(247, 245, 240, .3);
  font-size: 10px;
  font-weight: 600;
}

.ct-cometa-guia__paso.is-activo .ct-cometa-guia__num {
  background: var(--ct-sol);
  border-color: var(--ct-sol);
  color: var(--ct-tinta);
}

.ct-cometa-guia__paso.is-hecho .ct-cometa-guia__num {
  border-color: var(--ct-sol);
  color: var(--ct-sol);
}

.ct-cometa-guia__nombre {
  font-family: var(--ct-titular);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 4px;
}

.ct-cometa-guia__texto {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ct-crema-84);
  margin: 0;
}

.ct-cometa-guia__hecho {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-sol);
}

/* ---- El progreso, en las ranuras ---- */

.ct-cometa-ranura.is-bloqueada {
  opacity: .4;
}

.ct-cometa-ranura.is-bloqueada .ct-cometa-ranura__hueco {
  cursor: not-allowed;
}

/* La que toca, con un halo para que no haya duda de dónde seguir. */
.ct-cometa-ranura.is-activa .ct-cometa-ranura__hueco {
  border-color: var(--ct-sol);
  box-shadow: 0 0 0 4px rgba(249, 224, 105, .18);
}

.ct-cometa-ranura__anadir {
  text-align: center;
}

/* ---- La galería ---- */

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

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

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

.ct-cometa-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-cometa-galeria__bajada {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ct-crema-84);
  margin: 0;
}

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

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

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

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

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

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

/* ---- Estrecho ---- */

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

@media (max-width: 520px) {
  .ct-cometa-armador__piezas {
    flex-direction: column;
    align-items: center;
  }
  .ct-cometa-armador__accesorios {
    flex-direction: row;
  }
}

/* ==========================================================================
   El llavero · cuarto paso de la mesa
   ==========================================================================
   No es una ranura: no tiene ventana ni piezas que filtrar. Son tres opciones
   a la vista, con su foto, y se escogen enteras —cordón, aro, cadenita y
   argollita van montados—. Comparte los estados de la guía: apagado hasta que
   toca, encendido en sol cuando toca, resuelto cuando hay uno escogido.
   ========================================================================== */

.ct-cometa-llavero {
  margin-top: clamp(14px, 2vw, 22px);
  padding: 14px 16px;
  border-radius: var(--ct-r-teja);
  background: rgba(247, 245, 240, .05);
  border: 1px solid rgba(247, 245, 240, .12);
  border-left: 3px solid rgba(247, 245, 240, .18);
  opacity: .42;
  transition: opacity var(--ct-dur-micro) var(--ct-ease),
              border-color var(--ct-dur-micro) var(--ct-ease),
              background var(--ct-dur-micro) var(--ct-ease);
}

.ct-cometa-llavero.is-lista {
  opacity: 1;
  border-left-color: rgba(249, 224, 105, .55);
}

.ct-cometa-llavero.is-activa {
  opacity: 1;
  background: rgba(249, 224, 105, .12);
  border-color: rgba(249, 224, 105, .4);
  border-left-color: var(--ct-sol);
}

.ct-cometa-llavero.is-bloqueada {
  pointer-events: none;
}

.ct-cometa-llavero__cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ct-cometa-llavero__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(247, 245, 240, .3);
  font-size: 10px;
  font-weight: 600;
  flex: none;
}

.ct-cometa-llavero.is-activa .ct-cometa-llavero__num,
.ct-cometa-llavero.is-lista .ct-cometa-llavero__num {
  background: var(--ct-sol);
  border-color: var(--ct-sol);
  color: var(--ct-tinta);
}

.ct-cometa-llavero__rol {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-crema);
}

.ct-cometa-llavero__elegido {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ct-sol);
}

.ct-cometa-llavero__opciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* El radio se oculta a la vista, no al teclado: sigue recibiendo foco y
   respondiendo a las flechas. */
.ct-cometa-llav__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ct-cometa-llav__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 8px 6px;
  border: 1px solid rgba(247, 245, 240, .18);
  border-radius: var(--ct-r-teja);
  background: var(--ct-hondo);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--ct-dur-micro) var(--ct-ease),
              transform var(--ct-dur-micro) var(--ct-ease);
}

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

.ct-cometa-llav__radio:checked + .ct-cometa-llav__label {
  border-color: var(--ct-sol);
  background: var(--ct-lila);
}

.ct-cometa-llav__radio:focus-visible + .ct-cometa-llav__label {
  outline: 2px solid var(--ct-sol);
  outline-offset: 2px;
}

.ct-cometa-llav__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: #FFF;
}

.ct-cometa-llav__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ct-cometa-llav__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ct-cometa-llav__nombre {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ct-crema);
}

.ct-cometa-llav__sub {
  font-size: 10px;
  line-height: 1.3;
  color: var(--ct-crema-60, rgba(247, 245, 240, .6));
}

/* Escogido: la tarjeta pasa a lila, así que la letra pasa a tinta. Crema sobre
   lila es 1,41:1, uno de los pares prohibidos. */
.ct-cometa-llav__radio:checked + .ct-cometa-llav__label .ct-cometa-llav__nombre,
.ct-cometa-llav__radio:checked + .ct-cometa-llav__label .ct-cometa-llav__sub {
  color: var(--ct-tinta);
}

@media (max-width: 520px) {
  .ct-cometa-llav__label {
    padding: 6px 4px;
  }

  .ct-cometa-llav__sub {
    display: none;
  }
}