/* ==========================================================================
   Ecomtur — base.css
   Tokens, reset, tipografia e layout. Derivado do design system de
   referência: superfícies neutras (zinc) + cores da marca Ecomtur no lugar
   de laranja / violeta / verde.
   Convenção: BEM com prefixo ect_  →  .ect_bloco__elemento--modificador
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Neutros — superfícies do design system */
	--ect-neutral-white: #ffffff;
	--ect-neutral-100: #f4f4f5;
	--ect-neutral-200: #e4e4e7;
	--ect-neutral-300: #d4d4d8;
	--ect-neutral-400: #9f9fa9;
	--ect-neutral-500: #71717b;
	--ect-neutral-600: #52525c;
	--ect-neutral-700: #3f3f47;
	--ect-neutral-800: #2f2f34;
	--ect-neutral-900: #18181b;
	--ect-neutral-1000: #09090b;
	--ect-neutral-black: #000000;
	--ect-white-muted: #ffffff80;
	--ect-black-muted: #00000080;

	/* Marca Ecomtur */
	--ect-blue: #004a96;        /* Azul Claro  · substitui o violeta (ação principal) */
	--ect-blue-light: #e6edf5;
	--ect-navy: #00324c;        /* Azul Escuro · superfície de marca */
	--ect-navy-deep: #00111a;
	--ect-green: #017c40;       /* Verde       · substitui o verde (sucesso, destaque) */
	--ect-green-light: #e6f2ec;
	--ect-orange: #ff9605;      /* Laranja     · substitui o laranja (acento, cards) */
	--ect-orange-light: #fff4e6;
	--ect-orange-dark: #1a0f00;

	/* Papéis */
	--ect-color-primary: var(--ect-blue);
	--ect-color-primary-strong: var(--ect-navy);
	--ect-color-accent: var(--ect-orange);
	--ect-color-success: var(--ect-green);

	/* Tipografia */
	--ect-font: "Inter Variable", Inter, Arial, sans-serif;
	--ect-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
	--ect-display-3xl: clamp(2rem, 12.46px + 3.91vw, 5rem);
	--ect-display-2xl: clamp(2rem, 18.97px + 2.61vw, 4rem);
	--ect-display-xl: clamp(2rem, 23.86px + 1.63vw, 3.25rem);
	--ect-display-lg: clamp(1.76rem, 22.43px + 1.15vw, 2.64rem);
	--ect-display-md: clamp(1.56rem, 21.18px + .76vw, 2.14rem);
	--ect-display-sm: clamp(1.39rem, 19.96px + .46vw, 1.74rem);
	--ect-display-xs: clamp(1.23rem, 18.44px + .25vw, 1.42rem);
	--ect-text-lg: clamp(1.25rem, 18.37px + .33vw, 1.5rem);
	--ect-text-md: clamp(1.125rem, 17.19px + .16vw, 1.25rem);
	--ect-text-main: 1rem;
	--ect-text-sm: .875rem;
	--ect-text-xs: .75rem;
	--ect-eyebrow: 1.125rem;

	/* Layout */
	--ect-container: 1600px;    /* largura total do container (já com o respiro lateral) */
	--ect-max-lg: 65rem;
	--ect-max-md: 55rem;
	--ect-max-sm: 45rem;
	--ect-gutter: 2rem;         /* 32px; 20px abaixo de 768px */
	--ect-pad-xl: clamp(5.5rem, -47.9px + 27.18vw, 15rem);
	--ect-pad-lg: clamp(4rem, -23.2px + 17.44vw, 10rem);
	--ect-pad-md: clamp(4.5rem, 11.1vw, 10rem);
	--ect-pad-sm: clamp(2.5rem, 1.54px + 7.69vw, 5rem);
	--ect-header-bar: 4rem;     /* altura da barra (logo + menu) */
	--ect-header-space: .75rem; /* respiro em volta da barra flutuante */
	--ect-header-h: calc(var(--ect-header-bar) + var(--ect-header-space) * 2);
	--ect-shell-max: 1900px;    /* largura máxima do cabeçalho e do mega-menu */
	--ect-adminbar: 0px;        /* altura da barra de administração (quando logado) */

	/* Espaços */
	--ect-gap-xs: .5rem;
	--ect-gap-sm: .75rem;
	--ect-gap-main: 1rem;
	--ect-gap-md: 1.5rem;
	--ect-gap-lg: 2.5rem;
	--ect-gap-xl: 5rem;

	/* Forma */
	--ect-radius-sm: .5rem;
	--ect-radius-md: .75rem;
	--ect-radius-main: 1rem;
	--ect-radius-section: 1.5rem;
	--ect-radius-pill: 5rem;
	--ect-border: 1.5px;

	/* Movimento */
	--ect-ease: cubic-bezier(0, 0, 0, 1);
	--ect-duration: .15s;
	--ect-duration-slow: .4s;
	--ect-ease-out: cubic-bezier(.16, 1, .3, 1); /* entradas (mega-menu, menu mobile) */

	/* Tema padrão (claro) */
	--ect-bg: var(--ect-neutral-white);
	--ect-fg: var(--ect-neutral-black);
	--ect-fg-muted: var(--ect-black-muted);
	--ect-line: var(--ect-neutral-200);
	--ect-surface: var(--ect-neutral-100);
	--ect-link-hover: var(--ect-blue);
}

