@font-face {
  font-family: Inter;
  src: url('/assets/inter.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --ink: #12332f;
  --ink-2: #445d56;
  --ink-3: #61766e;
  --bg: #f8f9f4;
  --line: #dde5d8;
  --coral: #f16b4b;
  --ok: #16804c;
  /* Duración del ciclo de la demostración. Todos los fotogramas clave usan este mismo período. */
  --t: 25s;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}
a {
  color: inherit;
  text-underline-offset: 0.22em;
}
a:focus-visible {
  outline: 3px solid #487c48;
  outline-offset: 5px;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Encabezado y pie: siempre sobre el eje central. */
.bar {
  display: flex;
  justify-content: center;
  padding: 28px 24px 8px;
  position: relative;
  z-index: 1;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.wordmark img {
  display: block;
  width: 150px;
  height: auto;
}
footer {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding: 30px 24px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
}
footer nav {
  display: flex;
  gap: clamp(18px, 3vw, 34px);
}
footer nav a {
  text-decoration: none;
}
footer nav a:hover {
  text-decoration: underline;
}
.foot-brand {
  font-weight: 630;
}

/* Portada */
.home {
  background:
    radial-gradient(52% 440px at 50% 0, #e2f1e4 0, transparent 100%),
    radial-gradient(36% 400px at 90% 150px, #fdebe1 0, transparent 100%),
    radial-gradient(36% 400px at 10% 190px, #e5eef5 0, transparent 100%);
  background-repeat: no-repeat;
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  margin-top: -92px;
  padding: calc(92px + clamp(26px, 5vh, 52px)) 24px 0;
}
.pitch {
  position: relative;
  width: min(980px, 100%);
  margin: 0 auto;
}
.orbit {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  width: 1800px;
  height: 1800px;
  translate: -50% calc(-50% + 330px);
  pointer-events: none;
  mask-image: radial-gradient(circle closest-side, #000 22%, transparent 92%);
}
.orbit i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--d);
  height: var(--d);
  translate: -50% -50%;
  border: 1px solid rgb(23 63 59 / 0.13);
  border-radius: 50%;
}
.orbit i:nth-child(1) {
  --d: 560px;
}
.orbit i:nth-child(2) {
  --d: 850px;
}
.orbit i:nth-child(3) {
  --d: 1140px;
}
.orbit i:nth-child(4) {
  --d: 1430px;
}
.orbit i:nth-child(5) {
  --d: 1720px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgb(255 255 255 / 0.75);
  font-size: 13.5px;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.eyebrow i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgb(241 107 75 / 0.16);
}
.pitch h1 {
  font-size: clamp(36px, 4.7vw, 64px);
  letter-spacing: -0.052em;
  line-height: 1.05;
  font-weight: 640;
  margin: 22px auto 0;
  text-wrap: balance;
}
.pitch h1 em {
  display: block;
  max-width: 14em;
  margin-inline: auto;
  font-style: normal;
  color: #5a7d70;
  text-wrap: balance;
}
.pitch h1 .dot {
  color: var(--coral);
}
.lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  letter-spacing: -0.015em;
  max-width: 600px;
  margin: 22px auto 30px;
  color: var(--ink-2);
  text-wrap: pretty;
}
.google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 28px 14px 24px;
  background: #131314;
  color: #e3e3e3;
  border: 1px solid #8e918f;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  box-shadow: 0 16px 30px -16px rgb(18 51 47 / 0.75);
  transition:
    background 0.16s,
    transform 0.16s;
}
.google:hover {
  background: #232927;
  transform: translateY(-1px);
}
.pitch small,
.closing small {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin: 14px 0 0;
}

/* Secciones */
.kicker {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
main h2 {
  margin: 0 auto;
  max-width: 17em;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.047em;
  line-height: 1.1;
  font-weight: 640;
  text-wrap: balance;
}
.sub {
  margin: 16px auto 0;
  max-width: 540px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.features,
.ext,
.plans,
.closing {
  text-align: center;
  padding: clamp(80px, 10vw, 128px) 24px 0;
}

/*
 * Extensión de Chrome: una ventana de navegador de ejemplo donde se agrega la extensión, queda
 * fijada en la barra y aparece en Gmail. Los tres pasos se encienden al ritmo de la escena.
 */
.ext {
  --e: 9s;
}
.ext-win {
  --u: 1px;
  overflow: hidden;
  width: min(640px, 100%);
  margin: 44px auto 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 60px -40px rgb(18 51 47 / 0.5);
  text-align: left;
}
.ext-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 14px;
  background: #e6ebee;
}
.ext-bar > i {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c5ced3;
}
.ext-url {
  position: relative;
  flex: 1;
  display: grid;
  align-items: center;
  min-width: 0;
  height: 28px;
  margin: 0 6px 0 10px;
  padding: 0 14px 0 34px;
  overflow: hidden;
  border-radius: 99px;
  background: #fff;
  color: #5f6368;
  font-size: 12.5px;
  white-space: nowrap;
}
.ext-url svg {
  position: absolute;
  left: 13px;
  width: 13px;
  height: 13px;
}
.ext-url b {
  grid-area: 1 / 1;
  font-weight: 500;
}
.ext-url .u1 {
  animation: ext-url-1 var(--e) infinite both;
}
.ext-url .u2 {
  opacity: 0;
  animation: ext-url-2 var(--e) infinite both;
}
.ext-pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #fff;
  opacity: 0;
  animation: ext-pin var(--e) infinite both;
}
.ext-puzzle {
  flex: none;
  width: 19px;
  height: 19px;
  color: #5f6368;
}
.ext-stage {
  display: grid;
  align-items: center;
  min-height: 132px;
  padding: 24px 26px;
}
.ext-store,
.ext-inbox {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ext-store {
  position: relative;
  animation: ext-store var(--e) infinite both;
}
.ext-store > img {
  flex: none;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line);
}
.ext-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin-right: auto;
}
.ext-name b {
  color: #202124;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.ext-name small {
  color: var(--ink-3);
  font-size: 13px;
}
.ext-add {
  flex: none;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 620;
  white-space: nowrap;
  animation: ext-add var(--e) infinite both;
}
.ext-add b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: inherit;
}
.ext-add svg {
  width: 16px;
  height: 16px;
}
.ext-add .was {
  animation: ext-was var(--e) infinite both;
}
.ext-add .now {
  animation: ext-now var(--e) infinite both;
}
.ext-cur {
  position: absolute;
  right: 44px;
  bottom: -6px;
  width: 22px;
  height: 22px;
  opacity: 0;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35));
  animation: ext-cur var(--e) infinite both;
}
.ext-inbox {
  flex-wrap: wrap;
  gap: 12px 18px;
  opacity: 0;
  visibility: hidden;
  animation: ext-inbox var(--e) infinite both;
}
.ext-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px 0 8px;
  border-radius: 99px;
  box-shadow: 0 0 0 1px #d5e1d9;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.05em;
}
.ext-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ea362;
  animation: live 1.6s ease-in-out infinite;
}
.ext-mail {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: #202124;
  font-size: 14.5px;
}
.ext-mail svg {
  width: 19px;
  height: 19px;
}
.ext-mail b {
  font-weight: 650;
}
.ext-mail em {
  color: var(--ink-3);
  font-size: 13px;
  font-style: normal;
}
.ext-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin: 30px auto 0;
  padding: 0;
  counter-reset: paso;
}
.ext-steps li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
  font-weight: 600;
  animation: ext-step var(--e) infinite both;
}
.ext-steps li::before {
  counter-increment: paso;
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 650;
  animation: ext-dot var(--e) infinite both;
}
/* El mismo fotograma para los tres pasos, desfasado un tercio del ciclo. */
.ext-steps li:nth-child(2),
.ext-steps li:nth-child(2)::before {
  animation-delay: calc(var(--e) * -2 / 3);
}
.ext-steps li:nth-child(3),
.ext-steps li:nth-child(3)::before {
  animation-delay: calc(var(--e) / -3);
}
.ext-cta {
  margin: 0;
}
.cta.soon {
  background: #fff;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: default;
}
.cta.soon:hover {
  background: #fff;
  transform: none;
}
@keyframes ext-step {
  0%,
  31%,
  100% {
    color: var(--ink);
  }
  33.3%,
  98% {
    color: var(--ink-3);
  }
}
@keyframes ext-dot {
  0%,
  31%,
  100% {
    border-color: var(--ink);
    background-color: var(--ink);
    color: #fff;
  }
  33.3%,
  98% {
    border-color: var(--line);
    background-color: #fff;
    color: var(--ink-3);
  }
}
@keyframes ext-store {
  0% {
    opacity: 0;
    visibility: visible;
  }
  2.5%,
  62% {
    opacity: 1;
    visibility: visible;
  }
  65%,
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes ext-inbox {
  0%,
  65% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
  }
  69%,
  96.5% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  100% {
    opacity: 0;
    visibility: visible;
    transform: none;
  }
}
@keyframes ext-url-1 {
  0%,
  62% {
    opacity: 1;
  }
  65%,
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ext-url-2 {
  0%,
  65% {
    opacity: 0;
  }
  68%,
  97% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ext-add {
  0%,
  41% {
    background-color: var(--ink);
    color: #fff;
    transform: none;
  }
  42.4% {
    background-color: var(--ink);
    color: #fff;
    transform: scale(0.94);
  }
  44%,
  100% {
    background-color: #d7f1e0;
    color: #106039;
    transform: none;
  }
}
@keyframes ext-was {
  0%,
  43.4% {
    opacity: 1;
  }
  43.5%,
  100% {
    opacity: 0;
  }
}
@keyframes ext-now {
  0%,
  43.4% {
    opacity: 0;
  }
  43.5%,
  100% {
    opacity: 1;
  }
}
@keyframes ext-pin {
  0%,
  46% {
    opacity: 0;
    transform: scale(0.4);
  }
  48.5% {
    opacity: 1;
    transform: scale(1.25);
  }
  51%,
  97% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes ext-cur {
  0%,
  35% {
    opacity: 0;
    transform: translate(26px, 22px);
  }
  40%,
  41.6% {
    opacity: 1;
    transform: none;
  }
  42.4% {
    opacity: 1;
    transform: scale(0.82);
  }
  43.6%,
  47% {
    opacity: 1;
    transform: none;
  }
  51%,
  100% {
    opacity: 0;
    transform: translate(18px, 16px);
  }
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: min(1120px, 100%);
  margin: 48px auto 0;
}
.cards article {
  padding: 14px 14px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}
.cards h3 {
  margin: 26px 0 0;
  font-size: 19px;
  letter-spacing: -0.03em;
}
.cards p {
  margin: 10px auto 0;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.viz {
  --u: 1px;
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 12px;
  background: #f2f6ee;
  font-size: 13.5px;
  font-weight: 600;
}
.viz svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.viz-ck {
  flex-direction: column;
}
.ck-row,
.ck-toast {
  width: min(240px, 100%);
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
}
.ck-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
}
.viz-ck .ck-text {
  justify-items: start;
}
.viz-ck .ck-when {
  justify-items: end;
}
.viz-ck em {
  font-style: normal;
  font-weight: 450;
  font-size: 12.5px;
  color: var(--ink-3);
}
.ck-toast {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  box-shadow:
    0 0 0 1px rgb(18 51 47 / 0.08),
    0 10px 22px -10px rgb(18 51 47 / 0.4);
  animation: vz-toast 6s infinite both;
}
.ck-toast i {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d9f2e2;
  color: var(--ok);
}
.ck-toast svg {
  width: 15px;
  height: 15px;
}
.ck-toast span {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.3;
}
.ck-toast em {
  color: var(--ok);
  font-size: 11.5px;
  font-weight: 600;
}
.viz-ck .was {
  animation: vz-out 6s infinite both;
}
.viz-ck .now {
  animation: vz-in 6s infinite both;
}
.viz-tags .tag {
  animation: vz-chip 6s infinite both;
}
.viz-tags .tag:nth-child(2) {
  animation-delay: 1.1s;
}
.viz-tags .tag:nth-child(3) {
  animation-delay: 2.2s;
}
.viz-tags .tag:nth-child(4) {
  animation-delay: 3.3s;
}
.viz-tags .tag.s-add {
  animation: vz-breathe 2.4s ease-in-out infinite;
}
.viz-team .avs i {
  animation: vz-pop 6s infinite both;
}
.viz-team .avs i:nth-child(2) {
  animation-delay: 0.35s;
}
.viz-team .avs i:nth-child(3) {
  animation-delay: 0.7s;
}
.team-text {
  animation: vz-text 6s infinite both;
}
@keyframes vz-out {
  0%,
  34%,
  100% {
    opacity: 1;
  }
  36%,
  96% {
    opacity: 0;
  }
}
@keyframes vz-in {
  0%,
  34%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
  39%,
  96% {
    opacity: 1;
    transform: none;
  }
}
@keyframes vz-toast {
  0%,
  40% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  46%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes vz-chip {
  0%,
  16%,
  100% {
    transform: none;
    box-shadow: 0 0 0 0 transparent;
  }
  6%,
  10% {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 16px -8px rgb(18 51 47 / 0.45);
  }
}
@keyframes vz-breathe {
  50% {
    opacity: 0.45;
  }
}
@keyframes vz-pop {
  0%,
  100% {
    transform: scale(0);
  }
  7% {
    transform: scale(1.18);
  }
  11%,
  90% {
    transform: scale(1);
  }
}
@keyframes vz-text {
  0%,
  20%,
  100% {
    opacity: 0;
    transform: translateX(-8px);
  }
  28%,
  90% {
    opacity: 1;
    transform: none;
  }
}
.viz-tags {
  flex-wrap: wrap;
  align-content: center;
}
.viz-team {
  gap: 12px;
  color: var(--ink-2);
}
.avs {
  display: flex;
}
.avs i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: -9px;
  border: 2px solid #f2f6ee;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-style: normal;
  font-size: 13px;
}
.avs i:first-child {
  margin-left: 0;
}
.avs i:nth-child(2) {
  background: var(--coral);
}
.avs i:nth-child(3) {
  background: #5a7d70;
}
.tag.s-add {
  background: transparent;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px #b9c6bd;
}
.company {
  /* Tres empresas por ciclo. Cada una muestra primero el perfil y después el crédito. */
  --b: 16.5s;
  --w: calc(var(--b) / 3);
  text-align: center;
  padding: clamp(80px, 10vw, 128px) 24px 0;
}
.biz {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
  align-items: center;
  gap: 18px;
  width: min(900px, 100%);
  margin: 48px auto 0;
  text-align: left;
}
/*
 * Controles sin JavaScript: radios que eligen empresa, pestaña y etapa. Van dentro de su
 * etiqueta para que el foco quede donde se tocó.
 */
.biz-r,
.gm-r,
.st {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
/* Los de la bandeja tienen varias etiquetas: fijos, así enfocarlos no desplaza la página. */
.gm-r {
  position: fixed;
  top: 0;
  left: 0;
}
.biz-mail,
.biz-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.biz-mail,
.biz-panes {
  display: grid;
}
.biz-mail {
  padding: 22px;
  color: #5f6368;
  font-size: 14px;
  line-height: 1.55;
}
.biz-slide,
.biz-co {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
}
.biz-co {
  display: grid;
  grid-template-rows: auto 1fr;
}
.biz-pane {
  grid-area: 2 / 1;
}
.biz-pane.cr {
  opacity: 0;
  visibility: hidden;
}
.biz-slide > strong {
  display: block;
  margin-top: 16px;
  color: #202124;
  font-size: 16px;
}
.biz-slide p {
  margin: 6px 0 0;
}
.biz-from,
.biz-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.biz-from span,
.biz-head span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.biz-from i {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e6eef5;
  color: #1c4fb5;
  font-style: normal;
  font-weight: 650;
}
.biz-head img {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.biz b {
  color: #202124;
  font-weight: 650;
}
.biz small {
  color: var(--ink-3);
  font-size: 12.5px;
}
.biz mark {
  padding: 1px 3px;
  border-radius: 4px;
  background: #fdefcc;
  color: #5c3e00;
}
.biz-arrow {
  width: 26px;
  height: 26px;
  color: var(--coral);
  animation: nudge 1.6s ease-in-out infinite;
}
.biz-card {
  position: relative;
  overflow: hidden;
  padding: 0 22px 20px;
  box-shadow: 0 30px 60px -40px rgb(18 51 47 / 0.5);
}
.biz-load {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  animation: biz-load var(--w) infinite both;
}
.biz-tabs {
  display: flex;
  gap: 22px;
  margin: 0 -22px 16px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 600;
}
.biz-tabs label {
  padding: 15px 0 13px;
  cursor: pointer;
}
.biz-tabs label:hover {
  color: var(--ink);
}
.t-perfil {
  animation: tab-on var(--w) infinite both;
}
.t-credito {
  animation: tab-off var(--w) infinite both;
}
.biz-pane dl {
  margin: 14px 0 0;
}
.biz-pane dl div {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.biz-pane dt,
.cr-block > small {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.biz-pane dd {
  margin: 2px 0 0;
  color: #202124;
  font-size: 14px;
}
.biz-ok,
.cr-pill,
.cr-check em {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 99px;
  background: #d7f1e0;
  color: #106039;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 650;
}
.c1,
.m1 {
  animation: co-1 var(--b) infinite both;
}
.c2,
.m2 {
  animation: co-2 var(--b) infinite both;
}
.c3,
.m3 {
  animation: co-3 var(--b) infinite both;
}
.pf {
  animation: pane-on var(--w) infinite both;
}
.biz-pane.cr {
  animation: pane-off var(--w) infinite both;
}
/* Historial crediticio: situación actual, 24 meses y cheques, de un vistazo. */
.cr-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 13.5px;
}
.cr-pill {
  padding: 4px 11px;
  font-size: 13px;
}
.cr-pill.q2,
.cr-check .q2 {
  background: #fdefcc;
  color: #7a5200;
}
.cr-pill.q3,
.cr-check .q3 {
  background: #fde2de;
  color: #a3281c;
}
.cr-pill.q0 {
  background: #e8ebe9;
  color: #44524b;
}
.cr-block {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.cr-block > small {
  margin-bottom: 8px;
}
.cr-months {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
}
.biz-card .cr-months {
  animation: cr-reveal var(--w) infinite both;
}
.cr-months i {
  height: 18px;
  border-radius: 3px;
}
i.q1 {
  background: #b9e3c8;
}
i.q2 {
  background: #f4d27a;
}
i.q3 {
  background: #ee9d93;
}
i.q0 {
  background: #dfe4e1;
}
.cr-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 12px;
}
.cr-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.cr-legend i:not(:first-child) {
  margin-left: 10px;
}
.cr-none {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
}
.cr-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  color: var(--ink-2);
  font-size: 13px;
}
.cr-check b {
  font-weight: 600;
}
/* Selector de empresa. */
.biz-pick {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.biz-pick label,
.biz-pick button,
.gm-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  cursor: pointer;
}
.biz-pick label:hover,
.biz-pick button:hover,
.gm-reset:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.biz-pick img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.biz-pick button,
.gm-reset {
  padding: 8px 14px;
}
.biz-pick button {
  display: none;
}
.biz-pick .k1 {
  animation: pick-1 var(--b) infinite both;
}
.biz-pick .k2 {
  animation: pick-2 var(--b) infinite both;
}
.biz-pick .k3 {
  animation: pick-3 var(--b) infinite both;
}
/* Al pasar por el ejemplo la rotación espera. */
.biz:hover :is(.biz-co, .biz-slide, .biz-pane, .biz-tabs label, .biz-load, .cr-months, .biz-pick label) {
  animation-play-state: paused;
}
/* Empresa elegida: deja de rotar y queda esa. */
.biz:has(.biz-pick :checked) :is(.biz-slide, .biz-co, .biz-load, .biz-pick label) {
  animation: none;
}
.biz:has(#co-1:checked) :is(.m1, .c1),
.biz:has(#co-2:checked) :is(.m2, .c2),
.biz:has(#co-3:checked) :is(.m3, .c3) {
  opacity: 1;
  visibility: visible;
}
.biz-pick label:has(:checked) {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
/* Pestaña elegida: deja de alternar. */
.biz:has(.biz-tabs :checked) :is(.biz-pane, .biz-tabs label, .cr-months) {
  animation: none;
}
.biz:has(#tab-p:checked) .pf,
.biz:has(#tab-c:checked) .biz-pane.cr {
  opacity: 1;
  visibility: visible;
}
.biz:has(#tab-p:checked) .biz-pane.cr,
.biz:has(#tab-c:checked) .pf {
  opacity: 0;
  visibility: hidden;
}
.biz-tabs label:has(:checked) {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.biz:has(.biz-r:checked) .biz-pick button {
  display: inline-flex;
}
.biz label:has(:focus-visible) {
  outline: 3px solid #487c48;
  outline-offset: 3px;
}
@keyframes nudge {
  50% {
    translate: 5px 0;
  }
}
@keyframes co-1 {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateY(10px);
  }
  1.6%,
  31.4% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  33.3% {
    opacity: 0;
    visibility: visible;
    transform: translateY(-8px);
  }
  33.4%,
  100% {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }
}
@keyframes co-2 {
  0%,
  33.2% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  33.3% {
    opacity: 0;
    visibility: visible;
    transform: translateY(10px);
  }
  34.9%,
  64.7% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  66.6% {
    opacity: 0;
    visibility: visible;
    transform: translateY(-8px);
  }
  66.7%,
  100% {
    opacity: 0;
    visibility: hidden;
    transform: none;
  }
}
@keyframes co-3 {
  0%,
  66.5% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  66.6% {
    opacity: 0;
    visibility: visible;
    transform: translateY(10px);
  }
  68.2%,
  98% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  100% {
    opacity: 0;
    visibility: visible;
    transform: translateY(-8px);
  }
}
@keyframes pane-on {
  0%,
  46%,
  100% {
    opacity: 1;
    visibility: visible;
  }
  49%,
  97% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes pane-off {
  0%,
  48%,
  100% {
    opacity: 0;
    visibility: hidden;
  }
  51%,
  97% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes tab-on {
  0%,
  47%,
  100% {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--ink);
  }
  49%,
  98% {
    color: var(--ink-3);
    box-shadow: inset 0 -2px 0 transparent;
  }
}
@keyframes tab-off {
  0%,
  47%,
  100% {
    color: var(--ink-3);
    box-shadow: inset 0 -2px 0 transparent;
  }
  49%,
  98% {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--ink);
  }
}
/* Una barra de carga al llegar cada correo. */
@keyframes biz-load {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  7% {
    opacity: 1;
    transform: scaleX(1);
  }
  11%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}
@keyframes cr-reveal {
  0%,
  50% {
    clip-path: inset(0 100% 0 0);
  }
  66%,
  100% {
    clip-path: inset(0);
  }
}
@keyframes pick-1 {
  0%,
  31%,
  100% {
    border-color: var(--ink);
    color: var(--ink);
  }
  33.3%,
  98% {
    border-color: var(--line);
    color: var(--ink-2);
  }
}
@keyframes pick-2 {
  0%,
  31%,
  66.6%,
  100% {
    border-color: var(--line);
    color: var(--ink-2);
  }
  33.3%,
  64.6% {
    border-color: var(--ink);
    color: var(--ink);
  }
}
@keyframes pick-3 {
  0%,
  64.6%,
  100% {
    border-color: var(--line);
    color: var(--ink-2);
  }
  66.6%,
  98% {
    border-color: var(--ink);
    color: var(--ink);
  }
}
.privacy {
  position: relative;
  overflow: hidden;
  width: min(1120px, calc(100% - 48px));
  margin: clamp(80px, 10vw, 128px) auto 0;
  padding: clamp(46px, 6vw, 76px) clamp(22px, 4vw, 56px);
  border-radius: 28px;
  background:
    repeating-radial-gradient(circle at 50% 0, transparent 0 89px, rgb(255 255 255 / 0.055) 89px 90px),
    var(--ink);
  color: #eef4f0;
  text-align: center;
}
.privacy .kicker {
  color: #9cc4b2;
}
.privacy .sub {
  color: #c5d8cf;
}
.privacy ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 46px 0 0;
  padding: 0;
}
.privacy li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.privacy li svg {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.09);
  color: #f7a48e;
}
.privacy strong {
  font-size: 16px;
  letter-spacing: -0.02em;
}
.privacy li span {
  max-width: 220px;
  font-size: 14px;
  line-height: 1.55;
  color: #c5d8cf;
  text-wrap: pretty;
}
.more {
  display: inline-block;
  margin-top: 42px;
  font-size: 14.5px;
}
.plans {
  scroll-margin-top: -40px;
}
.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: min(820px, 100%);
  margin: 52px auto 0;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 38px 30px 34px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}
.tier.pro {
  border-color: var(--ink);
  box-shadow:
    0 0 0 1px var(--ink),
    0 34px 60px -40px rgb(18 51 47 / 0.55);
}
.tier-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  translate: -50%;
  margin: 0;
  padding: 5px 13px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tier h3 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
}
.price b {
  font-size: 48px;
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 1;
}
.price span {
  font-size: 13.5px;
  color: var(--ink-3);
}
.for {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--ink-2);
}
.tier .cta {
  align-self: stretch;
  justify-content: center;
  margin-top: 24px;
}
.tiers-note {
  max-width: 680px;
  margin: 26px auto 0;
  color: var(--ink-3);
  font-size: 13.5px;
}
.cta.ghost {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.cta.ghost:hover {
  background: #f2f6ee;
}
.tier ul {
  list-style: none;
  align-self: stretch;
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}
.tier li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
}
.tier li svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ok);
}
.tier li strong {
  color: var(--ink);
  font-weight: 650;
}
.tier li.no {
  color: var(--ink-3);
}
.tier li.no svg {
  color: #a7b3ac;
}
.closing {
  padding-bottom: clamp(80px, 10vw, 120px);
}
.target {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 28px;
}
.target i {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(23 63 59 / 0.25);
  border-radius: 50%;
  animation: target 3.2s ease-out infinite;
}
.target i:nth-child(2) {
  inset: 14px;
  animation-delay: 0.25s;
}
.target i:nth-child(3) {
  inset: 28px;
  animation-delay: 0.5s;
}
.target b {
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  background: var(--coral);
}
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: 30px;
  padding: 14px 30px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 16px 30px -16px rgb(18 51 47 / 0.75);
  transition:
    background 0.16s,
    transform 0.16s;
}
.cta:hover {
  background: #1b4a44;
  transform: translateY(-1px);
}

/* Leyenda de la demostración: cada píldora se enciende mientras ocurre su escena. */
/* Siempre en una línea: si no entra, se desliza de costado. */
.scenes {
  list-style: none;
  display: flex;
  gap: 8px;
  max-width: 1120px;
  margin: 30px auto 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.scenes::-webkit-scrollbar {
  display: none;
}
/* Márgenes automáticos en los extremos: centrada cuando entra y desplazable entera cuando no. */
.scenes li:first-child {
  margin-left: auto;
}
.scenes li:last-child {
  margin-right: auto;
}
.scenes li {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 560;
  animation: var(--t) infinite both;
}
.scenes svg {
  width: 16px;
  height: 16px;
}
.scenes .sc-open {
  animation-name: sc-open;
}
.scenes .sc-hist {
  animation-name: sc-hist;
}
.scenes .sc-tag {
  animation-name: sc-tag;
}
.scenes .sc-pipe {
  animation-name: sc-pipe;
}
.scenes .sc-co {
  animation-name: sc-co;
}
.scenes .sc-click {
  animation-name: sc-click;
}
.stage-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

/*
 * Demostración de Gmail. Sin JavaScript: la política de seguridad del sitio no admite scripts.
 * Las medidas internas usan --u, la unidad del boceto (1120 unidades de ancho en escritorio),
 * para que la bandeja escale completa con el ancho disponible.
 * --bx, --tx y --mx ubican el check, la etiqueta y el menú que recorre el cursor.
 */
.stage {
  --u: calc(100cqw / 1120);
  --bx: 90;
  --tx: 352;
  --mx: 282;
  --ex: 640;
  container-type: inline-size;
  position: relative;
  width: min(1120px, 100%);
  margin: clamp(40px, 6vw, 68px) auto 0;
}
/* Navegadores sin unidades de contenedor: misma escala calculada desde el ancho de la ventana. */
@supports not (width: 1cqw) {
  .stage {
    --u: calc((min(100vw, 1168px) - 48px) / 1120);
  }
}
.gm {
  overflow: hidden;
  border-radius: calc(var(--u) * 14);
  background: #f6f8fc;
  color: #202124;
  font-size: calc(var(--u) * 14);
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgb(18 51 47 / 0.12),
    0 44px 90px -44px rgb(18 51 47 / 0.55),
    0 18px 36px -24px rgb(18 51 47 / 0.3);
  user-select: none;
  pointer-events: none;
}
.gm svg {
  display: block;
  flex: none;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
}
.gm i,
.gm em {
  font-style: normal;
}
.gm-chrome {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 7);
  height: calc(var(--u) * 38);
  padding: 0 calc(var(--u) * 15);
  background: #e6ebee;
}
.gm-chrome i {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: 50%;
  background: #c5ced3;
}
.gm-chrome span {
  position: absolute;
  left: 50%;
  translate: -50%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 16);
  border-radius: 99px;
  background: #fff;
  color: #5f6368;
  font-size: calc(var(--u) * 12);
}
.gm-chrome svg {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
}
/* La extensión, fijada en la barra del navegador. */
.gm-exts {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 9);
  margin-left: auto;
  color: #5f6368;
}
.gm-exts img {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
}
.gm-exts svg {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}
.gm-top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  height: calc(var(--u) * 64);
  padding: 0 calc(var(--u) * 18) 0 calc(var(--u) * 20);
  color: #5f6368;
}
.gm-logo {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  width: calc(var(--u) * 152);
  font-size: calc(var(--u) * 22);
}
.gm-logo svg {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  color: #ea4335;
}
.gm-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  max-width: calc(var(--u) * 620);
  height: calc(var(--u) * 46);
  margin-right: auto;
  padding: 0 calc(var(--u) * 18);
  border-radius: 99px;
  background: #e9eef6;
  font-size: calc(var(--u) * 16);
}
.gm-search span {
  flex: 1;
  overflow: hidden;
}
.gm-ext {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 7);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 11) 0 calc(var(--u) * 8);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 1px #d5e1d9;
  color: var(--ink);
  font-size: calc(var(--u) * 11.5);
  font-weight: 680;
  letter-spacing: 0.05em;
}
.gm-ext img {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}
.gm-ext i,
.pop-live em i {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: #1ea362;
  animation: live 1.6s ease-in-out infinite;
}
.gm-me {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.gm-body {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--u) * 208) minmax(0, 1fr);
}
.gm-side {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--u) * 6);
}
.gm-compose {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  width: calc(var(--u) * 144);
  height: calc(var(--u) * 56);
  margin: 0 0 calc(var(--u) * 16) calc(var(--u) * 8);
  padding-left: calc(var(--u) * 18);
  border-radius: calc(var(--u) * 16);
  background: #c2e7ff;
  color: #001d35;
  font-weight: 560;
}
.gm-nav {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  height: calc(var(--u) * 32);
  margin-right: calc(var(--u) * 14);
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 26);
  border-radius: 0 99px 99px 0;
}
.gm-nav svg {
  color: #444746;
}
.gm-nav.on {
  background: #d3e3fd;
  color: #001d35;
  font-weight: 700;
}
.gm-nav.lab svg {
  color: var(--tc);
}
.gm-count {
  margin-left: auto;
  font-size: calc(var(--u) * 12);
}
.gm-sec {
  margin: calc(var(--u) * 18) 0 calc(var(--u) * 6) calc(var(--u) * 26);
  color: #444746;
  font-size: calc(var(--u) * 15);
  font-weight: 560;
}
.gm-main {
  overflow: hidden;
  min-width: 0;
  margin: 0 calc(var(--u) * 16) calc(var(--u) * 16) 0;
  border-radius: calc(var(--u) * 16);
  background: #fff;
}
/* La lista va primero en el HTML para que sus etapas alimenten los contadores del embudo. */
.gm-loop {
  display: flex;
  flex-direction: column;
  counter-reset: nuevo 5 prop 3 nego 1 gan 0;
  animation: gm-seam var(--t) infinite both;
}
.swap {
  display: inline-grid;
  justify-items: center;
}
.swap > * {
  grid-area: 1 / 1;
}
.swap .now {
  opacity: 0;
}
.gm b {
  font-weight: inherit;
}

