/* ======================================================================
   TEMA · AURORA LIGHT
   ----------------------------------------------------------------------
   - Variables de color, sombras y gradientes base
   - Tipografías, resets mínimos y utilidades
   ====================================================================== */
:root {
  --f3-ink: #1e2748;
  --f3-ink-sub: #5a6a92;
  --f3-line: #e7ecfa;
  --f3-grad-a: #00bcd4;
  --f3-grad-b: #6a5cff;
  --f3-grad-c: #ff62c7;
  --f3-soft-1: #f8faff;
  --f3-soft-2: #eef2ff;

  /* Colores base del tema claro */
  --bg: #f7f9ff; /* fondo principal */
  --bg-2: #ffffff; /* fondo alterno/panel */
  --panel: #ffffff; /* tarjetas/paneles */
  --ink: #17213d; /* texto principal (no negro 100% para suavizar) */
  --muted: #5a678a; /* texto secundario */
  --line: #e5e9f4; /* líneas/bordes sutiles */

  /* Radio y sombra genérica para tarjetas */
  --rad: 18px;
  --shadow: 0 10px 34px rgba(14, 30, 70, 0.1);

  /* Paleta viva para acentos */
  --cian: #00bcd4; /* acento / botones */
  --mag: #ff62c7; /* gradiente 2 */
  --vio: #6a5cff; /* foco / enlaces */
  --lime: #2bb673; /* checks / validaciones */

  /* Gradiente de marca (cian → magenta) */
  --brand-grad: linear-gradient(90deg, var(--cian), var(--mag));

  /* “Aurora” de fondo en hero (manchas suaves) */
  --grad-1: radial-gradient(
      1000px 400px at 10% -10%,
      rgba(0, 188, 212, 0.18),
      transparent 60%
    ),
    radial-gradient(
      900px 380px at 90% 10%,
      rgba(106, 92, 255, 0.16),
      transparent 60%
    ),
    radial-gradient(
      800px 340px at 40% 120%,
      rgba(255, 98, 199, 0.12),
      transparent 60%
    );
}

/* Reset mínimo + tipografías */
* {
  box-sizing: border-box;
}
html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: Outfit, Manrope, system-ui, sans-serif;
  letter-spacing: 0.2px;
}
a {
  color: var(--vio);
  text-decoration: none;
}
a:hover {
  color: #4e3cff;
}
img {
  max-width: 100%;
  display: block;
}

/* Utilidades */
.fw-800 {
  font-weight: 800;
}
.text-muted-neo {
  color: var(--muted);
}

/* ======================================================================
   NAV (barra superior con efecto vidrio)
   ====================================================================== */
.nav-glass {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px) saturate(140%);
}
.navbar-brand .brand {
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.logo-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--cian), #72e5f1);
  box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.12),
    0 0 24px rgba(0, 188, 212, 0.35);
  display: inline-block;
}
.navbar-toggler {
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
  width: 44px;
  height: 40px;
}

/* Subrayado láser */
.nav-laser .nav-link {
  position: relative;
  color: var(--ink);
  opacity: 0.9;
  padding: 0.9rem 1rem;
}
.nav-laser .nav-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.45rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--vio), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.nav-laser .nav-link:hover::after,
.nav-laser .nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* ======================================================================
   HERO (aurora + partículas + mock “app” interactivo)
   ====================================================================== */
.hero-aurora {
  position: relative;
  padding: 70px 0 0;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.hero-aurora .aurora {
  position: absolute;
  inset: -10% -10% 0 -10%;
  z-index: 0;
  pointer-events: none;
  background: var(--grad-1);
  filter: blur(24px);
}
#bg-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Título con palabra neón degradada */
.hero-title {
  font-weight: 700;
}
.hero-title .txt-ink {
  color: var(--ink);
}
.hero-title .txt-neon {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(0, 188, 212, 0.22);
}

/* Chips y bullets del hero */
.chip-glow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  background: #e9fbfe;
  border: 1px solid #c9f2f7;
  color: #007a89;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgba(0, 188, 212, 0.08);
}
.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem 0.8rem;
}
.hero-bullets li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.93rem;
  color: #1a2948;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}
.hero-bullets li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.hero-bullets i {
  color: #00c46a;
  font-size: 0.95rem;
  background: rgba(0, 196, 106, 0.1);
  border-radius: 50%;
  padding: 0.35rem;
}

/* Separador ondulado */
.wave-sep svg {
  display: block;
  width: 100%;
  height: 68px;
}
.wave-sep path {
  fill: #ffffff;
}

/* ======================================================================
   SECCIONES genéricas
   ====================================================================== */
.section {
  padding: 80px 0;
  position: relative;
}
.section-soft {
  background: #f9fbff;
}

/* ======================================================================
   ¿Por qué? · Cards "Line Glow"
   ====================================================================== */
.row.g-4.mt-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.row.g-4.mt-1 > [class^="col"] {
  display: flex;
  align-items: stretch;
}
.feature-glow {
  background: #fff;
  border: 1px solid rgba(230, 235, 255, 0.7);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(14, 30, 70, 0.04);
  padding: 2rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 220px;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-glow:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(106, 92, 255, 0.15);
}
.fg-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  margin-bottom: 1rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #00bcd4, #6a5cff, #ff62c7);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 8px 18px rgba(106, 92, 255, 0.25);
}
.feature-glow h5 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1e2a4a;
  margin-bottom: 0.4rem;
}
.feature-glow p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #606c86;
}
@media (max-width: 767px) {
  .feature-glow {
    min-height: 200px;
    margin-bottom: 1rem;
  }
}

/* ======================================================================
   TIMELINE
   ====================================================================== */
.timeline-neo {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  padding-left: 10px;
}
.timeline-neo li {
  position: relative;
  padding: 12px 0 12px 16px;
}
.timeline-neo .dot {
  position: absolute;
  left: -7px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--mag), #d977ff);
  box-shadow: 0 0 0 6px rgba(217, 119, 255, 0.18),
    0 0 18px rgba(217, 119, 255, 0.3);
}
.timeline-neo h6 {
  margin: 0 0 4px;
  font-weight: 800;
  color: var(--ink);
}
.timeline-neo p {
  margin: 0;
  color: var(--muted);
}

/* ======================================================================
   CONTENEDOR “pantalla”
   ====================================================================== */
.screen-neo {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  aspect-ratio: 16/10;
  max-height: 420px;
  overflow: hidden;
}
.screen-neo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ======================================================================
   GALERÍA (Swiper) V2
   ====================================================================== */
.gal-v2 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.gal-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      800px 300px at 80% 15%,
      rgba(106, 92, 255, 0.08),
      transparent 60%
    ),
    radial-gradient(
      700px 260px at 15% 85%,
      rgba(0, 188, 212, 0.08),
      transparent 60%
    );
}
.gal-v2 .swiper {
  padding: 6px 2px 24px;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(14, 30, 70, 0.08);
  transition: transform 0.45s ease, box-shadow 0.35s ease;
  background: #fff;
}
.gallery-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 34px rgba(14, 30, 70, 0.16);
}
.gallery-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.9s ease;
}
.gallery-card:hover img {
  transform: scale(1.08);
}
.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
      120px 60px at 10% 10%,
      rgba(255, 255, 255, 0.22),
      transparent 60%
    );
}
/* badges */
.badge-cat {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-weight: 800;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(3px);
}
.badge-trend {
  position: absolute;
  right: 12px;
  top: 12px;
  font-weight: 800;
  font-size: 0.78rem;
  color: #2e3b63;
  background: #eef3ff;
  border: 1px solid #e0e7ff;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(106, 92, 255, 0.15);
}
/* bullets */
.gal-v2 .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #cfe1ff;
  opacity: 0.8;
}
.gal-v2 .swiper-pagination-bullet-active {
  background: linear-gradient(90deg, #00bcd4, #6a5cff, #ff62c7);
}
@media (max-width: 575.98px) {
  .gallery-card img {
    height: 220px;
  }
}

/* ======================================================================
   HERO · MOCK INTERACTIVO
   ====================================================================== */
.mock-interactive {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}
.device-frame {
  width: clamp(240px, 44vw, 340px);
  aspect-ratio: 9/19;
  border-radius: 0 0 34px 34px;
  background: #fff;
  border: 8px solid #fff;
  box-shadow: 0 26px 80px rgba(14, 30, 70, 0.22),
    0 0 38px rgba(0, 188, 212, 0.2);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}
.device-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 12px;
  border-radius: 0 0 12px 12px;
  background: #e9eefc;
  box-shadow: inset 0 -1px 0 #d9e3ff;
}
.mock-scroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask: linear-gradient(
    to bottom,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}
