/* Landing de OtherVision (/). Paleta clara con la cabeza y el pie oscuros.

   De la app solo se toman las variables de tokens.css que no son colores: tipografías, radios
   y espaciados. Los colores de la landing son los `--l-*` de acá abajo y no salen de este
   archivo: la app es oscura y esta página no.

   La página alterna dos fondos: azul noche en la portada y en el tramo de las tarjetas y las
   métricas, y el claro de puntos en las marcas y los sectores. La cabeza y el pie son más
   oscuros que ese azul.

   Orden: paleta → base → fondo → cabeza (con la barra de novedades) → botones → portada → marcas → sectores (con el
   video de su splat y el video) → comenzá → métricas → pie → entrada de los bloques → pantallas chicas. */

:root {
  --l-fondo: #f3f7fc;
  --l-papel: #ffffff;
  --l-tinta: #0c1a2b;
  --l-tinta-2: #4a5c70;
  --l-tinta-3: #7b8ca0;
  --l-linea: rgba(12, 26, 43, 0.1);
  --l-azul: #1e6fe0;
  --l-azul-fuerte: #1557b8;
  --l-celeste: #a9d2ff;
  --l-celeste-suave: #e3f0ff;
  --l-noche: #0a1522;
  --l-noche-2: #13233a;
  --l-sobre-noche: #e8f1fb;
  --l-sobre-noche-2: #a3b6cc;
  /* El azul noche de la portada y del tramo de las tarjetas: oscuro, pero menos que la cabeza.
     El tramo de abajo se funde de uno al otro. */
  --l-portada: #14315c;
  --l-portada-2: #0e2343;
  --l-punto-noche: rgba(255, 255, 255, 0.09);

  /* Los títulos van en una grotesca condensada, sobria, de la familia de las de ROG y
     Polycam. El texto corrido sigue en Saira y la marca y los botones en Kumbh Sans. */
  --l-fuente-titulo: "Roboto Condensed", "Arial Narrow", var(--fuente);

  --l-pad: clamp(1.25rem, 5vw, 4rem);
  --l-ancho: 1240px;
  --l-alto-nav: 68px;
  --l-radio: 22px;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--l-fondo);
  color: var(--l-tinta);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--l-azul);
  outline-offset: 3px;
}

/* La cabeza es fija: las anclas frenan más abajo para no quedar tapadas. */
[id] {
  scroll-margin-top: calc(var(--l-alto-nav) + 20px);
}

.saltar {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--r-boton);
  background: var(--l-papel);
  color: var(--l-tinta);
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
}

/* ---------- Fondo: puntos y destellos ---------- */