/* Etapas: mismo color en etiquetas, embudo y menú. */
.s-nuevo,
#gm-live:checked ~ .stage .tagc:has(.s-nuevo:checked) > .tag {
  --tb: #e1eafd;
  --tc: #1c4fb5;
}
.s-prop,
#gm-live:checked ~ .stage .tagc:has(.s-prop:checked) > .tag {
  --tb: #fdefcc;
  --tc: #7a5200;
}
.s-nego,
#gm-live:checked ~ .stage .tagc:has(.s-nego:checked) > .tag {
  --tb: #ece3fd;
  --tc: #5a36b3;
}
.s-gan,
#gm-live:checked ~ .stage .tagc:has(.s-gan:checked) > .tag {
  --tb: #d7f1e0;
  --tc: #106039;
}
.s-perd,
#gm-live:checked ~ .stage .tagc:has(.s-perd:checked) > .tag {
  --tb: #fde2de;
  --tc: #a3281c;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 9);
  border-radius: calc(var(--u) * 6);
  background: var(--tb);
  color: var(--tc);
  font-size: calc(var(--u) * 12);
  font-weight: 600;
  white-space: nowrap;
}
.gm .tag {
  padding-right: calc(var(--u) * 4);
}
.gm .tag svg {
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
}

/* Embudo */
.gm-pipe {
  order: -2;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 8);
}
.gm-pipe-t {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 7);
  color: var(--ink);
  font-size: calc(var(--u) * 13);
  font-weight: 650;
}
.gm-pipe-t img {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}
.gm-segs {
  flex: 1;
  display: flex;
  min-width: 0;
}
.seg {
  --a: calc(var(--u) * 11);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  min-width: 0;
  height: calc(var(--u) * 34);
  margin-left: calc(var(--u) * -6);
  padding: 0 calc(var(--u) * 16);
  background: var(--tb);
  color: var(--tc);
  font-size: calc(var(--u) * 12.5);
  font-weight: 600;
  clip-path: polygon(
    0 0,
    calc(100% - var(--a)) 0,
    100% 50%,
    calc(100% - var(--a)) 100%,
    0 100%,
    var(--a) 50%
  );
}
.seg:first-child {
  margin-left: 0;
  border-radius: calc(var(--u) * 8) 0 0 calc(var(--u) * 8);
  clip-path: polygon(0 0, calc(100% - var(--a)) 0, 100% 50%, calc(100% - var(--a)) 100%, 0 100%);
}
.seg:last-child {
  border-radius: 0 calc(var(--u) * 8) calc(var(--u) * 8) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--a) 50%);
}
.seg > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.num {
  min-width: calc(var(--u) * 22);
  padding: calc(var(--u) * 2) calc(var(--u) * 6);
  border-radius: 99px;
  background: rgb(255 255 255 / 0.8);
  font-size: calc(var(--u) * 12);
  font-weight: 700;
  text-align: center;
}
.bump {
  animation: gm-bump var(--t) 13.5s infinite both;
}
.c-pipe .was {
  animation: n-out var(--t) infinite both;
}
.c-pipe .now {
  animation: n-in var(--t) infinite both;
}

