/* Cristco V15 · transiciones suaves de equipo + hero legible. */

/* EQUIPO: la tarjeta nunca cambia de tamaño y la transición A -> B es un crossfade suave. */
.team-deck{
  gap:clamp(28px,3.2vw,44px)!important;
}
.team-person{
  isolation:isolate;
}
.team-person-media{
  background:#080d16!important;
}
.team-person-media .team-person-image{
  transform:none!important;
  filter:none!important;
  transition:opacity .82s cubic-bezier(.22,.61,.36,1)!important;
  backface-visibility:hidden;
}
.team-person-media.has-hover-media .team-person-image-base{opacity:1!important;z-index:1}
.team-person-media.has-hover-media .team-person-image-hover{opacity:0!important;z-index:2}
.team-person:hover .team-person-media.has-hover-media .team-person-image-base,
.team-person:focus-visible .team-person-media.has-hover-media .team-person-image-base,
.team-person:focus-within .team-person-media.has-hover-media .team-person-image-base,
.team-person.is-active .team-person-media.has-hover-media .team-person-image-base{opacity:0!important}
.team-person:hover .team-person-media.has-hover-media .team-person-image-hover,
.team-person:focus-visible .team-person-media.has-hover-media .team-person-image-hover,
.team-person:focus-within .team-person-media.has-hover-media .team-person-image-hover,
.team-person.is-active .team-person-media.has-hover-media .team-person-image-hover{opacity:1!important}
.team-person:hover,.team-person:focus-visible,.team-person:focus-within,.team-person.is-active{
  box-shadow:0 14px 32px rgba(0,0,0,.18)!important;
}

/* En equipos con mouse el estado JS nunca revela solo: A -> B ocurre únicamente por hover/foco. */
@media(pointer:fine){
  .team-person.is-active:not(:hover):not(:focus-visible):not(:focus-within) .team-person-media.has-hover-media .team-person-image-base{opacity:1!important}
  .team-person.is-active:not(:hover):not(:focus-visible):not(:focus-within) .team-person-media.has-hover-media .team-person-image-hover{opacity:0!important}
  .team-person.is-active:not(:hover):not(:focus-visible):not(:focus-within){box-shadow:none!important}
}

/* HERO: el algoritmo es el protagonista. Las tarjetas flotantes se mantienen fuera del texto. */
.hero-visual{overflow:visible!important}
.hero-code-visual{overflow:visible!important}
.hero-code-body{overflow:hidden;border-radius:0}
.hero-code-body ol{position:relative;z-index:3;min-height:228px;opacity:1;transition:opacity .34s ease}
.hero-code-body ol.is-resetting{opacity:0}
.hero-code-body li{min-height:2em}
.hero-code-body li code{font:inherit;color:inherit;white-space:pre}
.hero-code-body li code .kw{color:#d390ff}
.hero-code-body li code .var{color:#81bfff;font-weight:700}
.hero-code-body li code .fn{color:#d7e1ee}
.hero-code-caret{display:none!important}
.hero-typing-caret{display:inline-block;width:2px;height:1.12em;margin-left:3px;vertical-align:-.18em;background:var(--cyan);box-shadow:0 0 12px rgba(100,244,255,.72);animation:heroCaret .92s steps(1,end) infinite}
.floating-card{z-index:6!important;max-width:220px!important}
.card-web{left:-82px!important;top:92px!important}
.card-app{right:-76px!important;top:234px!important}
.card-desktop{left:24px!important;bottom:54px!important}
.hero-code-status{position:relative;z-index:5}

@media(max-width:1180px){
  .card-web{left:-44px!important}
  .card-app{right:-42px!important}
}
@media(max-width:980px){
  .floating-card{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .team-person-media .team-person-image{transition:none!important}
  .hero-typing-caret{animation:none}
  .hero-code-body ol{transition:none}
}