/* ============================================================
   Caso de exito: Apárkate
   CSS acotado bajo .webble-case: agencia-sem.css y Astra
   comparten nombres de clase y se filtran si no se acota.
   ============================================================ */
.webble-case{--navy:#0A0E16; --blue:#1a73e8; --blue-light:#e8f0fd;
  --green:#16a34a; --green-light:#dcfce7;
  --red:#dc2626; --red-light:#fee2e2;
  --gray:#F4F6F9; --gray-mid:#f9fafb; --border:#e5e7eb;
  --muted:#6b7280; --hint:#9ca3af;
  --amber:#d97706; --amber-light:#fef3c7;
  /* superficies oscuras, tomadas de la web en produccion */
  --ink:#071022;      /* bloques oscuros de /casos-de-exito/pereda/ */
  --nav-bg:#0D1526;   /* barra de navegacion real del sitio */
  --foot-bg:#242A56;  /* pie real del sitio */}
.webble-case *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
.webble-case{font-family:"Google Font","Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:var(--navy); background:#fff; -webkit-font-smoothing:antialiased;
  font-size:16px; line-height:1.6;}
.webble-case img{max-width:100%;display:block}
.webble-case a{color:inherit;text-decoration:none}
.webble-case .sec, .webble-case .section{padding:100px 80px}
.webble-case .sec--gray, .webble-case .soft{background:var(--gray)}
.webble-case .sec--white{background:#fff}
.webble-case .sec-title{font-size:38px;font-weight:500;color:var(--navy);line-height:1.2;letter-spacing:-.02em}
.webble-case .sec-sub{font-size:17px;color:var(--muted);max-width:620px;line-height:1.7}
.webble-case .btn-outline{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.webble-case .btn-ghost{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1px var(--border)}
@keyframes wcs-aparkate-reveal-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
.webble-case .reveal{animation:wcs-aparkate-reveal-in 1s linear both}
.webble-case .reveal{animation-timeline:view();animation-range:entry 5% entry 60%}
}
.webble-case .reveal-h{animation:wcs-aparkate-reveal-in .85s cubic-bezier(.2,.7,.3,1) both}
.webble-case .mock.reveal-h{animation-delay:.14s}
.webble-case .ticks{display:flex;flex-direction:column;gap:11px}
.webble-case .tick{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--navy)}
.webble-case .tick i{width:18px;height:18px;border-radius:50%;background:var(--green-light);color:var(--green);
  display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:700;
  flex-shrink:0;margin-top:2px}
.webble-case .mock{background:var(--ink);border-radius:20px;padding:24px;color:#fff;
  box-shadow:0 30px 70px rgba(10,14,22,.28);position:relative;overflow:hidden}
.webble-case .mock::before{content:"";position:absolute;inset:0;
  background:radial-gradient(520px 260px at 88% -8%,rgba(26,115,232,.30),transparent 62%);
  pointer-events:none}
.webble-case .mock-head{display:flex;align-items:center;gap:12px;position:relative}
.webble-case .mock-logo{width:44px;height:44px;border-radius:11px;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.webble-case .mock-logo img{display:block;width:100%;height:100%;object-fit:cover}
.webble-case .mock-name{font-size:15px;font-weight:600;letter-spacing:-.01em}
.webble-case .mock-role{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:2px}
.webble-case .mock-pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#86efac;background:rgba(22,163,74,.16);padding:6px 11px;border-radius:100px;
  box-shadow:inset 0 0 0 1px rgba(134,239,172,.22);white-space:nowrap}
.webble-case .dot-g{width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(34,197,94,.16);animation:wcs-aparkate-wb-pulse-g 2s ease-in-out infinite}
.webble-case .dot-a{width:6px;height:6px;border-radius:50%;background:#fbbf24;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(251,191,36,.18);animation:wcs-aparkate-wb-pulse-a 2s ease-in-out infinite}
@keyframes wcs-aparkate-wb-pulse-g{50%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
@keyframes wcs-aparkate-wb-pulse-a{50%{box-shadow:0 0 0 8px rgba(251,191,36,0)}}
.webble-case .mstep:nth-child(2) .dot-g, .webble-case .mstep:nth-child(2) .dot-a{animation-delay:.4s}
.webble-case .mstep:nth-child(3) .dot-g, .webble-case .mstep:nth-child(3) .dot-a{animation-delay:.8s}
.webble-case .mock-foot .dot-g{animation-delay:1.2s}
.webble-case .mock-label{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin:24px 0 10px;position:relative}
.webble-case .mock-search{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);
  border-radius:11px;padding:13px 15px;font-size:13.5px;color:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);position:relative}
.webble-case .mock-search svg{flex-shrink:0;opacity:.5}
.webble-case .mock-search>span:not(.caret){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.webble-case .caret{width:1.5px;height:15px;background:var(--blue);animation:wcs-aparkate-blink 1.15s steps(1) infinite;flex-shrink:0}
@keyframes wcs-aparkate-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.webble-case .mock-steps{display:grid;gap:9px;margin-top:12px;position:relative}
.webble-case .mstep{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.05);
  border-radius:11px;padding:12px 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.webble-case .mstep-n{width:22px;height:22px;border-radius:6px;background:rgba(26,115,232,.22);color:#93c5fd;
  display:grid;place-items:center;font-size:10.5px;font-weight:700;flex-shrink:0}
.webble-case .mstep-t{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.webble-case .mstep-v{font-size:13px;font-weight:500;margin-top:2px}
.webble-case .mstep-r{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.55);white-space:nowrap}
.webble-case .mock-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;position:relative}
.webble-case .mock-chip{font-size:11px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.07);
  padding:5px 11px;border-radius:100px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.webble-case .mock-foot{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.62);
  position:relative;line-height:1.5}
