/* ==========================================================================
   SolutionSoft — landing institucional
   CSS escrito a mano, sin compilación: se edita y se sube por FTP.
   Los colores salen del logotipo y están todos en :root.
   ========================================================================== */

:root {
  --rojo:        #D40511;
  --rojo-oscuro: #A5030D;
  --negro:       #0E0E10;
  --tinta:       #1C1C1F;
  --gris:        #5B5B63;
  --gris-claro:  #E6E6EA;
  --fondo:       #FFFFFF;
  --fondo-claro: #F6F6F8;
  --radio:       14px;
  --ancho:       1120px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.02em; }

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--rojo); color: #fff; }

:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Enlace para saltar la navegación con el teclado. */
.salto {
  position: absolute;
  left: -9999px;
}

.salto:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--negro);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 8px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --- Encabezado ----------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gris-claro);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.cabecera__logo { margin-right: auto; display: flex; }
.cabecera__logo img { height: 26px; width: auto; }

.cabecera__nav {
  display: flex;
  gap: 1.75rem;
  font-size: .95rem;
  font-weight: 500;
}

.cabecera__nav a {
  text-decoration: none;
  color: var(--gris);
  transition: color .15s;
}

.cabecera__nav a:hover { color: var(--negro); }

/* --- Botones -------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s, background-color .15s, border-color .15s;
}

.boton:active { transform: scale(.98); }

.boton--rojo {
  background: var(--rojo);
  color: #fff;
}

.boton--rojo:hover { background: var(--rojo-oscuro); }

.boton--linea {
  border: 1.5px solid var(--gris-claro);
  color: var(--tinta);
}

.boton--linea:hover { border-color: var(--negro); }

.boton--chico { padding: .6rem 1.1rem; font-size: .9rem; }

.icono { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Portada -------------------------------------------------------------- */
.portada {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 7rem) 0;
  /* Trama de puntos: da textura sin competir con el texto. */
  background-image: radial-gradient(circle at 1px 1px, var(--gris-claro) 1px, transparent 0);
  background-size: 28px 28px;
}

