/* La estructura de la tarjeta vive en el CSS del frontend; aquí queda sólo lo
   propio del módulo: recorte del texto y realce al pasar el puntero. */

.alta-treatment-card__media { overflow: hidden; }
.alta-treatment-card__media img { transition: transform .35s ease; }
.alta-treatment-card:hover .alta-treatment-card__media img { transform: scale(1.03); }

.alta-treatment-card__summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.alta-treatment-card__action { flex-shrink: 0; }

/* El término médico completo puede ser largo: la etiqueta no debe partirse
   ni tapar la foto. */
.alta-treatment-card__category {
  max-width: calc(100% - 2.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Portada · catálogo en rejilla

   En escritorio la sección de portada enseña las siete tarjetas de una vez,
   con los mismos filtros del hub; el carrusel queda sólo para móvil, donde
   la rejilla completa alargaría la página.
-------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .alta-treatments--grid .alta-carousel__viewport { overflow: visible; scroll-snap-type: none; }

  .alta-treatments--grid .alta-carousel__track {
    gap: 1.25rem;
    grid-auto-columns: unset;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alta-treatments--grid .alta-carousel__track > * { scroll-snap-align: none; }
  .alta-treatments--grid .alta-carousel__controls { display: none; }

  /* Tarjeta compacta, como en el hub: siete tarjetas piden cuerpo contenido. */
  .alta-treatments--grid .alta-treatment-card__body { padding: 1.1rem 1.25rem 1.25rem; }
  .alta-treatments--grid .alta-treatment-card__body h3 { font-size: 1.25rem; }

  /* La nota de promoción cede su sitio a los filtros. */
  .alta-treatments__note { display: none; }
}

@media (min-width: 62.01rem) {
  .alta-treatments--grid .alta-carousel__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 75.01rem) {
  .alta-treatments--grid .alta-carousel__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Hub de tratamientos
-------------------------------------------------------------------------- */
.alta-catalog-intro { background: var(--alta-paper); }
.alta-catalog-intro__grid { align-items: center; display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); }
.alta-catalog-intro h1 { font-size: var(--alta-fs-display); line-height: 1.04; margin: 0 0 1rem; }
.alta-catalog-intro .alta-page-hero__intro { margin-bottom: 1.75rem; }

.alta-catalog-intro__panel { background: var(--alta-aqua-900); border-radius: var(--alta-radius-lg); color: #fff; padding: clamp(1.75rem, 3vw, 2.5rem); }
.alta-catalog-intro__panel ul { display: grid; gap: .85rem; list-style: none; margin: 0; padding: 0; }
.alta-catalog-intro__panel li { color: var(--alta-aqua-100); line-height: 1.5; padding-left: 1.6rem; position: relative; }
.alta-catalog-intro__panel li::before { color: var(--alta-aqua-400); content: "✓"; left: 0; position: absolute; }

.alta-catalog { background: var(--alta-paper); }
.alta-catalog > .alta-site-shell { display: grid; gap: var(--alta-screen-gap); }
.alta-catalog__filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.alta-chip[aria-pressed="true"] { background: var(--alta-aqua-900); border-color: var(--alta-aqua-900); color: #fff; }

/* Siete tarjetas en cuatro columnas: dos filas que caben en una pantalla. */
.alta-catalog__grid { gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.alta-catalog__grid > li { min-width: 0; }
.alta-catalog__grid .alta-treatment-card__body { padding: 1.1rem 1.25rem 1.25rem; }
.alta-catalog__grid .alta-treatment-card__body h3 { font-size: 1.25rem; }

@media (max-width: 75rem) {
  .alta-catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 62rem) {
  .alta-catalog-intro__grid { grid-template-columns: 1fr; }
  .alta-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
  .alta-catalog__grid { grid-template-columns: 1fr; }

  /* Los filtros del hub se vuelven carrusel horizontal, como la nube del
     blog: una fila deslizable en vez de una nube que crece hacia abajo. */
  .alta-catalog__filters {
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block: .25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .alta-catalog__filters::-webkit-scrollbar { display: none; }
  .alta-catalog__filters .alta-chip { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

  /* En la portada móvil mandan el carrusel y la nota: los filtros son de la
     rejilla de escritorio. Va después de la base `.alta-catalog__filters`
     porque a igual especificidad decide el orden. */
  .alta-treatments__filters { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .alta-treatment-card__media img { transition: none; }
  .alta-treatment-card:hover .alta-treatment-card__media img { transform: none; }
}