/* ==================================================================
 * Calculadora de Estrés y Burnout Laboral — Psicocentro Alcázar
 * ------------------------------------------------------------------
 * Todo va scopeado bajo .bcalc por dos motivos:
 *   1. no contaminar el resto de la plantilla MODX;
 *   2. ganar en especificidad a Tailwind Preflight, que se carga
 *      de forma asíncrona desde cdn.tailwindcss.com y resetea
 *      márgenes, bordes, listas y tamaños de encabezado.
 * Por eso cada propiedad que Preflight resetea se declara aquí de
 * forma explícita en lugar de confiar en los estilos del navegador.
 * ================================================================== */

.bcalc,
.bcont {
  /* --- Paleta: tomada de la configuración Tailwind del sitio ------ */
  --bc-bg: #F3F1EB;
  --bc-surface: #FFFFFF;
  --bc-surface-2: #EEEBE2;
  --bc-ink: #1A1A1A;
  --bc-ink-2: #4B5563;
  --bc-ink-3: #666D7A;
  --bc-line: rgba(26, 26, 26, 0.12);
  --bc-line-strong: rgba(26, 26, 26, 0.28);

  --bc-accent: #F8F613;
  --bc-accent-ink: #1A1A1A;
  --bc-accent-soft: rgba(248, 246, 19, 0.22);

  /* --- Rampa de severidad ----------------------------------------
   * El amarillo de marca no puede transmitir gravedad: sobre hueso
   * no se lee ni como bien ni como mal. Rampa aparte, contrastada
   * en AA sobre #F3F1EB y sobre #FFFFFF.
   * --------------------------------------------------------------- */
  --bc-n1: #4A7C59;
  --bc-n2: #A87E00;
  --bc-n3: #B4462F;
  --bc-n1-soft: #E7EFE9;
  --bc-n2-soft: #F8F0D8;
  --bc-n3-soft: #F7E5E0;
  /* Texto de las píldoras: tono propio, más oscuro que el relleno, para
     alcanzar 4.5:1 sobre el fondo suave correspondiente. */
  --bc-n1-text: #457453;
  --bc-n2-text: #886600;
  --bc-n3-text: #B0442E;

  /* Color de cada icono de red. Verificados a >=3:1 (gráficos) sobre
     hueso y sobre blanco; en oscuro se sustituyen más abajo. */
  --bc-facebook: #1877F2;
  --bc-x: #000000;
  --bc-linkedin: #0A66C2;

  --bc-radius: 1rem;
  --bc-radius-lg: 1.5rem;
  --bc-radius-xl: 2rem;
  --bc-pill: 9999px;

  --bc-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --bc-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --bc-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 3px rgba(26, 26, 26, 0.06);
  --bc-shadow: 0 4px 6px -1px rgba(26, 26, 26, 0.05), 0 10px 24px -6px rgba(26, 26, 26, 0.10);
  --bc-shadow-lg: 0 12px 32px -8px rgba(26, 26, 26, 0.16);

  --bc-ease: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--bc-font-sans);
  color: var(--bc-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
}

/* Modo oscuro: el sitio tiene darkMode:'class' configurado aunque
   todavía no exponga el interruptor. Lo soportamos por si aparece. */
.dark .bcalc,
.dark .bcont,
[data-theme='dark'] .bcalc,
[data-theme='dark'] .bcont {
  --bc-bg: #121212;
  --bc-surface: #1E1E1E;
  --bc-surface-2: #262626;
  --bc-ink: #E5E5E5;
  --bc-ink-2: #B4B4B4;
  --bc-ink-3: #8F8F8F;
  --bc-line: rgba(229, 229, 229, 0.14);
  --bc-line-strong: rgba(229, 229, 229, 0.3);
  --bc-n1: #7FB08C;
  --bc-n2: #E0B84A;
  --bc-n3: #E0836B;
  --bc-n1-soft: rgba(127, 176, 140, 0.14);
  --bc-n2-soft: rgba(224, 184, 74, 0.14);
  --bc-n3-soft: rgba(224, 131, 107, 0.14);
  --bc-n1-text: #7FB08C;
  --bc-n2-text: #E0B84A;
  --bc-n3-text: #E0836B;
  /* En oscuro, el azul de LinkedIn se queda en 2.93:1 y el negro de X
     desaparece: ambos se aclaran. */
  --bc-x: #FFFFFF;
  --bc-linkedin: #70B5F9;
  --bc-shadow-sm: none;
  --bc-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.5);
  --bc-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}

