/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.3.2_@babel+core@7.29.7_@playwright+test@1.64.1_@types+node@20.19.43_babel-plugi_42d561aa0c1b5d98edc59e6d44243803/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.3.2_@babel+core@7.29.7_@playwright+test@1.64.1_@types+node@20.19.43_babel-plugi_42d561aa0c1b5d98edc59e6d44243803/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/landing/landing.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Landing pública: estilos propios (solo clases `lp-*` y `[data-tone]`).
 * No toca globals.css ni terei-css.ts. Todo respeta prefers-reduced-motion.
 */

.lp-root {
  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  /* `clip` (no `hidden`) para no romper el sticky del navbar. */
  overflow-x: clip;
}

/* Tonos `[data-tone]` viven en globals.css (register y landing los comparten). */

.lp-section {
  scroll-margin-top: 5.5rem;
}

/* ---------- Reveal al scroll (el hook pone data-reveal; sin JS se ve todo) ---------- */

.lp-reveal {
  transition:
    opacity 700ms var(--lp-ease),
    transform 700ms var(--lp-ease);
}

.lp-reveal[data-reveal="hidden"] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.lp-reveal[data-reveal="hidden"][data-variant="scale"] {
  transform: scale(0.94);
}

.lp-reveal[data-reveal="hidden"][data-variant="left"] {
  transform: translate3d(-28px, 0, 0);
}

.lp-reveal[data-reveal="hidden"][data-variant="right"] {
  transform: translate3d(28px, 0, 0);
}

/* ---------- Texto con degradé pastel animado ---------- */

@keyframes lp-gradient-pan {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

.lp-gradient-text {
  background-image: linear-gradient(
    100deg,
    var(--pastel-lavender-ink) 0%,
    var(--pastel-rose-ink) 25%,
    var(--pastel-peach-ink) 50%,
    var(--pastel-rose-ink) 75%,
    var(--pastel-lavender-ink) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lp-gradient-pan 14s linear infinite;
}

/* ---------- Brillo en botones ---------- */

.lp-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lp-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 750ms var(--lp-ease);
  pointer-events: none;
}

.lp-shine:hover::after {
  transform: translateX(120%);
}

/* ---------- Flotantes del mockup ---------- */

@keyframes lp-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--lp-rot, 0deg));
  }
  50% {
    transform: translate3d(0, -10px, 0) rotate(calc(var(--lp-rot, 0deg) * -1));
  }
}

.lp-float {
  --lp-rot: 0.6deg;
  animation: lp-float var(--lp-dur, 7s) ease-in-out var(--lp-delay, 0s) infinite;
  will-change: transform;
}

/* ---------- Inclinación 3D del mockup (sigue al mouse; solo con hover real) ----------
 * `TiltStage` publica --tx/--ty (-1…1), --k (1 con mouse encima) y --gx/--gy.
 * En reposo (desktop) queda inclinado; con el mouse encima apunta hacia él. */

.lp-tilt {
  transition: transform 700ms var(--lp-ease);
  transform-style: preserve-3d;
}

.lp-glare {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    28rem circle at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, white 38%, transparent),
    transparent 55%
  );
  transition: opacity 400ms var(--lp-ease);
}

@media (hover: hover) {
  .lp-tilt {
    --rest-y: 0;
    --rest-x: 0;
    transform: perspective(1400px)
      rotateY(calc(((1 - var(--k, 0)) * var(--rest-y) + var(--tx, 0) * 9) * 1deg))
      rotateX(calc(((1 - var(--k, 0)) * var(--rest-x) - var(--ty, 0) * 7) * 1deg));
  }
  /* Mientras sigue al mouse la respuesta es rápida; al soltar vuelve suave. */
  .lp-stage[data-active="true"] .lp-tilt {
    transition-duration: 140ms;
    transition-timing-function: ease-out;
  }
  .lp-stage[data-active="true"] .lp-glare {
    opacity: 0.55;
  }
  /* Las tarjetas flotantes se desplazan según su profundidad (propiedad `translate`,
     independiente del `transform` de la animación de flote). */
  .lp-float {
    translate: calc(var(--tx, 0) * var(--lp-depth, 0) * -1px) calc(var(--ty, 0) * var(--lp-depth, 0) * -0.7px);
    transition: translate 160ms ease-out;
  }
  .lp-stage[data-active="false"] .lp-float {
    transition-duration: 700ms;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .lp-tilt {
    --rest-y: -7;
    --rest-x: 4;
  }
}

/* ---------- Puntos de fondo ---------- */

.lp-dots {
  background-image: radial-gradient(
    color-mix(in srgb, var(--foreground) 16%, transparent) 1px,
    transparent 1.5px
  );
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

/* ---------- Pulso (punto "en vivo") ---------- */

@keyframes lp-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent);
  }
  100% {
    box-shadow: 0 0 0 10px transparent;
  }
}

