.band.blue .sec-head h2,.band.blue .sec-head p{color:#fff}

.band.blue .eyebrow{color:oklch(0.9 0.05 255)}

.band.blue .sec-head p{opacity:.86}


/* ============================ HOW (3 cards) ============================ */

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
  position:relative;overflow:hidden;
}

.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue-100)}

.card .badge{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--blue-50);color:var(--brand);
}

.card .badge .material-symbols-rounded{font-size:28px;font-variation-settings:'FILL' 1,'wght' 500}

.card.red .badge{background:var(--red-100);color:var(--red-600)}

.card h3{font-size:21px;margin-bottom:9px}

.card p{font-size:15px;color:var(--ink-700)}

.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;font-size:14.5px;color:var(--brand)}

.card .more .material-symbols-rounded{font-size:18px;transition:transform .25s}

.card:hover .more .material-symbols-rounded{transform:translateX(4px)}


/* ============================ FLOW (scan/read/act) ============================ */

.flow{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center;margin-top:56px}

.steps{display:flex;flex-direction:column;gap:14px}

.step{
  display:flex;gap:18px;padding:20px;border-radius:var(--r-lg);cursor:pointer;
  background:transparent;border:1px solid transparent;transition:.3s var(--ease);
}

.step:hover{background:var(--surface);border-color:var(--line)}

.step.active{background:var(--surface);border-color:var(--blue-100);box-shadow:var(--shadow-md)}

.step .num{
  flex-shrink:0;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-family:"Bricolage Grotesque";font-weight:700;font-size:18px;
  background:var(--blue-50);color:var(--brand);transition:.3s;
}

.step.active .num{background:var(--brand);color:#fff;box-shadow:var(--shadow-blue)}

.step h4{font-size:18px;display:flex;align-items:center;gap:9px}

.step h4 .material-symbols-rounded{font-size:20px;color:var(--brand)}

.step p{font-size:14.5px;color:var(--ink-700);margin-top:5px}

.flow-visual{
  position:relative;background:linear-gradient(160deg,var(--blue-50),var(--surface));
  border:1px solid var(--line);border-radius:var(--r-2xl);padding:40px;min-height:420px;
  display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow-sm);
}

.fv-pane{position:absolute;inset:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;opacity:0;transform:translateY(14px) scale(.98);transition:.45s var(--ease);pointer-events:none}

.fv-pane.show{opacity:1;transform:none}

.fv-ic{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-md);color:var(--brand)}

.fv-ic .material-symbols-rounded{font-size:46px;font-variation-settings:'FILL' 1}

.fv-pane.act .fv-ic{color:var(--red-600)}

.fv-pane h4{font-size:23px}

.fv-pane p{font-size:15px;color:var(--ink-700);max-width:300px}

.fv-mini{display:flex;gap:8px;margin-top:6px}

.fv-mini span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--line);padding:7px 12px;border-radius:999px;color:var(--ink-700)}

.fv-mini .material-symbols-rounded{font-size:15px;color:var(--brand)}

.scanline{position:absolute;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,var(--red-500),transparent);box-shadow:0 0 14px var(--red-500);border-radius:2px;animation:scan 2.4s var(--ease) infinite}

@keyframes scan{0%,100%{top:30%}50%{top:70%}}


/* ============================ FEATURES GRID ============================ */

.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}

.feat{
  background:oklch(1 0 0 /.06);border:1px solid oklch(1 0 0 /.14);border-radius:var(--r-md);
  padding:24px;transition:.3s var(--ease);
}

.feat:hover{background:oklch(1 0 0 /.12);transform:translateY(-4px)}

.feat .fi{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:oklch(1 0 0 /.16);margin-bottom:16px}

.feat .fi .material-symbols-rounded{font-size:24px;color:#fff;font-variation-settings:'FILL' 1,'wght' 500}

.feat h4{color:#fff;font-size:17px;margin-bottom:6px}

.feat p{font-size:13.5px;color:oklch(0.92 0.03 255 /.82)}


/* ============================ SPLIT (personas / mascotas) ============================ */

.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:54px}

.panel{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;padding:42px;min-height:340px;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
  box-shadow:var(--shadow-md);transition:transform .4s var(--ease);
}

.panel:hover{transform:translateY(-6px)}

.panel.people{background:linear-gradient(155deg,var(--blue-500),var(--blue-700))}

.panel.pets{background:linear-gradient(155deg,var(--red-500),var(--red-600))}