.webble-case .intro-left{position:sticky;top:112px;align-self:start}
.webble-case .intro-left h2{font-size:34px;font-weight:500;line-height:1.22;letter-spacing:-.02em;margin-top:20px}
.webble-case .intro-right{border-left:1px solid var(--border);padding-left:64px;display:flex;flex-direction:column;gap:20px}
.webble-case .intro-right p{font-size:16.5px;color:var(--muted);line-height:1.78}
.webble-case .intro-right p.lead{font-size:19px;color:var(--navy);line-height:1.62;font-weight:500}
.webble-case .head-c{text-align:center;max-width:760px;margin:0 auto 56px;display:flex;flex-direction:column;align-items:center;gap:18px}
.webble-case .head-c .sec-sub{max-width:660px}
.webble-case .cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.webble-case .card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 24px 26px;
  position:relative;transition:transform .3s ease,box-shadow .3s ease}
.webble-case .card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(16,24,40,.09)}
.webble-case .card-ico{width:44px;height:44px;border-radius:12px;background:var(--blue-light);color:var(--blue);
  display:grid;place-items:center;margin-bottom:20px}
.webble-case .card-n{position:absolute;top:24px;right:24px;font-size:15px;font-weight:600;
  color:var(--navy);opacity:.12;letter-spacing:.02em}
.webble-case .card h3{font-size:17px;font-weight:600;margin-bottom:9px;letter-spacing:-.01em}
.webble-case .card p{font-size:14.5px;color:var(--muted);line-height:1.68}
.webble-case .panel{border:1px solid var(--border);border-radius:20px;background:#fff;
  background-image:radial-gradient(rgba(10,14,22,.055) 1px,transparent 1px);
  background-size:22px 22px;overflow:hidden;box-shadow:0 18px 44px rgba(16,24,40,.06)}
.webble-case .panel-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:24px 28px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.86)}
.webble-case .panel-head .k{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--hint)}
.webble-case .panel-head .t{font-size:18px;font-weight:500;letter-spacing:-.01em;margin-top:4px}
.webble-case .panel-pill{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:var(--green-light);
  padding:7px 14px;border-radius:100px;white-space:nowrap}
.webble-case .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:34px 28px 30px;align-items:stretch}
.webble-case .flow-col{position:relative;padding:0 18px;display:flex}
.webble-case .flow-col+.flow-col::before{content:"";position:absolute;left:-15px;top:50%;width:30px;height:2px;margin-top:-1px;
  background-color:var(--border);background-image:linear-gradient(90deg,var(--blue),#76abd8);
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  animation:wcs-aparkate-wb-line 2.4s ease-in-out infinite}
.webble-case .flow-col+.flow-col::after{content:"";position:absolute;left:-15px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 5px rgba(26,115,232,.10);
  animation:wcs-aparkate-wb-dot 2.4s ease-in-out infinite}
.webble-case .flow-col:nth-child(3)::before, .webble-case .flow-col:nth-child(3)::after{animation-delay:.4s}
.webble-case .flow-col:nth-child(4)::before, .webble-case .flow-col:nth-child(4)::after{animation-delay:.8s}
@keyframes wcs-aparkate-wb-line{0%{background-size:0% 100%;opacity:.4}55%,100%{background-size:100% 100%;opacity:1}}
@keyframes wcs-aparkate-wb-dot{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(22px);opacity:0}}
@keyframes wcs-aparkate-wb-line-v{0%{background-size:100% 0%;opacity:.4}55%,100%{background-size:100% 100%;opacity:1}}
@keyframes wcs-aparkate-wb-dot-v{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(14px);opacity:0}}
.webble-case .fcard{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px 18px;
  width:100%;display:flex;flex-direction:column;gap:8px}