.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--l-fondo);
  background-image: radial-gradient(rgba(12, 26, 43, 0.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* Dos halos de luz, como una lente que agarra el sol de costado. Quietos y muy bajos: están
   para que el fondo no sea una grilla plana, no para que se los mire. El degradé ya es
   difuso: no llevan `filter: blur`, que sobre un círculo de media pantalla sale caro. */
.destello {
  position: absolute;
  border-radius: 50%;
}

.destello-a {
  top: -22vmax;
  right: -14vmax;
  width: 62vmax;
  height: 62vmax;
  background: radial-gradient(closest-side, rgba(169, 210, 255, 0.55), rgba(169, 210, 255, 0.16) 55%, transparent);
}

.destello-b {
  bottom: -30vmax;
  left: -20vmax;
  width: 58vmax;
  height: 58vmax;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(227, 240, 255, 0.35) 55%, transparent);
}

/* El rayo fino que cruza una lente: una sola línea, en diagonal. */
.destello-raya {
  position: absolute;
  top: 18%;
  right: -10%;
  width: 70%;
  height: 1px;
  transform: rotate(-14deg);
  background: linear-gradient(90deg, transparent, rgba(30, 111, 224, 0.28), rgba(255, 255, 255, 0.9), transparent);
}

/* ---------- Cabeza ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--esp-5);
  height: var(--l-alto-nav);
  padding: 0 var(--l-pad);
  /* Casi opaca y sin `backdrop-filter`: desenfocar lo que pasa por detrás obliga a
     recalcularlo en cada cuadro del scroll, y con este fondo casi no se notaba. */
  background: rgba(10, 21, 34, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--l-sobre-noche);
  transition: height 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

/* Al bajar se acomoda: más baja y con sombra, pero sigue ahí. */
.nav.encogido {
  height: 56px;
  background: rgba(10, 21, 34, 0.98);
  box-shadow: 0 10px 30px rgba(10, 21, 34, 0.22);
}

.nav-marca {
  justify-self: start;
  font-family: var(--fuente-marca);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: #fff;
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: clamp(0.25rem, 1.4vw, 1.5rem);
}

/* Cada entrada ocupa todo el alto de la barra: así el cursor baja de la palabra a su panel
   sin pasar por ningún hueco. No lleva `position`, para que el panel se ubique contra la
   barra entera y no contra la palabra. */
.nav-grupo {
  display: flex;
  align-items: stretch;
}

.nav-titulo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--l-sobre-noche-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

/* La flechita que dice que ahí abajo hay más. */
.nav-titulo::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.nav-grupo:hover .nav-titulo,
.nav-grupo:focus-within .nav-titulo,
.nav-grupo.abierto .nav-titulo {
  color: #fff;
}

.nav-grupo:hover .nav-titulo::after,
.nav-grupo:focus-within .nav-titulo::after,
.nav-grupo.abierto .nav-titulo::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

/* El panel es la barra que se estira hacia abajo: mismo color, todo el ancho. Al cerrarse
   espera un instante antes de dejar de estar, para no parpadear si el cursor se sale un
   pixel en el camino. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  /* Opaco: debajo queda la barra de novedades y no tiene que transparentarse. */
  background: var(--l-noche);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 40px rgba(4, 12, 24, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.nav-grupo:hover .nav-panel,
.nav-grupo:focus-within .nav-panel,
.nav-grupo.abierto .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.nav-panel-interior {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-6);
  max-width: calc(var(--l-ancho) + 2 * var(--l-pad));
  margin: 0 auto;
  padding: var(--esp-6) var(--l-pad) calc(var(--esp-6) + var(--esp-2));
}

.nav-panel-rotulo {
  padding-top: 12px;
  font-family: var(--fuente-marca);
  font-size: var(--t-chico);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--l-sobre-noche-2);
}

.nav-panel ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-2) var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-panel li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--l-sobre-noche);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.nav-panel li a::after {
  content: "→";
  flex: none;
  color: var(--l-celeste);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-panel li a:hover,
.nav-panel li a:focus-visible {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.nav-panel li a:hover::after,
.nav-panel li a:focus-visible::after {
  opacity: 1;
  transform: none;
}

.nav-fin {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.nav-login {
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  border-radius: var(--r-pastilla);
  background: var(--l-celeste);
  box-shadow: 0 0 0 3px rgba(169, 210, 255, 0.22);
  color: var(--l-noche);
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.nav-login:hover {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(169, 210, 255, 0.34);
  transform: translateY(-1px);
}

.nav-menu {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: none;
  cursor: pointer;
}

.nav-menu span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--l-sobre-noche);
  transition: transform 180ms ease, opacity 180ms ease;
}

/* La barra de novedades: una pestaña celeste que cuelga de la cabeza, a la mitad de su ancho
   y centrada. Vive adentro de la cabeza para bajar y subir con ella, y por debajo de los
   paneles (z-index 1 contra 2): al abrirse uno, queda detrás. */
.nav-aviso {
  position: absolute;
  /* Un pixel más abajo que los paneles (la línea de borde de la cabeza): si arrancaran en el
     mismo renglón, con la pantalla escalada asomaría un filo celeste arriba del panel. */
  top: calc(100% + 1px);
  left: 25%;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 50%;
  padding: 8px 10px 8px 20px;
  border-radius: 0 0 16px 16px;
  background: var(--l-celeste);
  box-shadow: 0 12px 28px rgba(4, 12, 24, 0.24);
  color: var(--l-noche);
  animation: aviso-entra 320ms ease 400ms backwards;
  transition: opacity 200ms ease, transform 200ms ease;
}

.nav-aviso[hidden] {
  display: none;
}

.nav-aviso.se-va {
  opacity: 0;
  transform: translateY(-8px);
}

.nav-aviso p {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.nav-aviso-cerrar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 21, 34, 0.1);
  color: inherit;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.nav-aviso-cerrar:hover {
  background: rgba(10, 21, 34, 0.2);
}

.nav-aviso-cerrar:focus-visible {
  outline-color: var(--l-noche);
  outline-offset: 2px;
}

@keyframes aviso-entra {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ---------- Botones ---------- */

.boton-l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pastilla);
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease,
    box-shadow 160ms ease;
}

.boton-l-primario {
  background: var(--l-azul);
  color: #fff;
  box-shadow: 0 10px 26px rgba(30, 111, 224, 0.24);
}

.boton-l-primario:hover {
  background: var(--l-azul-fuerte);
  transform: translateY(-1px);
}

.boton-l-claro {
  background: #fff;
  color: var(--l-noche);
  box-shadow: 0 10px 26px rgba(4, 12, 24, 0.28);
}

.boton-l-claro:hover {
  background: var(--l-celeste);
  transform: translateY(-1px);
}

.boton-l-contorno {
  border-color: rgba(30, 111, 224, 0.45);
  background: rgba(255, 255, 255, 0.7);
  color: var(--l-azul-fuerte);
}

.boton-l-contorno:hover {
  border-color: var(--l-azul);
  background: var(--l-celeste-suave);
}

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

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

.hero-interior {
  /* El cuerpo del título manda en toda la portada: de él salen el ancho de su caja y dónde
     empieza el video. La caja mide 7,6 veces el cuerpo —entra "Genera espacios" y no entra
     una palabra más— y el renglón más largo unas 6,2: su mitad cae a 3,1, y ahí arranca el
     video. */
  --l-titulo: clamp(2.6rem, 6.4vw, 5.75rem);
  --l-titulo-ancho: calc(var(--l-titulo) * 7.6);
  --l-titulo-mitad: calc(var(--l-titulo) * 3.1);
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--l-ancho);
  min-height: clamp(400px, 42vw, 580px);
  margin: 0 auto;
}

