/* Calculadora de margen — solo se encola en /calculadora-margen. Tokens --bzr-*, sin hex sueltos. */

.bzr-calc{
  display:grid;
  grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:var(--bzr-space-5);
  align-items:start;
}
.bzr-calc [data-bzr-calc-out],
.bzr-calc-fval{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Etiqueta de sección (Tus datos / Tu tramo / Tu coste mayorista) */
.bzr-calc-panel-label{
  display:block;
  font-size:.8125rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--bzr-color-accent);
}

/* ---- Controles ------------------------------------------------------------ */
.bzr-calc-controls{
  background:var(--bzr-color-surface);
  border:var(--bzr-border);
  border-radius:var(--bzr-radius-card);
  box-shadow:var(--bzr-shadow-card);
  padding:var(--bzr-space-5);
  display:flex;flex-direction:column;gap:var(--bzr-space-4);
}
.bzr-calc-field{display:flex;flex-direction:column}
.bzr-calc-field-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:.625rem;
}
.bzr-calc-flabel{font-size:.9375rem;font-weight:600;color:var(--bzr-color-muted)}
.bzr-calc-fval{
  font-family:var(--bzr-font-heading);
  font-size:clamp(1.75rem,4vw,2.5rem);
  font-weight:800;line-height:1;color:var(--bzr-color-ink);
  text-align:right;white-space:nowrap;
}

/* Slider */
.bzr-calc-range{
  -webkit-appearance:none;appearance:none;width:100%;height:.5rem;
  border-radius:var(--bzr-radius-pill);cursor:pointer;
  background:linear-gradient(90deg,
    var(--bzr-color-accent) 0 var(--bzr-calc-fill,50%),
    var(--bzr-color-ring) var(--bzr-calc-fill,50%) 100%);
  outline:none;
}
.bzr-calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--bzr-color-surface);border:.3125rem solid var(--bzr-color-accent);
  box-shadow:var(--bzr-shadow-button);
  transition:transform var(--bzr-motion-fast) var(--bzr-ease),border-color var(--bzr-motion-fast) var(--bzr-ease);
}
.bzr-calc-range::-moz-range-thumb{
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--bzr-color-surface);border:.3125rem solid var(--bzr-color-accent);
  box-shadow:var(--bzr-shadow-button);
}
.bzr-calc-range:hover::-webkit-slider-thumb{transform:scale(1.06)}
.bzr-calc-range:active::-webkit-slider-thumb{transform:scale(1.14);border-color:var(--bzr-color-accent-dark)}
.bzr-calc-range:focus-visible{box-shadow:var(--bzr-focus-ring)}

.bzr-calc-tramo{
  border-top:var(--bzr-border);padding-top:var(--bzr-space-4);
  display:flex;flex-direction:column;gap:var(--bzr-space-2);
}
.bzr-calc-tramo-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.bzr-calc-note{font-size:.8125rem;color:var(--bzr-color-muted);margin:0}
.bzr-calc-note a{color:var(--bzr-color-accent);font-weight:600}

/* ---- Resultados ----------------------------------------------------------- */
.bzr-calc-results{display:flex;flex-direction:column;gap:var(--bzr-space-3)}

/* Resumen "Tu margen al año": misma combinación que el CTA/drench (azul + turquesa clara) */
.bzr-calc-hero{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(160deg,
    var(--bzr-color-accent) 0%,
    var(--bzr-color-drench-mid) 45%,
    var(--bzr-color-brand-navy) 100%);
  color:var(--bzr-color-on-dark);
  border-radius:var(--bzr-radius-card);
  box-shadow:var(--bzr-shadow-window);
  padding:var(--bzr-space-5);
}
.bzr-calc-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 70% at 50% -10%, rgba(143,176,255,.45), transparent 62%),
    radial-gradient(45% 60% at 8% 110%, color-mix(in srgb,var(--bzr-color-teal) 24%,transparent), transparent 60%);
}
.bzr-calc-hero > *{position:relative;z-index:1}
.bzr-calc-hero-label{
  display:block;font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--bzr-color-kicker-on-dark);
}
.bzr-calc-hero b{
  display:block;font-family:var(--bzr-font-heading);
  font-size:clamp(2.75rem,6vw,3.75rem);font-weight:800;line-height:1.02;
  color:var(--bzr-color-accent-on-dark);margin:.25rem 0 .375rem;
}
.bzr-calc-hero-sub{display:block;font-size:.9375rem;color:var(--bzr-color-on-dark-muted)}

/* Métricas: centradas */
.bzr-calc-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bzr-space-2)}
.bzr-calc-metric{
  background:var(--bzr-color-surface);border:var(--bzr-border);
  border-radius:var(--bzr-radius-window);padding:var(--bzr-space-3);
  display:flex;flex-direction:column;gap:.25rem;align-items:center;text-align:center;
}
.bzr-calc-metric span{font-size:.8125rem;color:var(--bzr-color-muted)}
.bzr-calc-metric b{font-size:clamp(1.375rem,2.6vw,1.625rem);font-weight:800;color:var(--bzr-color-ink)}