.webble-case .fcard.is-key{border-color:var(--blue);box-shadow:0 8px 22px rgba(26,115,232,.12)}
.webble-case .fcard .fk{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.webble-case .fcard.is-ok .fk{color:var(--green)}
.webble-case .fcard .ft{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.webble-case .fcard .fp{font-size:13.5px;color:var(--muted);line-height:1.6}
.webble-case .fchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.webble-case .fchip{font-size:11px;color:var(--muted);background:var(--gray);padding:4px 9px;border-radius:100px}
.webble-case .fline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--navy)}
.webble-case .fline i{width:14px;height:14px;border-radius:50%;background:var(--green-light);color:var(--green);display:grid;place-items:center;font-size:8px;font-style:normal;font-weight:700;flex-shrink:0}
.webble-case .panel-foot{background:var(--ink);color:#fff;padding:20px 28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.webble-case .panel-foot .k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.webble-case .panel-foot .p{font-size:14.5px;color:rgba(255,255,255,.88);line-height:1.55}
.webble-case .pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:66px;border-top:1px solid var(--border)}
.webble-case .pillar{padding:28px 22px 4px;border-left:1px solid var(--border);position:relative}
.webble-case .chain-arrow .fl{stroke-dasharray:6;animation:wcs-aparkate-wb-chain .8s linear infinite}
@keyframes wcs-aparkate-wb-chain{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
.webble-case .pillar:nth-child(3) .chain-arrow svg{animation-delay:.2s}
.webble-case .pillar:first-child{border-left:0;padding-left:0}
.webble-case .pillar .pn{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.05em}
.webble-case .pillar h3{font-size:17px;font-weight:600;margin:12px 0 4px;letter-spacing:-.01em}
.webble-case .pillar .ps{font-size:13.5px;color:var(--navy);opacity:.75;margin-bottom:10px}
.webble-case .pillar p{font-size:13.5px;color:var(--muted);line-height:1.65}
.webble-case .pillar .pe{display:inline-block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--gray);padding:5px 11px;border-radius:100px}
.webble-case .ongoing{margin-top:60px;background:var(--gray);border-radius:20px;padding:44px 48px;
  display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.webble-case .ongoing h3{font-size:25px;font-weight:500;letter-spacing:-.02em;line-height:1.3;margin-bottom:14px}
.webble-case .ongoing p{font-size:15.5px;color:var(--muted);line-height:1.7}
.webble-case .ongoing .ticks{gap:13px}
.webble-case .compare{background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;
  box-shadow:0 14px 34px rgba(16,24,40,.05)}
.webble-case .compare-head{padding:26px 30px;border-bottom:1px solid var(--border)}
.webble-case .compare-head .q{font-size:19px;font-weight:500;letter-spacing:-.01em;line-height:1.4}
.webble-case .compare-head .s{font-size:12.5px;color:var(--hint);margin-top:6px}
.webble-case .crow{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;border-bottom:1px solid var(--border)}
.webble-case .crow:last-child{border-bottom:0}
.webble-case .crow .c1, .webble-case .crow .c2{padding:17px 30px;font-size:15px;line-height:1.5}
.webble-case .crow .c1{color:var(--muted)}
.webble-case .crow .c2{color:var(--navy);font-weight:500;background:rgba(22,163,74,.05)}
.webble-case .crow .arw{display:grid;place-items:center;color:var(--blue);font-size:15px}
.webble-case .crow.hd .c1, .webble-case .crow.hd .c2{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hint);padding-top:14px;padding-bottom:14px;background:var(--gray-mid)}
.webble-case .crow.hd .c2{color:var(--green)}
.webble-case .res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px}
.webble-case .res{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px 22px}
.webble-case .res .rk{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hint)}
.webble-case .res .rv{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:10px 0 8px;display:flex;align-items:center;gap:8px}
.webble-case .res .rv .up{color:var(--green)}
.webble-case .res .rv .dn{color:var(--green)}
.webble-case .res p{font-size:13.5px;color:var(--muted);line-height:1.62}
.webble-case .keyadv{margin-top:26px;background:var(--ink);border-radius:20px;padding:36px 40px;color:#fff;
  display:grid;grid-template-columns:210px 1fr;gap:36px;align-items:center}
.webble-case .keyadv .k{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.webble-case .keyadv p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.94);font-weight:400}
.webble-case .impact-next{display:flex;align-items:flex-start;gap:12px;margin-top:28px;padding-top:24px;
  border-top:1px solid var(--border);font-size:15px;color:var(--navy);line-height:1.6}
