/* ================================================================
   YOD LABS · PÁGINAS INTERIORES «AUTOMATIZACIÓN» Y «SOFTWARE»
   Hoja aparte, cargada DESPUÉS de yod.css. No redefine nada del
   sistema: sólo añade. Prefijos:
     .ps-   andamio compartido por las dos páginas (cabeceras, revelado)
     .au-   sólo automatizacion.html
     .sw-   sólo software.html
   Tokens: --cielo --oro --oro-luz --marfil --texto-c --texto-2
           --texto-suave --panel --panel-solid --panel-2 --linea
           --linea-suave --linea-ui --linea-oro --verde.
   Fraunces (--display) SÓLO en titulares. Inter (--ui) dentro de las
   maquetas, igual que la consola de la portada: así no parecen la web,
   parecen la pantalla donde pasa.
   Todo CSS/SVG. Sin imágenes externas.
   ================================================================ */

/* ================================================================
   ANDAMIO COMPARTIDO
   ================================================================ */
.ps-sec { padding: clamp(62px, 7vw, 100px) 0; position: relative; }
.ps-sec + .ps-sec { padding-top: 0; }

.ps-head { max-width: 72ch; margin-bottom: clamp(32px, 4vw, 52px); }
.ps-tag {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro);
}
.ps-tag::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); }
.ps-h2 {
  font-family: var(--display); font-weight: 400; color: var(--marfil);
  font-size: clamp(28px, 4vw, 50px); line-height: 1.07; letter-spacing: -.016em;
  margin: 18px 0 0; max-width: 17ch; text-wrap: balance;
}
.ps-h2 .pt { color: var(--oro-luz); text-shadow: 0 0 18px rgba(232,206,150,.7), 0 0 56px rgba(198,161,91,.4); }
.ps-lead {
  margin-top: 20px; max-width: 64ch; text-wrap: pretty;
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.62; color: var(--texto-c);
}
.ps-lead b { color: var(--marfil); font-weight: 600; }

/* el rótulo honesto: innegociable en toda maqueta */
.ps-rotulo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto-suave); line-height: 1.5;
}
.ps-rotulo::before {
  content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%;
  border: 1px solid var(--texto-suave);
}
.ps-pie { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--texto-suave); max-width: 74ch; text-wrap: pretty; }
.ps-pie b { color: var(--texto-c); font-weight: 600; }

.ps-panel {
  background: var(--panel); border: 1px solid var(--linea-suave); border-radius: 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); min-width: 0;
}

/* ================================================================
   MOVIMIENTO · revelado al entrar
   Lo enciende assets/p-auto-software.js poniendo .js-ps en <html>.
   Regla de la casa: el estado oculto SÓLO existe si el script corrió.
   Sin JS —o con el observador dormido tras un scroll lanzado— la
   página se ve entera; el repaso por scroll del script es la red.
   ================================================================ */
.js-ps .ps-rev { opacity: 0; translate: 0 16px; }
.js-ps .ps-rev.ps-on {
  opacity: 1; translate: 0 0;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--psd, 0s),
              translate .7s cubic-bezier(.2,.7,.2,1) var(--psd, 0s);
}

/* ================================================================
   ================  AUTOMATIZACIÓN  ==============================
   ================================================================ */

/* ---------------- 1 · el mismo proceso, dos veces ---------------- */
.au-comp {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px); align-items: start;
}
.au-col { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; min-width: 0; }
.au-col-cab { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; }
.au-col-k { font-size: 10px; letter-spacing: .2em; }
.au-manual .au-col-k { color: var(--texto-2); }
.au-auto .au-col-k { color: var(--oro); }
.au-col h3 {
  font-family: var(--texto); font-weight: 500; font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: -.02em; color: var(--marfil); line-height: 1.22;
  flex: 1 1 100%; margin-top: 4px; text-wrap: balance;
}
.au-col-sub { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }

