/* ---------------- Hero con fondo animado ---------------- */
.qs-hero{
  position:relative; overflow:hidden; margin:20px 28px 0; border-radius:18px;
  min-height:440px; display:flex; align-items:center; background:var(--ink);
}
.qs-canvas{ position:absolute; inset:0; width:100%; height:100%; filter:blur(46px); opacity:.85; }
.qs-hero-content{ position:relative; z-index:2; padding:64px 48px; color:#fff; }
.qs-titulo{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,4.4rem); line-height:.95; margin:10px 0 18px; color:#fff;
}
.hero-desc{ max-width:56ch; }
/* Solo con html.qs-anima (la pone el <head> si no hay movimiento
   reducido): sin JS el contenido nunca queda invisible. */
.qs-anima .qs-fade{ opacity:0; transform:translateY(16px); }

@media (max-width:760px){
  .qs-hero{ margin:12px 12px 0; min-height:380px; }
  .qs-hero-content{ padding:40px 26px; }
}

/* ---------------- Tilt 3D ligero ---------------- */
.qs-tilt{ perspective:800px; }
.qs-tilt > *{ transition:transform .15s ease, box-shadow .15s ease; transform-style:preserve-3d; will-change:transform; }
.qs-anima .qs-reveal{ opacity:0; transform:translateY(24px); }

/* ---------------- Módulos ---------------- */
.qs-modulos{ padding:80px 0; }
.qs-modulos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .qs-modulos-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .qs-modulos-grid{ grid-template-columns:1fr; } }
.qs-modulo-card{
  background:#fff; border-radius:14px; padding:24px; height:100%;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.4);
}
.qs-modulo-kicker{ font-size:.72rem; font-weight:600; color:var(--magenta-dark); text-transform:uppercase; letter-spacing:.06em; }
.qs-modulo-card h3{ font-size:1.05rem; margin:8px 0 8px; }
.qs-modulo-card p{ font-size:.86rem; color:var(--text-soft); }

/* ---------------- Personas (directivos / encargados) ---------------- */
.qs-directivos{ padding:20px 0 80px; background:var(--paper-2); }
.qs-encargados{ padding:80px 0; }
.qs-personas-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:10px; }
.qs-personas-grid-sm{ grid-template-columns:repeat(5,1fr); margin-bottom:44px; }
@media (max-width:980px){ .qs-personas-grid, .qs-personas-grid-sm{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .qs-personas-grid, .qs-personas-grid-sm{ grid-template-columns:repeat(2,1fr); } }

.qs-persona-card{
  background:#fff; border-radius:14px; padding:22px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px; height:100%;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.35);
}
.qs-persona-card strong{ font-size:.92rem; margin-top:10px; }
.qs-persona-card span{ font-size:.76rem; color:var(--text-soft); }
.qs-persona-card .qs-persona-direccion{ color:var(--magenta-dark); font-weight:600; } /* especificidad > .qs-persona-card span */

.qs-avatar{
  width:76px; height:76px; border-radius:50%; overflow:hidden; flex:none;
  background:linear-gradient(135deg,var(--magenta),var(--orange));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.8rem;
}
.qs-avatar img{ width:100%; height:100%; object-fit:cover; }
/* Más específico que .qs-persona-card span (el texto del cargo), que si no
   también pintaba las iniciales en gris y chico. */
.qs-persona-card .qs-avatar span{ font-family:'Oswald',sans-serif; font-weight:600; font-size:inherit; letter-spacing:.02em; line-height:1; color:inherit; }
/* Cargo sin persona asignada: neutro, sin el degradado de marca. */
.qs-avatar--vacante{ background:var(--paper-2); color:var(--text-soft); border:1px dashed var(--line); }
.qs-por-designar{ color:var(--text-soft); font-weight:500; }
.qs-avatar-sm{ width:58px; height:58px; font-size:1.3rem; }
.qs-persona-card-sm{ padding:16px 12px; }
.qs-persona-card-sm strong{ font-size:.82rem; }
.qs-persona-card-sm span{ font-size:.7rem; }

.qs-area-titulo{ font-family:'Work Sans',sans-serif; font-weight:600; font-size:1rem; margin:0 0 14px; color:var(--ink); }