/* =====================================================================
   REDESIGN 2026-07 — repaginação do topo (faixa vinho + faixa bege) e
   banner. Arquivo isolado, carregado APÓS custom.css (head.php). Pode ser
   removido/desativado sem tocar no resto. Paleta:
     vinho  #30191a   |   dourado/bege #ddb97d   |   creme #fff9ee
   ===================================================================== */

:root {
	--rd-vinho: #30191a;
	--rd-bege: #ddb97d;
	--rd-creme: #fff9ee;
}

/* O tema deixa o header ABSOLUTO (sobreposto, transparente, por cima do
   banner). No redesign o header é um bloco SÓLIDO que fica ACIMA do banner,
   então volta ao fluxo normal. */
.main-header.rd-header {
	position: relative;
	z-index: 50;
}

/* ---------------------------------------------------------------------
   FAIXA VINHO (topo): logo à esquerda + menu principal à direita
   --------------------------------------------------------------------- */
.rd-topband {
	background: var(--rd-vinho) !important;
	height: 124px;
}
.rd-topband-inner {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	height: 124px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 45px !important;
}

/* logo */
.rd-header .rd-logo {
	display: flex;
	align-items: center;
	padding: 0 0 0 8px !important;
	z-index: 20;
}
.rd-header .rd-logo .logo {
	width: auto !important;
	padding: 0 !important;
}
.rd-header .rd-logo .logo img {
	height: 56px;
	max-height: 56px;
	width: auto;
}

/* container do menu (some do fluxo em coluna do tema) */
.rd-header .nav-outer {
	flex-direction: row !important;
	flex-grow: 1 !important;
	align-items: center;
}

/* menu principal — itens distribuídos por toda a largura livre (começam logo
   após a logo e vão até a direita), em vez de amontoados no canto direito. */
.rd-mainmenu {
	flex-grow: 1;
	margin-left: 52px;
	/* remove o recuo direito de 30px do tema (.main-menu), p/ o último item do
	   menu chegar na mesma borda direita que a barra bege (alinhamento). */
	padding-right: 0 !important;
}
.rd-mainmenu .navbar-collapse {
	padding: 0 !important;
	width: 100%;
}
.rd-mainmenu .navigation {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	gap: 24px;
}
.rd-mainmenu .navigation > li {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.rd-mainmenu .navigation > li > a {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 0 !important;
	line-height: 1.15 !important;
	text-align: left;
	text-shadow: none !important;
}
/* bloco de texto (título + subtítulo empilhados). !important porque o tema tem
   uma regra ".main-header .navigation > li > a span" de especificidade alta. */
.rd-nav-txt {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}
/* ícone: escondido no desktop (menu é só texto); aparece na grade mobile */
.rd-nav-ico { display: none !important; }
.rd-nav-main {
	color: var(--rd-bege);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .2px;
	white-space: nowrap;
	transition: color .2s;
}
.rd-nav-sub {
	color: var(--rd-creme);
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 1px;
	line-height: 1.25;
	text-transform: uppercase;
	/* o subtexto PODE quebrar em 2 linhas (evita colar/sobrepor o item vizinho);
	   o item principal (.rd-nav-main) continua em 1 linha. */
	white-space: normal;
	max-width: 155px;
	opacity: .85;
}
.rd-mainmenu .navigation > li:hover > a .rd-nav-main,
.rd-mainmenu .navigation > li.current > a .rd-nav-main {
	color: #f0d9a9 !important;
}
.rd-mainmenu .navigation > li > a::before,
.rd-mainmenu .navigation > li > a::after { display: none !important; }

/* ---------------------------------------------------------------------
   FAIXA BEGE (sub-topo): utilitários à direita
   --------------------------------------------------------------------- */
.rd-subband {
	background: var(--rd-bege);
}
.rd-subband-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 38px;                 /* um pouco mais de espaço entre os itens */
	max-width: 1400px;
	margin: 0 auto;
	/* recuo direito menor que o do menu vinho: compensa o padding interno do
	   botão-pílula, alinhando o TEXTO "Agendar Consulta" com "Full Face UP®". */
	padding: 0 24px 0 45px;
	height: 54px;
}
/* Todos os itens compartilham EXATAMENTE o mesmo peso (600) e tamanho — se
   "Início/English" parecem mais bold que "Instagram/Agendar", é impressão
   (palavras mais curtas/ícones diferentes); a fonte é idêntica. */
