/* ==========================================================================
   QworkLab · cursos.css
   Página de cursos abiertos. Depende de base.css.

   Segundo destinatario del sitio: acá compra una persona, no una empresa.
   Por eso vive fuera del home y no entra en la numeración de los siete
   programas. El formulario y los campos son los mismos de base.css.
   ========================================================================== */

/* ==========================================================================
   Encabezado
   ========================================================================== */

.cursos__encabezado {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
}

.cursos__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--tinta);
  text-wrap: balance;
}

.cursos__bajada {
  font-size: var(--cuerpo-dest);
  line-height: 1.6;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

/* El filtro protege el embudo del home: quien viene por su empresa se
   entera acá mismo de que su producto es otro, sin tener que volver. */
.cursos__filtro {
  /* Es lo primero de la sección clara y va antes de las fichas: el margen
     inferior es lo que lo separa de ellas, y el ancho acotado lo mantiene
     como nota al lector y no como banda. */
  max-width: 760px;
  margin-bottom: clamp(30px, 3.6vw, 46px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 16px 18px;
  border: 1px solid var(--papel-borde-fino);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-cuerpo);
}

.cursos__filtro-rotulo {
  flex: 0 0 auto;
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

/* ==========================================================================
   Los cursos
   ========================================================================== */

.cursos__lista {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}

.curso {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
  padding: clamp(22px, 3vw, 38px);
  background: var(--papel-alt);
}

.curso__cabecera {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.curso__nivel {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-profundo);
}

.curso__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--tinta);
  text-wrap: balance;
}

.curso__resumen {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

/* --- Ficha de datos ------------------------------------------------------ */

.curso__ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(24px, 4vw, 52px);
  padding-block: clamp(18px, 2vw, 22px);
  border-block: 1px solid var(--papel-borde);
}

.curso__dato {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.curso__dato-campo {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

.curso__dato-valor {
  font-size: 16px;
  line-height: 1.35;
  color: var(--tinta);
}

/* El precio es la única cifra publicada del sitio: se muestra sin rodeos,
   en tipografía de título, para que no haya que buscarla. */
.curso__dato--precio .curso__dato-valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Fecha --------------------------------------------------------------- */

.curso__fecha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 16px 18px;
}

/* Confirmada: sobre verde, como las bandas del home que sí comprometen. */
.curso__fecha--firme {
  background: var(--verde-profundo);
}

.curso__fecha--firme .curso__fecha-rotulo { color: var(--sobre-verde-rotulo); }
.curso__fecha--firme .curso__fecha-valor  { color: var(--sobre-verde-fuerte); }
.curso__fecha--firme .curso__fecha-nota   { color: var(--sobre-verde); }

/* Sin fecha: nunca sobre verde. El color se gana comprometiendo un día. */
.curso__fecha--abierta {
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--papel-borde-fino);
}

.curso__fecha-rotulo {
  flex: 0 0 auto;
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

.curso__fecha-valor {
  font-family: var(--fuente-titulo);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.curso__fecha-nota {
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-cuerpo);
}

/* --- Bloques de contenido ------------------------------------------------ */

.curso__bloques {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 3vw, 44px);
}

.curso__bloque {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.curso__rotulo {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

.curso__texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

.curso__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.curso__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

.curso__item::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--verde-profundo);
}

.curso__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

/* El aviso del nivel 2 es el compromiso menor, y por eso va como enlace
   subrayado y no como botón sólido. Pero en un teléfono hay que poder tocarlo:
   con el relleno de .boton--suave quedaba en 38px. El subrayado baja 3px. */
.curso__cta .boton--suave { padding-block: 11px; }

.curso__cta-nota {
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
}

/* ==========================================================================
   Cómo funciona la inscripción
   ========================================================================== */

.inscripcion__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.4vw, 30px);
}

.inscripcion__paso {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--papel-borde);
}

.inscripcion__num {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--verde-profundo);
}

.inscripcion__texto {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

/* ==========================================================================
   Condiciones
   Van al final y en letra menor, pero completas: acá se dice que el curso
   puede reprogramarse y que el certificado no es acreditado.
   ========================================================================== */

.condiciones {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--papel-borde);
}

.condicion {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(20px, 3vw, 40px);
  padding-block: 15px;
  border-bottom: 1px solid var(--papel-borde);
}

.condicion__campo {
  flex: 0 0 auto;
  width: min(100%, 180px);
  font-family: var(--fuente-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
  line-height: 1.9;
}

.condicion__texto {
  flex: 1 1 300px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

/* ==========================================================================
   Cabecera y tarjeta destacada
   La página abre sobre grafito, como el home, y el curso con fecha
   confirmada va sobre oscuro: es el único que se puede comprar hoy, y el
   sitio ya usa el grafito para marcar dónde está la acción. El nivel 2 se
   queda sobre papel. La jerarquía la dice el fondo, no un adjetivo.
   ========================================================================== */

.cursos__hero {
  padding-block: clamp(40px, 5.5vw, 76px);
}

.cursos__hero .cursos__titulo { color: var(--claro); }
.cursos__hero .cursos__bajada { color: var(--claro-cuerpo); }

/* Único uso de verde señal en tipografía de este tamaño, igual que el home. */
.cursos__acento { color: var(--verde-senal); }

.cursos__hero-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 4px;
}

.cursos__dato-hero {
  padding: 8px 14px;
  border: 1px solid var(--grafito-borde-alt);
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--claro-cuerpo);
}

/* --- Tarjeta destacada ---------------------------------------------------- */

.curso--destacado { background: var(--grafito); }

.curso--destacado .curso__nivel   { color: var(--verde-senal); }
.curso--destacado .curso__nombre  { color: var(--claro); }
.curso--destacado .curso__resumen { color: var(--claro-cuerpo); }
.curso--destacado .curso__ficha   { border-block-color: var(--grafito-borde); }
.curso--destacado .curso__dato-campo,
.curso--destacado .curso__rotulo  { color: var(--gris-verdoso-tenue); }
.curso--destacado .curso__dato-valor { color: var(--claro); }
.curso--destacado .curso__texto,
.curso--destacado .curso__item    { color: var(--claro-cuerpo); }
.curso--destacado .curso__item::before { background: var(--verde-senal); }
.curso--destacado .curso__cta-nota { color: var(--gris-verdoso-tenue); }

/* El precio es lo que la persona vino a buscar. Sobre oscuro puede ir en
   verde señal, que es donde ese color sí alcanza contraste. */
.curso--destacado .curso__dato--precio .curso__dato-valor {
  color: var(--verde-senal);
  font-size: clamp(26px, 3vw, 34px);
}

/* La banda más fuerte de la página, y se la gana por comprometer un día
   concreto: verde señal de fondo con tinta encima. */
.curso--destacado .curso__fecha--firme {
  background: var(--verde-senal);
  padding: 18px 20px;
}

.curso--destacado .curso__fecha--firme .curso__fecha-rotulo { color: var(--verde-profundo); }
.curso--destacado .curso__fecha--firme .curso__fecha-valor  { color: var(--grafito); }
.curso--destacado .curso__fecha--firme .curso__fecha-nota   { color: var(--verde-profundo); }

.curso--destacado .curso__fecha-valor { font-size: clamp(19px, 2.2vw, 23px); }