/* Hipótese D · O monograma — Ana Lobbo Estética */
:root {
  --d-noite: #0b1d19;
  --d-garrafa-0: #0f2a24;
  --d-garrafa-1: #1a352e;
  --d-garrafa-2: #29443d;
  --d-oliva: #414220;
  --d-creme: #efe6d8;
  --d-creme-2: #e6d6c1;
  --d-caramelo: #b0957a;
  --d-ouro: #d6a441;
  --d-ouro-2: #b8893a;
  --d-ouro-claro: #f0d38c;
  --d-vermelho: #7d0d10;
  --d-whats: #1f6b4f;

  --d-serifa: "Bona Nova SC", "Bona Nova", Georgia, serif;
  --d-sans: "Raleway", "Helvetica Neue", Arial, sans-serif;

  --d-margem: clamp(1.25rem, 5.4vw, 5.5rem);
  --d-topo: 5.25rem;
  --d-raio: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--d-noite);
  color: var(--d-creme);
  font-family: var(--d-sans);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- topo ---------- */
.dtopo {
  position: absolute; z-index: 10; inset: 0 0 auto 0;
  height: var(--d-topo);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--d-margem);
}
.dtopo__marca {
  display: inline-flex; align-items: center; gap: .8rem;
  text-decoration: none;
  font-family: var(--d-serifa); font-size: 1.05rem; letter-spacing: .14em;
}
.dtopo__marca img { width: 46px; height: 46px; }
.dtopo__marca em { font-style: normal; font-family: var(--d-sans); font-weight: 500; font-size: .72rem; letter-spacing: .32em; color: var(--d-ouro); margin-left: .35em; }
.dtopo__nav { display: flex; gap: 1.6rem; align-items: center; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.dtopo__nav a { text-decoration: none; opacity: .86; }
.dtopo__nav a:hover { opacity: 1; }
.dtopo__whats {
  border: 1px solid rgb(214 164 65 / .6); border-radius: var(--d-raio);
  padding: .55rem 1.15rem; color: var(--d-ouro-claro);
}

/* ---------- hero ---------- */
.dhero {
  position: relative;
  min-height: max(100svh, 700px);
  overflow: clip;
  overflow-x: clip;
  isolation: isolate;
  background: var(--d-garrafa-0);
}

/* malha verde-garrafa com halos mornos (spots lavando a parede) */
.dhero__malha,
.dhero__malha::before,
.dhero__malha::after { position: absolute; inset: 0; pointer-events: none; }
.dhero__malha {
  z-index: 0;
  background:
    radial-gradient(in oklab circle at 50% -10%, rgb(41 68 61 / .95), rgb(41 68 61 / 0) 55%),
    radial-gradient(in oklab ellipse 60% 70% at 4% 100%, rgb(11 29 25 / 1), rgb(11 29 25 / 0) 70%),
    radial-gradient(in oklab ellipse 55% 60% at 100% 100%, rgb(11 29 25 / .9), rgb(11 29 25 / 0) 70%),
    linear-gradient(in oklab 180deg, #1a352e 0%, #0f2a24 55%, #0b1d19 100%);
}
.dhero__malha::before {
  content: "";
  background:
    radial-gradient(in oklab closest-side circle at 50% 50%, rgb(176 149 122 / .26), rgb(176 149 122 / 0));
  width: 70vmax; height: 70vmax; inset: auto;
  left: 52%; top: -18vmax;
  animation: d-respira-a 34s ease-in-out infinite alternate;
}
.dhero__malha::after {
  content: "";
  background:
    radial-gradient(in oklab closest-side circle at 50% 50%, rgb(214 164 65 / .16), rgb(214 164 65 / 0));
  width: 56vmax; height: 56vmax; inset: auto;
  left: 8%; top: 18%;
  animation: d-respira-b 27s ease-in-out infinite alternate;
}
@keyframes d-respira-a { from { transform: translate(-6%, 0) scale(1); } to { transform: translate(4%, 6%) scale(1.12); } }
@keyframes d-respira-b { from { transform: translate(0, 0) scale(1.05); opacity: .8; } to { transform: translate(10%, -6%) scale(.95); opacity: 1; } }

.dhero__grao {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ---------- o selo ---------- */
.dselo {
  position: absolute; z-index: 1;
  aspect-ratio: 1;
  width: min(98svh, 54vw);
  right: -11vw;
  top: 50%;
  translate: 0 -48%;
}
.dselo::before { /* luz morna atrás das letras */
  content: ""; position: absolute; inset: 18%;
  background: radial-gradient(in oklab closest-side circle, rgb(214 164 65 / .18), rgb(214 164 65 / 0));
  border-radius: 50%;
}
.dselo__svg, .dselo__metal { position: absolute; inset: 0; width: 100%; height: 100%; }
.dselo__metal { opacity: 0; transition: opacity 1.8s ease; }
.dselo.is-metal .dselo__metal { opacity: 1; }
.dselo.is-metal .dselo__ouro { opacity: 0; transition: opacity 1.8s ease; }
.dselo__letreiro text { fill: var(--d-creme-2); opacity: .5; }
.dselo__nome { font-family: var(--d-serifa); font-size: 104px; letter-spacing: 6px; }
.dselo__estetica { font-family: var(--d-sans); font-weight: 600; font-size: 74px; letter-spacing: 46px; }

/* ---------- figura ---------- */
.dfig {
  position: absolute; z-index: 2; margin: 0;
  bottom: 0;
  left: 33.5vw;
  height: min(86svh, 50vw);
  aspect-ratio: 803 / 954;
}
.dfig img {
  width: 100%; height: 100%; object-fit: contain;
  /* dissolve as laterais dos cotovelos (sobras da mesa) e a base no verde */
  --d-m-base: linear-gradient(180deg, #000 0 62%, rgb(0 0 0 / .5) 82%, rgb(0 0 0 / 0) 98%);
  --d-m-lado: linear-gradient(90deg, rgb(0 0 0 / 0) 0 5%, #000 13%, #000 87%, rgb(0 0 0 / 0) 95% 100%);
  -webkit-mask-image: var(--d-m-base), var(--d-m-lado);
  -webkit-mask-composite: source-in;
  mask-image: var(--d-m-base), var(--d-m-lado);
  mask-composite: intersect;
}
.dfig figcaption {
  position: absolute; right: 10%; bottom: 1.6rem;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
  color: var(--d-creme-2); opacity: .8;
}

/* ---------- texto ---------- */
.dhero__texto {
  position: relative; z-index: 4;
  width: min(36vw, 33rem);
  margin-left: var(--d-margem);
  min-height: max(100svh, 700px);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--d-topo) + 1.5rem) 0 2.5rem;
}
.dhero__sobre {
  margin: 0 0 clamp(.8rem, 2.2vh, 1.4rem);
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 500;
  color: var(--d-caramelo);
}
.dhero__sobre span { color: var(--d-ouro); }
.dhero__titulo {
  margin: 0;
  font-family: var(--d-serifa); font-weight: 400;
  font-size: clamp(2.6rem, min(4.5vw, 8.4vh), 4.9rem);
  line-height: 1.02; letter-spacing: .01em;
  color: var(--d-creme);
  text-wrap: balance;
}
.dhero__titulo .dl { display: block; }
.dhero__titulo em {
  font-style: italic;
  color: var(--d-ouro-claro);
}
.dhero__apoio {
  margin: clamp(1rem, 2.6vh, 1.6rem) 0 .6rem; max-width: 29rem;
  font-weight: 300; font-size: clamp(1.125rem, 1.3vw, 1.25rem); line-height: 1.6;
  color: rgb(239 230 216 / .9);
}
.dhero__end {
  margin: 0; font-size: .95rem; font-weight: 500; letter-spacing: .04em; color: var(--d-caramelo);
}
.dhero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(1.2rem, 3.2vh, 2rem); }
.dbtn {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1rem 1.6rem; border-radius: var(--d-raio);
  background: linear-gradient(in oklab 135deg, #f0d38c, #d6a441 45%, #b8893a);
  color: #10251f; text-decoration: none;
  font-weight: 600; font-size: 1rem; letter-spacing: .04em;
  box-shadow: 0 10px 30px rgb(214 164 65 / .22), inset 0 1px 0 rgb(255 255 255 / .45);
  transition: transform .4s ease, box-shadow .4s ease;
}
.dbtn svg { width: 1.25rem; height: 1.25rem; }
.dbtn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgb(214 164 65 / .32), inset 0 1px 0 rgb(255 255 255 / .45); }
.dlink { font-size: .95rem; letter-spacing: .04em; text-underline-offset: .3em; text-decoration-color: rgb(214 164 65 / .6); }

.dprova {
  margin-top: clamp(1.3rem, 3.6vh, 2.4rem); padding-top: clamp(.9rem, 2vh, 1.3rem);
  border-top: 1px solid rgb(214 164 65 / .35);
  max-width: 28rem;
}
.dprova__nota { margin: 0 0 .5rem; font-size: .9rem; letter-spacing: .08em; color: var(--d-creme-2); }
.dprova__nota strong { font-weight: 600; color: var(--d-ouro-claro); }
.dprova__estrelas { color: var(--d-ouro); letter-spacing: .12em; margin-right: .35rem; }
.dprova__fala { margin: 0; }
.dprova__fala p { margin: 0; font-family: var(--d-serifa); font-style: italic; font-size: 1.3rem; line-height: 1.35; color: var(--d-creme); }
.dprova__fala footer { margin-top: .35rem; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--d-caramelo); }

/* ---------- entrada ---------- */
.dhero__sobre, .dhero__titulo .dl, .dhero__apoio, .dhero__end, .dhero__acoes, .dprova, .dtopo {
  animation: d-sobe 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.dhero__titulo .dl:nth-child(1) { animation-delay: .15s; }
.dhero__titulo .dl:nth-child(2) { animation-delay: .32s; }
.dhero__apoio { animation-delay: .6s; }
.dhero__end { animation-delay: .7s; }
.dhero__acoes { animation-delay: .82s; }
.dprova { animation-delay: 1s; }
.dfig { animation: d-surge 1.8s cubic-bezier(.2,.7,.2,1) .35s both; }
@keyframes d-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes d-surge { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* traço do monograma (só com JS; sem JS o desenho já aparece pronto) */
.js .dselo .dtr { transition: stroke-dashoffset 2.4s cubic-bezier(.55,.05,.25,1); }
.js .dselo__letreiro { opacity: 0; transition: opacity 2s ease 1.6s; }
.js .dselo.is-desenhado .dselo__letreiro { opacity: 1; }

/* ---------- tablet / celular ---------- */
@media (max-width: 979px) {
  :root { --d-topo: 4.5rem; }
  .dtopo__marca img { width: 40px; height: 40px; }
  .dtopo__marca span { font-size: .92rem; }
  .dtopo__marca em { display: none; }
  .dtopo__nav a:not(.dtopo__whats) { display: none; }
  .dtopo__nav { font-size: .74rem; }

  .dhero { min-height: 0; display: flex; flex-direction: column; }
  .dhero__texto {
    order: 1;
    width: auto; min-height: 0;
    margin: 0; padding: calc(var(--d-topo) + 1.6rem) var(--d-margem) 0;
    display: contents;
  }
  .dhero__texto > * { margin-left: var(--d-margem); margin-right: var(--d-margem); }
  .dhero__sobre { order: 1; margin-top: calc(var(--d-topo) + 1.6rem); font-size: .7rem; letter-spacing: .24em; }
  .dhero__titulo { order: 2; font-size: clamp(2.5rem, 11.6vw, 4.2rem); }
  .dhero__apoio { order: 5; margin-top: -12vw; position: relative; z-index: 4; font-size: 1.125rem; }
  .dhero__end { order: 6; position: relative; z-index: 4; font-size: .92rem; }
  .dhero__acoes { order: 7; position: relative; z-index: 4; margin-top: 1.5rem; gap: .9rem 1.2rem; }
  .dbtn { padding: .95rem 1.35rem; }

  /* palco: o selo acima, ela na frente */
  .dselo {
    order: 3; position: relative;
    width: 100vw; right: auto; top: auto; translate: none;
    margin: 1.2rem 0 0;
    flex: none;
  }
  .dfig {
    order: 4; position: relative;
    left: auto; bottom: auto;
    width: 88vw; height: auto;
    margin: -34vw auto 0;
    flex: none;
  }
  .dfig figcaption { bottom: auto; top: 30%; right: -5vw; writing-mode: vertical-rl; font-size: .64rem; }
  .dprova {
    order: 8; position: relative; z-index: 4;
    margin-top: 2rem; margin-bottom: 2.8rem;
  }
  .dprova__fala p { font-size: 1.2rem; }
  .dselo__estetica { display: none; }
}

@media (min-width: 980px) and (max-width: 1180px) {
  .dhero__texto { width: 34vw; }
  .dhero__sobre { letter-spacing: .2em; font-size: .72rem; }
  .dfig { left: 38vw; height: min(80svh, 46vw); }
  .dselo { right: -15vw; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important;
  }
}