/* ============================================================
   LynxWeb — Componentes UI reutilizables
   ------------------------------------------------------------
   Componentes estilizados con los design tokens (tokens.css).
   Pensados para reutilizarse en TODAS las landings y unificar
   la estética. Cargar DESPUÉS de tokens.css y custom.css.

   COHERENCIA: replican el lenguaje visual ya existente del sitio
   (botón .reset-button): rojo #d00418 plano, CHAFLÁN en la esquina
   inferior derecha (clip-path), hover a azul oscuro #001925.
   No se introducen gradientes ni radios redondeados ajenos al tema.

   Convención de nombres: prefijo .lx- para no colisionar.
   ============================================================ */

/* ----------------------------------------------------------
   Botón de marca — misma estética que .reset-button del sitio
   (rojo plano + chaflán inferior-derecha + hover azul oscuro).
   Úsalo para que TODOS los botones sean coherentes.
   ---------------------------------------------------------- */
.lx-btn {
  display: inline-block;
  margin-top: var(--lx-space-5, 1.5rem);
  padding: 10px 20px;
  font-family: var(--lx-font-ui, "DM Sans", sans-serif);
  font-weight: 700;
  font-size: var(--lx-fs-md, 1.125rem);
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--lx-brand-strong, #d00418);
  /* chaflán inferior-derecha, firma visual del sitio */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  filter: drop-shadow(1px 1px 0px var(--lx-brand-strong, #d00418));
  transition: background-color var(--lx-dur-base,250ms) ease-in-out,
              color var(--lx-dur-base,250ms) ease-in-out;
  cursor: pointer;
  border: 0;
}
.lx-btn:hover,
.lx-btn:focus-visible {
  background: var(--lx-ink-blue, #001925);
  color: #fff;
  text-decoration: none;
}

/* Variante "fantasma" sobre fondo oscuro (borde blanco -> relleno rojo) */
.lx-btn--ghost {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  filter: none;
}
.lx-btn--ghost:hover,
.lx-btn--ghost:focus-visible {
  background: var(--lx-brand-strong, #d00418);
  border-color: var(--lx-brand-strong, #d00418);
  color: #fff;
}

/* ----------------------------------------------------------
   Pricing band — bloque de precio orientativo
   Alineado al tema: fondo oscuro, filo rojo plano, chaflán tech.
   ---------------------------------------------------------- */
.lx-pricing {
  margin: var(--lx-space-7, 3rem) auto;
  max-width: 720px;
  padding: var(--lx-space-7, 3rem) var(--lx-space-6, 2rem);
  text-align: center;
  background: var(--lx-ink, #1a1a1a);
  color: #fff;
  /* mismo chaflán que los botones, escalado a card */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  position: relative;
}
/* Filo rojo plano superior (color de marca, sin gradiente) */
.lx-pricing::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--lx-brand-strong, #d00418);
}

.lx-pricing__eyebrow {
  display: inline-block;
  font-family: var(--lx-font-body, sans-serif);
  font-size: var(--lx-fs-xs, .8125rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* cian neón: acento real del tema (usado en el efecto glitch) */
  color: var(--lx-accent, #00e6f6);
  margin-bottom: var(--lx-space-3, .75rem);
}

.lx-pricing__amount {
  font-family: var(--lx-font-display, sans-serif);
  font-weight: 700;
  line-height: var(--lx-lh-tight, 1.15);
  font-size: var(--lx-fs-2xl, 2.75rem);
  margin: 0;
}
.lx-pricing__amount .lx-pricing__from {
  display: block;
  font-family: var(--lx-font-body, sans-serif);
  font-weight: 400;
  font-size: var(--lx-fs-sm, .9375rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.7);
  margin-bottom: var(--lx-space-1, .25rem);
}
.lx-pricing__amount .lx-pricing__cur { color: var(--lx-brand-strong, #d00418); }
.lx-pricing__amount .lx-pricing__period {
  font-family: var(--lx-font-body, sans-serif);
  font-weight: 400;
  font-size: var(--lx-fs-md, 1.125rem);
  color: rgba(255,255,255,.8);
}

.lx-pricing__note {
  font-size: var(--lx-fs-xs, .8125rem);
  color: rgba(255,255,255,.55);
  margin-top: var(--lx-space-2, .5rem);
}

.lx-pricing__sub {
  font-family: var(--lx-font-body, sans-serif);
  font-size: var(--lx-fs-md, 1.125rem);
  color: rgba(255,255,255,.9);
  margin: var(--lx-space-4, 1rem) auto 0;
  max-width: 46ch;
  line-height: var(--lx-lh-base, 1.6);
}

@media (max-width: 575.98px) {
  .lx-pricing {
    padding: var(--lx-space-6,2rem) var(--lx-space-4,1rem);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  }
  .lx-pricing__amount { font-size: var(--lx-fs-xl, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lx-btn { transition: none; }
}