/* =========================================================
   SITI Restaurantes · 2. un pedido de $500 contra Uber Eats / DiDi Food
   [data-mode] en .p500 decide qué escenario se ve: a = mismo precio,
   b = el restaurante sube su menú 30% en las apps.
   ========================================================= */
.p500{margin-top:clamp(80px,11vw,140px);scroll-margin-top:100px}
.p500__head{text-align:center;display:flex;flex-direction:column;align-items:center}
.p500__h{font-family:var(--f-dis);font-size:clamp(2.1rem,5vw,4rem);font-weight:800;letter-spacing:-.045em;line-height:1;margin:14px 0 28px}
.p500__lead{max-width:54ch;margin-top:20px;color:var(--muted);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;min-height:3.2em}
.p500__lead b{color:var(--fg)}

.p500 .only-b{display:none}
.p500[data-mode="b"] .only-a{display:none}
.p500[data-mode="b"] .only-b{display:revert}
.p500[data-mode="b"] .p500-rows em.only-b{display:block}

/* interruptor de dos posiciones con píldora que se desliza */
.p500__toggle{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:99px;
  background:var(--bg-2);border:1px solid var(--line);
}
.p500__toggle button{
  position:relative;z-index:1;padding:12px 22px;border-radius:99px;white-space:nowrap;
  font-family:var(--f-dis);font-weight:700;font-size:.92rem;color:var(--muted);transition:color .4s;
}
.p500__toggle button.is-on{color:var(--on-orange)}
.p500__toggle-pill{
  position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:99px;
  background:var(--orange);box-shadow:0 10px 24px -10px rgba(var(--hot),.7);
  transition:transform .55s var(--ease);
}
.p500[data-mode="b"] .p500__toggle-pill{transform:translateX(100%)}

.p500__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:clamp(30px,4vw,48px);align-items:stretch}

.p500-card{
  position:relative;display:flex;flex-direction:column;padding:clamp(22px,3vw,38px);border-radius:28px;
  border:1px solid var(--line);background:var(--card);
}
.p500-card--siti{
  background:var(--surface);border:2px solid var(--orange);
  box-shadow:0 40px 90px -40px rgba(var(--hot),.55);
}
.p500-card__badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:6px 14px;border-radius:99px;background:var(--orange);color:var(--on-orange);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
}
.p500-card__top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.p500-card__top b{font-family:var(--f-dis);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;letter-spacing:-.03em}
.p500-card__rate{
  padding:6px 12px;border-radius:99px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(220,38,38,.1);color:#dc2626;white-space:nowrap;
}
.p500-card--siti .p500-card__rate{background:rgba(34,197,94,.14);color:#16a34a}

.p500-card__sub{margin-top:20px;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.p500-rows{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:10px}
.p500-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:.96rem}
.p500-rows li span{color:var(--muted)}
.p500-rows em{display:block;font-style:normal;font-size:.72rem;color:var(--ink);font-weight:700;margin-top:2px}
.p500-rows b{font-family:var(--f-dis);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.p500-rows .muted-row b{font-family:var(--f-body);font-weight:600;color:var(--muted);font-style:italic}
.p500-rows .neg b{color:#dc2626}
.p500-rows .zero b{color:#16a34a}
.p500-rows .bonus span,.p500-rows .bonus b{color:var(--ink);font-weight:700}
.p500-rows .sum{padding-top:9px;border-top:1px dashed var(--line-2)}
.p500-rows .sum span{color:var(--fg);font-weight:700}

.p500-card__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
}
.p500-card__total span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.p500-card__total b{font-family:var(--f-dis);font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.p500-card:not(.p500-card--siti) .p500-card__total b{color:var(--muted)}
.p500-card--siti .p500-card__total b{color:var(--ink)}

/* barra "de cada $100": verde lo tuyo, rojo la comisión, gris el IVA */
.p500-split{display:flex;height:12px;margin-top:auto;border-radius:99px;overflow:hidden;background:var(--bg-2)}
.p500-card__total{margin-bottom:24px}
.p500-split i{display:block;height:100%}
.p500-split__you{background:#22c55e}
.p500-card--siti .p500-split__you{background:var(--orange);box-shadow:0 0 16px rgba(var(--hot),.6)}
.p500-split__fee{background:#ef4444}
.p500-split__tax{background:#9ca3af}
.p500-split__cap{margin-top:10px;font-size:.82rem;color:var(--muted)}
.p500-split__cap b{color:var(--fg)}

/* veredicto */
.p500-verdict{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(18px,3vw,40px);
  margin-top:clamp(20px,3vw,28px);padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,44px);border-radius:28px;
  background:#121212;color:#F5F4F0;
}
.p500-verdict__big b{
  display:block;font-family:var(--f-dis);font-size:clamp(2.8rem,6.4vw,5.2rem);font-weight:800;letter-spacing:-.055em;line-height:.95;
  color:#FF8A3D;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.p500-verdict__big span{display:block;margin-top:6px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,244,240,.6)}
.p500-verdict p{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;color:rgba(245,244,240,.78);max-width:46ch}
.p500-verdict p b{color:#fff}

.p500-math{
  display:flex;align-items:flex-start;justify-content:center;gap:9px;margin-top:22px;text-align:center;
  font-weight:600;color:var(--muted);line-height:1.55;
}
.p500-math .lucide{color:var(--ink);margin-top:3px}
.p500-math b{color:var(--fg)}
.p500-src{max-width:90ch;margin:18px auto 0;text-align:center;font-size:.72rem;line-height:1.6;color:var(--muted)}
.p500-src a{text-decoration:underline;text-underline-offset:2px}
.p500-src a:hover{color:var(--ink)}

/* al cambiar de escenario, el número que cambia late */
.p500 .is-bump{animation:p500Bump .6s var(--ease)}
@keyframes p500Bump{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
.p500-rows b,.p500-card__total b,.p500-verdict__big b{display:inline-block;transform-origin:right center}
.p500-verdict__big b{display:block;transform-origin:left center}

@media (max-width:860px){
  .p500__grid{grid-template-columns:1fr;gap:30px}
  .p500-verdict{grid-template-columns:1fr}
}
@media (max-width:560px){
  .p500__toggle{width:100%}
  .p500__toggle button{padding:11px 10px;font-size:.8rem;white-space:normal}
  .p500-math{text-align:left}
}