/* El video es una capa detrás del texto: ocupa la derecha y llega hasta la mitad del título,
   que se le monta encima. */
.hero-medio.medio {
  position: absolute;
  inset: 0 0 0 var(--l-titulo-mitad);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  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;
}

/* Un velo del color de la portada sobre el lado izquierdo del video: medio título y el texto
   quedan encima y tienen que seguir leyéndose con cualquier fotograma detrás. */
.hero-medio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(20, 49, 92, 0.92), rgba(20, 49, 92, 0.55) 34%, transparent 64%);
  pointer-events: none;
}

.hero-medio .medio-nota {
  left: 72%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.hero-texto {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: var(--esp-5);
  padding: var(--esp-6) 0;
}

.hero-titulo {
  max-width: var(--l-titulo-ancho);
  font-family: var(--l-fuente-titulo);
  font-size: var(--l-titulo);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
  /* Medio título queda sobre el video: una sombra del color de la portada lo despega. */
  text-shadow: 0 2px 26px rgba(10, 21, 34, 0.5);
}

.hero-titulo > span {
  display: block;
  /* Si la frase se parte, que se parta pareja y no deje una palabra sola abajo. */
  text-wrap: balance;
}

.hero-texto p {
  max-width: 29rem;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--l-sobre-noche);
}

/* El hueco de la última palabra: las opciones se apilan y solo se ve la de turno. El ancho
   se anima hasta el de la que entra, así el renglón no salta ni queda un blanco enorme
   (js/palabras.js). */
.palabra {
  display: inline-block;
  position: relative;
  width: 0;
  height: 1em;
  /* Las opciones van sueltas adentro, así que la caja no tiene renglón propio y se apoyaría
     por su borde de abajo: se la baja lo justo para que la palabra pise la misma línea que
     el resto del título. */
  vertical-align: -0.17em;
  color: var(--l-celeste);
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.palabra::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--l-celeste), rgba(169, 210, 255, 0.15));
}

.palabra-opcion {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  filter: blur(8px);
  transition: opacity 360ms ease, transform 360ms ease, filter 360ms ease;
}

.palabra-opcion.on {
  opacity: 1;
  transform: none;
  filter: none;
}

.palabra-opcion.se-va {
  opacity: 0;
  transform: translateY(-0.3em);
  filter: blur(8px);
  transition-duration: 180ms;
}

