/* ==========================================================================
   SEÇÕES — layout desktop (≥1366px). Medidas extraídas do site original.
   Ajustes tablet/mobile ficam em responsive.css.
   ========================================================================== */

/* ---------- Âncora de topo (espaçador de 4px como no original) ---------- */
.top-anchor {
  width: 100%;
  height: 4px;
  flex: none;
}
.hero-spacer {
  width: 100%;
  height: 1px;
  flex: none;
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  height: 80px;
  padding: 10px 100px 10px 40px;
  display: flex;
  align-items: center;
  background: var(--color-header-bg);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
  overflow: hidden;
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
}
.header__brand {
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 100px;
}
.header__logo {
  width: 136px;
  height: 42px;
  display: block;
}
.header__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header__menu {
  display: contents;
}
.menu-toggle {
  display: none;
}
.header__spacer {
  flex: 1 0 0;
  height: 21px;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  line-height: 1;
  color: var(--color-text-nav);
  white-space: pre;
  transition: color var(--duration-hover) var(--ease-out);
}
.nav-link:hover {
  color: var(--color-text-nav-hover);
}
.header__gap {
  flex: none;
  width: 1%;
  height: 21px;
}

/* Âncoras não ficam escondidas atrás do header sticky */
#dragohome,
#sessao1,
#about,
#contact,
#contact-us-headline {
  scroll-margin-top: 90px;
}

/* ---------- Hero: banners em pilha (deck), igual à LP Versato ---------- */
.hero {
  position: relative;
  z-index: var(--z-hero);
  isolation: isolate; /* camadas do deck ficam presas dentro do hero */
  width: 100%;
  padding: 20px var(--deck-gap) var(--deck-gap);
  overflow: hidden;
}
.hero__stage {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px - 20px - var(--deck-gap));
  height: calc(100svh - 80px - 20px - var(--deck-gap));
  min-height: var(--deck-min-h);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.hero__stage.is-dragging { cursor: grabbing; }
.hero__stage:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 6px;
  border-radius: var(--deck-radius);
}

.slide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--deck-width);
  border-radius: var(--deck-radius);
  overflow: hidden;
  box-shadow: var(--deck-shadow-active);
  transform-origin: center right;
  transition:
    transform var(--duration-deck) var(--ease-deck),
    opacity var(--duration-deck) var(--ease-deck),
    filter var(--duration-deck) var(--ease-deck);
  will-change: transform, opacity, filter;
}
.hero__stage.is-dragging .slide { transition: none; }
.slide:not(.pos-0) {
  box-shadow: var(--deck-shadow-peek);
  cursor: pointer;
}

/* Posições da pilha: o ativo à esquerda, os próximos aparecendo à direita */
.slide.pos-0 { transform: translateX(0)   scale(1);    opacity: 1;    filter: none;                         z-index: 40; }
.slide.pos-1 { transform: translateX(11%) scale(0.94); opacity: 0.97; filter: blur(1.5px) brightness(0.95); z-index: 30; }
.slide.pos-2 { transform: translateX(16%) scale(0.88); opacity: 0.66; filter: blur(5px)   brightness(0.82); z-index: 20; }
.slide.pos-3 { transform: translateX(20%) scale(0.82); opacity: 0.42; filter: blur(9px)   brightness(0.76); z-index: 10; }
.slide.pos-4 { transform: translateX(20%) scale(0.82); opacity: 0;    filter: blur(9px)   brightness(0.76); z-index: 5;  pointer-events: none; }

/* Imagem sem filtro, sem sobreposição de cor e em resolução original */
.slide picture {
  position: absolute;
  inset: 0;
}
.slide__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.slide__content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--slide-left);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--slide-gap, 25px);
  width: var(--slide-w);
  max-width: calc(100% - var(--slide-left) - 24px);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-deck);
}
.slide.pos-0 .slide__content {
  opacity: 1;
  pointer-events: auto;
}
.slide__title {
  font-family: var(--font-heading);
  font-size: var(--slide-h1, var(--fs-hero-h1-lg));
  line-height: 1;
  color: var(--slide-h1-color, var(--color-ink));
  white-space: pre;
}
.slide__text {
  font-family: var(--font-body);
  font-size: var(--fs-hero-p);
  line-height: 1.2;
  color: var(--slide-p-color, var(--color-text));
  white-space: pre;
}