/* --- Reset defensivo interno ------------------------------------- */
.bcalc *,
.bcalc *::before,
.bcalc *::after,
.bcont *,
.bcont *::before,
.bcont *::after { box-sizing: border-box; }

/* :where() aporta 0 a la especificidad. Es deliberado: el reset debe
   ganar a Preflight (selectores de elemento, 0-0-1) pero NO a las
   clases de componente que vienen después (0-1-0). Con `.bcalc p`
   a secas, este bloque anulaba los márgenes de mis propios títulos. */
.bcalc :where(p, ul, ol, li, h1, h2, h3, h4, figure) { margin: 0; padding: 0; }

.bcalc :where(ul, ol) { list-style: none; }

.bcalc :where(button) {
  font: inherit;
  color: inherit;
  margin: 0;
  cursor: pointer;
  border: 0 solid transparent;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

.bcalc :where(a) { color: inherit; }

.bcalc strong { font-weight: 600; }
.bcalc em { font-style: italic; }

.bcalc :focus-visible {
  outline: 3px solid var(--bc-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Los encabezados reciben foco por código al cambiar de pantalla, para
   que los lectores de pantalla anuncien la pregunta nueva. Ahí el
   anillo sobra: no es un control y nadie ha navegado hasta él. */
.bcalc [tabindex='-1']:focus,
.bcalc [tabindex='-1']:focus-visible { outline: none; }

/* ==================================================================
 * Estructura
 * ================================================================== */
.bcalc__shell {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 1024px) {
  .bcalc__shell { padding: 0 2rem; }
}
.bcalc__shell--wide { max-width: 62rem; }

.bcalc__screen { animation: bc-in 0.42s var(--bc-ease) both; }

@keyframes bc-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ==================================================================
 * Tipografía
 * ================================================================== */
.bcalc__kicker {
  display: block;
  font-family: var(--bc-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bc-ink-3);
  margin: 0 0 1rem;
}

.bcalc__display {
  font-family: var(--bc-font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  color: var(--bc-ink);
  margin: 0;
}

.bcalc__h2 {
  font-family: var(--bc-font-display);
  font-weight: 400;
  line-height: 1.18;
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  color: var(--bc-ink);
  margin: 0;
}

.bcalc__h3 {
  font-family: var(--bc-font-sans);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--bc-ink);
  margin: 0;
}

.bcalc__lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.62;
  color: var(--bc-ink-2);
}

.bcalc__body { color: var(--bc-ink-2); }

.bcalc__fine {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bc-ink-3);
}

/* ==================================================================
 * Botones (píldora, como el resto del sitio)
 * ================================================================== */
.bcalc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--bc-pill);
  font-family: var(--bc-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: transform 0.18s var(--bc-ease), background-color 0.18s var(--bc-ease),
              box-shadow 0.18s var(--bc-ease), border-color 0.18s var(--bc-ease);
}

.bcalc__btn--primary {
  background-color: var(--bc-accent);
  color: var(--bc-accent-ink);
  box-shadow: var(--bc-shadow-sm);
}
.bcalc__btn--primary:hover { transform: translateY(-2px); box-shadow: var(--bc-shadow); }
.bcalc__btn--primary:active { transform: translateY(0); }

.bcalc__btn--dark {
  background-color: var(--bc-ink);
  color: var(--bc-bg);
}
.bcalc__btn--dark:hover { transform: translateY(-2px); box-shadow: var(--bc-shadow); }

.bcalc__btn--ghost {
  background-color: transparent;
  color: var(--bc-ink-2);
  border: 1px solid var(--bc-line-strong);
}
.bcalc__btn--ghost:hover { color: var(--bc-ink); border-color: var(--bc-ink); }

.bcalc__btn--sm { min-height: 2.5rem; padding: 0.5rem 1.125rem; font-size: 0.875rem; }

.bcalc__btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ==================================================================
 * Tarjetas
 * ================================================================== */
.bcalc__card {
  background-color: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-sm);
}

