/* =====================================================================
   ing.cmae — esquemas.css · Galería «Esquemas de funcionamiento»
   Complemento de styles.css (usa sus variables de :root: --navy, --gold,
   --blue-l, --mono, --sans, --r, --shadow). Panel azul de plano dentro de
   la lámina de Servicios. Motor: js/esquemas.js, que pone:
     .esq[data-esq-ready]   motor activo   ·  .esq--rm  movimiento reducido
     .esq--single · .esq--many · .esq--off (dibujo fuera de pantalla) ·
     .esq--zoomed (página ampliada con los dedos)
     .esq-slide: .is-active · .is-leaving · .is-waiting · .is-entering
                 .is-playing · .is-settling
     .esq-play.is-on (reproducción pedida) · .esq-auto.is-on (rotación detenida)
   Sin JS: se ve el primer esquema estático con su pie; controles ocultos.
   ÍNDICE
     1. Panel y cabecera
     2. Diapositivas y fundido cruzado
     3. Escenario (SVG), aviso pulsante y barra de ciclo
     4. Trazado de entrada (líneas .ln) y retorno al plano
     5. Pie: título, subtítulo, pasos sincronizados y enlace
     6. Controles
     7. Escritorio (≥ 900 px)
     8. Pausa global, movimiento reducido, impresión y alto contraste
   ===================================================================== */

/* ---------------- 1. Panel y cabecera ---------------- */
.esq {
  --esq-ink: #cfe2f3;            /* trazo principal */
  --esq-mute: #7f95ab;           /* trazo secundario / rótulos tenues */
  --esq-text: #b7c7d7;           /* texto corrido sobre azul */
  --esq-line: rgba(255, 255, 255, .14);
  --esq-dir: 1;                  /* lo fija el motor: 1 = avanza, -1 = retrocede */
  --esq-bleed: 20px;             /* = padding lateral de .container (sangrado en móvil) */
  position: relative;
  margin: 2.4rem 0 0;
  padding: 1rem 12px;
  background: var(--navy, #0A1A2B);
  color: var(--esq-ink);
  border: 1px solid var(--navy, #0A1A2B);
  box-shadow: var(--shadow);
  /* Las láminas inactivas esperan desplazadas 18 px (fundido de entrada) y el aviso de la
     esquina sobresale del dibujo: se recorta solo en horizontal, en el borde del relleno,
     para que nunca generen desplazamiento lateral de la página (en vertical no se recorta). */
  overflow-x: clip;
}
/* Recuadro interior de lámina */
.esq::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--esq-line); pointer-events: none; }
/* En móvil el panel ocupa todo el ancho: el dibujo gana tamaño y los rótulos se leen mejor */
@media (max-width: 599px) {
  .esq { margin-left: calc(-1 * var(--esq-bleed)); margin-right: calc(-1 * var(--esq-bleed)); border-left: 0; border-right: 0; }
  .esq::before { left: 0; right: 0; border-left: 0; border-right: 0; }
}
@media (min-width: 600px) { .esq { padding: 1.25rem 1.25rem 1.1rem; } }
/* Si se inserta dentro de la rejilla .svc-extra, ocupa la fila completa */
.svc-extra > .esq { grid-column: 1 / -1; margin-top: 0; }

/* Cabecera: rótulo · botón de rotación (primer control del carrusel, patrón APG) · contador */
.esq-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.esq .mono-k { flex: 1 1 auto; margin: 0; color: var(--gold); font-size: .78rem; }
.esq-count { margin: 0 0 0 auto; font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; white-space: nowrap; color: var(--esq-mute); }
.esq-count b { color: #fff; font-weight: 600; }
/* Sin JS no hay nada que contar ni rotar */
.esq:not([data-esq-ready]) .esq-count,
.esq:not([data-esq-ready]) .esq-auto { display: none; }
/* Móvil: fila 1 = rótulo; fila 2 = botón de rotación a la izquierda y contador a la derecha */
@media (max-width: 599px) { .esq-head .mono-k { flex-basis: 100%; } }

/* ---------------- 2. Diapositivas y fundido cruzado ---------------- */
.esq-viewport { position: relative; display: grid; }
.esq-slide { margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }

/* Con el motor activo todas las figuras se apilan en la misma celda: la altura
   del visor es la de la más alta, así nada salta al cambiar de esquema. */
.esq[data-esq-ready] .esq-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(calc(var(--esq-dir) * 18px), 0, 0) scale(.985);
  transition: none;
}
.esq[data-esq-ready] .esq-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .45s ease .06s, transform .55s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.esq[data-esq-ready] .esq-slide.is-leaving {
  z-index: 1;
  opacity: 0;
  visibility: visible;
  transform: translate3d(calc(var(--esq-dir) * -18px), 0, 0) scale(.985);
  transition: opacity .4s ease, transform .45s ease;
}

