/* Estilos del stepper (home del diagnóstico): topbar, intro, paso de dimensión,
   progreso, mini-diálogo, composer, chips, tarjeta de evaluación y cierre. */

.app { min-height: calc(100vh - 64px); display: flex; flex-direction: column; }

/* ── Intro ── */
.intro-wrap { width: 100%; max-width: var(--maxw-narrow); margin-inline: auto; padding: clamp(32px, 7vh, 72px) var(--gutter); }
.intro-head { text-align: center; }
.intro-head h1 { margin: 14px 0 16px; }
.intro-head .lead { margin-inline: auto; max-width: 60ch; }
.ctx-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.intro-cambiar { margin-top: 10px; }
.intro-cambiar .btn-link { font-size: 13px; }
/* Tarjeta del lead/empresa en el intro */
.lead-card { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; padding: 13px 22px 13px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); text-align: left; max-width: 100%; }
.lead-card-logo { flex: none; width: 46px; height: 46px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.lead-card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lead-card-empresa { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); line-height: 1.2; }
.lead-card-meta { font-size: 12.5px; color: var(--primary); font-weight: 600; }
.lead-card-persona { font-size: 12.5px; color: var(--muted); }
/* Lead-card e enlace sobre el hero oscuro */
.hero-dark .lead-card { background: rgba(255, 255, 255, 0.06); border-color: var(--ink-border); box-shadow: none; }
.hero-dark .lead-card-empresa { color: #fff; }
.hero-dark .lead-card-meta { color: var(--accent-coral); }
.hero-dark .lead-card-persona { color: var(--ink-muted); }
.hero-dark .intro-cambiar .btn-link { color: var(--ink-muted); }
.hero-dark .intro-cambiar .btn-link:hover { color: var(--accent-coral); }
.intro-panel { margin-top: 30px; }
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 560px) { .area-grid { grid-template-columns: 1fr; } }
.area-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 18px 20px; background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--sh-sm); transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); text-align: left; }
/* Marca de "elegido": un círculo tipo radio arriba a la derecha. Sin esto, la
   tarjeta seleccionada solo cambiaba de borde y no se leía como una elección. */
.area-check { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface); transition: border-color .18s var(--ease), background .18s var(--ease); }
.area-card:hover .area-check { border-color: var(--primary); }
.area-card.is-active .area-check { border-color: var(--primary); background: var(--primary); }
/* SVG propio en vez del glifo Unicode "✓": ese carácter depende de la fuente y
   sale curvo/desigual. Con trazos rectos (stroke-linecap square, sin redondeos)
   se ve igual en cualquier navegador. */
.area-card.is-active .area-check::after { content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3L6.6 11.4L12.7 4.6' stroke='white' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px; }
.area-pitch { margin: 16px 0 0; font-size: 14px; color: var(--text-secondary); line-height: 1.5; min-height: 21px; }
.area-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--sh-md); }
/* Azul claro CONCRETO, no el `--primary-soft` al 8%: sobre la tarjeta blanca del
   formulario ese tinte era tan tenue que la tarjeta elegida no se distinguía. */
.area-card.is-active { border-color: var(--primary); border-width: 2px; background: #E6EFFC; box-shadow: 0 0 0 3px rgba(11, 88, 211, 0.16); }
/* Solo el NOMBRE se aparta del círculo de selección; la descripción usa el ancho
   completo de la tarjeta (con el hueco reservado en toda la caja se partía en
   líneas de tres palabras). */
.area-name { display: block; padding-right: 28px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); }
.area-desc { align-self: stretch; }
.area-card.is-active .area-name { color: var(--primary-dark, var(--primary)); font-weight: 700; }
.area-desc { font-size: 13px; line-height: 1.5; color: var(--muted); }
.area-card.is-active .area-desc { color: var(--text-secondary); }
.area-selected { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.area-selected h3 { margin-bottom: 2px; }
.intro-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }
.intro-foot { text-align: center; margin-top: 22px; }