.rd-subband a {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--rd-vinho);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .4px;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .2s;
}
.rd-subband a:hover { opacity: .6; }
.rd-subband a .fa { font-size: 18px; }

/* ---------------------------------------------------------------------
   DESTAQUES (método exclusivo — home, corporal, facial): a imagem vira um
   CARD arredondado e contido, como no layout de referência.
   --------------------------------------------------------------------- */
.story-block-two .inner-box .image-column .inner-column .image {
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}
.story-block-two .inner-box .image-column .inner-column .image img {
	border-radius: 22px;
	display: block;
	width: 100%;
}

/* Cards de tratamento: conteúdo centralizado verticalmente — evita a margem
   grande no topo e nenhuma embaixo em cards de conteúdo mais curto.
   Especificidade alta (.services-block-six .inner-box...) p/ vencer o tema, que
   zerava o padding e punha margin-top:50px no título. */
.services-block-six .inner-box.tp-trat-card {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	padding: 30px 32px !important;
}
.services-block-six .inner-box.tp-trat-card .tp-trat-title {
	margin-top: 0 !important;
}

/* "Agendar Consulta" ganha destaque: pílula bege com CONTORNO vinho (outline
   sofisticado, combina com a barra sem "clarear" demais). */
.rd-subband a.rd-cta {
	background: var(--rd-bege);
	color: var(--rd-vinho);
	border: 2px solid var(--rd-vinho);
	border-radius: 30px;
	padding: 10px 22px;
	font-weight: 700;
}
.rd-subband a.rd-cta:hover {
	background: var(--rd-vinho);
	color: var(--rd-bege);
	opacity: 1;
}
.rd-subband a.rd-cta .fa { font-size: 19px; }

/* ---------------------------------------------------------------------
   STICKY HEADER (aparece na rolagem) — vinho sólido
   --------------------------------------------------------------------- */
.rd-sticky {
	background: var(--rd-vinho) !important;
}
.rd-sticky .navigation > li > a { text-shadow: none !important; }
.rd-sticky .rd-nav-main { font-size: 16px; }
.rd-sticky .rd-nav-sub { display: none; }

/* ---------------------------------------------------------------------
   MENU MOBILE (hambúrguer) — fundo BRANCO: o dourado/creme do header não
   tem contraste aqui. Item em vinho (escuro) e subtexto em dourado escuro.
   --------------------------------------------------------------------- */
.mobile-menu .rd-nav-main { color: var(--rd-vinho) !important; }
.mobile-menu .rd-nav-sub {
	color: #a97b38 !important;
	max-width: none;
	opacity: 1;
}

/* ---------------------------------------------------------------------
   BANNER
   --------------------------------------------------------------------- */
/* A imagem escala para preencher a altura do banner (antes: tamanho natural,
   por isso "cortava" ao reduzir a altura). */
.page-title {
	background-size: cover !important;
}

/* Full: 460px, conteúdo ancorado embaixo-à-esquerda. Sem padding-top de
   "clearance" (o header não sobrepõe mais). */
.page-title:not(.page-title-tratamento) {
	height: 460px !important;
	padding-top: 0 !important;
}
.page-title:not(.page-title-tratamento) .auto-container {
	justify-content: flex-end;
	padding-bottom: 54px;
}
/* neutraliza os deslocamentos verticais da era "overlay" (custom.css) —
   agora o alinhamento embaixo vem do flex-end acima. */