/* la columna de la derecha lleva el foco */
.au-auto { border-color: var(--linea); background: linear-gradient(168deg, rgba(198,161,91,.09), rgba(14,21,35,.72) 46%); }

/* --- la cadena a mano: cajas sueltas cosidas con hilo de puntos --- */
.au-cadena { list-style: none; margin: clamp(18px, 2vw, 24px) 0 0; display: grid; gap: 0; }
.au-paso { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding-bottom: 20px; }
.au-paso:last-child { padding-bottom: 0; }
/* el hilo: punteado, porque a mano el rastro se pierde entre manos */
.au-paso::before {
  content: ''; position: absolute; left: 16.5px; top: 30px; bottom: 2px; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(160,180,210,.34) 0 4px, transparent 4px 9px);
}
.au-paso:last-child::before { display: none; }
.au-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  border: 1px solid var(--linea-ui); background: rgba(7,11,19,.55);
  display: grid; place-items: center; color: var(--texto-2);
  position: relative; z-index: 1;
}
.au-ico svg { width: 17px; height: 17px; }
.au-paso-t { font-size: 15.5px; font-weight: 600; color: var(--marfil); letter-spacing: -.01em; line-height: 1.35; }
.au-paso-d { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--texto-c); text-wrap: pretty; }
.au-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.au-marca {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave); border: 1px dashed var(--linea-fuerte); border-radius: 999px;
  padding: 3px 9px; line-height: 1.5;
}
.au-marca.roja { color: #E0A192; border-color: rgba(224,161,146,.38); border-style: solid; }

/* el final de la cadena: la factura que llega mal, dos días después */
.au-falla {
  margin-top: 20px; padding: 15px 17px; border-radius: 12px;
  border: 1px solid rgba(224,161,146,.30); background: rgba(224,161,146,.07);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
}
.au-falla .au-rayo { width: 20px; height: 20px; color: #E0A192; margin-top: 2px; }
.au-falla b { display: block; font-size: 14.5px; font-weight: 600; color: #E7C6BC; letter-spacing: -.01em; }
.au-falla span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--texto-c); }

/* --- el mismo proceso, ejecutado solo --- */
.au-flujo { list-style: none; margin: clamp(18px, 2vw, 24px) 0 0; display: grid; gap: 0; }
.au-f { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding-bottom: 18px; }
.au-f:last-child { padding-bottom: 0; }
/* aquí el hilo es continuo: el rastro no se corta */
.au-f::before {
  content: ''; position: absolute; left: 16.5px; top: 30px; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(198,161,91,.5), rgba(198,161,91,.22));
}
.au-f:last-child::before { display: none; }
.au-f .au-ico { border-color: var(--linea-oro); background: rgba(198,161,91,.10); color: var(--oro-luz); }
.au-f.derivado .au-ico { border-color: var(--linea-fuerte); background: rgba(242,234,219,.06); color: var(--marfil); }

