/* =========================================================================
   O HOVER NO TOQUE

   Todo destaque de card do site mora num bloco @media (hover: hover) —
   escrito assim para o :hover nao ficar preso no ultimo card tocado num
   celular. So que o efeito entao NAO EXISTE no toque, e foi isso que o
   cliente cobrou em 28/08/2026: "cade a porra dos efeitos hover que tem no
   desktop e voce nao colocou no mobile".

   Aqui os mesmos destaques voltam, disparados por :active — o estado do
   dedo pressionado, que e o equivalente honesto do hover no toque. O bloco
   inteiro esta dentro de @media (hover: none), entao no desktop nada disto
   e sequer avaliado.

   ATENCAO: no iOS o :active so vale se a pagina tiver algum ouvinte de
   toque. Ele e registrado em assets/isp.js (iniciarToque). Sem isso este
   arquivo nao pinta nada no iPhone.

   Este arquivo carrega por ULTIMO de proposito: as regras de cada pagina
   (20-governanca, 21-outsourcing) miram os icones com .isp-pg-<slug> e
   ganhariam de qualquer coisa escrita antes.
   ========================================================================= */

@media (hover: none) {
	/* ---------- "Para quem e" (Home) ---------- */
	.isp-cenario:active {
		border-color: var(--isp-linha);
		border-radius: 32px;
		background-color: var(--isp-azul);
		color: #ffffff;
		box-shadow: inset 0 0 0 1px var(--isp-linha), 0 18px 40px rgba(5, 60, 250, 0.18);
	}

	.isp-cenario:active .isp-cenario__titulo,
	.isp-cenario:active .isp-cenario__texto {
		color: #ffffff;
	}

	.isp-cenario:active .isp-cenario__disco {
		border-color: var(--isp-linha);
		background-color: #ffffff;
		color: var(--isp-azul);
	}

	.isp-cenario:active .isp-cenario__seta {
		transform: rotate(135deg);
	}

	/* ---------- "Quem deve contratar" (paginas de serviço) ---------- */
	.isp-cartao:active {
		border-color: rgba(97, 97, 249, 0);
		background-color: var(--isp-azul);
		box-shadow: 0 18px 40px rgba(5, 60, 250, 0.18);
	}

	.isp-cartao:active .isp-cartao__ico,
	.isp-pg-governanca .isp-cartao:active .isp-cartao__ico,
	.isp-pg-outsourcing .isp-cartao:active .isp-cartao__ico,
	.isp-cartao:active h3 {
		color: #ffffff;
	}

	.isp-cartao:active p {
		color: rgba(248, 249, 250, 0.8);
	}

	/* ---------- "Como funciona" ---------- */
	.isp-passo:active {
		background-color: var(--isp-azul);
		box-shadow: 0 18px 40px rgba(5, 60, 250, 0.18);
	}

	.isp-passo:active .isp-passo__ico,
	.isp-pg-governanca .isp-passo:active .isp-passo__ico,
	.isp-pg-outsourcing .isp-passo:active .isp-passo__ico,
	.isp-passo:active h3,
	.isp-passo:active .elementor-heading-title {
		color: #ffffff;
	}

	.isp-passo:active p {
		color: rgba(253, 253, 253, 0.78);
	}

	/* ---------- "O que voce recebe" ---------- */
	/* Aqui e o contrario: o card escuro vira claro. */
	.isp-bento__card:active {
		border-color: rgba(13, 13, 13, 0.06);
		background-color: var(--isp-branco);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
	}

	.isp-bento__card:active h3,
	.isp-pg-governanca .isp-bento__card:active .isp-bento__ico {
		color: var(--isp-chumbo);
	}

	.isp-bento__card:active p {
		color: rgba(13, 13, 13, 0.6);
	}

	/* O translateY do desktop fica de fora: no toque o card sobe e desce
	   junto com o dedo e da a impressao de que a pagina pulou. */
}

/* =========================================================================
   AS SETAS DOS CARROSSEIS

   O reset do Hello Elementor tem "[type=submit]:hover, button:hover {
   background-color: #c36 }" — um rosa que ninguem escreveu. As setas sao
   <button>, entao ao tocar elas ficavam ROSA (foi o print "a seta tem que
   ficar azul"). Aqui o estado de toque e de foco vira azul, que e a cor da
   marca, nas duas familias de seta (a dos depoimentos e a dos carrosseis
   montados para o celular).
   ========================================================================= */

.isp-mb-carrossel__btn:hover,
.isp-mb-carrossel__btn:active,
.isp-mb-carrossel__btn:focus-visible,
.isp-depo__btn:hover,
.isp-depo__btn:active,
.isp-depo__btn:focus-visible {
	background-color: var(--isp-azul);
	border-color: var(--isp-azul);
	color: #ffffff;
}