/* Ajustes deliberados do clone, carregados DEPOIS de todas as folhas do
   Elementor. Cada regra existe por um motivo registrado no README. */

/* O tema Hello Elementor dimensiona titulo por TAG no reset.css
   (h1 = 2.5rem, h2 = 2rem) e este widget nao define tamanho proprio no
   Elementor. Ao promover o titulo da condicao de <h2> para <h1> -- para a
   pagina ter um <h1>, que e o que buscadores esperam -- o texto saltaria de
   32px para 40px. Estas regras devolvem o tamanho original: a mudanca e
   semantica, nao visual. */
.elementor-element-af6d1c6 .elementor-heading-title {
	font-size: 2rem;
}

/* ------------------------------------------------------------------ *
 * Menu mobile em tela cheia
 *
 * Substitui o dropdown do Elementor Pro, que dependia de um "stretch"
 * feito em JS pelo plugin: sem esse JS a caixa ficava com largura de
 * conteudo e vazava para fora da tela. Aqui o painel e `position: fixed`
 * cobrindo a viewport, entao nao ha largura a calcular.
 *
 * Vale ate 767px -- o mesmo ponto em que o Elementor troca o menu
 * horizontal pelo burger.
 * ------------------------------------------------------------------ */

.menu-mobile {
	--menu-fundo: #3b5280;
	--menu-fundo-2: #2f4269;
	--menu-linha: rgb(255 255 255 / 14%);
	--menu-texto: #fff;

	position: fixed;
	inset: 0;
	z-index: 10000;              /* acima do cabecalho fixo (9997) */
	display: flex;
	flex-direction: column;
	background: linear-gradient(160deg, var(--menu-fundo) 0%, var(--menu-fundo-2) 100%);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.menu-mobile[data-aberto='true'] {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.28s ease;
}

/* Acima do breakpoint do burger o painel nao existe para o leitor de tela
   nem para o mouse. */
@media (min-width: 768px) {
	.menu-mobile { display: none; }
}

.menu-mobile__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--menu-linha);
}

.menu-mobile__logo img {
	display: block;
	width: 148px;
	height: auto;
}

.menu-mobile__fechar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;                 /* alvo de toque confortavel */
	height: 44px;
	padding: 0;
	border: 1px solid var(--menu-linha);
	border-radius: 50%;
	background: transparent;
	color: var(--menu-texto);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.menu-mobile__fechar svg { width: 17px; height: 17px; fill: currentColor; }
.menu-mobile__fechar:hover,
.menu-mobile__fechar:focus-visible { background: rgb(255 255 255 / 12%); }
.menu-mobile__fechar:active { transform: scale(0.94); }

/* Centraliza a lista na sobra vertical: com cinco itens, encostada no topo
   ela deixa um vazio grande sobre o rodape. */
.menu-mobile__nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: 6px 0;
}

.menu-mobile__nav > .menu-mobile__lista { width: 100%; }

.menu-mobile__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A separacao pedida: uma linha por item, sem fechar a lista embaixo. */
.menu-mobile__item + .menu-mobile__item { border-top: 1px solid var(--menu-linha); }

.menu-mobile__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px;
	color: var(--menu-texto);
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.menu-mobile__link:hover,
.menu-mobile__link:focus-visible {
	background: rgb(255 255 255 / 8%);
	padding-left: 30px;
	color: var(--menu-texto);
}

.menu-mobile__seta {
	flex: 0 0 auto;
	width: 9px;
	height: 14px;
	fill: currentColor;
	opacity: 0.45;
}

.menu-mobile__rodape {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	padding: 20px 24px 26px;
	border-top: 1px solid var(--menu-linha);
}

.menu-mobile__contato {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgb(255 255 255 / 82%);
	font-size: 15px;
	text-decoration: none;
}

.menu-mobile__contato:hover,
.menu-mobile__contato:focus-visible { color: var(--menu-texto); }

