/*
Theme Name:  Astra Child — Fisio Movabem
Description: Design system completo — tipografia, espaçamento, cores e interatividade.
Template:    astra
Version:     2.1.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/* ================================================================
   SISTEMA DE DESIGN — VARIÁVEIS
   ================================================================ */

:root {
	/* Paleta principal */
	--fm-navy-deep:  #0d1a35;   /* títulos principais */
	--fm-navy:       #1C244B;   /* texto escuro */
	--fm-body:       #2e4168;   /* corpo de texto */
	--fm-muted:      #5c718f;   /* texto secundário */
	--fm-teal:       #06B5B0;   /* cor de marca */
	--fm-teal-dk:    #048a86;   /* teal mais escuro (hover) */
	--fm-teal-glow:  rgba(6, 181, 176, 0.25);
	--fm-dark:       #0A192F;   /* footer / seções escuras */

	/* Fundos */
	--fm-white:      #ffffff;
	--fm-bg-soft:    #f5f8fc;   /* fundo alternado sutil */
	--fm-bg-card:    #ffffff;

	/* Sombras */
	--fm-shadow-xs:  0 2px 6px rgba(13, 26, 53, 0.06);
	--fm-shadow-sm:  0 4px 14px rgba(13, 26, 53, 0.08);
	--fm-shadow-md:  0 10px 32px rgba(13, 26, 53, 0.12);
	--fm-shadow-lg:  0 20px 56px rgba(13, 26, 53, 0.16);
	--fm-shadow-teal: 0 14px 38px var(--fm-teal-glow);

	/* Bordas */
	--fm-border:     1px solid rgba(28, 36, 75, 0.08);
	--fm-border-teal: 1px solid rgba(6, 181, 176, 0.35);

	/* Raios */
	--fm-r-sm:  8px;
	--fm-r-md:  14px;
	--fm-r-lg:  20px;
	--fm-r-pill: 100px;

	/* Transições */
	--fm-t:      0.26s ease;
	--fm-t-slow: 0.42s ease;
}

/* ================================================================
   FUNDAÇÃO GLOBAL
   ================================================================ */

html {
	scroll-behavior: smooth;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	color: var(--fm-body);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	transition: color var(--fm-t), opacity var(--fm-t);
}

/* ================================================================
   TIPOGRAFIA — escala e hierarquia
   Poppins já é carregada pelo Elementor.
   Melhoramos peso, espaçamento e ritmo sem brigar com os
   tamanhos definidos por widget no Elementor.
   ================================================================ */

/* --- Títulos: mais autoridade e legibilidade ------------------- */

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title {
	color: var(--fm-navy-deep);
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0px !important;  /* sem compressão */
}

h5, h6 {
	font-weight: 600 !important;
}

/* Subtítulos com peso leve ficam difíceis de ler — sobe para 400 */
.elementor-heading-title[class*="elementor-size-medium"],
.elementor-heading-title[class*="elementor-size-small"] {
	font-weight: 400 !important;
	color: var(--fm-body);
}

/* --- Corpo de texto: o grande problema era font-weight:300 ----- */

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor blockquote,
.elementor-image-box-description,
.elementor-testimonial-content {
	font-weight: 400 !important;
	line-height: 1.78 !important;
	color: var(--fm-body) !important;
}

.elementor-widget-text-editor {
	font-size: 17px !important;
}

.elementor-widget-text-editor p {
	font-size: 17px !important;
	margin-bottom: 1.4em;
}

.elementor-image-box-description {
	font-size: 15.5px !important;
	color: var(--fm-muted) !important;
}

/* Respira mais entre parágrafos */
.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ================================================================
   CARDS DE SERVIÇO — Image Box
   ================================================================ */

.elementor-widget-image-box {
	height: 100%;
}

.elementor-widget-image-box .elementor-image-box-wrapper {
	background: var(--fm-bg-card);
	border: var(--fm-border);
	border-radius: var(--fm-r-lg);
	padding: 28px 22px 32px;
	height: 100%;
	transition:
		transform var(--fm-t),
		box-shadow var(--fm-t),
		border-color var(--fm-t);
	position: relative;
	overflow: hidden;
}