.scroll-inner {
  min-height: 160%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  animation: autoSlide 14s linear infinite;
}
.scroll-inner img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(14, 30, 70, 0.1);
  object-fit: cover;
}
@keyframes autoSlide {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(0);
  }
}
.mock-interactive:hover .scroll-inner,
.mock-interactive:focus-within .scroll-inner {
  animation-play-state: paused;
}
.mock-hint {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* ======================================================================
   PRECIOS · SLIM CARDS
   ====================================================================== */
.plan-slim {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 10px 24px rgba(14, 30, 70, 0.08);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.plan-slim:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(14, 30, 70, 0.12);
}
.plan-edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  display: block;
  background: linear-gradient(180deg, var(--cian), var(--vio));
  opacity: 0.9;
}
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 0 22px;
}
.plan-name {
  font: 800 15px/1 Manrope, system-ui;
  color: #30406a;
  background: #eef7ff;
  border: 1px solid #d7e9ff;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
}
.plan-tag {
  font: 800 12px/1 Manrope, system-ui;
  color: #5a3cff;
  background: #efeaff;
  border: 1px solid #e0d7ff;
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
}
.plan-body {
  padding: 8px 22px 22px;
}
.plan-price {
  margin: 0.2rem 0 1rem;
}
.plan-price span {
  font: 800 38px/1 Outfit, system-ui;
  color: var(--ink);
}
.plan-price small {
  color: var(--muted);
  margin-left: 4px;
}

/* Lista features dentro de la card */
.feat-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
}
.feat-group {
  font-weight: 800;
  color: #7a86a8;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.feat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px dashed #e7ebfb;
  border-radius: 12px;
  background: #fff;
}
.plan-popular .feat-row {
  background: linear-gradient(180deg, #ffffff, #fbf9ff);
}
.feat-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.feat-name i {
  color: #6b77a6;
  width: 18px;
  text-align: center;
}
.feat-mark {
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat-mark.yes i {
  color: var(--lime);
}
.feat-mark.no i {
  color: #b9c3df;
}

.btn-plan2 {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, var(--cian), var(--vio));
  box-shadow: 0 10px 24px rgba(0, 188, 212, 0.25);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.3s;
}
.btn-plan2-strong {
  background: linear-gradient(90deg, var(--vio), var(--mag));
  box-shadow: 0 14px 30px rgba(123, 92, 255, 0.25);
}
.btn-plan2::before,
.btn-plan2-strong::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-120%) skewX(-20deg);
}
.btn-plan2:hover::before,
.btn-plan2-strong:hover::before {
  animation: shineEffect 0.8s forwards;
}
@keyframes shineEffect {
  to {
    transform: translateX(200%) skewX(-20deg);
  }
}
.btn-plan2:hover,
.btn-plan2:active,
.btn-plan2-strong:hover,
.btn-plan2-strong:active {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 188, 212, 0.35);
}
.btn-plan2:active,
.btn-plan2-strong:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0, 188, 212, 0.25);
}
.plan-popular {
  border-color: #d8ccff;
  box-shadow: 0 18px 48px rgba(123, 92, 255, 0.16);
}
.plan-popular .plan-edge {
  background: linear-gradient(180deg, var(--vio), var(--mag));
}

/* ======================================================================
   BOTONES/ACORDEÓN/FORM/FOOTER/WA/MODAL
   ====================================================================== */
.cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 0;
  text-align: center;
}
.btn-cta-neo {
  background: linear-gradient(90deg, #00bcd4, #6a5cff, #ff62c7);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(106, 92, 255, 0.25);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.btn-cta-neo:hover {
  box-shadow: 0 6px 22px rgba(106, 92, 255, 0.35);
  transform: translateY(-3px);
}
.btn-outline-neo {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  font-weight: 700;
  transition: all 0.25s ease;
}
.btn-outline-neo:hover {
  background: #f5f7ff;
}
@media (max-width: 576px) {
  .cta-buttons {
    flex-direction: column;
    gap: 0.8rem;
  }
  .btn-cta-neo,
  .btn-outline-neo {
    width: 100%;
    max-width: 320px;
  }
}
.btn-cta-neo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%) skewX(-20deg);
}
.btn-cta-neo:hover::before {
  animation: shine 0.8s forwards;
}
@keyframes shine {
  to {
    transform: translateX(200%) skewX(-20deg);
  }
}
.btn-cta-neo:hover,
.btn-cta-neo:active {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 188, 212, 0.35);
}

.acc-neo .accordion-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.acc-neo .accordion-button {
  background: var(--panel);
  color: var(--ink);
  transition: color 0.2s, background-color 0.2s;
}
.acc-neo .accordion-button:not(.collapsed) {
  background: #f6f8ff;
  box-shadow: inset 0 -1px 0 var(--line);
}
.acc-neo .accordion-body {
  color: var(--muted);
}

.contact-neo {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.form-neo {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.form-neo:focus {
  border-color: #cfc9ff;
  box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.18);
}

.footer-neo {
  padding: 24px 0;
  border-top: 1px solid var(--line);
  background: #ffffff;
}
.text-muted-neo a {
  color: var(--muted);
}

.btn-float-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #052611;
  font-size: 24px;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.3);
}
.modal-neo {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.modal-neo .btn-close {
  filter: none;
}

/* ======================================================================
   FAQ mejorado (chips + glow + contacto glass)
   ====================================================================== */
.faq-actions .btn-xs {
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.86rem;
}
.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-weight: 800;
  font-size: 0.82rem;
  color: #3f4b78;
  text-decoration: none;
  background: #eef7ff;
  border: 1px solid #d7e9ff;
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  transition: filter 0.2s, transform 0.2s;
}
.chip:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

/* acordeón con numeración e ícono */
.acc-glow .accordion-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 20px rgba(14, 30, 70, 0.06);
}
.acc-glow .accordion-item + .accordion-item {
  margin-top: 10px;
}
.acc-glow .accordion-button {
  font-weight: 800;
  color: var(--ink);
  padding: 14px 16px 14px 14px;
  background: linear-gradient(180deg, #fff, #fbfbff);
  gap: 0.55rem;
}
.acc-glow .accordion-button::after {
  filter: hue-rotate(210deg) saturate(1.2);
}
.acc-glow .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px #eef0fb;
  background: linear-gradient(180deg, #ffffff, #f7f7ff);
}
.acc-glow .accordion-body {
  color: var(--muted);
  padding: 12px 16px 16px;
}

.q-idx {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font: 800 0.78rem/1.1 Manrope, system-ui;
  color: #5a3cff;
  background: #efeaff;
  border: 1px solid #e0d7ff;
}
.q-ic {
  color: #6b77a6;
}

/* contact glass + detalles */
.contact-glass {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffffcc, #ffffff) padding-box,
    linear-gradient(90deg, #e7faff, #f2eaff) border-box;
  box-shadow: 0 10px 28px rgba(14, 30, 70, 0.08);
}
.badge.eta {
  font-weight: 800;
  color: #5a3cff;
  background: #efeaff;
  border: 1px solid #e0d7ff;
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
}
.focus-glow:focus {
  box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.14), 0 1px 0 #e7ebfb;
  border-color: #bfefff;
}

/* ===== Validación sutil sin saltos (reemplaza al bloque anterior) ===== */
.req {
  color: #ff4d6d;
}

/* Reservar espacio p/ mensajes y no mover layout */
.form-neo + .invalid-msg,
textarea.form-neo + .invalid-msg {
  min-height: 18px; /* espacio fijo */
  display: block; /* siempre ocupa lugar */
  visibility: hidden; /* solo se oculta visualmente */
  margin-top: 0.25rem;
  color: #c2185b;
  font-weight: 700;
}
.is-invalid {
  border-color: #ffc0cb !important;
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.12);
}
.is-invalid + .invalid-msg,
textarea.is-invalid + .invalid-msg {
  visibility: visible;
}

/* ======================================================================
   SLIDER KEN BURNS
   ====================================================================== */
.kb-slider {
  position: relative;
  aspect-ratio: 16/10;
  max-height: 420px;
  overflow: hidden;
  isolation: isolate;
}
.kb-slider img {
  position: absolute;
  inset: 0;
  width: 110%;
  height: 110%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02) translate(0, 0);
  animation: kb_frame 24s linear infinite;
}
.kb-slider img:nth-child(1) {
  animation-delay: 0s;
}
.kb-slider img:nth-child(2) {
  animation-delay: 8s;
}
.kb-slider img:nth-child(3) {
  animation-delay: 16s;
}
@keyframes kb_frame {
  0% {
    opacity: 0;
    transform: scale(1.02) translate(0, 0);
    filter: blur(0);
  }
  5% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform: scale(1.1) translate(2%, -2%);
  }
  33% {
    opacity: 0;
    transform: scale(1.12) translate(2%, -2%);
    filter: blur(0.5px);
  }
  100% {
    opacity: 0;
    transform: scale(1.02) translate(0, 0);
    filter: blur(0);
  }
}
.kb-slider img:nth-child(2n) {
  animation-name: kb_frame_alt;
}
@keyframes kb_frame_alt {
  0% {
    opacity: 0;
    transform: scale(1.02) translate(0, 0);
    filter: blur(0);
  }
  5% {
    opacity: 1;
  }
  30% {
    opacity: 1;
    transform: scale(1.1) translate(-2%, 2%);
  }
  33% {
    opacity: 0;
    transform: scale(1.12) translate(-2%, 2%);
    filter: blur(0.5px);
  }
  100% {
    opacity: 0;
    transform: scale(1.02) translate(0, 0);
    filter: blur(0);
  }
}
.kb-slider:hover img,
.kb-slider:focus-within img {
  animation-play-state: paused;
}

