/* crowder theme · tenant=localhost · surface=site · rev=12 · kind=custom */
@layer tenant-site {
@scope (:root[data-theme-public="1"]) {
/* Vitrina sobre oscuro — tarjetas claras sobre una página oscura. */

.cms-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .cms-categories__grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
  }
  .cms-categories__card { scroll-snap-align: center; }
}

/* La tarjeta clara NO se hace con los tokens del sitio: `surface`/`fg` los leen
   todas las pantallas (el acordeón de FAQ, el footer), así que ponerlos claros
   dejaba texto blanco sobre blanco en el resto del sitio. Se redefinen ACÁ,
   dentro de la tarjeta: una custom property se hereda, y el
   `background: var(--card-bg, …)` que el componente pone inline se resuelve en
   el scope del propio elemento. */
.cms-categories__card {
  --card-bg: #FFFFFF;
  --card-border-color: #FFFFFF;
  --fg: #0F1013;
  --muted: #5D636B;
  --subtle: #8B9199;
  --line: #E3E6EA;
  gap: 0;
  text-align: center;
}

.cms-categories__card-badge {
  position: static;
  order: 0;
  transform: none;
  translate: none;
  margin: 0 auto 12px;
}
.cms-categories__card--recommended { margin-top: 0; }
.cms-categories__card-header { order: 1; }
.cms-categories__card-description { order: 2; }
.cms-categories__price { order: 3; }
.cms-categories__benefits { order: 4; flex: 1 1 auto; }
.cms-categories__card-slots { order: 5; }
.cms-categories__cta { order: 6; }

.cms-categories__card-header {
  justify-content: center;
  padding-bottom: 4px;
}
.cms-categories__card-name {
  font-family: var(--club-font-display);
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.cms-categories__card-dot,
.cms-categories__card-header .ml-auto {
  display: none;
}

/* Precio: caja de contorno centrada, no una etiqueta de color. */
.cms-categories__price {
  justify-content: center;
  white-space: nowrap;
  margin: 12px auto 20px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.cms-categories__price .font-mono {
  font-family: var(--club-font-sans);
  font-size: 17px;
  letter-spacing: 0;
}

.cms-categories__benefits { gap: 0; text-align: left; }
.cms-categories__benefit {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
}
.cms-categories__benefit:last-child { border-bottom: 0; }

.cms-categories__cta {
  width: 100%;
  margin-top: 20px;
  font-size: 12.5px;
}
}
}