/* ── Portada "lámina de marca": fondo navy completo + hero sin caja ── */
body.intro-mode { background:
  radial-gradient(1200px 820px at 85% 0%, rgba(30, 143, 246, 0.12), transparent 62%),
  linear-gradient(180deg, #133069 0%, #0B1E4C 46%, #060F2C 100%); }
body.intro-mode .topbar { position: static; height: auto; background: transparent; border-bottom: 0; backdrop-filter: none; padding-top: clamp(26px, 7vh, 64px); padding-bottom: 4px; }
body.intro-mode .brand img { height: 40px; }
body.intro-mode .app { position: relative; overflow: hidden; }
body.intro-mode .intro-wrap, body.intro-mode .inicio-wrap { position: relative; z-index: 2; padding-top: clamp(8px, 3vh, 24px); }
body.intro-mode .intro-head.hero-dark { background: none; border-radius: 0; padding: 0; overflow: visible; }
body.intro-mode .intro-head .eyebrow { color: #5B9DF5; }
body.intro-mode .intro-foot { color: var(--ink-muted); }

/* ── Inicio unificado: hero + beneficios (izq) + form con área (der) ── */
.inicio-wrap { width: 100%; max-width: 1220px; margin-inline: auto; padding: clamp(20px, 4vh, 44px) var(--gutter) clamp(40px, 7vh, 72px); }
.inicio-grid { display: grid; grid-template-columns: 1fr 1.28fr; gap: 28px; align-items: start; margin-top: clamp(26px, 4vh, 40px); }
@media (max-width: 900px) { .inicio-grid { grid-template-columns: 1fr; } .inicio-beneficios { order: 2; } .inicio-form { order: 1; } }
.inicio-beneficios { display: flex; flex-direction: column; gap: 14px; }
.beneficio-card { display: flex; gap: 15px; padding: 20px 22px; background: #0A1A3D; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--r-lg); }
.beneficio-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 143, 246, 0.16); border: 1px solid rgba(30, 143, 246, 0.4); color: #5B9DF5; }
.beneficio-icon svg { width: 22px; height: 22px; }
.beneficio-titulo { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #6FA6F2; margin-bottom: 6px; }
.beneficio-texto { font-size: 15.5px; line-height: 1.6; color: #C2CEE8; }
.inicio-form { padding: clamp(22px, 3vw, 32px); }
.inicio-form-intro { text-align: center; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; margin: 0 auto 22px; }
.inicio-form-intro .hl { color: var(--primary); }
@media (max-width: 560px) { .br-2l { display: none; } }
.inicio-form .intro-cambiar { text-align: center; margin-top: 16px; }
/* El aviso de para qué se usan los datos: informativo, al pie y en letra chica.
   Antes era el texto más grande de la tarjeta, y no es lo que la persona vino a leer. */
.inicio-form-nota { text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 14px; }

/* El selector de área vive DENTRO del formulario: se presenta como un campo más,
   con su etiqueta y su asterisco, para que se lea como algo que hay que elegir. */
/* Aire entre la última fila de campos (Puesto / Industria) y la elección de área:
   sin él, la etiqueta quedaba pegada al input de arriba y parecía parte suya. */
.campo-area { margin-top: 24px; }
.campo-area .field-lbl { font-size: 13.5px; font-weight: 600; }
.campo-area .area-grid { margin-top: 8px; }
/* El botón de arranque, centrado bajo el formulario. */
.inicio-form .intro-cta { justify-content: center; margin-top: 26px; }
/* En móvil las tres tarjetas se apilan: se compactan para que el botón no quede
   dos pantallas abajo. La descripción se queda (ayuda a elegir), solo más apretada. */
@media (max-width: 560px) {
  .campo-area .area-card { padding: 13px 16px; gap: 4px; }
  .campo-area .area-name { font-size: 16px; }
  .campo-area .area-desc { font-size: 12.5px; line-height: 1.42; }
  .campo-area .area-grid { gap: 9px; }
  .area-check { top: 12px; right: 12px; }
}

/* FAQ (acordeón) al pie del inicio, sobre el navy */
.inicio-faq { max-width: 820px; margin: clamp(44px, 8vh, 84px) auto 0; }
.inicio-faq h2 { text-align: center; color: #fff; margin-bottom: clamp(18px, 3vh, 28px); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--ink-border); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; font-family: var(--font-display); font-weight: 600; font-size: clamp(14.5px, 1.6vw, 16px); color: #EAF1FF; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--accent-coral); font-size: 24px; font-weight: 400; line-height: 1; transition: transform .25s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 20px 18px; color: #B9C6E4; font-size: 14.5px; line-height: 1.6; }

/* Subrayado naranja a mano bajo el h1 (2 líneas) */
.hero-underline { display: block; width: min(330px, 68%); height: auto; margin: 4px auto 0; }
@media (max-width: 560px) { .br-lg { display: none; } }

/* Píldora del lead sobre el navy */
.hero-pill { max-width: 470px; margin: 26px auto 0; padding: 20px 34px; border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.035); border-radius: 26px; color: #DCE6F7; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.55; }

/* Meta: "8 preguntas · 2 minutos" con íconos naranjas */
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; margin-top: 28px; }
.hero-meta-item { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-coral); font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.8vw, 19px); }
.hero-meta-item svg { width: 21px; height: 21px; flex: none; }

/* Racimo de triángulos azules a la derecha */
.hero-deco { position: absolute; top: 0; right: 0; width: min(46vw, 560px); height: 100%; z-index: 1; pointer-events: none; }
.hero-deco svg { position: absolute; right: -20px; top: 8%; width: 100%; height: auto; }
@media (max-width: 820px) { .hero-deco { display: none; } }
/* Flotar sutil: cada triángulo con su propia cadencia (se ve una red "respirando") */
@media (prefers-reduced-motion: no-preference) {
  .hero-deco polygon { transform-box: fill-box; transform-origin: center; animation: triFloat 8s ease-in-out infinite; will-change: transform; }
  .hero-deco polygon:nth-child(4n+1) { animation-duration: 7s;  animation-delay: -1s; }
  .hero-deco polygon:nth-child(4n+2) { animation-duration: 9s;  animation-delay: -3s; }
  .hero-deco polygon:nth-child(4n+3) { animation-duration: 10.5s; animation-delay: -5s; }
  .hero-deco polygon:nth-child(4n)   { animation-duration: 8.5s; animation-delay: -2.5s; }
}
@keyframes triFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(3px, -7px) rotate(2deg); }
}

/* ── Form de contacto (HubSpot embed o fallback nativo) ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 6px; }
/* En móvil todo va a una columna MENOS nombre y apellido: son cortos, caben de a
   dos y ahorran una pantalla de scroll antes de llegar al botón. */
@media (max-width: 560px) {
  .form-campo { grid-column: 1 / -1; }
  .form-campo[data-campo="nombre"], .form-campo[data-campo="apellido"] { grid-column: auto; }
}
.field-lbl { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.field-lbl .req { color: var(--accent); margin-left: 3px; font-weight: 700; }
.form-campo .composer-input { width: 100%; min-height: 0; resize: none; }
/* Select con el MISMO aspecto que .composer-input (borde suave, radio, alto) */
.form-select { appearance: none; -webkit-appearance: none; min-height: 48px; padding: 12px 40px 12px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); font: inherit; font-size: 15px; color: var(--text); background-color: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7AA0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.form-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-select option[value=""] { color: var(--muted); }
/* Teléfono: fila completa, código de país + número inline */
.form-campo-full { grid-column: 1 / -1; }
.tel-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tel-code { flex: none; width: clamp(150px, 34%, 200px); }
/* En pantallas angostas el selector de país se comía el ancho y el número quedaba
   en 33 px. Se apilan: país arriba, número abajo, los dos completos. */
@media (max-width: 430px) {
  .tel-code, .tel-num { flex: 1 0 100%; width: 100%; }
}
.tel-code .combo-list { min-width: 240px; }
.tel-num { flex: 1 1 auto; min-width: 0; }
.composer-input.is-invalid { border-color: var(--lvl-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lvl-1) 12%, transparent); }
.field-err { color: var(--lvl-1); font-size: 12.5px; font-weight: 500; margin-top: 5px; line-height: 1.4; }
/* Combobox con buscador (industria) */
.combo { position: relative; }
.combo-input { width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 5px; list-style: none; max-height: 244px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--sh-lg); }
.combo-opt { padding: 9px 12px; border-radius: var(--r-sm); font-size: 14.5px; color: var(--text); cursor: pointer; }
.combo-opt:hover, .combo-opt.is-on { background: var(--primary-soft); color: var(--primary); }
.combo-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }
.form-err { color: var(--lvl-1); font-size: 13.5px; font-weight: 500; margin-top: 12px; }
.hs-form-target { min-height: 280px; }
.form-cargando { display: grid; place-items: center; min-height: 240px; color: var(--muted); font-size: 14px; }