.bcalc__card--pad { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

/* ==================================================================
 * Barra de progreso segmentada (un segmento por sección)
 * ================================================================== */
.bcalc__progress {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.875rem 0 1rem;
  background-color: var(--bc-bg);
  margin-bottom: 1.5rem;
}

.bcalc__progress-track {
  display: flex;
  gap: 0.3125rem;
  margin-bottom: 0.625rem;
}

.bcalc__progress-seg {
  flex: 1 1 0;
  height: 5px;
  border-radius: var(--bc-pill);
  background-color: var(--bc-line);
  overflow: hidden;
}

.bcalc__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--bc-pill);
  background-color: var(--bc-accent);
  transition: width 0.5s var(--bc-ease);
}
/* Las secciones cerradas se marcan en tinta y no en amarillo: así se
   distingue de un vistazo lo terminado de lo que está en curso. */
.bcalc__progress-seg--done .bcalc__progress-fill { background-color: var(--bc-ink); }

.bcalc__progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--bc-ink-3);
}
.bcalc__progress-meta strong { color: var(--bc-ink); font-weight: 600; }

/* ==================================================================
 * Pantalla de inicio
 * ================================================================== */
/* --- Cabecera de la página (h1) -----------------------------------
   Vive en el chunk, no la genera el JavaScript, y se queda visible en
   todas las pantallas. En la portada luce a tamaño completo; en cuanto
   empieza el cuestionario se encoge, porque encima de una pregunta un
   título de 68 px estorba más que ayuda. Sin JavaScript se queda grande,
   que es el estado correcto por defecto. */
.bcalc__cabecera {
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem) 0 0;
  margin-bottom: 1.25rem;
}

.bcalc[data-fase='flujo'] .bcalc__cabecera,
.bcalc[data-fase='aviso'] .bcalc__cabecera,
.bcalc[data-fase='resultado'] .bcalc__cabecera,
.bcalc[data-fase='generico'] .bcalc__cabecera {
  padding-top: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  margin-bottom: 0.5rem;
}
.bcalc[data-fase='flujo'] .bcalc__cabecera .bcalc__kicker,
.bcalc[data-fase='aviso'] .bcalc__cabecera .bcalc__kicker,
.bcalc[data-fase='resultado'] .bcalc__cabecera .bcalc__kicker,
.bcalc[data-fase='generico'] .bcalc__cabecera .bcalc__kicker { display: none; }

.bcalc[data-fase='flujo'] .bcalc__cabecera .bcalc__display,
.bcalc[data-fase='aviso'] .bcalc__cabecera .bcalc__display,
.bcalc[data-fase='resultado'] .bcalc__cabecera .bcalc__display,
.bcalc[data-fase='generico'] .bcalc__cabecera .bcalc__display {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  color: var(--bc-ink-2);
}

.bcalc__intro { padding: 0 0 clamp(1.5rem, 1rem + 3vw, 3.5rem); }

.bcalc__intro-sub {
  font-family: var(--bc-font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.4;
  color: var(--bc-ink-2);
  margin: 0;
}

.bcalc__rule {
  height: 1px;
  background-color: var(--bc-line);
  border: 0;
  margin: 2rem 0;
}

.bcalc__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 2rem 0;
}

.bcalc__stat {
  padding: 1.125rem 1rem;
  background-color: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  text-align: center;
}

.bcalc__stat-num {
  display: block;
  font-family: var(--bc-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.1;
  color: var(--bc-ink);
}

.bcalc__stat-lbl {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bc-ink-3);
  line-height: 1.35;
}

.bcalc__note {
  padding: 1.125rem 1.25rem;
  border-left: 3px solid var(--bc-accent);
  background-color: var(--bc-accent-soft);
  border-radius: 0 var(--bc-radius) var(--bc-radius) 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--bc-ink-2);
}

.bcalc__note--plain {
  border-left-color: var(--bc-line-strong);
  background-color: var(--bc-surface-2);
}

.bcalc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ==================================================================
 * Portada de sección
 * ================================================================== */
.bcalc__sec { padding: clamp(1.5rem, 1rem + 3vw, 3rem) 0; }

.bcalc__sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--bc-pill);
  background-color: var(--bc-accent);
  color: var(--bc-accent-ink);
  font-family: var(--bc-font-display);
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

/* ==================================================================
 * Preguntas
 * ================================================================== */
.bcalc__q { padding: clamp(0.5rem, 0.25rem + 1vw, 1.5rem) 0 2rem; }

