/* DRONES VS · intro de la portada. Generado por prototipos/intro-logo/publicar_web.py: no editar a mano. */
@property --grosor{syntax:'<length>';inherits:true;initial-value:0px}
:root{--logo-black:#000}
/* Portada: el negro es el del campo del logo, para que la animación se funda */
.intro{position:relative;height:200vh;background:var(--logo-black)}
.stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.contenido{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;will-change:transform,opacity}
.marca{position:relative;height:min(46vh,62vw);aspect-ratio:450/434}
.marca svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.simbolo{opacity:0}
/* Titular de marca: Inter Black, mayúsculas, tracking −0,03 em. Subtítulo: antetítulo SemiBold +0,14 em */
/* El texto va abajo a la izquierda; el logo queda solo en el centro */
.texto{position:absolute;z-index:2;left:clamp(20px,5vw,64px);bottom:clamp(40px,9vh,96px);text-align:left;max-width:min(90vw,720px);will-change:transform,opacity}
.lema{margin:0;color:var(--white);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;font-size:clamp(1.25rem,2.5vw,1.9rem)}
.sub{margin:18px 0 0;color:var(--pale-60);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem}
.cue{position:absolute;z-index:2;bottom:28px;left:50%;width:1px;height:44px;background:rgba(255,255,255,.25);overflow:hidden}
.cue::after{content:"";position:absolute;left:0;top:-44px;width:1px;height:44px;background:var(--white);animation:cae 1.8s ease-in-out infinite}
@keyframes cae{to{top:44px}}

/* «DRONES» en 3D: capas apiladas en profundidad que suben desde abajo */
.palabra{position:absolute;inset:0;perspective:900px;perspective-origin:50% 90%}
.drones3d{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 89%}
.drones3d svg{transform:translateZ(calc(var(--k) * var(--grosor) * -1))}
.vs{position:absolute;inset:0}

@media (prefers-reduced-motion:no-preference){
  /* en cuanto se posan las hélices (2,1 s), DRONES sube y VS entra; llegan juntas a los 3,1 s */
  .drones3d{animation:sube3d 1s cubic-bezier(.16,1,.3,1) 2.1s both}
  .vs{animation:entra .75s cubic-bezier(.16,1,.3,1) 2.35s both}
  .lema{animation:aparece .9s cubic-bezier(.2,.7,.2,1) 3.2s both}
  .sub{animation:aparece .9s cubic-bezier(.2,.7,.2,1) 3.4s both}
  .cue{animation:aparece .6s ease 3.8s both}
}
@keyframes sube3d{
  0%{transform:translateY(70%) rotateX(72deg) scale(1.9);opacity:0;--grosor:5px;filter:blur(6px)}
  20%{opacity:1}
  70%{--grosor:4px;filter:blur(0)}
  100%{transform:none;opacity:1;--grosor:0px;filter:blur(0)}
}
@keyframes entra{
  0%{transform:translateX(70vw);filter:blur(14px);opacity:0}
  25%{opacity:1}
  100%{transform:none;filter:blur(0);opacity:1}
}
@keyframes aparece{from{opacity:0;transform:translateY(12px)}}

/* En la portada, la barra aparece al salir de la intro y la sección blanca sube por encima */
.con-intro .topbar{transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.con-intro .topbar.visible{transform:none}
.con-intro main{position:relative;z-index:3;margin-top:-100vh;padding-top:0;background:var(--white)}