/* =========================================================
   EQUIPO — mascota + equipo
   ========================================================= */

/* ── Sprite de robots (oculto, solo fuente para <use>) ────────────────── */

.equipo-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Único acento de color por figura — antena y marca de pecho. El resto del
   trazo es currentColor, para que el mismo símbolo sirva en zona clara y
   oscura sin duplicar el <symbol>. */
.equipo-avatar__accent {
  /* --group-accent como segundo nivel: equipo-admin.html nunca asigna
     --role-accent (esas clases .equipo-card--<rol> quedaron sin uso al mover
     el roster ahí) — sin este nivel intermedio, cada avatar caía siempre en
     azul sin importar la familia, aunque el marco del grupo sí acertara. */
  fill: var(--role-accent, var(--group-accent, var(--color-blue)));
}

/* ── Concepto (zona oscura) ────────────────────────────────────────────── */

.equipo-concept {
  background: var(--color-dark);
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

.equipo-concept::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-dark-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-dark-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, black 40%, transparent 100%);
  pointer-events: none;
}

.equipo-concept__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (max-width: 860px) {
  .equipo-concept__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

.equipo-concept__figure {
  display: flex;
  justify-content: center;
}

.equipo-mascot {
  width: 100%;
  max-width: 220px;
  height: auto;
  color: var(--color-dark-text);
  --role-accent: var(--color-cyan);
}

.equipo-concept__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.equipo-concept__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 8px 2px var(--color-cyan);
  flex-shrink: 0;
}

.equipo-concept__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-dark-text);
  margin-bottom: var(--space-md);
}

.equipo-concept__title em {
  font-style: normal;
  color: var(--color-cyan);
}

.equipo-concept__lede {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--color-dark-text-soft);
  line-height: 1.65;
  max-width: 42em;
  text-align: justify;
  margin-bottom: var(--space-sm);
}

.equipo-concept__lede:last-of-type {
  margin-bottom: 0;
}

/* ── Equipo (zona clara) ───────────────────────────────────────────────── */

.equipo-team {
  padding: var(--space-xl) 0;
}

.equipo-team__intro {
  color: var(--color-ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 46em;
  margin-top: var(--space-sm);
  text-align: justify;
  text-align-last: left;
}

/* Nota informativa — mismo lenguaje visual de "aviso" que un callout de
   documentación: fondo tintado y borde del acento azul del sitio (no un
   simple párrafo más), para que se lea como una aclaración importante, no
   como continuación del texto de arriba. */
.equipo-team__nota {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 46em;
  margin-top: var(--space-sm);
  padding: 0.8rem var(--space-sm);
  background: var(--color-blue-dim);
  border-left: 3px solid var(--color-blue);
  border-radius: 4px;
  text-align: justify;
  text-align-last: left;
}

.equipo-team__nota-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  color: var(--color-blue);
  line-height: 1.5;
}

/* Sonido opt-in (apagado por defecto, sin archivos de audio — se sintetiza
   vía Web Audio en equipo.html): un blip suave y distinto por ficha al
   pasar el mouse, y un pequeño acorde escalonado cuando una familia baila. */
.equipo-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-sm);
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  background: var(--color-paper-alt);
  border: 1px solid var(--color-stone-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.equipo-sound-toggle:hover {
  border-color: var(--color-cyan);
  color: var(--color-ink);
}

.equipo-sound-toggle[aria-pressed="true"] {
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.equipo-sound-toggle__icon {
  font-size: 0.95em;
}

.equipo-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* Tarjeta gris — mismo componente que ya usaba el resumen agregado
   (.capability: fondo --color-paper-alt, esquina redondeada), a todo el
   ancho del contenedor y en una sola columna (antes 2, ver .capabilities).
   Envuelve el marco de color de cada familia — nunca lo reemplaza. */
.equipo-family-card {
  width: 100%;
  background: var(--color-paper-alt);
  border-radius: 10px;
  padding: var(--space-md);
}

/* Título + descripción breve — mismo texto/tono que ya usaba el resumen
   agregado (.capability__tag/__title/__desc, ver sections.css), reusado tal
   cual arriba de las familias de cada tarjeta en vez de duplicar estilos. */
.equipo-family-card__header {
  margin-bottom: var(--space-sm);
  max-width: 46em;
}

/* Grupos de una misma tarjeta (sensor + informe del mismo macroproceso, o
   las 3 familias de la fila de normatividad/métodos/casos), en una sola
   fila — mismo agrupamiento por fila que ya usaba equipo-admin.html, bajo
   un único título/descripción por tarjeta. flex-wrap solo entra en juego
   en viewports angostos (móvil); en escritorio siempre caben en una fila. */
.equipo-family-card__groups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.equipo-family-card__groups .equipo-group {
  flex: 1 1 260px;
}

/* Marco por equipo/familia — mismo color que el acento de sus fichas (ver
   "Acentos por rol" abajo), el mismo que ya traía equipo-admin.html. Vive
   dentro de la tarjeta gris de arriba: fondo --color-paper (más claro que
   --color-paper-alt) para que el borde de color siga leyéndose como un
   marco propio, no como un tono más de la tarjeta que lo contiene. */
.equipo-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border: 2px solid var(--group-accent, var(--color-stone-line));
  border-radius: 14px;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper);
}

