*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-main: #ffffff;
  --bg-card: #f7f7f7;
  --bg-silver: #e3e3e3;

  --text-main: #111111;
  --text-muted: #5b5b5b;
  --text-soft: #8f8f8f;

  --accent-dark: #000000;

  --radius-lg: 28px;
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.08);

  --transition-med: 0.25s ease-out;

  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body {
  background: var(--bg-main);
  font-family: var(--font-main);
  color: var(--text-main);
}

.hero {
  padding: 18px 10px 40px;
}

.hero__card {
  max-width: 480px;
  margin: 0 auto;
}


.hero__card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* IMAGEM NO TOPO */

.hero__image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
}

.hero__image {
  width: 90%;
  max-width: 260px;
   border-radius: 26px;
  background: radial-gradient(circle at 50% 0, #ffffff 0, #d6d6d6 70%);
}

.hero__image-shadow {
  position: absolute;
  bottom: -6px;
  width: 48%;
  height: 18px;
  border-radius: 999px;
  filter: blur(14px);
  background: rgba(0, 0, 0, 0.25);
}

/* TAG SUPERIOR */

.hero__tagline {
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.65rem;
  color: #9b9b9b;
  margin-bottom: 10px;
  text-align: center;
}

.hero__tagline-main {
  font-weight: 600;
}

.hero__tagline-sub {
  margin-left: 6px;
}

/* TEXTOS */

.hero__title {
  font-size: 1.58rem;
  text-align: center;
   line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  font-weight: 500;
}

.hero__title span {
  font-weight: 600;
}

.hero__subtitle {
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding: 0 6px;
}
.subtitle-hero {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  max-width: 35ch;
  margin: 0 auto 10px auto;
  line-height: 1.45;
}

/* cursor de digitação */
#subtitle-typed::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 3px;
  background: #111;
  animation: blinkCursor 1s steps(2, start) infinite;
}

@keyframes blinkCursor {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}


/* BULLETS */

.hero__bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.hero__bullet {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.hero__bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #000;
  margin-top: 4px;
}

/* CTA */

.btn {
  width: 100%;
  padding: 14px 22px;
  border: none;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
  transition: 0.15s ease-out;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}

.btn:active {
  transform: translateY(0) scale(0.97);
}

.btn__sub {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 2px;
}
.title-hero {
  font-size: 1.55rem;
  font-weight: 700;
  text-align: center;
  color: #111;
  margin-bottom: 6px;

  /* estado inicial */
  opacity: 0;
  transform: translateY(12px);

  /* animação */
  animation-name: titleEnter;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;  /* mantém o estado final */
  animation-iteration-count: 1;
}

.title-hero span {
  color: #000; /* ou verde, se quiser */
  font-weight: 700;
}

/* animação: entra de baixo e para no lugar */
@keyframes titleEnter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* subtítulo também com fade opcional */
.subtitle-hero {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  max-width: 32ch;
  margin: 0 auto;
  opacity: 0;

  animation-name: fadeSubtitle;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay: 0.15s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes fadeSubtitle {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* HEADER PREMIUM DESTACADO */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  /* leve degradê pra destacar do hero */
  background: linear-gradient(180deg, #f9f9f9 0%, #ffffff 80%);
  backdrop-filter: blur(18px);

  /* linha separando hero do header */
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);

  /* sombra suave pra dar “camada” acima do hero */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

/* logo Marezza */

.topbar__logo {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* lado direito */

.topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* pill Compra 100% segura – premium */

.topbar__secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 12px;
  border-radius: 999px;

  background: linear-gradient(135deg, #ffffff 0%, #f2f2f2 100%);
  border: 1px solid #e2e2e2;

  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;

  color: #111;
  cursor: default;
}

.topbar__secure-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #0bb36c;
  box-shadow: 0 0 0 3px rgba(11, 179, 108, 0.14);
}

/* menu hamburguer premium */

.topbar__menu {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #ececec; /* antes era #e2e2e2 */
  background: #ffffff;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;

  padding: 0;
  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out,
              background 0.12s ease-out;
}

.topbar__menu-line {
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: #111;
}

.topbar__menu:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
}

.topbar__menu:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
}

