/* ============================================================
   EYUB' - sistemas.css
   ============================================================ */

/* ---------- Rejilla de sistemas POS ---------- */
.pos-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.pos-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 1.3rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  backdrop-filter: blur(12px);
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-alto) + 24px);
  transition: all var(--normal) var(--ease);
}

/* Arco orbital en la esquina */
.pos-tarjeta::after {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(11, 61, 145, .14);
  transition: transform var(--lento) var(--ease-out), border-color var(--normal) var(--ease);
}
.pos-tarjeta:hover::after { transform: scale(1.5); border-color: rgba(1, 28, 89, .28); }

.pos-tarjeta:hover {
  border-color: var(--borde-fuerte);
  transform: translateY(-5px);
  box-shadow: var(--sombra);
}
.pos-tarjeta:target {
  border-color: var(--azul-interactivo);
  box-shadow: 0 0 0 1px var(--azul-interactivo), 0 0 34px rgba(1, 28, 89, .25);
}

.pos-tarjeta__ico {
  position: relative;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  margin-bottom: 1rem;
  color: var(--acento);
  background: linear-gradient(150deg, rgba(18,107,255,.20), rgba(11,61,145,.08));
  border: 1px solid rgba(1, 28, 89, .26);
  transition: all var(--normal) var(--ease-out);
}
.pos-tarjeta:hover .pos-tarjeta__ico { color: #fff; background: var(--azul-interactivo); transform: rotate(-8deg); }

.pos-tarjeta h3 { position: relative; font-size: 1.18rem; margin-bottom: .5rem; }
.pos-tarjeta p  { position: relative; flex: 1; font-size: .88rem; color: var(--texto-sec); margin-bottom: 1.1rem; }

.pos-tarjeta__wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 650;
  color: var(--whatsapp);
  transition: gap var(--normal) var(--ease);
}
.pos-tarjeta__wa:hover { gap: .75rem; }

.pos-tarjeta--otro {
  border-style: dashed;
  background: transparent;
}
.pos-tarjeta--otro .pos-tarjeta__ico { color: var(--texto-ter); background: var(--superficie-2); border-color: var(--borde); }

/* ---------- Desarrollo a la medida ---------- */
.desarrollo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .3rem 1.6rem;
}

.desarrollo__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem .4rem;
  border-bottom: 1px solid var(--borde);
  transition: padding-left var(--normal) var(--ease);
}
.desarrollo__item:hover { padding-left: .8rem; }

.desarrollo__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  color: var(--acento);
  background: rgba(1, 28, 89, .11);
  border: 1px solid rgba(1, 28, 89, .22);
  transition: all var(--normal) var(--ease);
}
.desarrollo__item:hover .desarrollo__ico { color: #fff; background: var(--azul-interactivo); }
.desarrollo__item h4 { margin-bottom: .25rem; }
.desarrollo__item p  { font-size: .87rem; color: var(--texto-sec); }

/* ---------- Paquete completo ---------- */
.paquete {
  position: relative;
  display: grid;
  /* La nota de entrega pide mas sitio que el glifo al que
     sustituye: seis lineas con su descripcion no caben en cuatro
     dedos. Y arriba, no centrada: la nota y el titular empiezan a
     la misma altura, como en una hoja de pedido. */
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3.4rem);
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-fuerte);
  background:
    radial-gradient(700px 360px at 12% 0%, rgba(1, 28, 89, .18), transparent 64%),
    var(--superficie);
  overflow: hidden;
}
@media (max-width: 860px) {
  /* minmax(0,...) y no "1fr" a secas: 1fr es minmax(auto, 1fr), y
     ese auto es el ancho MINIMO DEL CONTENIDO. La nota de entrega
     no bajaba de su min-content, la columna crecia por encima del
     relleno y la nota se salia por la derecha. El overflow:hidden
     de la caja la recortaba en silencio, asi que la pagina nunca
     llegaba a desbordarse y el fallo no aparecia en las medidas:
     solo mirando la captura. */
  .paquete { grid-template-columns: minmax(0, 1fr); }
  .entrega { padding: clamp(1rem, 3.5vw, 1.5rem); }
}


@keyframes flotar {
  0%, 100% { transform: translateY(-8px); }
  50%      { transform: translateY(8px); }
}


/* ============================================================
   MODULO SISTEMAS 2026  ·  capturas del documento de propuesta
   ============================================================ */

