/* Portadas animadas de la página principal · 1 Red neuronal · 2 Núcleo IA · 3 Horizonte
   El contenedor .hv reemplaza la foto de fondo del hero cuando hay un estilo activo. */
.hero.fx .bg,.hero.fx .sweep{display:none}
.hv{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:radial-gradient(120% 90% at 75% 40%,#2a1033 0%,#140a1c 45%,#0c0811 100%)}
.hv canvas{position:absolute;inset:0;width:100%;height:100%}
/* zona del dibujo: a la derecha en computador, arriba en celular */
.hv .stage{position:absolute;right:4%;top:50%;width:min(46vw,640px);aspect-ratio:1;transform:translateY(-50%)}
@media(max-width:899px){.hv .stage{left:50%;right:auto;top:clamp(70px,13svh,130px);width:min(86vw,440px);transform:translateX(-50%)}}

/* ===== 2 · Núcleo IA ===== */
.hv2 .ring{position:absolute;inset:var(--i);border-radius:50%;border:1px solid rgba(220,198,234,.16);animation:hvSpin var(--t) linear infinite}
.hv2 .ring.rev{animation-direction:reverse}
.hv2 .ring.ticks{border:0;background:repeating-conic-gradient(rgba(220,198,234,.45) 0 .6deg,transparent .6deg 6deg);-webkit-mask:radial-gradient(circle,transparent 66%,#000 67%,#000 69%,transparent 70%);mask:radial-gradient(circle,transparent 66%,#000 67%,#000 69%,transparent 70%)}
.hv2 .ring.dash{border:1.5px dashed rgba(233,196,106,.35)}
.hv2 .radar{position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 0deg,rgba(233,168,255,.0) 0deg,rgba(233,168,255,.28) 40deg,transparent 60deg);animation:hvSpin 5s linear infinite;-webkit-mask:radial-gradient(circle,transparent 18%,#000 19%);mask:radial-gradient(circle,transparent 18%,#000 19%)}
.hv2 .core{position:absolute;inset:34%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#9d5cb6,#4a1d50 62%,#260d2e);box-shadow:0 0 0 10px rgba(157,92,182,.12),0 0 90px rgba(233,168,255,.55),inset 0 0 40px rgba(0,0,0,.4);animation:hvCore 1.2s cubic-bezier(.2,1.4,.4,1) both,hvPulse 3.2s 1.2s ease-in-out infinite}
.hv2 .core img{width:46%;filter:drop-shadow(0 4px 18px rgba(255,255,255,.35))}
.hv2 .wave{position:absolute;inset:34%;border-radius:50%;border:1.5px solid rgba(233,168,255,.6);animation:hvWave 3.2s ease-out infinite}
.hv2 .wave.b{animation-delay:1.6s;border-color:rgba(243,210,122,.55)}
.hv2 .orbit{position:absolute;inset:var(--i);border-radius:50%;animation:hvSpin var(--t) linear infinite}
.hv2 .orbit.rev{animation-direction:reverse}
.hv2 .chip{position:absolute;left:50%;top:0;transform:translate(-50%,-50%)}
.hv2 .chip span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 12px;border-radius:999px;font:600 12.5px/1 Inter,system-ui,sans-serif;color:#f6eefb;background:rgba(38,13,46,.78);border:1px solid rgba(233,196,106,.45);box-shadow:0 8px 24px -10px rgba(0,0,0,.7),0 0 18px rgba(233,168,255,.25);backdrop-filter:blur(6px);animation:hvSpin var(--t) linear infinite reverse}
.hv2 .orbit.rev .chip span{animation-direction:normal}
.hv2 .chip i{width:7px;height:7px;border-radius:50%;background:#f3d27a;box-shadow:0 0 8px #f3d27a}
.hv2 .chip.b{top:auto;bottom:0;transform:translate(-50%,50%)}
.hv2 .chip.l{left:0;top:50%}
.hv2 .chip.r{left:auto;right:0;top:50%;transform:translate(50%,-50%)}
@keyframes hvSpin{to{transform:rotate(360deg)}}
@keyframes hvCore{from{transform:scale(0);opacity:0}}
@keyframes hvPulse{50%{box-shadow:0 0 0 22px rgba(157,92,182,0),0 0 130px rgba(233,168,255,.75),inset 0 0 40px rgba(0,0,0,.4)}}
@keyframes hvWave{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* ===== 3 · Horizonte ===== */
.hv3{background:linear-gradient(180deg,#0c0811 0%,#1c0b25 48%,#3a1446 62%,#0c0811 63%)}
.hv3 .sun{position:absolute;left:50%;top:62%;width:min(70vw,900px);aspect-ratio:2/1;transform:translate(-50%,-100%);border-radius:999px 999px 0 0;background:radial-gradient(60% 120% at 50% 100%,rgba(243,210,122,.55),rgba(214,79,207,.35) 45%,transparent 72%);filter:blur(6px);animation:hvGlow 6s ease-in-out infinite}
.hv3 .floor{position:absolute;left:-50%;right:-50%;top:62%;height:80%;transform-origin:top center;transform:perspective(420px) rotateX(68deg);
  background-image:linear-gradient(rgba(233,168,255,.55) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(233,168,255,.45) 1.5px,transparent 1.5px);background-size:60px 60px;animation:hvRun 1.6s linear infinite;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 25%,#000 100%);mask:linear-gradient(180deg,transparent 0%,#000 25%,#000 100%)}
.hv3 .hz{position:absolute;left:0;right:0;top:62%;height:2px;background:linear-gradient(90deg,transparent,#f3d27a 30%,#fff 50%,#f3d27a 70%,transparent);box-shadow:0 0 24px 4px rgba(243,210,122,.6)}
.hv3 .logo3{position:absolute;left:50%;top:62%;width:min(62vw,620px);transform:translate(-50%,-128%);animation:hvRiseLogo 1.6s .2s cubic-bezier(.2,1,.3,1) both,hvFloat 6s 1.8s ease-in-out infinite}
.hv3 .logo3 img{width:100%;filter:drop-shadow(0 0 28px rgba(233,168,255,.55))}
.hv3 .logo3::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;background-size:300% 100%;-webkit-mask:url(../assets/brand/bcrown-lockup-white.png) center/100% 100% no-repeat;mask:url(../assets/brand/bcrown-lockup-white.png) center/100% 100% no-repeat;animation:hvShine 4.5s 2s ease-in-out infinite}
.hv3 .reflect{position:absolute;left:50%;top:62%;width:min(62vw,620px);transform:translate(-50%,6%) scaleY(-1);opacity:.18;filter:blur(2px);-webkit-mask:linear-gradient(0deg,#000,transparent 60%);mask:linear-gradient(0deg,#000,transparent 60%)}
.hv3 .reflect img{width:100%}
.hv3 .beam{position:absolute;bottom:38%;width:2px;height:40%;background:linear-gradient(0deg,transparent,rgba(243,210,122,.9),transparent);opacity:0;animation:hvBeam var(--t) var(--d) linear infinite}
@media(max-width:899px){
  .hv3{background:linear-gradient(180deg,#0c0811 0%,#1c0b25 30%,#3a1446 42%,#0c0811 43%)}
  .hv3 .sun,.hv3 .floor,.hv3 .hz,.hv3 .logo3,.hv3 .reflect{top:42%}
  .hv3 .logo3,.hv3 .reflect{width:84vw}
}
@keyframes hvRun{to{background-position:0 60px}}
@keyframes hvGlow{50%{opacity:.75;transform:translate(-50%,-100%) scale(1.04)}}
@keyframes hvRiseLogo{from{opacity:0;transform:translate(-50%,-60%) scale(.9);filter:blur(10px)}}
@keyframes hvFloat{50%{transform:translate(-50%,-134%)}}
@keyframes hvShine{0%{background-position:100% 0}50%,100%{background-position:0 0}}
@keyframes hvBeam{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-60vh)}}

/* selector de vista previa (solo con ?portada en la dirección) */
.hv-pick{position:fixed;left:50%;bottom:16px;z-index:200;transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:6px;border-radius:999px;background:#fff;box-shadow:0 14px 40px -10px rgba(0,0,0,.55);font:600 13px/1 Inter,system-ui,sans-serif;max-width:calc(100vw - 24px);overflow-x:auto}
.hv-pick span{padding:0 8px;color:#4a1d50;white-space:nowrap}
.hv-pick a{padding:9px 13px;border-radius:999px;color:#4a1d50;background:#f3eff6;white-space:nowrap;text-decoration:none}
.hv-pick a.on{background:#5e2468;color:#fff}

@media(prefers-reduced-motion:reduce){.hv *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* con animación: la sombra solo cubre el lado del texto, para que el dibujo se vea con fuerza */
.hero.fx::after{background:linear-gradient(180deg,rgba(12,8,17,0) 0%,rgba(12,8,17,0) 34%,rgba(12,8,17,.82) 62%,rgba(12,8,17,1) 100%)}
@media(min-width:900px){.hero.fx::after{background:linear-gradient(90deg,rgba(12,8,17,.92) 0%,rgba(12,8,17,.6) 32%,rgba(12,8,17,0) 52%),linear-gradient(0deg,rgba(12,8,17,.85) 0%,transparent 22%)}}
/* horizonte: en computador el logo va a la derecha, lejos del título */
@media(min-width:900px){
  .hv3 .sun{left:70%;width:min(52vw,820px)}
  .hv3 .logo3,.hv3 .reflect{left:73%;width:min(34vw,520px)}
}

/* celular: la animación ocupa su propio espacio arriba y el texto queda debajo, sin encimarse */
@media(max-width:899px){
  .hero.fx{padding-top:calc(96px + min(66vw,280px))}
  .hv .stage{top:96px;width:min(66vw,280px)}
  .hv2 .chip span{font-size:11px;padding:6px 10px}
  .hv3{background:linear-gradient(180deg,#0c0811 0,#1c0b25 calc(40px + min(52vw,220px)),#3a1446 calc(76px + min(52vw,220px)),#0c0811 calc(77px + min(52vw,220px)))}
  .hv3 .sun,.hv3 .floor,.hv3 .hz,.hv3 .logo3,.hv3 .reflect{top:calc(76px + min(52vw,220px))}
  .hv3 .logo3,.hv3 .reflect{width:78vw}
  .hv3 .sun{width:110vw}
}

/* ===== 4 · Viaje ===== */
.hv4{background:radial-gradient(90% 80% at 78% 45%,#0f2c4a 0%,#0a1b2d 50%,#07121e 100%)}
.hv4 .stage{width:min(54vw,760px);right:-2%}
.hv4 .stage canvas.globe{position:absolute;inset:0;width:100%;height:100%}
.hv4 .halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(47,111,228,.32) 0%,rgba(47,111,228,.10) 45%,transparent 70%);filter:blur(30px);animation:hvHalo 7s ease-in-out infinite}
@keyframes hvHalo{50%{opacity:.7;transform:scale(1.05)}}
.hv4 .stage{animation:hvGlobeIn 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes hvGlobeIn{from{opacity:0;transform:translateY(-46%) scale(.92)}to{opacity:1}}
@media(max-width:899px){.hv4 .stage{width:min(96vw,520px);right:auto;top:clamp(56px,9svh,100px)}
  @keyframes hvGlobeIn{from{opacity:0;transform:translateX(-50%) scale(.92)}to{opacity:1}}}