.equipo-group--blue {
  --group-accent: var(--color-blue);
}

.equipo-group--red {
  --group-accent: var(--color-red);
}

.equipo-group--amber {
  --group-accent: var(--color-amber);
}

.equipo-group--violet {
  --group-accent: var(--color-violet);
}

.equipo-group--teal {
  --group-accent: var(--color-teal);
}

.equipo-group--cyan {
  /* --color-cyan-ink, no --color-cyan: el cian de marca está calibrado para
     fondo oscuro y da ~1.5:1 de contraste sobre --color-paper — invisible
     como borde de familia en equipo-admin.html. */
  --group-accent: var(--color-cyan-ink);
}

.equipo-group--pink {
  --group-accent: var(--color-pink);
}

.equipo-group--slate {
  --group-accent: var(--color-slate);
}

.equipo-group--green {
  --group-accent: var(--color-green);
}

.equipo-group--orange {
  --group-accent: var(--color-orange);
}

.equipo-group--skyblue {
  --group-accent: var(--color-skyblue);
}

.equipo-group--coral {
  --group-accent: var(--color-coral);
}

.equipo-group--olive {
  --group-accent: var(--color-olive);
}

.equipo-group--gold {
  --group-accent: var(--color-gold);
}

.equipo-group--indigo {
  --group-accent: var(--color-indigo);
}

.equipo-group--blue {
  --group-accent-dim: var(--color-blue-dim);
}

.equipo-group--red {
  --group-accent-dim: var(--color-red-dim);
}

.equipo-group--amber {
  --group-accent-dim: var(--color-amber-dim);
}

.equipo-group--violet {
  --group-accent-dim: var(--color-violet-dim);
}

.equipo-group--teal {
  --group-accent-dim: var(--color-teal-dim);
}

.equipo-group--cyan {
  --group-accent-dim: var(--color-cyan-ink-dim);
}

.equipo-group--pink {
  --group-accent-dim: var(--color-pink-dim);
}

.equipo-group--slate {
  --group-accent-dim: var(--color-slate-dim);
}

.equipo-group--green {
  --group-accent-dim: var(--color-green-dim);
}

.equipo-group--skyblue {
  --group-accent-dim: var(--color-skyblue-dim);
}

.equipo-group--coral {
  --group-accent-dim: var(--color-coral-dim);
}

.equipo-group--olive {
  --group-accent-dim: var(--color-olive-dim);
}

.equipo-group--gold {
  --group-accent-dim: var(--color-gold-dim);
}

.equipo-group--indigo {
  --group-accent-dim: var(--color-indigo-dim);
}

.equipo-group--orange {
  --group-accent-dim: var(--color-orange-dim);
}

/* Se activa por JS mientras el grupo baila al unísono (ver equipo.html) —
   el marco resalta con el mismo acento de color que ya identifica al
   equipo, así la sincronía también se lee en el contorno, no solo en el
   movimiento. */
.equipo-group--dancing {
  box-shadow: 0 0 0 4px var(--group-accent-dim, transparent);
  transition: box-shadow 0.4s ease;
}

.equipo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  width: 82px;
  flex: 0 0 auto;
}

.equipo-card__avatar {
  /* Más ancho que el personaje (que sigue midiendo ~72px, fijado por el
     viewBox del sprite y el alto de 108px): el sobrante queda como aire a
     los lados del canvas, donde cabe el brazo levantado sin que el grid
     necesite compensar con más espaciado entre fichas. */
  width: 104px;
  height: 108px;
  color: var(--color-ink-soft);
  overflow: visible;
  transition: transform 0.2s ease;
}

/* Diversidad real, no variaciones del mismo gesto: unos bailan, unos dan
   vuelta, unos saltan, unos hacen shimmy, otros flotan o espían, y unos
   pocos se quedan tranquilos — como cualquier equipo de verdad. El TIPO,
   la duración y el delay salen de variables que asigna js/equipo.js al
   azar en cada carga (ver equipo.html); estos valores son solo el
   respaldo si JS no corre. */
.equipo-card__avatar {
  animation: var(--idle-anim, equipo-calm) var(--idle-duration, 4s) ease-in-out var(--idle-delay, 0s) infinite;
}

/* Variantes fijas de "saludo de a poco" (sin mouse) — js/equipo.js le
   suma una de estas clases a un par de fichas al azar en cada carga. El
   saludo grande al pasar el mouse (más abajo) siempre gana: :hover pisa
   estas variables porque ambas viven en la hoja de estilos, no inline. */
