/* Sección de sistemas: destacados y tarjetas complementarias. */

.sistemas-destacados {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px;
}
.sistemas-compactos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px;
}

.sistema {
  position: relative; overflow: hidden; border-radius: 24px; background: var(--cristal);
  border: 1px solid var(--cristal-borde); display: flex; flex-direction: column;
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
  transform-style: preserve-3d;
}
.sistema:hover { border-color: rgba(255,255,255,.22); box-shadow: 0 30px 80px -30px rgba(255,122,26,.25); }
.sistema::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(255,122,26,.16), transparent 60%);
}
.sistema:hover::before { opacity: 1; }

/* Área del logo */
.sistema-logo {
  height: 210px; display: grid; place-items: center; position: relative;
  border-bottom: 1px solid var(--cristal-borde); padding: 24px;
}
.sistema-logo img { max-height: 150px; max-width: 80%; width: auto; height: auto; object-fit: contain; transition: transform .6s var(--ease); }
.sistema:hover .sistema-logo img { transform: scale(1.06) translateZ(30px); }
.sistema-logo.claro { background: #ffffff; }
.sistema-logo.oscuro { background: #000000; }
.sistema-logo.texto { background: radial-gradient(circle at 50% 40%, rgba(255,122,26,.22), rgba(59,130,246,.10) 60%, transparent), #0b1020; }

/* Logo de RECOBERIX: fondo gris difuminado; se funde con la tarjeta con una máscara radial */
.sistema-logo.recoberix { background: #0b1020; }
.sistema-logo.recoberix img {
  max-height: 170px; max-width: 92%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 72%);
}

/* Insignia tipográfica para sistemas sin logo propio */
.marca-texto {
  font-family: var(--titulo); font-weight: 700; font-size: 64px; letter-spacing: -.03em; line-height: 1;
  background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateZ(40px);
}
.sistema-logo.texto small {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave);
}

/* Cuerpo */
.sistema-cuerpo { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.sistema-cuerpo .chip, .sistema .chip {
  align-self: flex-start; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--naranja); background: rgba(255,122,26,.1); border: 1px solid rgba(255,122,26,.25);
  padding: 5px 10px; border-radius: 999px; margin-bottom: 14px;
}
.sistema h3 { font-size: 28px; margin: 0 0 8px; }
.sistema-frase { color: var(--texto); font-size: 16px; margin: 0 0 16px; }
.sistema-lista { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.sistema-lista li { color: var(--texto-suave); font-size: 15px; padding-left: 22px; position: relative; }
.sistema-lista li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--gradiente);
}
.sistema .enlace { margin-top: auto; color: var(--texto); font-weight: 600; text-decoration: none; }
.sistema .enlace span { display: inline-block; transition: transform .3s var(--ease); }
.sistema:hover .enlace span { transform: translateX(6px); }

/* Tarjetas complementarias */
.sistema-chico { padding: 0; }
.sistema-chico .sistema-logo { height: 150px; padding: 18px; }
.sistema-chico .sistema-logo img { max-height: 90px; }
.sistema-chico .marca-texto { font-size: 44px; }
.sistema-chico h3 { font-size: 20px; padding: 18px 20px 6px; margin: 0; }
.sistema-chico p { color: var(--texto-suave); font-size: 14px; padding: 0 20px 22px; margin: 0; }

@media (max-width: 1080px) {
  .sistemas-destacados { grid-template-columns: 1fr; }
  .sistemas-compactos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sistemas-compactos { grid-template-columns: 1fr; }
  .sistema-logo { height: 170px; }
}