:root {
  --ink: #17130e;
  --cream: #f5f0e8;
  --paper: #fbf8f2;
  --gold: #b8942a;
  --gold-light: #ddc270;
  --white: #fffdf8;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #c9b99f; font-family: var(--sans); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
}

.backdrop, .backdrop-slide, .backdrop-overlay { position: absolute; inset: 0; }
.backdrop { z-index: -2; background: #c9b99f; }
.backdrop-slide {
  opacity: 0; transform: scale(1.025); background-size: cover; background-position: center;
  transition: opacity 1.5s ease, transform 8s ease; will-change: opacity, transform;
}
.backdrop-slide.is-active { opacity: 1; transform: scale(1); }
.backdrop-masculino { background-image: url('../images/hero/hero-masculino.png'); }
.backdrop-feminino { background-image: url('../images/hero/hero-feminino.jpg'); }
.backdrop-overlay {
  background:
    linear-gradient(90deg, rgba(245,240,232,.98) 0%, rgba(245,240,232,.91) 42%, rgba(245,240,232,.4) 65%, rgba(20,15,10,.08) 100%),
    linear-gradient(180deg, rgba(16,12,8,.05), rgba(16,12,8,.19));
}

.header, .footer, .main { width: min(1320px, calc(100% - 80px)); margin-inline: auto; }
.header {
  display: flex; align-items: center; justify-content: space-between; min-height: 116px;
  border-bottom: 1px solid rgba(50,40,25,.17);
}
.brand img { display: block; width: 92px; height: 92px; object-fit: contain; }
.status {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid rgba(78,60,25,.22);
  border-radius: 999px; background: rgba(255,253,248,.46); color: #554a3b;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.status span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(184,148,42,.14); }

.main {
  display: grid; grid-template-columns: minmax(520px, 1.1fr) minmax(330px, .58fr);
  align-items: center; gap: clamp(60px, 9vw, 150px); padding: 72px 0;
}
.content { max-width: 720px; animation: reveal .9s .1s both; }
.eyebrow, .preview-kicker {
  display: flex; align-items: center; gap: 13px; margin: 0 0 25px; color: #795d1d;
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--gold); }
h1 {
  margin: 0; max-width: 730px; font: 600 clamp(58px, 5.3vw, 86px)/.91 var(--serif);
  letter-spacing: -.045em; text-wrap: balance;
}
h1 em { color: #8b691e; font-weight: 500; }
.intro { max-width: 610px; margin: 30px 0 0; color: #564e43; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.75; }
.facts { display: flex; gap: 0; margin-top: 34px; }
.fact { min-width: 140px; padding: 0 30px; border-left: 1px solid rgba(78,60,25,.2); }
.fact:first-child { padding-left: 0; border-left: 0; }
.fact strong { display: block; color: #7c5e19; font: 600 28px/1 var(--serif); }
.fact span { display: block; margin-top: 7px; color: #655c50; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.service-note { margin: 35px 0 16px; color: #655c50; font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: 999px; text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: #17130e; background: linear-gradient(135deg, #ddc270, #b8942a); box-shadow: 0 13px 32px rgba(103,76,20,.23); }
.button-primary:hover { box-shadow: 0 17px 38px rgba(103,76,20,.32); }
.button-secondary { color: #3c3429; border: 1px solid rgba(66,52,27,.25); background: rgba(255,253,248,.48); backdrop-filter: blur(12px); }

.preview-card {
  position: relative; max-width: 420px; padding: 42px 38px 34px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.58); border-radius: 28px;
  background: rgba(20,16,12,.77); color: var(--white); box-shadow: 0 30px 80px rgba(24,17,9,.27);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: reveal .9s .28s both;
}
.preview-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.preview-number { position: absolute; right: 20px; top: 0; color: rgba(255,255,255,.045); font: 600 150px/1 var(--serif); }
.preview-kicker { position: relative; margin-bottom: 26px; color: var(--gold-light); }
.preview-card h2 { position: relative; margin: 0; font: 500 35px/1.06 var(--serif); letter-spacing: -.02em; }
.preview-card ul { position: relative; display: grid; gap: 17px; margin: 30px 0 0; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); list-style: none; }
.preview-card li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.72); font-size: 13px; }
.preview-card li span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); }
.slide-indicator { display: flex; gap: 22px; margin-top: 26px; }
.indicator {
  position: relative; padding: 0 0 8px; border: 0; color: rgba(255,255,255,.42); background: none;
  font: 600 9px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.indicator::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.25); transform-origin: left; transition: transform .4s ease; }
.indicator.is-active { color: var(--gold-light); }
.indicator.is-active::after { transform: scaleX(1); }

.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding: 24px 0 30px;
  border-top: 1px solid rgba(50,40,25,.17); color: #5c5347; font-size: 10px; letter-spacing: .05em;
}
.footer p { margin: 0; }
.footer-ddm {
  flex-basis: 100%; padding-top: 18px; border-top: 1px solid rgba(50,40,25,.1);
  text-align: center;
}
.by-ddm { color: #806218; font-weight: 600; text-decoration: none; }
.by-ddm:hover { color: #5f4712; text-decoration: underline; text-underline-offset: 3px; }

@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 980px) {
  .backdrop-overlay { background: linear-gradient(90deg, rgba(245,240,232,.97), rgba(245,240,232,.83) 62%, rgba(245,240,232,.35)); }
  .main { grid-template-columns: 1fr; gap: 42px; padding: 58px 0; }
  .content { max-width: 760px; }
  .preview-card { max-width: 570px; }
}

@media (max-width: 680px) {
  .page-shell { min-height: 100svh; }
  .backdrop-slide { background-position: 73% center; }
  .backdrop-overlay { background: linear-gradient(180deg, rgba(18,14,10,.35), rgba(18,14,10,.75)); }
  .header, .footer, .main { width: calc(100% - 40px); }
  .header { min-height: 84px; border-color: rgba(255,255,255,.18); }
  .brand img { width: 64px; height: 64px; }
  .status { padding: 8px 11px; color: rgba(255,255,255,.78); border-color: rgba(255,255,255,.2); background: rgba(20,16,12,.34); font-size: 7.5px; letter-spacing: .1em; }
  .main { display: block; padding: 70px 0 34px; }
  .content { color: var(--white); }
  .eyebrow { margin-bottom: 20px; color: var(--gold-light); font-size: 8px; }
  h1 { max-width: 500px; font-size: clamp(45px, 13.2vw, 62px); line-height: .93; }
  h1 em { color: var(--gold-light); }
  .intro { margin-top: 24px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; }
  .facts { margin-top: 28px; }
  .fact { flex: 1; min-width: 0; padding: 0 12px; border-color: rgba(255,255,255,.2); }
  .fact strong { color: var(--gold-light); font-size: 23px; }
  .fact span { color: rgba(255,255,255,.65); font-size: 7.5px; line-height: 1.35; }
  .service-note { color: rgba(255,255,255,.68); line-height: 1.5; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .button-secondary { color: var(--white); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
  .preview-card { margin-top: 28px; padding: 32px 24px 27px; border-radius: 22px; }
  .preview-card h2 { font-size: 29px; }
  .footer { flex-direction: column; align-items: flex-start; color: rgba(255,255,255,.58); border-color: rgba(255,255,255,.16); line-height: 1.5; }
  .footer-ddm { width: 100%; border-color: rgba(255,255,255,.1); }
  .by-ddm { color: var(--gold-light); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}