/* ============================================================
   SOUL LENS STUDIOS — SOLICITUD + FACTURACIÓN
   Marca: negro #0A0A0B · azul electrico #0653FF · canto vivo 4px
   Space Grotesk (display) + IBM Plex Mono (etiquetas y cifras)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ════════════════════════════════════════════════════════════
   SISTEMA DE MARCA · SLS · Soul Lens Studios
   Tokens espejo del sitio oficial soullensstudios.live.
   Fuente de verdad: --negro/--azul/--panel del sitio de prensa.
   No inventar valores: si cambia el sitio, cambia este bloque.
   ════════════════════════════════════════════════════════════ */
:root {
  /* — Marca oficial — */
  --negro: #0A0A0B;
  --panel: #0F0F12;
  --panel-2: #141418;
  --azul: #0653FF;
  --azul-soft: rgba(6,83,255,.12);
  /* El azul de marca sobre el negro da 3.36:1 y reprueba WCAG AA (4.5:1).
     Sobre un boton azul con texto blanco no hay problema — el conflicto es
     el azul COMO TEXTO. Se deriva un tono del mismo matiz, aclarado hasta
     4.98:1, para precios y datos que el cliente tiene que leer bien.
     --azul manda en superficies y rellenos; --azul-texto, en tipografia
     sobre fondo oscuro. Es el patron on-dark de cualquier design system:
     no cambia la marca, la hace legible. */
  --azul-texto: #3D78FF;
  --blanco: #FFFFFF;
  --gris: #8C8C97;
  --gris-2: #5C5C66;
  --linea: rgba(255,255,255,.09);
  --linea-fuerte: rgba(255,255,255,.16);
  --ok: #00E676;

  /* — Alias funcionales (el resto de la hoja consume estos) — */
  --bg: var(--negro);
  --surface: var(--panel);
  --surface-raised: var(--panel-2);
  --surface-hover: #1A1A20;
  --border: var(--linea);
  --border-light: var(--linea-fuerte);
  --text: var(--blanco);
  --text-secondary: var(--gris);
  /* --gris-2 sobre el negro da 2.99:1 y reprueba WCAG AA. En el sitio oficial
     es un gris decorativo, no de lectura. Aqui el texto chico si se lee para
     decidir una compra, asi que el nivel terciario usa --gris (5.95:1) y
     --gris-2 queda reservado a lo puramente decorativo (paso inactivo). */
  --text-tertiary: var(--gris);

  /* --green era el acento anterior; ahora apunta al azul de marca.
     Se conserva el nombre para no reescribir 700 lineas de reglas. */
  --green: var(--azul);
  --green-soft: var(--azul-soft);
  --green-border: rgba(6,83,255,.35);

  --amber: #D4A030;
  --amber-soft: rgba(212,160,48,.10);
  --red: #FF4D4D;
  --red-soft: rgba(255,77,77,.10);
  --blue: var(--azul);
  --blue-soft: var(--azul-soft);

  /* — Geometria: el sitio oficial es de canto vivo, 4px — */
  --radius: 4px;
  --radius-sm: 4px;
  --max: 1120px;
  --shadow: none;

  /* — Tipografia — */
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — Alias heredados --sl-* —
     El HTML y el JS usan estos nombres en estilos en linea, pero NUNCA
     estuvieron definidos: las cifras de ahorro fiscal salian sin color y
     el error del formulario aparecia sin fondo rojo. Se definen aqui,
     apuntando a la marca, en vez de editar 30 estilos en linea. */
  --sl-green: var(--azul-texto);
  --sl-green-soft: var(--azul-soft);
  --sl-blue: var(--azul);
  --sl-blue-soft: var(--azul-soft);
  --sl-red: var(--red);
  --sl-red-soft: var(--red-soft);
  --sl-gray-200: var(--linea);
  --sl-gray-400: var(--gris);
  --sl-gray-500: var(--gris);

  /* — Movimiento —
     Curvas con salida rapida y asentamiento suave: la interfaz responde
     de inmediato y luego se acomoda. --brinco sobrepasa un poco, para
     confirmar una eleccion. */
  --sal: cubic-bezier(.16, 1, .3, 1);
  --brinco: cubic-bezier(.34, 1.56, .64, 1);
  --rapido: 160ms;
  --normal: 280ms;
  --lento: 520ms;
}

/* Quien pidio menos movimiento en su sistema no recibe ninguno.
   No es un extra: el movimiento involuntario provoca mareo y migrana
   a personas con trastornos vestibulares. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--display);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* Etiqueta mono en versalitas: la firma tipografica del estudio.
   Se usa en pasos, labels, botones, encabezados de tabla y badges. */
