/* ==========================================================
   MassTech · Landing — estilos
   Paleta y tipografía según Manual de Marca v1.0
   ========================================================== */

:root {
  /* Marca */
  --grafito: #23262E;
  --papel: #F8F9FA;
  --teal-50: #E3F6F2;
  --teal-200: #A9DDD3;
  --teal-500: #1F9E90;   /* base: sobre teal el texto siempre en grafito */
  --teal-700: #147368;   /* texto y enlaces teal sobre papel */
  --teal-900: #0E4540;
  --gris-100: #E9EAEC;
  --gris-300: #C3C5CA;
  --gris-600: #565A63;
  --gris-800: #363941;

  /* Derivados de interfaz */
  --grafito-2: #2B2E36;
  --grafito-line: #40434C;
  --grafito-muted: #8E929B;
  --footer: #1C1F25;
  --blanco: #FFFFFF;

  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1200px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--papel);
  color: var(--grafito);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img, svg { display: block; }
a { color: var(--teal-700); }
a:hover { color: var(--teal-900); }
h1, h2, h3, p { margin: 0; }

.mono { font-family: var(--font-mono); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; color: var(--teal-700); text-transform: uppercase; }
.on-dark .eyebrow, .eyebrow--dark { color: var(--teal-500); }
.h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
.lead { font-size: 18px; line-height: 1.6; color: var(--gris-600); }
.on-dark { background: var(--grafito); color: var(--papel); }
.on-dark .lead { color: var(--gris-300); }
.section { padding: 120px 0; }
.section--white { background: var(--blanco); border-top: 1px solid var(--gris-100); border-bottom: 1px solid var(--gris-100); }
.section-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-bottom: 48px; }
.section-head--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: end; max-width: none; }
.section-head--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s, color .15s; }
.btn--primary { background: var(--teal-500); color: var(--grafito); }
.btn--primary:hover { background: var(--teal-200); color: var(--grafito); }
.btn--ghost-dark { border-color: var(--gris-600); color: var(--papel); font-weight: 600; }
.btn--ghost-dark:hover { border-color: var(--gris-300); color: var(--papel); }
.btn--outline { border-color: var(--grafito); color: var(--grafito); font-size: 15px; padding: 13px; }
.btn--outline:hover { background: var(--grafito); color: var(--papel); }
.btn--sm { font-size: 15px; padding: 12px 20px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__word { font-size: 22px; letter-spacing: -.03em; color: var(--papel); }
.logo__word b { font-weight: 800; }
.logo__word span { font-weight: 300; }

/* ---------- Header ---------- */
.site-header { background: var(--grafito); border-bottom: 1px solid var(--gris-800); position: sticky; top: 0; z-index: 40; }
.site-header__inner { height: 76px; display: flex; align-items: center; gap: 48px; }
.nav { display: flex; gap: 32px; flex-grow: 1; font-size: 15px; font-weight: 500; }
.nav a { color: var(--gris-300); text-decoration: none; }
.nav a:hover { color: var(--papel); }
.header-actions { display: flex; align-items: center; gap: 24px; }
.header-actions .login { color: var(--papel); text-decoration: none; font-size: 15px; font-weight: 600; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--gris-800); background: transparent; color: var(--papel); border-radius: 8px; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- Patrón de red (máx. 2 nodos teal por composición) ---------- */
.net {
  position: absolute; top: 0; right: 0; height: 100%;
  background-color: var(--grafito);
  background-image:
    radial-gradient(circle, #44474F 3px, transparent 3.5px),
    linear-gradient(to top right, transparent calc(50% - .6px), #30333B calc(50% - .6px), #30333B calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(#30333B 1px, transparent 1px),
    linear-gradient(90deg, #30333B 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: -60px -60px, 0 0, 0 0, 0 0;
  pointer-events: none;
}
.net__node { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--teal-500); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero .net { width: 44%; min-width: 600px; }
.hero__grid { position: relative; padding: 112px 24px 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(40px, 5.2vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; color: var(--papel); }
.hero .lead { font-size: 19px; max-width: 520px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.hero__tags { display: flex; flex-wrap: wrap; gap: 16px 24px; padding-top: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--gris-300); }
.hero__tags i { color: var(--gris-600); font-style: normal; }

/* ---------- Tarjetas "producto" sobre oscuro ---------- */
.panel { background: var(--grafito-2); border: 1px solid var(--grafito-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 20px; color: var(--papel); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel__title { font-size: 17px; font-weight: 700; }
.panel__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--grafito-muted); }
.badge-outline { font-family: var(--font-mono); font-size: 11px; color: var(--grafito-muted); border: 1px solid var(--grafito-line); padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--grafito); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.kpi span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--grafito-muted); }
.kpi strong { font-family: var(--font-mono); font-weight: 400; font-size: 20px; }
.kpi strong.teal { color: var(--teal-500); }
.aging { display: flex; flex-direction: column; gap: 10px; }
.aging__bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.aging__bar i { display: block; height: 100%; }
.aging__legend { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--gris-300); }
.ptable { border-top: 1px solid var(--grafito-line); }
.ptable__row { display: grid; grid-template-columns: 1.6fr 1fr .8fr .9fr; padding: 12px 0; border-bottom: 1px solid var(--gris-800); font-size: 14px; align-items: center; }
.ptable__row:last-child { border-bottom: 0; }
.ptable__row--head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--grafito-muted); }
.ptable .num { font-family: var(--font-mono); font-size: 13px; }
.ptable .st { font-family: var(--font-mono); font-size: 11px; color: var(--teal-200); }
.ptable .st--alert { color: var(--papel); border: 1px solid var(--grafito-muted); padding: 3px 6px; border-radius: 4px; justify-self: start; }

