/*!
 * BIZARRO · Spot institucional de la portada (Hito R).
 * Se carga solo cuando hay un spot publicado. Usa los tokens de styles.css: ningún color nuevo (D-17).
 */

html:not(.js) .spot-only-js { display: none !important; }

.spot__head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.spot__head h2 { font-size: clamp(2.2rem, 5.2vw, 4rem); letter-spacing: -0.035em; line-height: 1.04; max-width: 16ch; }
/* Hito Y: la sección tiene fondo blanco (clase «white»); título y texto en negro, como el resto de las secciones claras. */
.spot__head .lead { color: var(--negro); max-width: 38rem; }

/* Hito V (D-109): menos alto. Menos relleno vertical y, en pantallas anchas, título y texto en dos columnas. El marco del
   vídeo (16:9, ancho completo) no cambia. */
.section.spot { padding-block: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) {
  .spot__head { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 1rem clamp(2rem, 5vw, 5rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
  .spot__head .lead { max-width: 32rem; }
}

/* Marco del vídeo: 16:9, esquinas suaves y un borde fino, como las tarjetas de la órbita. */
.spot__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 1rem;
  background: var(--grafito);
}
.spot__video {
  display: block; width: 100%; height: 100%; object-fit: cover; background: var(--grafito);
  /* El cartel se ve en blanco y negro como el resto del sitio (D-17). El atributo «poster» no
     recibe los filtros de CSS por separado, así que el filtro va en el propio <video> y se retira
     al empezar a reproducir: el spot se ve con sus colores. */
  filter: grayscale(1) contrast(1.05);
}
.spot__frame.is-playing .spot__video,
.spot__frame--color .spot__video { filter: none; }
/* Hito X: con JavaScript, el botón propio es el único PLAY hasta el primer clic (Chrome para Android pintaba otro encima).
   spot.js también retira el atributo «controls»; esta regla evita el parpadeo antes de que el guion cargue. */
html.js .spot__frame:not(.is-playing) .spot__video::-webkit-media-controls { display: none !important; }
.spot__fallback { padding: 1.5rem; color: var(--plata); }

/* Botón propio sobre el cartel. Desaparece al reproducir y deja los controles del navegador. */
.spot__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  border: 0;
  background: rgba(11, 11, 12, .45);
  color: var(--blanco);
  font: 600 1.05rem/1.3 var(--f-display);
  cursor: pointer;
}
.spot__play:hover { background: rgba(11, 11, 12, .3); }
.spot__play:focus-visible { outline: 3px solid var(--blanco); outline-offset: -5px; }
.spot__icon {
  width: clamp(4rem, 9vw, 6rem);
  aspect-ratio: 1;
  border: 2px solid var(--blanco);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.spot__icon::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: .35em;
  border-left: .95em solid var(--blanco);
  border-top: .6em solid transparent;
  border-bottom: .6em solid transparent;
}
.spot__label { padding: .35rem .9rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 3px; }
.spot__frame.is-playing .spot__play { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .spot__play, .spot__icon { transition: background .25s ease, scale .25s ease; }
  .spot__play:hover .spot__icon { scale: 1.06; }
}

@media print {
  .spot { display: none !important; }
}