/* =====================================================================
   SAEF Soluciones Administrativas
   que-hacemos.css - conmutador de familias y panel de temas
   Extraido tal cual de la cola del <style> de SAEF_Que_Hacemos.html. NINGUNA REGLA FUE MODIFICADA.
   ===================================================================== */
/* ============================================================
   PÁGINA QUÉ HACEMOS
   ============================================================ */
body.qhbody{background:#F5F8FB}
.qhead{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(165deg,#0E2440 0%,#0B1E36 52%,#08192E 100%);
  padding:calc(var(--nav-h) + clamp(38px,6vh,72px)) clamp(20px,4vw,64px) clamp(44px,6.5vh,80px);
}
.qhead__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(820px 440px at 86% 8%, rgba(0,132,180,.26) 0%, transparent 62%),
    radial-gradient(700px 420px at 2% 96%, rgba(240,122,45,.15) 0%, transparent 64%);
}
.qhead__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.1;
  background-image:linear-gradient(rgba(79,195,232,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(79,195,232,.35) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(760px 460px at 28% 20%, #000 0%, transparent 76%);
  -webkit-mask-image:radial-gradient(760px 460px at 28% 20%, #000 0%, transparent 76%);
}
.qhead__in{position:relative;z-index:4;max-width:1280px;margin:0 auto}
.qhead h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(29px,4vw,52px);line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;max-width:18ch;
}
.qhead h1 .hl{color:var(--orange-500)}
.qhead p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.72;font-weight:300;color:rgba(255,255,255,.74);max-width:620px}

/* ---------- conmutador de familias ---------- */
.qwrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.fam{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(-34px,-3.4vh,-26px);position:relative;z-index:5;
}
.fam button{
  position:relative;
  display:flex;align-items:center;gap:15px;text-align:left;cursor:pointer;
  border:1px solid #E7EDF4;border-radius:18px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
  box-shadow:0 16px 40px rgba(6,20,38,.14);
  /* lavado de color que barre de izquierda a derecha al pasar el cursor */
  background:linear-gradient(115deg,rgba(240,122,45,.14) 0%,rgba(0,132,180,.12) 100%) left center no-repeat, #fff;
  background-size:0% 100%, 100% 100%;
  transition:
    background-size .55s cubic-bezier(.65,0,.35,1),
    transform .38s cubic-bezier(.34,1.4,.5,1),
    box-shadow .38s ease,
    border-color .38s ease,
    background-color .38s ease;
}
.fam button:hover{
  transform:translateY(-5px);
  border-color:rgba(240,122,45,.5);
  box-shadow:0 22px 46px rgba(6,20,38,.18);
  background-size:100% 100%, 100% 100%;
}
.fam button:focus-visible{outline:3px solid rgba(79,195,232,.55);outline-offset:3px}
.fam button.is-on{
  background:linear-gradient(150deg,#12293F 0%,#0B1E36 62%,#08192E 100%) left center no-repeat, var(--navy-900);
  background-size:100% 100%, 100% 100%;
  border-color:transparent;
  box-shadow:0 24px 54px rgba(6,20,38,.34);
  transform:translateY(-2px);
}
/* barra de acento: insinúa al pasar el cursor, se completa al activarse */
.fam button::after{
  content:'';position:absolute;left:clamp(20px,2.2vw,30px);right:clamp(20px,2.2vw,30px);bottom:9px;
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--orange-500),var(--cyan-300));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.fam button:hover::after{transform:scaleX(.34)}
.fam button.is-on::after{transform:scaleX(1)}

.fam__ico{
  position:relative;
  width:52px;height:52px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:#FFF1E6;
  transition:background .38s ease, box-shadow .38s ease, transform .45s cubic-bezier(.34,1.4,.5,1);
}
.fam button:hover .fam__ico{transform:translateY(-2px) rotate(-5deg)}
.fam button.is-on .fam__ico{
  background:linear-gradient(140deg,var(--orange-500),var(--orange-600));
  box-shadow:0 10px 24px rgba(222,106,30,.45);
}
/* pulso que late mientras la familia está abierta */
.fam button.is-on .fam__ico::after{
  content:'';position:absolute;inset:0;border-radius:14px;
  border:2px solid rgba(240,122,45,.55);
  animation:pulsoFam 2.8s cubic-bezier(.35,0,.25,1) infinite;
}
@keyframes pulsoFam{
  0%{transform:scale(1);opacity:.75}
  65%{transform:scale(1.4);opacity:0}
  100%{transform:scale(1.4);opacity:0}
}
.fam__ico svg{
  width:24px;height:24px;fill:none;stroke:var(--orange-500);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .38s ease, transform .45s cubic-bezier(.34,1.4,.5,1);
}
.fam button:hover .fam__ico svg{transform:scale(1.12)}
.fam button.is-on .fam__ico svg{stroke:#fff;transform:none}

.fam__tx{min-width:0}
.fam__tx b{
  display:block;font-family:var(--display);font-size:clamp(16px,1.5vw,20px);font-weight:700;
  letter-spacing:-.018em;color:var(--ink);margin-bottom:3px;transition:color .34s ease;
}
.fam__tx span{display:block;font-size:12.8px;line-height:1.5;color:#7A8B9D;transition:color .34s ease}
.fam button.is-on .fam__tx b{color:#fff}
.fam button.is-on .fam__tx span{color:rgba(255,255,255,.66)}

/* contador + flecha a la derecha */
.fam__n{
  margin-left:auto;flex-shrink:0;
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.05em;
  color:#93A3B5;background:#F4F7FA;border:1px solid #E7EDF4;
  padding:5px 11px;border-radius:100px;white-space:nowrap;
  transition:all .38s ease;
}
.fam button:hover .fam__n{color:var(--orange-600);background:#FFF1E6;border-color:rgba(240,122,45,.35)}
.fam button.is-on .fam__n{color:#fff;background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.2)}
.fam__go{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:#F4F7FA;
  transition:transform .45s cubic-bezier(.34,1.4,.5,1), background .38s ease;
}
.fam__go svg{
  width:14px;height:14px;fill:none;stroke:#93A3B5;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .38s ease;
}
.fam button:hover .fam__go{transform:translateX(5px);background:#FFF1E6}
.fam button:hover .fam__go svg{stroke:var(--orange-500)}
.fam button.is-on .fam__go{transform:rotate(90deg);background:rgba(255,255,255,.15)}
.fam button.is-on .fam__go svg{stroke:#fff}

/* las pestañas entran escalonadas cuando cambia la familia */
@keyframes entraTab{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.qtabs.is-fresca button{animation:entraTab .44s cubic-bezier(.33,0,.2,1) backwards}
.qtabs.is-fresca button:nth-child(1){animation-delay:.02s}
.qtabs.is-fresca button:nth-child(2){animation-delay:.07s}
.qtabs.is-fresca button:nth-child(3){animation-delay:.12s}
.qtabs.is-fresca button:nth-child(4){animation-delay:.17s}
.qtabs.is-fresca button:nth-child(5){animation-delay:.22s}

@media (prefers-reduced-motion:reduce){
  .fam button,.fam__ico,.fam__ico svg,.fam__go,.fam button::after{transition:none}
  .fam button.is-on .fam__ico::after{animation:none}
  .qtabs.is-fresca button{animation:none}
}

/* ---------- pestañas + panel ---------- */
.qpanel{
  display:grid;grid-template-columns:290px minmax(0,1fr);gap:clamp(22px,2.6vw,40px);
  margin-top:clamp(26px,3.4vh,42px);align-items:start;
}
.qtabs{display:grid;gap:7px;align-content:start;position:sticky;top:calc(var(--nav-h) + 18px)}
.qtabs button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid #E7EDF4;border-radius:13px;
  padding:15px 17px;
  font-family:var(--display);font-size:14.2px;font-weight:600;color:#54697E;letter-spacing:-.012em;
  transition:all .28s cubic-bezier(.34,1.4,.5,1);
}
.qtabs button:hover{border-color:rgba(240,122,45,.45);color:var(--ink);transform:translateX(3px)}
.qtabs button.is-on{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.qtabs button i{
  font-style:normal;font-size:11px;font-weight:700;color:#B0BECD;
  background:#F4F7FA;border-radius:6px;padding:3px 7px;flex-shrink:0;transition:all .28s ease;
}
.qtabs button.is-on i{background:rgba(255,255,255,.14);color:rgba(255,255,255,.7)}

.qcont{
  background:#fff;border:1px solid #E7EDF4;border-radius:20px;
  padding:clamp(26px,3vw,42px);box-shadow:0 14px 38px rgba(16,40,70,.07);
  min-height:420px;
}
.qcont.is-swap{opacity:0}
.qcont{transition:opacity .26s ease}
.qcont__tag{
  display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-600);margin-bottom:13px;
}
.qcont h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.3vw,32px);line-height:1.2;letter-spacing:-.026em;color:var(--ink);margin-bottom:12px;
}
.qcont__lead{font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.72;font-weight:300;color:#56697D;margin-bottom:26px;max-width:60ch}
.qcols{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,2.6vw,40px)}
.qcol__t{
  display:block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px;
}
.qcol--a .qcol__t{color:var(--blue-500)}
.qcol--b .qcol__t{color:var(--orange-600)}
.qcol ul{list-style:none}
.qcol li{position:relative;padding-left:25px;margin-bottom:11px;font-size:14.2px;line-height:1.6;font-weight:300;color:#3F5468}
.qcol--a li::before{
  content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--blue-500);box-shadow:0 0 0 4px rgba(0,132,180,.13);
}
.qcol--b li::before{
  content:'';position:absolute;left:2px;top:4px;width:13px;height:13px;
  background:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23DE6A1E' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.qnota{
  margin-top:24px;padding:16px 20px;border-radius:14px;
  background:#F7FAFD;border:1px solid #E4EBF2;border-left:3px solid var(--blue-500);
  font-size:13.4px;line-height:1.62;font-weight:300;color:#56697D;
}
.qnota b{font-weight:600;color:var(--ink)}

/* retícula de módulos */
.qmods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.qmod{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:15px 8px;border-radius:13px;background:#F7F9FC;border:1px solid #E7EDF4;
  transition:all .3s cubic-bezier(.34,1.4,.5,1);
}
.qmod:hover{transform:translateY(-4px);border-color:rgba(240,122,45,.42);background:#fff;box-shadow:0 12px 26px rgba(16,40,70,.09)}
.qmod img{width:34px;height:auto;display:block}
.qmod b{font-family:var(--display);font-size:11.6px;font-weight:600;text-align:center;line-height:1.25;color:#3F5468}

/* ---------- bloque destacado ---------- */
.qdest{
  margin:clamp(34px,5vh,60px) 0 clamp(30px,4vh,48px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,3.4vw,52px);align-items:center;
  background:linear-gradient(155deg,#0E2440 0%,#143054 58%,#1C4272 100%);
  color:#fff;border-radius:22px;padding:clamp(28px,3.4vw,48px);
  position:relative;overflow:hidden;
}
.qdest::before{
  content:'';position:absolute;right:-80px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,122,45,.2) 0%,transparent 68%);
}
.qdest__tx{position:relative;z-index:2}
.qdest__flag{
  display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,var(--orange-500),var(--orange-600));
  padding:6px 13px;border-radius:100px;margin-bottom:16px;
}
.qdest h2{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.4vw,33px);line-height:1.18;letter-spacing:-.026em;margin-bottom:14px}
.qdest h2 .hl{color:var(--orange-500)}
.qdest p{font-size:15px;line-height:1.72;font-weight:300;color:rgba(255,255,255,.76);margin-bottom:22px}
.qdest__l{position:relative;z-index:2;list-style:none;display:grid;gap:11px}
.qdest__l li{display:flex;gap:12px;align-items:flex-start;font-size:14.2px;line-height:1.55;font-weight:300;color:rgba(255,255,255,.84)}
.qdest__l i{
  width:23px;height:23px;border-radius:50%;flex-shrink:0;margin-top:1px;font-style:normal;
  background:rgba(240,122,45,.2);border:1px solid rgba(240,122,45,.45);
  display:grid;place-items:center;font-size:12px;color:var(--orange-400);font-weight:700;
}

@media (max-width:1040px){
  .qpanel{grid-template-columns:1fr}
  .qtabs{position:static;grid-template-columns:repeat(2,1fr)}
  .qcols{grid-template-columns:1fr}
  .qdest{grid-template-columns:1fr}
  .qmods{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .fam__n{display:none}
}
@media (max-width:620px){
  .fam{grid-template-columns:1fr}
  .fam button{gap:12px;padding:16px 18px}
  .fam__ico{width:44px;height:44px;border-radius:12px}
  .fam__ico svg{width:21px;height:21px}
  .qtabs{grid-template-columns:1fr}
  .qmods{grid-template-columns:repeat(2,1fr)}
}