/* ---------- Flujo ---------- */
.flow { position: relative; }
.flow::before { content: ""; position: absolute; left: 20px; right: 20px; top: 19px; height: 3px; background: var(--grafito); }
.flow__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px; }
.flow__step { display: flex; flex-direction: column; gap: 14px; }
.flow__node { width: 32px; height: 32px; margin: 4px; border-radius: 50%; background: var(--grafito); }
.flow__node--active { width: 40px; height: 40px; margin: 0; background: var(--teal-500); }
.flow__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--teal-700); }
.flow__title { font-size: 17px; font-weight: 700; }
.flow__desc { font-size: 14px; line-height: 1.5; color: var(--gris-600); }

/* ---------- Módulos ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { background: var(--blanco); border: 1px solid var(--gris-100); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.card__icon { width: 28px; height: 28px; stroke: var(--teal-700); }
.card__title { font-size: 18px; font-weight: 700; }
.card__desc { font-size: 14px; line-height: 1.55; color: var(--gris-600); flex-grow: 1; }
.card__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--teal-700); }

/* ---------- Productos ---------- */
.product { border: 1px solid var(--gris-100); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 18px; background: var(--papel); }
.product--soon { border: 1px dashed var(--gris-300); background: transparent; }
.product__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--gris-600); }
.product__name { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.product__desc { font-size: 16px; line-height: 1.6; color: var(--gris-600); flex-grow: 1; }
.product a { font-size: 15px; font-weight: 700; text-decoration: none; }
.pill-soon { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; background: var(--teal-50); color: var(--teal-900); padding: 5px 9px; border-radius: 5px; }

/* ---------- Trust Engine ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.split__copy { display: flex; flex-direction: column; gap: 24px; }
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gris-800); }
.checklist li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gris-800); font-size: 16px; }
.checklist li span { font-family: var(--font-mono); font-size: 12px; color: var(--teal-500); width: 28px; flex-shrink: 0; padding-top: 3px; }
.checklist--trust li { display: grid; grid-template-columns: 28px 130px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.checklist--trust li strong { font-size: 17px; }
.checklist--trust li em { font-style: normal; color: var(--gris-300); line-height: 1.45; }
.score { display: flex; align-items: baseline; gap: 12px; }
.score strong { font-family: var(--font-mono); font-weight: 400; font-size: 44px; }
.score span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--teal-500); }
.signals { display: flex; flex-direction: column; }
.signals div { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--gris-800); font-size: 15px; }
.signals em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--teal-200); }
.signals em.review { color: var(--grafito); background: var(--papel); padding: 4px 8px; border-radius: 4px; }
.panel__note { display: grid; grid-template-columns: 10px 1fr; gap: 8px 12px; align-items: center; margin: 0; padding: 16px; border-radius: 10px; background: var(--footer); color: var(--papel); }
.panel__note span { width: 10px; height: 10px; border-radius: 999px; background: var(--teal-500); grid-row: 1 / span 2; }
.panel__note small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--grafito-muted); }
.panel__note strong { font-size: 16px; line-height: 1.35; }

/* ---------- Comparativa ---------- */
.compare { border: 1px solid var(--gris-100); border-radius: 16px; overflow: hidden; background: var(--blanco); }
.compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .14em; color: var(--gris-600); background: var(--papel); padding: 18px 28px; border-bottom: 1px solid var(--gris-100); }
.compare th.mt { color: var(--teal-700); background: var(--teal-50); }
.compare td { padding: 20px 28px; border-bottom: 1px solid var(--gris-100); vertical-align: top; }
.compare tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 700; width: 24%; }
.compare td:nth-child(2) { color: var(--gris-600); }
.compare td:nth-child(3) { background: #F4FBF9; }

/* ---------- White-label ---------- */
.wl-frame { background: var(--papel); border: 1px solid var(--gris-100); border-radius: 16px; padding: 32px; }
.wl-app { --client: #1F4E9A; background: var(--blanco); border: 1px solid var(--gris-100); border-radius: 12px; overflow: hidden; }
.wl-app__top { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--gris-100); }
.wl-app__brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.wl-app__brand i { width: 22px; height: 22px; border-radius: 6px; background: var(--client); }
.wl-app__btn { border: 0; background: var(--client); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 6px; }
.wl-app__body { padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.wl-app__body strong { font-size: 44px; font-weight: 800; letter-spacing: -.02em; }
.wl-app__track { height: 8px; background: var(--gris-100); border-radius: 4px; overflow: hidden; }
.wl-app__track i { display: block; width: 64%; height: 100%; background: var(--client); }
.wl-app__foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--gris-100); font-family: var(--font-mono); font-size: 11px; color: var(--gris-600); }
.dots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.dots li { display: flex; gap: 12px; align-items: center; }
.dots li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grafito); flex-shrink: 0; }
.dots li:first-child::before { background: var(--teal-500); }

