/* app/assets/stylesheets/landing.css
 *
 * Estilos exclusivos de la landing pública (/inicio). Solo se carga en
 * layouts/landing.html.erb, así que nada de esto afecta al panel.
 *
 * - Poppins se aplica con la clase .landing (no con @theme), para no activar
 *   la utilidad font-poppins del resto de la app. Anton (condensada) solo en
 *   los titulares grandes, con la clase .lp-display.
 * - Dirección visual: flat, inspirada en zipcio.com (titular gigante entre
 *   corchetes, pila de tarjetas inclinadas, botones pill + flecha circular).
 * - Todas las animaciones viven dentro de prefers-reduced-motion: no-preference.
 * - Los estados iniciales "ocultos" solo aplican con html.lp-js (JS cargado).
 */

.landing {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.landing ::selection {
  background: rgb(255 140 33 / 0.25);
}

/* Titulares grandes: condensada, mayúsculas */
.lp-display {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* Corchetes naranjas del hero */
.lp-bracket {
  width: 0.3em;
  height: 1.02em;
  border: 0.085em solid #FF8C21;
  flex-shrink: 0;
}
.lp-bracket-l { border-right: 0; }
.lp-bracket-r { border-left: 0; }

/* Línea de titular enmascarada (la palabra sube desde abajo) */
.lp-line {
  display: inline-block;
  overflow: hidden;
  padding: 0.06em 0.02em;
  margin: -0.06em -0.02em;
  vertical-align: top;
}
.lp-line > span {
  display: inline-block;
}

/* Pila de tarjetas del hero: las de atrás se abren en abanico */
.lp-stack-back-a { rotate: 7deg; }
.lp-stack-back-b { rotate: -6deg; }

/* Scroll horizontal sin barra para los chips de pestañas en móvil */
.lp-no-scrollbar {
  scrollbar-width: none;
}
.lp-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Nav: borde y fondo al hacer scroll o con el menú abierto */
.lp-nav {
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.lp-nav.is-scrolled,
.lp-nav.is-open {
  background-color: rgb(255 255 255 / 0.8);
  border-color: rgb(226 232 240 / 0.8);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

/* Pestañas del recorrido */
.lp-tab .lp-tab-desc {
  display: none;
}
@media (min-width: 64rem) {
  .lp-tab.is-active .lp-tab-desc {
    display: block;
  }
}
.lp-tab-progress {
  transform: scaleX(0);
  transform-origin: left;
}

/* Gráfica de barras: alto final en --h */
.lp-bar {
  height: var(--h);
  transform-origin: bottom;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* ---- Aparición al hacer scroll ---- */
  .lp-js .lp-reveal {
    opacity: 0;
    transform: translateY(16px);
    /* translate/box-shadow: conserva los hovers de Tailwind (hover:-translate-y-*,
       hover:shadow-*) en elementos que también son .lp-reveal */
    transition:
      opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
      translate 300ms ease,
      box-shadow 300ms ease;
  }
  .lp-js .lp-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Titular del hero: líneas que suben y corchetes que se abren */
  .lp-js .lp-lines .lp-line > span {
    transform: translateY(110%);
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--d, 0ms);
  }
  .lp-js .lp-lines.is-visible .lp-line > span {
    transform: none;
  }
  .lp-js .lp-lines .lp-bracket {
    opacity: 0;
    scale: 0.6 1;
    transition: opacity 500ms ease 500ms, scale 700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms;
  }
  .lp-js .lp-lines.is-visible .lp-bracket {
    opacity: 1;
    scale: 1;
  }

  /* Pila de tarjetas: abanico al aparecer y al pasar el puntero */
  .lp-stack-back-a,
  .lp-stack-back-b {
    transition: rotate 900ms cubic-bezier(0.22, 1, 0.36, 1) 350ms, translate 400ms ease;
  }
  .lp-js .lp-stack:not(.is-visible) .lp-stack-back-a,
  .lp-js .lp-stack:not(.is-visible) .lp-stack-back-b {
    rotate: 0deg;
  }
  .lp-stack:hover .lp-stack-back-a { rotate: 10deg; translate: 8px 0; transition-delay: 0ms; }
  .lp-stack:hover .lp-stack-back-b { rotate: -9deg; translate: -8px 0; transition-delay: 0ms; }

  /* Las barras crecen cuando su contenedor .lp-reveal entra en la vista */
  .lp-js .lp-reveal .lp-bar {
    transform: scaleY(0);
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 250ms;
  }
  .lp-js .lp-reveal.is-visible .lp-bar {
    transform: scaleY(1);
  }

  /* Panel de pestañas: fundido al cambiar */
  .lp-panel.is-active {
    animation: lp-fade-in 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Capas del hero: flotación lenta */
  .lp-float {
    animation: lp-float 7s ease-in-out infinite;
  }
  .lp-float-slow {
    animation: lp-float 9s ease-in-out infinite reverse;
  }

  /* "escribiendo…" */
  .lp-typing span {
    animation: lp-typing 1.2s ease-in-out infinite;
  }
  .lp-typing span:nth-child(2) { animation-delay: 150ms; }
  .lp-typing span:nth-child(3) { animation-delay: 300ms; }

  /* Badge de no leídos que reaparece */
  .lp-pop {
    animation: lp-pop 4s ease-in-out infinite;
  }

  /* Punto "en vivo" */
  .lp-ping {
    animation: lp-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  /* Tarjeta del kanban que cambia de columna */
  .lp-kanban-move {
    animation: lp-kanban-move 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  /* Conectores ERP: flujo de datos */
  .lp-flow {
    animation: lp-flow 1.6s linear infinite;
  }

  /* Onda de audio */
  .lp-wave span {
    animation: lp-wave 1.4s ease-in-out infinite;
    transform-origin: center;
  }
  .lp-wave span:nth-child(3n)   { animation-delay: 200ms; }
  .lp-wave span:nth-child(3n+1) { animation-delay: 400ms; }
}

/* Recorrido en modo scroll (desktop): el bloque queda fijo y el alto del
   contenedor lo calcula landing-tabs */
.lp-tour.is-scrolly > [data-landing-tabs-target="sticky"] {
  position: sticky;
}
.lp-tour.is-scrolly .lp-tour-panels {
  display: flex;
  min-height: 34rem;
  align-items: flex-start;
}
.lp-tour.is-scrolly .lp-tour-panels > [role="tabpanel"] {
  width: 100%;
}

/* ---------------------------------------------------------------------------
 * Baraja de módulos (landing-deck). Titular a un lado y fila de tarjetas al
 * otro (desde lg; en móvil el titular va arriba). Sin JS o con reduced
 * motion: la fila tiene scroll horizontal nativo con snap. Con .is-deck
 * (GSAP activo) la sección ocupa la ventana mientras está fija y las
 * tarjetas se apilan y despliegan solo con transform (x), nunca con width.
 * ------------------------------------------------------------------------- */
.lp-deck {
  --lp-deck-gap: 1.5rem;
  --lp-deck-h: clamp(2.75rem, 11vw, 4.5rem);   /* tamaño del titular */
  --lp-deck-w: min(78vw, 20rem);                /* ancho de cada tarjeta */
  --lp-deck-vh: 22rem;                          /* alto del bloque de color */
  padding-block: 2rem 3rem;
}
.lp-deck-row {
  position: relative; /* referencia de offsetLeft del track */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.lp-deck-head {
  flex: none;
}
.lp-deck-scroller {
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lp-deck-scroller::-webkit-scrollbar {
  display: none;
}
.lp-deck-track {
  position: relative; /* referencia de offsetLeft de las tarjetas */
  display: flex;
  gap: var(--lp-deck-gap);
  padding-bottom: 0.5rem;
}
.lp-deck-card {
  position: relative;
  flex: none;
  width: var(--lp-deck-w);
  scroll-snap-align: start;
}
.lp-deck-visual {
  height: var(--lp-deck-vh);
}
.lp-deck-meta {
  display: none;
}
@media (min-width: 64rem) {
  .lp-deck {
    --lp-deck-h: clamp(5rem, 8vw, 8.5rem);
  }
  .lp-deck-row {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
}

/* Con la animación activa las tarjetas miden lo mismo que la pila del hero
   (--lp-card-w y --lp-stack-h en _hero), porque son esa misma pila. */
.lp-deck.is-deck {
  --lp-deck-w: min(calc(100vw - 2rem), 18rem);
  --lp-deck-vh: 21rem;
  padding-block: 0;
}
.lp-deck.is-deck .lp-deck-inner {
  min-height: 100svh;
  justify-content: center;
  padding-top: 5rem; /* alto de la nav fija */
  padding-bottom: 1.5rem;
}
.lp-deck.is-deck .lp-deck-row,
.lp-deck.is-deck .lp-deck-card {
  will-change: transform;
}
.lp-deck.is-deck .lp-deck-scroller {
  overflow: visible;
}
/* Sombra hacia la derecha: marca el borde de cada carta sobre la de abajo */
.lp-deck.is-deck .lp-deck-visual > * {
  box-shadow: 12px 0 28px -14px rgb(15 23 42 / 0.4), 0 1px 2px rgb(15 23 42 / 0.05);
}
.lp-deck.is-deck .lp-deck-meta {
  display: flex;
}
@media (min-width: 48rem) {
  .lp-deck.is-deck {
    --lp-deck-w: clamp(12rem, 21vw, 19rem);
    --lp-deck-vh: clamp(18rem, 26vw, 23rem);
  }
}
.lp-deck-progress {
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------------------------------------------------------------------------
 * Animaciones ligadas al scroll. landing-scroll escribe --p (0 → 1) en el
 * contenedor; el valor por defecto de cada var() es el estado de reposo, que
 * es también lo que se ve con prefers-reduced-motion (estas reglas no aplican).
 * Se usan translate/scale/rotate sueltos para no pisar los transform de
 * .lp-reveal ni el translate de landing-tilt.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero (modo exit): las palabras se separan, los corchetes se abren y la pila gira */
  .lp-hero-l1  { translate: calc(var(--p, 0) * -7vw) 0; }
  .lp-hero-w1  { translate: calc(var(--p, 0) * -12vw) 0; }
  .lp-hero-w2  { translate: calc(var(--p, 0) * 12vw) 0; }
  .lp-hero-bl  { translate: calc(var(--p, 0) * -4vw) 0; }
  .lp-hero-br  { translate: calc(var(--p, 0) * 4vw) 0; }
  .lp-hero-stack {
    rotate: calc(var(--p, 0) * -10deg);
    scale: calc(1 + var(--p, 0) * 0.18);
  }

  /* Marquesina (modo through): filas en direcciones opuestas */
  .lp-marquee-a { translate: calc(var(--p, 0.5) * -35%) 0; }
  .lp-marquee-b { translate: calc((var(--p, 0.5) - 1) * 35%) 0; }

  /* Bento (modo through): parallax suave de los fragmentos de UI */
  .lp-par-1 { translate: 0 calc((0.5 - var(--p, 0.5)) * 24px); }
  .lp-par-2 { translate: 0 calc((0.5 - var(--p, 0.5)) * 48px); }

  /* Pasos (modo enter): la línea punteada se dibuja */
  .lp-steps-line {
    transform-origin: left;
    scale: var(--p, 1) 1;
  }

  /* CTA final (modo enter): el panel crece y los corchetes se cierran */
  .lp-cta-panel { scale: calc(0.9 + var(--p, 1) * 0.1); }
  .lp-cta-bl    { translate: calc((1 - var(--p, 1)) * -1.2em) 0; }
  .lp-cta-br    { translate: calc((1 - var(--p, 1)) * 1.2em) 0; }
}

/* ERP (modo enter, solo desktop): los módulos convergen hacia Bridge */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .lp-erp-left  { translate: calc((1 - var(--p, 1)) * -96px) 0; opacity: calc(0.3 + var(--p, 1) * 0.7); }
  .lp-erp-right { translate: calc((1 - var(--p, 1)) * 96px) 0;  opacity: calc(0.3 + var(--p, 1) * 0.7); }
  .lp-erp-hub   { scale: calc(0.4 + var(--p, 1) * 0.6); }
  .lp-erp-lines { opacity: var(--p, 1); }
}

@keyframes lp-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes lp-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

@keyframes lp-pop {
  0%, 15%   { transform: scale(0); opacity: 0; }
  22%       { transform: scale(1.15); opacity: 1; }
  28%, 85%  { transform: scale(1); opacity: 1; }
  100%      { transform: scale(0); opacity: 0; }
}

@keyframes lp-ping {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

@keyframes lp-kanban-move {
  0%, 30%   { transform: translate(0, 0) rotate(0); }
  40%       { transform: translate(50%, -6px) rotate(2deg); box-shadow: 0 10px 20px rgb(15 23 42 / 0.12); }
  50%, 80%  { transform: translate(calc(100% + 0.5rem), 0) rotate(0); }
  100%      { transform: translate(0, 0) rotate(0); }
}

@keyframes lp-flow {
  to { stroke-dashoffset: -16; }
}

@keyframes lp-wave {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1); }
}