/* =====================================================================
   Bestard Capital — Calculadora de Incentivos Fiscales Audiovisuales
   calculator.css — Sistema de diseño (paleta neutra profesional + teal)
   Coherente con bestardcapital.com — estética Big4 / corporate premium.
   Todo bajo el namespace .bc-calc para que sea embebible sin conflictos.
   ===================================================================== */

.bc-calc {
  /* ---------- Type scale (fluida) ---------- */
  --bc-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --bc-text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --bc-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --bc-text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --bc-text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --bc-text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --bc-text-3xl: clamp(2.25rem, 1.4rem + 3.5vw, 4rem);

  /* ---------- Spacing (4px) ---------- */
  --bc-1: 0.25rem;  --bc-2: 0.5rem;  --bc-3: 0.75rem; --bc-4: 1rem;
  --bc-5: 1.25rem;  --bc-6: 1.5rem;  --bc-8: 2rem;    --bc-10: 2.5rem;
  --bc-12: 3rem;    --bc-16: 4rem;   --bc-20: 5rem;   --bc-24: 6rem;

  /* ---------- Color (neutro cálido + teal) ---------- */
  --bc-bg: #f7f6f2;
  --bc-surface: #ffffff;
  --bc-surface-2: #fbfaf7;
  --bc-surface-offset: #f1efe9;
  --bc-surface-dynamic: #e9e6df;
  --bc-border: #d9d5cc;
  --bc-divider: #e6e2da;

  --bc-text: #1e1c17;
  --bc-text-muted: #6f6d66;
  --bc-text-faint: #a9a7a0;
  --bc-text-inverse: #f9f8f4;

  --bc-primary: #01696f;       /* teal */
  --bc-primary-hover: #0c4e54;
  --bc-primary-active: #0f3638;
  --bc-primary-soft: #e2ecea;
  --bc-primary-tint: #f0f5f4;

  --bc-gold: #b0842b;          /* acento premium para cifras destacadas */
  --bc-gold-soft: #f2ebdc;
  --bc-success: #437a22;
  --bc-success-soft: #e6efdd;
  --bc-warning: #964219;
  --bc-warning-soft: #f6e8e0;

  --bc-radius-sm: 0.375rem;
  --bc-radius-md: 0.625rem;
  --bc-radius-lg: 1rem;
  --bc-radius-xl: 1.5rem;
  --bc-radius-full: 9999px;

  --bc-shadow-sm: 0 1px 2px rgba(30, 28, 23, 0.06);
  --bc-shadow-md: 0 6px 20px rgba(30, 28, 23, 0.08);
  --bc-shadow-lg: 0 18px 48px rgba(30, 28, 23, 0.12);

  --bc-font: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bc-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  font-family: var(--bc-font);
  font-size: var(--bc-text-base);
  color: var(--bc-text);
  line-height: 1.6;
  background: var(--bc-bg);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.bc-calc *, .bc-calc *::before, .bc-calc *::after { box-sizing: border-box; }
.bc-calc h1, .bc-calc h2, .bc-calc h3, .bc-calc h4 { margin: 0; line-height: 1.15; font-weight: 650; letter-spacing: -0.01em; }
.bc-calc p { margin: 0; }
.bc-calc button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.bc-calc input, .bc-calc select { font: inherit; color: inherit; }

/* ---------- Contenedor ---------- */
.bc-calc__shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(var(--bc-6), 4vw, var(--bc-16)) clamp(var(--bc-4), 4vw, var(--bc-10));
}

/* ---------- Hero ---------- */
.bc-hero { text-align: center; margin-bottom: var(--bc-10); }
.bc-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--bc-2);
  font-size: var(--bc-text-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bc-primary);
  background: var(--bc-primary-tint); border: 1px solid var(--bc-primary-soft);
  padding: var(--bc-2) var(--bc-4); border-radius: var(--bc-radius-full);
  margin-bottom: var(--bc-5);
}
.bc-hero__title { font-size: var(--bc-text-2xl); max-width: 20ch; margin: 0 auto var(--bc-4); }
.bc-hero__title em { font-style: normal; color: var(--bc-primary); }
.bc-hero__sub { font-size: var(--bc-text-lg); color: var(--bc-text-muted); max-width: 60ch; margin: 0 auto; }

/* ---------- Layout principal ---------- */
.bc-grid { display: grid; grid-template-columns: 1fr; gap: var(--bc-8); }
@media (min-width: 960px) { .bc-grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }

.bc-panel {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-sm);
  padding: clamp(var(--bc-5), 3vw, var(--bc-8));
}
.bc-panel + .bc-panel { margin-top: var(--bc-6); }

.bc-section-label {
  display: flex; align-items: center; gap: var(--bc-3);
  font-size: var(--bc-text-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bc-text-muted); margin-bottom: var(--bc-5);
}
.bc-section-label .bc-step {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  background: var(--bc-primary); color: var(--bc-text-inverse);
  border-radius: var(--bc-radius-full); font-size: 0.75rem; font-weight: 700;
}