/* Entrada do conteúdo do banner ativo */
.slide.pos-0 .slide__title { animation: deckFadeUp var(--duration-deck-text) var(--ease-deck) 300ms both; }
.slide.pos-0 .slide__text  { animation: deckFadeUp var(--duration-deck-text) var(--ease-deck) 450ms both; }
.slide.pos-0 .btn          { animation: deckFadeUp var(--duration-deck-text) var(--ease-deck) 600ms both; }
@keyframes deckFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Textos e cores por banner (desktop) */
.slide--1 { --slide-w: 637px; --slide-left: 73px;  --slide-gap: 25px; --slide-h1: clamp(56px, 4.1vw, var(--fs-hero-h1)); --slide-h1-color: var(--color-white); --slide-p-color: var(--color-white); }
.slide--2 { --slide-w: 771px; --slide-left: 87px;  --slide-gap: 34px; --slide-h1: 70px; --slide-h1-color: var(--color-ink); --slide-p-color: var(--color-ink); }
.slide--3 { --slide-w: 859px; --slide-left: 123px; --slide-gap: 35px; --slide-h1-color: var(--color-text-hero-h1-light); --slide-p-color: var(--color-text-hero-white); }
.slide--4 { --slide-w: 581px; --slide-left: min(751px, calc(100% - 629px)); --slide-gap: 35px; --slide-h1-color: var(--color-text-hero-h1-light); --slide-p-color: var(--color-text-hero-white); }
.slide--5 { --slide-w: 814px; --slide-left: 100px; --slide-gap: 24px; --slide-h1-color: var(--color-ink); --slide-p-color: var(--color-text); }

.slide--1 .slide__img { object-position: center; }
.slide--2 .slide__img { object-position: center; }
.slide--3 .slide__img { object-position: right bottom; }
.slide--4 .slide__img { object-position: right top; }
.slide--5 .slide__img { object-position: center; }

@media (prefers-reduced-motion: reduce) {
  .slide,
  .slide__content { transition-duration: 1ms; }
  .slide.pos-0 .slide__title,
  .slide.pos-0 .slide__text,
  .slide.pos-0 .btn { animation: none; }
}

/* ---------- Destaques (3 cartões) ---------- */
.features {
  width: 98%;
  margin-top: 0;
  padding: 52px 0 69px;
  display: flex;
  justify-content: center;
  background: var(--color-white);
}
.features__grid {
  display: flex;
  gap: 22px;
}
.feature--sku     { --feature-pad: 27px; }
.feature--orders  { --feature-pad: 20px; }
.feature--service { --feature-pad: 26px; }

/* ---------- OWS Partners ---------- */
.partners {
  width: 100%;
  padding: 25px 0;
  display: flex;
  justify-content: center;
}
.partners__panel {
  width: var(--container-card);
  height: 435px;
  padding: 23px 0 23px 69px;
  display: flex;
  align-items: center;
  gap: 125px;
}
.partners__img {
  width: 525px;
  height: 389px;
  border-radius: var(--radius-card-img);
  object-position: 50.8% 40.7%;
  flex: none;
}
.partners__body {
  display: flex;
  flex-direction: column;
  gap: 45px;
  padding-top: 10px;
}
.partners__title {
  font-size: var(--fs-h2);
  line-height: 60px;
}
.partners__text {
  white-space: pre;
}

/* ---------- Números (stats) ---------- */
.stats {
  width: 100%;
  padding: 72px 0;
  display: flex;
  justify-content: center;
}
.stats__band {
  width: 100%;
  height: 316px;
  padding: 85px 0;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 96px;
}
.stat {
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}
.stat__value {
  font-family: var(--font-heading);
  font-size: var(--fs-stat);
  line-height: 1.2;
  color: var(--color-ink);
  white-space: pre;
}
.stat__label {
  font-family: var(--font-body);
  font-size: var(--fs-stat-label);
  line-height: 1.3;
  color: var(--color-text-stats);
  text-align: center;
  white-space: pre-line;
}
.stat__divider {
  width: 2px;
  height: 192px;
  border-radius: 32px;
  background: var(--color-stat-divider);
  flex: none;
}

