/* =========================================================
   Efeitos subtis · Bueno Salus
   Partilhado pelas três páginas. Nada aqui muda cores ou fontes:
   só movimento, ritmo e pequenos detalhes de acabamento.
   ========================================================= */

/* Seleção de texto na cor da marca */
::selection { background: #7e1c17; color: #f7f1ea; }

/* ---------- Revelação suave ao rolar ----------
   Só se esconde quando o JavaScript está ativo (classe .js no <html>),
   por isso sem JS o conteúdo aparece normalmente. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="esq"]  { transform: translateX(-18px); }
html.js [data-reveal].is-in  { opacity: 1; transform: none; }

/* ---------- Menu: fica mais compacto e ganha sombra ao rolar ---------- */
.menu, .menu__inner { transition: box-shadow .4s ease, padding .4s ease; }
.menu.is-scrolled { box-shadow: 0 10px 30px -14px rgba(0,0,0,.55); }
@media (min-width: 861px) {
  .menu__nav a { position: relative; }
  .menu__nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .menu__nav a:hover::after, .menu__nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
  .menu__nav a:hover { opacity: 1; }
}

/* ---------- Banner: luz que acompanha o cursor (muito discreta) ---------- */
.luz-cursor {
  position: absolute; z-index: 0; pointer-events: none;
  width: 640px; height: 640px; left: var(--mx, 50%); top: var(--my, 40%);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255,253,249,.55), rgba(255,253,249,0));
  opacity: 0; transition: opacity .8s ease;
}
.tem-luz:hover .luz-cursor { opacity: 1; }

/* Foto e mockups com um leve desfasamento ao rolar (profundidade) */
.hero__portrait, .mockup--small, .mockup--main { will-change: transform; }
.hero__portrait  { transform: translate3d(0, var(--py, 0px), 0); }
.mockup--main    { transform: translate3d(0, var(--pm, 0px), 0); }
.mockup--small   { transform: translate3d(0, var(--ps, 0px), 0); }

/* ---------- Cartões: elevação ao passar o rato ---------- */
.etapa, .plano, .stat, .pilar__icon {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.etapa:hover, .plano:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(30,30,30,.45); }
.stat:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -26px rgba(0,0,0,.6); }
.pilar:hover .pilar__icon { transform: translateY(-3px) rotate(-4deg); }

/* ---------- Link "Quero este formato" nos planos ---------- */
.plano__cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--vinho);
  position: relative; padding-bottom: 4px;
}
.plano--dark .plano__cta { color: var(--creme); }
.plano__cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(.18); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.plano__cta:hover::after, .plano:hover .plano__cta::after { transform: scaleX(1); }
.plano__cta span { transition: transform .35s ease; }
.plano__cta:hover span { transform: translateX(4px); }

/* ---------- Microtexto de confiança junto aos botões ---------- */
.micro {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 15px; letter-spacing: .02em; opacity: .75;
}
.micro::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #4f9a6a; box-shadow: 0 0 0 0 rgba(79,154,106,.5);
  animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(79,154,106,.45); } 80%,100% { box-shadow: 0 0 0 8px rgba(79,154,106,0); } }

/* ---------- FAQ: abertura suave ---------- */
.faq details { transition: background .3s ease, box-shadow .3s ease; }
.faq details:hover { box-shadow: 0 12px 30px -24px rgba(30,30,30,.5); }
.faq details[open] { background: var(--creme); }
.faq details > p { overflow: hidden; }
.faq summary span:first-child { transition: transform .35s ease; }
.faq summary:hover span:first-child { transform: translateX(4px); }

/* ---------- Chamada final ---------- */
.cta-final { padding: 40px 0 120px; text-align: center; }
.cta-final .container { max-width: calc(860px + var(--gutter) * 2); }
.cta-final h2 { font-weight: 600; font-size: clamp(36px, 4vw, 56px); line-height: 1.15; text-wrap: balance; }
.cta-final h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 600; color: var(--vinho); }
.cta-final p.text-24 { margin: 22px auto 0; max-width: 620px; font-weight: 300; letter-spacing: .03em; }
.cta-final .btn { margin-top: 36px; }
.cta-final .micro { justify-content: center; }
.cta-final .note { margin-top: 18px; color: var(--vinho); font-size: 18px; transform: rotate(-2deg); display: inline-block; }


