/**
 * Cometa Taller · Catálogo de Componentes Base (Sección 6.6 del Brief)
 *
 * REGLA 8.5 (CRÍTICA):
 * Todos los componentes que lleven skew() o rotate() en su maquetación
 * poseen un contenedor envolvente exterior (*-wrap) para que GSAP
 * anime el contenedor exterior y JAMÁS sobrescriba la inclinación interior.
 */

/* ==========================================================================
   1. Marquesina Continua (.ct-marquesina)
   ========================================================================== */
.ct-marquesina {
  background-color: var(--ct-sol);
  color: var(--ct-tinta);
  height: 42px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 40;
  user-select: none;
}

.ct-marquesina__riel,
.ct-ticker {
  display: flex;
  width: max-content;
  animation: ct-slide 30s linear infinite;
}

.ct-marquesina__grupo {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ct-marquesina__sep {
  opacity: 0.45;
}

/* ==========================================================================
   2. Barra de Navegación (.ct-nav)
   ========================================================================== */
.ct-nav {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ct-margen);
  position: relative;
  z-index: 30;
  background-color: var(--ct-violeta);
}

.ct-nav__marca {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ct-crema);
  text-decoration: none;
}

.ct-nav__marca:hover {
  color: var(--ct-crema);
}

.ct-nav__logo-svg {
  width: 29px;
  height: 44px;
  flex-shrink: 0;
}

.ct-nav__marca-texto {
  display: flex;
  flex-direction: column;
}

.ct-nav__nombre {
  font-family: var(--ct-titular);
  font-weight: 800;
  font-size: 22px;
  line-height: 0.95;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ct-crema);
}

.ct-nav__sufijo {
  font-family: var(--ct-mono);
  font-size: 9px;
  letter-spacing: 0.44em;
  color: var(--ct-sol);
  padding-left: 0.44em;
  text-transform: uppercase;
}

.ct-nav__enlaces {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}

.ct-nav__link-linea {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ct-crema);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--ct-r-pildora);
  transition: background-color var(--ct-dur-micro) var(--ct-ease), color var(--ct-dur-micro) var(--ct-ease);
}

.ct-nav__link-linea:hover,
.ct-nav__link-linea[aria-expanded="true"] {
  background-color: var(--ct-sol);
  color: var(--ct-tinta);
}

.ct-nav__link-linea[aria-expanded="true"] svg,
.ct-nav__link-linea:hover svg {
  stroke: var(--ct-tinta);
  transform: rotate(180deg);
}

.ct-nav__chevron {
  width: 9px;
  height: 9px;
  stroke: var(--ct-crema);
  transition: transform var(--ct-dur-micro) var(--ct-ease);
}

.ct-nav__divisor {
  width: 1px;
  height: 18px;
  background-color: var(--ct-crema-35);
}

.ct-nav__link-estandar {
  color: var(--ct-crema);
  transition: color var(--ct-dur-micro) var(--ct-ease);
}

.ct-nav__link-estandar:hover {
  color: var(--ct-sol);
}

.ct-nav__acciones {
  display: flex;
  align-items: center;
  gap: 18px;
}

.ct-nav__icono-btn {
  color: var(--ct-crema);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: transform var(--ct-dur-micro) var(--ct-ease), color var(--ct-dur-micro) var(--ct-ease);
}

.ct-nav__icono-btn:hover {
  color: var(--ct-sol);
  transform: translateY(-2px);
}

.ct-nav__carrito-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--ct-sol);
  color: var(--ct-tinta);
  border-radius: var(--ct-r-pildora);
  padding: 8px 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--ct-dur-micro) var(--ct-ease), box-shadow var(--ct-dur-micro) var(--ct-ease);
}

.ct-nav__carrito-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(249, 224, 105, 0.4);
  color: var(--ct-tinta);
}

.ct-nav__menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--ct-crema);
  padding: 8px;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--ct-dur-micro) var(--ct-ease);
}

.ct-nav__menu-btn:hover {
  color: var(--ct-sol);
}

/* ==========================================================================
   3. Mega-menú (.ct-megamenu)
   ========================================================================== */
.ct-megamenu {
  position: absolute;
  top: 128px;
  left: 34px;
  right: 34px;
  z-index: 28;
  background-color: var(--ct-lila);
  color: var(--ct-tinta);
  border-radius: 28px;
  padding: 34px 38px 36px;
  box-shadow: 0 40px 70px -28px rgba(15, 6, 40, 0.85);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 42px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity var(--ct-dur-micro) var(--ct-ease),
              transform var(--ct-dur-micro) var(--ct-ease),
              visibility var(--ct-dur-micro);
}

.ct-megamenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.ct-megamenu__lateral {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid rgba(26, 15, 46, 0.12);
  padding-right: 28px;
}

.ct-megamenu__subtitulo {
  font-size: 10px;
  font-weight: 600;
  color: var(--ct-violeta);
}

.ct-megamenu__lineas-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-megamenu__tab {
  font-family: var(--ct-titular);
  font-weight: 800;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--ct-tinta);
  cursor: pointer;
  opacity: 0.4;
  text-align: left;
  transition: opacity var(--ct-dur-micro) var(--ct-ease), border-color var(--ct-dur-micro) var(--ct-ease);
  border-bottom: 3px solid transparent;
  padding-bottom: 4px;
}

.ct-megamenu__tab:hover,
.ct-megamenu__tab.is-active {
  opacity: 1;
  border-bottom-color: var(--ct-tinta);
}

.ct-megamenu__atajos {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 15, 46, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-megamenu__atajo-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ct-tinta);
}

.ct-megamenu__atajo-link:hover {
  color: var(--ct-violeta);
  text-decoration: underline;
}

.ct-megamenu__contenido {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ct-megamenu__grilla {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ct-megamenu__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--ct-tinta);
}

.ct-megamenu__item:hover .ct-megamenu__cajon-img img {
  transform: scale(1.05);
}

.ct-megamenu__cajon-img {
  background-color: rgba(26, 15, 46, 0.07);
  border-radius: var(--ct-r-caja);
  height: 180px;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden;
}

.ct-megamenu__cajon-img img {
  max-height: 160px;
  max-width: 100%;
  filter: var(--ct-sombra-producto);
  transition: transform var(--ct-dur-micro) var(--ct-ease);
}

.ct-megamenu__item-nombre {
  font-family: var(--ct-texto);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}

.ct-megamenu__item-meta {
  font-size: 11px;
  opacity: 0.65;
}

.ct-megamenu__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(26, 15, 46, 0.14);
  padding-top: 18px;
}

.ct-megamenu__pie-texto {
  font-size: 14px;
  max-width: 500px;
  opacity: 0.85;
  color: var(--ct-tinta);
}

/* ==========================================================================
   4. Miga de Pan (.ct-miga)
   ========================================================================== */
.ct-miga {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 8px var(--ct-margen) 0;
}

.ct-miga__lista {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ct-miga__item {
  display: inline-flex;
  align-items: center;
}

.ct-miga a {
  color: var(--ct-crema-60);
  transition: color var(--ct-dur-micro) var(--ct-ease);
}

.ct-miga a:hover {
  color: var(--ct-crema);
}

.ct-miga__sep {
  color: var(--ct-crema-35);
}

.ct-miga__actual {
  color: var(--ct-sol);
}

/* ==========================================================================
   4.1. Tejas Canónicas de Producto (.tile, .ct-tile, .ct-catalogo-tile)
   Sección 6.1 y Regla 3: El mismo componente en tienda, colección, búsqueda, 404 y home.
   ========================================================================== */
.ct-catalogo-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--ct-trans-media);
  position: relative;
}

.ct-catalogo-item:hover .ct-catalogo-tile,
.ct-catalogo-item:hover .tile,
.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 48px -18px rgba(15, 6, 40, 0.7);
}

.tile, .ct-tile, .ct-catalogo-tile {
  background: var(--ct-lila);
  color: var(--ct-tinta);
  border: 1px solid rgba(26, 15, 46, 0.12);
  border-radius: var(--ct-r-teja, 20px);
  position: relative;
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 20px;
  box-shadow: 0 20px 36px -18px rgba(15, 6, 40, 0.5);
  transition: transform var(--ct-trans-rapida), box-shadow var(--ct-trans-rapida);
  overflow: hidden;
}

.tile img, .ct-tile img, .ct-catalogo-tile img, .ct-catalogo-tile__img {
  max-height: 240px;
  max-width: 90%;
  object-fit: contain;
  filter: var(--ct-sombra-producto);
}

