/* ============================================================
   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);
  --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;
}

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); 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;
}

/* --- 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; }
@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-2);
  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(--green-soft);
  color: var(--green);
  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);
  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); 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); margin: 6px 0; }
.config-card .cc-meta { font-size: 11px; color: var(--text-tertiary); }
.config-card.recommended { position: relative; }
.config-card.recommended::before {
  content: '★ Más elegido';
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--azul);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
}

/* --- 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); }
.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);
  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(--green);
  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(--green); }

.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(--green-soft); color: var(--green); }

.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(--green-soft);
  color: var(--green);
  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; }
}