/* =========================================================================
   Fisio InHome — folha de estilo única
   Sistema de design da secção 4–7 do brief. Sem framework, sem dependências.
   Em produção: descomentar os @font-face e colocar os .woff2 em assets/tipos/
   ========================================================================= */

/*
@font-face { font-family:'Source Serif 4'; src:url('../tipos/source-serif-4.woff2') format('woff2');
             font-weight:400 700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:'Public Sans'; src:url('../tipos/public-sans.woff2') format('woff2');
             font-weight:300 700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
*/

:root{
  /* Azuis do logótipo — escala clara, sobre base branca */
  --azul-900:#1C4A6B;  /* texto principal   · 9,4:1 no branco */
  --azul-800:#1E5480;  /* títulos           · 7,7:1 */
  --azul-700:#236894;  /* acções, ligações  · 6,0:1 */
  --azul-600:#4C9AC9;  /* ícones e traços */
  --azul-500:#7CBADB;  /* acento claro do símbolo */
  --azul-300:#B3D8EA;
  --azul-100:#E8F3FA;  /* fundos de destaque, dentro de cartões brancos */
  --azul-050:#DFEDF7;  /* faixas de secção — azul claro, separa-se do branco */
  --azul-025:#D6E7F3;  /* secção "Quem sou" — um tom acima da faixa */

  /* Confirmação */
  --verde-700:#2F7D57; --verde-100:#DDEEE4;

  /* Neutros */
  --sal:#FFFFFF; --branco:#FFFFFF; --cinza-600:#486376; --cinza-300:#DCE9F1;
  --tinta:#1C4A6B;

  /* Funcionais */
  --erro:#B3261E;
  --whatsapp:#25D366;

  --fonte-titulo:'Source Serif 4','Source Serif Pro','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --fonte-texto:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif;

  --txt-xs:.875rem; --txt-sm:1rem;
  --txt-base:clamp(1.125rem,1.05rem + .35vw,1.1875rem);
  --txt-lg:clamp(1.1875rem,1.1rem + .5vw,1.375rem);
  --txt-h3:clamp(1.4rem,1.3rem + .75vw,1.8rem);
  --txt-h2:clamp(1.9rem,1.6rem + 1.5vw,2.9rem);
  --txt-h1:clamp(2.3rem,1.85rem + 2.4vw,4rem);

  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e6:1.5rem; --e8:2rem;
  --e12:3rem; --e16:4rem; --e24:6rem; --e32:8rem;

  --raio-sm:6px; --raio-md:12px; --raio-lg:24px;
  --sombra-1:0 1px 2px rgba(28,74,107,.07),0 1px 1px rgba(28,74,107,.04);
  --sombra-2:0 12px 32px -12px rgba(28,74,107,.22);

  color-scheme:light;   /* o site é branco, sempre */
  --largura-max:1200px;
  --goteira:clamp(1.25rem,5vw,3rem);
  --dur-rapida:140ms; --dur-media:260ms; --dur-lenta:420ms;
  --suave:cubic-bezier(.16,1,.3,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#FFFFFF}
body{
  margin:0;background:#FFFFFF;color:var(--tinta);
  font-family:var(--fonte-texto);font-size:var(--txt-base);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{color:var(--azul-800);font-family:var(--fonte-titulo);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--e4)}
h1{font-size:var(--txt-h1);letter-spacing:-.03em}
h2{font-size:var(--txt-h2)}
h3{font-size:var(--txt-h3);letter-spacing:-.01em}
p{margin:0 0 var(--e4);max-width:34rem}
a{color:var(--azul-700)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--azul-600);outline-offset:3px;border-radius:2px}
::selection{background:var(--azul-100)}

main{background:var(--sal)}
.env{width:100%;max-width:var(--largura-max);margin-inline:auto;padding-inline:var(--goteira)}
.seccao{padding-block:var(--e24)}
@media(min-width:900px){.seccao{padding-block:var(--e32)}}
.seccao--tinta{background:var(--azul-050)}
.seccao--tinta-clara{background:var(--azul-025)}
.medida{max-width:34rem}
.saltar{position:absolute;left:-9999px;top:0;background:var(--azul-700);color:#fff;padding:var(--e3) var(--e6);z-index:200}
.saltar:focus{left:var(--e4);top:var(--e4)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:52px;padding:var(--e3) var(--e6);border-radius:var(--raio-sm);
  font:inherit;font-size:var(--txt-sm);font-weight:600;letter-spacing:.005em;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:background var(--dur-rapida),border-color var(--dur-rapida),transform var(--dur-rapida),color var(--dur-rapida);
}
.btn:active{transform:scale(.98)}
.btn--primario{background:var(--azul-700);color:#fff}
.btn--primario:hover{background:var(--azul-800)}
.btn--secundario{background:transparent;color:var(--azul-700);border-color:var(--cinza-300)}
.btn--secundario:hover{border-color:var(--azul-700);background:var(--branco)}
.btn--whatsapp{background:var(--whatsapp);color:var(--azul-900);border-color:rgba(12,51,85,.12)}
.btn--whatsapp:hover{filter:brightness(.95)}
.btn--largo{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- cabeçalho ---------- */
.cabecalho{
  position:sticky;top:0;z-index:90;background:var(--sal);
  border-bottom:1px solid transparent;transition:border-color var(--dur-media),background var(--dur-media);
}
.cabecalho.deslocado{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--cinza-300)}
.cabecalho__int{display:flex;align-items:center;gap:var(--e6);min-height:68px}
.marca{display:flex;align-items:center;gap:var(--e3);text-decoration:none;color:inherit;margin-right:auto}
.marca svg{flex:none}
.marca b{display:block;font-family:var(--fonte-titulo);font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.marca span{display:block;font-size:.8rem;color:var(--cinza-600);line-height:1.2}
.nav{display:none;gap:var(--e4)}
.nav a{color:var(--tinta);text-decoration:none;font-size:.9rem;white-space:nowrap;padding:var(--e2) 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--azul-600)}
.cabecalho .btn{min-height:46px;padding-inline:var(--e4)}
.tel-icone{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--raio-sm);border:1.5px solid var(--cinza-300);color:var(--azul-700)}
@media(min-width:1120px){.nav{display:flex}}
@media(max-width:520px){.cabecalho .btn span{display:none}.cabecalho .btn{padding-inline:var(--e3)}}

/* ---------- herói ---------- */
.heroi{position:relative;padding-block:var(--e8) var(--e16);overflow:hidden}
.heroi__grelha{display:grid;gap:var(--e12);align-items:start;position:relative;z-index:1}
@media(min-width:960px){
  .heroi__grelha{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--e16);align-items:center}
  .heroi{padding-block:var(--e16) var(--e24)}
}
.heroi h1{max-width:14ch;margin-bottom:var(--e3)}
.heroi__lead{font-size:var(--txt-lg);color:var(--azul-800);max-width:30rem;margin-bottom:0}
.heroi__arco{position:absolute;top:-8%;right:-14%;width:min(70vw,720px);z-index:0;color:var(--azul-100);pointer-events:none}
.heroi__arco path{fill:none;stroke:currentColor;stroke-width:1.5;opacity:0;animation:surgirArco 1.4s var(--suave) forwards}
.heroi__arco path:nth-child(2){animation-delay:.12s}
.heroi__arco path:nth-child(3){animation-delay:.24s}
@keyframes surgirArco{to{opacity:.75}}
@keyframes desenhar{to{stroke-dashoffset:0}}

/* foto em arco = a porta de entrada de uma casa */
.foto-arco{position:relative}
.foto-arco img{
  width:100%;border-radius:min(50vw,340px) min(50vw,340px) var(--raio-md) var(--raio-md);
  background:var(--azul-050);
}
.legenda{margin-top:var(--e3);font-size:var(--txt-xs);color:var(--cinza-600);max-width:30ch}

/* ---------- cartão de disponibilidade ---------- */
.disp{
  margin-top:var(--e6);background:var(--branco);border:1px solid var(--cinza-300);
  border-radius:var(--raio-md);padding:var(--e6);max-width:34rem;box-shadow:var(--sombra-1);
}
.campo{display:block;margin-bottom:var(--e4)}
.campo>span{display:block;font-size:var(--txt-xs);font-weight:600;color:var(--azul-800);margin-bottom:var(--e2)}
select,input,textarea{
  width:100%;min-height:52px;padding:var(--e3) var(--e4);font:inherit;font-size:var(--txt-sm);
  color:var(--tinta);background:var(--branco);border:1.5px solid var(--cinza-300);border-radius:var(--raio-sm);
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23236894' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--e4) center;padding-right:var(--e12)}
select:hover,input:hover{border-color:var(--azul-600)}
.disp__rot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);margin-bottom:var(--e3)}
.disp__rot strong{font-size:var(--txt-xs);text-transform:none;font-weight:700}
.disp__zona{font-size:var(--txt-xs);color:var(--cinza-600)}
.vagas{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--e2)}
.vaga{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-height:82px;padding:var(--e3) var(--e4);text-align:left;cursor:pointer;
  background:var(--azul-100);border:1.5px solid var(--azul-100);border-radius:var(--raio-sm);
  color:var(--tinta);font:inherit;
  transition:border-color var(--dur-rapida),background var(--dur-rapida),transform var(--dur-rapida);
  animation:entrar var(--dur-media) var(--suave) both;
}
.vaga:hover{border-color:var(--azul-700);background:var(--branco)}
.vaga:active{transform:scale(.985)}
.vaga em{font-style:normal;font-size:var(--txt-xs);color:var(--azul-800)}
.vaga b{font-size:1.15rem;font-variant-numeric:tabular-nums;font-weight:700}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vaga:nth-child(2){animation-delay:70ms}
.vaga:nth-child(3){animation-delay:140ms}
.disp__pe{margin:var(--e4) 0 0;font-size:var(--txt-xs);color:var(--cinza-600);display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);align-items:center}
.disp__pe a{font-weight:700;white-space:nowrap;display:inline-block;padding-block:.45rem}
.vazio{background:var(--azul-050);border:1px dashed var(--cinza-300);border-radius:var(--raio-sm);padding:var(--e4);font-size:var(--txt-sm);color:var(--azul-800)}
.esqueleto{height:82px;border-radius:var(--raio-sm);background:linear-gradient(90deg,var(--azul-050),var(--azul-100),var(--azul-050));background-size:200% 100%;animation:brilho 1.2s linear infinite}
@keyframes brilho{to{background-position:-200% 0}}

