/* ============================================================
   components.css — componentes UI Nucleus
   ============================================================ */

/* ---- Brand ---- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-extra); letter-spacing: -0.02em; font-size: 1.2rem; }
.brand__mark { width: 24px; height: 24px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 50% 50%, var(--color-cyan) 0%, var(--color-blue) 45%, var(--color-navy) 100%);
  box-shadow: 0 0 0 3px rgba(37,99,255,0.12), 0 0 14px rgba(34,211,238,0.5); }
.brand__mark::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(37,99,255,0.35); }
.brand__name small { display: block; font-size: 0.62rem; font-weight: var(--fw-semibold); letter-spacing: 0.14em; color: var(--color-muted); text-transform: uppercase; }
.brand--light, .brand--light .brand__name { color: #fff; }

/* ---- Header + Nav ---- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); height: 64px;
  background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-scrolled { border-color: var(--color-line); box-shadow: var(--shadow-soft); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 22px); }
.nav__link { font-size: 0.92rem; font-weight: var(--fw-medium); color: var(--color-muted); transition: color var(--motion-fast) var(--ease); white-space: nowrap; }
.nav__link:hover, .nav__link.is-active { color: var(--color-ink); }
.nav__cta { background: var(--color-navy); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); font-size: 0.9rem; transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); white-space: nowrap; }
.nav__cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-blue); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--color-ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: var(--fw-semibold); font-size: 1rem; padding: 14px 26px; min-height: 48px; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid transparent; transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.btn--primary { background: var(--color-blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(37,99,255,0.4); }
.btn--dark { background: var(--color-navy); color: #fff; }
.btn--dark:hover { transform: translateY(-3px); box-shadow: var(--shadow-blue); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line); }
.btn--ghost:hover { border-color: var(--color-blue); color: var(--color-blue); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--color-navy); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn--lg { padding: 18px 36px; font-size: 1.08rem; }
.section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.25); }
.section--dark .btn--ghost:hover { border-color: var(--color-cyan); color: var(--color-cyan); }

/* ---- Hero ---- */
.hero { position: relative; padding: clamp(96px, 14vw, 150px) 0 clamp(40px, 6vw, 72px); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(37,99,255,0.14); }
.orbit--1 { width: 520px; height: 520px; top: -120px; right: -120px; }
.orbit--2 { width: 320px; height: 320px; top: -20px; right: 40px; border-color: rgba(34,211,238,0.18); }
.orbit__glow { position: absolute; width: 260px; height: 260px; top: 30px; right: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,0.22), transparent 65%); filter: blur(8px); }
.hero__inner { position: relative; display: grid; gap: 40px; }
.hero__title { font-size: clamp(2rem, 7vw, 3.4rem); font-weight: var(--fw-black); line-height: 1.04; margin-bottom: 20px; }
.hero__sub { color: var(--color-muted); font-size: clamp(1rem, 2.6vw, 1.18rem); max-width: 50ch; margin-bottom: 14px; }
.hero__support { color: var(--color-muted); font-size: 0.98rem; max-width: 48ch; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.hero__microcopy { font-size: 0.85rem; color: var(--color-muted); max-width: 46ch; }
.hero__portrait { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--grad-navy); min-height: 340px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.portrait-glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,0.35), transparent 60%); top: 18%; }
.portrait-initials { font-size: 5rem; font-weight: var(--fw-black); color: rgba(255,255,255,0.92); z-index: 1; }
.portrait-tag { position: absolute; bottom: 18px; left: 18px; right: 18px; color: rgba(255,255,255,0.72); font-size: 0.85rem; font-weight: var(--fw-medium); }

/* ---- Métricas ---- */
.metrics { background: var(--color-navy); color: #fff; padding: clamp(36px, 6vw, 56px) 0; }
.metrics__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; text-align: center; }
.metric__num { display: block; font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: var(--fw-black); color: #fff; }
.metric__label { display: block; color: rgba(255,255,255,0.66); font-size: 0.9rem; margin-top: 6px; }

/* ---- Cards genéricas ---- */
.card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 26px 22px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(37,99,255,0.3); }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--color-gray-100); color: var(--color-blue); font-size: 1.4rem; margin-bottom: 16px; }
.card__title { font-size: 1.18rem; font-weight: var(--fw-bold); margin-bottom: 6px; }
.card__text { color: var(--color-muted); font-size: 0.95rem; }