/* ---------- Get Personalized Service ---------- */
.service {
  width: 100%;
  padding: 30px 0 29px;
  display: flex;
  justify-content: center;
}
.service__panel {
  width: var(--container-inner);
  height: 509px;
  padding: 24px 51px 26px 85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.service__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 420px;
}
.service__title {
  line-height: 40px;
}
.service__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
}
.service__img {
  width: 656px;
  height: 459px;
  flex: none;
}

/* ---------- Trendy & Eco-Friendly ---------- */
.eco {
  width: 100%;
  padding: 37px 0 36px;
  display: flex;
  justify-content: center;
}
.eco__band {
  width: 100%;
  height: 570px;
  /* 189px à esquerda em 1680px; nunca estoura em telas menores */
  padding: 75px 24px 75px max(24px, calc(50% - 651px + max(0px, (1680px - 100%) * 0.169)));
  background: var(--color-surface);
  display: flex;
  justify-content: flex-start;
  gap: 79px;
}
.eco__img {
  width: 569px;
  height: 420px;
  object-position: 39.2% 50.6%;
  flex: none;
}
.eco__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 43px;
  padding-top: 10px;
  width: 549px;
}
.eco__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 23px;
  align-items: flex-start;
}
.eco__text {
  white-space: pre;
}

/* ---------- Contato ---------- */
.contact-anchor {
  width: 1085px;
  height: 4px;
  flex: none;
}
.contact {
  width: 100%;
  padding: 53px 0 52px;
  display: flex;
  justify-content: center;
  background: var(--color-white);
}
.contact__inner {
  position: relative;
  width: var(--container-inner);
  height: 685px;
  display: flex;
  justify-content: space-between;
  padding: 28px 35px 0 64px;
}
.contact__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 25px;
  width: 632px;
  height: 614px;
}
.contact__title {
  font-family: var(--font-heading);
  font-size: var(--fs-contact-h1);
  line-height: 0.8;
  color: var(--color-ink);
}
.contact__sub {
  font-family: var(--font-body);
  font-size: var(--fs-contact-sub);
  line-height: 0.8;
  color: var(--color-text-muted);
  white-space: pre;
}
.contact__info {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre;
}
.contact__info strong {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-ink-strong);
}
.contact__info .contact__label--address {
  color: var(--color-black);
}
.contact__form-wrap {
  width: 565px;
  padding: 37px 20px 0;
  flex: none;
}
.contact__info--mobile { display: none; }

/* ---------- Sobre ---------- */
.about {
  width: 100%;
  padding: 30px 0 29px;
  display: flex;
  justify-content: center;
}
.about__band {
  position: relative;
  width: 100%;
  height: 509px;
  /* 293px à esquerda em 1680px; nunca estoura em telas menores */
  padding: 0 24px 0 max(24px, calc(50% - 547px));
  background: var(--color-surface);
  display: flex;
  justify-content: flex-start;
  gap: 80px;
}
.about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 425px;
  padding-top: 120px;
}
.about__title {
  line-height: 40px;
}
.about__sub {
  margin-top: 29px;
  font-family: var(--font-body);
  font-size: var(--fs-about-sub);
  line-height: 0.8;
  color: var(--color-text-muted);
  white-space: pre;
}
.about__text {
  margin-top: 39px;
  white-space: pre;
}
.about__logo {
  width: 656px;
  min-width: 0;
  height: 583px;
  margin-top: -38px;
  object-fit: contain;
  flex: 0 1 656px;
}
.about__logo--small { display: none; flex: none; }

/* ---------- Divisor ---------- */
.divider {
  width: 1281px;
  max-width: calc(100% - 48px);
  height: 5px;
  object-fit: cover;
  flex: none;
}

/* ---------- Footer ---------- */
.footer {
  width: 100%;
  padding: 50px 60px;
  display: flex;
  align-items: center;
  height: 301px;
}
.footer__inner {
  width: 100%;
  height: 111px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 510px;
}
.footer__brand {
  font-family: var(--font-body);
  font-size: var(--fs-footer);
  line-height: 0.8;
  color: var(--color-text-footer);
  white-space: pre;
}
.footer__social {
  display: flex;
  align-items: center;
  gap: 15px;
}
.footer__icon {
  width: 43px;
  height: 38px;
  object-fit: contain;
  display: block;
}