.webble-case .impact-next b{color:var(--blue);font-weight:600;flex-shrink:0}
.webble-case .impact-list .tick{padding:17px 0;border-bottom:1px solid var(--border);font-size:15.5px;line-height:1.55;align-items:flex-start}
.webble-case .impact-list .tick:first-child{padding-top:0}
.webble-case .cta-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.webble-case .cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.webble-case .cta .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.webble-case .cta-card{background:rgba(255,255,255,.05);border-radius:20px;padding:32px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.webble-case .cta-card .k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:18px}
.webble-case .cta-card .row{display:flex;align-items:flex-start;gap:11px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:14.5px;color:rgba(255,255,255,.86);line-height:1.5}
.webble-case .cta-card .row:last-child{border-bottom:0;padding-bottom:0}
.webble-case .cta-card .row i{width:18px;height:18px;border-radius:50%;background:rgba(22,163,74,.2);color:#86efac;
  display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:700;flex-shrink:0;margin-top:2px}@media(max-width:1180px){
.webble-case .sec, .webble-case .section, .webble-case .hero, .webble-case .conclusion, .webble-case .cta{padding-left:48px;padding-right:48px}
.webble-case .pillars{grid-template-columns:repeat(3,1fr)}
.webble-case .pillar{border-left:1px solid var(--border);padding-left:22px}
.webble-case .pillar:nth-child(3n+1){border-left:0;padding-left:0}
.webble-case .pillar:nth-child(3n+1) .chain-arrow{display:none}
.webble-case .pillar:nth-child(n+4){border-top:1px solid var(--border);padding-top:28px}
}@media(max-width:1000px){
.webble-case .cards-4{grid-template-columns:repeat(2,1fr)}
.webble-case .flow{grid-template-columns:1fr;gap:26px;padding:28px 22px}
.webble-case .flow-col{padding:0}
.webble-case .flow-col+.flow-col::before{left:50%;top:-22px;margin:0 0 0 -1px;width:2px;height:22px;
    background-image:linear-gradient(180deg,var(--blue),#76abd8);background-position:center top;
    background-size:100% 0%;animation-name:wcs-aparkate-wcs-aparkate-wb-line-v}
.webble-case .flow-col+.flow-col::after{left:50%;top:-22px;margin:0 0 0 -4px;animation-name:wcs-aparkate-wcs-aparkate-wb-dot-v}
.webble-case .intro-left{position:static;top:auto}
.webble-case .intro-right{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:32px}
.webble-case .ongoing{grid-template-columns:1fr;gap:30px;padding:36px}
.webble-case .res-grid{grid-template-columns:repeat(2,1fr)}
.webble-case .cta-grid{grid-template-columns:1fr;gap:40px}
.webble-case .keyadv{grid-template-columns:1fr;gap:16px;padding:32px}
}@media(max-width:760px){
.webble-case .sec, .webble-case .section{padding:64px 22px}
.webble-case .sec-title, .webble-case .intro-left h2{font-size:28px}
.webble-case .sec-sub{font-size:16px}
.webble-case .head-c{margin-bottom:36px;gap:15px}
.webble-case .cards-4{grid-template-columns:1fr;gap:14px}
.webble-case .card{padding:24px 20px}
.webble-case .panel-head{padding:20px}
.webble-case .panel-head .t{font-size:16px}
.webble-case .panel-pill{margin-left:0}
.webble-case .panel-foot{padding:18px 20px;gap:10px}
.webble-case .pillars{grid-template-columns:1fr;margin-top:44px}
.webble-case .pillar{border-left:0;padding:24px 0 4px;border-top:1px solid var(--border)}
.webble-case .pillar:first-child{border-top:0;padding-top:24px}
.webble-case .pillar:nth-child(3n+1){padding-left:0}
.webble-case .pillar .chain-arrow, .webble-case .pillar:nth-child(3n+1) .chain-arrow{display:grid;left:50%;margin-left:-14px;top:-8px;transform:rotate(90deg)}
.webble-case .ongoing{margin-top:40px;padding:28px 22px;border-radius:16px}
.webble-case .ongoing h3{font-size:21px}
.webble-case .compare-head{padding:20px}
.webble-case .compare-head .q{font-size:16.5px}
.webble-case .crow{grid-template-columns:1fr}
.webble-case .crow .c1, .webble-case .crow .c2{padding:14px 20px;font-size:14.5px}
.webble-case .crow .c1{padding-bottom:6px}
.webble-case .crow .c2{padding-top:6px;background:transparent;position:relative;padding-left:38px}
.webble-case .crow .c2::before{content:"→";position:absolute;left:20px;color:var(--blue)}
.webble-case .crow .arw{display:none}
.webble-case .crow.hd{display:none}
.webble-case .res-grid{grid-template-columns:1fr;gap:12px}
.webble-case .res{padding:20px}
.webble-case .keyadv{padding:26px 22px}
.webble-case .keyadv p{font-size:16px}
.webble-case .cta-card{padding:24px 20px}
.webble-case .impact-list .tick{font-size:15px}
.webble-case .mock{padding:18px;border-radius:16px}
}@media(max-width:390px){
.webble-case .mock-pill{font-size:9px;padding:5px 9px}
.webble-case .mstep-r{display:none}
}@media(prefers-reduced-motion:reduce){
.webble-case *{animation:none!important;transition:none!important}
.webble-case .reveal, .webble-case .reveal-h{opacity:1;transform:none;animation:none}
}
.webble-case .byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--border)}
.webble-case .by-av{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:600;flex:none}
.webble-case .by-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.webble-case .by-n{font-size:14px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.webble-case .by-d{font-size:12.5px;color:var(--muted)}
.webble-case .by-sep{color:var(--hint)}
.webble-case .lnk-pend{color:var(--blue);border-bottom:1.5px dashed var(--amber);font-weight:500}
.webble-case a[href^="/"]:not(.lnk-pend):not(.btn){color:var(--blue);font-weight:500;
  border-bottom:1px solid rgba(26,115,232,.32)}
.webble-case .card-q{display:block;font-size:13.5px;color:var(--blue);font-weight:500;
  margin:-2px 0 10px;line-height:1.45}
.webble-case .bigfig{display:flex;align-items:center;gap:36px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--border);border-left:5px solid var(--green);
  border-radius:16px;padding:38px 42px;margin-bottom:34px;
  box-shadow:0 1px 3px rgba(10,14,22,.05)}
.webble-case .bf-num{font-size:76px;line-height:1;font-weight:600;letter-spacing:-.035em;color:var(--green);flex:none}
.webble-case .bf-txt{flex:1;min-width:260px}
.webble-case .bf-lead{font-size:22px;font-weight:500;letter-spacing:-.018em;line-height:1.32;color:var(--navy)}
.webble-case .bf-sub{font-size:13px;color:var(--muted);margin-top:12px;display:flex;
  align-items:center;gap:9px;flex-wrap:wrap}
.webble-case .shot{margin:34px 0 0}
.webble-case .shot-frame{border:2px dashed #c9d3e2;border-radius:14px;background:var(--gray-mid);
  min-height:260px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:40px 32px}
