/* ============================================================
   RaptorCX — sistema de diseño del HOME (.lv2-page / .rx-home)
   Tokens + tipografía + componentes de la portada.
   El body y el chrome (header/footer/páginas) los controla chrome.css.
   ============================================================ */

/* Fondo del body en la portada, sincronizado con el toggle del cuerpo */
body.home { background: #ffffff; }
body.home:not(:has(#rx-home[data-theme="light"])) { background: #0d1117; }

/* ----------------------------------------------------------
   DARK (default)
   ---------------------------------------------------------- */
.lv2-page {
  --clr-bg:          #162431;   /* navy de marca */
  --clr-bg-2:        #1d3040;
  --clr-bg-card:     rgba(255,255,255,0.05);
  --clr-border:      rgba(255,255,255,0.10);
  --clr-purple:      #532BCC;   /* primario */
  --clr-purple-2:    #A182FF;
  --clr-em:          #A182FF;
  --clr-eyebrow:     #A182FF;
  --clr-text:        #ffffff;
  --clr-text-70:     rgba(255,255,255,0.72);
  --clr-text-45:     rgba(255,255,255,0.48);
  --clr-hover-card:  rgba(104,53,254,0.08);
  --clr-hover-border:rgba(104,53,254,0.35);
  --clr-stat-num:    #A182FF;
  --clr-bullet-bg:   rgba(104,53,254,0.22);
  --clr-bullet-txt:  #A182FF;
  --clr-check-bg:    rgba(104,53,254,0.22);
  --clr-check-border:rgba(104,53,254,0.40);
  --clr-check-txt:   #A182FF;
  --clr-tag-bg:      rgba(104,53,254,0.16);
  --clr-tag-txt:     #A182FF;
  --clr-icon-bg:     rgba(104,53,254,0.16);
  --clr-cta-bg:      #1d3040;
  --clr-cta-glow:    rgba(83,43,204,0.28);
  --clr-grid:        rgba(255,255,255,0.04);
  --clr-hero-glow:   rgba(83,43,204,0.24);
  --clr-ghost-txt:   rgba(255,255,255,0.68);
  --clr-ghost-border:rgba(255,255,255,0.18);
  --clr-ghost-hover: rgba(255,255,255,0.08);
  --clr-source:      rgba(255,255,255,0.38);
  --shadow-card:     none;
  --font: 'Instrument Sans', 'Lato', sans-serif;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --transition: 0.22s ease;
}

/* ----------------------------------------------------------
   LIGHT overrides
   ---------------------------------------------------------- */
.lv2-page[data-theme="light"] {
  --clr-bg:          #ffffff;
  --clr-bg-2:        #F9FAFC;   /* gris muy claro de marca */
  --clr-bg-card:     #ffffff;
  --clr-border:      rgba(22,36,49,0.10);
  --clr-purple:      #532BCC;   /* primario */
  --clr-purple-2:    #6835FE;
  --clr-em:          #6835FE;
  --clr-eyebrow:     #532BCC;
  --clr-text:        #162431;   /* navy de marca */
  --clr-text-70:     rgba(22,36,49,0.70);
  --clr-text-45:     rgba(22,36,49,0.50);
  --clr-hover-card:  #ffffff;
  --clr-hover-border:rgba(83,43,204,0.28);
  --clr-stat-num:    #532BCC;
  --clr-bullet-bg:   rgba(104,53,254,0.12);
  --clr-bullet-txt:  #532BCC;
  --clr-check-bg:    rgba(104,53,254,0.12);
  --clr-check-border:rgba(104,53,254,0.28);
  --clr-check-txt:   #532BCC;
  --clr-tag-bg:      rgba(104,53,254,0.12);
  --clr-tag-txt:     #532BCC;
  --clr-icon-bg:     rgba(104,53,254,0.12);
  --clr-cta-bg:      #f1edff;
  --clr-cta-glow:    rgba(83,43,204,0.14);
  --clr-grid:        rgba(83,43,204,0.05);
  --clr-hero-glow:   rgba(83,43,204,0.12);
  --clr-ghost-txt:   rgba(22,36,49,0.62);
  --clr-ghost-border:rgba(22,36,49,0.18);
  --clr-ghost-hover: rgba(83,43,204,0.06);
  --clr-source:      rgba(22,36,49,0.40);
  --shadow-card:     0 2px 14px rgba(22,36,49,0.06);
}

/* ----------------------------------------------------------
   Reset & base
   Instrument Sans declarado con !important en el wrapper y en
   cada nivel tipográfico para ganar a los estilos globales de
   Divi (Plus Jakarta Sans / Lato) que cargan tras nuestro CSS.
   ---------------------------------------------------------- */
.lv2-page *, .lv2-page *::before, .lv2-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.lv2-page {
  display: block;
  width: 100%;
  font-family: 'Instrument Sans', sans-serif !important;
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}
/* Forzar Instrument Sans en todos los nodos hijos vs Divi globals */
.lv2-page h1, .lv2-page h2, .lv2-page h3,
.lv2-page h4, .lv2-page h5, .lv2-page h6,
.lv2-page p, .lv2-page span, .lv2-page a,
.lv2-page li, .lv2-page button {
  font-family: 'Instrument Sans', sans-serif !important;
}
.lv2-page a                  { text-decoration: none; }
.lv2-page a:not(.lv2-btn)   { color: inherit; }

/* ----------------------------------------------------------
   Layout
   ---------------------------------------------------------- */
.lv2-container       { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.lv2-container--mid  { max-width: 920px;  margin: 0 auto; padding: 0 24px; }
.lv2-container--narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ----------------------------------------------------------
   Grid background
   ---------------------------------------------------------- */
.lv2-grid-bg {
  background-image:
    linear-gradient(var(--clr-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--clr-grid) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ----------------------------------------------------------
   Badge
   ---------------------------------------------------------- */
.lv2-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 100px;
  border: 1px solid rgba(104,53,254,0.35);
  background: rgba(104,53,254,0.10);
  font-size: 13px; font-weight: 500;
  color: var(--clr-eyebrow);
  letter-spacing: 0.02em;
  margin-bottom: 28px;
  transition: background var(--transition), color var(--transition);
}
.lv2-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clr-purple);
  box-shadow: 0 0 8px var(--clr-purple);
}

/* ----------------------------------------------------------
   Eyebrow
   ---------------------------------------------------------- */
.lv2-eyebrow {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--clr-eyebrow); margin-bottom: 16px;
  transition: color var(--transition);
}

/* ----------------------------------------------------------
   Typography — alineada al spec de AiFusionX
   H1: 60px/400/lh 1.1/ls -1px
   H2: 46px/500/lh 1.0
   Lead: 18px/400/lh 1.6
   Body: 16px/400/lh 1.4
   ---------------------------------------------------------- */
.lv2-page .lv2-h1 {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--clr-text);
  transition: color var(--transition);
}
.lv2-page .lv2-h1 em { font-style: normal; color: var(--clr-em); transition: color var(--transition); }

.lv2-page .lv2-h2 {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--clr-text);
  transition: color var(--transition);
}
.lv2-page .lv2-h2 em { font-style: normal; color: var(--clr-em); transition: color var(--transition); }

