/* ===================================================================
   nexel — ajustes propios sobre el template "Services"
   ===================================================================

   El template trae su color de marca cableado en css/styles.css (258
   apariciones del violeta original). Ese archivo se regenera desde
   css/styles-purple.css, que es la copia intacta que vino en el theme:

       sed 's/#8964f1/#1877f2/g' css/styles-purple.css > css/styles.css

   O sea que el AZUL de nexel no se define acá: se define ahí. Acá sólo
   va lo que el theme no contempla.

   La paleta es la misma que el portal — ver el bloque `:root` de
   www/assets/css/app.css, que es el punto único de verdad de la marca:

       --primario  #1877f2   azul   chrome, links, títulos
       --acento    #f97316   naranja acción primaria (CTAs)

   El theme no tiene un lugar para el naranja: su `secondary` es el gris
   oscuro #232323. Por eso el acento entra acá, y sólo donde la marca lo
   usa — botones de acción.
   =================================================================== */

:root {
  --nexel-azul: #1877f2;
  --nexel-naranja: #f97316;
  --nexel-naranja-h: #d86414;   /* mismo hover que el portal: 88% + negro */
}

/* --- Botón de acción -----------------------------------------------
 * `.butn.accent` es el CTA de la marca. Hereda toda la mecánica de
 * `.butn` del theme (tamaños, transición, el relleno que se desliza en
 * hover) y sólo le cambia el color, así que sigue funcionando con los
 * modificadores del theme (`medium`, `white`, etc.).
 *
 * El theme pinta el hover con un pseudo-elemento, no con background:
 * por eso hay que tocar `:before` y no alcanza con `:hover`. */
.butn.accent {
  background-color: var(--nexel-naranja);
  border-color: var(--nexel-naranja); }

.butn.accent:before {
  background-color: var(--nexel-naranja-h); }

.butn.accent:hover,
.butn.accent:focus {
  border-color: var(--nexel-naranja-h);
  color: #fff; }

/* --- Clientes -------------------------------------------------------
 * La grilla de clientes del theme (`.client-style-01`) espera el logo de
 * cada empresa. Todavía no los tenemos, así que las celdas muestran el
 * nombre tipografiado, con la misma caja y el mismo hover que tendrían
 * con la imagen puesta. Cuando lleguen los logos esto se borra y vuelve
 * el <img>. */
.client-style-01 .client-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 0 .5rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 600;
  color: #232323;
  text-align: center;
  transition: color .3s ease; }

.client-style-01:hover .client-name {
  color: var(--nexel-azul); }