/* Inicio v4 «Mapa» — la portada de la esfera dentro de la app (pestaña Inicio).
   Viene de prototipos/constelacion-3d-v4.html (diseño cerrado por Zax el 06-10).
   Todo va con prefijo h4- para no chocar con las ~70 reglas viejas de app.css.
   La esfera la pinta js/inicio-v4.js en #h4gl (fijo, detrás del texto). */
.v4-home{
  --h4-bg:#06080F; --h4-bg2:#0C1020; --h4-ink:#ECEEF3; --h4-muted:#868B99; --h4-line:rgba(236,238,243,.10);
  --h4-gold:#C9A84C; --h4-serif:"Instrument Serif", Georgia, serif; --h4-ui:"Inter", system-ui, sans-serif;
  --h4-mono:"Geist Mono", ui-monospace, monospace; --h4-ease:cubic-bezier(.22,1,.36,1);
  --h4-gutter:72px; --h4-nav:72px;
  position:relative; z-index:1; pointer-events:none; overflow-x:clip;
  color:var(--h4-ink); font:400 16px/1.55 var(--h4-ui);
}
@media (max-width:1024px){ .v4-home{ --h4-gutter:40px; } }
@media (max-width:640px){ .v4-home{ --h4-gutter:20px; --h4-nav:60px; } }
.v4-home a, .v4-home button, .v4-home details, .v4-home summary{ pointer-events:auto; }
.v4-home a{ color:inherit; text-decoration:none; }
.v4-home button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.v4-home :focus-visible{ outline:1.5px solid var(--h4-gold); outline-offset:4px; border-radius:2px; }
.v4-home h1, .v4-home h2, .v4-home p, .v4-home ul{ margin:0; }

/* Lo viejo de Inicio queda en el HTML (lo usan otros scripts) pero no se ve */
[data-tab="inicio"]:not(.v4-home){ display:none !important; }

