/* ==========================================================================
   Expert Ads - Landing VSL
   Formacion presencial de Facebook e Instagram Ads, Santa Cruz de la Sierra.

   Estructura medida de una referencia real. Marca propia: fondo casi negro,
   un solo acento verde, Montserrat, y diseno PLANO. Si en algun momento
   aparece una sombra de panel o un segundo color de marca, esta roto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Superficies. Nada de negro puro, mata la profundidad. */
  --fondo:          #07070a;
  --fondo-elevado:  #0e0e13;
  --fondo-panel:    #14141b;
  --borde:          #23232c;
  --borde-vivo:     #34343f;

  /* Texto */
  --texto:          #f7f6f4;
  --texto-medio:    #a8a8b3;
  --texto-tenue:    #6e6e7a;

  /* Acento unico. Verde muestreado del logo: rgb(123, 235, 13). */
  --acento:         #7beb0d;
  --acento-vivo:    #8dfa1c;
  --acento-apagado: #57a80b;

  /* Halo de neon. Dos capas: una cerca que define el borde de luz y otra muy
     abierta y tenue que la difumina. Definido una vez, para que todas las
     tarjetas brillen igual. */
  --halo:        0 0 34px rgba(123, 235, 13, 0.11), 0 0 88px rgba(123, 235, 13, 0.05);
  --halo-fuerte: 0 0 42px rgba(123, 235, 13, 0.24), 0 0 104px rgba(123, 235, 13, 0.10);

  --fuente: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Medidas de la referencia: contenedor 1120, columna de lectura 1024. */
  --contenedor: 1120px;
  --columna:    1024px;

  /* Aire entre secciones: 56 px en celular, 96 px en escritorio. Bajado de
     72 y 144: a ese ritmo la pagina medía 8090 px y entre bloque y bloque se
     iba casi un tercio de pantalla en blanco. */
  --seccion: clamp(3.5rem, 7vw, 6rem);
  --espacio: clamp(1.75rem, 4vw, 2.75rem);

  /* Un solo sistema de esquinas: pastilla en lo que se toca, 12 px en paneles. */
  --radio:  12px;
  --pill:   999px;

  /* Capas. Solo estas tres existen. */
  --z-barra: 40;
  --z-nav:   30;
  --z-grano: 50;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Tema bloqueado en oscuro a proposito: es la marca, no una preferencia.
   Por eso el fondo y cada color se pintan explicitos y no se heredan. */
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Estructura
   -------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Telefonos angostos: 20 px a cada lado se comen el 11 % de una pantalla de
   360, y el titular termina con un renglon de mas. */
@media (max-width: 24rem) {
  .contenedor { padding: 0 0.875rem; }
}

.columna { max-width: var(--columna); margin-inline: auto; }

.seccion { padding: var(--seccion) 0; }

/* La primera seccion despues del hero no necesita el aire completo arriba:
   el hero ya dejo el suyo. Sin esto los dos rellenos se suman. */
main > .seccion:first-child { padding-top: clamp(2rem, 4vw, 3.5rem); }
.seccion--elevada { background: var(--fondo-elevado); }

/* Titulo de seccion: 27 px en celular, 44 px en escritorio, como la
   referencia. La jerarquia la hace el color y el peso, no el tamano solo. */
.titulo {
  font-size: clamp(1.6875rem, 4vw, 2.75rem);
  max-width: 22ch;
  color: var(--acento);
}

/* Enfasis dentro de un titulo. Va en blanco porque el titulo ya es verde:
   si los dos fueran verdes no habria enfasis, habria un titulo largo. */
.marca { color: var(--texto); }

.bajada {
  margin-top: 1.1rem;
  max-width: 62ch;
  color: var(--texto-medio);
}

/* --------------------------------------------------------------------------
   3b. Tarjetas

   Todas las cajas de la pagina comparten esta base: halo, entrada escalonada
   y levante al pasar el mouse.

   Las tres cosas que mueven una tarjeta en vertical viven en variables
   distintas para poder SUMARSE. Si cada una escribiera su propio transform,
   la ultima gana y borra a las otras: al pasar el mouse por una tarjeta que
   todavia esta entrando, se caeria de golpe.
   -------------------------------------------------------------------------- */