.portada__grilla {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.volanta {
  display: inline-block;
  margin-bottom: .9rem;
  color: var(--rojo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.portada__titulo {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 800;
  text-wrap: balance;
}

/* Subrayado grueso por detrás del texto, en el rojo de la marca. */
.subrayado {
  background: linear-gradient(transparent 62%, rgb(212 5 17 / .18) 62%);
}

.portada__texto {
  margin-top: 1.5rem;
  max-width: 34rem;
  color: var(--gris);
  font-size: 1.08rem;
}

/* Lo resaltado del párrafo: un tono más firme, sin gritar. */
.portada__texto strong { color: var(--tinta); font-weight: 600; }

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.25rem;
}

.portada__marca {
  display: none;
  font-size: 13rem;
  font-weight: 800;
  line-height: 1;
  color: var(--rojo);
  opacity: .09;
  text-align: right;
  user-select: none;
}

/* --- Secciones ------------------------------------------------------------ */
.seccion { padding: clamp(3.5rem, 8vw, 6rem) 0; }

.seccion--clara {
  background: var(--fondo-claro);
  border-block: 1px solid var(--gris-claro);
}

.seccion__titulo {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 700;
}

.seccion__bajada {
  margin-top: .85rem;
  max-width: 38rem;
  color: var(--gris);
}

.grilla {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.75rem;
}

/* --- Tarjetas de servicio ------------------------------------------------- */
.tarjeta {
  padding: 1.75rem;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  background: #fff;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.tarjeta:hover {
  border-color: #CFCFD6;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgb(14 14 16 / .35);
}

.tarjeta__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background: rgb(212 5 17 / .08);
  color: var(--rojo);
}

.tarjeta__icono svg { width: 22px; height: 22px; }

.tarjeta h3 {
  font-size: 1.08rem;
  font-weight: 650;
  margin-bottom: .55rem;
}

.tarjeta p { color: var(--gris); font-size: .96rem; }

/* --- Clientes ------------------------------------------------------------- */
.cliente {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  background: #fff;
  text-align: center;
}

.cliente img {
  height: 52px;
  width: auto;
  max-width: 100%;
  margin: 0 auto .75rem;
  object-fit: contain;
}

/* Logos con partes blancas: sobre la tarjeta blanca desaparecen. Se les pone
   una placa oscura detrás, con el mismo alto que el resto para que la fila
   siga pareja. Se aplica caso por caso, en el HTML. */
.cliente img.sobre-oscuro {
  height: 68px;
  padding: .5rem .9rem;
  border-radius: 10px;
  background: var(--negro);
}

.cliente h3 {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
}

.cliente p {
  color: var(--rojo);
  font-size: .8rem;
  font-weight: 600;
}

.cliente__pais {
  display: block;
  color: var(--gris);
  font-size: .75rem;
  font-weight: 400;
}

.clientes__mas {
  margin-top: 1.75rem;
  text-align: center;
  color: var(--gris);
  font-size: .95rem;
}

/* --- Productos ------------------------------------------------------------ */
.producto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.producto:hover {
  border-color: #CFCFD6;
  box-shadow: 0 18px 40px -22px rgb(14 14 16 / .35);
}

/* Logotipo escrito, para productos que todavía no tienen archivo de marca.
   Cada producto define su color con un modificador; así el nombre se ve con
   su identidad aunque no haya imagen. */
.marca-texto {
  margin-bottom: 1.5rem;
  color: #0F172A;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.marca-texto span { color: var(--marca, #2563EB); }

.marca-texto--justisys  { --marca: #2563EB; }

.marca-texto--volquesys {
  --marca: #4F46E5;
  font-style: italic;
}

.marca-texto--inmosys { --marca: #0E9488; }
.marca-texto--notisys   { --marca: #D97706; }
.marca-texto--tiendasys { --marca: #DB2777; }

.producto h3 {
  font-size: 1.15rem;
  font-weight: 650;
  margin-bottom: .6rem;
}

.producto__texto { color: var(--gris); font-size: .98rem; }

.producto__enlace {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.5rem;
  color: var(--rojo);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}

.producto__enlace svg { width: 17px; height: 17px; transition: transform .2s; }
.producto__enlace:hover svg { transform: translateX(3px); }

/* --- Contacto ------------------------------------------------------------- */
.contacto {
  display: grid;
  gap: 3rem;
  align-items: start;
}

.datos {
  list-style: none;
  margin: 0;
  padding: 1.75rem;
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  background: var(--fondo-claro);
}

.datos li + li {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gris-claro);
}

.datos__rotulo {
  display: block;
  color: var(--gris);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

.datos a {
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
  word-break: break-word;
}

.datos a:hover { color: var(--rojo); }

/* --- Pie ------------------------------------------------------------------ */
.pie {
  background: var(--negro);
  color: #9A9AA4;
  padding: 2.5rem 0;
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* El logotipo del pie es texto y no imagen: sobre fondo negro haría falta
   una versión clara del archivo, y así no hace falta. */
.pie__logo {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.pie__logo strong { font-weight: 800; }

.pie__signo {
  color: var(--rojo);
  font-weight: 800;
  margin-right: .35rem;
}

.pie__legal { font-size: .88rem; }

/* --- Pantallas medianas y grandes ----------------------------------------- */
@media (max-width: 720px) {
  .cabecera__nav { display: none; }
  .oculto-movil { display: none; }
}

@media (min-width: 640px) {
  .grilla--2, .grilla--3, .grilla--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grilla--3 { grid-template-columns: repeat(3, 1fr); }
  .grilla--4 { grid-template-columns: repeat(4, 1fr); }

  .portada__grilla { grid-template-columns: 1.35fr .65fr; }
  .portada__marca { display: block; }

  .contacto { grid-template-columns: 1.2fr .8fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}