/* ===== LAYOUT BASE ===== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--dark  { background: var(--g-dark); color: var(--t-on-dark); }
.section--paper { background: var(--c-paper); }
.section--paper2{ background: var(--c-paper-2); }
.section--green { background: var(--c-teal-dark); color: var(--t-on-dark); }

/* ===== TIPOGRAFIA DE SECAO ===== */

.section-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.015em;
  text-align: center;
  margin-bottom: var(--s-3);
}
.section-lead {
  max-width: 62ch;
  margin: 0 auto var(--s-6);
  text-align: center;
  font-size: var(--fs-md);
  color: var(--t-on-light-soft);
}
.section--dark .section-lead,
.section--green .section-lead { color: var(--t-on-dark-soft); }

/* ===== BOTOES ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 58px;
  padding: var(--s-4) var(--s-7);
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
  background: var(--g-cta);
  box-shadow: var(--sh-cta);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn:hover  { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 32px rgba(0,155,144,.5); }
.btn:active { transform: translateY(0); }

.btn--gold  { background: var(--g-gold); box-shadow: var(--sh-gold); color: #3A2600; }
.btn--gold:hover { box-shadow: 0 14px 32px rgba(242,173,0,.52); }

.btn--block { display: flex; width: 100%; }

/* Pulso suave no CTA — 2s conforme especificacao */
.btn--pulse { animation: pulse var(--dur-pulse) var(--ease) infinite; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.btn--pulse:hover { animation-play-state: paused; }

/* Brilho horizontal atravessando o botao — -40% -> 120% em 6s */
.shine::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -40%;
  width: 34%;
  background: linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: shine var(--dur-shine) ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes shine {
  0%        { left: -40%; }
  55%, 100% { left: 120%; }
}

/* ===== BADGES / SELOS ===== */


/* ===== CARDS ===== */

.card {
  background: var(--c-surface);
  color: var(--t-on-light);   /* nunca herdar a cor da seção: o card tem fundo próprio */
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-md);
  border: 1px solid rgba(16,50,46,.06);
}
.section--dark .card {
  background: var(--c-ink-3);
  border-color: rgba(255,255,255,.08);
  box-shadow: none;
}


.card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  margin-bottom: var(--s-3);
}
.card__text { color: var(--t-on-light-soft); font-size: var(--fs-sm); }
.section--dark .card__text { color: var(--t-on-dark-soft); }

/* ===== GRIDS ===== */

.grid { display: grid; gap: var(--s-4); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ===== LISTA DE CHECKS ===== */

.checklist { display: grid; gap: var(--s-3); }
.checklist li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.checklist .tick {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-teal);
  display: grid; place-items: center;
  flex: none;
  margin-top: 2px;
}
.checklist .tick svg { width: 15px; height: 15px; stroke: #fff; }

/* ===== REVELACAO NO SCROLL (fade-in + slide-up) ===== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ===== FLUTUACAO DO PRODUTO =====
   Tres camadas em ciclos de duracao diferente, para o movimento
   nunca repetir exatamente igual:
     float   4s  — sobe e desce (duracao da especificacao)
     sway    9s  — inclina de leve
     breathe 7s  — respira, quase imperceptivel
   ================================================================ */

.float {
  animation: float var(--dur-float) ease-in-out infinite;
  transform-origin: 50% 88%;   /* pivo na base dos frascos */
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

/* ===== MARCADOR DE CONTEUDO PENDENTE =====
   Todo bloco cujo texto so existe no HTML original recebe .pending.
   Para localizar tudo que falta:  grep -rn "data-pending" index.html
   ================================================================ */

.pending {
  border: 2px dashed var(--c-alert);
  background: rgba(209,74,43,.06);
  border-radius: var(--r-md);
  padding: var(--s-4);
  color: var(--c-alert-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-align: left;
}
.pending::before {
  content: "[VALIDAR ANTES DA PUBLICAÇÃO] ";
  font-weight: var(--fw-black);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  display: block;
  margin-bottom: var(--s-1);
}
.section--dark .pending { background: rgba(209,74,43,.12); color: #FFB3AB; }

/* ===== PLACEHOLDER DE IMAGEM ===== */
.ph {
  background: repeating-linear-gradient(45deg, rgba(16,50,46,.05) 0 12px, rgba(16,50,46,.09) 12px 24px);
  border: 1px dashed rgba(16,50,46,.25);
  border-radius: var(--r-md);
}
.section--dark .ph { border-color: rgba(255,255,255,.22); }

/* =========================================================
   TARJA — dispositivo do rótulo do frasco
   No rótulo, as informações vêm numa pílula âmbar com um
   rótulo curto à esquerda (COM / CONTÉM) e o conteúdo numa
   caixa clara à direita. Reaproveitado na página para os
   destaques, mantendo a linguagem da embalagem.
   ========================================================= */
.tarja {
  display: inline-flex;
  align-items: stretch;
  background: var(--c-amber);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
  box-shadow: 0 3px 10px rgba(197, 139, 0, .34);
  max-width: 100%;
}
.tarja__label {
  display: grid;
  place-items: center;
  padding-inline: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: .06em;
  color: #FFFFFF;
  text-transform: uppercase;
  white-space: nowrap;
}
.tarja__body {
  background: #F4FBEC;
  border-radius: var(--r-pill);
  padding: 6px var(--s-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-teal-dark);
  line-height: 1.3;
}

/* =========================================================
   AVISO LEGAL — depoimentos e resultados individuais
   Discreto, mas legível: precisa estar visível junto da
   alegação, não escondido no rodapé.
   ========================================================= */
.disclaimer {
  max-width: 68ch;
  margin: var(--s-5) auto 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--t-on-light-soft);
  text-align: center;
}
.section--dark .disclaimer,
.section--green .disclaimer { color: var(--t-on-dark-soft); }

/* =========================================================
   INTERAÇÃO DE MOUSE (só onde existe cursor)
   @media (hover: hover) evita que o celular fique com o
   estado de hover "grudado" depois do toque.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .card,
  .usage-card,
  .testimonial,
  .compo__item {
    transition: transform var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
  }
  .card:hover,
  .usage-card:hover,
  .testimonial:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-lg);
  }

  /* fotos dos benefícios e dos ingredientes ganham vida no hover */
  .benefit__photo,
  .compo__video,
  .results__img,
  .testimonial__photo {
    transition: transform var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
  }
  .card:hover .benefit__photo,
  .compo__item:hover .compo__video { transform: scale(1.03); }
  .results__img:hover { transform: scale(1.02); }
  .testimonial:hover .testimonial__photo { transform: scale(1.05); }

  /* itens da lista deslizam de leve */
  .checklist li { transition: transform var(--dur-fast) var(--ease); }
  .checklist li:hover { transform: translateX(4px); }

  /* links do rodapé */
  .footer__links a { transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .footer__links a:hover { transform: translateX(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .usage-card:hover, .testimonial:hover,
  .checklist li:hover, .footer__links a:hover { transform: none; }
}