/* Videoguías: tarjetas de funciones con su video (hub) y la página /videoguias/.
   El marcado y el reproductor los genera scripts/enlaces.py. */

/* Portada vertical con ▶ y duración */
.vg-mini,.vg-paso{ display:block; color:var(--ink); }
.vg-img{ position:relative; display:block; }
.vg-img img{ display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; border-radius:12px; background:#0b1a4a; box-shadow:0 8px 20px rgba(4,16,31,.18); }
.vg-play{ position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:rgba(20,99,243,.92); display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.3); transition:.15s; }
.vg-play svg{ width:22px; height:22px; fill:#fff; margin-left:3px; }
.vg-dur{ position:absolute; right:8px; bottom:8px; background:rgba(4,16,31,.8); color:#fff; font-size:.72rem; font-weight:700; padding:2px 7px; border-radius:6px; }
.vg-mini:hover .vg-play,.vg-paso:hover .vg-play{ transform:scale(1.1); }

/* Hub: cada función con su video */
.vg-funciones{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.vg-card{ display:grid; grid-template-columns:86px minmax(0,1fr); gap:14px; align-items:start; border:1px solid var(--line); border-radius:16px; padding:14px; background:#fff; transition:.15s; }
.vg-card:hover{ border-color:var(--blue2); box-shadow:0 8px 24px rgba(37,99,235,.08); }
.vg-card .vg-mini .vg-play{ width:34px; height:34px; margin:-17px 0 0 -17px; }
.vg-card .vg-mini .vg-play svg{ width:17px; height:17px; }
.vg-card .vg-dur{ right:5px; bottom:5px; font-size:.66rem; }
.vg-txt{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.vg-fn{ display:flex; flex-direction:column; gap:5px; color:var(--ink); }
.vg-fn b{ font-size:1.02rem; line-height:1.3; }
.vg-fn:hover b{ color:var(--blue); }
.vg-fn span{ color:var(--muted); font-size:.9rem; line-height:1.45; }
.vg-ver{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; background:#eff4ff; color:var(--blue); font-weight:700; font-size:.85rem; padding:6px 12px 6px 9px; border-radius:999px; }
.vg-ver svg{ width:15px; height:15px; fill:currentColor; }
.vg-ver:hover{ background:#dbe6ff; }
.vg-todas{ text-align:center; margin-top:28px; }

/* /videoguias/: grupos en tiras */
.vg-lista{ padding:46px 0 60px; }
.vg-grupo{ text-align:left; font-size:1.45rem; margin:34px 0 14px; }
.vg-grupo:first-child{ margin-top:0; }
.vg-tira{ display:grid; grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); gap:16px; }
.vg-paso b{ display:block; margin-top:10px; font-size:.95rem; line-height:1.3; }
.vg-paso small{ display:block; margin-top:3px; color:var(--muted); font-size:.82rem; line-height:1.4; }
.vg-paso:hover b{ color:var(--blue); }

/* Reproductor */
.vg-modal{ border:0; padding:0; background:transparent; max-width:none; max-height:none; overflow:visible; margin:auto; }
.vg-modal::backdrop{ background:rgba(4,16,31,.85); }
.vg-modal video{ display:block; height:min(82vh,760px); width:auto; max-width:92vw; aspect-ratio:9/16; border-radius:16px; background:#000; }
.vg-titulo{ color:#fff; font-weight:700; text-align:center; margin:0 40px 10px; }
.vg-cerrar{ position:absolute; top:-6px; right:-6px; width:38px; height:38px; border-radius:50%; border:0; background:#fff; color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer; }

@media(max-width:960px){
  .vg-funciones{ grid-template-columns:1fr 1fr; }
  .vg-tira{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:640px){
  .vg-funciones{ grid-template-columns:1fr; gap:12px; }
  .vg-card{ grid-template-columns:76px minmax(0,1fr); }
  .vg-tira{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:0 -16px; padding:0 16px 6px; }
  .vg-paso{ flex:0 0 42%; scroll-snap-align:start; }
  .vg-modal video{ height:auto; width:92vw; }
  .vg-cerrar{ top:-44px; right:0; }
}

/* ── Página /videoguias/ (mockup del 20/10/2026) ── */
.vgs-pg{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:#0b1220; background:#fff; overflow-x:hidden; }
.vgs-pg h1,.vgs-pg h2,.vgs-pg .btn,.vgs-pg .logo{ font-family:'Montserrat','Inter',system-ui,sans-serif; }
.vgs-pg .vgs-hero{ background:radial-gradient(ellipse 40% 75% at 78% 50%,rgba(37,99,235,.55) 0%,transparent 70%),linear-gradient(120deg,#04112a 0%,#061a3d 55%,#0a2a6e 100%); padding:0 24px; }
.vgs-pg .vgs-hero::before{ opacity:.4; }
.vgs-top{ position:relative; z-index:2; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); align-items:center; gap:10px; }
.vgs-copy{ padding:4px 0 20px; }
.vgs-pg .vgs-hero .badge{ background:rgba(37,99,235,.18); border:1px solid rgba(96,165,250,.45); color:#fff; font-size:.82rem; padding:5px 12px; margin-bottom:10px; }
.vgs-pg .vgs-hero .badge svg{ width:14px; height:14px; fill:#60a5fa; }
.vgs-pg .vgs-hero h1{ font-size:2.35rem; line-height:1.05; letter-spacing:-.03em; margin-bottom:8px; }
.vgs-pg .vgs-hero h1 .hl{ display:block; color:#3b82f6; }
.vgs-pg .vgs-hero .sub{ margin:0 0 16px; max-width:520px; font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.82); }
.vgs-ventajas{ list-style:none; display:flex; gap:0; }
.vgs-ventajas li{ display:flex; align-items:center; gap:10px; padding:0 14px; white-space:nowrap; border-left:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); font-size:.78rem; line-height:1.35; }
.vgs-ventajas li:first-child{ padding-left:0; border-left:0; }
.vgs-ventajas img{ width:42px; height:42px; flex:none; }
.vgs-ventajas b{ display:block; color:#fff; font-size:.85rem; }
.vgs-visual{ margin:-6px -40px -4px 0; }
.vgs-visual img{ display:block; width:auto; max-width:100%; height:auto; max-height:285px; margin-left:auto; }

/* Bloques por grupo */
.vgs-pg .vg-lista{ padding:34px 0 50px; }
.vg-bloque{ border-radius:22px; padding:20px 20px 22px; margin-bottom:18px; border:1px solid #e3ecf8; }
.vg-t-azul{ background:linear-gradient(180deg,#f2f6ff 0%,#f7faff 100%); }
.vg-t-verde{ background:linear-gradient(180deg,#eefaf3 0%,#f6fcf8 100%); border-color:#d9f0e2; }
.vg-t-naranja{ background:linear-gradient(180deg,#fff6ea 0%,#fffaf3 100%); border-color:#f6e6cc; }
.vg-cab{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.vg-gic{ width:46px; height:46px; flex:none; }
.vg-cab > div{ flex:1; min-width:0; }
.vgs-pg .vg-grupo{ font-size:1.3rem; margin:0; color:#0b1a4a; text-align:left; }
.vg-cab p{ color:#64748b; font-size:.88rem; margin-top:2px; }
.vg-cuenta{ flex:none; font-size:.78rem; font-weight:700; color:#1463f3; background:#dfe9ff; border-radius:999px; padding:6px 12px; }
.vg-t-verde .vg-cuenta{ color:#15803d; background:#d7f3e1; }
.vg-t-naranja .vg-cuenta{ color:#c2410c; background:#ffe8cc; }
.vgs-pg .vg-tira{ gap:14px; }
.vgs-pg .vg-paso .vg-img img{ aspect-ratio:16/10; object-position:50% 18%; border-radius:12px; box-shadow:0 8px 18px rgba(4,16,31,.16); }
.vgs-pg .vg-tira[style*="--n:8"] .vg-img img{ aspect-ratio:1/1.05; }
.vgs-pg .vg-paso b{ font-size:.9rem; color:#0b1a4a; margin-top:10px; }
.vgs-pg .vg-paso small{ font-size:.78rem; }
.vgs-pg .vg-paso:hover b{ color:#1463f3; }

/* Cierre azul con el celular y los pasos */
.vgs-pg .vgs-cta{ background:radial-gradient(ellipse 45% 90% at 75% 60%,rgba(59,130,246,.3) 0%,transparent 70%),linear-gradient(120deg,#0a2470 0%,#0f3590 55%,#1442a8 100%); text-align:left; padding:10px 0 0; overflow:hidden; }
.vgs-cta .wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:20px; }
.vgs-cta .c-copy{ padding:12px 0 22px; }
.c-tag{ display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:4px 11px; margin-bottom:8px; }
.vgs-pg .vgs-cta h2{ text-align:left; color:#fff; font-size:1.6rem; margin:0 0 6px; }
.vgs-pg .vgs-cta p{ color:rgba(255,255,255,.88); font-size:.92rem; margin:0 0 12px; max-width:none; }
.vgs-cta .btn{ padding:10px 20px; font-size:.92rem; }
.c-checks{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; white-space:nowrap; margin:14px 0 0; color:#fff; font-size:.78rem; }
.c-checks li{ display:inline-flex; align-items:center; gap:7px; }
.c-checks li::before{ content:'✓'; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#22c55e; color:#fff; font-size:.7rem; font-weight:800; }
.vgs-cta .c-visual{ margin-right:-110px; }
.vgs-cta .c-visual img{ display:block; width:575px; max-width:100%; height:auto; margin-left:auto; }

/* En pantallas medianas la imagen del cierre no se sale por la derecha. */
@media(max-width:1240px){
  .vgs-cta .c-visual{ margin-right:-16px; }
  .vgs-cta .c-visual img{ width:min(575px,46vw); }
}
@media(max-width:960px){
  .vgs-top{ grid-template-columns:1fr; }
  .vgs-copy{ text-align:center; padding:12px 0 0; }
  .vgs-pg .vgs-hero .sub{ margin:0 auto 20px; }
  .vgs-ventajas{ justify-content:center; }
  .vgs-visual{ max-width:520px; margin:0 auto; width:100%; }
  .vgs-visual img{ margin:0 auto; }
  .vgs-cta .c-visual img{ margin:0 auto; }
  .vgs-pg .vg-tira{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .vgs-cta .wrap{ grid-template-columns:1fr; text-align:center; }
  .vgs-pg .vgs-cta h2{ text-align:center; }
  .vgs-pg .vgs-cta p{ margin:0 auto 20px; }
  .c-checks{ justify-content:center; display:flex; margin:12px 0 0; }
  .vgs-cta .c-copy{ padding-bottom:0; }
  .vgs-cta .c-visual{ max-width:460px; margin:0 auto; width:100%; }
}
@media(max-width:760px){
  .vgs-pg .vgs-hero{ padding:0 16px; }
  .vgs-pg .vgs-hero h1{ font-size:1.95rem; }
  .vgs-pg .vgs-hero .sub{ font-size:.95rem; line-height:1.5; }
  .vgs-ventajas{ flex-wrap:wrap; justify-content:center; gap:10px 0; }
  .vgs-ventajas li{ padding:0 10px; font-size:.72rem; white-space:normal; }
  .vgs-ventajas img{ width:34px; height:34px; }
  .vg-bloque{ padding:16px 0 16px 16px; border-radius:18px; }
  .vg-cab{ display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:12px; row-gap:8px; align-items:start; padding-right:16px; }
  .vg-cuenta{ grid-column:2; justify-self:start; }
  .vgs-pg .vg-grupo{ font-size:1.15rem; }
  .vgs-pg .vg-tira{ display:flex; margin:0; padding:0 16px 6px 0; }
  .vgs-pg .vg-paso{ flex:0 0 46%; }
  .vgs-pg .vg-tira[style*="--n:8"] .vg-paso{ flex-basis:38%; }
  .vgs-pg .vgs-cta h2{ font-size:1.35rem; }
  .vgs-visual img{ max-height:160px; }
  .vgs-copy{ padding-bottom:6px; }
  .vgs-pg .vgs-hero .badge{ margin-bottom:6px; }
  .vgs-pg .vgs-hero .sub{ font-size:.88rem; margin-bottom:12px; }
  .vgs-ventajas li{ gap:6px; }
  .vgs-ventajas img{ width:28px; height:28px; }
  .vgs-cta .c-visual img{ width:auto; max-height:134px; }
  .vgs-pg .vgs-cta .c-copy{ padding-bottom:8px; }
  .vgs-pg .vgs-cta{ padding-top:18px; }
  .vgs-pg .vgs-cta p{ font-size:.85rem; margin-bottom:10px; }
  .c-checks{ font-size:.72rem; gap:4px 10px; }
}