/* =========================================================================
   builder.css — CONFIGURADOR DE CONTACTO + VISOR DE IMAGEN
   Parte 1 · .builder  (opciones + escenario SVG "plano de flujo" + CTA real)
   Parte 2 · .proj-figure + .zoom-viewer  (figura de Geotecnios y su visor)

   Reglas del sistema: trazo 1px, esquinas 2px, sin sombras blandas, sin glow,
   sin blur, un solo easing (var(--ease)). El verde olivo es tinta: filos,
   estados y el CTA. Nunca fondos de sección.
   Sin JS el HTML sigue siendo útil: las opciones son enlaces a WhatsApp y la
   figura es una imagen normal.
   ========================================================================= */


/* =========================================================================
   PARTE 1 — CONFIGURADOR
   ========================================================================= */
.builder {
  --bs-step: 0.2s;                       /* intervalo del dibujo (JS lo lee igual) */
  --bs-wire: rgba(242, 243, 240, 0.28);  /* cable en reposo: tinta al 28% */
  --bs-edge: rgba(242, 243, 240, 0.38);  /* borde hover de opciones */
  position: relative;
  margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
}

/* ---------- opciones ---------- */
/* Móvil (<860px): píldoras en 2 columnas, objetivo táctil >= 48px.
   Escritorio: franja de 4 celdas con bordes compartidos. */
.builder-opts {
  counter-reset: opt;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.builder-opts > li { display: block; min-width: 0; }

/* Estados de .builder-opt
   reposo ........ borde --line · texto ink-2 · indicador: anillo gris
   hover ......... borde y anillo se encienden en ink · texto ink
   focus-visible . anillo verde claro (regla global del sitio) + sube de capa
   active ........ baja 1px
   seleccionada .. [aria-pressed="true"]: borde --accent-soft · punto verde lleno · texto ink */
.builder-opt {
  counter-increment: opt;
  position: relative;
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; min-height: 48px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-2);
  font-size: 0.92rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
/* índice 01–04: solo en escritorio ancho */
.builder-opt::before {
  content: "0" counter(opt);
  display: none;
  flex: none;
  margin-right: 0.35rem;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--mute);
  transition: color var(--d-fast) var(--ease);
}
/* indicador: anillo → punto lleno */
.builder-opt::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-left: auto;
  border: 1px solid var(--mute);
  border-radius: 50%;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.builder-opt:hover { border-color: var(--bs-edge); color: var(--ink); }
.builder-opt:hover::before { color: var(--ink); }
.builder-opt:hover::after { border-color: var(--ink); }
.builder-opt:active { transform: translateY(1px); }
.builder-opt[aria-pressed="true"] { border-color: var(--accent-soft); color: var(--ink); }
.builder-opt[aria-pressed="true"]::before { color: var(--accent-soft); }
.builder-opt[aria-pressed="true"]::after { background: var(--accent-soft); border-color: var(--accent-soft); }
.builder-opt:focus-visible { z-index: 2; }

