/* Configurador de producto — frontend.
   Maqueta según el demo aprobado de /badezuber/, con las variables del
   sistema de diseño delmare. Ningún contenido va aquí: todo lo que se
   ve sale del esquema que el cliente define en el asistente. */

.dm-konf{
  --brand:#B82105; --brand-deep:#8A2A1A; --brand-soft:rgba(184,33,5,.06);
  --ink:#1A202C; --ink-soft:#4A5568; --ink-muted:#9AA3B0;
  --surface:#fff; --surface-alt:#F4F6F9; --surface-media:#EEF1F5;
  --line:rgba(26,32,44,.13); --line-soft:rgba(26,32,44,.07); --line-strong:rgba(26,32,44,.22);
  --radius-card:18px; --radius-pill:100px; --radius-sm:8px; --radius-tile:16px;
  --shadow-card:0 24px 60px -28px rgba(26,32,44,.28);
  --shadow-btn:0 12px 26px -14px rgba(184,33,5,.62);
  --shadow-btn-h:0 18px 34px -14px rgba(184,33,5,.78);
  --ease:cubic-bezier(.22,1,.36,1);

  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--ink); line-height:1.65;
  font-size:clamp(15px,.55vw + 13px,17px);

  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,52px); align-items:start;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:clamp(22px,2.6vw,38px);
}
.dm-konf *{box-sizing:border-box}

/* ---------- columna izquierda: galería e identidad ---------- */
.dm-konf__left{position:sticky;top:24px;min-width:0}
/* La imagen se muestra entera: «contain» en vez de «cover». Recortar
   un Badezuber por los lados oculta justo lo que el cliente compara. */
.dm-konf .dm-gal__main{position:relative;margin:0;border-radius:var(--radius-tile);
  overflow:hidden;background:var(--surface-media);aspect-ratio:4/3}
.dm-konf .dm-gal__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;opacity:0;transition:opacity .25s var(--ease)}
.dm-konf .dm-gal__img.is-on{opacity:1;position:relative}
.dm-konf .dm-gal__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.dm-konf .dm-gal__t{width:72px;height:72px;padding:0;border:1.5px solid var(--line);
  border-radius:12px;overflow:hidden;background:var(--surface-media);cursor:pointer;
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.dm-konf .dm-gal__t img{width:100%;height:100%;object-fit:cover;display:block}
.dm-konf .dm-gal__t:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.dm-konf .dm-gal__t.is-on{border-color:var(--brand)}

.dm-konf__ident{margin-top:clamp(20px,2.4vw,30px)}
.dm-konf__cat{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--brand);margin:0 0 8px}
.dm-konf__name{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.015em;
  line-height:1.1;font-size:clamp(1.8rem,3vw,2.4rem);margin:0 0 8px;color:var(--ink)}
.dm-konf__from{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.3rem,2.1vw,1.7rem);margin:0;display:flex;align-items:baseline;gap:.4rem}
.dm-konf__from span{font-family:"Hanken Grotesk",sans-serif;font-size:.86rem;font-weight:500;color:var(--ink-soft)}

/* ---------- columna derecha: pasos ---------- */
.dm-konf__right{min-width:0;display:flex;flex-direction:column}
.dm-konf__noscript{color:var(--ink-soft)}

.dm-konf__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px}
.dm-konf__count{font-size:.94rem;color:var(--ink-muted);white-space:nowrap}
.dm-konf__running{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1;white-space:nowrap;
  font-variant-numeric:tabular-nums}

.dm-konf__bar{height:4px;background:var(--line-soft);border-radius:100px;overflow:hidden;
  margin-bottom:clamp(20px,2.4vw,30px)}
.dm-konf__bar i{display:block;height:100%;background:var(--brand);border-radius:100px;
  transition:width .55s var(--ease)}

.dm-konf__q{font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.5;color:var(--ink-soft);
  margin:0 0 clamp(16px,2vw,22px);letter-spacing:0}

/* ---------- opciones ---------- */
/* Rejilla adaptable: dos columnas cuando hay sitio, una cuando no.
   Es lo que hace que la lista no se estire de arriba abajo en pantallas
   anchas y siga siendo legible en móvil. */