/* Linha decorativa teal no topo do card no hover */
.elementor-widget-image-box .elementor-image-box-wrapper::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--fm-teal), #06d4cf);
	opacity: 0;
	transition: opacity var(--fm-t);
	border-radius: var(--fm-r-lg) var(--fm-r-lg) 0 0;
}

.elementor-widget-image-box:hover .elementor-image-box-wrapper {
	transform: translateY(-7px);
	box-shadow: var(--fm-shadow-md), var(--fm-shadow-teal);
	border-color: rgba(6, 181, 176, 0.22);
}

.elementor-widget-image-box:hover .elementor-image-box-wrapper::before {
	opacity: 1;
}

/* Zoom na imagem do card */
.elementor-image-box-img {
	overflow: hidden;
	border-radius: var(--fm-r-sm);
	display: inline-block;
}

.elementor-image-box-img img {
	transition: transform 0.4s ease !important;
}

.elementor-widget-image-box:hover .elementor-image-box-img img {
	transform: scale(1.07);
}

/* Título do card */
.elementor-image-box-title {
	color: var(--fm-navy) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

/* ================================================================
   BOTÕES — mantém pill 100px + adiciona física de hover
   ================================================================ */

.elementor-button {
	transition:
		transform var(--fm-t),
		box-shadow var(--fm-t),
		filter var(--fm-t) !important;
	will-change: transform;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
}

.elementor-button:hover,
.elementor-button:focus {
	transform: translateY(-4px) scale(1.01) !important;
	box-shadow:
		0 14px 36px var(--fm-teal-glow),
		0 5px 14px rgba(6, 181, 176, 0.18) !important;
	filter: brightness(1.06) !important;
}

.elementor-button:active {
	transform: translateY(-1px) scale(1) !important;
	box-shadow: 0 6px 16px var(--fm-teal-glow) !important;
	transition-duration: 0.1s !important;
}

/* Foco acessível */
.elementor-button:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--fm-teal);
	outline-offset: 4px;
}

/* ================================================================
   DEPOIMENTOS (Testimonials) — secção escura
   ================================================================ */

.elementor-testimonial-wrapper {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--fm-r-md);
	padding: 30px 26px;
	transition:
		background var(--fm-t),
		border-color var(--fm-t),
		transform var(--fm-t);
}

.elementor-testimonial-wrapper:hover {
	background: rgba(6, 181, 176, 0.1);
	border-color: rgba(6, 181, 176, 0.35);
	transform: translateY(-4px);
}

.elementor-testimonial-content {
	font-size: 15.5px !important;
	line-height: 1.8 !important;
	font-weight: 400 !important;
}

/* Aspas decorativas */
.elementor-testimonial-content::before {
	content: '\201C';
	font-size: 3em;
	line-height: 0;
	vertical-align: -0.4em;
	color: var(--fm-teal);
	margin-right: 4px;
	font-family: Georgia, serif;
}

/* ================================================================
   CABEÇALHO / NAVEGAÇÃO
   ================================================================ */

.main-header-bar {
	transition: box-shadow var(--fm-t), background-color var(--fm-t);
}

.main-header-bar.header-sticky--active,
.main-header-bar.ast-header-sticked {
	box-shadow: 0 2px 24px rgba(13, 26, 53, 0.1);
}

.main-header-menu .menu-item > a,
.ast-builder-menu .menu-item > a {
	transition: color var(--fm-t);
	font-weight: 500;
}

/* ================================================================
   SEÇÕES — alternância de fundo para separação visual
   Não consigo targetar sections específicas sem saber os IDs,
   mas melhoro o espaçamento geral do Elementor.
   ================================================================ */

