/* =========================================================
   MÉTODO PREZZY — camada "fluida"
   Princípios de interface da Apple (WWDC "Designing Fluid
   Interfaces") traduzidos para a web: resposta imediata,
   molas criticamente amortecidas, materiais translúcidos,
   tipografia com tracking por tamanho e acessibilidade.
   ========================================================= */

:root{
  /* Mola criticamente amortecida (damping 1.0) em CSS linear().
     response 0.3s → 440ms  ·  response 0.45s → 660ms */
  --spring: linear(0, 0.0435, 0.1411, 0.259, 0.3782, 0.4888, 0.5862, 0.6691, 0.7381, 0.7944, 0.8397, 0.8757, 0.9041, 0.9264, 0.9437, 0.9571, 0.9674, 0.9753, 0.9813, 0.9859, 0.9894, 0.992, 0.994, 0.9955, 0.9967, 0.9975, 0.9981, 0.9986, 1);
  --spring-fast: 440ms;
  --spring-slow: 660ms;
  --press-scale: 0.97;
}
@supports not (transition-timing-function: linear(0, 1)){
  :root{ --spring: cubic-bezier(.2,.8,.25,1); }
}

/* ---------- 1. RESPOSTA: sem atrasos no toque ---------- */
html{ -webkit-tap-highlight-color: transparent; }
a, button, summary, label, .chip, .opcao, .quiz-option, .toggle button{ touch-action: manipulation; }

/* Feedback no momento do toque (pointer-down), não no fim */
.btn, .price-btn, .botao-cta, .btn-wa, .btn-form, .modal-submit, .loja,
.nav-wa, .burger, .carousel-arrow, .to-top, .nav-back, .quiz-option, .opcao,
.chip, .toggle button, .cookies-botoes button, .faq-item summary::after{
  transition-property: transform, background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--spring-fast);
  transition-timing-function: var(--spring);
}
.btn:active, .price-btn:active, .botao-cta:active, .btn-wa:active, .btn-form:active,
.modal-submit:active, .loja:active, .nav-wa:active, .burger:active, .carousel-arrow:active,
.to-top:active, .nav-back:active, .cookies-botoes button:active, .toggle button:active{
  transform: scale(var(--press-scale)) !important;
  transition-duration: 90ms;
  transition-timing-function: ease-out;
}
/* Escolhas grandes: afundam menos, porque são superfícies maiores */
.quiz-option:active, .opcao:active, .chip:active{
  transform: scale(0.985) !important;
  transition-duration: 90ms;
  transition-timing-function: ease-out;
}

/* Elevação ao passar o rato só em dispositivos com rato —
   no toque o :hover fica "preso" e parece um erro */
@media (hover: none){
  .feature-card:hover, .result-card:hover, .price-card:hover, .pack:hover,
  .trust-item:hover, .ebook-card:hover, .loja:hover, .btn-primary:hover{ transform: none; }
}
.feature-card, .result-card, .price-card, .pack, .trust-item, .ebook-card{
  transition-duration: var(--spring-slow) !important;
  transition-timing-function: var(--spring) !important;
}

/* ---------- 2. TIPOGRAFIA: tracking e entrelinha por tamanho ---------- */
h1, h2, h3{ font-optical-sizing: auto; text-wrap: balance; }
h1{ letter-spacing: -0.032em; line-height: 1.04; }
h2{ letter-spacing: -0.024em; line-height: 1.08; }
h3{ letter-spacing: -0.012em; line-height: 1.2; }
p, li{ text-wrap: pretty; }
.hero-lead, .section-sub, .sub, .intro{ letter-spacing: -0.003em; }
small, .dica, .modal-secure, .footer-disclaimer{ letter-spacing: 0.005em; }

/* ---------- 3. MATERIAIS: camada translúcida e borda de scroll ---------- */
header{
  border-bottom-color: transparent !important;
  background: rgba(250,246,242,0.72) !important;
  backdrop-filter: saturate(1.8) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.8) blur(20px) !important;
}
/* Em vez de uma linha dura, uma sombra suave que só aparece
   quando há conteúdo a passar por baixo */
header::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:14px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(36,21,29,0.07), rgba(36,21,29,0));
  opacity:0; transition: opacity var(--spring-slow) var(--spring);
}
header.scrolled::after{ opacity:1; }

.cookies{
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: saturate(1.8) blur(24px);
  -webkit-backdrop-filter: saturate(1.8) blur(24px);
  border-color: rgba(255,255,255,0.7) !important;
}
.hero-float{ backdrop-filter: saturate(1.8) blur(18px); -webkit-backdrop-filter: saturate(1.8) blur(18px); background: rgba(255,255,255,0.82) !important; }