.menu-mobile__uf {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	padding: 2px 6px;
	border: 1px solid var(--menu-linha);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* Enquanto o painel esta aberto, o conteudo atras nao rola. */
body.menu-mobile-aberto { overflow: hidden; }

/* ...e o botao flutuante de WhatsApp sai de cena: ele fica acima do rodape do
   painel e cobre o telefone do RJ. */
body.menu-mobile-aberto #wws-layout-4 { display: none; }

/* O dropdown do Elementor sai de cena: quem abre agora e o painel. */
.elementor-nav-menu--dropdown { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.menu-mobile,
	.menu-mobile__link,
	.menu-mobile__fechar { transition: none; }
}

/* ------------------------------------------------------------------ *
 * "Locais de atendimento" da home -- cartoes
 *
 * O original era uma unica caixa azul translucida com os titulos dos
 * hospitais em 12px, tres por linha. Com a lista reduzida a dois locais
 * sobrava um terco vazio a direita e o bloco ficava ralo. Aqui a caixa
 * some e cada local vira um cartao proprio, centralizado, com endereco e
 * telefone -- o mesmo azul da paleta (#5E7197 / #405785), so que aplicado
 * em superficie e nao em fundo chapado.
 *
 * Os seletores repetem `.elementor-element-13e48b6` porque a regra do
 * builder tem quatro classes de especificidade; `.locais-atendimento` e o
 * gancho que empata e deixa a ordem do arquivo decidir.
 * ------------------------------------------------------------------ */

.elementor-71 .elementor-element.elementor-element-13e48b6.locais-atendimento {
	--width: 100%;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	background-color: transparent;
	box-shadow: none;
	margin-top: 26px;
}

.locais-atendimento .jet-listing-grid__items {
	justify-content: center;
	gap: 24px;
	margin: 0;
	width: 100%;
}

/* Larguras iguais e independentes do `--columns` do Jet: com dois itens o
   calculo de tercos deixava os cartoes estreitos e encostados a esquerda. */
.locais-atendimento .jet-listing-grid__items > .jet-listing-grid__item {
	flex: 0 1 360px;
	max-width: 100%;
	padding: 0;
	display: flex;
}

.local-cartao {
	--cartao-azul: #5E7197;
	--cartao-azul-escuro: #405785;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	padding: 28px 26px 26px;
	border: 1px solid rgb(94 113 151 / 14%);
	border-radius: 16px;
	background: rgb(255 255 255 / 94%);
	box-shadow:
		0 1px 2px rgb(45 46 48 / 4%),
		0 18px 40px -20px rgb(64 87 133 / 38%);
	text-align: left;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Fio superior na cor da marca: da acabamento ao cartao sem pesar o fundo. */
.local-cartao::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--cartao-azul-escuro), var(--cartao-azul));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.local-cartao:hover,
.local-cartao:focus-within {
	transform: translateY(-4px);
	border-color: rgb(64 87 133 / 26%);
	box-shadow:
		0 1px 2px rgb(45 46 48 / 5%),
		0 26px 52px -22px rgb(64 87 133 / 50%);
}

.local-cartao:hover::before,
.local-cartao:focus-within::before { opacity: 1; }

.local-cartao__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.local-cartao__marcador {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--cartao-azul) 0%, var(--cartao-azul-escuro) 100%);
	box-shadow: 0 8px 18px -8px rgb(64 87 133 / 75%);
}

.local-cartao__marcador svg {
	width: 16px;
	height: 16px;
	fill: #fff;
}

/* Mesma pastilha de UF do menu mobile, para o site ter um vocabulario so. */
.local-cartao__uf {
	display: inline-grid;
	place-items: center;
	min-width: 30px;
	padding: 3px 8px;
	border: 1px solid rgb(94 113 151 / 26%);
	border-radius: 5px;
	color: var(--cartao-azul-escuro);
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.local-cartao__titulo {
	margin: 0;
	color: #2D2E30;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.005em;
}

/* A seta anda junto com a ultima palavra, e nao encostada na borda do
   cartao: por isso o link e inline e nao flex. */
.local-cartao__endereco {
	display: block;
	color: #5E5E5E;
	font-family: 'Open Sans', sans-serif;
	font-size: 13.5px;
	line-height: 1.65;
	text-decoration: none;
	transition: color 0.25s ease;
}

.local-cartao__endereco:hover,
.local-cartao__endereco:focus-visible { color: var(--cartao-azul-escuro); }

.local-cartao__seta {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 5px;
	vertical-align: -1px;
	color: var(--cartao-azul);
	opacity: 0.55;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.local-cartao__endereco:hover .local-cartao__seta,
.local-cartao__endereco:focus-visible .local-cartao__seta {
	opacity: 1;
	transform: translate(2px, -2px);
}

/* Empurrado para a base para que dois cartoes de alturas diferentes
   terminem com o telefone na mesma linha. */
.local-cartao__telefone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	padding-top: 16px;
	width: 100%;
	border-top: 1px solid rgb(94 113 151 / 14%);
	color: var(--cartao-azul-escuro);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.25s ease;
}

.local-cartao__telefone svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	fill: currentColor;
	opacity: 0.75;
}

