/* ============================================================================
   DS4S3 — Landing. Sistema "Institucional claro editorial" (taste-skill).
   Papel claro + hairlines + tipografía editorial (Fraunces serif + Inter +
   JetBrains Mono). Sin degradados/glow. Claro/oscuro por tokens ([data-theme]).
   Fuentes cargadas en <head>. El navbar/tema compartido vive en /shared/.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* neutros elegidos (leve sesgo frío institucional) */
  --paper: #FBFCFD;
  --surface: #FFFFFF;
  --surface-2: #F4F7F9;
  --ink: #12293C;
  --ink-soft: #3E5364;
  --muted: #667987;
  --line: #E3E8EC;
  --line-strong: #cfd8dd;
  --navy: #103A5C;
  --accent: #0E8C82;          /* teal profundo, AA sobre papel */
  --accent-strong: #0a6b63;
  --accent-soft: #E8F4F2;
  --on-accent: #ffffff;
  --shadow: 0 1px 0 var(--line);           /* casi plano: hairline, no glow */
  --focus: 0 0 0 3px rgba(14,140,130,.22);
  --ease: cubic-bezier(.2,.7,.2,1);
  --fd: "Sora", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --fb: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --fm: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;
  --maxw: 1180px;
}
:root[data-theme="dark"] {
  --paper: #0E1B27; --surface: #13273A; --surface-2: #17303F;
  --ink: #EAF1F5; --ink-soft: #C2D2DC; --muted: #90A6B4;
  --line: #24394A; --line-strong: #345066;
  --navy: #1B4E78; --accent: #2CC5BA; --accent-strong: #56E0D3; --accent-soft: rgba(44,197,186,.12);
  --focus: 0 0 0 3px rgba(44,197,186,.28);
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--fb); color: var(--ink); background: var(--paper);
  line-height: 1.65; -webkit-font-smoothing: antialiased; letter-spacing: -.003em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
h1,h2,h3,h4 { font-family: var(--fd); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent-strong); text-decoration: none; }
img { max-width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* eyebrow mono (etiqueta editorial) */
.eyebrow { font-family: var(--fm); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); opacity: .6; }