.webble-case .shot-ico{font-size:30px;color:#c2ccdb;line-height:1}
.webble-case .shot-t{font-size:15px;font-weight:600;color:var(--navy)}
.webble-case .shot-p{font-size:13.5px;color:var(--muted);max-width:420px;line-height:1.55}
.webble-case .shot figcaption{font-size:13px;color:var(--muted);margin-top:14px;
  padding-left:14px;border-left:2px solid var(--border);line-height:1.55}
.webble-case .medicion{margin-top:30px;background:var(--blue-light);border-radius:14px;
  padding:24px 28px;font-size:15.5px;line-height:1.62;color:#12233d}
.webble-case .quote-line{font-size:19px;line-height:1.6;color:rgba(255,255,255,.86);
  max-width:900px;margin:22px auto 0}
.webble-case .faq-h{font-size:30px;font-weight:500;letter-spacing:-.022em;margin-bottom:34px}
.webble-case .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.webble-case .fq{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 28px}
.webble-case .fq h4{font-size:16.5px;font-weight:600;letter-spacing:-.012em;line-height:1.4;margin-bottom:10px}
.webble-case .fq p{font-size:14.5px;color:var(--muted);line-height:1.62}
.webble-case .cta p.cta-h{font-size:36px;font-weight:500;letter-spacing:-.028em;line-height:1.24;
  color:#fff;margin:20px 0 16px;max-width:19ch}@media(max-width:1000px){
.webble-case .bigfig{padding:30px 26px;gap:22px}
.webble-case .bf-num{font-size:58px}
.webble-case .bf-lead{font-size:19px}
.webble-case .faq{grid-template-columns:1fr}
.webble-case .cta p.cta-h{font-size:28px;max-width:none}
.webble-case .quote-line{font-size:17px}
.webble-case .faq-h{font-size:25px}
}@media(max-width:560px){
.webble-case .bigfig{padding:26px 22px}
.webble-case .bf-num{font-size:48px}
.webble-case .shot-frame{min-height:200px;padding:32px 22px}
.webble-case .byline{gap:9px}
}
.webble-case .pillar .ps{margin-bottom:16px;line-height:1.5}
.webble-case .byline .by-d{white-space:nowrap}
html{scroll-padding-top:96px}
.webble-case .by-av{position:relative;width:42px;height:42px;overflow:hidden;background:var(--blue)}
.webble-case .by-ini{position:absolute;inset:0;display:grid;place-items:center;
  font-size:14px;font-weight:600;color:#fff;letter-spacing:.02em}
.webble-case .by-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;display:block}
.webble-case .by-d{white-space:normal;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.webble-case .by-r{color:var(--muted)}
.webble-case .by-f{white-space:nowrap}
.webble-case .results-note{margin-top:30px;font-size:15.5px;line-height:1.68;color:var(--navy);
  max-width:840px;padding-left:18px;border-left:2px solid var(--border)}@media(max-width:640px){
.webble-case .results-note{font-size:15px;padding-left:14px}
.webble-case .by-av{width:38px;height:38px}
}
.webble-case .by-txt{flex:1 1 auto}@media(max-width:640px){
.webble-case .byline{flex-wrap:nowrap;align-items:flex-start}
.webble-case .by-txt{gap:3px}
.webble-case .by-d{flex-direction:column;align-items:flex-start;gap:1px}
.webble-case .by-sep{display:none}
}
.webble-case .pillar{display:flex;flex-direction:column}
.webble-case .pillar p{margin-bottom:14px}
.webble-case .pillar .pe{margin-top:auto;align-self:flex-start}@media(max-width:760px){
.webble-case .pillar .pe{margin-top:0}
}
.webble-case .testi{margin:34px 0 0;padding:26px 30px;background:var(--gray-mid);
  border:1px solid var(--border);border-radius:16px;position:relative}
.webble-case .testi::before{content:"\201C";position:absolute;top:6px;left:16px;
  font-size:58px;line-height:1;color:var(--blue);opacity:.18;font-family:Georgia,serif}
.webble-case .testi-q{margin:0;padding:0;border:0}
.webble-case .testi-q p{margin:0;font-size:19px;line-height:1.6;color:var(--navy);font-weight:500;
  max-width:760px}
.webble-case .testi-cut{color:var(--hint);font-weight:400;padding:0 2px}
.webble-case .testi-by{display:flex;align-items:center;gap:12px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--border)}
.webble-case .testi-av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--blue);
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px}
.webble-case .testi-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.webble-case .testi-t b{font-size:15px;color:var(--navy)}
.webble-case .testi-r{font-size:13.5px;color:var(--muted)}
.webble-case .testi-nota{margin:18px 0 0;font-size:15.5px;line-height:1.68;color:var(--muted);
  max-width:840px}@media(max-width:640px){
.webble-case .testi{padding:22px 18px}
.webble-case .testi-q p{font-size:17px}
.webble-case .testi::before{font-size:44px;left:10px}
}

