/* Brand Jungle — Qualifier / Journey Panel ("Where is your business today?").
   Spec "Interactive Journey Panel": al elegir una respuesta el layout se
   vuelve split-screen IN-PAGE — pregunta + chips al rail izquierdo (~35%),
   panel de ruta a la derecha (~65%) — sin modal, sin overlay oscuro; el
   glow del hero sigue vivo detrás.

   ⚠ EXCEPCIÓN LOCAL AL BRANDBOOK (pedida por el spec del fundador): el
   panel usa GLASS CLARO (blanco .82 + blur 18px) sobre el hero claro; la
   regla general "glass solo en oscuro" sigue vigente en el resto del sitio.
   Tokens locales del componente abajo — no promover a tokens.css.

   Estados (los maneja journey.js): #qualifier.is-split (layout 35/65) ·
   .is-open (panel visible + contenido) · .is-morphing (crossfade al cambiar
   de opción con el panel abierto) · [data-situation="chaos"] (sin selector
   de tiers, nota de cotización a medida).
   NOTA: .journey-panel no debe recibir display propio — su ocultamiento
   inicial depende del [hidden] del UA (lección del bug de discovery-cards). */

.qualifier {
  --journey-radius: 26px;
  --journey-pad: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  --journey-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  --journey-glass-bg: rgba(255, 255, 255, 0.82);
  --journey-glass-border: 1px solid rgba(255, 255, 255, 0.45);
  --journey-blur: 18px;
  --journey-stagger: 60ms;

  max-width: 880px;
  margin: clamp(1.75rem, 3vh, 2.75rem) auto 0;
}

.qualifier-q {
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  color: var(--c-ink);
}

.qualifier-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.625rem;
  margin-top: 1.125rem;
}

.qualifier-chip {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0.8125rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--c-linen);
  background: var(--c-white);
  font-family: var(--f-ui);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  color: var(--c-ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) ease,
              background-color var(--dur-fast) ease,
              opacity var(--dur-fast) ease;
}

.qualifier-chip:hover {
  transform: translateY(-2px);
  border-color: var(--c-moss);
}

.qualifier-chip[aria-pressed="true"] {
  background: var(--c-green);
  border-color: var(--c-green);
}

.chip-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-stone);
  transition: color var(--dur-fast) ease;
}

.qualifier-chip:hover .chip-icon,
.qualifier-chip[aria-pressed="true"] .chip-icon { color: var(--c-ink); }

.qualifier-skip {
  margin-top: 1rem;
  text-align: center;
  font-size: var(--fs-small);
}

.qualifier-skip a {
  color: var(--c-stone);
  text-decoration: none;
  border-bottom: 1px solid var(--c-linen);
  padding-bottom: 1px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.qualifier-skip a:hover { color: var(--c-ink); border-color: var(--c-moss); }

/* ---------- Split 35/65: la pregunta se queda, el panel se despliega ----------
   El grid existe desde el inicio (una sola columna); .is-split solo cambia
   template/anchos — así el layout base y el abierto comparten estructura. */
.qualifier.is-split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.qualifier.is-split .qualifier-q { text-align: left; }

.qualifier.is-split .qualifier-chips { grid-template-columns: 1fr; }

.qualifier.is-split .qualifier-skip { text-align: left; }

/* La elegida queda activa (verde); las demás bajan a 60% (spec) */
.qualifier.is-split .qualifier-chip[aria-pressed="false"] { opacity: 0.6; }

.qualifier.is-split .qualifier-chip[aria-pressed="false"]:hover { opacity: 1; }

/* ---------- Panel derecho: glass claro que se despliega ---------- */
.journey-scrim { display: none; }

.journey-grip { display: none; }

.journey-panel {
  position: relative;
  padding: var(--journey-pad);
  background: var(--journey-glass-bg);
  border: var(--journey-glass-border);
  border-radius: var(--journey-radius);
  box-shadow: var(--journey-shadow);
  -webkit-backdrop-filter: blur(var(--journey-blur));
  backdrop-filter: blur(var(--journey-blur));
  opacity: 0;
  transform: translateX(16px) scale(0.985);
  transition: opacity 320ms ease, transform 300ms ease;
}

@supports not (backdrop-filter: blur(1px)) {
  .journey-panel { background: rgba(255, 255, 255, 0.95); }
}

.qualifier.is-open .journey-panel {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 480ms var(--ease-out);
}

.journey-close {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--c-linen);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-stone);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}

