/* =========================================================================
   PERGUNTAS FREQUENTES
   Figma: Frame 426 (956:871) — faixa clara y 9455–10569 (1114 de altura).
   Coluna de texto a esquerda (x 80, 554 de largura) e a sanfona a direita
   (x 738, 620 de largura, gap 32).
   ========================================================================= */

#isp-faq {
	position: relative;
	display: block;
	padding: 0;
	background-color: var(--isp-branco);
	color: var(--isp-chumbo);
	overflow: hidden;
}

/* As duas colunas ficam NO FLUXO, e nao ancoradas por left/top.

   Com posicao absoluta o quadro nao media as perguntas: ele tinha altura
   fixa e, ao abrir a ultima pergunta, a resposta passava do pe da seção e
   era cortada pelo overflow — o "buga quando abre" que o cliente apontou
   (01/09/2026). Em fila, a seção cresce junto com a sanfona.

   Os numeros sao os mesmos do arquivo, so que lidos como recuo e vao:
   a coluna da esquerda comecava em x=80 e a lista em x=738, com 554 de
   largura na primeira — 738-(80+554) = 104 de vao. A direita sobra
   1440-(738+620) = 82. O topo e o 109 da lista, e a coluna da esquerda
   desce os 18 que faltam para os 127 dela. */
#isp-faq-quadro {
	position: relative;
	display: flex;
	/* row explicito: o container do Elementor nasce em coluna. */
	flex-direction: row;
	align-items: flex-start;
	gap: 104px;
	width: 1440px;
	max-width: 100%;
	min-height: 1114px;
	margin-inline: auto;
	padding: 109px 82px 91px 80px;
}

#isp-faq-quadro > .e-con,
#isp-faq-quadro > .elementor-widget {
	position: relative;
	margin: 0;
	padding: 0;
}

/* ---------- Coluna da esquerda ---------- */
/* Com o pai no seletor: "#isp-faq-quadro > .e-con { margin: 0 }" pesa
   (1,1,0) e zerava a margem que desce a coluna da esquerda os 18px do
   arquivo. */
#isp-faq-quadro > #isp-faq-topo {
	margin-top: 18px;
}

#isp-faq-topo {
	flex: 0 0 554px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	width: 554px;
}

#isp-faq-topo > .elementor-widget {
	width: 100%;
	margin: 0;
	padding: 0;
}

#isp-faq-topo > .elementor-widget-shortcode,
#isp-faq-topo > .elementor-widget-button {
	width: auto;
}

/* Pedido do cliente (26/08/2026): o rotulo e o titulo desta coluna vinham
   centralizados (alinhamento do widget do Elementor) enquanto o botao do
   WhatsApp ficava na esquerda. Os tres passam a comecar na mesma vertical. */
#isp-faq-topo,
#isp-faq-topo > .elementor-widget,
#isp-faq-topo .elementor-heading-title {
	text-align: left;
}

.isp-faq__eyebrow .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--isp-chumbo);
}

.isp-faq__titulo .elementor-heading-title {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin: 0;
	font-family: var(--isp-fonte-titulo);
	font-size: 40px;
	line-height: 52px;
	font-weight: 400;
	color: #000000;
}

/* ---------- Sanfona ---------- */
.isp-faq-lista {
	flex: 0 0 620px;
	width: 620px;
}

/* Sem width aqui: depois da conversao para container, .isp-faq e
   .isp-faq-lista sao o MESMO elemento, e como esta regra vem depois o
   "width: 100%" apagava os 620px da coluna — a lista de perguntas passava
   a ocupar o quadro inteiro de 1440. Quem manda na largura e .isp-faq-lista
   (620 no desktop, 100% nos breakpoints); aqui fica so a pilha. */
.isp-faq {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.isp-faq__item {
	padding: 24px;
	border: 1px solid var(--isp-linha);
	border-radius: 24px;
	background-color: #fdfdfd;
}

/* summary padrao vem com um triangulo; ele sai e o disco azul entra no lugar. */
.isp-faq__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	list-style: none;
	cursor: pointer;
	font-family: var(--isp-fonte-titulo);
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
	color: var(--isp-chumbo);
}

.isp-faq__pergunta::-webkit-details-marker {
	display: none;
}

/* O :not e obrigatorio: o disco tambem e um <span>, e este seletor tem
   especificidade maior que a da classe dele. No quadro de 1440 o defeito nao
   aparece porque a sobra de espaco na linha e exatamente zero; em qualquer
   largura menor o disco cresce e vira uma pilula. */
.isp-faq__pergunta > span:not(.isp-faq__disco) {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	flex: 1 1 auto;
	min-width: 0;
}

/* Aberto, a pergunta ganha entrelinha um pouco maior — como no arquivo. */
.isp-faq__item[open] .isp-faq__pergunta {
	align-items: flex-start;
	line-height: 30px;
}

.isp-faq__disco {
	display: grid;
	place-items: center;
	flex: 0 0 45px;
	width: 45px;
	height: 45px;
	border: 0.75px solid var(--isp-linha);
	border-radius: 187.5px;
	background-color: var(--isp-azul);
	color: #ffffff;
	transition: transform 0.25s ease;
}

.isp-faq__disco svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Fechado o chevron aponta para a direita; aberto, para baixo. */
.isp-faq__item[open] .isp-faq__disco {
	transform: rotate(90deg);
}

.isp-faq__resposta {
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	margin-top: 40px;
	font-family: var(--isp-fonte-corpo);
	font-size: 16px;
	line-height: 28px;
	font-weight: 400;
	color: rgba(13, 13, 13, 0.6);
}

.isp-faq__resposta p {
	margin: 0;
}

