/* home.css — módulo de la home (views/landing/home_kavitor.php; la página de producto desde el 2026-10-01).
   Nació en el laboratorio C:\xampp\htdocs\VentaCOMP\kavitor-home-lab. Solo tokens: ni un #hex (§8.2).
   Movimiento de interfaz ≤ 220 ms (§6). Las ilustraciones (lienzos) son la excepción tipada «narrativa»:
   la del héroe es una entrada única y la de la historia la mueve el scroll de quien lee. */
@layer components {
  /* Anchos (medido en vivo el 01-10 a 1920 px: Linear 1436 px, Vercel 1448 px de contenedor). Contenedor de 1440 px con
     margen lateral fluido; el texto corrido se queda en su medida (65ch) y lo visual se estira. */
  .home { --cota-texto: var(--plan-architect); --ancho: 1440px; --margen: clamp(20px, 4vw, 64px); }
  [data-theme="light"] .home { --cota-texto: color-mix(in srgb, var(--plan-architect) 58%, var(--kv-neutral-1000)); }
  .home .container { max-width: var(--ancho); padding-inline: var(--margen); }

  /* ===== Apariciones al entrar en pantalla ===== */
  [data-revelar] { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .js [data-revelar]:not(.is-visto) { opacity: 0; transform: translateY(10px); }

  /* ===== Navbar: el CTA se enciende cuando ningún otro CTA principal está a la vista (home.js) ===== */
  .kv-nav .kv-nav__empezar.k-btn--ghost { border-color: var(--border); }

  /* ===== HÉROE ===== */
  /* El héroe va a sangre; su texto casa al píxel con el contenedor (cqw = ancho del héroe, sin la barra de scroll) */
  .hero { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(calc(100vh - 64px), 880px); border-bottom: var(--bw-1) solid var(--border-subtle); }
  .hero__texto { --x0: max(var(--margen), calc((100cqw - var(--ancho)) / 2 + var(--margen)));   /* donde empieza el texto */
                 position: relative; isolation: isolate; overflow: hidden;
                 display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6);
                 padding: var(--sp-12) var(--sp-9) var(--sp-12) var(--x0); }
  /* La foto del héroe actual de fondo, oscurecida hacia la derecha: se ve a la izquierda y el texto se lee.
     El velo es funcional (contraste del texto), no decorativo, y es del color del fondo: vale para los dos temas. */
  .hero__foto { position: absolute; inset: 0; z-index: -1; }
  .hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
  /* Velo medido (01-10): el máximo de foto que deja TODOS los textos en WCAG AA sobre su peor punto
     (mínimo 4,7:1 a 1440 y 1920; el velo más suave dejaba el rótulo en 4,4 y la entradilla en 4,3). */
  .hero__foto::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--bg-base) var(--velo-a, 25%), transparent) 0,
      color-mix(in srgb, var(--bg-base) var(--velo-b, 38%), transparent) calc(var(--x0) - 140px),
      color-mix(in srgb, var(--bg-base) var(--velo-c, 68%), transparent) var(--x0),
      color-mix(in srgb, var(--bg-base) var(--velo-d, 88%), transparent) calc(var(--x0) + 340px),
      var(--bg-base) 100%); }
  [data-theme="light"] .hero__foto::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--bg-base) 45%, transparent) 0,
      color-mix(in srgb, var(--bg-base) 55%, transparent) calc(var(--x0) - 140px),
      color-mix(in srgb, var(--bg-base) 86%, transparent) var(--x0),
      color-mix(in srgb, var(--bg-base) 95%, transparent) calc(var(--x0) + 340px),
      var(--bg-base) 100%); }
  .hero h1 { display: grid; gap: var(--sp-5); font-size: inherit; letter-spacing: 0; }
  .hero__clave { font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: 1.4; color: var(--text-secondary); }
  .hero__lema { font-size: clamp(2.4rem, 4.3vw, 4rem); font-weight: var(--fw-medium); line-height: 1.05; letter-spacing: -0.025em; color: var(--text-primary); max-width: 15ch; }
  .hero__sub { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary); max-width: 50ch; }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-2); }
  .hero__micro { font-size: var(--fs-xs); color: var(--text-secondary); }
  .hero__aviso { font-size: var(--fs-sm); color: var(--text-secondary); max-width: 54ch; padding-left: var(--sp-5); border-left: var(--bw-2) solid var(--plan-architect); }
  .hero__aviso strong { color: var(--text-primary); font-weight: var(--fw-medium); }
  .hero__escena { position: relative; min-height: 420px; border-left: var(--bw-1) solid var(--border-subtle); overflow: hidden; }
  .hero__escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__rotulo { position: absolute; left: var(--sp-7); right: var(--sp-7); bottom: var(--sp-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4);
                  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); max-width: none; pointer-events: none; }
  .hero__rotulo span:first-child { text-transform: uppercase; letter-spacing: .08em; }
  .hero__rotulo b { font-weight: var(--fw-medium); color: var(--text-secondary); }

  /* ===== CONFIANZA (el patrón de la home actual: grandes, en gris; al pasar, a color y crecen un poco) ===== */
  .confianza { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .confianza__in { display: grid; justify-items: center; gap: var(--sp-7); padding-block: var(--sp-10); }
  .confianza__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-7) var(--sp-10); }
  /* En oscuro, los negros suben a gris (contrast + brightness): un logo de tinta negra nunca desaparece, sin versiones por
     logo (02-10). Al pasar el ratón, con su color y los negros igual de arriba. En claro, como siempre. */
  .confianza__logos img { width: 150px; height: auto; max-height: 56px; object-fit: contain; opacity: .6; filter: grayscale(1) contrast(.4) brightness(1.7);
                          transition: filter var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
  [data-theme="light"] .confianza__logos img { filter: grayscale(1) brightness(.65); }
  .confianza__logos a:hover img, .confianza__logos a:focus-visible img { filter: contrast(.5) brightness(1.5); opacity: 1; transform: scale(1.08); }
  [data-theme="light"] .confianza__logos a:hover img, [data-theme="light"] .confianza__logos a:focus-visible img { filter: none; }

  /* ===== MARCA: la V que se pliega (js/logo.js), el logotipo y el lema ===== */
  .marca { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .marca__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); align-items: center; padding-block: var(--sp-12); }
  .marca__logo { display: grid; justify-items: center; gap: var(--sp-5); cursor: default; }
  .marca__v { width: min(240px, 60%); height: auto; overflow: visible; }
  .marca__v .v-base, .marca__v .v-izq { fill: var(--text-primary); }
  .marca__v .v-der { fill: var(--kv-blue-500); }                   /* el azul oficial del logo (#3A5FAA) */
  .marca__v .v-suelo { stroke: var(--selection-indicator); stroke-width: 2; stroke-dasharray: 8 6; fill: none; }   /* el suelo del que sale la bandeja */
  .marca__palabra { width: min(440px, 100%); height: auto; }
  .marca__lema { font-size: var(--fs-md); letter-spacing: .04em; color: var(--text-secondary); }
  .js .marca__logo:not(.is-plegado) .marca__palabra, .js .marca__logo:not(.is-plegado) .marca__lema { opacity: 0; transform: translateY(6px); }
  .marca__palabra, .marca__lema { transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .marca__texto { display: grid; gap: var(--sp-5); }
  .marca__texto p { font-size: var(--fs-lg); line-height: 1.6; color: var(--text-secondary); }
  .marca__texto strong { color: var(--text-primary); font-weight: var(--fw-medium); }

  /* ===== HISTORIA (scroll): pasos a la izquierda, escena fija a la derecha ===== */
  .historia { padding-top: var(--sp-16); border-bottom: var(--bw-1) solid var(--border-subtle); }
  .historia__cabecera { max-width: 760px; margin-bottom: 0; }
  .historia__cabecera p { font-size: var(--fs-md); color: var(--text-secondary); }
  .historia__cuerpo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-10); }
  /* media pantalla de margen arriba y abajo: cada paso queda centrado en su tramo de la animación (home.js) */
  .historia__pasos { list-style: none; margin: 0; padding: calc(50vh - 32px) 0; }
  .paso { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4);
          padding-left: var(--sp-7); border-left: var(--bw-2) solid var(--border-subtle); cursor: pointer; opacity: .38;
          transition: opacity var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease); }
  .paso:hover { opacity: .7; }
  .paso.is-activo { opacity: 1; border-left-color: var(--selection-indicator); }
  .paso h3 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
  .paso p { font-size: var(--fs-md); line-height: 1.6; color: var(--text-secondary); max-width: 44ch; }
  .paso .paso__dato { font-size: var(--fs-sm); }
  .paso__dato [data-historia] { font-family: var(--font-mono); color: var(--text-primary); }
  .historia__escenario { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; align-items: center; }
  .historia__marco { position: relative; width: 100%; height: min(calc(100vh - 64px - var(--sp-12)), 780px); border: var(--bw-1) solid var(--border-subtle); overflow: hidden; }
  .historia__marco canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .historia__capa { position: absolute; left: var(--sp-5); top: var(--sp-5); display: grid; gap: var(--sp-2); opacity: 0; pointer-events: none;
                    padding: var(--sp-4) var(--sp-5); background: var(--bg-base); border: var(--bw-1) solid var(--border-subtle); }
  .historia__cifra { font-size: var(--fs-sm); color: var(--text-secondary); }
  .historia__cifra b { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-medium); color: var(--text-primary); margin-right: var(--sp-2); }
  .historia__titulo-capa { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }
  .historia__leyenda { list-style: none; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); }
  .historia__leyenda i { display: inline-block; vertical-align: middle; width: 18px; margin-right: var(--sp-3); border-top: var(--bw-1) solid var(--kv-neutral-200); }
  .historia__leyenda .l-fresado { border-top-style: dashed; border-top-color: var(--kv-blue-300); }
  .historia__leyenda .l-taladro { width: 6px; height: 6px; margin: 0 calc(var(--sp-3) + 6px) 0 6px; border: 0; border-radius: var(--radius-full); background: var(--plan-architect); }
  [data-theme="light"] .historia__leyenda i { border-top-color: var(--kv-neutral-800); }
  [data-theme="light"] .historia__leyenda .l-fresado { border-top-color: var(--kv-blue-500); }
  .historia__progreso { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bw-2); background: var(--border-subtle); }
  .historia__progreso i { display: block; height: 100%; width: calc(var(--s, 0) * 100%); background: var(--selection-indicator); }

  /* ===== TODO EL PROCESO (seis capacidades; filetes, no tarjetas: §8.20) ===== */
  .proceso { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .proceso .kv-section__head p { font-size: var(--fs-md); color: var(--text-secondary); }
  .proceso__rejilla, .studio__potencia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-9); }
  .proceso__rejilla article, .studio__potencia article { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-5); border-top: var(--bw-1) solid var(--border); }
  .proceso__rejilla h3, .studio__potencia h3 { font-size: var(--fs-lg); }
  .proceso__rejilla p, .studio__potencia p { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-secondary); }

  /* ===== DEMO PARAMÉTRICA ===== */
  .demo { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .demo .kv-section__head p { color: var(--text-secondary); font-size: var(--fs-md); }
  .demo__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-10); align-items: start; }
  .demo__controles { display: grid; gap: var(--sp-6); }
  .demo__grupo { display: grid; gap: var(--sp-5); min-width: 0; margin: 0; padding: var(--sp-5) 0 0; border: 0; border-top: var(--bw-1) solid var(--border-subtle); }
  .demo__grupo > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-xs);
                          letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
  .demo__grupo > legend + * { clear: both; }
  .demo__campo { display: grid; gap: var(--sp-3); min-width: 0; border: 0; padding: 0; }
  .demo__campo--linea { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .demo__campo > label, .demo__campo > legend, .demo__etiqueta { padding: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
  .demo__campo > legend { margin-bottom: var(--sp-3); }
  .demo__valor { display: flex; align-items: center; gap: var(--sp-3); }
  .demo__valor[hidden] { display: none; }
  .demo__valor .k-input { max-width: 130px; text-align: right; }
  .demo__valor span { font-size: var(--fs-sm); color: var(--text-secondary); }
  .demo__eje { display: grid; gap: var(--sp-3); }
  .demo__pista { font-size: var(--fs-xs); color: var(--text-secondary); max-width: none; min-height: 1.5em; }
  .demo__pliegues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
  .demo__pliegues .k-input { max-width: none; width: 100%; }
  .demo__rango { width: 100%; accent-color: var(--selection-indicator); }
  .demo__segmentos { display: inline-flex; justify-self: start; border: var(--bw-1) solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
  .demo__segmentos label { position: relative; }
  .demo__segmentos label + label { border-left: var(--bw-1) solid var(--border); }
  .demo__segmentos input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .demo__segmentos span { display: block; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); color: var(--text-secondary);
                          transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .demo__segmentos input:checked + span { background: var(--selection-wash); color: var(--text-primary); box-shadow: inset 0 calc(-1 * var(--bw-2)) 0 var(--selection-indicator); }
  .demo__segmentos input:focus-visible + span { outline: var(--bw-2) solid var(--focus-ring); outline-offset: -2px; }
  .demo__salida { display: grid; gap: var(--sp-5); min-width: 0; }
  .demo__alzado { margin: 0; padding: var(--sp-4); border: var(--bw-1) solid var(--border-subtle); background: var(--bg-sunken); }
  .demo__alzado figcaption, .demo__desarrollo figcaption { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-secondary); }
  .demo__svg svg, .demo__chapas svg { display: block; width: 100%; height: auto; }
  .demo__svg:focus-visible { outline: var(--bw-2) solid var(--focus-ring); outline-offset: 2px; }
  .demo__vacio { padding: var(--sp-10) var(--sp-5); color: var(--text-secondary); text-align: center; max-width: none; }
  .demo__aviso { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: var(--text-primary); max-width: none;
                 border: var(--bw-1) solid color-mix(in srgb, var(--danger) 45%, transparent); border-left: var(--bw-2) solid var(--danger);
                 background: color-mix(in srgb, var(--danger) 8%, transparent); }
  .demo__pie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sp-5); align-items: stretch; }
  .demo__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; margin: 0; border: var(--bw-1) solid var(--border-subtle); }
  .demo__datos div { display: grid; align-content: center; padding: var(--sp-5) var(--sp-6); }
  .demo__datos div:nth-child(even) { border-left: var(--bw-1) solid var(--border-subtle); }
  .demo__datos div:nth-child(n+3) { border-top: var(--bw-1) solid var(--border-subtle); }
  .demo__datos dt { font-size: var(--fs-xs); color: var(--text-secondary); }
  .demo__datos dd { margin: var(--sp-2) 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-medium); line-height: 1.1; }
  .demo__desarrollo { margin: 0; padding: var(--sp-4); border: var(--bw-1) solid var(--border-subtle); background: var(--bg-sunken); }
  .demo__comparador { margin-top: var(--sp-8); border: var(--bw-1) solid var(--border); background: var(--bg-sunken); }
  .demo__comp-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-3) var(--sp-5); padding: var(--sp-4) var(--sp-5); border-bottom: var(--bw-1) solid var(--border); }
  .demo__comp-titulo { font-weight: var(--fw-semibold); }
  .demo__comp-ayuda { font-size: var(--fs-xs); color: var(--text-secondary); }
  .demo__fila { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .5fr) minmax(0, .8fr) minmax(0, 1.7fr); gap: var(--sp-5); align-items: center;
                padding: var(--sp-4) var(--sp-5); border-bottom: var(--bw-1) solid var(--border-subtle); box-shadow: inset var(--bw-2) 0 0 transparent; cursor: pointer;
                transition: background var(--dur-fast) var(--ease); }
  .demo__fila:last-child { border-bottom: 0; }
  .demo__fila:hover { background: var(--hover-bg); }
  .demo__fila--cab { cursor: default; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
  .demo__fila--cab:hover { background: transparent; }
  .demo__fila--cab span:nth-child(2), .demo__fila--cab span:nth-child(3) { text-align: right; }
  .demo__fila input { position: absolute; opacity: 0; pointer-events: none; }
  .demo__fila:has(input:checked) { background: var(--selection-wash); box-shadow: inset var(--bw-2) 0 0 var(--selection-indicator); }
  .demo__fila:has(input:focus-visible) { outline: var(--bw-2) solid var(--focus-ring); outline-offset: -2px; }
  .demo__fila .num { text-align: right; font-size: var(--fs-sm); }
  .demo__fmt { font-size: var(--fs-sm); }
  .demo__fila.is-optimo .demo__fmt::after { content: "Óptimo"; margin-left: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--success); }
  .demo__util { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em; gap: var(--sp-4); align-items: center; }
  .demo__util i { position: relative; height: 6px; background: var(--bg-overlay); overflow: hidden; }
  .demo__util i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--util, 0%); background: var(--kv-neutral-400); transition: width var(--dur-slow) var(--ease); }
  .demo__fila.is-optimo .demo__util i::before { background: var(--success); }
  .demo__fila.no-cabe [data-c="util"] { color: var(--danger); font-family: var(--font-ui); }
  .demo__chapas { margin-top: var(--sp-6); }
  .demo__traspaso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-7); margin-top: var(--sp-7); }
  .demo__traspaso-nota { font-size: var(--fs-sm); color: var(--text-secondary); max-width: 72ch; }
  .demo__nota { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--text-secondary); max-width: 92ch; }
  /* El botón que pliega los mandos: solo en móvil y tablet (abajo, @media); el texto cambia con su estado */
  .demo__ajustes { display: none; width: 100%; justify-content: space-between; gap: var(--sp-4); }
  .demo__ajustes::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: -4px var(--sp-2) 0 0;
                          border-right: var(--bw-1) solid currentColor; border-bottom: var(--bw-1) solid currentColor;
                          transform: rotate(45deg); transition: transform var(--dur-base) var(--ease); }
  .demo__ajustes[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
  .demo__ajustes[aria-expanded="true"] .demo__ajustes-abrir, .demo__ajustes:not([aria-expanded="true"]) .demo__ajustes-cerrar { display: none; }

  /* Dibujo de la demo (SVG): colores de la casa por clase, cada tema el suyo */
  .d-muro { fill: var(--kv-neutral-950); }
  .d-bandeja { fill: var(--kv-neutral-600); cursor: pointer; transition: fill var(--dur-fast) var(--ease); }
  .d-bandeja:hover { fill: var(--kv-neutral-500); }
  .d-bandeja.is-sel { fill: color-mix(in srgb, var(--selection-indicator) 45%, var(--kv-neutral-600)); stroke: var(--selection-indicator); stroke-width: 2; }
  .d-bandeja.no-cabe { fill: color-mix(in srgb, var(--danger) 30%, var(--kv-neutral-600)); stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 5 3; }
  .d-desarrollo { fill: var(--kv-neutral-800); stroke: var(--kv-neutral-200); stroke-width: 1.2; }
  .d-cara { fill: var(--kv-neutral-700); stroke: var(--kv-blue-300); stroke-width: 1; stroke-dasharray: 5 4; }
  .d-pliegue-txt { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 10.5px; }
  .d-hueco { fill: var(--bg-base); stroke: var(--kv-neutral-500); stroke-width: 1; }
  .d-cota { stroke: var(--plan-architect); stroke-width: 1; }
  .d-cota--cadena { opacity: .8; }
  .d-cota-marca { stroke: var(--plan-architect); stroke-width: 1.3; }
  .d-cota-txt { fill: var(--cota-texto); font-family: var(--font-mono); font-size: 11px; }
  .d-chapa { fill: var(--kv-neutral-900); stroke: var(--kv-neutral-600); stroke-width: 1; }
  .d-pieza { fill: var(--kv-neutral-600); stroke: var(--kv-neutral-950); stroke-width: .8; }
  .d-chapa-txt { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; }
  [data-theme="light"] .d-muro { fill: var(--kv-neutral-500); }
  [data-theme="light"] .d-bandeja { fill: var(--kv-neutral-100); }
  [data-theme="light"] .d-hueco { fill: var(--kv-neutral-600); stroke: var(--kv-neutral-700); }
  [data-theme="light"] .d-chapa { fill: var(--kv-neutral-0); stroke: var(--kv-neutral-400); }
  [data-theme="light"] .d-pieza { fill: var(--kv-neutral-200); stroke: var(--kv-neutral-500); }
  [data-theme="light"] .d-bandeja:hover { fill: var(--kv-neutral-200); }
  [data-theme="light"] .d-bandeja.is-sel { fill: color-mix(in srgb, var(--selection-indicator) 22%, var(--kv-neutral-50)); }
  [data-theme="light"] .d-desarrollo { fill: var(--kv-neutral-50); stroke: var(--kv-neutral-800); }
  [data-theme="light"] .d-cara { fill: var(--kv-neutral-100); stroke: var(--kv-blue-500); }

  /* ===== KAVITOR STUDIO (capturas reales) ===== */
  .studio { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .studio .kv-section__head p { color: var(--text-secondary); font-size: var(--fs-md); }
  .studio__marca { color: var(--plan-architect); }   /* la identidad de Kavitor Studio es el naranja de Architect */
  .studio__captura { margin: 0; display: grid; gap: var(--sp-6); }
  .studio__marco { position: relative; overflow: hidden; border: var(--bw-1) solid var(--border); background: var(--bg-sunken); }
  .studio__marco img { display: block; width: 100%; height: auto; }
  .studio__punto { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: var(--radius-full);
                   border: var(--bw-2) solid var(--plan-architect); background: color-mix(in srgb, var(--plan-architect) 22%, transparent);
                   transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
  .studio__punto.is-foco { transform: scale(1.35); background: var(--plan-architect); }
  .studio__punto[data-punto="1"] { left: 10.5%; top: 37%; }
  .studio__punto[data-punto="2"] { left: 24.6%; top: 46%; }
  .studio__punto[data-punto="3"] { left: 52%; top: 59%; }
  .studio__leyenda { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
  .studio__leyenda li { padding-top: var(--sp-4); border-top: var(--bw-2) solid var(--border-subtle); font-size: var(--fs-sm); color: var(--text-secondary); transition: border-color var(--dur-base) var(--ease); }
  .studio__leyenda li strong { color: var(--text-primary); font-weight: var(--fw-medium); }
  .studio__leyenda li.is-foco { border-top-color: var(--plan-architect); }
  /* Bandejas paramétricas: dos filas captura + lista (alternas) y la rejilla de funciones, con filete naranja (Studio) */
  .studio__subcabecera { margin-top: var(--sp-16); margin-bottom: 0; }
  .studio__fila { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-10); align-items: center; margin-top: var(--sp-10); }
  .studio__fila--inversa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .studio__fila--inversa .studio__figura { order: 2; }
  .studio__figura { margin: 0; display: grid; gap: var(--sp-4); }
  .studio__figura figcaption { font-size: var(--fs-sm); color: var(--text-secondary); }
  .studio__lista { display: grid; gap: var(--sp-6); }
  .studio__lista h3 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
  .studio__lista ul { list-style: none; padding: 0; display: grid; gap: var(--sp-5); }
  .studio__lista li { padding-left: var(--sp-5); border-left: var(--bw-2) solid var(--border-subtle); font-size: var(--fs-md); line-height: 1.55; color: var(--text-secondary); }
  .studio__lista li strong { color: var(--text-primary); font-weight: var(--fw-medium); }
  .studio__potencia { margin-top: var(--sp-12); }
  .studio__potencia article { border-top-color: color-mix(in srgb, var(--plan-architect) 55%, transparent); }

  /* ===== PARA QUIÉN ===== */
  .quien { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .quien__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quien__grid article { display: grid; gap: var(--sp-5); align-content: start; padding-right: var(--sp-10); }
  .quien__grid article + article { padding: 0 0 0 var(--sp-10); border-left: var(--bw-1) solid var(--border-subtle); }
  .quien__grid h3 { font-size: var(--fs-xl); }
  .quien__grid p { font-size: var(--fs-md); line-height: 1.6; color: var(--text-secondary); }

  /* ===== GRATIS Y SIN REGISTRO ===== */
  .gratis { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .gratis__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-12); align-items: start; }
  .gratis__cab { display: grid; gap: var(--sp-4); }
  .gratis__cab p { color: var(--text-secondary); }
  .gratis__lista { list-style: none; padding: 0; border-top: var(--bw-1) solid var(--border-subtle); }
  .gratis__lista li { border-bottom: var(--bw-1) solid var(--border-subtle); }
  .gratis__lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-6); padding: var(--sp-6) var(--sp-3);
                     color: var(--text-primary); transition: background var(--dur-fast) var(--ease); }
  .gratis__lista a:hover { background: var(--hover-bg); color: var(--text-primary); }
  .gratis__nombre { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
  .gratis__desc { grid-column: 1; font-size: var(--fs-sm); color: var(--text-secondary); }
  .gratis__ir { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); color: var(--text-muted);
                transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .gratis__lista a:hover .gratis__ir { transform: translateX(4px); color: var(--link); }
  .gratis__guias { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-7); margin-top: calc(-1 * var(--sp-6)); font-size: var(--fs-sm); }
  .gratis__guias-titulo { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
  .gratis__guias a { color: var(--link); }
  .gratis__guias a:hover { color: var(--text-primary); }

  /* ===== PLANES (resumen) ===== */
  .planes__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--bw-1) solid var(--border-subtle); }
  .plan { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-8) var(--sp-7); border-top: var(--bw-2) solid transparent; }
  .plan + .plan { border-left: var(--bw-1) solid var(--border-subtle); }
  .plan--pro { border-top-color: var(--selection-indicator); background: var(--bg-sunken); }
  .plan--architect { border-top-color: var(--plan-architect); }
  .plan__tag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
  .plan--pro .plan__tag { color: var(--selection-indicator); }
  .plan--architect .plan__tag { color: var(--plan-architect); }
  .plan__nombre { font-size: var(--fs-xl); font-weight: var(--fw-medium); }
  .plan__precio { font-size: 2.25rem; font-weight: var(--fw-semibold); line-height: 1.15; letter-spacing: -0.01em; }
  .plan__precio small { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-secondary); }
  .plan__precio s { margin-right: var(--sp-2); font-size: var(--fs-lg); font-weight: var(--fw-regular); color: var(--text-muted); }
  .plan p { font-size: var(--fs-sm); color: var(--text-secondary); }
  .planes__pie { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-secondary); max-width: none; }

  /* ===== GUÍA DE INSTALADORES ===== */
  .guia { border-top: var(--bw-1) solid var(--border-subtle); border-bottom: var(--bw-1) solid var(--border-subtle); }
  .guia__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-7); padding-block: var(--sp-10); }
  .guia__botones { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
  .guia__texto { display: grid; gap: var(--sp-3); max-width: 640px; }
  .guia__texto p { color: var(--text-secondary); }

  /* ===== FAQ / CTA FINAL ===== */
  .faq__in { max-width: 880px; }
  .cta-final__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-7); padding-block: var(--sp-16); }
  .cta-final h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; max-width: 18ch; }
  .cta-final__lado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
  .cta-final__lado small { color: var(--text-secondary); }

  /* (El mapa del sitio, .pie-enlaces, es común desde el 02-10: kavitor.chrome.css y views/layouts/partials/pie_mapa.php) */

  /* ===== Responsive ===== */
  @media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero__texto { padding: var(--sp-10) var(--sp-5) var(--sp-9); }
    .hero__escena { min-height: 0; height: min(92vw, 440px); border-left: 0; border-top: var(--bw-1) solid var(--border-subtle); }
    .hero__rotulo { left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4); }
    .confianza__in { justify-content: center; text-align: center; }
    .confianza__logos { justify-content: center; gap: var(--sp-6) var(--sp-8); }
    .historia__cuerpo { grid-template-columns: 1fr; gap: 0; }
    .historia__escenario { order: -1; z-index: 2; height: 50vh; padding-block: var(--sp-3); background: var(--bg-base); }
    .historia__marco { height: 100%; }
    .historia__pasos { padding: calc(25vh - 32px) 0; }
    .paso { min-height: 40vh; padding-left: var(--sp-5); }
    .demo__grid, .gratis__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    /* Demo apilada: primero el resultado; los mandos (y la nota de cómo cuenta), tras el botón. Sin JS, todo a la vista */
    .demo__grid { gap: var(--sp-6); }
    .demo__salida { order: -1; }
    .demo__ajustes { display: flex; }
    .js .demo:not(.is-ajustes) .demo__controles, .js .demo:not(.is-ajustes) .demo__nota { display: none; }
    html:not(.js) .demo__ajustes { display: none; }
    .demo__pie { grid-template-columns: 1fr; }
    .marca__in { grid-template-columns: 1fr; gap: var(--sp-9); padding-block: var(--sp-10); }
    .studio__leyenda { grid-template-columns: 1fr; gap: var(--sp-6); }
    .studio__fila, .studio__fila--inversa { grid-template-columns: 1fr; gap: var(--sp-7); }
    .studio__fila--inversa .studio__figura { order: 0; }
    .proceso__rejilla, .studio__potencia { grid-template-columns: 1fr; gap: var(--sp-8); }
    .gratis__guias { grid-column: auto; margin-top: 0; }
    /* Héroe apilado: la foto queda detrás de todo el texto, con el velo de arriba abajo */
    .hero__foto::after, [data-theme="light"] .hero__foto::after {
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-base) 62%, transparent) 0%,
                  color-mix(in srgb, var(--bg-base) 84%, transparent) 50%, var(--bg-base) 100%); }
    .quien__grid { grid-template-columns: 1fr; gap: var(--sp-9); }
    .quien__grid article { padding: 0; }
    .quien__grid article + article { padding: var(--sp-9) 0 0; border-left: 0; border-top: var(--bw-1) solid var(--border-subtle); }
    .planes__fila { grid-template-columns: 1fr; }
    .plan + .plan { border-left: 0; border-top: var(--bw-1) solid var(--border-subtle); }
    .plan--pro, .plan--architect { border-top-width: var(--bw-2); }
  }
  @media (max-width: 600px) {
    .demo__fila { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-2) var(--sp-4); }
    .demo__fila--cab { display: none; }
    .demo__util { grid-column: 1 / -1; }
    .demo__segmentos span { padding-inline: var(--sp-3); }
    .demo__pliegues { grid-template-columns: 1fr; }
    .confianza__logos img { width: 120px; }
    .demo__datos div { padding: var(--sp-4) var(--sp-5); }
    .demo__datos dd { font-size: var(--fs-xl); }
    /* Móvil (02-10, la home medía 22 pantallas): el ritmo vertical se aprieta (96 → 64 px por sección) y las rejillas de
       tarjetas pasan a carrusel que se desliza de lado, a sangre; asoma la siguiente tarjeta: la señal de que hay más */
    .home .kv-section { padding-block: var(--sp-12); }
    .historia { padding-top: var(--sp-12); }
    .studio__subcabecera { margin-top: var(--sp-12); }
    .studio__fila { margin-top: var(--sp-8); }
    .studio__potencia { margin-top: var(--sp-10); }
    .proceso__rejilla, .studio__potencia, .studio__leyenda {
      display: flex; gap: var(--sp-6); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
      margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen); scroll-padding-inline: var(--margen); scrollbar-width: none; }
    .proceso__rejilla::-webkit-scrollbar, .studio__potencia::-webkit-scrollbar, .studio__leyenda::-webkit-scrollbar { display: none; }
    .proceso__rejilla > *, .studio__potencia > *, .studio__leyenda > * { flex: 0 0 82%; scroll-snap-align: start; }
  }
}