/* Vita Hub — brand overrides (keep main.css intact) */

/* ===============================
   Paleta oficial
   =============================== */
:root {
  --vita-green: #2F3A36;    /* fundo principal */
  --vita-beige: #D8C1A5;    /* acento premium */
  --vita-offwhite: #F2EEE8; /* texto principal */
  --vita-gray: #BFB8B0;     /* texto secundário */
  --vita-surface: rgba(23, 31, 30, 0.90);
}

/* ================================
   Logo — ajuste óptico Vita Hub
   ================================ */

#header .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: normal;
}

#header .logo .icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

#header .logo .icon svg {
	width: 50%;
	height: auto;
	transform: translateX(-1px) translateY(0px);
}

/* ================================
   Tipografia — cores da marca (somente texto)
   ================================ */

body,
input,
select,
textarea {
	color: var(--vita-offwhite);
}

strong,
b {
	color: var(--vita-offwhite);
}

h1, h2, h3, h4, h5, h6,
label {
	color: var(--vita-offwhite);
}

/* Texto secundário (sutil) — placeholders */
::placeholder {
	color: rgba(242, 238, 232, 0.65);
}

/* ================================
   Bordas & divisores — Vita Beige
   ================================ */

/* Linhas verticais e horizontais do header */
#header > *:before {
	background: rgba(216, 193, 165, 0.65);
}

/* Borda do conteúdo do header */
#header .content {
	border-color: rgba(216, 193, 165, 0.65);
}

/* Borda dos títulos principais */
h1.major, h2.major, h3.major {
	border-bottom-color: rgba(216, 193, 165, 0.65);
}

/* Menu */
#header nav ul {
	border-color: rgba(216, 193, 165, 0.65);
}

#header nav ul li {
	border-left-color: rgba(216, 193, 165, 0.65);
}

/* Mobile menu (bordas verticais viram horizontais) */
@media screen and (max-width: 480px) {
	#header nav ul li {
		border-top-color: rgba(216, 193, 165, 0.65);
	}
}

/* Círculo do logo */
#header .logo {
	border-color: rgba(216, 193, 165, 0.65);
}

/* Linhas verticais do header (mais específico) */
#header > .content:before,
#header > nav:before {
	background: rgba(216, 193, 165, 0.65);
}

/* Caso você use o divisor central do menu (use-middle) */
#header nav.use-middle:after {
	background: rgba(216, 193, 165, 0.65);
}

/* ================================
   Botões — estilo base Vita Hub
   ================================ */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	color: var(--vita-offwhite) !important;
	box-shadow: inset 0 0 0 1px rgba(216, 193, 165, 0.65);
}

/* Hover suave */
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	background-color: rgba(216, 193, 165, 0.12);
}

/* Active */
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	background-color: rgba(216, 193, 165, 0.22);
}

/* Botão primary (mantém sobriedade) */
.button.primary,
input[type="submit"].primary {
	background-color: rgba(216, 193, 165, 0.18);
	color: var(--vita-offwhite) !important;
	font-weight: 600;
}

.button.primary:hover,
input[type="submit"].primary:hover {
	background-color: rgba(216, 193, 165, 0.28);
}

/* ================================
   Formulários — Vita Hub
   ================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
	border-color: rgba(216, 193, 165, 0.45);
	color: var(--vita-offwhite);
}

/* Hover leve */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover,
select:hover {
	border-color: rgba(216, 193, 165, 0.65);
}

/* Focus elegante */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: rgba(216, 193, 165, 0.85);
	background-color: rgba(216, 193, 165, 0.06);
	box-shadow: none; /* remove glow branco do template */
}

/* ================================
   Articles — superfície (preparado p/ verde sutil no futuro)
   ================================ */

#main article {
	background:
		linear-gradient(
			180deg,
			rgba(23, 31, 30, 0.92) 0%,
			rgba(19, 26, 25, 0.92) 100%
		);
}

/* ================================
   Lista — marcador elegante (Atuação)
   ================================ */