@media (min-width: 640px) {
  .topbar {
    padding: 14px 22px;
  }
}
.subtitle-hero {
  font-size: 0.95rem;
  font-weight: 300;                 /* deixa o subtítulo fino e elegante */
  color: #444;                      /* cinza premium, não preto */
  opacity: 0.9;                     /* visual mais suave */
  letter-spacing: -0.015em;         /* deixa o texto mais moderno */
  line-height: 1.45;               
  text-align: center;
  max-width: 32ch;
  margin: 0 auto 12px auto;
}
/* CENTRALIZA A IMAGEM */
.hero__image-wrapper {
  display: flex;
  justify-content: center;
  margin: 8px auto 18px auto;
}

/* ESTILO PREMIUM DA IMAGEM */
.hero__image--premium {
  width: 88%;
  max-width: 340px;
  border-radius: 22px;

  /* Sombra estilo produto caro */
  box-shadow: 
    0 28px 38px rgba(0,0,0,0.35),
    0 8px 18px rgba(0,0,0,0.22);

  /* leve contraste pra deixar o inox mais “vivo” */
  filter: contrast(1.03) brightness(1.02);

  /* animação de flutuar */
  animation: floatHero 4.3s ease-in-out infinite;
}

/* FLUTUAÇÃO PREMIUM */
@keyframes floatHero {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}
/* ========================
   BLOCO ZWILLING PREMIUM
========================= */

.section-zwilling {
  padding: 32px 18px 14px;
}

.section-zwilling__inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

/* Título premium */
.zwilling-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 12px;
}

/* Texto editorial */
.zwilling-text {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.55;
  opacity: 0.9;
  max-width: 40ch;
  margin: 0 auto 22px;
}

.zwilling-text strong {
  font-weight: 600;
  color: #222;
}

/* Imagem elegante */
.zwilling-image-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.zwilling-image {
  width: 100%;
  max-width: 360px;
  border-radius: 22px;
  box-shadow: 0 28px 48px rgba(0,0,0,0.12);
 transform: scale(.96);
  transition: transform 0.35s ease-out;
  animation: zoomFade 1s ease-out forwards

}

/* animação suave ao entrar (1% premium) */
.zwilling-image:hover {
  transform: translateY(-4px);
}
/* ============================
   ANIMAÇÃO GLOBAL PREMIUM
============================ */

.section-animate {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.85s ease-out forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes zoomFade {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.section-zwilling {
  padding: 32px 18px 14px;
}

.section-zwilling__inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

/* TÍTULO */
.zwilling-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 18px;
}

/* IMAGEM */
.zwilling-image-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto 22px;
}

.zwilling-image {
  width: 100%;
  max-width: 360px;
  border-radius: 20px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.14);
  animation: zoomFade 0.9s ease-out forwards;
  opacity: 0;
  transform: scale(.96);
}

/* animação premium */
@keyframes zoomFade {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* TEXTO */
.zwilling-text {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.55;
  opacity: 0.9;
  max-width: 40ch;
  margin: 0 auto;
}
/* estado invisível padrão */
.section-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* quando entrar na tela */
.section-animate.visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
   SEÇÃO ZWILLING CARROSSEL
========================= */

.section-zwilling {
  padding: 28px 0 26px;
}

/* container do carrossel */
.zwilling-carousel {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  gap: 14px;
  padding: 0 16px 6px 16px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.zwilling-carousel::-webkit-scrollbar {
  height: 4px;
}
.zwilling-carousel::-webkit-scrollbar-track {
  background: transparent;
}
.zwilling-carousel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* =========================
   CARD ZWILLING PREMIUM
========================= */

.zwilling-card {
  flex: 0 0 84%;
  max-width: 360px;
  scroll-snap-align: center;

  background: #ffffff;
  border-radius: 22px;
  padding: 18px 16px 22px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);

  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

/* título do card */
.zwilling-card__title {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 6px;
}

/* imagem no meio */
.zwilling-card__image-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto 12px auto;
}

.zwilling-card__image {
  width: 100%;
  max-width: 330px;
  border-radius: 18px;
  display: block;
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);

  opacity: 0;
  transform: scale(.96);
  animation: zoomFade 0.9s ease-out forwards;
}

/* texto */
.zwilling-card__text {
  font-size: 0.88rem;
  color: #444;
  line-height: 1.52;
  opacity: 0.92;
  max-width: 36ch;
  margin: 0 auto;
}

/* animação da imagem do card */
@keyframes zoomFade {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* em telas maiores, mostra mais largura por card */
@media (min-width: 640px) {
  .zwilling-card {
    flex: 0 0 48%;
  }
}
/* =========================
   BLOCO MEDIDAS & DETALHES
========================= */

.section-specs {
  padding: 28px 18px 32px;
}

.section-specs__inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.specs-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 6px;
}

