/* ===== Contenedor y layout 50/50 ===== */
.neo-survey,
.neo-row,
.neo-col,
.neo-left,
.neo-right,
.neo-survey-step,
.neo-thanks { background: transparent !important; }

.neo-survey {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical */
  align-items: center;     /* horizontal */
}

/* contenedor central */
.neo-survey-step { width: 100%; max-width: 1200px; }

.neo-row {
  display: flex;
  flex-wrap: wrap;            /* evita solapes en pantallas angostas */
  gap: 24px;
  align-items: flex-start;    /* no centrar verticalmente columnas (evita solapes) */
  justify-content: center;
}

/* 50% / 50% fijos con tope de ancho */
.neo-left, .neo-right {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}

/* ===== Tipografías y color de texto ===== */
.neo-left .neo-q-text {
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 56px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;                 /* pregunta en blanco */
}

.neo-left .neo-q-info,
.neo-right p,
.neo-thanks p {
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  color: #ffffff !important;                 /* párrafos en blanco */
}

/* ===== Input de texto (abiertas) ===== */
.neo-right .neo-text-input {
  width: 100% !important;
  padding: 14px 16px !important;
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 100% !important;
  border: 1px solid #ddd !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;                 /* texto blanco */
  vertical-align: middle !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ===== Opciones (botones de respuesta) ===== */
.neo-options { display: flex; flex-wrap: wrap; gap: 12px; }

.neo-opt {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #787574 !important;
  color: #000000 !important;                 /* TEXTO NEGRO en opciones */
  border: 1px solid #ffffff !important;      /* borde blanco 1px */
  border-radius: 0 !important;
  height: 75px !important;                   /* tamaño solicitado */
  width: 335px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;         /* compensa cambio de borde */
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;

  display: flex !important;                  /* alinear texto a la izquierda y centrado vertical */
  align-items: center !important;            /* vertical */
  justify-content: flex-start !important;    /* horizontal (izquierda) */
  text-align: left !important;

  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  vertical-align: middle !important;
}

.neo-opt.selected  {
  border-color: rgba(250, 204, 21, 0.75) !important;  /* amarillo suave */
  border-width: 4px !important;
  background: rgba(250, 204, 21, 0.25) !important;     /* relleno amarillo sutil */
  color: #000000 !important;                             /* texto negro sigue legible */
  padding: 9px 13px !important;                          /* compensa el borde 4px */
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.20) inset !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}

/* Un pequeño realce al pasar el mouse o con focus */
.neo-opt.selected:hover,
.neo-opt.selected:focus-visible {
  background: rgba(254, 234, 143, 0.35) !important;
  border-color: rgba(254, 234, 143, 0.90) !important;
}

/* ===== Navegación (Back / Next / Finalizar) ===== */
.neo-survey-nav {
  margin-top: 24px !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
}

/* Ocultar/mostrar robusto para el botón Finalizar */
.neo-finish.is-hidden { display: none !important; }