/* Barra de la lista y filas */
.gm-tools {
  order: -1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  color: #5f6368;
  font-size: calc(var(--u) * 12);
}
.gm-tools .tiny {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  margin-left: calc(var(--u) * -16);
}
.gm-pager {
  margin-left: auto;
}
.box {
  display: block;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  border: calc(var(--u) * 1.7) solid #9aa0a6;
  border-radius: calc(var(--u) * 3);
}
.gm-list {
  position: relative;
  overflow: hidden;
  height: calc(var(--u) * 340);
}
.row {
  --rowbg: #f2f6fc;
  position: relative;
  display: grid;
  grid-template-columns:
    calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 190) calc(var(--u) * 150)
    minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--u) * 12);
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  background-color: var(--rowbg);
  box-shadow: inset 0 -1px 0 #e3e8f0;
}
.row.unread {
  --rowbg: #fff;
}
.row.unread .name,
.row.unread .txt b,
.row.unread .date {
  color: #202124;
  font-weight: 700;
}
.row:nth-child(1) {
  z-index: 10;
}
.row:nth-child(2) {
  z-index: 9;
}
.row:nth-child(3) {
  z-index: 8;
}
.row:nth-child(4) {
  z-index: 7;
}
.row:nth-child(5) {
  z-index: 6;
}
.row:nth-child(6) {
  z-index: 5;
}
.row:nth-child(7) {
  z-index: 4;
}
.row:nth-child(8) {
  z-index: 3;
}
.row:nth-child(9) {
  z-index: 2;
}
.row:nth-child(10) {
  z-index: 1;
}
.row .star {
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 19);
  color: #c4c7c5;
}
.who {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  min-width: 0;
}
.name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
}
.ck svg {
  grid-area: 1 / 1;
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 19);
}
.one {
  color: #7d8b86;
}
.two {
  color: var(--ok);
}
.ck.flip .two {
  opacity: 0;
}
.tagc {
  display: grid;
  justify-items: start;
}
.tagc > * {
  grid-area: 1 / 1;
}
.tagc .now {
  opacity: 0;
}
.txt {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  color: #5f6368;
}
.txt b {
  color: #202124;
}
.date {
  min-width: calc(var(--u) * 40);
  color: #5f6368;
  font-size: calc(var(--u) * 12);
  text-align: right;
}

