/* ============ Nuestra Organización — FUNDETEC ============
   Reusa los tokens de site.css (--yale, --amarillo, --navy, --radius…).
   Todas las clases llevan prefijo og- para no colisionar. */

/* ---------- Hero ---------- */
/* El tagline nunca debe partirse a mitad ("¡Sí te / enseña!"): o cabe
   entero al lado del título, o baja completo a la línea siguiente. */
.og-hero h1{text-wrap:balance}
.og-hero h1 .tagline{white-space:nowrap;display:inline-block;margin-left:6px}
.og-hero .stats-inline{display:flex;gap:32px;flex-wrap:wrap;margin-top:32px}
.og-hero .stats-inline .it .n{font-family:'Red Hat Display',system-ui,sans-serif;font-weight:800;font-size:clamp(24px,3vw,38px);color:var(--amarillo)}
.og-hero .stats-inline .it .l{font-size:13px;opacity:.85}

/* ---------- Cosmovisión (misión / visión / política) ---------- */
.og-cosmos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:1000px;margin:0 auto}
.og-cosmos .pilar{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 24px;border-top:5px solid var(--yale)}
.og-cosmos .pilar:nth-child(2){border-top-color:var(--amarillo)}
.og-cosmos .pilar:nth-child(3){border-top-color:var(--rojo)}
.og-cosmos .pilar .ic{font-size:26px;color:var(--yale);margin-bottom:10px}
.og-cosmos .pilar:nth-child(2) .ic{color:#b99a10}
.og-cosmos .pilar:nth-child(3) .ic{color:var(--rojo)}
.og-cosmos .pilar h3{font-size:18px;margin:0 0 10px}
.og-cosmos .pilar p{margin:0;font-size:14.5px;color:#374151;line-height:1.6}

/* ---------- Mapa de procesos ---------- */
.og-mapa{max-width:1100px;margin:0 auto;display:grid;gap:22px}
.og-banda{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.og-banda .lbl{display:flex;align-items:center;gap:14px;padding:15px 24px;color:#fff}
.og-banda.est .lbl{background:var(--navy)}
.og-banda.mis .lbl{background:var(--yale)}
.og-banda.apo .lbl{background:var(--gris)}
.og-banda .lbl i{font-size:22px}
.og-banda .lbl h3{margin:0;color:#fff;font-size:17px}
.og-banda .lbl small{opacity:.88;font-size:12.5px;display:block}
.og-banda .lbl .cnt{margin-left:auto;font-family:'Red Hat Display',system-ui,sans-serif;font-weight:800;font-size:22px}
.og-banda .cuerpo{padding:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}

.og-proc{border:1px solid #eef1f6;border-radius:12px;padding:18px;transition:.22s}
.og-proc:hover{box-shadow:0 8px 22px rgba(0,31,71,.10);transform:translateY(-3px)}
.og-proc .cod{display:inline-block;background:var(--yale);color:#fff;font-weight:800;font-size:11px;border-radius:6px;padding:3px 9px;letter-spacing:.6px}
.og-proc h4{font-size:16px;margin:10px 0 6px;color:var(--navy)}
.og-proc .obj{font-size:13.5px;color:var(--gris);margin:0 0 14px;line-height:1.5}
.og-proc .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--gris);border-top:1px solid #f1f3f7;padding-top:12px}
.og-proc .meta b{color:var(--yale);font-family:'Red Hat Display',system-ui,sans-serif;font-size:15px}
.og-chip-area{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;margin-left:6px}

/* ---------- Áreas y liderazgo ---------- */
.og-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.og-area{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border-left:5px solid var(--yale)}
.og-area .cab{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.og-area .cab i{font-size:24px}
.og-area h3{margin:0;font-size:17.5px}
.og-area .prop{font-size:14px;color:var(--gris);line-height:1.55;margin:0 0 14px}
.og-area .procs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.og-area .procs span{background:rgba(0,59,130,.08);color:var(--yale);font-size:11px;font-weight:800;border-radius:6px;padding:3px 9px}
.og-area .lideres{border-top:1px solid #f1f3f7;padding-top:12px}
.og-area .lider{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px;font-size:13.5px}
.og-area .lider i{color:var(--yale);margin-top:3px}
.og-area .lider b{color:var(--navy);display:block}
.og-area .lider small{color:var(--gris)}
.og-area .vacio{font-size:13px;color:#9aa3ae;font-style:italic}

/* ---------- Del proceso al software ---------- */
.og-cobertura{max-width:1000px;margin:0 auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.og-cob-row{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 22px;border-bottom:1px solid #f1f3f7;align-items:center}
.og-cob-row:last-child{border-bottom:none}
.og-cob-row .quien b{display:block;color:var(--navy);font-size:14.5px}
.og-cob-row .quien small{color:var(--gris);font-size:12px}
.og-cob-mods{display:flex;gap:7px;flex-wrap:wrap}
.og-cob-mods span{background:rgba(0,59,130,.07);color:var(--yale);font-size:11.5px;font-weight:600;border-radius:6px;padding:4px 10px}
.og-cob-mods .sin{background:rgba(228,42,43,.09);color:var(--rojo);font-style:italic}

/* ---------- Avance por área ---------- */
.og-avance{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.og-av{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px}
.og-av .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.og-av .top b{font-size:15px;color:var(--navy)}
.og-av .top small{color:var(--gris);font-size:12.5px}
.og-abar{height:9px;border-radius:999px;background:#eef1f6;overflow:hidden;display:flex}
.og-abar .seg{height:100%}
.og-abar .seg.ok{background:#1e9e5a}
.og-abar .seg.par{background:var(--amarillo)}
.og-abar .seg.pen{background:var(--rojo)}
.og-av .pie{margin-top:9px;font-size:12.5px;color:var(--gris)}

/* ---------- Sedes ---------- */
.og-sedes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;max-width:1100px;margin:0 auto}
.og-sede{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-align:center;transition:.22s}
.og-sede:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,31,71,.12)}
.og-sede i{font-size:26px;color:var(--yale);margin-bottom:9px}
.og-sede b{display:block;font-size:15.5px;color:var(--navy)}
.og-sede small{color:var(--gris);font-size:12.5px}
.og-sede .ppal{display:inline-block;background:var(--amarillo);color:var(--navy);font-size:10.5px;font-weight:800;border-radius:999px;padding:2px 9px;margin-top:7px}

/* ---------- Descargas ---------- */
.og-dl{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.og-dl .btn i{font-size:17px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .og-cob-row{grid-template-columns:1fr;gap:10px}
  .og-banda .cuerpo{grid-template-columns:1fr}
}
@media(max-width:640px){
  .og-areas,.og-avance{grid-template-columns:1fr}
  .og-hero .stats-inline{gap:20px}
}

/* ---------- Versión PDF (standalone) ---------- */
.og-pdf .og-banda,.og-pdf .og-area,.og-pdf .og-av{break-inside:avoid;page-break-inside:avoid}
@page{size:A4;margin:12mm}