/* Reset fuerte para botones de navegación */
.neo-btn,
.neo-btn:link,
.neo-btn:visited,
.neo-btn:hover,
.neo-btn:focus,
.neo-btn:active {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Base .neo-btn */
.neo-btn {
  display: inline-flex !important;
  align-items: center !important;  /* vertical-align: middle */
  justify-content: center !important;
  padding: 12px 18px !important;

  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
}

/* Back: fondo blanco, sin borde, Regular */
.neo-back {
  background: #ffffff !important;
  color: #000000 !important;                 /* texto negro para contraste */
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Next / Finalizar: #FEEA8F, sin borde, texto negro */
.neo-next,
.neo-finish,
.neo-thanks .neo-primary {
  background: #FEEA8F !important;
  color: #000000 !important;                 /* texto negro */
  font-weight: 400 !important;
  font-style: normal !important;
}

/* disabled */
.neo-btn[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; }

/* ===== Thank You ===== */
.neo-thanks { text-align: center !important; }

.neo-thanks h1 {
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 56px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  margin: 0 0 40px 0 !important;  /* <-- antes 8px */
  color: #ffffff !important;
}


.neo-thanks p { margin: 0 0 100px 0 !important; color: #ffffff !important; }

/* Contenedor de acciones en Thank You */
.neo-thanks-actions {
  /* antes tenías margin-top: 12px; gap: 8px; */
  margin-top: 10px !important;/* más separación del texto */
  gap: 16px !important;         /* más espacio entre botones */
  justify-content: center !important;
}

/* Botones dentro de Thank You (por si quieres sumar margen adicional) */
.neo-thanks .neo-btn {
  margin: 0 10px !important;     /* opcional: micro-margen lateral */
}

/* ===== Responsivo ===== */
@media (max-width: 1024px){
  .neo-left, .neo-right { flex: 0 0 100%; max-width: 100%; }
  .neo-left .neo-q-text, .neo-thanks h1 { font-size: 40px !important; }
  .neo-left .neo-q-info, .neo-thanks p { font-size: 20px !important; }
}

/* Ocultar toda la navegación cuando el contenedor está en estado de Thank You */
.neo-survey.is-thanks .neo-survey-nav { display: none !important; }

/* Asegurar que los enlaces tipo botón no hereden subrayado ni colores de link */
.neo-survey .neo-btn,
.neo-survey .neo-btn:link,
.neo-survey .neo-btn:visited,
.neo-survey .neo-btn:hover,
.neo-survey .neo-btn:focus,
.neo-survey .neo-btn:active {
  text-decoration: none !important;
  color: inherit; /* lo sobreescriben .neo-back / .neo-next debajo */
}

/* Ya tenías .neo-back y .neo-next definidos.
   Al reutilizar esas clases en los botones del Thank You,
   heredarán exactamente los mismos estilos: */

/* Back (incluye "Back to home" en Thank You) */
.neo-survey .neo-back {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Next (incluye "Restart survey" en Thank You) */
.neo-survey .neo-next,
.neo-survey .neo-finish,
.neo-survey .neo-thanks .neo-primary {
  background: #FEEA8F !important;
  color: #000000 !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Fuerza dos columnas 50/50 para la fila principal */
.neo-survey .neo-survey-step { width: 100% !important; max-width: 1200px !important; }

.neo-survey .neo-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: start !important;
  justify-items: stretch !important;
}

.neo-survey .neo-left,
.neo-survey .neo-right {
  /* con grid no hace falta, pero aseguramos que no haya width:100% heredado */
  width: auto !important;
  max-width: none !important;
}

/* (Opcional) apila solo en móviles pequeños */
@media (max-width: 640px){
  .neo-survey .neo-row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== ACEPTACIÓN (checkbox + texto) ===== */
.neo-accept {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  margin-top: 8px !important;
}

.neo-accept-input {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 1px solid #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
}

.neo-accept-label {
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

/* ===== Enlaces dentro del párrafo (info) ===== */
.neo-q-info a {
  color: #FEEA8F !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.neo-q-info a:hover,
.neo-q-info a:focus-visible {
  text-decoration-thickness: 2px !important;
}

/* ===== Estados hover/focus accesibles ===== */
/* Botones de opciones */
.neo-opt:hover { filter: brightness(1.05) !important; }
.neo-opt:focus-visible {
  outline: 2px dashed #FEEA8F !important;
  outline-offset: 2px !important;
}

/* Inputs de texto */
.neo-text-input:focus-visible {
  border-color: #FEEA8F !important;
  box-shadow: 0 0 0 2px rgba(254,234,143,0.35) !important;
}

/* Checkbox */
.neo-accept-input:focus-visible {
  outline: 2px dashed #FEEA8F !important;
  outline-offset: 2px !important;
}

/* Navegación (Back/Next/Finish) */
.neo-btn:hover:not([disabled]) { filter: brightness(1.05) !important; }
.neo-btn:focus-visible {
  outline: 2px dashed #000000 !important;
  outline-offset: 3px !important;
}

/* ===== Mensajes de feedback ===== */
.neo-survey-feedback {
  margin-top: 10px !important;
  min-height: 20px !important; /* reserva espacio para evitar saltos */
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 100% !important;
  color: #FEEA8F !important; /* consistente con destaque */
}

/* ===== Ajustes de layout extras ===== */
/* Asegura que los botones grandes no se rompan en móviles medianos */
@media (max-width: 1024px){
  .neo-opt {
    width: 100% !important;
    max-width: 520px !important;
  }
}

/* Márgenes suaves entre título e info en la izquierda */
.neo-left .neo-q-text + .neo-q-info { margin-top: 8px !important; }

/* Separación entre el contenido derecho y la navegación para respirar mejor */
.neo-right { margin-bottom: 8px !important; }

/* ===== Preferencias de movimiento reducido ===== */
@media (prefers-reduced-motion: reduce){
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Estados activos/seleccionados más notorios (opcional) ===== */
.neo-opt.selected { /* ya tienes borde 4px; añadimos ligera sombra para separación visual */
  box-shadow: 0 0 0 2px rgba(254,234,143,0.25) inset !important;
}

/* ===== Modo impresión (opcional, por si alguien imprime el resultado) ===== */
@media print {
  .neo-survey-nav { display: none !important; }
  .neo-opt { border-width: 1px !important; }
  .neo-opt.selected { border-width: 3px !important; }
}

/* Ocultar Next cuando JS ponga la clase is-hidden */
.neo-next.is-hidden { display: none !important; }

.neo-answers-human {
  display: block;
  white-space: normal;
  line-height: 1.4;
}
.neo-answers-human strong { font-weight: 600; }