/*
Theme Name: Plano de Saude Info
Theme URI: https://planodesaudeinfo.com.br/
Description: Child theme do Astra para o site Plano de Saude Info. Identidade visual, hero de conversao, CTA persistente e rodape com credenciais.
Author: Plano de Saude Info
Template: astra
Version: 1.0.6
Text Domain: planodesaudeinfo-child
*/

/* ==========================================================
   1. Tokens
   A cor de acao vem de dados-do-site.php (--psi-acao).
   ========================================================== */

:root {
	--psi-azul: #0C447C;
	--psi-azul-escuro: #042C53;
	--psi-azul-claro: #E6F1FB;
	--psi-verde: #1D9E75;
	--psi-verde-escuro: #0F6E56;

	--psi-tinta: #16202B;
	--psi-tinta-suave: #4C5A67;
	--psi-linha: #DDE3EA;
	--psi-fundo: #F6F8FA;

	--psi-titulo: 'Sora', system-ui, sans-serif;
	--psi-texto: 'Source Sans 3', system-ui, sans-serif;

	--psi-raio: 8px;
	--psi-max: 1180px;
}

/* ==========================================================
   2. Tipografia
   Base em 17px: o publico de plano de saude e majoritariamente
   45+, e 16px do Astra fica apertado para leitura longa.
   ========================================================== */

body,
.ast-container {
	font-family: var(--psi-texto);
	font-size: 17px;
	line-height: 1.65;
	color: var(--psi-tinta);
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--psi-titulo);
	color: var(--psi-tinta);
	letter-spacing: -0.01em;
	line-height: 1.22;
}

.entry-content h1, h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; }
.entry-content h2, h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; margin-top: 2.75rem; }
.entry-content h3, h3 { font-size: 1.3rem; font-weight: 600; margin-top: 2rem; }

/* A home usava h4 e h5 como titulos de secao, o que deixava
   secoes importantes menores que o texto ao redor. Enquanto o
   HTML nao e corrigido, estes dois trazem o peso visual de volta. */
.home .entry-content h4 { font-size: 1.5rem; font-weight: 600; margin-top: 2.75rem; }
.home .entry-content h5 { font-size: 1.2rem; font-weight: 600; margin-top: 2rem; }

.entry-content p,
.entry-content li { max-width: 68ch; }

/* ==========================================================
   3. Botoes
   Uma unica cor de acao no site inteiro. E o que faz o olho
   achar o botao sem procurar.
   ========================================================== */

.psi-botao,
.entry-content .psi-botao,
input[type="submit"],
.ast-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--psi-acao, #BA7517);
	color: #fff;
	font-family: var(--psi-texto);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1;
	padding: 15px 28px;
	border: 0;
	border-radius: var(--psi-raio);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

.psi-botao:hover,
.psi-botao:focus,
input[type="submit"]:hover,
.ast-button:hover {
	background: var(--psi-acao-hover, #965E12);
	color: #fff;
}

.psi-botao--pequeno { padding: 11px 20px; font-size: .95rem; }

.psi-botao--fantasma {
	background: transparent;
	color: var(--psi-azul);
	border: 1.5px solid var(--psi-azul);
}
.psi-botao--fantasma:hover { background: var(--psi-azul-claro); color: var(--psi-azul); }

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--psi-azul);
	outline-offset: 2px;
}

/* ==========================================================
   4. Cabecalho — faixa branca unica, fixa, que encolhe ao rolar
   ========================================================== */

/* Fixo. O Astra gratuito nao tem cabecalho fixo; aqui ele passa a ter,
   para o botao de contato nunca sair da tela. */
#masthead,
.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff !important;
	border-bottom: 1px solid var(--psi-linha);
	box-shadow: none;
	transition: box-shadow .18s ease, padding .18s ease;
}

.admin-bar #masthead,
.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar #masthead,
	.admin-bar .site-header { top: 46px; }
}