.tarjeta {
  --entrada: 0px;
  --levante: 0px;

  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo-panel);
  box-shadow: var(--halo);
  transform: translateY(calc(var(--entrada) + var(--levante)));
  transition: transform 0.55s var(--curva), opacity 0.55s var(--curva),
              border-color 0.3s var(--curva), box-shadow 0.3s var(--curva);
  /* El escalonado: el indice lo pone el JS segun la posicion dentro del grupo. */
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* Solo donde hay mouse de verdad. En tactil el hover se queda pegado despues
   de tocar y la tarjeta se queda levantada sin motivo. */
@media (hover: hover) {
  .tarjeta:hover {
    --levante: -8px;
    border-color: var(--acento-apagado);
    box-shadow: var(--halo-fuerte);
    transition-delay: 0ms;
  }
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2.25rem;
  border: 0;
  border-radius: var(--pill);
  background: var(--acento);
  color: #07070a;
  font-family: inherit;
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--curva), background-color 0.2s var(--curva);
}

/* El levante vive en una variable para que el :active pueda pisarlo sin que
   se peleen dos transform sobre el mismo elemento. */
.boton { --levante: 0px; transform: translateY(var(--levante)); }

@media (hover: hover) {
  .boton:hover { background: var(--acento-vivo); --levante: -3px; }
}

.boton:active { transform: translateY(1px) scale(0.985); }

.boton--ancho { width: 100%; max-width: 28rem; margin-inline: auto; }

/* El boton del hero es el mas importante de la pagina: aparece recien en el
   minuto 5 y es lo unico que el visitante tiene que hacer. Va mas grande que
   el resto y se levanta mas al pasar el mouse. */
.boton--principal {
  max-width: 32rem;
  padding: 1.35rem 2.75rem;
  font-size: clamp(1rem, 2.4vw, 1.1875rem);
}

@media (hover: hover) {
  .boton--principal:hover { --levante: -5px; }
}

/* El boton del cierre. Late despacio para pedir atencion sin apurar, y
   siempre tiene halo.

   El latido va sobre box-shadow, que repinta pero no recalcula la pagina. En
   un solo elemento y a 2,8 segundos el costo es despreciable, y evita el lio
   de un pseudo-elemento detras: el transform del levante crea contexto de
   apilamiento y un ::before con z-index negativo quedaria tapado por el
   propio fondo del boton. */
.boton--late {
  --levante: 0px;
  transform: translateY(var(--levante));
  animation: latidoBoton 2.8s ease-in-out infinite;
  transition: transform 0.28s var(--curva), background-color 0.2s var(--curva);
}

@keyframes latidoBoton {
  0%, 100% { box-shadow: 0 0 20px rgba(123, 235, 13, 0.28), 0 0 52px rgba(123, 235, 13, 0.13); }
  50%      { box-shadow: 0 0 38px rgba(123, 235, 13, 0.58), 0 0 92px rgba(123, 235, 13, 0.28); }
}

@media (hover: hover) {
  .boton--late:hover { --levante: -4px; }
}

.boton__icono { width: 1.15em; height: 1.15em; flex: none; }

/* En pantallas muy angostas se achica la fuente antes que permitir que la
   etiqueta se parta en dos lineas. */