/* ======================================================================
   MEDIA QUERIES
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scroll-inner {
    animation: none;
  }
  .btn-cta-neo {
    animation: none;
  }
  .kb-slider img {
    animation: none;
    opacity: 1;
  }
  .kb-slider img:not(:first-child) {
    display: none;
  }
}
@media (pointer: fine) {
  .mock-interactive[data-tilt] {
    will-change: transform;
    transition: transform 0.15s ease;
  }
}
@media (max-width: 991.98px) {
  .section {
    padding: 64px 0;
  }
  .nav-glass .navbar-collapse {
    background: #fff;
    border-top: 1px solid var(--line);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow);
    margin-top: 0.5rem;
    padding: 0.6rem 1rem 1rem;
  }
  .screen-neo {
    max-height: 340px;
  }
  .kb-slider {
    max-height: 340px;
  }
}
@media (max-width: 767.98px) {
  .faq-2col .col-md-6 {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .screen-neo {
    max-height: 260px;
  }
  .device-frame {
    width: min(82vw, 320px);
  }
  .kb-slider {
    max-height: 260px;
  }
  .feat-row {
    padding: 10px;
  }
  .badge.eta {
    display: none;
  }
}

/* ============================================================
   FOOTER PRO — OrdenPerfecta
   ============================================================ */
/* CTA integrado */
.f3-cta-wrap {
  padding: 10px 0 4px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 60%, #f7f9ff 100%);
}
.f3-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 20px;
  padding: 18px 20px;
  background: linear-gradient(
    90deg,
    var(--f3-grad-a),
    var(--f3-grad-b),
    var(--f3-grad-c)
  );
  color: #fff;
  box-shadow: 0 14px 40px rgba(106, 92, 255, 0.22);
}
.f3-cta h4 {
  margin: 0 0 4px;
  font: 800 1.2rem/1.2 Manrope, system-ui;
}
.f3-cta p {
  margin: 0;
  opacity: 0.95;
  font-weight: 700;
}
.f3-cta__actions {
  display: flex;
  gap: 10px;
}
.f3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 800 0.95rem/1 Manrope, system-ui;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.22s, filter 0.2s;
}
.f3-btn--solid {
  background: #fff;
  color: #0f1a2f;
  box-shadow: 0 10px 26px rgba(255, 255, 255, 0.15);
}
.f3-btn--solid:hover {
  transform: translateY(-2px);
  filter: brightness(0.98);
}
.f3-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}
.f3-btn--ghost:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15);
}
/* shine */
.f3-fx-shine {
  position: relative;
  overflow: hidden;
}
.f3-fx-shine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-20deg);
}
.f3-fx-shine:hover::before {
  animation: f3Shine 0.85s forwards;
}
@keyframes f3Shine {
  to {
    transform: translateX(120%) skewX(-20deg);
  }
}

/* Footer principal */
.f3-footer {
  position: relative;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--f3-soft-1) 55%,
    var(--f3-soft-2) 100%
  );
  color: var(--f3-ink);
  border-top: 1px solid var(--f3-line);
  padding-top: 14px;
}
.f3-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: -60px;
  height: 60px;
  background: radial-gradient(
    70% 100% at 50% 100%,
    rgba(106, 92, 255, 0.25),
    transparent 70%
  );
  pointer-events: none;
}
.f3-card {
  position: relative;
  padding: 20px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--f3-line);
  box-shadow: 0 18px 42px rgba(14, 30, 70, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.f3-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  position: relative;
}
.f3-brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, var(--f3-grad-a), transparent);
  opacity: 0.45;
  border-radius: 999px;
}
.f3-name {
  font: 800 22px/1 Manrope, system-ui;
}
.f3-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--f3-grad-a), #72e5f1);
  box-shadow: 0 0 0 6px rgba(0, 188, 212, 0.12),
    0 0 20px rgba(0, 188, 212, 0.35);
  animation: f3Pulse 3.2s ease-in-out infinite;
}
@keyframes f3Pulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(0, 188, 212, 0.12),
      0 0 16px rgba(0, 188, 212, 0.3);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(0, 188, 212, 0.16),
      0 0 24px rgba(0, 188, 212, 0.4);
  }
}
.f3-copy {
  color: var(--f3-ink-sub);
  margin: 0 0 10px;
}
.f3-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.f3-pill {
  font: 800 0.8rem/1 Manrope, system-ui;
  color: #30406a;
  background: #eef7ff;
  border: 1px solid #d7e9ff;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
}
.f3-title {
  font: 800 0.72rem/1 Manrope, system-ui;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #3b4a78;
  margin: 0 0 10px;
  position: relative;
  padding-bottom: 6px;
}
.f3-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--f3-grad-b), var(--f3-grad-a));
  border-radius: 999px;
  opacity: 0.55;
}
.f3-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.f3-links a {
  color: #41527c;
  font-weight: 700;
  text-decoration: none;
}
.f3-links a:hover {
  color: #2a3560;
  text-decoration: underline;
}
.f3-social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.f3-social a {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #2e3b63;
  background: linear-gradient(#f6f8ff, #eef3ff);
  border: 1px solid #dfe6ff;
  box-shadow: 0 3px 10px rgba(14, 30, 70, 0.06);
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.f3-social a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(14, 30, 70, 0.12);
  filter: brightness(1.02);
}
.f3-sep {
  border: 0;
  border-top: 1px solid var(--f3-line);
  margin: 18px 0 12px;
}
.f3-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.f3-made {
  color: #41527c;
  font-weight: 800;
}
.f3-legal {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #41527c;
}
.f3-legal a {
  color: #41527c;
  font-weight: 800;
}
.f3-legal a:hover {
  color: #2b3860;
}
.f3-bottom-accent {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--f3-grad-a),
    var(--f3-grad-b),
    var(--f3-grad-c)
  );
  opacity: 0.9;
  border-radius: 999px;
  margin-top: 10px;
}
@media (max-width: 991.98px) {
  .f3-cta {
    flex-direction: column;
    text-align: center;
  }
  .f3-cta__actions {
    width: 100%;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 575.98px) {
  .f3-card {
    padding: 18px 14px;
  }
  .f3-footer .row > [class^="col"] {
    text-align: center;
  }
  .f3-brand {
    justify-content: center;
  }
  .f3-brand::after {
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
  }
  .f3-badges {
    justify-content: center;
  }
  .f3-links {
    place-items: center;
  }
  .f3-social {
    justify-content: center;
  }
  .f3-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* ---------- WhatsApp flotante + mini chat ---------- */
.f3-wa {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #33e36a, #10d65a);
  border: 1px solid rgba(13, 189, 82, 0.55);
  box-shadow: 0 10px 26px rgba(16, 214, 90, 0.35),
    0 0 0 6px rgba(16, 214, 90, 0.12);
  transition: transform 0.18s, box-shadow 0.25s, filter 0.18s;
}
.f3-wa:hover {
  color: #fff;
  transform: translateY(-2px);
  filter: saturate(1.07);
  box-shadow: 0 18px 32px rgba(16, 214, 90, 0.38),
    0 0 0 8px rgba(16, 214, 90, 0.1);
}
@media (max-width: 575.98px) {
  .f3-wa {
    right: 14px;
    bottom: 18px;
  }
}

/* overlay */
.f3-wa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 36, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  z-index: 9998;
}
.f3-wa-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* mini chat */
.f3-wa-chat {
  position: fixed;
  right: 22px;
  bottom: 88px;
  width: 300px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(14, 30, 70, 0.18);
  overflow: hidden;
  font-family: Manrope, system-ui, sans-serif;
  transform: translateY(30px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.15, 0.75, 0.25, 1), opacity 0.28s,
    visibility 0.28s;
  z-index: 9999;
}
.f3-wa-chat.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}
.f3-wa-chat.hide {
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  visibility: hidden;
}
.f3-wa-header {
  background: linear-gradient(90deg, #00bcd4, #6a5cff, #ff62c7);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
}
.f3-wa-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.f3-wa-title i {
  font-size: 1.1rem;
}
.f3-wa-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}
.f3-wa-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.f3-wa-body label {
  font: 700 0.88rem/1 Manrope, system-ui;
  color: #2e3b63;
}
.f3-wa-body .mt-8 {
  margin-top: 6px;
}
.f3-wa-body input,
.f3-wa-body textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #dfe5fb;
  background: #fff;
  padding: 9px 11px;
  font-size: 0.95rem;
  color: #1e2748;
  resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.f3-wa-body input:focus,