.bcalc__q-text {
  font-family: var(--bc-font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 1.35vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--bc-ink);
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.bcalc__q-frame {
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bc-ink-3);
  margin: 0 0 1.75rem;
}

.bcalc__opts { display: flex; flex-direction: column; gap: 0.5rem; }

.bcalc__opt {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1.25rem;
  text-align: left;
  background-color: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  transition: border-color 0.15s var(--bc-ease), background-color 0.15s var(--bc-ease),
              transform 0.15s var(--bc-ease), box-shadow 0.15s var(--bc-ease);
}

.bcalc__opt:hover {
  border-color: var(--bc-line-strong);
  transform: translateX(3px);
  box-shadow: var(--bc-shadow-sm);
}

.bcalc__opt-key {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background-color: var(--bc-surface-2);
  color: var(--bc-ink-3);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s var(--bc-ease), color 0.15s var(--bc-ease);
}

.bcalc__opt-lbl { flex: 1 1 auto; font-size: 1rem; font-weight: 500; }

.bcalc__opt[aria-checked='true'] {
  border-color: var(--bc-ink);
  background-color: var(--bc-accent-soft);
  box-shadow: inset 0 0 0 1px var(--bc-ink);
}
.bcalc__opt[aria-checked='true'] .bcalc__opt-key {
  background-color: var(--bc-accent);
  color: var(--bc-accent-ink);
}

/* Destello breve al marcar, justo antes del auto-avance. */
.bcalc__opt--flash { background-color: var(--bc-accent); }
.bcalc__opt--flash .bcalc__opt-key { background-color: var(--bc-ink); color: var(--bc-bg); }

.bcalc__q-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
}

.bcalc__hint { font-size: 0.75rem; color: var(--bc-ink-3); }
@media (max-width: 640px) { .bcalc__hint { display: none; } }

/* ==================================================================
 * Avisos de seguridad
 * ================================================================== */
.bcalc__alert {
  border-radius: var(--bc-radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--bc-line);
  background-color: var(--bc-surface);
}
.bcalc__alert--urgente {
  border-color: var(--bc-n3);
  border-left-width: 5px;
  background-color: var(--bc-n3-soft);
}
.bcalc__alert--elevado {
  border-color: var(--bc-n2);
  border-left-width: 5px;
  background-color: var(--bc-n2-soft);
}
.bcalc__alert-title {
  font-family: var(--bc-font-display);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.2;
  margin: 0 0 0.875rem;
}

/* --- Recursos de crisis ------------------------------------------ */
.bcalc__crisis { margin: 1.5rem 0 0; }

.bcalc__crisis-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}

.bcalc__crisis-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background-color: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  text-decoration: none;
  transition: border-color 0.15s var(--bc-ease), transform 0.15s var(--bc-ease);
}
.bcalc__crisis-item:hover { border-color: var(--bc-ink); transform: translateX(3px); }

.bcalc__crisis-tel {
  flex: 0 0 auto;
  font-family: var(--bc-font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bc-ink);
  min-width: 3.5rem;
}
.bcalc__crisis-body { flex: 1 1 auto; }
.bcalc__crisis-name { font-weight: 600; font-size: 0.9375rem; }
.bcalc__crisis-desc { font-size: 0.8125rem; color: var(--bc-ink-3); line-height: 1.5; }

/* ==================================================================
 * Resultado
 * ================================================================== */
.bcalc__result { padding: clamp(1rem, 0.5rem + 2vw, 2rem) 0 3rem; }

.bcalc__hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem);
  border-radius: var(--bc-radius-xl);
  background-color: var(--bc-surface);
  border: 1px solid var(--bc-line);
  box-shadow: var(--bc-shadow);
}
/* Filo de color a la izquierda: es el único indicador cromático del
   nivel, y siempre va acompañado de texto. Nunca sólo color. */
.bcalc__hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background-color: var(--bc-n1);
}
.bcalc__hero[data-nivel='atencion']::before { background-color: var(--bc-n1); }
.bcalc__hero[data-nivel='aviso']::before { background-color: var(--bc-n2); }
.bcalc__hero[data-nivel='alerta']::before { background-color: var(--bc-n3); }

.bcalc__hero-title {
  font-family: var(--bc-font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0.75rem 0 1rem;
  text-wrap: balance;
}

.bcalc__hero-sum {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--bc-ink-2);
  max-width: 44ch;
}

