/* Vitrina «Las capas de tu instalación» · isométrico guiado por el scroll · 6-nov-2026.
   Qué es: la escena isométrica de una instalación con transformador propio (local, medidor y recibo, poste de
   CFE, transformador de pedestal, tablero, cable en ducto entre registros y malla de tierras) junto a la lista de
   las 6 capas. Sustituye al corte de 6 bandas con tapas por animation-timeline (ruta A, pulida del 5-nov).
   Por qué: en el isométrico la profundidad sí es real y cada capa se señala en su lugar; JCR aprobó el boceto
   con GO textual el 6-nov-2026.
   Fuente del SVG y de este CSS de escena: 09-Sistemas/Web-CCC-Matriz/boceto-capas-iso/generar_boceto.py
   (el SVG de producción sale con «--sitio <ruta>»; no se edita a mano en public/index.html).
   ESTADO BASE = escena completa y lista legible: la clase inicial del SVG es «ci s2 s3 s4 s5 s6», sin capa activa,
   sin sticky y sin flujo animado. Es lo que ven el celular (<=820 px), la ventana de menos de 720 px de alto, quien
   pide menos movimiento, quien no tiene JS o IntersectionObserver, y la impresión.
   MODO GUIADO (escritorio): public/js/app.js agrega .is-guiada e .is-viva a la sección y mueve la clase del SVG
   (aN = capa activa, sN = capas ya recorridas). Sólo entonces la figura se queda fija y fluye la energía.
   Todo lo que depende de la capa activa (aN) o del modo guiado vive en @media screen: al imprimir no aplica.
   Colores: MT azul #1FA3DA y BT lima #8DC63F, los de la leyenda del pie. */

.capas { padding-block: clamp(64px, 8vw, 112px); }
.capas__saltar { display: inline-block; margin-top: 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px; }
.capas__saltar:hover, .capas__saltar:focus-visible { color: var(--texto-alto); }
.capas__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }

/* la tarjeta es el propio <figure>: lienzo con el SVG y el pie al final */
.capas__escena { margin: 0; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); overflow: hidden; }
.ci-lienzo { padding: 18px 18px 8px; }
.capas__pie { margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--linea); font-family: var(--f-mono); font-size: 11.5px; line-height: 1.6; letter-spacing: .02em; color: var(--texto-suave); text-align: justify; hyphens: auto; }

.capas__pasos { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cap__paso { position: relative; padding: 22px 0 22px 22px; border-left: 1px solid var(--linea-fuerte); transition: border-color .4s ease; }
.cap__paso.is-on { border-left-color: var(--azul-ccc); }
.cap__n { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-lima); margin: 0 0 8px; }
.cap__paso h3 { font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; color: var(--texto-alto); margin: 0 0 10px; }
.cap__paso p { color: var(--texto-medio); line-height: 1.65; margin: 0 0 12px; max-width: 46ch; text-align: justify; hyphens: auto; }
.cap__ligas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.cap__ligas a, .cap__tambien a { color: var(--azul-ccc); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 10px; }
.cap__paso--cierre { border-left-color: transparent; }
.cap__paso--cierre .btn { margin-top: 6px; }
.cap__tambien { margin-top: 18px !important; font-size: .92rem; color: var(--texto-suave) !important; }

/* modo guiado: la figura se queda fija SÓLO con .is-guiada (la pone app.js) y en escritorio. La altura también
   cuenta: la figura mide ~593 px desde top 112 px, y por debajo de 720 px de alto (laptop de 1366×768, con la
   barra del navegador ~657 px) el pie con la leyenda MT/BT quedaba fuera de pantalla todo el recorrido. Ahí queda
   la escena completa y quieta. Es la MISMA consulta que usa app.js para encender el guiado. */
@media screen and (min-width: 821px) and (min-height: 720px) {
  .capas.is-guiada .capas__escena { position: sticky; top: 112px; }
  .capas.is-guiada .cap__paso { min-height: 56svh; }
  .capas.is-guiada .cap__paso--cierre { min-height: auto; }
}
@media (max-width: 820px) {
  .capas__grid { grid-template-columns: 1fr; }
}

