/* ════════════════════════════════════════════════════════════
   Páginas de módulo · Sistemas Plenario
   Comparte los tokens del design system de la landing.
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#070A1A; --bg-elev:#0D1230;
  --surface:rgba(255,255,255,.045); --surface-strong:rgba(255,255,255,.08);
  --surface-hover:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  --indigo-300:#A5B4FC; --indigo-400:#818CF8;
  --violet-500:#8B5CF6; --violet-600:#7C3AED;
  --blue-600:#2563EB; --teal-400:#2DD4BF;
  --text:#F4F6FF; --text-2:rgba(244,246,255,.72); --text-3:rgba(244,246,255,.52);
  --primary:linear-gradient(135deg,#7C3AED 0%,#4F46E5 50%,#2563EB 100%);
  --primary-glow:0 10px 40px rgba(124,58,237,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  --danger:#F87171; --success:#34D399; --warning:#FBBF24;
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --shadow-3:0 24px 60px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -10%,rgba(124,58,237,.26),transparent 60%),
    radial-gradient(800px 500px at 88% 8%,rgba(37,99,235,.2),transparent 60%),
    radial-gradient(700px 500px at 50% 110%,rgba(20,184,166,.14),transparent 60%);
}
main,header,footer{position:relative;z-index:1}
h1,h2,h3,h4{font-family:'Syne',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.15rem}
p{color:var(--text-2)}
a{color:var(--indigo-300)}
.container{max-width:980px;margin:0 auto;padding:0 24px}
section{padding:clamp(48px,7vw,84px) 0}
.eyebrow{
  font-weight:500;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--text-3);
}
.gradient-text{
  background:linear-gradient(120deg,#A5B4FC 0%,#C4B5FD 35%,#7DD3FC 70%,#5EEAD4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── header ── */
header{
  position:sticky;top:0;z-index:50;padding:12px 0;
  background:rgba(7,10,26,.72);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.hd{display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:34px;width:auto;display:block}
.hd-nav{display:flex;align-items:center;gap:6px}
.hd-nav a{
  padding:7px 13px;border-radius:var(--r-full);color:var(--text-2);
  font-size:.88rem;font-weight:500;text-decoration:none;transition:color .2s,background .2s;
}
.hd-nav a:hover{color:var(--text);background:var(--surface)}
@media (max-width:760px){.hd-nav a:not(.btn){display:none}}

/* ── botones ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border-radius:var(--r-full);
  font-weight:600;font-size:.92rem;cursor:pointer;border:none;
  text-decoration:none;color:inherit;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.btn:focus-visible{outline:2px solid var(--indigo-400);outline-offset:3px}
.btn-wa{
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);color:#fff;
  box-shadow:0 10px 30px rgba(37,211,102,.3),0 0 0 1px rgba(255,255,255,.1) inset;
}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(37,211,102,.45)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface-hover);border-color:var(--border-strong);transform:translateY(-2px)}

/* ── breadcrumb ── */
.crumb{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:.8rem;color:var(--text-3);padding-top:28px;
}
.crumb a{color:var(--text-3);text-decoration:none}
.crumb a:hover{color:var(--text)}
.crumb span[aria-current]{color:var(--text-2)}

/* ── hero ── */
.hero{padding-top:28px;padding-bottom:12px}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-full);font-size:.8rem;color:var(--text-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.pill.is-core{background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(37,99,235,.12));border-color:rgba(167,139,250,.35)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--teal-400);box-shadow:0 0 12px var(--teal-400)}
.hero h1{margin:18px 0 16px}
.hero .sub{font-size:1.1rem;color:var(--text-2);max-width:62ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* ── prosa ── */
.prosa p{margin-bottom:14px;max-width:70ch}
.prosa p:last-child{margin-bottom:0}

/* ── listas de perfiles ── */
.perfiles{display:grid;gap:10px;margin-top:20px}
.perfil{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  font-size:.94rem;color:var(--text-2);
}
.perfil svg{flex-shrink:0;margin-top:3px;color:var(--teal-400)}

/* ── pasos ── */
.pasos{display:grid;gap:12px;counter-reset:paso}
.paso{
  position:relative;padding:20px 22px 20px 64px;
  border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(124,58,237,.08),rgba(255,255,255,.02));
  border:1px solid var(--border);
}
.paso::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:20px;top:20px;
  width:30px;height:30px;border-radius:9px;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;
  font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;
  box-shadow:0 6px 16px rgba(124,58,237,.35);
}
.paso h3{font-size:1rem;margin-bottom:5px}
.paso p{font-size:.92rem;line-height:1.55}