.tile .mono, .ct-tile .mono, .ct-catalogo-tile .mono, .ct-catalogo-tile__linea {
  color: var(--ct-tinta);
  opacity: 0.85;
}

.tile__badge, .ct-catalogo-tile__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: var(--ct-sol);
  color: var(--ct-tinta);
  font-family: var(--ct-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--ct-r-pildora);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ct-catalogo-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ct-catalogo-meta__nombre {
  font-family: var(--ct-texto);
  font-weight: 700;
  font-size: 19px;
  color: var(--ct-crema);
}

.ct-catalogo-meta__detalles {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ct-catalogo-meta__info {
  font-family: var(--ct-mono);
  font-size: 12px;
  color: var(--ct-crema-60);
  text-transform: uppercase;
}

.ct-catalogo-meta__precio {
  font-family: var(--ct-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--ct-sol);
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 12px;
}

/* ==========================================================================
   5. Banda Inclinada (.ct-banda-wrap) - Cumple Regla 8.5
   ========================================================================== */
.ct-banda-wrap {
  position: relative;
  overflow: visible;
  width: 100%;
}

.ct-banda {
  position: relative;
  padding-block: 84px;
  transform: skewY(-2.4deg);
  border-radius: 0;
  margin-block: 30px;
}

.ct-banda__dentro {
  transform: skewY(2.4deg);
  padding-inline: var(--ct-margen);
  max-width: 1440px;
  margin-inline: auto;
}

/* Alternancia de ángulo (Sección 6.3) */
.ct-banda--invertida {
  transform: skewY(2.4deg);
}

.ct-banda--invertida .ct-banda__dentro {
  transform: skewY(-2.4deg);
}

/* Variantes de color de la banda */
.ct-banda--lila {
  background-color: var(--ct-lila);
  color: var(--ct-tinta);
}

.ct-banda--sol {
  background-color: var(--ct-sol);
  color: var(--ct-tinta);
}

.ct-banda--casi {
  background-color: var(--ct-casi);
  color: var(--ct-crema);
}

/* En móvil el ángulo sube a 3.0° */
@media (max-width: 600px) {
  .ct-banda {
    transform: skewY(-3deg);
    padding-block: 60px;
  }
  .ct-banda__dentro {
    transform: skewY(3deg);
  }
  .ct-banda--invertida {
    transform: skewY(3deg);
  }
  .ct-banda--invertida .ct-banda__dentro {
    transform: skewY(-3deg);
  }
}

/* ==========================================================================
   6. Botones en Tres Variantes (.ct-btn)
   ========================================================================== */
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--ct-r-pildora);
  font-family: var(--ct-texto);
  font-weight: 700;
  font-size: 15px;
  min-height: 44px;
  padding: 12px 28px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--ct-dur-micro) var(--ct-ease),
              box-shadow var(--ct-dur-micro) var(--ct-ease),
              background-color var(--ct-dur-micro) var(--ct-ease),
              color var(--ct-dur-micro) var(--ct-ease);
}

.ct-btn:hover {
  transform: translateY(-2px);
}

.ct-btn:active {
  transform: translateY(0);
}

/* Botón de compra / conversión principal: 52 px (Sección 7.8) */
.ct-btn--lg {
  min-height: 52px;
  padding: 16px 36px;
  font-size: 16px;
}

/* Variante 1: Sol */
.ct-btn--sol {
  background-color: var(--ct-sol);
  color: var(--ct-tinta);
}

.ct-btn--sol:hover {
  background-color: #f7d84a;
  color: var(--ct-tinta);
  box-shadow: 0 12px 24px -6px rgba(249, 224, 105, 0.45);
}

/* Variante 2: Violeta */
.ct-btn--violeta {
  background-color: var(--ct-violeta);
  color: var(--ct-sol);
}

.ct-btn--violeta:hover {
  background-color: #3f2277;
  color: var(--ct-crema);
  box-shadow: 0 12px 24px -6px rgba(74, 42, 138, 0.45);
}

/* Variante 3: Tinta */
.ct-btn--tinta {
  background-color: var(--ct-tinta);
  color: var(--ct-sol);
}

.ct-btn--tinta:hover {
  background-color: #261642;
  color: var(--ct-crema);
  box-shadow: 0 12px 24px -6px rgba(26, 15, 46, 0.45);
}

/* ==========================================================================
   7. Campo de Formulario (.ct-campo-grupo)
   ========================================================================== */
.ct-campo-grupo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.ct-campo__etiqueta {
  font-family: var(--ct-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ct-violeta);
}

.ct-campo {
  background-color: var(--ct-crema);
  color: var(--ct-tinta);
  border: 1px solid var(--ct-tinta-14);
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 16px;
  font-family: var(--ct-texto);
  line-height: 1.4;
  width: 100%;
  transition: border-color var(--ct-dur-micro) var(--ct-ease),
              box-shadow var(--ct-dur-micro) var(--ct-ease);
}

.ct-campo::placeholder {
  color: var(--ct-tinta-45);
}

.ct-campo:focus {
  outline: none;
  border-color: var(--ct-violeta);
  box-shadow: 0 0 0 3px rgba(74, 42, 138, 0.2);
}

/* ==========================================================================
   8. Teja de Producto (.ct-teja-wrap) - Cumple Regla 8.5
   ========================================================================== */
.ct-teja-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ct-teja {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--ct-crema);
}

.ct-teja__caja-img {
  background-color: var(--ct-lila);
  border: 1px solid rgba(26, 15, 46, 0.12);
  border-radius: var(--ct-r-teja);
  height: 270px;
  display: grid;
  place-items: center;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: transform var(--ct-dur-micro) var(--ct-ease),
              box-shadow var(--ct-dur-micro) var(--ct-ease);
}

.ct-teja:hover .ct-teja__caja-img {
  transform: translateY(-4px);
  box-shadow: var(--ct-sombra-flotante);
}

.ct-teja__img {
  max-height: 230px;
  max-width: 100%;
  object-fit: contain;
  filter: var(--ct-sombra-producto);
  transition: transform var(--ct-dur-micro) var(--ct-ease);
}

.ct-teja:hover .ct-teja__img {
  transform: scale(1.04);
}

/* Estado Foto Pendiente (Sección 7.6) */
.ct-teja__pendiente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ct-tinta);
}

.ct-teja__pendiente svg {
  width: 58px;
  height: 88px;
  opacity: 0.3;
}

.ct-teja__pendiente-texto {
  font-family: var(--ct-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ct-tinta);
}

.ct-teja__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ct-teja__nombre {
  font-family: var(--ct-texto);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ct-crema);
}

.ct-teja__meta-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ct-teja__linea {
  font-size: 12px;
  color: var(--ct-crema-60);
}

/* ==========================================================================
   9. Carta de Colección (.ct-carta-wrap) - Cumple Regla 8.5
   ========================================================================== */
.ct-carta-wrap {
  position: relative;
  border-radius: var(--ct-r-carta);
  box-shadow: var(--ct-sombra-carta);
  overflow: visible;
  transition: transform var(--ct-dur-micro) var(--ct-ease);
}

.ct-carta {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  min-height: 580px;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  background-color: var(--col-fondo, var(--ct-sol));
  color: var(--col-tinta, var(--ct-tinta));
  border-radius: var(--ct-r-carta);
  overflow: hidden;
}

.ct-carta__marco {
  position: absolute;
  inset: 12px;
  border: 1px solid currentColor;
  opacity: 0.22;
  border-radius: calc(var(--ct-r-carta, 22px) - 6px);
  pointer-events: none;
  z-index: 1;
}

