/* NirvanaMED — camada premium (motion design) sobre style.css.
   Princípios: movimento com intenção (guiar o olhar até "Marcar consulta"), calma em vez de espetáculo,
   nada essencial depende de animação, e quem pede menos movimento no sistema recebe a versão estática. */

:root {
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-mola: cubic-bezier(.34, 1.56, .64, 1);
  --sombra-1: 0 1px 2px rgba(14, 58, 110, .06), 0 2px 6px rgba(14, 58, 110, .05);
  --sombra-2: 0 2px 4px rgba(14, 58, 110, .05), 0 8px 18px rgba(14, 58, 110, .07), 0 22px 44px -12px rgba(14, 58, 110, .14);
  --sombra-3: 0 4px 8px rgba(14, 58, 110, .06), 0 18px 36px rgba(14, 58, 110, .10), 0 44px 80px -24px rgba(14, 58, 110, .28);
  --vidro: rgba(255, 255, 255, .62);
  --vidro-borda: rgba(255, 255, 255, .75);
  --gradiente: linear-gradient(120deg, #0e3a6e 0%, #1a5ca7 45%, #49b7e9 100%);
}

/* Transições entre páginas (Chrome, Edge e Safari recentes; os outros abrem a página normalmente) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms var(--ease) both sair; }
::view-transition-new(root) { animation: 420ms var(--ease) both entrar; }
@keyframes sair { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

body { background: #fff; }
::selection { background: #cfe9fb; color: var(--azul-escuro); }

/* ---------- Barra de progresso de leitura e cabeçalho de vidro ---------- */
.progresso { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--ceu), var(--azul), var(--dourado)); pointer-events: none; }
.topo { background: rgba(255, 255, 255, .72); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: transparent; transition: box-shadow .4s var(--ease), background .4s var(--ease); }
.topo.compacto { background: rgba(255, 255, 255, .86); box-shadow: 0 1px 0 rgba(14, 58, 110, .06), 0 10px 30px -18px rgba(14, 58, 110, .35); }
.topo .c { transition: min-height .4s var(--ease); }
.topo.compacto .c { min-height: 60px; }
.menu-largo .topo nav a { position: relative; }
.menu-largo .topo nav a::after { content: ""; position: absolute; left: .2rem; right: .2rem; bottom: .1rem; height: 2px; border-radius: 2px;
  background: var(--azul); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease); }