/* ---------- tira de confiança ---------- */
.tira{border-block:1px solid var(--cinza-300);background:var(--branco)}
.tira ul{display:grid;gap:var(--e4);padding-block:var(--e6);grid-template-columns:1fr}
@media(min-width:760px){.tira ul{grid-template-columns:repeat(4,1fr);gap:var(--e8)}}
.tira li{display:flex;gap:var(--e3);align-items:flex-start;font-size:var(--txt-xs);color:var(--azul-800);line-height:1.45}
.tira svg{flex:none;color:var(--azul-600);margin-top:2px}

/* ---------- listas de valor ---------- */
.cab-seccao{max-width:32rem;margin-bottom:var(--e12)}
.lista-tratar{display:grid;gap:0;margin-top:var(--e8);border-top:1px solid var(--cinza-300)}
.lista-tratar li{border-bottom:1px solid var(--cinza-300);padding-block:var(--e6);display:grid;gap:var(--e2)}
@media(min-width:760px){.lista-tratar li{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:var(--e8);align-items:baseline}}
.lista-tratar h3{margin:0;font-size:1.2rem;font-weight:600}
.lista-tratar p{margin:0;color:var(--cinza-600);font-size:var(--txt-sm)}

/* ---------- como funciona: linha do tempo em arco ---------- */
.passos{display:grid;gap:var(--e8);counter-reset:passo}
@media(min-width:900px){.passos{grid-template-columns:repeat(4,1fr);gap:var(--e6)}}
.passo{position:relative;padding-left:var(--e12)}
@media(min-width:900px){.passo{padding-left:0;padding-top:var(--e12)}}
.passo::before{
  counter-increment:passo;content:counter(passo);
  position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--azul-700);color:#fff;
  font-family:var(--fonte-titulo);font-size:1.1rem;font-weight:600;
}
.passo::after{
  content:'';position:absolute;left:22px;top:44px;bottom:-2rem;width:1px;background:var(--cinza-300);
}
.passo:last-child::after{display:none}
@media(min-width:900px){
  .passo::after{left:44px;top:22px;right:-1.5rem;bottom:auto;width:auto;height:1px}
}
.passo h3{font-size:1.15rem;margin-bottom:var(--e2)}
.passo p{font-size:var(--txt-sm);color:var(--cinza-600);margin:0}

