/* Leveragency · sección "Qué hacemos" — bento de productos.
   Todo scopeado bajo .sec-que-hacemos. Solo tokens. */

/* ---------- bento ---------- */
.sec-que-hacemos .qh-bento{display:grid;gap:12px;grid-template-columns:1fr}

/* tile */
.sec-que-hacemos .qh-t{display:flex;flex-direction:column;position:relative}
.sec-que-hacemos .qh-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.sec-que-hacemos .qh-ic{display:inline-flex;color:var(--tinta)}
.sec-que-hacemos .qh-ic svg{width:28px;height:28px}
.sec-que-hacemos .qh-t h3{font-size:clamp(21px,1.9vw,25px);margin-bottom:.35em}
.sec-que-hacemos .qh-t--wa h3{font-size:clamp(24px,2.5vw,31px)}
.sec-que-hacemos .qh-que{font-size:16.5px;line-height:1.45;color:var(--tinta-cuerpo);margin:0 0 16px;max-width:44ch}
.sec-que-hacemos .qh-bul{margin:0 0 20px}
.sec-que-hacemos .qh-bul li{font-size:15.5px;line-height:1.45;color:var(--tinta-cuerpo);margin-bottom:9px}
.sec-que-hacemos .qh-bul li:last-child{margin-bottom:0}

/* muestra de conversación (estática, sin animación) dentro del tile grande */
.sec-que-hacemos .qh-chat{margin:4px 0 22px;display:flex;flex-direction:column;gap:8px}
.sec-que-hacemos .qh-chat-e{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:0 0 4px}
.sec-que-hacemos .qh-b{max-width:min(100%,34ch);padding:9px 12px;border-radius:var(--r-2);font-size:15px;line-height:1.4;display:flex;align-items:flex-end;gap:10px}
.sec-que-hacemos .qh-b b{font-family:var(--fm);font-size:10px;font-weight:400;color:var(--gris);flex:none;letter-spacing:.04em;position:relative;top:-1px}
.sec-que-hacemos .qh-b--cli{background:var(--papel-bajo);border:1px solid var(--linea);align-self:flex-start;border-bottom-left-radius:2px}
.sec-que-hacemos .qh-b--age{background:var(--ambar-wash);border:1px solid var(--ambar-borde);align-self:flex-end;border-bottom-right-radius:2px}

.sec-que-hacemos .qh-sis{align-self:center;margin:4px 0 0;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);text-align:center}

/* nota de honestidad */
.sec-que-hacemos .qh-honesto{font-size:14.5px;line-height:1.45;color:var(--gris);margin:0 0 20px;max-width:38ch}

/* frase destacada (cita textual del brief): Fraunces itálica, sin ámbar */
.sec-que-hacemos .qh-frase{font-family:var(--fd);font-style:italic;font-variation-settings:'SOFT' 0,'WONK' 1;font-weight:600;font-size:clamp(17px,1.7vw,20px);line-height:1.35;letter-spacing:-.01em;color:var(--tinta);margin:0 0 14px;max-width:38ch;text-wrap:balance}
.sec-que-hacemos .qh-frase--lg{font-size:clamp(19px,2.1vw,24px);max-width:26ch}

/* pie: la acción de la tarjeta, pegada abajo */
.sec-que-hacemos .qh-pie{margin-top:auto;padding-top:16px;border-top:var(--borde)}
.sec-que-hacemos .qh-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:2px;font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);text-decoration:none}
.sec-que-hacemos .qh-link-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--linea-fuerte)}
.sec-que-hacemos .qh-fl{display:inline-block;transition:transform .25s var(--ease)}
.sec-que-hacemos .qh-link:hover{color:var(--ambar-texto)}
.sec-que-hacemos .qh-link:hover .qh-fl{transform:translateX(4px)}
.sec-que-hacemos .qh-link:hover .qh-link-t{text-decoration-color:var(--ambar)}
@media (prefers-reduced-motion:reduce){.sec-que-hacemos .qh-fl{transition:none}}

/* ---------- mini canvas de flujo ---------- */
.sec-que-hacemos .qh-flujo{display:grid;gap:22px}
.sec-que-hacemos .qh-flujo-viz{min-width:0}
.sec-que-hacemos .qh-canvas{width:100%;height:auto;max-width:440px;margin-inline:-6px}
.sec-que-hacemos .qh-lin path{stroke:var(--linea-fuerte);stroke-width:1.5;fill:none}
.sec-que-hacemos .qh-nodos rect{fill:var(--papel);stroke:var(--linea-fuerte);stroke-width:1.5}
.sec-que-hacemos .qh-lbl text{fill:var(--tinta);font-family:var(--fm);font-size:13.5px;letter-spacing:-.01em}
.sec-que-hacemos .qh-dash{fill:none;stroke:var(--ambar);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:16 434;stroke-dashoffset:0;animation:qh-flow 4.6s linear infinite}
@keyframes qh-flow{to{stroke-dashoffset:-450}}
@media (prefers-reduced-motion:reduce){.sec-que-hacemos .qh-dash{animation:none;stroke-dashoffset:-120}}

