/* Vídeo (#video) · plan/landing-v3.md, apartado 6.4.
   Franja de tinta roja: «Nadie sueña con {tarea}.» y el marco del vídeo ([data-video-open]).
   Fondo: lo pone base.css (data-tone="orange": tinta tintada de rojo, texto claro, el rojo solo en acentos). Todos los selectores empiezan por #video. */

/* ---------- Composición ----------
   Móvil: titular · subtítulo · marco · botones. Tableta: titular arriba; marco a la izquierda y texto a su lado.
   Escritorio: 38 % texto (titular arriba, subtítulo y botones abajo) y 62 % marco. */
#video .vid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "sub" "frame" "actions";
  gap: 24px;
}
#video .vid-head { grid-area: head; }
#video .vid-sub { grid-area: sub; }

#video .vid-actions { grid-area: actions; }

@media (min-width: 768px) {
  #video .vid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head head" "frame sub" "frame actions";
    gap: 24px 32px;
  }
  #video .vid-head { margin-bottom: 8px; }
  #video .vid-sub { align-self: start; }
  #video .vid-actions { align-self: end; flex-direction: column; align-items: stretch; }
}
@media (min-width: 1024px) {
  #video .vid {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    grid-template-rows: 1fr auto auto;
    grid-template-areas: "head frame" "sub frame" "actions frame";
    gap: 28px clamp(40px, 5vw, 80px);
  }
  #video .vid-head { margin-bottom: 0; align-self: start; }
  #video .vid-sub { align-self: end; }
  #video .vid-actions { flex-direction: row; align-items: center; }

}

/* ---------- Titular: «Nadie sueña con» + la tarea que cambia ---------- */
/* Titular a la izquierda y, a su derecha, el botón redondo «Otra tarea» a la altura de la tarea. */
#video .vid-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 14px;
  container-type: inline-size;
}
#video .vid-title {
  position: relative;
  width: 100%;
  font-size: 2.25rem;
  font-size: clamp(2.25rem, 12.4cqi, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  text-wrap: initial;
}
/* Contraste de peso: lo fijo en fino, la tarea (lo que cambia) en grueso. */
#video .vid-fixed { display: block; white-space: nowrap; font-weight: 300; letter-spacing: -0.025em; }
#video .word { display: inline-block; }
/* Altura reservada: la de la tarea más larga de todos los equipos (la calcula video.js). Sin JS, 3 líneas. */
#video .vid-task-wrap { display: block; min-height: 3em; cursor: pointer; }
#video .vid-task,
#video .vid-probe {
  font-weight: 750;
  text-wrap: balance;
}
#video .vid-task {
  --strike: 0%;
  background: linear-gradient(var(--ai), var(--ai)) 0 56% / var(--strike) 0.075em no-repeat;   /* tachado en rojo */
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
#video .vid-probe {
  position: absolute; top: 0; left: 0; right: 0;
  display: block; visibility: hidden; pointer-events: none;
}

/* «Otra tarea»: botón redondo de 40 px con la flecha de girar (área táctil de 44 px). */
#video .vid-next {
  position: relative; display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; margin-bottom: 0.08em; border-radius: 50%;
  color: rgba(238, 240, 247, 0.85); box-shadow: inset 0 0 0 1.5px rgba(238, 240, 247, 0.3);
  transition: color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), transform 0.16s var(--ease-out), rotate 0.4s var(--ease-out);
}
#video .vid-next::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
#video .vid-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#video .vid-next:active { transform: scale(0.97); }
/* Sin JS la tarea no cambia: fuera el control. */
.no-js #video .vid-next { display: none; }

/* ---------- Subtítulo ---------- */
#video .vid-sub { max-width: 34ch; color: var(--text-2); }
#video .vid-sub-link {
  color: var(--text); font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--ai);
  transition: text-decoration-color 0.25s var(--ease-out);
}

/* ---------- Botones ---------- */
#video .vid-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#video .btn-ink .btn-meta { color: var(--text-2); opacity: 1; }

/* ---------- El vídeo ----------
   .vid-stage lleva el marco y, encima, el lienzo del polvo, que sobresale 56 px por cada lado (la franja recorta
   lo que se sale de la pantalla). El marco empieza en opacidad 0 solo cuando lo va a formar el polvo (video.js). */
