/* OtherVision Academy (/academy/…): las páginas cortas que explican qué es OtherVision, cómo
   grabar y cómo usar sus herramientas.

   Van montadas sobre /css/landing.css, que se carga antes y no se toca: de allá salen la
   paleta (`--l-*`), el fondo de puntos, la cabeza, los botones, el tramo azul noche
   (`.zona-noche`, `.comenzar`, `.tarjetas`, `.tarjeta`) y el pie. Acá va solo lo propio, con
   el prefijo `aca-`: la portada, el dibujo animado de cada tarjeta, las cajas de los videos
   tutoriales y el cierre.

   Los dibujos son SVG en la página con el lenguaje de las tarjetas de la landing: trazo
   celeste, relleno azul, un punto rojo que late. Las animaciones son de CSS y quien pidió
   menos movimiento las ve quietas.

   Orden: portada → tarjetas y sus dibujos → videos → cierre → pantallas chicas. */

/* ---------- Portada ---------- */

.aca-hero {
  padding: calc(var(--l-alto-nav) + clamp(2.25rem, 5vw, 4.5rem)) var(--l-pad) clamp(2rem, 4vw, 3.25rem);
  background-color: var(--l-portada);
  background-image:
    radial-gradient(var(--l-punto-noche) 1px, transparent 1.4px),
    linear-gradient(180deg, var(--l-portada), var(--l-portada-2));
  background-size: 22px 22px, auto;
  color: var(--l-sobre-noche);
}

.aca-hero-interior {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
}

.aca-sello {
  padding: 6px 14px;
  border: 1px solid rgba(169, 210, 255, 0.35);
  border-radius: var(--r-pastilla);
  background: rgba(169, 210, 255, 0.08);
  font-family: var(--fuente-marca);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-celeste);
}

.aca-hero h1 {
  font-family: var(--l-fuente-titulo);
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.aca-hero p {
  max-width: 40rem;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.45;
  color: var(--l-sobre-noche-2);
  text-wrap: balance;
}

.aca-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-3);
}

/* El botón de contorno de la landing es para fondo claro: este es el suyo sobre azul noche. */
.aca-boton-noche {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.aca-boton-noche:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* ---------- Tarjetas ----------
   Las de la landing (`.tarjeta`), con un dibujo en vez de la imagen y, arriba del título, el
   número del paso o un rótulo corto. */

.aca-seccion {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Las tablas del tutorial de la app (/app/css/tutorial.css), cada una en su panel, como en la
   ventana de + Nuevo. Sus estilos hablan con la paleta de la app (tema.css), que acá no se
   carga: la toman de la de la landing, que es de donde sale. */
.aca-tablas {
  --noche: var(--l-noche);
  --fondo-alto: var(--l-portada);
  --acento: var(--l-azul);
  --acento-fuerte: var(--l-azul-fuerte);
  --acento-suave: rgba(30, 111, 224, 0.2);
  --celeste: var(--l-celeste);
  --celeste-suave: rgba(169, 210, 255, 0.22);
  --texto: #fff;
  --texto-2: var(--l-sobre-noche-2);
  --borde: rgba(255, 255, 255, 0.12);
  --borde-fuerte: rgba(255, 255, 255, 0.24);
  --velo: rgba(10, 21, 34, 0.72);
  --velo-fuerte: rgba(10, 21, 34, 0.9);
  --sombra-flotante: 0 24px 40px rgba(4, 12, 24, 0.36);
  --fuente-titulo: var(--l-fuente-titulo);
  display: grid;
  gap: var(--esp-4);
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 0 var(--l-pad);
}

/* Cuatro tarjetas van de a dos: en la grilla de tres de la landing quedaba una sola abajo. */
@media (min-width: 901px) {
  .aca-de-a-dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 820px);
    margin: 0 auto;
  }
}

.aca-tablas .tut-grupo {
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--borde);
  border-radius: var(--l-radio);
  background: var(--l-noche-2);
}

.aca-seccion + .aca-seccion {
  padding-top: 0;
}

.aca-rotulo {
  padding: 0 var(--esp-2);
  font-family: var(--fuente-marca);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-celeste);
}

