/* ==========================================================================
   Manifiesto: cada intuición se tacha y se reemplaza por evidencia.
   ========================================================================== */

.man-head {
  position: sticky;
  top: 120px;
  align-self: start;
}
.man2 {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 110px);
}
.man2 .man-head {
  position: sticky;
  top: 120px;
  align-self: start;
}
.shifts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.shift {
  display: grid;
  gap: 4px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.shift:first-child {
  border-top: 0;
  padding-top: 4px;
}
.shift small {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.intu {
  font: 600 clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem)/1.15 var(--f-hand);
  color: var(--ink-3);
}
.intu span {
  position: relative;
  display: inline-block;
}
.intu span::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: 56%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--brand-red);
  transform: rotate(-2deg);
  transform-origin: left;
  transition: transform 620ms var(--ease-io);
}
.evid {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font: 600 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.3 var(--f-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  clip-path: inset(-20% -2% -20% 0);
  transition:
    clip-path 760ms var(--ease-out) 480ms,
    opacity 400ms ease 480ms;
}
.evid .i {
  color: var(--brand-red);
  flex: none;
  transform: translateY(3px);
}
.shifts.arm .shift:not(.on) .intu span::after {
  transform: rotate(-2deg) scaleX(0);
}
.shifts.arm .shift:not(.on) .evid {
  clip-path: inset(-20% 100% -20% 0);
  opacity: 0;
}

@media (max-width: 960px) {
  .man2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .man2 .man-head {
    position: static;
  }
  .man-head {
    position: static;
  }
}

/* Boomit v2: el manifiesto pasa a una banda navy de ancho completo, el unico
   momento oscuro de la pagina. Se redefinen los colores de texto y lineas
   dentro de la seccion; el tachado coral y la flecha quedan igual. */
[data-section='manifiesto'] {
  --ink: #f4f4f6;
  --ink-2: rgba(244, 244, 246, 0.8);
  --muted: rgba(244, 244, 246, 0.64);
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.22);
  color: var(--ink);
  background:
    radial-gradient(55% 60% at 88% 0%, color-mix(in srgb, var(--brand-violet) 34%, transparent), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--brand-coral) 14%, transparent), transparent 70%),
    var(--brand-navy);
}
/* La seccion siguiente arrancaba pegada (flush-top) al aire de esta. */
[data-section='manifiesto'] + section {
  padding-top: clamp(56px, 10vw, 136px);
}
/* Sobre navy, las frases tachadas necesitan mas contraste. */
[data-section='manifiesto'] .intu {
  color: rgba(244, 244, 246, 0.72);
}