/* DACHMI — RECOMENDADOR
   v5 — experiencia conversacional
   Depende de css/style.css para tokens, header, footer y botones.
*/

.recommender-page{overflow:hidden;background:var(--cream)}
.recommender-page [hidden]{display:none!important}

/* ==========================================================
   INTRO — breve. El usuario debe llegar rápido a la pregunta.
   ========================================================== */
.recommender-intro{padding:76px 0 30px;text-align:center}
.recommender-intro .container{max-width:760px}
.recommender-intro .eyebrow{margin:0 0 10px;font-size:10px}
.recommender-intro h1{margin:0;color:var(--forest-deep);font-family:var(--font-display);font-size:clamp(38px,4.5vw,58px);font-weight:500;line-height:.98;letter-spacing:-.035em}
.intro-lede{max-width:600px;margin:13px auto 0;color:var(--ink-soft);font-size:15px;line-height:1.45}

/* ==========================================================
   CONVERSACIÓN
   ========================================================== */
.conversation-section{padding:10px 0 90px}
.conversation-section .container{max-width:760px}
.conversation-shell{
  position:relative;
  display:flex;
  flex-direction:column;
}

/* ==========================================================
   PROGRESO — abajo de la conversación, no arriba.
   ========================================================== */
.conversation-progress{
  order:5;
  width:min(100%,560px);
  margin:20px auto 0;
}
.progress-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.72;
}
.progress-track{
  width:100%;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:var(--cream-deep);
}
.progress-bar{
  width:20%;
  height:100%;
  border-radius:inherit;
  background:var(--terracotta);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

/* ==========================================================
   PREGUNTAS — apariencia de conversación, no tarjeta editorial
   ========================================================== */
.question-card{
  order:1;
  position:relative;
  width:min(100%,680px);
  margin:0 auto;
  padding:30px 34px 28px;
  border:1px solid var(--line);
  border-radius:24px 24px 24px 6px;
  background:var(--cream-soft);
  box-shadow:0 10px 30px rgba(43,38,32,.055);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1),filter .4s ease;
}
.question-card.is-active{
  opacity:1;
  transform:translateY(0);
}
.question-content{max-width:590px;margin:0 auto}
.question-kicker,.product-kicker{
  margin:0 0 7px;
  color:var(--terracotta);
  font-family:var(--font-body);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.3;
  text-transform:uppercase;
}
.question-card h2{
  margin:0;
  color:var(--forest-deep);
  font-family:var(--font-display);
  font-size:clamp(31px,3.5vw,43px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.025em;
}
.question-help{
  max-width:500px;
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.45;
}

/* ==========================================================
   RESPUESTAS — composer estilo chat
   ========================================================== */
.answer-form{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:20px;
}
.answer-form input{
  min-width:0;
  flex:1;
  height:48px;
  padding:0 17px;
  border:1px solid var(--line);
  border-radius:999px;
  outline:none;
  background:var(--white);
  color:var(--ink);
  font:inherit;
  font-size:15px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.answer-form input::placeholder{color:#A79D91}
.answer-form input:hover{border-color:#CFC4B2}
.answer-form input:focus{
  border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(193,99,59,.10);
}
.answer-form .btn{
  flex:0 0 auto;
  min-height:48px;
  padding:11px 21px;
  border-radius:999px;
}

/* ==========================================================
   OPCIONES — mensajes/burbujas de respuesta
   ========================================================== */
.answer-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:20px;
}
.answer-option{
  min-height:68px;
  padding:14px 17px;
  border:1px solid var(--line);
  border-radius:18px 18px 18px 5px;
  outline:none;
  background:var(--white);
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.answer-option:hover{
  border-color:var(--terracotta);
  background:#FFFCF7;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(43,38,32,.055);
}
.answer-option:focus-visible{
  border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(193,99,59,.12);
}
.answer-option:active{transform:translateY(0)}
.answer-option.is-selected{
  border-color:var(--terracotta);
  background:#FFFCF7;
  box-shadow:0 0 0 3px rgba(193,99,59,.10);
}
.answer-option-title{
  display:block;
  color:var(--forest-deep);
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  line-height:1.1;
}
.answer-option-text{
  display:block;
  margin-top:5px;
  color:var(--ink-soft);
  font-size:12px;
  line-height:1.35;
}

/* ==========================================================
   HISTORIAL — respuestas previas como burbujas de chat
   ========================================================== */
.conversation-history{
  order:2;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:min(100%,680px);
  margin:12px auto 0;
}
.history-item{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:9px;
  opacity:0;
  transform:translateY(8px);
  animation:historyIn .35s ease forwards;
}
.history-question{
  max-width:56%;
  color:var(--ink-soft);
  font-size:10px;
  line-height:1.35;
  text-align:right;
  opacity:.58;
}
.history-answer{
  max-width:58%;
  padding:8px 13px;
  border-radius:16px 16px 4px 16px;
  background:var(--forest);
  color:var(--white);
  font-size:13px;
  line-height:1.3;
  box-shadow:0 3px 10px rgba(33,51,33,.08);
}
@keyframes historyIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ==========================================================
   NAVEGACIÓN
   ========================================================== */
.conversation-navigation{
  order:4;
  width:min(100%,680px);
  margin:10px auto 0;
}
.back-button{
  padding:5px 0;
  border:0;
  background:transparent;
  color:var(--ink-soft);
  font:inherit;
  font-size:11px;
  cursor:pointer;
  transition:color .2s ease;
}
.back-button:hover{color:var(--forest-deep)}

/* ==========================================================
   ESTADO DE RESULTADO
   ========================================================== */
.recommender-page:has(#recommendationResult:not([hidden])) .recommender-intro{display:none}
.recommender-page:has(#recommendationResult:not([hidden])) .conversation-section{display:none}

.recommendation-result{padding:88px 0 56px}
.result-intro{max-width:900px;margin:0 auto 18px;text-align:center}
.result-intro .eyebrow{margin:0 0 5px;font-size:10px}
.result-intro h2{
  margin:0;
  color:var(--forest-deep);
  font-family:var(--font-display);
  font-size:clamp(32px,3.2vw,46px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.03em;
}
.result-lede{display:none}

/* PERFIL */
.profile-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:min(100%,900px);
  margin:0 auto 14px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--cream-soft);
}
.profile-summary-item{min-width:0;padding:10px 16px;border-right:1px solid var(--line)}
.profile-summary-item:last-child{border-right:0}
.profile-label{
  display:block;
  margin-bottom:3px;
  color:var(--ink-soft);
  font-size:8px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.profile-summary-item strong{
  display:block;
  overflow:hidden;
  color:var(--forest-deep);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:500;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* PRODUCTO PRINCIPAL */
.primary-recommendation{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  width:min(100%,1000px);
  height:270px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--cream-soft);
  box-shadow:var(--shadow-lift);
}
.product-visual{position:relative;min-height:0;height:270px;border-radius:0}
.product-visual.ph{display:flex;align-items:center;justify-content:center}
.product-visual .ph-label,.suggestion-image .ph-label{
  color:var(--ink-soft);
  font-size:9px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.primary-product-info{display:flex;flex-direction:column;justify-content:center;padding:22px 30px}
.primary-product-info .product-kicker{margin-bottom:5px}
.primary-product-info h3{
  margin:0;
  color:var(--forest-deep);
  font-family:var(--font-display);
  font-size:clamp(30px,3vw,42px);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.025em;
}
.product-description{max-width:500px;margin:9px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.4}
.product-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.product-meta span{
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink-soft);
  font-size:9px;
  font-weight:600;
}
.product-purchase{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.product-price{color:var(--forest-deep);font-family:var(--font-display);font-size:24px;font-weight:600}

/* JUSTIFICACIÓN */
.recommendation-reason{display:none}

/* SUGERENCIAS */
.suggestions-section{width:min(100%,1000px);margin:20px auto 0}
.suggestions-heading{margin-bottom:9px}
.suggestions-heading .eyebrow{margin:0 0 3px;font-size:10px}
.suggestions-heading h3{
  margin:0;
  color:var(--forest-deep);
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
}
.suggestions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.suggestion-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--cream-soft);
  transition:transform .25s ease,box-shadow .25s ease;
}
.suggestion-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.suggestion-image{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:108px;
  height:108px;
  border-radius:0;
}
.suggestion-content{padding:10px 13px}
.suggestion-content .product-kicker{display:none}
.suggestion-content h4{
  margin:0;
  color:var(--forest-deep);
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.015em;
}
.suggestion-content>p:not(.product-kicker){display:none}
.suggestion-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.suggestion-footer strong{color:var(--forest-deep);font-family:var(--font-display);font-size:16px;font-weight:600}
.suggestion-footer a{color:var(--terracotta);font-size:10px;font-weight:700;text-decoration:none}
.suggestion-footer a:hover{color:var(--terracotta-deep)}

/* ACCIONES */
.result-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.result-actions .btn{min-height:40px;padding:9px 16px}

/* ACCESIBILIDAD */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================
   TABLET
   ========================================================== */
@media(max-width:900px){
  .recommender-intro{padding:58px 0 24px}
  .recommender-intro h1{font-size:clamp(36px,5vw,50px)}
  .intro-lede{font-size:14px}
  .question-card{padding:26px 28px 25px}
  .question-card h2{font-size:38px}
  .primary-recommendation{grid-template-columns:1fr;height:auto}
  .product-visual{min-height:260px;height:260px}
  .primary-product-info{padding:24px 28px}
  .profile-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-summary-item:nth-child(2){border-right:0}
  .profile-summary-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .suggestions-grid{gap:10px}
}

/* ==========================================================
   MÓVIL
   ========================================================== */
@media(max-width:640px){
  .recommender-intro{padding:40px 0 18px}
  .recommender-intro .eyebrow{margin-bottom:7px}
  .recommender-intro h1{font-size:clamp(34px,10vw,46px)}
  .intro-lede{margin-top:9px;font-size:13px;line-height:1.4}
  .conversation-section{padding:6px 0 60px}
  .question-card{
    width:min(100%,680px);
    padding:24px 19px 22px;
    border-radius:20px 20px 20px 5px;
  }
  .question-card h2{font-size:32px}
  .question-help{font-size:13px;margin-top:8px}
  .answer-form{flex-direction:column;align-items:stretch;margin-top:17px}
  .answer-form input{width:100%;height:46px}
  .answer-form .btn{width:100%;min-height:46px}
  .answer-options{grid-template-columns:1fr;margin-top:17px}
  .answer-option{min-height:64px;padding:13px 15px}
  .answer-option-title{font-size:17px}
  .answer-option-text{font-size:11px}
  .conversation-history{margin-top:9px}
  .history-question{max-width:46%;font-size:9px}
  .history-answer{max-width:54%;padding:7px 11px;font-size:12px}
  .conversation-navigation{margin-top:7px}
  .conversation-progress{width:min(100%,500px);margin-top:14px}

  .recommendation-result{padding:76px 0 48px}
  .result-intro{margin-bottom:11px}
  .result-intro .eyebrow{font-size:9px}
  .result-intro h2{font-size:31px}
  .profile-summary{grid-template-columns:1fr 1fr;margin-bottom:11px;border-radius:var(--radius-sm)}
  .profile-summary-item{padding:9px 10px}
  .profile-summary-item strong{font-size:13px}
  .primary-recommendation{display:grid;grid-template-columns:1fr;height:auto;border-radius:var(--radius-md)}
  .product-visual{min-height:185px;height:185px}
  .primary-product-info{padding:20px 18px}
  .primary-product-info h3{font-size:32px}
  .product-description{font-size:12px}
  .product-purchase{margin-top:13px;padding-top:11px}
  .product-price{font-size:22px}
  .product-purchase .btn{padding:9px 14px}
  .suggestions-section{margin-top:18px}
  .suggestions-heading{margin-bottom:8px}
  .suggestions-heading h3{font-size:20px}
  .suggestions-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .suggestion-image{min-height:82px;height:82px}
  .suggestion-content{padding:9px}
  .suggestion-content h4{font-size:15px}
  .suggestion-footer{gap:5px;margin-top:6px;padding-top:6px}
  .suggestion-footer strong{font-size:13px}
  .suggestion-footer a{font-size:9px}
  .result-actions{flex-direction:column;width:100%;margin-top:18px}
  .result-actions .btn{width:100%}
}

/* REDUCIR MOVIMIENTO */
@media(prefers-reduced-motion:reduce){
  .question-card,.progress-bar,.answer-option,.history-item,.suggestion-card{
    animation:none;
    transition:none;
  }
}


/* ==========================================================
   v6 — VENTANA DE CHAT
   La conversación previa vive dentro del mismo marco que
   la pregunta actual.
   Requiere envolver #conversationHistory + question cards
   dentro de .conversation-window.
   ========================================================== */

.conversation-window{
  position:relative;
  width:min(100%,680px);
  margin:0 auto;
  padding:20px 22px 24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--cream-soft);
  box-shadow:0 10px 30px rgba(43,38,32,.055);
}

/* El historial deja de ser una sección independiente */
.conversation-window .conversation-history{
  width:100%;
  margin:0 0 14px;
  gap:7px;
}

/* Cada intercambio anterior ocupa una sola línea:
   pregunta izquierda / respuesta derecha */
.conversation-window .history-item{
  width:100%;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  opacity:0;
  transform:translateY(8px);
  animation:historyIn .35s ease forwards;
}

.conversation-window .history-question{
  flex:1 1 auto;
  max-width:58%;
  color:var(--ink-soft);
  font-size:10px;
  line-height:1.3;
  text-align:left;
  opacity:.55;
}

.conversation-window .history-answer{
  flex:0 0 auto;
  max-width:42%;
  padding:7px 12px;
  border-radius:15px 15px 4px 15px;
  background:var(--forest);
  color:var(--white);
  font-size:12px;
  line-height:1.25;
  box-shadow:0 3px 10px rgba(33,51,33,.08);
}

/* La tarjeta activa ya no dibuja un segundo marco.
   El marco pertenece a toda la conversación. */
.conversation-window .question-card{
  width:100%;
  margin:0;
  padding:8px 12px 4px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.conversation-window .question-content{
  max-width:100%;
}

/* Si no hay historial, la primera pregunta conserva una
   separación cómoda desde el borde superior. */
.conversation-window .question-card:first-of-type{
  padding-top:8px;
}

/* El historial solo debe mostrar respuestas ya contestadas.
   Los cards ocultos no afectan el layout. */
.conversation-window .question-card[hidden]{
  display:none!important;
}

/* La navegación también pertenece al flujo conversacional */
.conversation-window .conversation-navigation{
  width:100%;
  margin:8px 0 0;
}

/* El progreso sigue fuera del marco y debajo de la conversación */
.conversation-shell>.conversation-progress{
  margin-top:20px;
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media(max-width:640px){
  .conversation-window{
    padding:16px 14px 18px;
    border-radius:20px;
  }

  .conversation-window .conversation-history{
    margin-bottom:11px;
  }

  .conversation-window .history-item{
    gap:10px;
  }

  .conversation-window .history-question{
    max-width:58%;
    font-size:9px;
  }

  .conversation-window .history-answer{
    max-width:42%;
    padding:6px 10px;
    font-size:11px;
  }

  .conversation-window .question-card{
    padding:7px 5px 2px;
  }
}


/* ==========================================================
   v7 — JERARQUÍA VISUAL / CHAT
   1. El intro ocupa menos altura.
   2. El historial se percibe como conversación, no como lista.
   3. Las respuestas son más compactas.
   4. Las preguntas históricas ganan legibilidad.
   ========================================================== */

/* INTRO: menos protagonismo, más espacio para la conversación */
.recommender-intro{
  padding:108px 0 42px;
}

.recommender-intro .eyebrow{
  margin-bottom:12px;
  font-size:10px;
}

.recommender-intro h1{
  font-size:clamp(50px,5.2vw,68px);
  line-height:1;
}

.intro-lede{
  max-width:590px;
  margin-top:16px;
  font-size:15px;
  line-height:1.5;
}

/* La conversación empieza más cerca del intro */
.conversation-section{
  padding:10px 0 90px;
}

/* HISTORIAL: más aire vertical y jerarquía de chat */
.conversation-window .conversation-history{
  gap:9px;
  margin-bottom:18px;
}

.conversation-window .history-item{
  position:relative;
  min-height:30px;
  align-items:center;
}

/* La pregunta aparece primero */
.conversation-window .history-question{
  max-width:60%;
  font-size:12.5px;
  line-height:1.35;
  position:relative;
  top:0;
  opacity:.62;
}

/* La respuesta aparece ligeramente después/abajo.
   La burbuja conserva exactamente su tamaño y tratamiento de v7. */
.conversation-window .history-answer{
  max-width:40%;
  padding:6px 11px;
  border-radius:14px 14px 4px 14px;
  font-size:11.5px;
  line-height:1.25;
  position:relative;
  top:5px;
}

/* Separador visual muy sutil entre historial y pregunta actual */
.conversation-window .question-card{
  padding-top:13px;
}

.conversation-window .conversation-history + .question-card{
  border-top:1px solid rgba(228,220,203,.65);
  padding-top:19px;
}

/* La pregunta actual mantiene protagonismo, pero sin volver
   a convertir la pantalla en una tarjeta editorial */
.conversation-window .question-kicker{
  margin-bottom:8px;
  font-size:10px;
}

.conversation-window .question-card h2{
  font-size:clamp(30px,3.5vw,42px);
  line-height:1.02;
}

.conversation-window .question-help{
  margin-top:10px;
  font-size:14px;
  line-height:1.45;
}

.conversation-window .answer-options{
  gap:9px;
  margin-top:22px;
}

.conversation-window .answer-option{
  min-height:72px;
  padding:14px 17px;
}

.conversation-window .answer-option-title{
  font-size:18px;
}

.conversation-window .answer-option-text{
  margin-top:5px;
  font-size:12px;
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media(max-width:640px){

  .recommender-intro{
    padding:92px 0 30px;
  }

  .recommender-intro .eyebrow{
    margin-bottom:9px;
  }

  .recommender-intro h1{
    font-size:clamp(39px,10.5vw,52px);
    line-height:1;
  }

  .intro-lede{
    max-width:420px;
    margin-top:13px;
    font-size:14px;
    line-height:1.45;
  }

  .conversation-section{
    padding:8px 0 64px;
  }

  .conversation-window{
    padding:14px 13px 17px;
  }

  .conversation-window .conversation-history{
    gap:8px;
    margin-bottom:14px;
  }

  .conversation-window .history-question{
    max-width:57%;
    font-size:11.5px;
    top:0;
  }

  .conversation-window .history-answer{
    max-width:43%;
    padding:6px 9px;
    font-size:11px;
    top:4px;
  }

  .conversation-window .conversation-history + .question-card{
    padding-top:16px;
  }

  .conversation-window .question-card h2{
    font-size:34px;
  }

  .conversation-window .question-help{
    font-size:13px;
  }

  .conversation-window .answer-options{
    gap:8px;
    margin-top:20px;
  }

  .conversation-window .answer-option{
    min-height:68px;
    padding:13px 15px;
  }

  .conversation-window .answer-option-title{
    font-size:17px;
  }

  .conversation-window .answer-option-text{
    font-size:11.5px;
  }
}


/* ==========================================================
   DACHMI — PATRÓN DEFINITIVO DE CONVERSACIÓN
   Aplicar a todos los intercambios del historial:
   pregunta izquierda → respuesta derecha ligeramente abajo
   ========================================================== */

.conversation-window .history-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:start;
  gap:14px;
  min-height:34px;
}

/* Cada pregunta inicia el intercambio desde la izquierda */
.conversation-window .history-question{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  max-width:100%;
  margin:0;
  text-align:left;
  position:relative;
  top:0;
}

/* La respuesta ocupa su propio nivel visual a la derecha */
.conversation-window .history-answer{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  max-width:100%;
  margin:0;
  position:relative;
  top:5px;
}

/* Mantener el flujo de conversación: cada intercambio tiene
   suficiente altura para que el siguiente comience debajo
   de la respuesta, no en paralelo con ella. */
.conversation-window .conversation-history{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* La siguiente pregunta comienza después del intercambio anterior */
.conversation-window .history-item + .history-item{
  margin-top:2px;
}

/* ==========================================================
   MOBILE — mismo patrón, más compacto
   ========================================================== */
@media(max-width:640px){

  .conversation-window .history-item{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:10px;
    min-height:31px;
  }

  .conversation-window .history-question{
    max-width:100%;
    text-align:left;
    top:0;
  }

  .conversation-window .history-answer{
    max-width:100%;
    top:4px;
  }

  .conversation-window .conversation-history{
    gap:12px;
  }

  .conversation-window .history-item + .history-item{
    margin-top:1px;
  }
}


/* ==========================================================
   v10 — ACERCAR LA CONVERSACIÓN AL TEXTO INTRODUCTORIO
   El encabezado conserva su jerarquía actual; únicamente
   reducimos el espacio vacío antes del cuerpo de preguntas.
   ========================================================== */

.recommender-intro{
  padding-bottom:16px;
}

.conversation-section{
  padding-top:0;
}

/* En móvil mantenemos la misma intención sin dejar el bloque
   pegado al texto introductorio. */
@media(max-width:640px){
  .recommender-intro{
    padding-bottom:18px;
  }

  .conversation-section{
    padding-top:0;
  }
}