/* Asesor DK Premium V2.2 — identidad visual de dkinsumos.com (misma estructura y lógica que V2/V2.1).
 * Paleta y tipografías verificadas en dkinsumos.com el 2026-10-29:
 *   style#dkhf-exact-approved-css :root  → --navy #102B4C, --ink #27384B, --gray #5F6772, --border #D7DEE5, --white #FFF, --blush #EAF3FC
 *   style#dkhf-exact-approved-css        → --rose #D996A8 (acento del mega menú), #A76F73 (.eyebrow en vista profesional)
 *   style#dk-reco-lab-css                → --blue #123B78, --ice #EAF3FC
 *   Google Fonts del sitio               → Cormorant Garamond (títulos) + Manrope (texto, botones)
 * Ningún color fuera de esta lista; los fondos rosados son el mismo #D996A8 con opacidad. */
:root {
  --dk-navy: #102B4C;
  --dk-ink: #27384B;
  --dk-gray: #5F6772;
  --dk-border: #D7DEE5;
  --dk-blue: #123B78;
  --dk-ice: #EAF3FC;
  --dk-rose: #D996A8;
  --dk-rose-text: #A76F73;
  --dk-white: #FFFFFF;
  --dk-rose-tint: rgba(217, 150, 168, .12); /* #D996A8 al 12 % */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Manrope, Arial, sans-serif;
  --panel-pad: 30px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--dk-white); color: var(--dk-ink); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
code { font-size: .9em; }
[tabindex="-1"]:focus { outline: none; }

/* Banda de demostración: mismo lenguaje que la barra superior del sitio (navy + blanco, Manrope) */
.dk-demo-band { background: var(--dk-navy); color: var(--dk-white); padding: 9px 32px; font-size: 11.5px; line-height: 1.5; }
.dk-demo-band strong { font-weight: 800; letter-spacing: .04em; }
.dk-demo-mode { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dk-demo-foot { max-width: 1280px; margin: 0 auto; padding: 24px 32px 40px; font-size: 11.5px; color: var(--dk-gray); border-top: 1px solid var(--dk-border); }

/* Composición: 3 columnas sobre una línea base común */
.dk-asesor { max-width: 1280px; margin: 0 auto; padding: 72px 32px 80px; }
.dk-asesor__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr) minmax(0, .9fr); column-gap: 52px; row-gap: 40px; align-items: stretch; }

/* Columna izquierda */
.dk-asesor__intro { display: flex; flex-direction: column; padding-top: var(--panel-pad); }
.dk-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--dk-navy); }
.dk-kicker::before { content: ""; width: 28px; height: 2px; background: var(--dk-rose); }
.dk-title { margin: 0 0 20px; font: 500 clamp(40px, 3.7vw, 54px)/1.02 var(--serif); letter-spacing: -.02em; color: var(--dk-navy); text-wrap: balance; }
.dk-title em { display: block; margin-top: 4px; font-style: italic; font-weight: 500; color: var(--dk-rose-text); }
.dk-title--sm { font-size: clamp(32px, 3vw, 42px); }
.dk-title--sm em { display: inline; margin: 0; }
.dk-lead { max-width: 34ch; margin: 0 0 36px; font-size: 15.5px; line-height: 1.7; color: var(--dk-ink); }
.dk-steps { list-style: none; margin: 0; padding: 0; }
.dk-steps li { display: grid; grid-template-columns: 36px 1fr; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--dk-border); font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--dk-navy); }
.dk-steps li:last-child { border-bottom: 1px solid var(--dk-border); }
.dk-steps span { font: 500 22px/1 var(--serif); color: var(--dk-rose-text); }
.dk-fineprint { margin: auto 0 0; padding-top: 26px; font-size: 11.5px; line-height: 1.55; color: var(--dk-gray); }

