/* Leveragency · Web v2 · sección PROBALO — todo scopeado bajo .sec-probalo.
   Reusa base.css: .card .check .btn .tag .disclaimer .eyebrow .mono. No redefine nada de eso. */

/* ---------- selector segmentado ---------- */
.sec-probalo .pb-tablist{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
  padding:4px;background:var(--papel-alto);border:1.5px solid var(--linea-fuerte);border-radius:var(--r-2)}
.sec-probalo .pb-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:60px;padding:10px 6px;border-radius:var(--r-1);text-align:center;
  transition:background .22s var(--ease),color .22s var(--ease)}
.sec-probalo .pb-tab-n{
  font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;color:var(--gris);line-height:1}
.sec-probalo .pb-tab-l{
  font-size:13.5px;font-weight:600;line-height:1.15;color:var(--tinta-cuerpo);letter-spacing:-.005em}
.sec-probalo .pb-tab:hover{background:var(--papel-bajo)}
.sec-probalo .pb-tab[aria-selected="true"]{background:var(--tinta)}
.sec-probalo .pb-tab[aria-selected="true"]:hover{background:var(--tinta)}
.sec-probalo .pb-tab[aria-selected="true"] .pb-tab-l{color:var(--papel)}
.sec-probalo .pb-tab[aria-selected="true"] .pb-tab-n{color:var(--linea-fuerte)}

/* ---------- panel ---------- */
.sec-probalo .pb-panel{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px);
  margin-top:clamp(24px,3vw,32px);padding-top:clamp(26px,3.4vw,40px);border-top:var(--borde)}
.sec-probalo .pb-col{min-width:0}
.sec-probalo .pb-panel[hidden]{display:none!important}
.sec-probalo .pb-panel:focus-visible{outline-offset:6px}
.sec-probalo .pb-panel h3{margin-bottom:.6em;max-width:19ch}
.sec-probalo .pb-intro{max-width:44ch;margin:0 0 22px;color:var(--tinta-cuerpo);font-size:16.5px;line-height:1.5}
.sec-probalo .pb-check li{font-size:16.5px;line-height:1.45;margin-bottom:13px}
.sec-probalo .pb-cta{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:26px}
.sec-probalo .pb-disc{margin-top:22px}
/* .disclaimer es display:flex en base y le gana al [hidden] del navegador */
.sec-probalo .pb-disc[hidden]{display:none}
.sec-probalo .pb-pie{margin-top:clamp(36px,5vw,56px)}

/* etiqueta de bloque (capa instrumento) */
.sec-probalo .pb-k{
  font-family:var(--fm);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);margin:0 0 14px}

/* ---------- fallback de demo (si el componente todavía no está) ---------- */
.sec-probalo .pb-fb{display:grid;gap:12px}
.sec-probalo .pb-fb-k{
  font-family:var(--fm);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);margin:0}
.sec-probalo .pb-fb-t{margin:0;font-size:16px;color:var(--tinta);font-weight:600;line-height:1.35;max-width:34ch}
.sec-probalo .pb-fb-l{margin:2px 0 0}
.sec-probalo .pb-fb-l li{font-size:15px;margin-bottom:9px;color:var(--tinta-cuerpo)}
.sec-probalo .pb-fb-l li:last-child{margin-bottom:0}

/* ---------- 02 · agente de voz ---------- */
/* una sola columna, centrada: la demo en vivo es lo unico que vive en esta solapa */
.sec-probalo .pb-voz-centro{max-width:560px;margin-inline:auto;text-align:center;min-width:0}
.sec-probalo .pb-voz-centro h3{max-width:none;margin-inline:auto}
.sec-probalo .pb-voz-centro .pb-intro{max-width:46ch;margin-inline:auto}
.sec-probalo .pb-voz-vivo{margin-top:4px;min-width:0;text-align:left}
.sec-probalo .pb-voz-centro .pb-disc{text-align:left;margin-inline:auto}
.sec-probalo .pb-fb-n{margin:0;font-size:15px;color:var(--gris);line-height:1.45}
.sec-probalo .pb-probar{display:grid;gap:16px}
.sec-probalo .pb-probar .btn{width:100%}
.sec-probalo .pb-probar-nota{margin:0;color:var(--gris)}

/* ---------- 03 · CRM ---------- */
.sec-probalo .probalo-crm,.sec-probalo .probalo-wa{min-width:0}

/* ---------- 640 ---------- */
@media (min-width:640px){
  .sec-probalo .pb-tab{min-height:64px}
  .sec-probalo .pb-tab-l{font-size:15px}
}

/* ---------- 760: el segmentado deja de ocupar todo el ancho ---------- */
@media (min-width:760px){
  .sec-probalo .pb-tablist{display:inline-grid;grid-template-columns:repeat(3,minmax(168px,auto))}
  .sec-probalo .pb-tab{flex-direction:row;gap:10px;min-height:56px;padding:10px 20px}
  .sec-probalo .pb-tab-n{opacity:.85}
}

/* ---------- 1024: dos columnas en WA y CRM ---------- */
@media (min-width:1024px){
  .sec-probalo .pb-panel--wa{grid-template-columns:minmax(0,1fr) minmax(360px,470px);align-items:center;
    gap:clamp(40px,5vw,72px)}
  .sec-probalo .pb-panel--wa .pb-col{align-self:center}
  .sec-probalo .pb-panel--crm{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;
    gap:clamp(32px,4vw,56px)}
  /* el mockup va centrado al lado del texto (ronda 2) */
  .sec-probalo .pb-col--crm{display:flex;justify-content:center}
  .sec-probalo .pb-col--crm>*{max-width:100%}
  .sec-probalo .pb-panel--crm h3{max-width:17ch}
}

@media (prefers-reduced-motion:reduce){
  .sec-probalo .pb-tab{transition:none}
}