.f3-wa-body textarea:focus {
  border-color: #6a5cff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(106, 92, 255, 0.16);
}

/* estado inválido (sutil) en chat */
.f3-hint {
  display: none;
  font-weight: 700;
  color: #d04a5e;
  font-size: 0.78rem;
  margin-top: -2px;
}
.f3-hint.show {
  display: block;
}
@keyframes f3Shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
}
.shake {
  animation: f3Shake 0.28s linear;
}
.f3-wa-send {
  margin-top: 6px;
  background: linear-gradient(135deg, #00e676, #00c853);
  color: #fff;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
.f3-wa-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 200, 83, 0.28);
}
.f3-wa-send[disabled] {
  cursor: not-allowed;
  filter: saturate(0.9);
  opacity: 0.9;
}
.f3-send-icon,
.f3-send-text,
.f3-send-done {
  transition: opacity 0.18s, transform 0.18s;
}
.f3-send-done {
  opacity: 0;
  transform: scale(0.8);
  color: #fff;
}
.f3-send-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: f3Spin 0.9s linear infinite;
  display: none;
}
@keyframes f3Spin {
  to {
    transform: rotate(360deg);
  }
}
.f3-wa-send.is-loading .f3-send-text,
.f3-wa-send.is-loading .f3-send-icon {
  opacity: 0;
  transform: translateY(-2px);
}
.f3-wa-send.is-loading .f3-send-spinner {
  display: inline-block;
}
.f3-wa-send.is-done {
  background: linear-gradient(135deg, #1ecb74, #10b86b);
  box-shadow: 0 10px 22px rgba(30, 203, 116, 0.28);
}
.f3-wa-send.is-done .f3-send-spinner {
  display: none;
}
.f3-wa-send.is-done .f3-send-done {
  opacity: 1;
  transform: scale(1);
}

@media (max-height: 560px) {
  .f3-wa-chat {
    bottom: 72px;
  }
}

/* ===== Anti-flicker: CTA y footer en su propia capa ===== */
.f3-cta,
.f3-cta__actions .f3-btn,
.f3-card,
.f3-bottom-accent {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}
/* Evita flicker si no hay soporte de backdrop-filter */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .f3-btn--ghost {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
  }
}
/* Espaciado limpio en íconos del FAQ */
.q-ic {
  color: #6b77a6;
  margin-right: 6px; /* separa ícono del texto */
  font-size: 1rem;
  opacity: 0.9;
  transition: color 0.2s ease;
}

.accordion-button:hover .q-ic {
  color: #5a3cff; /* color violeta al hover */
}