/* Columna central: cuestionario */
.dk-asesor__quiz { display: flex; min-width: 0; }
.dk-quiz { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--dk-white); border: 1px solid var(--dk-border); border-top: 3px solid var(--dk-navy); padding: var(--panel-pad) 34px 28px; }
.dk-quiz__progress { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.dk-pill { flex: none; padding: 5px 10px; border-radius: 2px; background: var(--dk-ice); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-navy); }
.dk-bar { flex: 1; height: 2px; background: var(--dk-border); overflow: hidden; }
.dk-bar__fill { height: 100%; width: 33.33%; background: var(--dk-navy); transition: width .5s ease; }
.dk-quiz__question { margin: 0 0 22px; font: 600 31px/1.12 var(--serif); letter-spacing: -.01em; color: var(--dk-navy); outline: none; }
.dk-quiz__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dk-quiz__options.is-entering { animation: dk-fade .35s ease; }
@keyframes dk-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dk-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; text-align: left; padding: 14px 16px 14px 18px; background: var(--dk-white); border: 1px solid var(--dk-border); border-radius: 0; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--dk-navy); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.dk-option:hover { border-color: var(--dk-navy); }
.dk-option:focus-visible { outline: 2px solid var(--dk-navy); outline-offset: 2px; }
.dk-option[aria-checked="true"] { border-color: var(--dk-rose-text); background: var(--dk-rose-tint); box-shadow: inset 3px 0 0 var(--dk-rose); }
.dk-option__mark { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--dk-border); display: grid; place-items: center; transition: border-color .2s; }
.dk-option:hover .dk-option__mark { border-color: var(--dk-navy); }
.dk-option[aria-checked="true"] .dk-option__mark { border-color: var(--dk-rose-text); }
.dk-option[aria-checked="true"] .dk-option__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dk-rose-text); }
.dk-quiz__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: auto; padding-top: 28px; }
.dk-quiz__nav::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
.dk-btn { white-space: nowrap; border: 1.25px solid transparent; border-radius: 2px; padding: 13px 22px; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: none; transition: background-color .2s, border-color .2s, color .2s, opacity .2s; }
.dk-btn:focus-visible { outline: 2px solid var(--dk-navy); outline-offset: 2px; }
.dk-btn--primary { margin-left: auto; background: var(--dk-navy); color: var(--dk-white); }
.dk-btn--primary:hover:not(:disabled) { background: var(--dk-blue); }
.dk-btn--primary:disabled { opacity: .3; cursor: not-allowed; }
.dk-btn--ghost { border-color: var(--dk-blue); color: var(--dk-blue); background: var(--dk-white); }
.dk-btn--ghost:hover { background: var(--dk-ice); }
.dk-btn--ghost:disabled { display: none; }
.dk-btn--link { order: 3; flex: 0 0 auto; margin: 6px auto 0; padding: 0 0 2px; border: 0; border-bottom: 1.25px solid var(--dk-navy); border-radius: 0; font-size: 10px; color: var(--dk-navy); }
.dk-btn--link:hover { color: var(--dk-rose-text); border-bottom-color: var(--dk-rose); }

/* Columna derecha: carrusel (blanco, sin beige) */
.dk-asesor__carousel { display: flex; min-width: 0; }
.dk-car { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--dk-border); background: var(--dk-white); padding: var(--panel-pad) 22px 20px; }
.dk-car__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; min-height: 18px; }
.dk-car__context { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-navy); }
.dk-car__count { margin: 0; font-size: 11px; color: var(--dk-gray); white-space: nowrap; }
.dk-car__viewport { position: relative; overflow: hidden; background: var(--dk-white); border: 1px solid var(--dk-border); touch-action: pan-y; }
.dk-car__track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.dk-car__slide { flex: 0 0 100%; min-width: 0; }
.dk-car__img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; background: var(--dk-white); }
.dk-car__body { padding: 14px 16px 16px; border-top: 1px solid var(--dk-border); }
.dk-car__name { margin: 0 0 10px; font: 600 19px/1.2 var(--serif); color: var(--dk-navy); min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-car__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dk-link { color: var(--dk-navy); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding-bottom: 2px; border-bottom: 1.25px solid var(--dk-navy); transition: color .2s, border-color .2s; }
.dk-link:hover { color: var(--dk-rose-text); border-bottom-color: var(--dk-rose); }
.dk-tag { color: var(--dk-gray); font-size: 10.5px; text-align: right; }
.dk-car__empty { margin: 0; padding: 56px 24px; text-align: center; color: var(--dk-gray); font-size: 14px; }
.dk-car__controls { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }
.dk-car__btn { width: 32px; height: 32px; border-radius: 50%; border: 1.25px solid var(--dk-border); background: var(--dk-white); cursor: pointer; font-size: 15px; line-height: 1; color: var(--dk-navy); flex: none; transition: border-color .2s, background-color .2s; }
.dk-car__btn:hover:not(:disabled) { border-color: var(--dk-navy); }
.dk-car__btn:disabled { opacity: .35; cursor: default; }
.dk-car__btn:focus-visible { outline: 2px solid var(--dk-navy); outline-offset: 2px; }
#dkCarToggle { font-size: 9px; letter-spacing: -1px; }
.dk-car__dots { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 4px; overflow: hidden; }
.dk-car__dot { flex: none; width: 4px; height: 4px; padding: 0; border: 0; border-radius: 50%; background: var(--dk-border); cursor: pointer; transition: width .3s, background-color .3s; }
.dk-car__dot[aria-selected="true"] { background: var(--dk-rose); width: 14px; border-radius: 2px; }

/* Resultados */
.dk-results { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--dk-border); }
.dk-results__head { max-width: 720px; margin-bottom: 30px; }
.dk-results__head .dk-title { margin-bottom: 16px; }
.dk-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.dk-chips li { padding: 5px 12px; border: 1px solid var(--dk-border); border-radius: 2px; font-size: 12.5px; font-weight: 600; color: var(--dk-navy); background: var(--dk-white); }
.dk-chips b { font: 600 15px var(--serif); font-variant-numeric: lining-nums; color: var(--dk-rose-text); margin-right: 6px; }
.dk-notes p { margin: 0 0 8px; padding: 10px 14px; border-left: 2px solid var(--dk-rose); background: var(--dk-ice); font-size: 13px; line-height: 1.55; color: var(--dk-ink); }
.dk-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.dk-card { display: flex; flex-direction: column; border: 1px solid var(--dk-border); overflow: hidden; background: var(--dk-white); transition: border-color .25s; }
.dk-card:hover { border-color: var(--dk-navy); }
.dk-card__img { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; background: var(--dk-white); border-bottom: 1px solid var(--dk-border); }
.dk-card__body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; flex: 1; }
.dk-card__name { margin: 0; font: 600 19px/1.2 var(--serif); color: var(--dk-navy); }
.dk-card__price { font-size: 14px; font-weight: 700; color: var(--dk-navy); }
.dk-card__price--pending { font-weight: 400; font-size: 11.5px; line-height: 1.5; color: var(--dk-gray); }
.dk-card__cta { margin-top: auto; align-self: flex-start; }
.dk-empty { padding: 36px; border: 1px dashed var(--dk-border); text-align: center; color: var(--dk-gray); grid-column: 1 / -1; }