/* ---------- Integraciones ---------- */
.tile { border: 1px solid var(--gris-100); background: var(--blanco); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.tile strong { font-size: 17px; }
.tile span { font-family: var(--font-mono); font-size: 12px; color: var(--gris-600); }

/* ---------- Pasos ---------- */
.step { display: flex; flex-direction: column; gap: 14px; border-top: 3px solid var(--grafito); padding-top: 24px; }
.step:first-child { border-top-color: var(--teal-500); }
.step span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--teal-700); }
.step h3 { font-size: 22px; font-weight: 800; }
.step p { font-size: 15px; line-height: 1.6; color: var(--gris-600); }

/* ---------- Planes (sin precios) ---------- */
.plan { background: var(--blanco); border: 1px solid var(--gris-100); border-radius: 16px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.plan--featured { background: var(--grafito); border-color: var(--grafito); color: var(--papel); }
.plan__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan__name { font-size: 24px; font-weight: 800; }
.plan__desc { font-size: 15px; line-height: 1.55; color: var(--gris-600); }
.plan--featured .plan__desc { color: var(--gris-300); }
.plan__badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; background: var(--teal-500); color: var(--grafito); padding: 5px 9px; border-radius: 5px; }
.plan__list { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--gris-100); display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; }
.plan--featured .plan__list { border-top-color: var(--grafito-line); }
.plan__list .inc { color: var(--teal-700); }
.plan--featured .plan__list .inc { color: var(--teal-200); }

/* ---------- CTA final ---------- */
.cta { position: relative; overflow: hidden; }
.cta .net { width: 36%; min-width: 480px; }
.cta__inner { position: relative; padding: 120px 24px; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.cta h2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; max-width: 720px; }
.cta .lead { max-width: 560px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); border-top: 1px solid var(--gris-800); color: var(--gris-300); }
.site-footer__grid { padding: 72px 24px 56px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.site-footer__tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--teal-500); }
.site-footer h3 { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .14em; color: var(--grafito-muted); margin-bottom: 4px; }
.site-footer nav { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.site-footer a { color: var(--gris-300); text-decoration: none; }
.site-footer a:hover { color: var(--papel); }
.site-footer__bottom { display: flex; justify-content: space-between; border-top: 1px solid var(--gris-800); padding: 24px; font-size: 13px; color: var(--grafito-muted); }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow::before { display: none; }
  .flow__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 36px; }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav, .header-actions .login { display: none; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .site-header__inner { gap: 16px; }
  .nav.is-open { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--grafito); border-bottom: 1px solid var(--gris-800); padding: 8px 24px 16px; }
  .nav.is-open a { padding: 14px 0; border-bottom: 1px solid var(--gris-800); }
  .hero__grid, .split, .section-head--split { grid-template-columns: minmax(0, 1fr); }
  .hero .net, .cta .net { width: 100%; min-width: 0; opacity: .35; }
  .hero__grid { padding-top: 72px; padding-bottom: 80px; }
  .split { gap: 48px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 88px 0; }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .flow__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kpi strong { font-size: 16px; }
  .ptable__row { grid-template-columns: 1.4fr 1fr .7fr; }
  .ptable__row > :nth-child(4) { display: none; }
  .compare { overflow-x: auto; }
  .compare table { min-width: 640px; }
  .checklist--trust li { grid-template-columns: 28px minmax(0, 1fr); gap: 6px 12px; }
  .checklist--trust li em { grid-column: 2; }
  .signals div { align-items: flex-start; gap: 12px; }
  .header-actions .btn { display: none; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__bottom { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}