/* ==========================================================================
   Piezas compartidas de los sitios de empresa (ADVSYSA, AMS, TrackPoint, Greenergy)
   Fuente única: scripts/websites/piezas-empresas/ — se instala IGUAL en cada sitio
   (sitios/<sitio>/assets/piezas/piezas.css). No se edita en el sitio.
   Colores y letras: SOLO variables --pz-* (las pone tema.css de cada sitio).
   Prefijo de todo: .pz-   ·   Manual: scripts/websites/piezas-empresas/README.md
   Movimiento: solo transform, opacity y stroke-dashoffset; con «reducir
   movimiento» todo queda quieto y completo.
   ========================================================================== */

/* 0 · Valores de reserva (especificidad cero: el :root de tema.css siempre gana) */
:where(:root) {
  --pz-fuente: inherit;
  --pz-fuente-titulo: inherit;
  --pz-peso-titulo: 700;
  --pz-mayus-titulo: none;
  --pz-accion: #0b5f73;
  --pz-accion-hover: #084b5b;
  --pz-sobre-accion: #ffffff;
  --pz-oscuro: #13202e;
  --pz-oscuro-2: #0b141e;
  --pz-claro: #f4f7fa;
  --pz-tarjeta: #ffffff;
  --pz-tinta: #13202e;
  --pz-texto: #3d4f63;
  --pz-texto-suave: #55687c;
  --pz-linea: #d5dee7;
  --pz-sobre-oscuro: #ffffff;
  --pz-sobre-oscuro-suave: #c4d1dd;
  --pz-linea-oscura: rgb(255 255 255 / 0.16);
  --pz-acento: #5cc3e0;          /* acento vivo: SOLO sobre oscuro (íconos, líneas, letra grande) */
  --pz-acento-texto: #9fdcef;    /* letra pequeña de acento sobre oscuro */
  --pz-acento-claro: #0b6a80;    /* acento sobre claro (= el color de acción del sitio) */
  --pz-foco: #0b5f73;            /* anillo de foco sobre claro */
  --pz-foco-oscuro: #9fdcef;     /* anillo de foco sobre oscuro */
  --pz-foco-separacion: 3px;
  --pz-foco-halo: none;          /* p. ej. 0 0 0 7px #fff (ADVSYSA) o 0 0 0 5px <rojo> (TrackPoint) */
  --pz-radio: 12px;              /* tarjetas */
  --pz-radio-boton: 6px;         /* botones */
  --pz-radio-pastilla: 999px;    /* botones redondos de mando (Pausar, Repetir); ADVSYSA: 6px */
  --pz-whatsapp: #25d366;
  --pz-whatsapp-texto: #0b3d1f;
  --pz-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Cinta: velocidad de crucero en px por segundo (computadora / celular ≤ 600 px).
     Opcionales (sin valor aquí, a propósito): --pz-cinta-acento, --pz-cinta-tinta, --pz-cinta-fuente */
  --pz-cinta-vel: 44;
  --pz-cinta-vel-cel: 32;
  /* «Imagen ilustrativa» en la cinta y las escenas: block = se ve · none = no (ADVSYSA: solo fotos reales) */
  --pz-nota-ilustrativa: block;

  /* Contexto CLARO (por omisión): lo que usa cada pieza */
  --pzc-fondo: var(--pz-claro);
  --pzc-tarjeta: var(--pz-tarjeta);
  --pzc-tinta: var(--pz-tinta);
  --pzc-texto: var(--pz-texto);
  --pzc-suave: var(--pz-texto-suave);
  --pzc-linea: var(--pz-linea);
  --pzc-acento: var(--pz-acento-claro);
  --pzc-acento-texto: var(--pz-acento-claro);
  --pzc-mando: var(--pz-accion);
  --pzc-foco: var(--pz-foco);
  --pzc-velo: rgb(255 255 255 / 0.9);
}
/* Contexto OSCURO: en la pieza o en cualquier contenedor suyo. .pz-claro lo devuelve a claro. */
.pz-oscuro {
  --pzc-fondo: var(--pz-oscuro);
  --pzc-tarjeta: rgb(255 255 255 / 0.06);
  --pzc-tinta: var(--pz-sobre-oscuro);
  --pzc-texto: var(--pz-sobre-oscuro-suave);
  --pzc-suave: var(--pz-sobre-oscuro-suave);
  --pzc-linea: var(--pz-linea-oscura);
  --pzc-acento: var(--pz-acento);
  --pzc-acento-texto: var(--pz-acento-texto);
  --pzc-mando: var(--pz-sobre-oscuro);
  --pzc-foco: var(--pz-foco-oscuro);
  --pzc-velo: rgb(0 0 0 / 0.55);
}
.pz-claro {
  --pzc-fondo: var(--pz-claro);
  --pzc-tarjeta: var(--pz-tarjeta);
  --pzc-tinta: var(--pz-tinta);
  --pzc-texto: var(--pz-texto);
  --pzc-suave: var(--pz-texto-suave);
  --pzc-linea: var(--pz-linea);
  --pzc-acento: var(--pz-acento-claro);
  --pzc-acento-texto: var(--pz-acento-claro);
  --pzc-mando: var(--pz-accion);
  --pzc-foco: var(--pz-foco);
  --pzc-velo: rgb(255 255 255 / 0.9);
}