/* 400px o menos: "Automatización" no cabe en media columna, así que las opciones van en una */
@media (max-width: 400px) {
  .builder-opts { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 860px) {
  .builder-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .builder-opts > li + li .builder-opt { margin-left: -1px; }   /* borde compartido */
  .builder-opt { min-height: 64px; padding: 0.6rem 1.1rem; font-size: 1rem; }
  .builder-opt:hover, .builder-opt[aria-pressed="true"] { z-index: 1; }
}
@media (min-width: 1100px) {
  .builder-opt::before { display: block; }
}

/* ---------- lienzo: escenario + CTA ---------- */
.builder-canvas { position: relative; }

.builder-stage {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
/* sin JS no hay dibujo: el recuadro vacío no se muestra (builder.js marca data-bound) */
.builder:not([data-bound]) .builder-stage { display: none; }
/* con el configurador activo, el botón de abajo repetiría el mismo CTA */
.contacto-foot-row.is-folded { display: none; }
/* regla de cotas en el borde superior */
.builder-stage::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(to right, rgba(242, 243, 240, 0.16) 0 1px, transparent 1px 12px);
  pointer-events: none;
  z-index: 1;
}

/* ---------- SVG del flujo ---------- */
.bs { display: block; width: 100%; height: auto; max-width: none; }
.bs text { font-family: var(--font-mono); font-weight: 500; }

.bs-dots circle { fill: rgba(242, 243, 240, 0.10); }

.bs-tag { font-size: 10px; letter-spacing: 0.22em; fill: var(--mute); }
.bs-tag .k { fill: var(--accent-soft); }

/* estado de ejecución: aparece cuando el paquete empieza a correr */
.bs-status { opacity: 0; transition: opacity var(--d) var(--ease); }
.bs.is-live .bs-status { opacity: 1; }
.bs-st { font-size: 10px; letter-spacing: 0.16em; fill: var(--mute); }
.bs-sd { fill: var(--accent-soft); }

/* cables y trazos: pathLength=1 → el dash se mide de 0 a 1 */
.bs-cable, .bs-stub, .bs-line, .bs-trail {
  fill: none;
  stroke-dasharray: 1;
  stroke-width: 1;
}
.bs-cable, .bs-stub { stroke: var(--bs-wire); stroke-dashoffset: 0; }
.bs-line { stroke: rgba(242, 243, 240, 0.26); stroke-dashoffset: 0; transition: stroke var(--d) var(--ease); }
/* estela verde: la dibuja el JS siguiendo al paquete */
.bs-trail { stroke: var(--accent-soft); stroke-dashoffset: 1; transition: opacity var(--d) var(--ease); }
.bs.is-fading .bs-trail { opacity: 0; }

.bs-fill { fill: var(--bg); }
.bs-node { transition: none; }
.bs-ic { fill: none; stroke: var(--ink-2); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--d) var(--ease); }
.bs-label { font-size: 10px; letter-spacing: 0.12em; fill: var(--ink); }

/* insignia de ejecución: círculo + palomita que se traza */
.bs-badge { opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.bs-badge circle { fill: none; stroke: var(--accent-soft); stroke-width: 1; }
.bs-badge path {
  fill: none; stroke: var(--accent-soft); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--d) var(--ease) 0.08s;
}

.bs-port {
  fill: var(--bg);
  stroke: rgba(242, 243, 240, 0.5); stroke-width: 1;
  transition: fill var(--d) var(--ease), stroke var(--d) var(--ease);
}

/* nodo ejecutado: borde, icono, puertos e insignia en verde olivo */
.bs-node.is-run .bs-line { stroke: var(--accent-line); }
.bs-node.is-run .bs-stub { stroke: var(--accent-line); }
.bs-node.is-run .bs-ic { stroke: var(--accent-soft); }
.bs-node.is-run .bs-badge { opacity: 1; }
.bs-node.is-run .bs-badge path { stroke-dashoffset: 0; }
.bs-node.is-run .bs-port { fill: var(--accent-soft); stroke: var(--accent-soft); }
/* hover de nodo (decorativo, solo puntero fino) */
@media (hover: hover) and (pointer: fine) {
  .bs-node:hover .bs-line { stroke: var(--ink); }
}

/* paquete: un punto verde (sin anillo, sin glow) */
.bs-packet { opacity: 0; pointer-events: none; transition: opacity 0.15s linear; }
.bs-packet.is-on { opacity: 1; }
.bs-packet .pk-dot { fill: var(--accent-soft); }

/* Dibujo de entrada. Estado base = estado final (si algo falla, se ve completo).
   .is-pre   → todo oculto, esperando a que el escenario entre en pantalla
   .is-build → cada elemento se traza con retardo = --i × --bs-step */
@keyframes bs-draw { from { stroke-dashoffset: 1; } }
@keyframes bs-fade { from { opacity: 0; } }

.bs.is-pre .bs-cable,
.bs.is-pre .bs-stub,
.bs.is-pre .bs-line { stroke-dashoffset: 1; }
.bs.is-pre .bs-fade,
.bs.is-pre .bs-meta { opacity: 0; }

.bs.is-build .bs-cable,
.bs.is-build .bs-stub,
.bs.is-build .bs-line {
  animation: bs-draw 0.5s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * var(--bs-step));
}
.bs.is-build .bs-cable { animation-duration: 0.45s; }
.bs.is-build .bs-fade {
  animation: bs-fade 0.3s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * var(--bs-step) + 0.14s);
}
.bs.is-build .bs-meta { animation: bs-fade 0.4s var(--ease) 0.1s backwards; }

