/* =====================================================================
   HOME 2026-07 — redesign "magazine" da página inicial (somente home PT).
   Carregado via $extraHead (head.php) apenas pela view home_redesign.php.
   Paleta do modelo: fundo #FDFCFA | tinta #3D332B | dourado #D9A441
   dourado-escuro #B8862F / #8A6420 | dark #2B211B / #241C16 / #1C1610
   Tipografia: Cormorant Garamond (títulos, já carregada) + Jost (corpo).
   Prefixo hm2- para não colidir com o tema legado.
   ===================================================================== */

.hm2 { font-family: 'Jost', 'Open Sans', sans-serif; color: #3D332B; background: #FDFCFA; -webkit-font-smoothing: antialiased; }
.hm2 a { text-decoration: none; }
/* visibilidade por dispositivo: .hm2-mb só no mobile (≤767px); .hm2-dk só acima */
.hm2-mb { display: none !important; }

/* ---------- blocos comuns ---------- */
.hm2-wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: clamp(48px, 7vw, 100px) clamp(20px, 5vw, 56px); position: relative; z-index: 2; }
.hm2-badge { margin: 0 0 14px; color: #B8862F; font-size: 12px; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 600; }
/* tetos calibrados p/ os títulos mais longos caberem em 1 linha nas colunas:
   "Full Face UP® Men" = 526px@68 (col 560) | "Rejuvenescimento Facial" = 501px@52 (col 520) */
.hm2-h2 { margin: 0 0 22px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(44px, 5.6vw, 68px); line-height: 1.02; color: #2B211B; }
.hm2-h2-sm { font-size: clamp(36px, 4.4vw, 52px); line-height: 1.05; margin-bottom: 18px; }
.hm2-desc { margin: 0 0 28px; font-size: 18px; line-height: 1.7; font-weight: 300; color: #4A3F35; max-width: 52ch; }
.hm2-list { display: flex; flex-direction: column; margin: 0 0 36px; max-width: 520px; }
.hm2-list p { margin: 0; padding: 14px 0; border-top: 1px solid rgba(184, 134, 47, .35); font-size: 15px; letter-spacing: .5px; color: #4A3F35; line-height: 1.5; }
.hm2-list p:last-child { border-bottom: 1px solid rgba(184, 134, 47, .35); }
.hm2-list p span { color: #B8862F; font-weight: 600; margin-right: 12px; }

.hm2-cta { display: inline-block; background: #D9A441; color: #2B211B; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; padding: 18px 38px; transition: background .25s, color .25s; }
.hm2-cta:hover { background: #2B211B; color: #F7F2EA; }
.hm2-cta-outline { display: inline-block; border: 1px solid #B8862F; background: transparent; color: #8A6420; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; padding: 15px 32px; transition: background .25s, color .25s, border-color .25s; }
.hm2-cta-outline:hover { background: #D9A441; color: #2B211B; border-color: #D9A441; }
.hm2-know { display: block; width: fit-content; margin: 20px 0 0; color: #8A6420; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; border-bottom: 1px solid rgba(184, 134, 47, .5); padding-bottom: 3px; transition: color .2s, border-color .2s; }
.hm2-know:hover { color: #2B211B; border-color: #2B211B; }

/* ---------- seções full-bleed (hero + 01..05) ---------- */
.hm2-sec { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(600px, 92vh, 900px); }
.hm2-sec-sm { min-height: clamp(480px, 72vh, 700px); }
.hm2-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hm2-veil { position: absolute; inset: 0; pointer-events: none; }
.hm2-num { position: absolute; top: clamp(20px, 4vw, 56px); margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(110px, 15vw, 210px); line-height: 1; color: rgba(217, 164, 65, .35); pointer-events: none; z-index: 1; }
.hm2-num-sm { font-size: clamp(96px, 12vw, 170px); }
.hm2-num-r { right: clamp(16px, 3vw, 48px); }
.hm2-num-l { left: clamp(16px, 3vw, 48px); }
.hm2-col { max-width: 560px; }
.hm2-col-sm { max-width: 520px; }
.hm2-col-r { margin-left: auto; }

/* véus por direção (texto à esquerda = gradiente 90deg; à direita = 270deg) */
.hm2-veil-l { background: linear-gradient(90deg, rgba(247, 242, 234, .95) 0%, rgba(247, 242, 234, .55) 48%, rgba(247, 242, 234, 0) 72%); }
/* seção 01 (Single Lifting): sem gradiente só em telas largas (≥900px) — abaixo
   disso o texto avança sobre a foto e precisa do véu (gradiente/uniforme). */
@media (min-width: 900px) {
	#single-lifting .hm2-veil { background: none; }
}
/* concentrado atrás do texto (queda rápida) para não ofuscar a foto à esquerda */
.hm2-veil-r { background: linear-gradient(270deg, rgba(243, 236, 226, .96) 0%, rgba(243, 236, 226, .9) 30%, rgba(243, 236, 226, .45) 48%, rgba(243, 236, 226, 0) 64%); }

/* ---------- hero (sobre) ---------- */
.hm2-hero { background: #EFE7DA; min-height: clamp(560px, 88vh, 860px); }
/* posição horizontal da foto da dra no quadro (30% = mais à direita; 50% = original) */
.hm2-hero .hm2-bg { object-position: 42% top; }
/* coluna mais larga p/ a frase quebrar após "Single Lifting®" (o <br> controla) */
.hm2-hero-col { max-width: 680px; }
.hm2-hero-logo { width: min(300px, 62vw); height: auto; display: block; margin: 0 0 clamp(40px, 8vh, 110px); }
.hm2-hero-phrase { margin: 0 0 22px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.42; color: #8A6420; }
/* destaque sutil dos métodos: um tom mais escuro que o dourado da frase */
.hm2-metodo { color: #6B4E14; font-weight: 600; white-space: nowrap; }
.hm2-hero-p { margin: 0 0 16px; font-size: 17px; line-height: 1.75; font-weight: 300; color: #4A3F35; max-width: 56ch; }
.hm2-hero-sign { margin-top: 32px; width: 180px; height: auto; display: block; }

/* ---------- catálogo (E ainda, no consultório) ---------- */
.hm2-cat { background: #F7F2EA; padding: clamp(56px, 8vw, 110px) 0; }
.hm2-cat-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.hm2-cat .hm2-badge, .hm2-cat-title { text-align: center; }
.hm2-cat-title { margin: 0 0 48px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; color: #2B211B; }
.hm2-row { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 32px); padding: 22px 8px; border-top: 1px solid rgba(184, 134, 47, .3); color: inherit; transition: background .2s; }
.hm2-row:hover { background: rgba(217, 164, 65, .08); color: inherit; }
.hm2-row-num { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; color: #B8862F; min-width: 36px; flex: 0 0 auto; }
.hm2-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px 32px; }
.hm2-row-nome { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(24px, 3vw, 32px); font-weight: 500; color: #2B211B; flex: 0 0 auto; line-height: 1.15; }
.hm2-row-desc { font-size: 14px; font-weight: 300; color: #6B5D4F; flex: 1 1 auto; min-width: 0; text-align: right; }
.hm2-row-arrow { color: #B8862F; font-size: 18px; flex: 0 0 auto; }
.hm2-cat-end { border-top: 1px solid rgba(184, 134, 47, .3); }
.hm2-cat-actions { text-align: center; margin-top: 44px; }
.hm2-cat-all { display: block; margin-top: 20px; color: #8A6420; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; }
.hm2-cat-all:hover { color: #2B211B; }

/* ---------- depoimentos ---------- */
.hm2-dep { background: #241C16; padding: clamp(64px, 9vw, 130px) 0; }
.hm2-dep-wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.hm2-dep .hm2-badge { color: #D9A441; text-align: center; }
.hm2-dep-title { margin: 0 0 20px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(32px, 4vw, 48px); color: #FDFCFA; text-align: center; }
.hm2-dep-sub { margin: 0 auto 56px; max-width: 60ch; text-align: center; font-size: 16px; font-weight: 300; line-height: 1.7; color: #CBBFB2; }
.hm2-dep-hero { text-align: center; max-width: 820px; margin: 0 auto 64px; }
.hm2-dep-mark { margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 80px; line-height: .5; color: #D9A441; }
.hm2-dep-hero-quote { margin: 0 0 28px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(22px, 3vw, 30px); line-height: 1.45; color: #F1E9DE; }
.hm2-dep-who { display: flex; align-items: center; justify-content: center; gap: 16px; }
.hm2-ava { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; background: rgba(217, 164, 65, .16); border: 1px solid rgba(217, 164, 65, .5); color: #D9A441; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; }
.hm2-ava-sm { width: 44px; height: 44px; font-size: 20px; }
.hm2-dep-name { margin: 0; color: #FDFCFA; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; text-align: left; }
.hm2-dep-proc { margin: 2px 0 0; color: #D9A441; font-size: 13px; font-weight: 300; text-align: left; }
.hm2-dep-cards { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 36px); justify-content: center; }
.hm2-dep-card { flex: 1 1 340px; max-width: 480px; border: 1px solid rgba(217, 164, 65, .25); padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.hm2-dep-card-quote { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.55; color: #E5DACC; }
.hm2-dep-card-who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.hm2-dep-actions { text-align: center; margin-top: 56px; }
.hm2-dep .hm2-cta:hover { background: #FDFCFA; color: #2B211B; }

/* ---------- rodapé ---------- */
/* padding-bottom largo: respiro para o widget flutuante de WhatsApp não cobrir
   a linha de copyright quando a rolagem chega ao fim. */
.hm2-foot { background: #1C1610; padding: clamp(48px, 7vw, 80px) clamp(20px, 5vw, 56px) 90px; }
.hm2-foot-grid { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(36px, 6vw, 80px); align-items: flex-start; }
.hm2-foot-logo { width: 160px; height: auto; display: block; }
.hm2-foot h4 { margin: 0 0 18px; color: #D9A441; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; font-family: 'Jost', sans-serif; }
.hm2-foot-links { display: flex; flex-direction: column; gap: 10px; }
.hm2-foot-links a { color: #B9AA9A; font-size: 14px; font-weight: 300; transition: color .2s; }
.hm2-foot-links a:hover { color: #D9A441; }
.hm2-foot p { margin: 0 0 6px; color: #B9AA9A; font-size: 14px; font-weight: 300; line-height: 1.7; }
.hm2-foot p a { color: #E5DACC; }
.hm2-foot-map { width: 100%; height: 200px; border: 0; border-radius: 4px; display: block; filter: grayscale(25%) sepia(8%); }
/* seletor com "p" para vencer .hm2-foot p (que zerava esta margem) */
.hm2-foot p.hm2-foot-copy { max-width: 1240px; margin: 30px auto 0; padding-top: 20px; border-top: 1px solid rgba(217, 164, 65, .18); color: #7A6C5D; font-size: 12px; font-weight: 300; letter-spacing: 1px; }

/* ---------- responsivo ---------- */
@media (max-width: 991px) {
	.hm2-veil-l { background: linear-gradient(90deg, rgba(247, 242, 234, .96) 0%, rgba(247, 242, 234, .82) 60%, rgba(247, 242, 234, .35) 100%); }
	.hm2-veil-r { background: linear-gradient(270deg, rgba(243, 236, 226, .96) 0%, rgba(243, 236, 226, .82) 60%, rgba(243, 236, 226, .35) 100%); }
}
/* ===================== MOBILE (≤767px) =====================
   Layout aprovado no modelo v3 do designer: hero em coluna centrada (logo →
   foto da dra → frase → assinatura → CTAs), véus uniformes leves no lugar dos
   gradientes, imagens reposicionadas por seção e catálogo com descrição em
   linha própria alinhada ao título. */
@media (max-width: 767px) {
	.hm2-mb { display: block !important; }
	.hm2-dk { display: none !important; }
	.hm2-sec, .hm2-sec-sm, .hm2-hero { min-height: 0; }
	/* h2 menor p/ "Full Face UP® Men" caber em 1 linha (padronizado nas seções 01-03) */
	.hm2-h2 { font-size: 37px; }
	.hm2-h2-sm { font-size: 33px; }
	.hm2-desc { font-size: 16.5px; }
	.hm2-cta, .hm2-cta-outline { display: block; text-align: center; }

	/* --- hero: coluna centrada, sem foto de fundo --- */
	.hm2-hero { background: #F2ECE2; }
	.hm2-hero .hm2-wrap { padding: 36px 24px 48px; }
	.hm2-hero-col { max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
	/* sem a logo vertical no mobile (redundante com a do header): a foto da dra abre o hero.
	   margin-top negativa compensa a faixa TRANSPARENTE embutida no topo do arquivo
	   da foto (~58px renderizados) — aproxima a foto do menu sem cortar a imagem. */
	.hm2-hero-logo { display: none; }
	.hm2-hero-foto { width: min(70vw, 320px); height: auto; display: block; margin: -50px 0 22px; }
	.hm2-hero-phrase { font-size: 19px; line-height: 1.45; max-width: 32ch; margin: 0 0 18px; }
	.hm2-hero-phrase br { display: none; } /* quebra natural no mobile (o <br> é do desktop) */
	.hm2-hero-sign { width: 130px; margin: 0 0 28px; }
	.hm2-hero-ctas { display: flex !important; flex-direction: column; align-items: center; gap: 16px; }
	.hm2-hero-ctas .hm2-cta { display: inline-block; padding: 16px 32px; }
	.hm2-hero-ctas .hm2-know { margin: 0; }

	/* --- seções 01-05: véu uniforme leve + reposicionamento das fotos --- */
	#single-lifting .hm2-veil,
	#full-face-up .hm2-veil,
	#full-face-up-men .hm2-veil,
	#rejuvenescimento .hm2-veil,
	#harmonizacao-glutea .hm2-veil { background-image: none; }
	#single-lifting .hm2-veil { background-color: rgba(247, 242, 234, .55); }
	#full-face-up .hm2-veil { background-color: rgba(243, 236, 226, .38); }
	#full-face-up-men .hm2-veil { background-color: rgba(238, 232, 223, .55); }
	#rejuvenescimento .hm2-veil { background-color: rgba(241, 233, 220, .55); }
	#harmonizacao-glutea .hm2-veil { background-color: rgba(251, 248, 242, .38); }
	#single-lifting .hm2-bg { object-position: 61% top; }
	#full-face-up .hm2-bg { object-position: 55% top; }
	#full-face-up-men .hm2-bg { object-position: 65% top; }
	#rejuvenescimento .hm2-bg { object-position: 22% top; }
	#harmonizacao-glutea .hm2-bg { object-position: 50% top; }

	/* --- catálogo: descrição em linha própria, alinhada ao título --- */
	.hm2-row-main { flex-direction: column; align-items: flex-start; gap: 4px; }
	.hm2-row-desc { text-align: left; }
}