.aca-dibujo {
  width: 100%;
  aspect-ratio: 32 / 21;
  margin-bottom: var(--esp-2);
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.aca-dibujo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tarjeta .aca-accion {
  justify-self: start;
  margin: var(--esp-2) var(--esp-2) 0;
}

/* Las piezas de los dibujos. */
.aca-trazo {
  fill: none;
  stroke: var(--l-celeste);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aca-fino {
  stroke-width: 2.5;
}

.aca-guia {
  fill: none;
  stroke: rgba(169, 210, 255, 0.35);
  stroke-width: 2;
  stroke-dasharray: 6 8;
}

.aca-relleno {
  fill: #3b8bff;
}

.aca-suave {
  fill: rgba(59, 139, 255, 0.28);
}

.aca-blanco {
  fill: #fff;
}

.aca-texto {
  fill: #fff;
  font-family: var(--fuente-marca);
  font-weight: 700;
}

.aca-graba {
  fill: #ff6b6b;
  animation: aca-late 1.2s ease-in-out infinite;
}

/* Algo que da vueltas por un camino (el celular alrededor de un objeto, o por la sala). */
.aca-viaja {
  offset-rotate: 0deg;
  animation: aca-viaja var(--dura, 6s) linear infinite;
}

/* Un anillo que se llena: el minuto del video, o el avance del procesamiento. */
.aca-carga {
  fill: none;
  stroke: var(--l-celeste);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: var(--largo) var(--largo);
  stroke-dashoffset: var(--largo);
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  animation: aca-llena var(--dura, 4s) ease-in-out infinite;
}

/* Un trazo que se dibuja solo y vuelve a empezar. */
.aca-dibuja {
  stroke-dasharray: var(--largo) var(--largo);
  stroke-dashoffset: var(--largo);
  animation: aca-dibuja var(--dura, 4s) ease-in-out infinite;
}

/* Algo que aparece en su turno (`--i`) y se va al final de la vuelta. */
.aca-aparece {
  opacity: 0;
  /* Crece desde su propio centro, no desde la esquina del dibujo. */
  transform-box: fill-box;
  transform-origin: center;
  animation: aca-aparece var(--dura, 6s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * var(--paso, 0.25s));
}

/* Tres caras de la sala que se iluminan de a una: paredes, techo y piso. */
.aca-cara {
  fill: #3b8bff;
  opacity: 0.1;
  animation: aca-cara 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 2s);
}

.aca-flota {
  animation: aca-flota 3s ease-in-out infinite;
}

.aca-sube {
  animation: aca-sube 2.4s ease-in-out infinite;
}

.aca-cae {
  animation: aca-cae 4.5s ease-in infinite;
  animation-delay: calc(var(--i, 0) * 1.5s);
}

.aca-pulsa {
  transform-box: fill-box;
  transform-origin: center;
  animation: aca-pulsa 2s ease-in-out infinite;
}

.aca-enciende {
  opacity: 0.25;
  animation: aca-enciende 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.5s);
}

@keyframes aca-late {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes aca-viaja {
  to {
    offset-distance: 100%;
  }
}

@keyframes aca-llena {
  0%,
  8% {
    stroke-dashoffset: var(--largo);
  }
  70%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes aca-dibuja {
  0%,
  8% {
    stroke-dashoffset: var(--largo);
  }
  55%,
  88% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: var(--largo);
  }
}

@keyframes aca-aparece {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.6);
  }
  22%,
  85% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}

@keyframes aca-cara {
  0%,
  100% {
    opacity: 0.1;
  }
  12%,
  30% {
    opacity: 0.75;
  }
  42% {
    opacity: 0.1;
  }
}

@keyframes aca-flota {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes aca-sube {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  30%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-22px);
  }
}

@keyframes aca-cae {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }
  15% {
    opacity: 1;
  }
  32%,
  80% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes aca-pulsa {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

@keyframes aca-enciende {
  0%,
  100% {
    opacity: 0.25;
  }
  10%,
  28% {
    opacity: 1;
  }
  38% {
    opacity: 0.25;
  }
}

/* ---------- Videos tutoriales ----------
   Cada tarjeta trae una caja 16:9 con el símbolo de reproducir; si el video está subido,
   aparece encima con sus controles (js/academy.js). */

.aca-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.aca-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--esp-2);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background-color: #1b3f73;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px),
    linear-gradient(135deg, #1f4a85, #17386a 60%, #122d57);
  background-size: 18px 18px, auto;
}

.aca-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.aca-video.listo video {
  opacity: 1;
  pointer-events: auto;
}

.aca-reproducir {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(10, 21, 34, 0.55);
}

.aca-reproducir svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  fill: #fff;
}

.aca-video.listo .aca-reproducir {
  display: none;
}

/* ---------- Cierre ---------- */

.aca-cierre {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--l-pad) clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}

.aca-cierre h2 {
  font-family: var(--l-fuente-titulo);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.06;
  color: #fff;
  text-wrap: balance;
}

.aca-cierre p {
  color: var(--l-sobre-noche-2);
  text-wrap: balance;
}

/* ---------- Pantallas chicas ---------- */

@media (max-width: 900px) {
  .aca-videos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aca-graba,
  .aca-viaja,
  .aca-carga,
  .aca-dibuja,
  .aca-aparece,
  .aca-cara,
  .aca-flota,
  .aca-sube,
  .aca-cae,
  .aca-pulsa,
  .aca-enciende {
    animation: none;
  }

  /* Quieto, cada dibujo queda completo: lo que se dibujaba, dibujado; lo que aparecía, a la vista. */
  .aca-carga,
  .aca-dibuja {
    stroke-dashoffset: 0;
  }

  .aca-aparece,
  .aca-cae {
    opacity: 1;
  }

  .aca-enciende,
  .aca-cara {
    opacity: 0.6;
  }
}