/* ---------- Marco de captura (ventana de navegador) ---------- */
.marco {
  padding: .55rem .55rem .6rem;
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.marco__barra {
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .1rem .35rem .55rem;
}
.marco__barra span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--borde-fuerte);
}
.marco__barra span:first-child { background: #f87171; }
.marco__barra span:nth-child(2) { background: #fbbf24; }
.marco__barra span:last-child  { background: #34d399; }
.marco__imagen img {
  display: block;
  width: 100%; height: auto;
  border-radius: calc(var(--radio-lg) - 8px);
}

/* Captura suelta dentro de una sección */
.captura { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.captura--ancha { max-width: 980px; margin-inline: auto; }

/* ---------- 4 · Tablero de control ---------- */
.tablero {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

.tablero__centro { min-width: 0; }

.tablero__lado {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .7rem;
  align-content: center;
}

.tablero__chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .68rem .9rem;
  font-size: .88rem;
  font-weight: 650;
  color: var(--texto);
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: var(--superficie);
  transition: all var(--normal) var(--ease);
}
.tablero__chip:hover {
  border-color: rgba(1, 28, 89, .45);
  color: var(--acento);
  transform: translateY(-2px);
}
.tablero__chip-ico {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--acento);
  background: rgba(1, 28, 89, .11);
}

/* Pantalla central decorativa: dibujada con CSS, sin imagen */
.pantalla {
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-fuerte);
  background: #fff;
  box-shadow: 0 30px 70px rgba(6, 27, 58, .16);
  overflow: hidden;
}
[data-tema="oscuro"] .pantalla { background: var(--superficie); }

.pantalla__barra {
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--borde);
}
.pantalla__barra span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--borde-fuerte);
}
.pantalla__barra em {
  margin-left: .5rem;
  font-style: normal;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .06em;
  color: var(--texto-ter);
}

.pantalla__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  padding: .95rem .95rem .2rem;
}
.pantalla__kpi {
  padding: .6rem .7rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--fondo-alt);
}
.pantalla__kpi small {
  display: block;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-ter);
}
.pantalla__kpi strong {
  font-size: .92rem;
  font-weight: 750;
  color: var(--texto);
}

.pantalla__grafica {
  display: flex;
  align-items: flex-end;
  gap: clamp(.3rem, 1.4vw, .55rem);
  height: 120px;
  padding: 1rem .95rem .2rem;
}
.pantalla__grafica i {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--azul-interactivo), rgba(11, 61, 145, .55));
  opacity: .85;
}
.pantalla__grafica i:nth-child(2n) { opacity: .55; }

.pantalla__filas {
  display: grid;
  gap: .5rem;
  padding: .95rem .95rem 1.05rem;
}
.pantalla__filas span {
  height: 10px;
  border-radius: var(--radio-full);
  background: var(--fondo-alt);
  border: 1px solid var(--borde);
}
.pantalla__filas span:nth-child(2) { width: 82%; }
.pantalla__filas span:last-child  { width: 64%; }

.tablero__frase {
  margin-top: 1.4rem;
  text-align: center;
  font-size: 1.02rem;
  color: var(--texto-sec);
}
.tablero__frase strong { color: var(--texto); }

@media (min-width: 960px) {
  .tablero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr) minmax(0, .85fr); }
  .tablero__lado { grid-template-columns: 1fr; }
}

/* ---------- 5 · Facturación electrónica ---------- */
.fel {
  display: grid;
  gap: clamp(1.8rem, 3.5vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

.fel__opciones { display: grid; gap: 1rem; }

.fel__opcion {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.3rem;
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde);
  background: var(--superficie);
  transition: all var(--normal) var(--ease);
}
.fel__opcion:hover {
  border-color: var(--borde-fuerte);
  transform: translateX(6px);
  box-shadow: var(--sombra);
}

.fel__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  color: var(--acento);
  background: rgba(1, 28, 89, .11);
  border: 1px solid rgba(1, 28, 89, .22);
}
.fel__opcion h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.fel__opcion p  { font-size: .9rem; color: var(--texto-sec); }

.fel__captura { margin: 0; }
.fel__dato {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .55rem 1.1rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--texto);
  border-radius: var(--radio-full);
  border: 1px solid rgba(1, 28, 89, .3);
  background: rgba(1, 28, 89, .08);
}
.fel__dato .ico { color: var(--whatsapp); }

