/* ==========================================================================
   Aula · caja de promoción del curso en la home
   --------------------------------------------------------------------------
   Última sección del contenido de la portada, justo antes del footer. Se pinta
   desde correctores_aula_caja_home() en aula.php.

   Depende de ds.css: usa sus tokens directamente, sin remapear, porque aquí no
   hay un ámbito propio que justifique los nombres cortos — es UN bloque, no un
   subsistema como el aula.

   A ancho completo: rompe el contenedor del contenido con el mismo recurso que
   usan las secciones .full de la home (100vw centrado), porque el bloque tiene
   que sangrar de borde a borde y el contenido de la página va acotado.
   ========================================================================== */

.dsx .aula-promo{
  position:relative;
  overflow:hidden;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  background:var(--ds-tech);
  color:#fff;
}

.dsx .aula-promo .in{
  position:relative;
  z-index:1;
  max-width:var(--ds-maxw);
  margin:0 auto;
  padding:43px 32px 47px;   /* 50px menos de alto que el original (68/72) */
}

/* Eyebrow en negrita, no en el gris de las demás: sobre índigo hay que subir
   el peso para que no se lea como un pie de foto. */
.dsx .aula-promo .promo-eyebrow{
  display:block;
  font-family:var(--ds-mono);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
}

.dsx .aula-promo h2{
  font-family:var(--ds-display);
  font-weight:600;
  letter-spacing:-.02em;
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.12;
  color:#fff;
  max-width:20ch;
  margin:16px 0 0;
}

.dsx .aula-promo p{
  font-family:var(--ds-sans);
  font-size:17.5px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
  max-width:60ch;
  margin:16px 0 0;
}

/* Botón blanco sobre índigo. No reutiliza .dsx .btn: aquel es oscuro sobre
   claro y forzarlo a la inversa sería pelearse con su propio hover. */
.dsx .aula-promo .promo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:30px;
  padding:14px 30px;
  border-radius:999px;
  background:#fff;
  color:var(--ds-ink);
  font-family:var(--ds-sans);
  font-weight:700;
  font-size:15.5px;
  line-height:normal;
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.dsx .aula-promo .promo-btn:hover{background:var(--ds-ink);color:#fff}

/* Filete entre el eyebrow y el título. Ámbar del sistema (--ds-human), no un
   hexadecimal suelto: es el mismo color con el que el diseño marca lo humano y
   así sigue al tema si cambia. 40x2, sin más. */
.dsx .aula-promo .promo-filete{
  display:block;
  width:40px;
  height:2px;
  margin:14px 0 0;
  background:var(--ds-human);
}

/* Línea de cifras, a la derecha, a la altura del eyebrow.
   Absoluta y no dentro del flujo porque el texto del bloque tiene su propio
   ancho máximo: metida en la columna izquierda quedaría debajo del botón.

   ARRIBA y no abajo, que es donde estaba primero: midiendo el fondo por bandas,
   la franja superior de la mitad derecha es índigo liso (dispersión 0) mientras
   que la inferior cae sobre la hoja oscura de la ilustración. Ahí el texto
   pequeño se leía como una mancha aunque el contraste calculado diera 4.67:1.
   Compone además como metadato de cabecera, enfrente del eyebrow. */
.dsx .aula-promo .promo-datos{
  position:absolute;
  z-index:2;
  right:32px;
  top:43px;              /* mismo padding-top que .in: alinea con el eyebrow */
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--ds-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  /* .85 y no menos: medido sobre la propia captura, a .62 el contraste contra
     el índigo era 2.62:1 y el texto no se leía. Aquí queda en 4.67:1 sobre el
     fondo liso y 6.02:1 sobre la hoja oscura de la ilustración — por encima del
     4.5:1 que pide texto pequeño, y sigue leyéndose como dato secundario. */
  color:rgba(255,255,255,.85);
}
.dsx .aula-promo .promo-datos li{display:flex;align-items:center;gap:14px;margin:0;}
/* El separador es un borde del propio <li>, no un carácter: así no se copia al
   seleccionar el texto ni lo lee un lector de pantalla. */
.dsx .aula-promo .promo-datos li + li::before{
  content:"";
  width:1px;
  height:11px;
  background:rgba(255,255,255,.45);
}

/* Misma decoración que /aula/, colocada para este bloque. Es textura: detrás
   del texto, opacidad baja, y fuera en móvil, donde no cabe sin estorbar. */
.dsx .aula-promo .promo-deco{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:38%;
  opacity:.15;
  pointer-events:none;
}
.dsx .aula-promo .promo-deco .hoja rect{fill:#fff}
.dsx .aula-promo .promo-deco .hoja-frente>rect{fill:var(--ds-ink)}
.dsx .aula-promo .promo-deco .renglones rect{fill:#fff}

@media (max-width:760px){
  .dsx .aula-promo .in{padding:48px 20px 52px}
  /* Sin ilustración a la derecha no hay «derecha»: las cifras pasan a ser una
     línea más, debajo del botón. */
  .dsx .aula-promo .promo-datos{
    position:static;
    margin:26px 20px 0;
    flex-wrap:wrap;
    row-gap:8px;
  }
  .dsx .aula-promo .promo-deco{display:none}
  .dsx .aula-promo p{font-size:16.5px}
  .dsx .aula-promo .promo-btn{width:100%}
}