/* ── Reja de catálogo y su card ──
   La comparten las dos secciones que venden: clases en vivo y cursos grabados.
   La card es la misma pieza; lo único que cambia entre una y otra es el
   contenido del bloque de datos (HORARIO o LECCIONES) y el juego de insignias.

   El color de marca aparece solo en la insignia, en la portada sin imagen y en
   el borde y el CTA del hover. Nada de fondos de sección de marca, ni líneas
   horizontales dentro de la card: separa el espaciado. */

.seccion-ac {
  padding: var(--esp-11) var(--margen-lateral) 96px;
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
}

.seccion-ac__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-6);
}
.seccion-ac__titulo   { margin: 0; color: var(--tinta); }
.seccion-ac__contador { margin: 0; font-size: 13px; letter-spacing: .06em; text-align: right; }

/* Siempre 3 columnas: con 2 clases las cards conservan su ancho y quedan a la
   izquierda, no se estiran ni se centran. A lo alto sí se igualan dentro de su
   fila —de ahí el margin-top:auto del precio—, que es lo que alinea los precios
   y los CTA de una misma fila. */
.seccion-ac__reja {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-7);
}

/* ── Card ── */
.card-ac {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio-card);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.card-ac:hover {
  border-color: var(--marca);
  box-shadow: var(--sombra-md);
  transform: translateY(-3px);
}

/* ── Portada ── */
.card-ac__portada {
  position: relative;
  height: 184px;
  flex: none;
  background: var(--fondo-suave);
}
.card-ac__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin imagen: el nombre real del curso hace de portada, abajo a la izquierda. */
.card-ac__portada--tipografica {
  background: var(--marca-suave);
  display: flex;
  align-items: flex-end;
  padding: 22px;
}
.card-ac__portada-nombre {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--marca-fuerte);
  /* La portada tiene alto fijo y el texto se apoya abajo, así que un nombre
     largo crecía hacia arriba y se cortaba a media palabra. Acotado a las
     líneas que caben de verdad, termina en puntos suspensivos. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.card-ac__sello {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio-insignia);
  padding: 5px 9px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  color: var(--texto);
}

/* ── Cuerpo ── */
.card-ac__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-6) var(--esp-6) 24px;
}

.card-ac__insignias { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

.card-ac__nombre { margin: 0; color: var(--tinta); }

.card-ac__descripcion {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ── Bloque de datos: HORARIO en una clase, LECCIONES en un curso ── */
.card-ac__datos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.card-ac__datos-fila {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-3);
  font-size: 14px;
  line-height: 1.4;
}
.card-ac__dato   { font-weight: 500; color: var(--tinta-2); }
.card-ac__dato-sec { color: var(--texto); }
.card-ac__meta { margin: 2px 0 0; }

/* ── Pie de la card ──
   En escritorio no aporta nada: se comporta como si no existiera y son el
   precio y el CTA los que se apilan. En móvil se convierte en una fila. */
.card-ac__pie {
  display: contents;
}

/* ── Precios ── */
.card-ac__precios {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin-top: auto;      /* pega el precio y el CTA al pie de la card */
  padding-top: var(--esp-2);
}
.card-ac__precio-principal {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}
.card-ac__monto  { color: var(--tinta); }
.card-ac__forma  { font-size: 15px; font-weight: 500; color: var(--texto); }
.card-ac__otros-precios { margin: 0; }

/* ── CTA ── */
.card-ac__cta {
  display: block;
  width: 100%;
  text-align: center;
  background: #fff;
  border: 1px solid var(--linea-campo);
  border-radius: var(--radio-boton);
  padding: 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.card-ac:hover .card-ac__cta {
  background: var(--marca-degradado);
  border-color: var(--marca);
  color: var(--sobre-marca);
}

/* ── Reja: 2 columnas antes de 1100px, 1 antes de 720px ── */
@media (max-width: 1100px) {
  .seccion-ac__reja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .seccion-ac { padding: 56px var(--margen-lateral) 64px; gap: var(--esp-5); }

  /* "Clases en vivo" y "4 CLASES ABIERTAS" no caben en una línea de 335px:
     juntos parten los dos en dos y se lee fatal. Apilados. */
  .seccion-ac__cabecera { flex-direction: column; align-items: flex-start; gap: 6px; }
  .seccion-ac__contador { text-align: left; }
  .seccion-ac__reja { grid-template-columns: minmax(0, 1fr); }

  .card-ac__portada { height: 164px; }
  .card-ac__portada--tipografica { height: 132px; padding: 18px; }
  /* La portada baja a 132px en móvil: caben tres líneas, no cuatro. */
  .card-ac__portada-nombre { font-size: 24px; -webkit-line-clamp: 3; line-clamp: 3; }
  .card-ac__cuerpo { padding: var(--esp-5); gap: 14px; }

  /* Precio y CTA comparten una fila al pie: en una card a ancho completo,
     apilarlos desperdicia el ancho y alarga mucho el scroll del catálogo. */
  .card-ac__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    margin-top: auto;
    padding-top: var(--esp-2);
  }
  .card-ac__pie .card-ac__precios { margin-top: 0; padding-top: 0; min-width: 0; }
  .card-ac__pie .card-ac__cta { width: auto; flex: none; padding: 13px 18px; min-height: 44px; }
}

/* El translate del hover molesta a quien pidió menos movimiento; el cambio de
   borde y de CTA se queda, que es la señal de que la card es clicable. */
@media (prefers-reduced-motion: reduce) {
  .card-ac, .card-ac__cta { transition: none; }
  .card-ac:hover { transform: none; }
}