.equipo-card--wave-idle-a {
  --wave-anim: equipo-wave-idle;
  --wave-duration: 4.6s;
  --wave-delay: -1s;
  --wave-iterations: infinite;
}

.equipo-card--wave-idle-b {
  --wave-anim: equipo-wave-idle;
  --wave-duration: 5.1s;
  --wave-delay: -2.4s;
  --wave-iterations: infinite;
}

.equipo-card--wave-idle-c {
  --wave-anim: equipo-wave-idle;
  --wave-duration: 4.9s;
  --wave-delay: -3.6s;
  --wave-iterations: infinite;
}

@keyframes equipo-dance {

  0%,
  100% {
    transform: rotate(-6deg) translateY(0.1rem);
  }

  25% {
    transform: rotate(5deg) translateY(-0.4rem);
  }

  50% {
    transform: rotate(-5deg) translateY(0.15rem);
  }

  75% {
    transform: rotate(6deg) translateY(-0.45rem);
  }
}

@keyframes equipo-spin {

  0%,
  15% {
    transform: rotate(0deg);
  }

  55% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes equipo-bounce {

  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }

  30% {
    transform: translateY(0.15rem) scale(1.03, 0.95);
  }

  55% {
    transform: translateY(-0.9rem) scale(0.97, 1.04);
  }

  80% {
    transform: translateY(0.05rem) scale(1.02, 0.97);
  }
}

@keyframes equipo-shimmy {

  0%,
  10%,
  90%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  25% {
    transform: translateX(-0.3rem) rotate(-2.5deg);
  }

  40% {
    transform: translateX(0.3rem) rotate(2.5deg);
  }

  55% {
    transform: translateX(-0.25rem) rotate(-2deg);
  }

  70% {
    transform: translateX(0.25rem) rotate(2deg);
  }
}

@keyframes equipo-calm {

  0%,
  100% {
    transform: rotate(-2deg) translateY(0.15rem);
  }

  50% {
    transform: rotate(2deg) translateY(-0.15rem);
  }
}

/* Wiggle: sacudida chiquita y rápida de cabeza a pies, como quien no se
   puede quedar quieto. */
@keyframes equipo-wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-4deg);
  }

  40% {
    transform: rotate(3deg);
  }

  60% {
    transform: rotate(-3deg);
  }

  80% {
    transform: rotate(2deg);
  }
}

/* Float: sube y baja muy despacio, sin rotar — como si flotara sin peso. */
@keyframes equipo-float {

  0%,
  100% {
    transform: translateY(0.1rem);
  }

  50% {
    transform: translateY(-0.7rem);
  }
}

/* Peek: se asoma hacia un lado con curiosidad y vuelve, con una pausa al
   fondo del gesto antes de regresar. */
@keyframes equipo-peek {

  0%,
  15%,
  100% {
    transform: rotate(0deg) translateX(0);
  }

  40%,
  55% {
    transform: rotate(-9deg) translateX(-0.5rem);
  }

  80% {
    transform: rotate(0deg) translateX(0);
  }
}

/* Nod: reverencia rápida con todo el cuerpo — sin brazo, como un saludo de
   cabeza. */
@keyframes equipo-nod {

  0%,
  20%,
  100% {
    transform: rotate(0deg) translateY(0);
  }

  35%,
  65% {
    transform: rotate(9deg) translateY(0.5rem) scaleY(0.94);
  }

  50% {
    transform: rotate(0deg) translateY(0.1rem);
  }

  80% {
    transform: rotate(0deg) translateY(0);
  }
}

/* Swing: péndulo amplio y lento, como columpiándose de un lado a otro. */
@keyframes equipo-swing {

  0%,
  100% {
    transform: rotate(-14deg);
  }

  50% {
    transform: rotate(14deg);
  }
}

/* Tiptoe: saltitos chicos y rápidos, como quien no aguanta la impaciencia. */
@keyframes equipo-tiptoe {

  0%,
  100% {
    transform: translateY(0);
  }

  20%,
  60% {
    transform: translateY(-0.3rem);
  }

  40%,
  80% {
    transform: translateY(0);
  }
}

/* Baile de familia: disparado por JS a intervalos sobre TODO un
   .equipo-group a la vez (mismo nombre, misma duración, sin --idle-delay
   individual) — la sincronía es el punto, no la variedad. Al terminar, JS
   quita el estilo inline y cada ficha retoma su animación de reposo
   individual sin perder sus variables --idle-*. Más larga que el resto de
   animaciones del sprite (ver DANCE_DURATION en equipo.html) e incluye una
   vuelta completa (0deg -> 360deg entre 30% y 65%) además del vaivén — el
   0%/100% en 0deg/360deg es el mismo ángulo visual, así que quitar el
   estilo inline al terminar no produce ningún salto. */
