/* ==========================================================================
   DHF Studios — Site institucional
   Ritmo vertical das seções: clamp(64px, 10vw, 96px). Container 1240px.
   O fundo da página é creme. Existem exatamente três faixas ink de sangria
   total: faixa de logos, showreel e CTA final. Não acrescentar outras.
   ========================================================================== */

body { overflow-x: hidden; }

.section {
  padding: clamp(64px, 10vw, 96px) 20px;
  position: relative;
}
.section--sunken { background: var(--cream-2); }
.section--ink {
  background: var(--dhf-ink);
  color: var(--cream-1);
  overflow: hidden;
}
.section--clip { overflow: hidden; }

[id] { scroll-margin-top: 72px; }

/* --------------------------------------------------------------------------
   1. Header fixo
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(255, 248, 238, .74);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: none;
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(53, 53, 53, .18); }

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.site-header__logo img { height: 30px; width: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav a:not(.btn) {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-faint);
}
.site-nav a:not(.btn):hover { color: var(--dhf-ink); }

.nav-toggle {
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  align-items: flex-end;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dhf-ink);
}
.nav-toggle span:nth-child(2) { width: 18px; }

@media (max-width: 1039px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   2. Menu mobile (overlay)
   -------------------------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--dhf-ink);
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu__top img { height: 30px; width: auto; display: block; }

.mobile-menu__close {
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-1);
  font-size: 28px;
  line-height: 1;
}

.mobile-menu__nav {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu__nav a {
  font-family: var(--font-condensed);
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-1);
}

.mobile-menu__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-menu__mail {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 248, 238, .68);
  text-align: center;
  text-decoration-color: rgba(255, 248, 238, .4);
}
.mobile-menu__mail:hover { color: var(--cream-1); }

/* --------------------------------------------------------------------------
   3. Hero — "Bloco de cor"
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(150px, 18vw, 168px) 28px 132px;
  background: var(--dhf-orange);
  text-align: center;
}
.hero__inner {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dhf-ink-70);
  margin-bottom: clamp(18px, 4vw, 32px);
}
.hero h1 {
  font-family: var(--font-condensed);
  font-size: clamp(46px, 10.5vw, 116px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-weight: 400;
}
.hero__lead {
  margin: clamp(20px, 4vw, 32px) auto 0;
  font-size: clamp(14px, 3.4vw, 18px);
  line-height: 1.6;
  color: var(--dhf-ink-90);
  max-width: 56ch;
}
.hero__actions {
  margin-top: clamp(28px, 5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* As frutas sangram pelos cantos. Os deslocamentos em vw e as larguras em
   clamp são o que impede que cubram a headline em telas pequenas. */
.hero .fruit--pineapple  { left: calc(-4vw - 20px); top: calc(-3vw - 20px);    width: clamp(120px, 26vw, 300px); }
.hero .fruit--strawberry { right: 8vw;              top: calc(-3vw - 24px);    width: clamp(76px, 16vw, 190px); transform: rotate(9deg); }
.hero .fruit--apples     { left: 8vw;               bottom: calc(-3vw - 24px); width: clamp(84px, 18vw, 210px); transform: rotate(-8deg); }
.hero .fruit--persimmon  { right: calc(-4vw - 20px); bottom: calc(-4vw - 24px); width: clamp(128px, 28vw, 320px); }

/* --------------------------------------------------------------------------
   4. Faixa de números
   -------------------------------------------------------------------------- */

.stats {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 64px) 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 18vw, 260px), 1fr));
  gap: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px);
  text-align: center;
  justify-items: center;
}
.stats__num {
  font-family: var(--font-condensed);
  font-size: clamp(44px, 9vw, 72px);
  line-height: .92;
  letter-spacing: .01em;
}
.stats__label {
  margin-top: 8px;
  font-size: clamp(10px, 2.6vw, 12px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. Faixa de logos (faixa ink) — marquee infinito
   -------------------------------------------------------------------------- */

.logos {
  background: var(--dhf-ink);
  padding: 56px 0 60px;
  overflow: hidden;
}
.logos__caption {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 248, 238, .62);
  margin-bottom: 36px;
  padding: 0 24px;
}
.logos__viewport {
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

@keyframes dhf-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: dhf-marquee 64s linear infinite;
  opacity: .78;
  transition: opacity var(--duration-base) var(--ease-out);
}
.logos__track:hover {
  opacity: 1;
  animation-play-state: paused;
}

/* Dois grupos idênticos; o padding-right igual ao gap é o que torna
   o laço em -50% perfeitamente contínuo. */
.logos__group {
  display: flex;
  align-items: center;
  gap: clamp(44px, 7vw, 80px);
  padding-right: clamp(44px, 7vw, 80px);
}
.logos__group img {
  height: 50px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}
.logos__group img[data-h="40"] { height: 40px; }
.logos__group img[data-h="41"] { height: 41px; }
.logos__group img[data-h="42"] { height: 42px; }
.logos__group img[data-h="48"] { height: 48px; }
.logos__group img[data-h="52"] { height: 52px; }
.logos__group img[data-h="56"] { height: 56px; }

@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Cabeçalho de seção com parágrafo ao lado
   -------------------------------------------------------------------------- */

.section-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(28px, 5vw, 48px);
  align-items: end;
  margin-bottom: 64px;
}
.section-head p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
}