/* ---------- Barra de contacto fixa no telemóvel ---------- */
.barra-cta { display: none; }
@media (max-width: 860px) {
  .barra-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 8px 8px 8px 18px; border-radius: 999px;
    background: rgba(34,40,49,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--creme); box-shadow: 0 14px 34px -12px rgba(0,0,0,.5);
    transform: translateY(140%); transition: transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .barra-cta.is-on { transform: none; }
  .barra-cta p { font-size: 14px; line-height: 1.25; }
  .barra-cta p small { display: block; opacity: .7; font-size: 12px; }
  .barra-cta a {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: 999px; text-decoration: none;
    background: linear-gradient(135deg, #a3362d, var(--vinho) 55%, #5c140f);
    color: var(--creme); font-weight: 600; font-size: 15px;
  }
}

/* ---------- Quem prefere menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__portrait, .mockup--main, .mockup--small { transform: none; }
  .luz-cursor, .micro::before { display: none; animation: none; }
  .etapa, .plano, .stat, .pilar__icon, .barra-cta, .menu, .menu__inner { transition: none; }
}

/* ---------- Coração desenhado à mão na assinatura ---------- */
.coracao {
  display: inline-block; vertical-align: -0.35em; margin-left: 4px;
  transform: rotate(-10deg);
  overflow: visible;
}
.coracao path {
  fill: none; stroke: #c9665d; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
html.js .coracao path { stroke-dasharray: 120; stroke-dashoffset: 120; }
html.js .coracao.is-drawn path { animation: desenha 1.8s cubic-bezier(.45,.05,.3,1) .5s forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
.coracao.is-drawn { animation: bate 1.2s ease 2.4s 1; transform-origin: 50% 60%; }
@keyframes bate { 0%,100% { transform: rotate(-10deg) scale(1); } 30% { transform: rotate(-10deg) scale(1.18); } 55% { transform: rotate(-10deg) scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  html.js .coracao path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .coracao.is-drawn { animation: none; }
}

/* ---------- Brilho que acompanha o rato em toda a página ---------- */
.brilho-cursor {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,250,240,.55), rgba(255,250,240,.18) 45%, rgba(255,250,240,0));
  mix-blend-mode: soft-light;
  opacity: 0; transition: opacity .6s ease;
  will-change: transform;
}
.brilho-cursor::after {                         /* pequeno ponto de luz no centro */
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255,248,236,.9); box-shadow: 0 0 12px 4px rgba(255,240,220,.6);
  mix-blend-mode: normal;
}
.brilho-cursor.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .brilho-cursor { display: none; } }

/* =========================================================
   Rodapé igual em todas as páginas
   Ritmo único: o mesmo espaço (--respiro) entre o conteúdo e os botões,
   entre os botões e o copyright, e entre o copyright e o menu de baixo.
   ========================================================= */
:root { --respiro: 40px; }
.rodape {
  display: flex; flex-direction: column; align-items: center; gap: var(--respiro);
  padding: var(--respiro) 20px var(--respiro);
  text-align: center; border: 0;
}
.redes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rede {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px 0 16px; border-radius: 999px;
  border: 1.5px solid currentColor; text-decoration: none; color: inherit;
  font-family: var(--f-sans, "Urbanist", system-ui, sans-serif); font-weight: 700; font-size: 15px; letter-spacing: .08em;
  transition: background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.rede svg { width: 20px; height: 20px; flex: none; }
.rede:hover { transform: translateY(-2px); }
.rede:focus-visible { outline: 2px solid #7e1c17; outline-offset: 3px; }
.rodape__copy { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.4; opacity: .75; }
.rodape__copy p { margin: 0; }

/* rodapé claro (página de links) */
body:not(:has(.menu)) .rodape { color: #1e1e1e; }
body:not(:has(.menu)) .rede:hover { background: #1e1e1e; color: #f7f1ea; border-color: #1e1e1e; }
/* rodapé escuro (páginas com menu) */
.rodape:has(~ .menu--doca), body:has(.menu) .rodape { color: #eeeae4; }
body:has(.menu) .rede { border-color: rgba(238,234,228,.55); }
body:has(.menu) .rede:hover { background: #eeeae4; color: #222831; border-color: #eeeae4; }
/* nas páginas com menu de baixo: copyright → menu também com --respiro */
body:has(.menu) .rodape { padding-bottom: calc(var(--respiro) + 68px + 16px); }
@media (max-width: 860px) {
  :root { --respiro: 32px; }
  body:has(.menu) .rodape { padding-bottom: calc(var(--respiro) + 64px + 10px + env(safe-area-inset-bottom)); }
  .rede { height: 44px; font-size: 14px; }
  .rodape__copy { font-size: 13px; }
}
/* página de sites (encolhe em proporção): rodapé com medidas reais, como o menu */
.rodape { --r: calc(var(--respiro) * var(--zinv, 1)); gap: var(--r); padding-top: var(--r); padding-bottom: var(--r); }
.rodape .redes, .rodape__copy { zoom: var(--zinv, 1); }
body:has(.menu) .rodape { padding-bottom: calc((var(--respiro) + 84px) * var(--zinv, 1)); }
@media (max-width: 860px) { body:has(.menu) .rodape { padding-bottom: calc(var(--respiro) + 74px + env(safe-area-inset-bottom)); } }
.cta-final { padding-bottom: 96px; }
.rodape__copy { font-family: "Manrope", system-ui, sans-serif; }