@media (max-width: 22.5rem) {
  .boton { padding-left: 1.4rem; padding-right: 1.4rem; font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   5. Barra superior fija
   -------------------------------------------------------------------------- */

.barra-sup {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding: 0.75rem 0;
  background: rgba(7, 7, 10, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}

.barra-sup__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo { width: auto; height: clamp(1.9rem, 5vw, 2.5rem); }

.barra-sup__dato {
  color: var(--texto-medio);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.barra-sup__dato strong { color: var(--acento); font-weight: 700; }

@media (max-width: 26rem) { .barra-sup__dato { display: none; } }

/* --------------------------------------------------------------------------
   6. Hero. Una columna, centrado, como la referencia.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  /* Antes era el aire completo de seccion (96 px) y se sumaba a los 96 de la
     seccion siguiente: 178 px de negro que se leian como una seccion vacia.
     Aca alcanza con un respiro, porque la separacion la pone la de abajo. */
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
  text-align: center;
}

/* Vinieta muy tenue detras del video. No es un halo de neon: es lo que
   evita que el fondo quede como un negro plano de pantalla apagada. */
.hero::before {
  content: '';
  position: absolute;
  top: 12%;
  left: 50%;
  width: min(64rem, 130vw);
  height: 30rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(123, 235, 13, 0.06), transparent 70%);
  pointer-events: none;
}

.hero__interior { position: relative; }

.hero__meta {
  color: var(--texto-tenue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__meta strong { color: var(--acento); font-weight: 700; }

/* El titular de la referencia tiene 6 palabras y va a 66 px. Este tiene 20 y
   117 caracteres, asi que no puede ser grande Y corto a la vez en un telefono.
   El arreglo de fondo no es tipografico sino de copy: un titular mas corto. */
.hero__titulo {
  margin-top: 1.25rem;
  margin-inline: auto;

  /* En el telefono no se le pone techo: cualquier limite en ch deja aire a los
     costados y obliga a mas renglones. Desde tablet para arriba si, porque una
     linea de 30 caracteres se lee mejor que una que cruza toda la pantalla. */
  max-width: 100%;
  font-size: clamp(1.5rem, 4.2vw, 3rem);
  color: var(--acento);
  text-wrap: balance;

  /* Sin resplandor y sin animacion. El titular es texto plano: cualquier
     efecto encima es una cosa mas que puede fallar en el telefono de quien
     entro por un anuncio. Para devolver el neon, un text-shadow aca. */
  overflow-wrap: break-word;
}


@media (min-width: 40rem) {
  .hero__titulo { max-width: 26ch; }
}

.hero__sub {
  margin: 1.25rem auto 0;
  max-width: 54ch;
  color: var(--texto-medio);
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
}

/* La linea del descuento. En el acento, para que no se pierda dentro del
   parrafo: es lo que hace que se queden hasta el final del video. */
.hero__gancho {
  display: block;
  margin-top: 0.85rem;
  color: var(--acento);
  font-weight: 700;
}

.hero__video {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-panel);
}

/* SIN aspect-ratio impuesto. Antes tenia 16/9 forzado y eso creaba la caja
   a 552 px de alto; VTurb dibujaba el video a su proporcion real adentro y lo
   que sobraba quedaba en negro. Ese era el espacio muerto.

   La reserva de espacio la hace ahora el div que trae el propio embed de
   VTurb, adentro del elemento: el player lo reemplaza al arrancar y el
   contenedor toma la altura real del video. */
.hero__video vturb-smartplayer { display: block; width: 100%; }

/* Linea de tiempo del VSL, encima del pie del video. Verde de marca al 80 %.
   Crece con scaleX desde la izquierda: solo transform, nada de width. */
.hero__video { position: relative; }

/* El player crea su propia capa con z-index alto y tapaba la barra.
   Encerrarlo en una capa 0 deja la barra siempre por encima. */
.hero__video vturb-smartplayer { position: relative; z-index: 0; }

.linea-tiempo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.linea-tiempo__relleno {
  display: block;
  height: 100%;
  background: rgba(123, 235, 13, 0.8);
  box-shadow: 0 0 10px rgba(123, 235, 13, 0.55);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms linear;
}

.linea-tiempo--salto .linea-tiempo__relleno { transition: none; }

/* Ficha de datos, pegada al pie del video. */
.hero__ficha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-top: 1rem;
  color: var(--texto-medio);
  font-size: 0.9375rem;
}

/* Sin gap en el contenedor: la coma que separa dias de horario es un nodo de
   texto suelto, o sea otro elemento flex, y el gap le metia espacio de los dos
   lados. Quedaba "Martes y jueves , 7:30". La separacion va solo en el icono. */
.hero__ficha span { display: inline-flex; align-items: center; }
.hero__ficha strong { color: var(--texto); font-weight: 700; }
.hero__ficha svg {
  width: 1rem; height: 1rem; flex: none;
  margin-right: 0.45rem;
  color: var(--acento);
}

.hero__publico {
  margin: 1.5rem auto 0;
  max-width: 58ch;
  color: var(--texto-medio);
  font-size: clamp(0.9375rem, 2.1vw, 1rem);
}

/* --------------------------------------------------------------------------
   7. Revelado del CTA en el minuto 7
   -------------------------------------------------------------------------- */

.oculto-cta { display: none; }

.visible-cta { display: block; animation: subir 0.55s var(--curva) both; }

@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aviso {
  margin-top: 1rem;
  color: var(--texto-tenue);
  font-size: 0.9375rem;
}

.aviso__punto {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: middle;
  animation: latir 2s ease-in-out infinite;
}

@keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Bloque de precio. Aparece con el boton, no antes: si el descuento se viera
   de entrada, la linea "mira el video hasta el final para obtener descuentos"
   seria mentira. */
.precio {
  margin: var(--espacio) auto 0;
  /* 34rem y no 30: el panel es lo que limita el ancho del boton principal,
     no su propio max-width. A 30rem el boton quedaba en 406 px. */
  max-width: 34rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-color: var(--acento-apagado);
}

.precio__antes {
  color: var(--texto-medio);
  font-size: 1.3125rem;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.precio__ahora {
  display: block;
  margin: 0.35rem 0 0.5rem;
  font-size: clamp(2.75rem, 8vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--acento);
}

.precio__nota { color: var(--texto-medio); font-size: 0.9375rem; }

.precio__incluye {
  display: grid;
  gap: 0.5rem;
  margin: 1.5rem 0;
  text-align: left;
}

.precio__incluye li {
  display: flex;
  gap: 0.7rem;
  color: var(--texto-medio);
  font-size: 0.9875rem;
}

.precio__incluye svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.35rem; color: var(--acento); }

/* --------------------------------------------------------------------------
   8. Dos columnas: para quien es y para quien no
   -------------------------------------------------------------------------- */

.dos-columnas {
  display: grid;
  gap: 1.25rem;
  margin-top: var(--espacio);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.estado { padding: clamp(1.5rem, 4vw, 2.25rem); }

.estado--si { border-color: var(--acento-apagado); }

.estado__titulo { margin-bottom: 1.25rem; font-size: 1.25rem; color: var(--acento); }

.estado__lista li {
  display: flex;
  gap: 0.8rem;
  padding: 0.65rem 0;
  color: var(--texto-medio);
  font-size: 1.0625rem;
}

.estado__lista li + li { border-top: 1px solid var(--borde); }

.estado__lista svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: 0.4rem; }
.estado--si .estado__lista svg { color: var(--acento); }
.estado--no .estado__lista svg { color: var(--texto-tenue); }

/* --------------------------------------------------------------------------
   9. Grilla de dos por dos: los cuatro perfiles de publico
   -------------------------------------------------------------------------- */

.perfiles {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-top: var(--espacio);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) { .perfiles { grid-template-columns: 1fr 1fr; } }

.perfil { padding: clamp(1.35rem, 3.5vw, 1.9rem); }

.perfil__n {
  color: var(--acento);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.perfil__titulo { margin: 0.75rem 0 0.6rem; font-size: 1.1875rem; color: var(--texto); }
.perfil__texto { color: var(--texto-medio); font-size: 1rem; }

/* --------------------------------------------------------------------------
   10. Cuatro pilares apilados, una columna
   -------------------------------------------------------------------------- */

.pilares { margin-top: var(--espacio); }

.pilar {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) { .pilar { grid-template-columns: 0.8fr 1.2fr; } }

.pilares { display: grid; gap: 1rem; }

.pilar__titulo { font-size: clamp(1.25rem, 2.8vw, 1.625rem); color: var(--acento); }
.pilar__texto { color: var(--texto-medio); font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   11. Tres testimonios en video
   -------------------------------------------------------------------------- */

.testimonios {
  display: grid;
  gap: 1.25rem;
  margin-top: var(--espacio);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) { .testimonios { grid-template-columns: repeat(3, 1fr); } }

.testimonio { overflow: hidden; }

/* El embed de VTurb trae max-width 400px. Aca manda la tarjeta. */
.testimonio__video { position: relative; }
.testimonio__video vturb-smartplayer { display: block; width: 100%; max-width: none; }

/* Boton de reproducir. El player no se carga hasta que alguien lo toca: tres
   videos verticales arrancando solos consumen datos de quien capaz ni los
   queria ver. El boton reserva la proporcion 9:16 para que la tarjeta no
   cambie de alto cuando el player ocupa su lugar. */
.testimonio__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 1.5rem;
  border: 0;

  /* Un fotograma del propio testimonio de fondo, con un velo oscuro encima
     para que el texto y el icono se lean. Antes era un panel liso y la tarjeta
     parecia un video roto. La portada de cada uno llega por --portada, desde
     el index. Si falta, queda el panel de siempre. */
  background-color: var(--fondo-elevado);
  background-image: linear-gradient(rgba(7, 7, 10, 0.5), rgba(7, 7, 10, 0.72)), var(--portada, none);
  background-size: cover;
  background-position: center top;

  color: var(--texto);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(7, 7, 10, 0.8);
  cursor: pointer;
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva);
}

.testimonio__play svg {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.9rem;
  border-radius: 50%;
  background: var(--acento);
  color: #07070a;
  transition: transform 0.25s var(--curva);
}

@media (hover: hover) {
  .testimonio__play:hover { background-color: #12121a; }
  .testimonio__play:hover svg { transform: scale(1.08); }
}

.testimonio__pie { padding: 1.1rem 1.35rem; border-top: 1px solid var(--borde); }
.testimonio__nombre { font-weight: 700; font-size: 0.9875rem; }
.testimonio__rubro { margin-top: 0.15rem; color: var(--texto-tenue); font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   11b. Cabecera de la seccion de profesores, con la fila de datos
   -------------------------------------------------------------------------- */

.antetitulo {
  color: var(--texto-tenue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.titular-grande {
  margin-top: 1rem;
  max-width: 20ch;
  font-size: clamp(1.75rem, 4.4vw, 3rem);
  color: var(--acento);
  text-wrap: balance;
}

/* Fila de datos. Las lineas van arriba y abajo del grupo entero, no debajo de
   cada dato: tres hairlines seguidas convierten la seccion en una tabla. */
.cifras {
  display: grid;
  gap: 1.75rem 2.5rem;
  margin-top: var(--espacio);
  padding: var(--espacio) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) { .cifras { grid-template-columns: repeat(3, 1fr); } }

.cifra__n {
  font-size: clamp(1.625rem, 3.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--acento);
}

.cifra__pie { margin-top: 0.35rem; color: var(--texto-medio); font-size: 1rem; }
.cifra__pie strong { color: var(--texto); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. Split asimetrico: foto a la izquierda, profesores a la derecha
   -------------------------------------------------------------------------- */

/* Antes era foto a la izquierda y profesores a la derecha, centrados en
   vertical. La foto medía 280 px y la columna de texto 438, asi que quedaban
   158 px de aire muerto a la izquierda.

   Ahora la foto va a todo el ancho, recortada a una banda. En la original la
   mitad de arriba es techo: recortando por abajo entra toda la gente y el
   vacio desaparece. Los profesores van debajo, uno al lado del otro. */
.split { margin-top: var(--espacio); }

.split__foto {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@media (min-width: 52rem) { .split__foto { aspect-ratio: 21 / 9; } }

.split__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;   /* la gente esta abajo, el techo arriba */
}

.profes {
  display: grid;
  gap: 1.4rem;
  margin-top: var(--espacio);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) { .profes { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }

.profe { padding-top: 1.4rem; border-top: 1px solid var(--borde); }

.profe__nombre {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--texto);
}

.profe__rol { margin-top: 0.45rem; color: var(--acento); font-size: 1rem; font-weight: 600; }

.split__texto { margin-top: var(--espacio); max-width: 62ch; }

.split__texto p { color: var(--texto-medio); font-size: 1.0625rem; }
.split__texto p + p { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   13. Cierre
   -------------------------------------------------------------------------- */

.cierre { text-align: center; }

.cierre__kick {
  color: var(--texto-tenue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cierre__titulo {
  margin: 1rem auto 0;
  max-width: 18ch;
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  color: var(--acento);
  text-wrap: balance;
}

.cierre__texto {
  margin: 1.25rem auto 0;
  max-width: 54ch;
  color: var(--texto-medio);
  font-size: 1.0625rem;
}

.cierre .precio { text-align: center; }

.cierre__cta { margin-top: var(--espacio); }

.cierre__logis {
  margin-top: 1.5rem;
  color: var(--texto-tenue);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   14b. Contenido en espera

   Todo lo que va debajo del hero queda oculto hasta que aparece el boton.
   La clase la pone el JS: si el JS no corre, si un bloqueador lo corta o si
   algo falla, la clase nunca se agrega y la pagina se ve ENTERA. Nunca en
   blanco. Es la unica forma de que esta reja no se coma la pagina.
   -------------------------------------------------------------------------- */

.js-espera main,
.js-espera .pie { display: none; }

/* --------------------------------------------------------------------------
   15. Grano. Fijo, sin eventos, nunca sobre un contenedor con scroll.
   -------------------------------------------------------------------------- */

/* Nada puede empujar la pagina a lo ancho. En el navegador que Instagram abre
   adentro de la app, un elemento fijo puede medir mas que la pantalla y deja
   la pagina corrida: se ve una franja a un costado y el contenido descentrado.
   Pasa solo en Android y es lo que se vio en produccion. */
html, body { overflow-x: hidden; max-width: 100%; }

.grano {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-grano);
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   16. Pie
   -------------------------------------------------------------------------- */

.pie {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-tenue);
  font-size: 0.875rem;
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   17. Entrada al hacer scroll

   El ocultamiento lo enciende el JS agregando .js-entra al <html>. Si el JS
   no corre, si un bloqueador lo corta o si el observador no arranca, la clase
   nunca se agrega y la pagina se ve entera. Nunca en negro.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js-entra .entra:not(.tarjeta) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
  }
  .js-entra .entra:not(.tarjeta).dentro { opacity: 1; transform: translateY(0); }

  /* Las tarjetas quedan fuera de la regla de arriba a proposito: mueven la
     variable --entrada en vez del transform, para no pisar el levante.

     OJO con el .entra en el selector, no sobra. El observador solo le pone
     .dentro a los elementos que llevan .entra. Si aca se escondiera cualquier
     .tarjeta, las que no llevan .entra nunca recibirian .dentro y quedarian
     invisibles PARA SIEMPRE, ocupando su lugar en negro.
     Paso de verdad: el panel de precio con el boton, y la foto de los
     alumnos, estuvieron invisibles en produccion por esto. */
  .js-entra .tarjeta.entra { opacity: 0; --entrada: 16px; }
  .js-entra .tarjeta.entra.dentro { opacity: 1; --entrada: 0px; }
}

/* --------------------------------------------------------------------------
   18. Movimiento reducido: todo estatico e instantaneo
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .aviso__punto { animation: none; }
  .tarjeta { transition-delay: 0ms !important; }

  /* Sin latido, pero el halo se queda para que el boton no pierda presencia. */
  .boton--late {
    animation: none;
    box-shadow: 0 0 26px rgba(123, 235, 13, 0.35), 0 0 64px rgba(123, 235, 13, 0.16);
  }
  .entra { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Llamado sobre el VSL

   El player no arranca solo y su boton de play es chico y gris. Este cartel
   va encima, centrado, y lo unico que recibe clics es el boton: el resto deja
   pasar el toque al propio player.

   Se va apenas el video arranca, por el camino que sea.
   -------------------------------------------------------------------------- */

.llamado-vsl {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.24s var(--curva);
}

/* Oscurece apenas el centro para que el verde se lea sobre cualquier fotograma,
   sin tapar la miniatura. */
.llamado-vsl::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 42% at 50% 50%, rgba(7, 7, 10, 0.82), rgba(7, 7, 10, 0) 72%);
}

.llamado-vsl--fuera { opacity: 0; }

/* El cartel vuelve cuando el video rebobina, asi que no se borra: se apaga.
   Sin esta regla el display:grid de arriba le gana al atributo hidden y el
   cartel seguiria tapando el video apagado. */
.llamado-vsl[hidden] { display: none; }

.llamado-vsl__boton {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: clamp(1.1rem, 3.2vw, 1.35rem) clamp(1.9rem, 6vw, 2.75rem);
  border: 0;
  border-radius: var(--pill);
  background: var(--acento);
  color: #07070a;
  font-family: inherit;
  font-size: clamp(1.0625rem, 4vw, 1.4375rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  animation: latidoBoton 2.4s ease-in-out infinite;
  transition: transform 0.2s var(--curva), background-color 0.2s var(--curva);
}

.llamado-vsl__icono { width: 1.05em; height: 1.05em; flex: none; }

@media (hover: hover) and (pointer: fine) {
  .llamado-vsl__boton:hover { background: var(--acento-vivo); transform: scale(1.04); }
}

.llamado-vsl__boton:active { transform: scale(0.97); }

/* Quien pidio menos movimiento ve el cartel igual, pero quieto. */
@media (prefers-reduced-motion: reduce) {
  .llamado-vsl__boton { animation: none; box-shadow: var(--halo-fuerte); }
}