/* ---------- serviços: seis cartões iguais ---------- */
.servicos{display:grid;gap:var(--e4)}
@media(min-width:600px){.servicos{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.servicos{grid-template-columns:repeat(3,1fr);gap:var(--e6)}}
.serv{
  background:var(--branco);border:1px solid var(--cinza-300);border-radius:var(--raio-md);
  padding:var(--e6);display:flex;flex-direction:column;gap:var(--e2);
  transition:border-color var(--dur-rapida),transform var(--dur-rapida);
}
.serv:hover{border-color:var(--azul-500);transform:translateY(-2px)}
.serv svg{color:var(--azul-600);margin-bottom:var(--e2)}
.serv h3{font-size:1.1rem;margin:0}
.serv p{margin:0;font-size:var(--txt-sm);color:var(--cinza-600)}

/* fotografia de apoio em "Como funciona" */
.foto-funciona{margin:var(--e16) 0 0}
.foto-funciona img{width:100%;border-radius:var(--raio-lg);max-height:26rem;object-fit:cover;object-position:50% 30%}
@media(min-width:900px){.foto-funciona img{max-height:22rem;object-position:50% 26%}}

/* ---------- preços e zonas ---------- */
.precos{display:grid;gap:var(--e12)}
@media(min-width:940px){.precos{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--e16);align-items:start}}
table{width:100%;border-collapse:collapse;font-size:var(--txt-sm)}
caption{text-align:left;font-size:var(--txt-xs);color:var(--cinza-600);padding-bottom:var(--e3)}
th,td{text-align:left;padding:var(--e4) var(--e2);border-bottom:1px solid var(--cinza-300);vertical-align:top}
th{font-weight:600}
#precos td:last-child,#precos th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table td{overflow-wrap:anywhere}
.pv{border-bottom:2px dotted var(--azul-500);cursor:help}
.aviso-precos{margin-top:var(--e4);font-size:var(--txt-xs);color:var(--cinza-600)}
.vantagens{display:grid;gap:var(--e4);margin-top:var(--e8)}
.vantagens li{display:flex;gap:var(--e3);font-size:var(--txt-sm);color:var(--azul-800)}
.vantagens svg{flex:none;color:var(--verde-700);margin-top:3px}
.zonas-mapa{background:var(--branco);border:1px solid var(--cinza-300);border-radius:var(--raio-lg);padding:var(--e6)}
.zonas-mapa svg{width:100%;height:auto;display:block}
.zona-linha{display:grid;grid-template-columns:auto 1fr;gap:var(--e3);padding-block:var(--e4);border-top:1px solid var(--cinza-300);font-size:var(--txt-sm)}
.pastilha{display:inline-grid;place-items:center;min-width:2.1rem;height:2.1rem;border-radius:50%;font-size:.8rem;font-weight:700;color:#fff}
.z1{background:var(--azul-700)}.z2{background:var(--azul-600)}.z3{background:var(--azul-500)}
.zona-linha b{display:block}
.zona-linha span{color:var(--cinza-600)}

/* ---------- confiança ---------- */
.confianca{display:grid;gap:var(--e8)}
@media(min-width:820px){.confianca{grid-template-columns:repeat(3,1fr)}}
.cred{border-top:2px solid var(--azul-500);padding-top:var(--e4)}
.cred h3{font-size:1.05rem;margin-bottom:var(--e2)}
.cred p{font-size:var(--txt-sm);color:var(--cinza-600);margin:0}
.por-preencher{background:var(--azul-050);border:1px dashed var(--azul-500);border-radius:var(--raio-md);padding:var(--e6);font-size:var(--txt-sm);color:var(--azul-800);margin-top:var(--e8)}
.por-preencher b{display:block;margin-bottom:var(--e2)}

/* ---------- sobre ---------- */
.sobre{display:grid;gap:var(--e12);align-items:center}
@media(min-width:900px){.sobre{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e16)}}
.sobre .foto-arco img{max-width:420px}
.citacao{font-family:var(--fonte-titulo);font-size:var(--txt-lg);line-height:1.35;color:var(--azul-800);border-left:2px solid var(--azul-500);padding-left:var(--e4);margin-top:var(--e6);max-width:30rem}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;border-top:1px solid var(--cinza-300);max-width:52rem}
.faq details{border-bottom:1px solid var(--cinza-300)}
.faq summary{
  cursor:pointer;list-style:none;padding:var(--e6) var(--e8) var(--e6) 0;position:relative;
  font-weight:600;font-size:1.05rem;min-height:52px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:var(--e2);top:calc(50% - 1px);width:16px;height:2px;background:var(--azul-700);
}
.faq summary::before{
  content:'';position:absolute;right:calc(var(--e2) + 7px);top:calc(50% - 8px);width:2px;height:16px;background:var(--azul-700);
  transition:transform var(--dur-media) var(--suave);
}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq p{padding-bottom:var(--e6);color:var(--cinza-600);font-size:var(--txt-sm);max-width:44rem}

/* ---------- CTA final ---------- */
.cta{background:var(--azul-050);color:var(--tinta);border-block:1px solid var(--cinza-300)}
.cta h2{color:var(--azul-800);max-width:16ch}
.cta p{color:var(--cinza-600)}
.cta .acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e8)}
.cta .btn--primario{background:var(--azul-700);color:#fff}
.cta .btn--primario:hover{background:var(--azul-800)}

/* ---------- rodapé ---------- */
.rodape{background:var(--branco);color:var(--cinza-600);padding-block:var(--e12);border-top:1px solid var(--cinza-300);font-size:var(--txt-sm)}
.rodape a{color:var(--azul-700)}
.rodape__grelha{display:grid;gap:var(--e8)}
@media(min-width:760px){.rodape__grelha{grid-template-columns:repeat(3,1fr)}}
.rodape h3{color:var(--azul-800);font-size:1rem;font-family:var(--fonte-texto);font-weight:700;margin-bottom:var(--e3)}
.rodape li{margin-bottom:var(--e2)}
.rodape li a{display:inline-block;padding-block:.35rem}
.rodape__legal{margin-top:var(--e12);padding-top:var(--e6);border-top:1px solid var(--cinza-300);display:flex;flex-wrap:wrap;gap:var(--e2) var(--e6);font-size:var(--txt-xs);color:var(--cinza-600)}

/* ---------- barra fixa móvel ---------- */
.barra-movel{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:var(--e2);
  padding:var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--cinza-300);
  transform:translateY(110%);transition:transform var(--dur-media) var(--suave);
}
.barra-movel.visivel{transform:none}
.barra-movel .btn{flex:1}
@media(min-width:1120px){.barra-movel{display:none}}
body{padding-bottom:0}
@media(max-width:1119px){body:has(.barra-movel.visivel){padding-bottom:5.5rem}}

