/* Cuba Despierta · Cuba desde 1959 (views/desde1959.php). Se carga solo en /historia/desde-1959.
   Paleta de site.css más la carcasa del televisor, el resplandor de la pantalla y la estática.
   Animaciones comunes de redesign.css (fadeup, lineup, data-reveal). Sin JS propio. */
.vz { --tv: #2a2420; --tv-dark: #17130f; --glow: rgba(140,180,255,.16);
      --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- 1. Cabecera: el televisor sintoniza ---------- */
.vh { position: relative; display: flex; align-items: center; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 3rem) 0 4.5rem; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 50% 60% at 75% 50%, var(--glow), transparent 70%), repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 4px), var(--ink-950); }
.vh-in { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .vh-in { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 4rem; } }
.vh-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.vh-num { font-family: var(--serif); font-style: italic; font-size: 1.6rem; letter-spacing: 0; color: var(--brand-light); }
.vh-title { margin-top: 1.2rem; font-size: clamp(2.5rem, .6rem + 6.4vw, 6.4rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.vh-title .serif { color: var(--brand-light); font-size: 1.06em; text-transform: none; }
.vh-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.vh-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
/* El aparato: carcasa, pantalla abombada y panel con perillas */
.vh-tv { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 16px; padding: 18px; border-radius: 22px; background: linear-gradient(160deg, #3a322c, var(--tv) 40%, var(--tv-dark)); box-shadow: 0 40px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08), 0 0 80px -20px var(--glow); }
@media (max-width: 559px) { .vh-tv { grid-template-columns: minmax(0, 1fr); padding: 12px; } .vh-panel { display: none !important; } }
.vh-screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 9% / 12%; background: #0b0b0b; box-shadow: inset 0 0 0 3px #0e0c0a, 0 0 0 6px #1e1915; }
.vh-screen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.15) brightness(.95); }
html.js .vh-screen img { animation: vz-tune 2.6s steps(12, end) .5s both; }
@keyframes vz-tune { 0% { opacity: 0; transform: skewX(0); } 30% { opacity: .25; transform: skewX(6deg) translateX(-3%); } 45% { opacity: .1; transform: skewX(-4deg); } 70% { opacity: .7; transform: skewX(2deg); } 100% { opacity: 1; transform: none; } }
/* Estática: ruido que se mueve a saltos y se queda tenue cuando la imagen entra */
.vh-static { position: absolute; inset: 0; background: var(--noise) 0 0 / 180px 180px; opacity: .06; mix-blend-mode: screen; pointer-events: none; }
html.js .vh-static { animation: vz-noise .3s steps(4) 10, vz-fade 3s ease-out .4s both; }
@keyframes vz-noise { 25% { background-position: -40px 30px; } 50% { background-position: 60px -50px; } 75% { background-position: -70px -20px; } 100% { background-position: 20px 60px; } }
@keyframes vz-fade { from { opacity: .9; } 60% { opacity: .5; } to { opacity: .06; } }
/* Líneas del tubo, viñeta y reflejo del cristal */
.vh-lines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 70px rgba(0,0,0,.85); }
.vh-lines::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,.14), transparent 35%); }
.vh-ch { position: absolute; right: 7%; top: 8%; padding: .15rem .45rem; font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9dff9d; text-shadow: 0 0 6px rgba(120,255,120,.8); }
html.js .vh-ch { animation: fadeup .4s ease 2.8s both; }
.vh-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 10px; }
.vh-knob { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b6058, #2a231e 70%); box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); position: relative; }
.vh-knob::after { content: ''; position: absolute; left: 50%; top: 5px; width: 3px; height: 12px; translate: -50% 0; border-radius: 2px; background: #d8cfc5; }
html.js .vh-knob:not(.is-small) { animation: vz-knob 1.8s cubic-bezier(.3,.1,.3,1) .4s both; }
@keyframes vz-knob { from { rotate: -120deg; } to { rotate: 40deg; } }
.vh-knob.is-small { width: 32px; height: 32px; }
.vh-grill { flex: 1; width: 46px; min-height: 60px; border-radius: 6px; background: repeating-linear-gradient(to bottom, #1a1512 0 3px, #3a322c 3px 6px); }

/* ---------- 2. Capítulos: televisores que se encienden ---------- */
.vc { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); }
.vc-note { max-width: 24rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.vc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4rem, 3rem + 3vw, 6rem); }
.vc-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
@media (min-width: 900px) {
  .vc-item { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  .vc-item:nth-child(even) .vc-tv { order: 2; }
}
.vc-tv { position: relative; display: block; padding: 14px 14px 26px; border-radius: 18px; background: linear-gradient(160deg, #3a322c, var(--tv) 40%, var(--tv-dark)); box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); transition: transform .5s var(--ease-out); }
.vc-tv:hover { transform: translateY(-5px); }
.vc-tv:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.vc-screen { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8% / 11%; background: #0b0b0b; }
.vc-screen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) contrast(1.1); transition: filter .8s, transform 1.4s var(--ease-out); }
.vc-tv:hover .vc-screen img { filter: none; transform: scale(1.04); }
.vc-ch { position: absolute; left: 7%; top: 8%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9dff9d; text-shadow: 0 0 6px rgba(120,255,120,.8); }
.vc-led { position: absolute; right: 22px; bottom: 9px; width: 8px; height: 8px; border-radius: 50%; background: #3a1010; transition: background-color .3s .9s, box-shadow .3s .9s; }
/* Encendido de tubo: un punto, una línea y, al final, la imagen entera */
html.js .vc-item[data-reveal]:not(.is-in) .vc-screen > * { clip-path: inset(49.6% 50% 49.6% 50%); }
html.js .vc-item.is-in .vc-screen > * { animation: vz-on 1s cubic-bezier(.3,.1,.2,1) .35s both; }
@keyframes vz-on { 0% { clip-path: inset(49.6% 50% 49.6% 50%); filter: brightness(3); } 45% { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(2.5); } 100% { clip-path: inset(0); filter: none; } }
.vc-item:not([data-reveal]) .vc-led, .vc-item.is-in .vc-led { background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.vc-body { display: flex; flex-direction: column; gap: 1rem; max-width: 36rem; }
.vc-t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.vc-t a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease-out); }
.vc-t a:hover { background-size: 100% 2px; }
.vc-d { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.vc-pts { list-style: none; margin: .2rem 0 0; padding: 1rem 0 0; display: flex; flex-direction: column; gap: .7rem; border-top: 1px solid var(--line); }
.vc-pts li { position: relative; padding-left: 1.5rem; font-size: 15px; line-height: 1.6; color: var(--muted); }
.vc-pts li::before { content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 9px; border-radius: 3px; border: 2px solid var(--brand); }
.vc-pts strong { color: var(--ink); }
.vc-go { margin-top: .4rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding-bottom: .15rem; border-bottom: 2px solid var(--brand); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); text-decoration: none; }
.vc-go svg { transition: transform .45s var(--ease-out); }
.vc-go:hover svg { transform: translateX(5px); }
.vc-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- Archivo (views/_cat_archivo.php): pantallas pequeñas ---------- */
.arc.is-desde1959 .arc-card { background: var(--tv); border-color: var(--tv); color: #fff; padding: 8px; border-radius: 12px; }
.arc.is-desde1959 { --arc-ink: #fff; --arc-muted: #c9c0b8; --arc-img-filter: grayscale(.6); }
.arc.is-desde1959 .arc-img { border-radius: 8% / 11%; }

/* ---------- 3. Década a década ---------- */
.vd { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: var(--ink-900); color: #fff; scroll-margin-top: var(--hdr-h); }
.vd .kicker-light, .vd .h-display .serif { color: var(--brand-light); }
.vd-note { max-width: 26rem; font-size: 15px; line-height: 1.6; color: #c9c9c9; }
.vd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem 1.6rem; }
@media (min-width: 700px) { .vd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .vd-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vd-h { display: flex; flex-direction: column; gap: .2rem; padding-bottom: .9rem; border-bottom: 3px solid var(--brand); }
@media (min-width: 1150px) { .vd-h { min-height: 4.4rem; justify-content: flex-end; } }
.vd-h b { font-size: 15px; font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.vd-h span { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--brand-light); }
.vd-hitos { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; }
.vd-hitos::before { content: ''; position: absolute; left: 5px; top: .6rem; bottom: .6rem; width: 1px; background: rgba(255,255,255,.18); }
.vd-hitos li { transition: opacity .5s ease, transform .6s var(--ease-out); transition-delay: calc(.2s + var(--n) * 35ms); }
html.js .vd-tramo[data-reveal]:not(.is-in) .vd-hitos li { opacity: 0; transform: translateX(-10px); }
.vd-hitos a { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .7rem 0 .7rem 1.4rem; color: #fff; text-decoration: none; }
.vd-hitos a::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 11px; height: 11px; border-radius: 3px; background: var(--ink-900); border: 2px solid var(--brand); transition: background-color .3s, scale .3s var(--ease-out); }
.vd-f { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.vd-t { font-size: 14px; line-height: 1.4; }
.vd-hitos a:hover .vd-t { color: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }
.vd-hitos a:hover::before { background: var(--brand); scale: 1.2; }
.vd-hitos a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vd-more { margin-top: 2.6rem; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .vh-screen img, html.js .vh-static, html.js .vh-knob:not(.is-small), html.js .vh-ch, html.js .vc-item.is-in .vc-screen > * { animation: none; }
  html.js .vc-item[data-reveal]:not(.is-in) .vc-screen > * { clip-path: none; }
  .vc-tv, .vc-screen img, .vd-hitos li { transition: none; }
  html.js .vd-tramo[data-reveal]:not(.is-in) .vd-hitos li { opacity: 1; transform: none; }
}