/* Temas de seção: definem fundo, texto, linha e superfície */
.ect_theme--light {
	--ect-bg: var(--ect-neutral-white);
	--ect-fg: var(--ect-neutral-black);
	--ect-fg-muted: var(--ect-black-muted);
	--ect-line: var(--ect-neutral-200);
	--ect-surface: var(--ect-neutral-100);
	--ect-link-hover: var(--ect-blue);
}
.ect_theme--gray {
	--ect-bg: var(--ect-neutral-100);
	--ect-fg: var(--ect-neutral-black);
	--ect-fg-muted: var(--ect-black-muted);
	--ect-line: var(--ect-neutral-300);
	--ect-surface: var(--ect-neutral-white);
	--ect-link-hover: var(--ect-blue);
}
.ect_theme--dark {
	--ect-bg: var(--ect-neutral-black);
	--ect-fg: var(--ect-neutral-white);
	--ect-fg-muted: var(--ect-white-muted);
	--ect-line: var(--ect-neutral-900);
	--ect-surface: var(--ect-neutral-1000);
	--ect-link-hover: var(--ect-orange);
}
.ect_theme--brand {
	--ect-bg: var(--ect-navy);
	--ect-fg: var(--ect-neutral-white);
	--ect-fg-muted: #ffffffa6;
	--ect-line: #ffffff26;
	--ect-surface: var(--ect-navy-deep);
	--ect-link-hover: var(--ect-orange);
}
.ect_theme--blue {
	--ect-bg: var(--ect-blue);
	--ect-fg: var(--ect-neutral-white);
	--ect-fg-muted: #ffffffbf;
	--ect-line: #ffffff33;
	--ect-surface: color-mix(in srgb, var(--ect-blue), #000 18%);
	--ect-link-hover: var(--ect-orange);
}
.ect_theme--accent {
	--ect-bg: var(--ect-orange);
	--ect-fg: var(--ect-neutral-black);
	--ect-fg-muted: #000000a6;
	--ect-line: #00000026;
	--ect-surface: var(--ect-orange-light);
	--ect-link-hover: var(--ect-navy);
}
[class*="ect_theme--"] {
	background-color: var(--ect-bg);
	color: var(--ect-fg);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Barra de administração: fixa acima de 600px; abaixo disso ela rola junto com a página. */
.admin-bar { --ect-adminbar: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	.admin-bar { --ect-adminbar: 0px; }
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--ect-header-h) + 1rem);
	scrollbar-gutter: stable; /* a barra de rolagem não some nem empurra o layout */
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	background-color: var(--ect-bg);
	color: var(--ect-fg);
	font-family: var(--ect-font);
	font-size: var(--ect-text-main);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	font-variation-settings: "wght" 600, "opsz" 32;
	line-height: 1.2;
	text-wrap: balance;
}
p { text-wrap: pretty; }
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
::selection { background-color: var(--ect-orange); color: var(--ect-neutral-black); }
[x-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   3. Tipografia
   -------------------------------------------------------------------------- */
.ect_display {
	font-weight: 600;
	font-variation-settings: "wght" 600, "opsz" 32;
	line-height: 1.1;
	text-wrap: balance;
}
.ect_display--3xl { font-size: var(--ect-display-3xl); }
.ect_display--2xl { font-size: var(--ect-display-2xl); }
.ect_display--xl  { font-size: var(--ect-display-xl); }
.ect_display--lg  { font-size: var(--ect-display-lg); line-height: 1.2; }
.ect_display--md  { font-size: var(--ect-display-md); line-height: 1.2; }
.ect_display--sm  { font-size: var(--ect-display-sm); line-height: 1.2; }
.ect_display--xs  { font-size: var(--ect-display-xs); line-height: 1.25; }

.ect_text--lg   { font-size: var(--ect-text-lg); }
.ect_text--md   { font-size: var(--ect-text-md); }
.ect_text--main { font-size: var(--ect-text-main); }
.ect_text--sm   { font-size: var(--ect-text-sm); }
.ect_text--xs   { font-size: var(--ect-text-xs); }
.ect_text--muted { color: color-mix(in srgb, currentColor, transparent 50%); }
.ect_text--mono { font-family: var(--ect-font-mono); }
.ect_text--center { text-align: center; }
.ect_text--balance { text-wrap: balance; }

/* Link dentro do texto */
.ect_link {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-thickness: var(--ect-border);
	text-underline-offset: .2em;
	transition: text-decoration-color var(--ect-duration) var(--ect-ease), color var(--ect-duration) var(--ect-ease);
}
.ect_link:hover { text-decoration-color: var(--ect-link-hover); }
.ect_link.ect_text--muted:hover { color: currentColor; }

/* Conteúdo vindo do editor (posts, páginas simples) */
.ect_prose { font-size: var(--ect-text-md); line-height: 1.65; }
.ect_prose > * + * { margin-top: 1.25em; }
.ect_prose h2 { font-size: var(--ect-display-md); margin-top: 2em; }
.ect_prose h3 { font-size: var(--ect-display-sm); margin-top: 1.75em; }
.ect_prose h4 { font-size: var(--ect-display-xs); margin-top: 1.5em; }
.ect_prose a { text-decoration: underline; text-decoration-thickness: var(--ect-border); text-underline-offset: .2em; }
.ect_prose a:hover { text-decoration-color: var(--ect-link-hover); }
.ect_prose ul, .ect_prose ol { padding-left: 1.25em; }
.ect_prose li + li { margin-top: .4em; }
.ect_prose img, .ect_prose figure { border-radius: var(--ect-radius-main); }
.ect_prose figcaption { margin-top: .5rem; font-size: var(--ect-text-sm); color: var(--ect-fg-muted); }
.ect_prose blockquote { padding-left: 1.25rem; border-left: var(--ect-border) solid var(--ect-orange); font-size: var(--ect-text-lg); }
.ect_prose code { font-family: var(--ect-font-mono); font-size: .9em; padding: .1em .35em; border-radius: .25rem; background: var(--ect-surface); }
.ect_prose table { width: 100%; border-collapse: collapse; font-size: var(--ect-text-sm); }
.ect_prose th, .ect_prose td { padding: .75rem; border-bottom: var(--ect-border) solid var(--ect-line); text-align: left; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.ect_container {
	width: 100%;
	max-width: var(--ect-container);
	margin-inline: auto;
	padding-inline: var(--ect-gutter);
}
.ect_container--lg { max-width: calc(var(--ect-max-lg) + var(--ect-gutter) * 2); }
.ect_container--md { max-width: calc(var(--ect-max-md) + var(--ect-gutter) * 2); }
.ect_container--sm { max-width: calc(var(--ect-max-sm) + var(--ect-gutter) * 2); }

.ect_section { position: relative; padding-block: var(--ect-pad-md); }
.ect_section--pad-xl { padding-block: var(--ect-pad-xl); }
.ect_section--pad-lg { padding-block: var(--ect-pad-lg); }
.ect_section--pad-sm { padding-block: var(--ect-pad-sm); }
.ect_section--flush-top { padding-top: 0; }
.ect_section--flush-bottom { padding-bottom: 0; }
.ect_section--rounded-top { border-top-left-radius: var(--ect-radius-section); border-top-right-radius: var(--ect-radius-section); }
.ect_section--rounded-bottom { border-bottom-left-radius: var(--ect-radius-section); border-bottom-right-radius: var(--ect-radius-section); }
/* Hero de tela cheia: ocupa a altura visível (dvh, com fallback em vh) menos a barra de
   administração, quando o usuário está logado. Conteúdo centralizado na vertical. */
.ect_section--screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
}
.admin-bar .ect_section--screen {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}
.ect_section--screen > .ect_container { width: 100%; }

.ect_stack { display: flex; flex-direction: column; gap: var(--ect-gap-main); }
.ect_stack--xs { gap: var(--ect-gap-xs); }
.ect_stack--sm { gap: var(--ect-gap-sm); }
.ect_stack--md { gap: var(--ect-gap-md); }
.ect_stack--lg { gap: var(--ect-gap-lg); }
.ect_stack--xl { gap: var(--ect-gap-xl); }
.ect_stack--center { align-items: center; text-align: center; }

.ect_cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ect-gap-main); }
.ect_cluster--sm { gap: var(--ect-gap-sm); }
.ect_cluster--center { justify-content: center; }
.ect_cluster--between { justify-content: space-between; }

.ect_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ect-grid-min, 18rem)), 1fr));
	gap: var(--ect-gap-md);
}
.ect_grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ect_grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ect_grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ect_grid--sm-gap { gap: var(--ect-gap-sm); }
@media (max-width: 991px) {
	.ect_grid--3, .ect_grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.ect_grid--2, .ect_grid--3, .ect_grid--4 { grid-template-columns: minmax(0, 1fr); }
	:root { --ect-gutter: 1.25rem; } /* 20px */
}

/* --------------------------------------------------------------------------
   5. Acessibilidade
   -------------------------------------------------------------------------- */
.ect_sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.ect_skip-link {
	position: fixed;
	top: .75rem; left: .75rem;
	z-index: 1000;
	padding: .75rem 1rem;
	border-radius: var(--ect-radius-md);
	background: var(--ect-neutral-white);
	color: var(--ect-neutral-black);
	font-weight: 600;
	transform: translateY(-200%);
}
.ect_skip-link:focus { transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}