/* ---------------- 3. Escenario (SVG), aviso pulsante y barra de ciclo ---------------- */
.esq-stage {
  position: relative;
  aspect-ratio: 640 / 360;                 /* misma caja en todos los esquemas: sin saltos */
  background-color: #0c1e31;
  background-image:
    linear-gradient(rgba(207, 226, 243, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 226, 243, .05) 1px, transparent 1px);
  background-size: 6.25% 11.1111%;         /* cuadrícula de 40 unidades del viewBox 640×360 */
  box-shadow: inset 0 0 0 1px var(--esq-line);
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* touch-action solo sobre el dibujo: ahí se desliza en horizontal para cambiar de
   esquema sin bloquear el scroll vertical ni el zoom; el resto del panel es normal. */
.esq[data-esq-ready] .esq-stage { cursor: pointer; touch-action: pan-y pinch-zoom; }
/* Página ampliada con los dedos: el dedo vuelve a desplazar la vista en todas direcciones */
.esq.esq--zoomed .esq-stage { touch-action: auto; }
.esq-svg { display: block; width: 100%; height: 100%; transition: opacity .3s ease; }
.esq-stage:focus { outline: none; }
.esq-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; box-shadow: inset 0 0 0 1px var(--esq-line); }

/* Aviso «interactivo»: marca de registro hueca en la esquina superior derecha, casi
   toda fuera del dibujo (solapa ≤ 6 px, menos que el margen de 12 unidades que
   respetan los fragmentos), para no tapar rótulos ni trazos del plano. */
.esq[data-esq-ready] .esq-stage::before {
  content: "";
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px);   /* centro dorado, resto transparente */
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 0 rgba(217, 164, 65, .5);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
/* Late solo en el esquema activo, en pantalla y sin reproducir: una única animación */
.esq[data-esq-ready]:not(.esq--off) .esq-slide.is-active:not(.is-playing) .esq-stage::before {
  animation: esq-ping 2.4s ease-out infinite;
}
.esq[data-esq-ready] .esq-slide.is-playing .esq-stage::before { opacity: 0; transform: scale(.5); }
@keyframes esq-ping {
  0% { box-shadow: 0 0 0 0 rgba(217, 164, 65, .5); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(217, 164, 65, 0); }
}

/* Barra de ciclo (8 s) en el borde inferior: avanza en sincronía con las 4 fases */
.esq[data-esq-ready] .esq-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-l, #6db8ec), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.esq[data-esq-ready] .esq-slide.is-playing .esq-stage::after { animation: esq-prog 8s linear infinite; }
@keyframes esq-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------- 4. Trazado de entrada y retorno al plano ---------------- */
/* Antes de entrar en pantalla el dibujo espera oculto (lo pone el motor) */
.esq-slide.is-waiting .esq-svg { opacity: 0; transition: none; }

/* Las líneas principales (.ln con pathLength="1") se plotean: dashoffset 1 → 0.
   "1 2" deja un hueco mayor que el trazo: sin puntos residuales con remate redondo.
   Las keyframes no declaran «to»: terminan en el valor propio del elemento. */
.esq-slide.is-entering .esq-svg .ln {
  stroke-dasharray: 1 2;
  animation: esq-draw .95s cubic-bezier(.55, .1, .25, 1) backwards;
  animation-delay: calc(var(--esq-i, 0) * 38ms);   /* --esq-i (0–10) lo asigna el motor */
}
/* Rellenos (suelo, hormigón, agua…) aparecen suaves; los rótulos, al final.
   Solo «from»: un elemento oculto en el plano (opacity 0) sigue oculto. */
.esq-slide.is-entering .esq-svg :is(path, line, polyline, polygon, rect, circle, ellipse, use, image):not(.ln):not(defs *) {
  animation: esq-fade .6s ease .25s backwards;
}
.esq-slide.is-entering .esq-svg text { animation: esq-fade .5s ease .8s backwards; }
@keyframes esq-draw { from { stroke-dashoffset: 1; } }
@keyframes esq-fade { from { opacity: 0; } }

/* Retorno al plano estático: fundido breve en lugar de un corte seco */
.esq-slide.is-settling .esq-svg { opacity: .25; transition-duration: .2s; }