@keyframes equipo-family-dance {

  0% {
    transform: rotate(0deg) translateY(0) scale(1, 1);
  }

  8% {
    transform: rotate(-14deg) translateY(-0.25rem) scale(1.05, 0.95);
  }

  16% {
    transform: rotate(12deg) translateY(0.2rem) scale(0.95, 1.05);
  }

  24% {
    transform: rotate(-10deg) translateY(-0.4rem) scale(1.04, 0.96);
  }

  32% {
    transform: rotate(0deg) translateY(-0.7rem) scale(0.94, 1.08);
  }

  55% {
    transform: rotate(360deg) translateY(-0.9rem) scale(1, 1);
  }

  68% {
    transform: rotate(360deg) translateY(0.15rem) scale(1.06, 0.92);
  }

  76% {
    transform: rotate(345deg) translateY(-0.25rem);
  }

  84% {
    transform: rotate(374deg) translateY(0.1rem);
  }

  92% {
    transform: rotate(356deg) translateY(-0.05rem);
  }

  100% {
    transform: rotate(360deg) translateY(0) scale(1, 1);
  }
}

.equipo-card:hover .equipo-card__avatar {
  animation: none;
  transform: rotate(0deg) translateY(-5px);
}

.equipo-card:hover {
  z-index: 1;
  --wave-anim: equipo-wave;
  --wave-duration: 1.2s;
  --wave-delay: 0s;
  --wave-iterations: 1;
}

/* Saludo: el brazo derecho gira desde el hombro. Las variables se definen
   en .equipo-card (base, para quienes saludan de a poco) y en :hover
   (pisa siempre con el saludo grande de 1 sola pasada) y heredan hasta el
   contenido de <use> (mismo mecanismo que --role-accent), así que cada
   ficha saluda por separado sin selectores que crucen el árbol de sombra
   del sprite. */
.equipo-avatar__arm {
  transform-box: fill-box;
  transform-origin: top center;
  animation-name: var(--wave-anim, none);
  animation-duration: var(--wave-duration, 1.2s);
  animation-delay: var(--wave-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: var(--wave-iterations, 1);
}

/* El brazo sube casi vertical (cerca de -180deg) en vez de quedar a los
   lados (cerca de -90deg): así el saludo ocupa alto, no ancho, y no invade
   la ficha vecina — el hombro es el pivote, la mano casi no se desplaza en
   x mientras oscila arriba. */
@keyframes equipo-wave {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-165deg);
  }

  30% {
    transform: rotate(-195deg);
  }

  45% {
    transform: rotate(-165deg);
  }

  60% {
    transform: rotate(-190deg);
  }

  75% {
    transform: rotate(-175deg);
  }

  90% {
    transform: rotate(-60deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Versión de "saludo de a poco" para quienes saludan sin necesidad de
   mouse: descansa la mayor parte del ciclo (0-55%) y solo ahí mete un
   saludo breve — no es la misma agitada de 1.2s del hover en bucle. */
@keyframes equipo-wave-idle {

  0%,
  55%,
  100% {
    transform: rotate(0deg);
  }

  65% {
    transform: rotate(-150deg);
  }

  72% {
    transform: rotate(-170deg);
  }

  79% {
    transform: rotate(-155deg);
  }

  86% {
    transform: rotate(-170deg);
  }

  93% {
    transform: rotate(-60deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .equipo-avatar__arm,
  .equipo-card__avatar {
    animation: none;
  }
}

.equipo-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink);
}

.equipo-card__role {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-stone);
  letter-spacing: 0.02em;
}

/* ── Acentos por rol (paleta "cuaderno", una tonalidad por rol) ─────────── */

.equipo-card--monitor-a {
  --role-accent: var(--color-blue);
}

.equipo-card--monitor-b {
  --role-accent: var(--color-red);
}

.equipo-card--inteligencia {
  --role-accent: var(--color-amber);
}

.equipo-card--regulacion {
  --role-accent: var(--color-violet);
}

.equipo-card--riesgos {
  --role-accent: var(--color-teal);
}

.equipo-card--informes-insumos {
  --role-accent: var(--color-amber);
}

.equipo-card--casos {
  --role-accent: var(--color-blue);
}

.equipo-card--marketing {
  --role-accent: var(--color-pink);
}

/* Familia de producto/gobierno agéntico — Edda, Ferran y Lior, unificados
   2026-07-13 (antes gobierno era violeta, separado de Lior en cyan). */
.equipo-card--producto {
  --role-accent: var(--color-cyan);
}

@media (max-width: 480px) {
  .equipo-card {
    width: 72px;
  }

  .equipo-card__avatar {
    width: 64px;
    height: 67px;
  }

  .equipo-group {
    padding: var(--space-xs);
  }
}