/* ---- Problema (cards) ---- */
.problem-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }

/* ---- Microdiagnóstico ---- */
.diag__card { background: var(--grad-navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 52px); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.diag__title { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: var(--fw-extra); margin-bottom: 10px; }
.diag__text { color: rgba(255,255,255,0.72); margin-bottom: 8px; }
.diag__meta { color: var(--color-cyan); font-size: 0.82rem; font-weight: var(--fw-semibold); margin-bottom: 28px; }
.diag__q { font-weight: var(--fw-semibold); margin-bottom: 16px; font-size: 1.08rem; }
.diag__options { display: grid; gap: 12px; }
.diag__opt { text-align: left; padding: 16px 18px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 1rem; font-weight: var(--fw-medium); transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; }
.diag__opt::after { content: "→"; opacity: 0.5; transition: transform var(--motion-fast) var(--ease); }
.diag__opt:hover { background: rgba(37,99,255,0.22); border-color: var(--color-blue); transform: translateX(4px); }
.diag__opt.is-selected { background: rgba(37,99,255,0.3); border-color: var(--color-cyan); }
.diag__opt:hover::after { transform: translateX(4px); }
.diag__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; }
.diag__back { background: none; border: 0; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 0.9rem; }
.diag__back:hover { color: #fff; }
.diag__progress { display: flex; gap: 6px; }
.diag__dot { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.18); transition: background .3s var(--ease); }
.diag__dot.is-active { background: var(--color-cyan); }
/* result */
.diag__result { text-align: center; }
.diag__result-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 16px; background: rgba(34,211,238,0.16); color: var(--color-cyan); font-size: 1.6rem; font-weight: var(--fw-bold); }
.diag__result-route { color: var(--color-cyan); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 8px; }
.diag__result-title { font-size: 1.4rem; font-weight: var(--fw-extra); margin-bottom: 10px; }
.diag__result-text { color: rgba(255,255,255,0.78); max-width: 46ch; margin: 0 auto 24px; }
.diag__result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.diag__lead { display: grid; gap: 12px; max-width: 420px; margin: 22px auto 0; text-align: left; }
.diag__lead input, .diag__lead textarea { width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font-family: inherit; font-size: 0.95rem; }
.diag__lead input::placeholder, .diag__lead textarea::placeholder { color: rgba(255,255,255,0.45); }

/* ---- Pilares ---- */
.pilares__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }

/* ---- Nucleus System / Connector ---- */
.system { background: var(--color-navy); color: #fff; overflow: hidden; }
.system__inner { display: grid; gap: 36px; align-items: center; }
.system__visual { display: flex; justify-content: center; }
.system__nucleus { position: relative; width: 230px; height: 230px; }
.system__core { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, var(--color-cyan), var(--color-blue)); box-shadow: 0 0 50px var(--color-cyan); animation: pulse 3s ease-in-out infinite; }
.system__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(34,211,238,0.3); animation: spin 14s linear infinite; }
.system__ring::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 12px var(--color-cyan); }
.system__ring--alt { inset: 36px; border-color: rgba(37,99,255,0.4); animation-duration: 9s; animation-direction: reverse; }
.system__pair { display: grid; gap: 16px; margin: 24px 0; }
.system__pair .card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: #fff; }
.system__pair .card__title { color: #fff; }
.system__pair .card__text { color: rgba(255,255,255,0.72); }
.system__quote { font-size: 1.15rem; font-weight: var(--fw-semibold); border-left: 3px solid var(--color-cyan); padding-left: 18px; margin: 22px 0; }

/* ---- Rutas ---- */
.rutas__grid { display: grid; gap: 18px; margin-top: 38px; grid-template-columns: 1fr; }
.ruta { position: relative; }
.ruta__num { font-size: 0.85rem; font-weight: var(--fw-extra); color: var(--color-blue); letter-spacing: 0.1em; }
.ruta__title { font-size: 1.3rem; font-weight: var(--fw-bold); margin: 10px 0 8px; }
.ruta__text { color: var(--color-muted); margin-bottom: 16px; }
.ruta__list { display: grid; gap: 8px; margin-bottom: 20px; }
.ruta__list li { position: relative; padding-left: 22px; font-size: 0.92rem; color: var(--color-ink); }
.ruta__list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-blue); font-weight: 700; }
.ruta__link { font-weight: var(--fw-semibold); color: var(--color-blue); }
.ruta__link:hover { text-decoration: underline; }

