/* bit-util.com · Demos y laboratorio con Bit-Ly (marca original: verde lima) */
:root {
  --lime: #8cc63f;
  --lime-bright: #9fd84f;
  --lime-dark: #5d8a1c;
  --lime-soft: #f2f9e8;
  --charcoal: #2f3432;
  --ink: #1f2a1c;
  --ink-soft: #4d5a48;
  --line: #e1e8d8;
  --soft: #f7faf2;
  --white: #ffffff;
  --navy: #0f2557;
  --font: "Nunito", "Segoe UI", Arial, sans-serif;
  --radius: 20px;
  --shadow: 0 24px 60px rgba(47, 52, 50, 0.12);
  --wrap: min(1180px, calc(100% - 40px));
  --header-h: 76px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 12px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--charcoal);
  color: var(--white);
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 3px solid var(--lime-dark);
  outline-offset: 3px;
}

/* Botones y enlaces */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-lime {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--lime-dark);
}

.btn-lime:hover {
  background: var(--lime-bright);
}

.btn-lime:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--lime-dark);
}

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--white);
}

.btn-dark {
  background: var(--charcoal);
  color: var(--white);
}

.btn-dark:hover {
  background: var(--ink);
}

.btn-sm {
  min-height: 42px;
  padding: 0 20px;
  font-size: 0.95rem;
}

.text-link {
  color: var(--lime-dark);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid rgba(93, 138, 28, 0.3);
}

.text-link:hover {
  border-color: var(--lime-dark);
}

.kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lime-soft);
  color: var(--lime-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Encabezado */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(47, 52, 50, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}

.brand img {
  width: auto;
  height: 46px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a:not(.btn) {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-soft);
}

.site-nav a:not(.btn):hover {
  color: var(--lime-dark);
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
}

.nav-toggle-bars {
  display: grid;
  gap: 5px;
  width: 20px;
  margin: auto;
}

.nav-toggle-bars span {
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Portada */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 9vw, 112px);
  background:
    radial-gradient(600px 460px at 80% 40%, rgba(140, 198, 63, 0.22), transparent 70%),
    linear-gradient(180deg, var(--white), var(--soft));
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}

.hero h1 {
  font-size: clamp(3rem, 7.5vw, 5.4rem);
}

.hl {
  position: relative;
  z-index: 0;
  color: var(--lime-dark);
  white-space: nowrap;
}

.hl::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.08em;
  z-index: -1;
  height: 0.28em;
  border-radius: 999px;
  background: rgba(140, 198, 63, 0.35);
}

.lead {
  max-width: 540px;
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 1.18rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.hero-bitly {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  margin: 0;
}

.bitly-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  animation: bob 5s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.bitly-ring {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 10px solid var(--white);
  border-radius: 50%;
  outline: 6px solid var(--lime);
  box-shadow: var(--shadow);
}

.bitly-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Casco hexagonal: SVG sobre la imagen (inset = grosor del borde), puede salir del círculo. */
.helmet {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(15, 37, 87, 0.28));
}

.helmet-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.helmet-frame {
  fill: none;
  stroke-width: 26;
  stroke-linejoin: round;
}

.helmet-shine {
  fill: none;
  stroke: #ffffff;
  stroke-width: 14;
  stroke-linecap: round;
  opacity: 0.55;
}

.helmet-maze {
  opacity: 0;
}

/* Con JavaScript el casco espera fuera de cuadro hasta que empieza la animación. */
.js .bitly-stage:not(.is-helmet-on) .helmet-body {
  opacity: 0;
}