.vita-list {
	list-style: none;
	padding-left: 0;
	margin: 2rem 0;
}

.vita-list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.9rem;
	color: var(--vita-offwhite);
}

.vita-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: rgba(216, 193, 165, 0.85); /* vita-beige */
}

/* ================================
   WhatsApp flutuante — ícone limpo (sem círculo)
   ================================ */

.whatsapp-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 10000;

	/* remove aparência de botão */
	width: auto;
	height: auto;
	line-height: normal;
	border-radius: 0;
	background: none;
	box-shadow: none;

	color: var(--vita-offwhite);
	text-decoration: none;
	border-bottom: 0;
	padding: 0.25rem;
}

/* Ícone */
.whatsapp-float:before {
	font-size: 1.8rem; /* ajuste fino aqui */
}

/* Hover sutil (opcional) */
.whatsapp-float:hover {
	opacity: 0.8;
}

/* Não atrapalhar quando artigo estiver aberto */
body.is-article-visible .whatsapp-float {
	opacity: 0;
	pointer-events: none;
}

#bg:before {
  background-image:
    linear-gradient(
      180deg,
      rgba(19, 21, 25, 0.45) 0%,
      rgba(19, 21, 25, 0.45) 100%
    ) !important;
}

/* Vita Hub — remove halos/“buraco” causados por blur do template */
body.is-article-visible #bg:after,
body.is-preload #header,
body.is-article-visible #header,
body.is-article-visible #footer {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Ajuste para garantir maior visibilidade do texto */
.hero-text {
  color: rgba(255, 255, 255, 0.85) !important; /* Aumenta a visibilidade do texto */
}

/* Vita Hub — remove vinheta radial do header (causa do buraco central) */
#header {
  background-image: none !important;
}

/* Hero — título principal */
#header h1 {
  font-weight: 600;            /* antes ~400/500 */
  letter-spacing: 0.18em;      /* um pouco mais fechado */
  margin-bottom: 1.2rem;
}

/* Hero — ajuste de leitura do texto descritivo */
#header p {

  /* Aumenta levemente o contraste do texto sem ficar branco puro,
     evitando brilho excessivo sobre fundo claro */
  color: rgba(255, 255, 255, 0.88);

  /* Aumenta o espaçamento vertical entre linhas,
     reduz fadiga visual em textos longos */
  line-height: 1.75;

  /* Controla o espaçamento entre letras.
     Mantém o ar institucional, mas menos cansativo que o padrão atual */
  letter-spacing: 0.06em;

  /* Limita a largura máxima do parágrafo.
     Evita linhas longas demais, que prejudicam a leitura */
  max-width: 42rem;

  /* Centraliza o bloco de texto horizontalmente,
     mantendo simetria com o eixo central do layout */
  margin-left: auto;
  margin-right: auto;
}

/* Hero — zona de leitura sutil atrás do conteúdo */
#header::before {
  content: "";

  /* Garante que a camada cubra todo o header */
  position: absolute;
  inset: 0;

  /* Gradiente suave que reduz contraste do fundo no centro,
     sem criar "buraco" ou mancha visível */
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.18) 35%,
    rgba(0, 0, 0, 0.05) 65%,
    rgba(0, 0, 0, 0.0) 100%
  );

  /* Camada fica atrás do texto */
  z-index: 0;

  /* Não interfere em cliques */
  pointer-events: none;
}

/* Garante que o conteúdo fique acima da camada */
#header > * {
  position: relative;
  z-index: 1;
}

#header p strong {
  display: block;              /* força o slogan para uma linha própria */
  margin-top: 1.2em;           /* cria separação clara do texto acima */

  font-size: 1.2em;           /* maior que o parágrafo, menor que o título */
  font-weight: 600;            /* presença sem agressividade */

  letter-spacing: 0.14em;      /* mais aberto, tom institucional */
  color: rgba(255, 255, 255, 0.95); /* ligeiramente mais forte que o parágrafo */
}