.local-cartao__telefone:hover,
.local-cartao__telefone:focus-visible { color: var(--cartao-azul); }

@media (max-width: 767px) {
	.locais-atendimento .jet-listing-grid__items { gap: 16px; }
	.locais-atendimento .jet-listing-grid__items > .jet-listing-grid__item { flex: 1 1 100%; }
	.local-cartao { padding: 24px 22px 22px; }
	.local-cartao__titulo { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.local-cartao,
	.local-cartao::before,
	.local-cartao__seta { transition: none; }
	.local-cartao:hover,
	.local-cartao:focus-within { transform: none; }
}

/* ------------------------------------------------------------------ *
 * Pagina 404
 *
 * Nao existe original a reproduzir: o WordPress caia no 404 cru do tema
 * Hello Elementor. O estilo aqui reusa o vocabulario ja estabelecido no
 * clone -- superficie clara com sombra, azul da paleta (#5E7197 /
 * #405785) e Montserrat nos titulos -- para a pagina nao parecer de outro
 * site. Nao depende de nenhuma folha do Elementor.
 * ------------------------------------------------------------------ */

.pagina-404 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 68vh;
	padding: 120px 20px 90px;
	background: linear-gradient(180deg, #F6F7FA 0%, #FFFFFF 62%);
}

.pagina-404__caixa {
	width: 100%;
	max-width: 620px;
	padding: 46px 40px 40px;
	border: 1px solid rgb(94 113 151 / 14%);
	border-radius: 18px;
	background: #fff;
	box-shadow:
		0 1px 2px rgb(45 46 48 / 4%),
		0 24px 56px -28px rgb(64 87 133 / 40%);
	text-align: center;
}

/* Grande, mas em cinza-azulado: e referencia, nao o assunto da pagina --
   quem chega aqui precisa ler o titulo primeiro. */
.pagina-404__codigo {
	margin: 0 0 6px;
	color: rgb(94 113 151 / 26%);
	font-family: 'Montserrat', sans-serif;
	font-size: 76px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.pagina-404__titulo {
	margin: 0 0 14px;
	color: #2D2E30;
	font-family: 'Montserrat', sans-serif;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.3;
}

.pagina-404__texto {
	margin: 0 auto 30px;
	max-width: 46ch;
	color: #5E5E5E;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.7;
}

.pagina-404__acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.pagina-404__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 26px;
	border: 1px solid rgb(94 113 151 / 34%);
	border-radius: 999px;
	color: #405785;
	font-family: 'Montserrat', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.25s ease, color 0.25s ease,
		border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pagina-404__botao:hover,
.pagina-404__botao:focus-visible {
	border-color: #405785;
	background: rgb(94 113 151 / 8%);
	color: #405785;
}

.pagina-404__botao--principal {
	border-color: transparent;
	background: linear-gradient(135deg, #5E7197 0%, #405785 100%);
	color: #fff;
	box-shadow: 0 10px 24px -12px rgb(64 87 133 / 90%);
}

.pagina-404__botao--principal:hover,
.pagina-404__botao--principal:focus-visible {
	background: linear-gradient(135deg, #405785 0%, #34486F 100%);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgb(64 87 133 / 95%);
}

.pagina-404__atalhos {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgb(94 113 151 / 14%);
}

.pagina-404__atalhos ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagina-404__atalhos a {
	color: #5E7197;
	font-family: 'Open Sans', sans-serif;
	font-size: 13.5px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.pagina-404__atalhos a:hover,
.pagina-404__atalhos a:focus-visible {
	color: #405785;
	border-bottom-color: rgb(64 87 133 / 40%);
}

@media (max-width: 767px) {
	.pagina-404 { padding: 96px 16px 70px; }
	.pagina-404__caixa { padding: 36px 24px 30px; }
	.pagina-404__codigo { font-size: 60px; }
	.pagina-404__titulo { font-size: 22px; }
	.pagina-404__botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pagina-404__botao { transition: none; }
	.pagina-404__botao--principal:hover,
	.pagina-404__botao--principal:focus-visible { transform: none; }
}