.specs-subtitle {
  font-size: 0.9rem;
  color: #555;
  opacity: 0.9;
  max-width: 34ch;
  margin: 0 auto 18px;
}

/* ficha técnica */

.specs-card {
  margin: 0 auto 18px;
  border-radius: 22px;
  padding: 16px 14px 14px;
  background: linear-gradient(145deg, #f7f7f7, #ffffff);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 18px 38px rgba(0,0,0,0.06);

  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.specs-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.specs-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.78);
}

.specs-label {
  color: #666;
}

.specs-value {
  font-weight: 600;
  color: #111;
}

/* destaque do cesto */

.specs-basket {
  margin: 4px auto 10px;
  padding: 14px 14px 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 16px 32px rgba(0,0,0,0.06);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.specs-basket__image-wrapper {
  display: flex;
  justify-content: center;
   position: relative;
}

.specs-basket__image {
  width: 120px;
  max-width: 140px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.28));
}

.specs-basket__image-wrapper::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 60%;
  height: 10px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0,0,0,0.18), transparent);
  filter: blur(6px);
  opacity: 0.7;
}

.specs-basket__title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.specs-basket__text {
  font-size: 0.86rem;
  color: #444;
  line-height: 1.5;
  max-width: 34ch;
  margin: 0 auto;
}

.specs-note {
  font-size: 0.75rem;
  color: #777;
  opacity: 0.9;
  margin-top: 6px;
}

/* em telas maiores, 2 colunas na ficha e cesto em linha */

@media (min-width: 640px) {
  .specs-card {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .specs-basket {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .specs-basket__content {
    text-align: left;
  }
}
/* =========================
   CARROSSEL TRUST BALLOONS
========================= */

.trust-slider {
  padding: 5px 0 16px;
  overflow: hidden;
}

.trust-slider__track {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

/* cada slide ocupa a tela inteira no mobile */
.trust-balloon {
  flex: 0 0 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 16px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: #000;
  border-radius: 999px;
  color: #fff;
 box-shadow: none;

}

.trust-balloon__icon {
  width: 26px;
  flex-shrink: 0;
  opacity: 0.9;
}

.trust-balloon__title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.trust-balloon__subtitle {
  margin: 0;
  font-size: 0.72rem;
  color: #d4d4d4;
  line-height: 1.2;
}

/* telas maiores: mostra mais largura, mas mantém carrossel */
@media (min-width: 640px) {
  .trust-balloon {
    flex: 0 0 70%;
  }
}
/* =========================
   O QUE VEM NO KIT – MINI CARDS
========================= */

.kit-list {
  padding: 26px 18px 20px;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.kit-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #111;
  letter-spacing: 0.02em;
}

.kit-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kit-card {
  display: flex;
  align-items: center;
  gap: 12px;

  background: #ffffff;
  border-radius: 14px;
  padding: 12px 14px;

  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);

  font-size: 0.88rem;
  color: #222;
}

.kit-icon {
  width: 28px;
  opacity: 0.9;
}
/* conteúdo texto + brinde dentro do card */
.kit-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* badge BRINDE */
.kit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 999px;

  background: #000;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* texto + badge na mesma linha */
.kit-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kit-line span:first-child {
  font-size: 0.78rem; /* antes 0.85 */
  white-space: nowrap; /* IMPEDIR QUE QUEBRE */
}
/* =========================
   BLOCO DESTAQUE VISUAL
========================= */

.section-highlight {
  padding: 30px 16px 28px;
  background: radial-gradient(circle at top, #2a2a2a 0, #050505 55%, #000 100%);
  border-radius: 28px;
  margin: 0 12px;
}

.highlight__inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.highlight__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}

.highlight__title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 18px;
}

.highlight__image-wrapper {
  display: flex;
  justify-content: center;
}

.highlight__image {
  width: 100%;
  max-width: 360px;
  border-radius: 22px;
  display: block;
  box-shadow: 0 24px 40px rgba(0,0,0,0.55);
  transform: translateY(0);
  transition: transform 0.35s ease-out;
}

/* efeito hover suave em desktop (não atrapalha mobile) */
@media (hover:hover) {
  .highlight__image:hover {
    transform: translateY(-4px);
  }
}
/* =========================
   SESSÃO DE OFERTA
========================= */

.offer {
  padding: 30px 16px 34px;
}

.offer__card {
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 20px 18px 18px;
  box-shadow: 0 22px 45px rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.05);
  text-align: center;
}

