/* =========================================================
   Briefing · estilos del wizard
   (usa variables de ../css/estilos.css)
========================================================= */

/* --- HOTFIX: evita colisión con .step global del sitio --- */
.wizard .step{
  display:none;
  opacity:1 !important;        /* anula animación global */
  transform:none !important;   /* anula animación global */
}
.wizard .step.active{ display:block; }

/* utilidades */
.hidden{ display:none !important; }
.mt{ margin-top:1rem; }

/* Bloque e-commerce: oculto por defecto, muestro con .show */
.grid-3.only-ecom{ display:none; }
.grid-3.only-ecom.show{ display:grid; }

/* =========================================================
   Layout base
========================================================= */
.briefing-hero{ padding:6rem 2rem 3rem; text-align:center; }
.wizard{ max-width:980px; margin:0 auto; padding:1rem; }

/* =========================================================
   Progreso
========================================================= */
.progress{ position:relative; max-width:980px; margin:-2rem auto 1rem; padding:0 1rem; }
.progress-track{ height:6px; background:var(--blue-light); border-radius:999px; }
.progress-bar{
  height:6px; margin-top:-6px; background:var(--orange);
  border-radius:999px; transition:width .35s ease;
}
.progress-steps{
  display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem;
  margin:.6rem 0 0; list-style:none; padding:0; font-size:.8rem; color:#667;
}
.progress-steps li{ text-align:center; opacity:.5; }

/* Pasos completados (≤ paso actual) */
.progress-steps li.done{
  opacity:1; color:var(--blue-dark); font-weight:700;
}
/* Paso actual (destacado sobre los done) */
.progress-steps li.active{
  opacity:1; color:var(--orange); font-weight:800;
}

/* =========================================================
   Steps
========================================================= */
.step{
  background:#fff; border-radius:var(--radius);
  box-shadow:0 8px 22px rgba(0,0,0,.06); padding:1.5rem;
}
.step > legend{ font-size:1.25rem; font-weight:700; color:var(--blue-dark); margin-bottom:.75rem; }
.hint{ color:var(--gray-text); opacity:.9; margin-bottom:1rem; }
.sub{ margin-top:1rem; border:1px solid #e9eef6; padding:1rem; border-radius:var(--radius); }
.sub > legend{ font-size:1rem; color:var(--blue-dark); font-weight:700; }

/* =========================================================
   Grid helpers
========================================================= */
.grid-2{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-3{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* =========================================================
   Inputs
========================================================= */
label{ display:block; font-weight:600; color:var(--blue-dark); }
label input[type="text"],
label input[type="email"],
label input[type="url"],
label input[type="date"],
label input[type="tel"],
label input[type="number"],
label textarea,
label select{
  width:100%; margin-top:.35rem; padding:.75rem .9rem;
  border:1px solid #d8e1ee; border-radius:10px; background:#fff; color:var(--gray-text);
}
label small{ display:block; color:#6b7785; margin-top:.25rem; }

/* =========================================================
   Chips / opciones
========================================================= */
.option{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid #e8eef7; padding:.85rem 1rem; border-radius:12px;
  background:var(--blue-light); cursor:pointer;
}
.option:hover{ border-color:var(--orange); }
.option input{ transform:scale(1.15); }
.option i{ color:var(--orange); width:24px; text-align:center; }

.chip{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  border:1px solid #e8eef7; padding:.65rem .9rem; border-radius:999px; cursor:pointer; background:#fff;
}
.chip input{ transform:scale(1.15); }
.chip:hover{ border-color:var(--orange); }

/* =========================================================
   Navegación
========================================================= */
.wizard-nav{
  display:flex; justify-content:space-between; align-items:center;
  gap:.5rem; margin:1rem auto 2rem; max-width:980px;
}
.wizard-nav .right{ display:flex; gap:.5rem; align-items:center; }
.btn-ghost{
  border:2px solid var(--orange); color:var(--orange);
  padding:.7rem 1rem; border-radius:var(--radius); background:transparent; font-weight:700;
}
.btn-ghost:hover{ background:var(--orange); color:#fff; }

/* =========================================================
   Resumen
========================================================= */
.resumen{
  background:var(--blue-light); border-radius:12px; padding:1rem;
  border:1px dashed #cfd9ea;
}
.resumen h3{ margin:.2rem 0 .8rem; }
.resumen dl{ display:grid; grid-template-columns:200px 1fr; gap:.4rem .8rem; }
.resumen dt{ font-weight:700; color:var(--blue-dark); }
.resumen dd{ margin:0; }
.small{ font-size:.9rem; color:#667; }
.sr-only{ position:relative; }

/* ===== Alinear wizard al contenedor global y span de columnas ===== */
:root{ --container: 1120px; }              /* ajusta a tu ancho real (980/1100/1200) */

main > .progress,
main > .wizard,
.wizard-nav{
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;

  /* si el padre usa CSS Grid, que ocupe TODAS las columnas */
  grid-column: 1 / -1;
  justify-self: center;
}

/* el step debe ocupar todo el ancho disponible del wizard */
.wizard .step{
  width: 100%;
  float: none !important;      /* por si alguna hoja global flota */
}

/* las rejillas internas aprovechan el ancho */
.wizard .step .grid-2,
.wizard .step .grid-3{ width: 100%; }

/* la nav inferior debe alinearse igual que el wizard */
.wizard-nav{ max-width: var(--container); }


/* =========================================================
   Responsive
========================================================= */
@media (max-width:600px){
  .progress-steps{ display:none; }
  .resumen dl{ grid-template-columns:1fr; }
}