/* --- el registro: la trazabilidad es el argumento --- */
.au-registro {
  margin-top: clamp(20px, 2.2vw, 26px); border: 1px solid var(--linea-ui); border-radius: 12px;
  background: linear-gradient(180deg, #0C1320, #090E18); overflow: hidden; font-family: var(--ui);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.9);
}
.au-reg-cab {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; border-bottom: 1px solid var(--linea-ui); background: rgba(242,234,219,.02);
}
.au-reg-cab .t { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--texto-2); }
.au-reg-cab .id {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--oro);
  border: 1px solid var(--linea-oro); border-radius: 999px; padding: 3px 9px;
}
.au-reg-cab .vivo-c {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; color: var(--verde);
  background: rgba(95,214,164,.10); border: 1px solid rgba(95,214,164,.24);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.au-reg-filas { list-style: none; margin: 0; padding: 4px 0; }
.au-r {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 13px; border-top: 1px solid rgba(242,234,219,.05);
}
.au-r:first-child { border-top: none; }
.au-r .h { font-family: var(--mono); font-size: 10.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.au-r .q { font-size: 13.5px; color: var(--texto-c); line-height: 1.45; min-width: 0; text-wrap: pretty; }
.au-r .q em { font-style: normal; display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--texto-suave); }
.au-e {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap; flex: none;
}
.au-e.ok { color: var(--verde); border: 1px solid rgba(95,214,164,.28); background: rgba(95,214,164,.08); }
.au-e.der { color: var(--oro-luz); border: 1px solid var(--linea-oro); background: rgba(198,161,91,.10); }
.au-reg-pie {
  border-top: 1px solid var(--linea-ui); padding: 11px 13px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; background: rgba(7,11,19,.5);
}
.au-reg-pie .l { font-size: 12.5px; color: var(--texto-2); line-height: 1.5; min-width: 0; }
.au-reg-pie .l b { color: var(--marfil); font-weight: 600; }

/* el remate de la comparación */
.au-remate {
  margin-top: clamp(22px, 2.6vw, 32px); padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
  border-radius: 14px; border: 1px solid var(--linea); background: rgba(198,161,91,.06);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 34px; align-items: center;
}
.au-remate p {
  max-width: 46ch; font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.4;
  font-weight: 500; color: var(--marfil); letter-spacing: -.018em; text-wrap: balance;
}
.au-remate p em { font-style: normal; color: var(--oro-luz); }
.au-remate .ps-rotulo { justify-self: end; text-align: right; }

/* ---------------- 2 · qué se automatiza y qué no ---------------- */
.au-escala {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin-bottom: 18px;
}
.au-escala .e-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); white-space: nowrap; }
.au-escala .e-b {
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--oro) 0%, rgba(198,161,91,.55) 48%, rgba(160,180,210,.22) 100%);
}
.au-triage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.au-t { padding: clamp(19px, 2vw, 25px); display: flex; flex-direction: column; min-width: 0; }
.au-t-cab { display: flex; align-items: center; gap: 11px; }
.au-t-disco { width: 22px; height: 22px; flex: none; }
.au-t h3 {
  font-family: var(--texto); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em;
  color: var(--marfil); line-height: 1.25;
}
.au-t-d { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }
.au-t ul { list-style: none; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linea-suave); display: grid; gap: 9px; }
.au-t li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.5; color: var(--texto-c); text-wrap: pretty; }
.au-t li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%;
}
.au-t.si li::before { background: var(--oro); box-shadow: 0 0 8px rgba(198,161,91,.5); }
.au-t.medio li::before { background: linear-gradient(90deg, var(--oro) 50%, transparent 50%); box-shadow: inset 0 0 0 1px rgba(198,161,91,.7); }
.au-t.no li::before { background: none; box-shadow: inset 0 0 0 1px rgba(160,180,210,.5); }
.au-t.si { border-color: var(--linea); }
.au-t.no { background: rgba(10,16,26,.5); }
.au-honesto {
  margin-top: clamp(18px, 2vw, 24px); padding: clamp(16px, 1.8vw, 22px) clamp(17px, 2vw, 24px);
  border-radius: 12px; border: 1px solid var(--linea-suave); border-left: 3px solid var(--oro);
  background: rgba(14,21,35,.55);
}
.au-honesto p { font-size: 15.5px; line-height: 1.6; color: var(--texto-c); max-width: 78ch; text-wrap: pretty; }
.au-honesto p b { color: var(--marfil); font-weight: 600; }

