/* KAVITOR — landing.css: módulo de la home (consume tokens; cero hex de presentación). */
@layer components {
  /* ===== Hero (split: visual izq / texto dcha) ===== */
  .kv-hero { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); min-height: min(78vh, 760px); border-bottom: var(--bw-1) solid var(--border-subtle); }
  .kv-hero__visual { position: relative; overflow: hidden; background: var(--bg-sunken); border-right: var(--bw-1) solid var(--border-subtle); }
  .kv-hero__visual svg, .kv-hero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .kv-hero__panel { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); padding: var(--sp-12) clamp(var(--sp-7), 5vw, var(--sp-16)); }
  .kv-hero__panel h1 .accent { color: var(--selection-indicator); }
  .kv-hero__sub { color: var(--text-secondary); font-size: var(--fs-md); }
  .kv-hero__micro { display: grid; gap: var(--sp-2); }
  .kv-hero__ctas { display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-3); }

  /* ===== Fila de afirmaciones factuales ===== */
  .kv-stats { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .kv-stats__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
  .kv-stats__inner .k-stat { padding: var(--sp-7) var(--sp-6); }
  .kv-stats__inner .k-stat + .k-stat { border-left: var(--bw-1) solid var(--border-subtle); }

  /* ===== Secciones genéricas ===== */
  /* kv-section / kv-section__head → kavitor.components.css (compartidos con las públicas) */

  /* ===== Rail de proceso (sustituye a las pseudo-stats) ===== */
  .kv-rail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-5) var(--sp-6); padding-block: var(--sp-7); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .06em; color: var(--text-secondary); }
  .kv-rail__arrow { color: var(--text-muted); }

  /* ===== Marca (logotipo completo izq + párrafo SEO dcha, separada con hairline) ===== */
  .kv-brand { padding: var(--sp-12) 0; border-bottom: var(--bw-1) solid var(--border-subtle); }
  .kv-brand__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); align-items: center; }
  .kv-brand__logo img { width: min(320px, 100%); }
  .kv-brand__text { display: grid; gap: var(--sp-5); }
  .kv-brand__text p { color: var(--text-secondary); font-size: var(--fs-md); }
  .kv-brand__text strong { color: var(--text-primary); font-weight: var(--fw-medium); }

  /* ===== Hero: microcopy honesto ===== */
  .kv-hero__note { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: var(--sp-4); }

  /* ===== Beneficios (el pitch) ===== */
  .kv-benef { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-12); align-items: start; }
  .k-checks--lg { gap: var(--sp-5); font-size: var(--fs-base); }
  .k-checks--lg li { line-height: 1.5; }
  .kv-benef__aud { display: grid; gap: var(--sp-6); border-left: var(--bw-1) solid var(--border-subtle); padding-left: var(--sp-8); }
  .kv-benef__persona { display: grid; gap: var(--sp-2); }
  .kv-benef__persona p, .kv-benef__futuro p { color: var(--text-secondary); font-size: var(--fs-sm); }
  .kv-benef__futuro { display: grid; gap: var(--sp-2); border-top: var(--bw-1) solid var(--border-subtle); padding-top: var(--sp-6); }
  .kv-benef__futuro strong { color: var(--text-primary); font-weight: var(--fw-medium); }

  /* ===== Reglas divisorias completas ===== */

  /* ===== Confianza (patrón del home clásico: grande, gris, hover a color + enlace) ===== */
  .kv-trust { padding: var(--sp-10) 0; border-top: var(--bw-1) solid var(--border-subtle); border-bottom: var(--bw-1) solid var(--border-subtle); }
  .kv-trust .k-label { display: block; text-align: center; margin-bottom: var(--sp-7); }
  .kv-trust__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-10); }
  .kv-trust__logos img { width: 150px; max-height: 56px; object-fit: contain; opacity: .55; filter: grayscale(1) brightness(1.6); transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
  [data-theme="light"] .kv-trust__logos img { filter: grayscale(1) brightness(0.65); }
  .kv-trust__logos a:hover img { filter: none; opacity: 1; transform: scale(1.08); } /* crece un poco, como el clásico */

  /* ===== El problema ===== */
  .kv-problema__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); }
  .kv-problema__item { display: grid; gap: var(--sp-4); border-top: var(--bw-1) solid var(--border); padding-top: var(--sp-6); }
  .kv-problema__item p { color: var(--text-secondary); font-size: var(--fs-sm); }

  /* ===== Cómo funciona (strip flotante) ===== */
  .kv-pasos { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--sp-8); align-items: start; }
  .kv-paso { display: grid; gap: var(--sp-5); }
  .kv-paso__art { height: 180px; display: flex; align-items: center; justify-content: center; }
  .kv-paso__art svg { width: 100%; height: 100%; max-width: 300px; }
  .kv-paso h3 { font-size: var(--fs-md); }
  .kv-paso p { color: var(--text-secondary); font-size: var(--fs-sm); }
  .kv-pasos__arrow { align-self: center; color: var(--text-muted); font-family: var(--font-mono); padding-top: 0; }
  .stroke-line { stroke: var(--kv-neutral-500); fill: none; stroke-width: 1; }      /* linework: excepción canvas registrada */
  .stroke-soft { stroke: var(--kv-neutral-700); fill: none; stroke-width: 1; }
  .stroke-hi { stroke: var(--kv-neutral-200); fill: none; stroke-width: 1.2; }
  .stroke-blue { stroke: var(--selection-indicator); fill: var(--selection-wash); stroke-width: 1.4; }
  .art-dim { font-family: var(--font-mono); font-size: 8px; fill: var(--kv-neutral-500); }
  .art-ref { font-family: var(--font-mono); font-size: 8px; fill: var(--kv-blue-300); }

  /* ===== Demo animada por fases (cómo funciona) ===== */
  .kv-demo__value { color: var(--text-secondary); font-size: var(--fs-md); }
  .kv-demo__value strong { color: var(--text-primary); font-weight: var(--fw-medium); }
  .kv-demo__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); align-items: center; }
  .kv-demo__steps { list-style: none; padding: 0; display: grid; }
  .kv-demo__step { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-6) var(--sp-6); border-left: var(--bw-2) solid var(--border-subtle); cursor: pointer; opacity: .55; transition: opacity var(--dur-base) var(--ease); }
  .kv-demo__step p { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; }
  .kv-demo__step.is-active { opacity: 1; border-left-color: var(--selection-indicator); background: var(--selection-wash); }
  .kv-demo__step:hover { opacity: .85; }
  .kv-demo__scene svg { width: 100%; height: auto; }
  /* Elementos por fase: entran al activarse su fase (y se recogen al reiniciar el loop) */
  .kv-demo [data-ph] { opacity: 0; transition: opacity .45s var(--ease); }
  .kv-demo [data-ph].is-on { opacity: 1; }
  .kv-demo .draw { stroke-dasharray: 640; stroke-dashoffset: 640; }
  .kv-demo .draw.is-on { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) .05s, opacity .3s var(--ease); }
  .stroke-omega { stroke: var(--kv-neutral-300); stroke-width: 1.4; fill: none; }
  .stroke-corte { stroke: var(--kv-neutral-400); stroke-width: 1; stroke-dasharray: 6 5; fill: none; }
  .stroke-fold { stroke: var(--kv-neutral-600); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
  .kv-chip-rect { fill: var(--bg-raised); stroke: var(--border); stroke-width: 1; }
  .kv-chip-rect--blue { stroke: var(--selection-indicator); }
  .kv-chip-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; fill: var(--text-primary); }
  .kv-chip-text--blue { fill: var(--kv-blue-300); }

  /* ===== Comparador de formatos ===== */
  .kv-comp__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-12); align-items: center; }
  .kv-comp__copy { display: grid; gap: var(--sp-4); }
  .kv-comp__copy p { color: var(--text-secondary); }
  .kv-comp__free { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--success); }
  /* La tabla comparadora — primera tabla densa del sistema (patrón para la calculadora) */
  .kv-comp__table { border: var(--bw-1) solid var(--border); background: var(--bg-sunken); overflow-x: auto; } /* lo ancho scrollea en su propio contenedor */
  .kv-comp__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: var(--bw-1) solid var(--border); }
  .kv-comp__title { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
  .kv-comp__live { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--kv-blue-300); border: var(--bw-1) solid color-mix(in srgb, var(--kv-blue-400) 45%, transparent); border-radius: var(--radius-control); padding: 2px var(--sp-4); }
  .kv-comp__table table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
  .kv-comp__table th { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); font-weight: var(--fw-medium); text-align: left; padding: var(--sp-4) var(--sp-3); border-bottom: var(--bw-1) solid var(--border); }
  .kv-comp__table th.num-h { text-align: right; }
  .kv-comp__table td { padding: var(--sp-3) var(--sp-3); border-bottom: var(--bw-1) solid var(--border-subtle); }
  .kv-comp__table td.num { text-align: right; white-space: nowrap; }
  .kv-comp__table tbody tr:last-child td { border-bottom: 0; }
  .kv-comp__table tr.is-optimo { background: color-mix(in srgb, var(--success) 10%, transparent); box-shadow: inset var(--bw-2) 0 0 var(--success); }
  .kv-comp__table .ok { color: var(--success); }
  .kv-comp__table .bad { color: var(--danger); }
  .kv-chip { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .04em; padding: 1px var(--sp-3); border-radius: var(--radius-control); margin-left: var(--sp-3); }
  .kv-chip--ok { background: var(--success); color: var(--kv-neutral-1000); font-weight: var(--fw-semibold); }
  .kv-chip--azul { background: color-mix(in srgb, var(--kv-blue-400) 22%, transparent); color: var(--kv-blue-200); }
  .kv-chip--naranja { background: color-mix(in srgb, var(--plan-architect) 22%, transparent); color: var(--plan-architect); }
  .kv-comp__table .kv-comp__note { padding: var(--sp-4) var(--sp-5); margin: 0; border-top: var(--bw-1) solid var(--border); }
  .kv-comp__row { display: grid; grid-template-columns: 130px 1fr 76px; gap: var(--sp-5); align-items: center; padding: var(--sp-3) var(--sp-4); border-left: var(--bw-2) solid transparent; }
  .kv-comp__row .num { font-size: var(--fs-sm); }
  .kv-comp__row.is-best { border-left-color: var(--selection-indicator); background: var(--selection-wash); }
  .kv-comp__bar { height: 8px; background: var(--bg-overlay); position: relative; overflow: hidden; }
  .kv-comp__bar i { position: absolute; inset: 0 auto 0 0; background: var(--kv-neutral-400); }
  .kv-comp__row:nth-child(1) .kv-comp__bar i { width: 88%; background: var(--selection-indicator); }
  .kv-comp__row:nth-child(2) .kv-comp__bar i { width: 74%; }
  .kv-comp__row:nth-child(3) .kv-comp__bar i { width: 63%; }
  .kv-comp__tag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; color: var(--selection-indicator); text-align: right; }
  .kv-comp__tag--mute { color: var(--text-muted); }
  .kv-comp__note { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: var(--sp-2); }

  /* ===== Capacidades ===== */
  .kv-caps { display: grid; grid-template-columns: repeat(4, 1fr); }
  .kv-cap { display: grid; gap: var(--sp-4); padding: var(--sp-6); }
  .kv-cap + .kv-cap { border-left: var(--bw-1) solid var(--border-subtle); }
  .kv-cap svg { width: 22px; height: 22px; stroke: var(--text-secondary); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .kv-cap h3 { font-size: var(--fs-base); }
  .kv-cap p { color: var(--text-secondary); font-size: var(--fs-sm); }

  /* ===== Planes ===== */
  /* kv-planes / kv-plan → kavitor.components.css (los usa también el precios público) */
  /* Precio a lo clásico: gordito y centrado, badge debajo, audiencia debajo */

  /* ===== CTA final ===== */
  .kv-cta { border-top: var(--bw-1) solid var(--border-subtle); }
  .kv-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-7); padding: var(--sp-12) 0; }
  .kv-cta__inner h2 { letter-spacing: -0.01em; }
  .kv-cta__side { display: flex; align-items: center; gap: var(--sp-6); }
  .kv-cta__side small { color: var(--text-secondary); }

  /* ===== Responsive ===== */
  @media (max-width: 960px) {
    .kv-hero { grid-template-columns: 1fr; min-height: 0; }
    .kv-hero__visual { min-height: 320px; border-right: 0; border-bottom: var(--bw-1) solid var(--border-subtle); }
    .kv-problema__grid, .kv-caps { grid-template-columns: 1fr; }
    .kv-cap + .kv-cap { border-left: 0; border-top: var(--bw-1) solid var(--border-subtle); }
    .kv-pasos { grid-template-columns: 1fr; }
    .kv-pasos__arrow { transform: rotate(90deg); justify-self: center; }
    .kv-stats__inner { grid-template-columns: 1fr; }
    .kv-stats__inner .k-stat + .k-stat { border-left: 0; border-top: var(--bw-1) solid var(--border-subtle); }
    .kv-nav__links { display: none; }
    .kv-tools { grid-template-columns: 1fr; }
    .kv-brand__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
    .kv-benef { grid-template-columns: 1fr; gap: var(--sp-8); }
    .kv-benef__aud { border-left: 0; padding-left: 0; border-top: var(--bw-1) solid var(--border-subtle); padding-top: var(--sp-6); }
    .kv-demo__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    .kv-comp__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    .kv-comp__table { overflow-x: auto; }
    .kv-comp__table table { min-width: 640px; }
  }
}

/* Chip "Beta" (Kavitor Studio 3D — en desarrollo, sale pronto) */
.kv-beta-chip {
  display: inline-block;
  font-size: 0.6em;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
  padding: 1px 6px;
  margin-left: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--action-primary-bg) 20%, transparent);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--action-primary-bg) 45%, transparent);
}