/* 1 · Ayudas pequeñas ---------------------------------------------------- */
/* Pie discreto: «Imagen ilustrativa» / "Illustrative image" */
.pz-nota { margin: 0; font-family: var(--pz-fuente); font-size: 0.8125rem; line-height: 1.4; color: var(--pzc-suave); }
/* Enlace de idioma «EN» / «ES» de la cabecera (blanco táctil de 44 px; toma el color del texto de alrededor) */
.pz-idioma {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.6rem;
  border-radius: var(--pz-radio-boton); box-shadow: inset 0 0 0 1px currentColor;
  font-family: var(--pz-fuente); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1;
  color: inherit; text-decoration: none; transition: background-color 0.2s ease;
}
.pz-idioma:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.pz-idioma:active { transform: translateY(1px); background: color-mix(in srgb, currentColor 20%, transparent); }
/* Anillo de foco de todas las piezas (y del enlace de idioma) */
:is(.pz-video, .pz-video-dlg, .pz-cinta, .pz-escena, .pz-qr, .pz-idioma) :focus-visible,
:is(.pz-video, .pz-idioma):focus-visible {
  outline: 3px solid var(--pzc-foco); outline-offset: var(--pz-foco-separacion); box-shadow: var(--pz-foco-halo);
}
.pz-video-dlg :focus-visible { outline-color: var(--pz-foco-oscuro); }
/* Solo para lectores de pantalla */
.pz-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 2 · Video corporativo: tarjeta (arriba a la derecha de la portada) ------- */
.pz-video {
  position: relative; display: block; width: 100%; max-width: 36rem; padding: 6px;
  border-radius: calc(var(--pz-radio) * 1.5); background: var(--pzc-tarjeta);
  box-shadow: inset 0 0 0 1px var(--pzc-linea), 0 28px 56px -32px rgb(0 0 0 / 0.55);
  font-family: var(--pz-fuente); color: var(--pzc-tinta); text-decoration: none; isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.pz-video:hover { color: var(--pzc-tinta); text-decoration: none; }
/* Al pasar o con el teclado: un anillo de 2 px del color de acción del sitio (blanco sobre fondo oscuro); sin mover nada */
.pz-video:is(:hover, :focus-visible) { box-shadow: 0 0 0 2px var(--pzc-mando), 0 28px 56px -32px rgb(0 0 0 / 0.55); }
@media (prefers-reduced-motion: no-preference) { .pz-video { transition: box-shadow 0.2s ease; } }
.pz-video__foto {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--pz-radio);
  background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--pz-acento) 30%, transparent), transparent 60%), linear-gradient(140deg, var(--pz-oscuro), var(--pz-oscuro-2));
}
.pz-video__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--pz-ease); }
/* Póster que todavía no llegó al servidor: queda el fondo de la marca con el botón (nada roto) */
.pz-video.is-sin-poster .pz-video__foto img { visibility: hidden; }
.pz-video__play {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--pz-accion); color: var(--pz-sobre-accion);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.28), 0 8px 22px -6px rgb(0 0 0 / 0.65);
  transition: transform 0.2s var(--pz-ease), background-color 0.2s ease;
}
.pz-video__play svg { width: 1.5rem; height: 1.5rem; margin-left: 3px; fill: currentColor; }
.pz-video__play::after { /* el anillo que invita a reproducir: late DOS veces y se queda quieto (< 5 s) */
  content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85); opacity: 0; pointer-events: none;
}
.pz-video__dura {
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 1; padding: 0.15rem 0.55rem; border-radius: var(--pz-radio-pastilla);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.45; font-variant-numeric: tabular-nums;
  color: #fff; background: rgb(0 0 0 / 0.72); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}
.pz-video__texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.65rem; padding: 0.65rem 0.6rem 0.35rem; }
.pz-video__rotulo { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; color: var(--pzc-acento-texto); }
.pz-video__titulo {
  font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); line-height: 1.2; color: var(--pzc-tinta);
}
.pz-video:hover .pz-video__play, .pz-video:focus-visible .pz-video__play { transform: scale(1.08); background: var(--pz-accion-hover); }
.pz-video:hover .pz-video__foto img, .pz-video:focus-visible .pz-video__foto img { transform: scale(1.04); }
.pz-video:active .pz-video__play { transform: scale(0.96); }
@media (prefers-reduced-motion: no-preference) {
  .pz-video__play::after { animation: pz-late 2.2s ease-out 1s 2; }
}
@keyframes pz-late { 0% { opacity: 0.9; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .pz-video__foto img, .pz-video__play { transition: none; }
  .pz-video:hover .pz-video__foto img, .pz-video:focus-visible .pz-video__foto img,
  .pz-video:hover .pz-video__play, .pz-video:focus-visible .pz-video__play, .pz-video:active .pz-video__play { transform: none; }
}
@media print { .pz-video { display: none; } }

/* 2b · El reproductor: un <dialog> que arma piezas.js (siempre oscuro) */
.pz-video-dlg {
  --pz-pie: 4.25rem;
  width: min(100vw - 2rem, 76rem, (100svh - 7rem - var(--pz-pie)) * 16 / 9); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0; background: none; color: var(--pz-sobre-oscuro); overflow: visible; font-family: var(--pz-fuente);
}
.pz-video-dlg::backdrop { background: rgb(0 0 0 / 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html:has(.pz-video-dlg[open]) { overflow: hidden; }
.pz-video-dlg__caja {
  overflow: hidden; border-radius: var(--pz-radio); background: linear-gradient(var(--pz-oscuro), var(--pz-oscuro-2));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 40px 120px -30px rgb(0 0 0 / 0.9);
}
.pz-video-dlg__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.5rem 0.5rem 1.25rem; }
.pz-video-dlg__titulo {
  margin: 0; font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); line-height: 1.2; color: var(--pz-sobre-oscuro);
}
.pz-video-dlg__cerrar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / 0.08); color: var(--pz-sobre-oscuro); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.pz-video-dlg__cerrar svg { width: 22px; height: 22px; }
.pz-video-dlg__cerrar:hover { background: rgb(255 255 255 / 0.16); }
.pz-video-dlg__cerrar:active { transform: scale(0.94); }
.pz-video-dlg__pantalla { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pz-video-dlg__pantalla video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pz-video-dlg__pantalla video[hidden] { display: none; }
.pz-video-dlg__aviso {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.75rem; margin: 0; padding: 1.5rem;
  text-align: center; text-wrap: balance; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.45; color: var(--pz-sobre-oscuro);
  background: radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--pz-acento) 18%, transparent), transparent 70%), var(--pz-oscuro-2);
}
.pz-video-dlg__aviso[hidden] { display: none; }
/* Teléfono en vertical: una línea tranquila arriba del video sugiere girarlo (se va sola a los 4 s o al girar) */
.pz-video-dlg__pantalla:fullscreen { aspect-ratio: auto; }
.pz-video-dlg__girar {
  position: absolute; top: 0.75rem; left: 0; right: 0; z-index: 2; width: fit-content; max-width: calc(100% - 1.5rem); margin: 0 auto; padding: 0.45rem 0.9rem;
  border-radius: var(--pz-radio-pastilla); font-family: var(--pz-fuente); font-size: 0.875rem; font-weight: 600; line-height: 1.3; text-align: center;
  color: #fff; background: rgb(0 0 0 / 0.72); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); pointer-events: none;
}
.pz-video-dlg__girar[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .pz-video-dlg__girar:not([hidden]) { animation: pz-aparecer 0.3s ease both; } }
/* Franja bajo el video: «<llamado del sitio>» y «Ver de nuevo» al terminar. Siempre ocupa su alto: el video no salta. */
.pz-video-dlg__pie { display: flex; align-items: center; justify-content: center; height: var(--pz-pie); padding-inline: 0.75rem; }
.pz-video-dlg__fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }
.pz-video-dlg__fin[hidden] { display: none; }
.pz-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 46px; padding: 0 1.25rem;
  border: 0; border-radius: var(--pz-radio-boton); cursor: pointer; text-decoration: none;
  font-family: var(--pz-fuente); font-size: 1rem; font-weight: 600; line-height: 1.2;
  background: var(--pz-accion); color: var(--pz-sobre-accion); transition: background-color 0.2s ease, transform 0.15s ease;
}
.pz-boton:hover { background: var(--pz-accion-hover); color: var(--pz-sobre-accion); text-decoration: none; }
.pz-boton:active { transform: translateY(1px); background: var(--pz-accion-hover); filter: brightness(0.92); }
.pz-boton--borde { background: transparent; color: var(--pzc-tinta); box-shadow: inset 0 0 0 1.5px var(--pzc-linea); }
.pz-video-dlg .pz-boton--borde { color: var(--pz-sobre-oscuro); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5); }
/* el de borde se LLENA del color de acción al pasar (regla de color de los cuatro sitios) */
.pz-boton--borde:hover, .pz-video-dlg .pz-boton--borde:hover { background: var(--pz-accion); color: var(--pz-sobre-accion); box-shadow: inset 0 0 0 1.5px var(--pz-accion); }
@media (prefers-reduced-motion: no-preference) {
  .pz-video-dlg[open] { animation: pz-dlg-entra 0.32s var(--pz-ease) both; }
  .pz-video-dlg[open]::backdrop { animation: pz-dlg-fondo 0.24s ease both; }
  .pz-video-dlg__fin:not([hidden]) { animation: pz-dlg-entra 0.32s var(--pz-ease) both; }
}
@keyframes pz-dlg-entra { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes pz-dlg-fondo { from { opacity: 0; } }
@media (max-width: 600px) {
  .pz-video-dlg { width: calc(100vw - 1rem); }
  .pz-video-dlg__cab { padding-left: 1rem; }
}

/* 3 · Cinta de soluciones ------------------------------------------------- */
.pz-cinta {
  --pz-cinta-w: 280px; --pz-cinta-gap: 16px; --pz-cinta-max: 1200px; --pz-cinta-margen: 20px;
  --pz-cinta-pad: max(var(--pz-cinta-margen), calc((100% - var(--pz-cinta-max)) / 2));
  --pz-cinta-borde: clamp(1rem, 6vw, 6rem);
  position: relative; padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) clamp(1rem, 0.8rem + 1vw, 1.75rem);
  background: var(--pzc-fondo); color: var(--pzc-texto); font-family: var(--pz-fuente);
}
.pz-cinta__cab {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem;
  width: min(100% - 2 * var(--pz-cinta-margen), var(--pz-cinta-max)); margin: 0 auto clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
}
.pz-cinta { --pzk: var(--pz-cinta-acento, var(--pzc-acento-texto)); --pzt: var(--pz-cinta-tinta, var(--pzc-tinta)); }
.pz-cinta__ceja { margin: 0 0 0.35rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pzk); }
.pz-cinta__titulo {
  margin: 0; max-width: 36ch; text-wrap: balance; font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo);
  text-transform: var(--pz-mayus-titulo); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.15; color: var(--pzt);
}
.pz-cinta__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.pz-cinta__pausa {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 36px; padding: 0 1rem 0 0.9rem; border: 0; border-radius: var(--pz-radio-pastilla); cursor: pointer;
  font-family: var(--pz-fuente); font-size: 0.875rem; font-weight: 600; line-height: 1; color: var(--pzc-mando);
  /* mando tranquilo: contorno, nunca lleno (no compite con el llamado principal de la página) */
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--pzc-mando); transition: background-color 0.2s ease, transform 0.15s ease;
}
/* blanco táctil de 44 px aunque se vea de 36 */
.pz-cinta__pausa::after, .pz-escena__mando::after { content: ""; position: absolute; inset: -4px 0; }
.pz-cinta__pausa[hidden] { visibility: hidden; } /* guarda su lugar: nada se corre cuando aparece */
.pz-cinta__pausa:hover { background: color-mix(in srgb, var(--pzc-mando) 12%, transparent); }
.pz-cinta__pausa:active { transform: translateY(1px); background: color-mix(in srgb, var(--pzc-mando) 22%, transparent); }
.pz-cinta__pausa::before { /* dos barras = pausar */
  content: ""; flex: none; width: 10px; height: 12px; box-sizing: border-box; border-inline: 3.5px solid currentColor;
}
.pz-cinta.is-pausada .pz-cinta__pausa::before { /* triángulo = reanudar */
  width: 0; height: 0; border-block: 6px solid transparent; border-inline: 0; border-left: 10px solid currentColor;
}
.pz-cinta__todas { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--pzk); text-decoration: underline; text-underline-offset: 0.2em; }
.pz-cinta__todas:hover { color: var(--pzt); }