/* Lo que sucede en cada fila */
.r-a {
  --fl: #d9f2e2;
  animation: gm-flash var(--t) 1s infinite both;
}
.r-a .one {
  animation: ck-out-a var(--t) infinite both;
}
.r-a .two {
  animation: ck-in-a var(--t) infinite both;
}
.r-b {
  animation: row-hover-b var(--t) infinite both;
}
.r-c {
  --fl: #fdf0cf;
  animation:
    row-hover-c var(--t) infinite both,
    gm-flash var(--t) 13s infinite both;
}
.r-c .was {
  animation: tag-out-c var(--t) infinite both;
}
.r-c .now {
  animation: tag-in-c var(--t) infinite both;
}
.r-d {
  --fl: #d9f2e2;
  animation: gm-flash var(--t) 15.5s infinite both;
}
.r-d .one {
  animation: ck-out-d var(--t) infinite both;
}
.r-d .two {
  animation: ck-in-d var(--t) infinite both;
}
.r-f {
  --fl: #e1eafd;
  animation: gm-flash var(--t) 21s infinite both;
}

/* Tarjetas emergentes */
.pop,
.gm-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% - var(--u) * 4);
  border-radius: calc(var(--u) * 12);
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(18 51 47 / 0.09),
    0 calc(var(--u) * 12) calc(var(--u) * 32) rgb(18 51 47 / 0.24);
  opacity: 0;
}
.pop {
  left: calc(var(--u) * (var(--bx) - 26));
  width: calc(var(--u) * 304);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  transform-origin: calc(var(--u) * 26) 0;
}
.pop::before {
  content: '';
  position: absolute;
  top: calc(var(--u) * -5);
  left: calc(var(--u) * 21);
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  background: #fff;
  box-shadow: -1px -1px 0 rgb(18 51 47 / 0.09);
  rotate: 45deg;
}
.pop u {
  text-decoration: none;
  color: #1a56c4;
}
.pop-live {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 11);
}
.pop-a {
  animation: gm-pop var(--t) 1.15s infinite both;
}
.pop-b {
  width: calc(var(--u) * 350);
  animation: pop-b var(--t) infinite both;
}
.pop-f {
  animation: gm-pop var(--t) 21.1s infinite both;
}
.pop-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  border-radius: 50%;
  background: #d9f2e2;
  color: var(--ok);
}
.pop-ic.k-click {
  background: #e1eafd;
  color: #1a56c4;
}
.gm .pop-ic svg {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}
.pop-t {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  min-width: 0;
  color: #444746;
  font-size: calc(var(--u) * 12.5);
}
.pop-t b {
  color: #202124;
  font-size: calc(var(--u) * 14);
  font-weight: 650;
}
.pop-t em {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 4);
  color: var(--ok);
  font-size: calc(var(--u) * 12);
  font-weight: 600;
}
.pop-f .pop-t em {
  color: #1a56c4;
}
.pop-f em i {
  background: #1a56c4;
}
.pop-h {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 10);
  padding-bottom: calc(var(--u) * 9);
  margin-bottom: calc(var(--u) * 5);
  border-bottom: 1px solid #e8ecef;
  color: #5f6368;
  font-size: calc(var(--u) * 12);
}
.pop-h b {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  color: #202124;
  font-size: calc(var(--u) * 14);
  font-weight: 650;
}
.pop-h small {
  color: #5f6368;
  font-size: calc(var(--u) * 11.5);
  font-weight: 400;
}
.pop-h i {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 8);
  background: var(--ink);
  color: #fff;
  font-size: calc(var(--u) * 14);
  font-weight: 650;
}
.pop-l {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  height: calc(var(--u) * 26);
  color: #202124;
  font-size: calc(var(--u) * 12.5);
}
.gm .pop-l svg {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  color: var(--ok);
}
.gm .k-click svg {
  color: #1a56c4;
}
.gm .k-sent svg {
  color: #7d8b86;
}
.pop-l em {
  margin-left: auto;
  color: #5f6368;
  font-size: calc(var(--u) * 12);
}
.gm-menu {
  left: calc(var(--u) * var(--mx));
  display: flex;
  flex-direction: column;
  width: calc(var(--u) * 204);
  padding: calc(var(--u) * 6);
  transform-origin: calc(var(--u) * 40) 0;
  animation: menu-c var(--t) infinite both;
}
.mh {
  display: flex;
  align-items: center;
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  color: #5f6368;
  font-size: calc(var(--u) * 11);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mo {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 10);
  border-radius: calc(var(--u) * 7);
  font-size: calc(var(--u) * 13);
}
.mo i {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--tc);
}
.gm .mo svg {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  margin-left: auto;
  color: #5f6368;
}
.mo.hit {
  animation: opt-c var(--t) infinite both;
}
.gm-snack {
  position: absolute;
  z-index: 30;
  left: calc(var(--u) * 16);
  bottom: calc(var(--u) * 16);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  max-width: calc(100% - var(--u) * 32);
  padding: calc(var(--u) * 13) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 8);
  background: #1f2322;
  color: #f1f3f4;
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgb(0 0 0 / 0.3);
  opacity: 0;
  animation: gm-snack var(--t) 15.75s infinite both;
}
.gm-snack svg {
  color: #6ddc9c;
}
.gm-snack span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-snack b {
  font-weight: 650;
}
.gm-snack em {
  margin-left: calc(var(--u) * 12);
  color: #8ab4f8;
  font-weight: 600;
}
.gm-cur {
  position: absolute;
  z-index: 20;
  left: calc(var(--u) * -4.6);
  top: calc(var(--u) * -2.3);
  opacity: 0;
  animation: cur-move var(--t) cubic-bezier(0.5, 0, 0.2, 1) infinite both;
}
.gm .gm-cur svg {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  transform-origin: 20% 10%;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35));
  animation: cur-click var(--t) infinite both;
}
.gm-cur::after {
  content: '';
  position: absolute;
  left: calc(var(--u) * -11.4);
  top: calc(var(--u) * -13.7);
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  border-radius: 50%;
  background: rgb(18 51 47 / 0.22);
  opacity: 0;
  animation: cur-ring var(--t) infinite both;
}

