/* ==========================================================================
   Asesor DK — PROPUESTA VISUAL PREMIUM V3.2 COMPACTA
   Ajuste visual sobre V3.2 (reduce escala real ~12%, sin transform:scale ni zoom
   global): tamaños, paddings, tipografías y ancho máximo reales más chicos.
   No cambia marcado, JS, árbol, estados, permisos ni carrito: solo presentación.
   Misma paleta verificada que V3.2 (ver asesor.css):
     --dk-navy #102B4C · --dk-blue #123B78 · --dk-ink #27384B · --dk-gray #5F6772 · --dk-border #D7DEE5
     --dk-rose #D996A8 · --dk-rose-text #A76F73 · blanco #FFF
     blanco cálido del sitio: #FBF6ED (section.hero, header.utility) y #F8F5EF (--ivory, body)
   ========================================================================== */
:root {
  --v32-warm: #FBF6ED;          /* section.hero de dkinsumos.com */
  --v32-ivory: #F8F5EF;         /* --ivory / body de dkinsumos.com */
  --v32-rose-08: rgba(217, 150, 168, .08);
  --v32-rose-14: rgba(217, 150, 168, .14);
  --v32-rose-22: rgba(217, 150, 168, .22);
  --v32-rose-40: rgba(217, 150, 168, .40);
  --v32-navy-08: rgba(16, 43, 76, .08);
  --v32-shadow: 0 1px 2px rgba(16, 43, 76, .05), 0 18px 40px -22px rgba(16, 43, 76, .28);
  --v32-shadow-soft: 0 10px 28px -20px rgba(16, 43, 76, .35);
  --v32-radius: 6px;
  --v32-ease: cubic-bezier(.22, .61, .36, 1);
}

html, body { overflow-x: clip; }
body { background: var(--v32-warm); }

/* ---- Escenario: banda rosa suave detrás de un único bloque de tres zonas ----
   Ancho máximo reducido (1320 → 1180, -10.6%) y centrado explícito para dejar
   márgenes laterales equilibrados en pantallas grandes. */
.dk-asesor { position: relative; max-width: 1180px; margin: 0 auto; padding: 48px 28px 60px; }
.dk-asesor::before {
  content: ""; position: absolute; z-index: 0; left: 50%; transform: translateX(-50%);
  top: 0; width: 100vw; height: 360px;
  background: linear-gradient(180deg, var(--v32-rose-22) 0%, var(--v32-rose-08) 70%, rgba(217, 150, 168, 0) 100%);
  pointer-events: none;
}
.dk-asesor > * { position: relative; z-index: 1; }
.dk-asesor__grid {
  column-gap: 0; row-gap: 0;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.42fr) minmax(0, .95fr);
  background: var(--dk-white); border-radius: var(--v32-radius); overflow: hidden;
  box-shadow: var(--v32-shadow); border: 1px solid rgba(215, 222, 229, .7);
}

/* ---- Zona 1: introducción editorial (rosa suave) ---- */
.dk-asesor__intro {
  position: relative; padding: 38px 32px 30px; overflow: hidden;
  background: linear-gradient(160deg, var(--v32-rose-22) 0%, var(--v32-rose-08) 55%, var(--v32-ivory) 100%);
}
.dk-asesor__intro::after { /* halo decorativo, sin texto */
  content: ""; position: absolute; right: -78px; bottom: -96px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--v32-rose-40), rgba(217, 150, 168, 0) 70%);
  pointer-events: none;
}
.dk-asesor__intro > * { position: relative; z-index: 1; }
.dk-kicker { margin-bottom: 20px; }
.dk-title { font-size: clamp(32px, 2.9vw, 42px); line-height: 1.04; margin-bottom: 18px; }
.dk-title em { margin-top: 6px; }
.dk-lead { font-size: 14.5px; color: var(--dk-ink); margin-bottom: 24px; max-width: 30ch; }
.dk-steps { counter-reset: none; }
.dk-steps li { border-top-color: var(--v32-rose-40); padding: 11px 0; font-size: 12.5px; }
.dk-steps li:last-child { border-bottom-color: var(--v32-rose-40); }
.dk-steps span { font-size: 22px; font-style: italic; }
.dk-fineprint { padding-top: 18px; color: var(--dk-gray); }