.eyebrow,
.steps-bar .step,
.field-group > label:not(.checkbox-label):not(.toggle-label),
.review-section h4,
.sidebar-title,
.ded-tab,
.ded-table th,
.header-badge,
.btn {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ── Iconos ────────────────────────────────────────────────────
   El sprite se oculta sin display:none (eso romperia las
   referencias <use> en algunos navegadores). */
/* 'position: absolute' con width:0 NO basta: el sprite seguia sumando
   6px al ancho del documento y el sitio scrolleaba de lado en movil.
   Se saca del flujo con position:fixed fuera de pantalla. No se usa
   display:none porque eso romperia las referencias <use>. */
.sprite {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico {
  width: 32px; height: 32px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
  /* Sombra proyectada: asienta el icono sobre la superficie */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.ico-xs { width: 14px; height: 14px; }
.ico-sm { width: 18px; height: 18px; }
.ico-xl { width: 64px; height: 64px; }

/* Alinea icono y texto sin que el texto baile */
.alert, .ded-tab, .sidebar-garantia, .header-badge,
.rv-deducible, .rv-costo-real {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ded-tab, .sidebar-garantia, .header-badge { justify-content: center; }
/* Con mono en versalitas el texto es ancho: sin esto la etiqueta
   se parte y el tab crece hasta desbordar su columna. */
.ded-tab > span { white-space: nowrap; }
.alert { align-items: flex-start; }
.alert .ico { margin-top: 1px; }

/* --- Header --- */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Lockup oficial: "soul" en blanco + "lens" en azul, todo minusculas.
   Es el mismo de soullensstudios.live — no sustituir por un badge. */
.header-logo {
  display: flex;
  align-items: baseline;
  gap: 0;
  color: var(--blanco);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
}
.header-logo:hover { text-decoration: none; opacity: .8; }
.logo-soul { color: var(--blanco); }
.logo-lens { color: var(--azul); }
.header-badge {
  font-size: 11px;
  background: transparent;
  color: var(--gris);
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--linea);
}

/* --- Layout --- */
.checkout-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 28px;
  align-items: start;
}
/* Sin esto, el 'min-width: auto' del grid impide que la columna se encoja
   bajo el ancho de la barra de pasos y el sitio entero scrollea de lado
   en moviles angostos. La barra ya scrollea sola con su overflow-x. */
.checkout-grid > * { min-width: 0; }

/* El paso entra deslizandose 18px desde un costado. Sin recortar aqui,
   esos 18px hacen que el sitio scrollee de lado durante la animacion —
   en movil se siente como si la pagina "bailara".
   'clip' y no 'hidden': hidden crearia un contenedor de scroll y romperia
   el position:sticky del resumen de compra. */
.form-col { overflow-x: clip; }
@media (max-width: 820px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .sidebar-col { order: -1; }
}

/* --- Steps Bar --- */
.steps-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.steps-bar .step {
  flex: 1;
  min-width: 92px;
  padding: 11px 8px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--gris);
  font-size: 10px;
  font-weight: 500;
  cursor: default;
  border-radius: var(--radius-sm);
  transition: all .2s;
  text-align: center;
  white-space: nowrap;
}
.steps-bar .step.active {
  background: var(--azul);
  color: var(--blanco);
}
.steps-bar .step.past {
  background: var(--azul-soft);
  color: var(--azul-texto);
  cursor: pointer;
  border: 1px solid var(--green-border);
}

/* --- Form Step --- */
/* fieldset trae 'border: 2px groove' y 'min-inline-size: min-content' del
   navegador: el primero dibuja un marco gris claro sobre el negro de marca,
   el segundo impide que los grids internos se encojan en movil. */
fieldset { border: 0; min-inline-size: 0; }
.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.step-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.step-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* --- Cards --- */
.linea-cards, .radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.linea-card, .radio-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: all .2s;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.linea-card:hover, .radio-card:hover {
  border-color: var(--border-light);
  background: var(--surface-hover);
}
.linea-card.selected, .radio-card.selected {
  border-color: var(--green);
  background: var(--green-soft);
}
/* Codigo de linea del sistema oficial del estudio (01 · VOZ, 02 · AUDIOVISUAL…) */
.linea-card .lc-icon {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--azul-texto);
  margin-bottom: 6px;
}
.linea-card .lc-title { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.linea-card .lc-desc { font-size: 12px; color: var(--gris); line-height: 1.45; }
.linea-card .lc-price { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--azul-texto); margin-top: 4px; }
.linea-card input, .radio-card input, .product-card input { display: none; }