/* ---------------- 5. Pie: título, subtítulo, pasos y enlace ---------------- */
.esq-cap { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.esq-title {
  margin: 0 0 .35rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.2rem, .95rem + 1vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
}
.esq-sub { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.5; color: var(--esq-text); }

/* role="list" en el marcado conserva la semántica de lista en Safari con list-style:none */
.esq-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .3rem; counter-reset: esq-paso; }
.esq-steps li {
  position: relative;
  counter-increment: esq-paso;
  min-height: 2.55rem;
  padding: .5rem .65rem .55rem 3.2rem;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--esq-text);
  background-color: rgba(217, 164, 65, 0);
  border-left: 2px solid var(--esq-line);
}
.esq-steps li::before {
  content: counter(esq-paso, decimal-leading-zero);
  position: absolute;
  left: .6rem;
  top: .5rem;
  width: 2rem;
  padding: .08rem 0;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  text-align: center;
  color: var(--gold);
  background-color: rgba(217, 164, 65, 0);
  border: 1px solid rgba(217, 164, 65, .55);
}
/* Subrayado que crece durante los 2 s de su fase */
.esq-steps li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}

/* Sincronía con el bucle de 8 s: el paso k se resalta de (k−1)·2 s a k·2 s.
   Las animaciones nacen con .is-playing, igual que las del SVG: el motor pone
   la clase en un cuadro nuevo, así todo arranca a la vez desde 0 s. */
.esq-slide.is-playing .esq-steps li { animation: esq-step 8s linear infinite; }
.esq-slide.is-playing .esq-steps li::before { animation: esq-step-n 8s linear infinite; }
.esq-slide.is-playing .esq-steps li::after { animation: esq-step-bar 8s linear infinite; }
.esq-slide.is-playing .esq-steps li:nth-child(2),
.esq-slide.is-playing .esq-steps li:nth-child(2)::before,
.esq-slide.is-playing .esq-steps li:nth-child(2)::after { animation-delay: 2s; }
.esq-slide.is-playing .esq-steps li:nth-child(3),
.esq-slide.is-playing .esq-steps li:nth-child(3)::before,
.esq-slide.is-playing .esq-steps li:nth-child(3)::after { animation-delay: 4s; }
.esq-slide.is-playing .esq-steps li:nth-child(4),
.esq-slide.is-playing .esq-steps li:nth-child(4)::before,
.esq-slide.is-playing .esq-steps li:nth-child(4)::after { animation-delay: 6s; }