/* ---------- diálogo de marcação ---------- */
dialog.marcar{
  width:min(680px,100%);max-width:100%;max-height:100dvh;height:auto;padding:0;border:none;
  border-radius:var(--raio-lg);background:var(--branco);color:inherit;box-shadow:var(--sombra-2);
  margin:auto;overflow:hidden;
}
dialog.marcar::backdrop{background:rgba(28,74,107,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@media(max-width:700px){dialog.marcar{width:100%;height:100dvh;max-height:100dvh;border-radius:0}}
.m-topo{display:flex;align-items:center;gap:var(--e3);padding:var(--e4) var(--e6);border-bottom:1px solid var(--cinza-300);position:sticky;top:0;background:var(--branco);z-index:2}
.m-topo h2{font-size:1.15rem;margin:0;flex:1}
.m-fechar,.m-voltar{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--cinza-300);background:var(--branco);border-radius:var(--raio-sm);cursor:pointer;color:var(--tinta)}
.m-progresso{display:flex;gap:6px;padding:0 var(--e6) var(--e4);background:var(--branco)}
.m-progresso i{flex:1;height:4px;border-radius:2px;background:var(--cinza-300);transition:background var(--dur-media)}
.m-progresso i.feito{background:var(--azul-700)}
.m-corpo{padding:var(--e6);overflow-y:auto;max-height:calc(100dvh - 210px)}
.m-passo{display:none;animation:deslizar var(--dur-lenta) var(--suave)}
.m-passo.activo{display:block}
@keyframes deslizar{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.m-rodape{padding:var(--e4) var(--e6) calc(var(--e6) + env(safe-area-inset-bottom));border-top:1px solid var(--cinza-300);display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;background:var(--branco)}
.m-rodape .btn{flex:1}
.m-tel{font-size:var(--txt-xs);color:var(--cinza-600);min-width:0}
.m-tel a{font-weight:700;white-space:nowrap;display:inline-block;padding-block:.4rem}

.opcoes{display:grid;gap:var(--e3);margin-bottom:var(--e6)}
.opcao{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e4);border:1.5px solid var(--cinza-300);border-radius:var(--raio-sm);cursor:pointer;min-height:52px}
.opcao:hover{border-color:var(--azul-600)}
.opcao:has(input:checked){border-color:var(--azul-700);background:var(--azul-050);box-shadow:inset 0 0 0 1px var(--azul-700)}
.opcao input{margin:4px 0 0;width:22px;height:22px;accent-color:var(--azul-700);flex:none}
.opcao b{display:block}
.opcao span{font-size:var(--txt-xs);color:var(--cinza-600)}

.calendario__topo{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-bottom:var(--e4)}
.calendario__topo strong{font-family:var(--fonte-titulo);font-size:1.2rem;font-weight:600}
.mes-nav{width:48px;height:48px;border:1px solid var(--cinza-300);background:var(--branco);border-radius:var(--raio-sm);cursor:pointer;display:grid;place-items:center;color:var(--tinta)}
.mes-nav[disabled]{opacity:.35;cursor:not-allowed}
.grelha-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.grelha-dias .dia-sem{font-size:.72rem;color:var(--cinza-600);text-align:center;padding-bottom:var(--e2)}
.dia{
  aspect-ratio:1;min-height:44px;display:grid;place-items:center;gap:0;border-radius:var(--raio-sm);
  border:1.5px solid transparent;background:transparent;font:inherit;font-size:.95rem;font-variant-numeric:tabular-nums;
  color:var(--cinza-600);cursor:not-allowed;position:relative;
}
.dia.livre{background:var(--azul-100);border-color:var(--azul-100);color:var(--tinta);cursor:pointer;font-weight:600}
.dia.livre:not([aria-pressed=true]):hover{border-color:var(--azul-700);background:var(--branco)}
.dia.livre::after{content:'';position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--azul-700)}
.dia[aria-pressed=true]{background:var(--azul-700);border-color:var(--azul-700);color:#fff}
.dia[aria-pressed=true]::after{background:#fff}
.horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:var(--e2);margin-top:var(--e6)}
.hora{min-height:52px;border-radius:var(--raio-sm);border:1.5px solid var(--cinza-300);background:var(--branco);font:inherit;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--tinta)}
.hora:not([aria-pressed=true]):hover{border-color:var(--azul-700)}
.hora[aria-pressed=true]{background:var(--azul-700);border-color:var(--azul-700);color:#fff}
.legenda-cal{margin-top:var(--e4);font-size:var(--txt-xs);color:var(--cinza-600);display:flex;flex-wrap:wrap;gap:var(--e4)}
.legenda-cal span{display:flex;align-items:center;gap:6px}
.chip{width:14px;height:14px;border-radius:3px;background:var(--azul-100);border:1px solid var(--azul-500)}

.grelha-form{display:grid;gap:var(--e4)}
@media(min-width:560px){.grelha-form .meio{grid-column:span 1}.grelha-form{grid-template-columns:1fr 1fr}.grelha-form .todo{grid-column:1/-1}}
.erro{color:var(--erro);font-size:var(--txt-xs);font-weight:600;margin-top:var(--e2);display:flex;gap:6px;align-items:center}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--erro);background:#FDF6F5}
.check{display:flex;gap:var(--e3);align-items:flex-start;font-size:var(--txt-xs);color:var(--cinza-600);line-height:1.5}
.check input{width:24px;height:24px;accent-color:var(--azul-700);flex:none;margin:0}
.resumo{background:var(--azul-050);border:1px solid var(--azul-100);border-radius:var(--raio-md);padding:var(--e4) var(--e6);margin-bottom:var(--e6)}
.resumo dl{display:grid;grid-template-columns:auto 1fr;gap:var(--e2) var(--e4);margin:0;font-size:var(--txt-sm)}
.resumo dt{color:var(--cinza-600)}
.resumo dd{margin:0;font-weight:600;text-align:right}
.nota-rgpd{font-size:var(--txt-xs);color:var(--cinza-600);border-left:2px solid var(--azul-100);padding-left:var(--e3);margin-top:var(--e6)}

.sucesso{text-align:center;padding-block:var(--e6)}
.sucesso svg{margin:0 auto var(--e4)}
.sucesso .anel{stroke-dasharray:302;stroke-dashoffset:302;animation:desenhar .7s var(--suave) forwards}
.sucesso .visto{stroke-dasharray:60;stroke-dashoffset:60;animation:desenhar .4s var(--suave) .55s forwards}
.sucesso h3{margin-bottom:var(--e2)}
.sucesso p{margin-inline:auto}
.acoes-sucesso{display:grid;gap:var(--e3);margin-top:var(--e8)}
@media(min-width:520px){.acoes-sucesso{grid-template-columns:1fr 1fr}}