.lv2-page .lv2-lead {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-text-70);
  transition: color var(--transition);
}
.lv2-page .lv2-body {
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--clr-text-70);
  transition: color var(--transition);
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
.lv2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; border-radius: 100px;   /* pill como el referente */
  font-family: 'Instrument Sans', sans-serif !important; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
  border: 1px solid transparent; text-decoration: none; white-space: nowrap;
}
.lv2-btn--primary {
  background: var(--clr-purple); color: #fff;
  box-shadow: 0 6px 20px rgba(83,43,204,0.32);
}
.lv2-btn--primary:hover {
  background: #3f1fa3; transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(83,43,204,0.45);
}
.lv2-btn--ghost {
  background: transparent;
  color: var(--clr-ghost-txt) !important;
  border: 1px solid var(--clr-ghost-border);
}
.lv2-btn--ghost:hover {
  background: var(--clr-ghost-hover);
  color: var(--clr-text) !important;
  border-color: var(--clr-hover-border);
}

/* ----------------------------------------------------------
   TOGGLE BUTTON
   ---------------------------------------------------------- */
.lv2-theme-toggle {
  position: fixed;
  /* abajo-izquierda: la insignia de reCAPTCHA ocupa abajo-derecha (reglas de marca de Google) */
  bottom: 24px; left: 24px;
  z-index: 99999;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  /* Dark mode: fondo claro para que contraste con el bg oscuro */
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.32);
  color: #ffffff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.40);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lv2-theme-toggle:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.55);
  transform: scale(1.08);
}
/* Light mode: fondo blanco sólido con icono de marca */
.lv2-page[data-theme="light"] .lv2-theme-toggle {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  color: var(--clr-purple);
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.lv2-page[data-theme="light"] .lv2-theme-toggle:hover {
  border-color: var(--clr-purple);
  box-shadow: 0 0 16px rgba(104,53,254,0.25);
  transform: scale(1.08);
}
/* En dark: mostrar sol (clic → ir a claro) | En light: mostrar luna (clic → ir a oscuro) */
.lv2-theme-toggle .icon-sun  { display: block; }
.lv2-theme-toggle .icon-moon { display: none; }
.lv2-page[data-theme="light"] .lv2-theme-toggle .icon-sun  { display: none; }
.lv2-page[data-theme="light"] .lv2-theme-toggle .icon-moon { display: block; }

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.lv2-hero {
  position: relative; padding: 104px 0 8px; overflow: hidden;
  background: var(--clr-bg); transition: background var(--transition);
}
.lv2-hero__glow {
  position: absolute; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, var(--clr-hero-glow) 0%, transparent 70%);
  top: -200px; left: 50%; transform: translateX(-50%);
  pointer-events: none; transition: background var(--transition);
}
.lv2-hero__inner { position: relative; text-align: center; }
.lv2-hero__ctas  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.lv2-hero__sub   { margin-top: 14px; font-size: 13px; color: var(--clr-source); transition: color var(--transition); }