/* ── Paso de dimensión ── */
.step-wrap { width: 100%; max-width: 820px; margin-inline: auto; padding: clamp(20px, 4vh, 40px) var(--gutter) 64px; flex: 1; }
.step-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.diag-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .01em; }
.btn-cancelar { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm); transition: color .15s var(--ease), background .15s var(--ease); }
.btn-cancelar:hover { color: var(--lvl-1); background: color-mix(in srgb, var(--lvl-1) 8%, white); }
.step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); box-shadow: var(--sh-md); margin-top: 22px; }
.step-head h2 { margin-top: 4px; }

/* Pregunta + opciones (formulario experto: una opción por nivel, opción única) */
.dim-pregunta { font-family: var(--font-display); font-weight: 600; font-size: clamp(16.5px, 2vw, 20px); line-height: 1.42; color: var(--text); margin-top: 18px; }
.opt-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.opt-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-md); transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease); }
.opt-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.opt-item:active { transform: scale(.995); }
.opt-item.is-active { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-soft); }
.opt-dot { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); position: relative; transition: border-color .15s var(--ease); }
.opt-item:hover .opt-dot, .opt-item.is-active .opt-dot { border-color: var(--primary); }
.opt-item.is-active .opt-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.opt-txt { font-size: 14.5px; line-height: 1.55; color: var(--text); }