/* ---------- movimento reduzido ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .heroi__arco path{stroke-dashoffset:0}
  .sucesso .anel,.sucesso .visto{stroke-dashoffset:0}
}

/* ---------- impressão ---------- */
@media print{.cabecalho,.barra-movel,.disp,dialog{display:none!important}body{background:#fff}}


/* =========================================================================
   TEMA ESCURO
   O ecrã do utilizador está em modo escuro. Sem isto, o navegador escurece
   o fundo por sua conta e deixa o texto na cor do tema claro — ilegível.
   Aqui o contraste é desenhado, não adivinhado.
   ========================================================================= */



/* =========================================================================
   Afinações gerais
   ========================================================================= */
:where(section[id],#topo){scroll-margin-top:88px}
h1,h2,h3{text-wrap:balance}
p,.legenda,.zona-linha span{text-wrap:pretty}
.nav a[aria-current=true]{border-bottom-color:var(--azul-700);font-weight:600}

/* marca de água em arco nos dois serviços principais — o mesmo motivo, mais fraco */
.serv-grande{position:relative;isolation:isolate}
.serv-grande::after{
  content:'';position:absolute;right:-40px;bottom:-40px;width:190px;height:190px;z-index:-1;
  background:radial-gradient(circle at 50% 100%,transparent 0 62%,var(--azul-100) 62% 64%,transparent 64%),
             radial-gradient(circle at 50% 100%,transparent 0 40%,var(--azul-100) 40% 42%,transparent 42%);
  opacity:.9;pointer-events:none;
}

/* acordeão das perguntas: abertura suave onde o motor já suporta */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--dur-media) var(--suave),content-visibility var(--dur-media) allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

@media (prefers-reduced-motion:reduce){
  .passos .passo::after{transform:none}
  .zonas-mapa svg path{stroke-dashoffset:0}
}

/* ---------- alternativa ao telefone ---------- */
dialog.marcar.simples{width:min(430px,100%);height:auto;max-height:90dvh;border-radius:var(--raio-lg)}
@media(max-width:700px){
  dialog.marcar.simples{width:calc(100% - 2rem);height:auto;max-height:85dvh;border-radius:var(--raio-lg);margin:auto}
}
dialog.simples .m-corpo{max-height:none;padding-bottom:calc(var(--e8) + env(safe-area-inset-bottom))}
.numero{
  display:block;text-align:center;text-decoration:none;
  font-family:var(--fonte-titulo);font-size:2.4rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--azul-700);
  padding:var(--e6) 0 var(--e8);
}
.numero:hover{color:var(--azul-600)}

/* ---------- diálogo: coluna flexível ----------
   Sem isto, num telemóvel baixo o botão "Continuar" cai abaixo do ecrã e o
   fluxo parece estar avariado. O corpo passa a ser a única zona que rola. */
dialog.marcar[open]{display:flex;flex-direction:column}
.m-topo,.m-progresso,.m-rodape{flex:0 0 auto}
.m-corpo{flex:1 1 auto;min-height:0;max-height:none}
dialog.marcar.simples[open]{display:flex}

/* o herói ficava com 1646px de altura no telemóvel — a foto passa a ser
   recortada em vez de empurrar o resto da página para baixo */
@media(max-width:700px){
  .heroi .foto-arco img{max-height:52vh;object-fit:cover;object-position:50% 38%}
}


/* rodapé do diálogo: em ecrã estreito o botão ocupa a largura toda e o
   contacto passa para baixo. Antes, o "white-space:nowrap" empurrava o
   diálogo para 465px e o calendário saía do ecrã. */
@media(max-width:560px){
  .m-rodape .btn{flex:1 1 100%;order:1}
  .m-tel{flex:1 1 100%;order:2;text-align:center}
}


/* ---------- seletor de idioma ---------- */
.idiomas{display:flex;flex:none;border:1.5px solid var(--cinza-300);border-radius:var(--raio-sm);overflow:hidden}
.idiomas a{
  min-width:46px;min-height:46px;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-decoration:none;color:var(--cinza-600);
  transition:background var(--dur-rapida),color var(--dur-rapida);
}
.idiomas a:hover{background:var(--azul-050);color:var(--azul-700)}
.idiomas a[aria-current]{background:var(--azul-700);color:#fff}
/* em ecrã estreito mostra-se apenas a outra língua, para não roubar espaço ao CTA */
@media(max-width:1119px){
  .idiomas{border:none;gap:0}
  .idiomas a[aria-current]{display:none}
  .idiomas a{border:1.5px solid var(--cinza-300);border-radius:var(--raio-sm);color:var(--azul-700)}
}



/* ---------- bloco de factos citáveis ---------- */
.factos{display:grid;gap:0;margin:var(--e8) 0 0;max-width:46rem;border-top:1px solid var(--cinza-300)}
.factos dt{font-size:var(--txt-xs);font-weight:700;color:var(--azul-700);padding-top:var(--e4)}
.factos dd{margin:0 0 var(--e4);font-size:var(--txt-sm);border-bottom:1px solid var(--cinza-300);padding-bottom:var(--e4)}
@media(min-width:700px){
  .factos{grid-template-columns:14rem 1fr}
  .factos dt{border-bottom:1px solid var(--cinza-300);padding-bottom:var(--e4);margin-bottom:0}
  .factos dd{padding-top:var(--e4)}
}

/* o seletor de idioma acrescentou 46px ao cabeçalho: em ecrãs muito estreitos
   a marca encolhe em vez de empurrar o botão de marcação para fora */
.marca{min-width:0}
.marca>span{min-width:0}
.marca b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:440px){
  .cabecalho__int{gap:var(--e2)}
  .marca{gap:var(--e2)}
  .marca>span>span{display:none}          /* esconde o descritor, mantém o nome */
  .idiomas a{min-width:42px}
}

@media(max-width:440px){.marca b{font-size:1.05rem}}


/* SXO: em ecrãs baixos (iPhone SE e afins) o primeiro horário tem de caber
   sem rolar — é a prova de disponibilidade que converte, não a promessa */
@media(max-width:700px){
  .heroi{padding-block:var(--e6) var(--e12)}
  .heroi__grelha{gap:var(--e8)}
  .disp{padding:var(--e4)}
  .disp .campo{margin-bottom:var(--e3)}
  .disp__rot{margin-bottom:var(--e2)}
}


/* ---------- logótipo ---------- */
.marca__logo{width:40px;height:auto;flex:none}
@media(max-width:440px){.marca__logo{width:34px}}


/* =========================================================================
   CAMADA DE DESENHO — base branca, o azul do logótipo como material
   Antes: texto azul sobre branco e pouco mais. O azul passa a existir em
   superfícies (fichas de ícone, painéis, marcas de secção), não só em letra.
   ========================================================================= */

/* ---- cabeçalho de secção: título à esquerda, entrada ao lado ---- */
.cab-seccao{max-width:none;margin-bottom:var(--e16);position:relative}
.cab-seccao h2{margin:0}
.cab-seccao p{margin:var(--e4) 0 0;max-width:36rem;font-size:var(--txt-lg);color:var(--cinza-600)}
@media(min-width:900px){
  .cab-seccao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--e16);align-items:start}
  .cab-seccao p{margin-top:.4rem}
}
/* marca de secção: o arco do logótipo, desenhado por cima do título */
.cab-seccao h2::before,.sobre h2::before{
  content:'';display:block;width:46px;height:16px;margin-bottom:var(--e4);
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='16' viewBox='0 0 46 16'%3E%3Cpath d='M2 14a21 21 0 0 1 42 0' fill='none' stroke='%237CBADB' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M15 14a8 8 0 0 1 16 0' fill='none' stroke='%23236894' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- tira de confiança: legível e com presença ---- */
.tira{background:var(--azul-050);border-block:1px solid var(--azul-100)}
.tira ul{padding-block:var(--e8)}
.tira li{font-size:var(--txt-sm);color:var(--azul-800);align-items:center;gap:var(--e4)}
.tira svg{width:22px;height:22px;padding:5px;box-sizing:content-box;border-radius:50%;
  background:var(--branco);border:1px solid var(--azul-100);color:var(--azul-700);margin:0}

/* ---- cartões de serviço: ficha de ícone azul e contorno com presença ---- */
.serv{border-color:var(--azul-100);padding:var(--e8) var(--e6);gap:var(--e3)}
.serv svg{
  width:26px;height:26px;padding:11px;box-sizing:content-box;
  background:var(--azul-050);border-radius:14px;color:var(--azul-700);margin-bottom:var(--e4);
  transition:background var(--dur-rapida),color var(--dur-rapida);
}
.serv:hover{border-color:var(--azul-500);box-shadow:0 10px 28px -18px rgba(28,74,107,.35)}
.serv:hover svg{background:var(--azul-700);color:#fff}
.serv h3{font-size:1.15rem;color:var(--azul-900)}
.serv p{color:var(--cinza-600)}

/* ---- passos: números maiores e linha visível ---- */
.passo::before{width:52px;height:52px;font-size:1.25rem;box-shadow:0 6px 18px -8px rgba(38,113,159,.5)}
.passo{padding-left:4.5rem}
.passo::after{background:var(--azul-100)}
@media(min-width:900px){.passo{padding-left:0;padding-top:4.5rem}.passo::after{left:52px;top:26px}}
.passo h3{font-size:1.15rem;color:var(--azul-900)}

/* ---- herói: o arco deixa de ser invisível ---- */
.heroi__arco{color:var(--azul-100);width:min(78vw,780px);top:-12%;right:-16%}
.heroi__arco path{stroke-width:2.5}
@keyframes surgirArco{to{opacity:1}}
/* aro claro atrás da fotografia, o mesmo gesto do símbolo */
.foto-arco::before{
  content:'';position:absolute;inset:-14px -14px auto -14px;height:62%;z-index:-1;
  border-radius:min(50vw,360px) min(50vw,360px) 0 0;
  background:linear-gradient(180deg,var(--azul-050),transparent);
}

/* ---- cartão de disponibilidade: é o produto, tem de parecer ---- */
.disp{border-color:var(--azul-100);box-shadow:0 18px 40px -28px rgba(28,74,107,.4);position:relative;overflow:hidden}
.disp::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--azul-700),var(--azul-500))}
.disp{padding-top:calc(var(--e6) + 4px)}
.vaga{border-color:var(--azul-100)}
.vaga:hover{border-color:var(--azul-700);background:var(--branco);box-shadow:0 8px 20px -14px rgba(28,74,107,.4)}

