/* ==========================================================================
   Panco Elevate Content — hero.css
   Barra de navegación y portada con la composición "planeta" y la firma
   "La apertura". Lo comparten la hoja de muestra y el sitio.
   ========================================================================== */

/* ---------- Navegación ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(10,10,12,.92),rgba(10,10,12,.72));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(35,35,44,.6)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav__logo{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.nav__iso{width:30px;height:30px;flex:none}
.nav__nombre{font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.nav__nombre span{font-weight:500;color:var(--muted)}
.nav__links{display:none;gap:28px;font-family:var(--font-display);font-weight:500;font-size:.92rem;color:var(--muted)}
.nav__links a{position:relative;padding:10px 0;transition:color var(--t-hover) var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1.5px;background:var(--brand-on-dark);transition:right var(--t-hover) var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
.nav__cta{min-height:44px;padding:0 16px;font-size:.9rem}
@media (max-width:519px){.nav__nombre span{display:none}}
@media (min-width:1000px){.nav__links{display:flex}}

/* ---------- Portada ---------- */
.hero{position:relative;min-height:100svh;padding:calc(var(--nav-h) + 20px) 0 48px;display:flex;align-items:center;isolation:isolate;overflow:clip}
.hero__inner{position:relative;z-index:1;display:grid;gap:8px;width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.hero__visual{display:flex;justify-content:center}
.planeta{width:min(330px,84vw);height:auto;overflow:visible}
.hero__copy{display:grid;gap:18px;justify-items:start;text-align:left}
.hero__titulo-caja{position:relative}
.hero__title{max-width:12ch}
.hero__line{display:block;overflow:hidden;padding:.12em .14em .16em 0;margin:-.12em -.14em -.16em 0}
.hero__line-in{display:block}
.js .hero__line-in{transform:translateY(118%);animation:lineaRescate 0s 12s forwards}
@keyframes lineaRescate{to{transform:none}}
.hero__lead{max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;width:100%}
.hero__actions .btn{flex:1 1 auto}
.js [data-hero-in]{visibility:hidden;animation:rescate 0s 4s forwards}
@keyframes rescate{to{visibility:visible}}

/* Anillo alrededor de la palabra "órbita": lo coloca el JS */
.orbita-palabra{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:2}
.orbita-palabra ellipse{fill:none;stroke:var(--brand-on-dark);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.9}
.no-js .orbita-palabra{display:none}

@media (min-width:860px){
  .hero{padding-top:calc(var(--nav-h) + 24px)}
  .hero__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:32px}
  .hero__visual{order:2;justify-content:flex-end}
  .hero__copy{order:1;gap:22px}
  .planeta{width:min(560px,42vw)}
  .hero__actions .btn{flex:0 0 auto}
}
@media (min-width:1200px){.planeta{width:580px}}
/* Pantallas de celular bajas: el planeta se achica para que el botón entre en la primera pantalla */
@media (max-width:859px) and (max-height:760px){.planeta{width:min(250px,66vw)}}

/* ---------- Planeta ---------- */
.planeta .orbita{fill:none;stroke-linecap:round}
.planeta .halo{fill:none;stroke-linecap:round}
.orb--azul .orbita{stroke:#0066FF;stroke-width:2.4}
.orb--azul .halo{stroke:#0066FF;stroke-width:12;opacity:.16}
.orb--morada .orbita{stroke:#7B2CBF;stroke-width:2}
.orb--morada .halo{stroke:#7B2CBF;stroke-width:10;opacity:.24}
.orb--verde .orbita{stroke:#10E880;stroke-width:1.3}
.orb--verde .halo{stroke:#10E880;stroke-width:6;opacity:.14}
.nucleo-glow{transform-box:fill-box;transform-origin:50% 50%}
.js .planeta .nucleo-glow{animation:respira 7s var(--ease-io) infinite alternate}
@keyframes respira{from{transform:scale(.92);opacity:.75}to{transform:scale(1.08);opacity:1}}
.aspa-firma{transform-box:view-box}
/* Sin JavaScript: las aspas abiertas no estorban y el planeta se ve completo */
.no-js .planeta .aspas{display:none}


@media (prefers-reduced-motion:reduce){
  .js .hero__line-in{transform:none}
  .js [data-hero-in]{visibility:visible}
  .js .planeta .nucleo-glow{animation:none}
}

@media (prefers-reduced-motion:reduce){.js .planeta .aspas{display:none}}