/* Cielo */
#h4gl{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; touch-action:pan-y; cursor:grab; opacity:0; transition:opacity .9s cubic-bezier(.22,1,.36,1); }
#h4gl.on{ opacity:1; } #h4gl.on.dim{ opacity:.22; }
#h4gl.dragging{ cursor:grabbing; } #h4gl.pointing{ cursor:pointer; }
#h4labels{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; transition:opacity .6s cubic-bezier(.22,1,.36,1); }
#h4labels.dim{ opacity:0; }
#h4labels span{ position:absolute; left:0; top:0; white-space:nowrap; font:500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; color:#868B99; opacity:0; will-change:transform,opacity; }
#h4labels span.cur{ color:#C9A84C; } #h4labels span.lk{ color:#ECEEF3; }
#h4tip{ position:fixed; z-index:20; pointer-events:none; padding:12px 14px; background:#ECEEF3; color:#06080F; border-radius:2px; transform:translate(16px,-50%); opacity:0; transition:opacity .15s; max-width:300px; }
#h4tip.show{ opacity:1; }
#h4tip b{ display:block; font:400 22px/1.1 "Instrument Serif", Georgia, serif; }
#h4tip span{ display:block; font:500 10px/1.4 "Geist Mono", ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase; opacity:.65; margin-top:4px; }
#h4tip em, #h4tip i{ display:block; font:400 13px/1.4 "Inter", system-ui, sans-serif; font-style:normal; margin-top:6px; }
#h4tip em{ opacity:.85; } #h4tip i{ padding-top:6px; border-top:1px solid rgba(6,8,15,.25); }
#h4tip em:empty, #h4tip i:empty{ display:none; }
body:not([data-tab-active="inicio"]) :is(#h4gl, #h4labels, #h4tip){ display:none !important; }
body[data-tab-active="inicio"]{ background:#06080F; }

/* Piezas */
.v4-home .h4-wrap{ max-width:1440px; margin:0 auto; padding:0 var(--h4-gutter); width:100%; }
.v4-home .h4-mono{ font:500 11px/1.4 var(--h4-mono); letter-spacing:.16em; text-transform:uppercase; }
.v4-home .h4-muted{ color:var(--h4-muted); }
.v4-home .h4-display{ font-family:var(--h4-serif); font-weight:400; letter-spacing:-.02em; line-height:.92; color:var(--h4-ink); }
.v4-home .h4-display em{ font-style:italic; color:var(--h4-gold); }
.v4-home .h4-h1{ font-size:clamp(64px,8.6vw,140px); }
.v4-home .h4-h2{ font-size:clamp(48px,6vw,100px); }
.v4-home .h4-h3{ font-size:clamp(40px,4.4vw,68px); }
.v4-home .h4-scene{ min-height:100svh; display:flex; align-items:center; padding:calc(var(--h4-nav) + 40px) 0 120px; }
.v4-home .h4-scene.top{ align-items:flex-start; }
.v4-home .h4-panel{ max-width:560px; }
.v4-home .h4-eyebrow{ margin-bottom:36px; color:var(--h4-muted); display:flex; gap:12px; align-items:center; }
.v4-home .h4-eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; opacity:.6; }
.v4-home .h4-lead{ margin-top:28px; color:var(--h4-muted); font-size:17px; max-width:430px; }
.v4-home .h4-lead b{ color:var(--h4-ink); font-weight:500; }

.v4-home .h4-play-row{ display:flex; align-items:center; gap:22px; margin-top:44px; }
.v4-home .h4-big{ width:68px; height:68px; border-radius:50%; background:var(--h4-ink); color:var(--h4-bg); display:grid; place-items:center; position:relative; transition:background .18s, transform .45s var(--h4-ease); flex:none; }
.v4-home .h4-big::before{ content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--h4-line); transition:inset .45s var(--h4-ease), border-color .45s; }
.v4-home .h4-big:hover{ background:var(--h4-gold); } .v4-home .h4-big:hover::before{ inset:-12px; border-color:var(--h4-gold); }
.v4-home .h4-big svg{ width:19px; height:19px; fill:currentColor; } .v4-home .h4-big .i-play{ margin-left:3px; }
.v4-home .i-pause{ display:none; } .v4-home .is-on .i-play{ display:none; } .v4-home .is-on .i-pause{ display:block; }
.v4-home .h4-now b{ font:400 30px/1 var(--h4-serif); display:block; color:var(--h4-ink); }
.v4-home .h4-now span{ color:var(--h4-muted); font-size:14px; }
.v4-home .h4-enf-link{ display:inline-flex; align-items:center; gap:10px; margin-top:48px; color:var(--h4-gold); padding:12px 18px; border:1px solid color-mix(in srgb, var(--h4-gold) 45%, transparent); border-radius:40px; transition:background .2s, color .2s; text-align:left; }
.v4-home .h4-enf-link span{ transition:transform .3s var(--h4-ease); }
.v4-home .h4-enf-link:hover{ background:var(--h4-gold); color:var(--h4-bg); } .v4-home .h4-enf-link:hover i{ background:var(--h4-bg); box-shadow:none; } .v4-home .h4-enf-link:hover span{ transform:translateX(4px); }
.v4-home .h4-dot{ width:6px; height:6px; border-radius:50%; background:var(--h4-gold); box-shadow:0 0 12px var(--h4-gold); animation:h4latido 4s ease-in-out infinite; flex:none; display:inline-block; }
@keyframes h4latido{ 0%,100%{ opacity:.45; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }

.v4-home .h4-facts{ display:flex; gap:44px; margin-top:28px; }
.v4-home .h4-facts b{ display:block; font:400 54px/1 var(--h4-serif); color:var(--h4-ink); }
.v4-home .h4-btn{ display:inline-flex; align-items:center; gap:12px; margin-top:34px; padding:16px 26px; border-radius:40px; background:var(--h4-ink); color:var(--h4-bg); font:500 14px/1 var(--h4-ui); border:1px solid var(--h4-ink); transition:background .18s, border-color .18s; }
.v4-home .h4-btn:hover{ background:var(--h4-gold); border-color:var(--h4-gold); }
.v4-home .h4-more{ display:inline-block; margin-top:26px; color:var(--h4-gold); transition:transform .3s var(--h4-ease); }
.v4-home .h4-more:hover{ transform:translateX(4px); }

/* Enfoque: la sección estrella */
.v4-home .h4-scene.premium{ min-height:118svh; text-align:center; }
.v4-home .h4-scene.premium .h4-wrap{ display:flex; justify-content:center; }
.v4-home .h4-scene.premium .h4-panel{ max-width:860px; position:relative; }
.v4-home .h4-scene.premium .h4-panel::before{ content:""; position:absolute; inset:-120px -200px; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, color-mix(in srgb, var(--h4-gold) 12%, transparent), color-mix(in srgb, var(--h4-bg) 70%, transparent) 60%, transparent); }
.v4-home .h4-scene.premium .h4-h2{ font-size:clamp(56px,7.4vw,120px); }
.v4-home .h4-scene.premium .h4-lead{ margin:28px auto 0; max-width:560px; font-size:18px; }
.v4-home .h4-badge{ display:inline-flex; align-items:center; gap:10px; color:var(--h4-gold); margin:0 0 30px; padding:9px 16px; border:1px solid color-mix(in srgb, var(--h4-gold) 45%, transparent); border-radius:40px; }
.v4-home .h4-pf{ display:grid; grid-template-columns:repeat(4,1fr); margin:52px 0 0; border-top:1px solid var(--h4-line); border-bottom:1px solid var(--h4-line); }
.v4-home .h4-pf div{ padding:22px 14px; text-align:left; } .v4-home .h4-pf div + div{ border-left:1px solid var(--h4-line); }
.v4-home .h4-pf .h4-mono{ color:var(--h4-gold); display:block; margin-bottom:8px; }
.v4-home .h4-pf b{ font:400 21px/1.2 var(--h4-serif); color:var(--h4-ink); }
/* Lo que llega a Premium: dos novedades con su «Pronto» en dorado */
.v4-home .h4-nuevo{ margin:36px 0 0; text-align:left; }
.v4-home .h4-nuevo-tit{ color:var(--h4-muted); margin:0 0 14px; text-align:center; }
.v4-home .h4-nuevo-grid{ display:grid; grid-template-columns:1fr 1fr; border:1px solid color-mix(in srgb, var(--h4-gold) 30%, transparent); border-radius:2px; background:color-mix(in srgb, var(--h4-gold) 4%, transparent); }
.v4-home .h4-nuevo-grid div{ padding:22px 20px; } .v4-home .h4-nuevo-grid div + div{ border-left:1px solid color-mix(in srgb, var(--h4-gold) 30%, transparent); }
.v4-home .h4-nuevo-grid .h4-mono{ display:inline-block; color:var(--h4-gold); font-size:10px; padding:5px 9px; border:1px solid color-mix(in srgb, var(--h4-gold) 45%, transparent); border-radius:40px; margin-bottom:12px; }
.v4-home .h4-nuevo-grid b{ display:block; font:400 26px/1.1 var(--h4-serif); color:var(--h4-ink); }
.v4-home .h4-nuevo-grid small{ display:block; margin-top:8px; font-size:14px; line-height:1.45; color:var(--h4-muted); }
.v4-home .h4-offer{ margin-top:44px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.v4-home .h4-offer .h4-btn{ margin:0; }
.v4-home .h4-offer p{ color:var(--h4-muted); } .v4-home .h4-offer p b{ color:var(--h4-ink); font-weight:500; }
.v4-home .h4-btn.gold{ background:var(--h4-gold); border-color:var(--h4-gold); color:var(--h4-bg); padding:19px 34px; font-size:15px; animation:h4llama 3.2s ease-in-out infinite; }
.v4-home .h4-btn.gold:hover{ background:var(--h4-ink); border-color:var(--h4-ink); }
@keyframes h4llama{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:0 0 34px 2px color-mix(in srgb, var(--h4-gold) 35%, transparent); } }