/* Tablet: intro arriba (título | texto), cuestionario + carrusel */
@media (max-width: 1100px) {
  .dk-asesor { padding: 56px 28px 64px; }
  .dk-asesor__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .dk-asesor__intro { grid-column: 1 / -1; padding-top: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .dk-asesor__intro .dk-kicker { grid-column: 1 / -1; }
  .dk-title { margin-bottom: 0; }
  .dk-lead { margin: 0; }
  .dk-steps { display: none; }
  .dk-fineprint { grid-column: 2; margin: 0; padding-top: 12px; }
  .dk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* Móvil: una columna */
@media (max-width: 720px) {
  :root { --panel-pad: 22px; }
  .dk-asesor { padding: 36px 16px 48px; }
  .dk-demo-band, .dk-demo-foot { padding-left: 16px; padding-right: 16px; }
  .dk-asesor__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .dk-asesor__intro { display: flex; align-items: stretch; }
  .dk-kicker { margin-bottom: 16px; }
  .dk-title { margin-bottom: 14px; }
  .dk-lead { margin-bottom: 0; }
  .dk-fineprint { padding-top: 14px; }
  .dk-quiz { padding: var(--panel-pad) 18px 22px; }
  .dk-quiz__question { font-size: 27px; }
  .dk-car { padding: var(--panel-pad) 16px 18px; }
  .dk-quiz__options { grid-template-columns: 1fr; }
  .dk-btn--primary { flex: 1 0 100%; order: -1; margin-left: 0; }
  .dk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dk-card__body { padding: 12px; }
  .dk-card__name { font-size: 17px; }
  .dk-results { margin-top: 48px; padding-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .dk-car__track, .dk-bar__fill, .dk-car__dot { transition: none; }
  .dk-quiz__options.is-entering { animation: none; }
}

/* ===== V3.1 PRUEBA — estados de producto ===== */
.dk-badge { display: inline-block; padding: 3px 8px; border-radius: 2px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; background: var(--dk-ice); color: var(--dk-navy); }
.dk-badge--exclusivo { background: var(--dk-navy); color: var(--dk-white); }
.dk-badge--sinstock { background: var(--dk-white); color: var(--dk-gray); border: 1px solid var(--dk-border); }
.dk-badge--curso { background: var(--dk-rose-tint); color: var(--dk-navy); }
.dk-card__media { position: relative; }
.dk-card__badge { position: absolute; top: 10px; left: 10px; }
.dk-card.is-agotado .dk-card__img, .dk-car__slide.is-agotado .dk-car__img { opacity: .55; filter: grayscale(.6); }
.dk-card__nota { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--dk-gray); }
.dk-car__meta .dk-badge { white-space: nowrap; }
.dk-car__name { font-size: 18px; line-height: 1.2; -webkit-line-clamp: 3; min-height: 3.6em; }
.dk-card__name { min-height: 3.6em; }
.dk-vertodos { display: block; margin: 28px auto 0; }
.dk-vertodos[hidden] { display: none; }

/* ===== V3.1 PRUEBA — acciones de tarjeta ===== */
.dk-card__actions { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; }
.dk-card__buy { display: block; align-self: stretch; width: 100%; margin-top: 14px; padding: 13px 16px; border: 0; border-radius: 2px;
  background: var(--dk-navy); color: var(--dk-white); font: 800 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s; }
.dk-card__buy:hover:not(.is-disabled) { background: var(--dk-blue); }
.dk-card__buy:focus-visible { outline: 2px solid var(--dk-navy); outline-offset: 2px; }
.dk-card__buy.is-disabled, .dk-card__buy:disabled { background: var(--dk-border); color: var(--dk-gray); cursor: not-allowed; }
.dk-card__aviso { margin: 10px 0 0; font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--dk-navy); }
.dk-card__registro { margin-top: 8px; }
.dk-card__status { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--dk-gray); }
.dk-card__status:empty { display: none; }