/* --- Barras ------------------------------------------------------ */
.bcalc__bars {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  margin-top: 1.75rem;
}

.bcalc__bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.bcalc__bar-name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bc-ink-2);
  line-height: 1.35;
}

.bcalc__bar-band {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.25rem 0.6875rem;
  border-radius: var(--bc-pill);
  white-space: nowrap;
}
.bcalc__bar-band[data-nivel='1'] { background-color: var(--bc-n1-soft); color: var(--bc-n1-text); }
.bcalc__bar-band[data-nivel='2'] { background-color: var(--bc-n2-soft); color: var(--bc-n2-text); }
.bcalc__bar-band[data-nivel='3'] { background-color: var(--bc-n3-soft); color: var(--bc-n3-text); }

.bcalc__bar-track {
  position: relative;
  height: 14px;
  border-radius: var(--bc-pill);
  background-color: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  overflow: hidden;
}

.bcalc__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--bc-pill);
  transition: width 0.85s var(--bc-ease);
}
.bcalc__bar-fill[data-nivel='1'] { background-color: var(--bc-n1); }
.bcalc__bar-fill[data-nivel='2'] { background-color: var(--bc-n2); }
.bcalc__bar-fill[data-nivel='3'] { background-color: var(--bc-n3); }

/* Marcas en los límites de banda, para que el relleno sea legible. */
.bcalc__bar-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--bc-line-strong);
  opacity: 0.5;
}

.bcalc__bar-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4375rem;
  font-size: 0.75rem;
  color: var(--bc-ink-3);
}
.bcalc__bar-val { font-variant-numeric: tabular-nums; }

/* La escala de eficacia va al revés que las demás: barra llena = bien.
   Se marca de forma explícita para que no se lea mal. */
.bcalc__bar--positiva .bcalc__bar-track {
  border-style: dashed;
  border-color: var(--bc-line-strong);
}
.bcalc__bar-inv {
  font-weight: 600;
  color: var(--bc-ink-2);
}

/* --- Bloques de texto del resultado ------------------------------ */
.bcalc__block { margin-top: 2.75rem; }

.bcalc__block-title {
  font-family: var(--bc-font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.2;
  margin: 0 0 1.125rem;
}

.bcalc__prose p { margin: 0 0 1.0625rem; color: var(--bc-ink-2); line-height: 1.68; }
.bcalc__prose p:last-child { margin-bottom: 0; }

.bcalc__list { display: flex; flex-direction: column; gap: 0.875rem; }

.bcalc__list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--bc-ink-2);
  line-height: 1.62;
}
.bcalc__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6875rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--bc-pill);
  background-color: var(--bc-accent);
  box-shadow: 0 0 0 1px var(--bc-line-strong);
}

.bcalc__notes { display: flex; flex-direction: column; gap: 0.75rem; }

.bcalc__note-card {
  padding: 1.125rem 1.25rem;
  background-color: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-left: 3px solid var(--bc-line-strong);
  border-radius: 0 var(--bc-radius) var(--bc-radius) 0;
}
.bcalc__note-title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.bcalc__note-text { font-size: 0.9375rem; color: var(--bc-ink-2); line-height: 1.6; }

/* --- Llamada a la acción ----------------------------------------- */
.bcalc__cta {
  margin-top: 2.5rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--bc-radius-lg);
  background-color: var(--bc-ink);
  color: var(--bc-bg);
}
.bcalc__cta .bcalc__block-title { color: var(--bc-bg); margin-bottom: 0.75rem; }
.bcalc__cta p { color: rgba(255, 255, 255, 0.78); line-height: 1.65; }
.dark .bcalc__cta,
[data-theme='dark'] .bcalc__cta { background-color: var(--bc-surface-2); color: var(--bc-ink); }
.dark .bcalc__cta p,
[data-theme='dark'] .bcalc__cta p { color: var(--bc-ink-2); }

/* --- Compartir --------------------------------------------------- */
.bcalc__share {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border: 1px dashed var(--bc-line-strong);
  border-radius: var(--bc-radius-lg);
}
.bcalc__redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.125rem;
}

.bcalc__red {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--bc-line-strong);
  border-radius: var(--bc-pill);
  background-color: var(--bc-surface);
  color: var(--bc-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.15s var(--bc-ease), transform 0.15s var(--bc-ease),
              box-shadow 0.15s var(--bc-ease);
}
.bcalc__red:hover {
  border-color: var(--bc-ink);
  transform: translateY(-2px);
  box-shadow: var(--bc-shadow-sm);
}