/* Número gigante fantasma */
.ct-carta__numero {
  position: absolute;
  right: -10px;
  bottom: -40px;
  font-family: var(--ct-titular);
  font-weight: 800;
  font-size: 210px;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(26, 15, 46, 0.08);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.ct-carta__encabezado {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 6px;
  padding-top: 4px;
}

.ct-carta__sub {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

.ct-carta__titulo {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.88;
  color: var(--col-tinta, var(--ct-tinta));
}

.ct-carta__regla {
  height: 1px;
  background-color: currentColor;
  opacity: 0.28;
  margin-block: 14px;
  border: none;
  width: 100%;
}

.ct-carta__cuerpo {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  display: grid;
  place-items: center;
  padding: 8px 0;
}

.ct-carta__img {
  max-height: 220px;
  max-width: 100%;
  filter: var(--ct-sombra-producto);
  transition: transform var(--ct-dur-micro) var(--ct-ease);
}

.ct-carta:hover .ct-carta__img {
  transform: scale(1.05) rotate(-2deg);
}

.ct-carta__pie {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  flex-shrink: 0;
}

.ct-carta__parrafo {
  font-size: 14px;
  line-height: 1.45;
  color: var(--col-tinta, var(--ct-tinta));
  opacity: 0.88;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.ct-carta__btn {
  align-self: flex-start;
  background-color: var(--col-btn-bg, var(--ct-tinta));
  color: var(--col-btn-tinta, var(--ct-sol));
  border-radius: var(--ct-r-pildora);
  padding: 11px 22px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: transform var(--ct-dur-micro) var(--ct-ease);
}

.ct-carta__btn:hover {
  transform: translateY(-2px);
  color: var(--col-btn-tinta, var(--ct-sol));
}

/* ==========================================================================
   10. Boletín (.ct-boletin)
   Banda inclinada lila, campo redondeado de ancho fijo con fondo crema (#F7F5F0)
   y botón tinta al lado. Cero blanco puro (Regla 7.3).
   ========================================================================== */
.ct-boletin-banda,
.ct-banda--lila {
  background-color: var(--ct-lila);
  color: var(--ct-tinta);
}

.ct-boletin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.ct-boletin__texto,
.ct-boletin-col-texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}

.ct-boletin__titulo,
.ct-boletin-titular {
  font-family: var(--ct-titular);
  font-size: clamp(32px, 4vw, 46px);
  line-height: 0.96;
  color: var(--ct-tinta);
  text-transform: uppercase;
  margin: 0;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
}

.ct-boletin__bajada,
.ct-boletin-bajada {
  font-family: var(--ct-texto);
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.78;
  color: var(--ct-tinta);
  margin: 0;
}

.ct-boletin__form,
.ct-boletin-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ct-boletin__input,
.ct-boletin-input,
.ct-boletin-form .ct-campo,
.ct-boletin input[type="email"] {
  background-color: var(--ct-crema);
  color: var(--ct-tinta);
  border-radius: var(--ct-r-pildora);
  padding: 16px 26px;
  font-family: var(--ct-texto);
  font-size: 15px;
  width: 320px;
  max-width: 100%;
  border: 1px solid var(--ct-tinta-14);
  outline: none;
  box-sizing: border-box;
}

.ct-boletin__input:focus,
.ct-boletin-input:focus,
.ct-boletin-form .ct-campo:focus,
.ct-boletin input[type="email"]:focus {
  outline: 3px solid var(--ct-sol);
  outline-offset: 2px;
}

/* ==========================================================================
   11. Pie Institucional (.ct-footer)
   Cuatro columnas sin viñetas, encabezados en IBM Plex Mono 10 px color Sol,
   línea inferior con copyright a la izquierda y 3 enlaces legales a la derecha.
   ========================================================================== */
.ct-footer {
  background-color: var(--ct-hondo);
  padding: 90px var(--ct-margen) 40px;
  display: flex;
  flex-direction: column;
  gap: 46px;
  position: relative;
  color: var(--ct-crema);
}

.ct-footer ul, .ct-footer ol, .ct-footer li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ct-footer__grilla,
.ct-footer__columnas,
.ct-footer__contenido {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}

.ct-footer__marca {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ct-footer__col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ct-footer__col-titulo,
.ct-footer__titulo-col {
  font-family: var(--ct-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ct-sol);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  display: block;
}

.ct-footer__enlace,
.ct-footer__enlaces a,
.ct-footer li a {
  font-family: var(--ct-texto);
  font-size: 14px;
  color: var(--ct-crema-84);
  text-decoration: none;
  display: inline-block;
  transition: color var(--ct-dur-micro) var(--ct-ease);
}

.ct-footer__enlace:hover,
.ct-footer__enlaces a:hover,
.ct-footer li a:hover {
  color: var(--ct-sol);
}

.ct-footer__aviso-taller {
  font-family: var(--ct-texto);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ct-crema-60);
  max-width: 300px;
}

.ct-footer__inferior,
.ct-footer__legal {
  border-top: 1px solid var(--ct-crema-16);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--ct-crema-60);
  font-family: var(--ct-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ct-footer__legales {
  display: flex;
  gap: 22px;
}

.ct-footer__legales a,
.ct-footer__legal a {
  color: var(--ct-crema-60);
  text-decoration: none;
  transition: color var(--ct-dur-micro) var(--ct-ease);
}

.ct-footer__legales a:hover,
.ct-footer__legal a:hover {
  color: var(--ct-sol);
}

/* ==========================================================================
   12. Pie Reducido (.ct-footer-mini)
   ========================================================================== */
.ct-footer-mini {
  background-color: var(--ct-hondo);
  padding: 34px var(--ct-margen);
  border-top: 1px solid var(--ct-crema-16);
  color: var(--ct-crema-60);
}

.ct-footer-mini__dentro {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
}

.ct-footer-mini__enlaces {
  display: flex;
  gap: 22px;
}

.ct-footer-mini__enlaces a {
  color: var(--ct-crema-60);
}

.ct-footer-mini__enlaces a:hover {
  color: var(--ct-sol);
}

/* ==========================================================================
   13. Acordeón Accesible Nativo (<details>/<summary>) - Regla 7.9
   ========================================================================== */
.ct-acordeon {
  display: flex;
  flex-direction: column;
}

.ct-acordeon__item {
  border-bottom: 1px solid rgba(26, 15, 46, .18);
}

.ct-acordeon__item:last-child {
  border-bottom: none;
}

.ct-acordeon__resumen {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  user-select: none;
}

.ct-acordeon__resumen::-webkit-details-marker {
  display: none;
}

.ct-acordeon__pregunta {
  font-size: 20px;
  font-weight: 700;
  color: var(--ct-tinta);
}

.ct-acordeon__icono::after {
  content: "+";
  font-size: 26px;
  line-height: 1;
  font-weight: 300;
  color: var(--ct-tinta);
  opacity: .75;
  display: block;
  transition: transform var(--ct-dur-micro) var(--ct-ease);
}

.ct-acordeon__item[open] .ct-acordeon__icono::after {
  content: "−";
  opacity: 1;
}

.ct-acordeon__contenido {
  padding-bottom: 22px;
}

.ct-acordeon__contenido p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ct-tinta);
  max-width: 760px;
  margin: 0;
}

/* ==========================================================================
   14. Píldoras Monospace (.ct-pill)
   Usadas en El taller, El sistema, Contacto, Búsqueda y Fichas técnicas.
   ========================================================================== */
.ct-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--ct-fuente-mono, var(--ct-mono));
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ct-crema);
  border: 1px solid rgba(247, 245, 240, .35);
  border-radius: var(--ct-r-pildora);
  background: transparent;
  white-space: nowrap;
}

.ct-pill--tinta {
  color: var(--ct-tinta);
  border-color: rgba(26, 15, 46, .35);
}

/* ==========================================================================
   Adaptación Móvil General (< 900px y < 600px)
   ========================================================================== */
