/* ==========================================================================
   Harmê — camada de marca sobre o design system re-tematizado (harme-base.css)
   Só entra aqui o que é da Harmê: textura, profundidade, marca e movimento.
   ========================================================================== */

/* --- textura: grão de filme fixo sobre a página inteira ------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* --- profundidade: sombra em cascata (6 camadas) -------------------------- */
.h-lift {
  box-shadow:
    0 1px 2px rgba(53, 32, 15, .03),
    0 3px 6px rgba(53, 32, 15, .028),
    0 7px 14px rgba(53, 32, 15, .026),
    0 14px 28px rgba(53, 32, 15, .024),
    0 26px 52px rgba(53, 32, 15, .022),
    0 48px 96px rgba(53, 32, 15, .06);
}
.h-lift-dark {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .16),
    0 6px 12px rgba(0, 0, 0, .14),
    0 14px 28px rgba(0, 0, 0, .13),
    0 28px 56px rgba(0, 0, 0, .12),
    0 52px 104px rgba(0, 0, 0, .22);
}

/* --- degradês da marca (substituem a luz difusa da v1) -------------------- */
/* hero: chocolate que "some" dentro do retrato da Dra. Flávia (máscara na foto,
   não véu por cima). Desktop usa a foto com o fundo cinza estendido à esquerda
   (dados/hero-estender.py), para o degradê desmanchar o fundo e não o rosto. */
.h-hero {
  background: linear-gradient(100deg, #5b3417 0%, #46270f 45%, #2e1708 100%);
  isolation: isolate;
}
.h-hero-foto picture { display: block; height: 100%; }
.h-hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* iOS/Safari: elemento com máscara vira camada de GPU e pode ser desenhado POR CIMA
   do texto que vem depois quando nada declara a ordem. Por isso: z-index explícito,
   texto em camada própria e a máscara na <img>, não no contêiner. */
.h-hero-foto { z-index: 0; }
.h-hero-texto { z-index: 1; -webkit-transform: translateZ(0); transform: translateZ(0); }

/* celular/tablet: foto em cima, desmanchando para baixo; o texto entra na fumaça */
.h-hero-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 36rem;
}
.h-hero-foto img {
  object-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 38%, transparent 90%);
}
.h-hero-texto { margin-top: -3rem; padding-bottom: 3.5rem; }

/* desktop: foto ancorada à direita do conteúdo, sangrando até a borda; desmancha
   para a esquerda (encontro com o texto) e, em tela larga, também para a direita */
@media (min-width: 1024px) {
  .h-hero {
    display: flex;
    align-items: center;
    min-height: max(40rem, min(calc(100svh - 5rem), 52rem));
  }
  .h-hero-foto {
    position: absolute;
    top: 0;
    bottom: 0;
    right: max(0px, calc((100% - 1280px) / 2 - 10rem));
    width: auto;
    aspect-ratio: 1460 / 1250;
    max-width: 62%;
    max-height: none;
  }
  /* quando o máximo de 62% aperta (1024–1279), corta igual dos dois lados */
  .h-hero-foto img {
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 86%, transparent 100%);
  }
  .h-hero-texto { margin-top: 0; padding-top: 4rem; padding-bottom: 4rem; }
  .h-hero-col { max-width: 26rem; }
}
@media (min-width: 1280px) { .h-hero-col { max-width: 32rem; } }
@media (min-width: 1536px) { .h-hero-col { max-width: 34rem; } }

/* botão principal sobre o chocolate: caramelo das artes */
.h-btn-caramelo { background-color: #d49567; border-color: #d49567; color: #25160c; box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.h-btn-caramelo:hover { background-color: #dbb38f; border-color: #dbb38f; }
/* faixas escuras: o chocolate do fundo do post "Reflexo" */
.h-choco {
  background: linear-gradient(112deg, #603914 0%, #4a2a12 42%, #2a1207 100%);
}
.h-choco-deep {
  background: linear-gradient(112deg, #4a2a12 0%, #2d1609 55%, #1b0a03 100%);
}

/* --- malha discreta com máscara elíptica (fundo das faixas escuras) ------- */
.h-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(212, 149, 103, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 149, 103, .05) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 30%, #000 20%, transparent 78%);
}

/* --- faixa de credenciais: filete dourado entre os itens ------------------ */
.h-cred > li + li::before {
  content: "";
  display: block;
  width: 1px;
  height: 1.15rem;
  background: rgba(212, 149, 103, .55);
}

/* --- tipografia: a dupla das legendas dos Reels --------------------------- */
/* "me casar em" (sans, pequena) em cima de "alguns meses," (itálica pesada) */
.font-display { letter-spacing: -.012em; font-variant-numeric: lining-nums; }
.h-lead {
  display: block;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-weight: 500;
  font-size: max(1.05rem, .44em);
  letter-spacing: -.012em;
  line-height: 1.2;
  margin-bottom: .14em;
}
.h-script {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: .98;
  text-wrap: balance;
}
.h-quote { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
.h-h1 { font-size: clamp(2.7rem, 12vw, 4.6rem); }
@media (min-width: 640px) { .h-h1 { font-size: clamp(3.2rem, 5.4vw, 4.6rem); } }
.h-h1 .h-lead { font-size: max(1.15rem, .42em); }

/* --- movimento sóbrio, à prova de falha ---------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
              transform .75s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.rv.rv-in { opacity: 1; transform: none; }
.rv-2 { transition-delay: .09s; }
.rv-3 { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-2, .rv-3 { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

/* âncoras não ficam escondidas atrás do cabeçalho fixo */
[id] { scroll-margin-top: 6rem; }

/* imagem preenchendo o quadro (mesma técnica do design system de origem) */
.h-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* WhatsApp: cor de affordance própria, mesmo com a marca sendo dourada */
.h-wa { background-color: #1f8f4d; }
.h-wa:hover { background-color: #17703c; }

/* botão flutuante: compacto no celular para não cobrir o conteúdo */
.h-fab-curto { display: inline; }
.h-fab-longo { display: none; }
@media (min-width: 640px) {
  .h-fab-curto { display: none; }
  .h-fab-longo { display: inline; }
}
@media (max-width: 639px) {
  .h-fab { padding: .7rem 1rem; font-size: .92rem; bottom: 1rem; right: 1rem; }
}