@media (min-width: 900px) {
  .fel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* Flujo VENTA -> SISTEMA EYUB' -> FEL -> CERTIFICADOR -> SAT */
.flujo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem .7rem;
}
.flujo__chip {
  padding: .6rem 1.15rem;
  font-size: .86rem;
  font-weight: 700;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  transition: all var(--normal) var(--ease);
}
.flujo__chip:hover { border-color: var(--acento); color: var(--acento); transform: translateY(-2px); }
.flujo__chip--nucleo {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--azul-600), var(--azul-interactivo));
  box-shadow: 0 8px 22px rgba(1, 28, 89, .35);
}
.flujo__chip--nucleo:hover { color: #fff; }
.flujo__chip--sat {
  border-color: rgba(6, 27, 58, .35);
  background: var(--azul-950);
  color: #fff;
}
.flujo__chip--sat:hover { color: #fff; }
.flujo__flecha { color: var(--texto-ter); }


.marco--cuadro { width: 100%; max-width: 380px; }

/* ---------- 9 · Inteligencia artificial (sección inmersiva) ---------- */
.ia-seccion { color: rgba(255, 255, 255, .82); }
.ia-seccion h2 { color: #fff; }
.ia-seccion .lede { color: rgba(255, 255, 255, .72); }
.ia-seccion .etiqueta-seccion { color: #8db4ff; }

.ia-cuerpo {
  display: grid;
  gap: clamp(1.8rem, 3.5vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ia-flujo {
  display: grid;
  justify-items: center;
  gap: .9rem;
}

.ia-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.ia-datos span {
  padding: .5rem 1rem;
  font-size: .8rem;
  font-weight: 650;
  border-radius: var(--radio-full);
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
}

.ia-flecha { color: rgba(255, 255, 255, .55); }

.ia-nucleo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.7rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  border-radius: var(--radio-full);
  background: linear-gradient(120deg, #7c3aed, #4f46e5);
  box-shadow: 0 14px 40px rgba(124, 58, 237, .45);
}
.ia-nucleo__ico {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}

.ia-pasos { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ia-pasos span {
  padding: .5rem 1.1rem;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #e9d5ff;
  border-radius: var(--radio-full);
  border: 1px solid rgba(196, 181, 253, .35);
  background: rgba(139, 92, 246, .14);
}

.marco--oscuro {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 30px 70px rgba(2, 10, 26, .5);
}
.marco--oscuro .marco__barra span { background: rgba(255, 255, 255, .28); }
.marco--oscuro .marco__barra span:first-child { background: #f87171; }
.marco--oscuro .marco__barra span:nth-child(2) { background: #fbbf24; }
.marco--oscuro .marco__barra span:last-child  { background: #34d399; }

.ia-captura { margin: 0; }

.ia-ejemplos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.ia-ejemplo {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: 1.1rem 1.15rem;
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
}
.ia-ejemplo .ico { color: #c4b5fd; flex-shrink: 0; margin-top: .15rem; }
.ia-ejemplo p { font-size: .9rem; font-weight: 550; color: rgba(255, 255, 255, .88); }

.ia-cierre {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  text-align: center;
}
.ia-frase {
  margin-bottom: 1.3rem;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 750;
  color: #fff;
}

@media (min-width: 900px) {
  .ia-cuerpo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}


/* ============================================================
   VARIANTES NOCTURNAS  ·  secciones inversas de esta página
   ============================================================ */

/* Tarjetas de sectores */
.inverso .pos-tarjeta {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
}
.inverso .pos-tarjeta:hover { border-color: rgba(134, 180, 255, .42); }
.inverso .pos-tarjeta::after { border-color: rgba(134, 180, 255, .20); }
.inverso .pos-tarjeta p { color: rgba(255, 255, 255, .70); }

/* Opciones de FEL y flujo de factura */
.inverso .fel__opcion {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
}
.inverso .fel__opcion p { color: rgba(255, 255, 255, .70); }
.inverso .fel__dato {
  color: #fff;
  border-color: rgba(134, 180, 255, .30);
  background: rgba(1, 28, 89, .14);
}
.inverso .flujo__chip {
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .06);
}
.inverso .flujo__flecha { color: rgba(255, 255, 255, .50); }

/* Paquete completo */
.inverso .paquete {
  border-color: rgba(134, 180, 255, .24);
  background:
    radial-gradient(700px 360px at 12% 0%, rgba(1, 28, 89, .22), transparent 64%),
    rgba(255, 255, 255, .04);
}

/* Lista de desarrollo a la medida */
.inverso .desarrollo__item { border-bottom-color: rgba(255, 255, 255, .12); }
.inverso .desarrollo__item p { color: rgba(255, 255, 255, .68); }
.inverso .desarrollo__ico {
  color: #93C5FD;
  background: rgba(1, 28, 89, .16);
  border-color: rgba(134, 180, 255, .28);
}


/* ============================================================
   IA EN SECCIÓN CLARA  ·  reestilo de la captura 9
   (antes vivía sobre azul; ahora alterna en claro)
   ============================================================ */
/* La seccion de IA nacio sobre azul y, al alternar los ritmos,
   quedo sobre papel. Estas dos lineas se convirtieron: el color
   base y el del titular no, y salian en blanco sobre blanco. */
.ia-seccion { color: var(--texto-sec); }
.ia-seccion h2 { color: var(--texto); }
.ia-seccion .lede { color: var(--texto-sec); }
.ia-seccion .etiqueta-seccion { color: var(--acento); }

.ia-datos span {
  color: var(--texto-sec);
  border: 1px solid rgba(1, 28, 89, .22);
  background: rgba(1, 28, 89, .07);
}
.ia-flecha { color: var(--texto-ter); }

.ia-pasos span {
  color: var(--azul-800);
  border-color: rgba(139, 92, 246, .30);
  background: rgba(139, 92, 246, .09);
}

.ia-ejemplo {
  border: 1px solid var(--borde);
  background: var(--superficie);
  box-shadow: var(--sombra-sm);
}
.ia-ejemplo .ico { color: #7C3AED; }
.ia-ejemplo p { color: var(--texto-sec); }

.ia-frase { color: var(--texto); }


/* ============================================================
   NUEVAS SECCIONES OSCURAS DE ESTA PÁGINA  ·  tras invertir
   ============================================================ */

/* Tablero de control */
.inverso .tablero__chip {
  color: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
}
.inverso .tablero__chip-ico {
  color: #93C5FD;
  background: rgba(1, 28, 89, .18);
}
.inverso .tablero__frase { color: rgba(255, 255, 255, .78); }
.inverso .tablero__frase strong { color: #fff; }


/* ============================================================
   EL TALLER DE SECTORES
   ------------------------------------------------------------
   Sustituye a la captura ancha con catorce fichas debajo.

   El problema de aquello no era feo, era mudo: la captura era la
   misma para los catorce sectores, asi que no decia nada de
   ninguno, y catorce fichas identicas en rejilla no se comparan,
   se hojean. Aqui la lista se recorre de un vistazo y la mitad
   derecha responde a lo que estas señalando.
   ============================================================ */
.taller {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}


/* ---------- La lista ---------- */
.taller__lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--borde);
}

.sector-op {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .72rem .6rem .72rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--texto-sec);
  transition: color var(--rapido) var(--ease),
              background var(--rapido) var(--ease),
              box-shadow var(--rapido) var(--ease);
}

.sector-op__n {
  font-family: var(--fuente-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--texto-ter);
  transition: color var(--rapido) var(--ease);
}
.sector-op__ico {
  display: grid;
  place-items: center;
  color: var(--texto-ter);
  transition: color var(--rapido) var(--ease);
}
.sector-op__t { font-weight: 600; font-size: .95rem; line-height: 1.2; }

/* La flecha solo aparece en el activo: dice "esto es lo que
   estas viendo a la derecha" sin escribirlo. */
.sector-op__flecha {
  display: grid;
  place-items: center;
  color: var(--marca);
  opacity: 0;
  transform: translateX(-7px);
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease-out);
}

.sector-op:hover { color: var(--texto); background: var(--superficie-2); }
.sector-op:hover .sector-op__ico { color: var(--texto-sec); }

.sector-op.activo {
  color: var(--texto);
  /* El filete rojo del estado activo, igual que en la barra de
     movil y en los rotulos de seccion. */
  box-shadow: inset 2px 0 0 var(--marca);
}
.sector-op.activo .sector-op__ico,
.sector-op.activo .sector-op__n { color: var(--marca); }
.sector-op.activo .sector-op__flecha { opacity: 1; transform: none; }

.sector-op--otro .sector-op__t { font-style: italic; }


/* ---------- La vista ---------- */
.taller__vista {
  /* Se queda quieta mientras se recorre la lista: si se fuera con
     el scroll habria que mirar arriba y abajo a la vez. */
  position: sticky;
  top: calc(var(--nav-alto) + 1.4rem);
}
.taller__vista .captura { margin: 0; }

.taller .marco__barra em { font-style: normal; }
.taller .marco__barra b { font-weight: 600; color: inherit; }

.taller__panel {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--borde);
  min-height: 168px;
}
.sector-panel[hidden] { display: none; }
.sector-panel {
  animation: sector-entra .34s var(--ease-out) both;
}
.sector-panel h3 { margin-bottom: .45rem; }
.sector-panel p {
  color: var(--texto-sec);
  max-width: 54ch;
  margin-bottom: 1.15rem;
}
@keyframes sector-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ---------- Movil ----------
   La captura primero -es lo que se entiende de un golpe- y la
   lista debajo, ya sin nada pegado. */
@media (max-width: 900px) {
  .taller { grid-template-columns: 1fr; gap: 1.6rem; }
  .taller__vista { position: static; order: -1; }
  .taller__panel { min-height: 0; }
  .sector-op { padding-block: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sector-panel { animation: none; }
}


/* ============================================================
   LA FABRICA DE SOFTWARE  ·  segunda mitad del modulo
   ------------------------------------------------------------
   Lo que se construye por encargo -aplicaciones moviles, paginas
   web, software desde cero, plataformas- estaba resuelto con una
   lista de nueve lineas al final de la pagina. Se leia como una
   nota al pie de lo verdaderamente importante, cuando es la
   mitad del negocio.

   Ahora cada encargo tiene su ficha: cabecera monoespaciada con
   su numero, la fotografia dentro de la ventana del navegador
   -que es el idioma con el que este modulo ensena software-, el
   lema, los cuatro puntos y el boton para encargarlo.
   ============================================================ */
/* Dos columnas y no las que quepan: son cuatro encargos, y con
   auto-fit el cuarto se quedaba solo en una fila para el. Cuatro
   en dos filas de dos se leen como un conjunto; tres arriba y uno
   abajo se leen como un descuido. */
.fabrica {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 2.4vw, 1.9rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
@media (min-width: 780px) {
  .fabrica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.obra {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  transition: border-color var(--normal) var(--ease),
              background var(--normal) var(--ease),
              translate var(--normal) var(--ease-out);
}
.obra:hover {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .07);
  translate: 0 -4px;
}

/* --- La cabecera: numero y rotulo, como la pestana de un
       expediente. El rojo entra solo en la ficha senalada. --- */
.obra__cab {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.obra__n {
  font-family: var(--fuente-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .42);
  font-variant-numeric: tabular-nums;
  transition: color var(--normal) var(--ease);
}
.obra:hover .obra__n { color: var(--marca); }

.obra__rotulo {
  font-family: var(--fuente-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
}

/* --- La ventana con la fotografia --- */
.obra__marco {
  margin: 0;
  padding: .5rem .5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.obra__marco .marco__imagen {
  overflow: hidden;
  border-radius: 6px;
}
.obra__marco .marco__imagen img {
  border-radius: 0;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: scale .7s var(--ease-out);
}
.obra:hover .obra__marco .marco__imagen img { scale: 1.05; }
.obra__marco .marco__barra em {
  margin-left: .4rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--fuente-mono);
  font-size: .58rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .40);
}
.obra__marco .marco__barra span { width: 8px; height: 8px; }

/* --- El cuerpo --- */
.obra__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.2rem 1.2rem 1.35rem;
}
.obra__cuerpo h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -.03em;
  margin-bottom: .3rem;
}
.obra__lema {
  font-family: var(--fuente-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.3;
  color: #fff;
  margin-bottom: .7rem;
}
.obra__texto {
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .70);
  margin-bottom: 1rem;
}

.obra__items {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: .5rem;
  /* Empuja el boton al fondo: con cuatro fichas de alto distinto,
     los botones desalineados se leen como un descuido. */
  flex: 1;
  align-content: start;
}
.obra__items li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}
/* Los visos van apagados de serie: dieciseis marcas rojas a la
   vez dejan de senalar nada. Solo se encienden los de la ficha
   que se esta senalando, que es cuando significan algo. */
.obra__items .ico {
  color: rgba(255, 255, 255, .40);
  flex-shrink: 0;
  margin-top: .2rem;
  transition: color var(--normal) var(--ease);
}
.obra:hover .obra__items .ico { color: var(--marca); }

/* El boton no ocupa la fila entera: cuatro barras verdes de lado
   a lado pesan mas que las cuatro fotografias. */
.obra__cuerpo .btn { align-self: flex-start; }


/* ------------------------------------------------------------
   TAMBIEN CONSTRUIMOS  ·  el listado largo, en su sitio
   ------------------------------------------------------------ */
.tambien {
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.tambien__titulo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
  font-family: var(--fuente-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.tambien__titulo .ico { color: var(--marca); }

.tambien__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.tambien__lista li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: all var(--normal) var(--ease);
  cursor: default;
}
.tambien__lista li:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .07);
}
.tambien__lista .ico { color: rgba(255, 255, 255, .45); }
.tambien__lista li:hover .ico { color: #fff; }


/* ------------------------------------------------------------
   CAPACIDADES  ·  donde corre lo que hacemos
   ------------------------------------------------------------ */
.capacidades {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2rem);
  border-top: var(--filete);
}
.capacidades span {
  padding: .5rem 1rem;
  font-family: var(--fuente-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-sec);
  border: 1px solid var(--borde);
  transition: all var(--normal) var(--ease);
}
.capacidades span:hover {
  color: var(--texto);
  border-color: var(--borde-fuerte);
}

@media (prefers-reduced-motion: reduce) {
  .obra,
  .obra__marco .marco__imagen img { transition: none; }
}


/* ============================================================
   EL EJE  ·  ERP + CRM, las dos mitades de la empresa
   ------------------------------------------------------------
   Habia dos tarjetas flanqueando un logotipo. Es la forma en que
   cualquier sitio dibuja "dos cosas y una marca", y no decia
   nada de lo unico que importa aqui: que las dos mitades dejan
   de ir cada una por su lado.

   Este dibujo si lo dice. Lo de dentro entra por la izquierda,
   lo de fuera por la derecha, y las doce lineas convergen sobre
   la misma columna. Los hilos se dibujan hacia el centro segun
   entra la seccion en pantalla, escalonados: se ve como se
   juntan, no solo que estan juntos.
   ============================================================ */
.eje {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    'rotIzq columna rotDer'
    'ladoIzq columna ladoDer';
  align-items: start;
  /* Sin separacion y con la columna del centro a cero: los dos
     lados se tocan exactamente en el eje, y los hilos llegan
     hasta el en vez de quedarse a cien pixeles con el punto
     colgando en el aire. */
  column-gap: 0;
  margin-top: clamp(2.6rem, 5vw, 4rem);
}

/* --- Los rotulos de cada lado --- */
/* Los dos lados se tocan en el eje, asi que los rotulos necesitan
   su propio margen: sin el se leia "ERPCRM" de corrido. */
.eje__rotulo { margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: .25rem; }
.eje__rotulo--izq {
  grid-area: rotIzq;
  text-align: right;
  align-items: flex-end;
  padding-right: clamp(1.4rem, 3vw, 2.6rem);
}
.eje__rotulo--der {
  grid-area: rotDer;
  text-align: left;
  align-items: flex-start;
  padding-left: clamp(1.4rem, 3vw, 2.6rem);
}

.eje__sigla {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: #fff;
}
.eje__que {
  font-family: var(--fuente-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
}

/* --- La columna del centro --- */
/* La columna no ocupa ancho: es solo la percha de la que cuelgan
   la linea y el sello, que se dibujan centrados sobre la juntura
   de los dos lados y se salen por los dos. */
.eje__columna {
  grid-area: columna;
  position: relative;
  align-self: stretch;
  width: 0;
  z-index: 1;
}
/* La linea vertical: roja, una sola, de arriba abajo. Es el eje
   sobre el que se apoya todo el dibujo. */
.eje__columna::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--marca) 12%,
    var(--marca) 88%,
    transparent 100%);
}

.eje__nucleo {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(76px, 10vw, 124px);
  height: clamp(76px, 10vw, 124px);
  border-radius: 50%;
  /* El fondo opaco recorta la linea roja por detras del sello:
     sin el, la linea le cruzaría la cara. */
  background: var(--azul-950);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 9px var(--azul-950);
}
.eje__nucleo img,
.eje__nucleo svg { width: 72%; height: auto; }

/* --- Las doce lineas --- */
.eje__lado { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.eje__lado--izq { grid-area: ladoIzq; }

/* El lado derecho baja media fila.

   Alineados uno frente a otro, el hilo de la izquierda y el de la
   derecha se leian como una sola linea recta: parecia que Ventas
   estaba emparejado con Clientes, y no lo esta. Desfasados, cada
   hilo llega al eje por su cuenta y el dibujo dice lo que tiene
   que decir: doce cosas distintas que van al mismo sitio. */
.eje__lado--der {
  grid-area: ladoDer;
  margin-top: 2.3rem;
}

.eje__fila {
  position: relative;
  display: grid;
  align-items: center;
  gap: .1rem 1rem;
  padding: .7rem 0;
  min-height: 62px;
}
/* El nombre ocupa una columna de ancho fijo pegada al borde
   exterior y el hilo se queda con TODO lo que sobra hasta el eje.
   Al reves -que es como estaba- los nombres se apinaban contra el
   centro, los hilos median cuatro dedos y los margenes exteriores
   quedaban vacios: no habia recorrido que ver. */
.eje__lado--izq .eje__fila {
  grid-template-columns: minmax(0, 17rem) minmax(2.5rem, 1fr);
  grid-template-areas: 'nombre hilo' 'glosa hilo';
  text-align: right;
  padding-right: 0;
}
.eje__lado--der .eje__fila {
  grid-template-columns: minmax(2.5rem, 1fr) minmax(0, 17rem);
  grid-template-areas: 'hilo nombre' 'hilo glosa';
  text-align: left;
}
/* El hilo no arranca pegado a la palabra */
.eje__lado--izq .eje__hilo { margin-left: 1rem; }
.eje__lado--der .eje__hilo { margin-right: 1rem; }

.eje__nombre {
  grid-area: nombre;
  font-family: var(--fuente-titulo);
  font-size: clamp(.98rem, 1.6vw, 1.22rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: rgba(255, 255, 255, .92);
  transition: color var(--normal) var(--ease);
}
.eje__glosa {
  grid-area: glosa;
  font-size: .78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .48);
  transition: color var(--normal) var(--ease);
}

/* El hilo que va hacia el centro. Nace con longitud cero y se
   estira hacia el eje cuando la seccion entra en pantalla. */
.eje__hilo {
  grid-area: hilo;
  align-self: center;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .28);
  scale: 0 1;
  transition: background var(--normal) var(--ease);
}
.eje__lado--izq .eje__hilo { transform-origin: left center; }
.eje__lado--der .eje__hilo { transform-origin: right center; }

/* El punto donde el hilo toca el eje.

   Cuelga de la FILA y no del hilo: el hilo se escala de cero a uno
   para dibujarse, y un hijo suyo llegaria aplastado en horizontal.
   La fila no se escala nunca. */
.eje__fila::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  translate: 0 -50%;
  transition: background var(--normal) var(--ease), scale var(--normal) var(--ease-out);
}
.eje__lado--izq .eje__fila::after { right: 0; }
.eje__lado--der .eje__fila::after { left: 0; }

/* El dibujo se traza cuando la seccion entra: los hilos crecen
   hacia el eje uno detras de otro. */
.eje.visible .eje__hilo {
  animation: eje-hilo .6s var(--ease-out) both;
  animation-delay: var(--retraso, 0ms);
}
@keyframes eje-hilo {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

/* Al senalar una linea, esa linea se enciende y su hilo se pone
   rojo: el recorrido de ese dato hasta el eje. */
.eje__fila:hover .eje__nombre { color: #fff; }
.eje__fila:hover .eje__glosa  { color: rgba(255, 255, 255, .78); }
.eje__fila:hover .eje__hilo   { background: var(--marca); }
.eje__fila:hover::after       { background: var(--marca); scale: 1.7; }

/* --- La pantalla, debajo del dibujo --- */
.eje__pantalla {
  margin: clamp(2.8rem, 5vw, 4rem) auto 0;
  max-width: 880px;
  text-align: center;
}
.eje__pantalla .marco__barra em {
  margin-left: .45rem;
  font-family: var(--fuente-mono);
  font-size: .6rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.eje__pantalla figcaption {
  max-width: 60ch;
  margin: 1.2rem auto 0;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}

/* ------------------------------------------------------------
   En movil no hay sitio para dos lados: el eje se pone de canto
   a la izquierda y las doce lineas cuelgan de el en una sola
   columna. Sigue siendo el mismo dibujo, leido de arriba abajo.
   ------------------------------------------------------------ */
@media (max-width: 800px) {
  .eje {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'columna rotIzq'
      'columna ladoIzq'
      'columna rotDer'
      'columna ladoDer';
    column-gap: 1.1rem;
  }
  .eje { column-gap: 1.1rem; }
  .eje__columna { width: 40px; }
  .eje__nucleo {
    position: sticky;
    top: 45vh;
    translate: 0 0;
    left: auto;
    width: 40px; height: 40px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 0 6px var(--azul-950);
  }
  .eje__lado--izq .eje__hilo,
  .eje__lado--der .eje__hilo { margin: 0; }

  /* De canto, los dos lados cuelgan del mismo borde izquierdo:
     el punto se va con ellos. Se quedaba en el filo derecho de la
     pantalla, a un palmo del eje al que deberia tocar. */
  .eje__lado--izq .eje__fila::after,
  .eje__lado--der .eje__fila::after { left: 0; right: auto; }
  .eje__rotulo--izq,
  .eje__rotulo--der { text-align: left; align-items: flex-start; }
  .eje__rotulo--der { margin-top: 2rem; }

  .eje__lado--izq .eje__fila,
  .eje__lado--der .eje__fila {
    grid-template-columns: 1.1rem minmax(0, 1fr);
    grid-template-areas: 'hilo nombre' 'hilo glosa';
    text-align: left;
    min-height: 0;
    padding: .55rem 0;
  }
  .eje__lado--izq .eje__hilo,
  .eje__lado--der .eje__hilo {
    width: 1.1rem;
    justify-self: start;
    transform-origin: left center;
  }
  .eje__lado--izq .eje__hilo::after,
  .eje__lado--der .eje__hilo::after { left: 0; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .eje.visible .eje__hilo { animation: none; scale: 1 1; }
}


/* ============================================================
   LA ESCALERA  ·  los tres planes
   ------------------------------------------------------------
   Eran tres tarjetas en paralelo con su insignia de "mas
   solicitado" flotando encima: la tabla de precios de cualquier
   sitio de software del mundo.

   Pero estos planes no son tres opciones paralelas. Son tres
   peldanos y cada uno contiene al anterior -el B trae todo el A,
   el C todo el B-. Tres bandas apiladas dicen eso; tres columnas
   lo esconden. Y la letra a cuerpo de cartel, llenandose segun se
   sube, es la escalera dibujada sin tener que explicarla.
   ============================================================ */
.escalera {
  display: grid;
  gap: 1px;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  /* Un solo filete entre bandas: el hueco de 1px deja ver el
     fondo y hace de linea sin pintar ninguna. */
  background: rgba(255, 255, 255, .16);
  border-block: 1px solid rgba(255, 255, 255, .16);
}

.peldano {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.2rem, 2.5vw, 2rem);
  background: var(--azul-950);
  transition: background var(--normal) var(--ease), color var(--normal) var(--ease);
}

/* El filete rojo que entra por la izquierda. El plan destacado lo
   lleva puesto de serie: es la unica marca roja de la pantalla y
   senala el que la mayoria elige. */
.peldano::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--marca);
  scale: 1 0;
  transform-origin: center top;
  transition: scale .45s var(--ease-out);
}
.peldano--elegido::before,
.peldano:hover::before { scale: 1 1; }

/* --- La letra --- */
.peldano__letra {
  font-family: var(--fuente-titulo);
  font-size: clamp(3.6rem, 9vw, 7rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
  /* Se dibuja con contorno y se va rellenando peldano a peldano.
     Se declara aqui la de en medio y las otras dos la corrigen. */
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .38);
  transition: -webkit-text-stroke-color var(--normal) var(--ease),
              -webkit-text-fill-color var(--normal) var(--ease);
}
.peldano:nth-child(1) .peldano__letra {
  -webkit-text-stroke-color: rgba(255, 255, 255, .24);
}
.peldano:nth-child(2) .peldano__letra {
  -webkit-text-fill-color: rgba(255, 255, 255, .07);
}
.peldano:nth-child(3) .peldano__letra {
  -webkit-text-stroke-width: 0;
  -webkit-text-fill-color: rgba(255, 255, 255, .20);
}

/* --- El cuerpo --- */
/* Con align-items:baseline la etiqueta se alineaba con la primera
   linea del bloque -el "PLAN A" en monoespaciada- y quedaba
   flotando arriba, lejos del nombre al que acompana. Al final del
   bloque queda a la altura del titulo, que es donde pertenece. */
.peldano__cab {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: .6rem;
}
.peldano__tag { margin-bottom: .3rem; }
.peldano__nivel {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .15rem;
  font-family: var(--fuente-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
}
.peldano__insignia {
  padding: .18rem .5rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: #fff;
  background: var(--marca);
}
.peldano__cab h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  letter-spacing: -.035em;
  margin: 0;
}
.peldano__tag {
  margin: 0;
  padding: .36rem .75rem;
  font-family: var(--fuente-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .30);
}

/* La descripcion es lo que decide la eleccion: era el texto mas
   pequeno y mas apagado de la banda. Sube de cuerpo y de tono. */
.peldano__para {
  margin: 0 0 .9rem;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .84);
}
.peldano__para strong { color: #fff; }

/* Lo que hereda del peldano de abajo. Va por delante de la lista
   y con la flecha: es lo que hace que esto sea una escalera. */
.peldano__hereda {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .8rem;
  font-family: var(--fuente-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}
.peldano__hereda .ico { rotate: 180deg; color: var(--marca); }

/* Las prestaciones, en una linea corrida y no en columna de
   visos: seis visos por banda y tres bandas son dieciocho marcas
   que no senalan nada. */
.peldano__items {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  font-family: var(--fuente-mono);
  /* Las versalitas espaciadas ya se leen pequenas de por si: al
     cuerpo anterior habia que acercarse a la pantalla. */
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}
.peldano__items li { display: flex; align-items: center; gap: .9rem; }
.peldano__items li::after {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.peldano__items li:last-child::after { display: none; }

.peldano__accion { justify-self: end; }

/* --- La vuelta a papel ---

   La banda no se repinta color a color: se le dan la vuelta a los
   TOKENS y todo lo de dentro se corrige solo. Escribiendo cada
   color a mano quedaban cabos sueltos -la descripcion pedia
   var(--texto-sec), que dentro de .inverso sigue siendo el gris
   CLARO, y se quedaba casi blanca sobre el papel-. Con los tokens
   dados la vuelta ese fallo no puede darse. */
@media (hover: hover) and (pointer: fine) {
  .peldano:hover {
    background: #fff;

    --texto:        #011C59;
    --texto-sec:    #4A5B7D;
    --texto-ter:    #7C8AA6;
    --borde:        rgba(1, 28, 89, .16);
    --borde-fuerte: rgba(1, 28, 89, .34);
    --acento:       #011C59;
    color: var(--texto-sec);
  }
  .peldano:hover .peldano__letra {
    -webkit-text-stroke-color: rgba(1, 28, 89, .30);
    -webkit-text-fill-color: rgba(1, 28, 89, .10);
  }
  .peldano:nth-child(3):hover .peldano__letra {
    -webkit-text-fill-color: rgba(1, 28, 89, .16);
  }
  .peldano:hover .peldano__nivel  { color: var(--texto-ter); }
  .peldano:hover .peldano__cab h3 { color: var(--texto); }
  .peldano:hover .peldano__tag {
    color: var(--azul-800);
    border-color: var(--borde-fuerte);
  }
  .peldano:hover .peldano__para        { color: var(--texto-sec); }
  .peldano:hover .peldano__para strong { color: var(--texto); }
  .peldano:hover .peldano__hereda      { color: var(--azul-800); }
  .peldano:hover .peldano__items       { color: var(--azul-800); }
  .peldano:hover .btn--fantasma {
    color: var(--texto);
    border-color: var(--borde-fuerte);
  }
}

@media (max-width: 860px) {
  .peldano {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'letra cuerpo'
      'accion accion';
    gap: 1rem;
  }
  .peldano__letra  { grid-area: letra; align-self: start; }
  .peldano__cuerpo { grid-area: cuerpo; }
  .peldano__accion { grid-area: accion; justify-self: stretch; margin-top: .4rem; }
  .peldano__accion .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .peldano, .peldano::before, .peldano__letra { transition: none; }
}


/* ============================================================
   LA NOTA DE ENTREGA  ·  el paquete completo
   ------------------------------------------------------------
   Habia una circunferencia enorme y vacia con un icono de monitor
   en el centro: media pieza de espacio muerto haciendo de
   ilustracion.

   Lo que hacia falta no era una ilustracion sino la respuesta a
   "y esto que trae". Una nota de entrega la contesta, y ademas es
   un objeto que existe de verdad: se reconoce antes de leerla, y
   el argumento -aqui va todo, no falta nada- se ve sin escribirlo.
   ============================================================ */
.entrega {
  position: relative;
  margin: 0;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--fondo);
  border: 1px solid var(--borde);
  box-shadow: 0 26px 60px rgba(1, 28, 89, .13);
}

/* El borde superior perforado, como el de un talonario. */
.entrega::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    to right,
    var(--marca) 0 10px,
    transparent 10px 18px);
}

.entrega__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--borde);
}
.entrega__marca {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--marca);
}
.entrega__doc {
  font-family: var(--fuente-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-ter);
}