/* ---------- FAQs · mismo patrón que /agencia-sem/ y Pereda ---------- */
.webble-case .faq-list{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;
  max-width:1120px;margin:0 auto;
}
.webble-case .faq-list details{
  background:#fff;border:.5px solid #e5e7eb;border-radius:14px;
  overflow:hidden;padding:0;transition:border-color .2s ease;
}
.webble-case .faq-list details[open]{border-color:#93c4f8}
.webble-case .faq-list summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:22px 24px;font-size:15px;font-weight:500;color:var(--navy);
  line-height:1.4;cursor:pointer;list-style:none;
}
.webble-case .faq-list summary::-webkit-details-marker{display:none}
.webble-case .faq-list summary::after{
  content:"";flex:0 0 24px;width:24px;height:24px;margin-top:1px;border-radius:50%;
  background-color:var(--blue);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:11px 1.6px,1.6px 11px;
  background-position:center,center;background-repeat:no-repeat;
  transition:background-size .18s ease;
}
.webble-case .faq-list details[open] summary::after{background-size:11px 1.6px,1.6px 0}
.webble-case .faq-list p{margin:0;padding:0 24px 22px;font-size:14px;line-height:1.75;color:var(--muted)}
.webble-case .faq-list p strong{color:var(--navy);font-weight:500}@media(min-width:621px) and (max-width:1100px){
  .webble-case .faq-list summary{padding:20px}
  .webble-case .faq-list p{padding:0 20px 20px}
}@media(max-width:900px){.webble-case .faq-list{grid-template-columns:1fr;gap:12px}}@media(max-width:650px){
  .webble-case .faq-list summary{font-size:15px;padding:18px}
  .webble-case .faq-list p{font-size:15px;line-height:1.6;padding:0 18px 18px}
}

/* ============================================================
   BLINDAJE · reglas globales que se filtran desde agencia-sem.css
   y desde el tema Astra. Mismo criterio que en pereda.css.
   Ojo con la especificidad: `.hero.hero h1` de agencia-sem puntua
   0-2-1 e EMPATA con `.webble-case .hero h1`. Hay que usar
   `section.hero` para subir a 0-2-2 y ganar el empate.
   ============================================================ */
.webble-case section.hero h1{color:var(--navy)}
.webble-case section.hero h1 em{color:var(--blue)}
.webble-case section.hero h1 strong{color:var(--navy)}

/* Astra pinta de blanco todos los <button> del sitio */
.webble-case button:not([class*="btn"]){color:inherit;background-color:transparent}

/* Los estados :link/:visited/:hover de agencia-sem ganan por pseudoclase */
.webble-case a.btn.btn-primary:link,.webble-case a.btn.btn-primary:visited,
.webble-case a.btn.btn-primary:hover,.webble-case a.btn.btn-primary:focus{
  background:var(--blue);color:#fff;
}
.webble-case a.btn.btn-ghost:link,.webble-case a.btn.btn-ghost:visited,
.webble-case a.btn.btn-ghost:hover,.webble-case a.btn.btn-ghost:focus{
  background:#fff;color:var(--navy);
}
.webble-case section.cta a.btn.btn-ghost:link,.webble-case section.cta a.btn.btn-ghost:visited,
.webble-case section.cta a.btn.btn-ghost:hover,.webble-case section.cta a.btn.btn-ghost:focus{
  background:transparent;color:#fff;
}
.webble-case a.btn:active{transform:translateY(0) scale(.985)}