/* Alineación vertical y margen entre índice y texto */
.accordion-button .q-idx {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Espaciado limpio en íconos del FAQ */
.q-ic {
  color: #6b77a6;
  margin-right: 6px;
  font-size: 1rem;
  opacity: 0.9;
  transition: color 0.2s ease;
}
.accordion-button:hover .q-ic {
  color: #5a3cff;
}
.accordion-button .q-idx {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Reservar espacio p/ mensajes de error y evitar saltos */
.form-neo + .invalid-msg,
textarea.form-neo + .invalid-msg {
  min-height: 18px;
  display: block;
  visibility: hidden;
  margin-top: 0.25rem;
  color: #c2185b;
  font-weight: 700;
}
.is-invalid {
  border-color: #ffc0cb !important;
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.12);
}
.is-invalid + .invalid-msg,
textarea.is-invalid + .invalid-msg {
  visibility: visible;
}

.nav-glass {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid #e5e9f4;
  backdrop-filter: blur(10px);
}
.hero-title {
  font-weight: 700;
}
.btn-cta-neo {
  border-radius: 999px;
}


.faq-chips { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0 0 1rem; }
.faq-chips li { display:inline; }

/* ======================================================================
   ORDENPERFECTA · LANDING SISTEMA PARA RESTAURANTES
   Diseño específico de la landing comercial. Se mantiene separado con el
   prefijo op- para no mezclar estilos con módulos futuros del sitio.
   ====================================================================== */
:root {
  --op-ink: #14213d;
  --op-ink-soft: #50617f;
  --op-red: #f04438;
  --op-orange: #ff6b35;
  --op-orange-2: #ff8a3d;
  --op-blue: #2d66f2;
  --op-teal: #1b9e9a;
  --op-green: #18a957;
  --op-violet: #7455db;
  --op-soft: #f7f8fc;
  --op-line: #e8ebf3;
  --op-card: #ffffff;
  --op-shadow-sm: 0 10px 30px rgba(25, 42, 77, .08);
  --op-shadow: 0 20px 55px rgba(20, 33, 61, .14);
  --op-radius: 24px;
}

html { scroll-behavior: smooth; }
.op-body { background: #fff; color: var(--op-ink); overflow-x: hidden; }
.op-body main, .op-body section, .op-body header { scroll-margin-top: 86px; }
.op-body h1, .op-body h2, .op-body h3, .op-body p { margin-top: 0; }
.op-body a { text-decoration: none; }

/* Navegación */
.op-nav {
  min-height: 76px;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid rgba(226, 232, 242, .86);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  box-shadow: 0 8px 30px rgba(29, 42, 71, .04);
  z-index: 1050;
}
.op-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--op-ink); min-width: 0; }
.op-brand:hover { color: var(--op-ink); }
.op-brand-mark {
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(140deg, var(--op-red), var(--op-orange));
  box-shadow: 0 9px 18px rgba(240, 68, 56, .25);
}
.op-brand strong { display: block; font-family: Outfit, sans-serif; line-height: 1.08; font-size: 1.04rem; letter-spacing: -.2px; }
.op-brand small { display: block; margin-top: .12rem; color: #7b869b; font-size: .65rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.op-menu-toggle { width: 44px; height: 40px; display: grid; place-items: center; color: var(--op-ink); border: 1px solid var(--op-line); border-radius: 13px; }
.op-menu-toggle:focus { box-shadow: 0 0 0 .2rem rgba(240, 68, 56, .15); }
.op-nav-links .nav-link { padding: .8rem .8rem; color: #4e5c75; font-weight: 750; font-size: .88rem; }
.op-nav-links .nav-link:hover, .op-nav-links .nav-link:focus { color: var(--op-red); }
.op-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .76rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 14px;
  font-family: Outfit, Manrope, sans-serif;
  font-weight: 760;
  font-size: .93rem;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}
.op-btn:hover { transform: translateY(-2px); }
.op-btn-primary { color: #fff; background: linear-gradient(100deg, var(--op-red), var(--op-orange)); box-shadow: 0 12px 24px rgba(240, 68, 56, .24); }
.op-btn-primary:hover { color: #fff; box-shadow: 0 16px 30px rgba(240, 68, 56, .33); }
.op-btn-light { color: var(--op-ink); border-color: #dce3ef; background: rgba(255, 255, 255, .84); box-shadow: 0 8px 18px rgba(21, 33, 59, .06); }
.op-btn-light:hover { color: var(--op-red); background: #fff; border-color: rgba(240, 68, 56, .28); }
.op-btn-white { color: var(--op-red); background: #fff; box-shadow: 0 12px 26px rgba(53, 23, 11, .12); }
.op-btn-white:hover { color: #cf322b; }
.op-btn-nav { min-height: 42px; padding: .68rem .95rem; font-size: .86rem; }
.op-btn-full { width: 100%; }

/* Hero */
.op-hero { position: relative; padding: 156px 0 82px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fff9f7 100%); isolation: isolate; }
.op-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: radial-gradient(rgba(240, 68, 56, .13) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 72%); }
.op-hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(7px); pointer-events: none; }
.op-hero-orb-a { width: 410px; height: 410px; right: -80px; top: 120px; background: radial-gradient(circle, rgba(255, 186, 133, .38), rgba(255, 186, 133, 0) 68%); }
.op-hero-orb-b { width: 330px; height: 330px; left: -140px; bottom: -125px; background: radial-gradient(circle, rgba(255, 103, 72, .19), rgba(255, 103, 72, 0) 70%); }
.op-kicker, .op-eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--op-red); font-weight: 850; font-size: .78rem; line-height: 1.2; letter-spacing: .035em; text-transform: uppercase; }
.op-kicker { padding: .55rem .82rem; border: 1px solid rgba(240, 68, 56, .17); border-radius: 999px; background: rgba(255, 244, 241, .92); }
.op-kicker i { color: #13a957; }
.op-hero h1 { max-width: 600px; margin: 1.3rem 0 1.15rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: clamp(2.55rem, 5vw, 4.2rem); line-height: .99; letter-spacing: -.055em; font-weight: 830; }
.op-hero h1 span { display: block; color: var(--op-red); }
.op-hero-copy { max-width: 560px; margin-bottom: 1.55rem; color: var(--op-ink-soft); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.68; }
.op-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.op-hero-trust { display: grid; gap: .55rem; margin-top: 1.35rem; color: #51617b; font-size: .82rem; font-weight: 700; }
.op-hero-trust span { display: inline-flex; align-items: center; gap: .52rem; }
.op-hero-trust i { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; border-radius: 50%; background: var(--op-green); font-size: .62rem; }

/* Composición de screenshots reales */
.op-hero-showcase { position: relative; min-height: 520px; max-width: 735px; margin: 0 auto; }
.op-screen { overflow: hidden; border: 1px solid rgba(214, 222, 235, .86); background: #fff; box-shadow: var(--op-shadow); }
.op-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.op-screen-main { position: absolute; z-index: 1; left: 0; bottom: 0; width: 86%; border-radius: 19px; transform: rotate(-1.3deg); }
.op-screen-main picture { display: block; aspect-ratio: 1.97 / 1; }
.op-screen-bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 11px; color: #75809a; background: #f7f8fb; border-bottom: 1px solid #e6eaf0; font-size: .64rem; }
.op-screen-bar span { width: 7px; height: 7px; border-radius: 50%; background: #cad2df; }
.op-screen-bar span:nth-child(1) { background: #ff6b5f; }
.op-screen-bar span:nth-child(2) { background: #ffd36c; }
.op-screen-bar span:nth-child(3) { background: #6bce86; }
.op-screen-bar b { margin-left: 7px; font-weight: 800; }
.op-screen-dashboard, .op-screen-menu { position: absolute; z-index: 2; width: 42%; border-radius: 16px; box-shadow: 0 18px 36px rgba(22, 31, 54, .2); }
.op-screen-dashboard { top: 7px; right: 0; transform: rotate(4.2deg); }
.op-screen-menu { right: -1%; bottom: 22px; transform: rotate(3deg); }
.op-screen-dashboard picture, .op-screen-menu picture { display: block; aspect-ratio: 1.86 / 1; }
.op-mini-label { display: flex; align-items: center; gap: .34rem; position: absolute; z-index: 3; left: 9px; top: 9px; padding: .35rem .5rem; color: #fff; border-radius: 8px; background: rgba(20, 33, 61, .82); box-shadow: 0 5px 13px rgba(20, 33, 61, .17); font-size: .52rem; font-weight: 850; }
.op-mini-label i { color: #ffd271; }

/* Faja de beneficios */
.op-proof-strip { position: relative; z-index: 3; margin-top: -10px; padding-bottom: 14px; }
.op-proof-strip .container { overflow: hidden; border: 1px solid #edf0f4; border-radius: 19px; background: #fff; box-shadow: 0 14px 35px rgba(20, 33, 61, .07); }
.op-proof-item { min-height: 106px; display: flex; align-items: center; gap: .85rem; padding: 1.2rem 1.4rem; }
.op-proof-item:not(:last-child) { border-right: 1px solid #edf0f4; }
.op-proof-item > i { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; color: var(--op-red); border-radius: 13px; background: #fff0ec; font-size: 1.1rem; }
.op-proof-item strong { display: block; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: .96rem; font-weight: 790; }
.op-proof-item span { color: var(--op-ink-soft); font-size: .78rem; line-height: 1.5; }

/* Secciones y módulos */
.op-section { position: relative; padding: 98px 0; }
.op-section-soft { background: var(--op-soft); }
.op-section-heading { max-width: 720px; margin-bottom: 3rem; }
.op-section-heading h2, .op-left-title { margin: .68rem 0 .85rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-weight: 820; letter-spacing: -.038em; line-height: 1.08; }
.op-section-heading h2 { font-size: clamp(2rem, 3.2vw, 2.95rem); }
.op-left-title { font-size: clamp(2rem, 3vw, 2.68rem); }
.op-section-heading p, .op-body-copy { color: var(--op-ink-soft); font-size: 1rem; line-height: 1.72; }
.op-modules-grid { margin-top: .5rem; }
.op-module-card { position: relative; min-height: 242px; height: 100%; padding: 1.55rem; overflow: hidden; border: 1px solid #e9edf5; border-radius: 21px; background: #fff; box-shadow: 0 7px 18px rgba(27, 42, 73, .035); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.op-module-card::after { content: ""; position: absolute; width: 115px; height: 115px; right: -53px; bottom: -63px; border-radius: 50%; background: rgba(240, 68, 56, .045); transition: transform .3s ease; }
.op-module-card:hover { transform: translateY(-7px); border-color: rgba(240, 68, 56, .23); box-shadow: 0 18px 34px rgba(27, 42, 73, .1); }
.op-module-card:hover::after { transform: scale(1.25); }
.op-module-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 1.1rem; border-radius: 15px; font-size: 1.18rem; }
.op-icon-coral { color: #ed4d49; background: #fff0ef; }.op-icon-amber { color: #e88909; background: #fff5dc; }.op-icon-blue { color: #3067d8; background: #edf3ff; }.op-icon-violet { color: #6d58cf; background: #f0edff; }.op-icon-teal { color: #138e90; background: #e7fbfb; }.op-icon-green { color: #219c59; background: #e9faef; }
.op-module-card h3 { margin-bottom: .55rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: 1.16rem; font-weight: 800; }
.op-module-card p { position: relative; z-index: 1; margin-bottom: 1.05rem; color: var(--op-ink-soft); font-size: .88rem; line-height: 1.58; }
.op-module-card > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .55rem; color: var(--op-red); font-size: .79rem; font-weight: 830; }

/* Browsers con pantallas */
.op-system-section { background: #fff; }
.op-browser-frame { overflow: hidden; border: 1px solid #dfe6ef; border-radius: 22px; background: #fff; box-shadow: var(--op-shadow); }
.op-browser-header { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 13px; color: #77859d; background: #fbfcfe; border-bottom: 1px solid #edf0f4; font-size: .72rem; font-weight: 790; }
.op-browser-header span { width: 8px; height: 8px; border-radius: 50%; background: #d5dce6; }
.op-browser-header span:nth-child(1) { background: #ff6e64; }.op-browser-header span:nth-child(2) { background: #ffd06a; }.op-browser-header span:nth-child(3) { background: #6dc68b; }
.op-browser-header div { flex: 1; max-width: 230px; margin-left: 5px; padding: .26rem .5rem; text-align: center; color: #7b879b; border-radius: 6px; background: #f0f3f8; }
.op-browser-frame picture { display: block; }
.op-browser-wide picture { aspect-ratio: 1.86 / 1; }
.op-browser-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.op-check-list { display: grid; gap: .77rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.op-check-list li { display: flex; align-items: flex-start; gap: .72rem; color: #40506b; font-size: .93rem; line-height: 1.48; font-weight: 660; }
.op-check-list i { flex: 0 0 auto; margin-top: .07rem; color: var(--op-green); font-size: 1rem; }
.op-detail-pills { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.35rem; }
.op-detail-pills span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .68rem; color: #43526e; border: 1px solid #e4e9f1; border-radius: 10px; background: #fff; font-size: .78rem; font-weight: 740; box-shadow: 0 5px 12px rgba(23, 35, 58, .04); }
.op-detail-pills i { color: var(--op-red); }
.op-menu-section { background: linear-gradient(180deg, #fff 0%, #fff7f4 100%); }

/* Flujo */
.op-flow-section { overflow: hidden; background: #18213a; }
.op-flow-section .op-eyebrow, .op-flow-section h2 { color: #fff; }
.op-flow-section .op-section-heading p { color: rgba(229, 235, 247, .75); }
.op-flow { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 3rem; }
.op-flow::before { content: ""; position: absolute; top: 53px; left: 9%; right: 9%; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,138,61,.8), rgba(255,255,255,.1)); }
.op-flow-step { position: relative; z-index: 1; text-align: center; }
.op-flow-number { position: absolute; top: -10px; left: calc(50% + 22px); color: #ff9b74; font-size: .65rem; font-weight: 900; letter-spacing: .06em; }
.op-flow-icon { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 1rem; color: #fff; border: 1px solid rgba(255, 255, 255, .18); border-radius: 22px; background: linear-gradient(145deg, rgba(255, 112, 66, .95), rgba(214, 54, 55, .95)); box-shadow: 0 11px 22px rgba(255, 81, 51, .2); font-size: 1.42rem; }
.op-flow-step h3 { color: #fff; font-family: Outfit, sans-serif; font-size: 1rem; font-weight: 790; }
.op-flow-step p { max-width: 180px; margin: .4rem auto 0; color: rgba(227, 233, 245, .7); font-size: .8rem; line-height: 1.55; }

/* Precio */
.op-pricing-section { padding-top: 105px; padding-bottom: 105px; background: linear-gradient(180deg, #fff 0%, #fff6f2 100%); }
.op-pricing-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(315px, .7fr); gap: 3rem; overflow: hidden; padding: clamp(2rem, 4vw, 4rem); border-radius: 30px; color: #fff; background: radial-gradient(circle at 97% 8%, rgba(255, 159, 90, .32), transparent 35%), linear-gradient(135deg, #f04438 0%, #e64133 56%, #d92f2e 100%); box-shadow: 0 22px 55px rgba(213, 60, 43, .24); }
.op-pricing-card::before { content: ""; position: absolute; inset: auto -95px -160px auto; width: 400px; height: 400px; border: 58px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.op-pricing-copy { position: relative; z-index: 1; }
.op-eyebrow-light { color: rgba(255,255,255,.74); }
.op-pricing-copy h2 { max-width: 720px; margin: .7rem 0 .8rem; color: #fff; font-family: Outfit, sans-serif; font-size: clamp(2rem, 3.2vw, 3.05rem); font-weight: 820; line-height: 1.08; letter-spacing: -.038em; }
.op-pricing-copy > p { max-width: 660px; color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.65; }
.op-pricing-copy ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; margin: 1.45rem 0 0; padding: 0; list-style: none; }
.op-pricing-copy li { display: flex; align-items: flex-start; gap: .55rem; color: #fff; font-size: .86rem; font-weight: 680; line-height: 1.45; }
.op-pricing-copy li i { color: #ffe0a5; margin-top: .16rem; }
.op-price-panel { position: relative; z-index: 1; align-self: center; padding: 1.7rem; border: 1px solid rgba(255,255,255,.4); border-radius: 23px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(9px); }
.op-price-label { display: block; color: rgba(255,255,255,.85); font-size: .84rem; font-weight: 800; }
.op-price { display: flex; flex-direction: column; margin: .45rem 0 .8rem; }
.op-price > span { font-family: Outfit, sans-serif; font-size: clamp(3rem, 5vw, 4.3rem); font-weight: 850; line-height: .9; letter-spacing: -.055em; }
.op-price small { margin-top: .55rem; color: rgba(255,255,255,.8); font-size: .78rem; font-weight: 760; }
.op-price-panel > p { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; color: #fff3d7; font-size: .84rem; font-weight: 720; }.op-price-note { display: block; color: rgba(255,255,255,.78); font-size: .68rem; line-height: 1.45; }
.op-price-panel .op-btn { width: 100%; margin-top: .7rem; }

/* Prueba de 15 días */
.op-trial-section { background: #fff; }
.op-trial-note { display: flex; align-items: flex-start; gap: .78rem; margin-top: 1.55rem; padding: 1rem; border: 1px solid #ffe1d9; border-radius: 16px; background: #fff8f5; color: #59677e; font-size: .88rem; line-height: 1.53; }
.op-trial-note i { color: var(--op-red); font-size: 1.2rem; }.op-trial-note strong { color: var(--op-ink); }
.op-trial-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.op-trial-steps > div { display: flex; align-items: flex-start; gap: .85rem; min-height: 125px; padding: 1.1rem; border: 1px solid #e8edf4; border-radius: 18px; background: #fff; box-shadow: var(--op-shadow-sm); }
.op-trial-steps span { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; color: var(--op-red); border-radius: 12px; background: #fff0ec; font-family: Outfit, sans-serif; font-weight: 850; }
.op-trial-steps p { margin: .12rem 0 0; color: var(--op-ink-soft); font-size: .82rem; line-height: 1.5; }.op-trial-steps strong { display: block; margin-bottom: .18rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: .97rem; }

/* FAQ y formulario */
.op-accordion { margin-top: 1.35rem; overflow: hidden; border: 1px solid #e5eaf1; border-radius: 18px; background: #fff; box-shadow: 0 9px 20px rgba(26, 38, 66, .04); }
.op-accordion .accordion-item { border: 0; border-bottom: 1px solid #e9edf3; }.op-accordion .accordion-item:last-child { border-bottom: 0; }
.op-accordion .accordion-button { padding: 1.15rem 1.2rem; color: var(--op-ink); background: #fff; font-family: Outfit, sans-serif; font-size: .98rem; font-weight: 760; box-shadow: none; }
.op-accordion .accordion-button:not(.collapsed) { color: var(--op-red); background: #fff9f7; }
.op-accordion .accordion-button::after { background-size: 1rem; }
.op-accordion .accordion-body { padding: 0 1.2rem 1.15rem; color: var(--op-ink-soft); font-size: .9rem; line-height: 1.66; background: #fff9f7; }
.op-contact-card { padding: clamp(1.45rem, 3vw, 2.15rem); border: 1px solid #e6ebf2; border-radius: 24px; background: #fff; box-shadow: var(--op-shadow); }
.op-contact-top { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.5rem; }
.op-contact-icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 15px; background: linear-gradient(140deg, var(--op-red), var(--op-orange)); box-shadow: 0 10px 19px rgba(240,68,56,.25); }
.op-contact-top h2 { margin: 0 0 .22rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: 1.32rem; font-weight: 810; }.op-contact-top p { margin: 0; color: var(--op-ink-soft); font-size: .84rem; line-height: 1.45; }
.op-contact-card .form-label { margin-bottom: .42rem; color: #3b4963; font-size: .78rem; font-weight: 800; }.op-contact-card .form-label span { color: var(--op-red); }
.op-input { min-height: 47px; border: 1px solid #dfe6f0; border-radius: 12px; color: var(--op-ink); font-size: .9rem; }.op-input:focus { border-color: rgba(240,68,56,.55); box-shadow: 0 0 0 .2rem rgba(240,68,56,.12); }.op-textarea { min-height: 112px; resize: vertical; }
.op-invalid-msg { display: none; margin-top: .28rem; color: #d93732; font-size: .73rem; font-weight: 700; }.op-input.is-invalid + .op-invalid-msg { display: block; }.op-input.is-invalid { border-color: #d93732; }
.op-contact-note { margin: .78rem 0 0; color: #748096; font-size: .73rem; text-align: center; }.op-contact-note i { color: var(--op-green); margin-right: .3rem; }

/* Cierre y footer */
.op-final-cta { padding: 0 0 0; background: var(--op-soft); }.op-final-cta .container { transform: translateY(38px); }
.op-final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: 24px; color: #fff; background: linear-gradient(105deg, #ff5a36, #f03e38 53%, #e33ca7 160%); box-shadow: 0 18px 36px rgba(228, 60, 54, .24); }
.op-final-cta-inner span { color: rgba(255,255,255,.75); font-size: .76rem; font-weight: 830; letter-spacing: .07em; text-transform: uppercase; }.op-final-cta-inner h2 { max-width: 695px; margin: .35rem 0 0; font-family: Outfit, sans-serif; font-size: clamp(1.5rem, 2.4vw, 2.15rem); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; }
.op-footer { padding: 112px 0 25px; color: #d0d9e8; background: #152039; }.op-footer-brand { color: #fff; }.op-footer-brand:hover { color: #fff; }.op-footer p { max-width: 390px; margin: 1rem 0 0; color: #aeb9ce; font-size: .87rem; line-height: 1.65; }.op-footer h2 { margin: .15rem 0 1rem; color: #fff; font-family: Outfit, sans-serif; font-size: .93rem; font-weight: 800; }.op-footer ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }.op-footer li, .op-footer a { color: #b5c0d2; font-size: .84rem; }.op-footer a:hover { color: #fff; }.op-wa-footer { display: inline-flex; align-items: center; gap: .4rem; }.op-wa-footer i { color: #3dda76; font-size: 1rem; }
.op-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.8rem; padding-top: 1.1rem; color: #8490a7; border-top: 1px solid rgba(255,255,255,.1); font-size: .73rem; }
.op-floating-wa { position: fixed; z-index: 1040; right: 22px; bottom: 22px; width: 54px; height: 54px; display: grid; place-items: center; color: #fff; border: 3px solid #fff; border-radius: 50%; background: #1dbf62; box-shadow: 0 12px 25px rgba(20, 94, 49, .28); font-size: 1.55rem; transition: transform .2s ease, box-shadow .2s ease; }.op-floating-wa:hover { color: #fff; transform: translateY(-4px) scale(1.04); box-shadow: 0 17px 30px rgba(20, 94, 49, .35); }

/* Responsivo */
@media (max-width: 1199.98px) {
  .op-nav-links .nav-link { padding-left: .55rem; padding-right: .55rem; font-size: .83rem; }
  .op-hero-showcase { min-height: 490px; }
}
@media (max-width: 991.98px) {
  .op-nav { min-height: 69px; }.op-nav .navbar-collapse { padding: .65rem 0 1rem; }.op-nav-links { align-items: stretch !important; }.op-nav-links .nav-link { padding: .75rem 0; }.op-btn-nav { display: inline-flex; margin-top: .35rem; }
  .op-hero { padding-top: 125px; }.op-hero h1 { max-width: 650px; }
  .op-hero-showcase { max-width: 700px; margin-top: .25rem; }
  .op-proof-item { min-height: 94px; padding: 1rem; }.op-proof-item:not(:last-child) { border-right: 0; border-bottom: 1px solid #edf0f4; }
  .op-pricing-card { grid-template-columns: 1fr; gap: 2rem; }.op-price-panel { max-width: 440px; }
  .op-flow { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }.op-flow::before { display: none; }
}
@media (max-width: 767.98px) {
  .op-hero { padding: 116px 0 56px; }.op-hero h1 { font-size: clamp(2.45rem, 11.5vw, 3.55rem); }.op-hero-copy { font-size: .98rem; }.op-hero-actions { display: grid; grid-template-columns: 1fr; }.op-hero-actions .op-btn { width: 100%; }
  .op-hero-showcase { min-height: 387px; }.op-screen-main { width: 91%; }.op-screen-dashboard, .op-screen-menu { width: 43%; }.op-screen-dashboard { top: 4px; }.op-screen-menu { bottom: 10px; }
  .op-proof-strip { margin-top: 0; }.op-proof-strip .container { border-radius: 17px; }.op-proof-item { min-height: 0; padding: .95rem; }
  .op-section { padding: 70px 0; }.op-section-heading { margin-bottom: 2.1rem; }.op-section-heading h2, .op-left-title { font-size: clamp(1.9rem, 8vw, 2.45rem); }
  .op-module-card { min-height: 0; padding: 1.35rem; }.op-browser-frame { border-radius: 17px; }.op-browser-header { height: 34px; font-size: .62rem; }.op-browser-header div { max-width: 170px; }
  .op-flow { grid-template-columns: repeat(2, 1fr); gap: 1.55rem 1rem; }.op-flow-step p { font-size: .76rem; }.op-flow-icon { width: 61px; height: 61px; border-radius: 18px; font-size: 1.2rem; }
  .op-pricing-section { padding-top: 75px; padding-bottom: 75px; }.op-pricing-card { gap: 1.75rem; padding: 1.55rem; border-radius: 23px; }.op-pricing-copy ul { grid-template-columns: 1fr; }.op-price-panel { padding: 1.35rem; }
  .op-trial-steps { grid-template-columns: 1fr; }.op-trial-steps > div { min-height: auto; }.op-contact-card { padding: 1.25rem; border-radius: 19px; }.op-final-cta .container { transform: translateY(27px); }.op-final-cta-inner { align-items: flex-start; flex-direction: column; border-radius: 20px; }.op-final-cta-inner .op-btn { width: 100%; }.op-footer { padding-top: 95px; }.op-footer-bottom { flex-direction: column; margin-top: 2rem; }.op-floating-wa { right: 16px; bottom: 16px; width: 51px; height: 51px; }
}
@media (max-width: 430px) {
  .op-brand-mark { flex-basis: 35px; width: 35px; height: 35px; border-radius: 12px; }.op-brand strong { font-size: .98rem; }.op-brand small { font-size: .58rem; }
  .op-hero-showcase { min-height: 288px; }.op-screen-main { border-radius: 12px; }.op-screen-dashboard, .op-screen-menu { border-radius: 11px; }.op-screen-dashboard { width: 44%; }.op-screen-menu { width: 42%; }.op-mini-label { display: none; }.op-screen-bar { height: 22px; font-size: .48rem; }.op-screen-bar span { width: 5px; height: 5px; }
  .op-flow { grid-template-columns: 1fr; }.op-flow-step p { max-width: 245px; }.op-flow-number { left: calc(50% + 29px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ======================================================================
   MEJORAS DE CONVERSIÓN · DEMO, VISTAS AMPLIADAS Y ACCIONES FLOTANTES
   ====================================================================== */
.op-btn { cursor: pointer; }
.op-demo-section { overflow: hidden; background: linear-gradient(135deg, #fff9f7 0%, #f6f9ff 100%); }
.op-demo-player { position: relative; overflow: hidden; border: 1px solid rgba(220, 228, 240, .95); border-radius: 24px; background: #152039; box-shadow: var(--op-shadow); }
.op-demo-player::after { content: ""; position: absolute; z-index: 1; inset: auto -12% -44% auto; width: 310px; height: 310px; border: 44px solid rgba(255,255,255,.09); border-radius: 50%; pointer-events: none; }
.op-demo-video { position: relative; z-index: 0; display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #14213d; }
.op-demo-badge { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .7rem; color: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: rgba(20, 33, 61, .78); box-shadow: 0 8px 20px rgba(0,0,0,.18); backdrop-filter: blur(6px); font-size: .72rem; font-weight: 820; }
.op-demo-badge i { color: #ffd36c; }

.op-ideal-section { background: #fff; }
.op-ideal-card { height: 100%; padding: 1.45rem; border: 1px solid #e8edf4; border-radius: 20px; background: linear-gradient(180deg, #fff 0%, #fbfcff 100%); box-shadow: 0 8px 20px rgba(25, 42, 77, .045); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.op-ideal-card:hover { transform: translateY(-5px); border-color: rgba(240, 68, 56, .25); box-shadow: 0 17px 35px rgba(25, 42, 77, .09); }
.op-ideal-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 1rem; color: #ea4e48; border-radius: 15px; background: #fff0ed; font-size: 1.1rem; }
.op-ideal-icon-yellow { color: #d77f00; background: #fff4d8; }.op-ideal-icon-blue { color: #3269da; background: #eaf1ff; }.op-ideal-icon-green { color: #198d52; background: #e8f9ef; }
.op-ideal-card h3 { margin: 0 0 .45rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: 1.08rem; font-weight: 800; }
.op-ideal-card p { margin: 0; color: var(--op-ink-soft); font-size: .86rem; line-height: 1.58; }

.op-browser-frame { position: relative; transition: transform .22s ease, box-shadow .22s ease; }
.op-browser-frame:hover { transform: translateY(-4px); box-shadow: 0 26px 55px rgba(20, 33, 61, .18); }
.op-expand-demo { position: absolute; z-index: 5; top: 7px; right: 8px; display: inline-flex; align-items: center; gap: .35rem; min-height: 27px; padding: .3rem .5rem; color: #42516c; border: 1px solid #dde4ef; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 4px 10px rgba(20,33,61,.08); font-family: Outfit, sans-serif; font-size: .65rem; font-weight: 800; transition: color .2s ease, background .2s ease, transform .2s ease; }
.op-expand-demo:hover { color: #fff; border-color: var(--op-red); background: var(--op-red); transform: translateY(-1px); }

.op-floating-actions { position: fixed; z-index: 1040; right: 20px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: .72rem; }
.op-float-trial, .op-scroll-top { border: 0; cursor: pointer; }
.op-float-trial { min-height: 54px; display: inline-flex; align-items: center; gap: .56rem; padding: .78rem 1rem; color: #fff; border: 3px solid #fff; border-radius: 999px; background: linear-gradient(110deg, var(--op-red), var(--op-orange)); box-shadow: 0 14px 28px rgba(225, 66, 52, .34); font-family: Outfit, sans-serif; font-size: .89rem; font-weight: 820; transition: transform .2s ease, box-shadow .2s ease; }
.op-float-trial:hover { transform: translateY(-4px); box-shadow: 0 18px 33px rgba(225, 66, 52, .42); }
.op-float-trial i { font-size: 1rem; }
.op-scroll-top { width: 45px; height: 45px; display: grid; place-items: center; color: #53627d; border: 1px solid #e3e9f2; border-radius: 50%; background: #fff; box-shadow: 0 9px 21px rgba(20, 33, 61, .12); opacity: 0; visibility: hidden; transform: translateY(9px); pointer-events: none; transition: opacity .2s ease, visibility .2s ease, transform .2s ease, color .2s ease, background .2s ease; }
.op-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.op-scroll-top:hover { color: #fff; background: var(--op-ink); }

.op-modal-content { overflow: hidden; border: 0; border-radius: 24px; box-shadow: 0 26px 70px rgba(20, 33, 61, .28); }
.op-modal-header { align-items: flex-start; padding: 1.7rem 1.75rem 1.1rem; border: 0; }
.op-modal-header .btn-close { margin: .1rem 0 0 1rem; }
.op-modal-kicker { display: inline-flex; align-items: center; gap: .35rem; color: var(--op-red); font-size: .72rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.op-modal-header h2 { margin: .45rem 0 .35rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: clamp(1.6rem, 3vw, 2.12rem); font-weight: 830; letter-spacing: -.035em; }
.op-modal-header p { margin: 0; color: var(--op-ink-soft); font-size: .9rem; line-height: 1.55; }
.op-modal-content .form-label { margin-bottom: .42rem; color: #3b4963; font-size: .78rem; font-weight: 800; }.op-modal-content .form-label span { color: var(--op-red); }
.op-quick-textarea { min-height: 88px; }
.op-video-modal { background: #14213d; }.op-video-modal .op-modal-header { background: #fff; }.op-modal-video { display: block; max-height: 72vh; border-radius: 0 0 20px 20px; background: #111a2f; }
.op-screenshot-modal .modal-body { background: #f6f8fc; }.op-screenshot-modal-image { display: block; width: 100%; max-height: 74vh; object-fit: contain; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; }
.op-toast-container { z-index: 1100; }.op-toast { overflow: hidden; min-width: min(350px, calc(100vw - 34px)); color: #fff; border: 0; border-radius: 14px; background: #1a9a57; box-shadow: 0 18px 36px rgba(20, 102, 57, .25); }.op-toast .toast-body { display: flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 720; }.op-toast .toast-body i { color: #e1ffe9; font-size: 1.05rem; }.op-toast .btn-close { filter: invert(1); }
.op-footer-legal { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }.op-footer-legal a { color: #aebbd2; }.op-footer-legal a:hover { color: #fff; }

@media (max-width: 767.98px) {
  .op-demo-player { border-radius: 18px; }.op-demo-badge { top: 9px; left: 9px; padding: .38rem .5rem; font-size: .63rem; }
  .op-ideal-card { padding: 1.25rem; }.op-expand-demo { top: 5px; right: 5px; min-height: 24px; padding: .25rem .42rem; font-size: .59rem; }
  .op-floating-actions { right: 15px; bottom: 15px; gap: .6rem; }.op-float-trial { width: 54px; height: 54px; justify-content: center; padding: 0; }.op-float-trial span { display: none; }.op-scroll-top { width: 42px; height: 42px; }
  .op-modal-header { padding: 1.3rem 1.25rem .85rem; }.op-modal-content .modal-body { padding: 1.25rem; }.op-video-modal .modal-body { padding: 0; }.op-screenshot-modal .modal-body { padding: 1rem; }
  .op-footer-legal { justify-content: flex-start; }
}

/* Páginas legales de apoyo */
.op-legal-page { min-height: calc(100vh - 230px); padding: 10px 0 72px; background: linear-gradient(180deg, #fff9f7 0%, #f7f9fd 100%); }
.op-legal-card { max-width: 900px; margin: 0 auto; padding: clamp(1.6rem, 4vw, 3.2rem); border: 1px solid #e4eaf3; border-radius: 25px; background: #fff; box-shadow: var(--op-shadow-sm); }
.op-legal-card h1 { margin: .6rem 0 .3rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 840; letter-spacing: -.05em; }
.op-legal-card h2 { margin: 2rem 0 .7rem; color: var(--op-ink); font-family: Outfit, sans-serif; font-size: 1.3rem; font-weight: 810; }
.op-legal-card p { color: var(--op-ink-soft); font-size: .97rem; line-height: 1.78; }.op-legal-date { color: #8390a4 !important; font-size: .8rem !important; }
.op-legal-callout { display: flex; align-items: flex-start; gap: .75rem; margin-top: 2rem; padding: 1rem 1.1rem; color: #5d5267; border: 1px solid #fee0d6; border-radius: 14px; background: #fff7f3; font-size: .84rem; line-height: 1.55; }.op-legal-callout i { margin-top: .1rem; color: var(--op-red); }
.op-legal-footer { padding-top: 1.6rem; }


/* Consentimiento de privacidad en formularios */
.op-privacy-check { margin-top: .1rem; padding: .78rem .9rem .75rem 2.2rem; border: 1px solid #e4eaf3; border-radius: 13px; background: #fbfcfe; }
.op-privacy-check .form-check-input { margin-top: .16rem; }
.op-privacy-check .form-check-label { color: #647189; font-size: .74rem; line-height: 1.5; }
.op-privacy-check a { color: var(--op-red); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.op-privacy-check .form-check-input.is-invalid { border-color: #d93732; box-shadow: 0 0 0 .15rem rgba(217,55,50,.11); }
.op-invalid-checkbox { display: none; margin-top: .35rem; color: #d93732; font-size: .71rem; font-weight: 750; }
.op-privacy-check .form-check-input.is-invalid ~ .op-invalid-checkbox { display: block; }

/* Legales: estructura ampliada */
.op-legal-card h3 { margin: 1.25rem 0 .45rem; color: #33435e; font-family: Outfit, sans-serif; font-size: 1.04rem; font-weight: 800; }
.op-legal-card ul, .op-legal-card ol { margin: .55rem 0 1rem; padding-left: 1.2rem; color: var(--op-ink-soft); }
.op-legal-card li { margin: .45rem 0; font-size: .95rem; line-height: 1.7; }
.op-legal-card a { color: var(--op-red); font-weight: 780; text-decoration: underline; text-underline-offset: 2px; }
.op-legal-intro { padding: 1rem 1.1rem; border-left: 4px solid var(--op-red); border-radius: 0 14px 14px 0; background: #fff7f3; color: #536177; font-size: .96rem; line-height: 1.72; }
.op-legal-summary { margin: 1.25rem 0; padding: 1rem 1.1rem; border: 1px solid #e5eaf1; border-radius: 16px; background: #fafcff; }
.op-legal-summary strong { display: block; margin-bottom: .35rem; color: var(--op-ink); font-family: Outfit, sans-serif; }
.op-legal-summary p { margin: 0; }
.op-legal-placeholder { display: inline-block; padding: .08rem .35rem; color: #a1432f; border: 1px dashed #ee9a83; border-radius: 5px; background: #fff4ef; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; font-weight: 700; }
.op-legal-table { width: 100%; margin: 1rem 0 1.4rem; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #e5eaf1; border-radius: 13px; font-size: .9rem; }
.op-legal-table th, .op-legal-table td { padding: .82rem .88rem; vertical-align: top; border-bottom: 1px solid #edf0f5; text-align: left; line-height: 1.55; }
.op-legal-table th { width: 33%; color: var(--op-ink); background: #fafbfe; font-family: Outfit, sans-serif; font-weight: 800; }
.op-legal-table tr:last-child td, .op-legal-table tr:last-child th { border-bottom: 0; }
.op-legal-warning { display: flex; align-items: flex-start; gap: .75rem; margin: 1.1rem 0 1.4rem; padding: 1rem 1.1rem; color: #6c4d1d; border: 1px solid #f9d895; border-radius: 14px; background: #fffaf0; font-size: .86rem; line-height: 1.58; }
.op-legal-warning i { margin-top: .1rem; color: #d8900d; }
@media (max-width: 575.98px) { .op-legal-table th { width: auto; }.op-legal-table, .op-legal-table tbody, .op-legal-table tr, .op-legal-table th, .op-legal-table td { display: block; }.op-legal-table th { padding-bottom: .25rem; border-bottom: 0; }.op-legal-table td { padding-top: .25rem; }.op-privacy-check { padding-left: 2rem; } }


/* =====================================================================
   CORRECCIÓN MÓVIL · NAVBAR Y DESBORDAMIENTO HORIZONTAL
   ---------------------------------------------------------------------
   Evita que un elemento ancho permita desplazar toda la landing hacia
   los lados en móviles. También hace que la marca y el botón hamburguesa
   compartan el ancho disponible sin salirse de la pantalla.
   ===================================================================== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Fallback para navegadores que no soporten overflow: clip. */
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.op-body {
  position: relative;
  min-width: 0;
}

.op-nav.fixed-top {
  left: 0;
  right: 0;
  width: auto;
  max-width: 100%;
}

.op-nav > .container,
.op-nav .navbar-collapse {
  min-width: 0;
  max-width: 100%;
}

/* Bootstrap agrega margen a navbar-brand; aquí se elimina para dejar
   espacio suficiente al botón hamburguesa en pantallas angostas. */
.op-nav .navbar-brand {
  margin-right: 0;
}

@media (max-width: 991.98px) {
  .op-nav .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 56px);
  }

  .op-brand > span:last-child {
    min-width: 0;
    overflow: hidden;
  }

  .op-brand strong,
  .op-brand small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .op-nav .op-menu-toggle {
    flex: 0 0 44px;
    margin-left: .75rem;
  }

  .op-nav .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
  }
}

@media (max-width: 374.98px) {
  .op-nav {
    min-height: 64px;
  }

  .op-nav .container {
    padding-right: .8rem;
    padding-left: .8rem;
  }

  .op-brand-mark {
    flex-basis: 33px;
    width: 33px;
    height: 33px;
    border-radius: 11px;
  }

  .op-brand strong {
    font-size: .93rem;
  }

  .op-brand small {
    font-size: .54rem;
  }

  .op-nav .op-menu-toggle {
    width: 42px;
    height: 39px;
    flex-basis: 42px;
    margin-left: .55rem;
  }
}