.pz-cinta__vista {
  position: relative; overflow-x: auto; overflow-y: hidden; padding: 10px var(--pz-cinta-pad) 18px; scroll-padding-inline: var(--pz-cinta-pad);
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pz-cinta__vista::-webkit-scrollbar { display: none; }
.pz-cinta__pista { display: flex; gap: var(--pz-cinta-gap); width: max-content; margin: 0; padding: 0; list-style: none; }
.pz-cinta__item { flex: none; width: var(--pz-cinta-w); margin: 0; scroll-snap-align: start; }
.pz-cinta__tarjeta {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--pz-radio);
  background: var(--pzc-tarjeta); box-shadow: inset 0 0 0 1px var(--pzc-linea), 0 14px 30px -24px rgb(0 0 0 / 0.5);
  color: var(--pzt); text-decoration: none; transition: transform 0.25s var(--pz-ease), box-shadow 0.25s ease;
}
.pz-cinta__tarjeta:hover { color: var(--pzt); text-decoration: none; }
.pz-cinta__tarjeta:focus-visible { outline-offset: 3px; }
.pz-cinta__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(150deg, var(--pz-oscuro), var(--pz-oscuro-2)); }
.pz-cinta__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 0.7s var(--pz-ease); -webkit-user-drag: none; }
.pz-cinta__cuerpo { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem 1.05rem; box-shadow: inset 0 2px 0 var(--pz-cinta-acento, var(--pz-accion)); }
.pz-cinta__nombre {
  font-family: var(--pz-cinta-fuente, var(--pz-fuente-titulo)); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo);
  font-size: 1.0625rem; line-height: 1.25; color: var(--pzt); text-wrap: balance;
}
.pz-cinta__linea { font-size: 0.9375rem; line-height: 1.45; color: var(--pzc-texto); }
.pz-cinta__ir { margin-top: auto; padding-top: 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--pzk); }
.pz-cinta__ir::after { content: " →"; }
/* Tarjeta DIBUJADA (mientras no haya foto real): el ícono de la solución en un círculo de 104 px sobre el degradado
   de la marca con una retícula tenue. No lleva «Imagen ilustrativa»: no es una foto. */