/* ---------- Selector de régimen ---------- */
.bc-regimes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bc-3); }
@media (min-width: 620px) { .bc-regimes { grid-template-columns: repeat(4, 1fr); } }
.bc-regime {
  position: relative; text-align: left;
  border: 1.5px solid var(--bc-border); border-radius: var(--bc-radius-md);
  background: var(--bc-surface-2); padding: var(--bc-4);
  transition: border-color var(--bc-transition), background var(--bc-transition), box-shadow var(--bc-transition), transform var(--bc-transition);
}
.bc-regime:hover { border-color: var(--bc-primary); transform: translateY(-2px); box-shadow: var(--bc-shadow-md); }
.bc-regime.is-active { border-color: var(--bc-primary); background: var(--bc-primary-tint); box-shadow: 0 0 0 3px var(--bc-primary-soft); }
.bc-regime__tag { font-size: var(--bc-text-xs); font-weight: 700; color: var(--bc-primary); letter-spacing: 0.04em; }
.bc-regime__name { display: block; font-size: var(--bc-text-sm); font-weight: 600; margin-top: var(--bc-1); }
.bc-regime__rate { display: block; font-size: var(--bc-text-xs); color: var(--bc-text-muted); margin-top: var(--bc-2); }

/* ---------- Inputs ---------- */
.bc-field { margin-bottom: var(--bc-6); }
.bc-field:last-child { margin-bottom: 0; }
.bc-field__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--bc-3); gap: var(--bc-3); }
.bc-field__label { font-size: var(--bc-text-sm); font-weight: 600; }
.bc-field__value { font-size: var(--bc-text-base); font-weight: 700; color: var(--bc-primary); font-variant-numeric: tabular-nums; }
.bc-field__hint { font-size: var(--bc-text-xs); color: var(--bc-text-faint); margin-top: var(--bc-2); }

.bc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--bc-radius-full); background: var(--bc-surface-dynamic); outline: none; }
.bc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bc-primary); border: 3px solid var(--bc-surface); box-shadow: var(--bc-shadow-md); cursor: pointer; transition: transform var(--bc-transition); }
.bc-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.bc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--bc-primary); border: 3px solid var(--bc-surface); box-shadow: var(--bc-shadow-md); cursor: pointer; }

/* Chips (tipo de producción, rol) */
.bc-chips { display: flex; flex-wrap: wrap; gap: var(--bc-2); }
.bc-chip { border: 1.5px solid var(--bc-border); border-radius: var(--bc-radius-full); padding: var(--bc-2) var(--bc-4); font-size: var(--bc-text-sm); font-weight: 500; background: var(--bc-surface-2); transition: all var(--bc-transition); }
.bc-chip:hover { border-color: var(--bc-primary); }
.bc-chip.is-active { background: var(--bc-primary); color: var(--bc-text-inverse); border-color: var(--bc-primary); }

.bc-toggle-group { display: inline-flex; background: var(--bc-surface-offset); border-radius: var(--bc-radius-full); padding: var(--bc-1); border: 1px solid var(--bc-border); }
.bc-toggle-group button { padding: var(--bc-2) var(--bc-5); border-radius: var(--bc-radius-full); font-size: var(--bc-text-sm); font-weight: 600; color: var(--bc-text-muted); transition: all var(--bc-transition); }
.bc-toggle-group button.is-active { background: var(--bc-surface); color: var(--bc-primary); box-shadow: var(--bc-shadow-sm); }