/* ---------- CTA real (enlace) sobre el último nodo ---------- */
/* Hereda .btn-cta del sitio (relleno --accent, marcas CAD, cursor, magnético).
   rest: verde + marcas 60% · hover/focus: marcas separadas 3px (de .btn-cta)
   is-pulse: mismas marcas separadas cuando el paquete llega al nodo
   Antes de entrar: oculto y fuera del orden de tabulación (visibility). */
.builder .builder-go {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  margin: 0; padding: 0 0.8rem;
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  clip-path: inset(-8px 100% -8px 0);
  transition: clip-path var(--d) var(--ease), opacity var(--d) var(--ease),
              background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease),
              visibility 0s linear var(--d);
}
.builder .builder-go.is-in {
  opacity: 1; visibility: visible;
  clip-path: inset(-8px);
  transition: clip-path var(--d) var(--ease) var(--go-d, 0s), opacity var(--d) var(--ease) var(--go-d, 0s),
              background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease),
              visibility 0s linear var(--go-d, 0s);
}
.builder .builder-go.is-pulse::before { opacity: 1; transform: translate(-3px, -3px); }
.builder .builder-go.is-pulse::after  { opacity: 1; transform: translate(3px, -3px); }
.builder .builder-go.is-pulse .cm:nth-last-of-type(2) { opacity: 1; transform: translate(-3px, 3px); }
.builder .builder-go.is-pulse .cm:nth-last-of-type(1) { opacity: 1; transform: translate(3px, 3px); }
.builder .builder-go.is-pulse svg { transform: translateX(3px); }

/* anuncio para lectores de pantalla */
.builder-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* los dos escalones de movimiento se acortan, pero el trazo sigue (Windows lo activa por defecto) */
@media (prefers-reduced-motion: reduce) {
  .builder { --bs-step: 0.12s; }
}

