/* ==========================================================
   1. TOKENS DE DISEÑO
   ========================================================== */
.mgcfg{
  --mg-red:        #E4002B;
  --mg-red-dark:   #B80022;
  --panel:         #17181A;   /* panel derecho */
  --panel-soft:    #202225;   /* tarjetas dentro del panel */
  --panel-border:  #33363A;
  --ink:           #FFFFFF;
  --ink-soft:      #B9BDC2;
  --ink-faint:     #7C8187;
  --stage-a:       #A7ACB1;   /* degradado del escenario */
  --stage-b:       #63686D;
  --summary-bg:    #0D0E0F;
  --ok:            #2FBF71;
  --radius:        10px;
  --font: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  background: var(--summary-bg);
}
.mgcfg *, .mgcfg *::before, .mgcfg *::after{ box-sizing: inherit; margin:0; padding:0; }
.mgcfg img, .mgcfg svg{ display:block; max-width:100%; }
.mgcfg button{ font-family: inherit; cursor:pointer; }
.mgcfg :focus-visible{ outline: 2px solid var(--mg-red); outline-offset: 2px; }

/* ==========================================================
   2. LAYOUT PRINCIPAL (escenario + rail + panel)
   ========================================================== */
.mgcfg__top{
  display:grid;
  grid-template-columns: 1fr 56px 340px;
  min-height: 620px;
  height: min(78vh, 760px);
}