/* A palavra em script pende abaixo da caixa, então precisa de um respiro
   generoso antes do que vem em seguida. */
.section-title-wrap { margin-bottom: clamp(72px, 9vw, 104px); }
.section-title-wrap--tight { margin-bottom: clamp(56px, 7vw, 72px); }

/* --------------------------------------------------------------------------
   6. Serviços
   -------------------------------------------------------------------------- */

.servicos .fruit--lemon { right: -90px; top: 40px; width: 260px; opacity: .9; }

.servicos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

/* Marcador de cor do serviço. Substitui o antigo círculo numerado:
   os serviços não têm ordem, então numerá-los sugeria uma sequência
   que não existe. A cor continua identificando cada frente. */
.servico__cor {
  width: 52px;
  height: 6px;
  border-radius: var(--radius-pill);
}
.servico h3 {
  margin-top: 24px;
  font-family: var(--font-condensed);
  font-size: 28px;
  line-height: .98;
  text-transform: uppercase;
  font-weight: 400;
}
.servico__lead {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.servico__label {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line-hairline);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.servico__entregas {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.servico-cta {
  border-radius: var(--radius-lg);
  background: var(--dhf-ink);
  color: var(--cream-1);
  padding: clamp(20px, 5vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.servico-cta .fruit--strawberry { right: -40px; bottom: -40px; width: 190px; opacity: .85; }
.servico-cta p {
  font-family: var(--font-condensed);
  font-size: 30px;
  line-height: .98;
  text-transform: uppercase;
  position: relative;
}
.servico-cta div { position: relative; margin-top: 24px; }

/* --------------------------------------------------------------------------
   7. Método
   -------------------------------------------------------------------------- */

.metodo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 32px;
}
.metodo__passo { border-top: 2px solid var(--dhf-ink); padding-top: 20px; }
.metodo__num {
  font-family: var(--font-condensed);
  font-size: 44px;
  line-height: .92;
  color: var(--dhf-orange);
}
.metodo__passo h3 {
  margin-top: 12px;
  font-family: var(--font-condensed);
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 400;
}
.metodo__passo p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.portal-callout {
  margin-top: 64px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--dhf-ink);
  background: var(--dhf-yellow);
  padding: clamp(20px, 5vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.portal-callout .fruit--apples { right: -30px; top: -50px; width: 180px; }
.portal-callout p {
  font-size: 17px;
  line-height: 1.6;
  position: relative;
  max-width: 60ch;
}
.portal-callout strong { font-weight: 600; }
.portal-callout__action { position: relative; justify-self: start; }

/* --------------------------------------------------------------------------
   8. Cases
   -------------------------------------------------------------------------- */

.cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px;
}
.case {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--dhf-ink-18);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
}
.case__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.case__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case__body {
  padding: clamp(20px, 5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.case__body h3 {
  font-family: var(--font-condensed);
  font-size: 34px;
  line-height: .95;
  text-transform: uppercase;
  font-weight: 400;
}
.case__body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.case__foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-hairline);
}
.case__foot a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration-color: var(--dhf-ink-45);
}
.case__foot a:hover { color: var(--dhf-ink); }

.closing-row {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.closing-row p { font-size: 16px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   9. Showreel (faixa ink)
   -------------------------------------------------------------------------- */

.showreel__texture {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  opacity: .1;
  pointer-events: none;
}
.showreel__lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 248, 238, .8);
  max-width: 60ch;
}
.showreel__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px;
}
.showreel__col { display: flex; flex-direction: column; gap: 16px; }
.showreel__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 248, 238, .28);
  background: rgba(255, 248, 238, .05);
}
.showreel__frame iframe {
  width: 100%;
  height: clamp(560px, 150vw, 660px);
  border: 0;
  display: block;
}
.showreel__profile {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 248, 238, .28);
  background: rgba(255, 248, 238, .05);
  transition: background var(--duration-fast) var(--ease-out);
}
.showreel__profile:hover { background: rgba(255, 248, 238, .1); }
.showreel__pill {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.showreel__name {
  font-family: var(--font-condensed);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cream-1);
}
.showreel__handle {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 248, 238, .75);
}