/* Logo de la empresa en las tarjetas emergentes. */
.pop img {
  flex: none;
  align-self: center;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: calc(var(--u) * 9);
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px #e3e8f0;
}
/* En los avisos el logo va adelante y el estado queda como insignia. */
.pop-logo {
  position: relative;
  flex: none;
}
.pop-logo img {
  display: block;
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: calc(var(--u) * 11);
}
.pop-logo .pop-ic {
  position: absolute;
  right: calc(var(--u) * -6);
  bottom: calc(var(--u) * -5);
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  box-shadow: 0 0 0 calc(var(--u) * 2) #fff;
}
.gm .pop-logo .pop-ic svg {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
}
.pop-co {
  gap: calc(var(--u) * 14);
}
.pop-ic.k-sent {
  background: #eceff1;
  color: #7d8b86;
}
.pop-s .pop-t em {
  color: #5f6368;
  font-weight: 500;
}

/* Menú de etapas de cada fila: sólo se usa en la demo interactiva. */
.tagc {
  position: relative;
}
.tag-menu {
  position: absolute;
  z-index: 6;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  width: calc(var(--u) * 190);
  padding: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 12);
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(18 51 47 / 0.09),
    0 calc(var(--u) * 12) calc(var(--u) * 32) rgb(18 51 47 / 0.24);
  color: #202124;
  opacity: 0;
  visibility: hidden;
}
.tag-menu .mh {
  height: calc(var(--u) * 22);
}
.tag-menu .mo {
  height: calc(var(--u) * 24);
  font-size: calc(var(--u) * 12.5);
  cursor: pointer;
}
.tag-menu .mo:hover {
  background: #edf1f5;
}
.st:checked + i {
  outline: calc(var(--u) * 2) solid var(--tc);
  outline-offset: calc(var(--u) * 2);
}
/*
 * Desde la quinta fila visible el menú abre hacia arriba. «of» cuenta sólo las filas que el
 * filtro del embudo deja a la vista.
 */
.row:nth-child(n + 5 of .demo:not(:has(.gm-f:checked)) .row, #gm-f-nuevo:checked ~ .stage .row:has(.st.s-nuevo:checked), #gm-f-prop:checked ~ .stage .row:has(.st.s-prop:checked), #gm-f-nego:checked ~ .stage .row:has(.st.s-nego:checked), #gm-f-gan:checked ~ .stage .row:has(.st.s-gan:checked)) .tag-menu {
  top: auto;
  bottom: 100%;
}
/* Cada etapa elegida suma a su tramo del embudo. */
.st.s-nuevo:checked {
  counter-increment: nuevo;
}
.st.s-prop:checked {
  counter-increment: prop;
}
.st.s-nego:checked {
  counter-increment: nego;
}
.st.s-gan:checked {
  counter-increment: gan;
}