/* Secciones de lectura */
.v4-home .h4-scene.content{ min-height:auto; padding:140px 0; }
.v4-home .h4-scene.content .h4-panel{ max-width:680px; }
.v4-home .h4-scene.content:not([data-dim]) .h4-panel{ position:relative; }
.v4-home .h4-scene.content:not([data-dim]) .h4-panel::before{ content:""; position:absolute; inset:-80px -160px -80px -50vw; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, color-mix(in srgb, var(--h4-bg) 78%, transparent), transparent); }
.v4-home .h4-devos{ list-style:none; padding:0; margin-top:30px; }
.v4-home .h4-devos li + li{ border-top:1px solid var(--h4-line); }
.v4-home .h4-devos a{ display:grid; grid-template-columns:178px 1fr 20px; gap:18px; align-items:baseline; padding:18px 0; }
.v4-home .h4-devos .r{ color:var(--h4-gold); }
.v4-home .h4-devos .t{ font:400 23px/1.2 var(--h4-serif); color:var(--h4-ink); transition:color .18s; }
.v4-home .h4-devos .ar{ color:var(--h4-muted); transition:transform .3s var(--h4-ease), color .18s; }
.v4-home .h4-devos a:hover .t{ color:var(--h4-gold); } .v4-home .h4-devos a:hover .ar{ transform:translateX(4px); color:var(--h4-ink); }
.v4-home .h4-ejemplos{ list-style:none; margin-top:40px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--h4-line); border-bottom:1px solid var(--h4-line); max-width:640px; }
.v4-home .h4-ejemplos li + li{ border-left:1px solid var(--h4-line); }
.v4-home .h4-ejemplos button{ width:100%; text-align:left; padding:20px 16px; }
.v4-home .h4-ejemplos li:first-child button{ padding-left:0; }
.v4-home .h4-ejemplos .h4-mono{ display:block; color:var(--h4-gold); margin-bottom:8px; }
.v4-home .h4-ejemplos b{ font:400 24px/1.15 var(--h4-serif); color:var(--h4-ink); font-weight:400; transition:color .18s; }
.v4-home .h4-ejemplos button:hover b{ color:var(--h4-gold); }
.v4-home .h4-resume{ margin-top:34px; width:100%; max-width:560px; display:grid; grid-template-columns:1fr 44px; gap:6px 16px; align-items:center; text-align:left; padding:22px 24px; border:1px solid var(--h4-line); border-radius:4px; transition:border-color .18s; background:color-mix(in srgb, var(--h4-bg2) 60%, transparent); }
.v4-home .h4-resume:hover{ border-color:var(--h4-gold); }
.v4-home .h4-resume .h4-mono{ color:var(--h4-gold); grid-column:1; }
.v4-home .h4-resume b{ font:400 32px/1.05 var(--h4-serif); grid-column:1; color:var(--h4-ink); font-weight:400; }
.v4-home .h4-resume .p{ grid-column:2; grid-row:1 / span 2; width:44px; height:44px; border-radius:50%; background:var(--h4-ink); color:var(--h4-bg); display:grid; place-items:center; }
.v4-home .h4-resume .p svg{ width:13px; height:13px; margin-left:2px; fill:currentColor; }
.v4-home .h4-resume:hover .p{ background:var(--h4-gold); }
.v4-home .h4-scene.split .h4-wrap{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:80px; align-items:start; }
.v4-home .h4-faq{ max-width:760px; }
.v4-home .h4-faq details{ border-top:1px solid var(--h4-line); }
.v4-home .h4-faq details:last-child{ border-bottom:1px solid var(--h4-line); }
.v4-home .h4-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding:20px 0; font:400 24px/1.2 var(--h4-serif); color:var(--h4-ink); }
.v4-home .h4-faq summary::-webkit-details-marker{ display:none; }
.v4-home .h4-faq summary::after{ content:"+"; font:400 22px/1 var(--h4-ui); color:var(--h4-muted); transition:transform .3s var(--h4-ease); }
.v4-home .h4-faq details[open] summary::after{ transform:rotate(45deg); color:var(--h4-gold); }
.v4-home .h4-faq .a{ padding:0 0 22px; color:var(--h4-muted); font-size:15.5px; max-width:640px; }
.v4-home .h4-faq .a b{ color:var(--h4-ink); font-weight:500; }
.v4-home .h4-shop{ position:relative; border-top:1px solid var(--h4-line); border-bottom:1px solid var(--h4-line); background:var(--h4-bg); }
.v4-home .h4-shop .h4-wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; padding-top:22px; padding-bottom:22px; color:var(--h4-muted); font-size:14.5px; }
.v4-home .h4-shop .h4-mono:first-child{ color:var(--h4-gold); }
.v4-home .h4-shop a{ margin-left:auto; color:var(--h4-ink); } .v4-home .h4-shop a:hover{ color:var(--h4-gold); }

