/* ==========================================================================
   Proceso · plano «Una casa, cinco momentos» (plano-proceso.mjs), 22/10/2026
   Archivo propio (se carga después de estilos.css, solo en la portada). La misma villa que Control KNX:
   solo la planta, sin cajetín, ejes, cotas, escala, norte ni rellenos. Unidades del SVG: 1 ud ≈ 5,5 cm.
   Lo que se ve sin JavaScript o con «reducir movimiento» es el estado final (paso 5, Posventa):
   muros, equipos, redes en tinta, temperaturas en la consigna y la lista de comprobación al 30 %.
   animaciones.js lleva el resto (lápiz, m², sistema que se tiende, pulsos) con autoAlpha.
   ========================================================================== */

.proceso__plano {
  --c-arq: 200 218 228;
  --c-clima: 92 225 240;
  --c-suelo: 250 204 21;
  --c-vent: 74 222 128;
  --c-ext: 160 200 210;
  --c-bus: 42 139 175;
  --fondo-plano: #0b0b10;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* Móvil y pantalla baja: al final de la sección, debajo del botón */
  left: 50%;
  bottom: 24px;
  width: min(760px, 96vw);
  margin-left: max(-380px, -48vw);
}
.proceso__plano [data-s="clima"] { --k: var(--c-clima); }
.proceso__plano [data-s="suelo"] { --k: var(--c-suelo); }
.proceso__plano [data-s="ventilacion"] { --k: var(--c-vent); }
.proceso__plano [data-s="bus"] { --k: var(--c-bus); }

/* Sitio para el plano al final de la sección (sin scroll horizontal) */
.proceso:not(.proceso--horizontal) {
  padding-bottom: calc(clamp(72px, 10vw, 140px) + min(366px, 46vw) + 24px);
}
@media (min-width: 900px) {
  .proceso:not(.proceso--horizontal) {
    padding-bottom: calc(clamp(72px, 10vw, 140px) + min(366px, 46vw) + 84px);
  }
}

