/* ============================================================
   WofferLab — Página "Qué somos"
   Comparte el sistema (atoms, backdrop, actos estáticos/flow,
   menú, i18n) con style.css, menu.css y servicios.css; aquí solo
   lo propio de las seis secciones de esta página.
   Tipos: Poppins (display) / Inter (cuerpo) / IBM Plex Mono (labels).
   ============================================================ */

/* ============ HERO ============ */
.qs-hero{
  text-align:left;display:flex;flex-direction:column;align-items:flex-start;
  max-width:min(980px,92vw);
}
.qs-hero .display{margin-top:18px;max-width:15ch}
.qs-hero .lead{max-width:52ch;margin-top:24px}
.qs-hero__row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.qs-hero__meta{
  display:flex;flex-wrap:wrap;gap:0 26px;
  margin-top:42px;padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
  list-style:none;
}
.qs-hero__meta li{position:relative;padding:6px 0}
.qs-hero__meta li:not(:last-child)::after{   /* al final del ítem: si la lista envuelve, el punto no abre línea */
  content:"";position:absolute;right:-13px;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--accent);
  transform:translateY(-50%);
}

/* ============ QUIÉNES SOMOS — intro + 3 pilares editoriales ============ */
.qs-model{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,80px);
  align-items:start;width:100%;
}
.qs-model__intro .display{max-width:13ch}
.qs-model__intro .lead{margin-top:22px;max-width:38ch}
.qs-pillars{display:grid;gap:0}
.qs-pillar{
  --num-color:var(--accent);
  position:relative;overflow:visible;
  border-top:1px solid var(--line);
  padding:28px clamp(0px,1.4vw,12px) 28px clamp(0px,1.4vw,20px);
}
.qs-pillar::before{
  content:attr(data-num);
  position:absolute;right:2px;top:20px;
  font-family:var(--font-d);font-weight:800;font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:1;letter-spacing:-.04em;color:var(--ink);opacity:.07;
  pointer-events:none;
}
.qs-pillar::after{
  content:"";position:absolute;left:0;top:-1px;width:46px;height:2px;
  background:var(--num-color);
}
.qs-pillar__tag{
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--num-color);
}
.qs-pillar__h{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.1rem);
  letter-spacing:-.02em;line-height:1.1;margin:12px 0 12px;
}
.qs-pillar__t{color:var(--ink-dim);line-height:1.6;max-width:52ch}
.qs-quote{
  position:relative;
  margin-top:28px;padding:22px 0 22px 28px;
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.25rem,1.85vw,1.7rem);
  line-height:1.25;letter-spacing:-.014em;color:var(--ink);
}
.qs-quote::before{
  content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;
  background:var(--accent);
}

/* ============ DÓNDE ACTUAMOS — 4 columnas de departamento ============ */
.qs-depts-wrap{width:100%;max-width:1240px;margin:0 auto}
.qs-depts__head{max-width:760px;margin-bottom:clamp(30px,5vh,58px)}
.qs-depts__head .display{margin-top:14px}
.qs-depts__head .lead{margin-top:18px;max-width:56ch}
.qs-depts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
}
.qs-dept{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,1.8vw,26px);
  display:flex;flex-direction:column;gap:16px;
}
.qs-dept__name{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);
  letter-spacing:-.01em;color:var(--ink);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.qs-dept__list{display:flex;flex-direction:column;gap:12px;list-style:none}
.qs-dept__list li{
  position:relative;padding-left:20px;
  color:var(--ink-dim);font-size:.96rem;line-height:1.45;
}
.qs-dept__list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:9px;height:1px;background:var(--accent);
}

/* ============ POR QUÉ WOFFERLAB — tabla comparativa ============ */
.qs-why{width:100%;max-width:1080px;margin:0 auto}
.qs-why__head{max-width:820px;margin-bottom:clamp(28px,4vh,50px)}
.qs-why__head .display{margin-top:14px}
.qs-compare{
  display:grid;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.qs-compare__row{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr);
  align-items:center;
  gap:clamp(10px,2vw,28px);
  padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,26px);
  border-top:1px solid var(--line);
}
.qs-compare__row:first-child{border-top:0}
.qs-compare__row--head{
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);background:rgba(255,255,255,.015);
}
.qs-compare__label{
  font-family:var(--font-d);font-weight:600;color:var(--ink);
  font-size:clamp(.95rem,1.2vw,1.08rem);letter-spacing:-.01em;
}
.qs-compare__a{color:var(--ink-faint);font-size:.98rem;line-height:1.4}
.qs-compare__b{
  color:var(--ink);font-size:.98rem;line-height:1.4;font-weight:500;
  position:relative;padding-left:16px;
}
.qs-compare__b::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.qs-compare__row--head .qs-compare__a,
.qs-compare__row--head .qs-compare__b{color:var(--ink-faint);font-weight:500;padding-left:0}
.qs-compare__row--head .qs-compare__b{color:var(--accent)}
.qs-compare__row--head .qs-compare__b::before{display:none}