/* A pergunta sem resposta escrita ABRE do mesmo jeito (pedido do cliente em
   01/09/2026: "nao ta funcionando, nem abrindo as demais"). Antes ela era
   inerte de proposito, para nao abrir no vazio enquanto o texto nao chegava
   — mas na tela isso lia como sanfona quebrada. O que falta ali e conteudo,
   nao comportamento: as cinco respostas de cada pagina ainda nao foram
   escritas. */
.isp-faq__item[data-sem-resposta] .isp-faq__pergunta {
	cursor: pointer;
}

/* ---------- Botao do WhatsApp ---------- */
.isp-btn--whatsapp .isp-btn__ico--whatsapp {
	background-color: #ffffff;
	color: var(--isp-azul);
	border-radius: 150px;
}

.isp-btn__ico--whatsapp svg {
	width: 20px;
	height: 20px;
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

@media (max-width: 1439px) {
	#isp-faq {
		padding: 96px var(--isp-margem);
	}

	#isp-faq-quadro {
		display: flex;
		flex-direction: column;
		gap: 48px;
		width: 100%;
		max-width: var(--isp-largura);
		min-height: 0;
		/* Zera o recuo do quadro de 1440 (109 em cima, 91 embaixo): aqui a
		   folga vertical e a da propria seção. */
		padding: 0;
	}

	#isp-faq-quadro > .e-con,
	#isp-faq-quadro > .elementor-widget {
		position: static;
	}

	/* flex: 0 1 auto desfaz o "flex: 0 0 554px" e o "0 0 620px" do desktop:
	   ali eles sao LARGURA numa fila, aqui virariam ALTURA numa coluna — e
	   a coluna da esquerda ficava com 554px de altura, deixando um vao
	   enorme entre o botao do WhatsApp e a primeira pergunta. */
	#isp-faq-topo,
	.isp-faq-lista {
		flex: 0 1 auto;
		width: 100%;
	}
}

@media (max-width: 1024px) {
	.isp-faq__titulo .elementor-heading-title {
		font-size: 32px;
		line-height: 42px;
	}

	.isp-faq {
		gap: 20px;
	}
}

/* =========================================================================
   FAQ NO CELULAR — Figma "09 FAQ" (390x1267)

   Regua: 64 | topo 186,6 | 24 | 1a pergunta aberta 368 | 24 |
          5 perguntas fechadas de 88 com 24 de vao | 64

   No desktop a coluna de texto fica a esquerda e a lista a direita, as duas
   posicionadas por coordenada no quadro de 1440. Aqui viram uma pilha:
   cabecalho centralizado com o botao do WhatsApp embaixo, e a lista logo
   depois. O item fecha em 88 quando esta fechado — 20 de recuo em cima e
   embaixo com a pergunta de duas linhas (24 de entrelinha).
   ========================================================================= */
@media (max-width: 767px) {
	#isp-faq {
		padding-block: 64px;
	}

	/* Sem recuo lateral aqui: a goteira de 24 ja vem da propria seção, e
	   somando as duas o item do FAQ ficava com 294 em vez de 342 — toda
	   pergunta quebrava numa linha a mais que o desenho. */
	#isp-faq-quadro {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: 100%;
		padding-inline: 0;
	}

	#isp-faq-quadro > .elementor-widget {
		position: static;
		width: 100%;
	}

	/* Centralizado de verdade: o text-align no pai nao bastava porque cada
	   widget traz o seu proprio alinhamento, e o botao e um item flex —
	   quem o move e o align-items, nao o text-align. */
	#isp-faq-topo {
		gap: 16px;
		width: 100%;
		align-items: center;
		text-align: center;
	}

	#isp-faq-topo .isp-faq__eyebrow,
	#isp-faq-topo .isp-faq__eyebrow .elementor-heading-title,
	#isp-faq-topo .isp-faq__titulo,
	#isp-faq-topo .isp-faq__titulo .elementor-heading-title {
		text-align: center;
	}

	#isp-faq-topo > .elementor-widget-shortcode,
	#isp-faq-topo > .elementor-widget-button {
		width: 100%;
	}

	.isp-faq__eyebrow .elementor-heading-title {
		font-size: 12px;
		line-height: 16px;
		letter-spacing: 1.6px;
	}

	.isp-faq__titulo .elementor-heading-title {
		font-size: 26px;
		line-height: 32px;
	}

	.isp-faq-lista {
		width: 100%;
	}

	.isp-faq {
		gap: 24px;
	}

	/* Mesmo motivo do card de "Para quem e": no arquivo o item fechado tem
	   88 de altura exatos e uma borda de 1px somaria 2 em cada um dos seis. */
	.isp-faq__item {
		padding: 20px;
		border-width: 0;
		border-radius: 16px;
		box-shadow: inset 0 0 0 1px var(--isp-linha);
	}

	.isp-faq__pergunta,
	.isp-faq__item[open] .isp-faq__pergunta {
		gap: 12px;
		font-size: 16px;
		line-height: 24px;
	}

	/* Pergunta e resposta alinhadas a ESQUERDA (pedido do cliente em
	   02/09/2026, revendo o de 28/08, quando elas foram centralizadas):
	   com as respostas escritas, o texto corrido ficou dificil de ler
	   centralizado. O cabecalho da seção — chapeu, titulo e botao do
	   WhatsApp — continua no centro, como ele pediu antes. */
	.isp-faq__pergunta > span:not(.isp-faq__disco),
	.isp-faq__resposta,
	.isp-faq__resposta p {
		text-align: left;
	}

	.isp-faq__disco {
		flex: 0 0 36px;
		width: 36px;
		height: 36px;
	}

	.isp-faq__disco svg {
		width: 19px;
		height: 19px;
	}

	.isp-faq__resposta {
		margin-top: 14px;
		font-size: 14px;
		line-height: 22px;
	}
}