/* ---------------- 3 · cómo se cobra: etapas con hitos ---------------- */
.au-etapas { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 18px); align-items: start; }
.au-et { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* la escalera: cada etapa se posa un peldaño más arriba */
.au-et:nth-child(1) { margin-top: 42px; }
.au-et:nth-child(2) { margin-top: 28px; }
.au-et:nth-child(3) { margin-top: 14px; }
.au-et:nth-child(4) { margin-top: 0; }
.au-et-nodo { height: 26px; display: flex; align-items: center; }
.au-et-nodo i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--cielo); border: 1px solid rgba(198,161,91,.5);
  box-shadow: 0 0 0 4px var(--cielo), 0 0 10px rgba(198,161,91,.4);
}
.au-et-nodo::after {
  content: ''; flex: 1; height: 1px; margin-left: 4px;
  background: linear-gradient(90deg, rgba(198,161,91,.42), rgba(198,161,91,.06));
}
.au-et-carta {
  flex: 1; display: flex; flex-direction: column; padding: 20px 18px 18px;
  border-radius: 12px; border: 1px solid var(--linea-suave); background: var(--panel);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.au-et:hover .au-et-carta {
  transform: translateY(-5px); border-color: var(--linea);
  box-shadow: 0 22px 46px rgba(0,0,0,.46), 0 0 0 1px rgba(198,161,91,.10);
}
.au-et-n { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.au-et-carta h3 {
  font-family: var(--texto); font-weight: 500; font-size: 18.5px; letter-spacing: -.018em;
  color: var(--marfil); line-height: 1.24; margin: 11px 0 10px;
}
.au-et-carta > p { font-size: 14.5px; line-height: 1.55; color: var(--texto-c); text-wrap: pretty; }
.au-hito {
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--linea-suave);
  display: grid; gap: 9px;
}
.au-hito div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; }
.au-hito .k { font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--texto-suave); padding-top: 3px; white-space: nowrap; }
.au-hito .v { font-size: 13.5px; line-height: 1.45; color: var(--texto-2); min-width: 0; text-wrap: pretty; }
.au-hito .v b { color: var(--marfil); font-weight: 600; }
.au-et.abierta .au-et-carta { background: linear-gradient(150deg, rgba(198,161,91,.15), rgba(17,26,40,.8) 58%); border-color: var(--linea); }
.au-et.abierta h3 { color: var(--oro-luz); }
.au-et.abierta .au-et-nodo i { background: var(--oro-luz); box-shadow: 0 0 0 4px var(--cielo), 0 0 14px rgba(232,206,150,.85); }

/* los casos típicos, en fichas */
.au-casos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(26px, 3vw, 36px); }
.au-caso-chip {
  font-size: 13.5px; line-height: 1.45; color: var(--texto-c);
  border: 1px solid var(--linea-suave); border-radius: 999px; padding: 7px 15px;
  background: rgba(14,21,35,.5); transition: border-color .25s ease, color .25s ease;
}
.au-caso-chip:hover { border-color: var(--linea); color: var(--marfil); }

/* ================================================================
   ====================  SOFTWARE  ================================
   ================================================================ */

/* ---------------- 1 · la rejilla de los cuatro sistemas ---------------- */
.sw-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 26px); }
.sw-sis {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  padding: clamp(22px, 2.3vw, 30px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.sw-sis::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, var(--oro-luz) 0%, var(--oro) 44%, rgba(198,161,91,0) 100%);
  transform: scaleX(.16); transform-origin: left center; opacity: .7;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.sw-rejilla .sw-sis:hover, .sw-rejilla .sw-sis:focus-within {
  transform: translateY(-5px); border-color: var(--linea);
  box-shadow: 0 26px 54px rgba(0,0,0,.5), 0 0 0 1px rgba(198,161,91,.12);
}
.sw-rejilla .sw-sis:hover::before, .sw-rejilla .sw-sis:focus-within::before { transform: scaleX(1); opacity: 1; }
.sw-sis .n { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--oro); }
.sw-sis h3 {
  font-family: var(--texto); font-weight: 500; font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: -.02em; color: var(--marfil); margin: 13px 0 10px; line-height: 1.24; text-wrap: balance;
}
.sw-sis > p { font-size: 15px; line-height: 1.6; color: var(--texto-c); text-wrap: pretty; }
.sw-sis > p b { color: var(--marfil); font-weight: 600; }
.sw-sis .ps-rotulo { margin-top: 13px; }