/* Entradas al bajar */
.v4-home .rv4{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--h4-ease), transform .9s var(--h4-ease); }
.v4-home .rv4.in{ opacity:1; transform:none; }

@media (max-width:900px){
  .v4-home .h4-scene{ align-items:flex-end; padding-top:52svh; padding-bottom:90px; }
  .v4-home .h4-scene.top{ align-items:flex-start; padding-top:calc(var(--h4-nav) + 24px); }
  .v4-home .h4-panel{ background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--h4-bg) 88%, transparent) 90px); padding:40px var(--h4-gutter) 0; margin:0 calc(var(--h4-gutter) * -1); max-width:none; }
  .v4-home .h4-scene.top .h4-panel{ background:linear-gradient(0deg, transparent, var(--h4-bg) 30%); padding:0 var(--h4-gutter) 60px; }
  .v4-home .h4-h1{ font-size:clamp(56px,15vw,96px); }
  .v4-home .h4-facts{ gap:22px; } .v4-home .h4-facts b{ font-size:40px; }
  .v4-home .h4-scene.content{ padding:90px 0; align-items:flex-start; }
  .v4-home .h4-scene.content .h4-panel{ background:none; padding:0; margin:0; }
  .v4-home .h4-devos a{ grid-template-columns:1fr 20px; gap:4px 12px; } .v4-home .h4-devos .r{ grid-column:1 / -1; }
  .v4-home .h4-faq summary{ font-size:21px; }
  .v4-home .h4-pf{ grid-template-columns:1fr 1fr; } .v4-home .h4-pf div:nth-child(3){ border-left:0; } .v4-home .h4-pf div:nth-child(n+3){ border-top:1px solid var(--h4-line); }
  .v4-home .h4-scene.premium{ text-align:left; } .v4-home .h4-scene.premium .h4-wrap{ display:block; }
  .v4-home .h4-nuevo-grid{ grid-template-columns:1fr; } .v4-home .h4-nuevo-grid div + div{ border-left:0; border-top:1px solid color-mix(in srgb, var(--h4-gold) 30%, transparent); } .v4-home .h4-nuevo-tit{ text-align:left; }
  .v4-home .h4-scene.premium .h4-lead{ margin-left:0; } .v4-home .h4-offer{ align-items:flex-start; }
  .v4-home .h4-scene.split .h4-wrap{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:600px){
  .v4-home .h4-ejemplos{ grid-template-columns:1fr; }
  .v4-home .h4-ejemplos li + li{ border-left:0; border-top:1px solid var(--h4-line); }
  .v4-home .h4-ejemplos button, .v4-home .h4-ejemplos li:first-child button{ padding:18px 0; }
}
@media (prefers-reduced-motion:reduce){
  .v4-home .rv4{ opacity:1; transform:none; transition:none; }
  .v4-home .h4-btn.gold, .v4-home .h4-dot{ animation:none; }
}