/* ============ ENCAJE — dos columnas (sí / no) ============ */
.qs-fit-wrap{width:100%;max-width:1080px;margin:0 auto}
.qs-fit__head{max-width:760px;margin-bottom:clamp(26px,4vh,46px)}
.qs-fit__head .display{margin-top:14px}
.qs-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.qs-fit__col{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.2vw,32px);
}
.qs-fit__col--yes{border-top:2px solid var(--ok, #8fcaa0)}
.qs-fit__col--no{border-top:2px solid var(--err, #e0746a)}
.qs-fit__title{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.4rem);
  letter-spacing:-.015em;color:var(--ink);margin-bottom:20px;
}
.qs-fit__list{display:flex;flex-direction:column;gap:14px;list-style:none}
.qs-fit__list li{
  position:relative;padding-left:26px;
  color:var(--ink-dim);line-height:1.5;
}
.qs-fit__list li::before{
  content:"";position:absolute;left:0;top:.15em;
  width:16px;height:16px;border-radius:50%;
  background:rgba(143,202,160,.14);
  border:1px solid rgba(143,202,160,.5);
}
.qs-fit__list li::after{
  content:"";position:absolute;left:5px;top:.5em;
  width:6px;height:6px;border-radius:50%;background:var(--ok, #8fcaa0);
}
.qs-fit__list--no li::before{background:rgba(224,116,106,.12);border-color:rgba(224,116,106,.5)}
.qs-fit__list--no li::after{background:var(--err, #e0746a)}

/* ============ CTA FINAL ============ */
.qs-end{max-width:760px}
.qs-end .display{margin-top:14px}
.qs-end .lead{margin:20px auto 0;max-width:44ch}
.qs-end .btn{margin-top:32px}

/* ============ RESPONSIVE ============ */
@media (max-width:920px){
  .qs-model{grid-template-columns:1fr;gap:30px}
  .qs-depts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qs-hero__meta{gap:0 18px}
  .qs-hero .display,.qs-model__intro .display{max-width:none}
}
@media (max-width:640px){
  .qs-depts{grid-template-columns:1fr}
  .qs-fit{grid-template-columns:1fr}
  .qs-compare__row{grid-template-columns:1fr;gap:6px}
  .qs-compare__row--head{display:none}
  .qs-compare__a{color:var(--ink-faint)}
  .qs-compare__a::before{content:"Consultora: ";color:var(--ink-faint);font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
  .qs-compare__b{padding-left:0}
  /* la etiqueta va DELANTE del valor: con ::after salía «8–12 semanasWofferLab:» */
  .qs-compare__b::before{
    content:"WofferLab: ";position:static;width:auto;height:auto;background:none;box-shadow:none;border-radius:0;
    color:var(--accent);font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  }
}

/* escenas pinned (escritorio): H1 en 3 líneas y aire proporcional a la altura */
@media (min-width:921px) and (prefers-reduced-motion:no-preference){
  .qs-hero .display{max-width:20ch}
  .qs-pillar{padding-top:clamp(14px,2.8vh,28px);padding-bottom:clamp(14px,2.8vh,28px)}
  .qs-pillar__h{margin:clamp(6px,1.2vh,12px) 0}
  .qs-quote{margin-top:clamp(12px,2.6vh,28px);padding:clamp(10px,2vh,22px) 0 clamp(10px,2vh,22px) 28px}
}

/* ---- banda de resultados (cifras) ---- */
.qs-results{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(14px,1.8vw,22px);margin-top:clamp(26px,4vh,44px);width:100%;
}
.qs-stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:10px;
}
.qs-stat b{
  font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(2.6rem,5vw,3.8rem);color:var(--accent);font-variant-numeric:tabular-nums;
}
.qs-stat span{font-family:var(--font-b);color:var(--ink-dim);line-height:1.5;font-size:.98rem}
.qs-results__note{
  margin-top:clamp(16px,2.4vh,26px);font-family:var(--font-m);font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-faint);max-width:80ch;line-height:1.6;
}

/* ============ móvil: hueco muerto bajo el hero ============ */
@media(max-width:920px){
  /* El hero cabe de sobra en la pantalla: el min-height:100dvh de style.css
     dejaba 253 px vacíos antes de «01 · Quiénes somos». */
  /* sin cue (solo lo lleva el home), así que tampoco necesita el padding
     inferior que style.css reserva para él: ese resto abría otros 100 px */
  .act--hero:has(.qs-hero) .act__frame{min-height:0;padding-bottom:clamp(56px,9vh,86px)}
}