@media (max-width: 900px) {
  .ct-nav {
    padding: 0 16px;
    height: 64px;
  }
  .ct-nav__enlaces,
  .ct-nav__icono-btn--cuenta {
    display: none;
  }
  .ct-nav__menu-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
  }
  .ct-nav__carrito-badge {
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: 50%;
  }
  .ct-nav__carrito-badge span {
    display: none;
  }
  .ct-megamenu {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    border-radius: 0;
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding: 24px;
    z-index: 100;
  }
  .ct-megamenu__lateral {
    border-right: none;
    border-bottom: 1px solid rgba(26, 15, 46, 0.12);
    padding-bottom: 20px;
  }
  .ct-megamenu__grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ct-footer__grilla {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .ct-boletin {
    flex-direction: column;
    align-items: flex-start;
  }
  .ct-boletin__form {
    width: 100%;
    flex-direction: column;
  }
  .ct-boletin__input,
  .ct-boletin__form .ct-btn {
    width: 100%;
  }
  .ct-footer__grilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  .ct-footer__inferior,
  .ct-footer-mini__dentro {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Colección sin piezas todavía.
   Una colección recién creada dejaba la rejilla en blanco.
   ───────────────────────────────────────────────────────────── */
.ct-coleccion-vacia {
    grid-column: 1 / -1;
    background: var(--ct-lila, #D9C9F5);
    border-radius: 22px;
    padding: clamp(32px, 5vw, 56px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ct-coleccion-vacia__titulo {
    font-family: var(--ct-display, "Bricolage Grotesque", sans-serif);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.035em;
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: .96;
    color: var(--ct-tinta, #1A0F2E);
    margin: 0;
    max-width: 18ch;
}

.ct-coleccion-vacia__texto {
    color: var(--ct-tinta, #1A0F2E);
    max-width: 52ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

.ct-coleccion-vacia .ct-btn {
    margin-top: 6px;
}

/* El mega-menú, cuando una línea todavía no tiene piezas publicadas. */
.ct-megamenu__vacio {
    grid-column: 1 / -1;
    color: var(--ct-lila, #D9C9F5);
    font-size: 15px;
    margin: 0;
    padding: 18px 0;
}

/* Barra de filtros de colección: los desplegables van dentro de la píldora. */
.ct-coleccion-filtros__orden {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.ct-filtro-pill select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    padding-right: 14px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 4px center, right 0px center;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

.ct-filtro-pill select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 3px;
}

/* Los desplegables se dibujan con el color del sistema operativo al abrirse;
   se fuerza el contraste de las opciones para que no queden ilegibles. */
.ct-filtro-pill select option {
    background: #F7F5F0;
    color: #1A0F2E;
}

/* --------------------------------------------------------------------------
   Lote 16 · Barra de filtros de la tienda y catálogo vacío
   -------------------------------------------------------------------------- */

/* Los campos de filtro viven dentro de un formulario GET: sin esto, el
   formulario se comportaba como un bloque y rompía la fila de píldoras. */
.ct-filtros__form {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.ct-filtros__form--orden {
    margin-left: 10px;
}

.ct-filtro-pill__rotulo {
    opacity: .7;
    margin-right: 4px;
}

/* Cuando una combinación de filtros no devuelve ninguna pieza. Antes se
   pintaban catorce piezas inventadas; ahora se dice la verdad. */
.ct-catalogo-vacio {
    max-width: 640px;
    margin: 0 auto;
    padding: 72px 24px 40px;
    text-align: center;
}

.ct-catalogo-vacio__titulo {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.25;
    color: var(--ct-violeta, #4A2A8A);
    margin: 0 0 22px;
}

/* ==========================================================================
   Lote 28 · Dos bloques de imagen que la maqueta nunca tuvo
   --------------------------------------------------------------------------
   «Envíos y garantía» y «Contacto» no tenían ni un solo hueco de imagen. La
   primera promete que se reimprime lo que llegue partido sin enseñar nunca cómo
   llega; la segunda pide confianza sin poner una cara. Aquí están los dos
   bloques, con el mismo idioma del resto del tema: piezas giradas unos grados,
   sombra propia y pies en monoespaciada.
   ========================================================================== */

/* --- Envíos · Así llega el paquete --- */

.ct-envios-llega {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--ct-margen, 24px);
  padding-block: 72px 8px;
}

.ct-envios-llega__cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: end;
  margin-bottom: 44px;
}

.ct-envios-llega__etiqueta {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-sol, #F9E069);
  margin-bottom: 12px;
}

.ct-envios-llega__titulo {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 52px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--ct-crema, #F7F5F0);
  margin: 0;
}

.ct-envios-llega__parrafo {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(247, 245, 240, .84);
  margin: 0;
  max-width: 46ch;
}

.ct-envios-llega__fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

.ct-envios-llega__figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* La segunda va girada al otro lado: el par se lee como dos momentos, no como
   una rejilla de dos celdas iguales. */
.ct-envios-llega__figura:nth-child(1) .ct-envios-llega__img { transform: rotate(-2.5deg); }
.ct-envios-llega__figura:nth-child(2) .ct-envios-llega__img { transform: rotate(2deg); }

.ct-envios-llega__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  background: var(--ct-lila, #D9C9F5);
  box-shadow: 0 18px 40px rgba(12, 5, 28, .34);
  transition: transform .35s ease;
}

.ct-envios-llega__figura:hover .ct-envios-llega__img {
  transform: rotate(0deg) scale(1.015);
}

.ct-envios-llega__pie {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ct-crema, #F7F5F0);
}

.ct-envios-llega__pie-num {
  color: var(--ct-sol, #F9E069);
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .ct-envios-llega__cabecera { grid-template-columns: 1fr; align-items: start; }
  .ct-envios-llega__fotos { grid-template-columns: 1fr; gap: 32px; }
  .ct-envios-llega { padding-block: 52px 0; }
}

/* --- Contacto · Quién contesta --- */

.ct-contacto-quien {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--ct-margen, 24px);
  padding-block: 64px;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.ct-contacto-quien__retrato {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* Una mancha sol detrás del retrato: el mismo recurso que usa el hero para no
   dejar la foto flotando sobre el fondo sin apoyo. */
.ct-contacto-quien__retrato::before {
  content: "";
  position: absolute;
  /* Termina por encima del pie: antes bajaba hasta el borde de la figura y el
     pie quedaba amarillo sobre amarillo. */
  inset: 8% -18px 52px 26px;
  background: var(--ct-sol, #F9E069);
  border-radius: 22px;
  transform: rotate(-3deg);
  z-index: 0;
}

.ct-contacto-quien__img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  transform: rotate(1.5deg);
  box-shadow: 0 18px 44px rgba(12, 5, 28, .38);
}

.ct-contacto-quien__pie {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-crema, #F7F5F0);
}

.ct-contacto-quien__etiqueta {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-sol, #F9E069);
  margin-bottom: 12px;
}

.ct-contacto-quien__titulo {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 54px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--ct-crema, #F7F5F0);
  margin: 0 0 20px;
}

.ct-contacto-quien__parrafo {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(247, 245, 240, .84);
  margin: 0;
  max-width: 52ch;
}

@media (max-width: 860px) {
  .ct-contacto-quien {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-block: 48px;
  }
  .ct-contacto-quien__retrato { max-width: 340px; }
}

/* ==========================================================================
   Lote 31 · El carrusel se arrastra
   --------------------------------------------------------------------------
   El riel se movía sólo con los botones. Ahora se agarra con el ratón, y el
   cursor tiene que decirlo antes de que nadie lo intente: manita abierta encima,
   cerrada mientras se arrastra.
   ========================================================================== */

.ct-carrusel__pista {
  cursor: grab;
  /* Que el navegador no seleccione texto de las cartas al arrastrar. */
  -webkit-user-select: none;
  user-select: none;
}

.ct-carrusel__pista.is-arrastrando {
  cursor: grabbing;
  /* Mientras se arrastra, la carta de debajo no reacciona al puntero: si no,
     el botón «Ver colección» se ilumina de paso y parece que se va a abrir. */
  scroll-snap-type: none;
}

.ct-carrusel__pista.is-arrastrando * {
  cursor: grabbing;
  pointer-events: none;
}

/* Los enlaces y botones sí conservan su cursor propio cuando no se arrastra. */
.ct-carrusel__pista a,
.ct-carrusel__pista button {
  cursor: pointer;
}

/* Un clon del bucle es la misma carta otra vez: no debe anunciarse ni recibir
   foco, y nunca puede quedarse en la opacidad cero de la animación. */
.ct-carrusel__pista [data-ct-clon] {
  opacity: 1 !important;
}

@media (hover: none) {
  /* En pantalla táctil el desplazamiento nativo ya hace el trabajo y la manita
     no significa nada. */
  .ct-carrusel__pista { cursor: auto; }
}

/* ==========================================================================
   Lote 33 · Megamenú: aire arriba y el cruce colección × línea
   ========================================================================== */

/* El panel arrancaba pegado a la línea del navbar. */
.ct-megamenu {
  padding-top: 34px;
}

/* La colección sobre la que está el cursor: se nota cuál está filtrando. */
.ct-megamenu__tab.is-previsualizando {
  color: var(--ct-sol, #F9E069);
}

.ct-megamenu__tab.is-previsualizando::after {
  content: " ·";
  opacity: .6;
}

/* Rótulo de lo que se está filtrando, encima de la rejilla. */
.ct-megamenu__filtro-aviso {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-sol, #F9E069);
  margin: 0 0 14px;
  min-height: 1em;
}

/* Al filtrar, las piezas que no entran se van del flujo sin dejar hueco. */
.ct-megamenu__grilla [data-ct-colecciones][hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .ct-megamenu { padding-top: 22px; }
}

/* ==========================================================================
   Lote 35 · Desplegable propio de los filtros
   --------------------------------------------------------------------------
   Los filtros eran <select> nativos: funcionaban, pero al abrirlos aparecía la
   lista gris del sistema operativo en medio de una página que no tiene un solo
   gris. El <select> sigue debajo —teclado, móvil y envío sin JavaScript intactos—
   y esto es lo que se ve.
   ========================================================================== */

/* Con desplegable propio, el select nativo se esconde pero sigue ahí. */
.ct-filtro-pill--propio select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ct-desplegable {
  position: relative;
  display: inline-flex;
}

.ct-desplegable__boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.ct-desplegable__flecha {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  transition: transform var(--ct-dur-micro, .18s) var(--ct-ease, ease);
}

.ct-desplegable.is-abierto .ct-desplegable__flecha {
  transform: rotate(180deg);
}

.ct-desplegable__boton:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 3px;
}

/* La lista: crema sobre la página, con el borde de la marca. */
.ct-desplegable__lista {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  z-index: 80;
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--ct-crema, #F7F5F0);
  border: 1.5px solid var(--ct-tinta, #1A0F2E);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(12, 5, 28, .28);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*
 * Sin esto la lista se quedaba abierta para siempre: `display: flex` le gana al
 * `[hidden] { display: none }` del navegador, así que el atributo con el que el
 * JavaScript la cierra no hacía nada y los cuatro filtros salían desplegados a la
 * vez. Es el clásico de esconder con un atributo un elemento al que después se le
 * pone display.
 */
.ct-desplegable__lista[hidden] {
  display: none;
}

.ct-desplegable__opcion {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 10px 12px;
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ct-tinta, #1A0F2E);
  cursor: pointer;
  white-space: nowrap;
}

.ct-desplegable__opcion:hover,
.ct-desplegable__opcion:focus-visible {
  background: var(--ct-lila, #D9C9F5);
  outline: none;
}

.ct-desplegable__opcion.is-elegida {
  background: var(--ct-violeta, #4A2A8A);
  color: var(--ct-crema, #F7F5F0);
}

/* Un filtro puesto se nota en la píldora, no sólo dentro de la lista. */
.ct-filtro-pill--propio:has(.ct-desplegable.is-elegido) {
  font-weight: 700;
}

/* En pantallas estrechas la lista se pega al borde izquierdo de la píldora. */
@media (max-width: 600px) {
  .ct-desplegable__lista {
    left: 0;
    min-width: 180px;
  }
}

/* Las piezas escondidas por el filtrado en vivo salen del flujo. */
.ct-catalogo-item[hidden] { display: none !important; }

/* ==========================================================================
   Lote 36 · El índice de colecciones se queda a la vista
   --------------------------------------------------------------------------
   El índice vivía en la portada de la página y se iba con el scroll, justo
   cuando empieza a servir para algo: cuando estás recorriendo las colecciones y
   quieres saltar a otra.
   ========================================================================== */

.ct-colecciones-hero__indice--fijo {
  position: sticky;
  /* Por debajo de la barra de navegación, que también flota. */
  top: 104px;
  align-self: start;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  z-index: 20;
}

/* El enlace de la colección que se está viendo. */
.ct-colecciones-hero__indice-link.is-actual {
  color: var(--ct-sol, #F9E069);
  font-weight: 700;
}

.ct-colecciones-hero__indice-link.is-actual::before {
  content: "→ ";
}

@media (max-width: 900px) {
  /* En vertical el índice iría tapando media pantalla: vuelve al flujo. */
  .ct-colecciones-hero__indice--fijo {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-colecciones-hero__indice--fijo { scroll-behavior: auto; }
}

/* ==========================================================================
   Lote 37 · Carrito: el botón «Quitar» y el aire entre tarjetas
   ========================================================================== */

/*
 * WooCommerce trae su propio estilo para a.remove: una equis roja dentro de una
 * caja de 1em, con `color: red !important`. Nuestro enlace dice «Quitar», no una
 * equis, así que seis letras se salían de una caja de un carácter y se montaban
 * encima de «Guardar para después» — y en rojo, que no es un color de la marca.
 *
 * Es de los pocos sitios donde hace falta !important: el de WooCommerce sólo se
 * gana con otro. Va acotado al carrito para no tocar nada más.
 */
.ct-carrito-item-acciones a.remove,
.ct-carrito-item-acciones a.remove:hover {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace) !important;
  color: var(--ct-tinta, #1A0F2E) !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-align: left !important;
  text-decoration: underline !important;
  padding: 4px 0 !important;
  float: none !important;
  position: static !important;
}

.ct-carrito-item-acciones a.remove:hover {
  opacity: 1;
  color: var(--ct-violeta, #4A2A8A) !important;
}

/* Las dos acciones separadas de verdad, y que bajen en línea aparte si no caben. */
.ct-carrito-item-acciones {
  gap: 10px 20px;
  row-gap: 10px;
}

/*
 * La columna derecha: el resumen amarillo y la tarjeta «Antes de pagar» estaban
 * pegadas, sin nada entre una y otra.
 */
.ct-carrito-col-resumen {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ct-carrito-col-resumen > * + * {
  margin-top: 0;
}

@media (max-width: 900px) {
  .ct-carrito-col-resumen { gap: 20px; }
}

/* ==========================================================================
   Lote 37 · La puerta de «Mi cuenta»
   --------------------------------------------------------------------------
   El panel de cuenta estaba diseñado por dentro; la pantalla de entrar, no. Sin
   plantilla propia salía el formulario de origen de WooCommerce, con sus cajas
   grises, en medio de un sitio que no tiene un solo gris. Va sobre el fondo
   violeta de la página: crema sobre violeta 9,69, sol sobre violeta 7,99.
   ========================================================================== */

.ct-acceso {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--ct-margen, 24px);
  padding-block: 64px 88px;
}

.ct-acceso__cabecera {
  max-width: 54ch;
  margin-bottom: 44px;
}

.ct-acceso__etiqueta {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ct-sol, #F9E069);
  margin-bottom: 14px;
}

.ct-acceso__titular {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 62px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--ct-crema, #F7F5F0);
  margin: 0 0 18px;
}

.ct-acceso__bajada {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(247, 245, 240, .84);
  margin: 0;
}

.ct-acceso__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}

.ct-acceso__grid--solo-entrar {
  grid-template-columns: minmax(0, 480px);
}

.ct-acceso__card {
  background: var(--ct-lila, #D9C9F5);
  color: var(--ct-tinta, #1A0F2E);
  border-radius: var(--ct-radio-tarjeta, 22px);
  padding: 32px 30px;
}

/* La tarjeta de registro es la secundaria: se distingue sin competir. */
.ct-acceso__card--registro {
  background: transparent;
  border: 1.5px solid rgba(247, 245, 240, .34);
  color: var(--ct-crema, #F7F5F0);
}

.ct-acceso__card-titulo {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.15;
  margin: 0 0 8px;
  color: inherit;
}

.ct-acceso__card-nota {
  font-size: 14px;
  line-height: 1.5;
  opacity: .8;
  margin: 0 0 20px;
}

.ct-acceso__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

.ct-acceso__campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.ct-acceso__campo label {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

.ct-acceso__input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ct-texto, 'Karla', sans-serif);
  font-size: 16px;
  color: var(--ct-tinta, #1A0F2E);
  background: var(--ct-crema, #F7F5F0);
  border: 1.5px solid rgba(26, 15, 46, .22);
  border-radius: 12px;
  padding: 13px 15px;
  min-height: 46px;
}

.ct-acceso__input:focus {
  outline: none;
  border-color: var(--ct-violeta, #4A2A8A);
  box-shadow: 0 0 0 3px rgba(74, 42, 138, .22);
}

.ct-acceso__card--registro .ct-acceso__input {
  border-color: rgba(247, 245, 240, .3);
}

.ct-acceso__fila-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.ct-acceso__recordar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.ct-acceso__olvide {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: inherit;
  text-decoration: underline;
}

.ct-acceso__btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.ct-acceso__pie {
  margin-top: 30px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, .6);
}

/* Los avisos de WooCommerce (error de contraseña, etc.) dentro del acceso. */
.ct-acceso .woocommerce-error,
.ct-acceso .woocommerce-message,
.ct-acceso .woocommerce-info {
  border-radius: 14px;
  margin-bottom: 22px;
}

@media (max-width: 820px) {
  .ct-acceso__grid,
  .ct-acceso__grid--solo-entrar {
    grid-template-columns: 1fr;
  }
  .ct-acceso { padding-block: 44px 64px; }
}

/* ---- Y el aire que faltaba dentro del panel de la cuenta ---- */

.ct-cuenta-contenedor > * + * {
  margin-top: 28px;
}

.woocommerce-MyAccount-content > * + * {
  margin-top: 22px;
}

/* ==========================================================================
   Lote 38 · La tarjeta de compra, ahora que es un formulario de verdad
   ========================================================================== */

.ct-compra-form {
  margin: 0;
}

/* La cantidad pasó de un <span> decorativo a un campo real: hay que quitarle
   el aspecto de campo de formulario y las flechitas del navegador. */
input.ct-cantidad-numero {
  width: 44px;
  text-align: center;
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

input.ct-cantidad-numero::-webkit-outer-spin-button,
input.ct-cantidad-numero::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.ct-cantidad-numero:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Cuando la pieza no se puede comprar todavía: se dice, no se deja un botón
   que no hace nada. */
.ct-compra-acciones--no-disponible {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.ct-compra-aviso {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ct-tinta, #1A0F2E);
  opacity: .78;
  margin: 0;
}

/* ==========================================================================
   Lote 39 · «Mi cuenta» por dentro
   --------------------------------------------------------------------------
   El tema tenía diseñado el escritorio de la cuenta, pero no lo que hay dentro
   de cada pestaña: direcciones, detalles y descargas salían con el marcado y los
   estilos de origen de WooCommerce — campos blancos con borde marrón y esquinas
   de 4 px, y una rejilla de dos columnas hecha con floats, sin separación entre
   una y otra.
   En lugar de escribir una plantilla por pantalla, se viste el marcado de
   WooCommerce: así quedan cubiertas también las pantallas que no se han mirado.

   Ojo con el contenedor: la plantilla del tema no usa .woocommerce-MyAccount-content
   sino .ct-cuenta-contenido, así que colgar de la clase de WooCommerce —que es lo
   que uno esperaría— no aplicaba nada.
   ========================================================================== */

/* ---- Separación entre bloques ---- */

.ct-cuenta-contenido > * + * {
  margin-top: 26px;
}

.ct-cuenta-contenido > h2,
.ct-cuenta-contenido > h3 {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  margin-block: 34px 0;
  color: inherit;
}

/* ---- Las dos columnas de WooCommerce, sin floats ---- */

.ct-cuenta-contenido .col2-set,
.ct-cuenta-contenido .u-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
}

.ct-cuenta-contenido .col2-set::before,
.ct-cuenta-contenido .col2-set::after,
.ct-cuenta-contenido .u-columns::before,
.ct-cuenta-contenido .u-columns::after {
  content: none;
}

.ct-cuenta-contenido .col-1,
.ct-cuenta-contenido .col-2,
.ct-cuenta-contenido .u-column1,
.ct-cuenta-contenido .u-column2 {
  float: none;
  width: auto;
  max-width: none;
  padding: 0;
}

@media (max-width: 780px) {
  .ct-cuenta-contenido .col2-set,
  .ct-cuenta-contenido .u-columns {
    grid-template-columns: 1fr;
  }
}

/* ---- Las direcciones, como tarjetas ---- */

/*
 * Con la misma especificidad que el reinicio de columnas de arriba —que le ponía
 * padding 0 a .col-1— y escrito después, para que gane. La tarjeta de dirección
 * ES la columna: las dos clases viven en el mismo elemento.
 */
.ct-cuenta-contenido .woocommerce-Address {
  background: var(--ct-lila, #D9C9F5);
  color: var(--ct-tinta, #1A0F2E);
  border-radius: var(--ct-radio-tarjeta, 20px);
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  margin: 0;
  color: var(--ct-tinta, #1A0F2E);
}

.woocommerce-Address-title .edit {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ct-violeta, #4A2A8A);
  text-decoration: underline;
  white-space: nowrap;
}

/*
 * La dirección salía en cursiva, apretada y sin saltos: es un <address>, que los
 * navegadores inclinan por costumbre. Una dirección se lee en líneas.
 */
.woocommerce-Address address,
.ct-cuenta-contenido address {
  font-family: var(--ct-texto, 'Karla', sans-serif);
  font-style: normal;
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  color: var(--ct-tinta, #1A0F2E);
  opacity: .88;
}

/* ---- Los formularios ---- */

.ct-cuenta-contenido form {
  margin: 0;
}

.ct-cuenta-contenido .woocommerce-form-row,
.ct-cuenta-contenido .form-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 20px;
  padding: 0;
  float: none;
  width: auto;
}

/* Los pares que WooCommerce marca como mitad de fila, en dos columnas. */
@media (min-width: 680px) {
  .ct-cuenta-contenido .form-row-first,
  .ct-cuenta-contenido .form-row-last {
    display: inline-flex;
    width: calc(50% - 10px);
    vertical-align: top;
  }
  .ct-cuenta-contenido .form-row-first { margin-right: 16px; }
}

.ct-cuenta-contenido label {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

/*
 * La regla de WooCommerce para estos campos es
 * `.woocommerce form .form-row input.input-text` — tres clases y dos elementos.
 * Colgar de `.ct-cuenta-contenido input[type=text]` pierde por especificidad y
 * los campos seguían blancos con esquinas de 4 px. Se iguala el terreno en vez
 * de recurrir a !important.
 */
.woocommerce .ct-cuenta-contenido form .form-row input.input-text,
.woocommerce .ct-cuenta-contenido form .form-row textarea,
.woocommerce .ct-cuenta-contenido form .form-row select,
.woocommerce .ct-cuenta-contenido form input.input-text,
.woocommerce .ct-cuenta-contenido input.input-text,
.ct-cuenta-contenido input[type="text"],
.ct-cuenta-contenido input[type="email"],
.ct-cuenta-contenido input[type="tel"],
.ct-cuenta-contenido input[type="password"],
.ct-cuenta-contenido input[type="number"],
.ct-cuenta-contenido select,
.ct-cuenta-contenido textarea,
.ct-cuenta-contenido .select2-selection {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--ct-texto, 'Karla', sans-serif);
  font-size: 16px;
  color: var(--ct-tinta, #1A0F2E);
  background: var(--ct-crema, #F7F5F0);
  border: 1.5px solid rgba(26, 15, 46, .22);
  border-radius: 12px;
  padding: 12px 15px;
  min-height: 46px;
}

.woocommerce .ct-cuenta-contenido form .form-row input.input-text:focus,
.ct-cuenta-contenido input:focus,
.ct-cuenta-contenido select:focus,
.ct-cuenta-contenido textarea:focus {
  outline: none;
  border-color: var(--ct-violeta, #4A2A8A);
  box-shadow: 0 0 0 3px rgba(74, 42, 138, .2);
}

/* El bloque de cambio de contraseña: una tarjeta, no tres campos sueltos. */
.ct-cuenta-contenido fieldset {
  background: rgba(247, 245, 240, .08);
  border: 1.5px solid rgba(247, 245, 240, .22);
  border-radius: var(--ct-radio-tarjeta, 20px);
  padding: 26px;
  margin: 30px 0 26px;
}

.ct-cuenta-contenido legend {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 600;
  font-size: 18px;
  padding: 0 10px;
  margin-left: -10px;
}

.ct-cuenta-contenido .woocommerce-Button,
.ct-cuenta-contenido button[type="submit"],
.ct-cuenta-contenido input[type="submit"] {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ct-sol, #F9E069);
  color: var(--ct-tinta, #1A0F2E);
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  min-height: 48px;
  cursor: pointer;
}

.ct-cuenta-contenido .woocommerce-Button:hover,
.ct-cuenta-contenido button[type="submit"]:hover,
.ct-cuenta-contenido input[type="submit"]:hover {
  background: var(--ct-lila, #D9C9F5);
}

.ct-cuenta-contenido em,
.ct-cuenta-contenido .woocommerce-Input + span.description {
  font-style: normal;
  font-size: 13px;
  opacity: .75;
}

/* ---- Tablas (pedidos, descargas) ---- */

.ct-cuenta-contenido table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.ct-cuenta-contenido table th,
.ct-cuenta-contenido table td {
  text-align: left;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid rgba(247, 245, 240, .18);
  vertical-align: middle;
}

.ct-cuenta-contenido table thead th {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}

/* ---- Avisos ---- */

.ct-cuenta-contenido .woocommerce-message,
.ct-cuenta-contenido .woocommerce-error,
.ct-cuenta-contenido .woocommerce-info {
  border-radius: 14px;
  margin-bottom: 24px;
}

/* ==========================================================================
   Lote 43 · El escritorio de la cuenta, con aire; y las direcciones, con diseño
   --------------------------------------------------------------------------
   Tres cosas que Manuel señaló mirando su propia cuenta:

   1. «Los elementos del dashboard están pegados uno al otro». Literal:
      .ct-cuenta-dashboard era un <div> en flujo normal, sin gap, y sus dos
      hijos —el bloque de pedido en curso y la lista— tenían margen 0. Nada los
      separaba. Lo mismo dentro de la pestaña «Pedidos».

   2. «La pestaña de direcciones no le veo nada de diseño, son 2 cuadros feos».
      Salía la plantilla de origen de WooCommerce. Ahora hay una propia
      (woocommerce/myaccount/my-address.php) y aquí está su ropa.

   3. El escritorio enseñaba un pedido inventado y paletas con frecuencias
      inventadas. Eso se arregló en el PHP; aquí quedan el estado «no tienes
      nada en producción» y los vacíos honestos que hacían falta.

   Recordatorio de contraste: estas pantallas van sobre violeta #4A2A8A. Texto
   crema (9.69) o, dentro de tarjeta lila, tinta (11.83). Nunca sol sobre lila
   (1.17) ni crema sobre sol (1.21).
   ========================================================================== */

/* ---- 1. Separación entre bloques del escritorio ---- */

.ct-cuenta-dashboard {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ct-cuenta-pedidos-wrap {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* La grilla secundaria ya trae su propio gap interno; lo que faltaba era el
   aire respecto a la lista de pedidos, que ahora lo pone el flex de arriba. */
.ct-cuenta-dashboard > .ct-cuenta-grid-secundario {
  margin-top: 2px;
}

@media (max-width: 900px) {
  .ct-cuenta-dashboard,
  .ct-cuenta-pedidos-wrap {
    gap: 22px;
  }
}

/* ---- 2. Sin pedido en curso ---- */

.ct-cuenta-sin-curso {
  background: var(--ct-lila, #D9C9F5);
  color: var(--ct-tinta, #1A0F2E);
  border: 1px solid rgba(26, 15, 46, .12);
  border-radius: 24px;
  padding: 30px 34px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}

.ct-cuenta-sin-curso__etiqueta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-violeta, #4A2A8A);
}

.ct-cuenta-sin-curso__titulo {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  color: var(--ct-tinta, #1A0F2E);
}

.ct-cuenta-sin-curso__desc {
  font-size: 15px;
  line-height: 1.6;
  max-width: 48ch;
  margin: 0;
  color: rgba(26, 15, 46, .82);
}

.ct-cuenta-sin-curso__boton {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ct-violeta, #4A2A8A);
  color: var(--ct-sol, #F9E069);
  border-radius: 999px;
  padding: 14px 28px;
  text-decoration: none;
}

.ct-cuenta-sin-curso__boton:hover {
  background: var(--ct-tinta, #1A0F2E);
  color: var(--ct-sol, #F9E069);
}

/* ---- 3. Vacíos honestos de los dos resúmenes ---- */

.ct-cuenta-colores-resumen__vacio,
.ct-cuenta-direcciones-resumen__vacio {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: rgba(26, 15, 46, .8);
}

.ct-cuenta-colores-resumen__enlace {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-violeta, #4A2A8A);
  text-decoration: underline;
  align-self: flex-start;
}

.ct-cuenta-direccion-caja__header {
  justify-content: space-between;
}

.ct-cuenta-direccion-caja__editar {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-violeta, #4A2A8A);
  text-decoration: underline;
  white-space: nowrap;
}

/* ==========================================================================
   Lote 43b · La pestaña de Direcciones
   ========================================================================== */

.ct-direcciones {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ct-direcciones__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-direcciones__titulo {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
  color: var(--ct-crema, #F7F5F0);
}

.ct-direcciones__bajada {
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
  color: rgba(247, 245, 240, .84);
}

.ct-direcciones__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 820px) {
  .ct-direcciones__grid {
    grid-template-columns: 1fr;
  }
}

/* La tarjeta */

.ct-direccion-card {
  background: var(--ct-lila, #D9C9F5);
  color: var(--ct-tinta, #1A0F2E);
  border: 1px solid rgba(26, 15, 46, .12);
  border-radius: 24px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

/* Sin guardar: la tarjeta baja el tono y el borde se vuelve de puntos, para que
   se lea como un hueco a llenar y no como un dato que ya existe. */
.ct-direccion-card.is-vacia {
  background: rgba(247, 245, 240, .07);
  border: 1.5px dashed rgba(247, 245, 240, .4);
  color: var(--ct-crema, #F7F5F0);
}

.ct-direccion-card__cabecera {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-direccion-card__etiqueta {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ct-violeta, #4A2A8A);
  color: var(--ct-crema, #F7F5F0);
  border-radius: 999px;
  padding: 6px 13px;
}

.ct-direccion-card.is-vacia .ct-direccion-card__etiqueta {
  background: rgba(247, 245, 240, .16);
  color: var(--ct-crema, #F7F5F0);
}

.ct-direccion-card__titulo {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  color: inherit;
}

.ct-direccion-card__oficio {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  opacity: .78;
}

/* El cuerpo crece para que el pie de las dos tarjetas quede a la misma altura
   aunque una dirección tenga cuatro líneas y la otra dos. */
.ct-direccion-card__cuerpo {
  flex: 1 1 auto;
  border-top: 1px solid currentColor;
  border-color: rgba(26, 15, 46, .16);
  padding-top: 16px;
}

.ct-direccion-card.is-vacia .ct-direccion-card__cuerpo {
  border-color: rgba(247, 245, 240, .28);
}

.ct-direccion-card__texto {
  font-family: var(--ct-texto, 'Karla', sans-serif);
  font-style: normal;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  color: inherit;
}

.ct-direccion-card__vacia {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  opacity: .75;
}

.ct-direccion-card__pie {
  display: flex;
}

.ct-direccion-card__accion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--ct-tinta, #1A0F2E);
  color: var(--ct-sol, #F9E069);
  border-radius: 999px;
  padding: 13px 24px;
  text-decoration: none;
}

.ct-direccion-card__accion:hover {
  background: var(--ct-violeta, #4A2A8A);
  color: var(--ct-sol, #F9E069);
}

.ct-direccion-card.is-vacia .ct-direccion-card__accion {
  background: var(--ct-sol, #F9E069);
  color: var(--ct-tinta, #1A0F2E);
}

.ct-direccion-card.is-vacia .ct-direccion-card__accion:hover {
  background: var(--ct-crema, #F7F5F0);
  color: var(--ct-tinta, #1A0F2E);
}

.ct-direcciones__nota {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.7;
  margin: 0;
  color: rgba(247, 245, 240, .68);
}


/* ==========================================================================
   Lote 44 · El índice de colecciones, flotante de verdad
   --------------------------------------------------------------------------
   El índice de la cabecera se iba con la cabecera. Se intentó con
   `position: sticky` y no podía funcionar por dos motivos de estructura, los
   dos explicados en assets/js/indice-colecciones.js: su bloque contenedor
   termina donde termina el hero —así que no tiene recorrido— y el hero lleva
   `overflow: hidden`, que anula el sticky de sus descendientes.

   La primera versión de este riel iba pegado al margen izquierdo. Medido en la
   página: el riel llegaba hasta x=173 y el contenido de las bandas empieza en
   x=52 (--ct-margen). Se montaba encima del texto. El margen lateral no da
   para una columna de nombres, y estrecharlo hasta cuarenta píxeles habría
   dejado el índice sin nombres, que es justo lo que se quería conservar.

   Así que es una tira superior: aparece cuando el hero ya pasó, se retira
   cuando la lista termina, no le quita ancho a ninguna banda y sigue estando
   en pantallas cortas, donde el índice del hero queda todavía más lejos.

   Fondo tinta porque flota por encima de bandas de colores distintos —Raíz va
   sobre verde, Antojo y Pausa sobre los suyos— y un texto suelto tendría
   contraste sobre una y ninguno sobre la siguiente. Tinta con crema: 15:1.
   El activo, sol sobre tinta: 13.80.
   ========================================================================== */

.ct-indice-flotante {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  background: var(--ct-tinta, #1A0F2E);
  border-bottom: 1px solid rgba(247, 245, 240, .16);
  transform: translateY(-101%);
  opacity: 0;
  visibility: hidden;
  transition: transform .3s var(--ct-ease, cubic-bezier(.22, .61, .36, 1)), opacity .3s ease, visibility .3s;
}

.ct-indice-flotante.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.ct-indice-flotante__lista {
  list-style: none;
  margin: 0;
  padding: 0 var(--ct-margen, 52px);
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ct-indice-flotante__lista::-webkit-scrollbar {
  display: none;
}

.ct-indice-flotante__item {
  margin: 0;
  flex: 0 0 auto;
}

.ct-indice-flotante__enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(247, 245, 240, .72);
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease, background-color .2s ease;
}

.ct-indice-flotante__enlace:hover {
  color: var(--ct-crema, #F7F5F0);
  background: rgba(247, 245, 240, .1);
}

/* La rayita crece cuando esa colección es la que se está mirando: el riel dice
   dónde vas sin tener que leerlo entero. */
.ct-indice-flotante__marca {
  display: block;
  width: 10px;
  height: 2px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .5;
  transition: width .24s ease, opacity .24s ease;
}

.ct-indice-flotante__enlace.is-actual {
  color: var(--ct-sol, #F9E069);
}

.ct-indice-flotante__enlace.is-actual .ct-indice-flotante__marca {
  width: 24px;
  opacity: 1;
}

.ct-indice-flotante__texto {
  display: block;
}

/* Al saltar desde el índice, la banda no debe quedar tapada por la propia tira. */
.ct-colecciones-lista .ct-banda,
.ct-colecciones-lista [id^="col-"] {
  scroll-margin-top: 70px;
}

@media (max-width: 720px) {
  .ct-indice-flotante__lista {
    min-height: 48px;
    gap: 2px;
  }
  .ct-indice-flotante__enlace {
    font-size: 10px;
    padding: 8px 11px;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-indice-flotante,
  .ct-indice-flotante__marca,
  .ct-indice-flotante__enlace {
    transition: none;
  }
}

/* ==========================================================================
   Lote 46 · El componente de fotografía
   --------------------------------------------------------------------------
   El hueco donde va una foto de ambiente: proporción fija, imagen recortada
   dentro y el velo que hace legible el texto que vaya encima.

   Sobre el velo, que es la parte delicada de todo este cambio: los contrastes
   del tema están medidos uno por uno —crema sobre violeta 9,69:1, tinta sobre
   sol 13,80:1— porque los fondos son planos. Una fotografía no da esa
   garantía: la misma foto tiene zonas claras y oscuras, y el texto que se lee
   en una se pierde en la otra.

   Los valores de abajo están calculados para el peor caso, blanco puro debajo:
   con tinta al 88 % el texto crema sale a 12,0:1, muy por encima del 4,5:1 que
   pide la norma y del 7:1 que nos pusimos. No son un degradado «a ojo».

   Y cuando todavía no hay foto, el hueco no se queda vacío ni se rellena con
   una imagen prestada: dibuja el marco con el encuadre escrito encima. La
   página misma sirve de guion para la sesión.
   ========================================================================== */

.ct-foto {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--ct-foto-ratio, 4 / 5);
  overflow: hidden;
  background: var(--ct-hondo, #2A1560);
  border-radius: var(--ct-radio-foto, 20px);
  box-sizing: border-box;
}

/* Una foto que sangra hasta el borde de su sección no lleva esquinas. */
.ct-foto--sangra {
  border-radius: 0;
}

.ct-foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ct-foto-pos, 50% 50%);
  display: block;
}

.ct-foto__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/*
 * Velo de izquierda a derecha, para el hero: opaco donde cae el titular,
 * transparente sobre el sujeto. El 88 % llega hasta el 34 % del ancho y se
 * apaga al 72 %, de modo que la mitad izquierda entera queda cubierta.
 */
.ct-foto--velo-izq .ct-foto__velo {
  background: linear-gradient(
    to right,
    rgba(26, 15, 46, .88) 0%,
    rgba(26, 15, 46, .88) 34%,
    rgba(26, 15, 46, .62) 50%,
    rgba(26, 15, 46, 0) 72%
  );
}

/*
 * Viñeta arriba y abajo, para las cartas de colección: el nombre va en la
 * franja superior y el párrafo con el botón en la inferior. El centro se deja
 * limpio para que se vea la pieza.
 */
.ct-foto--vineta .ct-foto__velo {
  background:
    linear-gradient(to bottom, rgba(26, 15, 46, .84) 0%, rgba(26, 15, 46, 0) 26%),
    linear-gradient(to top, rgba(26, 15, 46, .88) 0%, rgba(26, 15, 46, .62) 18%, rgba(26, 15, 46, 0) 32%);
}

/* En pantalla estrecha el hero se recorta a vertical y el titular baja: el
   velo tiene que girar con él o el texto queda sobre la parte clara. */
@media (max-width: 760px) {
  .ct-foto--velo-izq .ct-foto__velo {
    background: linear-gradient(
      to top,
      rgba(26, 15, 46, .90) 0%,
      rgba(26, 15, 46, .90) 38%,
      rgba(26, 15, 46, .58) 58%,
      rgba(26, 15, 46, 0) 88%
    );
  }
}

/* ---- El marco, mientras no haya foto ---- */

/*
 * Va sobre tinta con letra crema y sol porque tiene que leerse igual de bien
 * sobre el violeta del home, el sol de la banda del sistema o el crema de una
 * informativa. Un marco en violeta sobre fondo violeta no se vería.
 */
.ct-foto--vacia {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(249, 224, 105, .07) 0 8px,
      rgba(249, 224, 105, 0) 8px 16px
    ),
    var(--ct-tinta, #1A0F2E);
  border: 2px dashed rgba(249, 224, 105, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
}

.ct-foto__marco {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 34ch;
  position: relative;
  z-index: 2;
}

.ct-foto__marco-nombre {
  font-family: var(--ct-fuente-titular, 'Bricolage Grotesque', sans-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.15;
  color: var(--ct-crema, #F7F5F0);
}

.ct-foto__marco-formato {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ct-sol, #F9E069);
  font-variant-numeric: tabular-nums;
}

.ct-foto__marco-encuadre {
  font-family: var(--ct-texto, 'Karla', sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(247, 245, 240, .78);
}

/* La zona que hay que dejar libre, dibujada a escala dentro del marco. */
.ct-foto__zona {
  position: absolute;
  border: 1px dashed rgba(249, 224, 105, .5);
  background: rgba(249, 224, 105, .06);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 7px 9px;
  z-index: 1;
  pointer-events: none;
}

.ct-foto__zona > span {
  font-family: var(--ct-fuente-mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(249, 224, 105, .8);
}

/* En marcos pequeños el texto del marco no cabe: se queda el formato, que es
   el dato que hace falta para disparar. */
@media (max-width: 520px) {
  .ct-foto__marco-encuadre { display: none; }
  .ct-foto__marco-nombre { font-size: 16px; }
}


/* ==========================================================================
   El esquema de una base de clicker
   ==========================================================================
   Se dibuja en PHP a partir de la geometría de la base (inc/clicker.php) y se
   usa en dos sitios: la mesa de /armar-clicker/ y las tarjetas de las dos mesas
   en el home. Por eso vive aquí y no en una hoja de pantalla: estaba en
   pantallas/clicker.css y en el home salía un bulto negro sin huecos, porque
   esa hoja no se carga ahí.

   Quien lo use decide los colores con tres variables: --ct-cl-base (el cuerpo),
   --ct-cl-keycap (las teclas) y --ct-cl-hueco, que es el color del fondo sobre
   el que se apoya: un agujero es el fondo que se ve por detrás.
   ========================================================================== */

/* ------------------------------------------------- EL DIBUJO DE LA PIEZA */

.ct-cl-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ct-cl-svg__cuerpo rect,
.ct-cl-svg__argolla rect {
  fill: var(--ct-cl-base, var(--ct-lila));
}

.ct-cl-svg__aire {
  fill: var(--ct-cl-hueco, #2A1560);
}

/* Falda y tope son la misma keycap y el mismo filamento. Lo que las separa es
   el surco: un trazo oscuro translúcido, que funciona sobre cualquier color sin
   tener que escoger un segundo. */
.ct-cl-svg__falda {
  fill: var(--ct-cl-keycap, var(--ct-crema));
}

.ct-cl-svg__tope {
  fill: var(--ct-cl-keycap, var(--ct-crema));
  stroke: rgba(26, 15, 46, .22);
  stroke-width: .7;
}

.ct-cl-svg__letra {
  fill: var(--ct-cl-letra, var(--ct-tinta));
  font-family: var(--ct-fuente-titulo, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0;
  pointer-events: none;
}