/* Tarjeta de empresa dentro de la bandeja. */
.gm-co {
  position: absolute;
  z-index: 25;
  top: calc(var(--u) * 8);
  right: calc(var(--u) * 8);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: calc(var(--u) * 340);
  max-width: calc(100% - var(--u) * 16);
  padding: calc(var(--u) * 14) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 14);
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(18 51 47 / 0.09),
    0 calc(var(--u) * 16) calc(var(--u) * 40) rgb(18 51 47 / 0.28);
  color: #444746;
  font-size: calc(var(--u) * 12);
  line-height: 1.3;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
}
.gm-co.k1 {
  animation: co-show var(--t) infinite both;
}
.gm-co .biz-head {
  gap: calc(var(--u) * 10);
}
.gm-co .biz-head img {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  border-radius: calc(var(--u) * 10);
  box-shadow: 0 0 0 1px #e3e8f0;
}
.gm-co b {
  color: #202124;
  font-weight: 650;
}
.gm-co .biz-head b {
  font-size: calc(var(--u) * 13.5);
}
.gm-co small {
  color: #5f6368;
  font-size: calc(var(--u) * 11.5);
}
.co-tabs {
  display: flex;
  gap: calc(var(--u) * 16);
  margin-top: calc(var(--u) * 8);
  border-bottom: 1px solid #e8ecef;
  color: #5f6368;
  font-weight: 600;
}
.co-tabs label {
  padding: calc(var(--u) * 7) 0;
  cursor: pointer;
}
.k1 .co-tabs label:nth-child(1) {
  animation: co-tab-1 var(--t) infinite both;
}
.k1 .co-tabs label:nth-child(2) {
  animation: co-tab-2 var(--t) infinite both;
}
.co-tabs .co-x {
  margin-left: auto;
  padding: calc(var(--u) * 3) calc(var(--u) * 7);
  font-size: calc(var(--u) * 17);
  font-weight: 400;
  line-height: 1;
}
.co-pf,
.co-cr {
  grid-area: 3 / 1;
}
.co-cr {
  opacity: 0;
  visibility: hidden;
}
.k1 .co-pf {
  animation: co-pf var(--t) infinite both;
}
.k1 .co-cr {
  animation: co-cr var(--t) infinite both;
}
.k1 .cr-months {
  animation: co-months var(--t) infinite both;
}
.gm-co dl {
  margin: calc(var(--u) * 6) 0 0;
}
.gm-co dl div {
  padding: calc(var(--u) * 6) 0;
}
.gm-co dl div + div {
  border-top: 1px solid #e8ecef;
}
.gm-co dt,
.gm-co .cr-block > small {
  display: block;
  color: #5f6368;
  font-size: calc(var(--u) * 10);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.gm-co dd {
  margin: calc(var(--u) * 2) 0 0;
  color: #202124;
  font-size: calc(var(--u) * 12.5);
}
.gm-co .biz-ok {
  padding: 0 calc(var(--u) * 8);
  font-size: calc(var(--u) * 11);
}
.gm-co .cr-now {
  gap: calc(var(--u) * 6) calc(var(--u) * 10);
  margin-top: calc(var(--u) * 11);
  color: #444746;
  font-size: calc(var(--u) * 12);
}
.gm-co .cr-pill {
  padding: calc(var(--u) * 3) calc(var(--u) * 9);
  font-size: calc(var(--u) * 11.5);
}
.gm-co .cr-block {
  margin-top: calc(var(--u) * 9);
  padding-top: calc(var(--u) * 8);
  border-top-color: #e8ecef;
}
.gm-co .cr-block > small {
  margin-bottom: calc(var(--u) * 6);
}
.gm-co .cr-months {
  gap: calc(var(--u) * 2);
}
.gm-co .cr-months i {
  height: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 2.5);
}
.gm-co .cr-legend {
  gap: calc(var(--u) * 5);
  margin-top: calc(var(--u) * 6);
  color: #5f6368;
  font-size: calc(var(--u) * 11);
}
.gm-co .cr-legend i {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
}
.gm-co .cr-none,
.gm-co .cr-check {
  color: #444746;
  font-size: calc(var(--u) * 12);
}

/* Invitación a probarla: toda la bandeja es el botón. */
.gm-try {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: end center;
  border-radius: calc(var(--u) * 14);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gm-try span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px 9px 13px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 620;
  box-shadow: 0 12px 26px -12px rgb(18 51 47 / 0.75);
  translate: 0 50%;
  transition:
    background 0.16s,
    scale 0.16s;
}
.gm-try span::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  animation: try-pulse 1.8s ease-out infinite;
}
.gm-try:hover span {
  background: #1b4a44;
  scale: 1.05;
}
.gm-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  max-width: 900px;
  margin: 30px auto 0;
  color: var(--ink-2);
  font-size: 14px;
}

/*
 * Demo interactiva. Al tocar la bandeja se marca #gm-live: la animación se detiene y los
 * checks, las etiquetas y las empresas responden al cursor. Todo con CSS: el sitio no admite scripts.
 */
#gm-live:checked ~ .gm-bar {
  display: flex;
}
#gm-live:checked ~ .scenes,
#gm-live:checked ~ .stage .gm-try,
#gm-live:checked ~ .stage .tagc > .now,
#gm-live:checked ~ .stage .num > b {
  display: none;
}
#gm-live:checked ~ .stage .gm {
  pointer-events: auto;
  box-shadow:
    0 0 0 2px var(--ink),
    0 44px 90px -44px rgb(18 51 47 / 0.55),
    0 18px 36px -24px rgb(18 51 47 / 0.3);
}
#gm-live:checked ~ .stage .gm :is(*, *::before, *::after) {
  animation: none;
}
#gm-live:checked ~ .stage :is(.pop, .gm-menu, .gm-snack, .gm-cur) {
  pointer-events: none;
}
/* Los correos que la animación abre quedan abiertos. */
#gm-live:checked ~ .stage .ck.flip .one {
  opacity: 0;
}
#gm-live:checked ~ .stage .ck.flip .two {
  opacity: 1;
}
/* Checks: la tarjeta aparece al pasar por encima. */
#gm-live:checked ~ .stage .ck {
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.14s;
}
#gm-live:checked ~ .stage .ck:hover {
  background-color: #dff3e7;
}
#gm-live:checked ~ .stage .row:hover {
  z-index: 20;
  box-shadow:
    inset 1px 0 0 #dadce0,
    inset -1px 0 0 #dadce0,
    0 1px 2px 0 rgb(60 64 67 / 0.3),
    0 1px 3px 1px rgb(60 64 67 / 0.15);
}
#gm-live:checked ~ .stage .pop {
  transition:
    opacity 0.14s,
    transform 0.14s;
  transform: translateY(5px) scale(0.97);
}
#gm-live:checked ~ .stage .row:has(.ck:hover) > .pop {
  opacity: 1;
  transform: none;
}
#gm-live:checked ~ .stage .row:nth-child(n + 7 of .demo:not(:has(.gm-f:checked)) .row, #gm-f-nuevo:checked ~ .stage .row:has(.st.s-nuevo:checked), #gm-f-prop:checked ~ .stage .row:has(.st.s-prop:checked), #gm-f-nego:checked ~ .stage .row:has(.st.s-nego:checked), #gm-f-gan:checked ~ .stage .row:has(.st.s-gan:checked)) > .pop {
  top: auto;
  bottom: calc(100% - var(--u) * 4);
  transform-origin: calc(var(--u) * 26) 100%;
}
#gm-live:checked ~ .stage .row:nth-child(n + 7 of .demo:not(:has(.gm-f:checked)) .row, #gm-f-nuevo:checked ~ .stage .row:has(.st.s-nuevo:checked), #gm-f-prop:checked ~ .stage .row:has(.st.s-prop:checked), #gm-f-nego:checked ~ .stage .row:has(.st.s-nego:checked), #gm-f-gan:checked ~ .stage .row:has(.st.s-gan:checked)) > .pop::before {
  top: auto;
  bottom: calc(var(--u) * -5);
  box-shadow: 1px 1px 0 rgb(18 51 47 / 0.09);
}
/* Etiquetas: el menú elige la etapa y el embudo cuenta de nuevo. */
#gm-live:checked ~ .stage .tagc > .tag {
  opacity: 1;
  cursor: pointer;
  transition:
    background-color 0.18s,
    color 0.18s;
}
#gm-live:checked ~ .stage .tagc:hover > .tag {
  box-shadow: 0 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--tc) 30%, transparent);
}
#gm-live:checked ~ .stage .tagc:hover > .tag-menu {
  opacity: 1;
  visibility: visible;
}
#gm-live:checked ~ .stage .tagc > .tag b {
  font-size: 0;
}
#gm-live:checked ~ .stage .tagc > .tag b::after {
  font-size: calc(var(--u) * 12);
}
#gm-live:checked ~ .stage .tagc:has(.s-nuevo:checked) > .tag b::after {
  content: 'Nuevo contacto';
}
#gm-live:checked ~ .stage .tagc:has(.s-prop:checked) > .tag b::after {
  content: 'Propuesta enviada';
}
#gm-live:checked ~ .stage .tagc:has(.s-nego:checked) > .tag b::after {
  content: 'Negociación';
}
#gm-live:checked ~ .stage .tagc:has(.s-gan:checked) > .tag b::after {
  content: 'Ganado';
}
#gm-live:checked ~ .stage .tagc:has(.s-perd:checked) > .tag b::after {
  content: 'Perdido';
}
#gm-live:checked ~ .stage .s-nuevo > .num::after {
  content: counter(nuevo);
}
#gm-live:checked ~ .stage .s-prop > .num::after {
  content: counter(prop);
}
#gm-live:checked ~ .stage .s-nego > .num::after {
  content: counter(nego);
}
#gm-live:checked ~ .stage .s-gan > .num::after {
  content: counter(gan);
}
/* Embudo: cada tramo filtra la lista por su etapa. Se pueden elegir varios. */
#gm-live:checked ~ .stage .seg {
  cursor: pointer;
  transition: opacity 0.16s;
}
#gm-live:checked ~ .stage .seg:hover > span:first-child {
  text-decoration: underline;
}
.gm-f:checked ~ .stage .seg {
  opacity: 0.45;
}
#gm-f-nuevo:checked ~ .stage .seg.s-nuevo,
#gm-f-prop:checked ~ .stage .seg.s-prop,
#gm-f-nego:checked ~ .stage .seg.s-nego,
#gm-f-gan:checked ~ .stage .seg.s-gan {
  opacity: 1;
}
#gm-f-nuevo:checked ~ .stage .seg.s-nuevo .num,
#gm-f-prop:checked ~ .stage .seg.s-prop .num,
#gm-f-nego:checked ~ .stage .seg.s-nego .num,
#gm-f-gan:checked ~ .stage .seg.s-gan .num {
  background: var(--tc);
  color: #fff;
}
/* Las filas fuera del filtro se pliegan sin dejar de contar para el embudo. */
#gm-live:checked ~ .stage .row {
  transition: height 0.2s ease;
}
.gm-f:checked ~ .stage .row {
  overflow: hidden;
  height: 0;
  visibility: hidden;
}
#gm-f-nuevo:checked ~ .stage .row:has(.st.s-nuevo:checked),
#gm-f-prop:checked ~ .stage .row:has(.st.s-prop:checked),
#gm-f-nego:checked ~ .stage .row:has(.st.s-nego:checked),
#gm-f-gan:checked ~ .stage .row:has(.st.s-gan:checked) {
  overflow: visible;
  height: calc(var(--u) * 40);
  visibility: visible;
}
.gm-empty {
  display: none;
  margin: 0;
  padding: calc(var(--u) * 28) calc(var(--u) * 16);
  color: #5f6368;
  font-size: calc(var(--u) * 13.5);
  text-align: center;
}
.gm-f:checked ~ .stage .gm-list:not(#gm-f-nuevo:checked ~ .stage .gm-list:has(.st.s-nuevo:checked)):not(#gm-f-prop:checked ~ .stage .gm-list:has(.st.s-prop:checked)):not(#gm-f-nego:checked ~ .stage .gm-list:has(.st.s-nego:checked)):not(#gm-f-gan:checked ~ .stage .gm-list:has(.st.s-gan:checked)) .gm-empty {
  display: block;
}
/* Empresas: el nombre abre la tarjeta con su perfil y su historial crediticio. */
#gm-live:checked ~ .stage label.name {
  cursor: pointer;
  text-decoration: underline dotted #9aa0a6;
  text-underline-offset: calc(var(--u) * 3);
}
#gm-live:checked ~ .stage label.name:hover {
  color: #1a56c4;
  text-decoration-color: currentColor;
}
#gm-live:checked ~ .stage .gm-co {
  transition:
    opacity 0.18s,
    transform 0.18s;
  transform: translateX(5%);
}
#gm-live:checked ~ #gm-co-1:checked ~ .stage .k1,
#gm-live:checked ~ #gm-co-2:checked ~ .stage .k2,
#gm-live:checked ~ #gm-co-3:checked ~ .stage .k3 {
  opacity: 1;
  visibility: visible;
  transform: none;
}
#gm-live:checked ~ #gm-tab-c:checked ~ .stage .co-cr {
  opacity: 1;
  visibility: visible;
}
#gm-live:checked ~ #gm-tab-c:checked ~ .stage .co-pf {
  opacity: 0;
  visibility: hidden;
}
#gm-tab-p:checked ~ .stage .co-tabs label:nth-child(1),
#gm-tab-c:checked ~ .stage .co-tabs label:nth-child(2) {
  color: #202124;
  box-shadow: inset 0 -2px 0 var(--ink);
}
#gm-live:checked ~ .stage .co-tabs label:hover {
  color: #202124;
}

