/* ==========================================================================
   GIG · Pantallas de demostración de Go Track y esquema de Go Cash
   (direcciones/CONTENIDO.md, sección 13.8, pedido del dueño del 14-oct-2026)

   Hoja propia: no cambia ninguna regla de estilos.css ni de empresas.css.
   La cargan go-track.html y go-cash.html, después de empresas.css.

   Los dibujos son SVG en línea, generados por scripts/demo-pantallas.mjs
   (el contorno de Costa Rica sale de Natural Earth 1:10m). Van en línea, y
   no como <img>, porque un SVG cargado como imagen no puede cargar
   tipografías: así usan Inter y Newsreader, como el resto de la página.
   Sin style="…" (sitio/_headers): los colores van en atributos de
   presentación (fill, stroke) y la letra, con las clases de esta hoja.

   Cada dibujo va en más de una versión y esta hoja muestra una sola; las
   escondidas van con display: none, así que tampoco las lee el lector de
   pantalla.
     Go Track   .demo-ancho (más de 1240 px) y .demo-angosto (la versión de
                teléfono de la plataforma, hasta 1240 px: por debajo, la
                letra de las tablas de la ancha quedaría de menos de 11 px).
     Go Cash    .esquema-cash--ancho (más de 1180 px), --medio (de 701 a
                1180 px; los dos horizontales, sobre la franja de tres
                columnas) y --angosto (vertical, hasta 700 px, cuando la
                franja se apila).
   ========================================================================== */

/* Letra de los dibujos: Inter (sin números tabulares: en Inter ensanchan el guion de «DEMO-01»); el nombre
   «Go Track», en la serif de la casa */
.demo svg,
.esquema-cash {
  font-family: var(--sans);
  font-variant-numeric: lining-nums;
}
.demo .dm-serif,
.esquema-cash .dm-serif {
  font-family: var(--serif);
  font-variation-settings: "opsz" 36;
}

/* Go Track · pantallas -------------------------------------------------------- */

.demo {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
/* En la computadora: el mapa a todo el ancho; abajo, viajes y liquidación, lado a lado */
.demo__pantallas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--medianil);
  align-items: start;
}
.demo__pantalla {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(18, 26, 22, .22);
  border-radius: 6px;
  background: var(--selva-hondo);
}
.demo__pantalla--mapa { grid-column: 1 / -1; }
.demo svg {
  display: block;
  width: 100%;
  height: auto;
}
.demo .demo-angosto { display: none; }

/* La línea de demostración, debajo, a la vista */
.demo__nota {
  margin-top: 1.25rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* Go Cash · esquema ---------------------------------------------------------- */

/* Horizontal: va pegado sobre la franja de los tres pasos; la raya de la franja es la línea de tiempo */
.esquema-cash {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.esquema-cash--medio,
.esquema-cash--angosto { display: none; }
.esquema-cash ~ .empresa-tira { margin-top: 0; }

/* Tableta y teléfono ------------------------------------------------------------ */

@media (max-width: 1240px) {
  /* Las pantallas de teléfono: tres por renglón si caben con 18,5 rem cada una, si no dos, y una en el teléfono */
  .demo .demo-ancho { display: none; }
  .demo .demo-angosto { display: block; }
  .demo__pantallas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); }
  .demo__pantalla--mapa { grid-column: auto; }
  .demo__pantalla { max-width: 26rem; }
}

@media (max-width: 1180px) {
  .esquema-cash--ancho { display: none; }
  .esquema-cash--medio { display: block; }
}

@media (max-width: 700px) {
  .esquema-cash--medio { display: none; }
  .esquema-cash--angosto {
    display: block;
    max-width: 24rem;
  }
  .esquema-cash ~ .empresa-tira { margin-top: clamp(2rem, 8vw, 3rem); }
}