.dm-konf__opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.dm-konf__opts--grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.dm-konf .dm-opt{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:14px !important;cursor:pointer;text-align:left;
  width:100%;font:inherit;color:inherit;box-shadow:none;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease)}
.dm-opt:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.dm-opt.is-on{border-color:var(--brand);background:var(--brand-soft)}

.dm-konf .dm-opt__fig{position:relative;flex:none;width:50px;height:50px;border-radius:10px;
  overflow:visible;background:var(--surface-media)}
.dm-konf .dm-opt__fig img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;
  border:1px solid var(--line-soft)}
.dm-opt__fig--empty{background:var(--surface-media);border-radius:11px;border:1px solid var(--line-soft)}
/* La marca de selección se apoya sobre la esquina de la miniatura. */
.dm-konf .dm-opt__badge{position:absolute;top:-7px;left:-7px;width:22px;height:22px;border-radius:50% !important;
  background:var(--brand);display:none;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.dm-opt.is-on .dm-opt__badge{display:grid}
.dm-opt__badge svg{width:12px;height:12px;display:block}

.dm-opt__txt{flex:1;min-width:0}
.dm-konf .dm-opt__title{display:block;font-size:.98rem;font-weight:600;line-height:1.3;color:var(--ink)}
.dm-konf .dm-opt__short{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.4;margin-top:1px;
  /* Dos líneas como máximo: con dos columnas evita que unas filas
     queden mucho más altas que otras. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-konf .dm-opt__price{display:block;font-size:.88rem;color:var(--ink-soft);margin-top:2px;font-weight:600}
/* Elegida: el texto entero pasa al color de marca. */
.dm-opt.is-on .dm-opt__title,
.dm-opt.is-on .dm-opt__short,
.dm-opt.is-on .dm-opt__price{color:var(--brand)}

/* El «i» es un círculo. El radio va con !important porque casi todos
   los temas fijan un border-radius propio para «button». */
.dm-konf .dm-opt__i,.dm-konf button.dm-opt__i{
  flex:none;width:30px;height:30px;min-width:30px;min-height:30px;
  border-radius:50% !important;border:1.5px solid var(--brand) !important;
  background:transparent;color:var(--brand);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:Fraunces,Georgia,serif;font-size:.88rem;font-weight:600;line-height:1;
  padding:0 !important;margin:0;box-shadow:none;text-transform:none;
  -webkit-appearance:none;appearance:none;
  transition:background .45s var(--ease)}
.dm-konf .dm-opt__i:hover,.dm-konf button.dm-opt__i:hover{background:var(--brand-soft)}

/* ---------- navegación ---------- */
.dm-konf__nav{display:flex;gap:12px;align-items:center;margin-top:clamp(22px,2.6vw,32px)}
.dm-konf__nav .sp{flex:1}

/* ---------- sistema de botones ----------
   Un único botón para todo el plugin: píldora, sin transformaciones de
   texto y sin sombras del tema. El radio y el «appearance» llevan
   !important porque los temas y Elementor fijan reglas propias para
   «button» y «a» que ganan por especificidad de elemento. */
.dm-konf .dm-btn,.dm-konf a.dm-btn,.dm-konf button.dm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.2;
  padding:13px 28px !important;border-radius:100px !important;
  border:1px solid transparent !important;
  -webkit-appearance:none !important;appearance:none !important;
  background-image:none;text-transform:none;letter-spacing:0;text-decoration:none;
  cursor:pointer;width:auto;min-height:0;min-width:0;margin:0;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),
    transform .45s var(--ease),box-shadow .45s var(--ease)}
.dm-konf .dm-btn svg{width:16px;height:16px;flex:none}

.dm-konf .dm-btn--primary,.dm-konf a.dm-btn--primary,.dm-konf button.dm-btn--primary{
  background-color:var(--brand);color:#fff;box-shadow:var(--shadow-btn)}
.dm-konf .dm-btn--primary:hover,.dm-konf a.dm-btn--primary:hover,
.dm-konf button.dm-btn--primary:hover{
  background-color:var(--brand-deep);color:#fff;
  transform:translateY(-2px);box-shadow:var(--shadow-btn-h)}

.dm-konf .dm-btn--ghost,.dm-konf a.dm-btn--ghost,.dm-konf button.dm-btn--ghost{
  background-color:var(--surface);color:var(--ink);
  border-color:var(--line) !important;box-shadow:none}
.dm-konf .dm-btn--ghost:hover,.dm-konf button.dm-btn--ghost:hover{
  border-color:var(--line-strong) !important;transform:translateY(-2px)}

.dm-konf .dm-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none}