/* textos do topo */

.offer__eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #111;
  margin-bottom: 4px;
}

.offer__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}

.offer__subtitle {
  font-size: 0.86rem;
  color: #555;
  margin-bottom: 14px;
}

/* imagem */

.offer__image-wrapper {
  margin-bottom: 16px;
}

.offer__image {
  width: 100%;
  border-radius: 18px;
  display: block;
}

/* bloco de preço */

.offer__price-box {
  margin-bottom: 12px;
}

.offer__from {
  font-size: 0.8rem;
  color: #999;
  text-decoration: line-through;
  margin-bottom: 4px;
}

.offer__from span {
  font-weight: 500;
}

.offer__price-main {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: #111;
}

.offer__price-main span {
  color: #00a86b;          /* verde discreto pro preço */
}

.offer__installments {
  font-size: 0.82rem;
  color: #444;
}

/* benefícios */

.offer__benefits {
  list-style: none;
  padding: 0;
  margin: 10px 0 16px;
  text-align: left;
  font-size: 0.84rem;
  color: #333;
}

.offer__benefits li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
}

.offer__benefits li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #00a86b;     /* mesmo verde do preço */
}

/* botão */

.offer__cta {
  width: 100%;
  border: none;
  outline: none;
  margin-top: 2px;
  padding: 14px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;

  background: #000;
  color: #fff;
  box-shadow: 0 18px 32px rgba(0,0,0,0.35);

  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.offer__cta:active {
  transform: translateY(1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}

/* mini barra de confiança */

.offer__trust {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: #777;
}

.offer__trust span::before {
  content: "• ";
}
.offer__card {
  position: relative; /* IMPORTANTE pra tag ficar presa no card */
}

/* TAG DIAGONAL */
.offer__ribbon {
  position: absolute;
  top: 10px;
  left: -38px;

  background: #000;
  color: #fff;
  padding: 6px 32px;

  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;

  transform: rotate(-14deg);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}
/* =========================
   GALERIA DE FOTOS
========================= */

.gallery {
  padding: 26px 0 26px;
  background: #f5f5f5; /* quebra o branco sem pesar */
}

.gallery__inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.gallery__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}

.gallery__title {
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 6px;
}

.gallery__subtitle {
  font-size: 0.86rem;
  color: #555;
  opacity: 0.9;
  margin: 0 auto 14px;
  max-width: 32ch;
}

/* faixa de fotos rolável */

.gallery__rail {
  display: flex;
  gap: 10px;
  padding: 4px 4px 10px;
  margin: 0 -4px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.gallery__rail::-webkit-scrollbar {
  height: 4px;
}
.gallery__rail::-webkit-scrollbar-track {
  background: transparent;
}
.gallery__rail::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* cada foto */

.gallery__item {
  flex: 0 0 70%;
  max-width: 340px;
  scroll-snap-align: center;
}

.gallery__image {
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

/* telas maiores mostram mais área sem matar o layout */

@media (min-width: 640px) {
  .gallery__item {
    flex: 0 0 45%;
  }
}
/* =========================
   FAQ PREMIUM
========================= */

.faq {
  padding: 28px 18px 30px;
  max-width: 520px;
  margin: 0 auto;
}

.faq-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: #111;
}

.faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.10);
  padding: 10px 0;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: 0.92rem;
  color: #111;
  font-weight: 600;

  padding: 10px 0;

  text-align: left;
  cursor: pointer;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 600;
  transition: transform .2s ease;
}

.faq-item.active .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  font-size: 0.86rem;
  color: #444;
  line-height: 1.45;

  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
  padding-right: 4px;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  padding-bottom: 10px;
}
/* =========================
   CARROSSEL DE DEPOIMENTOS
========================= */

.reviews {
  padding: 30px 0 24px;
}

.reviews__header {
  max-width: 520px;
  margin: 0 auto 14px;
  padding: 0 16px;
  text-align: center;
}

.reviews__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}

.reviews__title {
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}

.reviews__subtitle {
  font-size: 0.86rem;
  color: #555;
  opacity: 0.9;
  max-width: 34ch;
  margin: 0 auto;
}

/* trilho do carrossel */