.bitly-stage.is-helmet-on .helmet-body {
  animation: helmet-drop 1s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.bitly-stage.is-helmet-on .helmet {
  animation: helmet-glow 1.3s 0.9s ease-out both;
}

.bitly-stage.is-helmet-on .helmet-maze {
  animation: maze-flash 1.5s 0.95s ease-out both;
}

.bitly-stage.is-helmet-off .helmet-body {
  animation: helmet-lift 0.35s ease-in both;
}

.bitly-stage:hover .bitly-ring,
.bitly-stage:focus-visible .bitly-ring {
  outline-color: var(--lime-bright);
}

.bitly-stage:focus-visible {
  outline: 3px solid var(--lime-dark);
  outline-offset: 10px;
}

@keyframes helmet-drop {
  0% {
    opacity: 0;
    transform: translateY(-150%) rotate(-10deg);
  }
  20% {
    opacity: 1;
  }
  68% {
    transform: translateY(3%) rotate(1.5deg) scaleY(0.97);
  }
  84% {
    transform: translateY(-2%) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes helmet-lift {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-150%) rotate(8deg);
  }
}

@keyframes helmet-glow {
  0% {
    filter: drop-shadow(0 6px 14px rgba(15, 37, 87, 0.28));
  }
  25% {
    filter: drop-shadow(0 0 22px rgba(47, 224, 230, 0.95)) drop-shadow(0 0 6px rgba(47, 224, 230, 0.9));
  }
  100% {
    filter: drop-shadow(0 6px 14px rgba(15, 37, 87, 0.28)) drop-shadow(0 0 10px rgba(47, 224, 230, 0.35));
  }
}

@keyframes maze-flash {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

.bubble {
  position: absolute;
  top: 6%;
  left: -8%;
  max-width: 190px;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 12px 30px rgba(47, 52, 50, 0.25);
  animation: pop 0.6s 0.4s both cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js .bubble {
  animation: none;
  opacity: 0;
}

.js .bubble.is-shown {
  animation: pop 0.55s both cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(-1.5deg);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Secciones */
.section {
  padding: clamp(72px, 9vw, 112px) 0;
}

.section-soft {
  background: var(--soft);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.section-head h2,
.story-copy h2 {
  font-size: clamp(2rem, 4.4vw, 3rem);
}

.section-head > p:not(.kicker) {
  margin: 16px 0 0;
  color: var(--ink-soft);
}

/* Demos */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.demo + .demo {
  margin-top: 32px;
}

.demo-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 40px);
}

.demo-tag {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime-dark);
}

.demo h3,
.lab-card h3 {
  margin-top: 8px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.demo-copy > p:not(.try) {
  margin: 10px 0 0;
  color: var(--ink-soft);
}

.ticks {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 28px;
  font-weight: 700;
}

.ticks li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2a1c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.try {
  margin: 22px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--lime-soft);
  font-size: 0.95rem;
  font-weight: 700;
}

.demo-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 26px;
}

.demo-surface {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 2px solid var(--line);
  background: var(--white);
}

.demo-surface-dark {
  background: #0e2b2e;
}

.demo-frame {
  display: block;
  width: 100%;
  border: 0;
  background: var(--white);
}

.demo-frame-hotel {
  height: 560px;
}

.demo-frame-venta {
  height: 560px;
  background: #0e2b2e;
}

.demo-expand {
  margin-top: auto;
  padding: 13px 18px;
  border-top: 2px solid var(--line);
  background: var(--soft);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--lime-dark);
}

/* Laboratorio */
.lab-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

.lab-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.lab-3d {
  grid-row: span 2;
}

.lab-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 26px 28px;
}

.lab-body p {
  margin: 10px 0 18px;
  color: var(--ink-soft);
}

.lab-body .text-link {
  align-self: flex-start;
  margin-top: auto;
}

.lab-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 26px 26px 0;
  border-radius: 16px;
  background: var(--lime-soft);
}

.lab-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--lime-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lab-grid .lab-card:not(.lab-3d) h3 {
  font-size: 1.4rem;
}

/* Juego: tarjeta en modo arcade, con los colores neón del propio juego. */
.lab-game {
  border-color: #262b45;
  background: #10121f;
  color: #ffffff;
}

.game-shot {
  display: block;
  overflow: hidden;
  border-bottom: 2px solid #262b45;
}

.game-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: center 8%;
  transition: transform 0.4s;
}

.lab-game:hover .game-shot img {
  transform: scale(1.04);
}

.lab-game .demo-tag {
  color: #ff4f8b;
}

.lab-game .lab-body p {
  color: rgba(255, 255, 255, 0.72);
}

.lab-game .text-link {
  color: #2fe0e6;
  border-color: rgba(47, 224, 230, 0.35);
}

.lab-game .text-link:hover {
  border-color: #2fe0e6;
}

/* Asistente de WhatsApp: acento en el verde de WhatsApp para reconocerlo al instante. */
.lab-wa .lab-icon {
  background: #e3f8ea;
}

.lab-wa .lab-icon svg {
  stroke: #1a9e4b;
}

/* Idea: tarjeta con fondo lima suave, al lado del asistente. */
.lab-idea {
  background: var(--lime-soft);
  border-color: transparent;
}

.lab-idea .lab-icon {
  background: var(--white);
}

.viewer {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 40%, #ffffff, #e7eedd);
}

.viewer-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.9);
}

.viewer canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
  touch-action: none;
}