/* Coste mayorista: NO centrado (fila que llena el ancho, no se ve vacío) */
.bzr-calc-cost{
  background:var(--bzr-color-surface);border:var(--bzr-border);
  border-radius:var(--bzr-radius-card);padding:var(--bzr-space-4);
  display:flex;flex-direction:column;gap:var(--bzr-space-2);
}
.bzr-calc-cost-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bzr-space-3)}
.bzr-calc-cost-top b{font-size:clamp(1.5rem,3vw,1.875rem);font-weight:800;color:var(--bzr-color-ink)}
.bzr-calc-cost-unit{font-size:.9375rem;color:var(--bzr-color-muted);white-space:nowrap}
.bzr-calc-cost-brk{display:flex;gap:.625rem;flex-wrap:wrap}
.bzr-calc-pill{
  background:var(--bzr-color-ice);border:var(--bzr-border);border-radius:var(--bzr-radius-control);
  padding:.5rem .75rem;font-size:.8125rem;color:var(--bzr-color-muted);
}
.bzr-calc-pill b{font-size:.9375rem;color:var(--bzr-color-ink);margin-left:.25rem}

.bzr-calc-warn{
  font-size:.875rem;color:var(--bzr-color-warning);
  background:var(--bzr-color-warning-soft);border:var(--bzr-border);
  border-radius:var(--bzr-radius-control);padding:.625rem .75rem;margin:0;
}

/* ---- Beneficio del servicio (ANCHO TOTAL, iconos azul Bilzur) ------------- */
.bzr-calc-benefits{grid-column:1 / -1;margin-top:var(--bzr-space-4)}
.bzr-calc-benefits-title{
  font-family:var(--bzr-font-heading);
  font-size:clamp(1.5rem,3.2vw,2.125rem);font-weight:800;line-height:1.15;
  color:var(--bzr-color-ink);text-align:center;text-wrap:balance;
  margin:0 0 var(--bzr-space-4);
}
.bzr-calc-soft{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bzr-space-3)}
.bzr-calc-benefit{
  background:var(--bzr-color-surface);
  border:var(--bzr-border);border-radius:var(--bzr-radius-card);
  box-shadow:var(--bzr-shadow-card);
  padding:var(--bzr-space-4);display:flex;flex-direction:column;gap:.375rem;
}
.bzr-calc-benefit-i{display:inline-flex;color:var(--bzr-color-accent)}
.bzr-calc-benefit-i svg{width:1.75rem;height:1.75rem;display:block}
.bzr-calc-benefit-k{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--bzr-color-accent-dark)}
.bzr-calc-benefit b{font-size:1.0625rem;font-weight:800;line-height:1.25;color:var(--bzr-color-ink)}
.bzr-calc-benefit-d{font-size:.875rem;color:var(--bzr-color-muted)}
.bzr-calc-foot{font-size:.8125rem;color:var(--bzr-color-muted);font-style:italic;text-align:center;margin:var(--bzr-space-3) 0 0}

/* ---- Banda de conversión (ancho total, reutiliza el drench del CTA) -------- */
.bzr-calc-cta{grid-column:1 / -1;margin-top:var(--bzr-space-4)}
.bzr-calc-cta-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--bzr-space-4);align-items:center}
.bzr-calc-cta .bzr-h2{font-size:clamp(1.5rem,3vw,2.125rem);margin:0}
.bzr-calc-cta .bzr-copy{margin:0 0 var(--bzr-space-3)}
.bzr-calc-cta .bzr-actions{gap:.75rem;flex-wrap:wrap}
.bzr-calc-cta .bzr-btn{font-size:1rem;padding:.85rem 1.35rem}
.bzr-calc-cta .bzr-btn--primary{font-size:1.0625rem;font-weight:700;padding:.95rem 1.6rem;display:inline-flex;align-items:center;gap:.5rem;box-shadow:var(--bzr-shadow-button)}
.bzr-calc-cta .bzr-btn--primary svg{width:1.15rem;height:1.15rem;flex:0 0 auto}
.bzr-calc-cta .bzr-btn--primary:hover{transform:translateY(-2px)}
.bzr-calc-cta .bzr-btn--primary svg{transition:transform var(--bzr-motion-fast) var(--bzr-ease)}
.bzr-calc-cta .bzr-btn--primary:hover svg{transform:translateX(3px)}


/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:62rem){
  .bzr-calc{grid-template-columns:1fr;gap:var(--bzr-space-4)}
  .bzr-calc-cta-grid{grid-template-columns:1fr;gap:var(--bzr-space-3)}
}
@media (max-width:34rem){
  .bzr-calc-metrics{grid-template-columns:1fr}
  .bzr-calc-soft{grid-template-columns:1fr}
  .bzr-calc-cost-top{flex-direction:column;align-items:flex-start;gap:.25rem}
}

@media (prefers-reduced-motion:reduce){
  .bzr-calc-range::-webkit-slider-thumb{transition:none}
}