/* Uma faixa so: a barra de baixo perde o fundo azul e se funde com a de cima. */
.ast-above-header-wrap,
.ast-above-header-bar,
.ast-primary-header-wrap,
.ast-primary-header-bar,
.ast-below-header-wrap,
.ast-below-header-bar,
.main-header-bar {
	background: #fff !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* Uma versao do cabecalho por vez, caso alguma regra acima escape. */
body:not(.ast-header-break-point) #ast-mobile-header { display: none !important; }
body.ast-header-break-point #ast-desktop-header { display: none !important; }

/* Menu em azul-escuro sobre branco. */
.main-header-menu > .menu-item > .menu-link,
.main-header-menu .menu-link,
.site-header .site-title a {
	color: var(--psi-azul-escuro) !important;
	font-family: var(--psi-texto);
	font-weight: 600;
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link {
	color: var(--psi-azul) !important;
}

/* A URL do site como subtitulo nao informa nada a quem ja esta no site. */
.site-header .site-description { display: none; }

.custom-logo-link img,
.site-logo-img img {
	max-height: 52px;
	width: auto;
	transition: max-height .18s ease;
}

/* Encolhe ao rolar: menos altura, sombra para descolar do conteudo. */
.psi-rolou #masthead,
.psi-rolou .site-header { box-shadow: 0 2px 12px rgba(4, 44, 83, .12); }

.psi-rolou .custom-logo-link img,
.psi-rolou .site-logo-img img { max-height: 40px; }

.psi-rolou .ast-primary-header-bar,
.psi-rolou .main-header-bar { padding-top: 4px !important; padding-bottom: 4px !important; }

/* Qualquer link de WhatsApp dentro do cabecalho vira botao verde.
   Casar pelo href e mais confiavel do que adivinhar a classe que o
   construtor do Astra gerou. */
/* Só cor e forma. Nunca 'display': o Astra mantém no HTML o cabeçalho de
   desktop e o de celular, escondendo um deles com display:none. Declarar
   display aqui faz os dois aparecerem ao mesmo tempo. */
#masthead a[href*="wa.me"],
#masthead a[href*="api.whatsapp"],
.site-header .ast-custom-button {
	background: var(--psi-verde) !important;
	color: #fff !important;
	font-weight: 600;
	border-radius: 100px !important;
	border: 0 !important;
	text-decoration: none;
}

#masthead a[href*="wa.me"]:hover,
#masthead a[href*="api.whatsapp"]:hover,
.site-header .ast-custom-button:hover {
	background: var(--psi-verde-escuro) !important;
	color: #fff !important;
}

/* O botao de menu do celular fica com o Astra. Mexer na cor de fundo dele
   escondia o rotulo, que o tema desenha em branco. Só o canto arredondado,
   para combinar com o resto. */
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill,
.menu-toggle,
.main-header-menu-toggle {
	border-radius: var(--psi-raio) !important;
}

/* ==========================================================
   5. Hero
   ========================================================== */

.psi-hero {
	background: linear-gradient(180deg, var(--psi-azul) 0 62%, transparent 62%);
	padding: 2.75rem 20px 0;
}

.psi-hero__wrap {
	max-width: var(--psi-max);
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--psi-linha);
	border-radius: 14px;
	padding: 2.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
}

.psi-hero__wrap--sem-foto { grid-template-columns: minmax(0, 1fr); }

/* Na home o H1 do hero e o titulo da pagina. O titulo do conteudo vira h2
   para nao existirem dois H1 competindo. */
.home .entry-title,
.home .ast-single-post-order { display: none; }

.psi-selo {
	display: inline-block;
	background: #E1F5EE;
	color: var(--psi-verde-escuro);
	font-size: .88rem;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 100px;
	margin: 0 0 1rem;
}

.psi-hero__titulo {
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 600;
	margin: 0 0 .85rem;
	max-width: 18ch;
}

.psi-hero__sub {
	font-size: 1.12rem;
	color: var(--psi-tinta-suave);
	margin: 0 0 1.75rem;
	max-width: 46ch;
}

.psi-atalho {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: end;
}

.psi-atalho--so-idade { grid-template-columns: 130px auto; justify-content: start; }

.psi-campo label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--psi-tinta-suave);
	margin-bottom: 6px;
}

.psi-campo input,
.psi-campo select {
	width: 100%;
	height: 52px;
	font-family: var(--psi-texto);
	font-size: 1.05rem;
	color: var(--psi-tinta);
	background: #fff;
	border: 1.5px solid var(--psi-linha);
	border-radius: var(--psi-raio);
	padding: 0 14px;
}

.psi-atalho .psi-botao { height: 52px; }

.psi-atalho__nota { margin: .8rem 0 0; font-size: .92rem; }
.psi-atalho__nota a { color: var(--psi-azul); text-decoration: underline; text-underline-offset: 3px; }