/* ---- valores por definir: chip intencional, não texto partido ---- */
.pv{
  border-bottom:none;background:var(--azul-050);border:1px dashed var(--azul-500);
  border-radius:var(--raio-sm);padding:.1em .5em;color:var(--azul-700);
  font-size:.9em;white-space:nowrap;
}

/* ---- zonas: painel com peso e diagrama visível ---- */
.zonas-mapa{background:var(--branco);border-color:var(--azul-300)}
.zonas-mapa svg path{stroke-width:2.5}
.zona-linha{border-top-color:var(--azul-100)}
.pastilha{box-shadow:0 4px 12px -6px rgba(38,113,159,.55)}

/* ---- credenciais e citação ---- */
.cred{border-top-width:3px}
.citacao{border-left-width:3px;border-color:var(--azul-500);color:var(--azul-800)}

/* ---- perguntas: linhas azuis e resposta destacada ---- */
.faq{border-top-color:var(--azul-100)}
.faq details{border-bottom-color:var(--azul-100)}
.faq summary{color:var(--azul-900)}
.faq summary:hover{color:var(--azul-700)}
.faq details[open] summary{color:var(--azul-700)}
.faq details[open]{background:var(--azul-100);border-radius:var(--raio-md)}
.faq details[open] summary{padding-left:var(--e4)}
.faq details[open] p{padding-left:var(--e4);padding-right:var(--e4)}

/* ---- botões com um pouco mais de presença ---- */
.btn--primario{box-shadow:0 8px 20px -12px rgba(38,113,159,.6)}
.btn--secundario{background:var(--branco);border-color:var(--azul-100);color:var(--azul-700)}
.btn--secundario:hover{border-color:var(--azul-700);background:var(--azul-050)}

/* ---- rodapé fecha a página com uma faixa clara ---- */
.rodape{background:var(--azul-050);border-top:1px solid var(--azul-100)}
.rodape__legal{border-top-color:var(--azul-100)}

/* ---- separadores de secção ---- */
.seccao--tinta{background:var(--azul-050);border-block:1px solid var(--azul-100)}
.seccao--tinta-clara{background:var(--azul-025)}
.cta{background:var(--azul-050);border-block:1px solid var(--azul-100)}

/* afinações da camada de desenho */
.cab-seccao h2::before,.sobre h2::before{
  width:52px;height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='20' viewBox='0 0 52 20'%3E%3Cpath d='M2.5 17.5a23.5 23.5 0 0 1 47 0' fill='none' stroke='%237CBADB' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M18 17.5a8 8 0 0 1 16 0' fill='none' stroke='%23236894' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media(min-width:1160px){.servicos{grid-template-columns:repeat(4,1fr)}}
.serv svg{background:var(--azul-100);color:var(--azul-700)}
.passos .passo::after{background:var(--azul-300)}
@media(min-width:900px){.passos .passo::after{height:2px}}
@media(max-width:899px){.passos .passo::after{width:2px}}

/* o rótulo da zona muda de comprimento: o espaço fica reservado para não
   empurrar o resto do cartão quando os horários chegam (CLS) */
.disp__rot{min-height:3rem;align-items:center}
@media(min-width:520px){.disp__rot{min-height:2rem}}

/* =========================================================================
   SXO — o que acontece depois do clique
   ========================================================================= */

/* 1. ecrãs baixos (iPhone SE e semelhantes): o primeiro horário tem de caber
      sem rolar. É a prova de disponibilidade que converte, não a promessa.  */
@media (max-width:700px) and (max-height:720px){
  .heroi{padding-block:var(--e3) var(--e12)}
  .heroi h1{font-size:clamp(1.95rem,1.6rem + 2vw,2.6rem);margin-bottom:var(--e2)}
  .heroi__lead{font-size:var(--txt-base);line-height:1.5}
  .heroi__grelha{gap:var(--e6)}
  .disp{padding:var(--e3);margin-top:var(--e4)}
  .disp .campo{margin-bottom:var(--e2)}
  .disp__rot{min-height:auto}
  .cabecalho__int{min-height:60px}
}

/* 2. alvos de toque: as ligações de zona tinham 19px de altura */
.zona-linha a{display:inline-block;padding-block:.4rem}
.rodape__legal a{display:inline-block;padding-block:.4rem}
.marca{min-height:44px;align-items:center}
.disp__pe a,.m-tel a{padding-block:.55rem}

/* 3. estados de foco coerentes nos componentes novos */
.serv:focus-within{border-color:var(--azul-700)}
.idiomas a:focus-visible{outline-offset:-3px;position:relative;z-index:1}

/* 4. o movimento acompanha a preferência do sistema */
@media (prefers-reduced-motion:reduce){
  .serv:hover{transform:none;box-shadow:none}
  .vaga:hover,.btn:active{transform:none}
}

/* a marca não deve truncar em ecrãs de 375px */
@media(max-width:400px){
  .marca b{font-size:1rem}
  .marca__logo{width:32px}
  .idiomas a{min-width:40px}
  .cabecalho .btn{padding-inline:var(--e3);font-size:.9rem}
}

/* ---------- escolha do serviço (passo 1 da marcação) ---------- */
.opcoes-serv{display:grid;gap:var(--e2);margin:var(--e6) 0}
.serv-op{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--e3);
  padding:var(--e3) var(--e4);min-height:56px;cursor:pointer;
  border:1.5px solid var(--cinza-300);border-radius:var(--raio-sm);background:var(--branco);
  transition:border-color var(--dur-rapida),background var(--dur-rapida);
}
.serv-op:hover{border-color:var(--azul-600)}
.serv-op input{position:absolute;opacity:0;width:1px;height:1px}
.serv-op svg{color:var(--azul-600);flex:none}
.serv-op__txt b{display:block;font-size:var(--txt-sm);line-height:1.3}
.serv-op__txt span{display:block;font-size:var(--txt-xs);color:var(--cinza-600);line-height:1.35}
.serv-op__dur{font-size:var(--txt-xs);color:var(--cinza-600);white-space:nowrap;font-variant-numeric:tabular-nums}
.serv-op:has(input:checked){
  border-color:var(--azul-700);background:var(--azul-050);box-shadow:inset 0 0 0 1px var(--azul-700);
}

