/* Two cards side by side on glass, one against the other, with a bar that fills when they come into view. Needs
   ../base/base.css, and ../glass-field/ behind the section (.sul-vetro). */

/* ---------- ready now: built in-house against Simulator ---------- */
.pr-due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(48px,6vw,80px)}
/* on glass (the section sits on glass-field): smoke for the one built in-house, darker glass and a blue ring for Simulator */
.pr-carta{padding:26px 28px 14px;border-radius:26px;background:linear-gradient(180deg,oklch(100% 0 0/.1),oklch(100% 0 0/.035)),oklch(26% .1 262/.62);-webkit-backdrop-filter:var(--vetro-sfoca);backdrop-filter:var(--vetro-sfoca);box-shadow:inset 0 1px 0 oklch(100% 0 0/.22),inset 0 0 0 1px oklch(100% 0 0/.1)}
.pr-noi{background:linear-gradient(180deg,oklch(22% .06 262/.74),oklch(14% .05 262/.82));box-shadow:inset 0 1px 0 oklch(100% 0 0/.18),inset 0 0 0 1.5px oklch(73% .14 252/.7),0 40px 90px -46px oklch(57% .2 258/.6)}
.pr-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.pr-testa b{font-size:calc(22 * var(--px));font-weight:650;letter-spacing:-.022em}
.pr-casa .pr-testa b{color:var(--ink-2)}
.pr-ok{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:999px;background:oklch(72.8% .17 150/.16);color:var(--ok);font-size:calc(13 * var(--px));font-weight:600}
.pr-ok i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pr-tempo{margin-top:20px}
.pr-barra{height:10px;border-radius:6px;background:var(--piano-2);overflow:hidden}
.pr-noi .pr-barra{background:var(--piano-3)}
.pr-barra i{display:block;height:100%;width:0;border-radius:inherit;background:var(--spento)}
.pr-noi .pr-barra i{background:var(--blu-t)}
.pr-tempo small{display:flex;justify-content:space-between;margin-top:9px;font-size:calc(14 * var(--px));color:var(--ink-3)}
.pr-noi .pr-tempo small{color:var(--blu-t);font-weight:560}
.pr-voci{list-style:none;padding:0;margin-top:20px;display:grid}
.pr-voci li{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--riga);font-size:calc(16 * var(--px));line-height:1.4}
.pr-voci span{color:var(--ink-3)}
.pr-casa .pr-voci b{font-weight:500;color:var(--ink-2)}
.pr-noi .pr-voci b{font-weight:600}
.pr-due.vis .pr-casa .pr-barra i{width:100%;transition:width 3.4s cubic-bezier(.3,.1,.5,1) .5s}
.pr-due.vis .pr-noi .pr-barra i{width:3%;transition:width .6s var(--e-molla) .5s}

@media (max-width:760px){
  .pr-due{grid-template-columns:minmax(0,1fr)}
  .pr-carta{padding:22px 20px 10px;border-radius:22px}
  .pr-voci li{grid-template-columns:104px minmax(0,1fr);font-size:calc(15 * var(--px))}
}