/* ---------- Un video con su hueco ----------

   La caja siempre está: si el archivo todavía no existe (o no carga) queda el hueco con su
   leyenda, y cuando el video tiene un fotograma js/medios.js le pone `listo`. */

.medio {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--l-linea);
  border-radius: var(--l-radio);
  background-color: var(--l-celeste-suave);
  background-image:
    radial-gradient(rgba(30, 111, 224, 0.2) 1px, transparent 1.4px),
    linear-gradient(135deg, #f7fbff, var(--l-celeste-suave) 60%, #cfe4ff);
  background-size: 18px 18px, auto;
}

.medio video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
}

.medio.listo video {
  opacity: 1;
}

.medio-nota {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: var(--r-pastilla);
  font-size: var(--t-chico);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.medio-nota {
  background: rgba(255, 255, 255, 0.75);
  color: var(--l-tinta-3);
}

.medio.listo .medio-nota {
  display: none;
}

/* ---------- Marcas ---------- */

.marcas {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-block: 1px solid var(--l-linea);
  background: rgba(255, 255, 255, 0.6);
}

/* Los logos se pierden hacia los bordes en vez de cortarse contra el canto de la pantalla. */
.marcas-cinta {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.marcas-pista {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El aire va como margen de cada logo y no como `gap`: así una tanda mide exactamente lo que
   hay que correr para que la siguiente caiga en el mismo lugar (js/marcas.js). */
.marcas-pista li {
  flex: none;
  margin-right: clamp(2.5rem, 6vw, 5rem);
}

.marcas-pista img {
  height: 40px;
  width: auto;
  opacity: 0.72;
}

.marcas-cinta.andando .marcas-pista {
  animation: marcas var(--marcas-vuelta, 40s) linear infinite;
}

.marcas-cinta.andando:hover .marcas-pista {
  animation-play-state: paused;
}

@keyframes marcas {
  to {
    transform: translateX(calc(-1 * var(--marcas-paso, 50%)));
  }
}

/* ---------- Sectores ---------- */

.sectores {
  max-width: calc(var(--l-ancho) + 2 * var(--l-pad));
  margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 4rem) var(--l-pad);
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
}

/* Cada sector va en su panel: un vidrio apenas más claro que el fondo, con el borde
   redondeado, que agrupa las tres piezas sin llamar la atención.

   Adentro, una fila de tres. El video del splat es cuadrado y el otro 16:9: con las columnas en esa
   misma proporción (1 : 1,7778) los dos quedan exactamente de la misma altura. */
.sector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7778fr) minmax(15rem, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  /* Arriba y abajo lleva mucho más aire que a los costados: el panel mide una vez y media
     lo que mide lo que tiene adentro. */
  padding: clamp(3rem, 8vw, 7.5rem) clamp(1rem, 2vw, 1.75rem);
  border: 1px solid rgba(12, 26, 43, 0.07);
  border-radius: calc(var(--l-radio) + 10px);
  /* Sin `backdrop-filter`: el fondo es fijo, así que cada cuadro del scroll obligaba a
     desenfocar de nuevo los tres paneles, con dos videos adentro de cada uno. */
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 18px 44px rgba(12, 26, 43, 0.05);
}

.sector-invertido {
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 1fr) minmax(0, 1.7778fr);
}

.sector-video {
  aspect-ratio: 16 / 9;
}

.sector-texto {
  display: grid;
  justify-items: start;
  gap: var(--esp-4);
  padding: 0 clamp(0rem, 1vw, 1rem);
}