.reviews__track {
  max-width: 520px;
  margin: 10px auto 0;
  padding: 0 16px 6px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.reviews__track::-webkit-scrollbar {
  height: 4px;
}
.reviews__track::-webkit-scrollbar-track {
  background: transparent;
}
.reviews__track::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* card de depoimento */

.review-card {
  flex: 0 0 82%;
  max-width: 360px;
  scroll-snap-align: center;

  background: #ffffff;
  border-radius: 22px;
  padding: 14px 14px 14px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);

  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* header do card */

.review-card__header {
  margin-bottom: 4px;
}

.review-card__profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}

.review-card__name {
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0 0 2px;
}

.review-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.review-card__stars {
  font-size: 0.76rem;
  color: #f5b400; /* amarelo estrela */
}

.review-card__verified {
  font-size: 0.7rem;
  color: #0bb36c; /* verdinho leve */
}

/* texto do depoimento */

.review-card__text {
  font-size: 0.84rem;
  color: #444;
  line-height: 1.45;
  margin: 2px 0 4px;
}

/* imagem do depoimento */

.review-card__image-wrapper {
  margin-top: 2px;
}

.review-card__image {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* em telas maiores, mostra mais área do card */

@media (min-width: 640px) {
  .review-card {
    flex: 0 0 48%;
  }
}
/* =========================
   BLOCO INSTITUCIONAL MAREZZA
========================= */

.marezza-guarantee,
.marezza-about,
.marezza-trust {
  padding: 26px 14px 0;
}

.marezza-card {
  max-width: 520px;
  margin: 0 auto 20px;
  background: #ffffff;
  border-radius: 24px;
  padding: 18px 16px 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.marezza-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}

.marezza-text {
  font-size: 0.86rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* bloco verdinho original -> agora prata suave */

.marezza-highlight {
  background: linear-gradient(135deg, #f5f5f5, #ffffff);
  border-radius: 18px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 14px;
}

.marezza-highlight__title {
  font-size: 0.86rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}

.marezza-highlight__text {
  font-size: 0.82rem;
  color: #555;
  margin-bottom: 8px;
}

.marezza-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: #444;
}

.marezza-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 3px;
}

.marezza-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #111; /* bolinha preta discreta */
}

/* imagens */

