.hero {
  position: relative; min-height: var(--vh-full);
  display: flex; align-items: center;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  /* O piso do padding-top é a altura real do header fixo (topbar + nav), que
     sobrepõe o hero sem ocupar espaço no fluxo. Assim o texto nunca fica
     debaixo do header, mas o padding também não infla a seção sem motivo. */
  padding-block: clamp(calc(var(--header-h) + 1.5rem), 15vh, 12rem) clamp(4.5rem, 9vh, 7rem);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 1672x941 (16:9) na mesma proporção da viewport: o cover praticamente não
     recorta. Escala inicial baixa para preservar a composição da referência
     (placa central e painel vertical da direita visíveis); o parallax do
     hero.js continua partindo daqui até scale 1.16. */
  object-fit: cover; object-position: 50% 50%;
  transform: scale(1.04); transform-origin: 60% 50%;
  will-change: transform;
}
.hero__overlay {
  position: absolute; inset: 0;
  /* Véu bege LOCALIZADO atrás da coluna textual, em vez da antiga película
     vinho de 94% sobre a foto inteira. À direita dos ~72% a fotografia fica
     totalmente sem tingimento, com suas cores naturais. */
  background:
    /* Curva calibrada: forte onde a coluna de texto realmente está (o container
       de 1200px centralizado põe a copy entre ~19% e ~52% da viewport em 1920)
       e dissolvida antes da placa da clínica. Foi medida, não estimada. */
    linear-gradient(96deg,
      rgba(240, 225, 211, .95) 0%,
      rgba(240, 225, 211, .92) 16%,
      rgba(240, 225, 211, .85) 28%,
      rgba(240, 225, 211, .68) 38%,
      rgba(240, 225, 211, .42) 47%,
      rgba(240, 225, 211, .16) 55%,
      rgba(240, 225, 211, 0) 62%),
    /* clareada discreta no rodapé, para os badges e o "role para descobrir" */
    linear-gradient(0deg, rgba(240, 225, 211, .26) 0%, rgba(240, 225, 211, 0) 16%);
}
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 54% at 10% 38%, rgba(248, 240, 232, .16), transparent 66%);
}
.hero .grain { opacity: .12; }
.hero__content { position: relative; z-index: 2; width: 100%; }
.hero__copy { max-width: 40rem; }
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.25rem, 5.6vw, 4.9rem); line-height: 1; letter-spacing: -0.028em;
  color: var(--bordo); margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__accent { display: block; font-style: italic; font-weight: 500; color: var(--marrom); margin-top: .3rem; }
.hero__sub { max-width: 33rem; font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--ink); margin-bottom: 1.5rem; line-height: 1.6; }
.hero__sub strong { color: var(--bordo); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .7rem; font-family: var(--font); font-weight: 500; font-size: .86rem; color: var(--bordo); }
.hero__chips li {
  letter-spacing: .01em;
  padding: .5rem 1rem; border-radius: 999px;
  background: rgba(248, 240, 232, .72);
  border: 1px solid rgba(90, 18, 36, .26);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero .eyebrow { color: var(--bordo); }
.hero .eyebrow__dot { background: var(--bordo); box-shadow: 0 0 0 4px rgba(90,18,36,.16); }
.hero .btn--soft {
  background: rgba(248, 240, 232, .42); color: var(--bordo);
  border: 1.5px solid rgba(90, 18, 36, .55);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.hero .btn--soft:hover { background: rgba(248, 240, 232, .9); border-color: var(--bordo); color: var(--bordo); }
.hero__badges {
  position: absolute; z-index: 2; pointer-events: none;
  right: clamp(1.75rem, 5vw, 4.5rem); bottom: clamp(4.5rem, 12vh, 8rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: 1rem;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(248, 240, 232, .86);
  border: 1px solid rgba(90, 18, 36, .18);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  color: var(--bordo); padding: .75rem 1.15rem; border-radius: 16px;
  box-shadow: 0 24px 48px -22px rgba(58,12,26,.28), inset 0 1px 0 rgba(255,255,255,.5);
  font-family: var(--font); font-weight: 500; font-size: .9rem; white-space: nowrap;
  will-change: transform;
}
.hero__badge--2 { margin-right: 2.4rem; }
.hero__badge strong { color: var(--wine); font-size: 1.15em; margin-right: .1em; }
.hero__badge small { color: var(--marrom); font-weight: 500; }
.hero__badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #1f9d57; box-shadow: 0 0 0 4px rgba(31,157,87,.20); }
.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-family: var(--font); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bordo);
}
.hero__scroll-line { width: 1.5px; height: 42px; background: linear-gradient(rgba(90,18,36,.65), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--bordo); animation: scrolldot 1.8s infinite; }
@keyframes scrolldot { 0% { top: -50%; } 100% { top: 110%; } }
.hero__price {
  max-width: 34rem;
  margin: -.35rem 0 .6rem;
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  color: var(--ink);
}
.hero__price strong { color: var(--ink); font-weight: 500; }
.hero__price strong:first-of-type { color: var(--bordo); }

/* Linha do crediário Bemol: texto + logo na mesma base no desktop; no mobile o
   flex-wrap deixa a logo cair para a linha seguinte, sem overflow. */
.hero__bemol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  margin: 0 0 1.9rem;
  max-width: 34rem;
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  color: var(--ink);
}
.hero__bemol-logo { height: 1.75rem; width: auto; flex: none; }
@media (max-width: 1024px) {
  .hero { padding-block: clamp(calc(var(--header-h) + 1.25rem), 14vh, 10rem) clamp(4rem, 8vh, 5.5rem); }
  .hero__copy { max-width: 100%; }
}
@media (max-width: 860px) {
  .hero__badges { display: none; }
  .hero__photo { object-position: 64% center; }
  .hero__overlay { background: linear-gradient(180deg, rgba(240,225,211,.94) 0%, rgba(240,225,211,.88) 46%, rgba(240,225,211,.92) 100%); }
}
@media (max-width: 560px) {
  .hero { padding-bottom: clamp(3rem, 7vh, 4.5rem); }
  .hero__title { font-size: clamp(2.05rem, 8.8vw, 3rem); }
  .hero__chips { gap: .5rem .6rem; }
  .hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll-line::after { animation: none; } }