/* NORMA: nada dentro de un caso puede quedar blanco sobre blanco */
.webble-case .section h2,.webble-case .section h3,.webble-case .section h4{color:var(--navy)}
.webble-case .cta h2,.webble-case .cta h3,.webble-case .cta h4{color:#fff}


/* ---------- Bloque de autoria (este caso no lo traia) ----------
   En produccion estas reglas ya viven en case-studies.css; se repiten
   aqui acotadas para que el bloque no dependa del orden de carga.     */
.webble-case .author-wrap{padding:26px 0;border-bottom:1px solid var(--border);background:#fff}
.webble-case .author-line{display:flex;align-items:flex-start;gap:16px;max-width:1000px}
.webble-case .author-line .av{flex:0 0 58px;width:58px;height:58px;border-radius:50%;overflow:hidden;
  background:#eef2f7;box-shadow:0 0 0 3px #eaf2ff}
.webble-case .author-line .av img{width:58px;height:58px;object-fit:cover;display:block;border-radius:50%}
.webble-case .author-line .who{flex:1 1 auto;font-size:14.5px;line-height:1.62;color:var(--muted)}
.webble-case .author-line .who b{display:block;font-size:16.5px;font-weight:600;color:var(--navy);margin-bottom:2px}
.webble-case .author-line .role{color:var(--blue);font-weight:500}
.webble-case .author-line .dates{display:block;margin-top:8px;font-size:12.5px;color:var(--hint)}
.webble-case .author-line a.partner-badge{display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px 3px 7px;border:1px solid var(--border);border-radius:999px;background:#fff;
  color:var(--navy);font-weight:500;text-decoration:none;white-space:nowrap;vertical-align:middle}
.webble-case .author-line a.partner-badge:hover{border-color:#93c4f8}
.webble-case .author-line a.partner-badge svg{width:15px;height:15px;flex:0 0 15px;display:block}
@media(max-width:650px){
  .webble-case .author-line{gap:13px}
  .webble-case .author-line .av,.webble-case .author-line .av img{flex-basis:46px;width:46px;height:46px}
  .webble-case .author-line .who{font-size:13.5px}
  .webble-case .author-line .who b{font-size:15px}
}


/* ============================================================
   ALINEACION-PEREDA-AGO2026
   Componentes compartidos con /casos-de-exito/pereda/.
   Aqui se deshacen (a) los duplicados locales que pisaban a
   case-studies.css y (b) las clases globales sin ambito que se
   filtran desde otros CSS del sitio.
   ============================================================ */

/* 1 · Ticks del hero. Una regla .tick SIN ambito (snippet 12189)
      los convertia en tarjetas centradas. Deben leerse como el
      .hero-micro de Pereda: linea de checks pequena bajo los botones. */
.webble-case .hero .ticks{
  display:flex;flex-direction:row;flex-wrap:wrap;
  gap:8px 18px;margin-top:22px;
}
.webble-case .hero .ticks .tick{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;border-radius:0;box-shadow:none;
  padding:0;margin:0;width:auto;max-width:none;
  font-size:12px;line-height:1.5;color:#768297;
}
.webble-case .hero .ticks .tick i{
  width:auto;height:auto;min-width:0;margin:0;
  background:none;border-radius:0;display:inline;
  font-size:12px;font-weight:850;color:var(--green);
}
@media(max-width:760px){
  .webble-case .hero .ticks{display:grid;grid-template-columns:1fr;gap:8px}
}

/* 2 · Banda de metricas: misma reticula que Pereda. Cuatro columnas,
      filete a la derecha, alto minimo y centrado vertical. Sin el
      min-height las cifras no comparten linea base. */
.webble-case .metric-band{
  padding:0;background:#fff;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.webble-case .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.webble-case .metric{
  padding:28px 26px;border-left:0;border-right:1px solid var(--line);
  min-height:130px;display:flex;flex-direction:column;justify-content:center;
}
.webble-case .metric:first-child{padding-left:26px}
.webble-case .metric:last-child{border-right:0}
.webble-case .metric b,
.webble-case .metric strong{
  display:block;font-size:31px;font-weight:500;letter-spacing:-.04em;
  color:var(--blue);line-height:1;
}
.webble-case .metric span{
  display:block;font-size:12px;line-height:1.5;
  color:var(--muted);margin-top:8px;max-width:190px;
}
@media(max-width:980px){
  .webble-case .metric-grid{grid-template-columns:repeat(2,1fr)}
  .webble-case .metric:nth-child(2){border-right:0}
  .webble-case .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:760px){
  .webble-case .metric-band{border:0;background:transparent;padding:0}
  .webble-case .metric-grid{grid-template-columns:1fr 1fr;gap:10px;padding:22px 20px 26px}
  .webble-case .metric{
    min-height:0;padding:15px 14px 16px;background:#fff;
    border:1px solid var(--line);border-radius:14px;
    box-shadow:0 2px 10px rgba(10,14,22,.035);
  }
  .webble-case .metric:first-child{padding-left:14px}
  .webble-case .metric b,.webble-case .metric strong{font-size:25px;letter-spacing:-.045em}
  .webble-case .metric span{font-size:11px;line-height:1.4;margin-top:6px;max-width:none}
}
@media(max-width:410px){
  .webble-case .metric-grid{gap:9px;padding:20px 16px 24px}
  .webble-case .metric b,.webble-case .metric strong{font-size:23px}
  .webble-case .metric span{font-size:10.5px}
}

/* 3 · Bloque de autoria: su .wrap salia a sangre (0 a 1440) y la foto
      quedaba cortada contra el borde. Mismo ancho que el resto. */
.webble-case .author-wrap .wrap{max-width:1240px;margin-left:auto;margin-right:auto}


/* 4 · Colores del encabezado de .results. Estos casos usan .head-c
      donde Pereda usa .results-head, asi que no heredan nada del comun.
      Desde el bloque RESULTADOS-EN-CLARO del final la seccion es clara,
      asi que van en tinta y gris medio, no en blanco. */
.webble-case .results .head-c h2,
.webble-case .results .head-c .sec-title{color:var(--ink)}
.webble-case .results .head-c p,
.webble-case .results .head-c .sec-sub,
.webble-case .results > .wrap > .results-note{color:#5a6675}


/* 5 · Ancho util en movil: las secciones sin padding lateral, el gutter
      lo pone .wrap. Antes se quedaban en 264px de 390. */
@media(max-width:760px){
  .webble-case section,
  .webble-case .section,
  .webble-case .hero,
  .webble-case .metric-band,
  .webble-case .results,
  .webble-case .conclusion,
  .webble-case .cta{padding-left:0;padding-right:0}
}

/* ============================================================
   APARKATE · REVISION AGO2026
   1. La cadena de metodo y la seccion de impacto pasan al patron
      compartido de Taquillea (.method-chain / .impact-item).
   2. El avatar del testimonio muestra el logo real, no la inicial.
   ============================================================ */

/* a · Avatar del testimonio con el logo de la marca */
.webble-case .testi-av.has-img{
  width:44px;height:44px;flex:0 0 44px;
  padding:0;overflow:hidden;background:#ed6d4b;
  border-radius:50%;font-size:0;line-height:0;
}
.webble-case .testi-av.has-img img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;
}

/* b · La seccion de impacto usa el patron de Taquillea:
      copia a la izquierda + lista con filetes finos a la derecha.
      Las reglas locales de .impact-list .tick quedan sin uso. */
.webble-case .impact-copy .impact-next{margin-top:26px}

/* ============================================================
   RESULTADOS-EN-CLARO · ago 2026
   La seccion .results del CSS comun es una franja casi negra de
   1.600 px en mitad de una pagina clara, con tarjetas blancas
   flotando encima. Rompia el lenguaje del resto. Aqui pasa a un
   fondo claro con el mismo degradado azulado del hero; las
   tarjetas ya traian borde y sombra propios, asi que siguen
   leyendose como tarjetas. El unico bloque oscuro que queda es
   .keyadv, que ahora funciona como acento en vez de perderse.
   ============================================================ */
.webble-case .results{
  background-color:#f3f6fb;
  background-image:
    radial-gradient(circle at 88% 10%, rgba(26,115,232,.10), rgba(0,0,0,0) 36%),
    linear-gradient(180deg,#f8fafd 0%,#eef3fa 100%);
  color:var(--ink);
  border-top:1px solid #e4eaf3;
  border-bottom:1px solid #e4eaf3;
}
/* sobre fondo claro el gris casi blanco de .testi desaparece */
.webble-case .results .testi{background:#fff}

/* Etiquetas pequenas que estaban por debajo de 3:1 de contraste
   dentro de las tarjetas. No dependen del cambio de fondo, pero
   se corrigen ahora que se revisa la seccion. */
.webble-case .compare-head .s,
.webble-case .crow.hd .c1,
.webble-case .testi-cut{color:#6b7280}
.webble-case .crow.hd .c2{color:#15803d}
/* ==================================================================
   COLOR DE MARCA · Apárkate · DETALLE COMPLETO
   Replica el sistema de pereda.css: el tono del cliente va en los
   acentos de contenido y en las superficies oscuras. Los botones,
   los .tag y los pasos intermedios de la cadena siguen en azul
   Webble, exactamente igual que en Pereda.
   ================================================================== */
.webble-case .aparkate-page{--client:#f06c48;--client-mid:#d83c12;--client-dark:#7c230a;--client-soft:#fcefeb;--client-deep:#792b15;--client-abyss:#2a0e07;--client-panel:#461c10;--client-lite:#ed957e;--client-mute:#cda398;--client-line:#f29e88;--client-glow:#cd431d;--client-num:#f7b3a1}

/* --- superficies claras --- */
.webble-case .aparkate-page .hero{background:radial-gradient(circle at 86% 20%,rgba(216,60,18,.20),transparent 30%),linear-gradient(180deg,#fcefeb 0%,#fff 94%)}
.webble-case .aparkate-page h1 em,.webble-case .aparkate-page section.hero h1 em{color:var(--client-mid)}
.webble-case .aparkate-page .eyebrow-dot{background:var(--client-mid);box-shadow:0 0 0 5px rgba(216,60,18,.12)}
.webble-case .aparkate-page .metric strong,.webble-case .aparkate-page .metric b{color:var(--client-mid)}
.webble-case .aparkate-page .icon-box{background:var(--client-soft);color:var(--client-mid)}
.webble-case .aparkate-page .chain-final .chain-num,.webble-case .aparkate-page .chain-final .chain-icon{background:var(--client-mid)}
.webble-case .aparkate-page .intro-text a,.webble-case .aparkate-page .section-head p a,.webble-case .aparkate-page .impact-copy p a{color:var(--client-mid);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.webble-case .aparkate-page .author-line .av{background:var(--client-soft);border:1px solid rgba(216,60,18,.20);box-shadow:0 0 0 4px rgba(216,60,18,.07)}
.webble-case .aparkate-page .author-line .role{color:var(--client-mid);font-weight:600}
.webble-case .aparkate-page .author-line a{color:var(--client-mid);text-decoration:underline;text-underline-offset:2px}
.webble-case .aparkate-page .author-line a.partner-badge{color:var(--ink);text-decoration:none}
.webble-case .aparkate-page .faq-list summary::before{color:var(--client-mid)}

/* --- tarjeta oscura del hero (equivale a .pereda-case) --- */
.webble-case .aparkate-page .mock{background:linear-gradient(145deg,#792b15,#2a0e07)}
.webble-case .aparkate-page .mock-role{color:#cda398}
.webble-case .aparkate-page .mock-label{color:#ed957e}
.webble-case .aparkate-page .mock-search{background:rgba(242,158,136,.07);border-color:rgba(242,158,136,.30)}
.webble-case .aparkate-page .caret{background:#cd431d}
.webble-case .aparkate-page .mstep{background:rgba(242,158,136,.06)}
.webble-case .aparkate-page .mstep-n{background:rgba(205,67,29,.30);color:#f7b3a1}
.webble-case .aparkate-page .mstep-t,.webble-case .aparkate-page .mstep-r{color:#cda398}
.webble-case .aparkate-page .mock-chip{background:rgba(242,158,136,.09);border-color:rgba(242,158,136,.16);color:#cda398}
.webble-case .aparkate-page .mock-foot{color:#cda398;border-top-color:rgba(242,158,136,.16)}

/* --- panel oscuro interior (equivale a .routing-insight) --- */
.webble-case .aparkate-page .keyadv{background:#461c10}
/* ============ FIN COLOR DE MARCA · Apárkate ============ */

/* --- mas detalles con el tono del cliente ------------------------
   Equivalencias con Pereda: .card-ico y .rn hacen de .icon-box,
   .fcard.is-key hace de .funnel-core (borde claro + aro) y .lnk-pend
   es un enlace de cuerpo de texto. Los bloques de "otros casos"
   (.ok, .oa) se dejan en azul Webble porque son de otros clientes. */
.webble-case .aparkate-page .card-ico{background:var(--client-soft);color:var(--client-mid)}
.webble-case .aparkate-page .rn{background:var(--client-soft);color:var(--client-mid)}
.webble-case .aparkate-page .fcard.is-key{border-color:#f0a794;box-shadow:0 8px 22px rgba(216,60,18,.12)}
.webble-case .aparkate-page .lnk-pend{color:var(--client-mid)}