.journey-close:hover {
  color: var(--c-ink);
  background: var(--c-mist);
  border-color: var(--c-moss);
}

.journey-close svg { width: 15px; height: 15px; }

/* ---------- Contenido del panel ---------- */
/* El morph (cambiar de opción con el panel abierto) cruza por transparente */
.journey-content {
  transition: opacity 160ms ease, transform 160ms var(--ease-out);
}

.qualifier.is-morphing .journey-content {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 100ms ease-in, transform 100ms ease-in;
}

.reco-kicker {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--c-stone);
}

.reco-title {
  margin-top: 0.875rem;
  padding-right: 2.5rem;
  outline: none;
}

.reco-variant { display: none; }
.reco-variant.is-active { display: block; }

.reco-variant b {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-moss);
}

.reco-variant {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--c-ink);
}

/* ---------- Selector de tiers (Basic/Mid/Heavy) ---------- */
.journey-tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
}

/* chaos no tiene tiers: nota de cotización a la medida en su lugar */
.journey-tiers-alt { display: none; margin-top: 1rem; }

#qualifier[data-situation="chaos"] .journey-tiers { display: none; }
#qualifier[data-situation="chaos"] .journey-tiers-alt { display: block; }

.tier-btn {
  padding: 0.3rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--c-mist);
  border: 1px solid var(--c-linen);
  font-family: var(--f-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-out);
}

.tier-btn:hover {
  border-color: var(--c-moss);
  transform: translateY(-1px);
}

.tier-btn[aria-pressed="true"] {
  background: var(--c-green);
  border-color: var(--c-green);
}

.journey-tiers .tier-note { flex-basis: auto; margin-left: 0.375rem; }

/* ---------- Descripción y extra ---------- */
.reco-line { display: none; margin-top: 0.875rem; max-width: 52ch; font-size: 0.9375rem; line-height: 1.55; color: var(--c-stone); }
.reco-line.is-active { display: block; }

.reco-extra { display: none; margin-top: 0.625rem; font-size: var(--fs-small); font-weight: 500; }
.reco-extra.is-active { display: block; }

.reco-extra a {
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--c-green);
  padding-bottom: 1px;
}

.reco-extra a:hover { border-color: var(--c-moss); }

/* ---------- Mini-form ---------- */
.reco-form { margin-top: 1.5rem; text-align: left; }

.reco-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.reco-fields .form-field + .form-field { margin-top: 0; }

.qualifier .form-field label { color: var(--c-stone); }

.qualifier .form-field input {
  background: var(--c-white);
  border-color: var(--c-linen);
  color: var(--c-ink);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}

.qualifier .form-field input::placeholder { color: var(--c-stone); }

/* Micro: lift al hover, glow al focus (spec) */
.qualifier .form-field input:hover { transform: translateY(-1px); }

.qualifier .form-field input:focus {
  border-color: var(--c-moss);
  box-shadow: 0 0 0 3px rgba(156, 176, 1, 0.18);
}

.qualifier .form-note { color: var(--c-stone); }

.reco-form .btn { margin-top: 1rem; }

.reco-form .btn:active { transform: translateY(1px); }

.btn-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.reco-form .btn:hover .btn-arrow { transform: translateX(4px); }

.reco-alt {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
}

.reco-alt a { color: var(--c-stone); }
.reco-alt a:hover { color: var(--c-ink); }

/* ---------- Responsive ----------
   <900px: sin split — el panel fluye a lo ancho debajo de la pregunta
   (interino hasta la fase del bottom sheet móvil). */
@media (max-width: 959px) {
  .qualifier-chips { grid-template-columns: repeat(2, 1fr); }

  .qualifier.is-split { display: block; }

  .qualifier.is-split .qualifier-q,
  .qualifier.is-split .qualifier-skip { text-align: center; }

  .qualifier.is-split .qualifier-chips { grid-template-columns: repeat(2, 1fr); }

  .journey-panel { margin-top: 1.25rem; }
}

@media (max-width: 719px) {
  .reco-fields { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .qualifier-chips { grid-template-columns: 1fr; }

  .qualifier.is-split .qualifier-chips { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion: estados finales directos ---------- */
@media (prefers-reduced-motion: reduce) {
  .journey-panel,
  .journey-content { transition-delay: 0ms !important; }
}