/* ===========================================================
   /clase — la clase gratuita (VSL)

   Se carga DESPUÉS de /styles.css y sólo agrega lo del video.
   A diferencia de /masterclass, acá NO se redefine ninguna variable:
   esta página usa la identidad de la home (negro y oro) tal cual,
   porque el que llega ya sigue a Ale y ya le dio su atención.
   =========================================================== */

/* ---------- la portada de la clase ---------- */
/* Mismo resplandor del hero de la home, un poco más contenido arriba:
   el video entra alto en pantalla y no conviene que compita con el brillo. */
.clase-hero{
  padding:66px 0 84px;text-align:center;
  background:radial-gradient(ellipse 70% 46% at 50% 0%, rgba(212,171,85,.11), transparent 72%),var(--negro);
}

/* El lockup acá va más chico que en la home: es una credencial, no el
   titular. Lo que tiene que ganar la pantalla es el video. */
.clase-hero .marca{margin-bottom:30px}
.clase-hero .corona{width:54px;height:38px}
.clase-hero .marca-txt{font-size:1.02rem}
.clase-hero .kicker{margin-bottom:16px}

/* Más chico que el h1 de la home (que llega a 4.1rem): esta página la lee
   alguien que ya vino a mirar un video, no alguien a quien hay que detener. */
.clase-hero h1{font-size:clamp(2rem,6vw,3.1rem);max-width:22ch;margin-bottom:22px}
.clase-hero .lead{margin-bottom:40px}

/* ---------- el video ---------- */
/* Se sale del ancho del texto a propósito: el .wrap mide 1020px y el video
   llega a 920. Es la pieza más grande de la página y tiene que sentirse así.

   El aspect-ratio vive ACÁ y no en el <video>: así el marco dorado y el
   espacio reservado no se mueven ni un píxel cuando el reproductor cambie
   de un <video> nativo a un <iframe> de Bunny, Vimeo o lo que sea.
   Si el video final no es 16:9, se cambia este número y nada más. */
.clase-video{
  width:100%;max-width:920px;margin:0 auto 22px;
  border:1px solid var(--linea);padding:7px;      /* el mismo marco que .retrato */
  background:#000;
}
.clase-video>video,
.clase-video>iframe{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;border:0;
  /* contain y no cover: mientras adentro haya un video de otra proporción
     (hoy el vertical de 2024, de relleno) se ve entero con bandas negras,
     en vez de recortado. Con el video definitivo 16:9 no cambia nada. */
  object-fit:contain;background:#000;
}

/* La línea de "miralá completa". Va pegada al video, antes del botón. */
.clase-aviso{
  font-size:.95rem;color:var(--tenue);
  max-width:32rem;margin:0 auto 40px;
}

/* ---------- marca de "acá falta completar" ---------- */
/* El cuadradito delante de cada texto provisorio. Es sólo para vos: cuando
   completes ese texto, borrá el <b class="x"></b> de esa línea. Cuando no
   quede ninguno, la página está lista para publicar.
   Mismo recurso que en /masterclass — y por lo mismo no es el emoji ⬜,
   que en el navegador sale como un cuadrado blanco gigante. */
.x{
  display:inline-block;width:.58em;height:.58em;
  border:1px dashed var(--oro);border-radius:1px;
  margin-right:.42em;opacity:.7;vertical-align:baseline;
}
/* dentro del titular, que es serif y grande, el cuadradito queda enorme */
h1 .x{width:.34em;height:.34em;vertical-align:.34em;margin-right:.3em}

/* ---------- teléfono ---------- */
/* El video se come los 26px de margen del .wrap y va de borde a borde.
   Son ~15% más de superficie en la única pantalla donde esto se mira
   de verdad, y el marco dorado no aporta nada cuando toca los bordes:
   por eso los filetes laterales se apagan y quedan sólo arriba y abajo. */
@media(max-width:600px){
  .clase-video{
    width:calc(100% + 52px);margin-inline:-26px;
    border-left:0;border-right:0;padding-left:0;padding-right:0;
  }
}

/* ---------- escritorio ---------- */
@media(min-width:860px){
  .clase-hero{padding:78px 0 96px}
}

/* ---------- el rótulo de cada paso ---------- */
/* El recorrido en tres pasos (usuario, 2026-10-23): mirar la clase, escuchar
   los testimonios, agendar. El 01 rotula el video acá arriba; el 02 y el 03
   van como kicker de su propia sección, así que usan la regla de siempre.
   Mismo estilo que los kickers — versalitas doradas espaciadas en Jost — que
   es el que el usuario eligió para todos los rótulos de la marca. */
.paso-rotulo{
  font-family:'Jost',sans-serif;font-size:.82rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oro);
  margin-bottom:16px;
}

/* ---------- paso 02: los testimonios en video ---------- */
/* Una sola columna en teléfono y tres en escritorio. El ratio está en una
   variable porque todavía no sabemos cómo se van a grabar: si salen
   horizontales o cuadrados, se cambia acá y nada más. 9/16 es la apuesta
   —se graban con el celular—, y es también el formato que más superficie
   de cara da en pantalla chica. */
/* ⚠️ Los testimonios resultaron HORIZONTALES (2560x1440), no verticales: se
   grabaron por videollamada, no con el celular. Por eso van APILADOS en una
   columna y no en tres: a 16:9 dentro de una grilla de tres, cada cara
   quedaría de 270x152 — ilegible. En una columna de 560 se ven a 560x315. */
.testi-grid{
  --testi-ratio:16/9;
  display:grid;gap:44px;margin:40px auto 0;max-width:560px;
}
.testi{margin-inline:auto;width:100%}
.testi>video{
  display:block;width:100%;height:auto;aspect-ratio:var(--testi-ratio);
  object-fit:cover;background:#000;
  border:1px solid var(--linea);
}
.testi figcaption{
  font-size:.92rem;color:var(--tenue);
  margin-top:12px;text-align:center;
}

/* El hueco mientras no estén los videos. Se borra junto con el <div> cuando
   entre cada archivo — no hace falta tocar el CSS. */
.testi-hueco{
  display:flex;align-items:center;justify-content:center;
  /* width:100% explícito, igual que el <video>. Sin esto el ancho se deriva
     de la altura disponible y el hueco queda más angosto que su columna. */
  width:100%;aspect-ratio:var(--testi-ratio);
  border:1px dashed var(--linea);background:rgba(212,171,85,.03);
}
.testi-hueco span{
  font-family:'Jost',sans-serif;font-size:.78rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--oro);
  opacity:.6;
}

/* El rótulo que separa los videos de las capturas de WhatsApp */
.testi-sep{margin-top:54px}

.cierre-cta{margin-top:40px}

/* Sin media query: una sola columna sirve igual en teléfono y en escritorio,
   porque el 16:9 ya se adapta solo al ancho disponible.

   ⚠️ Si alguna vez vuelven a ser tres en fila, acordate de que un ítem de
   grilla con margin-inline:auto NO se estira a su columna — se queda en el
   ancho de su contenido. Hay que anularlo con margin-inline:0, no alcanza
   con tocar el max-width. */