/* ---------- Escenario (imagen del vehículo) ---------- */
.mgcfg__stage{
  position:relative;
  background: radial-gradient(120% 140% at 50% 0%, var(--stage-a) 0%, var(--stage-b) 78%);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* La imagen cubre TODO el escenario (full bleed).
   Si prefieres que la foto se vea completa sin recortes en los
   bordes, cambia object-fit:cover por object-fit:contain. */
.mgcfg__stage-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .35s ease;
}
.mgcfg__stage-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.mgcfg__stage-missing{
  background: rgba(0,0,0,.35); color:#fff;
  border:1px dashed rgba(255,255,255,.5); border-radius:12px;
  padding:28px 32px; text-align:center; font-size:14px; line-height:1.7;
  max-width:80%;
}
.mgcfg__stage-missing code{ font-size:12px; color:#FFD3DB; word-break:break-all; }
.mgcfg__stage-media.is-fading{ opacity:0; }
.mgcfg__eyebrow{
  position:absolute; top:20px; left:24px;
  font-size:13px; letter-spacing:.04em; color:#2b2d2f;
  background: rgba(255,255,255,.55);
  padding:6px 12px; border-radius: 99px;
  backdrop-filter: blur(4px);
}
.mgcfg__arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border:none; border-radius:50%;
  background: rgba(255,255,255,.18); color:#fff;
  font-size:20px; line-height:1;
  transition: background .2s;
}
.mgcfg__arrow:hover{ background: rgba(255,255,255,.35); }
.mgcfg__arrow--prev{ left:14px; }
.mgcfg__arrow--next{ right:14px; }
.mgcfg__dots{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px;
}
.mgcfg__dot{
  width:9px; height:9px; border-radius:50%; border:none;
  background: rgba(255,255,255,.45); padding:0;
}
.mgcfg__dot.is-active{ background:#fff; }

/* ---------- Rail de pasos (iconos verticales) ---------- */
.mgcfg__rail{
  background:#0F1011;
  display:flex; flex-direction:column; align-items:stretch;
}
.mgcfg__rail-step{
  position:relative;
  border:none; background:transparent; color:var(--ink-faint);
  height:64px; display:flex; align-items:center; justify-content:center;
  transition: color .2s;
}
.mgcfg__rail-step svg{ width:24px; height:24px; }
.mgcfg__rail-step:hover{ color:var(--ink-soft); }
.mgcfg__rail-step.is-active{ color:#fff; }
.mgcfg__rail-step.is-active::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:3px; background:var(--mg-red); border-radius:0 3px 3px 0;
}
.mgcfg__rail-step.is-done::after{
  content:""; position:absolute; right:9px; top:14px;
  width:7px; height:7px; border-radius:50%;
  background: var(--ok);
}
.mgcfg__rail-spacer{ flex:1; }
.mgcfg__rail-cam{
  border:none; background:transparent; color:var(--ink-faint);
  height:56px; display:flex; align-items:center; justify-content:center;
}
.mgcfg__rail-cam:hover{ color:#fff; }

/* ---------- Panel derecho ---------- */
.mgcfg__panel{
  background: var(--panel);
  display:flex; flex-direction:column;
  border-left:1px solid #000;
}
.mgcfg__panel-scroll{
  flex:1; overflow-y:auto; padding:26px 22px 18px;
  /* Scrollbar oscura (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: #3a3d41 transparent;
}
/* Scrollbar oscura (Chrome / Edge / Safari) */
.mgcfg__panel-scroll::-webkit-scrollbar,
.mgcfg__tabs::-webkit-scrollbar{
  width:8px; height:8px;
}
.mgcfg__panel-scroll::-webkit-scrollbar-track,
.mgcfg__tabs::-webkit-scrollbar-track{
  background: transparent;
}
.mgcfg__panel-scroll::-webkit-scrollbar-thumb,
.mgcfg__tabs::-webkit-scrollbar-thumb{
  background:#3a3d41; border-radius:99px;
}
.mgcfg__panel-scroll::-webkit-scrollbar-thumb:hover,
.mgcfg__tabs::-webkit-scrollbar-thumb:hover{
  background:#565a60;
}
.mgcfg__tabs{ scrollbar-width: thin; scrollbar-color: #3a3d41 transparent; }
.mgcfg__panel h2{
  font-size:24px; font-weight:600; letter-spacing:.01em;
  margin-bottom:6px;
}
.mgcfg__panel-sub{
  font-size:13px; color:var(--ink-faint); margin-bottom:18px;
}
.mgcfg__hint{
  display:none;
  font-size:13px; color:#FFB4C1; background: rgba(228,0,43,.12);
  border:1px solid rgba(228,0,43,.4);
  padding:10px 12px; border-radius:8px; margin-bottom:14px;
}
.mgcfg__hint.is-visible{ display:block; }

/* Tarjeta de opción (versión / opciones) */
.mgcfg__opt{
  width:100%; text-align:left;
  background: var(--panel-soft);
  border:1px solid var(--panel-border);
  border-radius: var(--radius);
  color:var(--ink);
  padding:14px 16px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition: border-color .2s, background .2s;
}
.mgcfg__opt:hover{ border-color:#565a60; }
.mgcfg__opt.is-selected{ border-color:#fff; }
.mgcfg__opt-name{ font-size:15px; font-weight:600; }
.mgcfg__opt-meta{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
.mgcfg__radio{
  flex:none; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--ink-soft); position:relative;
}
.mgcfg__opt.is-selected .mgcfg__radio{ border-color:#fff; }
.mgcfg__opt.is-selected .mgcfg__radio::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:#fff;
}

/* Muestras de color */
.mgcfg__swatch{
  width:100%; border:1px solid var(--panel-border);
  border-radius: var(--radius); overflow:hidden;
  background:transparent; color:var(--ink);
  margin-bottom:12px; text-align:left;
  transition: border-color .2s;
}
.mgcfg__swatch:hover{ border-color:#565a60; }
.mgcfg__swatch.is-selected{ border-color:#fff; }
.mgcfg__swatch-chip{
  height:52px; position:relative;
}
.mgcfg__swatch.is-selected .mgcfg__swatch-chip::after{
  content:""; position:absolute; right:12px; top:50%;
  width:18px; height:18px; transform:translateY(-50%);
  border-radius:50%; border:2px solid rgba(0,0,0,.35);
  background:#fff;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
}
.mgcfg__swatch-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:9px 12px 10px;
}
.mgcfg__swatch-name{ font-size:13.5px; font-weight:600; }
.mgcfg__swatch-tag{ font-size:11px; color:var(--ink-faint); display:block; margin-top:2px; }
.mgcfg__swatch-price{ font-size:13px; color:var(--ink-soft); }

/* Enlace "Siguiente" */
.mgcfg__next{
  margin-top:8px; padding-top:14px;
  border-top:1px solid var(--panel-border);
}
.mgcfg__next button{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--panel-soft); border:1px solid var(--panel-border);
  border-radius:10px; padding:13px 16px;
  color:var(--ink); font-size:14px; font-weight:600;
  transition:border-color .2s, background .2s;
}
.mgcfg__next button:hover{ border-color:#fff; }
.mgcfg__next span{ color:var(--ink-faint); font-weight:400; margin-right:6px; }

/* Botón resumen (abajo del panel) */
.mgcfg__panel-footer{ border-top:1px solid #000; }
.mgcfg__summary-btn{
  width:100%; border:none;
  display:flex; align-items:center; gap:14px;
  background: var(--panel); color:#fff;
  font-size:16px; padding:0;
}
.mgcfg__summary-btn .ico{
  width:52px; height:52px; flex:none;
  background: var(--mg-red);
  display:flex; align-items:center; justify-content:center;
}
.mgcfg__summary-btn:hover{ background:#1e2023; }

/* ==========================================================
   3. SECCIÓN RESUMEN
   ========================================================== */
.mgcfg__summary{
  background: var(--summary-bg);
  padding: 56px clamp(20px, 5vw, 64px) 72px;
}
.mgcfg__summary h2{
  font-size: clamp(24px, 3vw, 32px);
  font-weight:600; margin-bottom:30px;
}
.mgcfg__tabs{
  display:flex; gap: clamp(14px, 3vw, 40px);
  border-bottom:1px solid #2a2d30;
  overflow-x:auto;
}
.mgcfg__tab{
  background:none; border:none; color:var(--ink-faint);
  font-size:14px; padding:12px 4px 14px; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition: color .2s;
}
.mgcfg__tab:hover{ color:var(--ink-soft); }
.mgcfg__tab.is-active{ color:#fff; border-color: var(--mg-red); }
.mgcfg__tabpane{ display:none; padding-top:28px; }
.mgcfg__tabpane.is-active{ display:block; }

/* Tabla de opciones seleccionadas / ficha técnica */
.mgcfg__rows{ max-width: 1100px; }
.mgcfg__row{
  display:flex; justify-content:space-between; gap:20px;
  padding:15px 2px; border-bottom:1px solid #26292c;
  font-size:14.5px;
}
.mgcfg__row dt{ color:var(--ink-soft); font-weight:400; }
.mgcfg__row dd{ text-align:right; }
.mgcfg__row--total{ border-bottom:none; padding-top:20px; }
.mgcfg__row--total dt{ color:#fff; font-weight:600; }
.mgcfg__row--total dd{ font-weight:700; font-size:18px; }
.mgcfg__group-title{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin:26px 0 6px;
}
.mgcfg__group-title--first{ margin-top:0; }
/* Borde sutil para que los colores claros (Blanco Ártico) no
   se fundan con la tarjeta */
.mgcfg__swatch-chip{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mgcfg__equip{ columns: 2; column-gap:48px; max-width:1100px; list-style:none; }
.mgcfg__equip li{
  break-inside:avoid;
  padding:10px 0 10px 22px; position:relative;
  font-size:14.5px; color:var(--ink-soft);
  border-bottom:1px solid #202326;
}
.mgcfg__equip li::before{
  content:""; position:absolute; left:2px; top:17px;
  width:8px; height:8px; background:var(--mg-red);
}

/* Calculadora financiera */
.mgcfg__fin{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:18px; max-width:1100px; margin-bottom:26px;
}
.mgcfg__fin label{ font-size:13px; color:var(--ink-soft); display:block; margin-bottom:7px; }
.mgcfg__fin input, .mgcfg__fin select{
  width:100%; background:var(--panel-soft); color:#fff;
  border:1px solid var(--panel-border); border-radius:8px;
  padding:11px 12px; font-size:14.5px; font-family:inherit;
}
.mgcfg__fin-out{
  background: var(--panel);
  border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:22px 24px; max-width:1100px;
  display:flex; flex-wrap:wrap; gap:28px 56px;
}
.mgcfg__fin-out .kpi small{ display:block; font-size:12px; color:var(--ink-faint); margin-bottom:5px; }
.mgcfg__fin-out .kpi strong{ font-size:22px; font-weight:700; }
.mgcfg__fin-note{ font-size:12px; color:var(--ink-faint); margin-top:14px; max-width:1100px; }

/* ==========================================================
   4. FORMULARIO DE SOLICITUD
   ========================================================== */
.mgcfg__form-wrap{
  margin-top:64px; max-width:640px;
}
.mgcfg__form-wrap h3{ font-size:22px; font-weight:600; margin-bottom:6px; }
.mgcfg__form-wrap > p{ font-size:14px; color:var(--ink-soft); margin-bottom:24px; }
.mgcfg__form-label{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mg-red); font-weight:700; margin:22px 0 10px;
}
.mgcfg__prefill{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); padding:4px 16px; margin-bottom:4px;
}
.mgcfg__prefill .mgcfg__row{ font-size:13.5px; }
.mgcfg__prefill .mgcfg__row:last-child{ border-bottom:none; }
.mgcfg__field{ margin-bottom:14px; }
.mgcfg__field input,
.mgcfg__field select,
.mgcfg__field textarea{
  width:100%; background:var(--panel-soft); color:#fff;
  border:1px solid var(--panel-border); border-radius:99px;
  padding:13px 18px; font-size:14.5px; font-family:inherit;
}
.mgcfg__field textarea{ border-radius:18px; min-height:110px; resize:vertical; }
.mgcfg__field input::placeholder, .mgcfg__field textarea::placeholder{ color:var(--ink-faint); }
.mgcfg__field select:invalid{ color:var(--ink-faint); }
.mgcfg__field input.is-error, .mgcfg__field select.is-error{ border-color:var(--mg-red); }
.mgcfg__field .err{
  display:none; font-size:12px; color:#FF8CA0; margin:6px 0 0 18px;
}
.mgcfg__field.show-error .err{ display:block; }
.mgcfg__consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:var(--ink-soft); margin:18px 0 22px;
}
.mgcfg__consent input{ margin-top:2px; accent-color: var(--mg-red); }
.mgcfg__consent a{ color:var(--mg-red); }
.mgcfg__submit{
  width:100%; border:none; border-radius:10px;
  background: var(--mg-red); color:#fff;
  font-size:16px; font-weight:700; padding:15px;
  transition: background .2s;
}
.mgcfg__submit:hover{ background: var(--mg-red-dark); }
.mgcfg__form-ok{
  display:none;
  background: rgba(47,191,113,.12); border:1px solid rgba(47,191,113,.5);
  color:#A9E8C6; border-radius:var(--radius);
  padding:16px 18px; font-size:14.5px; margin-top:16px;
}
.mgcfg__form-ok.is-visible{ display:block; }

/* ==========================================================
   5. RESPONSIVE
   ========================================================== */
@media (max-width: 960px){
  .mgcfg__top{
    grid-template-columns: 1fr;
    grid-template-rows: 52vw auto auto;
    height:auto; min-height:0;
  }
  .mgcfg__stage{ min-height:280px; }
  .mgcfg__rail{
    flex-direction:row; order:2;
    border-top:1px solid #000;
  }
  .mgcfg__rail-step{ flex:1; height:56px; }
  .mgcfg__rail-step.is-active::before{
    left:12px; right:12px; top:auto; bottom:0;
    width:auto; height:3px; border-radius:3px 3px 0 0;
  }
  .mgcfg__rail-step.is-done::after{ right:auto; left:50%; margin-left:14px; top:10px; }
  .mgcfg__rail-spacer, .mgcfg__rail-cam{ display:none; }
  .mgcfg__panel{ order:3; }
  .mgcfg__panel-scroll{ max-height:none; }
  .mgcfg__equip{ columns:1; }
}
@media (prefers-reduced-motion: reduce){
  .mgcfg *{ transition:none !important; }
}

/* ==========================================================
   6. ADAPTACIÓN DEL FORMULARIO CONTACT FORM 7
   ----------------------------------------------------------
   Estiliza la estructura del form de loscoches (form-box,
   grupo-form, dms-*) dentro del configurador. No renombres
   las clases dms-* ni los names de los campos: las usa el DMS.
   ========================================================== */
.mgcfg .form-box{ max-width:640px; }

/* Filas: los items se acomodan en 2 columnas y bajan a 1 en móvil */
.mgcfg .grupo-form{
  display:flex; flex-wrap:wrap; gap:14px; margin-bottom:2px;
}
.mgcfg .grupo-form--item{ flex:1 1 260px; margin-bottom:12px; }
.mgcfg .grupo-form--ciudad{ margin-bottom:12px; }
.mgcfg .grupo-form--ciudad > label{
  display:block; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:#7C8187; margin-bottom:6px;
}

/* Campos: mismo lenguaje visual que el resto del configurador */
.mgcfg .wpcf7 input[type="text"],
.mgcfg .wpcf7 input[type="tel"],
.mgcfg .wpcf7 input[type="email"],
.mgcfg .wpcf7 select,
.mgcfg .wpcf7 textarea{
  width:100%; background:#202225; color:#fff;
  border:1px solid #33363A; border-radius:99px;
  padding:13px 18px; font-size:14.5px; font-family:inherit;
}
.mgcfg .wpcf7 textarea{ border-radius:18px; min-height:110px; resize:vertical; }
.mgcfg .wpcf7 input::placeholder,
.mgcfg .wpcf7 textarea::placeholder{ color:#7C8187; }
.mgcfg .wpcf7 select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B9BDC2' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}

/* Modelo bloqueado en IM6 (lo fija el JS) */
.mgcfg .mgcfg__cf7-locked{ pointer-events:none; opacity:.65; }

/* Checkboxes: Test drive / Parte de pago */
.mgcfg .box-option{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:#202225; border:1px solid #33363A; border-radius:99px;
  padding:11px 18px; font-size:13.5px; color:#B9BDC2;
}
.mgcfg .grupo-form--item-check{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:13.5px; color:#B9BDC2; padding:4px 2px;
}
.mgcfg .wpcf7-list-item{ margin:0 0 0 10px; }
.mgcfg .wpcf7-list-item label{
  display:flex; align-items:center; gap:6px; cursor:pointer;
}
.mgcfg .wpcf7 input[type="checkbox"]{ accent-color:#E4002B; width:16px; height:16px; }

/* Aceptación de datos */
.mgcfg .grupo-accept{
  font-size:13px; color:#B9BDC2; margin:16px 0 20px;
}
.mgcfg .grupo-accept a{ color:#E4002B; }

/* Botón enviar */
.mgcfg .grupo-submit input[type="submit"]{
  width:100%; border:none; border-radius:10px; cursor:pointer;
  background:#E4002B; color:#fff;
  font-size:16px; font-weight:700; padding:15px; font-family:inherit;
  transition:background .2s;
}
.mgcfg .grupo-submit input[type="submit"]:hover{ background:#B80022; }
.mgcfg .wpcf7-spinner{ display:block; margin:10px auto 0; }

/* Mensajes de validación y respuesta de CF7 */
.mgcfg .wpcf7-not-valid-tip{
  font-size:12px; color:#FF8CA0; margin:6px 0 0 18px;
}
.mgcfg .wpcf7 form .wpcf7-response-output{
  margin:16px 0 0; padding:14px 18px; border-radius:10px;
  font-size:14px; border:1px solid #33363A;
}
.mgcfg .wpcf7 form.sent .wpcf7-response-output{
  border-color:rgba(47,191,113,.5); background:rgba(47,191,113,.12); color:#A9E8C6;
}
.mgcfg .wpcf7 form.invalid .wpcf7-response-output,
.mgcfg .wpcf7 form.failed .wpcf7-response-output{
  border-color:rgba(228,0,43,.4); background:rgba(228,0,43,.12); color:#FFB4C1;
}