.sector-texto h2 {
  font-family: var(--l-fuente-titulo);
  font-size: clamp(1.8rem, 2.7vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.sector-texto p {
  color: var(--l-tinta-2);
}

/* ---------- El video del splat de un sector ----------

   Un cuadrado negro con un video adentro: el splat dando una vuelta. Todo el cuadrado es el
   link al visor público (/soluciones/ver/#/<sector>/portada), donde el mismo splat se
   recorre, y el rótulo lo dice. */

.sector-orbita {
  position: relative;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  border-radius: var(--l-radio);
  background: #000;
  text-decoration: none;
}

.sector-orbita .medio {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}

.sector-orbita video {
  transition: opacity 400ms ease, transform 500ms ease;
}

.sector-orbita:hover video,
.sector-orbita:focus-visible video {
  transform: scale(1.03);
}

/* Si el video no carga queda el cuadrado negro con su leyenda, y el botón igual lleva al splat. */
.sector-orbita .medio-nota {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/* "Explorar en 3D": abajo, al centro. */
.orbita-abrir {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pastilla);
  background: rgba(10, 21, 34, 0.72);
  color: #fff;
  font-family: var(--fuente-marca);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.orbita-abrir::after {
  content: "→";
  color: var(--l-celeste);
  transition: transform 160ms ease;
}

.sector-orbita:hover .orbita-abrir,
.sector-orbita:focus-visible .orbita-abrir {
  border-color: var(--l-celeste);
  background: rgba(10, 21, 34, 0.92);
}

.sector-orbita:hover .orbita-abrir::after {
  transform: translateX(3px);
}

/* ---------- El tramo azul noche: tarjetas y métricas ---------- */

.zona-noche {
  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);
}

/* ---------- Comenzá ---------- */

.comenzar {
  max-width: calc(var(--l-ancho) + 2 * var(--l-pad));
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--l-pad) clamp(2.5rem, 5vw, 4rem);
}

.comenzar-titulo {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}

.comenzar-titulo h2 {
  font-family: var(--l-fuente-titulo);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #fff;
}

.comenzar-titulo p {
  max-width: 36rem;
  font-size: 1.08rem;
  color: var(--l-sobre-noche-2);
}

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

.tarjeta {
  display: grid;
  align-content: start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-4) var(--esp-5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--l-radio);
  background: rgba(255, 255, 255, 0.06);
}

/* La imagen de cada tarjeta es un SVG animado, con el fondo transparente: el recuadro lo
   pone la tarjeta. */
.tarjeta img {
  width: 100%;
  height: auto;
  aspect-ratio: 32 / 21;
  object-fit: cover;
  margin-bottom: var(--esp-2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.tarjeta h3 {
  padding: 0 var(--esp-2);
  font-family: var(--l-fuente-titulo);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.tarjeta p {
  padding: 0 var(--esp-2);
  color: var(--l-sobre-noche-2);
}

/* ---------- Métricas ---------- */

.metricas {
  max-width: calc(var(--l-ancho) + 2 * var(--l-pad));
  margin: 0 auto;
  padding: 0 var(--l-pad) clamp(3.5rem, 7vw, 6rem);
}

.metricas-fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(255, 255, 255, 0.12);
}

.metrica {
  display: grid;
  gap: var(--esp-1);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2.25rem);
}

.metrica + .metrica {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.metrica-numero {
  font-family: var(--l-fuente-titulo);
  font-size: clamp(2.9rem, 6vw, 5.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--l-celeste);
  font-variant-numeric: tabular-nums;
}

.metrica-nota {
  max-width: 16rem;
  color: var(--l-sobre-noche-2);
}

/* ---------- Pie ---------- */

.pie {
  background: var(--l-noche);
  color: var(--l-sobre-noche-2);
}

.pie-interior {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: calc(var(--l-ancho) + 2 * var(--l-pad));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--l-pad) clamp(2.5rem, 5vw, 4rem);
}

.pie-marca {
  display: grid;
  align-content: start;
  gap: var(--esp-3);
}

.pie-marca .nav-marca {
  font-size: 1.25rem;
}

.pie-marca p {
  max-width: 18rem;
  color: var(--l-sobre-noche);
}

.pie-marca .pie-origen {
  font-size: var(--t-chico);
  color: var(--l-sobre-noche-2);
}

/* Las redes de OtherVision: un círculo por red, con su logo. */
.pie-redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

.pie-redes a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--l-sobre-noche);
  transition: color 160ms ease, border-color 160ms ease;
}

.pie-redes a:hover,
.pie-redes a:focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.pie-redes svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.pie-columna {
  display: grid;
  align-content: start;
  gap: var(--esp-3);
}

