/* DACHMI — RECOMENDADOR
   Estilos específicos de recomendador.html
   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 */
.recommender-intro{padding:170px 0 72px;text-align:center}
.recommender-intro .container{max-width:900px}
.recommender-intro .eyebrow{margin-bottom:18px}
.recommender-intro h1{margin:0;color:var(--forest-deep);font-family:var(--font-display);font-size:clamp(48px,6vw,82px);font-weight:500;line-height:.98;letter-spacing:-.035em}
.intro-lede{max-width:650px;margin:28px auto 0;color:var(--ink-soft);font-size:18px;line-height:1.65}

/* CONVERSACIÓN */
.conversation-section{padding:20px 0 110px}
.conversation-section .container{max-width:900px}
.conversation-shell{position:relative}

/* PROGRESO */
.conversation-progress{width:min(100%,620px);margin:0 auto 42px}
.progress-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--ink-soft);font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.progress-track{width:100%;height:5px;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)}

/* PREGUNTA */
.question-card{position:relative;width:min(100%,720px);margin:0 auto;padding:52px 56px 58px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--cream-soft);box-shadow:var(--shadow-soft);opacity:0;transform:translateY(24px) scale(.985);transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1),filter .45s ease}
.question-card.is-active{opacity:1;transform:translateY(0) scale(1)}
.question-content{max-width:610px;margin:0 auto}
.question-kicker,.product-kicker{margin:0 0 12px;color:var(--terracotta);font-family:var(--font-body);font-size:11px;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(34px,4vw,50px);font-weight:500;line-height:1.04;letter-spacing:-.025em}
.question-help{max-width:520px;margin:18px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.6}

/* INPUT */
.answer-form{display:flex;align-items:stretch;gap:12px;margin-top:34px}
.answer-form input{min-width:0;flex:1;height:56px;padding:0 20px;border:1px solid var(--line);border-radius:var(--radius-sm);outline:none;background:var(--white);color:var(--ink);font:inherit;font-size:16px;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 4px rgba(193,99,59,.10)}

/* OPCIONES */
.answer-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:34px}
.answer-option{min-height:86px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-md);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(-2px);box-shadow:0 8px 22px rgba(43,38,32,.06)}
.answer-option:focus-visible{border-color:var(--terracotta);box-shadow:0 0 0 4px 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 4px rgba(193,99,59,.10)}
.answer-option-title{display:block;color:var(--forest-deep);font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.15}
.answer-option-text{display:block;margin-top:7px;color:var(--ink-soft);font-size:13px;line-height:1.45}

/* HISTORIAL */
.conversation-history{display:flex;flex-direction:column;gap:10px;width:min(100%,720px);margin:18px auto 0}
.history-item{display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;opacity:0;transform:translateY(10px);animation:historyIn .4s ease forwards}
.history-question{max-width:62%;color:var(--ink-soft);font-size:12px;line-height:1.4;text-align:right;opacity:.68}
.history-answer{max-width:70%;padding:10px 15px;border-radius:17px 17px 4px 17px;background:var(--forest);color:var(--white);font-size:14px;line-height:1.35;box-shadow:0 4px 12px rgba(33,51,33,.08)}
@keyframes historyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

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

/* RESULTADO */
.recommendation-result{padding:30px 0 120px}
.result-intro{max-width:820px;margin:0 auto 42px;text-align:center}
.result-intro h2{margin:0;color:var(--forest-deep);font-family:var(--font-display);font-size:clamp(42px,5vw,68px);font-weight:500;line-height:1;letter-spacing:-.03em}
.result-lede{max-width:620px;margin:22px auto 0;color:var(--ink-soft);font-size:16px;line-height:1.65}

/* PERFIL */
.profile-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,900px);margin:0 auto 38px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--cream-soft)}
.profile-summary-item{min-width:0;padding:20px 22px;border-right:1px solid var(--line)}
.profile-summary-item:last-child{border-right:0}
.profile-label{display:block;margin-bottom:7px;color:var(--ink-soft);font-size:10px;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:17px;font-weight:500;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}

