/* 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 corto para que el mensaje entre con energía. */
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;
}

html.lando-anim [data-reveal-lines] .rh-cmask-diacritic::after {
  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;
}