/* El color sólo va en el icono: el rótulo se queda en tinta, que es lo
   que mantiene el contraste del texto y el conjunto sobrio. */
.bcalc__red-icono { flex: 0 0 auto; display: block; }
.bcalc__red[data-red='facebook'] .bcalc__red-icono { color: var(--bc-facebook); }
.bcalc__red[data-red='x'] .bcalc__red-icono { color: var(--bc-x); }
.bcalc__red[data-red='linkedin'] .bcalc__red-icono { color: var(--bc-linkedin); }

.bcalc__share-lbl {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bc-ink-3);
}

.bcalc__share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.bcalc__share-input {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  font-family: var(--bc-font-sans);
  font-size: 0.8125rem;
  color: var(--bc-ink-2);
  background-color: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-pill);
}

/* --- Metodología ------------------------------------------------- */
.bcalc__method {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--bc-line);
}
.bcalc__refs { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.bcalc__refs li {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bc-ink-3);
  padding-left: 1.5rem;
  position: relative;
  counter-increment: bc-ref;
}
.bcalc__refs { counter-reset: bc-ref; }
.bcalc__refs li::before {
  content: counter(bc-ref) '.';
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  color: var(--bc-ink-3);
}
.bcalc__refs a { color: var(--bc-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.bcalc__refs a:hover { color: var(--bc-ink); }

.bcalc__disclaimer {
  margin-top: 2rem;
  padding: 1.25rem 1.375rem;
  background-color: var(--bc-surface-2);
  border-radius: var(--bc-radius);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--bc-ink-3);
}

/* Aviso de "vista general" al abrir un enlace compartido. */
.bcalc__generic {
  margin-bottom: 1.5rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--bc-line-strong);
  border-radius: var(--bc-radius);
  background-color: var(--bc-surface-2);
}

.bcalc__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==================================================================
 * Movimiento reducido
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bcalc *,
  .bcalc *::before,
  .bcalc *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .bcalc__opt:hover,
  .bcalc__crisis-item:hover,
  .bcalc__btn--primary:hover,
  .bcalc__btn--dark:hover { transform: none; }
}

/* ==================================================================
 * Impresión: hoja de resultado limpia con Ctrl+P
 * ================================================================== */