/* ---------- card ancha: Contenido y Meta Ads ---------- */
.sec-que-hacemos .qh-cont{display:grid;gap:22px}
.sec-que-hacemos .qh-cont-txt .qh-que{margin-bottom:0}

.sec-que-hacemos .qh-nota{margin-top:22px;max-width:64ch}

/* ---------- tablet ---------- */
@media (min-width:660px){
  .sec-que-hacemos .qh-bento{grid-template-columns:repeat(2,1fr);gap:14px;grid-auto-flow:dense}
  .sec-que-hacemos .qh-t--crm{grid-column:span 2}
  .sec-que-hacemos .qh-t--wa{grid-column:span 2}
  .sec-que-hacemos .qh-t--flujos{grid-column:span 2}
  .sec-que-hacemos .qh-flujo{grid-template-columns:1fr 1fr;align-items:center;gap:28px}
  .sec-que-hacemos .qh-t--cont{grid-column:span 2}
  .sec-que-hacemos .qh-cont{grid-template-columns:1.15fr 1fr;align-items:start;gap:28px}
}

/* ---------- desktop: bento de 6 columnas ---------- */
@media (min-width:980px){
  .sec-que-hacemos .qh-bento{grid-template-columns:repeat(6,1fr);gap:16px}
  .sec-que-hacemos .qh-t--wa{grid-column:span 3}
  .sec-que-hacemos .qh-t--web{grid-column:span 3}
  .sec-que-hacemos .qh-t--crm{grid-column:span 4}
  .sec-que-hacemos .qh-t--flujos{grid-column:span 6}
  .sec-que-hacemos .qh-t--voz{grid-column:span 2}
  .sec-que-hacemos .qh-t--cont{grid-column:span 6}
  .sec-que-hacemos .qh-t--wa .qh-cab{margin-bottom:26px}
  .sec-que-hacemos .qh-t--wa .qh-que{font-size:18px;max-width:36ch;margin-bottom:22px}
  .sec-que-hacemos .qh-t--wa .qh-bul li{font-size:16.5px;margin-bottom:16px}
  .sec-que-hacemos .qh-t--wa .qh-bul{margin-bottom:0}
  .sec-que-hacemos .qh-t--wa .qh-pie{margin-top:22px}
  .sec-que-hacemos .qh-flujo{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:30px}
  .sec-que-hacemos .qh-cont{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px}
  .sec-que-hacemos .qh-cont-bul{align-self:center}
}

/* ---- CRM: tablero animado (ronda 2) ---- */
.sec-que-hacemos .qh-crm{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:8px}
.sec-que-hacemos .qh-kanban{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:176px;padding-bottom:4px}
.sec-que-hacemos .qh-kcol{border:1px dashed var(--linea-fuerte);border-radius:var(--r-2);background:var(--papel);min-height:172px;padding:8px}
.sec-que-hacemos .qh-kh{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);line-height:1.3}
.sec-que-hacemos .qh-kchip{position:absolute;left:12px;width:calc(33.333% - 18px);display:flex;align-items:center;gap:6px;padding:7px 8px;border:var(--borde);border-radius:var(--r-1);background:var(--papel-alto);font-family:var(--fm);font-size:10.5px;line-height:1.2;color:var(--tinta);box-shadow:var(--sombra-baja);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-que-hacemos .qh-kchip i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ambar)}
.sec-que-hacemos .qh-kchip--1{top:44px;animation:qh-kmove 12s linear infinite}
.sec-que-hacemos .qh-kchip--2{top:84px;animation:qh-kmove 12s linear infinite;animation-delay:-4s}
.sec-que-hacemos .qh-kchip--3{top:124px;animation:qh-kmove 12s linear infinite;animation-delay:-8s}
@keyframes qh-kmove{
  0%{left:12px;opacity:0}
  4%{opacity:1}
  28%{left:12px}
  34%{left:calc(33.333% + 8px)}
  60%{left:calc(33.333% + 8px)}
  66%{left:calc(66.666% + 4px)}
  92%{left:calc(66.666% + 4px);opacity:1}
  97%{opacity:0}
  100%{left:calc(66.666% + 4px);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .sec-que-hacemos .qh-kchip{animation:none!important;opacity:1}
  .sec-que-hacemos .qh-kchip--2{left:calc(33.333% + 8px)}
  .sec-que-hacemos .qh-kchip--3{left:calc(66.666% + 4px)}
}
@media (min-width:660px){
  .sec-que-hacemos .qh-crm{gap:22px}
  .sec-que-hacemos .qh-kanban{min-height:186px}
}
@media (max-width:520px){
  .sec-que-hacemos .qh-kx{display:none}
  .sec-que-hacemos .qh-kchip{padding:7px 6px}
}