/* Container Elementor: mais respiro no mobile */
@media (max-width: 767px) {
	.elementor-section.elementor-section-boxed > .elementor-container,
	.e-con {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ================================================================
   IMAGENS GERAIS — tratamento de qualidade
   ================================================================ */

.elementor-widget-image img,
.elementor-image img {
	border-radius: var(--fm-r-md);
	transition: transform var(--fm-t-slow), box-shadow var(--fm-t);
}

.elementor-widget-image:hover img,
.elementor-image:hover img {
	transform: scale(1.02);
	box-shadow: var(--fm-shadow-md);
}

/* ================================================================
   FOOTER
   ================================================================ */

.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p {
	line-height: 1.7 !important;
	font-size: 14.5px !important;
	font-weight: 400 !important;
}

.elementor-location-footer a {
	opacity: 0.85;
}

.elementor-location-footer a:hover {
	opacity: 1;
	color: var(--fm-teal) !important;
}

/* ================================================================
   ÍCONES DE REDE SOCIAL
   ================================================================ */

.elementor-social-icon {
	transition: transform var(--fm-t), opacity var(--fm-t) !important;
}

.elementor-social-icon:hover {
	transform: translateY(-3px) !important;
	opacity: 1 !important;
}

/* ================================================================
   DIVISORES
   ================================================================ */

.elementor-divider-separator {
	opacity: 0.15;
}

/* ================================================================
   SCROLL REVEAL — leve fade em seções (CSS puro)
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {
	.elementor-widget {
		animation: fm-fadein 0.5s ease both;
	}

	@keyframes fm-fadein {
		from {
			opacity: 0;
			transform: translateY(12px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* ================================================================
   MOBILE — layout compacto (≤ 767px)
   ================================================================ */

@media (max-width: 767px) {

	/* --- Spacer: destrói alturas excessivas do Elementor -------- */
	/* Elementor define height inline; !important vence inline sem !important */
	.elementor-spacer-inner,
	.elementor-element .elementor-spacer-inner,
	.elementor-widget-spacer .elementor-spacer-inner {
		height: 16px !important;
		max-height: 16px !important;
		min-height: 0 !important;
	}

	/* --- Header: compacto --------------------------------------- */
	#masthead,
	.main-header-bar {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
		min-height: 56px !important;
	}

	.ast-site-identity img,
	.custom-logo {
		max-height: 40px !important;
		width: auto !important;
	}

	.ast-button-wrap .menu-toggle,
	button.menu-toggle {
		min-width: 44px !important;
		min-height: 44px !important;
	}

	/* --- Seções: padding reduzido ------------------------------ */
	.elementor-section,
	.e-con,
	.elementor-top-section {
		padding-top: 36px !important;
		padding-bottom: 36px !important;
	}

	.elementor-section.elementor-section-height-full,
	.e-con.e-con-full-height {
		min-height: 70vh !important;
		padding-top: 50px !important;
		padding-bottom: 50px !important;
	}

	/* --- Container lateral ------------------------------------ */
	.elementor-section.elementor-section-boxed > .elementor-container,
	.elementor-section > .elementor-container,
	.e-con > .e-con-inner,
	.e-con-inner {
		padding-left: 20px !important;
		padding-right: 20px !important;
		max-width: 100% !important;
	}

	/* Carrossel de depoimentos: zera padding para cada slide
	   ocupar exatamente 100% do container sem deixar o próximo aparecer.
	   O padding de 20px (de .e-con.e-parent) desalinha o scroll do JS
	   que usa clientWidth como passo — remove do outer e do inner. */
	.elementor-509 .elementor-element.elementor-element-173b4f5,
	.elementor-509 .elementor-element.elementor-element-173b4f5 > .e-con-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* --- Colunas: empilha em coluna única por padrão ----------- */
	.elementor-row {
		flex-wrap: wrap !important;
	}

	.elementor-column,
	[class*="elementor-col-"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	.elementor-column > .elementor-column-wrap {
		padding: 0 !important;
	}

	.elementor-widget:not(:last-child) {
		margin-bottom: 16px !important;
	}

	/* --- Tipografia ------------------------------------------- */
	h1,
	.elementor-heading-title.elementor-size-xxl,
	.elementor-heading-title.elementor-size-xl {
		font-size: clamp(24px, 7vw, 32px) !important;
		line-height: 1.25 !important;
	}

	h2,
	.elementor-heading-title.elementor-size-large {
		font-size: clamp(20px, 5.5vw, 26px) !important;
		line-height: 1.3 !important;
	}

	h3, h4,
	.elementor-heading-title.elementor-size-medium {
		font-size: clamp(17px, 4.5vw, 20px) !important;
		line-height: 1.35 !important;
	}

	.elementor-widget-text-editor,
	.elementor-widget-text-editor p {
		font-size: 15px !important;
		line-height: 1.7 !important;
	}

	/* --- Botões: toque fácil ---------------------------------- */
	.elementor-button {
		font-size: 15px !important;
		padding: 14px 28px !important;
		min-height: 48px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.elementor-button-wrapper {
		text-align: center !important;
	}

	/* --- Imagens: largura total ------------------------------- */
	.elementor-widget-image img,
	.elementor-image img {
		width: 100% !important;
		height: auto !important;
		object-fit: cover !important;
	}

	.elementor-widget-image {
		width: 100% !important;
	}

	/* --- Ícone + texto: horizontal (como Lar Santana) ---------- */
	.elementor-icon-box-wrapper {
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 14px !important;
		text-align: left !important;
	}

	.elementor-icon-box-icon {
		flex-shrink: 0 !important;
		margin-bottom: 0 !important;
	}

	.elementor-icon-box-content {
		text-align: left !important;
	}

	.elementor-icon-box-title {
		font-size: 16px !important;
		margin-bottom: 4px !important;
	}

	.elementor-icon-box-description {
		font-size: 14px !important;
		line-height: 1.6 !important;
	}

	/* --- Formulários ------------------------------------------ */
	.elementor-field-group {
		width: 100% !important;
	}

	.elementor-field-type-text input,
	.elementor-field-type-email input,
	.elementor-field-type-tel input,
	.elementor-field-type-textarea textarea,
	.elementor-field-type-select select {
		width: 100% !important;
		padding: 14px 16px !important;
		font-size: 15px !important;
		min-height: 50px !important;
	}

	/* --- Footer: empilhado e centralizado --------------------- */
	.elementor-location-footer .elementor-column {
		width: 100% !important;
		text-align: center !important;
	}

	.elementor-location-footer .elementor-widget-text-editor,
	.elementor-location-footer .elementor-widget-text-editor p {
		font-size: 13.5px !important;
		line-height: 1.6 !important;
	}

}

/* ================================================================
   CARROSSEL HORIZONTAL — deslizar para o lado
   Usa CSS :has() (Chrome 105+/Firefox 121+/Safari 15.4+)
   + classe .fm-carousel adicionada via JS para navegadores antigos
   ================================================================ */

@media (max-width: 767px) {

	/* --- Detecta linhas com cards de serviço ou depoimentos ---- */
	.elementor-row:has(> .elementor-column .elementor-widget-image-box),
	.elementor-row:has(> .elementor-column .elementor-widget-testimonial),
	.elementor-row.fm-carousel {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 0px !important;
		padding-bottom: 20px !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}

	.elementor-row:has(> .elementor-column .elementor-widget-image-box)::-webkit-scrollbar,
	.elementor-row:has(> .elementor-column .elementor-widget-testimonial)::-webkit-scrollbar,
	.elementor-row.fm-carousel::-webkit-scrollbar {
		display: none !important;
	}

	/* Cada card: 100% da largura → um card por vez, sem vazamento */
	.elementor-row:has(> .elementor-column .elementor-widget-image-box) > .elementor-column,
	.elementor-row:has(> .elementor-column .elementor-widget-testimonial) > .elementor-column,
	.elementor-row.fm-carousel > .elementor-column,
	.elementor-row.fm-carousel > .fm-carousel-card {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		scroll-snap-align: start !important;
	}

	/* Card de serviço: centraliza conteúdo */
	.elementor-widget-image-box .elementor-image-box-wrapper {
		padding: 20px 16px 24px !important;
		text-align: center !important;
	}

	.elementor-image-box-content {
		text-align: center !important;
	}

}

/* ================================================================
   POSTS (SINGLE) — cabeçalho de artigo profissional
   ================================================================ */

/* Linha teal decorativa antes do título */
.single .entry-header {
	position: relative;
	padding-top: 44px !important;
}

.single .entry-header::before {
	content: '';
	display: block;
	width: 48px;
	height: 4px;
	background: var(--fm-teal);
	border-radius: 2px;
	margin-bottom: 18px;
}

/* Título do post */
.single .entry-title {
	font-size: clamp(24px, 4vw, 38px) !important;
	line-height: 1.25 !important;
	color: var(--fm-navy-deep) !important;
	margin-bottom: 18px !important;
}

/* Meta: data, autor, categoria */
.single .entry-meta,
.single .ast-article-post .entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	align-items: center;
	padding: 12px 0 16px;
	border-top: 1px solid rgba(28, 36, 75, 0.09);
	border-bottom: 1px solid rgba(28, 36, 75, 0.09);
	margin-bottom: 28px;
}

.single .entry-meta span,
.single .entry-meta .posted-on,
.single .entry-meta .byline,
.single .entry-meta .cat-links {
	font-size: 13px !important;
	color: var(--fm-muted) !important;
	font-weight: 500 !important;
}

.single .entry-meta a {
	color: var(--fm-teal) !important;
	text-decoration: none !important;
	transition: color var(--fm-t);
}

.single .entry-meta a:hover {
	color: var(--fm-teal-dk) !important;
}

/* Imagem destacada */
.single .post-thumbnail,
.single .ast-blog-single-image {
	border-radius: var(--fm-r-lg);
	overflow: hidden;
	box-shadow: var(--fm-shadow-md);
	margin-bottom: 36px;
}

.single .post-thumbnail img,
.single .ast-blog-single-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--fm-r-lg);
	transition: transform var(--fm-t-slow);
}

.single .post-thumbnail:hover img {
	transform: scale(1.02);
}

/* Conteúdo do artigo */
.single .entry-content {
	font-size: 17px;
	line-height: 1.85;
	color: var(--fm-body);
}

.single .entry-content h2 {
	font-size: clamp(20px, 3vw, 26px) !important;
	margin-top: 2em !important;
	margin-bottom: 0.5em !important;
	color: var(--fm-navy-deep) !important;
	padding-left: 14px;
	border-left: 3px solid var(--fm-teal);
}

.single .entry-content h3 {
	font-size: clamp(17px, 2.5vw, 21px) !important;
	margin-top: 1.6em !important;
	margin-bottom: 0.4em !important;
	color: var(--fm-navy) !important;
}

.single .entry-content p {
	margin-bottom: 1.4em;
}

.single .entry-content ul,
.single .entry-content ol {
	padding-left: 1.6em;
	margin-bottom: 1.4em;
}

.single .entry-content li {
	margin-bottom: 0.5em;
	line-height: 1.7;
}

/* Blockquote de destaque */
.single .entry-content blockquote {
	border-left: 4px solid var(--fm-teal);
	margin: 2em 0;
	padding: 16px 24px;
	background: var(--fm-bg-soft);
	border-radius: 0 var(--fm-r-sm) var(--fm-r-sm) 0;
	font-style: italic;
	color: var(--fm-navy);
}

/* Mobile */
@media (max-width: 767px) {
	.single .entry-title {
		font-size: clamp(20px, 6.5vw, 26px) !important;
	}

	.single .entry-content {
		font-size: 15.5px;
	}

	.single .entry-header {
		padding-top: 32px !important;
	}
}

/* ================================================================
   RODAPÉ — ZONA LESTE: corrige alinhamento torto no mobile
   O elemento acce47d tem line-height:100px e text-align:end
   (à direita) definidos no Elementor, o que quebra o layout no mobile
   quando o grid de 3 colunas vira 1 coluna.
   ================================================================ */

@media (max-width: 767px) {

	.elementor-509 .elementor-element.elementor-element-acce47d {
		text-align: center !important;
		line-height: 1.6 !important;
	}

	.elementor-509 .elementor-element.elementor-element-acce47d .elementor-widget-container,
	.elementor-509 .elementor-element.elementor-element-acce47d p,
	.elementor-509 .elementor-element.elementor-element-acce47d strong {
		line-height: 1.6 !important;
	}

	/* Centraliza os ícones sociais abaixo no mobile */
	.elementor-509 .elementor-element.elementor-element-55018c6 {
		text-align: center !important;
		justify-content: center !important;
	}

	/* CTA: corrige quebra de linha com "Leste" sozinho */
	.elementor-509 .elementor-element.elementor-element-190f75db .elementor-heading-title {
		text-wrap: balance;
	}

}

/* ================================================================
   TABLET (768px – 1024px)
   ================================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

	.elementor-section,
	.e-con {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	.elementor-section.elementor-section-boxed > .elementor-container,
	.e-con > .e-con-inner {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}

	.elementor-col-33,
	.elementor-col-25 {
		width: 50% !important;
		max-width: 50% !important;
	}

}