.pz-cinta__foto--dibujo {
  display: grid; place-items: center;
  background:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(80% 70% at 30% 20%, color-mix(in srgb, var(--pz-acento) 26%, transparent), transparent 70%),
    linear-gradient(150deg, var(--pz-oscuro), var(--pz-oscuro-2));
}
.pz-cinta__dibujo {
  display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; color: var(--pz-sobre-oscuro);
  background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 2px var(--pz-acento), 0 0 0 10px rgb(255 255 255 / 0.04);
}
.pz-cinta__dibujo .pz-icono { width: 48px; height: 48px; stroke-width: 1.5; }
/* Chip opcional sobre la foto: la familia («Seguridad») o la empresa con su punto de color */
.pz-cinta__chip {
  position: absolute; left: 0.6rem; top: 0.6rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem;
  max-width: calc(100% - 1.2rem); padding: 0.2rem 0.6rem; border-radius: var(--pz-radio-pastilla);
  font-size: 0.8125rem; font-weight: 700; line-height: 1.4; color: #fff; background: rgb(0 0 0 / 0.72); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
} /* 13 px (mínimo); blanco sobre negro 72 %: ≥ 9:1 aun sobre una foto blanca */
.pz-cinta__chip[data-punto]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--punto, var(--pz-acento)); }
.pz-cinta__nota { width: min(100% - 2 * var(--pz-cinta-margen), var(--pz-cinta-max)); margin: 0 auto; }
.pz-cinta__nota[data-pz-nota="ilustrativa"] { display: var(--pz-nota-ilustrativa, block); }
@media (hover: hover) {
  .pz-cinta__tarjeta:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--pzc-acento), 0 22px 36px -24px rgb(0 0 0 / 0.55); }
  .pz-cinta__tarjeta:hover .pz-cinta__foto img { transform: scale(1.045); }
}
/* Con movimiento (piezas.js pone .is-viva): bordes que se desvanecen, sin barra */
.pz-cinta.is-viva .pz-cinta__vista {
  overflow: hidden; overflow: clip; scroll-snap-type: none; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pz-cinta-borde), #000 calc(100% - var(--pz-cinta-borde)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--pz-cinta-borde), #000 calc(100% - var(--pz-cinta-borde)), transparent 100%);
}
.pz-cinta.is-viva .pz-cinta__pista { will-change: transform; }
.pz-cinta.is-arrastrando .pz-cinta__vista { cursor: grabbing; }
.pz-cinta.is-arrastrando .pz-cinta__tarjeta { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  /* Fila quieta: con ratón hace falta ver por dónde se desliza */
  .pz-cinta__vista { scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pzc-tinta) 30%, transparent) transparent; }
  .pz-cinta__vista::-webkit-scrollbar { display: block; height: 6px; }
  .pz-cinta__vista::-webkit-scrollbar-thumb { border-radius: 3px; background: color-mix(in srgb, var(--pzc-tinta) 30%, transparent); }
  .pz-cinta__tarjeta, .pz-cinta__foto img { transition: none; }
  .pz-cinta__tarjeta:hover, .pz-cinta__tarjeta:hover .pz-cinta__foto img { transform: none; }
}
@media (max-width: 600px) {
  .pz-cinta { --pz-cinta-w: 240px; --pz-cinta-gap: 12px; }
  .pz-cinta__cab { align-items: flex-start; }
  .pz-cinta__acciones { width: 100%; justify-content: space-between; }
  .pz-cinta__cuerpo { padding: 0.8rem 0.85rem 0.95rem; }
  .pz-cinta__nombre { font-size: 1rem; }
}
@media print {
  .pz-cinta__pausa { display: none !important; }
  .pz-cinta__vista { overflow: visible; }
  .pz-cinta__pista { flex-wrap: wrap; width: auto; }
  .pz-cinta__item { width: 30%; }
}

/* 4 · Escenas animadas (motor genérico) ----------------------------------
   Los tiempos son los de las «Escenas ATG» del sitio del grupo (experto de animación, ronda 1):
   paso 850 ms (1300 en celular) · trazo 900 ms cubic-bezier(.45,0,.2,1) con 250 ms de demora ·
   entrada de punto 500 ms cubic-bezier(.2,1.4,.3,1) · luz 2.2 s.
   REGLA DE ORO: el TEXTO nunca se esconde. Solo se dibujan líneas, se encienden marcas y entran
   puntos/figuras del dibujo. Sin JS o con «reducir movimiento»: el cuadro final, todo dibujado y quieto. */