.serv-op:has(input:focus-visible){outline:3px solid var(--azul-600);outline-offset:2px}
/* seleccionado: o ícone enche-se de azul — sem visto solto a cair de linha */
.serv-op:has(input:checked) svg{
  color:#fff;background:var(--azul-700);border-radius:50%;
  padding:5px;box-sizing:content-box;margin:-5px;
}




/* =========================================================================
   INTRO — cortina de entrada
   Toda a coreografia sai de UMA variável: --intro-t. Muda-a e tudo acompanha.
   Anima só clip-path, opacity, transform e stroke-dashoffset: nada provoca
   reflow, logo o CLS mantém-se em zero.
   ========================================================================= */
:root{
  --intro-t:1.8s;   /* duração total — a ÚNICA coisa a mexer.
                       1,8s e não 2,4s: é um site de saúde, onde quem chega
                       vem com dores e à procura de um telefone. */
  --atraso:0s;      /* atraso das entradas do herói; só existe com intro */
}
html.intro-on{ --atraso:calc(var(--intro-t) * .71); }   /* ≈1,7 s */

div.intro{ display:none }                            /* sem JavaScript, nunca aparece */
html.intro-on .intro{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:300;pointer-events:none;
  background:var(--branco);
  clip-path:inset(0 0 0 0);
  animation:introCortina calc(var(--intro-t) * .417) cubic-bezier(.76,0,.24,1)
            calc(var(--intro-t) * .583) forwards;
}
@keyframes introCortina{ to{ clip-path:inset(0 0 100% 0) } }

.intro__int{ display:grid;justify-items:center;text-align:center;padding:var(--e6) }
/* reserva da linha do nome, para a caixa do conjunto nunca mudar de tamanho */
.intro__nome-caixa{ position:relative;width:100%;
  height:clamp(2.2rem,9vw,3.4rem);margin-top:clamp(1.25rem,4vw,2rem) }

/* O conjunto chega (escala) e, quando a cortina sobe, levanta com ela.
   Dá a sensação de a marca se erguer em vez de ser simplesmente cortada. */
html.intro-on:not(.intro-parada) .intro__int{
  animation:introConjunto var(--intro-t) both;
}
@keyframes introConjunto{
  0%  { transform:scale(.92) translateY(0);
        animation-timing-function:cubic-bezier(.16,1,.3,1) }
  58% { transform:scale(1) translateY(0);
        animation-timing-function:cubic-bezier(.76,0,.24,1) }
  100%{ transform:scale(1) translateY(-4vh) }
}
.intro__marca{ display:grid;justify-items:center }

/* O logótipo é uma imagem, não um traçado: revela-se de baixo para cima.
   A largura acompanha o ecrã: 66px fixos davam 17% no telemóvel e 5% no
   computador — um ponto no meio de uma folha branca. */
.intro__logo{
  width:clamp(104px,27vw,172px);height:auto;
  clip-path:inset(100% 0 0 0);
  animation:introRevela calc(var(--intro-t) * .375) cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes introRevela{ to{ clip-path:inset(0 0 0 0) } }

/* O arco do símbolo é vetorial: esse desenha-se mesmo, traço a traço. */
.intro__arco{
  /* Por baixo e mais estreito que o logótipo: lê-se como traço da marca.
     Atrás dele os arcos cruzavam o símbolo, que já tem arcos próprios. */
  width:clamp(68px,17vw,112px);height:auto;overflow:visible;
  margin-top:clamp(.7rem,2.4vw,1.1rem);
}
.intro__arco path{
  fill:none;stroke-linecap:round;stroke-width:2.6;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:introTraco calc(var(--intro-t) * .375) cubic-bezier(.6,0,.2,1) forwards;
}
.intro__arco path:nth-child(1){ stroke:var(--azul-500) }
.intro__arco path:nth-child(2){ stroke:var(--azul-700);animation-delay:calc(var(--intro-t) * .042) }
@keyframes introTraco{ to{ stroke-dashoffset:0 } }

/* O nome abre o espaçamento. O padding-left compensa o espaço final da
   última letra, senão o texto desloca-se para a esquerda ao centrar. */
.intro__nome{
  top:0;
  font-family:var(--fonte-titulo);font-weight:600;
  font-size:clamp(1.5rem,7.2vw,2.6rem);
  color:var(--azul-800);
  /* «Fisio InHome» tem caixa mista distintiva: mantém-se, e o espaçamento
     desce para .08em — em caixa alta o H interior perdia-se. */
  opacity:0;letter-spacing:.40em;padding-left:.40em;
  /* letter-spacing é propriedade de layout: com a caixa a crescer, o browser
     regista micro-saltos. Largura fixa + nowrap tira o layout da equação. */
  /* Fora do fluxo, dentro de uma caixa de altura fixa: a animação de
     letter-spacing deixa de poder mover seja o que for (CLS). */
  position:absolute;left:50%;transform:translateX(-50%);
  width:max-content;max-width:94vw;text-align:center;white-space:nowrap;
  animation:introNome calc(var(--intro-t) * .458) cubic-bezier(.2,.7,.2,1)
            calc(var(--intro-t) * .1875) forwards;
}
@keyframes introNome{ to{ opacity:1;letter-spacing:.08em;padding-left:.08em } }

/* As entradas do herói arrancam enquanto a cortina sobe. */
.heroi__arco path{ animation-delay:var(--atraso) }
.heroi__arco path:nth-child(2){ animation-delay:calc(var(--atraso) + .12s) }
.heroi__arco path:nth-child(3){ animation-delay:calc(var(--atraso) + .24s) }
html.intro-on:not(.intro-parada) .disp{ animation:introSobe .7s var(--suave) calc(var(--atraso) + .1s) both }
@keyframes introSobe{ from{ opacity:0;transform:translateY(14px) } to{ opacity:1;transform:none } }

/* Com movimento reduzido a intro NÃO desaparece: passa à versão estática,
   definida mais abaixo em html.intro-parada. O que se retira é o movimento. */


/* =========================================================================
   SCROLL — animações ligadas à posição da página
   Feitas com scroll-driven animations do CSS: correm fora da linha principal,
   sem JavaScript e sem listeners de scroll. Onde o motor não as suporta,
   um IntersectionObserver faz o mesmo com transições (ver marcacao.js).

   Regra de ouro: amplitude pequena, duração curta, uma coisa de cada vez.
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){

  /* --- variante 1: subir e aparecer --------------------------------------
     14px de percurso. Mais do que isto lê-se como efeito; menos, não se nota. */
  @keyframes scrollSobe{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:none } }

  /* --- variante 2: fotografia revelada de baixo, como a intro ------------- */
  @keyframes scrollRevela{
    from{ opacity:.35; clip-path:inset(30% 0 0 0); transform:scale(1.05) }
    to  { opacity:1;  clip-path:inset(0 0 0 0);   transform:none }
  }

  /* --- variante 3: a linha dos passos cresce com o scroll ----------------- */
  @keyframes scrollLinha{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
  @keyframes scrollLinhaV{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }

  /* --- variante 4: deriva da fotografia do herói, só em ecrã grande ------- */
  @keyframes scrollDeriva{ from{ transform:translateY(-1.6%) } to{ transform:translateY(1.6%) } }

  @supports (animation-timeline:view()){
    /* Entradas: intervalo curto de propósito. O elemento fica inteiro muito
       antes de chegar ao meio do ecrã — ninguém tem de esperar para ler. */
    .cab-seccao,
    .lista-tratar li,
    .serv,
    .zona-linha,
    .cred,
    .vantagens li,
    .faq details,
    .precos table,
    .zonas-mapa,
    .citacao{
      animation:scrollSobe .01s linear both;
      animation-timeline:view();
      /* O intervalo é medido em `cover`: começa quando o elemento toca o fundo
         do ecrã e acaba quando percorreu 30% da travessia — cerca de 300px de
         scroll. Em `entry` o percurso era de 60px e não se via nada. */
      animation-range:cover 0% cover 30%;
    }
    /* escalonamento dentro de cada grupo, para não entrarem em bloco */
    .servicos .serv:nth-child(2n){ animation-range:cover 4% cover 34% }
    .servicos .serv:nth-child(3n){ animation-range:cover 8% cover 38% }

    /* Fotografias: revelam-se em vez de aparecerem. */
    .foto-funciona img,
    .sobre .foto-arco img{
      animation:scrollRevela .01s linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 35%;
    }

    /* A linha que liga os passos cresce à medida que se desce por eles. */
    .passo::after{
      transform-origin:left top;
      animation:scrollLinhaV .01s linear both;
      animation-timeline:view();
      animation-range:cover 5% cover 45%;
    }
    @media(min-width:900px){
      .passo::after{ transform-origin:left center; animation-name:scrollLinha }
    }

    /* Deriva do herói: contínua, mínima, e só onde há espaço para a notar. */
    @media(min-width:960px){
      .heroi .foto-arco img{
        animation:scrollDeriva .01s linear both;
        animation-timeline:view();
        animation-range:entry 25% exit 85%;
      }
    }
  }

  /* --- alternativa para motores sem scroll-driven animations ------------- */
  @supports not (animation-timeline:view()){
    .anima{ opacity:0; transform:translateY(30px);
            transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1) }
    .anima.visivel{ opacity:1; transform:none }
    .anima:nth-child(2n).visivel{ transition-delay:.06s }
    .anima:nth-child(3n).visivel{ transition-delay:.12s }
  }
}

