/* KeepLights — Home (Home.dc.html, variante B «blocks»), implementada tal cual.
   Hero -> How it works -> Doors -> Trust -> Close. Los valores (px, colores, tiempos) salen del
   diseno; donde el diseno usa `cqw` sobre la pagina entera, aqui va `vw`.

   COMO SE LEE ESTE ARCHIVO
   - El objeto `c` del diseno (un juego para dia y otro para apagon) son las variables `--klh-*`
     de abajo. Todo lo que cambia con el modo pasa por una variable: el selector de apagon
     aparece UNA sola vez.
   - El apagon vive en <html data-mode="outage"> (DESIGN.md): asi lo siguen la barra de
     desplazamiento, la cabecera y el pie, que usan las variables globales de kl.css.
   - Si el visitante tiene guardado el tema oscuro, la portada nace en apagon ANTES de que
     cargue home.js (tema.js deja data-tema-guardado en <html>): no hay parpadeo.

   NOTAS DE MAQUETADO
   - El diseno NO usa border-box global: donde una caja lleva borde y medida fija, la medida
     de aqui ya suma el borde (circulo de 64 + 1.5 + 1.5 = 67 px, tarjeta de 300 + 30 = 330 px…).
   - El diseno no fija interlineado en la raiz: lo que alli no lo declara va con `normal`.
   - Nada de aspect-ratio: la escena es 4:3 con relleno porcentual y sus piezas llevan el alto
     ya calculado en % (Safari mide mal aspect-ratio). Todo hijo flexible lleva min-width: 0.
   - Ningun tono entre 250° y 340°. Un solo ambar a la vista: la ventana (arriba) o el punto (abajo). */

@keyframes kl-home-breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes kl-home-nudge { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }

/* ------------------------------------------------------------ paleta: dia */
:root[data-pagina="home"] {
  --klh-out: 0;                       /* 0 = dia, 1 = apagon (para calcular retardos) */
  --klh-ver-dia: block; --klh-ver-apagon: none;
  --klh-dia-vis: visible; --klh-dia-vd: 0ms;
  --klh-dot: #0F766E;
  --klh-track: #0F766E; --klh-knob: #FFFFFF; --klh-knob-top: 4px;
  --klh-wall: #FFFFFF; --klh-wall2: #FBF7EF; --klh-house-bd: #E4DDCC; --klh-slab: #10292B;
  --klh-clad: #0B5D57; --klh-clad-n: #44605F; --klh-slat: #E4DDCC;
  --klh-door: #0B5D57; --klh-door-n: #44605F; --klh-ground: #E4DDCC; --klh-lawn: #E3F3F0;
  --klh-tree: #0F766E; --klh-trunk: #44605F; --klh-bush: #0F766E; --klh-step: #E4DDCC;
  --klh-win: #FFF2D6; --klh-win-bd: #E4DDCC;
  --klh-night-on: 0; --klh-stars-on: 0; --klh-halo-op: 0.7;
  --klh-light-on: 0; --klh-obj-on: 0; --klh-dim-on: 0;
  --klh-obj-pe: none; --klh-obj-vis: hidden; --klh-obj-d: 0ms; --klh-obj-vd: 400ms;
  --klh-chip-bd: #E4DDCC; --klh-chip-bg: #FFFFFF; --klh-chip-fg: #10292B;
  --klh-chip-on-bd: #0F766E; --klh-chip-on-bg: #E3F3F0; --klh-chip-on-fg: #0B5D57;
  --klh-step-fg: #FFFFFF;
  --klh-doors-bg: #E3F3F0; --klh-door-card: #FFFFFF; --klh-close-bg: #0B2530;
  --klh-ph: #E3F3F0; --klh-ph-line: #44605F;
  --klh-map-idle: #E3F3F0; --klh-map-yes: #0F766E; --klh-map-no: #FFFFFF;
}

