/* ============================================================
   JE PEUX / VITACÉ — Base: reset, tipografia, primitivos, motion
   Bebas Neue (títulos) · Lato (corpo) · Antonio (logo/display)
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html { scroll-padding-top: calc(var(--header-h) + var(--tabnav-h) + 16px); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--fw-regular);
  line-height: 0.94;
  letter-spacing: var(--tracking-head);
  margin: 0;
  text-transform: uppercase;
}
p { margin: 0; }

/* ---- Eyebrow / tagline (Lato espacejado, assinatura da marca) ---- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-subdued);
}
.eyebrow--accent { color: var(--je-purple); }

/* ---- Layout primitivos ---- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 920px; }
.section { padding-block: var(--section-pad); }
.lead { font-size: var(--fs-lg); color: var(--color-subdued); max-width: var(--maxw-text); line-height: 1.6; }

.section-head { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head h2 { font-size: var(--fs-2xl); }

/* ---- Botões (Bebas caps, roxo) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  height: 54px; padding-inline: 2rem;
  font-family: var(--font-head); font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1.5px solid var(--je-purple); border-radius: var(--radius-sm);
  background: var(--je-purple); color: var(--je-white);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast);
}
.btn:hover { background: var(--je-purple-deep); border-color: var(--je-purple-deep); }
.btn--ghost { background: transparent; color: var(--je-purple); }
.btn--ghost:hover { background: var(--je-purple); color: var(--je-white); }
.btn--block { width: 100%; }
.btn--lg { height: 60px; font-size: 1.2rem; }
.btn--yellow { background: var(--je-yellow); border-color: var(--je-yellow); color: var(--je-purple-ink); }
.btn--yellow:hover { background: #F2CE00; border-color: #F2CE00; }

.link-arrow {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.16em;
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--je-purple);
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
  transition: gap var(--dur-fast) var(--ease);
}
.link-arrow:hover { gap: 0.9rem; }
.link-arrow::after { content: "\2192"; }

/* ---- Chip / selo ---- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--je-purple-tint); color: var(--je-purple);
  padding: 0.5rem 0.9rem; border-radius: var(--radius-pill);
}
.seal {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--je-purple-ink);
}
.seal::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--je-lime); }

/* ---- Badge ---- */
.badge {
  font-family: var(--font-head); font-size: 0.85rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem 0.3rem; border-radius: var(--radius-sm);
  background: var(--je-purple); color: var(--je-white);
}
.badge--yellow { background: var(--je-yellow); color: var(--je-purple-ink); }
.badge--soft { background: var(--je-white); color: var(--je-purple); border: 1px solid var(--je-purple-tint2); }

/* ---- Placeholders de mídia (stand-in de foto/vídeo) ----
   .ph neutro (marca-mãe) · --purple Vitacé · --clay Clássica · escuros p/ heroes */
.ph { position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 18% 12%, rgba(0,0,0,0.05), transparent 55%),
    linear-gradient(140deg, #EFEDE8 0%, #E2DFD8 100%);
}
.ph--purple {
  background:
    radial-gradient(110% 110% at 18% 8%, rgba(168,217,66,0.30), transparent 52%),
    radial-gradient(120% 120% at 92% 96%, rgba(245,210,59,0.22), transparent 55%),
    linear-gradient(150deg, #7A4FB5 0%, #3A2168 60%, #2E1A52 100%);
  color: var(--je-white);
}
.ph--clay {
  background:
    radial-gradient(110% 110% at 80% 10%, rgba(255,255,255,0.35), transparent 55%),
    linear-gradient(150deg, #E8D0C2 0%, #D9B0A8 55%, #B5704F 100%);
  color: #3A2A20;
}
.ph--clay-deep { background: linear-gradient(155deg, #7A4C36 0%, #3A2A20 60%, #221710 100%); color: var(--je-white); }
.ph--dark { background: linear-gradient(155deg, #3A2D5E 0%, #211A36 100%); color: var(--je-white); }
.ph--noir { background: linear-gradient(155deg, #221E18 0%, #0C0A07 100%); color: var(--je-white); }
.ph--yellow { background: linear-gradient(150deg, #FBD926 0%, #F2B705 100%); color: #2E1A52; }
.ph--lime { background: linear-gradient(150deg, #C8E85A 0%, #A8D942 60%, #7DB315 100%); color: #1A2A00; }
.ph__label {
  position: absolute; inset: auto auto 12px 14px;
  font-family: var(--font-body); font-size: 0.62rem; font-weight: var(--fw-bold);
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(46,36,71,0.5);
  background: rgba(255,255,255,0.7); padding: 3px 7px; border-radius: 3px; backdrop-filter: blur(4px);
}
.ph--purple .ph__label, .ph--dark .ph__label { color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.22); }

/* ---- Mídia de produto: pack shot de estúdio inteiro sobre painel claro casado ---- */
.pmedia { position: relative; display: block; overflow: hidden; background: #EEEEF1; }
.pmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease); z-index: 1; }
.pmedia--lime, .pmedia--soft { background: #EEEEF1; }
.pmedia--warm { background: #F3ECE4; }
/* respiro de vitrine: pack-shots não encostam nas bordas do painel */
.pcard__media img { inset: 7% 8%; width: 84%; height: 86%; }
.pcard:hover .pmedia img, .ic-chapter__media:hover img { transform: scale(1.04); }
.imgcover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.float { animation: floaty 6.5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---- Efeitos extra ---- */
.hover-rise { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hover-rise:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.reveal--scale { opacity: 0; transform: scale(0.94); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal--scale.is-in { opacity: 1; transform: none; }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

.rule { height: 1px; background: var(--color-line); border: 0; margin: 0; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--je-purple); outline-offset: 3px; border-radius: 2px; }
/* anel de foco visível sobre superfícies escuras (header transparente, heroes, footer) */
.header.is-over-hero :focus-visible, .ic-hero :focus-visible, .hero :focus-visible, .editorial :focus-visible, .marca-hero :focus-visible, .footer :focus-visible, .ic-science :focus-visible, .cat-banner :focus-visible, .lcard:focus-visible { outline-color: var(--je-lime); outline-offset: 4px; }
/* inputs também mostram foco de teclado (sem depender só da borda) */
.co-input:focus-visible, .search-panel__input:focus-visible { outline: 2px solid var(--je-purple); outline-offset: 2px; }