/* Apertura de la portada: portadas que rotan, pestañas y trabajos que saltan del globo */
.hero-slides{display:grid;width:100%}
.hero-slide{grid-area:1/1;display:flex;flex-direction:column;gap:28px;align-items:flex-start;min-width:0;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.hero-slide:not(.is-active){opacity:0;visibility:hidden;pointer-events:none}
.hero-slide.is-active{transition:opacity .45s var(--ease) .1s,visibility 0s}
.hero-slide:not(.is-active) .ln>span{animation:none}
/* La primera portada se pinta de una (es lo que Google mide); la animación de entrada
   es solo para los cambios de portada. */
.hero.has-switched .hero-slide.is-active>.eyebrow,.hero.has-switched .hero-slide.is-active>.lead,.hero.has-switched .hero-slide.is-active>.cta-row{animation:hs-up .8s var(--ease) both}
.hero.has-switched .hero-slide.is-active>.lead{animation-delay:.18s}
.hero.has-switched .hero-slide.is-active>.cta-row{animation-delay:.28s}

/* Imagen fija del globo mientras no arranca el 3D */
.stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .7s var(--ease)}
.stage.gl .stage-poster{opacity:0}
@keyframes hs-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;max-width:560px;margin-top:6px}
.hero-tabs button{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:0;background:none;border:0;color:var(--niebla);text-align:left;cursor:pointer;font:600 .88rem/1.2 var(--body);transition:color .25s var(--ease)}
.ht-num{font:500 .66rem var(--mono);letter-spacing:.08em;color:var(--gris);transition:color .25s var(--ease)}
.ht-bar{order:-1;flex:1 0 100%;height:3px;margin-bottom:10px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.ht-bar i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--azul),var(--azul-claro))}
.hero-tabs button:hover{color:var(--blanco)}
.hero-tabs [aria-selected="true"]{color:var(--blanco)}
.hero-tabs [aria-selected="true"] .ht-num{color:var(--naranja)}
.hero.is-live .hero-tabs [aria-selected="true"] .ht-bar i{animation:ht-fill 8s linear forwards}
.hero.is-paused .hero-tabs [aria-selected="true"] .ht-bar i{animation-play-state:paused}
.hero.is-calm .hero-tabs [aria-selected="true"] .ht-bar i{animation:none;transform:scaleX(1)}
.hero-tabs button:focus-visible{outline:2px solid var(--azul);outline-offset:6px;border-radius:4px}
@keyframes ht-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Tarjetas de cada portada sobre el globo */
.stage-set{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.stage-set:not(.is-active){opacity:0;visibility:hidden}
.stage-set.is-active{transition:opacity .45s var(--ease) .15s,visibility 0s}
.log p[data-later]{opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.log p[data-later].on{opacity:1;transform:none}

/* Trabajos que saltan del globo */
.hero-chips{position:absolute;inset:0;z-index:1;pointer-events:none}
.chip{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;border-radius:999px;background:rgba(20,23,28,.86);border:1px solid rgba(255,255,255,.13);box-shadow:0 16px 32px -14px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--blanco);font:600 .8rem/1 var(--body);white-space:nowrap;opacity:0;will-change:transform,opacity}
.chip svg{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;background:var(--chip,#6E96FF);color:#0A0B0D}
.chip b{font-weight:600}
.chip-o{--chip:#FF8A3D}.chip-b{--chip:#6E96FF}.chip-g{--chip:#2FD67A}.chip-y{--chip:#FFC94F}

@media (max-width:520px){
  .hero-tabs{gap:10px}
  .hero-tabs button{font-size:.8rem}
  .ht-num{display:none}
  .chip{font-size:.7rem;padding:4px 10px 4px 4px;gap:6px}
  .chip svg{width:22px;height:22px;padding:4px}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide,.stage-set{transition:none}
  .hero-slide.is-active>.eyebrow,.hero-slide.is-active>.lead,.hero-slide.is-active>.cta-row{animation:none}
}