/* --- el marco común de las maquetas --- */
.sw-maq {
  margin-top: clamp(18px, 2vw, 24px); border: 1px solid var(--linea-ui); border-radius: 12px;
  background: linear-gradient(180deg, #0C1320, #090E18); overflow: hidden;
  font-family: var(--ui); line-height: 1.45;
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.92), 0 2px 0 rgba(242,234,219,.04) inset;
}
.sw-maq-cab {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border-bottom: 1px solid var(--linea-ui); background: rgba(242,234,219,.02);
}
.sw-maq-cab .puntos { display: flex; gap: 5px; flex: none; }
.sw-maq-cab .puntos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(242,234,219,.16); }
.sw-maq-cab .t {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sw-maq-cab .chip {
  margin-left: auto; flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oro); border: 1px solid var(--linea-oro);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.sw-maq-cuerpo { padding: 13px; min-width: 0; }

/* --- maqueta 1 · agenda clínica --- */
.sw-agenda { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.sw-ag-t { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #98A1B0; margin-bottom: 8px; }
.sw-slots { display: grid; gap: 5px; }
.sw-slot {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; align-items: center;
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--linea-ui); background: rgba(7,11,19,.5);
}
.sw-slot .hh { font-family: var(--mono); font-size: 10px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.sw-slot .nn { font-size: 12px; color: var(--texto-c); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-slot.ocupado { background: rgba(198,161,91,.11); border-color: rgba(198,161,91,.26); }
.sw-slot.ocupado .nn { color: #F5EEDF; font-weight: 500; }
.sw-slot.libre .nn { color: var(--texto-suave); font-style: italic; }
.sw-avisos { display: grid; gap: 6px; align-content: start; }
.sw-aviso {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--linea-ui); background: rgba(7,11,19,.5);
}
.sw-aviso .q { font-size: 11.5px; color: var(--texto-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-est {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 7px; white-space: nowrap; flex: none;
}
.sw-est.ok { color: var(--verde); border: 1px solid rgba(95,214,164,.28); background: rgba(95,214,164,.08); }
.sw-est.esp { color: var(--texto-suave); border: 1px solid var(--linea-ui); }
.sw-est.oro { color: var(--oro-luz); border: 1px solid var(--linea-oro); background: rgba(198,161,91,.08); }

/* --- maqueta 2 · la tarjeta en el teléfono --- */
.sw-wallet { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; }
.sw-tel {
  border: 1px solid var(--linea-fuerte); border-radius: 16px; padding: 7px;
  background: #05080E; box-shadow: 0 16px 40px -20px rgba(0,0,0,.95);
}
.sw-pase {
  border-radius: 11px; overflow: hidden; background: linear-gradient(170deg, #17223A, #0D1523);
  border: 1px solid rgba(242,234,219,.10);
}
.sw-pase-top { display: flex; align-items: center; gap: 7px; padding: 8px 9px; background: rgba(198,161,91,.14); border-bottom: 1px solid rgba(198,161,91,.2); }
.sw-pase-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--oro-luz); flex: none; box-shadow: 0 0 8px rgba(232,206,150,.8); }
.sw-pase-top span { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-luz); }
.sw-pase-c { padding: 10px 10px 9px; }
.sw-pase-k { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: #A9B1BF; }
.sw-pase-v { font-family: var(--mono); font-weight: 500; font-size: 26px; letter-spacing: -.04em; color: var(--marfil); line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sw-pase-fila { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(242,234,219,.10); }
.sw-pase-fila span { font-size: 9.5px; color: #A9B1BF; }
.sw-pase-fila b { font-size: 9.5px; color: var(--marfil); font-weight: 600; }
.sw-codigo-barras {
  height: 26px; margin: 9px 9px 10px; border-radius: 4px; background: #F2EADB;
  background-image: repeating-linear-gradient(90deg, #12161F 0 2px, transparent 2px 4px, #12161F 4px 5px, transparent 5px 9px, #12161F 9px 12px, transparent 12px 14px);
}
.sw-wallet-l { display: grid; gap: 9px; align-content: center; min-width: 0; }
.sw-pulso {
  display: inline-flex; align-items: center; gap: 8px; align-self: start;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--verde); border: 1px solid rgba(95,214,164,.26); background: rgba(95,214,164,.08);
  border-radius: 999px; padding: 4px 10px; line-height: 1.5;
}
.sw-pulso i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); flex: none; box-shadow: 0 0 8px rgba(95,214,164,.9); animation: sw-latir 2.4s ease-in-out infinite; }
@keyframes sw-latir { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.sw-paso-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; }
.sw-paso-mini i { width: 6px; height: 6px; border-radius: 50%; background: var(--oro); margin-top: 6px; flex: none; }
.sw-paso-mini span { font-size: 12px; line-height: 1.45; color: var(--texto-2); min-width: 0; text-wrap: pretty; }

/* --- maqueta 3 · membresía con cobro --- */
.sw-memb { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; align-items: start; }
.sw-credencial {
  border-radius: 11px; border: 1px solid rgba(198,161,91,.24); padding: 11px;
  background: linear-gradient(165deg, rgba(198,161,91,.14), rgba(13,21,35,.9) 55%); text-align: center;
}
.sw-qr { width: 100%; height: auto; display: block; border-radius: 5px; background: #F2EADB; padding: 5px; }
.sw-credencial .cn { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--marfil); line-height: 1.3; }
.sw-credencial .cs { margin-top: 3px; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: #A9B1BF; }
.sw-escalera { display: grid; gap: 7px; align-content: start; }
.sw-esc-p {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: center;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linea-ui); background: rgba(7,11,19,.5);
}
.sw-esc-p .nn { font-family: var(--mono); font-size: 9.5px; color: var(--texto-suave); }
.sw-esc-p .qq { font-size: 12px; color: var(--texto-c); min-width: 0; text-wrap: pretty; }
.sw-esc-p.hecho { border-color: rgba(95,214,164,.22); background: rgba(95,214,164,.06); }
.sw-esc-p.foco { border-color: rgba(198,161,91,.3); background: rgba(198,161,91,.10); }
.sw-esc-p.foco .qq { color: #F5EEDF; font-weight: 500; }

/* --- maqueta 4 · dashboard multiempresa --- */
.sw-dash { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 11px; }
.sw-dash-lat { border-right: 1px solid var(--linea-ui); padding-right: 10px; display: grid; gap: 3px; align-content: start; }
.sw-dash-lat .lt { font-size: 8.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #98A1B0; margin-bottom: 4px; }
.sw-emp {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: center;
  padding: 4px 6px; border-radius: 6px; font-size: 10.5px; color: var(--texto-2);
  white-space: nowrap; overflow: hidden;
}
.sw-emp i { width: 5px; height: 5px; border-radius: 50%; background: rgba(160,180,210,.42); flex: none; }
.sw-emp span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sw-emp.on { background: rgba(198,161,91,.12); color: var(--oro-luz); box-shadow: inset 0 0 0 1px rgba(198,161,91,.22); }
.sw-emp.on i { background: var(--oro); }
.sw-dash-main { display: grid; gap: 10px; align-content: start; min-width: 0; }
.sw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sw-tile { border: 1px solid var(--linea-ui); border-radius: 8px; padding: 8px; background: var(--panel-solid); min-width: 0; }
.sw-tile .k { font-size: 9px; color: var(--texto-suave); letter-spacing: .06em; line-height: 1.4; }
.sw-tile .v { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--marfil); letter-spacing: -.03em; margin-top: 3px; }
.sw-barras-mini { display: flex; align-items: flex-end; gap: 4px; height: 52px; padding: 9px 9px 0; border: 1px solid var(--linea-ui); border-radius: 8px; background: rgba(7,11,19,.5); }
.sw-barras-mini i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--oro), rgba(198,161,91,.22)); }

/* ---------------- 2 · construir o comprar ---------------- */
.sw-dec { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(18px, 2.2vw, 28px); align-items: stretch; }
.sw-defecto {
  padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; justify-content: center;
  border-radius: 14px; border: 1px solid var(--linea); background: linear-gradient(160deg, rgba(198,161,91,.13), rgba(17,26,40,.8) 56%);
  min-width: 0;
}
.sw-defecto .k { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.sw-defecto .grande {
  font-family: var(--display); font-weight: 400; font-size: clamp(38px, 5vw, 62px); line-height: 1;
  letter-spacing: -.02em; color: var(--oro-luz); margin: 14px 0 0;
  text-shadow: 0 0 26px rgba(198,161,91,.35);
}
.sw-defecto p { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--texto-c); text-wrap: pretty; max-width: 34ch; }
.sw-defecto p b { color: var(--marfil); font-weight: 600; }
.sw-llaves { display: grid; gap: clamp(10px, 1.2vw, 14px); align-content: start; min-width: 0; }
.sw-llaves-t { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.sw-llave {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 17px 19px; border-radius: 12px; border: 1px solid var(--linea-suave); background: rgba(14,21,35,.6);
  transition: border-color .3s ease, background .3s ease;
}
.sw-llave:hover { border-color: var(--linea); background: rgba(18,26,42,.7); }
.sw-llave .ll { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--linea-oro); background: rgba(198,161,91,.09); display: grid; place-items: center; color: var(--oro-luz); flex: none; }
.sw-llave .ll svg { width: 17px; height: 17px; }
.sw-llave b { display: block; font-size: 16px; font-weight: 600; color: var(--marfil); letter-spacing: -.012em; line-height: 1.3; }
.sw-llave span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--texto-c); text-wrap: pretty; }
.sw-veredicto {
  grid-column: 1 / -1; margin-top: 4px; padding: 15px 19px; border-radius: 12px;
  border: 1px dashed var(--linea-fuerte); background: rgba(7,11,19,.5);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
}
.sw-veredicto .m { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); white-space: nowrap; }
.sw-veredicto p { font-size: 15px; line-height: 1.55; color: var(--texto-c); min-width: 0; text-wrap: pretty; }
.sw-veredicto p b { color: var(--marfil); font-weight: 600; }