/* ── la escena (SVG isométrico) ── */
.ci { display: block; width: 100%; height: auto; overflow: hidden; }
/* el terreno es un vidrio esmerilado pintado DESPUÉS de lo enterrado: lo de abajo se ve apagado, como dentro de la tierra */
.ci .sub-l { fill: #171e28; fill-opacity: .84; stroke: rgba(244,247,250,.14); stroke-width: 1; stroke-linejoin: round; transition: fill-opacity .6s ease; }
.ci .sub-r { fill: #12171f; fill-opacity: .84; stroke: rgba(244,247,250,.14); stroke-width: 1; stroke-linejoin: round; transition: fill-opacity .6s ease; }
.ci .suelo { fill: #1f2934; fill-opacity: .80; stroke: rgba(244,247,250,.22); stroke-width: 1; stroke-linejoin: round; transition: fill-opacity .6s ease; }
.ci:not([class*=" a"]) .suelo, .ci:not([class*=" a"]) .sub-l, .ci:not([class*=" a"]) .sub-r { fill-opacity: .58; }
.ci .estrato { fill: none; stroke: rgba(244,247,250,.10); stroke-width: 1; stroke-dasharray: 3 5; }
.ci .malla { stroke: rgba(244,247,250,.30); stroke-width: 1.2; transition: stroke .4s ease; }
.ci .varilla { stroke: rgba(244,247,250,.42); stroke-width: 2.4; stroke-linecap: round; transition: stroke .4s ease; }
.ci .nodo { fill: rgba(244,247,250,.55); transition: fill .4s ease; }
.ci .wire { stroke: rgba(244,247,250,.26); stroke-width: 1; fill: none; }
.ci .pole { stroke: rgba(244,247,250,.42); stroke-width: 4; stroke-linecap: round; }
.ci .pole.cru { stroke-width: 3; }
.ci .aisl { stroke: rgba(244,247,250,.55); stroke-width: 2; stroke-linecap: round; }
.ci .wall-l { fill: #1a222d; stroke: rgba(244,247,250,.16); stroke-width: 1; stroke-linejoin: round; }
.ci .wall-r { fill: #151b24; stroke: rgba(244,247,250,.16); stroke-width: 1; stroke-linejoin: round; }
.ci .roof { fill: #212c39; stroke: rgba(244,247,250,.22); stroke-width: 1; stroke-linejoin: round; }
.ci .pret { fill: none; stroke: rgba(244,247,250,.12); stroke-width: 1; stroke-linejoin: round; }
.ci .win { fill: #10151c; stroke: rgba(244,247,250,.14); stroke-width: 1; transition: fill .7s ease; }
.ci.s4 .win { fill: rgba(141,198,63,.30); }
.ci .puerta { fill: #10151c; stroke: rgba(244,247,250,.18); stroke-width: 1; }
.ci .eq-t { fill: #2a3644; stroke: rgba(244,247,250,.30); stroke-width: 1; stroke-linejoin: round; }
.ci .eq-f { fill: #212c39; stroke: rgba(244,247,250,.30); stroke-width: 1; stroke-linejoin: round; }
.ci .eq-s { fill: #1a222d; stroke: rgba(244,247,250,.30); stroke-width: 1; stroke-linejoin: round; }
.ci .base-t { fill: #232d3a; stroke: rgba(244,247,250,.20); stroke-width: 1; stroke-linejoin: round; }
.ci .base-f { fill: #1a222d; stroke: rgba(244,247,250,.20); stroke-width: 1; stroke-linejoin: round; }
.ci .base-s { fill: #151b24; stroke: rgba(244,247,250,.20); stroke-width: 1; stroke-linejoin: round; }
.ci .fin { stroke: rgba(244,247,250,.24); stroke-width: 1; }
.ci .int { fill: #10151c; stroke: rgba(244,247,250,.40); stroke-width: 1; }
.ci .dsp { fill: #10151c; stroke: rgba(244,247,250,.30); stroke-width: .8; transition: fill .4s ease; }
.ci.s4 .dsp { fill: rgba(141,198,63,.55); }
.ci .reg-t { fill: #2a3644; stroke: rgba(244,247,250,.30); stroke-width: 1; stroke-linejoin: round; }
.ci .reg-f { fill: #1a222d; stroke: rgba(244,247,250,.34); stroke-width: 1; stroke-linejoin: round; }
.ci .reg-s { fill: #151b24; stroke: rgba(244,247,250,.34); stroke-width: 1; stroke-linejoin: round; }
.ci .ducto-t, .ci .ducto-f, .ci .ducto-s { fill: #212c39; stroke: rgba(244,247,250,.34); stroke-width: 1; stroke-linejoin: round; transition: stroke .4s ease; }
.ci .cd { fill: none; stroke: rgba(244,247,250,.18); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ci .cd-sub, .ci .cd-t { stroke: rgba(244,247,250,.22); }
.ci .fl { fill: none; stroke: #8DC63F; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 9; opacity: 0; transition: opacity .45s ease; }
.ci .fl-mt { stroke: #1FA3DA; }
.ci.s2 .fl-mta, .ci.s3 .fl-mts, .ci.s4 .fl-bt, .ci.s4 .fl-der, .ci.s6 .fl-ti { opacity: 1; }
.ci .carga { fill: #374151; transition: fill .4s ease; }
.ci.s4 .carga { fill: #8DC63F; }
.ci .rc-b { fill: #10151c; stroke: rgba(31,163,218,.55); stroke-width: 1; }
.ci .rc-t { fill: rgba(244,247,250,.62); font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; }
.ci .rc-l { stroke: rgba(244,247,250,.18); stroke-width: 1; }
.ci .rb { fill: rgba(244,247,250,.28); transition: fill .4s ease; }
.ci .tx { fill: rgba(244,247,250,.62); font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-anchor: end; }
.ci .mk-l { stroke: rgba(31,163,218,.55); stroke-width: 1; }
.ci .mk circle { fill: #10151c; stroke: #1FA3DA; stroke-width: 1.4; transition: fill .3s ease; }
.ci .mk text { fill: #F4F7FA; font-family: var(--f-mono); font-size: 11px; font-weight: 500; text-anchor: middle; dominant-baseline: central; }
.ci .c * { transition: stroke .4s ease, stroke-opacity .4s ease; }

@media screen {
  /* la capa activa (aN): en las capas 5 y 6 el esmerilado se aclara y el subsuelo queda a la vista */
  .ci.a5 .suelo, .ci.a6 .suelo { fill-opacity: .22; }
  .ci.a5 .sub-l, .ci.a5 .sub-r, .ci.a6 .sub-l, .ci.a6 .sub-r { fill-opacity: .28; }
  .ci.a6 .malla { stroke: rgba(141,198,63,.70); }
  .ci.a6 .varilla { stroke: #8DC63F; }
  .ci.a6 .nodo { fill: #8DC63F; }
  .ci.a1 .rb { fill: #8DC63F; }
  .ci.a1 .mk1 circle, .ci.a2 .mk2 circle, .ci.a3 .mk3 circle, .ci.a4 .mk4 circle, .ci.a5 .mk5 circle, .ci.a6 .mk6 circle { fill: #1FA3DA; }
  .ci.a1 .mk1 text, .ci.a2 .mk2 text, .ci.a3 .mk3 text, .ci.a4 .mk4 text, .ci.a5 .mk5 text, .ci.a6 .mk6 text { fill: #10151c; }

  /* modo guiado (escritorio): la capa activa a plena luz y el resto atenuado; la energía nunca se atenúa.
     Se atenúan los CONTORNOS, no los sólidos: con opacidad el local se volvía de vidrio y dejaba ver el terreno. */
  .is-guiada .ci[class*=" a"] .c * { stroke-opacity: .38; }
  .is-guiada .ci.a1 .c1 *, .is-guiada .ci.a2 .c2 *, .is-guiada .ci.a3 .c3 *, .is-guiada .ci.a4 .c4 *, .is-guiada .ci.a5 .c5 *, .is-guiada .ci.a6 .c6 * { stroke-opacity: 1; }
  .is-guiada .ci.a1 .c1 :is(.wall-l, .wall-r, .roof, .win, .puerta, .eq-t, .eq-f, .eq-s, .rc-b),
  .is-guiada .ci.a2 .c2 :is(.pole, .aisl, .eq-t, .eq-f, .eq-s),
  .is-guiada .ci.a3 .c3 :is(.eq-t, .eq-f, .eq-s, .base-t, .base-f, .base-s, .fin),
  .is-guiada .ci.a4 .c4 :is(.eq-t, .eq-f, .eq-s, .int, .fin),
  .is-guiada .ci.a5 .c5 :is(.reg-t, .reg-f, .reg-s, .ducto-t, .ducto-f, .ducto-s) { stroke: rgba(31,163,218,.85); }
  /* los conductos (.cd) NUNCA se pintan de azul al resaltar: azul es media tensión en la leyenda del pie */
  .is-guiada .ci[class*=" a"] .mk { opacity: .55; }
  .is-guiada .ci.a1 .mk1, .is-guiada .ci.a2 .mk2, .is-guiada .ci.a3 .mk3, .is-guiada .ci.a4 .mk4, .is-guiada .ci.a5 .mk5, .is-guiada .ci.a6 .mk6 { opacity: 1; }
}

/* el flujo de energía sólo corre con .is-viva (app.js) y si el visitante no pidió menos movimiento */
@media screen and (prefers-reduced-motion: no-preference) {
  .is-viva .ci .fl { animation: ciFlujo 1.1s linear infinite; }
}
/* !important a propósito: «.ci *» vale (0,1,0) y pierde contra «.ci .sub-l», «.ci .c *» o «.ci .fl» (0,2,0) */
@media (prefers-reduced-motion: reduce) {
  .ci, .ci *, .cap__paso { transition: none !important; }
}
@keyframes ciFlujo { to { stroke-dashoffset: -13; } }

/* celular: marcadores y rótulo más grandes, lienzo más justo */
@media (max-width: 720px) {
  .ci .mk, .ci .tx { transform-box: fill-box; transform-origin: center; transform: scale(1.5); }
  .ci-lienzo { padding: 10px 6px 4px; }
}

/* impresión: la escena completa y quieta aunque la pantalla estuviera en modo guiado (lo de aN y .is-guiada
   ya no aplica fuera de screen; aquí se fuerza lo que dependía de las capas recorridas, sN) */
@media print {
  .capas__saltar { display: none; }
  .ci .suelo, .ci .sub-l, .ci .sub-r { fill-opacity: .58; }
  .ci .fl-mta, .ci .fl-mts, .ci .fl-bt, .ci .fl-der, .ci .fl-ti { opacity: 1; }
  .ci .win { fill: rgba(141,198,63,.30); }
  .ci .dsp { fill: rgba(141,198,63,.55); }
  .ci .carga { fill: #8DC63F; }
}