/* ==========================================================================
   Kiloverde · «Red viva»: esquema general (dibujo en tools/sitio/gen_red_viva.py) y recorrido de la portada.
   Presupuesto de movimiento (KV Labs H5): solo transform y opacity, como máximo unos 20 nodos animados a la vez y solo los
   del subsistema del paso actual (.rv-anima + data-actual). La cámara mueve .rv-camara (capa compuesta) y fija el viewBox
   al llegar. Sin JS, con movimiento reducido o con la pausa del sitio (html.kv-sin-movimiento) nada se mueve.
   ========================================================================== */

/* ---------- Escena (portada y cabeceras internas) ---------- */
.rv-escena { display: block; width: 100%; height: 100%; }
.rv-escena text { font-family: var(--kv-fuente-texto, Inter, system-ui, sans-serif); }
.rv-rot { font-size: var(--rv-fs, 14px); font-weight: 500; letter-spacing: .18em; font-variant-numeric: tabular-nums; fill: #CFE3C6;
  paint-order: stroke; stroke: #0F2A18; stroke-width: .34em; stroke-linejoin: round; opacity: 0; }
.rv-rotulo-t { font-weight: 500; letter-spacing: .18em; fill: #CFE3C6; fill-opacity: .85; font-variant-numeric: tabular-nums; }
.rv-hito-t { font-size: 12px; font-weight: 500; letter-spacing: .18em; fill: #CFE3C6; fill-opacity: .8; }
.rv-medidor-t { font-variant-numeric: tabular-nums; }
/* Capa viva (portada): HTML en coordenadas del plano dentro de la cámara; el JS le pone el transform del encuadre.
   Lo que se mueve sin parar vive aquí para animarse en el compositor (dentro del SVG obligaría a repintar en cada cuadro). */
.rv-vivo { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; pointer-events: none; }
.rv-vivo > *, .rv-flujos > * { position: absolute; display: block; }
.rv-flujos { position: absolute; inset: 0; transition: opacity .6s ease; }
/* pulsos: la red fluye al llegar a cada paso y cada pocos segundos; entre pulsos se funde y no corre nada (presupuesto de reposo) */
.rv-reposo .rv-flujos { opacity: 0; }
.rv-pq { left: 0; top: 0; width: calc(var(--t) * 2); height: calc(var(--t) * 2); margin: calc(var(--t) * -1) 0 0 calc(var(--t) * -1); border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 calc(var(--t) * 1.2) var(--g); opacity: 0; }
.rv-brillo { width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(242, 183, 5, .42), rgba(242, 183, 5, .12) 60%, rgba(242, 183, 5, 0)); }
.rv-anillo { width: calc(var(--a) * 2); height: calc(var(--a) * 2); margin: calc(var(--a) * -1) 0 0 calc(var(--a) * -1); border: 1.4px solid #F2B705; border-radius: 50%; opacity: 0; }
.rv-pin { margin: -1px 0 0 -23px; opacity: 0; transition: opacity .5s ease; }
.rv-pin svg { display: block; }
/* Ventanas: tres grupos que cambian de estado cada pocos segundos desde el JS (sin animación por cuadro) */
.rv-escena[data-v="0"] .rv-v2, .rv-escena[data-v="1"] .rv-v3, .rv-escena[data-v="2"] .rv-v1 { opacity: .6; }
.rv-escena[data-v="0"] .rv-v3, .rv-escena[data-v="1"] .rv-v1, .rv-escena[data-v="2"] .rv-v2 { opacity: .28; }

/* ---------- Recorrido: capas de la historia y rótulos por paso ----------
   Dentro del SVG todo cambia de golpe al cambiar de paso: una transición de un elemento SVG repinta (y a veces
   recalcula el layout) en cada cuadro; lo que se funde suave son las capas HTML (tarjetas, capas, guía, capa viva). */
.rv-pin-g, .rv-analisis, .rv-plano-hogar, .rv-excedentes, .k-viva .rv-rot { opacity: 0; }
.k-viva[data-actual="1"] :is(.rv-pin-g, .rv-pin), .k-viva[data-actual="2"] :is(.rv-pin-g, .rv-pin), .k-viva[data-actual="2"] .rv-analisis,
.k-viva[data-actual="4"] .rv-plano-hogar, .k-viva[data-actual="6"] .rv-excedentes { opacity: 1; }
/* el hogar todavía no tiene planta en los pasos 1 a 4: ni módulos ni bajante de corriente continua (Ingeniería 9) */
.k-viva:is([data-actual="1"], [data-actual="2"], [data-actual="3"], [data-actual="4"]) :is(.rv-modulo-h, .rv-bajante-hogar) { opacity: 0; }
/* rótulos: como máximo cuatro por encuadre (KV Studio H20) */
.k-viva[data-actual="1"] .r-bt, .k-viva[data-actual="2"] .r-bt, .k-viva[data-actual="3"] :is(.r-bt, .r-mt-c, .r-fv18),
.k-viva[data-actual="4"] :is(.r-kwp, .r-incl, .r-bt), .k-viva[data-actual="5"] .r-bt, .k-viva[data-actual="6"] :is(.r-exc, .r-bt),
.k-viva[data-actual="7"] :is(.r-mon, .r-fv18, .r-fv120), .k-viva[data-actual="8"] :is(.r-mt, .r-se, .r-sep, .r-ap),
.k-viva .rv-escena:not(.rv-historia) :is(.r-mt, .r-se, .r-str, .r-ap) { opacity: 1; }

/* el rótulo del esquema solo acompaña los planos generales (portada y cierre) */
.k-viva[data-actual]:not([data-actual="0"]):not([data-actual="8"]) .rv-rotulo { opacity: 0; }

/* Línea de proceso: la controla el JS (--avance); sin JS queda en reposo */
.rv-proceso-avance { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(var(--avance, 0)); }
.rv-hito-luz { opacity: .2; }
.rv-hito.activo .rv-hito-luz { opacity: 1; }
.rv-hito.actual circle:first-child { stroke: #F2B705; stroke-opacity: 1; }
.rv-escena:not(.rv-historia) .rv-hito-luz { opacity: .6; }

/* ---------- Movimiento por subsistema: solo el del paso actual (.rv-anima la pone el JS si se puede mover) ---------- */
@keyframes rvBrillo { 50% { transform: scale(1.12); opacity: .85; } }
@keyframes rvOnda { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes rvRebote { 50% { transform: translateY(-9px); } }
.rv-anima[data-actual="0"] :is(.rv-f-115, .rv-f-mt, .rv-f-der, .rv-f-emp),
.rv-anima[data-actual="1"] .rv-f-bt, .rv-anima[data-actual="2"] .rv-f-bt, .rv-anima[data-actual="3"] :is(.rv-f-bt, .rv-f-mt, .rv-f-der),
.rv-anima[data-actual="4"] .rv-f-bt, .rv-anima[data-actual="5"] :is(.rv-f-cc-h, .rv-f-fot, .rv-f-bt),
.rv-anima[data-actual="6"] :is(.rv-f-exc, .rv-f-cc-h, .rv-f-fot), .rv-anima[data-actual="7"] .rv-f-dat,
.rv-anima[data-actual="8"] :is(.rv-f-115, .rv-f-mt, .rv-f-der, .rv-f-bt, .rv-f-emp, .rv-f-910) { animation: var(--pq) var(--d) linear var(--r) infinite; }
.rv-anima:is([data-actual="0"], [data-actual="5"], [data-actual="8"]) .rv-brillo { animation: rvBrillo 7s ease-in-out infinite; }
.rv-anima[data-actual="8"] .rv-pulso { animation: rvOnda 2.4s ease-out infinite; }
.rv-anima[data-actual="1"] .rv-pin { animation: rvRebote 2.6s ease-in-out infinite; }
.rv-anima[data-actual="2"] .rv-analisis-onda { animation: rvOnda 2s ease-out infinite; }

/* Pausa del sitio (botón; WCAG 2.2.2) y movimiento reducido */
.kv-sin-movimiento .k-viva *, .kv-sin-movimiento .k-viva *::before, .kv-sin-movimiento .k-viva *::after { animation-play-state: paused !important; transition: none !important; }
.kv-sin-movimiento .k-recibo::after { display: none; }
/* la pausa es de todo el sitio: tampoco crecen las barras de la escalera de EnergyPass (animación de entrada de sitio.css) */
.kv-sin-movimiento .k-regla-anim :is(.k-paso, .k-paso-final) { animation: none !important; }
.k-flujo.rv-fuera .k-flujo-linea { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .k-viva *, .k-viva *::before, .k-viva *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Portada: escenario fijo (sticky) con la escena; los pasos se desplazan encima.
   Escritorio, tres zonas (KV Studio H4): tarjeta 0-38 %, sujeto 38-70 % (fx 0,54), guía 70-100 %.
   ========================================================================== */
.k-viva { position: relative; background: #0F2A18; color: #fff; --k-cab-alto: 69px; }
.k-viva-escenario { position: sticky; top: var(--k-cab-alto); height: calc(100vh - var(--k-cab-alto)); height: calc(100svh - var(--k-cab-alto)); overflow: hidden; }
.rv-camara { position: absolute; inset: 0; transform-origin: 0 0; }
.rv-camara .rv-escena { position: absolute; inset: 0; }
.k-viva-velo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 42, 24, .92) 0%, rgba(15, 42, 24, .7) 30%, rgba(15, 42, 24, .08) 58%, rgba(15, 42, 24, 0) 75%),
              linear-gradient(0deg, rgba(15, 42, 24, .55) 0%, rgba(15, 42, 24, 0) 22%); }
.k-viva-pasos { position: relative; margin-top: calc(-100vh + var(--k-cab-alto)); margin-top: calc(-100svh + var(--k-cab-alto)); z-index: 2; }
.k-viva-paso { min-height: calc(100vh - var(--k-cab-alto)); min-height: calc(100svh - var(--k-cab-alto)); display: flex; align-items: flex-start; }
.k-viva-paso > .k-env { width: 100%; margin-block: auto; } /* centrado «seguro»: si no cabe, empieza arriba y no se corta */
/* Tarjetas: legibles sin JS; el JS atenúa las que no son el paso actual sin bajar de 4,5:1 (KV Labs H12, Studio H6) */
.k-viva-tarjeta { max-width: min(470px, max(36vw, 360px)); padding: 1.75rem 1.75rem 1.5rem; border-radius: 20px;
  background: rgba(15, 42, 24, .93); border: 1px solid rgba(143, 209, 111, .22); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.rv-js .k-viva-tarjeta { transition: transform .6s ease; }
.rv-js .k-viva-paso:not(.es-actual) .k-viva-tarjeta { transform: translateY(18px) scale(.985); } /* sin opacidad: el texto nunca baja de 4,5:1 */
.k-viva-num { display: inline-flex; align-items: center; gap: .5rem; font: 500 .8125rem/1 var(--kv-fuente-texto); font-variant-numeric: tabular-nums;
  letter-spacing: .18em; text-transform: uppercase; color: var(--k-sol, #F2B705); margin: 0 0 .9rem; }
.k-viva-num::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.k-viva-tarjeta .k-viva-h, .k-viva-tarjeta h3 { font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.08 var(--kv-fuente-titulos); letter-spacing: -.025em; color: #fff; margin: 0 0 .75rem; text-wrap: balance; }
.k-viva-tarjeta p { color: #CFE3C6; font-size: 1.0625rem; line-height: 1.55; margin: 0 0 1rem; }
.k-viva-tarjeta p:last-child { margin-bottom: 0; }
.k-viva-tarjeta .k-btn { margin-top: .25rem; }
.k-viva-tarjeta p.k-viva-plazos { color: #A9C3A0; font-size: .8125rem; line-height: 1.5; margin: 1.1rem 0 0; }
/* «Mensaje del guía» dentro de la tarjeta: celular (Studio H10), cierre y sin guía flotante */
.k-viva-guia-linea { display: none; align-items: center; gap: .75rem; margin: 0 0 .95rem; }
.k-viva-tarjeta p.k-viva-guia-linea { font: 600 1rem/1.3 var(--kv-fuente-texto); color: #fff; }
.k-viva-guia-linea img { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(143, 209, 111, .45); background: #1E4D2C; }
.k-viva-cierre .k-viva-guia-linea, .rv-sin-guia .k-viva-guia-linea { display: flex; }

/* Portada (paso 0): titular grande sin tarjeta */
.k-viva-portada { padding: 3.5rem 0 4.5rem; }
.k-viva-portada .k-dir { max-width: 600px; }
.k-viva-saltar { margin: 1rem 0 0; font-size: .9375rem; color: #CFE3C6; }
.k-viva-saltar .k-enlace { color: var(--k-hoja-claro, #8FD16F); }
.k-viva-portada .k-titular { color: #fff; font-size: clamp(2.2rem, 1.25rem + 3.3vw, 4.1rem); max-width: 15ch; }
.k-viva-portada .k-pre { color: var(--k-hoja-claro, #8FD16F); }
.k-viva-portada .k-entrada { color: #CFE3C6; max-width: 46ch; }
.k-viva-portada .k-entrada strong { color: #fff; }
.k-viva-portada .k-viva-nota { color: #A9C3A0; max-width: 62ch; margin: -.25rem 0 1.1rem; }

/* Guía (escritorio): fotos reales sin halo, dos tercios del tamaño anterior, sobre la línea de suelo (Studio H3, Anexo B4) */
.k-guia { display: none; }
@media (min-width: 900px) {
  .rv-js .k-guia { display: block; position: absolute; right: clamp(16px, 3vw, 56px); bottom: 0; height: min(43vh, 384px); aspect-ratio: 418 / 720;
    margin: 0; pointer-events: none; z-index: 1; transform: translateY(var(--rv-pie, 0px));
    transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), opacity .5s ease; }
  .rv-sin-guia .k-guia { opacity: 0; }
}
.k-guia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; transition: opacity .45s ease;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 9%); mask-image: linear-gradient(to top, transparent 0, #000 9%); }
.k-guia img.es-visible { opacity: 1; }
.k-guia::after { content: ""; position: absolute; z-index: -1; left: 2%; right: 2%; bottom: -12px; height: 30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4, 14, 8, .62), rgba(4, 14, 8, 0)); }
/* globo anclado a la cabeza, con la cola hacia el guía (Studio H4) */
.k-guia-globo { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); width: max-content; max-width: 250px; margin: 0;
  padding: .65rem .95rem; border-radius: 16px; background: #FDFDFB; color: #153A21; text-align: center;
  font: 600 .9375rem/1.35 var(--kv-fuente-texto); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.k-guia-globo::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -9px; border: 9px solid transparent; border-top-color: #FDFDFB; border-bottom: 0; }
.k-guia-globo[hidden] { display: none; }

/* Capas HTML del paso: arriba del sujeto, entre la tarjeta y el guía */
.k-viva-capa { position: absolute; z-index: 1; opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none;
  transition: opacity .6s ease .25s, transform .6s ease .25s; }
.k-viva[data-actual="1"] .k-capa-1, .k-viva[data-actual="2"] .k-capa-2, .k-viva[data-actual="3"] .k-capa-3,
.k-viva[data-actual="4"] .k-capa-4, .k-viva[data-actual="7"] .k-capa-7 { opacity: 1; transform: none; }
.k-capa-1 { left: 57%; top: 9%; width: 250px; }
.k-capa-2 { left: 55%; top: 8%; width: 290px; }
.k-capa-3 { left: 58%; top: 6%; width: 186px; }
.k-capa-4 { left: 48%; top: 8%; width: min(400px, 30vw); }
.k-capa-7 { left: 62%; top: 6%; width: min(160px, 17vh); }
/* Recibo (paso 1) con barrido por transform, solo en su paso */
.k-recibo { background: #FDFDFB; color: #153A21; border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); position: relative; overflow: hidden; }
.k-recibo b { display: block; font: 700 .9rem/1.2 var(--kv-fuente-titulos); margin-bottom: .55rem; }
.k-recibo span { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; padding: .28rem 0; border-top: 1px dashed #DCE3DA; color: #4A5550; }
.k-recibo span em { font-style: normal; font-weight: 600; color: #153A21; font-variant-numeric: tabular-nums; text-align: right; }
.k-recibo small { display: block; margin-top: .45rem; font-size: .7rem; color: #5F6964; }
.k-recibo::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateY(-26px);
  background: linear-gradient(180deg, rgba(103, 179, 70, 0), rgba(103, 179, 70, .35) 13px, rgba(103, 179, 70, 0) 26px) no-repeat; background-size: 100% 26px; }
.rv-anima[data-actual="1"] .k-recibo::after { animation: kEscaneo 2.4s ease-in-out infinite; }
@keyframes kEscaneo { from { transform: translateY(-26px); } to { transform: translateY(100%); } }
/* Gráfica de consumo (paso 2): cada barra con --s (porcentaje solar del mes) */
.k-consumo { background: rgba(253, 253, 251, .97); color: #153A21; border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); }
.k-consumo b { font: 700 .9rem/1.2 var(--kv-fuente-titulos); }
.k-consumo ol { display: flex; align-items: flex-end; gap: 4px; height: 90px; list-style: none; margin: .8rem 0 .5rem; padding: 0; }
.k-consumo li { flex: 1; background: linear-gradient(to top, #F2B705 0 var(--s, 0%), #67B346 var(--s, 0%) 100%); border-radius: 3px 3px 0 0; height: var(--h); transform-origin: bottom; }
html:not(.kv-sin-movimiento) .rv-anima[data-actual="2"] .k-consumo li { animation: kBarra .8s ease both; animation-delay: calc(var(--i) * 60ms); }
@keyframes kBarra { from { transform: scaleY(0); } }
.k-consumo small { display: block; font-size: .75rem; color: #5F6964; }
/* Firma (paso 3): la firma se descubre con un velo que se recoge (transform) */
.k-movil { background: #0F2A18; border: 2px solid rgba(143, 209, 111, .35); border-radius: 28px; padding: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.k-movil-hoja { background: #FDFDFB; border-radius: 16px; padding: .9rem; color: #153A21; }
.k-movil-hoja b { font: 700 .85rem/1.2 var(--kv-fuente-titulos); display: block; margin-bottom: .4rem; }
.k-movil-hoja i { display: block; height: 6px; border-radius: 3px; background: #DCE3DA; margin: .35rem 0; }
.k-movil-hoja i:nth-child(3) { width: 80%; } .k-movil-hoja i:nth-child(4) { width: 60%; }
.k-firma { display: block; width: 100%; height: 56px; margin-top: .4rem; }
.k-firma-velo { transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
html:not(.kv-sin-movimiento) .rv-anima[data-actual="3"] .k-firma-velo { animation: kFirmar 1.6s ease .5s both; }
@keyframes kFirmar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.k-sello { display: inline-flex; gap: .35rem; align-items: center; margin-top: .5rem; font-size: .72rem; font-weight: 600; color: #2F6B22; background: #E6F3DF; border-radius: 999px; padding: .2rem .55rem; }
/* Unifilar (paso 4) */
.k-unifilar-tarjeta { background: #FDFDFB; color: #153A21; border-radius: 14px; padding: .9rem 1rem .8rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); }
.k-unifilar-tarjeta b { display: block; font: 700 .9rem/1.2 var(--kv-fuente-titulos); margin-bottom: .35rem; }
.k-unifilar { display: block; width: 100%; height: auto; }
.k-unifilar-t { font: 500 9px/1 var(--kv-fuente-texto); letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.k-unifilar-tarjeta small { display: block; margin-top: .2rem; font-size: .7rem; color: #5F6964; }
/* Portal (paso 7) */
.k-capa-7 img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.k-ilustrativo-osc { display: block; margin-top: .4rem; font-size: .7rem; color: #CFE3C6; text-align: center; }

/* Botón de pausa: fuera del escenario y por encima de los pasos (KV Labs H4); etiqueta fija con aria-pressed */
.k-viva-control { position: sticky; top: var(--k-cab-alto); height: 0; z-index: 4; }
.k-viva-pausa { position: absolute; right: var(--k-canal, 16px); top: 12px;
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .9rem; border-radius: 999px;
  border: 1px solid rgba(143, 209, 111, .45); background: rgba(15, 42, 24, .94); color: #E4F0DE; font: 600 .8125rem/1 var(--kv-fuente-texto); cursor: pointer; }
.k-viva-pausa[hidden] { display: none; }
.k-viva-pausa:hover { background: #153A21; color: #fff; }
.k-viva-pausa:focus-visible { outline: none; box-shadow: var(--kv-foco-oscuro); }
.k-viva-pausa[aria-pressed="true"] { background: #F2F5EF; color: #153A21; border-color: #F2F5EF; }
.k-viva-pausa-i { display: inline-flex; }
.k-viva-pausa-i[data-i="seguir"], .k-viva-pausa[aria-pressed="true"] .k-viva-pausa-i[data-i="pausa"] { display: none; }
.k-viva-pausa[aria-pressed="true"] .k-viva-pausa-i[data-i="seguir"] { display: inline-flex; }

/* Botón flotante de WhatsApp: se aparta mientras el recorrido está en pantalla (Studio H4) */
.k-recorrido-en-pantalla .k-wa-flotante { opacity: 0; visibility: hidden; pointer-events: none; }

/* Celular: escena arriba, tarjeta abajo con el guía como avatar (Studio H10) */
@media (max-width: 899px) {
  .k-viva-velo { background: linear-gradient(180deg, rgba(15, 42, 24, 0) 0%, rgba(15, 42, 24, .1) 40%, rgba(15, 42, 24, .82) 62%, rgba(15, 42, 24, .95) 100%); }
  .k-viva-paso { padding-bottom: 4vh; }
  .k-viva-paso > .k-env { margin-block: auto 0; }
  .k-viva-tarjeta { max-width: none; padding: 1.2rem 1.2rem 1.15rem; background: #0F2A18; }
  .k-viva-tarjeta p { font-size: 1rem; }
  .k-viva-guia-linea { display: flex; }
  .k-viva[data-actual="8"] .rv-rot, .k-viva[data-actual="7"] .r-fv120 { opacity: 0; } /* el panorama del celular es muy pequeño para rotularlo */
  .k-viva-portada { padding: 1.5rem 0 2.5rem; }
  /* fondo sólido detrás del texto del hero (KV Labs H12) */
  .k-viva-portada > .k-env { background: #0F2A18; padding-top: 1rem; box-shadow: 0 -44px 36px -6px #0F2A18; }
  .k-viva-portada .k-pre { padding-right: 52px; }
  .k-capa-1, .k-capa-2, .k-capa-4 { left: var(--k-canal, 16px); right: 64px; top: 12px; width: auto; transform-origin: top center; }
  .k-capa-3, .k-capa-7 { left: var(--k-canal, 16px); top: 12px; width: 36vw; max-width: 160px; transform-origin: top left; }
  .k-recibo { display: grid; grid-template-columns: 1fr 1fr; column-gap: .9rem; padding: .75rem .9rem .7rem; }
  .k-recibo b, .k-recibo small { grid-column: 1 / -1; }
  .k-recibo span { flex-direction: column; justify-content: flex-start; gap: .1rem; font-size: .72rem; padding: .3rem 0; }
  .k-recibo span em { text-align: left; font-size: .8rem; }
  .k-consumo { padding: .75rem .9rem; }
  .k-consumo ol { height: 64px; margin: .55rem 0 .4rem; }
  .k-viva-pausa { right: 10px; top: 10px; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .k-viva-pausa-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .k-viva-pausa { display: none; } }

/* Botón de contorno sobre fondo oscuro */
.k-btn-claro { border-color: rgba(255, 255, 255, .6); color: #fff; }
.k-btn-claro:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.k-viva .k-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

/* Cabecera oscura y sólida sobre la portada; vuelve a clara al salir del recorrido (solo en el inicio) */
.k-logo-osc { display: none; }
.k-portada-osc:not(.k-cab-clara) .k-cab { background: #153A21; border-bottom-color: rgba(143, 209, 111, .16); }
.k-portada-osc:not(.k-cab-clara) .k-logo-color { display: none; }
.k-portada-osc:not(.k-cab-clara) .k-logo-osc { display: block; }
.k-portada-osc:not(.k-cab-clara) .k-nav a, .k-portada-osc:not(.k-cab-clara) .k-ingresar { color: #E4F0DE; }
.k-portada-osc:not(.k-cab-clara) .k-nav a:hover, .k-portada-osc:not(.k-cab-clara) .k-ingresar:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.k-portada-osc:not(.k-cab-clara) .k-menu-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.k-portada-osc:not(.k-cab-clara) .k-cab :focus-visible { box-shadow: var(--kv-foco-oscuro); }
.k-portada-osc .k-cab { transition: background-color .3s ease, border-color .3s ease; }
.kv-sin-movimiento .k-cab { transition: none; }

/* ==========================================================================
   Cabeceras de páginas internas: la escena fija, sin animación ni JS (KV Labs H11). El encuadre sale de --rv-sx, --rv-sy
   y --rv-z (los pone _k_cab.php): el sujeto queda al 72 % del ancho en escritorio y centrado en celular.
   ========================================================================== */
.k-pagina-viva { position: relative; overflow: hidden; border-bottom: 0; min-height: clamp(420px, 62vh, 620px); display: flex; align-items: flex-end;
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem); background: #0F2A18; }
.k-pagina-viva > .k-env { position: relative; z-index: 2; }
.k-pagina-viva-fondo { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.k-pagina-viva-fondo .rv-escena { position: absolute; overflow: visible; height: auto; max-width: none; aspect-ratio: 16 / 9;
  width: calc(100cqw * 1600 / var(--rv-z, 1600));
  left: calc(100cqw * .72 - var(--rv-sx, 800) * 100cqw / var(--rv-z, 1600));
  top: calc(100cqh * .55 - var(--rv-sy, 450) * 100cqw / var(--rv-z, 1600));
  --rv-fs: calc(var(--rv-z, 1600) * 12px / 1440); }
.k-pagina-viva-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 42, 24, .94) 0%, rgba(15, 42, 24, .78) 38%, rgba(15, 42, 24, .25) 70%, rgba(15, 42, 24, .1) 100%),
              linear-gradient(0deg, rgba(15, 42, 24, .7) 0%, rgba(15, 42, 24, 0) 40%); }
.k-pagina-viva .rv-rotulo { display: none; }
.k-pagina-viva[data-zona="hogar"] :is(.r-bt, .r-mt-c, .r-ap-h), .k-pagina-viva[data-zona="conjunto"] :is(.r-fv18, .r-sec, .r-bt, .r-mt-c),
.k-pagina-viva[data-zona="empresa"] :is(.r-ve, .r-fv120, .r-ap, .r-mt), .k-pagina-viva[data-zona="subestacion"] :is(.r-115, .r-132, .r-se, .r-str),
.k-pagina-viva[data-zona="general"] :is(.r-mt, .r-se, .r-str, .r-ap), .k-pagina-viva[data-zona="datos"] :is(.r-mon, .r-fv18, .r-mt) { opacity: 1; }
.k-pagina-viva .k-titular { color: #fff; }
.k-pagina-viva .k-entrada { color: #CFE3C6; }
.k-pagina-viva .k-migas a { color: #CFE3C6; }
.k-pagina-viva .k-migas, .k-pagina-viva .k-migas li[aria-current] { color: #9FBF94; }
@media (max-width: 899px) {
  .k-pagina-viva { min-height: 0; padding-top: 42vw; }
  .k-pagina-viva-fondo .rv-escena { --rv-zm: max(420, var(--rv-z, 1600) * .7);
    width: calc(100cqw * 1600 / var(--rv-zm)); left: calc(100cqw * .5 - var(--rv-sx, 800) * 100cqw / var(--rv-zm));
    top: calc(100cqh * .3 - var(--rv-sy, 450) * 100cqw / var(--rv-zm)); --rv-fs: calc(var(--rv-zm) * 12px / 390); }
  .k-pagina-viva-velo { background: linear-gradient(180deg, rgba(15, 42, 24, .05) 0%, rgba(15, 42, 24, .55) 30%, rgba(15, 42, 24, .95) 55%); }
}
/* Cajas claras dentro de la cabecera oscura: recuperan los colores de fondo claro */
.k-pagina-viva .k-caja, .k-pagina-viva .k-dir { color: var(--k-pizarra); }
.k-pagina-viva .k-caja p, .k-pagina-viva .k-caja .k-entrada { color: var(--k-pizarra); }
.k-pagina-viva .k-caja .k-pre { color: var(--k-hoja-texto); }
.k-pagina-viva .k-caja .k-enlace { color: var(--k-hoja-texto); }
.k-pagina-viva .k-caja .k-btn-linea { border-color: var(--k-bosque); color: var(--k-bosque); }