/* ---- Casos ---- */
.casos__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 36px 0 40px; }
.caso-metric { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 22px 12px; text-align: center; }
.caso-metric__num { display: block; font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: var(--fw-black); color: var(--color-blue); }
.caso-metric__label { display: block; color: var(--color-muted); font-size: 0.82rem; margin-top: 6px; }
.caso { display: grid; gap: 10px; }
.caso__sector { font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-blue); }
.caso__row { font-size: 0.92rem; }
.caso__row strong { display: block; color: var(--color-ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; color: var(--color-muted); }
.casos__grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 16px; }

/* ---- Recursos ---- */
.recursos__grid { display: grid; gap: 18px; margin-top: 36px; grid-template-columns: 1fr; }
.recurso { display: flex; flex-direction: column; gap: 10px; }
.recurso__type { font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-blue); }
.recurso__title { font-size: 1.12rem; font-weight: var(--fw-bold); flex: 1; }
.recurso__link { font-weight: var(--fw-semibold); color: var(--color-blue); }

/* ---- CTA final ---- */
.cta-final { position: relative; background: var(--color-navy); color: #fff; overflow: hidden; text-align: center; }
.cta-final__bg { position: absolute; inset: 0; pointer-events: none; }
.cta-final__bg .orbit--1 { width: 600px; height: 600px; top: 50%; left: 50%; transform: translate(-50%,-50%); border-color: rgba(34,211,238,0.12); }
.cta-final__bg .orbit__glow { width: 360px; height: 360px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.cta-final__inner { position: relative; max-width: 660px; margin-inline: auto; }
.cta-final__title { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: var(--fw-black); line-height: 1.05; margin-bottom: 16px; }
.cta-final__text { color: rgba(255,255,255,0.78); font-size: 1.12rem; margin-bottom: 32px; }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- Footer ---- */
.footer { background: var(--color-navy-deep); color: rgba(255,255,255,0.7); padding: 48px 0 32px; }
.footer__inner { display: grid; gap: 30px; }
.footer__tag { font-size: 0.9rem; margin-top: 12px; color: rgba(255,255,255,0.5); max-width: 32ch; }
.footer__col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; margin-bottom: 14px; }
.footer__col a { display: block; font-size: 0.9rem; padding: 5px 0; transition: color var(--motion-fast) var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__social { display: flex; gap: 12px; margin-top: 6px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.08); font-size: 0.78rem; font-weight: var(--fw-bold); text-transform: uppercase; padding: 0; }
.footer__social a:hover { background: var(--color-blue); color: #fff; }
.footer__copy { text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.4); margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); }

/* ---- Sticky CTA ---- */
.sticky-cta { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-blue); color: #fff; font-weight: var(--fw-bold); padding: 16px; min-height: 52px; border-radius: var(--radius-pill); box-shadow: var(--shadow-blue); transform: translateY(140%); transition: transform var(--motion-medium) var(--ease), background var(--motion-fast) var(--ease); }
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta:hover { background: #1e54e6; }
.sticky-cta__arrow { transition: transform var(--motion-fast) var(--ease); }
.sticky-cta:hover .sticky-cta__arrow { transform: translateX(5px); }

/* ---- FAQ ---- */
.faq { display: grid; gap: 12px; margin-top: 28px; }
.faq__item { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 20px 22px; }
.faq__q { font-weight: var(--fw-semibold); font-size: 1.05rem; }
.faq__a { color: var(--color-muted); margin-top: 8px; font-size: 0.95rem; }

/* ---- Logos chips ---- */
.logos { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.logo-chip { font-weight: var(--fw-bold); color: var(--color-muted); padding: 10px 22px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-line); filter: grayscale(1); opacity: 0.7; transition: opacity var(--motion-fast) var(--ease), filter var(--motion-fast) var(--ease); }
.logo-chip:hover { opacity: 1; filter: none; color: var(--color-ink); }

/* ---- Scroll progress ---- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 110; background: var(--grad-brand); }