/* Community spacing: keep the reel cards visually connected to the heading. */
.community-section .social-fan {
  height: clamp(360px, 33.3vw, 520px) !important;
  margin-top: clamp(72px, 5.8vw, 116px) !important;
}

.community-section .social-links {
  margin-top: 28px !important;
}

@media (max-width: 899px) {
  .community-section .social-fan {
    height: clamp(290px, 77vw, 350px) !important;
    margin-top: 56px !important;
  }

  .community-section .social-links {
    margin-top: -56px !important;
  }
}

/* Prueba social del hero: sólo tipografía y ritmo, sin cajas decorativas. */
.page-home .hero-proof {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(36px, 4.4vw, 72px) !important;
  width: min(900px, 74vw) !important;
  margin: clamp(68px, 7.8vh, 94px) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-home .hero-proof li,
.page-home .hero-proof li:first-child,
.page-home .hero-proof li:last-child {
  display: flex !important;
  align-items: baseline;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-home .hero-proof span {
  color: rgba(248, 248, 248, 0.88) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: clamp(0.88rem, 1.14vw, 1.08rem) !important;
  font-weight: 680 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.page-home .hero-proof strong {
  margin-right: 3px;
  color: var(--neo-orange-hot) !important;
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: 1.38em !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
}

@media (max-width: 899px) {
  .page-home .hero-proof {
    width: calc(100vw - 28px) !important;
    gap: 10px 26px !important;
    margin-top: clamp(58px, 8vh, 82px) !important;
  }

  .page-home .hero-proof span {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 560px) {
  .page-home .hero-proof {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px !important;
    width: auto !important;
  }

  .page-home .hero-proof span {
    font-size: 0.76rem !important;
  }
}

/* Hero: display condensada para la velocidad; Archivo para lectura y acción. */
.page-home .statement,
.page-home .statement .w,
.page-home .statement .w-ink,
.page-home .statement .w-volt {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  line-height: 0.92 !important;
}

.page-home .statement .w-ink {
  font-size: 0.96em !important;
  color: rgba(245, 248, 255, 0.9) !important;
}

.page-home .statement .w-volt {
  max-width: 12ch !important;
  color: var(--neo-orange-hot) !important;
  text-shadow: 0 12px 40px rgba(61, 255, 64, 0.16) !important;
}

.page-home .statement-sub {
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: clamp(0.72rem, 1vw, 0.9rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.35 !important;
}

.page-home .hero .btn {
  font-family: "Archivo", Arial, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.13em !important;
}

.page-home .hero-proof span {
  font-family: "Archivo", Arial, sans-serif !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.page-home .hero-proof strong {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 899px) {
  .page-home .statement,
  .page-home .statement .w,
  .page-home .statement .w-ink,
  .page-home .statement .w-volt {
    letter-spacing: 0 !important;
    line-height: 0.9 !important;
  }
}

/* Responsive parity: desktop keeps the message left and the brand right at
   every viewport size; tablet and mobile only compact the measurements. */
.page-home .hero > .container {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  padding: 0 !important;
  transform: none !important;
}

.page-home .hero-meta,
.page-home .statement,
.page-home .statement-sub,
.page-home .hero .hero-ctas,
.page-home .hero-proof {
  position: absolute !important;
  inset: auto !important;
  margin: 0 !important;
}

@media (min-width: 900px) {
  .page-home .hero-meta { top: clamp(112px, 14vh, 154px) !important; left: var(--ln-pad) !important; }
  .page-home .statement { top: auto !important; right: auto !important; bottom: 188px !important; left: var(--ln-pad) !important; text-align: left !important; }
  .page-home .statement-sub { top: auto !important; right: auto !important; bottom: 134px !important; left: var(--ln-pad) !important; transform: none !important; text-align: left !important; }
  .page-home .hero .hero-ctas { top: auto !important; right: auto !important; bottom: 30px !important; left: var(--ln-pad) !important; width: max-content !important; gap: 16px !important; }
  .page-home .hero-proof { top: auto !important; right: var(--ln-pad) !important; bottom: 30px !important; left: auto !important; width: max-content !important; }
}

@media (min-width: 900px) {
  .page-home .hero-proof { display: none !important; }
}

@media (min-width: 600px) and (max-width: 899px) {
  :root { --ln-pad: 24px; }
  .site-header .logo,
  body.rh-intro-running .site-header .logo,
  body.rh-intro-complete .site-header .logo { top: 22px !important; left: var(--ln-pad) !important; width: 122px !important; height: 54px !important; transform: none !important; }
  .site-header .logo:hover,
  body.rh-intro-running .site-header .logo:hover,
  body.rh-intro-complete .site-header .logo:hover { transform: scale(0.96) !important; }
  .header-actions { top: 22px !important; right: var(--ln-pad) !important; left: auto !important; width: auto !important; justify-content: flex-end !important; }
  .page-home .hero-meta { top: 126px !important; left: var(--ln-pad) !important; width: auto !important; transform: none !important; text-align: left !important; }
  .page-home .hero-machine { inset: 23svh 1vw auto 47vw !important; width: auto !important; height: 39svh !important; }
  .page-home .hero-machine-stage { width: 100% !important; height: 39svh !important; }
  .page-home .statement { top: 36svh !important; right: auto !important; bottom: auto !important; left: var(--ln-pad) !important; width: 46vw !important; max-width: 46vw !important; font-size: clamp(3.35rem, 7.2vw, 5.2rem) !important; line-height: 0.88 !important; text-align: left !important; transform: none !important; }
  .page-home .statement-sub { top: 73svh !important; bottom: auto !important; left: var(--ln-pad) !important; width: 45vw !important; max-width: 45vw !important; white-space: normal !important; transform: none !important; text-align: left !important; }
  html.lando-anim .page-home .statement-sub { transform: none !important; }
  .page-home .hero .hero-ctas { top: auto !important; right: auto !important; bottom: 74px !important; left: var(--ln-pad) !important; width: max-content !important; gap: 10px !important; }
  .page-home .hero .hero-ctas .btn { min-height: 50px !important; padding-inline: 15px !important; font-size: 0.67rem !important; }
  .page-home .hero-proof { top: auto !important; right: auto !important; bottom: 22px !important; left: var(--ln-pad) !important; width: auto !important; max-width: 50vw !important; justify-content: flex-start !important; gap: 10px !important; }
  .page-home .hero-proof li:nth-child(n + 2) { display: none !important; }
}

@media (max-width: 599px) {
  :root { --ln-pad: 14px; }
  .site-header .logo,
  body.rh-intro-running .site-header .logo,
  body.rh-intro-complete .site-header .logo { top: 14px !important; left: var(--ln-pad) !important; width: 108px !important; height: 48px !important; transform: none !important; }
  .site-header .logo:hover,
  body.rh-intro-running .site-header .logo:hover,
  body.rh-intro-complete .site-header .logo:hover { transform: scale(0.96) !important; }
  .header-actions { top: 14px !important; right: var(--ln-pad) !important; left: auto !important; width: auto !important; justify-content: flex-end !important; }
  .page-home .hero-meta { top: 126px !important; left: var(--ln-pad) !important; width: auto !important; transform: none !important; text-align: left !important; }
  .page-home .hero-machine { inset: 23svh 4vw auto auto !important; width: 78vw !important; height: 30svh !important; }
  .page-home .hero-machine-stage { width: 100% !important; height: 30svh !important; }
  .page-home .statement { top: 56svh !important; right: auto !important; bottom: auto !important; left: var(--ln-pad) !important; width: calc(100% - (var(--ln-pad) * 2)) !important; max-width: none !important; font-size: clamp(2.7rem, 10.8vw, 4rem) !important; line-height: 0.88 !important; text-align: left !important; transform: none !important; }
  .page-home .statement-sub { top: calc(56svh + 166px) !important; right: auto !important; bottom: auto !important; left: var(--ln-pad) !important; width: min(250px, 70vw) !important; white-space: normal !important; transform: none !important; text-align: left !important; }
  .page-home .hero .hero-ctas { top: auto !important; right: var(--ln-pad) !important; bottom: 86px !important; left: var(--ln-pad) !important; width: auto !important; flex-direction: row !important; align-items: stretch !important; gap: 8px !important; }
  .page-home .hero .hero-ctas .btn { flex: 1 1 0 !important; min-width: 0 !important; min-height: 50px !important; padding-inline: 8px !important; font-size: 0.62rem !important; letter-spacing: 0.1em !important; }
  .page-home .hero-proof { top: auto !important; right: 72px !important; bottom: 18px !important; left: var(--ln-pad) !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; width: auto !important; }
  .page-home .hero-proof li,
  .page-home .hero-proof li:first-child,
  .page-home .hero-proof li:last-child { display: block !important; min-width: 0 !important; padding: 0 !important; }
  .page-home .hero-proof span { display: block !important; font-size: 0.58rem !important; line-height: 1.2 !important; white-space: normal !important; }
}

@media (max-width: 599px) {
  html.lando-anim .page-home .statement-sub { transform: none !important; }
  .page-home .hero-proof { max-width: none !important; }
}

@media (max-width: 599px) and (max-height: 760px) {
  .page-home .hero-machine { top: 21svh !important; }
  .page-home .statement { top: 51svh !important; }
  .page-home .statement-sub { top: calc(51svh + 152px) !important; }
}

@media (max-width: 899px) {
  .rh-start-mark { animation: rh-logo-arrival-v6 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both, rh-logo-launch-mobile-v7 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.28s forwards !important; }
  @keyframes rh-logo-launch-mobile-v7 {
    0% { top: 25%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    35% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-2deg); }
    100% { top: 38%; left: 57%; opacity: 0.9; transform: translate(-50%, -50%) scale(0.48) rotate(0); }
  }
}

/* El escenario debe permanecer clavado hasta el borde real de la sección.
   El relleno inferior dejaba que el sticky se soltara antes y hacía que el
   manifiesto subiera al final, después de haber terminado su recorrido. */
.page-home .ln-manifesto {
  overflow: visible !important;
  padding-bottom: 0 !important;
}

/* Separa la vitrina de productos de la franja de marcas. */
.page-home main > .brands-strip {
  margin-top: 0;
  padding-top: clamp(96px, 6vw, 128px) !important;
}

/* La vitrina es una escena de una pantalla: sus tarjetas deben encajar
   dentro del carril y dejar aire antes de la línea divisoria.
   La medida de la tarjeta la fija el bloque V44 de styles.css, común a esta
   galería y a la de categorías; esta hoja carga después, así que aquí sólo
   quedan los ajustes que no compiten con ella. */
@media (min-width: 900px) {
  html.lando-anim .page-home .home-showcase {
    padding-bottom: clamp(30px, 5vh, 60px) !important;
  }

  html.lando-anim .page-home .home-showcase .vitrina-grid .tile {
    top: auto !important;
    min-height: 0 !important;
  }
}

/* Entrada tipográfica: ritmo pausado (2x del original) para que el titular se
   pueda leer entrando, en lugar de aterrizar antes de que lo mires. Esta regla
   es la que MANDA sobre los caracteres: gana en especificidad y por orden de
   carga a `html.lando-anim .rh-char` de styles.css. */
html.lando-anim [data-reveal-lines] .rh-char {
  transition-duration: 0.58s !important;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1) !important;
  transition-delay: calc(var(--i, 0) * 0.018s) !important;
}