/*
 * Línea de tiempo (1 s = 4 %):
 *  1 s   se abre un correo: el check gris pasa a doble verde y aparece el aviso con la hora
 *  6 s   el cursor consulta el historial de aperturas y clics de otro correo
 * 10 s   cambia la etapa de una conversación desde el menú; a los 13,5 s se actualiza el embudo
 * 15,5 s otra apertura, con aviso al pie
 * 17,5 s el cursor toca una empresa y se abre su tarjeta: perfil y después historial crediticio
 * 21 s   clic en un enlace
 * Los efectos pasajeros (avisos, destellos) comparten fotogramas y se desplazan con animation-delay.
 * Los cambios que persisten hasta el reinicio usan porcentajes absolutos del ciclo.
 */
@keyframes gm-seam {
  0%,
  100% {
    opacity: 0;
  }
  2.4%,
  97.6% {
    opacity: 1;
  }
}
@keyframes live {
  50% {
    opacity: 0.3;
  }
}
@keyframes target {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.45;
  }
}
@keyframes gm-pop {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  1.4%,
  12.4% {
    opacity: 1;
    transform: none;
  }
  13.8%,
  100% {
    opacity: 0;
    transform: translateY(3px) scale(0.98);
  }
}
@keyframes gm-flash {
  0% {
    background-color: var(--rowbg);
  }
  0.6% {
    background-color: var(--fl);
  }
  9%,
  100% {
    background-color: var(--rowbg);
  }
}
@keyframes gm-bump {
  0% {
    transform: none;
  }
  1.2% {
    transform: scale(1.06);
  }
  3.2%,
  100% {
    transform: none;
  }
}
@keyframes gm-snack {
  0% {
    opacity: 0;
    transform: translateY(140%);
  }
  1.6%,
  8.4% {
    opacity: 1;
    transform: none;
  }
  9.8%,
  100% {
    opacity: 0;
    transform: translateY(140%);
  }
}
@keyframes ck-out-a {
  0%,
  3.99% {
    opacity: 1;
  }
  4%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-in-a {
  0%,
  3.99% {
    opacity: 0;
    transform: scale(0.3);
  }
  5% {
    opacity: 1;
    transform: scale(1.45);
  }
  6.4%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ck-out-d {
  0%,
  61.99% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
  }
}
@keyframes ck-in-d {
  0%,
  61.99% {
    opacity: 0;
    transform: scale(0.3);
  }
  63% {
    opacity: 1;
    transform: scale(1.45);
  }
  64.4%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes row-hover-b {
  0%,
  24.5%,
  37.5%,
  69.5%,
  83.6%,
  100% {
    box-shadow:
      inset 0 -1px 0 #e3e8f0,
      inset 0 0 0 transparent,
      0 0 0 0 transparent,
      0 0 0 0 transparent;
  }
  24.9%,
  37.1%,
  69.9%,
  83.2% {
    box-shadow:
      inset 1px 0 0 #dadce0,
      inset -1px 0 0 #dadce0,
      0 1px 2px 0 rgb(60 64 67 / 0.3),
      0 1px 3px 1px rgb(60 64 67 / 0.15);
  }
}
@keyframes row-hover-c {
  0%,
  40.5%,
  56.5%,
  100% {
    box-shadow:
      inset 0 -1px 0 #e3e8f0,
      inset 0 0 0 transparent,
      0 0 0 0 transparent,
      0 0 0 0 transparent;
  }
  40.9%,
  56.1% {
    box-shadow:
      inset 1px 0 0 #dadce0,
      inset -1px 0 0 #dadce0,
      0 1px 2px 0 rgb(60 64 67 / 0.3),
      0 1px 3px 1px rgb(60 64 67 / 0.15);
  }
}
@keyframes pop-b {
  0%,
  25.8% {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  27.2%,
  37% {
    opacity: 1;
    transform: none;
  }
  38.2%,
  100% {
    opacity: 0;
    transform: translateY(3px) scale(0.98);
  }
}
@keyframes tag-out-c {
  0%,
  42.6% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgb(28 79 181 / 0);
  }
  43.2%,
  51.99% {
    opacity: 1;
    box-shadow: 0 0 0 calc(var(--u) * 2.5) rgb(28 79 181 / 0.28);
  }
  52%,
  100% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgb(28 79 181 / 0);
  }
}
@keyframes tag-in-c {
  0%,
  51.99% {
    opacity: 0;
    transform: scale(0.6);
  }
  53.2% {
    opacity: 1;
    transform: scale(1.12);
  }
  54.6%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes menu-c {
  0%,
  42.8% {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  44%,
  51% {
    opacity: 1;
    transform: none;
  }
  52.2%,
  100% {
    opacity: 0;
    transform: translateY(-3px) scale(0.98);
  }
}
@keyframes opt-c {
  0%,
  47.6% {
    background-color: transparent;
  }
  48.4%,
  100% {
    background-color: #edf1f5;
  }
}
@keyframes n-out {
  0%,
  53.99% {
    opacity: 1;
    transform: none;
  }
  55%,
  100% {
    opacity: 0;
    transform: translateY(-80%);
  }
}
@keyframes n-in {
  0%,
  53.99% {
    opacity: 0;
    transform: translateY(80%);
  }
  55%,
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes cur-move {
  0%,
  19% {
    opacity: 0;
    transform: translate(calc(var(--u) * var(--ex)), calc(var(--u) * 300));
  }
  21% {
    opacity: 1;
  }
  25%,
  37% {
    opacity: 1;
    transform: translate(calc(var(--u) * var(--bx)), calc(var(--u) * 21));
  }
  41%,
  44.5% {
    opacity: 1;
    transform: translate(calc(var(--u) * var(--tx)), calc(var(--u) * 101));
  }
  48.5%,
  53% {
    opacity: 1;
    transform: translate(calc(var(--u) * (var(--tx) + 18)), calc(var(--u) * 191));
  }
  58%,
  66.5% {
    opacity: 0;
    transform: translate(calc(var(--u) * var(--ex)), calc(var(--u) * 290));
  }
  68% {
    opacity: 1;
  }
  70%,
  81% {
    opacity: 1;
    transform: translate(calc(var(--u) * (var(--bx) + 58)), calc(var(--u) * 23));
  }
  84.5%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--u) * var(--ex)), calc(var(--u) * 290));
  }
}
@keyframes cur-click {
  0%,
  42%,
  43.4%,
  49.6%,
  51%,
  70.2%,
  71.6%,
  100% {
    transform: scale(1);
  }
  42.6%,
  50.2%,
  70.8% {
    transform: scale(0.8);
  }
}
@keyframes cur-ring {
  0%,
  42.5% {
    opacity: 0;
    transform: scale(0.3);
  }
  42.7% {
    opacity: 1;
    transform: scale(0.3);
  }
  45% {
    opacity: 0;
    transform: scale(1.5);
  }
  50.1% {
    opacity: 0;
    transform: scale(0.3);
  }
  50.3% {
    opacity: 1;
    transform: scale(0.3);
  }
  52.6% {
    opacity: 0;
    transform: scale(1.5);
  }
  70.7% {
    opacity: 0;
    transform: scale(0.3);
  }
  70.9% {
    opacity: 1;
    transform: scale(0.3);
  }
  73.2%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes sc-open {
  0%,
  2.9%,
  18.6%,
  61.4%,
  70%,
  100% {
    background-color: #fff;
    border-color: var(--line);
    color: var(--ink-2);
  }
  3.5%,
  18%,
  62%,
  69.4% {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}
@keyframes sc-hist {
  0%,
  24.4%,
  38%,
  100% {
    background-color: #fff;
    border-color: var(--line);
    color: var(--ink-2);
  }
  25%,
  37.4% {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}
@keyframes sc-tag {
  0%,
  40.4%,
  53.6%,
  100% {
    background-color: #fff;
    border-color: var(--line);
    color: var(--ink-2);
  }
  41%,
  53% {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}
@keyframes sc-pipe {
  0%,
  53.4%,
  61.6%,
  100% {
    background-color: #fff;
    border-color: var(--line);
    color: var(--ink-2);
  }
  54%,
  61% {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}
@keyframes sc-co {
  0%,
  70.4%,
  83.6%,
  100% {
    background-color: #fff;
    border-color: var(--line);
    color: var(--ink-2);
  }
  71%,
  83% {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}
/* Tarjeta de empresa dentro de la bandeja: entra, muestra el perfil y pasa al crédito. */
@keyframes co-show {
  0%,
  71.1% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(7%);
  }
  71.2% {
    opacity: 0;
    visibility: visible;
    transform: translateX(7%);
  }
  72.6%,
  82.6% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  83.6% {
    opacity: 0;
    visibility: visible;
    transform: translateX(4%);
  }
  83.7%,
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(4%);
  }
}
@keyframes co-pf {
  0%,
  76.6% {
    opacity: 1;
    visibility: visible;
  }
  77.2%,
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes co-cr {
  0%,
  76.8% {
    opacity: 0;
    visibility: hidden;
  }
  77.4%,
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes co-tab-1 {
  0%,
  76.8% {
    color: #202124;
    box-shadow: inset 0 -2px 0 var(--ink);
  }
  77.2%,
  100% {
    color: #5f6368;
    box-shadow: inset 0 -2px 0 transparent;
  }
}
@keyframes co-tab-2 {
  0%,
  76.8% {
    color: #5f6368;
    box-shadow: inset 0 -2px 0 transparent;
  }
  77.2%,
  100% {
    color: #202124;
    box-shadow: inset 0 -2px 0 var(--ink);
  }
}
@keyframes co-months {
  0%,
  77.2% {
    clip-path: inset(0 100% 0 0);
  }
  80.4%,
  100% {
    clip-path: inset(0);
  }
}
@keyframes try-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(241 107 75 / 0.7);
  }
  70%,
  100% {
    box-shadow: 0 0 0 9px rgb(241 107 75 / 0);
  }
}
@keyframes sc-click {
  0%,
  83.4%,
  97%,
  100% {
    background-color: #fff;
    border-color: var(--line);
    color: var(--ink-2);
  }
  84%,
  96.4% {
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
}

/* Páginas legales */
.legal {
  margin: 28px auto 72px;
  padding: 0 24px;
  max-width: 740px;
  width: 100%;
  flex: 1;
  line-height: 1.65;
}
.legal h1 {
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: -0.065em;
  line-height: 1.12;
}
.legal h2 {
  margin: 32px 0 8px;
  max-width: none;
  font-size: 22px;
  letter-spacing: -0.035em;
  line-height: 1.3;
}
.legal p {
  margin: 8px 0;
  color: #3d5043;
}
.legal a {
  color: #205d42;
}
.return-link {
  font-size: 14px;
}

/* Sin barra lateral: la lista ocupa todo el ancho y deja de escalar. */
@media (max-width: 1100px) {
  .scenes {
    margin-inline: -24px;
    padding-inline: 24px;
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
}
@media (max-width: 900px) {
  .stage {
    --u: 0.86px;
    --ex: 560;
  }
  .gm-side {
    display: none;
  }
  .gm-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .gm-main {
    margin: 0 calc(var(--u) * 12) calc(var(--u) * 12);
  }
  .gm-logo {
    width: auto;
  }
  .gm-search {
    max-width: none;
  }
  .cards {
    grid-template-columns: minmax(0, 1fr);
    width: min(460px, 100%);
  }
  .biz {
    grid-template-columns: minmax(0, 1fr);
    width: min(460px, 100%);
  }
  .biz-arrow {
    justify-self: center;
    rotate: 90deg;
  }
  .privacy ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .bar {
    padding-top: 22px;
  }
  .wordmark img {
    width: 132px;
  }
  .hero {
    padding-inline: 16px;
  }
  .pitch h1 {
    font-size: clamp(33px, 9.4vw, 46px);
  }
  .lead {
    line-height: 1.55;
    margin: 20px auto 26px;
  }
  .stage {
    --u: 0.76px;
    --bx: 22;
    --tx: 206;
    --mx: 142;
    --ex: 320;
  }
  .gm-top {
    gap: calc(var(--u) * 12);
    padding: 0 calc(var(--u) * 12);
  }
  .gm-top .opt,
  .gm-search i,
  .gm-ext span,
  .gm-pipe-t,
  .gm-snack i,
  .seg i,
  .row .box,
  .row .star,
  .row .date {
    display: none;
  }
  .gm-ext {
    padding: 0 calc(var(--u) * 8);
  }
  .gm-pipe {
    padding-inline: calc(var(--u) * 12);
  }
  .seg {
    --a: calc(var(--u) * 8);
    flex: 1 1 auto;
    gap: calc(var(--u) * 5);
    padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 13);
    font-size: calc(var(--u) * 11.5);
  }
  .seg:first-child {
    padding-left: calc(var(--u) * 8);
  }
  .num {
    min-width: calc(var(--u) * 18);
    padding-inline: calc(var(--u) * 4);
  }
  .gm-tools,
  .row {
    padding: 0 calc(var(--u) * 12);
  }
  .row {
    grid-template-columns: calc(var(--u) * 120) calc(var(--u) * 140) minmax(0, 1fr);
    column-gap: calc(var(--u) * 10);
  }
  .pop {
    left: calc(var(--u) * 6);
    transform-origin: calc(var(--u) * 16) 0;
  }
  .pop::before {
    left: calc(var(--u) * 11);
  }
  .gm-snack {
    left: calc(var(--u) * 10);
    bottom: calc(var(--u) * 10);
    max-width: calc(100% - var(--u) * 20);
  }
  .tag-menu {
    left: calc(var(--u) * -40);
  }
  .ext-stage {
    padding: 20px 18px;
  }
  .ext-store {
    flex-wrap: wrap;
  }
  .ext-add {
    flex: 1 1 100%;
    text-align: center;
  }
  .ext-cur {
    right: 30%;
  }
  .ext-url {
    font-size: 11.5px;
  }
  .ext-steps {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
  }
  .cta.soon {
    padding-inline: 22px;
    font-size: 15px;
  }
  .gm-try span {
    font-size: 12.5px;
  }
  .gm-bar {
    font-size: 13px;
  }
  .scenes {
    gap: 6px;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .scenes li {
    padding: 7px 11px 7px 9px;
    font-size: 12.5px;
  }
  .privacy {
    width: calc(100% - 32px);
  }
  .privacy ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .tiers {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    width: min(420px, 100%);
  }
  .google,
  .cta {
    min-height: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .pop-b,
  .m1,
  .c1 {
    opacity: 1;
    visibility: visible;
  }
  :root {
    scroll-behavior: auto;
  }
}
/*
 * Efectos ligados al scroll, sin JavaScript. Los navegadores sin animation-timeline muestran
 * la página quieta. Se usan translate, scale y rotate para no pisar el transform de cada pieza.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ext > *,
    .features > :not(.cards),
    .cards article,
    .company > :not(.biz),
    .biz-mail,
    .biz-arrow,
    .biz-card,
    .privacy,
    .plans > :not(.tiers),
    .tier,
    .closing > *,
    .scenes,
    .stage-note {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    .cards article:nth-child(2),
    .tier:nth-child(2),
    .biz-arrow {
      animation-range: entry 12% cover 22%;
    }
    .cards article:nth-child(3),
    .biz-card {
      animation-range: entry 24% cover 30%;
    }
    .biz-arrow {
      animation-name: rise, nudge;
      animation-duration: auto, 1.6s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: 1, infinite;
      animation-timeline: view(), auto;
    }
    /* La bandeja llega inclinada y se endereza al subir. */
    .stage {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
    /* Los anillos del encabezado se abren mientras bajás. */
    .orbit {
      animation: widen linear both;
      animation-timeline: scroll(root);
      animation-range: 0 900px;
    }
    .privacy {
      animation-name: rise, glide;
      animation-range:
        entry 0% entry 90%,
        entry 0% exit 100%;
    }
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 46px;
    scale: 0.96;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes settle {
  from {
    transform: perspective(1400px) rotateX(11deg) scale(0.93);
  }
  to {
    transform: perspective(1400px) rotateX(0deg) scale(1);
  }
}
@keyframes widen {
  to {
    scale: 1.35;
    opacity: 0.35;
  }
}
/* El fondo de anillos del bloque de privacidad se desplaza con el scroll. */
@keyframes glide {
  from {
    background-position:
      50% -60px,
      0 0;
  }
  to {
    background-position:
      50% 60px,
      0 0;
  }
}