/* ----------------------------------------------------------
   STATS
   ---------------------------------------------------------- */
.lv2-stats {
  background: var(--clr-bg-2);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding: 48px 0;
  transition: background var(--transition), border-color var(--transition);
}
.lv2-stats__eyebrow {
  text-align: center; margin: 0 0 28px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clr-eyebrow); transition: color var(--transition);
}
.lv2-stats__grid { display: grid; grid-template-columns: repeat(5,1fr); }
.lv2-stat { text-align: center; padding: 0 20px; border-right: 1px solid var(--clr-border); }
.lv2-stat:last-child { border-right: none; }
.lv2-stat__number {
  font-size: clamp(32px,3.5vw,44px); font-weight: 600;
  letter-spacing: -1px; color: var(--clr-stat-num);
  display: block; margin-bottom: 6px; transition: color var(--transition);
}
.lv2-stat__label { font-size: 13px; color: var(--clr-text-45); line-height: 1.4; transition: color var(--transition); }
.lv2-stats__source { text-align: center; margin-top: 20px; font-size: 11px; color: var(--clr-source); transition: color var(--transition); }

/* ----------------------------------------------------------
   SECTIONS
   ---------------------------------------------------------- */
.lv2-section       { padding: 96px 0; background: var(--clr-bg); transition: background var(--transition); }
.lv2-section--dark { background: var(--clr-bg-2); }
.lv2-section__header { text-align: center; margin-bottom: 60px; }
.lv2-section__header .lv2-lead { margin-top: 16px; }

/* ----------------------------------------------------------
   CARDS
   ---------------------------------------------------------- */
.lv2-card {
  background: var(--clr-bg-card); border: 1px solid var(--clr-border);
  border-radius: var(--radius-md); padding: 32px 28px;
  box-shadow: var(--shadow-card);
  transition: all var(--transition);
}
.lv2-card:hover {
  border-color: var(--clr-hover-border);
  background: var(--clr-hover-card);
  box-shadow: 0 8px 32px rgba(104,53,254,0.12);
  transform: translateY(-2px);
}
.lv2-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--clr-icon-bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: background var(--transition);
  flex-shrink: 0;
}
.lv2-card__icon svg {
  width: 22px; height: 22px;
  color: var(--clr-purple-2);
  transition: color var(--transition);
}
.lv2-card__title { font-size: 17px; font-weight: 600; color: var(--clr-text); margin-bottom: 10px; letter-spacing: -0.2px; transition: color var(--transition); }
.lv2-card__body  { font-size: 14px; color: var(--clr-text-45); line-height: 1.65; transition: color var(--transition); }

/* ----------------------------------------------------------
   LEAKS
   ---------------------------------------------------------- */
.lv2-leaks__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.lv2-leak {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px; border-radius: var(--radius-md);
  border: 1px solid var(--clr-border); background: var(--clr-bg-card);
  box-shadow: var(--shadow-card); transition: all var(--transition);
}
.lv2-leak__bullet {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--clr-bullet-bg); color: var(--clr-bullet-txt);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-top: 2px;
  transition: background var(--transition), color var(--transition);
}
.lv2-leak__title { font-size: 15px; font-weight: 600; color: var(--clr-text); margin-bottom: 4px; transition: color var(--transition); }
.lv2-leak__desc  { font-size: 14px; color: var(--clr-text-45); line-height: 1.55; transition: color var(--transition); }
.lv2-leaks__conclusion { margin-top: 36px; text-align: center; font-size: 17px; font-weight: 500; color: var(--clr-text-70); font-style: italic; transition: color var(--transition); }

/* ----------------------------------------------------------
   FEATURES / USE CASES
   ---------------------------------------------------------- */
