/* Vídeo de marca de InfinyAI (11-10-2026; sin controles y en bucle desde el 12-10-2026).
   Hoja propia a propósito: la cargan solo index, index-en, normal y normal-en. Así no hay
   que subir el ?v= de styles.css ni de site.js en el centenar de páginas que los comparten.
     .vm-boton      el botón de la portada 3D, dentro de .scroll-cue
     .vm-visor      la ventana que abre ese botón: un <dialog> en la capa superior del
                    navegador, por encima de todo (también del asistente) sin pelear z-index
     .video-marca   el bloque de la web normal, al final de #inicio
   La variante vertical (9:16) se sirve con la MISMA consulta aquí y en video-marca.js:
   (max-width: 699.98px) and (orientation: portrait). */

/* ---------- Piezas comunes ---------- */

.vm-boton,
.vm-pildora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  color: #f8f7fd;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  /* Fondo casi opaco: el rótulo se lee igual sobre el símbolo 3D o sobre un fotograma claro */
  background: rgba(9, 9, 16, 0.78);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.3s cubic-bezier(0.2, 0.65, 0.2, 1), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.vm-pildora[hidden],
.vm-visor__boton[hidden] {
  display: none;
}

.vm-boton:focus-visible,
.vm-pildora:focus-visible,
.vm-visor__boton:focus-visible,
.vm-visor video:focus-visible,
.video-marca__video:focus-visible {
  outline: 2px solid #b9a2ff;
  outline-offset: 3px;
}

.vm-visor video:focus-visible,
.video-marca__video:focus-visible {
  outline-offset: -4px;
}

@media (hover: hover) {
  .vm-boton:hover,
  .vm-pildora:hover {
    transform: translateY(-2px);
    border-color: rgba(166, 108, 255, 0.7);
    background: rgba(26, 19, 54, 0.9);
    box-shadow: 0 12px 34px rgba(110, 84, 255, 0.3);
  }
}