/* --- Radio cards --- */
.radio-card .rc-title { font-weight: 600; font-size: 14px; }
.radio-card .rc-desc { font-size: 12px; color: var(--text-tertiary); }

/* --- Form Fields --- */
.field-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}
.field-group > label:not(.checkbox-label):not(.toggle-label) {
  font-size: 10px;
  font-weight: 500;
  color: var(--gris);
  margin-bottom: 7px;
}
.field-group input,
.field-group select,
.field-group textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--display);
  color: var(--text);
  background: var(--negro);
  transition: border-color .2s;
  width: 100%;
}
.field-group input::placeholder,
.field-group textarea::placeholder { color: var(--text-tertiary); }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(6,83,255,.20);
}
.field-group input.error,
.field-group select.error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255,77,77,.20);
}
.field-group .uppercase { text-transform: uppercase; }
.field-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 500px) { .field-row { grid-template-columns: 1fr; } }
select { cursor: pointer; }
select option { background: var(--surface); color: var(--text); }

/* --- Checkbox & Toggle --- */
.checkbox-group { flex-direction: row; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
}
.checkbox-label input[type="checkbox"] { width: auto; margin-top: 2px; accent-color: var(--green); }

.toggle-group { flex-direction: row; }
.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.toggle-track {
  width: 44px; height: 24px;
  background: rgba(255,255,255,.14);
  border-radius: 12px;
  position: relative;
  transition: background .2s;
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  background: var(--text);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform .2s;
}
.toggle-label input { display: none; }
.toggle-label input:checked + .toggle-track { background: var(--green); }
.toggle-label input:checked + .toggle-track::after { transform: translateX(20px); background: var(--blanco); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-primary {
  background: var(--azul);
  color: var(--blanco);
  border-color: var(--azul);
}
.btn-primary:hover { background: #0447D6; border-color: #0447D6; }
.btn-primary:disabled {
  background: transparent;
  border-color: var(--linea);
  color: var(--gris-2);
  cursor: not-allowed;
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--linea-fuerte);
}
.btn-outline:hover { background: rgba(255,255,255,.04); border-color: var(--blanco); }

.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* --- Alert --- */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 20px;
}
.alert-warning {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid rgba(212,160,48,.30);
}

/* --- Config Cards --- */
.config-section { margin-bottom: 24px; }
.config-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.config-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.config-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  background: var(--surface);
  transition: all .2s;
}
.config-card:hover { border-color: var(--border-light); background: var(--surface-hover); }
.config-card.selected {
  border-color: var(--green);
  background: var(--green-soft);
}
.config-card .cc-title { font-weight: 600; font-size: 14px; }
.config-card .cc-price { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--azul-texto); margin: 6px 0; }
.config-card .cc-meta { font-size: 11px; color: var(--text-tertiary); }
.config-card.recommended { position: relative; }
.config-card.recommended::before {
  /* Etiqueta tipografica, no una estrella: el sistema de marca de SLS
     resuelve toda la jerarquia con mono en versalitas. */
  content: 'El más elegido';
  position: absolute;
  top: -9px;
  left: 12px;
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 3px 9px;
  border-radius: var(--radius);
}

/* --- Product cards --- */
.prod-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  cursor: pointer;
  background: var(--surface);
}
.prod-card:hover { border-color: var(--border-light); }
.prod-card.selected { border-color: var(--green); background: var(--green-soft); }
.prod-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.prod-card-title { font-weight: 600; font-size: 16px; }
.prod-card-price { font-family: var(--mono); font-size: 17px; font-weight: 500; color: var(--azul-texto); }
.prod-card-features {
  font-size: 12px; color: var(--text-tertiary); list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.prod-card-features li {
  background: rgba(255,255,255,.04); padding: 3px 8px; border-radius: 4px;
}

/* --- Add-ons --- */
.addon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
}
.addon-item:hover { background: var(--surface-hover); }
.addon-item input { width: auto; margin: 0; accent-color: var(--green); }
.addon-price {
  margin-left: auto;
  font-family: var(--mono);
  color: var(--azul-texto);
  font-size: 12px;
  white-space: nowrap;
}

/* --- Review Card --- */
.review-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.review-section { margin-bottom: 16px; }
.review-section:last-child { margin-bottom: 0; }
.review-section h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.review-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
}
.review-row .rv-label { color: var(--gris); }
.review-row .rv-value { font-family: var(--mono); font-size: 12px; }

/* --- Sidebar --- */
.sidebar-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 80px;
}
.sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 14px;
}
.sidebar-empty { font-size: 13px; color: var(--text-tertiary); }