/* ---- Zona 2: cuestionario con protagonismo ---- */
.dk-asesor__quiz { background: var(--dk-white); }
.dk-quiz { border: 0; border-top: 0; padding: 34px 32px 26px; position: relative; }
.dk-quiz::before { /* acento superior */
  content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 3px; background: var(--dk-navy); border-radius: 0 0 2px 2px;
}
.dk-quiz__progress { margin-bottom: 20px; }
.dk-pill { background: var(--v32-rose-14); color: var(--dk-navy); border-radius: 20px; padding: 5px 10px; }
.dk-bar { height: 3px; border-radius: 4px; background: var(--v32-navy-08); }
.dk-bar__fill { border-radius: 4px; background: linear-gradient(90deg, var(--dk-navy) 0%, var(--dk-blue) 60%, var(--dk-rose) 100%); transition: width .6s var(--v32-ease); }
.dk-quiz__question { font-size: clamp(24px, 2.1vw, 29px); margin-bottom: 18px; }
.dk-quiz__options { counter-reset: dkopt; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dk-option > span:first-child { min-width: 0; }
.dk-option {
  counter-increment: dkopt; position: relative; min-height: 52px; padding: 10px 12px 10px 48px;
  border-radius: var(--v32-radius); border-color: var(--dk-border); font-size: 13.5px;
  transition: border-color .2s, background-color .2s, box-shadow .25s var(--v32-ease), transform .25s var(--v32-ease);
}
.dk-option::before { /* índice A, B, C… generado por CSS (sin texto nuevo en el árbol) */
  content: counter(dkopt, upper-alpha); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 600 13.5px/1 var(--serif); color: var(--dk-navy); background: var(--v32-ivory); border: 1px solid var(--dk-border);
  transition: background-color .2s, color .2s, border-color .2s;
}
.dk-option:hover { border-color: var(--dk-navy); transform: translateY(-1px); box-shadow: var(--v32-shadow-soft); }
.dk-option[aria-checked="true"] { border-color: var(--dk-navy); background: var(--v32-rose-08); box-shadow: inset 3px 0 0 var(--dk-rose), var(--v32-shadow-soft); }
.dk-option[aria-checked="true"]::before { background: var(--dk-navy); color: var(--dk-white); border-color: var(--dk-navy); }
.dk-option[aria-checked="true"] .dk-option__mark::after { animation: v32-pop .28s var(--v32-ease); }
@keyframes v32-pop { from { transform: scale(.2); } to { transform: scale(1); } }
.dk-quiz__nav { padding-top: 20px; }
.dk-btn { padding: 11px 18px; border-radius: 3px; }
.dk-btn--primary { transition: background-color .2s, transform .2s var(--v32-ease), box-shadow .2s; }
.dk-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--v32-shadow-soft); }

/* ---- Zona 3: carrusel con imagen grande ---- */
.dk-asesor__carousel { background: var(--v32-ivory); }
.dk-car { border: 0; background: transparent; padding: 30px 22px 20px; }
.dk-car__head { margin-bottom: 12px; }
.dk-car__viewport { border: 0; border-radius: var(--v32-radius); background: var(--dk-white); box-shadow: var(--v32-shadow-soft);
  flex: 1 1 auto; position: relative; min-height: 360px; }
.dk-car__track { position: absolute; inset: 0; }
.dk-car__slide { display: flex; flex-direction: column; height: 100%; }
.dk-car__img { flex: 10 1 0; aspect-ratio: auto; height: 0; min-height: 0; max-height: 340px; padding: 0; object-fit: cover; background: var(--dk-white); }
.dk-car__slide .dk-car__body { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; }
.dk-car__body { border-top: 0; padding: 13px 16px 16px; }
.dk-car__name { font-size: 17px; }
.dk-car__slide .dk-car__img { transition: transform .9s var(--v32-ease); }
.dk-car__slide[aria-hidden="false"] .dk-car__img { transform: scale(1.02); }
.dk-car__dot[aria-selected="true"] { width: 16px; }