.viewer canvas:active {
  cursor: grabbing;
}

.viewer-start {
  position: relative;
  z-index: 1;
}

.viewer-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 1;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(47, 52, 50, 0.78);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.viewer.is-loading .viewer-start {
  pointer-events: none;
  opacity: 0.7;
}

/* Historia */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.story-logos {
  display: grid;
  gap: 18px;
}

.story-logos > div {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 28px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

.story-logos img {
  width: auto;
  max-height: 110px;
}

.story-logos span {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.story-now {
  border-color: transparent !important;
  background: var(--navy);
}

.story-now span {
  color: rgba(255, 255, 255, 0.7) !important;
}

.story-copy > p:not(.kicker) {
  margin: 18px 0 28px;
  color: var(--ink-soft);
}

/* Pie */
.site-footer {
  padding: 32px 0;
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.footer-inner p {
  margin: 0;
}

.footer-inner strong {
  color: var(--lime);
}

.version {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 10px;
  border: 1px solid rgba(140, 198, 63, 0.55);
  border-radius: 999px;
  color: var(--lime);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.version-card {
  margin-left: 6px;
  color: var(--lime-dark);
  border-color: rgba(93, 138, 28, 0.4);
  font-size: 0.72rem;
  vertical-align: 4px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.site-footer a {
  text-underline-offset: 3px;
}

.site-footer a:hover {
  color: var(--white);
}

/* Responsivo */
@media (max-width: 980px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 20px 40px rgba(47, 52, 50, 0.1);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .site-nav .btn {
    margin-top: 16px;
  }

  .hero-grid,
  .demo,
  .story {
    grid-template-columns: 1fr;
  }

  .hero-bitly {
    order: -1;
    width: min(70%, 300px);
  }

  .bubble {
    left: auto;
    right: -14%;
    top: 0;
    border-radius: 18px 18px 4px 18px;
  }

  .demo-surface {
    border-top: 2px solid var(--line);
    border-left: 0;
  }

  .lab-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lab-3d {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .lab-3d .viewer {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  :root {
    --wrap: calc(100% - 32px);
    --header-h: 68px;
  }

  .brand img {
    height: 38px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .bubble {
    right: -20%;
    max-width: 150px;
    font-size: 0.85rem;
  }

  .demo-frame-hotel,
  .demo-frame-venta {
    height: 620px;
  }

  .lab-grid {
    grid-template-columns: 1fr;
  }

  .lab-3d .viewer {
    aspect-ratio: 1;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .bitly-stage .helmet-body,
  .js .bubble {
    opacity: 1 !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Bit-Ly acompañante (sigue al cursor) ===== */
.bitly-buddy {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 56px;
  height: 63px;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

.bitly-buddy[hidden] {
  display: none;
}

.bitly-buddy svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bitly-buddy.is-left svg {
  transform: scaleX(-1);
}

.bl-sombra { fill: rgba(0, 0, 0, 0.18); }
.bl-piel { fill: #f6c9a0; }
.bl-pelo { fill: #3a2e2a; }
.bl-ceja { fill: none; stroke: #3a2e2a; stroke-width: 1.2; stroke-linecap: round; }
.bl-camisa { fill: #8cc63f; }
.bl-manga { fill: #7fb536; }
.bl-cuello { fill: #ffffff; }
.bl-boton { fill: #eef7df; }
.bl-pantalon { fill: #d8c29c; }
.bl-zapato { fill: #232323; }
.bl-ojo { fill: #ffffff; }
.bl-pupila { fill: #1f1f1f; transition: transform 0.3s; }
.bl-nariz { fill: #eab087; }
.bl-boca { fill: #7a2630; }
.bl-dientes { fill: #ffffff; }
.bl-lengua { fill: #e2707a; }
.bl-reflejo { fill: #2fe0e6; opacity: 0; }
.bl-tapa { fill: #2f3432; }
.bl-hex { fill: none; stroke: #2fe0e6; stroke-width: 1.4; stroke-linejoin: round; }
.bl-base { fill: #5a605d; }

.bl-codigo {
  font: 700 7px/1 ui-monospace, "Consolas", monospace;
  fill: #1a73c8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.bl-codigo-g {
  transform-box: fill-box;
  transform-origin: center;
}

.bitly-buddy.is-left .bl-codigo-g {
  transform: scaleX(-1);
}

.bl-pierna-i { transform-origin: 27.5px 51px; }
.bl-pierna-d { transform-origin: 36.5px 51px; }
.bl-brazo-i { transform-origin: 18.2px 38.5px; }
.bl-brazo-d { transform-origin: 45.8px 38.5px; }
.bl-cabeza { transform-origin: 32px 36px; }

.bl-ojos {
  transform-origin: 32px 22px;
  animation: bl-parpadeo 4.2s infinite;
}

/* Caminar */
.is-walking .bl-pierna-i { animation: bl-paso 0.34s ease-in-out infinite alternate; }
.is-walking .bl-pierna-d { animation: bl-paso 0.34s ease-in-out infinite alternate-reverse; }
.is-walking .bl-brazo-i { animation: bl-braceo 0.34s ease-in-out infinite alternate-reverse; }
.is-walking .bl-brazo-d { animation: bl-braceo 0.34s ease-in-out infinite alternate; }
.is-walking .bl-cuerpo { animation: bl-rebote 0.17s ease-in-out infinite alternate; }

/* Sentado trabajando en la laptop */
.bl-sentado,
.bl-laptop {
  display: none;
}

.is-sitting .bl-piernas { display: none; }
.is-sitting .bl-sentado,
.is-sitting .bl-laptop { display: inline; }
.is-sitting .bl-cuerpo { transform: translateY(8px); }
.is-sitting .bl-brazo-i { animation: bl-teclea-i 0.22s ease-in-out infinite alternate; }
.is-sitting .bl-brazo-d { animation: bl-teclea-d 0.22s 0.11s ease-in-out infinite alternate; }
.is-sitting .bl-cabeza { animation: bl-asiente 1.8s ease-in-out infinite; }
.is-sitting .bl-pupila { transform: translate(-0.6px, 1.3px); }
.is-sitting .bl-reflejo { animation: bl-pantalla 2.4s ease-in-out infinite; }
.is-sitting .bl-codigo { animation: bl-codigo 2.2s 0.4s ease-out infinite; }

@keyframes bl-paso { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes bl-braceo { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes bl-rebote { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
@keyframes bl-teclea-i { from { transform: rotate(-36deg); } to { transform: rotate(-27deg); } }
@keyframes bl-teclea-d { from { transform: rotate(36deg); } to { transform: rotate(27deg); } }
@keyframes bl-asiente { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes bl-pantalla { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.16; } }
@keyframes bl-parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes bl-codigo {
  0% { opacity: 0; transform: translateY(4px); }
  20% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-9px); }
}

/* Tarjeta del laboratorio: acompañante */
.lab-buddy .lab-icon svg {
  stroke: var(--lime-dark);
}

.lab-buddy .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Idea: franja a lo ancho al final del laboratorio. */
.lab-grid .lab-idea {
  grid-column: 1 / -1;
}

@media (min-width: 561px) {
  .lab-grid .lab-idea {
    flex-direction: row;
    align-items: center;
  }

  .lab-grid .lab-idea .lab-icon {
    flex-shrink: 0;
    margin: 0 0 0 28px;
  }

  .lab-grid .lab-idea .lab-body p {
    margin-bottom: 12px;
  }
}

/* ===== Bit-Ly acompañante v2: títere del Bit-Ly futbolista ===== */
.bitly-buddy-v2.is-right svg {
  transform: scaleX(-1);
}

.b2-sombra { fill: rgba(0, 0, 0, 0.16); }
.b2-tapa { fill: #2f3432; }
.b2-hex { fill: none; stroke: #2fe0e6; stroke-width: 6; stroke-linejoin: round; }
.b2-base { fill: #5a605d; }

.b2-patada { transform-origin: 282.5px 314px; transform: rotate(-58deg); }
.b2-apoyo { transform-origin: 320px 320px; }
.b2-brazo-i { transform-origin: 295px 212.5px; }
.b2-brazo-d { transform-origin: 356px 206px; }
.b2-cabeza { transform-origin: 310px 186px; animation: b2-respira 3.2s ease-in-out infinite; }
.b2-balon-pie { transform-origin: 160px 428px; }
.b2-laptop { display: none; }

.b2-codigo {
  font: 700 64px/1 ui-monospace, "Consolas", monospace;
  fill: #1a73c8;
  opacity: 0;
}

.b2-codigo-g {
  transform-box: fill-box;
  transform-origin: center;
}

.bitly-buddy-v2.is-right .b2-codigo-g { transform: scaleX(-1); }
.bitly-buddy-v2.sin-balon .b2-balon-pie { display: none; }

/* Caminar (con el balón rodando a sus pies) */
.is-walking .b2-patada { animation: b2-paso-patada 0.34s ease-in-out infinite alternate; }
.is-walking .b2-apoyo { animation: b2-paso-apoyo 0.34s ease-in-out infinite alternate; }
.is-walking .b2-brazo-i { animation: b2-braceo-i 0.34s ease-in-out infinite alternate; }
.is-walking .b2-brazo-d { animation: b2-braceo-d 0.34s ease-in-out infinite alternate; }
.is-walking .b2-superior { animation: b2-rebote 0.17s ease-in-out infinite alternate; }
.is-walking .b2-balon-pie { animation: b2-rueda 0.5s linear infinite; }

/* Patada */
.is-kicking .b2-patada { animation: b2-patear 0.5s ease-in-out both; }
.is-kicking .b2-brazo-i { animation: b2-braceo-i 0.25s ease-in-out 2 alternate; }
.is-kicking .b2-brazo-d { animation: b2-braceo-d 0.25s ease-in-out 2 alternate-reverse; }

/* Sentado trabajando en la laptop */
.is-sitting .b2-piernas { display: none; }
.is-sitting .b2-laptop { display: inline; }
.is-sitting .b2-superior { transform: translateY(150px); }
.is-sitting .b2-brazo-i { animation: b2-teclea-i 0.22s ease-in-out infinite alternate; }
.is-sitting .b2-brazo-d { animation: b2-teclea-d 0.22s 0.11s ease-in-out infinite alternate; }
.is-sitting .b2-cabeza { animation: b2-asiente 1.8s ease-in-out infinite; }
.is-sitting .b2-balon-pie { transform: translateX(-46px); }
.is-sitting .b2-codigo { animation: bl-codigo 2.2s 0.4s ease-out infinite; }

/* Balón pateado (fuera del títere) */
.bitly-balon {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 59;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

.bitly-balon[hidden] { display: none; }

@keyframes b2-paso-patada { from { transform: rotate(-72deg); } to { transform: rotate(-38deg); } }
@keyframes b2-paso-apoyo { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes b2-braceo-i { from { transform: rotate(12deg); } to { transform: rotate(-10deg); } }
@keyframes b2-braceo-d { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes b2-rebote { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes b2-rueda { to { transform: rotate(-360deg); } }
@keyframes b2-respira { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg); } }
@keyframes b2-asiente { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes b2-teclea-i { from { transform: rotate(-48deg); } to { transform: rotate(-40deg); } }
@keyframes b2-teclea-d { from { transform: rotate(30deg); } to { transform: rotate(22deg); } }
@keyframes b2-patear {
  0% { transform: rotate(-58deg); }
  45% { transform: rotate(-108deg); }
  62% { transform: rotate(-8deg); }
  100% { transform: rotate(-58deg); }
}

/* ===== Deporte de Bit-Ly: americano ===== */
.b2-balon-mano,
.b2-balon-piso { display: none; }

.deporte-americano .b2-balon-pie { display: none; }
.deporte-americano .b2-balon-mano { display: inline; }
.deporte-americano.is-sitting .b2-balon-mano,
.deporte-americano.sin-balon .b2-balon-mano { display: none; }
.deporte-americano.is-sitting:not(.sin-balon) .b2-balon-piso { display: inline; }

/* Pase: brazo atrás, arriba y al frente */
.is-throwing .b2-brazo-d { animation: b2-lanzar 0.6s ease-in-out both; }
.is-throwing .b2-brazo-i { animation: b2-apunta 0.6s ease-in-out both; }
.is-throwing .b2-superior { animation: b2-inclina 0.6s ease-in-out both; }
.b2-superior { transform-origin: 315px 330px; }

@keyframes b2-lanzar {
  0% { transform: rotate(0); }
  45% { transform: rotate(-115deg); }
  60% { transform: rotate(-215deg); }
  100% { transform: rotate(0); }
}

@keyframes b2-apunta {
  0%, 100% { transform: rotate(0); }
  45% { transform: rotate(-18deg); }
  60% { transform: rotate(10deg); }
}

@keyframes b2-inclina {
  0%, 100% { transform: rotate(0); }
  45% { transform: rotate(6deg); }
  60% { transform: rotate(-7deg); }
}

/* ===== Panel de configuración del acompañante ===== */
.buddy-config {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.buddy-config legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.config-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.config-option {
  position: relative;
}

.config-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.config-option span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.config-option input:checked + span {
  border-color: var(--lime);
  background: var(--lime-soft);
}

.config-option input:focus-visible + span {
  outline: 3px solid var(--lime-dark);
  outline-offset: 2px;
}

.config-option span:hover {
  border-color: var(--lime);
}

.config-soon {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* ===== ¡Touchdown! ===== */
.b2-sombra { transform-origin: 285px 488px; }

.is-celebrating .b2-salto { animation: b2-salto 0.5s ease-out 3; }
.is-celebrating .b2-sombra { animation: b2-sombra 0.5s ease-out 3; }
.is-celebrating .b2-brazo-i { animation: b2-festejo-i 0.25s ease-in-out infinite alternate; }
.is-celebrating .b2-brazo-d { animation: b2-festejo-d 0.25s 0.08s ease-in-out infinite alternate; }
.is-celebrating .b2-cabeza { animation: none; transform: rotate(-7deg); }
.is-celebrating .b2-patada { transform: rotate(-78deg); }

@keyframes b2-salto {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-78px); }
}

@keyframes b2-sombra {
  0%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(0.6); opacity: 0.6; }
}

@keyframes b2-festejo-i { from { transform: rotate(58deg); } to { transform: rotate(78deg); } }
@keyframes b2-festejo-d { from { transform: rotate(-96deg); } to { transform: rotate(-118deg); } }

.bitly-letrero {
  position: fixed;
  z-index: 61;
  padding: 6px 14px;
  border: 3px solid var(--charcoal);
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font: 900 1rem/1 var(--font);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 0 var(--lime-dark), 0 12px 24px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -100%);
  animation: letrero 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes letrero {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.4) rotate(-8deg); }
  14% { opacity: 1; transform: translate(-50%, -100%) scale(1.12) rotate(3deg); }
  24% { transform: translate(-50%, -100%) scale(1) rotate(-2deg); }
  80% { opacity: 1; transform: translate(-50%, -115%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(0.9); }
}

.bitly-confeti {
  position: fixed;
  z-index: 61;
  width: 0;
  height: 0;
  pointer-events: none;
}

.bitly-confeti span {
  position: absolute;
  width: 6px;
  height: 9px;
  border-radius: 1px;
  animation: confeti 1.3s ease-out both;
}

@keyframes confeti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  55% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--giro)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 70px)) rotate(calc(var(--giro) * 1.6)); }
}

/* ===== ¡Gol! (soccer) ===== */
.b2-salto { transform-origin: 285px 490px; }

.is-goal .b2-salto { animation: b2-avion 0.45s ease-in-out infinite alternate; }
.is-goal .b2-brazo-i { animation: b2-avion-i 0.45s ease-in-out infinite alternate; }
.is-goal .b2-brazo-d { transform: rotate(-52deg); }
.is-goal .b2-patada { transform: rotate(-40deg); }
.is-goal .b2-cabeza { animation: none; transform: rotate(-6deg); }

@keyframes b2-avion {
  0% { transform: rotate(-11deg) translateY(0); }
  50% { transform: rotate(0) translateY(-26px); }
  100% { transform: rotate(11deg) translateY(0); }
}

@keyframes b2-avion-i { from { transform: rotate(-10deg); } to { transform: rotate(6deg); } }

.bitly-porteria {
  position: fixed;
  z-index: 58;
  width: 74px;
  height: 50px;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.18));
  animation: porteria-entra 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: 50% 100%;
}

.bitly-porteria svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bitly-porteria .red {
  transform-origin: 50% 20%;
}

.bitly-porteria.is-gol .red {
  animation: red-sacude 0.6s ease-out;
}

.bitly-porteria.is-saliendo {
  animation: porteria-sale 0.4s ease-in both;
}

@keyframes porteria-entra {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes porteria-sale {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.6); }
}

@keyframes red-sacude {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.08, 1.14) translateY(2px); }
  50% { transform: scale(0.96, 0.95); }
  75% { transform: scale(1.03, 1.04); }
  100% { transform: scale(1, 1); }
}

/* ===== Béisbol: el rey de los deportes ===== */
.b2-bate-mano,
.b2-beis-piso { display: none; }

.deporte-beisbol .b2-balon-pie { display: none; }
.deporte-beisbol .b2-bate-mano { display: inline; }
.deporte-beisbol.is-sitting .b2-bate-mano,
.deporte-beisbol.sin-bate .b2-bate-mano { display: none; }
.deporte-beisbol.is-sitting .b2-beis-piso { display: inline; }

/* Abanicar: sube el bat atrás, lo pasa por arriba y termina al frente */
.is-batting .b2-brazo-d { animation: b2-batear 0.62s ease-in-out both; }
.is-batting .b2-brazo-i { animation: b2-apunta 0.62s ease-in-out both; }
.is-batting .b2-superior { animation: b2-inclina 0.62s ease-in-out both; }

@keyframes b2-batear {
  0% { transform: rotate(0); }
  38% { transform: rotate(-125deg); }
  58% { transform: rotate(-280deg); }
  100% { transform: rotate(0); }
}

/* Jonrón: brazos arriba y saltos (el bat sale volando aparte) */
.is-homerun .b2-salto { animation: b2-salto 0.5s ease-out 3; }
.is-homerun .b2-sombra { animation: b2-sombra 0.5s ease-out 3; }
.is-homerun .b2-brazo-i { animation: b2-festejo-i 0.25s ease-in-out infinite alternate; }
.is-homerun .b2-brazo-d { animation: b2-festejo-d 0.25s 0.08s ease-in-out infinite alternate; }
.is-homerun .b2-cabeza { animation: none; transform: rotate(-7deg); }
.is-homerun .b2-patada { transform: rotate(-78deg); }

.bitly-bate {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 59;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
  transition: opacity 0.3s;
}

.bitly-bate.is-saliendo { opacity: 0; }

/* ===== F1: Bit-Ly piloto ===== */
.f1 { display: none; }
.deporte-f1 .f1 { display: inline; }
.deporte-f1 .b2-salto,
.deporte-f1 .b2-sombra { display: none; }

.f1-sombra { fill: rgba(0, 0, 0, 0.16); }
.f1-carro { fill: #8cc63f; stroke: #161616; stroke-width: 8; stroke-linejoin: round; }
.f1-azul { fill: #0f2557; stroke: #161616; stroke-width: 6; stroke-linejoin: round; }
.f1-negro { fill: #232323; }
.f1-franja { fill: none; stroke: #2fe0e6; stroke-width: 7; stroke-linecap: round; }
.f1-hex { fill: #0f2557; stroke: #2fe0e6; stroke-width: 5; stroke-linejoin: round; }
.f1-llanta { fill: #232323; stroke: #161616; stroke-width: 8; }
.f1-rin { fill: #9aa0a6; }
.f1-rayos { fill: none; stroke: #4b5053; stroke-width: 6; stroke-linecap: round; }
.f1-aro { fill: none; stroke: #2fe0e6; stroke-width: 4; }
.f1-maza { fill: #4b5053; }
.f1-casco-cristal { fill: rgba(159, 244, 246, 0.16); }
.f1-casco { fill: none; stroke: url(#cascoBorde) #1e8cf0; stroke-width: 14; stroke-linejoin: round; }
.f1-velocidad path { fill: none; stroke: #1f2a1c; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 60 40; opacity: 0.35; }
.f1-velocidad { opacity: 0; transition: opacity 0.2s; }
.is-fast .f1-velocidad { opacity: 1; }
.is-fast .f1-velocidad path { animation: f1-viento 0.3s linear infinite; }

.f1-auto { transform-origin: 237px 470px; transform: rotate(var(--cabeceo, 0deg)); transition: transform 0.15s; }
.f1-rueda-d { transform-origin: 40px 440px; }
.f1-rueda-t { transform-origin: 430px 437px; }
.f1-piloto { transform-origin: 245px 400px; }
.is-driving .f1-rueda { animation: f1-gira 0.3s linear infinite; }
.is-fast .f1-rueda { animation-duration: 0.12s; }
.is-burnout .f1-rueda-t { animation: f1-gira 0.06s linear infinite; }
.is-burnout .f1-vibra { animation: f1-tiembla 0.08s linear infinite; }
.is-driving .f1-piloto { animation: f1-baches 0.3s ease-in-out infinite alternate; }

/* Pits: laptop de telemetría, asiente y le salen </> */
.f1-laptop,
.f1-codigo { display: none; }
.is-pits .f1-laptop,
.is-pits .f1-codigo { display: inline; }
.is-pits .f1-piloto { animation: b2-asiente 1.8s ease-in-out infinite; }
.is-pits .f1-codigo .b2-codigo { animation: bl-codigo 2.2s 0.4s ease-out infinite; }

/* Meta: bandera a cuadros ondeando */
.f1-bandera { display: none; }
.is-finish .f1-bandera { display: inline; }
.is-finish .f1-piloto { animation: f1-festeja 0.3s ease-in-out infinite alternate; }
.f1-asta { fill: none; stroke: #161616; stroke-width: 9; stroke-linecap: round; }
.f1-tela { transform-origin: 176px 150px; animation: f1-ondea 0.28s ease-in-out infinite alternate; }
.f1-tela-fondo { fill: #ffffff; }
.f1-cuadro { fill: #161616; }
.f1-tela-borde { fill: none; stroke: #161616; stroke-width: 6; }

@keyframes f1-gira { to { transform: rotate(-360deg); } }
@keyframes f1-viento { to { stroke-dashoffset: -100; } }
@keyframes f1-tiembla {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -1px); }
  100% { transform: translate(0, 0); }
}
@keyframes f1-baches { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes f1-festeja { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-10px); } }
@keyframes f1-ondea { from { transform: skewY(-7deg) scaleX(0.96); } to { transform: skewY(6deg) scaleX(1.02); } }

/* Humo del arrancón y champaña */
.bitly-humo {
  position: fixed;
  z-index: 58;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(170, 172, 168, 0.75);
  pointer-events: none;
  animation: humo 0.75s ease-out both;
}

@keyframes humo {
  from { opacity: 0.85; transform: translate(0, 0) scale(0.4); }
  to { opacity: 0; transform: translate(var(--dx), -20px) scale(2.4); }
}

.bitly-confeti.champana span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

/* ===== Básquetbol ===== */
.b2-bota,
.b2-basquet-piso { display: none; }

.deporte-basquet .b2-balon-pie { display: none; }
.deporte-basquet .b2-bota { display: inline; }
.deporte-basquet.is-sitting .b2-bota,
.deporte-basquet.sin-balon .b2-bota,
.deporte-basquet.is-shooting .b2-bota { display: none; }
.deporte-basquet.is-sitting:not(.sin-balon) .b2-basquet-piso { display: inline; }

/* Dribleo: de la mano al piso (se aplasta un poco al botar) y de regreso */
.b2-bota { transform-origin: 444px 370px; animation: b2-driblea 0.5s infinite; }
.is-walking .b2-bota { animation-duration: 0.34s; }

@keyframes b2-driblea {
  0% { transform: translateY(0); animation-timing-function: ease-in; }
  46% { transform: translateY(124px) scaleY(1); }
  52% { transform: translateY(128px) scale(1.08, 0.86); animation-timing-function: ease-out; }
  100% { transform: translateY(0); }
}

/* Tiro en salto: brazos arriba y salto */
.is-shooting .b2-salto { animation: b2-tiro-salto 0.7s ease-out both; }
.is-shooting .b2-sombra { animation: b2-sombra 0.7s ease-out both; }
.is-shooting .b2-brazo-i { animation: b2-tiro-i 0.7s ease-out both; }
.is-shooting .b2-brazo-d { animation: b2-tiro-d 0.7s ease-out both; }
.is-shooting .b2-patada { transform: rotate(-70deg); }

@keyframes b2-tiro-salto {
  0%, 100% { transform: translateY(0); }
  42% { transform: translateY(-70px); }
}

@keyframes b2-tiro-i {
  0%, 100% { transform: rotate(0); }
  30%, 60% { transform: rotate(72deg); }
}

@keyframes b2-tiro-d {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-125deg); }
  50% { transform: rotate(-150deg); }
}

/* ¡Triple! */
.is-triple .b2-salto { animation: b2-salto 0.5s ease-out 3; }
.is-triple .b2-sombra { animation: b2-sombra 0.5s ease-out 3; }
.is-triple .b2-brazo-i { animation: b2-festejo-i 0.25s ease-in-out infinite alternate; }
.is-triple .b2-brazo-d { animation: b2-festejo-d 0.25s 0.08s ease-in-out infinite alternate; }
.is-triple .b2-cabeza { animation: none; transform: rotate(-7deg); }

/* Canasta */
.bitly-aro {
  position: fixed;
  z-index: 58;
  width: 64px;
  height: 80px;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.18));
  transform-origin: 50% 0;
  animation: porteria-entra 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.bitly-aro svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bitly-aro .red { transform-origin: 32px 45px; }
.bitly-aro.is-canasta .red { animation: red-swish 0.5s ease-out; }
.bitly-aro.is-saliendo { animation: porteria-sale 0.4s ease-in both; }

@keyframes red-swish {
  0% { transform: scale(1, 1); }
  30% { transform: scale(0.88, 1.22); }
  60% { transform: scale(1.05, 0.94); }
  100% { transform: scale(1, 1); }
}