/* ---------------- 3 · el código es tuyo ---------------- */
.sw-codigo {
  border-radius: 16px; border: 1px solid var(--linea); overflow: hidden;
  background: linear-gradient(168deg, rgba(198,161,91,.10), rgba(12,19,32,.92) 48%);
  box-shadow: 0 34px 80px -40px rgba(0,0,0,.95);
}
.sw-cod-cab {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--linea-suave); background: rgba(7,11,19,.45);
}
.sw-ruta {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--mono); font-size: 12.5px; color: var(--texto-c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-ruta svg { width: 15px; height: 15px; flex: none; color: var(--oro); }
.sw-ruta b { color: var(--marfil); font-weight: 500; }
.sw-propietario {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro-luz); border: 1px solid var(--linea-oro); background: rgba(198,161,91,.1);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.sw-cod-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 44px); padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.2vw, 30px); align-items: center; }
.sw-cod-cuerpo h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08; letter-spacing: -.016em; color: var(--marfil); max-width: 14ch; text-wrap: balance;
}
.sw-cod-cuerpo h2 .pt { color: var(--oro-luz); text-shadow: 0 0 18px rgba(232,206,150,.7); }
.sw-cod-cuerpo > div > p { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--texto-c); max-width: 42ch; text-wrap: pretty; }
.sw-cod-cuerpo > div > p b { color: var(--marfil); font-weight: 600; }
.sw-acta { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 16px; }
.sw-acta li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.sw-acta .tick { width: 17px; height: 17px; flex: none; color: var(--oro); margin-top: 2px; }
.sw-acta b { display: block; font-size: 14.5px; font-weight: 600; color: var(--marfil); letter-spacing: -.01em; line-height: 1.35; }
.sw-acta span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }

/* ================================================================
   RESPONSIVE · de 320 a 2560 sin desbordes
   ================================================================ */
@media (max-width: 1180px) {
  .au-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-et:nth-child(1), .au-et:nth-child(2) { margin-top: 22px; }
  .au-et:nth-child(3), .au-et:nth-child(4) { margin-top: 0; }
  .sw-cod-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .sw-cod-cuerpo h2 { max-width: 20ch; }
}

@media (max-width: 1000px) {
  .au-comp { grid-template-columns: minmax(0, 1fr); }
  .au-triage { grid-template-columns: minmax(0, 1fr); }
  .sw-rejilla { grid-template-columns: minmax(0, 1fr); }
  .sw-dec { grid-template-columns: minmax(0, 1fr); }
  .sw-defecto p { max-width: 52ch; }
  .au-remate { grid-template-columns: minmax(0, 1fr); }
  .au-remate .ps-rotulo { justify-self: start; text-align: left; }
}

@media (max-width: 780px) {
  .sw-agenda { grid-template-columns: minmax(0, 1fr); }
  .sw-dash { grid-template-columns: minmax(0, 1fr); }
  .sw-dash-lat { border-right: none; border-bottom: 1px solid var(--linea-ui); padding: 0 0 10px; }
  .au-escala { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .au-escala .e-b { order: 3; }
  .au-escala .e-k:last-of-type { justify-self: end; }
}

@media (max-width: 620px) {
  .au-etapas { grid-template-columns: minmax(0, 1fr); }
  .au-et:nth-child(n) { margin-top: 0; }
  .sw-acta { grid-template-columns: minmax(0, 1fr); }
  .sw-wallet { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
  .sw-memb { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .sw-veredicto { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .au-r { grid-template-columns: 46px minmax(0, 1fr); row-gap: 6px; }
  .au-r .au-e { grid-column: 2; justify-self: start; }
}

@media (max-width: 460px) {
  .ps-h2 { font-size: clamp(25px, 7.4vw, 32px); }
  .au-col, .au-t { padding: 18px 16px; }
  .sw-sis { padding: 20px 17px; }
  .sw-wallet, .sw-memb { grid-template-columns: minmax(0, 1fr); }
  .sw-tel { max-width: 172px; }
  .sw-credencial { max-width: 148px; }
  .sw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-defecto .grande { font-size: clamp(32px, 11vw, 44px); }
  .sw-llave { grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 16px 16px; }
  .au-paso, .au-f { grid-template-columns: 28px minmax(0, 1fr); gap: 11px; }
  .au-ico { width: 28px; height: 28px; border-radius: 8px; }
  .au-ico svg { width: 15px; height: 15px; }
  .au-paso::before, .au-f::before { left: 13.5px; top: 26px; }
  .au-reg-cab { gap: 7px; }
  .au-reg-cab .vivo-c { margin-left: 0; }
}

@media (min-width: 1600px) {
  .sw-sis > p, .au-t li { font-size: 15.5px; }
}

/* quien prefiere menos movimiento, no lo tiene */
@media (prefers-reduced-motion: reduce) {
  .js-ps .ps-rev, .js-ps .ps-rev.ps-on {
    opacity: 1 !important; translate: none !important; transition: none !important;
  }
  .sw-rejilla .sw-sis:hover, .au-et:hover .au-et-carta { transform: none; }
  .sw-pulso i { animation: none; }
}