.bc-number-input { width: 100%; padding: var(--bc-3) var(--bc-4); border: 1.5px solid var(--bc-border); border-radius: var(--bc-radius-md); background: var(--bc-surface-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.bc-number-input:focus { outline: none; border-color: var(--bc-primary); box-shadow: 0 0 0 3px var(--bc-primary-soft); }

.bc-hidden { display: none !important; }

/* ---------- Panel de resultados ---------- */
.bc-result__viewtoggle { display: flex; justify-content: center; margin-bottom: var(--bc-6); }
.bc-headline {
  text-align: center; padding: var(--bc-6) var(--bc-4);
  background: linear-gradient(160deg, var(--bc-primary) 0%, var(--bc-primary-active) 100%);
  border-radius: var(--bc-radius-lg); color: var(--bc-text-inverse); margin-bottom: var(--bc-6);
}
.bc-headline__label { font-size: var(--bc-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.bc-headline__value { font-size: var(--bc-text-3xl); font-weight: 750; letter-spacing: -0.02em; margin: var(--bc-2) 0; font-variant-numeric: tabular-nums; }
.bc-headline__sub { font-size: var(--bc-text-sm); opacity: 0.85; }

.bc-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bc-3); }
.bc-metric { background: var(--bc-surface-2); border: 1px solid var(--bc-divider); border-radius: var(--bc-radius-md); padding: var(--bc-4); }
.bc-metric__label { font-size: var(--bc-text-xs); color: var(--bc-text-muted); font-weight: 600; }
.bc-metric__value { font-size: var(--bc-text-lg); font-weight: 700; margin-top: var(--bc-1); font-variant-numeric: tabular-nums; }
.bc-metric--highlight { background: var(--bc-gold-soft); border-color: var(--bc-gold); }
.bc-metric--highlight .bc-metric__value { color: var(--bc-gold); }
.bc-metric--teal .bc-metric__value { color: var(--bc-primary); }

.bc-chart-wrap { margin-top: var(--bc-6); }
.bc-chart-wrap h4 { font-size: var(--bc-text-sm); color: var(--bc-text-muted); margin-bottom: var(--bc-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.bc-chart-holder { position: relative; height: 200px; }

.bc-avisos { margin-top: var(--bc-5); display: grid; gap: var(--bc-2); }
.bc-aviso { display: flex; gap: var(--bc-2); font-size: var(--bc-text-xs); color: var(--bc-warning); background: var(--bc-warning-soft); border-radius: var(--bc-radius-sm); padding: var(--bc-3); line-height: 1.4; }

/* ---------- CTA / Lead capture ---------- */
.bc-lead {
  margin-top: var(--bc-6); background: var(--bc-surface); border: 1.5px solid var(--bc-primary-soft);
  border-radius: var(--bc-radius-lg); padding: clamp(var(--bc-5), 3vw, var(--bc-8)); box-shadow: var(--bc-shadow-md);
}
.bc-lead__head { display: flex; gap: var(--bc-4); align-items: flex-start; margin-bottom: var(--bc-5); }
.bc-lead__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--bc-primary-tint); border-radius: var(--bc-radius-md); color: var(--bc-primary); }
.bc-lead__title { font-size: var(--bc-text-lg); }
.bc-lead__desc { font-size: var(--bc-text-sm); color: var(--bc-text-muted); margin-top: var(--bc-1); }
.bc-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--bc-4); }
@media (min-width: 560px) { .bc-form-grid { grid-template-columns: 1fr 1fr; } }
.bc-form-field { display: flex; flex-direction: column; gap: var(--bc-2); }
.bc-form-field.bc-span2 { grid-column: 1 / -1; }
.bc-form-field label { font-size: var(--bc-text-xs); font-weight: 600; color: var(--bc-text-muted); }
.bc-input, .bc-select { width: 100%; padding: var(--bc-3) var(--bc-4); border: 1.5px solid var(--bc-border); border-radius: var(--bc-radius-md); background: var(--bc-surface-2); }
.bc-input:focus, .bc-select:focus { outline: none; border-color: var(--bc-primary); box-shadow: 0 0 0 3px var(--bc-primary-soft); }
.bc-consent { display: flex; gap: var(--bc-3); align-items: flex-start; font-size: var(--bc-text-xs); color: var(--bc-text-muted); }
.bc-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--bc-primary); }
.bc-consent a { color: var(--bc-primary); text-decoration: underline; }

.bc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bc-2); padding: var(--bc-4) var(--bc-6); border-radius: var(--bc-radius-md); font-weight: 650; font-size: var(--bc-text-sm); transition: all var(--bc-transition); }
.bc-btn--primary { background: var(--bc-primary); color: var(--bc-text-inverse); box-shadow: var(--bc-shadow-sm); }
.bc-btn--primary:hover { background: var(--bc-primary-hover); transform: translateY(-2px); box-shadow: var(--bc-shadow-md); }
.bc-btn--primary:disabled { background: var(--bc-text-faint); cursor: not-allowed; transform: none; box-shadow: none; }
.bc-btn--full { width: 100%; }

.bc-lead__success { text-align: center; padding: var(--bc-6); }
.bc-lead__success svg { color: var(--bc-success); margin: 0 auto var(--bc-3); }
.bc-lead__success h3 { font-size: var(--bc-text-lg); margin-bottom: var(--bc-2); }
.bc-lead__success p { font-size: var(--bc-text-sm); color: var(--bc-text-muted); }

/* ---------- Disclaimer ---------- */
.bc-disclaimer { margin-top: var(--bc-10); border-top: 1px solid var(--bc-divider); padding-top: var(--bc-6); }
.bc-disclaimer p { font-size: var(--bc-text-xs); color: var(--bc-text-faint); line-height: 1.6; max-width: 90ch; margin: 0 auto var(--bc-2); text-align: center; }
.bc-disclaimer strong { color: var(--bc-text-muted); }

/* ---------- Utilidades ---------- */
.bc-fade-in { animation: bcFade 400ms var(--bc-transition); }
@keyframes bcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bc-calc * { animation: none !important; transition: none !important; } }