.psi-confianca {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--psi-linha);
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.75rem;
	font-size: .95rem;
	color: var(--psi-tinta-suave);
}

.psi-confianca li { margin: 0; padding-left: 24px; position: relative; }
.psi-confianca li::before {
	content: "";
	position: absolute;
	left: 0; top: .45em;
	width: 14px; height: 8px;
	border-left: 2px solid var(--psi-verde);
	border-bottom: 2px solid var(--psi-verde);
	transform: rotate(-45deg);
}

.psi-hero__foto { position: relative; }
.psi-hero__foto img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	object-fit: cover;
}

.psi-hero__zap {
	display: block;
	text-align: center;
	margin-top: 14px;
	background: var(--psi-verde);
	color: #fff;
	font-weight: 600;
	padding: 13px 18px;
	border-radius: var(--psi-raio);
	text-decoration: none;
}
.psi-hero__zap:hover { background: var(--psi-verde-escuro); color: #fff; }

/* ==========================================================
   6. Blocos de conteudo (usados na Fase 5)
   ========================================================== */

.psi-cartoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin: 2rem 0;
}

.psi-cartao {
	background: #fff;
	border: 1px solid var(--psi-linha);
	border-radius: 12px;
	padding: 1.5rem;
}

.psi-cartao__valor {
	font-family: var(--psi-titulo);
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--psi-azul);
	display: block;
	line-height: 1.1;
}

.psi-cartao__rotulo { font-size: .98rem; color: var(--psi-tinta-suave); margin-top: .4rem; }

.psi-destaque {
	background: var(--psi-azul-claro);
	border-left: 4px solid var(--psi-azul);
	border-radius: 0;
	padding: 1.4rem 1.6rem;
	margin: 2rem 0;
}
.psi-destaque p:last-child { margin-bottom: 0; }

.entry-content table {
	border-collapse: collapse;
	font-size: .98rem;
}
.entry-content table th {
	background: var(--psi-azul-claro);
	color: var(--psi-azul-escuro);
	font-family: var(--psi-titulo);
	font-weight: 600;
}
.entry-content table th,
.entry-content table td {
	border: 1px solid var(--psi-linha);
	padding: 10px 14px;
}

/* ==========================================================
   7. Rodape
   ========================================================== */

.psi-rodape {
	background: var(--psi-fundo);
	border-top: 1px solid var(--psi-linha);
	padding: 3rem 20px;
}

.psi-rodape__wrap {
	max-width: var(--psi-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2.5rem;
}

.psi-rodape__titulo {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 .9rem;
	color: var(--psi-azul);
}

.psi-rodape p { margin: 0 0 .55rem; font-size: .98rem; color: var(--psi-tinta-suave); max-width: 42ch; }
.psi-rodape a { color: var(--psi-azul); }

/* ==========================================================
   8. CTA persistente
   ========================================================== */

.psi-flutuante {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--psi-verde);
	color: #fff;
	font-family: var(--psi-texto);
	font-weight: 600;
	font-size: 1rem;
	padding: 13px 20px;
	border-radius: 100px;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(4, 44, 83, .22);
}
.psi-flutuante:hover { background: var(--psi-verde-escuro); color: #fff; }
.psi-flutuante__icone { display: inline-flex; }

.psi-barra-mobile { display: none; }

/* ==========================================================
   9. Responsivo
   ========================================================== */

@media (max-width: 921px) {
	.psi-hero { background: var(--psi-azul); padding: 1.5rem 14px 1.5rem; }
	.psi-hero__wrap {
		grid-template-columns: minmax(0, 1fr);
		padding: 1.75rem 1.25rem;
		gap: 1.75rem;
	}
	.psi-hero__foto { order: -1; max-width: 320px; }
	.psi-atalho { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.psi-atalho .psi-botao { width: 100%; margin-top: .35rem; }
	.psi-hero__titulo { max-width: none; }

	.psi-flutuante { display: none; }

	.psi-barra-mobile {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 9990;
		background: var(--psi-linha);
		box-shadow: 0 -2px 14px rgba(4, 44, 83, .16);
	}
	.psi-barra-mobile a {
		padding: 15px 10px;
		text-align: center;
		font-family: var(--psi-texto);
		font-weight: 600;
		font-size: 1rem;
		text-decoration: none;
	}
	.psi-barra-mobile__zap { background: var(--psi-verde); color: #fff; }
	.psi-barra-mobile__tel { background: var(--psi-azul); color: #fff; }

	body { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}