#video { overflow-x: clip; }
#video .vid-stage { grid-area: frame; position: relative; align-self: center; }
#video .vid-dust {
  position: absolute; inset: -56px; z-index: 2;
  width: calc(100% + 112px); height: calc(100% + 112px);
  pointer-events: none;
}
#video .vid-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(239, 58, 29, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 28px 56px -24px rgba(0, 0, 0, 0.75);
}
#video .vid-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); cursor: pointer; }
#video .vid-frame.is-full { border-radius: 0; }
#video .vid-frame.is-full .vid-video { object-fit: contain; }

/* Velo de abajo: deja leer los controles sobre cualquier imagen. */
#video .vid-frame::after {
  content: ""; position: absolute; inset: auto 0 0; height: 38%;
  background: linear-gradient(to top, rgba(7, 8, 15, 0.72), rgba(7, 8, 15, 0));
  pointer-events: none; transition: opacity 0.4s var(--ease-out);
}

/* «Ver con sonido»: la invitación mientras se ve sin sonido. */
#video .vid-sound {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--ai); color: var(--ai-ink);
  font-weight: 700; font-size: 0.9375rem;
  box-shadow: 0 8px 24px -8px rgba(7, 8, 15, 0.6);
  transition: transform 0.16s var(--ease-out), background-color 0.25s var(--ease-out), opacity 0.3s var(--ease-out);
}
#video .vid-sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#video .vid-sound svg path:first-child { fill: currentColor; }
#video .vid-sound:active { transform: scale(0.97); }

/* Barra: pausa · avance · sonido · en grande. Sin sonido solo se ve «en grande». */
#video .vid-bar {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1;
  display: flex; align-items: center; gap: 4px;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out), translate 0.35s var(--ease-out);
}
#video .vid-bar > * { pointer-events: auto; }
#video .vid-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--text);
  transition: background-color 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}
#video .vid-icon:active { transform: scale(0.94); }
#video .vid-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#video .vid-icon .vid-i-play path, #video .vid-icon .vid-i-on path:first-child, #video .vid-icon .vid-i-off path:first-child { fill: currentColor; }
#video .vid-i-play, #video .is-paused .vid-i-pause { display: none; }
#video .is-paused .vid-i-play { display: block; }
#video .vid-i-off, #video .is-muted .vid-i-on { display: none; }
#video .is-muted .vid-i-off { display: block; }
#video .vid-progress {
  position: relative; flex: 1; height: 44px; cursor: pointer;
  border-radius: 999px;
}
#video .vid-progress::before, #video .vid-progress i {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px;
}
#video .vid-progress::before { background: rgba(238, 240, 247, 0.25); }
#video .vid-progress i { background: var(--ai); transform-origin: left; transform: scaleX(0); transition: transform 0.25s linear; }

#video .vid-frame[data-state="ambient"] .vid-bar > :not([data-vid-full]) { visibility: hidden; }
/* Pulsado, desaparece del todo (también del tabulador) después de fundirse. */
#video .vid-frame:not([data-state="ambient"]) .vid-sound {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
#video .vid-frame[data-state="ended"] .vid-bar { opacity: 0; pointer-events: none; }
/* Mientras suena y nadie mueve el ratón, la barra y el velo se van. */
#video .vid-frame.is-idle .vid-bar { opacity: 0; translate: 0 8px; }
#video .vid-frame.is-idle::after { opacity: 0; }
#video .vid-frame.is-idle .vid-video { cursor: none; }

/* Al acabar: volver a verlo o pedir propuesta. */
#video .vid-end {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; background: rgba(7, 8, 15, 0.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#video .vid-end[hidden] { display: none; }

/* ---------- Solo con ratón ---------- */
@media (hover: hover) and (pointer: fine) {
  #video .vid-sound:hover { background: var(--ai-2); }
  #video .vid-icon:hover { background: rgba(238, 240, 247, 0.14); }
  #video .vid-next:hover { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ai); rotate: 45deg; }
  #video .vid-sub-link:hover { text-decoration-color: var(--text); }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  #video.sec { padding-block: 64px; }
  #video .vid-title { font-size: clamp(2.5rem, 9cqi, 3.5rem); }
  #video .vid-stage { margin-top: 4px; }
  #video .vid-sound { left: 10px; bottom: 10px; min-height: 44px; padding: 0 16px 0 12px; font-size: 0.875rem; }
  #video .vid-bar { left: 4px; right: 4px; bottom: 4px; }
}
@media (max-width: 479px) {
  #video .vid-title { font-size: clamp(2.25rem, 11.2cqi, 2.5rem); }
}
@media (max-width: 599px) {
  #video .vid-actions { flex-direction: column; }
  #video .vid-actions .btn { width: 100%; }
}