/* Estilos propios del grupo "servicios": catálogo general (servicios.html) y las 7 páginas de
   categoría. Reutiliza tokens y componentes de base.css; solo agrega lo que el catálogo del
   contrato no cubre. Clases prefijadas "sv-" para no chocar con otros grupos. */

/* Selector de tipo de equipo (equipos-y-catalogo.html): enlaces tipo chip con href real a
   contacto.html (alternativa sin JS) y data-prefill con el texto exacto que precarga el
   formulario. Alineado a la izquierda con el contenedor (unico borde del sitio); el ultimo
   elemento de una fila incompleta se queda pegado a ese borde, como cualquier lista de chips. */
.sv-selector { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
.sv-selector a {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: 48px;
  padding: 0 var(--espacio-5) 0 var(--espacio-4);
  border-radius: var(--radio-control);
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--texto-1);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.sv-selector a svg { flex: none; width: 22px; height: 22px; color: var(--acento-texto); }
.sv-selector a:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); transform: translateY(-1px); }
.sv-selector a:active { transform: translateY(0); }

/* Tarjeta destacada fuera del sistema de pestañas (panel visual de un bloque-producto). OJO:
   nunca reutilizar la clase "categoria-panel" para esto: base.css trae la regla global
   "html.js .categoria-panel:not(.activo) { display:none }" pensada para los paneles del
   catálogo de servicios.html, y oculta cualquier otro elemento con esa clase que no lleve
   también "activo". Mismo aspecto visual, sin el conflicto. */
.sv-destacado {
  border-radius: var(--radio-superficie);
  border: 1px solid var(--linea);
  background: var(--superficie);
  padding: clamp(24px, 4vw, 48px);
}

/* Banda de compromiso (las 7 páginas de categoría): sello, frase de compromiso y una linea de
   contexto en una sola franja horizontal a todo el ancho del contenedor, sin la caja casi vacia
   que dejaba antes un bloque-producto de dos columnas para tan poco texto. */
.sv-banda-compromiso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espacio-3) var(--espacio-6);
  border-radius: var(--radio-superficie);
  border: 1px solid var(--linea);
  background: var(--superficie);
  padding: var(--espacio-5) var(--espacio-6);
}
.sv-banda-icono {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--superficie-2);
  color: var(--acento-texto);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-banda-icono svg { width: 24px; height: 24px; }
.sv-banda-compromiso .sello { margin: 0; flex: none; max-width: 100%; }
.sv-banda-contexto { margin: 0; color: var(--texto-2); flex: 1 1 360px; }

/* Franja de sellos de compromiso (servicios.html): flujo flexible en vez de rejilla, porque el
   número de sellos no es múltiplo de columnas fijas y una rejilla dejaría celdas huérfanas.
   Alineada a la izquierda con el contenedor (unico borde del sitio). */
.sv-sellos { display: flex; flex-wrap: wrap; gap: var(--espacio-4) var(--espacio-6); }
.sv-sellos .sello { margin: 0; }

/* Comparador simple (software-a-la-medida.html): tarjetas con la misma altura visual dentro de
   una rejilla, apoyadas en .tarjeta / .lista-check ya existentes; solo fija el remate inferior.
   El enlace de remate es un boton real (min 44px), no un enlace de texto suelto. */
.sv-comparador-pie { margin-top: var(--espacio-5); padding-top: var(--espacio-4); border-top: 1px solid var(--linea); }
.sv-comparador-pie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--espacio-4);
  border-radius: var(--radio-control);
  border: 1px solid var(--linea);
  color: var(--acento-texto);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.sv-comparador-pie a:hover { border-color: color-mix(in srgb, var(--acento) 45%, var(--linea)); }

/* Preguntas frecuentes a todo el ancho de .contenedor, en 2 columnas desde 1024px, igual que
   la regla #faq de base.css (que solo aplica a index.html). Se repite aqui, con selector propio
   por id, porque las 7 paginas de categoria usan sus propios ids de seccion. */
#software-faq .faq-lista, #seguridad-faq .faq-lista, #nube-faq .faq-lista,
#ia-faq .faq-lista, #consultoria-faq .faq-lista, #finanzas-faq .faq-lista, #equipos-faq .faq-lista {
  margin-top: var(--espacio-6);
}
@media (min-width: 1024px) {
  #software-faq .faq-lista, #seguridad-faq .faq-lista, #nube-faq .faq-lista,
  #ia-faq .faq-lista, #consultoria-faq .faq-lista, #finanzas-faq .faq-lista, #equipos-faq .faq-lista {
    column-count: 2;
    column-gap: var(--espacio-8);
    border-top: 0;
  }
  #software-faq .faq-item, #seguridad-faq .faq-item, #nube-faq .faq-item,
  #ia-faq .faq-item, #consultoria-faq .faq-item, #finanzas-faq .faq-item, #equipos-faq .faq-item {
    border-top: 1px solid var(--linea);
    border-bottom: 0;
  }
}