/* ── capacidades ── */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.cap{
  padding:20px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.cap:hover{transform:translateY(-3px);border-color:rgba(167,139,250,.35)}
.cap h3{font-size:.98rem;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.cap h3::before{
  content:"";width:4px;height:16px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(180deg,#A78BFA,#5EEAD4);
}
.cap p{font-size:.89rem;line-height:1.55}

/* ── beneficios ── */
.benes{display:grid;gap:10px;max-width:70ch}
.bene{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.96rem;color:var(--text-2);
}
.bene svg{flex-shrink:0;margin-top:4px;color:var(--teal-400)}

/* ── FAQ ── */
.faq-list{display:grid;gap:11px}
.faq-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.faq-item:hover{border-color:var(--border-strong)}
.faq-item[open]{
  background:linear-gradient(165deg,rgba(124,58,237,.08),rgba(255,255,255,.02));
  border-color:rgba(139,92,246,.3);
}
.faq-item summary{
  padding:18px 22px;list-style:none;cursor:pointer;
  font-family:'Syne',sans-serif;font-weight:600;font-size:.98rem;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:'Syne',sans-serif;font-weight:400;font-size:1.4rem;
  color:var(--indigo-300);flex-shrink:0;line-height:1;
  transition:transform .3s var(--ease),color .2s;
}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--teal-400)}
.faq-item summary:hover{color:var(--indigo-300)}
.faq-body{padding:0 22px 18px}
.faq-body p{font-size:.93rem;line-height:1.65}

/* ── nota honesta (seccion propia, al final) ── */
.nota-full{
  padding:22px 26px;border-radius:var(--r-md);
  background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2);
  max-width:72ch;
}
.nota-full p{font-size:.92rem;line-height:1.6;margin-bottom:12px;color:var(--text-2)}
.nota-full p:last-child{margin-bottom:0}

/* ── CTA final ── */
.cta{
  position:relative;overflow:hidden;text-align:center;
  padding:56px 36px;border-radius:var(--r-xl);
  background:linear-gradient(135deg,rgba(124,58,237,.24) 0%,rgba(37,99,235,.17) 50%,rgba(20,184,166,.14) 100%);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:var(--shadow-3);
}
.cta h2{margin-bottom:12px}
.cta p{max-width:54ch;margin:0 auto 24px}
.cta .hero-cta{justify-content:center}
@media (max-width:640px){.cta{padding:40px 22px}}

/* ── otros módulos ── */
.otros{display:flex;flex-wrap:wrap;gap:9px}
.otro{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-2);text-decoration:none;font-size:.86rem;font-weight:500;
  transition:all .2s var(--ease);
}
.otro:hover{background:var(--surface-hover);border-color:rgba(167,139,250,.4);color:var(--text);transform:translateY(-2px)}
.otro.is-core{border-color:rgba(167,139,250,.28)}

/* ── footer ── */
footer{
  padding:48px 0 28px;border-top:1px solid var(--border);
  background:rgba(7,10,26,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  margin-top:64px;
}
.ft{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.ft-brand img{height:38px;width:auto;margin-bottom:12px}
.ft-brand p{font-size:.88rem;max-width:36ch}
.ft-contact{display:grid;gap:7px;font-size:.88rem}
.ft-contact a{color:var(--text-2);text-decoration:none;display:flex;align-items:center;gap:9px}
.ft-contact a:hover{color:var(--text)}
.ft-bottom{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--border);
  font-size:.81rem;color:var(--text-3);
}

/* ── FAB WhatsApp ── */
.fab{
  position:fixed;bottom:22px;right:22px;z-index:60;
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);color:#fff;
  box-shadow:0 16px 40px rgba(37,211,102,.4),0 0 0 1px rgba(255,255,255,.15) inset;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.fab:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(37,211,102,.55)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}