/* --------------------------------------------------------- paleta: apagon */
:root[data-mode="outage"],
:root[data-pagina="home"][data-tema-guardado="dark"]:not([data-mode]) {
  /* Las globales de kl.css, con los valores de apagon del diseno (el juego dusk). */
  --kl-paper: #0B2530; --kl-surface: #123541; --kl-ink: #EAF4F2; --kl-soft: #A9C7C4; --kl-line: #1F4552;
  --kl-mist: #1F4552; --kl-sun: #1B3A3F; --kl-lagoon: #EAF4F2; --kl-deep: #A9C7C4; --kl-enough: #A9C7C4;
  --kl-not-enough: #F0A3A3;
  --kl-btn: #EAF4F2; --kl-btnh: #E3F3F0; --kl-btnfg: #0B2530; --kl-onlag: #0B2530;
  --kl-sbthumb: #A9C7C4; --kl-sbhover: #EAF4F2; --kl-sbtrack: #123541;
  color-scheme: dark;

  --klh-out: 1;
  --klh-ver-dia: none; --klh-ver-apagon: block;
  --klh-dia-vis: hidden; --klh-dia-vd: 800ms;
  --klh-dot: #A9C7C4;
  --klh-track: #0B2530; --klh-knob: #A9C7C4; --klh-knob-top: 34px;
  --klh-wall: #123541; --klh-wall2: #123541; --klh-house-bd: #1F4552; --klh-slab: #1F4552;
  --klh-clad: #1F4552; --klh-clad-n: #1F4552; --klh-slat: #1F4552;
  --klh-door: #1F4552; --klh-door-n: #1F4552; --klh-ground: #1F4552; --klh-lawn: #123541;
  --klh-tree: #123541; --klh-trunk: #1F4552; --klh-bush: #1F4552; --klh-step: #1F4552;
  --klh-win: #0B2530; --klh-win-bd: #1F4552;
  --klh-night-on: 1; --klh-stars-on: 1; --klh-halo-op: 1;
  --klh-light-on: 1; --klh-obj-on: 1; --klh-dim-on: 0.45;
  --klh-obj-pe: auto; --klh-obj-vis: visible; --klh-obj-d: 800ms; --klh-obj-vd: 0ms;
  --klh-chip-bd: #1F4552; --klh-chip-bg: transparent; --klh-chip-fg: #EAF4F2;
  --klh-chip-on-bd: #A9C7C4; --klh-chip-on-bg: #123541; --klh-chip-on-fg: #EAF4F2;
  --klh-step-fg: #0B2530;
  --klh-doors-bg: #123541; --klh-door-card: #0B2530; --klh-close-bg: #123541;
  --klh-ph: #123541; --klh-ph-line: #A9C7C4;
  --klh-map-idle: #1F4552; --klh-map-yes: #A9C7C4; --klh-map-no: #1F4552;
}

/* El cambio de modo de toda la pagina dura 800 ms (la raiz del diseno). */
:root[data-pagina="home"] body { transition: background-color 800ms var(--kl-e), color 800ms var(--kl-e); }

.kl-home { position: relative; }
.kl-home__main { display: block; line-height: normal; }

.kl-home-nb { white-space: nowrap; }

/* Lo que solo se ve en un modo, y la pista de la linterna segun haya cursor o no. */
.kl-home-dia { display: var(--klh-ver-dia); }
.kl-home-apagon { display: var(--klh-ver-apagon); }
.kl-home-toque { display: none; }
@media (hover: none) {
  .kl-home-cursor { display: none; }
  .kl-home-toque { display: var(--klh-ver-apagon); }
}

/* --------------------------------------- SiteHeader dentro del Hero (Home) */
.kl-top--home { gap: clamp(4px, 2vw, 28px); border-bottom: 0; background: transparent; animation: kl-fade 400ms var(--kl-e) 200ms both; }
.kl-top--home .kl-logo__dot span:first-child { border-color: var(--klh-dot); transition: border-color 800ms; }
.kl-top--home .kl-logo__dot span:last-child { background: var(--klh-dot); transition: background-color 800ms; }
.kl-top--home .kl-nav a { transition: color 800ms; }
.kl-top--home .kl-nav a:hover { color: var(--kl-ink); }

/* SiteFooter en Home: mismas piezas, con el aire que le da Home.dc.html. */
:root[data-pagina="home"] .kl-foot { padding: 40px var(--kl-gutter) 48px; gap: 16px 32px; transition: color 800ms, border-color 800ms; }
:root[data-pagina="home"] .kl-foot__logo span { background: var(--klh-dot); }

/* -------------------------------------------------------------------- Hero */
/* La cabecera es hermana del Hero (queda fuera de <main>), asi que los fondos del Hero suben
   `--kl-hero-up` para pasar por detras de ella. home.js lo mide (cambia al abrir el menu). */
.kl-hero { --kl-hero-up: clamp(64px, 5.6vw, 80px); position: relative; isolation: isolate; -webkit-clip-path: inset(calc(-1 * var(--kl-hero-up)) 0 0 0); clip-path: inset(calc(-1 * var(--kl-hero-up)) 0 0 0); }
.kl-hero__dia, .kl-hero__noche, .kl-hero__atenua, .kl-hero__linterna { position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--kl-hero-up)); pointer-events: none; }
/* En apagon el fondo de dia se retira al terminar el fundido: si el alto del Hero cae en medio pixel,
   dos capas apiladas dejan una raya clara en el borde de abajo. Por lo mismo las de noche bajan 1 px mas. */