/* ---------- BOTONES (planos, editoriales) ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--fb); font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.btn svg { width: 16px; height: 16px; }
.btn-primary, .btn-primary:link, .btn-primary:visited { background: var(--accent); color: var(--on-accent) !important; }
.btn-primary:hover { background: var(--accent-strong); color: #fff !important; transform: translateY(-1px); }
.btn-secondary, .btn-secondary:link, .btn-secondary:visited { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); background: var(--surface-2); color: var(--ink); }
.btn-full { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- HERO editorial (papel, sin glow) ---------- */
.hero { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
#nodes { display: none; }                    /* fuera el canvas glow (estética AI) */
.hero::before {                              /* motivo editorial: rejilla hairline muy tenue */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc((100% - 0px) / 12) 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 60%, transparent);
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: end; padding-top: 92px; padding-bottom: 72px; }
.hero h1 { font-family: "Sora", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; font-size: clamp(40px, 5.4vw, 70px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: var(--ink); text-indent: -.02em; }
.hero h1 .highlight { font-style: normal; font-weight: 700; background: linear-gradient(90deg, #0E8C82, #2CC5BA, #7BE0D4, #2CC5BA, #0E8C82); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: ds4s3grad 6s linear infinite; }
@keyframes ds4s3grad { to { background-position: 250% center; } }
.hero-desc { margin-top: 26px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 30em; }
.hero-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
/* capas de datos como índice editorial (filas con hairline, mono) */
.hero-visual { align-self: end; }
.layers-diagram { border-top: 1px solid var(--ink); }
.layer { display: flex; align-items: baseline; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft); margin: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; }
.layer::before { content: counter(l, decimal-leading-zero); counter-increment: l; font-family: var(--fm); font-size: 11px; color: var(--accent); font-weight: 600; }
.layers-diagram { counter-reset: l; }
.layer:hover { color: var(--ink); }

/* ---------- MARQUEE (hairline, mono, sobrio) ---------- */
.marquee { overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); padding: 15px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 46px; width: max-content; align-items: center; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-family: var(--fm); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.marquee-item + .marquee-item::before { content: "/"; margin-right: 46px; color: var(--line-strong); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- SECCIONES (aire + hairline) ---------- */
.section { padding: 104px 0; border-bottom: 1px solid var(--line); }
.section-alt { background: var(--surface-2); }
.section-title { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; color: var(--ink); margin-bottom: 14px; letter-spacing: -.02em; }
.section-intro { font-size: 18px; color: var(--ink-soft); max-width: 62ch; margin: 0 0 56px; line-height: 1.6; }

/* ---------- TARJETAS uniformes, planas (hairline) ---------- */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.feature-card { background: none; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 30px 26px 34px; box-shadow: none; transition: background .25s var(--ease); }
.feature-card:hover { background: var(--surface-2); }
.feature-icon { width: 40px; height: 40px; border-radius: 0; display: grid; place-items: center; margin-bottom: 20px; color: var(--accent); background: none; border: 0; font-size: 20px; }
.feature-icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-family: var(--fd); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 10px; letter-spacing: -.01em; }
.feature-card p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* casos de uso */
.usecases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.usecase-card { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 30px 26px; box-shadow: none; transition: background .25s var(--ease); position: relative; }
.usecase-card:nth-child(odd) { border-right: 1px solid var(--line); }
.usecase-card:hover { background: var(--surface-2); }
.usecase-number { display: inline-block; background: none; color: var(--accent); font-family: var(--fm); font-weight: 600; font-size: 12px; letter-spacing: .06em; padding: 0; border-radius: 0; margin-bottom: 12px; }
.usecase-card h4 { font-family: var(--fd); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.usecase-card p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* ecosistema */
.ecosystem-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.ecosystem-col { border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 30px 26px; background: none; box-shadow: none; }
.ecosystem-col:last-child { border-right: 0; }
.ecosystem-col:nth-child(1), .ecosystem-col:nth-child(2), .ecosystem-col:nth-child(3) { border-top: 0; }
.ecosystem-col h3 { font-family: var(--fm); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 20px; padding: 0; border: 0; }
.ecosystem-items { display: grid; gap: 0; }
.ecosystem-item { padding: 15px 0; background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; overflow: visible; }
.ecosystem-item::before { display: none !important; }
.ecosystem-item strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; font-weight: 600; font-family: var(--fb); }
.ecosystem-item p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-family: var(--fm); font-size: 12px; padding: 5px 11px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid transparent; font-weight: 500; }

/* ---------- ONBOARDING / FORM (editorial) ---------- */
.section-onboarding { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.onboarding-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.onboarding-info h3 { font-family: var(--fd); font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 22px; }
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step-number { flex: none; width: auto; height: auto; border-radius: 0; background: none; color: var(--accent); display: block; font-family: var(--fm); font-weight: 600; font-size: 13px; padding-top: 2px; }
.step-content h4 { font-family: var(--fb); font-size: 15.5px; color: var(--ink); margin-bottom: 3px; font-weight: 600; }
.step-content p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.onboarding-form-wrapper { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; padding: 32px; }
.onboarding-form { display: flex; flex-direction: column; gap: 16px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.form-section-title { font-family: var(--fm); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.form-group input, .form-group select { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 14px; background: var(--paper); color: var(--ink); transition: border-color .2s, box-shadow .2s; appearance: auto; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.form-group input::placeholder { color: var(--muted); opacity: .7; }
.form-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.check-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.check-label input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.check-label a { color: var(--accent-strong); font-weight: 600; }
.form-message { margin-top: 12px; padding: 14px; border-radius: 8px; font-size: 14px; line-height: 1.6; }
.form-message.success { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-strong); }
.form-message.error { background: #fdecee; border: 1px solid #f2c2c7; color: #8a1c26; }
.btn .btn-spinner { display: inline-flex; align-items: center; margin-left: 8px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { text-align: center; padding: 20px 0; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.form-success.visible { opacity: 1; transform: none; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 30px; display: grid; place-items: center; margin: 0 auto 20px; }
.form-success h3 { font-family: var(--fd); font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.form-success .success-detail { font-size: 15px; color: var(--muted); margin-bottom: 28px; }
.success-next { display: flex; flex-direction: column; gap: 16px; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.success-step { display: flex; gap: 14px; align-items: flex-start; }
.success-step-icon { font-size: 20px; }
.success-step strong { display: block; font-size: 14px; color: var(--ink); }
.success-step p { font-size: 13px; color: var(--muted); }
.btn-link { display: block; margin-top: 16px; background: none; border: none; color: var(--accent-strong); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: underline; width: 100%; text-align: center; }

/* The footer is the platform's now, drawn by `shared/chrome.js` and styled by
   `/shared/footer.css`, so that this space's own documents, the portal's
   screens and the vendor's application show the same one. The rules that
   used to live here dressed a copy that no longer exists. */
/* ---------- catálogo stats live (chips editoriales) ---------- */
#catalog-stats > * { font-family: var(--fm); }

/* ---------- reveal sobrio (fade/slide corto) ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 72px; padding-bottom: 56px; }
  .features-grid { grid-template-columns: repeat(2,1fr); }
  .usecases-grid, .ecosystem-content { grid-template-columns: 1fr; }
  .ecosystem-col { border-right: 0; }
  .onboarding-layout { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .features-grid, .usecases-grid, .ecosystem-content, .form-row, .footer-inner { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .section { padding: 72px 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .rv { opacity: 1 !important; transform: none !important; } }

/* SplitText (reactbits) — headings reveal word-by-word with a stagger */
.sw { display: inline-block; opacity: 0; transform: translateY(22px); will-change: transform, opacity; }
.sw-in .sw { animation: swUp .55s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(var(--wi, 0) * 48ms); }
@keyframes swUp { to { opacity: 1; transform: none; } }
/* the "seguras" word keeps its animated gradient while it slides up */
.sw-in .highlight.sw { animation: swUp .55s cubic-bezier(.22,1,.36,1) forwards, ds4s3grad 6s linear infinite; animation-delay: calc(var(--wi, 0) * 48ms), 0s; }
@media (prefers-reduced-motion: reduce) { .sw { opacity: 1 !important; transform: none !important; } }

/* Indicador "En esta página" (scroll-spy). Va a la IZQUIERDA del contenido centrado,
   dentro del hueco lateral; se oculta cuando no hay hueco (pantallas estrechas). */
.page-toc { display: none; }
@media (min-width: 1580px) {
  .page-toc {
    display: block; position: fixed; transform: translateY(-50%);
    left: calc((100vw - var(--maxw)) / 2 - 196px); width: 172px; z-index: 40;
    overflow-y: auto;
    /* Centred in the viewport the chrome is not using. `--gs-chrome-bottom` is
       published by shared/chrome.js: zero while the foot of the page is below
       the fold, then the number of pixels the institutional strip and the
       footer cover as they scroll in. Without it this sat on top of them. */
    top: calc(50% - var(--gs-chrome-bottom, 0px) / 2);
    max-height: calc(74vh - var(--gs-chrome-bottom, 0px) / 2);
    padding: 16px 14px 16px 6px; border-radius: 14px;
    background: transparent;   /* sin caja: solo difumina lo que haya detrás */
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    /* aparece solo a partir de "Sobre DS4S3" (la clase is-visible la pone el JS al hacer scroll) */
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
  }
  .page-toc.is-visible { opacity: 1; pointer-events: auto; }
}
.page-toc-label { font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .55; margin: 0 0 14px; padding-left: 16px; }
.page-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.page-toc li { margin: 0; }
.page-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--muted); opacity: .6; text-decoration: none; transition: color .2s ease, border-color .2s ease, opacity .2s ease; }
.page-toc a:hover { color: var(--ink); opacity: 1; }
.page-toc a.active { color: var(--accent-strong); opacity: .95; border-left-color: var(--accent); font-weight: 600; }