/* --------------------------------------------------------------------------
   10. Sobre
   -------------------------------------------------------------------------- */

.sobre .fruit--apples { left: -80px; bottom: 40px; width: 240px; }

.sobre__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 64px);
  align-items: start;
}
.sobre__lead {
  margin-top: 32px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 56ch;
}
.sobre__tags {
  margin-top: 32px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sobre__cards { display: flex; flex-direction: column; gap: 16px; }
.sobre__card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--dhf-ink-18);
  background: var(--surface-card);
  padding: clamp(20px, 5vw, 28px);
}
.sobre__card--blue {
  border: 2px solid var(--dhf-ink);
  background: var(--dhf-blue);
  position: relative;
  overflow: hidden;
}
.sobre__card--blue .fruit--lemon { right: -30px; top: -34px; width: 120px; }
.sobre__card h3 {
  font-family: var(--font-condensed);
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 400;
  position: relative;
}
.sobre__card p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 40ch;
  position: relative;
}
.sobre__card--blue p { color: var(--dhf-ink-90); }

/* --------------------------------------------------------------------------
   11. Depoimentos
   -------------------------------------------------------------------------- */

.depoimentos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}
.depoimento__mark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: .6;
  height: 34px;
}
.depoimento__quote {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
}
.card--yellow .depoimento__quote { color: var(--dhf-ink); }
.depoimento__foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line-hairline);
}
.card--yellow .depoimento__foot { border-top-color: var(--dhf-ink-18); }
.depoimento__nome { font-size: 15px; font-weight: 600; color: var(--dhf-ink); }
.depoimento__empresa {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.card--yellow .depoimento__empresa { color: var(--dhf-ink-70); }

/* --------------------------------------------------------------------------
   12. FAQ — acordeão de abertura única
   -------------------------------------------------------------------------- */

.faq { max-width: 900px; margin: 0 auto; }
.faq__list { border-top: 2px solid var(--dhf-ink); }
.faq__item { border-bottom: 1px solid var(--line-hairline); }
.faq__item:last-child { border-bottom: 2px solid var(--dhf-ink); }

.faq__trigger {
  all: unset;
  cursor: pointer;
  display: flex;
  width: 100%;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  box-sizing: border-box;
}
.faq__q {
  font-family: var(--font-condensed);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.05;
  text-transform: uppercase;
}
.faq__plus {
  font-size: 24px;
  line-height: 1;
  color: var(--dhf-orange);
  flex: 0 0 auto;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.faq__trigger[aria-expanded="true"] .faq__plus { transform: rotate(45deg); }

.faq__a {
  padding: 0 0 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   13. CTA final + formulário (faixa ink)
   -------------------------------------------------------------------------- */

.contato .fruit--persimmon { left: -70px; bottom: -60px; width: 300px; }

.contato__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 64px);
  align-items: start;
}
.contato h2 {
  font-family: var(--font-condensed);
  font-size: clamp(34px, 7vw, 72px);
  line-height: .94;
  text-transform: uppercase;
  font-weight: 400;
  max-width: 20ch;
}
.contato__lead {
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 248, 238, .8);
  max-width: 52ch;
}
.contato__acao {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.contato__fone { font-size: 15px; color: rgba(255, 248, 238, .7); }
.contato__links {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contato__links a {
  font-size: 15px;
  color: rgba(255, 248, 238, .8);
  text-decoration-color: rgba(255, 248, 238, .4);
}
.contato__links a:hover { color: var(--cream-1); }

.contato__form { display: flex; flex-direction: column; gap: 16px; }
.contato__form .field-hint a { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--cream-1);
  padding: clamp(48px, 8vw, 64px) 20px 32px;
  border-top: 1px solid var(--line-hairline);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 5vw, 48px);
}
.site-footer__logo { height: 38px; width: auto; display: block; }
.site-footer__sobre {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 34ch;
}
.site-footer__titulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.site-footer ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a {
  font-size: 14px;
  text-decoration: none;
  color: var(--text-muted);
}
.site-footer ul a:hover { color: var(--dhf-ink); }
.site-footer__bar {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-hairline);
}
.site-footer__bar span { font-size: 12px; color: var(--text-faint); }

/* --------------------------------------------------------------------------
   15. Botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */

.whats-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--dhf-green);
  border: 2px solid var(--dhf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(53, 53, 53, .18);
  transition: transform var(--duration-fast) var(--ease-out);
}
.whats-float:hover { transform: translateY(-2px); }
.whats-float[hidden] { display: none; }