/* =========================================================
   LinkGrape — Landing Page estilos personalizados
   ========================================================= */

:root {
  --primary: #6633CC;
  --primary-dark: #45238B;
}

* { scrollbar-width: thin; scrollbar-color: #6633CC transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #6633CC; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body { overflow-x: hidden; max-width: 100%; position: relative; }

/* Los elementos position:fixed (WhatsApp, volver arriba, navbar) se posicionan
   respecto al viewport de layout, no al visual. Si algo en la pagina desborda
   horizontalmente, ese viewport se ensancha y los fixed "right" quedan fuera
   de la pantalla visible en moviles. overflow-x:hidden en html+body evita eso. */

::selection { background: #6633CC; color: #fff; }

/* ================= NAVBAR ================= */
#navbar { background: transparent; }
#navbar.scrolled {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(20,10,50,0.06), 0 10px 30px -15px rgba(20,10,50,0.15);
}
@media (prefers-color-scheme: dark) {
  #navbar.scrolled { background: rgba(16,10,29,0.8); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
}
#navbar.scrolled .nav-link,
#navbar.scrolled #menuToggle { color: #1A112C; }
@media (prefers-color-scheme: dark) {
  #navbar.scrolled .nav-link,
  #navbar.scrolled #menuToggle { color: #fff; }
}
#navbar:not(.scrolled) .nav-link { color: rgba(255,255,255,0.85); }
#navbar:not(.scrolled) #menuToggle { color: #fff; }

/* Logo: version clara (onDark) mientras el navbar es transparente sobre el hero,
   version a color (onLight) cuando el navbar se vuelve solido al hacer scroll.
   !important evita que utilidades de Tailwind (flex/block) generadas dinamicamente
   por el CDN empaten en especificidad y dejen ambos logos visibles a la vez. */
#navbar .logo-state { align-items: center; }
#navbar .logo-state-onDark { display: inline-flex !important; }
#navbar .logo-state-onLight { display: none !important; }
#navbar.scrolled .logo-state-onDark { display: none !important; }
#navbar.scrolled .logo-state-onLight { display: inline-flex !important; }

.nav-link { position: relative; color: inherit; }
.nav-link:hover { background: rgba(102,51,204,0.1); color: #6633CC !important; }
.nav-link.active { background: #6633CC; color: #fff !important; }

.mobile-link { color: #1A112C; }
@media (prefers-color-scheme: dark) { .mobile-link { color: #fff; } }
.mobile-link:hover, .mobile-link.active { background: rgba(102,51,204,0.1); color: #6633CC !important; }

/* ================= HERO ================= */
.hero-gradient {
  background: radial-gradient(circle at 20% 20%, #351B6A 0%, #1A112C 45%, #100A1D 100%);
}
.hero-mesh {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}

/* ================= SERVICE CARDS ================= */
.service-card {
  background: #fff;
  border: 1px solid rgba(20,10,50,0.06);
  border-radius: 1.75rem;
  padding: 2.25rem;
  box-shadow: 0 4px 24px rgba(20,10,50,0.06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px -15px rgba(102,51,204,0.3); border-color: rgba(102,51,204,0.3); }
@media (prefers-color-scheme: dark) {
  .service-card { background: #221639; border-color: rgba(255,255,255,0.06); }
}

/* ================= STAT BOX ================= */
.stat-box {
  background: #fff;
  border: 1px solid rgba(20,10,50,0.06);
  border-radius: 1.5rem;
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 4px 24px rgba(20,10,50,0.06);
}
@media (prefers-color-scheme: dark) { .stat-box { background: #221639; border-color: rgba(255,255,255,0.06); } }

/* ================= COMPARE ================= */
.compare-card {
  background: #fff;
  border: 1px solid rgba(20,10,50,0.08);
  border-radius: 1.75rem;
  padding: 2.5rem;
}
@media (prefers-color-scheme: dark) { .compare-card { background: #221639; border-color: rgba(255,255,255,0.06); } }
.compare-card-active {
  background: linear-gradient(135deg, #6633CC, #45238B);
  border: none;
  box-shadow: 0 20px 50px -15px rgba(102,51,204,0.5);
}

/* ================= PLANES ================= */
.plan-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(20,10,50,0.08);
  border-radius: 1.75rem;
  padding: 2.5rem;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px -15px rgba(102,51,204,0.25); }
@media (prefers-color-scheme: dark) { .plan-card { background: #221639; border-color: rgba(255,255,255,0.06); } }

.plan-card-featured {
  background: linear-gradient(160deg, #6633CC, #45238B);
  border: none;
  transform: scale(1.03);
  box-shadow: 0 25px 60px -15px rgba(102,51,204,0.55);
}
.plan-card-featured:hover { transform: scale(1.03) translateY(-6px); }

.plan-btn {
  text-align: center;
  border: 2px solid #6633CC;
  color: #6633CC;
  font-weight: 700;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  transition: all .3s ease;
}
.plan-btn:hover { background: #6633CC; color: #fff; }

.plan-btn-featured {
  text-align: center;
  background: #fff;
  color: #6633CC;
  font-weight: 700;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  transition: all .3s ease;
}
.plan-btn-featured:hover { background: #F2EEFE; transform: translateY(-2px); }

/* ================= STEPS ================= */
.step-card { position: relative; text-align: center; z-index: 1; }
.step-num {
  width: 3.5rem; height: 3.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #6633CC, #45238B);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.25rem;
  margin: 0 auto 1.25rem;
  box-shadow: 0 10px 30px -8px rgba(102,51,204,0.5);
}

/* ================= BENEFICIOS ================= */
.benefit-card {
  background: #fff;
  border: 1px solid rgba(20,10,50,0.06);
  border-radius: 1.25rem;
  padding: 1.75rem 1rem;
  text-align: center;
  box-shadow: 0 4px 24px rgba(20,10,50,0.05);
  transition: transform .3s ease, box-shadow .3s ease;
}
.benefit-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px -10px rgba(102,51,204,0.3); }
.benefit-card i { font-size: 1.5rem; color: #6633CC; margin-bottom: .75rem; display: block; }
.benefit-card p { font-size: .85rem; font-weight: 600; color: #4b5563; }
@media (prefers-color-scheme: dark) {
  .benefit-card { background: #221639; border-color: rgba(255,255,255,0.06); }
  .benefit-card p { color: #d1d5db; }
}

/* ================= LOGO MARQUEE ================= */
.logo-marquee-wrap { overflow: hidden; position: relative; }
.logo-marquee-wrap::before, .logo-marquee-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
}
.logo-marquee-wrap::before { left: 0; background: linear-gradient(90deg, #F9FAFB, transparent); }
.logo-marquee-wrap::after { right: 0; background: linear-gradient(270deg, #F9FAFB, transparent); }
@media (prefers-color-scheme: dark) {
  .logo-marquee-wrap::before { background: linear-gradient(90deg, #221639, transparent); }
  .logo-marquee-wrap::after { background: linear-gradient(270deg, #221639, transparent); }
}
.logo-marquee { display: flex; gap: 1rem; width: max-content; }
.logo-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid rgba(20,10,50,0.06);
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: .85rem; color: #9ca3af;
  filter: grayscale(1); opacity: .7; white-space: nowrap;
  transition: all .3s ease;
}
.logo-pill:hover { filter: grayscale(0); opacity: 1; color: #6633CC; }
@media (prefers-color-scheme: dark) { .logo-pill { background: #221639; border-color: rgba(255,255,255,0.06); } }

/* ================= FORM (glassmorphism sutil) ================= */
.form-glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(20,10,50,0.08);
  border-radius: 1.75rem;
  box-shadow: 0 20px 60px -20px rgba(102,51,204,0.25);
}
@media (prefers-color-scheme: dark) {
  .form-glass { background: rgba(34,22,57,0.7); border-color: rgba(255,255,255,0.08); }
}

.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .85rem; font-weight: 700; color: #374151; }
@media (prefers-color-scheme: dark) { .field label { color: #e5e7eb; } }
.field input, .field select, .field textarea {
  background: #fff;
  border: 1.5px solid rgba(20,10,50,0.1);
  border-radius: .85rem;
  padding: .75rem 1rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
  color: #1A112C;
}
@media (prefers-color-scheme: dark) {
  .field input, .field select, .field textarea { background: #1A112C; border-color: rgba(255,255,255,0.1); color: #fff; }
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #6633CC; box-shadow: 0 0 0 4px rgba(102,51,204,0.15);
}
.field select[multiple] { min-height: 100px; }
.error-msg { display: none; font-size: .75rem; color: #ef4444; font-weight: 600; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #ef4444; }
.field.invalid .error-msg { display: block; }
#consentError { display: none; }
.consent-invalid #consentError { display: block; }

/* ================= BROCHURE ================= */
.brochure-box {
  background: linear-gradient(135deg, rgba(102,51,204,0.06), rgba(69,35,139,0.06));
  border: 1px solid rgba(102,51,204,0.15);
  border-radius: 2rem;
  padding: 2.5rem;
}
@media (prefers-color-scheme: dark) {
  .brochure-box { background: linear-gradient(135deg, rgba(102,51,204,0.12), rgba(69,35,139,0.12)); border-color: rgba(102,51,204,0.25); }
}

/* ================= FAQ ================= */
.faq-item {
  border: 1px solid rgba(20,10,50,0.08);
  border-radius: 1.25rem;
  overflow: hidden;
  background: #fff;
}
@media (prefers-color-scheme: dark) { .faq-item { background: #221639; border-color: rgba(255,255,255,0.06); } }
.faq-question {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  font-weight: 700; font-size: .95rem;
  cursor: pointer; color: inherit;
}
.faq-question i { transition: transform .3s ease; color: #6633CC; }
.faq-item.open .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-answer p { padding: 0 1.5rem 1.5rem; font-size: .9rem; color: #6b7280; }
@media (prefers-color-scheme: dark) { .faq-answer p { color: #9ca3af; } }

/* ================= CTA FINAL ================= */
.cta-gradient { background: linear-gradient(135deg, #6633CC 0%, #45238B 60%, #231145 100%); }

/* ================= ICON BADGE ================= */
.icon-badge {
  width: 3rem; height: 3rem; border-radius: 999px;
  background: rgba(102,51,204,0.1); color: #6633CC;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ================= SOCIAL / FOOTER ================= */
.social-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: all .3s ease;
}
.social-icon:hover { background: #6633CC; transform: translateY(-3px); }
.footer-link { color: #9ca3af; transition: color .25s ease; }
.footer-link:hover { color: #D1C2F0; }

/* ================= FLOATING BUTTONS ================= */
.floating-btn {
  position: fixed; right: 1.5rem; z-index: 40;
  width: 3.25rem; height: 3.25rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: 0 10px 30px -8px rgba(20,10,50,0.4);
  transition: all .3s ease;
}
.whatsapp-btn { bottom: 1.5rem; background: #25D366; color: #fff; }
.whatsapp-btn:hover { transform: scale(1.08); }
.back-to-top-btn { bottom: 5.75rem; background: #6633CC; color: #fff; font-size: 1.1rem; transition: opacity .3s ease, transform .3s ease; }
.back-to-top-btn:hover { transform: translateY(-4px); }

/* ================= TOAST ================= */
.toast {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 100;
  background: #16a34a; color: #fff; font-weight: 600; font-size: .875rem;
  padding: 1rem 1.5rem; border-radius: 1rem;
  display: flex; align-items: center; gap: .6rem;
  box-shadow: 0 15px 40px -10px rgba(0,0,0,0.3);
  transform: translateX(120%); transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.toast.show { transform: translateX(0); }

/* ================= REDUCE MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* reCAPTCHA v3: ocultamos el badge flotante de Google. Google lo permite
   siempre que el aviso legal sea visible en el formulario (ya está bajo el
   botón de envío). También evita que choque con los botones flotantes. */
.grecaptcha-badge { visibility: hidden !important; }