/* =========================================================================
   SCROLL — camada profunda
   Quatro escalas, cada uma com a sua linha de tempo:
     1. página   → barra de leitura, ligada ao scroll da raiz
     2. secção   → linhas de tempo nomeadas, para vários elementos coordenados
     3. grupo    → escalonamento dentro de listas
     4. elemento → paralaxe a duas velocidades, traçados a desenhar-se
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){

  /* --- 1. PÁGINA: barra de leitura ------------------------------------- */
  .progresso-leitura{
    position:sticky;top:var(--altura-cab,68px);z-index:60;height:2px;
    background:transparent;pointer-events:none;margin-bottom:-2px;
  }
  .progresso-leitura i{
    display:block;height:100%;transform-origin:left center;transform:scaleX(0);
    background:linear-gradient(90deg,var(--azul-500),var(--azul-700));
    animation:progresso .01s linear both;
    animation-timeline:scroll(root);
  }
  @keyframes progresso{ to{ transform:scaleX(1) } }

  /* --- 2. SECÇÃO: linha de tempo nomeada -------------------------------
     A secção declara uma linha de tempo e os filhos animam contra ELA, não
     contra a sua própria posição. É assim que se coreografa um conjunto. */
  .passos{ view-timeline-name:--passos; view-timeline-axis:block }
  .passo::before{
    animation:passoAcende .01s linear both;
    animation-timeline:--passos;
  }
  .passo:nth-child(1)::before{ animation-range:cover 12% cover 26% }
  .passo:nth-child(2)::before{ animation-range:cover 24% cover 38% }
  .passo:nth-child(3)::before{ animation-range:cover 36% cover 50% }
  .passo:nth-child(4)::before{ animation-range:cover 48% cover 62% }
  @keyframes passoAcende{
    from{ background:var(--azul-100); color:var(--azul-700); transform:scale(.88) }
    to  { background:var(--azul-700); color:#fff;            transform:scale(1) }
  }

  /* --- 3. ELEMENTO: paralaxe a duas velocidades ------------------------
     A moldura corta, a imagem desliza mais devagar por dentro. É a diferença
     entre as duas velocidades que cria profundidade — não o deslocamento. */
  .foto-funciona{ overflow:hidden;border-radius:var(--raio-lg) }
  .foto-funciona img{
    animation:fotoDesliza .01s linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
    will-change:transform;
  }
  @keyframes fotoDesliza{
    from{ transform:scale(1.12) translateY(-3.2%) }
    to  { transform:scale(1.12) translateY(3.2%) }
  }

  /* --- 4. ELEMENTO: os arcos das zonas desenham-se de dentro para fora -- */
  .zonas-mapa svg path{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:zonaTraca .01s linear both;
    animation-timeline:view();
  }
  .zonas-mapa svg path:nth-of-type(3){ animation-range:cover 8%  cover 30% }
  .zonas-mapa svg path:nth-of-type(2){ animation-range:cover 16% cover 40% }
  .zonas-mapa svg path:nth-of-type(1){ animation-range:cover 24% cover 50% }
  @keyframes zonaTraca{ to{ stroke-dashoffset:0 } }

  /* --- 5. TIPOGRAFIA: títulos revelados palavra a palavra --------------- */
  .pal{ display:inline-block;
    animation:palavraSobe .01s linear both;
    animation-timeline:view();
  }
  @keyframes palavraSobe{
    from{ opacity:0; transform:translateY(0.42em) rotate(1.2deg) }
    to  { opacity:1; transform:none }
  }
}
}

/* -------------------------------------------------------------------------
   INTRO sem movimento
   Com "Reduzir movimento" ligado a marca continua a aparecer — o que se
   retira é o movimento, não a identidade. Só opacidade, nada de percursos.
   ------------------------------------------------------------------------- */
html.intro-parada .intro{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:300;pointer-events:none;
  background:var(--branco);clip-path:none;
  animation:introDissolve .35s linear .95s forwards;
}
@keyframes introDissolve{ to{ opacity:0;visibility:hidden } }
html.intro-parada .intro__logo{ animation:none;clip-path:none }
html.intro-parada .intro__arco path{ animation:none;stroke-dashoffset:0 }
html.intro-parada .intro__nome{ animation:none;opacity:1;letter-spacing:.08em;padding-left:.08em }