.sidebar-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  gap: 12px;
}
.sidebar-item:last-child { border-bottom: none; }
.sidebar-item-name { flex: 1; }
.sidebar-item-price { font-family: var(--mono); font-size: 12px; white-space: nowrap; }

.sidebar-total {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px solid var(--border-light);
}
.total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 3px 0;
  color: var(--text-secondary);
}
.total-final {
  font-size: 16px;
  font-weight: 700;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.sidebar-garantia {
  margin-top: 14px;
  font-size: 11px;
  color: var(--gris);
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* --- Deducibility Card --- */
.deducibility-card {
  background: var(--surface-raised);
  border: 1.5px solid var(--green-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.ded-header {
  background: var(--green-soft);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--green-border);
}
.ded-icon { font-size: 26px; }
.ded-title { font-size: 14px; }
.ded-title strong { color: var(--azul-texto); }

.ded-tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.ded-tab {
  flex: 1;
  min-width: 110px;
  padding: 8px 6px;
  border: none;
  background: transparent;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all .2s;
  white-space: nowrap;
}
.ded-tab:hover { background: var(--surface-hover); color: var(--text-secondary); }
.ded-tab.active { background: var(--azul-soft); color: var(--azul-texto); }

.ded-panel { padding: 18px 20px; }

.ded-calc-row { margin-bottom: 12px; }
.ded-calc-row select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--display);
  background: var(--negro);
  color: var(--text);
}

.ded-result-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.ded-result-row:last-child { border-bottom: none; }
.ded-total-row {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 0;
  border-top: 2px solid var(--green);
  margin-top: 4px;
}

.ded-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.ded-table th {
  text-align: left;
  padding: 8px 6px;
  background: var(--surface);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-tertiary);
  border-bottom: 2px solid var(--border);
}
.ded-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-secondary);
}
.ded-table td code {
  background: var(--azul-soft);
  color: var(--azul-texto);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.ded-table tr:hover td { background: var(--surface-hover); }

.ded-checklist {
  list-style: none;
  padding: 0;
  counter-reset: ded-step;
}
.ded-checklist li {
  counter-increment: ded-step;
  padding: 12px 0 12px 40px;
  border-bottom: 1px solid var(--border);
  position: relative;
  font-size: 13px;
}
.ded-checklist li::before {
  content: counter(ded-step);
  position: absolute;
  left: 0;
  top: 12px;
  width: 26px; height: 26px;
  background: var(--azul);
  color: var(--blanco);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.ded-checklist li strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}
.ded-checklist li span {
  font-size: 11px;
  color: var(--text-tertiary);
  display: block;
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.modal-icon { font-size: 48px; margin-bottom: 12px; }
.modal-card h2 { font-size: 20px; margin-bottom: 8px; }
.modal-card p { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.modal-details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 16px 0;
  text-align: left;
  font-size: 12px;
  color: var(--text-secondary);
}
.modal-details strong { color: var(--text); }
.modal-details hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.loading-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
}

/* --- Spinner --- */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.alert-info {
  font-size: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}

/* --- Form error --- */
.form-error {
  background: var(--red-soft);
  color: var(--red);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,77,77,.30);
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .checkout-grid { padding: 12px; }
  .linea-cards, .radio-cards { grid-template-columns: 1fr; }
  .config-options { grid-template-columns: 1fr; }
  .step-title { font-size: 18px; }
  .modal-card { padding: 20px; }
  .ded-tabs { flex-wrap: nowrap; }
  .ded-tab { font-size: 10px; padding: 6px 4px; }
  .ded-table { font-size: 10px; }
  .ded-table th, .ded-table td { padding: 6px 4px; }
}

/* ════════════════════════════════════════════════════════════
   MOVIMIENTO
   Regla unica: el movimiento explica algo. Si un efecto no
   ayuda a entender que paso, no va.
   Solo se animan transform / opacity / filter — las unicas
   propiedades que el navegador resuelve en el compositor y
   por tanto nunca provocan tirones.
   ════════════════════════════════════════════════════════════ */

/* ── Entrada del paso: dice de donde vienes ──────────────────
   Avanzar entra desde la derecha; regresar, desde la izquierda.
   El sentido del deslizamiento confirma la direccion sin texto. */
.form-step.active { animation: pasoEntra var(--normal) var(--sal) both; }
[data-dir="atras"] .form-step.active { animation-name: pasoEntraAtras; }