.pz-escena {
  --pz-ritmo: 850ms; --pz-viaje: 2.2s; --pz-vueltas: 1; --pz-estado: paused;
  --pz-curva-trazo: cubic-bezier(0.45, 0, 0.2, 1); --pz-dur-trazo: 900ms; --pz-demora-trazo: 250ms;
  --pz-curva-punto: cubic-bezier(0.2, 1.4, 0.3, 1); --pz-dur-punto: 500ms;
  position: relative; margin: 0; padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); border-radius: calc(var(--pz-radio) * 1.3);
  background: var(--pzc-fondo); color: var(--pzc-texto); font-family: var(--pz-fuente);
  box-shadow: inset 0 0 0 1px var(--pzc-linea);
}
@media (max-width: 700px) { .pz-escena { --pz-ritmo: 1300ms; } }
.pz-escena--suelta { padding: 0; border-radius: 0; background: none; box-shadow: none; } /* sin caja propia: sobre el fondo de la sección */
.pz-escena svg { overflow: visible; }
.pz-escena__titulo {
  margin: 0 0 0.35rem; font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.2; color: var(--pzc-tinta);
}
.pz-escena__bajada { margin: 0 0 clamp(1rem, 0.7rem + 1.2vw, 1.75rem); max-width: 62ch; line-height: 1.55; color: var(--pzc-texto); }
/* Pie: la nota a la izquierda y los mandos (los pone piezas.js) a la derecha. Siempre mide 44 px: nada salta. */
.pz-escena__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 44px; margin-top: 1rem; }
.pz-escena__mandos { display: flex; gap: 0.5rem; margin-left: auto; min-height: 44px; }
.pz-escena__mando {
  position: relative; align-self: center; min-width: 44px; min-height: 36px; padding: 0 1rem; border: 0; border-radius: var(--pz-radio-pastilla); cursor: pointer;
  font-family: var(--pz-fuente); font-size: 0.875rem; font-weight: 600; line-height: 1; color: var(--pzc-mando);
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--pzc-mando); transition: background-color 0.2s ease, transform 0.15s ease;
}
.pz-escena__mando[hidden] { display: none; }
.pz-escena__mando:hover { background: color-mix(in srgb, var(--pzc-mando) 12%, transparent); }
.pz-escena__mando:active { transform: translateY(1px); background: color-mix(in srgb, var(--pzc-mando) 22%, transparent); }
.pz-icono { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* «Imagen ilustrativa» de la cinta y de la escena: el tema de ADVSYSA lo apaga (--pz-nota-ilustrativa: none) */
.pz-nota[data-pz-nota="ilustrativa"] { display: var(--pz-nota-ilustrativa, block); }

/* La luz viajera no existe sin JS ni con «reducir movimiento» (salvo la que «queda» al final: el vehículo en su meta) */
.pz-escena [data-pz-pulso]:not([data-pz-pulso="queda"]) { visibility: hidden; }
.pz-escena :is(path, line, polyline, circle, rect)[data-pz-pulso="queda"] { stroke-dasharray: 0.07 2; stroke-dashoffset: -0.93; }

@media (prefers-reduced-motion: no-preference) {
  /* Armada (piezas.js): cada pieza espera su turno; --pz-estado la pone en marcha o la frena */
  .pz-escena.is-viva { --pz-estado: running; }
  .pz-escena.is-viva.is-quieta { --pz-estado: paused; }
  .pz-escena.is-armada [data-pz-paso] {
    animation-duration: 0.6s; animation-timing-function: ease-out; animation-fill-mode: both; animation-iteration-count: 1;
    animation-delay: calc(var(--pz-i, 0) * var(--pz-ritmo)); animation-play-state: var(--pz-estado);
  }
  .pz-escena.is-armada :is(g, path, line, polyline, polygon, circle, ellipse, rect, text, use)[data-pz-paso] { transform-box: fill-box; transform-origin: 50% 50%; }
  /* Figuras y puntos del DIBUJO (nunca texto): entran */
  .pz-escena.is-armada [data-pz-entra="crecer"] { animation-name: pz-crecer; animation-duration: var(--pz-dur-punto); animation-timing-function: var(--pz-curva-punto); }
  .pz-escena.is-armada [data-pz-entra="aparecer"] { animation-name: pz-aparecer; animation-duration: 0.3s; }
  /* Bloques CON texto (las capas): solo bajan a su lugar; nunca se esconden */
  .pz-escena.is-armada [data-pz-entra="asentar"] { animation-name: pz-asentar; animation-duration: 0.5s; animation-timing-function: var(--pz-curva-punto); }
  .pz-escena.is-armada .pz-mapa__vehiculo[data-pz-pulso] { stroke-dasharray: 0.0001 2; animation-name: pz-vehiculo; animation-iteration-count: 1; }
  /* un solo vehículo a la vista: el de cada tramo aparece al salir y se va al llegar; el del último tramo se queda */
  .pz-escena.is-armada .pz-mapa__vehiculo[data-pz-pulso]:not(:last-of-type) { animation-name: pz-vehiculo-pasa; }
  /* Late una vez (sin esconderse): el número o el nodo que «recibe» la señal */
  .pz-escena.is-armada [data-pz-entra="latir"] { animation-name: pz-latir; animation-duration: 0.6s; animation-delay: calc(var(--pz-i, 0) * var(--pz-ritmo) + var(--pz-demora-trazo)); }
  /* Líneas: un trazo SVG que se dibuja, o una línea HTML que se extiende */
  .pz-escena.is-armada [data-pz-entra="trazar"] {
    animation-name: pz-trazar-x; animation-duration: var(--pz-dur-trazo); animation-timing-function: var(--pz-curva-trazo);
    animation-delay: calc(var(--pz-i, 0) * var(--pz-ritmo) + var(--pz-demora-trazo));
  }
  .pz-escena.is-armada [data-pz-entra="trazar"][data-pz-eje="y"] { animation-name: pz-trazar-y; }
  .pz-escena.is-armada :is(svg, g)[data-pz-entra="dibujar"] { animation-name: none; }
  .pz-escena.is-armada [data-pz-entra="dibujar"]:is(path, line, polyline, polygon, circle, ellipse, rect),
  .pz-escena.is-armada [data-pz-entra="dibujar"] :is(path, line, polyline, polygon, circle, ellipse, rect) {
    stroke-dasharray: 1 1; animation: pz-dibujar var(--pz-dur-trazo) var(--pz-curva-trazo) both;
    animation-delay: calc(var(--pz-i, 0) * var(--pz-ritmo) + var(--pz-demora-trazo)); animation-play-state: var(--pz-estado);
  }
  /* La luz: por omisión corre JUNTO con el trazo y se apaga al llegar; ="queda" se queda en la meta (un vehículo);
     ="viaje" recorre la línea ya dibujada --pz-vueltas veces (cada una --pz-viaje). En HTML recorre el ancho de su padre
     (data-pz-eje="y": el alto). */
  .pz-escena.is-armada [data-pz-pulso] {
    visibility: visible; animation-name: pz-pulso-x; animation-duration: var(--pz-dur-trazo); animation-timing-function: var(--pz-curva-trazo);
    animation-delay: calc(var(--pz-i, 0) * var(--pz-ritmo) + var(--pz-demora-trazo)); animation-iteration-count: 1;
    animation-fill-mode: both; animation-play-state: var(--pz-estado);
  }
  .pz-escena.is-armada [data-pz-pulso][data-pz-eje="y"] { animation-name: pz-pulso-y; }
  .pz-escena.is-armada [data-pz-pulso="viaje"] {
    animation-duration: var(--pz-viaje); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); animation-iteration-count: var(--pz-vueltas);
    animation-delay: calc(var(--pz-i, 0) * var(--pz-ritmo) + var(--pz-demora-trazo) + var(--pz-dur-trazo));
  }
  .pz-escena.is-armada :is(path, line, polyline, circle, rect)[data-pz-pulso] { stroke-dasharray: 0.07 2; stroke-dashoffset: 0.07; fill: none; animation-name: pz-pulso-trazo; }
  .pz-escena.is-armada :is(path, line, polyline, circle, rect)[data-pz-pulso="queda"] { animation-name: pz-pulso-queda; }
  .pz-escena.is-armada :is(path, line, polyline, circle, rect)[data-pz-pulso="viaje"] { animation-name: pz-pulso-viaje; }
  /* Fin de vuelta en modo «ciclo»: las líneas y luces se apagan 600 ms antes de volver a empezar */
  .pz-escena.is-apagando :is([data-pz-entra="dibujar"], [data-pz-entra="trazar"], [data-pz-pulso]) { opacity: 0; transition: opacity 0.6s ease; }
  .pz-escena.is-reinicio, .pz-escena.is-reinicio * { animation: none !important; transition: none !important; }
}
@keyframes pz-aparecer { from { opacity: 0; transform: translateY(6px); } }
@keyframes pz-crecer { from { opacity: 0; transform: scale(0.4); } }
@keyframes pz-asentar { from { transform: translateY(-12px); } }
@keyframes pz-vehiculo { 0% { stroke-dashoffset: 0; opacity: 0; } 5% { opacity: 1; } 100% { stroke-dashoffset: -0.9999; opacity: 1; } }
@keyframes pz-vehiculo-pasa { 0% { stroke-dashoffset: 0; opacity: 0; } 5% { opacity: 1; } 94% { opacity: 1; } 100% { stroke-dashoffset: -0.9999; opacity: 0; } }
@keyframes pz-latir { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes pz-trazar-x { from { transform: scaleX(0); } }
@keyframes pz-trazar-y { from { transform: scaleY(0); } }
@keyframes pz-dibujar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pz-pulso-trazo { 0% { stroke-dashoffset: 0.07; opacity: 0; } 6%, 85% { opacity: 1; } 100% { stroke-dashoffset: -0.93; opacity: 0; } }
@keyframes pz-pulso-queda { from { stroke-dashoffset: 0.07; } to { stroke-dashoffset: -0.93; } }
@keyframes pz-pulso-viaje { 0% { stroke-dashoffset: 0.07; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -0.93; opacity: 0; } }
@keyframes pz-pulso-x { 0% { transform: translateX(0); opacity: 0; } 6%, 85% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes pz-pulso-y { 0% { transform: translateY(0); opacity: 0; } 6%, 85% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes pz-anillo { from { opacity: 0.6; transform: scale(0.6); } to { opacity: 0; transform: scale(1.35); } }

/* Marcas que se encienden (data-pz-marca): piezas.js les pone .is-pz-apagado al empezar y se lo quita en su turno.
   Encendida es el estado normal (sin JS, con «reducir movimiento» y al final). Cada sitio puede estilar las suyas;
   abajo, las de los tres patrones. */

/* 4a · Patrón «flujo»: 3 a 5 pasos unidos por una línea que se traza y una luz que la recorre */
.pz-flujo { --pz-nodo: 64px; --pz-col-gap: 1.25rem; }
.pz-flujo__pasos { display: grid; grid-template-columns: repeat(var(--pz-n, 4), minmax(0, 1fr)); column-gap: var(--pz-col-gap); row-gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.pz-flujo__paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin: 0; text-align: center; }
/* El nodo: aro del color de acento; encendido = lleno */
.pz-flujo__nodo {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--pz-nodo); height: var(--pz-nodo); margin-bottom: 0.5rem;
  border-radius: 50%; color: var(--pz-sobre-accion); background: var(--pzc-fondo); box-shadow: inset 0 0 0 2px var(--pzc-acento);
}
.pz-flujo__nodo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pz-accion); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pzc-acento) 18%, transparent); transition: opacity 0.4s ease; }
.pz-flujo__nodo::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 0 2px var(--pzc-acento); opacity: 0; pointer-events: none; }
.pz-flujo__nodo .pz-icono { position: relative; width: 28px; height: 28px; transition: color 0.4s ease; }
.pz-flujo__nodo.is-pz-apagado { color: var(--pzc-acento); }
.pz-flujo__nodo.is-pz-apagado::before { opacity: 0; }
.pz-flujo__n {
  position: absolute; top: -4px; right: -6px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 0.75rem; font-weight: 700; line-height: 1; color: var(--pzc-tinta); background: var(--pzc-fondo); box-shadow: inset 0 0 0 1.5px var(--pzc-acento);
}
.pz-flujo__titulo { font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo); font-size: 1.0625rem; line-height: 1.25; color: var(--pzc-tinta); }
.pz-flujo__texto { max-width: 26ch; font-size: 0.9375rem; line-height: 1.5; color: var(--pzc-texto); }
/* La unión hacia el nodo siguiente y su luz: van DENTRO del paso, una al lado de la otra (misma caja);
   el último paso no las lleva */