/* ---------- paso final: resumen ---------- */
.dm-sum{display:flex;flex-direction:column}
.dm-sum__r{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.dm-sum__r img,.dm-sum__ph{width:52px;height:52px;flex:none;border-radius:11px;object-fit:cover;
  background:var(--surface-media);border:1px solid var(--line-soft)}
.dm-sum__k{flex:0 0 34%;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);font-weight:500;min-width:0}
.dm-sum__v{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem}
.dm-sum__v b{font-weight:600}
.dm-sum__v span{font-weight:600;font-variant-numeric:tabular-nums}
.dm-sum__total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:14px;padding-top:18px;border-top:2px solid var(--ink)}
.dm-sum__total .k{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);font-weight:500}
.dm-sum__total .v{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.7rem,2.8vw,2.2rem);line-height:1;font-variant-numeric:tabular-nums}
.dm-konf__note{font-size:.7rem;font-weight:500;color:var(--ink-soft);margin:8px 0 0}
.dm-konf__qty{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.dm-konf__qtyl{font-size:.9rem;font-weight:600;color:var(--ink)}
.dm-konf__qtyv{font-size:.9rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dm-konf__ok{font-size:.8rem;color:#2F6B4F;font-weight:600;margin:10px 0 0}
.dm-konf__err{font-size:.88rem;color:var(--brand-deep);background:var(--brand-soft);
  border-left:3px solid var(--brand);padding:10px 13px;border-radius:0 8px 8px 0;margin:12px 0 0}

/* ---------- ventana de información ----------
   Se estiliza con selectores propios y radios forzados: la ventana se
   inserta en el «body», fuera de la tarjeta, y ahí manda el tema. */
.dm-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,32px);
  font-family:"Hanken Grotesk",system-ui,sans-serif;line-height:1.6;
  --brand:#B82105;--brand-soft:rgba(184,33,5,.08);--ink:#1A202C;--ink-soft:#4A5568;
  --surface:#fff;--surface-media:#EEF1F5;--surface-alt:#F4F6F9;--ease:cubic-bezier(.22,1,.36,1)}
.dm-modal *{box-sizing:border-box}
.dm-modal__bg{position:absolute;inset:0;background:rgba(26,32,44,.55);border:0;
  padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:0}
.dm-modal__box{position:relative;background:var(--surface);
  border-radius:18px !important;max-width:520px;width:100%;max-height:86vh;
  overflow-y:auto;box-shadow:0 24px 60px -28px rgba(26,32,44,.5);
  padding:clamp(20px,2.6vw,28px);color:var(--ink)}
.dm-modal__h{display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;margin:0 0 16px}
.dm-modal__h h3{font-family:Fraunces,Georgia,serif;font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.2;margin:0;color:var(--ink)}
.dm-modal__x,.dm-modal button.dm-modal__x{
  flex:none;width:32px;height:32px;min-width:32px;padding:0 !important;margin:0;
  border:0 !important;background:transparent;color:var(--ink-soft);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50% !important;-webkit-appearance:none;appearance:none;box-shadow:none;
  transition:background .45s var(--ease)}
.dm-modal__x:hover{background:var(--surface-alt);color:var(--ink)}
.dm-modal__x svg{width:18px;height:18px;display:block}
.dm-modal__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:12px !important;background:var(--surface-media);margin:0 0 16px}
.dm-modal__p{color:var(--ink-soft);margin:0 0 16px;font-size:.98rem}
.dm-modal__tag{display:inline-block;font-size:.94rem;font-weight:700;
  padding:9px 16px;border-radius:10px !important;
  background:var(--brand-soft);color:var(--brand)}

@media (max-width:900px){
  .dm-konf{grid-template-columns:1fr;gap:26px}
  .dm-konf__left{position:static}
  .dm-konf__opts--grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.dm-konf *,.dm-modal *{transition-duration:.01ms!important}}

/* --- cantidad por opción --- */
.dm-opt__qty{display:inline-flex;align-items:center;gap:6px;margin-top:6px}
/* Blindado contra los estilos de botón del tema: tamaño, color y forma
   fijos, sin fondo de marca ni al pasar ni al pulsar. */
.dm-konf .dm-opt__qty button{width:24px !important;height:24px !important;min-height:0 !important;padding:0 !important;
  border-radius:50% !important;border:1px solid var(--line-strong) !important;background:#fff !important;
  color:var(--ink) !important;font:inherit !important;font-size:.9rem !important;line-height:1 !important;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:none !important;transform:none !important}
.dm-konf .dm-opt__qty button:hover,.dm-konf .dm-opt__qty button:focus,.dm-konf .dm-opt__qty button:active{
  background:#fff !important;border-color:var(--brand) !important;color:var(--brand) !important;outline:none}
.dm-konf .dm-opt__qty button[disabled]{opacity:.35 !important;cursor:default;border-color:var(--line) !important;color:var(--ink) !important}
.dm-opt__qty b{min-width:18px;text-align:center;font-size:.92rem;font-variant-numeric:tabular-nums}
.dm-opt__qty em{font-style:normal;font-size:.8rem;color:var(--ink-soft)}

/* Los botones de navegación no animan transform ni sombra: al repintar
   la columna en cada paso, algunos navegadores dejaban rastros de la
   sombra debajo del botón. La columna va además en su propia capa. */
.dm-konf__right{isolation:isolate}
.dm-konf .dm-konf__nav .dm-btn{transition:background-color .3s,color .3s,border-color .3s}
.dm-konf .dm-konf__nav .dm-btn:hover{transform:none}

/* ---------- tarjetas de opción, versión compacta ----------
   Menos alto, miniatura más pequeña, el «i» discreto en la esquina y
   precio y cantidad en una sola línea. Va al final para ganar a las
   reglas anteriores sin tocarlas. */
.dm-konf__opts{gap:8px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dm-konf .dm-opt{position:relative;align-items:center;gap:10px;padding:9px 34px 9px 11px;border-width:1px;border-radius:12px !important}
.dm-opt:hover{transform:none;border-color:var(--line-strong)}
.dm-opt.is-on{border-width:1px;box-shadow:inset 0 0 0 1px var(--brand)}
.dm-konf .dm-opt__fig{width:40px;height:40px;border-radius:8px}
.dm-konf .dm-opt__fig img,.dm-opt__fig--empty{border-radius:8px}
.dm-konf .dm-opt__badge{top:-6px;left:-6px;width:18px;height:18px}
.dm-opt__badge svg{width:10px;height:10px}
.dm-opt__txt{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:0}
.dm-konf .dm-opt__title{flex-basis:100%;font-size:.92rem;line-height:1.25}
.dm-konf .dm-opt__short{flex-basis:100%;font-size:.78rem;line-height:1.35;margin-top:0;-webkit-line-clamp:1}
.dm-konf .dm-opt__price{font-size:.8rem;margin-top:2px;font-weight:600}
.dm-opt.is-on .dm-opt__title{color:var(--ink)}
.dm-opt.is-on .dm-opt__short{color:var(--ink-soft)}
.dm-opt__qty{margin-top:2px;gap:5px}
.dm-konf .dm-opt__qty button{width:20px !important;height:20px !important;font-size:.8rem !important}
.dm-opt__qty b{font-size:.84rem;min-width:14px}
.dm-opt__qty em{font-size:.76rem}
/* El «i»: pequeño, gris, en la esquina superior derecha; rojo al pasar. */
.dm-konf .dm-opt__i,.dm-konf button.dm-opt__i{position:absolute;top:7px;right:7px;width:18px;height:18px;min-width:18px;min-height:18px;
  border:1px solid var(--line-strong) !important;color:var(--ink-muted);font-size:.7rem;background:var(--surface)}
.dm-konf .dm-opt__i:hover,.dm-konf button.dm-opt__i:hover{border-color:var(--brand) !important;color:var(--brand);background:var(--brand-soft)}
.dm-opt.is-on .dm-opt__i{border-color:var(--brand) !important;color:var(--brand)}