/* Los valores de 0 % / 27 % / 100 % deben coincidir con el estado base de arriba */
@keyframes esq-step {
  0%, 27%, 100% { color: #b7c7d7; background-color: rgba(217, 164, 65, 0); border-left-color: rgba(255, 255, 255, .14); }
  3%, 23% { color: #fff; background-color: rgba(217, 164, 65, .13); border-left-color: #D9A441; }
}
@keyframes esq-step-n {
  0%, 27%, 100% { color: #D9A441; background-color: rgba(217, 164, 65, 0); }
  3%, 23% { color: #0A1A2B; background-color: #D9A441; }
}
@keyframes esq-step-bar {
  0% { transform: scaleX(0); opacity: 1; }
  25% { transform: scaleX(1); opacity: 1; }
  28%, 100% { transform: scaleX(1); opacity: 0; }
}

.esq-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  margin-top: .55rem;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.esq-link:hover { color: var(--gold-l, #e9c272); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------- 6. Controles ---------------- */
/* Orden idéntico en el DOM y en pantalla: puntos · ‹ · ver funcionamiento · ›
   Móvil y tableta: fila 1 = puntos; fila 2 = ‹ [botón] ›. Escritorio: una sola fila. */
.esq-controls, .esq-hint { display: none; }   /* sin JS no hacen nada: no se muestran */
.esq[data-esq-ready] .esq-controls {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--esq-line);
}
.esq-prev, .esq-next {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 1px solid var(--esq-line);
  border-radius: var(--r, 4px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s;
}
.esq-prev:hover, .esq-next:hover { border-color: var(--gold); color: var(--gold); }

/* Puntos en su propia fila: ~44 px por punto con 8 esquemas a 375 px; nunca se montan
   sobre otros controles (si no caben, pasan a otra línea) */
.esq-dots { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.esq-dot {
  flex: 1 1 0;
  min-width: 32px;
  max-width: 48px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Marca de control topográfico (rombo); la activa, rellena en dorado */
.esq-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--esq-mute);
  transform: rotate(45deg);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.esq-dot:hover::before { border-color: var(--esq-ink); }
.esq-dot[aria-selected="true"]::before { background-color: var(--gold); border-color: var(--gold); transform: rotate(45deg) scale(1.3); }

.esq-play, .esq-auto {
  min-height: 44px;
  padding: .5rem .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #dce9f5;
  background: transparent;
  border: 1px solid var(--esq-line);
  border-radius: var(--r, 4px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
/* Cajas de tamaño estable: el rótulo cambia sin mover la página ni el botón bajo el cursor.
   Móvil: el botón llena el espacio entre ‹ y ›; desde 600 px, ancho mínimo para el rótulo más largo. */
.esq-play { flex: 1 1 0; min-width: 0; max-width: 22rem; color: var(--gold); border-color: rgba(217, 164, 65, .6); }
.esq-auto { flex: 0 0 auto; min-width: 16em; }   /* cabe «▶ Reanudar rotación» */
.esq-play:hover { background-color: rgba(217, 164, 65, .1); }
.esq-play.is-on { color: var(--navy, #0A1A2B); background-color: var(--gold); border-color: var(--gold); }
.esq-auto:hover { color: #fff; border-color: var(--blue-l, #6db8ec); }
.esq-auto.is-on { color: var(--blue-l, #6db8ec); border-color: var(--blue-l, #6db8ec); }
@media (max-width: 599px) {
  /* En pantallas muy estrechas el rótulo puede partirse en dos líneas en lugar de desbordar */
  .esq-play { padding-left: .5rem; padding-right: .5rem; letter-spacing: .04em; white-space: normal; text-align: center; line-height: 1.25; }
}
@media (min-width: 600px) {
  .esq-play { flex: 0 0 auto; min-width: 17em; max-width: none; }   /* cabe «▶ Ver funcionamiento» */
}

.esq-prev:focus-visible, .esq-next:focus-visible, .esq-dot:focus-visible,
.esq-play:focus-visible, .esq-auto:focus-visible, .esq-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: none;
}

.esq[data-esq-ready] .esq-hint {
  position: relative;
  display: block;
  margin: .75rem 0 0;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .05em;
  line-height: 1.5;
  color: var(--esq-mute);
}

/* Un solo esquema: sin navegación ni rotación */
.esq--single .esq-prev, .esq--single .esq-next, .esq--single .esq-dots, .esq--single .esq-auto { display: none; }
/* Muchos esquemas en móvil: sin puntos (las flechas, el contador y el gesto bastan) */
@media (max-width: 599px) { .esq--many .esq-dots { display: none; } }
/* Movimiento reducido (detectado por el motor): sin reproducción ni aviso pulsante */
.esq--rm .esq-play, .esq--rm .esq-auto { display: none; }
.esq.esq--rm .esq-stage { cursor: default; }
.esq.esq--rm .esq-stage::before { display: none; }

/* ---------------- 7. Escritorio (≥ 900 px) ---------------- */
@media (min-width: 900px) {
  .esq { padding: 1.6rem 1.8rem 1.4rem; }
  .esq-slide { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: 2.2rem; align-items: center; align-content: normal; }
  /* Una fila: puntos a la izquierda, transporte ‹ ▶ › a la derecha */
  .esq-dots { flex: 1 1 auto; justify-content: flex-start; }
  .esq-dot { flex: 0 0 34px; min-width: 0; max-width: none; }
}

/* ---------------- 8. Pausa global, movimiento reducido, impresión ---------------- */
/* La pausa global (html.paused) congela todo. Dos excepciones deliberadas:
   el trazado de entrada (1,4 s; nunca debe quedar a medio dibujar) y la
   reproducción pedida explícitamente (botón, clic, toque o tecla), que es la
   única que el motor permite mientras dura la pausa. */
.paused .esq-slide.is-entering *,
.paused .esq-slide.is-playing *,
.paused .esq-slide.is-playing *::before,
.paused .esq-slide.is-playing *::after { animation-play-state: running !important; }

@media (prefers-reduced-motion: reduce) {
  .esq[data-esq-ready] .esq-slide,
  .esq[data-esq-ready] .esq-slide.is-active,
  .esq[data-esq-ready] .esq-slide.is-leaving { transform: none; }
  .esq[data-esq-ready] .esq-stage { cursor: default; }
  .esq[data-esq-ready] .esq-stage::before { animation: none; display: none; }
  .esq-play, .esq-auto { display: none; }
}

@media print {
  .esq { box-shadow: none; }
  .esq[data-esq-ready] .esq-controls,
  .esq[data-esq-ready] .esq-hint,
  .esq[data-esq-ready] .esq-auto,
  .esq[data-esq-ready] .esq-stage::before,
  .esq[data-esq-ready] .esq-stage::after { display: none; }
  .esq-slide.is-waiting .esq-svg { opacity: 1; }
}

@media (forced-colors: active) {
  .esq-dot[aria-selected="true"]::before { background-color: Highlight; border-color: Highlight; }
  .esq-steps li::before { forced-color-adjust: auto; }
}