.menu-largo .topo nav a:hover::after, .menu-largo .topo nav a[aria-current]::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- Botões: luz que atravessa, profundidade e íman ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease-mola), box-shadow .4s var(--ease), background .3s; will-change: transform; }
.btn--p { background: var(--gradiente); background-size: 160% 100%; background-position: 0 0; box-shadow: 0 6px 18px -6px rgba(26, 92, 167, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--p:hover { background: var(--gradiente); background-size: 160% 100%; background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(26, 92, 167, .65), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn--p::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; z-index: -1; transform: skewX(-20deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transition: transform .9s var(--ease); }
.btn--p:hover::after { transform: skewX(-20deg) translateX(420%); }
.btn--l { background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1.5px var(--linha), var(--sombra-1); }
.btn--l:hover { box-shadow: inset 0 0 0 1.5px #cddbe9, var(--sombra-2); }
.btn--w { box-shadow: 0 6px 18px -8px rgba(37, 211, 102, .7); }
.magnetico { transform: translate3d(var(--mx, 0), var(--my, 0), 0); }

/* ---------- Hero: aurora, objeto 3D e fotografias em profundidade ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(1200px 600px at 85% 20%, #e5f4fd 0%, transparent 60%), linear-gradient(180deg, #f3faff, #fff 80%); }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.hero::before { width: 520px; height: 520px; left: -160px; top: -180px; background: radial-gradient(circle, #cfeafb, transparent 70%); animation: deriva 18s var(--ease) infinite alternate; }
.hero::after { width: 420px; height: 420px; right: 8%; bottom: -220px; background: radial-gradient(circle, #ffe9b0, transparent 70%); animation: deriva 22s var(--ease) infinite alternate-reverse; }
@keyframes deriva { to { transform: translate3d(60px, 40px, 0) scale(1.12); } }
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); letter-spacing: -.02em; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .w > span { display: inline-block; }
.provas { gap: .5rem; }
.provas li { padding: .38rem .9rem; border-radius: 999px; font-size: .9rem; color: var(--azul-escuro); background: var(--vidro); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra-1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Fotografias da equipa: grelha desencontrada, flutuação lenta e subida suave ao passar o rato */
.palco { max-width: 440px; margin: 0 auto; width: 100%; }
.palco .hero__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: none; margin: 0; }
.palco .hero__fotos .foto-link { display: block; animation: flutua 7s ease-in-out infinite; }
.palco .hero__fotos .foto-link:nth-child(even) { margin-top: 28px; }
.palco .hero__fotos .foto-link:nth-child(2) { animation-delay: -2.5s; }
.palco .hero__fotos .foto-link:nth-child(3) { animation-delay: -4s; }
.palco .hero__fotos .foto-link:nth-child(4) { animation-delay: -1.2s; }
.palco .hero__fotos img { border-radius: 22px; border: 4px solid #fff; box-shadow: var(--sombra-2); transform: none;
  transition: transform .7s var(--ease), box-shadow .5s var(--ease); }
.palco .hero__fotos .foto-link:hover img { transform: translateY(-6px) scale(1.02); box-shadow: var(--sombra-3); }
.flutua { animation: flutua 7s ease-in-out infinite; }
@keyframes flutua { 50% { translate: 0 -8px; } }

/* ---------- Fita contínua de especialidades ---------- */
.fita { display: flex; overflow: hidden; gap: 0; padding: .9rem 0; background: var(--azul-escuro);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fita ul { display: flex; flex: none; gap: 2.6rem; padding: 0 1.3rem; margin: 0; list-style: none; animation: fita 38s linear infinite; }
.fita li { font: 1.15rem/1 var(--titulos); color: #e3eefa; white-space: nowrap; display: flex; align-items: center; gap: 2.6rem; }
.fita li::after { content: "✦"; color: var(--dourado); font-size: .8rem; }
.fita:hover ul { animation-play-state: paused; }
@keyframes fita { to { transform: translateX(-100%); } }

/* ---------- Faixa de credenciais ---------- */
.faixa { background: linear-gradient(180deg, #fff, var(--fundo)); border: 0; }
.faixa strong { background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Cartões em 3D: inclinação, brilho e camadas ---------- */
.card, .depo, .passos li, .profissional, .form, .faq details { box-shadow: var(--sombra-1); border-color: rgba(14, 58, 110, .07); }
.card, .depo, .passos li { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transition: transform .6s var(--ease), box-shadow .5s var(--ease); }
.card:hover, .depo:hover, .passos li:hover { --ty: -6px; box-shadow: var(--sombra-3); }
.inclina { transition: transform .12s linear, box-shadow .5s var(--ease); }
.card::before, .depo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), transparent 45%); mix-blend-mode: soft-light; }
.card:hover::before, .depo:hover::before { opacity: 1; }
.depo { position: relative; }
.card__ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font-size: 1.5rem;
  background: linear-gradient(145deg, #fff, #eaf5fd); box-shadow: var(--sombra-2), inset 0 1px 0 #fff; transform: translateZ(40px); transition: transform .6s var(--ease-mola); }
.card:hover .card__ico { transform: translateZ(60px) rotate(-6deg) scale(1.06); }
.card h3, .card p, .card__mais { transform: translateZ(18px); }
.card__mais { display: inline-block; transition: transform .5s var(--ease), letter-spacing .5s var(--ease); }
.card:hover .card__mais { letter-spacing: .02em; }
.passos li::before { background: var(--gradiente); box-shadow: 0 8px 18px -6px rgba(26, 92, 167, .6); transform: translateZ(30px); }

/* ---------- Pessoas: retratos que se revelam ---------- */
.pessoa img, .perfil-foto img { box-shadow: var(--sombra-2); transition: transform .8s var(--ease), box-shadow .6s, clip-path 1.2s var(--ease), filter 1.2s var(--ease); }
.pessoa .foto-link:hover img { transform: scale(1.03); box-shadow: var(--sombra-3); }
.pessoa .foto-link { overflow: hidden; }  /* no hero não: overflow achataria o 3D */

/* ---------- Testemunhos e FAQ ---------- */
.s--cinza { background: radial-gradient(900px 400px at 10% 0%, #eef8fe, transparent 60%), var(--fundo); }
.depo blockquote::before { background: linear-gradient(180deg, var(--dourado), #f5d36b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq details { border-radius: 16px; transition: box-shadow .4s var(--ease), background .4s; }
.faq details[open] { box-shadow: var(--sombra-2); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
:root { interpolate-size: allow-keywords; }

/* ---------- Formulário ---------- */
.form { box-shadow: var(--sombra-3); }
.opcao span { transition: border-color .25s, background .25s, transform .4s var(--ease-mola), box-shadow .3s; }
.opcao span:hover { transform: translateY(-2px); box-shadow: var(--sombra-1); }
.opcao input:checked + span { box-shadow: 0 0 0 4px rgba(26, 92, 167, .12); }
.form__progresso span { transition: background .5s var(--ease); }

/* ---------- Chamada final com luz em movimento ---------- */
.cta-final { position: relative; overflow: hidden; isolation: isolate; background: #0b2f5a; }
.cta-final::before { content: ""; position: absolute; inset: -50%; z-index: -1; animation: gira 24s linear infinite;
  background: conic-gradient(from 0deg at 50% 50%, #0b2f5a, #1a5ca7, #49b7e9, #0b2f5a, #1a5ca7, #0b2f5a); filter: blur(70px); opacity: .55; }
@keyframes gira { to { transform: rotate(1turn); } }

/* ---------- Revelação ao scroll (só quando o JavaScript confirma que pode animar) ---------- */
.mov [data-r] { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px);
  transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.mov [data-r].on { opacity: 1; transform: none; filter: none; }
.mov .card[data-r].on, .mov .depo[data-r].on, .mov .passos li[data-r].on { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
.mov .hero h1 .w > span { transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + 120ms); }
.mov .hero.pronto h1 .w > span { transform: none; }
.mov .hero .lead, .mov .hero .acoes, .mov .hero .provas, .mov .hero .etiqueta { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.mov .hero.pronto .etiqueta { opacity: 1; transform: none; }
.mov .hero.pronto .lead { opacity: 1; transform: none; transition-delay: .45s; }
.mov .hero.pronto .acoes { opacity: 1; transform: none; transition-delay: .6s; }
.mov .hero.pronto .provas { opacity: 1; transform: none; transition-delay: .75s; }
.mov .palco { opacity: 0; transform: scale(.94); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); }
.mov .hero.pronto .palco { opacity: 1; transform: none; transition-delay: .25s; }
.mov .pessoa img[data-r] { clip-path: inset(100% 0 0 0 round var(--raio)); filter: saturate(.4); transform: none; opacity: 1; }
.mov .pessoa img[data-r].on { clip-path: inset(0 0 0 0 round var(--raio)); filter: none; }

/* ---------- Telemóvel: menos peso, mesma elegância ---------- */
@media (max-width: 899px) {
  .palco { max-width: 360px; margin-top: .5rem; }
  .hero::after { display: none; }
}

/* ---------- Quem pede menos movimento: tudo estático e imediato ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .palco .hero__fotos .foto-link { animation: none; }
  .fita ul:last-child { display: none; }
}

/* O formulário dentro da janela aparece sempre, mesmo que ainda não tenha sido revelado no fundo da página */
.mov .modal-marcar [data-r] { opacity: 1; transform: none; filter: none; }
.modal__caixa { box-shadow: 0 40px 100px -24px rgba(10, 30, 56, .55), 0 0 0 1px rgba(255, 255, 255, .6) inset; }