.pz-flujo__union, .pz-flujo__luz {
  position: absolute; z-index: 0; top: calc(var(--pz-nodo) / 2 - 1px); left: calc(50% + var(--pz-nodo) / 2 + 8px);
  width: calc(100% + var(--pz-col-gap) - var(--pz-nodo) - 16px); height: 2px; pointer-events: none;
}
.pz-flujo__union { border-radius: 2px; transform-origin: 0 50%; background: var(--pzc-acento); }
.pz-flujo__luz { z-index: 1; }
.pz-flujo__paso:last-child :is(.pz-flujo__union, .pz-flujo__luz) { display: none; }
.pz-flujo__luz::before {
  content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pzc-fondo); box-shadow: inset 0 0 0 3px var(--pzc-acento), 0 0 12px 2px var(--pzc-acento);
}
@media (max-width: 760px) {
  /* Celular: los pasos en columna, el nodo a la izquierda; la unión baja hasta el nodo siguiente */
  .pz-flujo { --pz-nodo: 52px; }
  .pz-flujo__pasos { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .pz-flujo__paso { display: grid; grid-template-columns: var(--pz-nodo) minmax(0, 1fr); column-gap: 1rem; row-gap: 0.2rem; align-items: start; text-align: left; }
  .pz-flujo__nodo { grid-row: 1 / span 2; margin: 0; }
  .pz-flujo__nodo .pz-icono { width: 24px; height: 24px; }
  .pz-flujo__titulo { grid-column: 2; padding-top: 0.35rem; }
  .pz-flujo__texto { grid-column: 2; max-width: none; }
  /* lo que el sitio sume al paso (un enlace, un pie): también en la columna del texto, nunca bajo el icono */
  .pz-flujo__paso > :not(.pz-flujo__nodo, .pz-flujo__union, .pz-flujo__luz) { grid-column: 2; }
  .pz-flujo__union, .pz-flujo__luz { top: calc(var(--pz-nodo) + 6px); bottom: calc(-1.75rem + 6px); left: calc(var(--pz-nodo) / 2 - 1px); width: 2px; height: auto; }
  .pz-flujo__union { transform-origin: 50% 0; }
  .pz-flujo__luz::before { left: -4px; top: -5px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .pz-escena.is-armada .pz-flujo__union[data-pz-entra="trazar"] { animation-name: pz-trazar-y; }
  .pz-escena.is-armada .pz-flujo__luz[data-pz-pulso] { animation-name: pz-pulso-y; }
}
@media (prefers-reduced-motion: no-preference) {
  .pz-escena.is-viva .pz-flujo__nodo:not(.is-pz-apagado)::after { animation: pz-anillo 0.6s ease-out both; animation-play-state: var(--pz-estado); }
}

/* 4b · Patrón «mapa»: un mapa sencillo de Panamá, una ruta que se dibuja y puntos que entran, con su leyenda */
.pz-mapa__cuerpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 1fr); gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); align-items: center; }
.pz-mapa__svg { display: block; width: 100%; height: auto; aspect-ratio: 800 / 380; }
.pz-mapa__tierra { fill: color-mix(in srgb, var(--pzc-tinta) 7%, var(--pzc-tarjeta)); stroke: color-mix(in srgb, var(--pzc-tinta) 32%, transparent); stroke-width: 1.25; stroke-linejoin: round; }
.pz-mapa__mar { stroke: color-mix(in srgb, var(--pzc-tinta) 7%, transparent); stroke-width: 1; }
.pz-mapa__ruta { fill: none; stroke: var(--pz-accion); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pz-oscuro .pz-mapa__ruta { stroke: var(--pzc-acento); }
/* El vehículo: un punto (trazo de largo cero con punta redonda) que viaja con la ruta y se queda en la meta.
   Grande y con halo (13-nov): se ve sobre la tierra y sobre la ruta, también en el celular (≥14 px en pantalla). */
.pz-escena .pz-mapa__vehiculo[data-pz-pulso] {
  fill: none; stroke: var(--pzc-tinta); stroke-width: 22; stroke-linecap: round; stroke-dasharray: 0.0001 2; stroke-dashoffset: -0.9999;
  filter: drop-shadow(0 0 1.5px var(--pzc-fondo)) drop-shadow(0 0 1.5px var(--pzc-fondo)) drop-shadow(0 0 5px color-mix(in srgb, var(--pz-accion) 60%, transparent));
}
/* Cuadro final (y «reducir movimiento»): solo el vehículo del último tramo, en la meta. Los vehículos van después
   de las rutas y el último es el último <path> del dibujo. */
.pz-escena .pz-mapa__vehiculo[data-pz-pulso]:not(:last-of-type) { opacity: 0; }
.pz-mapa__pin { fill: var(--pz-accion); stroke: var(--pzc-acento); stroke-width: 3; transition: fill 0.4s ease; }
.pz-mapa__aro { fill: none; stroke: var(--pzc-acento); stroke-width: 2; opacity: 0.55; }
.pz-mapa__punto text { font-family: var(--pz-fuente); font-size: 15px; font-weight: 700; fill: var(--pzc-tinta); paint-order: stroke; stroke: var(--pzc-fondo); stroke-width: 4px; stroke-linejoin: round; }
.pz-mapa__punto .pz-mapa__num { font-size: 13px; fill: var(--pz-sobre-accion); stroke: none; text-anchor: middle; dominant-baseline: central; transition: fill 0.4s ease; }
.pz-mapa__punto.is-pz-apagado .pz-mapa__pin { fill: var(--pzc-fondo); }
.pz-mapa__punto.is-pz-apagado .pz-mapa__num { fill: var(--pzc-tinta); }
.pz-mapa__leyenda { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.pz-mapa__leyenda li { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; margin: 0; }
.pz-mapa__marca {
  position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-size: 0.875rem; font-weight: 700; color: var(--pz-sobre-accion); background: var(--pz-accion); box-shadow: inset 0 0 0 2px var(--pz-accion);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.pz-mapa__marca.is-pz-apagado { background: transparent; color: var(--pzc-tinta); box-shadow: inset 0 0 0 2px var(--pzc-acento); }
.pz-mapa__leyenda strong { display: block; padding-top: 0.2rem; font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo); line-height: 1.25; color: var(--pzc-tinta); }
.pz-mapa__leyenda span:not(.pz-mapa__marca) { display: block; grid-column: 2; font-size: 0.9375rem; line-height: 1.45; color: var(--pzc-texto); }
/* .pz-mapa--en-ruta: cada momento se rotula EN la ruta, junto a su punto (el texto del rótulo = el de la leyenda);
   en pantalla ancha la leyenda queda solo para lectores de pantalla y el mapa toma todo el ancho. */
.pz-mapa--en-ruta .pz-mapa__punto .pz-mapa__rotulo { font-size: 18px; }
/* El dibujo se achica con su columna: en un mapa angosto (≤640 px) rótulos y vehículo crecen para seguir
   leyéndose (≥14 px en pantalla). Se mide el ancho del MAPA, no el de la ventana. */
.pz-mapa { container-type: inline-size; }
@container (max-width: 640px) {
  .pz-mapa--en-ruta .pz-mapa__punto .pz-mapa__rotulo { font-size: 23px; }
  .pz-escena .pz-mapa__vehiculo[data-pz-pulso] { stroke-width: 30; }
}
@media (min-width: 761px) {
  .pz-mapa--en-ruta .pz-mapa__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pz-mapa--en-ruta .pz-mapa__leyenda { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 760px) {
  .pz-mapa__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pz-mapa__punto .pz-mapa__rotulo { display: none; } /* en el celular el nombre va en la leyenda, con su número */
  .pz-escena .pz-mapa__vehiculo[data-pz-pulso] { stroke-width: 38; }
}

/* 4c · Patrón «capas»: bloques que se apilan (p. ej. sol → paneles → inversor → edificio) */
.pz-capas__lista { display: grid; gap: 1.75rem; max-width: 46rem; margin: 0 auto; padding: 0; list-style: none; }
.pz-capa {
  position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem; align-items: center; margin: 0 auto;
  width: 100%; padding: 0.9rem 1.1rem; border-radius: var(--pz-radio);
  background: var(--pzc-tarjeta); box-shadow: inset 0 0 0 1px var(--pzc-linea), inset 4px 0 0 var(--pz-accion), 0 16px 30px -26px rgb(0 0 0 / 0.55);
}
.pz-capa__icono { position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: calc(var(--pz-radio) - 2px); color: var(--pz-sobre-accion); background: var(--pz-accion); transition: background-color 0.4s ease, color 0.4s ease; }
.pz-capa__icono::after { content: ""; position: absolute; inset: -4px; border-radius: calc(var(--pz-radio) * 1.2); box-shadow: 0 0 0 2px var(--pzc-acento); opacity: 0; pointer-events: none; }
.pz-capa__icono.is-pz-apagado { color: var(--pzc-acento); background: color-mix(in srgb, var(--pzc-acento) 13%, transparent); }
.pz-capa__icono .pz-icono { width: 28px; height: 28px; }
.pz-capa__titulo { display: block; font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo); font-size: 1.0625rem; line-height: 1.25; color: var(--pzc-tinta); }
.pz-capa__texto { display: block; margin-top: 0.15rem; font-size: 0.9375rem; line-height: 1.45; color: var(--pzc-texto); }
/* La unión hacia la capa de abajo: una línea que baja y una luz que la recorre (la última capa no la lleva) */
.pz-capa__union, .pz-capa__luz { position: absolute; left: 50%; top: 100%; width: 2px; height: 1.75rem; margin-left: -1px; pointer-events: none; }
.pz-capa__union { background: var(--pzc-acento); transform-origin: 50% 0; }
.pz-capa:last-child :is(.pz-capa__union, .pz-capa__luz) { display: none; }
.pz-capa__luz::before { content: ""; position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--pzc-fondo); box-shadow: inset 0 0 0 3px var(--pzc-acento), 0 0 12px 2px var(--pzc-acento); }

/* Contadores (data-pz-contar): existen en el motor, pero las cifras aprobadas de los cuatro sitios NO se animan */
.pz-cifra { font-variant-numeric: tabular-nums; }

/* 5 · QR de Contacto ------------------------------------------------------- */
.pz-qr { font-family: var(--pz-fuente); color: var(--pzc-texto); }
.pz-qr__titulo { margin: 0; font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.2; color: var(--pzc-tinta); }
.pz-qr__intro { margin: 0.4rem 0 0; line-height: 1.5; color: var(--pzc-texto); }
/* Las medidas de cada código (píxeles ENTEROS por módulo) llegan como variables del bloque que arma qr.mjs:
   --qp2/--qp3 la placa, --qw2/--qw3 el dibujo y --qo2/--qo3 su sangría (2 px por módulo; 3 solo si la lista de códigos mide ≥ 650 px). */
/* --qz: blanco de más alrededor del dibujo, para que la esquina redondeada de la placa nunca muerda la zona de
   silencio de 4 módulos del código (la esquina entra 0,29 × su radio; radio de placa = 1,2 × --pz-radio) */
/* Las dos tarjetas van LADO A LADO desde 489 px de lista: la columna mínima se calcula SIEMPRE con la placa chica
   (--qp2) y la placa grande (--qp3) solo entra cuando la LISTA mide ≥ 650 px, que es lo que pide la más ancha
   (ADVSYSA: 255 + 2 × --qz + 40 de relleno + 5 de margen = 312 por columna). Con la vista ancha la lista va en media
   columna (592–620 px) y la placa grande la apilaba (20261113l). Sin consultas de contenedor: placa chica siempre. */
.pz-qr__codigos { --qp: var(--qp2); --qz: calc(var(--pz-radio) * 0.36 + 2px); container: pz-qr-codigos / inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--qp) + 2 * var(--qz) + 2.5rem)), 1fr)); gap: 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.pz-qr__item {
  --qw: var(--qw2); --qo: var(--qo2); --k: var(--pzc-acento);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; margin: 0; padding: 1.25rem; min-width: 0;
  border-radius: var(--pz-radio); background: var(--pzc-tarjeta); box-shadow: inset 0 0 0 1px var(--pzc-linea);
}
/* después de la regla base (misma especificidad: la que va última manda) */
@container pz-qr-codigos (min-width: 650px) { .pz-qr__item { --qp: var(--qp3); --qw: var(--qw3); --qo: var(--qo3); } }
.pz-qr__item--whatsapp { --k: var(--pz-whatsapp); }
.pz-qr__placa {
  position: relative; display: block; box-sizing: border-box; width: calc(var(--qp) + 2 * var(--qz)); height: calc(var(--qp) + 2 * var(--qz)); margin: 0.3rem 0 0.6rem 0.3rem;
  padding: calc(var(--qo) + var(--qz)) 0 0 calc(var(--qo) + var(--qz)); border-radius: calc(var(--pz-radio) * 1.2); background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 14px 28px -20px rgb(0 0 0 / 0.6);
}
.pz-qr__placa::before { /* esquinas de visor: «apunte la cámara aquí», sin tocar el código */
  content: ""; position: absolute; inset: -5px; border: 2.5px solid var(--k); border-radius: calc(var(--pz-radio) * 1.5); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 28px 28px no-repeat, linear-gradient(#000 0 0) 100% 0 / 28px 28px no-repeat, linear-gradient(#000 0 0) 0 100% / 28px 28px no-repeat, linear-gradient(#000 0 0) 100% 100% / 28px 28px no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 28px 28px no-repeat, linear-gradient(#000 0 0) 100% 0 / 28px 28px no-repeat, linear-gradient(#000 0 0) 0 100% / 28px 28px no-repeat, linear-gradient(#000 0 0) 100% 100% / 28px 28px no-repeat;
}
.pz-qr__codigo { display: block; width: var(--qw); height: var(--qw); }
.pz-qr__nombre { margin: 0; font-family: var(--pz-fuente-titulo); font-weight: var(--pz-peso-titulo); text-transform: var(--pz-mayus-titulo); font-size: 1.125rem; line-height: 1.25; color: var(--pzc-tinta); }
.pz-qr__nota { margin: 0; max-width: 34ch; font-size: 0.9375rem; line-height: 1.45; color: var(--pzc-texto); }
.pz-qr__datos { margin: 0.2rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--pzc-texto); }
.pz-qr__datos a { font-weight: 700; color: var(--pzc-tinta); text-decoration: underline; text-underline-offset: 0.18em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Dedo (celular o pantalla táctil): cada teléfono y el correo, 44 px de alto para tocar; la letra no cambia, solo
   se separan los renglones */
@media (max-width: 640px), (pointer: coarse) { .pz-qr__datos a { display: inline-flex; align-items: center; min-height: 44px; } } /* línea base: la de su rótulo */
.pz-qr__boton { margin-top: 0.35rem; }
.pz-qr__item--whatsapp .pz-qr__boton { background: var(--pz-whatsapp); color: var(--pz-whatsapp-texto); }
.pz-qr__item--whatsapp .pz-qr__boton:hover { background: color-mix(in srgb, var(--pz-whatsapp) 78%, #fff); color: var(--pz-whatsapp-texto); }
.pz-qr__item--whatsapp .pz-qr__boton:active { background: color-mix(in srgb, var(--pz-whatsapp) 90%, #000); }
.pz-qr__boton svg { width: 20px; height: 20px; fill: currentColor; }
.pz-qr__cel, .pz-qr__otro { display: none; }
@media (max-width: 640px) {
  /* Celular: nadie escanea su propia pantalla. Primero lo que se toca (botón, teléfonos); el código queda debajo para otro teléfono. */
  .pz-qr__item { display: grid; grid-template-columns: minmax(0, 1fr); }
  .pz-qr__nombre { order: 1; }
  .pz-qr__nota--compu { display: none; }
  .pz-qr__cel { display: block; order: 2; }
  .pz-qr__boton, .pz-qr__datos { order: 3; }
  .pz-qr__boton { justify-self: stretch; min-height: 52px; }
  .pz-qr__otro { order: 4; display: block; margin-top: 0.6rem; font-size: 0.875rem; color: var(--pzc-suave); }
  .pz-qr__placa { order: 5; }
}
@media print { .pz-qr__boton { display: none; } }