/* Matiz opcional */
.matiz-wrap { margin-top: 18px; }
.matiz-lbl { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.matiz-wrap .composer-input { width: 100%; min-height: 60px; }

/* Progreso */
.prog { position: relative; }
.prog-track { position: absolute; left: 0; right: 0; top: 15px; height: 3px; background: var(--surface-2); border-radius: var(--r-pill); }
.prog-fill { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: var(--r-pill); transition: width .5s var(--ease); }
.prog-nodes { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.prog-node { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; padding: 0; color: var(--muted); }
.prog-node:not([disabled]) { cursor: pointer; }
.prog-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border-strong); color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 13px; transition: all .2s var(--ease); }
.prog-node.done .prog-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.prog-node.actual .prog-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft); }
.prog-lbl { font-size: 10.5px; font-weight: 600; max-width: 8ch; text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog-node.actual .prog-lbl { color: var(--primary); }
.prog-split { position: relative; }
.prog-split::before { content: ""; position: absolute; left: -1px; top: 4px; bottom: 18px; width: 1px; background: var(--border-strong); }
@media (max-width: 620px) { .prog-lbl { display: none; } .prog-dot { width: 28px; height: 28px; } }

/* Chat / burbujas — sin scroll interno: el stepper se alarga verticalmente */
.chat { display: flex; flex-direction: column; gap: 12px; min-height: 120px; margin: 20px 0 4px; }
.bubble { max-width: 88%; padding: 13px 16px; border-radius: 16px; font-size: 15px; line-height: 1.55; }
.bubble-bot { align-self: stretch; max-width: 100%; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 5px; }
.bubble-user { align-self: flex-end; max-width: 88%; background: var(--primary); color: #fff; border-bottom-right-radius: 5px; }
.bubble-meta { font-size: 11.5px; font-weight: 600; opacity: .7; margin-bottom: 5px; }

/* Typing */
.typing-row { width: max-content; }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Opciones (chips) */
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); font-size: 13.5px; font-weight: 500; transition: all .15s var(--ease); }
.chip:hover:not([disabled]) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.chip[disabled] { opacity: .5; cursor: default; }

/* Composer */
.step-accion { margin-top: 8px; }
.composer { display: flex; gap: 10px; align-items: flex-end; }
.composer-input { flex: 1; resize: vertical; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); font: inherit; font-size: 15px; background: var(--surface); color: var(--text); transition: border-color .15s; }
.composer-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.composer-aux { margin-top: 10px; display: flex; justify-content: flex-end; }
.btn-link { background: none; border: none; color: var(--muted); font-size: 13px; text-decoration: underline; padding: 4px; }
.btn-link:hover { color: var(--primary); }

/* Tarjeta de evaluación */
.eval-card { align-self: stretch; background: linear-gradient(180deg, var(--accent-soft), transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, white); border-radius: var(--r-md); padding: 16px 18px; }
.eval-top { display: flex; align-items: center; gap: 8px; }
.eval-nota { font-family: var(--font-display); font-weight: 600; color: var(--text); margin-top: 8px; }
.eval-ev { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin-top: 8px; }

/* Navegación de paso */
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.step-nav-right { display: flex; gap: 10px; }
.err-actions { display: flex; gap: 10px; margin-top: 14px; }