.vm-icono {
  display: grid;
  flex: none;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #07070c;
  border-radius: 50%;
  background: linear-gradient(135deg, #bd99ff, #4dacff);
}

.vm-icono svg {
  display: block;
  width: 13px;
  height: 13px;
  margin-left: 2px;
  fill: currentColor;
}

/* Sin controles (12-10-2026, Jon: «no quiero controles de nada»). El vídeo no lleva el
   atributo controls, que es lo que hacía salir en el iPhone los saltos de 10 s, el play, la
   barra de tiempo y la imagen en imagen. Se pausa y se sigue tocando el propio vídeo. */
.vm-visor video,
.video-marca__video {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Lo que WebKit pinta por su cuenta aunque no haya controls: el botón de play superpuesto
   cuando el sistema no deja arrancar solo (modo de bajo consumo). Va en una regla aparte:
   Firefox tira la regla entera si no conoce el selector. */
.vm-visor video::-webkit-media-controls,
.video-marca__video::-webkit-media-controls {
  display: none !important;
}

.vm-visor video::-webkit-media-controls-start-playback-button,
.video-marca__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Lo único que aparece sobre la imagen, y solo cuando la persona lo ha parado: cómo seguir */
.vm-parado {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  visibility: hidden;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(9, 9, 16, 0.62);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.vm-parado svg {
  display: block;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  fill: currentColor;
}

[data-parado] .vm-parado {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

/* Pantalla completa: un mismo botón enseña a qué lleva */
.vm-ico-salir,
.es-completa .vm-ico-entrar {
  display: none !important;
}

.es-completa .vm-ico-salir {
  display: block !important;
}

/* ---------- Portada 3D: el botón ---------- */

.vm-boton {
  margin-bottom: 7px;
  padding: 0 18px 0 7px;
}

/* ESCRITORIO (860 px de ancho o más). La portada es una pantalla fija: en las bajas no caben
   el párrafo, el botón, el rótulo y la línea animada. Ahí se quita la línea (medido en los 16
   tamaños: sin esto el botón pisaba el párrafo a 1366x768, 1280x720, 1280x680 y 900x600). */
@media (min-width: 860px) and (max-height: 880px) {
  .scroll-cue .vm-boton ~ i {
    display: none;
  }
}

/* MÓVIL Y TABLETA (menos de 860 px de ancho). El cartel del asistente sale a los 9 s pegado a
   la derecha, de 84 px del borde de abajo hacia arriba, y tapaba el botón (medido: 100 % a
   390x844). Aquí el botón baja a la fila de abajo, a la izquierda, a la altura del lanzador del
   asistente: por debajo de 84 px el cartel no llega. «DESLIZA PARA ENTRAR» se queda centrado
   donde estaba, con la línea más corta. 860 px es el ancho desde el que el cartel (300 px) ya
   no alcanza al botón centrado; de ahí para arriba es el escritorio, que no se toca. */
@media (max-width: 859.98px) {
  .scroll-cue {
    right: 0;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 0;
    transform: none;
  }

  .scroll-cue i {
    height: 22px;
  }

  /* 80 - 55 = 25 px del borde: centrado en alto con el lanzador (22 px + 50 de alto) */
  .scroll-cue .vm-boton {
    position: absolute;
    bottom: -55px;
    left: 22px;
    margin: 0;
  }
}

@media (max-width: 859.98px) and (max-height: 620px) {
  .scroll-cue i {
    display: none;
  }
}

/* Móvil tumbado: botón, rótulo y lanzador en la misma fila de abajo. Ahí el párrafo ya llegaba
   hasta el rótulo antes del vídeo; el botón va por encima para que se pueda pulsar. */
@media (max-width: 859.98px) and (max-height: 520px) {
  .scroll-cue {
    z-index: 4;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }

  /* Todo lo más abajo posible (rótulo a 6 px del borde, botón a 8): es lo que menos párrafo tapa */
  .scroll-cue .vm-boton {
    bottom: 2px;
    min-height: 40px;
  }
}

/* Ventana ancha y muy baja: botón y rótulo en una sola fila centrada */
@media (min-width: 860px) and (max-height: 520px) {
  .scroll-cue:has(.vm-boton) {
    z-index: 4;
    grid-auto-flow: column;
    align-items: center;
    gap: 16px;
    bottom: 10px;
  }

  .scroll-cue .vm-boton {
    min-height: 40px;
    margin-bottom: 0;
  }
}

/* ---------- Portada 3D: la ventana ---------- */

/* Con la ventana abierta la página de detrás no se mueve: ni rueda, ni teclado, ni dedo.
   scrollbar-gutter guarda el hueco de la barra para que la escena no dé un salto. */
html.vm-sin-scroll {
  overflow: hidden !important;
  scrollbar-gutter: stable;
}

.vm-visor {
  width: -moz-fit-content;
  width: fit-content;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  color: #fff;
  border: 0;
  outline: none;
  background: transparent;
  touch-action: none;
  overscroll-behavior: contain;
}

.vm-visor::backdrop {
  background: rgba(4, 4, 8, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.vm-visor__marco {
  position: relative;
  overflow: hidden;
  width: min(94vw, 1320px, calc((100vh - 88px) * 16 / 9));
  width: min(94vw, 1320px, calc((100dvh - 88px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: #07070c;
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.6);
}

.vm-visor[data-formato="9x16"] .vm-visor__marco {
  width: min(92vw, calc((100vh - 88px) * 9 / 16));
  width: min(92vw, calc((100dvh - 88px) * 9 / 16));
  aspect-ratio: 9 / 16;
}

.vm-visor video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #07070c;
}

/* Arriba, en la esquina y por fuera de la imagen: pantalla completa (donde el navegador la
   tiene; en el iPhone no existe y el botón no sale) y cerrar */
.vm-visor__botones {
  position: absolute;
  z-index: 2;
  top: -14px;
  right: -14px;
  display: flex;
  gap: 8px;
}

.vm-visor__boton {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(16, 16, 26, 0.96);
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.vm-visor__boton svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .vm-visor__boton:hover {
    transform: scale(1.08);
    background: rgba(74, 56, 150, 0.96);
  }
}

@media (max-width: 600px) {
  .vm-visor__botones {
    top: -13px;
    right: -6px;
  }
}

/* A pantalla completa va la caja de dentro (un <dialog> no puede): ocupa todo y los dos botones
   pasan dentro, arriba a la derecha */
.vm-visor__caja {
  position: relative;
}

.vm-visor__caja.es-completa {
  background: #000;
}

.vm-visor .vm-visor__caja.es-completa .vm-visor__marco {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.vm-visor__caja.es-completa video {
  background: #000;
}

.vm-visor__caja.es-completa .vm-visor__botones {
  top: 14px;
  right: 14px;
  opacity: 0.78;
}

/* ---------- Web normal: el bloque ---------- */

.video-marca {
  margin-top: clamp(34px, 5vw, 60px);
}

/* La portada llena la primera pantalla: el titular y los botones mandan y del vídeo solo asoma
   el borde (44 px). Donde el texto ya es más alto que la pantalla no cambia nada. Medido: sin
   esto, en pantallas altas (1920x1080, tabletas en vertical) el vídeo era lo más grande de la
   primera pantalla y arrancaba nada más cargar. .hero-statement ya es una rejilla que centra;
   solo se le da alto a su primera fila. 78 = cabecera, 64 = su relleno de arriba. */
.hero-statement:has(> .video-marca) {
  grid-template-rows: minmax(calc(100vh - 78px - 64px - clamp(34px, 5vw, 60px) - 44px), auto) auto;
  grid-template-rows: minmax(calc(100svh - 78px - 64px - clamp(34px, 5vw, 60px) - 44px), auto) auto;
}

/* El hueco se reserva aquí, con sus proporciones, antes de que cargue nada: la página no
   salta. El alto se limita a lo que cabe bajo la cabecera pegajosa (78 px), para que el
   vídeo se vea entero de una vez. */
.video-marca__marco {
  position: relative;
  overflow: hidden;
  width: min(100%, calc((100vh - 102px) * 16 / 9));
  width: min(100%, calc((100svh - 102px) * 16 / 9));
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: #07070c;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  cursor: pointer;
}

@media (max-width: 699.98px) and (orientation: portrait) {
  .video-marca__marco {
    width: min(100%, calc((100vh - 110px) * 9 / 16));
    width: min(100%, calc((100svh - 110px) * 9 / 16));
    aspect-ratio: 9 / 16;
    border-radius: 18px;
  }
}

.video-marca__video,
.video-marca__portada,
.video-marca__portada img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-marca__portada {
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

/* En cuanto el vídeo ha empezado, la portada sobra: el fotograma es el propio vídeo */
.video-marca.es-visto .video-marca__portada {
  visibility: hidden;
  opacity: 0;
}

.video-marca__marco.es-completa {
  border: 0;
  border-radius: 0;
  background: #000;
}

.video-marca__marco.es-completa .video-marca__video,
.video-marca__marco.es-completa .video-marca__portada img {
  object-fit: contain;
}

/* Arriba a la derecha, como el «Ampliar» del vídeo de FitCoachLab: esa esquina está libre
   en todas las escenas (el logotipo va arriba a la izquierda) */
.video-marca__barra {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vm-pildora {
  padding: 0 17px 0 14px;
  gap: 9px;
}

.vm-pildora svg {
  display: block;
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vm-pildora--icono {
  width: 44px;
  padding: 0;
  justify-content: center;
}

/* Cuando hay que pulsar para verlo (menos movimiento, ahorro de datos o arranque bloqueado) */
.video-marca__play {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 54px;
  padding: 0 24px 0 9px;
  font-size: 0.96rem;
  transform: translate(-50%, -50%);
}

/* La portada se apaga un poco para que el botón mande sobre ella */
.video-marca[data-hay-que-pulsar] .video-marca__portada {
  filter: brightness(0.45);
}

.video-marca__play .vm-icono {
  width: 36px;
  height: 36px;
}

.video-marca__play .vm-icono svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

@media (hover: hover) {
  .video-marca__play:hover {
    transform: translate(-50%, calc(-50% - 2px));
  }
}

@media (max-width: 420px) {
  .video-marca__barra {
    top: 10px;
    right: 10px;
  }

  .vm-pildora {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vm-boton,
  .vm-pildora,
  .vm-visor__boton,
  .vm-parado,
  .video-marca__portada {
    transition: none;
  }
}