/* ==========================================================================
   Protocolo GPS do Emagrecimento — CSS custom
   Identidade terrosa/delicada da Bruna. Só o que o Tailwind CDN não cobre.
   ========================================================================== */

/* ----------  FONTES DA MARCA (self-hosted, woff2)  -----------------------
   Títulos: Montserrat (variável 100–900) · Corpo: Fibon Sans · Logo: Ortisan */
@font-face { font-family:'Montserrat'; src:url('../fonts/montserrat-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Fibon Sans'; src:url('../fonts/fibon-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
/* Ortisan Signature — só na logo/assinatura */
@font-face { font-family:'Ortisan Signature'; src:url('../fonts/ortisan.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* ----------  BASE  ------------------------------------------------------- */
/* overflow-x:clip evita qualquer rolagem horizontal acidental no mobile.
   scroll-padding-top compensa o header fixo ao pular para âncoras (#faq etc). */
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:5rem; }
body { overflow-x:clip; }

/* ----------  ÍCONES SVG (sprite <use>)  --------------------------------- */
.icon {
  display:inline-block; width:1.25em; height:1.25em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-0.18em;
}

/* ----------  HEADER: transparente na hero, sólido ao rolar  ------------- */
.site-header { background:transparent; border-bottom:1px solid transparent; }
.site-logo { color:#F4EEE5; }                    /* creme sobre a hero escura */
.site-cta  { background:#F4EEE5; color:#50413B; }
.site-cta:hover { background:#ffffff; }
.site-header.is-scrolled {
  background:rgba(244,238,229,0.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom-color:rgba(80,65,59,0.10);
}
.site-header.is-scrolled .site-logo { color:#50413B; }
.site-header.is-scrolled .site-cta  { background:#50413B; color:#F4EEE5; }
.site-header.is-scrolled .site-cta:hover { background:#3A2E29; }
body {
  font-family:'Fibon Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Títulos em Montserrat (peso forte + tracking ligeiramente negativo) */
.font-display { font-family:'Montserrat', ui-sans-serif, sans-serif; font-weight:700; letter-spacing:-0.015em; }
/* Botões e rótulos fortes em Montserrat (Fibon só tem peso 400) */
.btn-cta, .btn-cta * { font-family:'Montserrat', ui-sans-serif, sans-serif; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .marquee-track { animation:none !important; }
}

/* ----------  GRÃO / TEXTURA sutil (premium, terroso)  -------------------- */
.grain::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:0.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* Manchas quentes suaves de "mapa/terra" para seções claras */
.map-texture {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(184,122,94,0.06) 0, transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(80,65,59,0.05) 0, transparent 45%);
}

/* ----------  HERO: mosaico de fotos rodando  ---------------------------- */
.hero-mosaic {
  position:absolute; inset:0; overflow:hidden; z-index:0;
  display:flex; flex-direction:column; gap:0.5rem; padding:0.5rem 0;
  filter:blur(1px) brightness(0.94) saturate(0.94);
}
.marquee-track {
  display:flex; gap:0.5rem; width:max-content;
  flex:1 1 0; min-height:0; align-items:stretch;
  will-change:transform;
}
.marquee-track img {
  height:100%; width:auto; border-radius:0.5rem;
  object-fit:cover; display:block; user-select:none;
}
.marquee-a  { animation:marquee-left 68s linear infinite; }
.marquee-b  { animation:marquee-right 84s linear infinite; }
.marquee-c  { animation:marquee-left 96s linear infinite; }
@keyframes marquee-left  { from { transform:translateX(0); }        to { transform:translateX(-50%); } }
@keyframes marquee-right { from { transform:translateX(-50%); }      to { transform:translateX(0); } }
/* Véu escuro quente por cima do mosaico → texto legível e clima "editorial" */
.hero-veil {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(58,46,41,0.82) 0%, rgba(58,46,41,0.62) 45%, rgba(58,46,41,0.86) 100%),
    radial-gradient(circle at 50% 40%, rgba(80,65,59,0.25) 0, rgba(58,46,41,0.7) 75%);
}

/* Véu leve para o CTA final: deixa a foto de fundo bem visível, mantendo
   o texto creme legível (mais escuro só nas bordas superior/inferior). */
.cta-veil {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(58,46,41,0.55) 0%, rgba(58,46,41,0.28) 45%, rgba(58,46,41,0.62) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(58,46,41,0.10) 0%, rgba(58,46,41,0.45) 100%);
}

/* ----------  ANIMAÇÕES DE SCROLL  --------------------------------------- */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.reveal.is-visible { opacity:1; transform:none; }
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.40s}

/* ----------  "COMO FUNCIONA": numeral editorial + conector  ------------- */
.step-num {
  font-family:'Montserrat', ui-sans-serif, sans-serif;
  font-weight:700; line-height:1; letter-spacing:-0.01em;
}
.step-connector { position:relative; }
.route-step:not(:last-child) .step-connector::after {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  top:2.6rem; bottom:-2.2rem; width:2px;
  background-image:linear-gradient(to bottom, #B87A5E 45%, transparent 0);
  background-size:2px 10px; background-repeat:repeat-y; opacity:.5;
}

/* ----------  Placeholder visual (assets ainda inexistentes)  ------------- */
.asset-placeholder {
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:2px dashed #B87A5E; color:#9C6249;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 12px,
      rgba(184,122,94,0.05) 12px, rgba(184,122,94,0.05) 24px), #FBF7F0;
  letter-spacing:0.02em;
}

/* ----------  Formulário: estado de erro  -------------------------------- */
.form-input.is-invalid {
  border-color:#B87A5E !important;
  background:#fff;
  box-shadow:0 0 0 2px rgba(184,122,94,0.18);
}

/* ----------  Depoimentos: rolagem horizontal estilo WhatsApp  ----------- */
.depo-scroll {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(80,65,59,0.25) transparent;
}
.depo-scroll::-webkit-scrollbar { height: 8px; }
.depo-scroll::-webkit-scrollbar-track { background: transparent; }
.depo-scroll::-webkit-scrollbar-thumb { background: rgba(80,65,59,0.2); border-radius: 999px; }
.depo-bubble { scroll-snap-align: start; }
.depo-msg {
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(80,65,59,0.18) transparent;
}
.depo-msg::-webkit-scrollbar { width: 5px; }
.depo-msg::-webkit-scrollbar-thumb { background: rgba(80,65,59,0.16); border-radius: 999px; }

/* ----------  FAQ accordion  --------------------------------------------- */
/* display:none garante recolhido por padrão em qualquer engine (o truque de
   max-height falha sob o preflight do Tailwind). Fade-in sutil ao abrir. */
.faq-answer { display:none; }
.faq-item.is-open .faq-answer { display:block; animation:faqIn .28s ease both; }
@keyframes faqIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.faq-item.is-open .faq-icon { transform:rotate(45deg); }

/* Feedback visual ao copiar o código Pix */
.btn-cta.is-copied { background:#4E7D52 !important; }

/* ----------  CTA sticky mobile  ----------------------------------------- */
.sticky-cta { transform:translateY(120%); transition:transform .4s cubic-bezier(.22,1,.36,1); }
.sticky-cta.is-visible { transform:translateY(0); }

/* ----------  Botão CTA: brilho sutil no hover  -------------------------- */
.btn-cta {
  position:relative; overflow:hidden;
  white-space:normal; text-align:center; max-width:100%;
}
.btn-cta::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.btn-cta:hover::after { transform:translateX(120%); }

/* Divisor fino com traço (estilo editorial "— por Bruna —") */
.rule-line { display:inline-flex; align-items:center; gap:0.9rem; }
.rule-line::before, .rule-line::after {
  content:''; height:1px; width:2.2rem; background:currentColor; opacity:.5;
}