.page-title:not(.page-title-tratamento) .index-content {
	padding-top: 0 !important;
}
.page-title:not(.page-title-tratamento) .content h1,
.page-title:not(.page-title-tratamento) .content h2,
.page-title:not(.page-title-tratamento) .content > .text {
	top: 0 !important;
}

/* Cores do título/subtítulo do banner. Subtítulo (ex.: "Harmonização Avançada")
   e o traço em #e6b76a (dourado um pouco mais quente que o menu). */
.page-title h1 { color: var(--rd-creme) !important; }
.page-title h2,
.page-title .content > .text,
.page-title-tratamento .rd-banner-title h2 { color: #e6b76a !important; }

/* espaçamento vertical enxuto entre título, subtítulo e traço */
.page-title h1,
.page-title-tratamento .rd-banner-title h1 { line-height: 1.05 !important; margin-bottom: 0 !important; }
.page-title h2,
.page-title .content > .text,
.page-title-tratamento .rd-banner-title h2 { line-height: 1.08 !important; margin-top: 3px !important; }

/* Fonte serifada elegante (Cormorant Garamond) nos títulos e subtítulos do
   banner — inclui home (.index-content), catálogos (.content .text) e compact. */
.page-title h1,
.page-title h2,
.page-title .content > .text,
.page-title-tratamento .rd-banner-title h1,
.page-title-tratamento .rd-banner-title h2 {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
	letter-spacing: .5px;
}
.page-title h1,
.page-title-tratamento .rd-banner-title h1 { font-weight: 600 !important; }
.page-title h2,
.page-title .content > .text,
.page-title-tratamento .rd-banner-title h2 { font-weight: 500 !important; }

/* Traço bege (#ddb97d) abaixo do subtítulo do banner. */
.page-title h2::after,
.page-title .content > .text::after,
.page-title-tratamento .rd-banner-title h2::after {
	content: '';
	display: block;
	width: 66px;
	height: 2px;
	background: #e6b76a;
	margin-top: 9px;
	box-shadow: none;
}

/* Compact (page-title-tratamento): agora TAMBÉM exibe título + subtítulo
   sobre a imagem (banner.php injeta .rd-banner-title). Altura menor. */
.page-title-tratamento {
	height: 400px !important;
	padding-top: 0 !important;
}
.page-title-tratamento .auto-container {
	justify-content: flex-end;
	padding-bottom: 16px; /* bloco baixo: breadcrumb perto da base do banner */
}
/* mantém título + breadcrumb no fluxo (não deixa o custom.css jogar o
   breadcrumb para position:absolute quando passam a existir 2 .content). */
.page-title-tratamento .content:nth-of-type(2) {
	position: static !important;
	bottom: auto !important;
	left: auto !important;
	padding: 0 !important;
}
.page-title-tratamento .rd-banner-title { padding: 0 0 46px !important; } /* gap grande: afasta o breadcrumb do título/subtítulo */
.page-title-tratamento .rd-banner-title h1 { color: var(--rd-creme) !important; }
.page-title-tratamento .rd-banner-title h2 { color: #e6b76a !important; }
/* breadcrumb alinhado à esquerda com o título (o tema aplica margin-left) */
.page-title-tratamento .page-breadcrumb { margin-left: 0 !important; padding-left: 0 !important; }
/* neutraliza o deslocamento top:60px da era "overlay" (custom.css .page-title
   .content h1/h2), que empurrava o título compacto sobre o breadcrumb. */
.page-title-tratamento .rd-banner-title h1,
.page-title-tratamento .rd-banner-title h2 {
	top: 0 !important;
	left: 0 !important;   /* remove o -20px da era "overlay" (senão o título fica à esquerda do breadcrumb) */
	margin: 0 !important;
}
/* sombra difusa no texto claro do compact (fica sobre a imagem, como no full) */
.page-title-tratamento .rd-banner-title h1,
.page-title-tratamento .rd-banner-title h2,
.page-title-tratamento .page-breadcrumb,
.page-title-tratamento .page-breadcrumb a {
	text-shadow: 0 0.04em 0.45em rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
	.rd-mainmenu .navigation { gap: 26px; }
	.rd-nav-main { font-size: 16px; }
	.rd-nav-sub { font-size: 10px; letter-spacing: .8px; }
	.rd-header .rd-logo .logo img { max-height: 78px; }
}

@media only screen and (max-width: 991px) {
	/* ================= HAMBÚRGUER REMOVIDO =================
	   No mobile o menu vira uma GRADE de cards visível (ícone + título +
	   subtítulo + seta), como no layout de referência. */
	.rd-header .mobile-nav-toggler { display: none !important; }
	.mobile-menu { display: none !important; }

	/* ordem no mobile: vinho (logo + matriz) primeiro, faixa bege ABAIXO */
	.rd-header { display: flex; flex-direction: column; }
	.rd-topband { order: 0; }
	.rd-subband { order: 1; }
	.sticky-header { order: 2; }

	/* faixa vinho: logo centralizada em cima, grade embaixo */
	.rd-topband { height: auto; }
	.rd-topband-inner {
		flex-direction: column;
		height: auto;
		padding: 0 !important;
	}
	.rd-header .rd-logo {
		justify-content: center;
		width: 100%;
		padding: 22px 0 26px !important;   /* +10px embaixo: afasta a matriz da logo */
	}
	/* centraliza de fato: o tema deixa .logo com float/margem que ignora o flex */
	.rd-header .rd-logo .logo {
		margin: 0 auto !important;
		float: none !important;
	}
	.rd-header .rd-logo .logo img { height: 60px; max-height: 60px; }
	.rd-header .nav-outer {
		flex-direction: column !important;
		flex-grow: 0 !important;
	}
	/* o tema esconde .main-menu no mobile com ".main-header .nav-outer .main-menu
	   {display:none!important}" (especificidade 0,3,0) — igualamos p/ vencer.
	   Também forçamos a cadeia toda em largura cheia (o tema deixava ~30px de
	   recuo lateral, que desperdiçava largura na grade 2×2). */
	.rd-header .nav-outer .rd-mainmenu { display: block !important; }
	.rd-header .nav-outer,
	.rd-header .nav-outer .rd-mainmenu,
	.rd-header .nav-outer .navbar-collapse,
	.rd-header .nav-outer .navigation {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}
	.rd-mainmenu .navbar-collapse {
		display: block !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	/* grade 2×2: fundo VINHO, linhas divisórias BEGE, células de mesma altura */
	.rd-mainmenu .navigation {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 1fr;              /* linhas de altura igual */
		align-items: stretch !important;  /* células preenchem a linha (senão o
		                                     desktop deixa align-items:flex-start
		                                     e a célula menor não estica) */
		gap: 0;
		background: var(--rd-vinho) !important;
		border-top: 1px solid var(--rd-bege) !important;
		border-left: 1px solid var(--rd-bege) !important;
		border-right: 0 !important;   /* o tema põe branco aqui em telas estreitas */
		border-bottom: 0 !important;  /* (a borda externa vem das células) */
	}
	/* especificidade alta (.rd-header .nav-outer ...) para vencer a regra do tema
	   ".main-menu .navbar-collapse>.navigation>li {border-top:1px #fff!important}"
	   (0,3,1), que pintava linhas brancas nas células em telas estreitas. */
	.rd-header .nav-outer .rd-mainmenu .navigation > li {
		width: auto !important;
		max-width: none !important;
		min-width: 0;
		margin: 0 !important;
		display: flex;                    /* deixa o <a> preencher a célula */
		background: transparent !important;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 1px solid var(--rd-bege) !important;
		border-bottom: 1px solid var(--rd-bege) !important;
	}
	.rd-mainmenu .navigation > li > a {
		flex: 1;                          /* ocupa toda a altura da célula */
		gap: 14px;
		min-height: 62px;                 /* todas as células com a mesma altura */
		padding: 12px 34px 12px 20px !important;
		position: relative;
		background: transparent !important;  /* remove o cinza #2c2c2c do tema; mostra o vinho */
	}
	.rd-nav-ico { display: block !important; flex: 0 0 auto; }
	.rd-nav-ico img { width: 44px; height: 44px; object-fit: contain; }
	.rd-nav-main { font-size: 17px; }
	.rd-nav-sub { max-width: none; font-size: 11px; letter-spacing: .8px; }
	/* seta ">" à direita de cada card */
	.rd-mainmenu .navigation > li > a::after {
		content: '\203A';
		position: absolute;
		right: 14px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--rd-bege);
		font-size: 26px;
		line-height: 1;
	}

	/* barra bege (agora no topo): itens distribuídos, com respiro. padding-top
	   maior (não margin) p/ não "colar no teto" nem colapsar após o load. */
	.rd-subband-inner {
		justify-content: space-around;
		flex-wrap: wrap;
		gap: 16px 16px;   /* mais respiro entre a linha dos ícones e o botão */
		padding: 18px 18px 14px;
		height: auto;
	}
	.rd-subband a { font-size: 12.5px; }
}

/* celular: mantém a matriz 2×2, encolhendo ícone/fontes/padding para caber */
@media only screen and (max-width: 575px) {
	.rd-mainmenu .navigation > li > a {
		gap: 9px;
		padding: 14px 20px 14px 11px !important;
	}
	.rd-nav-ico img { width: 33px; height: 33px; }
	.rd-nav-main { font-size: 13px !important; }
	.rd-nav-sub { font-size: 8.5px !important; letter-spacing: .2px; line-height: 1.15; }
	.rd-mainmenu .navigation > li > a::after { right: 7px; font-size: 19px; }
}
@media only screen and (max-width: 359px) {
	.rd-nav-main { font-size: 12px !important; }
	.rd-nav-ico img { width: 28px; height: 28px; }
	.rd-mainmenu .navigation > li > a { gap: 7px; padding-left: 9px !important; }
}

@media only screen and (max-width: 767px) {
	.page-title:not(.page-title-tratamento) { height: 380px !important; }
	/* sobe o título/subtítulo p/ não encavalar com o breadcrumb (que fica fixo
	   embaixo) quando o subtítulo quebra em 2+ linhas no mobile. */
	.page-title:not(.page-title-tratamento) .auto-container { padding-bottom: 58px; }
	/* breadcrumb mais para baixo (mais perto da base do banner) */
	.page-title:not(.page-title-tratamento) .content:nth-of-type(2) { bottom: 26px !important; }

	/* compact no mobile: mostra a IMAGEM (o tema suprimia). Um pouco mais alto,
	   imagem cobrindo e centralizada verticalmente. */
	section.page-title-tratamento {
		background-size: cover !important;
		background-position: center !important; /* b_pos_mobile sobrescreve se definido */
	}
	/* SEM gradiente/overlay forçado — a sobreposição escura só aparece quando o
	   banner tem opacidade configurada no admin (b_ov). A legibilidade base vem
	   do text-shadow. (Substitui a faixa cinza sólida do tema por transparente.) */
	section.page-title-tratamento::before {
		background: transparent !important;
	}
	.page-title-tratamento { height: 300px !important; }
	.page-title-tratamento .auto-container { padding-bottom: 12px; } /* breadcrumb mais para baixo */

	/* menos distância entre o banner e o início do conteúdo (o tema usa
	   padding-top de 120px+ na 1ª seção). Só afeta a seção logo após o banner. */
	.page-title + [class*="padding-top-1"] { padding-top: 48px !important; }
}

/* Utilitários dentro do menu mobile (hambúrguer) */
.rd-mobile-utils {
	list-style: none;
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255,255,255,.15);
}
.rd-mobile-utils li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	color: var(--rd-bege);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
}
.rd-mobile-utils li a .fa { width: 20px; text-align: center; }