.heroe-vivo {
  padding-top: calc(var(--cab) + clamp(36px, 6vh, 80px));
  padding-bottom: clamp(48px, 8vh, 96px);
  min-height: min(94vh, 880px);
  display: grid;
  align-items: center;
}
.heroe-vivo.fondo-video::after {
  background:
    linear-gradient(
      90deg,
      rgba(3, 38, 29, .94) 0%,
      rgba(3, 38, 29, .84) 40%,
      rgba(3, 38, 29, .42) 72%,
      rgba(3, 38, 29, .30) 100%),
    linear-gradient(
      0deg,
      rgba(3, 38, 29, .55) 0%,
      rgba(3, 38, 29, 0) 30%);
}
.heroe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.heroe-sector {
  color: var(--ambar);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 6px;
}
.heroe-hora {
  margin: 0 0 14px;
  line-height: .86;
  font-weight: 800;
  letter-spacing: -.045em;
  font-size: clamp(64px, 10.5vw, 150px);
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(248, 250, 252, .34);
}
.heroe-hora small {
  font-size: .32em;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  color: var(--claro-3);
  font-weight: 600;
  margin-left: .2em;
}
.heroe-vivo h1 {
  color: var(--claro-1);
  max-width: 15ch;
}
.heroe-vivo .entrada {
  color: var(--claro-2);
  max-width: 46ch;
}
.heroe-acc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 26px;
}
.enlace-claro {
  color: var(--claro-1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(248, 250, 252, .4);
}
.enlace-claro:hover {
  text-decoration-color: var(--ambar);
}
.heroe-garantia {
  margin-top: 18px;
  font-size: 14px;
  color: var(--claro-3);
  max-width: 44ch;
}
.heroe-vivo .demo {
  justify-self: end;
  width: 100%;
  max-width: 520px;
}
.heroe-vivo .losa.ev-escena {
  background: none;
  box-shadow: none;
  aspect-ratio: 4 / 4.4;
  overflow: visible;
}
.heroe-vivo .ev-escena .ficha {
  top: 20%;
  right: 0;
}
.heroe-vivo .heroe-nota {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--claro-3);
  text-align: center;
}
html.tiene-heroe .cab-acc .pildora {
  transition:
    opacity .25s var(--ease-salida),
    translate .25s var(--ease-salida),
    visibility .25s;
}
html.tiene-heroe:not(.cta-arriba) .cab-acc .pildora {
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
}
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 34px;
}
.bento .tarjeta:first-child {
  grid-row: span 2;
}
.bento .tarjeta:first-child .losa {
  aspect-ratio: 5 / 4;
}
.bento .tarjeta:first-child h3 {
  font-size: 22px;
}
.bento .tarjeta:not(:first-child) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.bento .tarjeta:not(:first-child) .losa {
  aspect-ratio: auto;
  padding: 18px 14px;
}
.bento .tarjeta:not(:first-child) .ui {
  font-size: 13px;
}
.franja {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
}
.franja > div {
  padding: 6px 28px;
  border-left: 1px solid var(--linea-osc);
}
.franja > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.franja b {
  display: block;
  color: var(--claro-1);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.franja span {
  display: block;
  margin-top: 8px;
  color: var(--claro-2);
  font-size: 15px;
  max-width: 26ch;
}
@media (max-width: 860px) {
  .heroe-vivo {
    min-height: 0;
  }
  .heroe-vivo.fondo-video::after {
    background:
      linear-gradient(
        180deg,
        rgba(3, 38, 29, .90) 0%,
        rgba(3, 38, 29, .78) 55%,
        rgba(3, 38, 29, .55) 100%);
  }
  .heroe-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .heroe-vivo .demo {
    justify-self: center;
  }
  .heroe-vivo .losa.ev-escena {
    aspect-ratio: auto;
  }
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento .tarjeta:first-child {
    grid-row: auto;
  }
  .bento .tarjeta:not(:first-child) {
    grid-template-columns: minmax(0, 1fr);
  }
  .franja {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .franja > div {
    border-left: 0;
    padding: 0;
  }
}
.heroe-momento {
  position: absolute;
  z-index: 3;
  left: -16%;
  top: -11%;
  display: grid;
  gap: 2px;
  max-width: 240px;
  padding: 11px 15px 11px 32px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.32;
  color: var(--claro-1);
  background: rgba(6, 46, 36, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(248, 250, 252, .16), 0 12px 30px rgba(0, 0, 0, .25);
}
.heroe-momento::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 4px rgba(255, 183, 3, .22);
}
.heroe-momento b {
  font-weight: 650;
}
.heroe-momento span {
  color: var(--claro-2);
}
@media (max-width: 860px) {
  .heroe-momento {
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    margin-bottom: 16px;
  }
}