/* ==========================================================================
   Hero: headline + "loop", the growth circuit drawn on the Boomit isotipo
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  /* La cinta mide 104vw y sale 2% a la derecha: sin esto, 29px de scroll horizontal a 1440. */
  overflow-x: clip;
  padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 96px);
}

/* Brand Glass Ribbon, entering from the top-right corner. Never behind text. */
.hero__ribbon {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -2%;
  width: max(1100px, 104vw);
  opacity: 0.7;
  pointer-events: none;
}

.hero__ribbon svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* ----- Copy -------------------------------------------------------------- */

.hero__claim {
  margin-top: 24px;
  max-width: 30ch;
  font: 600 clamp(1.25rem, 1rem + 0.8vw, 1.625rem) / 1.3 var(--f-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero .lede {
  max-width: 46ch;
  margin-top: 14px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 40px;
}

/* "clics" crossed out in coral once the page loads */
.strike {
  position: relative;
  white-space: nowrap;
}

.strike::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 54%;
  height: 0.085em;
  border-radius: 99px;
  background: var(--coral);
  transform-origin: left;
  animation: strike 760ms var(--ease-io) 700ms both;
}

@keyframes strike {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ----- Loop ----------------------------------------------------------------
   The isotipo with a thin edge, tilted back. A dot travels the centerline and
   lights the area it passes; the KPIs live inside the two loops.
   -------------------------------------------------------------------------- */

.hero__visual {
  position: relative;
  z-index: 1;
  margin: 16px 40px;
  padding: 23px 1px 19px;
}

.loop {
  container-type: inline-size;
}

.loop__stage {
  position: relative;
  margin-top: 4px;
}

.loop__figure {
  perspective: 1600px;
  transition: opacity 600ms ease;
}

.loop__figure.is-fading {
  opacity: 0;
}

.loop__svg {
  display: block;
  width: 52%;
  max-width: 262px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
  transform: rotateX(16deg);
  transform-origin: 50% 60%;
}

.loop-surface-start {
  stop-color: var(--loop-surface-start);
}
.loop-surface-end {
  stop-color: var(--loop-surface-end);
}

.loop-shadow {
  fill: var(--loop-shadow);
  opacity: 0.08;
}
.loop-edge use {
  fill: var(--loop-edge);
}
.loop-surface {
  fill: url(#loop-surface);
}

.loop-progress,
.loop-progress-side {
  fill: none;
  stroke-width: 82;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.loop-progress-side {
  stroke: url(#loop-gradient-side);
}

.loop-head {
  fill: #fff;
  stroke: var(--brand-red);
  stroke-width: 8;
  filter: drop-shadow(0 3px 5px rgba(36, 40, 77, 0.25));
}

.loop-trail circle {
  fill: #fff;
}

.loop-kpi__label {
  font: 500 50px var(--f-body);
  fill: var(--ink-2);
}
.loop-kpi__value {
  font: 700 118px var(--f-display);
  fill: var(--ink);
  letter-spacing: -3px;
}
.loop-kpi__note {
  font: 400 44px var(--f-body);
  fill: var(--ink-3);
}
.loop-kpi__note.is-up {
  fill: var(--ink);
  font-weight: 500;
}

/* Areas next to the isotipo. Teams use a round icon; systems a square one. */
.loop__areas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.loop-area {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.42;
  transform: translateY(-50%);
  transition: opacity 700ms ease;
}

.loop-area--left {
  flex-direction: row-reverse;
  text-align: right;
}

.loop-area__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  transition:
    background-color 700ms ease,
    color 700ms ease,
    box-shadow 700ms ease;
}

.loop-area__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loop-area__name {
  font: 600 0.8125rem / 1.15 var(--f-display);
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ink);
}

.loop-area--team .loop-area__icon {
  border-radius: 50%;
  background: var(--sunk);
  color: var(--ink-3);
}

.loop-area--system .loop-area__icon {
  border: 1.5px solid transparent;
  border-radius: 8px;
  color: var(--ink-3);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
}

.loop-area.is-active,
.loop-area.is-active .loop-area__icon {
  opacity: 1;
  transition-duration: 120ms;
}

.loop-area--team.is-active .loop-area__icon {
  background: var(--area-color);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--area-color) 16%, transparent);
}

.loop-area--system.is-active .loop-area__icon {
  color: var(--brand-violet);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--brand-violet), var(--brand-red)) border-box;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-violet) 12%, transparent);
}

/* The action that just happened, at its own readable pace */
.loop__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 7px;
  min-height: 2.8em;
  margin: 10px 0 0;
  padding: 0 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-3);
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

.loop__action i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--area-color, var(--blue));
  transform: translateY(-1px);
}

.loop__action b {
  font: 600 0.625rem / 1.4 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.loop__action.is-swapping {
  opacity: 0;
  filter: blur(2px);
}

/* Narrow container: the areas become a 2-column list under the isotipo */
@container (max-width: 440px) {
  .loop__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
  }

  .loop__figure {
    grid-column: 1 / -1;
  }
  .loop__svg {
    width: 86%;
    max-width: 300px;
  }
  /* La B se achica en celular: las etiquetas de adentro crecen para seguir legibles. */
  .loop-kpi__label {
    font-size: 60px;
  }
  .loop-kpi__note {
    font-size: 50px;
  }

  .loop__areas {
    display: contents;
  }

  .loop-area {
    position: static;
    transform: none;
  }

  .loop-area--left {
    flex-direction: row;
    text-align: left;
  }
}

@media (min-width: 1101px) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }
}

@media (max-width: 960px) {
  .hero__ribbon {
    display: none;
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .hero__visual {
    margin-top: 20px;
  }
  .hero__cta .btn {
    width: 100%;
    justify-content: space-between;
  }
}

/* Boomit v2: entrada del hero. El titulo queda quieto (es lo que Google mide
   como contenido principal, LCP); entran los botones y la cinta. */
@media (prefers-reduced-motion: no-preference) {
  .hero__cta {
    animation: bv2-hero-sube 600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms backwards;
  }
  .hero__ribbon {
    animation: bv2-hero-cinta 1400ms ease-out backwards;
  }
}
@keyframes bv2-hero-sube {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}
@keyframes bv2-hero-cinta {
  from {
    opacity: 0;
    transform: translate3d(4%, -3%, 0);
  }
}

/* Boomit v2: el circuito gana tamaño en pantallas anchas. (Tenia ademas un
   resplandor de marca detras: el cliente lo vio como una sombra parcial rara
   durante la animacion y se quito.) */
@media (min-width: 1101px) {
  .loop__svg {
    max-width: 320px;
  }
}