/* ==========================================================================
   MediaLab — /gestion-documental
   Servicio «Gestión Documental». Se apoya en curso.css, sitiosweb.css y
   contenido.css. Acá solo va la maqueta de la tapa (archivos + organigrama)
   y el antes/después. Prefijo «gd-».
   ========================================================================== */

.gd-maqueta { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--e4); padding: var(--e5); }

/* Árbol de carpetas */
.gd-arbol { margin: 0; padding: var(--e4); list-style: none; background: var(--gris-claro); display: grid; gap: 7px; align-content: start; }
.gd-arbol li { display: flex; align-items: center; gap: var(--e2); font-size: 11px; line-height: 1.2; color: var(--tinta); white-space: nowrap; }
.gd-arbol li i { flex: 0 0 auto; width: 14px; height: 11px; background: var(--naranja); border-radius: 1px 3px 1px 1px; }
.gd-arbol li.gd-sub { padding-left: var(--e5); color: var(--texto-tenue); }
.gd-arbol li.gd-sub i { background: var(--azul); width: 10px; height: 12px; border-radius: 0; }
.gd-arbol li.gd-papel i { background: transparent; border: 1.5px dashed var(--tinta); }

/* Organigrama */
.gd-org { display: grid; gap: var(--e3); justify-items: center; align-content: center; padding: var(--e4); background: var(--tinta); }
.gd-org-fila { display: flex; gap: var(--e2); justify-content: center; position: relative; }
.gd-org span {
  display: block; padding: 5px 8px; background: rgba(255, 255, 255, .1); border: 1px solid var(--linea-tinta);
  color: var(--blanco); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.gd-org span.gd-ia { background: var(--naranja-boton); border-color: var(--naranja-boton); }
.gd-org-fila + .gd-org-fila::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--e3) * -1); width: 1px; height: var(--e3); background: var(--linea-tinta);
}

/* Hoy / con el plan */
.gd-antes .w-antes > div:first-child h3 { color: var(--texto-tenue); }
.gd-antes .w-antes > div:first-child li::before { background: var(--texto-tenue); }
.gd-antes .w-antes > div:last-child { border-color: var(--naranja); border-width: 2px; }

@media (max-width: 699px) {
  .gd-maqueta { grid-template-columns: 1fr; }
}

/* Clientes del servicio: franja de logos debajo de la tapa */
.gd-clientes { padding: var(--e6) 0; background: var(--gris-claro); border-bottom: 1px solid rgba(15, 1, 71, .08); }
.gd-clientes-fila { display: flex; align-items: center; justify-content: center; gap: var(--e5) var(--e6); flex-wrap: wrap; }
.gd-clientes-titulo { margin: 0; color: var(--texto-tenue); white-space: nowrap; }
.gd-clientes-lista { display: flex; align-items: center; gap: var(--e4) var(--e6); flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.gd-clientes-lista a { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3); color: var(--tinta); text-decoration: none; transition: opacity .3s; }
.gd-clientes-lista a:hover { opacity: .75; }
.gd-clientes-lista a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.gd-clientes-lista img { display: block; width: auto; }
.gd-clientes-lista .gd-logo-ancho { height: 26px; }
.gd-clientes-lista .gd-logo-alto { height: 52px; }
.gd-clientes-lista span { font-size: 13px; line-height: 1.3; color: var(--texto-tenue); max-width: 15ch; }
@media (max-width: 767px) {
  .gd-clientes-fila { flex-direction: column; gap: var(--e3); }
  .gd-clientes-lista { flex-direction: column; gap: var(--e3); }
  .gd-clientes-lista .gd-logo-ancho { height: 22px; }
  .gd-clientes-lista .gd-logo-alto { height: 44px; }
}