@media print {
  .builder-stage, .builder-go, .builder-live { display: none !important; }
  .builder-opt { border-color: #999; color: #000; }
}


/* =========================================================================
   PARTE 2 — FIGURA DE LA FICHA + VISOR
   ========================================================================= */
/* La figura ocupa todo el ancho de la rejilla de la ficha.
   Estados del botón de imagen:
   rest ........ borde --line · 4 marcas CAD de 6px pegadas a las esquinas · cota "AMPLIAR" en gris
   hover ....... borde verde tenue · marcas se separan 3px · "AMPLIAR" en ink
   focus-visible aro verde por dentro de la imagen (el panel recorta lo de fuera)
   active ...... la imagen baja de opacidad
   Sin JS no hay marcas ni cota: es solo una imagen. */
.proj-figure {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0.4rem 0 2.4rem;
  border: 1px solid var(--line);
  background: var(--bg);
  transition: border-color var(--d) var(--ease);
}
.proj-figure-btn {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  width: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: none;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.proj-figure-btn img {
  display: block;
  width: 100%; height: auto; max-width: none;
  transition: opacity var(--d-fast) var(--ease);
}
.proj-figure-btn:active img { opacity: 0.9; }
.proj-figure-btn:focus-visible { outline: 1.5px solid var(--accent-soft); outline-offset: -3px; }

.proj-figure figcaption {
  min-width: 0;
  padding: 0.8rem 0.95rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.12em; line-height: 1.6; text-transform: uppercase;
  color: var(--mute);
}
.proj-figure figcaption::before {
  content: "FIG. 01";
  margin-right: 1.1em;
  color: var(--accent-soft);
}

/* indicador "AMPLIAR": celda de la tabla de pie, solo cuando el visor está activo */
.proj-figure::after { display: none; content: "AMPLIAR +"; }
.proj-figure[data-zoom-ready]::after {
  display: flex; align-items: center;
  padding: 0 1rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.22em; white-space: nowrap;
  color: var(--mute);
  pointer-events: none;
  transition: color var(--d-fast) var(--ease);
}
.proj-figure[data-zoom-ready] .proj-figure-btn { cursor: zoom-in; }
.proj-figure[data-zoom-ready]:hover { border-color: var(--accent-line); }
.proj-figure[data-zoom-ready]:hover::after,
.proj-figure[data-zoom-ready]:focus-within::after { color: var(--ink); }

/* esquinas tipo selección CAD: 4 marcas de 6px dibujadas con 8 trazos */
.proj-figure[data-zoom-ready] .proj-figure-btn::before {
  content: "";
  position: absolute; z-index: 1;
  top: 6px; right: 6px; bottom: 6px; left: 6px;
  --m: var(--ink);
  background:
    linear-gradient(var(--m), var(--m)) 0 0 / 6px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 0 / 1px 6px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 6px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 1px 6px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 6px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 1px 6px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 6px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 1px 6px no-repeat;
  opacity: 0.55;
  pointer-events: none;
  transition: top var(--d-fast) var(--ease), right var(--d-fast) var(--ease),
              bottom var(--d-fast) var(--ease), left var(--d-fast) var(--ease),
              opacity var(--d-fast) var(--ease);
}
.proj-figure[data-zoom-ready] .proj-figure-btn:hover::before,
.proj-figure[data-zoom-ready] .proj-figure-btn:focus-visible::before {
  top: 3px; right: 3px; bottom: 3px; left: 3px;
  opacity: 1;
}

/* ---------- visor (se monta en <body>) ---------- */
/* cerrado: transparente + recortado desde abajo (como el splash) y fuera del tab
   abierto: fondo 94%, entra con opacity + clip-path en --d-fast (0.3 s)            */
.zoom-viewer {
  position: fixed; inset: 0; z-index: 340;     /* sobre el nav (200), bajo el cursor (350) */
  background: rgba(10, 10, 11, 0.94);
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0);
  overscroll-behavior: contain;
  transition: opacity var(--d-fast) var(--ease), clip-path var(--d-fast) var(--ease),
              visibility 0s linear var(--d-fast);
}
.zoom-viewer.is-open {
  opacity: 1; visibility: visible;
  clip-path: inset(0);
  transition-delay: 0s;
}

.zoom-scroller {
  position: absolute; inset: 0;
  display: flex;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 243, 240, 0.28) transparent;
}
/* margin:auto centra sin recortar cuando la imagen es mayor que la pantalla */
.zoom-fit {
  display: block; flex: none;
  margin: auto; padding: 0;
  border: 0; border-radius: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.zoom-fit:focus-visible { outline: 1.5px solid var(--accent-soft); outline-offset: 4px; }
.zoom-viewer.is-zoomed .zoom-fit { cursor: zoom-out; }

/* ajustada: max 96vw × 88vh conservando la proporción (--zoom-ar la pone el JS) */
.zoom-img {
  display: block;
  width: min(96vw, calc(88vh * var(--zoom-ar, 1.3287)));
  height: auto; max-width: none;
  border: 1px solid var(--line);
  background: var(--bg);
  user-select: none; -webkit-user-drag: none;
}
@supports (height: 1dvh) {
  .zoom-img { width: min(96vw, calc(88dvh * var(--zoom-ar, 1.3287))); }
}
/* tamaño real: legible en celular (se recorre con el dedo) */
.zoom-viewer.is-zoomed .zoom-img { width: max(1500px, 170vw); }

/* cerrar: foco inicial. rest: gris · hover/focus: ink */
.zoom-close {
  position: absolute; z-index: 2;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-width: 44px; min-height: 44px;
  padding: 0 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.22em;
  color: var(--mute);
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.zoom-close svg { flex: none; width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.zoom-close:hover, .zoom-close:focus-visible { color: var(--ink); border-color: var(--ink); }
.zoom-close:active { transform: translateY(1px); }
.zoom-close:focus-visible { outline: 1.5px solid var(--accent-soft); outline-offset: 3px; }
@media (hover: none) { .zoom-esc { display: none; } }

.zoom-desc {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

@media print {
  .zoom-viewer { display: none !important; }
  .proj-figure::after { display: none !important; }
}

/* "Necesito un diagnóstico" es más largo que las demás: se le da más ancho para que no se parta */
@media (min-width: 860px) {
  .builder-opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.45fr); }
}