/**
 * CSS das páginas internas "Contato" (page-contato.php) e "Como funciona"
 * (page-como-funciona.php). Prefixos .os-contact-* e .os-how-*.
 *
 * Reaproveita as variáveis e classes de theme.css (.os-container, .os-btn,
 * .os-eyebrow, .os-page-head, .os-section, .os-band…) — aqui só o que é
 * específico destas duas páginas.
 */

/* ---------------------------------------------------------------------------
 * Contato — nota do WordPress (the_content, quando o dono escreve algo)
 * ------------------------------------------------------------------------ */

.os-contact-note { padding: 4px 0 0; }

/* ---------------------------------------------------------------------------
 * Contato — cartão de WhatsApp em destaque
 * ------------------------------------------------------------------------ */

.os-contact-methods { display: flex; flex-direction: column; gap: 30px; }

.os-contact-whatsapp {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 26px 28px;
	border-radius: 20px;
	/* Verde mais escuro que o verde "oficial" do WhatsApp — #25D366 puro não
	   dá contraste suficiente para texto branco em cima (regra: legível). */
	background: linear-gradient(135deg, #0f7a6c 0%, #075e54 100%);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(7, 94, 84, .35);
	transition: transform .15s ease, box-shadow .15s ease;
}

.os-contact-whatsapp:hover,
.os-contact-whatsapp:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(7, 94, 84, .45);
	color: #fff;
}

.os-contact-whatsapp__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
}

.os-contact-whatsapp__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.os-contact-whatsapp__title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.os-contact-whatsapp__phone { font-size: 15px; font-weight: 600; opacity: .92; }

.os-contact-whatsapp__arrow {
	margin-left: auto;
	flex: 0 0 auto;
	opacity: .85;
}

/* ---------------------------------------------------------------------------
 * Contato — grade de cartões (telefone, Instagram, Facebook, site, endereço)
 * ------------------------------------------------------------------------ */

.os-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
}

.os-contact-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border-radius: var(--os-radius);
	background: var(--os-surface);
	border: 1px solid var(--os-border);
	color: var(--os-text);
	text-decoration: none;
	transition: transform .15s ease, border-color .15s ease;
}

a.os-contact-card:hover,
a.os-contact-card:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(255, 255, 255, .28);
}

.os-contact-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--os-orange);
}

.os-contact-card__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--os-text-muted);
}

.os-contact-card__value {
	font-size: 17px;
	font-weight: 700;
	color: var(--os-text);
	word-break: break-word;
}

/* ---------------------------------------------------------------------------
 * Contato — barra de horário (shortcode do plugin)
 * ------------------------------------------------------------------------ */

.os-contact-hours { text-align: center; }
.os-contact-hours .os-eyebrow { text-align: center; }

/* A barra já vem com fundo claro do plugin; só limitamos a largura para não
   esticar de ponta a ponta em telas largas. */
.os-contact-hours .mydv3-statusbar { max-width: 640px; margin: 0 auto; }

/* ---------------------------------------------------------------------------
 * Como funciona — 4 passos numerados
 * ------------------------------------------------------------------------ */

.os-how-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 40px 20px;
}

.os-how-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 22px 24px;
	border-radius: var(--os-radius);
	background: var(--os-surface);
	border: 1px solid var(--os-border);
}

.os-how-step__num {
	position: absolute;
	top: -16px;
	left: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--os-red) 0%, var(--os-orange) 100%);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	box-shadow: 0 4px 10px rgba(214, 40, 40, .35);
}

.os-how-step__icon {
	display: inline-flex;
	margin-top: 8px;
	color: var(--os-orange);
}

.os-how-step__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--os-text);
}

.os-how-step__text {
	margin: 0;
	font-size: 15px;
	color: var(--os-text-muted);
}

/* ---------------------------------------------------------------------------
 * Como funciona — perguntas frequentes
 * ------------------------------------------------------------------------ */

.os-how-faq__title {
	margin: 0 0 20px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--os-dark-text);
}

/* .os-eyebrow é laranja por padrão — bom contraste no fundo escuro, mas fraco
   demais sobre o fundo claro desta seção. Aqui usamos o vermelho escuro. */
.os-how-faq .os-eyebrow { color: var(--os-red-dark); }

.os-how-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.os-how-faq__item {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 14px;
	overflow: hidden;
}

.os-how-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 20px;
	min-height: 44px;
	cursor: pointer;
	font-weight: 700;
	font-size: 16px;
	color: var(--os-dark-text);
	list-style: none;
}

.os-how-faq__q::-webkit-details-marker { display: none; }

.os-how-faq__q .os-icon--chevron {
	flex: 0 0 auto;
	color: var(--os-red);
	transition: transform .2s ease;
}

.os-how-faq__item[open] .os-how-faq__q .os-icon--chevron { transform: rotate(90deg); }

.os-how-faq__a {
	padding: 0 20px 20px;
	color: var(--os-dark-muted);
	font-size: 15px;
}

.os-how-faq__a p { margin: 0; }

/* ---------------------------------------------------------------------------
 * Responsivo
 * ------------------------------------------------------------------------ */

@media (max-width: 480px) {
	.os-contact-whatsapp {
		gap: 14px;
		padding: 20px;
	}

	.os-contact-whatsapp__icon { width: 50px; height: 50px; }
	.os-contact-whatsapp__title { font-size: 18px; }
	.os-contact-whatsapp__phone { font-size: 14px; }

	.os-contact-card { padding: 18px; }

	.os-how-step { padding: 26px 18px 20px; }
	.os-how-faq__q { padding: 15px 16px; font-size: 15px; }
	.os-how-faq__a { padding: 0 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.os-contact-whatsapp,
	.os-contact-whatsapp:hover,
	.os-contact-card,
	a.os-contact-card:hover,
	.os-how-faq__q .os-icon--chevron {
		transition: none;
		transform: none;
	}
}