@media print {
  .bcalc__progress,
  .bcalc__redes,
  .bcalc__share,
  .bcalc__actions,
  .bcalc__cta a,
  .bcalc__btn { display: none !important; }

  .bcalc {
    --bc-bg: #FFFFFF;
    --bc-surface: #FFFFFF;
    --bc-surface-2: #F5F5F5;
    font-size: 11pt;
  }
  .bcalc__screen { animation: none; }
  .bcalc__hero,
  .bcalc__card,
  .bcalc__note-card,
  .bcalc__cta {
    box-shadow: none;
    border: 1px solid #CCCCCC;
    break-inside: avoid;
  }
  .bcalc__cta { background-color: #F5F5F5 !important; color: #1A1A1A !important; }
  .bcalc__cta p,
  .bcalc__cta .bcalc__block-title { color: #1A1A1A !important; }
  .bcalc__bar-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .bcalc__block { break-inside: avoid; }
  .bcalc__refs a::after { content: ' (' attr(href) ')'; font-size: 8pt; word-break: break-all; }
}


/* ==================================================================
 * CONTENIDO ESTÁTICO (chunk burnoutContenido)
 * ------------------------------------------------------------------
 * Va debajo de la calculadora y se publica como HTML plano para que
 * Google pueda leerlo: el buscador ejecuta JavaScript, pero no
 * responde cuestionarios.
 * ================================================================== */
.bcont {
  font-family: var(--bc-font-sans);
  color: var(--bc-ink);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.bcont :where(p, ul, ol, li, h2, h3, h4, figure) { margin: 0; padding: 0; }
.bcont :where(ul, ol) { list-style: none; }
.bcont :where(a) { color: inherit; }
.bcont :focus-visible { outline: 3px solid var(--bc-ink); outline-offset: 3px; border-radius: 4px; }

.bcont__bloque { margin-top: 3.25rem; }
.bcont__bloque:first-child { margin-top: 0; }

.bcont__h2 {
  font-family: var(--bc-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.125rem;
  text-wrap: balance;
}

.bcont__h3 {
  font-family: var(--bc-font-sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0.25rem;
}

.bcont__h4 {
  font-family: var(--bc-font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bc-ink-3);
  margin: 1.5rem 0 0.625rem;
}

.bcont p { color: var(--bc-ink-2); margin-bottom: 1.0625rem; }
.bcont p:last-child { margin-bottom: 0; }

.bcont__pie {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--bc-ink-3);
}

/* --- Acordeón -----------------------------------------------------
   <details> nativo: está en el HTML desde el principio (indexable),
   funciona sin JavaScript y ya trae la semántica de accesibilidad. */
.bcont__acordeon { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; }

.bcont__item {
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background-color: var(--bc-surface);
  overflow: hidden;
  transition: border-color 0.15s var(--bc-ease);
}
.bcont__item:hover { border-color: var(--bc-line-strong); }
.bcont__item[open] { border-color: var(--bc-ink); }

.bcont__sum {
  display: block;
  position: relative;
  padding: 1.125rem 3.25rem 1.125rem 1.375rem;
  cursor: pointer;
  list-style: none;
}
.bcont__sum::-webkit-details-marker { display: none; }

.bcont__sum-tit {
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--bc-ink);
}
.bcont__sum-res {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--bc-ink-2);
}

/* Indicador +/− dibujado en CSS: sin imágenes ni fuentes de iconos. */
.bcont__sum::after,
.bcont__sum::before {
  content: '';
  position: absolute;
  right: 1.375rem;
  top: 1.75rem;
  width: 13px;
  height: 2px;
  background-color: var(--bc-ink);
  border-radius: 2px;
  transition: transform 0.2s var(--bc-ease), opacity 0.2s var(--bc-ease);
}
.bcont__sum::before { transform: rotate(90deg); }
.bcont__item[open] .bcont__sum::before { transform: rotate(0deg); opacity: 0; }

.bcont__cuerpo {
  padding: 0 1.375rem 1.5rem;
  border-top: 1px solid var(--bc-line);
  margin-top: 0.25rem;
  padding-top: 1.25rem;
}

.bcont__lista { display: flex; flex-direction: column; gap: 0.75rem; }
.bcont__lista li {
  position: relative;
  padding-left: 1.625rem;
  color: var(--bc-ink-2);
  line-height: 1.62;
}
.bcont__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6875rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--bc-pill);
  background-color: var(--bc-accent);
  box-shadow: 0 0 0 1px var(--bc-line-strong);
}

.bcont__refs { counter-reset: bcont-ref; display: flex; flex-direction: column; gap: 0.75rem; }
.bcont__refs li {
  counter-increment: bcont-ref;
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--bc-ink-3);
}
.bcont__refs li::before {
  content: counter(bcont-ref) '.';
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
}
.bcont__refs a { color: var(--bc-ink-2); text-decoration: underline; text-underline-offset: 2px; }

/* --- Dimensiones -------------------------------------------------- */
.bcont__dims {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 1.5rem;
}
.bcont__dim {
  padding: 1.25rem 1.375rem;
  background-color: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-left: 3px solid var(--bc-accent);
  border-radius: 0 var(--bc-radius) var(--bc-radius) 0;
}
.bcont__dim-sub {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bc-ink-3);
  margin-bottom: 0.625rem;
}
.bcont__dim p { font-size: 0.9375rem; }

/* --- Cierre ------------------------------------------------------- */
.bcont__cierre {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background-color: var(--bc-surface-2);
  border-radius: var(--bc-radius-lg);
}

.bcont__cta {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-top: 0.75rem;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--bc-pill);
  background-color: var(--bc-accent);
  color: var(--bc-accent-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s var(--bc-ease), box-shadow 0.18s var(--bc-ease);
}
.bcont__cta:hover { transform: translateY(-2px); box-shadow: var(--bc-shadow); }

@media (prefers-reduced-motion: reduce) {
  .bcont *, .bcont *::before, .bcont *::after { transition-duration: 0.001ms !important; }
  .bcont__cta:hover { transform: none; }
}

/* En papel, el acordeón se abre entero. */
@media print {
  .bcont__item > .bcont__cuerpo { display: block !important; }
  .bcont__sum::before, .bcont__sum::after { display: none; }
  .bcont__cta { display: none; }
}