/* El pie tapa el cielo */
body[data-tab-active="inicio"] footer.foot-v4{ position:relative; z-index:3; background:#06080F; }
/* Escucha lleva también las cifras y el botón de elegir (antes en «Toda la Biblia») */
.v4-home .h4-play-row + .h4-facts{ margin-top:52px; padding-top:28px; border-top:1px solid var(--h4-line); max-width:520px; }
@media (min-width:901px){
  .v4-home #h4-escucha .h4-panel{ max-width:760px; }
  .v4-home #h4-escucha .h4-h1{ font-size:clamp(56px,6.2vw,108px); }
  .v4-home #h4-escucha .h4-eyebrow{ margin-bottom:28px; }
  .v4-home #h4-escucha .h4-play-row{ margin-top:36px; }
  .v4-home #h4-escucha .h4-play-row + .h4-facts{ margin-top:40px; padding-top:24px; }
}

/* En YouTube: el último video largo, se ve aquí mismo al tocar (youtube-nocookie) */
.v4-home .h4-yt .h4-wrap{ align-items:center; }
.v4-home .h4-yt-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:34px; }
.v4-home .h4-yt-acc .h4-btn, .v4-home .h4-yt-acc .h4-more{ margin:0; }
.v4-home .h4-yt-acc .h4-btn svg{ width:20px; height:20px; fill:currentColor; }
.v4-home .h4-yt-card{ margin:0; pointer-events:auto; }
.v4-home .h4-yt-play{ position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#0C1020;
  border:1px solid var(--h4-line); box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(201,168,76,.06); }
.v4-home .h4-yt-play img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--h4-ease), filter .3s; }
.v4-home .h4-yt-play:hover img{ transform:scale(1.025); filter:brightness(1.08); }
.v4-home .h4-yt-btn{ position:absolute; left:14px; bottom:14px; width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--h4-bg) 55%, transparent); border:1px solid color-mix(in srgb, var(--h4-gold) 70%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .3s var(--h4-ease), background .2s; }
.v4-home .h4-yt-btn svg{ width:22px; height:22px; fill:var(--h4-gold); margin-left:4px; }
.v4-home .h4-yt-play:hover .h4-yt-btn{ transform:scale(1.08); background:var(--h4-gold); } .v4-home .h4-yt-play:hover .h4-yt-btn svg{ fill:var(--h4-bg); }
.v4-home .h4-yt-dur{ position:absolute; right:12px; bottom:12px; padding:5px 8px; border-radius:3px; background:rgba(6,8,15,.82); color:var(--h4-ink); letter-spacing:.08em; }
.v4-home .h4-yt-play iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.v4-home .h4-yt-card figcaption{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:16px; }
.v4-home .h4-yt-card figcaption .h4-mono{ color:var(--h4-gold); order:2; white-space:nowrap; }
.v4-home .h4-yt-card figcaption b{ font:400 26px/1.15 var(--h4-serif); color:var(--h4-ink); font-weight:400; }
@media (max-width:900px){
  .v4-home .h4-yt .h4-wrap{ gap:36px; }
  .v4-home .h4-yt-btn{ width:48px; height:48px; left:10px; bottom:10px; } .v4-home .h4-yt-btn svg{ width:18px; height:18px; }
  .v4-home .h4-yt-card figcaption{ flex-direction:column; gap:4px; } .v4-home .h4-yt-card figcaption .h4-mono{ order:0; }
}