/* House Money — lo que las landings de Webflow necesitan con código.
 *
 * Todo lo demás es nativo en Webflow y se edita en el Designer: colores,
 * tipografía, esquinas cortadas, botones con sus estados (hover, foco,
 * deshabilitado), el barrido de los botones y la aparición al hacer scroll
 * (interacciones "HM Button Sweep" y "HM Reveal …"). Aquí queda sólo lo que
 * el panel de estilos no puede expresar. Todo bajo `.hm-page`, el contenedor
 * de cada landing, para no tocar nada más.
 *
 * Valores copiados de src/index.css y de los componentes (referencia entre
 * paréntesis).
 */

/* ---------------------------------------------------------- base (index.css:96-182) */
html:has(.hm-page) { scroll-behavior: smooth; color-scheme: light; }
.hm-page { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.hm-page a, .hm-page button, .hm-page [role="button"], .hm-page label, .hm-page summary,
.hm-page input[type="checkbox"], .hm-page input[type="radio"] { touch-action: manipulation; }
.hm-page h1, .hm-page h2, .hm-page h3 { text-wrap: balance; }
.hm-page p { text-wrap: pretty; }

/* Anillo de foco de la marca para lo que no tiene clase propia (enlaces dentro
   de un texto, por ejemplo). Las clases hm-* ya traen su :focus-visible nativo. */
.hm-page :focus-visible { outline: 2px solid #b3f80a; outline-offset: 2px; }

/* Imagen de Webflow sin archivo: en la página real no se enseña el icono de
   marcador de posición; queda el fondo de marca del bloque (p. ej. HM Page Hero
   con «Show image» encendido pero sin foto elegida). */
.hm-page img[src*="plugins/Basic/assets/placeholder"] { visibility: hidden; }

/* ---------------------------------------------------------- titular con letras que ruedan
   StaggerText (ui.tsx:13-47) + index.css:382-399. El JS parte el texto al cargar;
   en Webflow el titular se edita como texto normal ([data-hm-stagger]). */
.hm-page .hm-stagger { cursor: default; }
.hm-page .hm-stagger-word { display: inline-block; white-space: nowrap; }
.hm-page .hm-stagger-box { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.hm-page .hm-stagger-char { display: block; will-change: transform; transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1); }
.hm-page .hm-stagger-char > span { display: block; }
.hm-page .hm-stagger-char > span + span { position: absolute; left: 0; top: 100%; color: #b3f80a; }
.hm-page .hm-stagger:hover .hm-stagger-char,
.hm-page .hm-stagger:focus-visible .hm-stagger-char { transform: translateY(-100%); }

/* ---------------------------------------------------------- cinta (TickerBanner.tsx, index.css:504-534) */
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hm-page [data-hm-marquee] .hm-marquee-track { animation: hm-marquee 46s linear infinite; }

/* ---------------------------------------------------------- menú (Layout.tsx:141-236) */
.hm-page .hm-nav.is-hidden { pointer-events: none; transform: translateY(-140%); opacity: 0; }
.hm-page .hm-menu-toggle .hm-icon-close { display: none; }
.hm-page .hm-menu-toggle[aria-expanded="true"] .hm-icon-open { display: none; }
.hm-page .hm-menu-toggle[aria-expanded="true"] .hm-icon-close { display: block; }
@media (max-width: 1023.98px) {
  .hm-page .hm-menu-panel.is-open { display: block; }
}
/* La SPA pasa al menú de escritorio en 1024 px; Webflow en 992. Entre ambos se
   mantiene la hamburguesa, como en www. */
@media (min-width: 992px) and (max-width: 1023.98px) {
  .hm-page .hm-links { display: none; }
  .hm-page .hm-menu-toggle { display: flex; }
}

/* ---------------------------------------------------------- barra de progreso (ScrollProgress.tsx:30-35) */
.hm-page .hm-progress { pointer-events: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; }
.hm-page .hm-progress-track { position: relative; height: 4px; background: rgba(0, 0, 0, 0.25); }
.hm-page .hm-progress-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background-image: linear-gradient(to right, rgba(179, 248, 10, 0.4), rgba(179, 248, 10, 0.8), #b3f80a);
  box-shadow: 0 0 14px rgba(179, 248, 10, 0.85); }

/* ---------------------------------------------------------- aviso de cookies (CookieConsent.tsx:40-45)
   Oculto hasta que el kit lo abre: quien ya contestó no lo ve ni un instante.
   En el Designer (sin código) se ve y se edita. */
.hm-page [data-hm-consent]:not([data-hm-open]) { display: none; }
.hm-page [data-hm-consent] { transition-property: opacity, transform; transition-duration: 500ms; transform: translateY(2rem); opacity: 0; }
.hm-page [data-hm-consent].is-in { transform: none; opacity: 1; }

/* ---------------------------------------------------------- efectos WebGL (hm-lp-fx.js)
   La versión estática de cada sección es nativa y se edita en Webflow. Esto
   sólo describe el estado vivo (`.is-live`), que el script pone al montar y
   quita si no hay WebGL, si falla o con menos movimiento. */
.hm-page .hm-fx-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hm-page .hm-fx-bg.is-live { background-image: none; }

/* HowItWorks3D.tsx:375-450 */
.hm-page .hm-hiw3d.is-live { height: 100vh; padding: 0; }
.hm-page .hm-hiw3d.is-live .hm-hiw3d-inner { position: static; max-width: none; padding: 0; }
.hm-page .hm-hiw3d.is-live .hm-hiw3d-intro { position: absolute; left: 24px; right: 24px; top: 14%; z-index: 10;
  max-width: 980px; margin: 0 auto; text-align: center; }
.hm-page .hm-hiw3d.is-live .hm-hiw3d-title { max-width: none; font-size: clamp(2.1rem, 4.8vw, 4rem); }
.hm-page .hm-hiw3d.is-live .hm-hiw3d-outro { position: absolute; left: 24px; right: 24px; bottom: 12%; z-index: 10;
  margin: 0 auto; text-align: center; visibility: hidden; opacity: 0; }
@media (min-width: 768px) {
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-intro { top: 16%; }
}
@media (max-width: 1023.98px) {
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-mwrap { position: absolute; left: 0; right: 0; bottom: 13%; z-index: 10;
    margin: 0; overflow: hidden; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-steps { display: flex; width: max-content; gap: 16px; padding: 0 24px; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step { flex-shrink: 0; width: 78vw; max-width: 340px; padding: 20px;
    background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-num { font-size: 1.8rem; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step-title { font-size: 1.25rem; line-height: 1.25; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step-copy { font-size: 13px; }
}
@media (min-width: 1024px) {
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-mwrap,
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-steps { position: static; display: block; margin: 0; }
  /* `translate` y no `transform`: GSAP anima x/y en transform sin pisarlo */
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step { position: absolute; top: 50%; z-index: 10; width: 520px;
    translate: 0 -50%; visibility: hidden; opacity: 0; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step[data-side="left"] { left: 7%; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step[data-side="right"] { right: 7%; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step[data-side="center"] { left: 50%; top: 40%; width: 640px;
    translate: -50% -50%; text-align: center; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-num { font-size: clamp(2.6rem, 5vw, 4rem); }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step-title { margin-top: 16px; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.02; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step-copy { margin-top: 16px; max-width: 38rem; font-size: 16px; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-bar { display: block; }
  .hm-page .hm-hiw3d.is-live .hm-hiw3d-step[data-side="center"] .hm-hiw3d-bar { margin-left: auto; margin-right: auto; }
}

/* TimingTimeline (Home.tsx:284-402): estado vivo; el nativo es «todo cumplido» */
@keyframes hm-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.hm-page .hm-timing.is-live .hm-timeline-track,
.hm-page .hm-timing.is-live .hm-timeline-fill { bottom: auto; }
.hm-page .hm-timing.is-live .hm-timeline-comet { display: block; translate: 0 -50%; }
.hm-page .hm-timing.is-live .hm-timeline-comet::after { content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: #b3f80a; animation: hm-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.hm-page .hm-timing.is-live .hm-timeline-item:not(.is-active) .hm-timeline-node { border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.4); box-shadow: none; }
.hm-page .hm-timing.is-live .hm-timeline-item.is-active .hm-timeline-node { transform: scale(1.1); font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010101' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 18px; }
.hm-page .hm-timing.is-live .hm-timeline-item:not(.is-active) .hm-timeline-card { transform: translateX(12px); opacity: 0.55;
  border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.03); box-shadow: none; }
.hm-page .hm-timing.is-live .hm-timeline-item:not(.is-active) .hm-timeline-phase { color: rgba(255, 255, 255, 0.4); }

/* Trial spotlight (Membership.tsx:22-56): salto de cada cifra */
@keyframes hm-count-pop { from { transform: translateY(0.12em) scale(1.18); opacity: 0; } to { transform: none; opacity: 1; } }
.hm-page .hm-trial.is-live .hm-trial-count.is-pop { animation: hm-count-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* StepsScroller.tsx: estado vivo. Nativo = lista con imagen en cada paso. */
.hm-page .hm-steps.is-live .hm-steps-item { min-height: 72vh; }
@media (min-width: 992px) {
  .hm-page .hm-steps.is-live .hm-steps-grid { grid-template-columns: 1fr 1fr; }
  .hm-page .hm-steps.is-live .hm-steps-media { display: block; }
  .hm-page .hm-steps.is-live .hm-steps-mimg { display: none; }
  .hm-page .hm-steps.is-live .hm-steps-item { min-height: 100vh; }
}
.hm-page .hm-steps.is-live .hm-steps-frame-img { opacity: 0; transform: scale(1.14);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.hm-page .hm-steps.is-live .hm-steps-frame-img.is-active { opacity: 1; transform: scale(1.05); }

/* LedTrail (ResponsibleBanner.tsx): la capa no recibe clics */
.hm-page .hm-led { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ---------------------------------------------------------- menos movimiento (index.css:390-399, 671-696) */
@media (prefers-reduced-motion: reduce) {
  .hm-page .hm-stagger-char { transition: color 0.3s ease; transform: none !important; }
  .hm-page .hm-stagger:hover .hm-stagger-char > span:first-child { color: #b3f80a; }
  .hm-page [data-hm-marquee] .hm-marquee-track { animation: none; }
}