.pie-columna h2 {
  margin-bottom: var(--esp-1);
  font-family: var(--fuente-marca);
  font-size: var(--t-chico);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.pie-columna a {
  width: fit-content;
  text-decoration: none;
  transition: color 160ms ease;
}

.pie-columna a:hover,
.pie-columna a:focus-visible {
  color: #fff;
}

.pie-cierre {
  max-width: calc(var(--l-ancho) + 2 * var(--l-pad));
  margin: 0 auto;
  padding: var(--esp-5) var(--l-pad) var(--esp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--t-chico);
}

/* ---------- Entrada de los bloques ---------- */

[data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

[data-revelar].visible {
  opacity: 1;
  transform: none;
}

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

  [data-revelar] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .palabra,
  .palabra-opcion,
  .medio video,
  .sector-orbita video,
  .orbita-abrir,
  .orbita-abrir::after,
  .nav-aviso {
    transition: none;
  }

  .nav-aviso {
    animation: none;
  }

  .marcas-cinta.andando .marcas-pista {
    animation: none;
  }
}

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

/* Entre la computadora y el teléfono los links ya no entran al medio: pasan a un menú. */
@media (max-width: 920px) {
  .nav {
    grid-template-columns: 1fr auto;
  }

  .nav-menu {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--l-alto-nav));
    max-height: calc(100dvh - var(--l-alto-nav));
    padding: var(--esp-2) var(--l-pad) var(--esp-4);
    overflow-y: auto;
    background: var(--l-noche);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav.abierto .nav-links {
    display: flex;
  }

  /* La mitad de una pantalla angosta no alcanza para leer la novedad: acá va de margen a
     margen. El menú abierto la tapa igual que los paneles. */
  .nav-aviso {
    left: var(--l-pad);
    width: calc(100% - 2 * var(--l-pad));
    padding-left: 14px;
  }

  /* Acá no hay cursor que pase por encima: cada entrada es un renglón que, al tocarlo, abre
     sus accesos debajo. */
  .nav-grupo {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav-grupo:last-child {
    border-bottom: 0;
  }

  .nav-titulo {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 1.05rem;
    color: var(--l-sobre-noche);
  }

  .nav-panel,
  .nav-grupo:hover .nav-panel,
  .nav-grupo:focus-within .nav-panel {
    position: static;
    display: none;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .nav-grupo.abierto .nav-panel {
    display: block;
  }

  .nav-grupo:hover .nav-titulo::after,
  .nav-grupo:focus-within .nav-titulo::after {
    margin-top: -3px;
    transform: rotate(45deg);
  }

  .nav-grupo.abierto .nav-titulo::after {
    margin-top: 3px;
    transform: rotate(-135deg);
  }

  .nav-panel-interior {
    display: block;
    padding: 0 0 var(--esp-3);
  }

  .nav-panel-rotulo {
    display: none;
  }

  .nav-panel ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .nav-panel li a {
    padding: 11px 12px;
    color: var(--l-sobre-noche-2);
    font-weight: 500;
  }

  .nav.abierto .nav-menu span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav.abierto .nav-menu span:nth-child(2) {
    opacity: 0;
  }

  .nav.abierto .nav-menu span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* Las tres piezas de cada sector se apilan en el mismo orden en que están escritas. */
@media (max-width: 900px) {
  .sector,
  .sector-invertido {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(1rem, 4vw, 1.75rem);
  }

  .sector-texto {
    padding: 0;
  }

  .tarjetas {
    grid-template-columns: minmax(0, 1fr);
  }

  .pie-interior {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pie-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  /* El video pasa arriba, a todo el ancho, y el título se le monta desde abajo hasta la
     mitad: son tres renglones, así que sube uno y medio. */
  .hero-interior {
    display: block;
    min-height: 0;
  }

  .hero-medio.medio {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 11;
    border-radius: var(--l-radio);
  }

  .hero-medio::after {
    background: linear-gradient(0deg, rgba(20, 49, 92, 0.95), rgba(20, 49, 92, 0.5) 36%, transparent 66%);
  }

  .hero-medio .medio-nota {
    left: 50%;
    top: 32%;
  }

  .hero-texto {
    margin-top: calc(var(--l-titulo) * -1.5);
    padding: 0 var(--esp-1);
  }

  .hero-titulo {
    max-width: none;
  }

  .metricas-fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .metrica + .metrica {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-login {
    padding: 8px 18px;
  }
}