:root {
  --color-primario: #0f3d56;
  --color-secundario: #1f7a8c;
  --color-acento: #e1b07e;
  --color-fondo: #f5f7fa;
  --color-texto: #1c2b33;
  --color-borde: #d8e0e6;
  --color-error: #c0392b;
  --radio: 10px;
  --sombra: 0 6px 20px rgba(15, 61, 86, 0.08);

  /* Paleta de marca HBE */
  --hbe-navy: #123360;
  --hbe-teal: #49BBC6;
  --hbe-cielo: #6CA8DA;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.55;
}

header {
  background: var(--hbe-navy);
  color: #fff;
  padding: 1.25rem 2rem;
}

.header-inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

header h1 { margin: 0; font-size: 1.4rem; color: #fff; }
header p { margin: 0.25rem 0 0; opacity: 0.85; font-size: 0.95rem; }

.bienvenida-logo {
  background: var(--hbe-navy);
  border-radius: 18px;
  width: 168px;
  height: 168px;
  padding: 14px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bienvenida-logo img {
  width: 100%;
  height: auto;
  display: block;
}


main {
  max-width: 880px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.vista {
  display: none;
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.vista--activa { display: block; }

h2 {
  color: var(--color-primario);
  margin-top: 0;
}

.lista-beneficios {
  padding-left: 1.2rem;
  margin: 1.2rem 0;
}

.lista-beneficios li { margin: 0.4rem 0; }

/* Botones */
.cta,
.btn-secundario {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background 0.15s ease;
}

.cta {
  background: var(--hbe-teal);
  color: #fff;
}

.cta:hover { background: #36a3ad; }

.btn-secundario {
  background: transparent;
  color: var(--color-primario);
  border: 1px solid var(--color-borde);
}

.btn-secundario:hover { background: #eef2f5; }

.btn-secundario:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Progreso */
.progreso {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.progreso-barra {
  flex: 1;
  height: 8px;
  background: #e7edf2;
  border-radius: 4px;
  overflow: hidden;
}

.progreso-relleno {
  height: 100%;
  width: 20%;
  background: var(--color-secundario);
  transition: width 0.25s ease;
}

.progreso-texto {
  font-size: 0.9rem;
  color: #5a6c78;
}

/* Pasos */
.paso {
  display: none;
  border: none;
  padding: 0;
  margin: 0;
}

.paso--activo { display: block; }

.paso > legend {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primario);
  margin-bottom: 1rem;
  padding: 0;
}

/* Campos */
.campo {
  display: block;
  margin: 1.2rem 0;
}

.campo > span,
.campo--radios > legend,
.campo--escala > legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.campo input[type="text"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-texto);
}

.campo input[type="text"]:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 3px rgba(31, 122, 140, 0.15);
}

.campo textarea { resize: vertical; }

.campo--radios,
.campo--escala {
  border: none;
  padding: 0;
  margin: 1.2rem 0;
}

.campo--radios label {
  display: block;
  padding: 0.55rem 0;
  cursor: pointer;
}

.campo--radios input[type="radio"] {
  margin-right: 0.55rem;
}

.escala {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.escala label {
  flex: 1;
  min-width: 60px;
  text-align: center;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
  font-weight: 600;
  background: #fff;
}

.escala label:has(input:checked) {
  background: var(--color-secundario);
  color: #fff;
  border-color: var(--color-secundario);
}

.escala input { display: none; }

.ayuda {
  font-size: 0.85rem;
  color: #5a6c78;
  margin: 0 0 0.6rem;
}

.cierre {
  margin-top: 1.5rem;
  font-style: italic;
  color: #5a6c78;
}

.intro-paso {
  background: #eef6f8;
  border-left: 4px solid var(--color-secundario);
  padding: 0.85rem 1rem;
  border-radius: 0 6px 6px 0;
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
}

.campo > .ayuda {
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}

/* Navegación */
.navegacion {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-borde);
}

.navegacion .cta { margin-left: auto; }

/* Cargando */
.cargando {
  text-align: center;
  padding: 2rem 1rem;
}

.spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.5rem;
  border: 4px solid #e7edf2;
  border-top-color: var(--color-secundario);
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* Resultado */
.resultado {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  margin-top: 1rem;
  white-space: pre-wrap;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-texto);
  box-shadow: var(--sombra);
}

.resultado h2,
.resultado h3 {
  color: var(--hbe-navy);
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--hbe-teal);
}

.resultado h2:first-child,
.resultado h3:first-child { margin-top: 0; }

.resultado strong {
  color: var(--hbe-navy);
}

.resultado p { margin: 0.55rem 0; }

.resultado ul,
.resultado ol {
  padding-left: 1.4rem;
  margin: 0.5rem 0 1rem;
}

.resultado li { margin: 0.55rem 0; }

/* Caja de impacto — blockquote del callout "Lo que está en juego hoy" */
.resultado blockquote {
  margin: 1.2rem 0 1.4rem;
  padding: 1rem 1.2rem;
  background: rgba(73, 187, 198, 0.10);
  border-left: 5px solid var(--hbe-teal);
  border-radius: 0 10px 10px 0;
  color: var(--hbe-navy);
  font-size: 1rem;
  line-height: 1.55;
}

.resultado blockquote strong {
  color: var(--hbe-navy);
  font-weight: 700;
}

/* Tabla comparativa "Hoy" vs "Con el Sistema Operativo IA" */
.resultado .tabla-wrap {
  overflow-x: auto;
  margin: 1.2rem 0 1.6rem;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(18, 51, 96, 0.08);
}

.resultado table.tabla-comparativa {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.96rem;
}

.resultado .tabla-comparativa thead th {
  background: var(--hbe-navy);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-bottom: 2px solid var(--hbe-teal);
  vertical-align: middle;
}

.resultado .tabla-comparativa thead th:nth-child(2) {
  background: linear-gradient(180deg, var(--hbe-navy) 0%, #19416f 100%);
}

.resultado .tabla-comparativa tbody td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: top;
  line-height: 1.55;
  color: var(--color-texto);
}

.resultado .tabla-comparativa tbody tr:last-child td {
  border-bottom: none;
}

.resultado .tabla-comparativa tbody tr:nth-child(even) td {
  background: #f6f9fc;
}

/* Columna deseable (Sistema Operativo IA): toque teal */
.resultado .tabla-comparativa thead th:nth-child(2),
.resultado .tabla-comparativa tbody td:nth-child(2) {
  border-left: 3px solid var(--hbe-teal);
}

.resultado .tabla-comparativa tbody td:nth-child(2) {
  background: rgba(73, 187, 198, 0.08);
}

.resultado .tabla-comparativa tbody tr:nth-child(even) td:nth-child(2) {
  background: rgba(73, 187, 198, 0.12);
}

.resultado .tabla-comparativa tbody td:nth-child(2) strong {
  color: var(--hbe-navy);
}

.reporte-cursor {
  color: #5a6c78;
  font-style: italic;
}

.parpadeo {
  display: inline-block;
  color: var(--color-secundario);
  font-weight: 700;
  animation: parpadeoCursor 0.9s steps(2, start) infinite;
  margin-left: 1px;
}

@keyframes parpadeoCursor {
  to { visibility: hidden; }
}

.acciones-resultado {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.acciones-principales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

.cta--principal {
  background: var(--color-primario);
  color: #fff;
  font-size: 1.05rem;
  padding: 1rem 1.8rem;
  text-decoration: none;
  box-shadow: var(--sombra);
  border: 2px solid var(--color-primario);
}

.cta--principal:hover { background: #0a2e42; border-color: #0a2e42; }

.cta--secundario {
  background: #fff;
  color: var(--hbe-navy);
  border: 2px solid var(--hbe-navy);
  font-size: 1.05rem;
  padding: 1rem 1.8rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.cta--secundario:hover:not(:disabled) {
  background: var(--hbe-teal);
  border-color: var(--hbe-teal);
  color: #fff;
}

.cta--secundario:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .acciones-principales {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .acciones-principales .cta {
    text-align: center;
  }
}

/* Indicador de carga mientras se genera el reporte */
.puntos-cargando {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
  margin: 0 6px;
}

.puntos-cargando span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hbe-teal);
  animation: parpadeo 1.2s infinite ease-in-out;
}

.puntos-cargando span:nth-child(2) { animation-delay: 0.15s; }
.puntos-cargando span:nth-child(3) { animation-delay: 0.3s; }

/* ==========================================================================
   Render del PDF (offscreen, capturado por html2canvas)
   ========================================================================== */

.pdf-render-root {
  /* Posición/visibilidad se establecen inline desde JS para garantizar que
     html2canvas pueda capturarlo (visible en el viewport pero detrás de todo). */
  width: 794px;
  background: #fff;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  color: var(--color-texto);
}

.pdf-render-root .pdf-cabecera {
  background: var(--hbe-navy);
  color: #fff;
  padding: 24px 36px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.pdf-render-root .pdf-logo {
  width: 64px;
  height: 64px;
  display: block;
  flex-shrink: 0;
}

.pdf-render-root .pdf-titulo h1 {
  margin: 0;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
}

.pdf-render-root .pdf-titulo p {
  margin: 4px 0 0;
  color: #cfe3f6;
  font-size: 13px;
}

/* Cuerpo: reutiliza estilos de .resultado pero quita la tarjeta */
.pdf-render-root .pdf-cuerpo {
  padding: 28px 36px 24px;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.pdf-render-root .pdf-cuerpo h2,
.pdf-render-root .pdf-cuerpo h3 {
  font-size: 15px;
  margin-top: 1.2rem;
}

.pdf-render-root .tabla-comparativa { font-size: 12.5px; }
.pdf-render-root .tabla-comparativa thead th,
.pdf-render-root .tabla-comparativa tbody td {
  padding: 8px 10px;
}

.pdf-render-root .tabla-comparativa tr,
.pdf-render-root .tabla-comparativa thead {
  page-break-inside: avoid;
  break-inside: avoid;
}

.pdf-render-root .pdf-cuerpo h2,
.pdf-render-root .pdf-cuerpo h3 {
  page-break-after: avoid;
  break-after: avoid;
}

.pdf-render-root .pdf-pie {
  background: var(--hbe-navy);
  color: #fff;
  padding: 14px 36px;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.pdf-render-root .pdf-pie p { margin: 2px 0; }
.pdf-render-root .pdf-pie strong { color: #fff; }

.enlace-reiniciar {
  background: none;
  border: none;
  color: var(--color-primario);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  padding: 0.2rem 0.4rem;
}

.enlace-reiniciar:hover { opacity: 0.7; }

/* Caja "Tu sesión 1:1 con César Aguilar" — bloque estático visible en pantalla y PDF */
.caja-sesion {
  background: #f6f9fc;
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--hbe-navy);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  margin: 1.6rem 0 1.4rem;
}

.caja-sesion h3 {
  color: var(--hbe-navy);
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.caja-sesion h4 {
  color: var(--hbe-navy);
  margin: 1.4rem 0 0.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(18, 51, 96, 0.12);
  font-size: 1rem;
  font-weight: 700;
}

.caja-sesion p {
  margin: 0 0 0.7rem;
  color: var(--color-texto);
  line-height: 1.6;
}

.caja-sesion-cta {
  display: inline-block;
  margin-top: 1rem;
  color: var(--hbe-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.caja-sesion-cta:hover { color: var(--hbe-teal); }

/* Confirmación / agradecimiento */
.confirmacion {
  text-align: center;
  padding: 0.5rem 0 1.5rem;
  border-bottom: 1px solid var(--color-borde);
  margin-bottom: 1.5rem;
}

.confirmacion-icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e7f6ec;
  color: #1e8e3e;
  font-size: 2rem;
  font-weight: 700;
  line-height: 56px;
  margin: 0 auto 1rem;
}

.confirmacion h2 {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--hbe-navy);
  letter-spacing: -0.01em;
}

#resultado-saludo { color: var(--hbe-navy); }

.confirmacion-sub {
  margin: 0 auto;
  max-width: 540px;
  color: #4a5a66;
}

.confirmacion-email {
  display: inline-block;
  margin: 1rem auto 0;
  padding: 0.5rem 1rem;
  background: #eef6f8;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--color-primario);
}

.confirmacion-email[hidden] { display: none; }

/* CTA de agendar */
.cta-agendar {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #0f3d56 0%, #1f7a8c 100%);
  color: #fff;
  border-radius: 10px;
  text-align: center;
}

.cta-agendar[hidden] { display: none; }

.cta-agendar h3 {
  margin: 0 0 0.5rem;
  color: #fff;
  font-size: 1.25rem;
}

.cta-agendar p {
  margin: 0 auto 1.25rem;
  max-width: 520px;
  opacity: 0.92;
}

.cta-agendar-botones {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-agendar .cta {
  background: var(--color-acento);
  color: var(--color-primario);
}

.cta-agendar .cta:hover { background: #f0c590; }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.4rem;
  background: #25d366;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-whatsapp:hover { background: #1ebe5a; }
.btn-whatsapp[hidden] { display: none; }
.btn-whatsapp::before {
  content: '';
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20.5 3.5A11.9 11.9 0 0 0 3.4 18.6L2 22l3.5-1.4A11.9 11.9 0 1 0 20.5 3.5zM12 20.3a8.3 8.3 0 0 1-4.4-1.3l-.3-.2-2.1.8.8-2-.2-.3A8.3 8.3 0 1 1 12 20.3zm4.6-6c-.3-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1s-.7.8-.8 1c-.1.2-.3.2-.5.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.4-1.7-1.5-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.7-1.6c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2 0 1.3.9 2.6 1.1 2.7.1.2 1.9 3 4.5 4.1.6.3 1.1.4 1.5.5.6.2 1.2.2 1.7.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.2-.2-.5-.3z'/></svg>") no-repeat center / contain;
}

/* Error */
#vista-error #error-mensaje {
  color: var(--color-error);
  background: #fdecea;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #f5c6c0;
}

footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.85rem;
  color: #6b7a82;
}

@media (max-width: 600px) {
  main { padding: 0 0.5rem; }
  .vista { padding: 1.25rem; }
  .navegacion { flex-direction: column-reverse; }
  .navegacion .cta { margin-left: 0; }
}

/* ==========================================================================
   Chat conversacional
   ========================================================================== */

#vista-chat {
  padding: 0;
  overflow: hidden;
}

.chat {
  display: flex;
  flex-direction: column;
  height: clamp(520px, 70vh, 720px);
}

.chat-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background: #f7f9fb;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.burbuja {
  max-width: 78%;
  padding: 0.7rem 1rem;
  border-radius: 16px;
  font-size: 0.97rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: aparecer 0.15s ease;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.burbuja--ia {
  align-self: flex-start;
  background: #fff;
  color: var(--color-texto);
  border-left: 4px solid var(--hbe-navy);
  border-radius: 14px;
  padding-left: 1.1rem;
  box-shadow: 0 1px 2px rgba(18, 51, 96, 0.08);
}

.burbuja--usuario {
  align-self: flex-end;
  background: var(--hbe-navy);
  color: #fff;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
}

.burbuja--typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.7rem 1rem;
}

.burbuja--typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #97a6b0;
  animation: parpadeo 1.2s infinite ease-in-out;
}

.burbuja--typing span:nth-child(2) { animation-delay: 0.15s; }
.burbuja--typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes parpadeo {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.chat-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: #f7f9fb;
  border-top: 1px solid var(--color-borde);
}

.chat-opciones:empty {
  display: none;
}

.opcion-rapida {
  background: #fff;
  border: 1.5px solid var(--hbe-navy);
  color: var(--hbe-navy);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.opcion-rapida:hover,
.opcion-rapida:focus-visible,
.opcion-rapida:active {
  background: var(--hbe-teal);
  border-color: var(--hbe-teal);
  color: #fff;
  outline: none;
  box-shadow: 0 2px 8px rgba(73, 187, 198, 0.35);
}

.chat-input {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border-top: 1px solid var(--color-borde);
  align-items: flex-end;
}

.chat-input textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-borde);
  border-radius: 18px;
  padding: 0.65rem 1rem;
  font-family: inherit;
  font-size: 0.97rem;
  line-height: 1.4;
  max-height: 140px;
  outline: none;
  background: #f7f9fb;
}

.chat-input textarea:focus {
  border-color: var(--hbe-teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(73, 187, 198, 0.22);
}

.chat-input button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hbe-teal);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat-input button:hover { background: #36a3ad; }
.chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Panel del consultor
   ========================================================================== */

.panel-consultor {
  background: var(--color-fondo);
}

.header-inner--panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.header-acciones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.header-acciones .btn-secundario {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  padding: 0.6rem 1rem;
}

.header-acciones .btn-secundario:hover {
  background: rgba(255, 255, 255, 0.2);
}

.panel-main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.panel-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metrica {
  background: #fff;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metrica strong {
  font-size: 1.8rem;
  color: var(--color-primario);
  line-height: 1.1;
}

.metrica span {
  font-size: 0.85rem;
  color: #5a6c78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.panel-listado {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 1.5rem;
}

.listado-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.listado-cabecera h2 { margin: 0; }

.buscador {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  min-width: 260px;
}

.buscador:focus {
  outline: none;
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 3px rgba(31, 122, 140, 0.15);
}

.tabla-envoltorio {
  overflow-x: auto;
}

.tabla-diagnosticos {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.tabla-diagnosticos th,
.tabla-diagnosticos td {
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--color-borde);
}

.tabla-diagnosticos th {
  background: #f7f9fb;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: #5a6c78;
  letter-spacing: 0.03em;
}

.tabla-diagnosticos tbody tr:hover {
  background: #fafbfc;
  cursor: pointer;
}

.fila-vacia td {
  text-align: center;
  color: #5a6c78;
  font-style: italic;
  padding: 2rem !important;
}

/* Chip de estatus */
.chip {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
  background: #e7edf2;
  color: #4a5a66;
}

.chip--nuevo { background: #e6f4f6; color: #1f7a8c; }
.chip--contactado { background: #fff3e0; color: #c47b1e; }
.chip--agendado { background: #e8f0fe; color: #1a73e8; }
.chip--cerrado { background: #e7f6ec; color: #1e8e3e; }
.chip--descartado { background: #fdecea; color: #c0392b; }

.btn-ver {
  background: none;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--color-primario);
  font-weight: 600;
}

.btn-ver:hover {
  background: var(--color-primario);
  color: #fff;
  border-color: var(--color-primario);
}

/* Drawer de detalle */
.drawer[hidden] { display: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.drawer-fondo {
  position: absolute;
  inset: 0;
  background: rgba(15, 61, 86, 0.45);
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(680px, 100%);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(15, 61, 86, 0.2);
  animation: deslizar 0.2s ease;
}

@keyframes deslizar {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-borde);
}

.drawer-header h2 { margin: 0; color: var(--color-primario); }

.drawer-cerrar {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #5a6c78;
  line-height: 1;
}

.drawer-cerrar:hover { color: var(--color-primario); }

.drawer-contenido {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.bloque {
  margin-bottom: 1.5rem;
}

.bloque h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6c78;
  margin: 0 0 0.6rem;
}

.respuestas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.respuesta-celda {
  background: #f7f9fb;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
}

.respuesta-celda span {
  display: block;
  font-size: 0.75rem;
  color: #5a6c78;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.respuesta-celda strong {
  font-size: 0.95rem;
  color: var(--color-texto);
  font-weight: 500;
}

.reporte-ia {
  background: #fafbfc;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 1.25rem;
  font-size: 0.93rem;
}

.reporte-ia h2,
.reporte-ia h3 {
  color: var(--color-primario);
  margin-top: 1.2rem;
}

.reporte-ia h2:first-child,
.reporte-ia h3:first-child { margin-top: 0; }

.seguimiento-form .campo { margin: 0.8rem 0; }
.seguimiento-form select,
.seguimiento-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}

.seguimiento-form textarea {
  resize: vertical;
  min-height: 90px;
}

.seguimiento-acciones {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}

.aviso-guardado {
  font-size: 0.85rem;
  color: #1e8e3e;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.aviso-guardado--visible { opacity: 1; }

.transcripcion-detalle {
  background: #f7f9fb;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}

.transcripcion-detalle summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primario);
  list-style: none;
}

.transcripcion-detalle summary::-webkit-details-marker { display: none; }
.transcripcion-detalle summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}

.transcripcion-detalle[open] summary::before {
  transform: rotate(90deg);
}

.transcripcion {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.transcripcion-mensaje {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.transcripcion--ia {
  background: #fff;
  border: 1px solid var(--color-borde);
}

.transcripcion--usuario {
  background: #eef6f8;
  align-self: flex-end;
  max-width: 85%;
}

.transcripcion-rol {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a6c78;
  font-weight: 600;
}

.transcripcion-texto {
  white-space: pre-wrap;
  word-wrap: break-word;
}

@media (max-width: 600px) {
  .header-inner--panel { flex-direction: column; align-items: flex-start; }
  .buscador { min-width: 100%; }
}

/* ==========================================================================
   Cabecera y pie de impresión: ocultos en pantalla, visibles al imprimir
   ========================================================================== */

.impresion-cabecera,
.impresion-pie {
  display: none;
}

/* ==========================================================================
   @media print — diagnóstico en PDF vía window.print()
   ========================================================================== */

@media print {
  @page { size: A4; margin: 20mm 18mm; }

  /* Forzar impresión de colores de fondo (cabecera navy, acentos teal) */
  body,
  .resultado,
  .tabla-comparativa,
  .impresion-cabecera,
  .impresion-pie {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff;
    color: var(--color-texto);
    margin: 0;
    padding: 0;
    font-size: 11pt;
    line-height: 1.6;
  }

  /* Ocultar todo lo que no sea el reporte */
  header,
  footer,
  #vista-bienvenida,
  #vista-chat,
  #vista-error,
  #vista-resultado .confirmacion,
  #vista-resultado .cta-agendar,
  #vista-resultado .acciones-resultado,
  #vista-resultado .acciones-principales,
  #vista-resultado .cta,
  #vista-resultado .cta--principal,
  #vista-resultado .cta--secundario,
  #vista-resultado .enlace-reiniciar,
  #btn-descargar-pdf {
    display: none !important;
  }

  main {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .vista {
    display: block !important;
    background: #fff;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Cabecera de impresión */
  .impresion-cabecera {
    display: flex !important;
    align-items: center;
    gap: 16pt;
    padding: 0 0 14pt;
    margin: 4pt 0 28pt;
    border-bottom: 2px solid var(--hbe-teal);
  }

  .impresion-logo {
    width: 64px;
    height: 64px;
    display: block;
    flex-shrink: 0;
  }

  .impresion-titulo h1 {
    margin: 0;
    font-size: 19pt;
    color: var(--hbe-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .impresion-titulo p {
    margin: 4pt 0 0;
    font-size: 10.5pt;
    color: var(--hbe-navy);
    opacity: 0.85;
  }

  /* Reporte: a ancho completo, sin tarjeta */
  #resultado-contenido.resultado {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11pt;
    line-height: 1.6;
    color: var(--color-texto);
  }

  .resultado p {
    margin: 0 0 11pt;
  }

  .resultado h2,
  .resultado h3 {
    color: var(--hbe-navy);
    border-bottom: 2px solid var(--hbe-teal);
    font-weight: 700;
    font-size: 14pt;
    margin-top: 26pt;
    margin-bottom: 12pt;
    padding-bottom: 6pt;
  }

  /* Primer título de sección sin tanto aire superior */
  .resultado > h2:first-child,
  .resultado > h3:first-child {
    margin-top: 0;
  }

  .resultado strong { color: var(--hbe-navy); }

  .resultado hr {
    border: none;
    border-top: 1px solid var(--color-borde);
    margin: 16pt 0;
  }

  /* Listas */
  .resultado ul,
  .resultado ol {
    margin: 8pt 0 14pt;
    padding-left: 18pt;
  }

  .resultado li {
    margin: 0 0 8pt;
  }

  /* Tabla comparativa: acentos de marca + aire generoso */
  .resultado .tabla-wrap {
    overflow: visible;
    box-shadow: none;
    margin: 16pt 0 18pt;
  }

  .resultado .tabla-comparativa thead th {
    background: var(--hbe-navy) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--hbe-teal);
    padding: 8pt 10pt;
    font-size: 10.5pt;
  }

  .resultado .tabla-comparativa tbody td {
    padding: 8pt 10pt;
    border-bottom: 1px solid var(--color-borde);
    font-size: 10.5pt;
  }

  .resultado .tabla-comparativa thead th:nth-child(2),
  .resultado .tabla-comparativa tbody td:nth-child(2) {
    border-left: 3px solid var(--hbe-teal);
  }

  .resultado .tabla-comparativa tbody td:nth-child(2) {
    background: rgba(73, 187, 198, 0.10) !important;
  }

  /* Aire claro entre la tabla y el párrafo "Para tu equipo:" + entre éste y sus puntos */
  .resultado .tabla-wrap + p {
    margin-top: 4pt;
    margin-bottom: 12pt;
  }

  .resultado p + ul,
  .resultado p + ol {
    margin-top: 10pt;
  }

  /* Evitar cortes feos */
  table, tr, thead, h2, h3 { break-inside: avoid; page-break-inside: avoid; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Caja de impacto (callout) en el PDF */
  .resultado blockquote {
    background: rgba(73, 187, 198, 0.10) !important;
    border-left: 5px solid var(--hbe-teal);
    border-radius: 0 6pt 6pt 0;
    margin: 14pt 0 16pt;
    padding: 10pt 12pt;
    color: var(--hbe-navy);
    font-size: 11pt;
    line-height: 1.55;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .resultado blockquote strong {
    color: var(--hbe-navy);
    font-weight: 700;
  }

  /* Pie de impresión (dos líneas) */
  .impresion-pie {
    display: block !important;
    margin-top: 28pt;
    padding-top: 12pt;
    border-top: 1px solid var(--hbe-navy);
    color: var(--hbe-navy);
    font-size: 9pt;
    text-align: center;
    line-height: 1.5;
  }

  .impresion-pie-linea {
    display: block;
  }

  /* Caja "Tu sesión 1:1" también en el PDF */
  .caja-sesion {
    background: #f6f9fc !important;
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--hbe-navy);
    border-radius: 6pt;
    padding: 14pt 16pt;
    margin: 20pt 0 18pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .caja-sesion h3 {
    color: var(--hbe-navy);
    margin: 0 0 8pt;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 13pt;
    font-weight: 700;
  }

  .caja-sesion h4 {
    color: var(--hbe-navy);
    margin: 14pt 0 6pt;
    padding-top: 10pt;
    border-top: 1px solid rgba(18, 51, 96, 0.15);
    font-size: 11pt;
    font-weight: 700;
  }

  .caja-sesion p {
    margin: 0 0 8pt;
    font-size: 10.5pt;
    line-height: 1.55;
    color: var(--color-texto);
  }

  .caja-sesion-cta {
    display: inline-block;
    margin-top: 10pt;
    color: var(--hbe-navy);
    font-weight: 700;
    text-decoration: underline;
    font-size: 10.5pt;
  }
}

/* ==========================================================================
   Home pública "Clínica Inteligente"
   Reglas AÑADIDAS al final, scopeadas bajo body.home-ci.
   No modifican ninguna regla existente. El panel /consultor (sin .home-ci)
   conserva su aspecto HBE original intacto.
   ========================================================================== */

body.home-ci {
  --ci-navy: #0A0F1E;
  --ci-teal: #00C2CB;
  --ci-teal-deep: #0891b2;
  --ci-navy-mid: #0d1a2e;
  --ci-white: #FFFFFF;
  --ci-off-white: #F0F2F5;
  --ci-light-surface: #F8FAFC;
  --ci-border: #E5E7EB;
  --ci-text: #374151;
  --ci-muted-blue: #8A9BC0;
  --ci-gray: #6b7280;

  font-family: Arial, Helvetica, sans-serif;
  background: var(--ci-off-white);
  color: var(--ci-text);
}

/* Main full-bleed en la home; el flujo chat/resultado/error se queda constrained */
body.home-ci main {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.home-ci #vista-chat,
body.home-ci #vista-resultado,
body.home-ci #vista-error {
  max-width: min(880px, calc(100% - 2rem));
  margin: 2rem auto;
}

/* Home: quitar el card look del vista--activa */
body.home-ci #vista-bienvenida {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* -------- Header -------- */
body.home-ci header.ci-header {
  background: var(--ci-navy);
  color: #fff;
  padding: 1.1rem 1.5rem;
}

body.home-ci .ci-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

body.home-ci .ci-header-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

body.home-ci .ci-brand {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

body.home-ci .ci-tagline {
  margin: 0.15rem 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  color: var(--ci-muted-blue);
  line-height: 1.4;
}

/* -------- Bandas y contenedor -------- */
body.home-ci .ci-band { width: 100%; }
body.home-ci .ci-band--off    { background: var(--ci-off-white); }
body.home-ci .ci-band--navy   { background: var(--ci-navy); }
body.home-ci .ci-band--white  { background: var(--ci-white); }

body.home-ci .ci-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

body.home-ci .ci-container--centro { text-align: center; }

/* -------- Etiqueta (tag) -------- */
body.home-ci .ci-etiqueta {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ci-teal);
  margin-bottom: 1rem;
}

/* -------- Titulares y párrafos -------- */
body.home-ci .ci-h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  font-weight: 800;
  color: var(--ci-navy);
  margin: 0 0 1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

body.home-ci .ci-h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 800;
  color: var(--ci-navy);
  margin: 0 0 1.15rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

body.home-ci .ci-h2--light { color: #fff; }

body.home-ci .ci-parrafo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  color: var(--ci-text);
  line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 780px;
}

body.home-ci .ci-parrafo--light { color: #d3dae7; }

/* -------- HERO -------- */
body.home-ci .ci-hero { text-align: center; }
body.home-ci .ci-container--hero {
  max-width: 780px;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

body.home-ci .ci-hero .ci-etiqueta { margin-bottom: 1.2rem; }

body.home-ci .ci-sub {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  color: var(--ci-text);
  line-height: 1.6;
  margin: 0 auto 1.75rem;
  max-width: 640px;
}

body.home-ci .ci-microcopy {
  margin: 1rem 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  color: var(--ci-gray);
}

/* -------- CTA (override sobre .cta existente por mayor especificidad) -------- */
body.home-ci .cta,
body.home-ci .ci-cta {
  display: inline-block;
  background: var(--ci-teal);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.95rem 1.9rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 194, 203, 0.28);
}

body.home-ci .cta:hover,
body.home-ci .ci-cta:hover {
  background: var(--ci-teal-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(8, 145, 178, 0.35);
}

/* -------- Cita (único uso de Georgia) -------- */
body.home-ci .ci-cita {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.2rem;
  line-height: 1.55;
  font-style: italic;
  color: #fff;
  border-left: 3px solid var(--ci-teal);
  padding: 0.35rem 0 0.35rem 1.5rem;
  margin: 2rem 0 0;
  max-width: 780px;
}

body.home-ci .ci-cita-firma {
  display: block;
  margin-top: 0.85rem;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--ci-muted-blue);
  letter-spacing: 0.01em;
}

/* -------- Autodiagnóstico (3 cards) -------- */
body.home-ci .ci-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

body.home-ci .ci-card {
  background: #fff;
  border: 1px solid var(--ci-border);
  border-radius: 12px;
  padding: 1.6rem 1.4rem;
  box-shadow: 0 1px 3px rgba(10, 15, 30, 0.04);
}

body.home-ci .ci-card-icon {
  color: var(--ci-teal);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  line-height: 1;
}

body.home-ci .ci-card p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ci-text);
}

/* -------- Por qué (tarjeta light surface) -------- */
body.home-ci .ci-porque {
  background: var(--ci-light-surface);
  border: 1px solid var(--ci-border);
  border-radius: 14px;
  padding: 2.5rem;
  max-width: 780px;
  margin: 0 auto;
}

body.home-ci .ci-porque .ci-parrafo { max-width: none; margin-bottom: 0; }

/* -------- Firma (César) -------- */
body.home-ci .ci-firma {
  background: #fff;
  border: 1px solid var(--ci-border);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: 0 1px 3px rgba(10, 15, 30, 0.04);
}

body.home-ci .ci-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ci-teal);
  flex-shrink: 0;
  display: block;
}

body.home-ci .ci-firma-texto { flex: 1; min-width: 0; }

body.home-ci .ci-firma-texto .ci-etiqueta { margin-bottom: 0.6rem; }

body.home-ci .ci-firma-nombre {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ci-navy);
  margin: 0 0 0.15rem;
  letter-spacing: -0.005em;
}

body.home-ci .ci-firma-rol {
  color: var(--ci-teal);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  margin: 0 0 0.85rem;
  letter-spacing: 0.005em;
}

body.home-ci .ci-firma .ci-parrafo { max-width: none; margin-bottom: 0; }

/* -------- Cierre -------- */
body.home-ci .ci-band--cierre .ci-container {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

body.home-ci .ci-band--cierre .ci-h2 { margin-bottom: 1.75rem; }

/* -------- Footer -------- */
body.home-ci footer.ci-footer {
  background: var(--ci-navy-mid);
  color: #fff;
  padding: 1.5rem;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* -------- Responsive -------- */
@media (max-width: 720px) {
  body.home-ci .ci-container { padding: 2.75rem 1.25rem; }
  body.home-ci .ci-container--hero { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  body.home-ci .ci-firma {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.5rem;
  }
  body.home-ci .ci-porque { padding: 1.75rem 1.5rem; }
  body.home-ci .ci-header-inner { gap: 0.75rem; }
  body.home-ci .ci-brand { font-size: 1rem; }
  body.home-ci .ci-tagline { font-size: 0.78rem; }
}

/* ==========================================================================
   Rebranding del reporte / PDF a "Clínica Inteligente"
   Scope: TODO va bajo #vista-resultado, así el panel /consultor (que usa
   .reporte-ia, no .resultado) sigue con la paleta HBE intacta.
   Truco: sobreescribimos las variables --hbe-* dentro de #vista-resultado,
   de modo que toda la cascada del reporte (h2/h3, blockquote, tabla, caja
   de sesión, saludo, cabecera/pie de impresión, etc.) pasa a Clínica
   Inteligente sin tocar las reglas existentes.
   ========================================================================== */

#vista-resultado {
  --hbe-navy: #0A0F1E;
  --hbe-teal: #00C2CB;
}

/* Tintes rgba del teal HBE que estaban hardcodeados — alinearlos con CI */
#vista-resultado .resultado blockquote {
  background: rgba(0, 194, 203, 0.10);
}
#vista-resultado .resultado .tabla-comparativa tbody td:nth-child(2) {
  background: rgba(0, 194, 203, 0.08);
}
#vista-resultado .resultado .tabla-comparativa tbody tr:nth-child(even) td:nth-child(2) {
  background: rgba(0, 194, 203, 0.12);
}
#vista-resultado .resultado .tabla-comparativa thead th:nth-child(2) {
  background: linear-gradient(180deg, #0A0F1E 0%, #1a2440 100%);
}

/* CTAs del cierre del reporte (dentro de .caja-sesion) */
.caja-sesion .caja-sesion-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.25rem;
}

.cta-cierre {
  display: inline-block;
  background: #00C2CB;
  color: #fff;
  padding: 0.85rem 1.6rem;
  border-radius: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 194, 203, 0.28);
}
.cta-cierre:hover {
  background: #0891b2;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(8, 145, 178, 0.35);
}
.cta-cierre[hidden] { display: none; }

.wa-cierre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #25D366;
  color: #fff;
  padding: 0.85rem 1.4rem;
  border-radius: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.wa-cierre:hover {
  background: #1ebe5a;
  transform: translateY(-1px);
}
.wa-cierre[hidden] { display: none; }
.wa-cierre::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20.5 3.5A11.9 11.9 0 0 0 3.4 18.6L2 22l3.5-1.4A11.9 11.9 0 1 0 20.5 3.5zM12 20.3a8.3 8.3 0 0 1-4.4-1.3l-.3-.2-2.1.8.8-2-.2-.3A8.3 8.3 0 1 1 12 20.3zm4.6-6c-.3-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1s-.7.8-.8 1c-.1.2-.3.2-.5.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.4-1.7-1.5-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.7-1.6c-.2-.4-.4-.4-.5-.4h-.5c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2 0 1.3.9 2.6 1.1 2.7.1.2 1.9 3 4.5 4.1.6.3 1.1.4 1.5.5.6.2 1.2.2 1.7.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.2-.2-.5-.3z'/></svg>") no-repeat center / contain;
}

/* Print: los CTAs del cierre pasan a texto/enlace subrayado y el resto del
   reporte hereda los colores CI vía la sustitución de variables anterior. */
@media print {
  #vista-resultado .resultado blockquote {
    background: rgba(0, 194, 203, 0.10) !important;
  }
  #vista-resultado .resultado .tabla-comparativa tbody td:nth-child(2) {
    background: rgba(0, 194, 203, 0.10) !important;
  }
  .caja-sesion .caja-sesion-ctas {
    display: block !important;
    margin-top: 10pt;
  }
  .cta-cierre,
  .wa-cierre {
    background: transparent !important;
    color: var(--hbe-navy) !important;
    padding: 0 !important;
    margin: 0 12pt 0 0 !important;
    font-weight: 700 !important;
    font-size: 10.5pt !important;
    text-decoration: underline !important;
    box-shadow: none !important;
    display: inline-block !important;
    gap: 0 !important;
  }
  .cta-cierre[hidden],
  .wa-cierre[hidden] { display: none !important; }
  .wa-cierre::before { display: none !important; }
}