.marezza-image-wrapper {
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

.marezza-image {
  width: 100%;
  border-radius: 18px;
  display: block;
}

/* pilha de imagens (fundadora + equipe) */

.marezza-image-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marezza-image-wrapper--reclame {
  margin-top: 12px;
}

/* highlight mais compacto no bloco Reclame Aqui */

.marezza-highlight--compact {
  margin-top: 10px;
}

/* responsivo: dá um respiro em baixo da última seção */

.marezza-trust {
  padding-bottom: 26px;
}
/* =========================
   DEPOIMENTOS – CARDS
========================= */

/* se quiser usar carrossel horizontal, envolva os cards em um container
   com essa classe: */
.testimonials-track {
  max-width: 520px;
  margin: 10px auto 0;
  padding: 0 16px 8px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.testimonials-track::-webkit-scrollbar {
  height: 4px;
}
.testimonials-track::-webkit-scrollbar-track {
  background: transparent;
}
.testimonials-track::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* CARD */

.testimonial-card {
  flex: 0 0 82%;              /* ocupa ~80% da tela no mobile */
  max-width: 360px;
  scroll-snap-align: center;

  background: #ffffff;
  border-radius: 22px;
  padding: 14px 14px 14px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);

  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* TOPO: avatar + nome + estrelas */

.testimonial-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonial-photo {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}

.testimonial-name {
  margin: 0 0 2px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #111;
}

.testimonial-meta {
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #444;
}

.testimonial-meta .verified {
  font-size: 0.7rem;
  color: #0bb36c;   /* verdinho para "cliente verificado" */
}

/* TEXTO DO DEPOIMENTO */

.testimonial-text {
  font-size: 0.84rem;
  color: #444;
  line-height: 1.45;
  margin: 4px 0 4px;
}

/* IMAGEM DO PRODUTO/PRATO */

.testimonial-image {
  width: 100%;
  border-radius: 16px;
  display: block;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* em telas maiores mostra dois por vez se o container for carrossel */
@media (min-width: 640px) {
  .testimonial-card {
    flex: 0 0 48%;
  }
}
/* =========================
   FOOTER MAREZZA
========================= */

.site-footer {
  background: transparent !important;  /* usa o mesmo fundo do bloco final */
  margin-top: 0 !important;
  padding-top: 40px; 
  padding-bottom: 60px; 
  color: #f2f2f2;
  border-radius: 0;
}

.footer-inner {
  max-width: 920px;
  margin: 0 auto;
}

/* colunas */

.footer-columns {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}

.footer-col {
  font-size: 0.82rem;
}

.footer-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-title--spaced {
  margin-top: 10px;
}

.footer-text {
  color: #c9c9c9;
  line-height: 1.5;
}

/* instagram */

.footer-instagram {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-ig-icon {
  font-size: 0.9rem;
}

/* navegação */

.footer-col--nav {
  font-size: 0.8rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 2px 0 6px;
}

.footer-links li {
  margin-bottom: 2px;
}

.footer-links a {
  color: #e5e5e5;
  text-decoration: none;
  font-size: 0.8rem;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* linha legal */

.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 6px;
  padding: 10px 0 12px;
  font-size: 0.72rem;
  color: #9e9e9e;
  line-height: 1.5;
}

/* barra final */

.footer-bar {
  background: #ffffff;
  color: #000;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 8px 10px;
  margin: 0 -16px 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* desktop: vira 3 colunas lado a lado */

@media (min-width: 768px) {
  .footer-columns {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer-col {
    flex: 1;
  }

  .footer-bar {
    margin: 0;
    margin-top: 4px;
    border-radius: 6px 6px 0 0;
  }
}
/* ============================
   ANIMAÇÃO PREMIUM – FADE UP
   ============================ */

.section-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-animate.visible {
  opacity: 1;
  transform: translateY(0);
}
/* HEADER QUE VOCÊ JÁ TEM */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 16px;

  background: linear-gradient(180deg, #f9f9f9 0%, #ffffff 80%);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.topbar__logo {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* PILL COMPRA SEGURA (EXEMPLO) */
.topbar__secure {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #ffffff;
  font-size: 0.7rem;
}

.topbar__secure-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0bb36c;
}

/* BOTÃO HAMBÚRGUER */
.topbar__menu {
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.topbar__menu-line {
  width: 18px;
  height: 2px;
  background: #111;
  border-radius: 999px;
  transition: .25s ease;
}

/* estado ativo (vira X) */
.topbar__menu.is-active .topbar__menu-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.topbar__menu.is-active .topbar__menu-line:nth-child(2) {
  opacity: 0;
}
.topbar__menu.is-active .topbar__menu-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* MENU MOBILE EM OVERLAY */
.mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 60px; /* ajusta se precisar */
  z-index: 35;

  max-width: 520px;
  margin: 0 auto;
  padding: 10px 16px 16px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.18);
  border-radius: 0 0 18px 18px;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}

.mobile-nav a {
  background: #ffffff;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  color: #111;
  font-size: 0.88rem;
}

/* aberto */
.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
html {
  scroll-behavior: smooth;
}
/* estado inicial: invisível e levemente deslocado */
.section-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}

/* quando entra na tela */
.section-animate.visible {
  opacity: 1;
  transform: translateY(0);
}
.final-offer {
  background: #000;
  color: #fff;
  padding: 50px 26px 0; /* tira padding de baixo */
  border-radius: 26px 26px 0 0;
  margin-bottom: 0;
}

.final-offer__tag {
  display: inline-block;
  background: #ffffff20;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.final-offer__title {
  font-size: 1.55rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.final-offer__image {
  width: 88%;
  margin: 20px auto 26px;
  display: block;
  filter: drop-shadow(0 12px 18px rgba(255,255,255,0.08));
  border-radius: 16px;
}

.final-offer__subtitle {
  font-size: 0.92rem;
  line-height: 1.45rem;
  opacity: 0.85;
  margin-bottom: 26px;
}

.final-offer__price-box {
  margin-bottom: 30px;
}

.old-price {
  text-decoration: line-through;
  opacity: 0.6;
  font-size: 0.85rem;
}

.new-price {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  margin-top: 4px;
}

.installments {
  display: block;
  margin-top: 6px;
  opacity: 0.8;
}

.final-offer__cta {
  display: block;
  background: #fff;
  color: #000;
  padding: 16px 10px;
  border-radius: 50px;
  font-size: 1.05rem;
  margin: 20px auto 32px;
  width: 100%;
  max-width: 320px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(255,255,255,0.15);
  text-decoration: none;
  transition: 0.25s ease;
}

.final-offer__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(255,255,255,0.18);
}

.final-offer__icons {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  opacity: 0.85;
}

.final-offer__icons .icon-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
}