@keyframes pasoEntra {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes pasoEntraAtras {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── Tarjetas en cascada ─────────────────────────────────────
   Aparecen en orden de lectura para guiar el ojo a la primera
   opcion en vez de soltar la reja entera de golpe. */
.linea-card, .prod-card, .config-card {
  animation: tarjetaEntra var(--normal) var(--sal) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes tarjetaEntra {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Eleccion ────────────────────────────────────────────────
   Al elegir, la tarjeta da un brinco corto: acuse de recibo. */
.linea-card, .radio-card, .config-card, .prod-card {
  transition:
    border-color var(--rapido) var(--sal),
    background   var(--rapido) var(--sal),
    transform    var(--rapido) var(--sal);
}
.linea-card:hover, .radio-card:hover,
.config-card:hover, .prod-card:hover { transform: translateY(-2px); }
.linea-card:active, .radio-card:active,
.config-card:active, .prod-card:active { transform: translateY(0) scale(.99); }

.linea-card.selected, .radio-card.selected,
.config-card.selected, .prod-card.selected { animation: elegido 380ms var(--brinco); }
@keyframes elegido {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.022); }
  100% { transform: scale(1); }
}

/* ── Paso activo ─────────────────────────────────────────────
   Un halo que se expande y desvanece marca el avance. */
.steps-bar .step { position: relative; overflow: hidden; }
.steps-bar .step.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.5), transparent 62%);
  animation: pulsoPaso 620ms var(--sal) both;
  pointer-events: none;
}
@keyframes pulsoPaso {
  from { opacity: .85; transform: scale(.4); }
  to   { opacity: 0;   transform: scale(1.6); }
}

/* ── Botones ─────────────────────────────────────────────────
   Se hunden al presionar: peso fisico, no un rectangulo inerte. */
.btn { transition: background var(--rapido) var(--sal),
                   border-color var(--rapido) var(--sal),
                   color var(--rapido) var(--sal),
                   transform 90ms var(--sal); }
.btn:not(:disabled):active { transform: translateY(1px) scale(.985); }
.btn-primary:not(:disabled):hover { transform: translateY(-1px); }

/* ── Total actualizado ───────────────────────────────────────
   Cuando la cifra cambia, late una vez. Sin esto el cliente
   agrega un extra y no nota que su total se movio. */
.total-final.cambio { animation: cifraCambia 560ms var(--sal); }
@keyframes cifraCambia {
  0%   { transform: none; }
  30%  { transform: scale(1.06); color: var(--azul); }
  100% { transform: none; }
}

/* ── Renglon nuevo en el resumen ─────────────────────────────*/
.sidebar-item { animation: renglonEntra var(--normal) var(--sal) both; }
@keyframes renglonEntra {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ── Paneles de la calculadora ───────────────────────────────*/
.ded-panel.active { animation: panelEntra var(--rapido) var(--sal) both; }
@keyframes panelEntra {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}
.ded-tab { transition: background var(--rapido) var(--sal), color var(--rapido) var(--sal); }

/* ── Campos ──────────────────────────────────────────────────*/
.field-group input,
.field-group select,
.field-group textarea {
  transition: border-color var(--rapido) var(--sal),
              box-shadow   var(--rapido) var(--sal);
}
/* Un campo invalido se sacude: se ve cual es sin leer el aviso. */
.field-group input.error, .field-group select.error { animation: sacude 420ms var(--sal); }
@keyframes sacude {
  0%, 100% { transform: none; }
  20% { transform: translate3d(-5px, 0, 0); }
  45% { transform: translate3d(4px, 0, 0); }
  70% { transform: translate3d(-2px, 0, 0); }
}

/* ── Aviso de error ──────────────────────────────────────────*/
.form-error { animation: avisoEntra var(--normal) var(--brinco) both; }
@keyframes avisoEntra {
  from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Cierre ──────────────────────────────────────────────────
   El modal de exito se gana el unico momento celebratorio:
   el fondo se funde y la tarjeta sube; el check se sella al
   final, cuando ya se leyo el titulo. */
.modal-overlay { animation: fondoEntra var(--rapido) ease both; }
@keyframes fondoEntra { from { opacity: 0; } to { opacity: 1; } }

.modal-card { animation: modalEntra 420ms var(--brinco) both; }
@keyframes modalEntra {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.modal-icon .ico { animation: selloCheck 520ms var(--brinco) 140ms both; }
@keyframes selloCheck {
  from { opacity: 0; transform: scale(.5) rotate(-12deg); }
  to   { opacity: 1; transform: none; }
}

/* ── Foco visible ────────────────────────────────────────────
   Quien navega con teclado debe ver SIEMPRE donde esta parado. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--radius);
}