/* ---------- 4. JANELA DO TESTE: material + folha no telemóvel ---------- */
.modal-overlay{ background: rgba(28,17,23,0.42) !important; }
.modal-overlay.open{ animation: none; }
.modal-box{ animation: none !important; will-change: transform, opacity; transform-origin: 50% 50%; }
.sheet-grabber{ display:none; }

@media (max-width: 640px){
  .modal-overlay{ align-items: flex-end !important; padding: 0 !important; }
  .modal-box{
    border-radius: 26px 26px 0 0 !important;
    max-width: none !important; width: 100%;
    max-height: 92vh !important; max-height: 92dvh !important;
    padding-top: 30px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }
  .sheet-grabber{
    display:block; position:absolute; top:0; left:0; right:0; height:28px; cursor:grab; touch-action:none;
  }
  .sheet-grabber::before{
    content:''; position:absolute; top:9px; left:50%; width:38px; height:5px; margin-left:-19px;
    border-radius:3px; background: rgba(36,21,29,0.18);
  }
}

/* Barras de progresso andam com a mesma mola */
.quiz-progress span i, .barra i{ transition: width var(--spring-slow) var(--spring) !important; }

/* ---------- 5. SELETOR DOS PACKS: indicador que desliza ---------- */
.toggle{ position: relative; isolation: isolate; }
.toggle .indicador{
  position:absolute; top:5px; bottom:5px; left:0; width:0; border-radius:100px; background: var(--ink);
  z-index:-1; will-change: transform, width;
}
.toggle.fluido button.on{ background: transparent !important; }

/* ---------- 6. FAQ: abre como um material, não aos saltos ---------- */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size: allow-keywords; }
  .faq-item::details-content{
    block-size: 0; overflow: hidden; opacity: 0;
    transition: block-size var(--spring-slow) var(--spring), opacity 300ms ease, content-visibility var(--spring-slow) allow-discrete;
  }
  .faq-item[open]::details-content{ block-size: auto; opacity: 1; }
}

/* ---------- 7. CARROSSEL: arrastar com o dedo ---------- */
@media (max-width: 900px){
  .carousel-track.arrastavel{ transition: none !important; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
  .carousel-track.arrastavel img{ -webkit-user-drag: none; pointer-events: none; }
  .carousel-track.a-arrastar{ cursor: grabbing; }
}

/* ---------- 8. REVELAR: mais contido, com mola ---------- */
.revelar{
  transform: translateY(14px) !important;
  transition: opacity var(--spring-slow) var(--spring), transform var(--spring-slow) var(--spring) !important;
}
.revelar.visivel{ transform: none !important; }

/* Menu móvel abre com a mesma mola */
.nav-links{ transition-timing-function: var(--spring) !important; }

/* ---------- 9. ACESSIBILIDADE ---------- */
/* Menos movimento: troca deslizes e molas por um fade curto —
   o feedback mantém-se, o movimento vestibular desaparece */
@media (prefers-reduced-motion: reduce){
  .revelar{ transform: none !important; transition: opacity 200ms ease !important; }
  .btn:active, .price-btn:active, .botao-cta:active, .btn-wa:active, .btn-form:active,
  .modal-submit:active, .loja:active, .quiz-option:active, .opcao:active, .chip:active,
  .toggle button:active{ transform: none !important; opacity: .75; }
  .pulse::after{ animation: none !important; }
  .faq-item::details-content{ transition: opacity 200ms ease, content-visibility 200ms allow-discrete !important; }
}
/* Menos transparência: materiais passam a sólidos */
@media (prefers-reduced-transparency: reduce){
  header{ background: var(--bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .cookies, .hero-float{ background: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal-overlay{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(28,17,23,0.6) !important; }
}
/* Mais contraste: texto secundário mais escuro e contornos definidos */
@media (prefers-contrast: more){
  :root{ --muted: #3f3138; --line: #b9a9a0; --line-strong: #8f7d74; }
  header{ background: var(--bg) !important; border-bottom: 1px solid var(--line-strong) !important; }
  .cookies, .hero-float{ background: #fff !important; border: 1px solid var(--line-strong) !important; }
}

/* Formulários por passos: a entrada é feita em JS, com direção */
main .passo.on{ animation: none !important; }

/* Títulos que recebem foco por programação (leitores de ecrã) não mostram contorno */
[tabindex="-1"]:focus{ outline: none; }