/* PRODUCTO PRINCIPAL */
.primary-recommendation{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr);width:min(100%,1100px);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:470px;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:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.primary-product-info{display:flex;flex-direction:column;justify-content:center;padding:56px}
.primary-product-info h3{margin:0;color:var(--forest-deep);font-family:var(--font-display);font-size:clamp(36px,4vw,54px);font-weight:500;line-height:1;letter-spacing:-.025em}
.product-description{max-width:500px;margin:20px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.65}
.product-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.product-meta span{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink-soft);font-size:11px;font-weight:600}
.product-purchase{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.product-price{color:var(--forest-deep);font-family:var(--font-display);font-size:30px;font-weight:600}

/* JUSTIFICACIÓN */
.recommendation-reason{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;width:min(100%,900px);margin:90px auto 0;padding:52px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reason-heading h3,.suggestions-heading h3{max-width:500px;margin:0;color:var(--forest-deep);font-family:var(--font-display);font-size:32px;font-weight:500;line-height:1.08;letter-spacing:-.02em}
.reason-copy{display:flex;align-items:center}
.reason-copy p{max-width:570px;margin:0;color:var(--ink-soft);font-size:16px;line-height:1.75}

/* SUGERENCIAS */
.suggestions-section{width:min(100%,1100px);margin:90px auto 0}
.suggestions-heading{margin-bottom:32px}
.suggestions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.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(-4px);box-shadow:var(--shadow-lift)}
.suggestion-image{position:relative;display:flex;align-items:center;justify-content:center;min-height:230px;border-radius:0}
.suggestion-content{padding:24px}
.suggestion-content h4{margin:0;color:var(--forest-deep);font-family:var(--font-display);font-size:27px;font-weight:500;line-height:1.05;letter-spacing:-.015em}
.suggestion-content>p:not(.product-kicker){display:-webkit-box;margin:13px 0 0;overflow:hidden;color:var(--ink-soft);font-size:13px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.suggestion-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding-top:17px;border-top:1px solid var(--line)}
.suggestion-footer strong{color:var(--forest-deep);font-family:var(--font-display);font-size:20px;font-weight:600}
.suggestion-footer a{color:var(--terracotta);font-size:12px;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:12px;margin-top:56px}

/* 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-top:145px}
  .question-card{padding:46px 42px 50px}
  .primary-recommendation{grid-template-columns:1fr}
  .product-visual{min-height:380px}
  .primary-product-info{padding:44px}
  .recommendation-reason{grid-template-columns:1fr;gap:30px}
  .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:14px}
}

/* MÓVIL */
@media(max-width:640px){
  .recommender-intro{padding:128px 0 54px}
  .recommender-intro h1{font-size:clamp(42px,12vw,58px)}
  .intro-lede{margin-top:22px;font-size:15px}
  .conversation-section{padding-bottom:76px}
  .conversation-progress{margin-bottom:26px}
  .question-card{padding:34px 22px 30px;border-radius:var(--radius-md)}
  .question-card h2{font-size:35px}
  .question-help{font-size:14px}
  .answer-form{flex-direction:column;margin-top:28px}
  .answer-form input{width:100%}
  .answer-form .btn{width:100%}
  .answer-options{grid-template-columns:1fr;margin-top:28px}
  .answer-option{min-height:76px}
  .history-question{max-width:45%}
  .history-answer{max-width:55%}
  .conversation-navigation{margin-top:17px}
  .recommendation-result{padding-bottom:80px}
  .result-intro{margin-bottom:30px}
  .result-intro h2{font-size:42px}
  .result-lede{font-size:14px}
  .profile-summary{grid-template-columns:1fr 1fr;border-radius:var(--radius-sm)}
  .profile-summary-item{padding:16px}
  .profile-summary-item strong{font-size:15px}
  .primary-recommendation{border-radius:var(--radius-md)}
  .product-visual{min-height:290px}
  .primary-product-info{padding:32px 24px}
  .primary-product-info h3{font-size:39px}
  .product-purchase{align-items:flex-start;flex-direction:column}
  .product-purchase .btn{width:100%}
  .recommendation-reason{gap:24px;margin-top:64px;padding:38px 0}
  .reason-heading h3,.suggestions-heading h3{font-size:28px}
  .reason-copy p{font-size:15px}
  .suggestions-section{margin-top:64px}
  .suggestions-grid{grid-template-columns:1fr}
  .suggestion-image{min-height:250px}
  .result-actions{flex-direction:column;width:100%;margin-top:42px}
  .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}
}