.entrega__lista { list-style: none; margin: 0; padding: 0; }
.entrega__lista li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .8rem 0;
  border-bottom: 1px dashed var(--borde);
}
.entrega__lista li:last-child { border-bottom: 0; }

.entrega__n {
  font-family: var(--fuente-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--texto-ter);
  font-variant-numeric: tabular-nums;
}
.entrega__ico { color: var(--acento); display: flex; }

.entrega__que { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.entrega__que b {
  font-family: var(--fuente-titulo);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--texto);
}
.entrega__que em {
  font-family: var(--fuente-mono);
  font-size: .58rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-ter);
  /* "VENTAS POR CODIGO DE BARRAS" en versalitas y espaciada mide
     mucho: sin esto marcaba el ancho minimo de toda la nota. */
  overflow-wrap: anywhere;
}

/* El visto se sella al entrar, uno detras de otro: la nota se va
   marcando sola, como quien la repasa en la puerta del negocio. */
.entrega__visto {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--whatsapp);
  scale: 0;
}
.entrega.visible .entrega__visto {
  animation: entrega-visto .42s var(--ease-out) both;
  animation-delay: var(--retraso, 0ms);
}
@keyframes entrega-visto {
  0%   { scale: 0; rotate: -25deg; }
  60%  { scale: 1.18; rotate: 4deg; }
  100% { scale: 1; rotate: 0deg; }
}

.entrega__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 2px solid var(--texto);
}
.entrega__pie span {
  font-family: var(--fuente-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-ter);
}
.entrega__pie b {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--texto);
}

/* La nota que acompana al texto de la izquierda */
.paquete__nota {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--borde);
  font-size: .89rem;
  line-height: 1.55;
  color: var(--texto-sec);
}
.paquete__nota .ico { color: var(--marca); flex-shrink: 0; margin-top: .15rem; }

@media (prefers-reduced-motion: reduce) {
  .entrega.visible .entrega__visto { animation: none; scale: 1; }
}