.lp-pulse {
  animation: lp-pulse 1.8s ease-out infinite;
}

/* ---------- Marquee ---------- */

@keyframes lp-marquee {
  to {
    transform: translateX(-100%);
  }
}

.lp-marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lp-marquee-track {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  align-items: center;
  justify-content: space-around;
  gap: 0.75rem;
  padding-right: 0.75rem;
  animation: lp-marquee 42s linear infinite;
}

.lp-marquee:hover .lp-marquee-track {
  animation-play-state: paused;
}

/* ---------- Tarjetas bento con glow del tono ---------- */

.lp-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.lp-card::before {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -45%;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: var(--tone);
  opacity: 0.55;
  filter: blur(36px);
  transition:
    opacity 400ms var(--lp-ease),
    transform 600ms var(--lp-ease);
  pointer-events: none;
}

.lp-card:hover::before {
  opacity: 0.95;
  transform: scale(1.18);
}

.dark .lp-card::before {
  opacity: 1;
}

/* ---------- Borde animado (plan destacado) ---------- */

.lp-glow-border {
  padding: 2px;
  background-image: linear-gradient(
    110deg,
    color-mix(in srgb, var(--pastel-lavender-ink) 70%, transparent),
    color-mix(in srgb, var(--pastel-rose-ink) 70%, transparent),
    color-mix(in srgb, var(--pastel-peach-ink) 70%, transparent),
    color-mix(in srgb, var(--pastel-lavender-ink) 70%, transparent)
  );
  background-size: 300% 100%;
  animation: lp-gradient-pan 9s linear infinite;
}

/* ---------- Fondo animado del CTA final ---------- */

.lp-cta-bg {
  background-color: var(--card);
  background-image: linear-gradient(
    120deg,
    var(--pastel-lavender),
    var(--pastel-rose),
    var(--pastel-peach),
    var(--pastel-lavender)
  );
  background-size: 300% 100%;
  animation: lp-gradient-pan 18s linear infinite;
}

/* ---------- FAQ (details con animación de apertura) ---------- */

.lp-faq > summary {
  list-style: none;
}

.lp-faq > summary::-webkit-details-marker {
  display: none;
}

.lp-faq-chevron {
  transition: transform 300ms var(--lp-ease);
}

.lp-faq[open] .lp-faq-chevron {
  transform: rotate(180deg);
}

@keyframes lp-faq-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lp-faq[open] .lp-faq-body {
  animation: lp-faq-in 380ms var(--lp-ease) both;
}

/* Mejora progresiva: altura animada donde el navegador lo soporta. */
@supports selector(::details-content) {
  .lp-faq {
    interpolate-size: allow-keywords;
  }
  .lp-faq::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 380ms var(--lp-ease),
      content-visibility 380ms allow-discrete;
  }
  .lp-faq[open]::details-content {
    block-size: auto;
  }
}

/* ---------- Líneas conectoras (cómo funciona) ---------- */

.lp-connector {
  background-image: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--pastel-lavender-ink) 45%, transparent) 20%,
    color-mix(in srgb, var(--pastel-rose-ink) 45%, transparent) 80%,
    transparent
  );
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .lp-reveal,
  .lp-reveal[data-reveal="hidden"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .lp-gradient-text,
  .lp-glow-border,
  .lp-cta-bg,
  .lp-float,
  .lp-pulse,
  .lp-faq[open] .lp-faq-body {
    animation: none !important;
  }

  .lp-tilt,
  .lp-tilt:hover {
    transform: none !important;
    transition: none !important;
  }

  .lp-shine::after,
  .lp-card::before,
  .lp-faq-chevron {
    transition: none !important;
  }

  .lp-marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .lp-marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    animation: none !important;
  }

  .lp-marquee-track[aria-hidden="true"] {
    display: none;
  }

  .lp-faq::details-content {
    transition: none !important;
  }
}