.lv2-features__grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.lv2-usecases__grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.lv2-usecase {
  padding: 28px 24px; border-radius: var(--radius-md);
  border: 1px solid var(--clr-border); background: var(--clr-bg-card);
  box-shadow: var(--shadow-card); transition: all var(--transition);
}
.lv2-usecase:hover { border-color: var(--clr-hover-border); background: var(--clr-hover-card); box-shadow: 0 6px 24px rgba(104,53,254,0.10); }
.lv2-usecase__icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--clr-icon-bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; flex-shrink: 0;
  transition: background var(--transition);
}
.lv2-usecase__icon svg {
  width: 22px; height: 22px;
  color: var(--clr-purple-2);
  transition: color var(--transition);
}
.lv2-usecase__title { font-size: 16px; font-weight: 600; color: var(--clr-text); margin-bottom: 8px; transition: color var(--transition); }
.lv2-usecase__desc  { font-size: 14px; color: var(--clr-text-45); line-height: 1.6; transition: color var(--transition); }

/* ----------------------------------------------------------
   RESULTS
   ---------------------------------------------------------- */
.lv2-results__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.lv2-result-card {
  background: var(--clr-bg-card); border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg); padding: 36px 28px;
  box-shadow: var(--shadow-card); transition: all var(--transition);
}
.lv2-result-card:hover { border-color: var(--clr-hover-border); box-shadow: 0 8px 40px rgba(104,53,254,0.12); }
.lv2-result-card__tag {
  display: inline-block; padding: 4px 12px; border-radius: 100px;
  background: var(--clr-tag-bg); color: var(--clr-tag-txt);
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 20px;
  transition: background var(--transition), color var(--transition);
}
.lv2-result-card__metric { font-size: clamp(28px,3vw,38px); font-weight: 600; letter-spacing: -1px; color: var(--clr-text); margin-bottom: 8px; transition: color var(--transition); }
.lv2-result-card__title  { font-size: 16px; font-weight: 600; color: var(--clr-text); margin-bottom: 12px; transition: color var(--transition); }
.lv2-result-card__body   { font-size: 14px; color: var(--clr-text-45); line-height: 1.65; transition: color var(--transition); }

/* ----------------------------------------------------------
   WHY
   ---------------------------------------------------------- */
.lv2-why__grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.lv2-why__list  { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.lv2-why__item  { display: flex; gap: 14px; align-items: flex-start; }
.lv2-why__check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--clr-check-bg); border: 1px solid var(--clr-check-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--clr-check-txt); margin-top: 2px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.lv2-why__item-title { font-size: 15px; font-weight: 600; color: var(--clr-text); margin-bottom: 2px; transition: color var(--transition); }
.lv2-why__item-desc  { font-size: 14px; color: var(--clr-text-45); line-height: 1.55; transition: color var(--transition); }

/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */
.lv2-cta .lv2-h2 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.4px; }
.lv2-cta { padding: 100px 0; background: var(--clr-cta-bg); position: relative; overflow: hidden; transition: background var(--transition); }
.lv2-cta__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--clr-cta-glow) 0%, transparent 70%); pointer-events: none; transition: background var(--transition); }
.lv2-cta__inner { position: relative; text-align: center; }
.lv2-cta__inner .lv2-lead { margin-top: 16px; margin-bottom: 36px; }
.lv2-cta__ctas  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lv2-cta__fine  { margin-top: 16px; font-size: 13px; color: var(--clr-source); transition: color var(--transition); }

/* ----------------------------------------------------------
   PROBLEM TEXT
   ---------------------------------------------------------- */
.lv2-problem__text { max-width: 800px; margin: 0 auto; text-align: center; }

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .lv2-stats__grid       { grid-template-columns: repeat(3,1fr); }
  .lv2-stat:nth-child(3) { border-right: none; }
  .lv2-stat:nth-child(4) { border-top: 1px solid var(--clr-border); margin-top: 24px; padding-top: 24px; }
  .lv2-features__grid    { grid-template-columns: repeat(2,1fr); }
  .lv2-usecases__grid    { grid-template-columns: repeat(2,1fr); }
  .lv2-results__grid     { grid-template-columns: 1fr; }
  .lv2-why__grid         { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .lv2-hero              { padding: 80px 0 60px; }
  .lv2-section           { padding: 64px 0; }
  .lv2-stats__grid       { grid-template-columns: repeat(2,1fr); }
  .lv2-stat:nth-child(2) { border-right: none; }
  .lv2-stat:nth-child(3) { border-right: 1px solid var(--clr-border); border-top: 1px solid var(--clr-border); margin-top: 24px; padding-top: 24px; }
  .lv2-stat:nth-child(4) { border-top: 1px solid var(--clr-border); margin-top: 24px; padding-top: 24px; }
  .lv2-leaks__grid       { grid-template-columns: 1fr; }
  .lv2-features__grid    { grid-template-columns: 1fr; }
  .lv2-usecases__grid    { grid-template-columns: 1fr; }
  .lv2-hero__ctas, .lv2-cta__ctas { flex-direction: column; align-items: center; }
  .lv2-btn               { width: 100%; justify-content: center; }
  .lv2-theme-toggle      { bottom: 16px; left: 16px; }
}