/* Mientras la IA responde: navegación bloqueada (evita cruzar mensajes entre pasos) */
.step-wrap.is-loading .step-nav { opacity: .5; pointer-events: none; }
.step-wrap.is-loading .prog-nodes { pointer-events: none; }

/* Cierre de página (síntesis) */
.cierre { text-align: center; padding-block: 48px; }
.cierre .typing-row { margin-inline: auto; margin-bottom: 18px; background: var(--surface-2); }
.cierre h2 { margin-bottom: 8px; }

/* Cargador de la síntesis: barra con estimado + tarjetas que explican la Escala */
.loader { text-align: center; padding-block: 40px; }
.loader-head .typing-row { margin-inline: auto; margin-bottom: 16px; background: var(--surface-2); }
.loader-head h2 { margin-bottom: 6px; }
.loader-bar { height: 8px; max-width: 460px; margin: 24px auto 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.loader-fill { display: block; height: 100%; width: 4%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width linear; }
.loader-eta { margin-bottom: 22px; }
.loader-card { max-width: 520px; min-height: 70px; margin-inline: auto; padding: 16px 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); text-align: left; animation: card-fade .45s var(--ease-out); }
.loader-card-k { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--primary); margin-bottom: 4px; }
.loader-card-t { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
@keyframes card-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .loader-fill { transition: none; } .loader-card { animation: none; } }

/* Mensaje de cierre de una dimensión (no revela el nivel) */
.bubble-cierre { align-self: stretch; max-width: 100%; display: flex; align-items: flex-start; gap: 10px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, white); }
.cierre-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-dark); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.cierre-check svg { width: 14px; height: 14px; }

/* Indicador de auto-avance */
.auto-avance { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.auto-avance-txt { font-size: 12.5px; color: var(--muted); }
.auto-avance-track { height: 3px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.auto-avance-bar { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* Animaciones */
@media (prefers-reduced-motion: no-preference) {
  .step-enter { animation: step-in .5s var(--ease-out) both; }
  .bubble { animation: bubble-in .4s var(--ease-out) both; }
  .cierre-check { animation: check-pop .45s var(--ease-out) .1s both; }
  .auto-avance-bar { animation: avance-fill var(--avance-ms, 3800ms) linear forwards; }
  .prog-node.actual .prog-dot { animation: dot-pulse 2.4s var(--ease) infinite; }
}
@keyframes step-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes check-pop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes avance-fill { from { width: 0; } to { width: 100%; } }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--primary-soft); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 14%, transparent); } }

/* ── Chat de HubSpot: fuera de la página del diagnóstico ─────────────────────
   Se apaga desde index.html con `hsConversationsSettings.loadImmediately = false`,
   NO desde aquí: HubSpot inyecta su propia hoja con
   `#hubspot-messages-iframe-container { display: initial !important }` y, al cargar
   después que esta, gana siempre. Red de seguridad por si el ajuste no aplicara:
   con `html` delante, la especificidad supera a la suya. */
html #hubspot-messages-iframe-container { display: none !important; }

/* ── Acabado del test: que se sienta un recorrido, no ocho recargas ──────────── */

/* "Pregunta 3 de 8" con jerarquía real: es la única señal de cuánto falta que se
   lee sin interpretar la barra. */
.step-contador { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.step-contador b { color: var(--primary); font-weight: 800; font-size: 15px; letter-spacing: 0; text-transform: none; }

/* La opción elegida marca con un check que aparece de golpe (feedback físico al
   clic). El punto relleno se queda como fondo del check. */
.opt-item.is-active .opt-dot::before { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 800; line-height: 1; z-index: 2; }
.opt-item.is-active .opt-dot::after { inset: 0; }

/* Transición entre preguntas: sale hacia el lado por el que avanzas y la siguiente
   entra desde el contrario. El sentido lo marca `data-dir` en #app. */
@media (prefers-reduced-motion: no-preference) {
  .opt-item.is-active .opt-dot::before { animation: check-pop .3s var(--ease-out) both; }
  .step-sale { animation: step-sale-adelante var(--salida, .17s) ease-in both; }
  .step-sale-atras { animation: step-sale-atras var(--salida, .17s) ease-in both; }
  #app[data-dir="atras"] .step-enter { animation: step-in-atras .5s var(--ease-out) both; }
}
@keyframes step-sale-adelante { to { opacity: 0; transform: translateX(-26px); } }
@keyframes step-sale-atras { to { opacity: 0; transform: translateX(26px); } }
@keyframes step-in-atras { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }