/* =============================================================================
   Qualivo — Landing (qualivo.io)
   Fuentes locales + tokens de diseño + componentes + responsive
   ============================================================================= */

/* Montserrat variable (wght 100–900), subsets con unicode-range:
   solo se descarga el subset que la página necesita. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */
:root {
  --qv-font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --qv-font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --qv-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --qv-ink: #101319;
  --qv-ink-soft: #3D4148;
  --qv-ink-muted: #5A5E66;
  --qv-ink-faint: #7A7C82;
  --qv-teal: #0E7C74;
  --qv-teal-bright: #27BDB1;
  --qv-teal-pale: #B7F0EA;
  --qv-coral: #E8590C;
  --qv-cream: #FFFFFF;
  --qv-lilac: #EFECFB;
  --qv-black: #08090C;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--qv-cream);
  font-family: var(--qv-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--qv-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--qv-teal); text-decoration: none; }
a:hover { color: var(--qv-teal-bright); }
img { max-width: 100%; }
input, select, button, textarea { font-family: var(--qv-font-body); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--qv-teal-bright) !important;
  box-shadow: 0 0 0 3px rgba(39, 189, 177, .25);
}
::selection { background: var(--qv-teal-bright); color: #04231F; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------------------
   Layout / componentes
   --------------------------------------------------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(16, 19, 25, .08);
}
.site-header .container {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand img { height: 24px; width: auto; display: block; }
.brand-tagline {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--qv-ink-faint);
  font-weight: 700;
  display: block;
}
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); }
.nav-link { color: var(--qv-ink-soft); font-size: 14px; font-weight: 600; transition: color 160ms ease; }
.nav-link:hover { color: var(--qv-ink); }

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--qv-ink);
  color: #fff;
  font-weight: 700;
  transition: background 160ms ease, color 160ms ease;
}
.btn-dark:hover { background: var(--qv-teal-bright); color: #04231F; }
.btn-nav { height: 42px; padding: 0 20px; font-size: 14px; }
.btn-hero {
  min-height: 56px;
  padding: 0 30px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16.5px;
  box-shadow: 0 14px 34px rgba(16, 19, 25, .18);
}
.btn-diagnostic { min-height: 56px; padding: 0 30px; border-radius: 12px; font-weight: 800; font-size: 16.5px; }
.btn-diagnostic:hover { background: var(--qv-black); color: #fff; }

.btn-teal {
  width: 100%;
  min-height: 54px;
  border: none;
  border-radius: 12px;
  background: var(--qv-teal);
  color: #fff;
  font-weight: 800;
  font-size: 16.5px;
  cursor: pointer;
  transition: background 160ms ease;
}
.btn-teal:hover { background: #0A5F59; }
.btn-teal:disabled { opacity: .6; cursor: wait; }

#recursos a[href]:hover h3 { color: var(--qv-teal); }
#recursos a[href]:hover { box-shadow: 0 18px 44px rgba(16, 19, 25, .12) !important; }

.faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(16, 19, 25, .14);
  border-radius: 0;
  padding: 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 34px 24px 0;
  font-family: var(--qv-font-display);
  font-weight: 800;
  font-size: clamp(17px, 2.6vw, 20px);
  letter-spacing: -.012em;
  color: var(--qv-ink);
  position: relative;
  transition: color 160ms ease;
}
.faq-item summary:hover { color: var(--qv-teal); }
.faq-num {
  font-size: 14px;
  color: var(--qv-teal);
  margin-right: 16px;
  letter-spacing: .06em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 700;
  color: var(--qv-teal);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  margin: 0;
  padding: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--qv-ink-soft);
}

/* ── Páginas de caso ─────────────────────────────────────────────── */
.cs-section { padding: 84px 24px; }
.cs-section .inner { max-width: 1100px; margin: 0 auto; }

/* Hero */
.cs-hero { padding: clamp(48px,8vh,84px) 24px 64px; }
.cs-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--qv-teal); font-weight: 800; margin: 0 0 20px; }
.cs-hero h1 { font-family: var(--qv-font-display); font-size: clamp(34px,6vw,66px); line-height: .98; letter-spacing: -.038em; font-weight: 900; margin: 0 0 22px; color: var(--qv-ink); max-width: 20ch; }
.cs-lede { font-size: clamp(17px,3vw,20px); line-height: 1.6; color: var(--qv-ink-soft); margin: 0; max-width: 56ch; }
.cs-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.cs-pill { font-size: 13px; color: var(--qv-ink-muted); border: 1px solid rgba(16,19,25,.16); border-radius: 999px; padding: 8px 15px; font-weight: 700; }

/* Tarjeta-métrica del hero */
.cs-herostat { background: var(--qv-black); border-radius: 20px; padding: clamp(28px,5vw,46px); margin: 44px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 48px; box-shadow: 0 24px 60px rgba(16,19,25,.15); }
.cs-herostat .num { font-family: var(--qv-font-display); font-weight: 900; font-size: clamp(54px,10vw,96px); line-height: .95; letter-spacing: -.03em; color: #F4CC38; }
.cs-herostat .num-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #9AA2AE; font-weight: 800; margin: 8px 0 0; }
.cs-herostat .num-explica { font-family: var(--qv-font-display); font-weight: 800; font-size: clamp(17px,3vw,22px); line-height: 1.3; letter-spacing: -.015em; color: #fff; margin: 0; max-width: 24ch; }

/* Bloques de texto (reto, diagnóstico) */
.cs-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px,4vw,64px); align-items: start; }
.cs-split h2 { font-family: var(--qv-font-display); font-size: clamp(26px,4.6vw,42px); line-height: 1.02; letter-spacing: -.028em; font-weight: 900; margin: 0; color: inherit; }
.cs-split .copy p { font-size: 17px; line-height: 1.7; margin: 0 0 16px; }
.cs-split .copy p:last-child { margin-bottom: 0; }
.cs-split .copy ul { margin: 0; padding-left: 22px; }
.cs-split .copy li { font-size: 16.5px; line-height: 1.7; }

/* Qué hicimos: tarjetas numeradas sobre teal (como el bloque Diagnostic) */
.cs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 44px; }
.cs-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 26px; }
.cs-card .n { margin: 0 0 12px; font-family: var(--qv-font-display); font-size: 14px; color: var(--qv-teal-pale); font-weight: 900; }
.cs-card .t { margin: 0 0 8px; font-family: var(--qv-font-display); font-size: 17px; letter-spacing: -.01em; color: #fff; font-weight: 900; }
.cs-card .d { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); }

/* Resultados: rejilla de métricas sobre negro */
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-top: 44px; }
.cs-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 24px 22px; }
.cs-stat .n { font-family: var(--qv-font-display); font-weight: 900; font-size: clamp(28px,4.5vw,42px); line-height: 1; letter-spacing: -.025em; color: #F4CC38; }
.cs-stat .l { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #9AA2AE; font-weight: 700; margin-top: 10px; line-height: 1.45; }

/* Embudo en números */
.cs-funnel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 36px; }
.cs-funnel .paso { flex: 1 1 150px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 20px; text-align: center; }
.cs-funnel .paso .n { font-family: var(--qv-font-display); font-weight: 900; font-size: clamp(26px,4vw,38px); color: #fff; }
.cs-funnel .paso .t { font-size: 13px; font-weight: 800; color: var(--qv-teal-pale); margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; }
.cs-funnel .paso .s { font-size: 12.5px; color: #9AA2AE; margin-top: 3px; }
.cs-funnel .flecha { align-self: center; color: var(--qv-teal-bright); font-size: 22px; font-weight: 700; }
@media (max-width: 640px) {
  .cs-funnel { flex-direction: column; }
  .cs-funnel .flecha { transform: rotate(90deg); align-self: center; }
}

/* Cita antes/después y cierre */
.cs-quote { font-family: var(--qv-font-display); font-weight: 800; font-size: clamp(18px,3.2vw,24px); line-height: 1.3; color: var(--qv-ink); background: #fff; border-radius: 14px; padding: 24px 28px; margin: 0; }
.cs-frase { font-family: var(--qv-font-display); font-weight: 900; font-size: clamp(24px,4.5vw,40px); line-height: 1.08; letter-spacing: -.025em; margin: 0; max-width: 30ch; }

/* Sección de casos en la landing */
.casos-item { display: block; border: 1px solid rgba(16,19,25,.1); border-radius: 18px; padding: clamp(24px,4vw,34px); background: #FFFFFF; color: var(--qv-ink); transition: box-shadow 160ms ease; }
.casos-item:hover { color: var(--qv-ink); box-shadow: 0 18px 44px rgba(16,19,25,.1); }
.casos-item:hover .casos-leer { color: var(--qv-teal-bright); }

/* Casos v2 — tarjetas sobre banda oscura, la métrica manda */
.caso-dark {
  display: block;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(24px,4vw,32px);
  transition: transform 250ms var(--qv-ease), border-color 250ms ease, background 250ms ease;
}
.caso-dark:hover { transform: translateY(-6px); border-color: rgba(39,189,177,.65); background: rgba(255,255,255,.09); }
.caso-dark .metrica { font-family: var(--qv-font-display); font-weight: 900; font-size: clamp(36px,5vw,50px); line-height: 1; letter-spacing: -.025em; color: #F4CC38; margin: 0 0 6px; }
.caso-dark .metrica-sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9AA2AE; font-weight: 700; margin: 0 0 18px; }
.caso-dark .titulo { font-family: var(--qv-font-display); font-size: clamp(17px,2.6vw,20px); line-height: 1.3; letter-spacing: -.014em; font-weight: 900; color: #fff; margin: 0 0 10px; }
.caso-dark .sub { font-size: 13.5px; color: #9AA2AE; font-weight: 600; margin: 0 0 16px; }
.caso-dark .leer { font-weight: 800; font-size: 14.5px; color: #B7F0EA; margin: 0; transition: color 200ms ease; }
.caso-dark:hover .leer { color: #fff; }

/* Recursos v2 — vista previa del resultado del auto-diagnóstico */
.dx-preview {
  background: #fff;
  border: 1px solid rgba(16,19,25,.08);
  border-radius: 18px;
  padding: clamp(22px,3.5vw,30px);
  box-shadow: 0 24px 60px rgba(16,19,25,.14);
  transform: rotate(1.2deg);
}
.dx-preview .cab { font-family: var(--qv-font-display); font-weight: 900; font-size: 14px; letter-spacing: -.01em; color: var(--qv-ink); margin: 0 0 18px; }
.dx-preview .fila { margin-bottom: 14px; }
.dx-preview .fila:last-child { margin-bottom: 0; }
.dx-preview .lab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dx-preview .lab .n { font-family: var(--qv-font-display); font-weight: 800; font-size: 13px; color: var(--qv-ink); }
.dx-preview .lab .n.mala { color: var(--qv-coral); }
.dx-preview .lab .v { font-size: 11.5px; color: var(--qv-ink-faint); font-weight: 700; }
.dx-preview .track { height: 10px; border-radius: 999px; background: rgba(16,19,25,.08); overflow: hidden; }
.dx-preview .bar { height: 100%; border-radius: 999px; background: var(--qv-teal-bright); width: 0; transition: width 900ms var(--qv-ease) 250ms; }
.dx-preview .bar.mala { background: var(--qv-coral); }
.no-js .dx-preview .bar, .revealed .dx-preview .bar { width: var(--w); }

/* Animación de aparición al hacer scroll (solo con JS activo) */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--qv-ease), transform 600ms var(--qv-ease); }
.js [data-reveal].revealed { opacity: 1; transform: none; }

/* ── Blog ────────────────────────────────────────────────────────── */
.post-main { max-width: 760px; margin: 0 auto; padding: clamp(40px,7vh,72px) 24px 96px; }
.post-main h1 { font-family: var(--qv-font-display); font-size: clamp(30px,5.5vw,50px); line-height: 1.02; letter-spacing: -.032em; font-weight: 900; margin: 0 0 18px; color: var(--qv-ink); }
.post-meta { font-size: 13.5px; color: var(--qv-ink-faint); font-weight: 600; margin: 0 0 36px; }
.post-main h2 { font-family: var(--qv-font-display); font-size: clamp(22px,4vw,30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 900; margin: 44px 0 14px; color: var(--qv-ink); }
.post-main h3 { font-family: var(--qv-font-display); font-size: 19px; letter-spacing: -.012em; font-weight: 800; margin: 30px 0 10px; color: var(--qv-ink); }
.post-main p, .post-main li { font-size: 17px; line-height: 1.75; color: var(--qv-ink-soft); }
.post-main ul, .post-main ol { padding-left: 24px; }
.post-main strong { color: var(--qv-ink); }
.post-lede { font-size: clamp(17px,3vw,19px); line-height: 1.65; color: var(--qv-ink-muted); }
.post-destacado { background: linear-gradient(135deg, #EAF7F5, var(--qv-lilac)); border-left: 6px solid var(--qv-teal-bright); border-radius: 0 16px 16px 0; padding: 26px 30px; margin: 36px 0; }
.post-destacado p { margin: 0; font-family: var(--qv-font-display); font-weight: 800; font-size: clamp(19px,3vw,22px); line-height: 1.42; letter-spacing: -.014em; color: var(--qv-ink); }
/* componentes editoriales de artículo */
.post-tabla { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15.5px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 26px rgba(16,19,25,.06); }
.post-tabla th { background: var(--qv-black); color: #fff; text-align: left; padding: 13px 16px; font-family: var(--qv-font-display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.post-tabla td { padding: 13px 16px; border-bottom: 1px solid rgba(16,19,25,.08); background: #fff; color: var(--qv-ink-soft); line-height: 1.5; vertical-align: top; }
.post-tabla tr:last-child td { border-bottom: none; }
.post-tabla td:first-child { font-weight: 700; color: var(--qv-ink); }
.post-tabla-scroll { overflow-x: auto; }
.post-regla { display: flex; gap: 14px; align-items: flex-start; background: #FFF8EE; border: 1px solid rgba(232,150,12,.3); border-radius: 14px; padding: 18px 22px; margin: 26px 0; }
.post-regla .ico { font-family: var(--qv-font-display); font-weight: 900; font-size: 12px; letter-spacing: .1em; color: #B9640A; background: rgba(232,150,12,.14); border-radius: 999px; padding: 5px 12px; white-space: nowrap; margin-top: 2px; }
.post-regla p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--qv-ink); font-weight: 600; }
.post-sino { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; margin: 26px 0; }
.post-sino .col { background: #fff; border: 1px solid rgba(16,19,25,.1); border-radius: 0 14px 14px 0; padding: 20px 24px; }
.post-sino .col.si { border-left: 5px solid var(--qv-teal-bright); }
.post-sino .col.no { border-left: 5px solid #C0392B; }
.post-sino .col p.t { margin: 0 0 10px; font-family: var(--qv-font-display); font-weight: 900; font-size: 15px; color: var(--qv-ink); }
.post-sino .col ul { margin: 0; padding-left: 18px; }
.post-sino .col li { font-size: 15px; line-height: 1.55; margin-bottom: 6px; }
/* números como datos: mono en métricas */
.caso-dark .metrica, .dx-preview .v, .post-flow .paso .n, .stat-num, .cs-stat .n, .cs-herostat .num {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: -.02em;
}
.post-caso {
  background: #fff;
  border: 1px solid rgba(16,19,25,.1);
  border-left: 5px solid var(--qv-teal-bright);
  border-radius: 0 16px 16px 0;
  padding: 22px 26px;
  margin: 28px 0;
  box-shadow: 0 10px 30px rgba(16,19,25,.06);
}
.post-caso::before {
  content: 'Caso real';
  display: inline-block;
  font-family: var(--qv-font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qv-teal);
  background: #E2F6F3;
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 12px;
}
.post-caso p { margin: 0; font-size: 15.5px; line-height: 1.68; }

/* Ritmo visual del artículo */
.post-main h2::before {
  content: '';
  display: block;
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: var(--qv-teal-bright);
  margin-bottom: 14px;
}
.pnum {
  display: block;
  font-family: var(--qv-font-display);
  font-weight: 900;
  font-size: clamp(40px,6vw,54px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--qv-teal-bright);
  margin-bottom: 8px;
}
.post-main h2:has(.pnum)::before { display: none; }
.post-main h2:has(.pnum) { margin-top: 54px; }
.post-resumen {
  background: var(--qv-black);
  border-radius: 18px;
  padding: 26px 30px;
  margin: 0 0 44px;
}
.post-resumen .rl {
  font-family: var(--qv-font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qv-teal-bright);
  margin: 0 0 12px;
}
.post-resumen ul { margin: 0; padding-left: 20px; }
.post-resumen li { font-size: 15.5px; line-height: 1.65; margin-bottom: 7px; color: #C9D2DE; }
.post-resumen li::marker { color: var(--qv-teal-bright); }
.post-resumen li:last-child { margin-bottom: 0; }
/* enlaces y listas dentro del artículo */
.post-main p a:not(.btn-dark), .post-main li a {
  color: var(--qv-teal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(39,189,177,.4);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.post-main p a:not(.btn-dark):hover, .post-main li a:hover { text-decoration-color: var(--qv-teal); }
.post-main > ul li::marker { color: var(--qv-teal-bright); }
.post-main > ol li::marker { font-family: var(--qv-font-display); font-weight: 900; color: var(--qv-teal); }
.post-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 26px 0; }
.post-flow .paso {
  flex: 1 1 120px;
  background: #fff;
  border: 1px solid rgba(16,19,25,.12);
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;
}
.post-flow .paso .n { font-family: var(--qv-font-display); font-weight: 900; font-size: clamp(24px,4vw,34px); color: var(--qv-ink); }
.post-flow .paso .n.destaca { color: var(--qv-teal); }
.post-flow .paso .t { font-size: 12px; font-weight: 800; color: var(--qv-ink-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: .07em; }
.post-flow .flecha { align-self: center; color: var(--qv-teal-bright); font-size: 20px; font-weight: 700; }
@media (max-width: 560px) {
  .post-flow { flex-direction: column; }
  .post-flow .flecha { transform: rotate(90deg); }
}
.post-cta { background: var(--qv-black); border-radius: 18px; padding: clamp(26px,4vw,38px); margin: 56px 0 0; }
.post-cta p.titulo { font-family: var(--qv-font-display); font-weight: 900; font-size: clamp(20px,3.5vw,26px); letter-spacing: -.018em; line-height: 1.15; color: #fff; margin: 0 0 10px; }
.post-cta p.sub { font-size: 15px; line-height: 1.6; color: #9AA2AE; margin: 0 0 22px; }
.post-autor { display: flex; align-items: center; gap: 14px; margin: 48px 0 0; border-top: 1px solid rgba(16,19,25,.1); padding-top: 28px; }
.post-autor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center top; }
.post-autor .n { font-family: var(--qv-font-display); font-weight: 900; font-size: 16px; color: var(--qv-ink); margin: 0; }
.post-autor .r { font-size: 13.5px; color: var(--qv-ink-faint); margin: 2px 0 0; }

/* Índice del blog */
.blog-card { display: block; background: #fff; border: 1px solid rgba(16,19,25,.1); border-radius: 18px; padding: clamp(24px,4vw,32px); color: var(--qv-ink); transition: box-shadow 160ms ease; }
.blog-card:hover { color: var(--qv-ink); box-shadow: 0 18px 44px rgba(16,19,25,.1); }
.blog-card:hover .leer { color: var(--qv-teal-bright); }

/* Banner de cookies */
#qv-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  display: flex; justify-content: center;
}
#qv-cookies .qv-ck-inner {
  max-width: 720px; width: 100%;
  background: #101319; color: #F3F7FB;
  border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(16,19,25,.35);
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between;
}
#qv-cookies p { margin: 0; font-size: 14px; line-height: 1.55; color: #C7D3E0; max-width: 46ch; }
#qv-cookies a { color: #B7F0EA; text-decoration: underline; }
#qv-cookies .qv-ck-botones { display: flex; gap: 10px; }
#qv-cookies button {
  min-height: 42px; padding: 0 18px; border-radius: 10px; font-family: var(--qv-font-body);
  font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid rgba(255,255,255,.3);
  background: transparent; color: #fff;
}
#qv-cookies #qv-ck-si { background: var(--qv-teal-bright); border-color: var(--qv-teal-bright); color: #04231F; }

.footer-link { color: #C3D1E2; font-size: 14.5px; transition: color 160ms ease; }
.footer-link:hover { color: #fff; }
.footer-legal { color: #5E7DA0; font-size: 13px; transition: color 160ms ease; }
.footer-legal:hover { color: #9AA2AE; }

/* Tarjetas de visualización (hero + funnel): scroll horizontal en pantallas
   estrechas para no comprimir el diagrama. */
.viz-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.viz-card svg { display: block; width: 100%; }
#hero-flow svg { min-width: 620px; }
#funnel-viz svg { min-width: 680px; }

/* ---------------------------------------------------------------------------
   Formulario
   --------------------------------------------------------------------------- */
/* El atributo hidden pierde contra el display:flex inline del formulario. */
#lead-form[hidden] { display: none !important; }

.field { display: block; }
.field-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--qv-ink-soft);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(16, 19, 25, .16);
  border-radius: 10px;
  font-size: 16px;
  color: var(--qv-ink);
  background: var(--qv-cream);
}
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(16, 19, 25, .16);
  border-radius: 10px;
  font-size: 16px;
  color: var(--qv-ink);
  background: var(--qv-cream);
}
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(16, 19, 25, .16);
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--qv-ink);
  background: var(--qv-cream);
  resize: vertical;
}
/* Honeypot: fuera de pantalla, invisible para personas, visible para bots. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Responsive — móvil estrecho (375px)
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* En una sola fila no caben marca, tagline, enlaces y botón. Con
     display:contents los hijos del nav cuelgan de la cabecera: arriba
     marca y botón, y los enlaces bajan a una segunda fila. Antes
     desaparecían del móvil y con ellos Casos, Launch y el blog. */
  .brand-tagline { display: none; }
  .btn-nav { height: 40px; padding: 0 16px; }
  .section-pad { padding-top: 64px !important; padding-bottom: 64px !important; }

  .site-header .container { flex-wrap: wrap; row-gap: 12px; padding-bottom: 12px; }
  .brand { order: 1; }
  .site-nav { display: contents; }
  .site-nav .btn-nav { order: 2; }
  .site-nav .nav-link { order: 3; font-size: 13.5px; white-space: nowrap; color: var(--qv-ink); }
}
@media (max-width: 400px) {
  .brand img { height: 20px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Consola de agente (hero). No es decoración: reproduce la pasada real del
   agente de seguimientos sobre el CRM de Qualivo del 10-sep-2026. Todos los
   números salen de esa ejecución — no hay ninguno de adorno.
   ─────────────────────────────────────────────────────────────────────────── */
.qv-console {
  background: var(--qv-black);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(16, 19, 25, .22);
  font-family: var(--qv-font-mono);
  text-align: left;
}
.qv-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}
.qv-console__dots { display: flex; gap: 6px; flex-shrink: 0; }
.qv-console__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.qv-console__name {
  font-size: 12.5px; letter-spacing: .04em; color: #9AA2AE; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qv-console__name b { color: var(--qv-teal-pale); font-weight: 700; }
.qv-console__state {
  margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--qv-teal-bright); font-weight: 700;
}
.qv-console__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--qv-teal-bright);
  box-shadow: 0 0 0 0 rgba(39, 189, 177, .7); animation: qvPulse 1.9s ease-out infinite;
}
@keyframes qvPulse {
  0%   { box-shadow: 0 0 0 0 rgba(39, 189, 177, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(39, 189, 177, 0); }
  100% { box-shadow: 0 0 0 0 rgba(39, 189, 177, 0); }
}
.qv-sala { display: grid; grid-template-columns: 216px 1fr; }
.qv-roster {
  margin: 0; padding: 16px 12px; list-style: none;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
  display: flex; flex-direction: column; gap: 2px;
}
.qv-roster li {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; letter-spacing: .02em; color: #6E7684;
  white-space: nowrap; transition: color 220ms ease, background 220ms ease;
}
.qv-roster li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, .16); transition: background 220ms ease, box-shadow 220ms ease;
}
.qv-roster li.is-act {
  color: #fff; background: rgba(39, 189, 177, .1);
}
.qv-roster li.is-act::before {
  background: var(--qv-teal-bright); box-shadow: 0 0 0 3px rgba(39, 189, 177, .22);
}
.qv-log {
  padding: 16px 18px 18px; height: 322px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 38px);
  font-size: 13px; line-height: 1.5; color: #C9CFD8;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 7px;
}
.qv-ev { display: flex; gap: 10px; align-items: baseline; opacity: 0; transform: translateY(5px); }
.qv-ev.is-in { opacity: 1; transform: none; transition: opacity 300ms ease, transform 300ms ease; }
.qv-ev__who { flex-shrink: 0; width: 96px; padding-right: 8px; color: var(--qv-teal-bright); font-weight: 700; }
.qv-ev__txt { flex: 1; min-width: 0; }
.qv-ev__val { margin-left: auto; padding-left: 12px; color: #fff; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qv-ev--warn .qv-ev__who { color: var(--qv-coral); }
.qv-ev--warn .qv-ev__txt { color: #E6C9B4; }
.qv-ev--done .qv-ev__txt, .qv-ev--done .qv-ev__val { color: #7CE8DD; font-weight: 700; }
.qv-caret {
  display: inline-block; width: 8px; height: 14px; margin-left: 3px;
  background: var(--qv-teal-bright); vertical-align: -2px; animation: qvBlink 1.05s step-end infinite;
}
@keyframes qvBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.qv-console__foot {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 18px;
  font-family: var(--qv-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: #7A8290;
}
.qv-console__foot b { color: #C9CFD8; font-weight: 700; }
@media (max-width: 760px) {
  .qv-sala { grid-template-columns: 1fr; }
  .qv-roster {
    flex-direction: row; overflow-x: auto; gap: 6px; padding: 12px;
    border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08);
    scrollbar-width: none;
  }
  .qv-roster::-webkit-scrollbar { display: none; }
  .qv-roster {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
  .qv-roster li { font-size: 11.5px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 600px) {
  .qv-log { font-size: 11.5px; height: 300px; padding: 14px; gap: 6px; }
  .qv-ev__who { width: 94px; padding-right: 6px; }
  .qv-ev__val { padding-left: 8px; }
  .qv-console__name { font-size: 11.5px; }
  .qv-console__state span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qv-ev { opacity: 1; transform: none; }
  .qv-caret, .qv-console__pulse { animation: none; }
}

/* Tira del mecanismo: detectar → agentizar → operar → medir → aprender → escalar */
.qv-mech { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding: 0; list-style: none; }
.qv-mech li {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--qv-font-mono); font-size: 12.5px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700; color: var(--qv-ink-faint);
  border: 1px solid rgba(16, 19, 25, .14); border-radius: 999px; padding: 9px 16px;
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease;
}
.qv-mech li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(16, 19, 25, .2); transition: background 300ms ease;
}
.qv-mech li.is-on {
  color: var(--qv-teal); border-color: var(--qv-teal); background: rgba(14, 124, 116, .06);
}
.qv-mech li.is-on::before { background: var(--qv-teal-bright); }

/* ───────────────────────────────────────────────────────────────────────────
   Un agente en cada etapa del sistema comercial. Se va encendiendo la etapa
   activa y cada agente enseña, línea a línea, lo que hace de verdad.
   ─────────────────────────────────────────────────────────────────────────── */
.qv-etapas { margin: 0; }
.qv-etapas__grid {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
/* Nueve etapas: en tres columnas quedan tres filas iguales, sin huecos sueltos. */
@media (min-width: 560px) { .qv-etapas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .qv-etapas__grid { grid-template-columns: repeat(3, 1fr); } }
.qv-etapa {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(16, 19, 25, .12);
  border-radius: 14px;
  padding: 18px 18px 16px;
  transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}
.qv-etapa__fase {
  margin: 0 0 12px; font-family: var(--qv-font-mono); font-size: 11.5px;
  letter-spacing: .15em; text-transform: uppercase; font-weight: 800; color: var(--qv-ink-faint);
  transition: color 320ms ease;
}
.qv-etapa__agente {
  margin: 0 0 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  font-family: var(--qv-font-mono); font-size: 12.5px; line-height: 1.4; font-weight: 700;
  color: var(--qv-ink);
}
.qv-etapa__pre { color: var(--qv-ink-faint); white-space: nowrap; }
.qv-etapa__id { white-space: nowrap; }
.qv-etapa__agente i { order: -1; }
.qv-etapa__agente i {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-right: 8px;
  background: rgba(16, 19, 25, .18); transition: background 320ms ease, box-shadow 320ms ease;
}
.qv-etapa__accion {
  margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--qv-ink-muted);
  min-height: 3em; transition: opacity 260ms ease, color 320ms ease;
}
.qv-etapa.is-on {
  border-color: var(--qv-teal);
  box-shadow: 0 14px 34px rgba(14, 124, 116, .14);
  transform: translateY(-2px);
}
.qv-etapa.is-on .qv-etapa__fase { color: var(--qv-teal); }
.qv-etapa.is-on .qv-etapa__agente i {
  background: var(--qv-teal-bright); box-shadow: 0 0 0 4px rgba(39, 189, 177, .2);
}
.qv-etapa.is-on .qv-etapa__accion { color: var(--qv-ink); }
.qv-etapa.is-fade .qv-etapa__accion { opacity: 0; }
/* barrita de trabajo: solo en la etapa activa */
.qv-etapa::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 10px; height: 2px;
  border-radius: 2px; background: var(--qv-teal-bright);
  transform: scaleX(0); transform-origin: left center; opacity: 0;
}
.qv-etapa.is-on::after { animation: qvTrabajo 2100ms linear forwards; opacity: 1; }
@keyframes qvTrabajo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.qv-etapas__trans { display: grid; gap: 8px; }
.qv-trans {
  margin: 0; display: flex; align-items: baseline; gap: 10px;
  font-size: 14.5px; line-height: 1.55; color: var(--qv-ink-muted);
  border-left: 2px dashed rgba(14, 124, 116, .35); padding-left: 14px;
}
.qv-trans i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--qv-teal); flex-shrink: 0;
  position: relative; top: -2px;
}
.qv-trans b { font-family: var(--qv-font-mono); font-size: 13px; color: var(--qv-ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .qv-etapa, .qv-etapa__accion { transition: none; }
  .qv-etapa.is-on { transform: none; }
  .qv-etapa.is-on::after { animation: none; transform: scaleX(1); }
}

/* Estado de cada agente: lo que corre hoy y lo que se construye en el piloto.
   La distinción va siempre visible — enseñar el mapa entero sí, darlo por hecho no. */
.qv-etapa { display: flex; flex-direction: column; padding-bottom: 14px; }
.qv-etapa__accion { flex: 1; }
.qv-etapa__estado {
  align-self: flex-start; margin-top: 12px;
  font-family: var(--qv-font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 800; border-radius: 999px; padding: 4px 9px;
  white-space: nowrap;
}
.qv-etapa__estado.es-hoy { color: #0B5F59; background: rgba(39, 189, 177, .16); }
.qv-etapa__estado.es-piloto { color: #9A4A0B; background: rgba(232, 89, 12, .12); }
/* la barra de trabajo sube al borde de arriba para no chocar con la etiqueta */
.qv-etapa::after { top: -1px; bottom: auto; left: 14px; right: 14px; height: 3px; }

.qv-leyenda {
  margin: 0 0 22px; font-size: 14px; line-height: 2.1; color: var(--qv-ink-muted); max-width: 78ch;
}
.qv-leyenda .qv-etapa__estado { margin: 0 6px 0 0; vertical-align: 1px; }
.qv-trans--piloto { border-left-color: rgba(232, 89, 12, .38); }
.qv-trans--piloto i { background: var(--qv-coral); }

/* El mapa completo se enseña, pero el piloto es UNO. Esto lo deja claro. */
.qv-aviso {
  margin: 0 0 26px; padding: 14px 18px; max-width: 70ch;
  background: var(--qv-lilac); border-radius: 12px;
  font-size: 15px; line-height: 1.6; color: var(--qv-ink-soft); font-weight: 600;
}