/* ============================ 06 · ESTUDIO ============================ */
#estudio .es-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center}
#estudio .es-lead{color:var(--mist);margin-top:22px;font-size:1.04rem;max-width:48ch}
#estudio h2{margin-top:22px;max-width:17ch}
#estudio .es-pilares{list-style:none;display:grid;gap:0;margin-top:34px;border-top:1px solid var(--line)}
#estudio .es-pilares li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
#estudio .es-pilares b{font-family:var(--display);font-weight:600;color:var(--white);font-size:1rem}
#estudio .es-pilares span{color:var(--mist);font-size:.92rem;line-height:1.55}
#estudio .es-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* escena: video vertical enmarcado + interfaces flotantes */
#estudio .es-escena{position:relative;width:min(100%,520px);margin-inline:auto;padding:28px 0}
#estudio .es-video{position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-2);background:var(--carbon);isolation:isolate;
  box-shadow:0 70px 120px -60px rgba(0,0,0,.95),0 0 90px -40px rgba(46,123,255,.55)}
#estudio .es-video video{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.04);filter:saturate(.75) contrast(1.05) brightness(.9)}
/* grado azul: quita el aire de "nave espacial" y lo lleva a la paleta de la marca */
#estudio .es-video::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:color;opacity:.55;background:linear-gradient(200deg,#3B8BFF,#0B2E6B)}
#estudio .es-video::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(4,7,14,.55),transparent 30%,transparent 55%,rgba(4,7,14,.85))}

#estudio .es-capa{position:absolute;z-index:3;border-radius:14px;border:1px solid rgba(120,165,255,.22);
  background:rgba(8,13,24,.72);-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.9);animation:es-flota 9s var(--ease) infinite alternate}
@keyframes es-flota{from{translate:0 0}to{translate:0 -10px}}
#estudio .es-marca{left:-18px;top:6px;display:flex;align-items:center;gap:8px;padding:10px 14px;animation-delay:-2s}
#estudio .es-marca .logo-svg{--logo-h:24px}
#estudio .es-marca b{font-family:var(--display);font-size:.74rem;letter-spacing:.12em;color:#fff;font-weight:600}
#estudio .es-marca small{font-size:.62rem;color:var(--mist);letter-spacing:.14em;text-transform:uppercase;padding-left:8px;border-left:1px solid var(--line-2)}

#estudio .es-plano{right:-26px;top:22%;width:170px;padding:12px;display:grid;gap:6px;animation-delay:-5s}
#estudio .es-plano-t{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-bottom:2px}
#estudio .es-plano i{display:block;border-radius:5px;background:rgba(120,165,255,.14);position:relative;overflow:hidden}
#estudio .es-plano i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(159,224,255,.35),transparent);transform:translateX(-100%);animation:es-brillo 4.5s var(--ease) infinite}
#estudio .es-b1{height:8px;width:60%}
#estudio .es-b2{height:30px}
#estudio .es-b3{height:8px;width:85%}
#estudio .es-b4{height:18px;width:45%;background:rgba(46,123,255,.55)!important}
#estudio .es-b5{height:22px}
#estudio .es-plano i:nth-child(3)::after{animation-delay:.4s}
#estudio .es-plano i:nth-child(5)::after{animation-delay:.8s}
@keyframes es-brillo{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}


#estudio .es-paleta{right:-12px;bottom:12%;display:flex;align-items:center;gap:6px;padding:10px 12px;animation-delay:-3.5s}
#estudio .es-paleta i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#estudio .es-paleta span{margin-left:6px;font-family:var(--display);font-weight:600;color:#fff;font-size:.9rem}

#estudio .es-estado{left:50%;bottom:4px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.7rem;color:#fff;white-space:nowrap;animation:none}
#estudio .es-estado i{width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.18)}

@media (max-width:980px){
  #estudio .es-grid{grid-template-columns:1fr}
  #estudio .es-escena{width:min(100%,460px)}
  /* en tablet el marco se hace un poco más ancho: el encuadre de las personas se mantiene */
  #estudio .es-video{aspect-ratio:4/4.6}
  #estudio .es-video video{object-position:50% 44%}
}
@media (max-width:560px){
  #estudio .es-pilares li{grid-template-columns:1fr;gap:4px}
  #estudio .es-cta .btn{flex:1 1 100%}
  #estudio .es-escena{padding:20px 12px}
  #estudio .es-marca{left:0}
  #estudio .es-plano{right:0;width:132px;top:26%}
  #estudio .es-paleta{display:none}
  /* celular: mismo encuadre que en computadora (la persona y su pantalla siempre completas) */
  #estudio .es-video{aspect-ratio:4/4.9}
  #estudio .es-video video{object-position:50% 43%;transform:scale(1.02)}
}
/* (movimiento reducido: desactivado a pedido del dueño) */

@media (max-width:900px){ #estudio .es-capa{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,13,24,.9)} }

/* video del equipo en su color original (pedido de Alan) */
#estudio .es-video video{filter:none}
#estudio .es-video::before{display:none}
#estudio .es-video::after{background:linear-gradient(180deg,rgba(4,7,14,.35),transparent 25%,transparent 70%,rgba(4,7,14,.55))}

/* sin columna de texto: la escena va centrada */
#estudio .es-grid{grid-template-columns:1fr;justify-items:center}
#estudio .es-escena{width:min(100%,640px)}

#estudio .es-video::before,#estudio .es-video::after{display:none!important}
#estudio .es-video video{filter:none!important;transform:none!important}