/* ==========================================================================
   PAGINAS DE VIDEO (/video/<slug>/) — diseno "Editorial claro" (nov-2026)
   --------------------------------------------------------------------------
   Una pagina por video, hecha para que Google la indexe COMO VIDEO:
   el reproductor es lo principal y se ve sin scroll, el H1 es el titulo del
   video, los momentos llevan su marca de tiempo y la transcripcion completa
   va en el HTML (plegada con <details>, pero dentro del DOM).

   El reproductor es un <iframe> REAL de YouTube desde la carga, no una
   fachada (foto + play que carga el iframe al hacer clic): Googlebot no hace
   clic, y con fachada ve una imagen, no un video. Por eso tampoco lleva
   loading="lazy". El ancho/alto sale de aspect-ratio, sin JS.

   Todo va con prefijo .vid- y cuelga de body.vid-page: no toca nada fuera.
   ========================================================================== */

.vid-page{ background:#fff; }
.vid{
  --vid-ink:var(--h26-navy, #072031);
  --vid-text:#1e293b;
  --vid-muted:var(--h26-slate, #475569);
  --vid-line:var(--h26-line, #e2e8f0);
  --vid-chip:#f1f5f9;
  --vid-link:var(--h26-blue-ink, #2f6fd0);
  font-family:'Host Grotesk','Montserrat','Helvetica Neue',Arial,sans-serif;
  color:var(--vid-ink);
  max-width:1120px; margin:0 auto; padding:32px 24px 88px;
  box-sizing:border-box;
}
.vid *,.vid *::before,.vid *::after{ box-sizing:border-box; }

/* Ruta: /video/ no esta en SECCIONES de scripts/migas-sweep.js (no hay indice
   /video/ todavia), asi que el barrido no le pone franja y la ruta va aqui. */
.vid-ruta ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; font-size:14px; color:var(--vid-muted); }
.vid-ruta li+li::before{ content:"/"; margin-right:8px; }
.vid-ruta a{ color:var(--vid-muted); }
.vid-ruta a:hover{ color:var(--vid-ink); }
.vid-ruta [aria-current]{ color:var(--vid-ink); }

.vid-eyebrow{ margin:36px 0 12px; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--vid-muted); }
.vid-h1{ margin:0; max-width:900px; font-size:clamp(32px,5vw,56px); line-height:1.05; font-weight:600; letter-spacing:-.02em; color:var(--vid-ink); }
.vid-meta{ margin:20px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; font-size:15px; color:var(--vid-muted); }
.vid-meta strong{ color:var(--vid-ink); font-weight:600; }
.vid-meta a{ color:var(--vid-link); font-weight:600; }

.vid-player{ margin:32px 0 0; }
.vid-player__box{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--h26-deep, #031420); }
.vid-player__box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.vid-player figcaption{ margin-top:12px; font-size:14px; color:var(--vid-muted); }

.vid-cols{ margin-top:56px; display:flex; flex-wrap:wrap; gap:56px; align-items:flex-start; }
.vid-main{ flex:999 1 560px; min-width:0; }
.vid-side{ flex:1 1 300px; min-width:0; position:sticky; top:96px; }

.vid-texto{ display:flex; flex-direction:column; gap:18px; font-size:18px; line-height:1.65; color:var(--vid-text); }
.vid-texto p{ margin:0; }

.vid-h2{ margin:56px 0 20px; font-size:26px; font-weight:600; letter-spacing:-.01em; color:var(--vid-ink); }

.vid-puntos{ margin:0; padding:0; list-style:none; border-top:1px solid var(--vid-line); }
.vid-puntos li{ padding:16px 0; border-bottom:1px solid var(--vid-line); font-size:17px; line-height:1.55; color:var(--vid-text); }
.vid-puntos strong{ color:var(--vid-ink); font-weight:600; }

.vid-momentos{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.vid-momentos a{ display:flex; gap:16px; align-items:center; min-height:44px; padding:6px 0; color:var(--vid-ink); text-decoration:none; font-size:17px; line-height:1.4; }
.vid-momentos time{ flex:none; width:56px; padding:5px 0; text-align:center; border-radius:6px; background:var(--vid-chip); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; transition:background .15s, color .15s; }
.vid-momentos a:hover time,.vid-momentos a:focus-visible time{ background:var(--vid-ink); color:#fff; }
.vid-momentos a:hover span{ text-decoration:underline; text-underline-offset:3px; }

/* EN/PT: el video es en espanol; la transcripcion es una traduccion y se dice. */
.vid-trans-nota{ margin:-8px 0 16px; font-size:15px; line-height:1.5; color:var(--vid-muted); }
.vid-trans{ border:1px solid var(--vid-line); border-radius:12px; padding:0 22px; }
.vid-trans summary{ cursor:pointer; list-style:none; padding:18px 0; min-height:44px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:16px; font-weight:600; color:var(--vid-link); }
.vid-trans summary::-webkit-details-marker{ display:none; }
.vid-trans summary::after{ content:""; flex:none; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-3px); transition:transform .2s; }
.vid-trans[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.vid-trans__txt{ padding:0 0 22px; display:flex; flex-direction:column; gap:14px; font-size:17px; line-height:1.7; color:var(--vid-text); }
.vid-trans__txt p{ margin:0; }

.vid-card{ border:1px solid var(--vid-line); border-radius:16px; overflow:hidden; background:#fff; }
.vid-card img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.vid-card__in{ padding:24px; display:flex; flex-direction:column; gap:14px; }
.vid-card__eyebrow{ margin:0; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--vid-muted); }
.vid-card h2{ margin:0; font-size:24px; font-weight:600; line-height:1.15; color:var(--vid-ink); }
.vid-card p{ margin:0; font-size:16px; line-height:1.55; color:#334155; }
.vid-card .vid-card__nota{ margin-top:4px; font-size:13px; line-height:1.5; color:var(--vid-muted); }
.vid-btn{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 18px; border-radius:10px; font-size:16px; font-weight:600; text-decoration:none; text-align:center; transition:background .15s; }
.vid-btn--solid{ background:var(--vid-ink); color:#fff; }
.vid-btn--solid:hover{ background:#0d3350; color:#fff; }
.vid-btn--line{ border:1px solid var(--vid-ink); color:var(--vid-ink); }
.vid-btn--line:hover{ background:var(--ivory, #f2f2f2); color:var(--vid-ink); }
.vid-btn svg{ width:20px; height:20px; fill:currentColor; flex:none; }

@media (max-width:899px){
  .vid{ padding:24px 16px 64px; }
  .vid-eyebrow{ margin-top:24px; }
  .vid-player{ margin-top:24px; }
  .vid-player__box{ margin:0 -16px; border-radius:0; }
  .vid-cols{ margin-top:40px; gap:40px; }
  .vid-side{ position:static; }
  .vid-texto{ font-size:17px; }
  .vid-h2{ margin-top:44px; font-size:23px; }
  .vid-trans{ padding:0 16px; }
}