/* ---- Resultados y tarjetas ---- */
.dk-results { margin-top: 52px; padding: 36px 32px 32px; border-top: 0; background: var(--dk-white); border-radius: var(--v32-radius); box-shadow: var(--v32-shadow); scroll-margin-top: 60px; }
.dk-results__head { margin-bottom: 24px; }
.dk-chips li { border-radius: 20px; background: var(--v32-ivory); border-color: transparent; }
.dk-notes p { border-radius: 0 4px 4px 0; background: var(--v32-rose-08); border-left-color: var(--dk-rose); }
.dk-cards { gap: 18px; }
.dk-card {
  border: 1px solid rgba(215, 222, 229, .8); border-radius: var(--v32-radius); background: var(--dk-white);
  transition: transform .3s var(--v32-ease), box-shadow .3s var(--v32-ease), border-color .3s;
  animation: v32-rise .5s var(--v32-ease) both;
}
.dk-card:hover { transform: translateY(-3px); box-shadow: var(--v32-shadow); border-color: var(--dk-border); }
.dk-card__media { background: var(--v32-ivory); overflow: hidden; }
.dk-card__img { border-bottom: 0; background: transparent; mix-blend-mode: multiply; transition: transform .6s var(--v32-ease); }
.dk-card:hover .dk-card__img { transform: scale(1.04); }
.dk-card__body { padding: 14px 16px 16px; gap: 7px; }
.dk-card__name { font-size: 17px; }
.dk-card__buy { border-radius: 3px; padding: 12px 14px; transition: background-color .2s, transform .2s var(--v32-ease), box-shadow .2s; }
.dk-card__buy:not(.is-disabled):not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--v32-shadow-soft); }
.dk-card__buy:not(.is-disabled):not(:disabled):active { transform: translateY(0); box-shadow: none; }
.dk-badge { border-radius: 10px; padding: 3px 9px; max-width: calc(100% - 20px); }
.dk-card__aviso { padding: 7px 9px; margin-top: 8px; background: var(--v32-rose-08); border-radius: 3px; }
@keyframes v32-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dk-card:nth-child(2) { animation-delay: .04s; } .dk-card:nth-child(3) { animation-delay: .08s; }
.dk-card:nth-child(4) { animation-delay: .12s; } .dk-card:nth-child(5) { animation-delay: .16s; }
.dk-card:nth-child(6) { animation-delay: .2s; } .dk-card:nth-child(n+7) { animation-delay: .24s; }
.dk-vertodos { border-radius: 3px; }
.dk-demo-foot { border-top: 0; }

/* ---- Tablet ---- */
@media (max-width: 1100px) {
  .dk-asesor { padding: 34px 20px 48px; }
  .dk-asesor__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .dk-asesor__intro { padding: 28px 28px 22px; }
  .dk-quiz { padding: 28px 24px 22px; }
  .dk-quiz::before { left: 24px; right: 24px; }
  .dk-quiz__options { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .dk-option { min-height: 48px; }
  .dk-car { padding: 26px 18px 18px; }
  .dk-results { padding: 28px 20px; }
}

/* ---- Móvil ---- */
@media (max-width: 720px) {
  .dk-asesor { padding: 16px 10px 32px; }
  .dk-asesor::before { height: 280px; }
  .dk-asesor__grid { grid-template-columns: minmax(0, 1fr); }
  .dk-asesor__intro { padding: 22px 18px 18px; grid-column: auto; }
  .dk-asesor__intro::after { width: 150px; height: 150px; right: -60px; bottom: -66px; }
  .dk-title { font-size: 32px; }
  .dk-quiz { padding: 22px 16px 18px; }
  .dk-quiz::before { left: 16px; right: 16px; }
  .dk-quiz__options { grid-template-columns: minmax(0, 1fr); }
  .dk-option { min-height: 50px; padding-left: 46px; }
  .dk-option::before { left: 10px; }

  /* CONTROL DE VISIBILIDAD UX MOVIL DEL CARRUSEL (ORDEN-IA-038, Anti):
     mientras el usuario responde el cuestionario, el carrusel de productos
     permanece oculto. Al completar el cuestionario y pedir "VER MIS OPCIONES"
     se hace visible. No cambia arbol, permisos, precios ni carrito. */
  .dk-asesor:not(.has-results) .dk-asesor__carousel { display: none !important; }
  .dk-asesor.has-results .dk-asesor__carousel { display: flex !important; padding: 18px 12px 16px; }

  .dk-car { padding: 20px 14px 16px; }
  .dk-car__viewport { min-height: 0; }
  .dk-car__track { position: static; }
  .dk-car__slide { height: auto; }
  .dk-car__img { flex: none; aspect-ratio: 1 / 1; height: auto; min-height: 0; }
  .dk-results { margin-top: 28px; padding: 22px 12px; }
  .dk-cards { gap: 10px; }
  .dk-card__body { padding: 10px; }
  .dk-card__name { font-size: 15.5px; }
}

/* ---- Accesibilidad: sin movimiento si el usuario lo pide ---- */
@media (prefers-reduced-motion: reduce) {
  .dk-option, .dk-card, .dk-card__img, .dk-car__img, .dk-btn--primary, .dk-card__buy { transition: none !important; }
  .dk-card, .dk-option[aria-checked="true"] .dk-option__mark::after { animation: none !important; }
  .dk-option:hover, .dk-card:hover, .dk-card:hover .dk-card__img, .dk-car__slide[aria-hidden="false"] .dk-car__img { transform: none !important; }
}