.kl-hero__dia { z-index: -4; background: linear-gradient(180deg, #E3F3F0 0%, #FBF7EF 100%); visibility: var(--klh-dia-vis); transition: visibility 0s linear var(--klh-dia-vd); }
.kl-hero__noche, .kl-hero__atenua { bottom: -1px; }
.kl-hero__noche { z-index: -3; background: linear-gradient(180deg, #123541 0%, #0B2530 100%); opacity: var(--klh-night-on); transition: opacity 800ms var(--kl-e); }
/* El cielo se oscurece hasta un 30 % mientras el Hero se va (--p: 0 a 1 con el desplazamiento). */
.kl-hero__atenua { z-index: -3; background: linear-gradient(180deg, #123541 0%, #0B2530 100%); opacity: calc(var(--p, 0) * 0.3); }
/* CursorFlashlight: 240 px de luz que siguen al cursor (solo en apagon). */
.kl-hero__linterna { z-index: -2; opacity: var(--klh-light-on); transition: opacity 400ms var(--kl-e); background: radial-gradient(circle 240px at var(--lx, 72%) var(--ly, 30%), rgba(234, 244, 242, 0.14) 0%, rgba(234, 244, 242, 0.05) 45%, rgba(234, 244, 242, 0) 70%); }

.kl-hero__in { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: clamp(20px, 4vw, 64px); padding: clamp(12px, 3.3vw, 48px) var(--kl-gutter) clamp(48px, 7vw, 104px); }
.kl-hero__texto { flex: 1 1 460px; min-width: 0; max-width: 600px; display: flex; flex-direction: column; }
.kl-hero__texto > * { min-width: 0; }

.kl-hero__h1 { font-family: var(--kl-display); font-weight: 800; font-size: clamp(42px, 6.4vw, 96px); line-height: 1.0; letter-spacing: -0.035em; text-wrap: balance; }
.kl-hero__h1 span { display: inline-block; animation: kl-rise 400ms var(--kl-e) var(--d, 600ms) both; }
.kl-hero__sub { margin-top: clamp(12px, 1.4vw, 20px); min-height: 3em; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--kl-soft); max-width: 32ch; text-wrap: pretty; transition: color 800ms; animation: kl-rise 400ms var(--kl-e) 1200ms both; }

/* La pastilla de busqueda: un formulario de verdad hacia /find. */
.kl-hero-pill { margin-top: clamp(16px, 2.2vw, 32px); display: flex; align-items: center; gap: 4px; height: 64px; max-width: 540px; padding: 0 8px 0 clamp(16px, 1.7vw, 24px); border-radius: 999px; background: var(--kl-surface); border: 1px solid var(--kl-line); box-shadow: 0 10px 30px rgba(16, 41, 43, 0.08); transition: background-color 800ms, border-color 800ms; animation: kl-rise 400ms var(--kl-e) 1260ms both; }
.kl-hero-pill__q { flex: 1; min-width: 0; height: 48px; border: 0; outline: none; background: transparent; font: 400 clamp(16px, 1.25vw, 18px) var(--kl-body); color: inherit; text-overflow: ellipsis; }
.kl-hero-pill__q::placeholder { color: currentColor; opacity: .7; }
/* El diseno quita el contorno de la caja de texto; el foco se dibuja en la pastilla (DESIGN.md: anillo de 2 px). */
.kl-hero-pill:has(.kl-hero-pill__q:focus-visible) { outline: 2px solid var(--kl-lagoon); outline-offset: 2px; }
.kl-hero-pill__ir { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: #0F766E; color: #FFFFFF; cursor: pointer; transition: background-color 200ms; }
.kl-hero-pill__ir:hover { background: #0B5D57; }
.kl-hero-pill__ir:focus-visible { outline: 2px solid var(--kl-lagoon); outline-offset: 3px; }

.kl-hero-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 540px; }
.kl-hero-chip { min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; border: 1.5px solid var(--klh-chip-bd); background: var(--klh-chip-bg); color: var(--klh-chip-fg); font: 500 16px var(--kl-body); white-space: nowrap; cursor: pointer; transition: background-color 400ms, border-color 400ms, color 400ms; animation: kl-rise 400ms var(--kl-e) var(--d, 1800ms) both; }
.kl-hero-chip svg { flex: none; }
.kl-hero-chip[aria-pressed="true"] { border-color: var(--klh-chip-on-bd); background: var(--klh-chip-on-bg); color: var(--klh-chip-on-fg); }
.kl-hero-chip:focus-visible { outline: 2px solid var(--kl-lagoon); outline-offset: 2px; }

/* LampSwitch: placa de pared de 60 x 92 con su perilla. Empuja 4° una vez, a los 2.5 s. */
.kl-hero__int { margin-top: clamp(20px, 2.8vw, 40px); display: flex; align-items: center; gap: 16px; animation: kl-fade 400ms var(--kl-e) 1800ms both; }
/* Sin JavaScript el interruptor no puede hacer nada: no se enseña. */
html:not(.kl-js) .kl-hero__int { display: none; }
.kl-hero-sw { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 18px; transform-origin: 50% 100%; animation: kl-home-nudge 400ms var(--kl-e) 2500ms both; }
.kl-hero-sw:focus-visible { outline: 2px solid var(--kl-lagoon); outline-offset: 4px; }
.kl-hero-sw__placa { display: grid; place-items: center; width: 60px; height: 92px; border-radius: 18px; background: var(--kl-surface); border: 1px solid var(--kl-line); box-shadow: 0 10px 30px rgba(16, 41, 43, 0.08); transition: background-color 800ms, border-color 800ms; }
.kl-hero-sw__riel { position: relative; display: block; width: 30px; height: 60px; border-radius: 999px; background: var(--klh-track); transition: background-color 200ms; }
.kl-hero-sw__perilla { position: absolute; left: 4px; top: var(--klh-knob-top); width: 22px; height: 22px; border-radius: 999px; background: var(--klh-knob); box-shadow: 0 2px 6px rgba(16, 41, 43, 0.25); transition: top 200ms var(--kl-e), background-color 200ms; }
.kl-hero__int-t { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 17px; line-height: 1.4; }
.kl-hero__int-a { font-weight: 500; }
.kl-hero__pista { color: var(--kl-soft); }

/* ---------------------------------------------------------------- SkyScene */
.kl-hero__escena { flex: 1 1 500px; min-width: 0; position: relative; height: clamp(260px, 40vw, 600px); }
.kl-hero-esc__estrellas { position: absolute; inset: 0; opacity: var(--klh-stars-on); transition: opacity 800ms; transform: translateY(calc(var(--p, 0) * -24px)); }
.kl-hero-esc__estrellas span { position: absolute; border-radius: 9px; background: #A9C7C4; }
.kl-hero-esc__estrellas span:nth-child(1) { left: 12%; top: 30%; width: 3px; height: 3px; }
.kl-hero-esc__estrellas span:nth-child(2) { left: 34%; top: 12%; width: 2px; height: 2px; }
.kl-hero-esc__estrellas span:nth-child(3) { left: 58%; top: 24%; width: 3px; height: 3px; }
.kl-hero-esc__estrellas span:nth-child(4) { left: 72%; top: 8%; width: 2px; height: 2px; }
.kl-hero-esc__estrellas span:nth-child(5) { left: 90%; top: 28%; width: 3px; height: 3px; }
.kl-hero-esc__estrellas span:nth-child(6) { left: 22%; top: 4%; width: 2px; height: 2px; }

/* La escena es 4:3, pegada abajo y centrada. Sus piezas van en % de esa caja. */
.kl-hero-esc { position: absolute; left: 50%; bottom: 0; width: min(100%, calc((clamp(260px, 40vw, 600px) - clamp(40px, 6vw, 110px)) * 4 / 3)); transform: translateX(-50%) translateY(calc(var(--p, 0) * 16px)); }
.kl-hero-esc::before { content: ""; display: block; padding-top: 75%; }
.kl-hero-esc__in { position: absolute; inset: 0; animation: kl-fade 800ms var(--kl-e) 0ms both; }
.kl-hero-esc__in > div { position: absolute; }

.kl-hero-esc__cesped { left: -5%; right: -5%; top: 92%; bottom: -2%; border-radius: 14px; background: var(--klh-lawn); border-top: 2px solid var(--klh-ground); transition: background-color 800ms, border-color 800ms; }

.kl-hero-esc__tronco { width: 0.9%; background: var(--klh-trunk); transition: background-color 800ms; }
.kl-hero-esc__tronco--a { left: 1.6%; top: 68%; height: 24%; }
.kl-hero-esc__tronco--b { left: 97%; top: 72%; height: 20%; }
/* Copas: ancho / 0.82 de alto. En una caja 4:3, alto % = ancho % / 0.82 × 4/3. */
.kl-hero-esc__arbol { border-radius: 999px; background: var(--klh-tree); transition: background-color 800ms; }
.kl-hero-esc__arbol--a { left: -1%; width: 7%; top: 56%; height: 11.382%; }
.kl-hero-esc__arbol--b { left: 94.6%; width: 5.6%; top: 62%; height: 9.106%; }

.kl-hero-esc__losa { border-radius: 2px; background: var(--klh-slab); box-shadow: 0 6px 10px rgba(16, 41, 43, 0.08); transition: background-color 800ms; }
.kl-hero-esc__losa--izq { left: 3%; width: 26%; top: 68%; height: 2.2%; }
.kl-hero-esc__losa--der { left: 73%; width: 22%; top: 46%; height: 2.2%; }
.kl-hero-esc__losa--baja { left: 29.5%; width: 39%; top: 64%; height: 2.2%; }
.kl-hero-esc__losa--alta { left: 34%; width: 38%; top: 37.6%; height: 2.4%; }

.kl-hero-esc__casa { background: var(--klh-wall); border: 1.5px solid var(--klh-house-bd); border-top: 0; border-bottom: 0; transition: background-color 800ms, border-color 800ms; }
.kl-hero-esc__casa > * { position: absolute; }
.kl-hero-esc__casa--izq { left: 4%; width: 24%; top: 70.2%; height: 21.8%; background: var(--klh-wall2); }
.kl-hero-esc__casa--der { left: 74%; width: 20%; top: 48.2%; height: 43.8%; }
.kl-hero-esc__casa--baja { left: 31%; width: 36%; top: 66.2%; height: 25.8%; }
.kl-hero-esc__casa--alta { left: 35%; width: 36%; top: 40%; height: 24%; }

/* Ventanas de los vecinos: se apagan una por una (--off, pasos de 80 ms) y vuelven a 60 ms (--on). */
.kl-hero-esc__ven { border-radius: 3px; background: var(--klh-win); border: 1.5px solid var(--klh-win-bd); transition: background-color 200ms var(--kl-e), border-color 200ms var(--kl-e); transition-delay: calc(var(--on, 0ms) * (1 - var(--klh-out)) + var(--off, 0ms) * var(--klh-out)); }
.kl-hero-esc__puerta-v { border-radius: 3px 3px 0 0; background: var(--klh-door-n); transition: background-color 800ms; }
.kl-hero-esc__puerta-v--izq { left: 74%; top: 26%; width: 16%; height: 74%; }
.kl-hero-esc__puerta-v--der { left: 62%; top: 62%; width: 26%; height: 38%; }
.kl-hero-esc__lado { left: 0; top: 0; width: 18%; height: 100%; background: var(--klh-clad-n); transition: background-color 800ms; }
.kl-hero-esc__lado--nuestra { left: 70%; width: 30%; background: var(--klh-clad); }
.kl-hero-esc__franja { left: 18%; right: 0; top: 49%; height: 2.5%; background: var(--klh-house-bd); transition: background-color 800ms; }

.kl-hero-esc__lamas { left: 8%; top: 22%; width: 40%; height: 62%; display: flex; justify-content: space-between; }
.kl-hero-esc__lamas span { width: 9%; height: 100%; border-radius: 2px; background: var(--klh-slat); transition: background-color 800ms; }
.kl-hero-esc__puerta { left: 64%; top: 24%; width: 17%; height: 76%; border-radius: 3px 3px 0 0; background: var(--klh-door); transition: background-color 800ms; }
/* Pomo cuadrado de lado = 10 % del ancho de la puerta: en alto son 4.162 % de la puerta. */
.kl-hero-esc__puerta span { position: absolute; right: 16%; top: 50%; width: 10%; height: 4.162%; border-radius: 9px; background: var(--klh-wall); transition: background-color 800ms; }

.kl-hero-esc__grada { background: var(--klh-step); transition: background-color 800ms; }
.kl-hero-esc__grada--1 { left: 53.6%; width: 7.6%; top: 92%; height: 2.7%; }
.kl-hero-esc__grada--2 { left: 52.8%; width: 9.2%; top: 94.7%; height: 2.7%; }
.kl-hero-esc__grada--3 { left: 52%; width: 10.8%; top: 97.4%; height: 2.6%; }
/* Arbustos: ancho / 1.5 y ancho / 1.4 de alto (× 4/3 para pasarlo a % del alto). */
.kl-hero-esc__arbusto { bottom: 8%; border-radius: 999px 999px 3px 3px; background: var(--klh-bush); transition: background-color 800ms; }
.kl-hero-esc__arbusto--a { left: 27.5%; width: 5.5%; height: 4.889%; }
.kl-hero-esc__arbusto--b { left: 64%; width: 4.5%; height: 4.286%; }

/* Nuestra ventana: el UNICO ambar de esta pantalla. Nunca cambia; su halo respira cada 4 s. */
/* Halo cuadrado de lado = 170 % del ancho de la casa (36 % de la escena): 340 % de su alto (24 %). */
.kl-hero-esc__halo { left: 36%; top: 50%; width: 170%; height: 340%; transform: translate(-50%, -50%); pointer-events: none; animation: kl-fade 800ms var(--kl-e) 0ms both; }
.kl-hero-esc__halo > div { width: 100%; height: 100%; opacity: var(--klh-halo-op); transition: opacity 800ms; }
.kl-hero-esc__halo > div > div { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 32, 0.45) 0%, rgba(255, 176, 32, 0) 70%); animation: kl-home-breathe 4000ms ease-in-out 3000ms infinite; }
.kl-hero-esc__luz { left: 8%; top: 12%; width: 56%; height: 76%; border-radius: 4px; background: #FFB020; box-shadow: 0 0 28px rgba(255, 176, 32, 0.55); animation: kl-fade 400ms var(--kl-e) 200ms both; }
.kl-hero-esc__luz span { position: absolute; }
.kl-hero-esc__luz span:nth-child(1) { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(16, 41, 43, 0.16); }
.kl-hero-esc__luz span:nth-child(2) { left: -4%; right: -4%; top: 62%; height: 2px; background: rgba(16, 41, 43, 0.32); }
.kl-hero-esc__luz span:nth-child(3) { left: -4%; right: -4%; top: 62%; bottom: 0; background: rgba(234, 244, 242, 0.18); border-left: 2px solid rgba(16, 41, 43, 0.32); border-right: 2px solid rgba(16, 41, 43, 0.32); }

/* -------------------------------------------------------- CursorFlashlight */
/* Abajo, los tres enlaces de verdad (tenues, al 45 %); arriba, su copia brillante, que solo se
   ve dentro de un circulo de 120 px alrededor del cursor. */
.kl-hero-objs { position: absolute; inset: 0; }
.kl-hero-objs--tenue { z-index: 3; opacity: var(--klh-dim-on); pointer-events: var(--klh-obj-pe); visibility: var(--klh-obj-vis); transition: opacity 400ms var(--kl-e) var(--klh-obj-d), visibility 0s linear var(--klh-obj-vd); }
/* La capa brillante sale 24 px por arriba y por los lados: la mascara recorta en el borde de la capa
   y, sin ese margen, el resplandor del circulo quedaba cortado en linea recta. */
.kl-hero-objs--brillo { inset: -24px -24px 0 -24px; z-index: 4; pointer-events: none; opacity: var(--klh-obj-on); transition: opacity 400ms var(--kl-e) var(--klh-obj-d); -webkit-mask-image: radial-gradient(circle 120px at var(--fx, -300px) var(--fy, -300px), #000 45%, transparent 100%); mask-image: radial-gradient(circle 120px at var(--fx, -300px) var(--fy, -300px), #000 45%, transparent 100%); }
.kl-hero-objs__in { position: absolute; inset: 24px 24px 0 24px; }
.kl-hero-obj { position: absolute; top: 0; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; text-decoration: none; font: 600 15px var(--kl-body); }
.kl-hero-obj--wifi { left: 2%; }
.kl-hero-obj--cpap { left: calc(50% - 42px); }
.kl-hero-obj--fridge { left: calc(98% - 84px); }
.kl-hero-obj__c { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 999px; border: 1.5px dashed #A9C7C4; }
.kl-hero-objs--tenue .kl-hero-obj, .kl-hero-objs--tenue .kl-hero-obj:hover { color: #A9C7C4; }
.kl-hero-objs--tenue .kl-hero-obj:focus-visible { outline: 2px solid #A9C7C4; outline-offset: 2px; border-radius: 12px; }
.kl-hero-objs--brillo .kl-hero-obj { color: #EAF4F2; }
.kl-hero-objs--brillo .kl-hero-obj__c { border: 1.5px solid #EAF4F2; background: #1F4552; box-shadow: 0 0 24px rgba(234, 244, 242, 0.28); }
/* Pantalla tactil: sin linterna. Los tres objetos brillan enteros y se tocan. */
@media (hover: none) {
  .kl-hero__linterna { opacity: 0; }
  .kl-hero-objs--tenue { opacity: 0; }
  .kl-hero-objs--brillo { -webkit-mask-image: none; mask-image: none; }
}

/* ------------------------------------------------- titulos de las secciones */
.kl-home-cab { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.kl-home-h2 { font-family: var(--kl-display); font-weight: 800; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; }
.kl-home-cab p { font-size: 18px; line-height: 1.6; color: var(--kl-soft); }
.kl-home-link { display: flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; font-size: 18px; text-decoration: none; color: var(--kl-lagoon); }
.kl-home-link:hover { color: var(--kl-lagoon); text-decoration: underline; text-underline-offset: 5px; }
.kl-home-link--fila { white-space: nowrap; }

/* ------------------------------------------------------ How it works: Steps */
.kl-home-how { padding: clamp(72px, 8.9vw, 128px) var(--kl-gutter) 0; }
.kl-home-pasos { list-style: none; margin: clamp(32px, 3.9vw, 56px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 32px; }
.kl-home-paso { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px; margin: -18px; border-radius: 24px; transition: background-color 400ms var(--kl-e), transform 400ms var(--kl-e), box-shadow 400ms var(--kl-e); }
/* Al pasar el cursor el paso se levanta, su circulo crece con un halo que late y su titulo se subraya. Sin ambar:
   el ambar es solo para lo que lleva a Amazon. (Pedido de Samuel, 5 oct 2026: «algo llamativo».) */
@keyframes kl-home-paso-halo { 0%, 100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); } 50% { box-shadow: 0 0 0 12px rgba(169, 199, 196, 0.28); } }
.kl-home-paso:hover, .kl-home-paso:focus-within { background: var(--kl-surface); transform: translateY(-6px); box-shadow: 0 18px 40px rgba(16, 41, 43, 0.16); }
.kl-home-paso:hover .kl-home-paso__c, .kl-home-paso:focus-within .kl-home-paso__c { transform: scale(1.12) rotate(-6deg); animation: kl-home-paso-halo 1600ms ease-in-out infinite; }
.kl-home-paso:hover .kl-home-paso__t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.kl-home-paso:hover .kl-home-paso__n { color: var(--kl-ink); }
.kl-home-how.kl-visto .kl-home-paso__c, html:not(.kl-js) .kl-home-paso__c { transition: background-color 400ms var(--kl-e), color 400ms var(--kl-e), border-color 400ms var(--kl-e), transform 300ms var(--kl-e); }
.kl-home-how__btn { margin-top: clamp(28px, 3vw, 44px); align-self: center; }
.kl-home-how { display: flex; flex-direction: column; }
.kl-home-how .kl-home-cab { align-self: center; align-items: center; text-align: center; }
.kl-home-paso__fila { display: flex; align-items: center; gap: 16px; }
.kl-home-paso__c { width: 67px; height: 67px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--kl-lagoon); border: 1.5px solid var(--kl-lagoon); color: var(--klh-step-fg); transition: background-color 400ms var(--kl-e) var(--d, 0ms), color 400ms var(--kl-e) var(--d, 0ms), border-color 400ms var(--kl-e) var(--d, 0ms); }
.kl-home-paso__linea { flex: 1; min-width: 0; height: 2px; border-radius: 2px; background: var(--kl-line); position: relative; overflow: hidden; }
.kl-home-paso__linea span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--kl-lagoon); transition: width 400ms var(--kl-e) var(--dl, 0ms); }
.kl-home-paso__linea--no { background: transparent; }
.kl-home-paso__linea--no span { width: 0; }
.kl-home-paso__n { font: 500 13px var(--kl-mono); letter-spacing: 0.06em; color: var(--kl-soft); }
.kl-home-paso__t { font-family: var(--kl-display); font-weight: 700; font-size: 24px; line-height: 1.2; }
.kl-home-paso__s { font-size: 17px; line-height: 1.5; color: var(--kl-soft); }
/* Antes de verse (solo con JavaScript): circulos y conectores apagados. Sin JavaScript, encendidos. */
.kl-js .kl-home-how:not(.kl-visto) .kl-home-paso__c { background: transparent; border-color: var(--kl-line); color: var(--kl-soft); }
.kl-js .kl-home-how:not(.kl-visto) .kl-home-paso__linea span { width: 0; }

/* ------------------------------------------------------------------- Doors */
.kl-home-doors { margin-top: clamp(72px, 8.9vw, 128px); padding: clamp(72px, 8.9vw, 128px) var(--kl-gutter); background: var(--klh-doors-bg); transition: background-color 800ms; }
.kl-home-doors .kl-home-cab { margin-bottom: clamp(32px, 3.9vw, 56px); }
.kl-home-puertas { display: flex; flex-wrap: wrap; gap: 20px; }
/* DoorCard: 300 px de base + 14 + 14 de relleno + 1 + 1 de borde. Sube 4 px al pasar el cursor. */
.kl-home-door { flex: 1 1 330px; min-width: 0; padding: 14px; display: flex; flex-direction: column; border-radius: 24px; background: var(--klh-door-card); border: 1px solid var(--kl-line); box-shadow: 0 10px 30px rgba(16, 41, 43, 0.08); transition: transform 400ms var(--kl-e), box-shadow 400ms var(--kl-e), background-color 800ms, border-color 800ms; }
.kl-home-door:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 41, 43, 0.12); }
.kl-home-door__panel { height: 180px; border-radius: 16px; background: var(--klh-ph); transition: background-color 800ms; }
.kl-home-door__panel--find { display: flex; align-items: center; justify-content: center; gap: 12px; }
.kl-home-door__panel--best { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.kl-home-door__panel--solar { display: grid; place-items: center; }
.kl-home-door__c { width: 67px; height: 67px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--klh-door-card); border: 1.5px solid var(--kl-line); color: var(--kl-lagoon); }
/* La caja dibujada: 96 x 72 por dentro + 2 px de borde. */
.kl-home-door__caja { position: relative; width: 100px; height: 76px; flex: none; border-radius: 12px; border: 2px solid var(--klh-ph-line); }
.kl-home-door__caja span { position: absolute; }
.kl-home-door__caja span:first-child { left: 22%; right: 22%; top: -12px; height: 8px; border-radius: 4px 4px 0 0; background: var(--klh-ph-line); }
.kl-home-door__caja span:last-child { left: 14px; bottom: 14px; width: 14px; height: 14px; border-radius: 9px; border: 2px solid var(--klh-ph-line); }
.kl-home-door__sello { display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--kl-lagoon); color: var(--kl-lagoon); font: 500 11px var(--kl-mono); letter-spacing: 0.06em; text-transform: uppercase; }
/* Mini mapa: 11 x 8 fichas de 14 px. Se enciende en ola (60 ms por diagonal) al verse. */
.kl-home-door__mapa { display: grid; grid-template-columns: repeat(11, 14px); grid-auto-rows: 14px; gap: 3px; }
.kl-home-door__e { min-width: 0; border-radius: 3px; background: var(--klh-map-no); transition: background-color 400ms var(--kl-e) var(--d, 0ms); }
.kl-home-door__e--si { background: var(--klh-map-yes); }
.kl-js .kl-home-doors:not(.kl-visto) .kl-home-door__e { background: var(--klh-map-idle); }
.kl-home-door__t { padding: 18px 10px 4px; display: flex; flex-direction: column; gap: 4px; }
.kl-home-door__t h3 { font-family: var(--kl-display); font-weight: 700; font-size: 22px; }
.kl-home-door__t p { font-size: 18px; color: var(--kl-soft); }

/* ------------------------------------------------------------------- Trust */
/* El riel de cajas: una fila que se desliza con el dedo o con la barra; cada tarjeta se detiene en su sitio. */
.kl-home-rail { padding: clamp(72px, 8.9vw, 128px) 0 clamp(56px, 6vw, 96px); }
.kl-home-rail .kl-home-cab { padding: 0 var(--kl-gutter); margin: 0 auto clamp(24px, 3vw, 40px); max-width: calc(640px + 2 * var(--kl-gutter)); align-items: center; text-align: center; }
/* El riel va dentro de los margenes de la pagina, con una flecha a cada lado; la barra de desplazamiento no se
   enseña (se sigue pudiendo deslizar con el dedo, con la rueda o con el teclado). Pedido de Samuel, 5 oct 2026. */
.kl-riel-caja { position: relative; margin: 0 var(--kl-gutter); }
.kl-riel { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.kl-riel::-webkit-scrollbar { display: none; }
.kl-riel__flecha { position: absolute; z-index: 2; top: 50%; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center; border-radius: 999px; border: 1.5px solid var(--kl-line); background: var(--kl-surface); color: var(--kl-ink); box-shadow: 0 8px 22px rgba(16, 41, 43, 0.18); transition: opacity 200ms, transform 200ms var(--kl-e), border-color 200ms, background-color 800ms; }
.kl-riel__flecha--izq { left: -24px; }
.kl-riel__flecha--izq svg { transform: rotate(180deg); }
.kl-riel__flecha--der { right: -24px; }
.kl-riel__flecha:hover:not(:disabled) { border-color: var(--kl-lagoon); transform: scale(1.06); }
.kl-riel__flecha:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 699px) { .kl-riel__flecha { width: 44px; height: 44px; margin-top: -22px; } .kl-riel__flecha--izq { left: -14px; } .kl-riel__flecha--der { right: -14px; } }
.kl-riel:focus-visible { outline: 2px solid var(--kl-lagoon); outline-offset: -2px; }
.kl-riel__c { flex: 0 0 min(76vw, 264px); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 24px; background: var(--kl-surface); border: 1px solid var(--kl-line); color: var(--kl-ink); transition: background-color 800ms, border-color 800ms, color 800ms; }
.kl-riel__foto { display: block; align-self: stretch; border-radius: 16px; }
.kl-riel__foto .kl-foto { border-radius: 16px; --r: 82%; }
.kl-riel__n { font-family: var(--kl-display); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--kl-ink); text-decoration: none; }
.kl-riel__n span { font-weight: 500; color: var(--kl-soft); }
.kl-riel__n:hover { text-decoration: underline; }
.kl-riel__c .kl-mono { color: var(--kl-soft); }
.kl-riel__c .kl-amz-g { margin-top: auto; padding-top: 8px; }
.kl-riel__c--mas { justify-content: center; align-items: center; gap: 10px; text-align: center; text-decoration: none; font: 700 19px var(--kl-display); border-style: dashed; }
.kl-riel__c--mas:hover { border-color: var(--kl-lagoon); }

.kl-home-trust { padding: clamp(40px, 4.4vw, 64px) var(--kl-gutter); background: var(--kl-sun); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; transition: background-color 800ms; }
.kl-home-trust__t { flex: 1 1 420px; min-width: 0; font-family: var(--kl-display); font-weight: 700; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; text-wrap: pretty; }
.kl-home-trust__sellos { min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* Los tres sellos del sitio (contorno lagoon / solido ink / punteado ink), a 36 px + borde. */
.kl-home-trust .kl-sello { align-self: auto; height: 39px; }

/* ------------------------------------------------------------------- Close */
.kl-home-close { position: relative; overflow: hidden; padding: clamp(72px, 8.9vw, 128px) var(--kl-gutter); background: var(--klh-close-bg); color: #EAF4F2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; transition: background-color 800ms; }
.kl-home-close__t { min-width: 0; display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); }
.kl-home-close .kl-home-h2 { min-width: 0; text-wrap: balance; }
/* El punto del final (28 px) con su halo de 140 px, que respira cada 4 s. Era ambar; desde el 5 oct 2026 el ambar
   es solo para lo que lleva a Amazon (y la luz de la escena), y este punto va junto a un boton hacia /find. */
.kl-home-close__punto { position: relative; width: 28px; height: 28px; flex: none; }
.kl-home-close__punto span { position: absolute; }
.kl-home-close__punto span:first-child { left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; background: radial-gradient(circle, rgba(234, 244, 242, 0.35) 0%, rgba(234, 244, 242, 0) 70%); animation: kl-home-breathe 4000ms ease-in-out 0ms infinite; }
.kl-home-close__punto span:last-child { inset: 0; border-radius: 999px; background: #EAF4F2; }
.kl-home-close__btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: 999px; background: #EAF4F2; color: #0B2530; font-family: var(--kl-display); font-weight: 700; font-size: 18px; text-decoration: none; white-space: nowrap; transition: background-color 200ms; }
.kl-home-close__btn:hover { background: #E3F3F0; color: #0B2530; }
.kl-home-close__btn:focus-visible { outline: 2px solid #EAF4F2; outline-offset: 3px; }

/* ------------------------------------------------------- menos movimiento */
/* kl.css ya quita animaciones y transiciones; aqui se quita ademas el paralaje. */
@media (prefers-reduced-motion: reduce) {
  .kl-hero-esc__estrellas { transform: none; }
  .kl-hero-esc { transform: translateX(-50%); }
}