/* =========================================================================
   FrederycBotero.com · sistema visual en código · assets/graf/graf.css
   Iconos y diagramas dibujados a mano en SVG (assets/graf/iconos.svg).
   Sin librerías, sin fuentes externas, sin peticiones a terceros.
   Microanimaciones ligeras; se apagan con prefers-reduced-motion.
   Sistema uniforme: caja 48x48 · línea 2 (marcas 6) · ángulos 45/90 ·
   remates y uniones redondeados · un solo color por elemento.
   ========================================================================= */

/* --- el sprite no se dibuja: solo guarda los símbolos --- */
.graf-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- icono que encabeza cada capacidad --- */
.cap-ic{display:block;width:34px;height:34px;color:var(--accent);margin:0 0 12px}
.cap-ic .g-ic{display:block;width:34px;height:34px}

/* --- diagrama: lo que falla -> lo que hacemos -> lo que recibe --- */
.cap-graf{display:flex;align-items:center;gap:7px;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--linea2)}
.cf-f{position:relative;flex:0 0 auto;display:grid;place-items:center;width:46px;height:38px;
  border:1px solid var(--linea);border-radius:5px;background:#FBFAF7}
.cf-f .g-ic{display:block;width:26px;height:26px}
.cf-p{color:var(--gris2);border-style:dashed}
.cf-s{color:var(--accent);border-color:var(--accent);background:#fff}
.cf-r{color:var(--verde);border-color:var(--verde);background:#fff}
.cf-m{position:absolute;top:-8px;right:-6px;width:17px;height:17px}
.cf-p .cf-m{color:var(--rojo)}
.cf-r .cf-m{color:var(--verde)}
.cf-ar{position:relative;flex:1 1 auto;min-width:12px;height:1px;background:var(--linea);overflow:hidden}
.cf-ar::after{content:"";position:absolute;right:0;top:-3px;width:5px;height:5px;
  border-top:1px solid var(--linea);border-right:1px solid var(--linea);transform:rotate(45deg)}
.cf-ar::before{content:"";position:absolute;left:-20%;top:-1px;width:140%;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:gf-corre 4.8s ease-in-out infinite}
.cf-ar.d2::before{animation-delay:1.6s}
@keyframes gf-corre{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* --- clave de lectura: la misma pieza, en grande, al principio de la página --- */
.cap-graf.grande{gap:10px;margin:0 0 18px;padding-top:0;border-top:0}
.cap-graf.grande .cf-f{width:62px;height:48px;border-width:2px}
.cap-graf.grande .cf-f .g-ic{width:34px;height:34px}
.cap-graf.grande .cf-m{width:22px;height:22px;top:-10px;right:-8px}

/* --- los seis pasos del método (index.html) --- */
.met-graf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 20px;
  padding:0;list-style:none}
.met-graf li{position:relative;display:grid;place-items:center;gap:7px;padding:12px 6px 10px;
  border:1px solid var(--linea);border-radius:5px;background:#fff}
.met-graf .g-ic{display:block;width:30px;height:30px;color:var(--accent)}
.met-graf b{font:700 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--gris)}
@media(min-width:700px){
  .met-graf{grid-template-columns:repeat(6,1fr)}
  .met-graf li::after{content:"";position:absolute;right:-10px;top:50%;width:10px;height:1px;
    background:var(--linea)}
  .met-graf li:last-child::after{display:none}
}

/* --- movimiento apagado cuando el equipo lo pide --- */
@media (prefers-reduced-motion: reduce){
  .cf-ar::before{animation:none;transform:translateX(-100%);opacity:0}
}
@media print{
  .cf-ar::before{display:none}
}


/* --- capacidad: cuatro frentes, un mismo sistema (portada) --- */
.capa-graf{display:grid;grid-template-columns:1fr;gap:10px;margin:18px 0 14px}
.cg-c{display:grid;grid-template-columns:44px 1fr;align-items:start;gap:4px 12px;
  padding:12px 14px;border:1px solid var(--linea);border-radius:5px;background:#fff}
.cg-c .g-ic{grid-row:span 2;display:block;width:32px;height:32px;margin-top:2px;color:var(--accent)}
.cg-c b{font:700 13px/1.25 var(--mono);letter-spacing:.02em;color:var(--tinta)}
.cg-c span{grid-column:2;font-size:13.5px;line-height:1.5;color:var(--tinta2);margin:0}
.cg-pie{font-size:13px;line-height:1.6;color:var(--gris);margin:0 0 6px}
.cg-pie a{color:var(--accent);font-weight:600}
@media(min-width:760px){.capa-graf{grid-template-columns:repeat(2,1fr)}}

/* --- trabajo comprobable: los sitios, medidos hoy --- */
.com-h{font:700 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);margin:26px 0 0}
.com-graf{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 18px}
.com-t{display:grid;gap:7px;padding:14px;border:1px solid var(--linea);border-radius:5px;background:#fff}
.com-t .g-ic{display:block;width:30px;height:30px;color:var(--accent)}
.com-t b{font:700 12.5px/1.25 var(--mono);color:var(--tinta);word-break:break-all}
.com-t span{font-size:13.5px;line-height:1.5;color:var(--tinta2)}
.com-t em{font:400 11px/1 var(--mono);font-style:normal;color:var(--verde);
  border:1px solid var(--verde);border-radius:3px;padding:4px 7px;justify-self:start}
@media(min-width:700px){.com-graf{grid-template-columns:repeat(3,1fr)}}

/* el remate ✓ de la tira se sale 6 px: en pantallas angostas se le deja aire */
@media (max-width:520px){ .cap-graf{padding-right:6px} }