/* ---------- Dibujo ---------- */
.pp {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-muro {
  stroke: rgb(var(--c-arq) / 0.9);
  stroke-width: 1.4;
  stroke-linecap: square;
}
.pp-tabique {
  stroke: rgb(var(--c-arq) / 0.7);
  stroke-width: 0.8;
  stroke-linecap: square;
}
.pp-ventana {
  stroke: rgb(var(--c-arq) / 0.75);
  stroke-width: 0.8;
}
.pp-puerta {
  stroke: rgb(var(--c-arq) / 0.4);
  stroke-width: 0.5;
}
.pp-mueble {
  stroke: rgb(var(--c-arq) / 0.35);
  stroke-width: 0.5;
}

/* Redes: lápiz (discontinuo, gris) → tinta (color del sistema). Sin guiones en la tinta: DrawSVG la dibuja */
.pp-lapiz {
  stroke: rgb(214 214 230 / 0.6);
  stroke-width: 0.6;
  stroke-dasharray: 2.4 1.8;
  visibility: hidden;
}
.pp-tinta {
  stroke: rgb(var(--k) / 0.85);
  stroke-width: 0.9;
  opacity: 0.5;
}
.pp-tinta[data-s="suelo"] {
  stroke-width: 0.6;
}
.pp-tinta.pp-t--ret {
  stroke: rgb(var(--k) / 0.5);
}
.pp-tinta.pp-t--aire {
  stroke-width: 3;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.pp-tinta.pp-t--ext {
  stroke: rgb(var(--c-ext) / 0.75);
}
.pp-tinta[data-s="bus"] {
  stroke: url(#pp-bus-grad);   /* el bus lleva el degradado del logo */
  stroke-width: 0.75;
  stroke-linecap: butt;
  opacity: 0.9;
}
.pp-alma {
  stroke: var(--fondo-plano);
  stroke-width: 1.6;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.pp-pulso {
  stroke: #fff;
  stroke-width: 1.3;
  visibility: hidden;
}

/* Equipos (los del plano KNX): solo los de clima, suelo radiante, ventilación y KNX */
.pp-sim {
  display: none;
}
.pp-sim[data-s] {
  display: inline;
}
.pp-sim .pp-caja,
rect.pp-sim,
path.pp-sim {
  stroke: rgb(var(--k) / 0.85);
  stroke-width: 0.6;
  fill: #0d0d15;
}
.pp-caja--oculta {
  stroke-dasharray: 2.5 1.5;
}
.pp-sim .pp-lama {
  stroke: rgb(var(--k) / 0.55);
  stroke-width: 0.4;
}
.pp-sim .pp-relleno {
  fill: rgb(var(--k) / 0.8);
  stroke: none;
}
.pp-sim .pp-punto {
  stroke: rgb(var(--k) / 0.9);
  stroke-width: 1.3;
}
.pp .pp-etq {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 4.6px;
  font-weight: 600;
  fill: rgb(var(--k) / 0.95);
  stroke: none;
}
.pp .pp-etq--sonda { font-size: 3.6px; }
.pp .pp-etq--fuera { font-size: 4px; }
.pp .pp-etq--dep { font-size: 4.4px; }
.pp-latido {
  stroke: rgb(150 210 228);
  stroke-width: 1.6;
  stroke-linecap: butt;
  visibility: hidden;
}
.pp-ping {
  stroke: rgb(var(--c-bus));
  stroke-width: 0.8;
  visibility: hidden;
}
.pp-halo {
  fill: rgb(var(--c-bus) / 0.45);
  stroke: none;
  visibility: hidden;
}

/* Rótulos: nombre (al 30 % en el estado final), m² (paso 1) y temperatura (pasos 4 y 5) */
.pp text {
  stroke: none;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
}
.pp .pp-rot__nombre {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  fill: rgb(var(--c-arq));
  opacity: 0.3;
}
.pp .pp-rot__m2,
.pp .pp-rot__temp {
  font-size: 13px;
  fill: #f5f5f5;
  font-variant-numeric: tabular-nums;
}
.pp .pp-rot__m2 {
  visibility: hidden;
}
.pp-huecos--movil {
  display: none;
}

/* ---------- Pie: cifras de cada momento (escritorio) ---------- */
.proceso__pie {
  display: none;
}
@media (min-width: 900px) {
  .proceso__pie {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-top: 12px;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--gris);
  }
}
.proceso__estados {
  display: grid;
}
.pp-estado {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.pp-estado--circuitos {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  visibility: hidden;
}
.pp-estado--tendido {
  visibility: hidden;
}
.pp-estado--lista {
  opacity: 0.3;
}
.pp-item,
.pp-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pp-item b,
.pp-tendido b {
  color: var(--blanco);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pp-muestra {
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: rgb(var(--k));
}
.pp-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: rgb(var(--k));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Chispa: el punto de luz que entra en el plano en «Puesta en marcha» (solo con el scroll horizontal) */
.proceso__chispa {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgb(42 139 175 / 0.85), 0 0 24px 8px rgb(136 174 39 / 0.35);
  visibility: hidden;
}

/* ---------- Escritorio con scroll horizontal (E14): el plano, arriba a la derecha ---------- */
@media (min-width: 900px) {
  /* La sección fijada ocupa todo el ancho y centra su contenido con el relleno lateral (sin márgenes
     automáticos: con ellos, la posición fija del pin a veces se calculaba a 0 px del borde y se descolocaba) */
  .proceso.proceso--horizontal {
    --lado: max(var(--margen), calc((100% - var(--ancho)) / 2));
    --plano-ancho: min(560px, calc((50vh - 84px - var(--proceso-arriba)) * 2.08));
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--lado);
  }
  .proceso--horizontal .proceso__remate {
    right: var(--lado);
  }
  /* El título y la entradilla no pasan por debajo del plano (en inglés el título cabe en una línea) */
  .proceso--horizontal .cabeza {
    max-width: min(760px, calc(100% - var(--plano-ancho) - 40px));
  }
  /* Alto disponible: de arriba (junto al título) hasta la línea de pasos, con sitio para el pie */
  .proceso--horizontal .proceso__plano {
    left: auto;
    bottom: auto;
    margin-left: 0;
    /* En pantallas altas baja un poco, hacia la altura del título (la sección centra su contenido) */
    top: calc(var(--proceso-arriba) - 14px + max(0px, (100vh - 900px) * 0.4));
    right: var(--lado);
    width: var(--plano-ancho);
  }
  /* El marcador «01 / 05» va en el pie, a la derecha (antes iba suelto arriba) */
  .proceso--horizontal .proceso__pie .proceso__marcador {
    position: static;
    flex: none;
    gap: 8px;
  }
  .proceso--horizontal .proceso__pie .proceso__cuenta .rodillo {
    font-size: 1.6rem;
  }
  .proceso--horizontal .proceso__pie .proceso__total {
    font-size: 0.8rem;
  }
  .proceso--horizontal .proceso__pie .proceso__barra {
    width: 96px;
  }
}

/* ---------- Móvil: solo muros, trazados gruesos y temperaturas ---------- */
@media (max-width: 899px) {
  .pp .pp-rot__nombre,
  .pp .pp-rot__m2,
  .pp-puerta,
  .pp-mueble,
  .pp .pp-etq,
  .pp-lapiz,
  .pp-halos,
  .pp-ping,
  .pp-sim[data-s="bus"],
  .pp-tinta[data-s="bus"],
  .pp-pulso[data-s="bus"],
  .pp-latido {
    display: none; /* sin bus ni dispositivos KNX: en pequeño solo se leerían trazos sueltos */
  }
  .pp .pp-rot__temp {
    font-size: 19px;
  }
  .pp-huecos--escritorio {
    display: none;
  }
  .pp-huecos--movil {
    display: inline;
  }
  .pp-muro { stroke-width: 2.2; }
  .pp-tabique { stroke-width: 1.3; }
  .pp-tinta { stroke-width: 1.8; opacity: 0.7; }
  .pp-tinta[data-s="suelo"] { stroke-width: 1.2; }
  .pp-tinta.pp-t--aire { stroke-width: 4.6; }
  .pp-alma { stroke-width: 2.2; }
  .pp-pulso { stroke-width: 2.2; }
}

/* ==========================================================================
   Variante «plano de fondo» (22/10/2026; interruptor PLANO_FONDO en generar.mjs)
   El plano ocupa toda la sección, en tonos suaves, detrás del título y de las tarjetas.
   Rendimiento (medido): la cámara NO cambia el viewBox (redibujaba el plano en cada fotograma): mueve y
   escala el <svg> con transform (GSAP), que es una capa propia. El <svg> se dibuja al tamaño del
   acercamiento máximo (--pp-zmax) y la vista de la casa entera es una escala 1/zmax: siempre nítido.
   Sin máscaras CSS ni filtros sobre el plano, y sin desenfoque de fondo en las tarjetas (escritorio).
   ========================================================================== */
.proceso--plano-fondo .proceso__plano {
  inset: 0;
  left: 0;
  bottom: 0;
  width: auto;
  margin: 0;
  overflow: clip;
  perspective: 1400px;
}
/* Cámara (paralaje del ratón e inclinación de entrada) y, dentro, el plano (acercamiento y travelling) */
.proceso__camara {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.proceso--plano-fondo .pp {
  --pp-zmax: 1.4;
  --pp-w: min(1180px, 84vw, calc(100vh * 1.75));
  position: absolute;
  left: 50%;
  top: 47%;
  width: calc(var(--pp-w) * var(--pp-zmax));
  margin-left: calc(var(--pp-w) * var(--pp-zmax) / -2);
  margin-top: calc(var(--pp-w) * var(--pp-zmax) / -4.16);
  opacity: 0.4;
  transform: scale(calc(1 / 1.4)); /* la casa entera (sin JS); GSAP toma el relevo */
  will-change: transform;
}
/* Las redes no se recortan bajo los rótulos (la máscara SVG se recalculaba en cada fotograma) */
.proceso--plano-fondo .pp-redes {
  mask: none;
}
/* Viñeta: el plano se deshace hacia los bordes (capa fija encima, en vez de una máscara sobre el plano) */
.proceso__vineta {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 64% 62% at 50% 47%, transparent 55%, var(--negro) 100%),
    linear-gradient(105deg, rgb(10 10 11 / 0.5) 0%, rgb(10 10 11 / 0.18) 34%, transparent 52%);
  pointer-events: none;
}
/* Rótulos del plano más discretos: de fondo no deben competir con el texto de las tarjetas */
.proceso--plano-fondo .pp .pp-rot__temp,
.proceso--plano-fondo .pp .pp-rot__m2 {
  fill: rgb(245 245 245 / 0.6);
}
/* Tarjetas algo más opacas (sin desenfoque de fondo: sobre un plano que se mueve costaba mucho) */
.proceso--plano-fondo .paso__escena {
  background-color: rgb(13 13 19 / 0.8);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Título, pasos y botón, por encima del plano */
.proceso--plano-fondo .cabeza,
.proceso--plano-fondo .recorrido,
.proceso--plano-fondo .proceso__remate {
  position: relative;
  z-index: 1;
}

/* Escritorio (sección fijada) */
@media (min-width: 900px) {
  .proceso--plano-fondo.proceso--horizontal .proceso__plano {
    top: 0;
    right: 0;
    width: auto;
  }
  .proceso--plano-fondo.proceso--horizontal .cabeza {
    max-width: 760px;
  }
  /* Cifras de cada momento y marcador «01 / 05»: arriba a la derecha, a la altura del título */
  .proceso--plano-fondo.proceso--horizontal .proceso__pie {
    position: absolute;
    top: calc(var(--proceso-arriba) + 10px);
    right: var(--lado);
    z-index: 1;
    margin: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }
  .proceso--plano-fondo.proceso--horizontal .proceso__remate {
    position: absolute;
  }
  .proceso--plano-fondo.proceso--horizontal .proceso__fondo {
    --rejilla-centro: 50% 47%;
  }
  .proceso--plano-fondo.proceso--horizontal .proceso__resplandor {
    background:
      radial-gradient(26% 30% at 62% 52%, rgba(255, 196, 140, 0.08), transparent 70%),
      radial-gradient(50% 50% at 50% 47%, rgba(42, 139, 175, 0.12), transparent 70%);
  }
}
/* Sin la sección fijada (pantalla baja o «reducir movimiento»), las cifras no tienen sitio junto al título */
.proceso--plano-fondo:not(.proceso--horizontal) .proceso__pie {
  display: none;
}

/* Móvil: sin el hueco del final; el plano se queda quieto en el centro de la pantalla mientras pasan los pasos */
.proceso--plano-fondo:not(.proceso--horizontal) {
  padding-bottom: clamp(72px, 10vw, 140px);
}
@media (max-width: 899px) {
  /* Arriba del todo; animaciones.js lo baja con el scroll para que quede centrado en la pantalla
     (un sticky no funciona aquí: el <body> tiene overflow propio) */
  .proceso__camara {
    inset: 0 0 auto;
    height: 80vw;
  }
  .proceso--plano-fondo .pp {
    --pp-w: 130vw;
    top: 50%;
    opacity: 0.36; /* antes 0,45: los conductos (el verde de ventilación) cruzaban el texto de las tarjetas */
  }
  .proceso__vineta {
    display: none;
  }
  /* Tarjetas algo transparentes en el móvil: el plano se intuye detrás, pero no cruza el texto */
  .proceso--plano-fondo .paso__escena {
    background-color: rgb(13 13 19 / 0.86);
  }
}

/* ---------- Final: la casa encendida (luz cálida en estancias y ventanas) ---------- */
.pp-luz {
  stroke: none;
}
.pp-ventana-luz {
  stroke: #ffc48c;
  stroke-width: 2;
  stroke-opacity: 0.9;
}

/* ---------- Transiciones: escáner de la Propuesta y onda de encendido de la Puesta en marcha ---------- */
.pp-escaner,
.pp-onda {
  visibility: hidden;
}
.pp-onda {
  fill: none;
  stroke: rgb(95 179 207);
  stroke-width: 1.2;
}

/* ---------- Plano de fondo: la parte del paso actual (o de la tarjeta bajo el ratón) se ilumina ---------- */
.proceso--plano-fondo .proceso__plano[data-foco] .pp > g:not(.pp-luces):not(.pp-ventanas-luz) {
  opacity: 0.45;
  transition: opacity 0.6s var(--ease-suave, ease);
}
.proceso--plano-fondo .proceso__plano[data-foco="0"] .pp-arq,
.proceso--plano-fondo .proceso__plano[data-foco="1"] .pp-equipos,
.proceso--plano-fondo .proceso__plano[data-foco="2"] .pp-redes,
.proceso--plano-fondo .proceso__plano[data-foco="3"] .pp-halos,
.proceso--plano-fondo .proceso__plano[data-foco="3"] .pp-rotulos,
.proceso--plano-fondo .proceso__plano[data-foco="3"] .pp-redes,
.proceso--plano-fondo .proceso__plano[data-foco="4"] .pp-redes,
.proceso--plano-fondo .proceso__plano[data-foco="4"] .pp-vivo {
  opacity: 1 !important;
}
/* Posventa: solo el bus KNX destaca dentro de las redes */
.proceso--plano-fondo .proceso__plano[data-foco="4"] .pp-tinta:not([data-s="bus"]) {
  stroke-opacity: 0.35;
}
.proceso--plano-fondo .proceso__plano[data-foco="4"] .pp-tinta[data-s="bus"] {
  stroke-width: 1.3;
}
.proceso--plano-fondo .proceso__plano[data-foco="3"] .pp-tinta {
  stroke-opacity: 0.5;
}

/* ---------- Plano de fondo: rejilla de papel técnico (milimetrado), que se mueve con el ratón ---------- */
.proceso--plano-fondo .proceso__rejilla {
  inset: -24px;
  background-image:
    linear-gradient(rgba(166, 201, 74, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 201, 74, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(166, 201, 74, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 201, 74, 0.04) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at var(--rejilla-centro, 50% 47%), #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 70% at var(--rejilla-centro, 50% 47%), #000 30%, transparent 80%);
  will-change: transform;
}