/* Minhocare: cores e tipografia do manual de normas, com branco no lugar do verde-menta.
   Títulos: Minion Pro (marca). Enquanto não houver licença web, usa-se Crimson Pro, do mesmo registo Garamond. */

@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url(../fonts/fira-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url(../fonts/fira-sans-500.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url(../fonts/fira-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-weight: 200 900; font-display: swap; src: url(../fonts/crimson-pro-var.woff2) format("woff2"); }

:root {
  --petroleo: #005854;
  --folha: #75c696;
  --noite: #143232;
  --branco: #ffffff;
  --linha: rgb(20 50 50 / .14);
  --linha-escura: rgb(255 255 255 / .18);

  --serif: "Minion Pro", "Crimson Pro", Georgia, serif;
  --sans: "Fira Sans", system-ui, sans-serif;

  --largura: 76rem;
  --margem: clamp(1.25rem, 4vw, 3rem);
  --topo: 4.5rem;
  --raio-folha: 0 2.5rem 0 2.5rem;
  --suave: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo) + 1rem); }
body { margin: 0; font: 400 1.125rem/1.6 var(--sans); color: var(--noite); background: var(--branco);}
main { padding-top: var(--topo); }
.topo-escuro main { padding-top: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--petroleo); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--folha); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--serif); font-weight: 500; color: var(--petroleo);
  line-height: 1.05; margin: 0 0 .5em; text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); letter-spacing: -.01em; }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; max-width: 38em; }
.entrada { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }

.sr, .armadilha { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: .5rem; background: var(--branco); padding: .5rem 1rem; z-index: 60; }
.saltar:focus { left: .5rem; }

.largo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }
.estreito { max-width: 48rem; margin: 0 auto; padding: 0 var(--margem); }
.secao { padding: clamp(5rem, 11vw, 9rem) 0; }
.dividido { display: grid; gap: 3rem 5rem; }
@media (min-width: 56rem) { .dividido { grid-template-columns: 5fr 7fr; align-items: start; } }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.4rem; padding: .8rem 1.7rem;
  font: 500 1.0625rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  color: var(--branco); background: var(--petroleo);
  border: 2px solid var(--petroleo); border-radius: 999px;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--suave);
}
.botao:hover { background: var(--noite); border-color: var(--noite); transform: translateY(-2px); }
.botao-folha { background: var(--folha); border-color: var(--folha); color: var(--noite); }
.botao-folha:hover { background: var(--branco); border-color: var(--branco); color: var(--noite); }
.botao-contorno { background: transparent; border-color: var(--linha-escura); color: var(--branco); }
.botao-contorno:hover { background: var(--branco); border-color: var(--branco); color: var(--noite); }
.botao-claro { background: transparent; color: var(--petroleo); }
.botao-claro:hover { background: var(--petroleo); color: var(--branco); }
.ligacao { font-weight: 500; color: var(--petroleo); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px; }

/* Topo: fixo; transparente sobre a abertura escura até se fazer scroll. */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--topo);
  background: rgb(255 255 255 / .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
  transition: background-color .35s, border-color .35s;
}
.topo-in { max-width: var(--largura); height: 100%; margin: 0 auto; padding: 0 var(--margem); display: flex; align-items: center; gap: 2.25rem; }
.marca { color: var(--petroleo); flex: none; transition: color .35s; }
.marca .logo { width: 10.5rem; height: auto; }
.menu { margin-left: auto; }
.menu ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
.menu a { color: var(--noite); text-decoration: none; font-weight: 500; padding: .5rem 0; border-bottom: 2px solid transparent; transition: color .35s, border-color .25s; }
.menu a:hover, .menu a[aria-current] { border-color: var(--folha); }
.botao-ligar { min-height: 2.75rem; padding: .5rem 1.3rem; font-size: 1rem; }
.abrir-menu { display: none; }

.topo-escuro:not(.rolou) .topo { background: transparent; border-color: transparent; backdrop-filter: none; }
.topo-escuro:not(.rolou) .marca { color: var(--branco); }
.topo-escuro:not(.rolou) .menu a { color: var(--branco); }
.topo-escuro:not(.rolou) .botao-ligar { background: var(--folha); border-color: var(--folha); color: var(--noite); }

@media (max-width: 56rem) {
  .topo-in { gap: 1rem; }
  .botao-ligar { display: none; }
  .abrir-menu {
    display: block; margin-left: auto; font: 500 1rem var(--sans); cursor: pointer;
    color: var(--petroleo); background: transparent; border: 1.5px solid currentColor; border-radius: 999px; padding: .55rem 1.1rem;
  }
  .topo-escuro:not(.rolou) .abrir-menu { color: var(--branco); }
  .menu { position: absolute; inset: 100% 0 auto 0; margin: 0; background: var(--branco); display: none; box-shadow: 0 20px 40px rgb(20 50 50 / .15); }
  .menu.aberto { display: block; }
  .menu ul { flex-direction: column; gap: 0; padding: .5rem var(--margem) 1.25rem; }
  .menu a, .topo-escuro:not(.rolou) .menu a { display: block; padding: 1rem 0; font-size: 1.25rem; color: var(--noite); border-bottom: 1px solid var(--linha); }
}

/* Portáteis com o ecrã mais estreito: o menu aperta um pouco para caber numa linha. */
@media (min-width: 56.01rem) and (max-width: 74rem) {
  .topo-in { gap: 1.25rem; }
  .marca .logo { width: 8.75rem; }
  .menu ul { gap: 1.15rem; }
  .menu a { font-size: .95rem; }
  .botao-ligar { padding-inline: 1rem; }
}
/* Ecrãs baixos (portáteis com zoom do Windows): a abertura encolhe para os botões caberem. */
@media (min-width: 56.01rem) and (max-height: 45rem) {
  .hero { padding-block: calc(var(--topo) + 1.5rem) 4.5rem; }
  .hero .acoes { margin-top: 1.5rem; }
  .hero-preco { bottom: 1.25rem; }
}

/* ---------- Abertura: o símbolo gigante ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; display: grid; align-items: center;
  padding: calc(var(--topo) + 3rem) 0 6rem;
  color: var(--branco);
  background: radial-gradient(ellipse 70% 80% at 78% 50%, #0b6f68 0%, var(--petroleo) 35%, var(--noite) 80%);
}
.hero::after { /* grão fino para dar textura ao fundo */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-simbolo, .hero-brilho {
  position: absolute; z-index: -2; top: 50%; right: -6vw;
  width: min(92svh, 64vw); aspect-ratio: 1; translate: 0 -50%;
}
.hero-brilho { filter: blur(70px); opacity: .55; scale: 1.15; }
.hero-texto { max-width: var(--largura); width: 100%; margin: 0 auto; padding: 0 var(--margem); }
.hero h1 { color: var(--branco); font-weight: 400; font-size: clamp(2.4rem, min(6vw, 10svh), 6rem); line-height: 1; max-width: none; margin-bottom: .35em; }
.hero .entrada { max-width: 36rem; color: rgb(255 255 255 / .85); }
.hero .acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero-preco {
  position: absolute; left: 0; right: 0; bottom: 2rem; margin: 0 auto; max-width: var(--largura); padding: 0 var(--margem);
  font-size: 1rem; color: rgb(255 255 255 / .75);
}
.hero-preco strong { color: var(--folha); font: 500 1.6rem var(--serif); margin: 0 .2rem; }

.simbolo { width: 100%; height: 100%; overflow: visible; }
.simbolo .folha, .simbolo .folha path, .simbolo-rodar { transform-box: fill-box; transform-origin: center; }

.titulo-revelar > span { display: block; overflow: hidden; padding-bottom: .06em; }
.titulo-revelar > span > span { display: block; }

@media (max-width: 56rem) {
  .hero { align-items: end; padding-bottom: 5.5rem; }
  .hero-simbolo, .hero-brilho { top: 30%; right: -22vw; width: 105vw; }
  .hero-texto { padding-top: 22vh; }
}

@media (prefers-reduced-motion: no-preference) {
  /* As quatro folhas chegam dos cantos e encaixam no símbolo; depois o símbolo roda devagar. */
  .hero .folha path { animation: folha-chega 1.6s var(--suave) both; }
  .hero .folha-1 path { animation-delay: .1s; }
  .hero .folha-3 path { animation-delay: .22s; }
  .hero .folha-0 path { animation-delay: .34s; }
  .hero .folha-2 path { animation-delay: .46s; }
  .hero .simbolo-rodar { animation: rodar 90s linear 1.8s infinite; }
  .titulo-revelar > span > span { animation: subir 1.1s var(--suave) both; animation-delay: .7s; }
  .titulo-revelar > span + span > span { animation-delay: .82s; }
  .hero .entrada, .hero .acoes, .hero-preco { animation: surgir 1s var(--suave) both 1.1s; }
  .hero .acoes { animation-delay: 1.2s; }
  .hero-preco { animation-delay: 1.35s; }
  .topo-escuro .topo { animation: surgir .8s ease-out both .9s; }
}
@keyframes folha-chega {
  from { opacity: 0; transform: translate(calc(var(--dx) * 70px), calc(var(--dy) * 70px)) rotate(-120deg) scale(.3); }
}
@keyframes rodar { to { rotate: 360deg; } }
@keyframes subir { from { transform: translateY(105%); } }
@keyframes surgir { from { opacity: 0; transform: translateY(1rem); } }

/* ---------- História: o símbolo roda uma folha por cada forma de cuidar ---------- */
.historia { background: var(--branco); }
.historia-fixo { max-width: var(--largura); margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) var(--margem); display: grid; gap: 3rem; }
.historia-palco { position: relative; display: grid; place-items: center; }
.historia-simbolo { position: relative; width: min(22rem, 60vw); aspect-ratio: 1; }
.historia-numero { display: none; }
.historia-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.historia h2 { font: 600 .95rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--petroleo); margin: 0; }
.historia-contador { display: none; margin: 0; font: 400 1rem/1 var(--serif); color: var(--noite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.historia-contador strong { font-size: 2.25rem; font-weight: 500; color: var(--petroleo); }
.historia-separadores { display: none; }
.historia-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.5rem; }
.historia-passos h3 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.02; margin: 0 0 .5em; text-wrap: balance; color: var(--petroleo); }
.historia-passos p { font-size: 1.2rem; max-width: 32rem; margin: 0 0 1.25rem; }
.historia-pontos { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .65rem; max-width: 32rem; }
.historia-pontos li { position: relative; padding-left: 1.9rem; }
.historia-pontos li::before { /* uma pequena folha do símbolo como marcador */
  content: ""; position: absolute; left: 0; top: .35em; width: .95rem; height: .95rem;
  background: linear-gradient(135deg, var(--folha), var(--petroleo)); border-radius: 0 .7rem 0 .7rem;
}
.historia-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.ligacao-seta { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none; color: var(--petroleo); border-bottom: 2px solid var(--folha); padding-bottom: .15rem; }
.ligacao-seta::after { content: "→"; transition: transform .3s var(--suave); }
.ligacao-seta:hover::after { transform: translateX(.3rem); }
.historia-setas { display: none; }

/* Com JavaScript: a secção fica presa ao ecrã e os passos trocam com o scroll, as setas ou os separadores. */
.js-historia .historia { height: 220svh; } /* 4 passos em pouco mais de um ecrã de scroll */
.js-historia .historia-fixo {
  position: sticky; top: 0; height: 100svh; padding-block: calc(var(--topo) + 1.5rem) 2rem;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 1.5rem; align-items: center;
}
.js-historia .historia-simbolo { width: min(30svh, 62vw); }
.js-historia .historia-texto { min-width: 0; align-self: start; display: flex; flex-direction: column; }
.js-historia .historia-contador { display: block; }
.js-historia .historia-separadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 2rem; }
.historia-separador {
  font: 500 1rem/1.2 var(--sans); color: rgb(20 50 50 / .55); background: none; border: 0; padding: 0 0 .6rem;
  text-align: left; cursor: pointer; display: grid; gap: .55rem; transition: color .3s;
}
.historia-separador span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historia-separador i { display: block; height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.historia-separador i::after { content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--petroleo); }
.historia-separador:hover, .historia-separador[aria-current="step"] { color: var(--petroleo); }
.js-historia .historia-passos { display: grid; position: relative; }
.js-historia .historia-passos > li {
  grid-area: 1 / 1; opacity: 0; transform: translateY(2rem); visibility: hidden;
  transition: opacity .4s var(--suave), transform .5s var(--suave), visibility 0s .4s;
}
.js-historia .historia-passos > li.ativo { opacity: 1; transform: none; visibility: visible; transition-delay: .05s, .05s, 0s; }
.js-historia .historia-passos > li.passou { transform: translateY(-2rem); }
.js-historia .historia-pontos li { opacity: 0; transform: translateX(-.75rem); transition: opacity .5s, transform .6s var(--suave); }
.js-historia .ativo .historia-pontos li { opacity: 1; transform: none; }
.js-historia .ativo .historia-pontos li:nth-child(2) { transition-delay: .12s; }
.js-historia .ativo .historia-pontos li:nth-child(3) { transition-delay: .24s; }
.js-historia .historia-setas { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.seta {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1.5px solid var(--petroleo); background: var(--branco);
  color: var(--petroleo); display: grid; place-items: center; cursor: pointer; transition: background-color .3s, color .3s, transform .3s var(--suave);
}
.seta svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seta:hover:not(:disabled) { background: var(--petroleo); color: var(--branco); transform: scale(1.06); }
.seta:disabled { opacity: .3; cursor: default; }
.historia-dica { font-size: 1rem; color: rgb(20 50 50 / .6); margin-left: .5rem; }
.historia .simbolo-rodar { rotate: var(--rot, 0deg); transition: rotate .6s var(--suave); }
.historia .folha { transition: opacity .6s, transform .9s var(--suave); }
.historia .folha path { transition: fill-opacity .6s, stroke-opacity .6s; }
.js-historia .historia .folha { cursor: pointer; }
.js-historia .historia .folha path { fill-opacity: 0; stroke: var(--petroleo); stroke-width: .3; stroke-opacity: .45; }
.js-historia .historia .folha:hover path { stroke-opacity: .9; }
.js-historia .historia .folha.ativa { transform: translate(calc(var(--dx) * 4px), calc(var(--dy) * 4px)) scale(1.08); }
.js-historia .historia .folha.ativa path { fill-opacity: 1; stroke-opacity: 0; }
.historia-palco::before { /* um halo suave que acompanha a folha acesa */
  content: ""; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(117 198 150 / .28), transparent 70%);
  translate: var(--hx, 0) var(--hy, 0); transition: translate 1s var(--suave);
}
.js-historia .historia-numero {
  display: block; position: absolute; inset: auto auto 0 0; font: 300 clamp(6rem, 16svh, 11rem)/1 var(--serif);
  color: transparent; -webkit-text-stroke: 1px rgb(0 88 84 / .22); font-variant-numeric: tabular-nums;
}

@media (max-width: 55.99rem) {
  /* No telemóvel tudo tem de caber num ecrã, por cima da barra de contacto. */
  .js-historia .historia-fixo { padding-block: calc(var(--topo) + .75rem) 5.5rem; gap: 1rem; }
  .js-historia .historia-simbolo { width: min(24svh, 52vw); }
  .js-historia .historia-numero { font-size: 15svh; }
  .js-historia .historia-cabeca { margin-bottom: 1rem; }
  .js-historia .historia-separadores { margin-bottom: 1.25rem; }
  .js-historia .historia-pontos { display: none; }
  .js-historia .historia-setas { margin-top: 1.25rem; }
}
@media (max-width: 55.99rem) and (max-height: 44rem) {
  /* Ecrãs baixos: os separadores já servem para mudar de passo. */
  .js-historia .historia-setas { display: none; }
}
@media (max-width: 30rem) {
  .historia h2 { font-size: .8rem; }
  .historia-separador { font-size: .8rem; }
  .historia-passos h3 { font-size: 2rem; }
  .historia-passos p { font-size: 1.125rem; }
  .js-historia .historia-pontos { gap: .4rem; }
  .historia-dica { display: none; }
}
@media (min-width: 56rem) {
  .historia-fixo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .historia-simbolo { width: min(28rem, 36vw); }
  .js-historia .historia-fixo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
  .js-historia .historia-simbolo { width: min(62svh, 36vw); }
  .js-historia .historia-texto { align-self: center; }
}

/* Ecrãs de portátil mais baixos: a secção presa compacta-se para caber tudo. */
@media (min-width: 56rem) and (max-height: 47rem) {
  .js-historia .historia-fixo { padding-block: calc(var(--topo) + .75rem) 1rem; }
  .js-historia .historia-cabeca { margin-bottom: 1rem; }
  .js-historia .historia-separadores { margin-bottom: 1.25rem; }
  .js-historia .historia-passos h3 { font-size: clamp(2rem, 7svh, 3rem); }
  .js-historia .historia-pontos { gap: .35rem; margin-bottom: 1.25rem; }
  .js-historia .historia-setas { margin-top: 1rem; }
  .js-historia .historia-simbolo { width: min(52svh, 34vw); }
}
@media (min-width: 56rem) and (max-height: 40rem) {
  .js-historia .historia-pontos { display: none; }
}

/* ---------- Faixa de especialidades ---------- */
.faixa-especialidades { background: var(--noite); padding: clamp(3rem, 6vw, 5rem) 0; overflow: hidden; display: grid; gap: .5rem; }
.faixa { overflow: hidden; }
.faixa-trilho { display: flex; width: max-content; }
.faixa ul { list-style: none; display: flex; margin: 0; padding: 0; }
.faixa li {
  display: flex; align-items: center; white-space: nowrap;
  font: 400 clamp(2.5rem, 6.5vw, 5.5rem)/1.15 var(--serif); color: var(--branco);
}
.faixa li::after {
  content: ""; width: .5em; height: .5em; margin: 0 .6em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60.15 60.15' fill='%2375c696'%3E%3Cpath d='M23.69 36.46v10.91c0 7.06 5.72 12.78 12.77 12.78V49.23c0-7.05-5.72-12.77-12.77-12.77M36.46 23.69V12.78C36.46 5.72 30.74 0 23.69 0v10.91c0 7.06 5.72 12.78 12.77 12.78M12.78 23.69C5.72 23.69 0 29.41 0 36.46h10.91c7.06 0 12.78-5.72 12.78-12.77ZM36.46 36.46h10.92c7.05 0 12.77-5.72 12.77-12.77H49.24c-7.06 0-12.78 5.72-12.78 12.77'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faixa-1 li { color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .55); }
@media (prefers-reduced-motion: no-preference) {
  .faixa-0 .faixa-trilho { animation: correr 50s linear infinite; }
  .faixa-1 .faixa-trilho { animation: correr 60s linear infinite reverse; }
}
@keyframes correr { to { transform: translateX(-50%); } }

/* ---------- Planos na página inicial ---------- */
.cabeca-secao { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: 3rem; }
.cabeca-secao h2 { margin: 0; }
.cabeca-secao p { margin: 0; }
.linhas-planos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.linhas-planos li { border-bottom: 1px solid var(--linha); }
.linhas-planos a {
  --x: 50%; --y: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: .5rem 2rem; align-items: center;
  padding: 2.25rem min(1.5rem, var(--margem)); margin: 0 calc(-1 * min(1.5rem, var(--margem))); border-radius: 1.5rem;
  color: inherit; text-decoration: none;
  transition: color .35s, background-color .35s;
}
.linhas-planos a::before { /* luz que segue o rato */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(28rem circle at var(--x) var(--y), rgb(117 198 150 / .45), transparent 60%), var(--petroleo);
}
.linhas-planos a:hover, .linhas-planos a:focus-visible { color: var(--branco); }
.linhas-planos a:hover::before, .linhas-planos a:focus-visible::before { opacity: 1; }
.lp-nome { font: 500 clamp(1.9rem, 3.2vw, 2.75rem)/1.05 var(--serif); color: var(--petroleo); transition: color .35s; }
.lp-preco { white-space: nowrap; font: 400 clamp(2.25rem, 4vw, 3.5rem)/1 var(--serif); color: var(--petroleo); font-variant-numeric: lining-nums; transition: color .35s; }
.lp-preco small { font: 400 1rem var(--sans); margin-left: .4rem; }
.linhas-planos a:hover .lp-nome, .linhas-planos a:hover .lp-preco { color: var(--branco); }
@media (min-width: 56rem) { .linhas-planos a { grid-template-columns: 2fr 3fr 1.4fr; } .lp-preco { text-align: right; } }
.nota-prototipo { font-size: .95rem; margin-top: 1.5rem; color: #5c7070; }

/* ---------- Pessoas ---------- */
.direcao { border-top: 1px solid var(--linha); }
.pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.pessoas li { display: grid; grid-template-columns: 7rem 1fr; gap: 1.75rem; align-items: start; }
.pessoas h3 { margin-bottom: .1rem; font-size: 1.9rem; }
.cargo { font-weight: 500; color: var(--petroleo); margin-bottom: .5rem; }
.foto-pessoa {
  width: 7rem; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  font: 500 2.25rem var(--serif); color: var(--branco);
  background: linear-gradient(150deg, var(--folha), var(--petroleo) 75%);
  border-radius: 0 3.5rem 0 3.5rem;
}

/* ---------- Contacto ---------- */
.contacto {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(5rem, 11vw, 9rem) 0; background: var(--petroleo); color: rgb(255 255 255 / .88);
}
.contacto h2 { color: var(--branco); }
.contacto-simbolo { position: absolute; z-index: -1; width: 46rem; right: -14rem; bottom: -16rem; opacity: .14; }
@media (prefers-reduced-motion: no-preference) { .contacto .simbolo-rodar { animation: rodar 120s linear infinite; } }
.ou a { color: var(--folha); font: 500 1.6rem var(--serif); }

/* Formulários */
.formulario {
  display: grid; gap: 1.25rem; background: var(--branco); color: var(--noite);
  padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--raio-folha);
  box-shadow: 0 30px 60px -30px rgb(20 50 50 / .45);
}
.formulario label, .pessoas-campo > span, legend { display: grid; gap: .4rem; font-weight: 500; }
.formulario input:not([type=checkbox], [type=radio]) {
  font: inherit; min-height: 3.4rem; padding: .6rem 1rem; color: var(--noite);
  border: 1.5px solid var(--linha); border-radius: .75rem; background: var(--branco);
  transition: border-color .2s, box-shadow .2s;
}
.formulario input:focus { border-color: var(--petroleo); box-shadow: 0 0 0 4px rgb(117 198 150 / .3); outline: none; }
.formulario .caixa { display: flex; gap: .75rem; font-weight: 400; font-size: 1rem; align-items: flex-start; }
.caixa input { width: 1.35rem; height: 1.35rem; margin-top: .15rem; accent-color: var(--petroleo); flex: none; }
.formulario .botao { justify-self: start; }
.aviso-enviado { padding: 1rem 1.25rem; background: rgb(117 198 150 / .2); border-left: 4px solid var(--petroleo); border-radius: .5rem; font-weight: 500; }
.erros { padding-left: 1.25rem; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--noite); color: rgb(255 255 255 / .8); padding: 4.5rem 0 6.5rem; font-size: 1rem; }
.rodape-in { max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); display: grid; gap: 2.5rem; }
.rodape .logo { width: 10rem; color: var(--branco); margin-bottom: 1rem; }
.rodape h2 { font: 600 1rem var(--sans); color: var(--folha); margin-bottom: .75rem; }
.rodape a { color: var(--branco); }
@media (min-width: 56rem) { .rodape-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .rodape { padding-bottom: 4.5rem; } }

/* Telemóvel: um botão redondo no canto que abre as formas de contacto, em vez de uma barra fixa. */
.contacto-rapido { position: fixed; z-index: 30; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .6rem; }
.contacto-rapido summary {
  list-style: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; cursor: pointer;
  border-radius: 0 1.6rem 0 1.6rem; background: var(--petroleo); color: var(--branco);
  box-shadow: 0 .75rem 1.75rem -.5rem rgb(20 50 50 / .55), 0 0 0 3px rgb(117 198 150 / .45);
  transition: transform .3s var(--suave), border-radius .3s var(--suave);
}
.contacto-rapido summary::-webkit-details-marker { display: none; }
.contacto-rapido, .contacto-rapido[open] { border: 0; }
.contacto-rapido summary { padding: 0; font-size: 1rem; }
.contacto-rapido summary::after { content: none; }
.contacto-rapido summary svg { width: 1.5rem; height: 1.5rem; }
.contacto-rapido .icone-abrir { fill: currentColor; }
.contacto-rapido .icone-fechar { display: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.contacto-rapido[open] summary { background: var(--noite); border-radius: 50%; }
.contacto-rapido[open] .icone-abrir { display: none; }
.contacto-rapido[open] .icone-fechar { display: block; }
.contacto-rapido nav { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.contacto-rapido nav a {
  display: flex; gap: .5rem; align-items: baseline; padding: .7rem 1.1rem; border-radius: 999px; text-decoration: none;
  background: var(--branco); color: var(--noite); font-size: .95rem; box-shadow: 0 .5rem 1.5rem -.5rem rgb(20 50 50 / .45);
  animation: contacto-entra .3s var(--suave) both;
}
.contacto-rapido nav a span { font-weight: 600; color: var(--petroleo); }
.contacto-rapido nav a:nth-child(2) { animation-delay: .04s; }
.contacto-rapido nav a:nth-child(3) { animation-delay: .08s; }
@keyframes contacto-entra { from { opacity: 0; transform: translateY(.75rem) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .contacto-rapido nav a { animation: none; } }
@media (min-width: 56rem) { .contacto-rapido { display: none; } }

/* ---------- Página de planos ---------- */
.cabeca-pagina {
  position: relative; overflow: hidden; isolation: isolate; color: var(--branco);
  padding: calc(var(--topo) + clamp(3rem, 8vw, 6rem)) 0 clamp(3rem, 7vw, 5rem);
  background: radial-gradient(ellipse 60% 90% at 85% 40%, #0b6f68, var(--petroleo) 40%, var(--noite) 85%);
}
.pagina-planos main { padding-top: 0; }
.cabeca-pagina h1 { color: var(--branco); font-weight: 400; }
.cabeca-pagina .entrada { color: rgb(255 255 255 / .85); }
.cabeca-simbolo { position: absolute; z-index: -1; width: min(34rem, 70vw); right: -6rem; top: 50%; translate: 0 -50%; opacity: .9; }
@media (prefers-reduced-motion: no-preference) { .cabeca-pagina .simbolo-rodar { animation: rodar 100s linear infinite; } .cabeca-pagina .folha path { animation: folha-chega 1.4s var(--suave) both; } }
.aviso-prototipo { display: inline-block; font-size: .95rem; padding: .4rem .9rem; background: #fff4d6; color: var(--noite); border-radius: .4rem; }

.planos { padding-top: 4rem; }
.grelha-planos { display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 60rem) { .grelha-planos { grid-template-columns: repeat(3, 1fr); } }
.plano { display: flex; flex-direction: column; padding: 2.25rem; border: 1.5px solid var(--linha); border-radius: var(--raio-folha); transition: transform .4s var(--suave), box-shadow .4s; }
.plano:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -35px rgb(20 50 50 / .5); }
.plano h2 { font-size: 2.1rem; }
.plano-preco { font-size: 1rem; }
.plano-preco span { display: block; font: 500 3.25rem/1 var(--serif); color: var(--petroleo); margin-bottom: .25rem; }
.plano-lista { list-style: none; margin: 0 0 2rem; padding: 0; flex: 1; }
.plano-lista li { padding: .65rem 0 .65rem 1.9rem; border-top: 1px solid var(--linha); position: relative; font-size: 1rem; }
.plano-lista li::before { position: absolute; left: 0; top: .6rem; font-weight: 600; }
.plano-lista .sim::before { content: "✓"; color: var(--petroleo); }
.plano-lista .nao { color: #7a8c8c; }
.plano-lista .nao::before { content: "–"; }
.plano .botao { align-self: flex-start; }
.plano-destaque { background: var(--petroleo); color: rgb(255 255 255 / .88); border-color: var(--petroleo); }
.plano-destaque h2, .plano-destaque .plano-preco span { color: var(--branco); }
.plano-destaque .plano-lista li { border-color: var(--linha-escura); }
.plano-destaque .plano-lista .sim::before { color: var(--folha); }
.plano-destaque .plano-lista .nao { color: rgb(255 255 255 / .5); }
.plano-escolha { font-weight: 600; color: var(--folha); margin-bottom: .5rem; }
@media (min-width: 60rem) { .plano-destaque { margin-block: -1rem; padding-block: 3.25rem; } }

.simulador { border-top: 1px solid var(--linha); }
.total { margin-top: 2rem; padding: 2rem; background: var(--noite); color: rgb(255 255 255 / .8); border-radius: var(--raio-folha); }
.total p { margin: 0; }
.total-rotulo { font-weight: 500; }
.total-valor { font: 400 clamp(3.25rem, 7vw, 5rem)/1.1 var(--serif); color: var(--branco); font-variant-numeric: tabular-nums; }
.simulador .formulario { border: 1.5px solid var(--linha); box-shadow: none; }
.escolha-plano { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.escolha-plano legend { margin-bottom: .5rem; }
.escolha-plano label {
  display: flex; align-items: center; gap: .75rem; font-weight: 400; cursor: pointer;
  padding: .85rem 1rem; border: 1.5px solid var(--linha); border-radius: .75rem;
  transition: border-color .2s, background-color .2s, color .2s;
}
.escolha-plano label:has(input:checked) { border-color: var(--petroleo); background: var(--petroleo); color: var(--branco); font-weight: 500; }
.escolha-plano input { accent-color: var(--folha); width: 1.2rem; height: 1.2rem; }
.pessoas-campo { display: grid; gap: .4rem; }
.contador { display: flex; align-items: center; gap: .5rem; }
.contador button {
  width: 3.4rem; height: 3.4rem; font: 500 1.5rem var(--sans); cursor: pointer;
  color: var(--petroleo); background: var(--branco); border: 1.5px solid var(--linha); border-radius: 50%;
  transition: border-color .2s, transform .15s;
}
.contador button:hover { border-color: var(--petroleo); }
.contador button:active { transform: scale(.92); }
.formulario .contador input { width: 4.5rem; text-align: center; font-weight: 600; }

.duas-colunas { display: grid; gap: 3rem; }
@media (min-width: 56rem) { .duas-colunas { grid-template-columns: 1fr 1fr; } }
.instituicoes { background: var(--noite); color: rgb(255 255 255 / .85); }
.instituicoes h3 { font-size: 2.25rem; color: var(--branco); }
.instituicoes .ligacao { color: var(--folha); }

details { border-bottom: 1px solid var(--linha); }
summary { cursor: pointer; list-style: none; padding: 1.4rem 2.5rem 1.4rem 0; position: relative; font-weight: 500; font-size: 1.15rem; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.75rem; width: .7rem; height: .7rem;
  border-right: 2px solid var(--petroleo); border-bottom: 2px solid var(--petroleo);
  transform: rotate(45deg); transition: transform .3s var(--suave);
}
details[open] summary::after { transform: rotate(-135deg); }
details p { padding-bottom: 1.25rem; }
@media (prefers-reduced-motion: no-preference) { details[open] p { animation: surgir .35s ease-out; } }

/* ---------- Clínica ---------- */
.factos { display: flex; flex-wrap: wrap; gap: 1.5rem 3.5rem; margin: 2.5rem 0 0; }
.factos dt { font-size: .95rem; color: var(--folha); font-weight: 500; }
.factos dd { margin: .2rem 0 0; font: 400 1.35rem/1.3 var(--serif); color: var(--branco); }
.factos a { color: var(--branco); }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 3rem; }
.filtro {
  font: 500 1rem var(--sans); color: var(--noite); cursor: pointer;
  padding: .6rem 1.1rem; border: 1.5px solid var(--linha); border-radius: 999px; background: var(--branco);
  transition: background-color .25s, color .25s, border-color .25s;
}
.filtro:hover { border-color: var(--petroleo); }
.filtro[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: var(--branco); }

.grelha-medicos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 42vw), 1fr)); }
.medico[hidden] { display: none; }
.medico h3 { font-size: 1.5rem; margin: 1.1rem 0 .15rem; }
.medico p { margin: 0; color: #4c6464; }
.medico-foto {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; display: grid; place-items: center;
  background: radial-gradient(circle at 70% 25%, #0b6f68, var(--petroleo) 45%, var(--noite));
  border-radius: 0 5rem 0 5rem;
  transition: border-radius .6s var(--suave);
}
.medico-foto span { font: 400 clamp(3rem, 6vw, 4.5rem)/1 var(--serif); color: var(--branco); transition: transform .6s var(--suave); }
.medico-foto::after { /* uma folha do símbolo que cresce ao passar o rato */
  content: ""; position: absolute; right: -18%; bottom: -18%; width: 60%; aspect-ratio: 1;
  background: linear-gradient(135deg, var(--folha), transparent 70%);
  border-radius: 0 100% 0 100%; opacity: .35; transition: transform .7s var(--suave), opacity .5s;
}
.medico:hover .medico-foto { border-radius: 5rem 0 5rem 0; }
.medico:hover .medico-foto span { transform: scale(1.08); }
.medico:hover .medico-foto::after { transform: translate(-25%, -25%) rotate(90deg) scale(1.3); opacity: .6; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

.marcar { padding: clamp(5rem, 11vw, 9rem) 0; background: var(--noite); color: rgb(255 255 255 / .85); }
.marcar h2, .marcar h3 { color: var(--branco); }
.lista-passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 2rem; }
.lista-passos li { counter-increment: passo; display: grid; grid-template-columns: 3.25rem 1fr; gap: .25rem 1.25rem; }
.lista-passos li::before {
  content: counter(passo); grid-row: span 2; display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  font: 500 1.6rem/1 var(--serif); color: var(--noite); background: var(--folha); border-radius: 0 1.6rem 0 1.6rem;
}
.lista-passos h3 { font-size: 1.6rem; margin: .35rem 0 0; }
.lista-passos p { margin: 0; }
@media (max-width: 40rem) {
  .grelha-medicos { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .medico h3 { font-size: 1.2rem; }
  .medico p { font-size: .95rem; }
  .medico-foto { border-radius: 0 3rem 0 3rem; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margem) * -1); padding: 0 var(--margem) .5rem; scrollbar-width: none; }
  .filtro { flex: none; }
}

/* ---------- Parceiros, Sobre, Contactos, Perguntas ---------- */
.grelha-parceiros { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.parceiro {
  position: relative; overflow: hidden; padding: 1.5rem 1.5rem 1.75rem; border: 1.5px solid var(--linha); border-radius: 0 1.75rem 0 1.75rem;
  transition: border-color .3s, background-color .3s, color .3s;
}
.parceiro h3, .parceiro h4 { font: 500 1.45rem/1.15 var(--serif); color: var(--petroleo); margin: 0 0 .25rem; }
.parceiro[hidden], .grupo-local[hidden] { display: none; }
.filtros-parceiros { display: grid; gap: 1rem; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--linha); }
.filtro-linha { display: grid; gap: .6rem; }
.filtro-linha .filtros { margin-bottom: 0; }
.filtro-rotulo { font: 600 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--petroleo); }
.filtro small { font-size: .8em; opacity: .6; margin-left: .2rem; font-variant-numeric: tabular-nums; }
.filtro-perto { display: inline-flex; align-items: center; gap: .4rem; border-style: dashed; border-color: var(--petroleo); color: var(--petroleo); }
.filtro-perto svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.perto-aviso { margin: 0; font-size: .95rem; color: #4c6464; }
.grupo-local + .grupo-local { margin-top: 3.5rem; }
.grupo-local-titulo {
  display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1.25rem;
  font: 500 clamp(1.75rem, 3vw, 2.4rem)/1.1 var(--serif); color: var(--noite);
}
.grupo-local-titulo::before { /* folha do símbolo a marcar cada concelho */
  content: ""; align-self: center; width: 1.1rem; height: 1.1rem; flex: none;
  background: linear-gradient(135deg, var(--folha), var(--petroleo)); border-radius: 0 .8rem 0 .8rem;
}
.grupo-local-titulo span { font: 500 1rem var(--sans); color: rgb(20 50 50 / .5); font-variant-numeric: tabular-nums; }
.sem-resultados { padding: 2rem; border: 1.5px dashed var(--linha); border-radius: 0 1.75rem 0 1.75rem; text-align: center; }
@media (min-width: 56rem) {
  .filtro-linha { grid-template-columns: 6rem 1fr; align-items: start; }
  .filtro-rotulo { padding-top: .95rem; }
}
.parceiro p { margin: 0; color: #4c6464; font-size: 1rem; }
.parceiro:hover { background: var(--petroleo); border-color: var(--petroleo); }
.parceiro:hover h3, .parceiro:hover h4 { color: var(--branco); }
.parceiro:hover p { color: var(--folha); }

.texto-longo p { font-size: 1.25rem; }

.canais { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 56rem) { .canais { grid-template-columns: repeat(4, 1fr); } }
.canais a {
  display: grid; gap: .5rem; height: 100%; padding: 1.75rem; text-decoration: none; color: var(--noite);
  border: 1.5px solid var(--linha); border-radius: 0 2rem 0 2rem; transition: background-color .3s, border-color .3s, transform .3s var(--suave);
}
.canais span { color: #4c6464; font-weight: 500; }
.canais strong { font: 500 1.5rem/1.2 var(--serif); color: var(--petroleo); overflow-wrap: anywhere; }
.canais a:hover { background: var(--petroleo); border-color: var(--petroleo); transform: translateY(-4px); }
.canais a:hover span { color: var(--folha); }
.canais a:hover strong { color: var(--branco); }

.pesquisa input {
  width: 100%; font: inherit; font-size: 1.15rem; min-height: 3.75rem; padding: .75rem 1.25rem;
  border: 1.5px solid var(--linha); border-radius: 999px; margin-bottom: 2rem;
}
.pesquisa input:focus { outline: none; border-color: var(--petroleo); box-shadow: 0 0 0 4px rgb(117 198 150 / .3); }
.grupo-perguntas { margin-bottom: 3rem; }
.grupo-perguntas h2 { font-size: 2rem; margin-bottom: .25rem; }
.grupo-perguntas[hidden], [data-pergunta][hidden] { display: none; }
.medico-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ---------- Lares, Empresas, textos legais ---------- */
.grelha-beneficios { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: 0 2.5rem 0 2.5rem; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.grelha-beneficios.duas { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.grelha-beneficios li { background: var(--branco); padding: 2rem; transition: background-color .35s; }
.grelha-beneficios h3 { font-size: 1.6rem; margin-bottom: .4rem; transition: color .35s; }
.grelha-beneficios p { margin: 0; transition: color .35s; }
.grelha-beneficios li:hover { background: var(--petroleo); }
.grelha-beneficios li:hover h3 { color: var(--branco); }
.grelha-beneficios li:hover p { color: rgb(255 255 255 / .85); }
.texto-legal h2 { font-size: 1.9rem; margin-top: 2.5rem; }
.parceiro .parceiro-desconto { margin-top: .6rem; font-weight: 600; color: var(--petroleo); }
.parceiro:hover .parceiro-desconto { color: var(--branco); }

/* ---------- Fotografias da clínica ---------- */
/* Cabeçalho com fotografia: a imagem fica por trás, tingida de petróleo, a aproximar-se devagar. */
.cabeca-pagina.com-foto { background: var(--noite); min-height: min(42rem, 88svh); display: grid; align-items: end; }
.cabeca-foto { position: absolute; inset: 0; z-index: -2; }
.cabeca-foto img { width: 100%; height: 100%; object-fit: cover; }
.cabeca-pagina.com-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(20 50 50 / .55) 0%, rgb(20 50 50 / .1) 35%, rgb(20 50 50 / .92) 100%),
    linear-gradient(90deg, rgb(0 88 84 / .75), rgb(0 88 84 / 0) 65%);
}
.com-foto .cabeca-simbolo { opacity: .55; mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) {
  .cabeca-foto img { animation: aproximar 18s ease-out both; }
}
@keyframes aproximar { from { transform: scale(1.12); } }

/* Por dentro: a receção vista por uma janela em forma de folha que abre até ocupar o ecrã. */
.por-dentro { position: relative; background: var(--branco); }
.por-dentro-fixo { position: relative; display: grid; place-items: center; padding: clamp(3rem, 8vw, 6rem) var(--margem); }
.por-dentro-janela { margin: 0; width: 100%; max-width: var(--largura); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0 6rem 0 6rem; }
.por-dentro-janela img { width: 100%; height: 100%; object-fit: cover; }
.por-dentro-texto { max-width: var(--largura); width: 100%; margin-top: 2rem; }
.por-dentro-texto h2 { margin: 0 0 .5rem; }
.js-historia .por-dentro { height: 230svh; }
.js-historia .por-dentro-fixo { position: sticky; top: 0; height: 100svh; padding: 0; overflow: hidden; }
.js-historia .por-dentro-janela {
  position: absolute; inset: 0; max-width: none; aspect-ratio: auto; border-radius: 0;
  /* --p vai de 0 (folha pequena) a 1 (ecrã inteiro) */
  --q: calc(1 - var(--p, 0));
  clip-path: inset(calc(var(--q) * 22%) calc(var(--q) * 28%) round 0 calc(var(--q) * 14rem) 0 calc(var(--q) * 14rem));
}
.js-historia .por-dentro-janela img { transform: scale(calc(1.25 - var(--p, 0) * .25)); }
.js-historia .por-dentro-janela::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(20 50 50 / .85));
  opacity: var(--p, 0);
}
.js-historia .por-dentro-texto {
  position: absolute; left: 50%; bottom: clamp(2.5rem, 8svh, 5rem); translate: -50% 0; width: min(var(--largura), 100% - 2 * var(--margem));
  color: var(--branco); opacity: clamp(0, (var(--p, 0) - .65) * 4, 1); transform: translateY(calc((1 - clamp(0, (var(--p, 0) - .65) * 4, 1)) * 2rem));
}
.js-historia .por-dentro-texto h2 { color: var(--branco); font-size: clamp(2.5rem, 6vw, 5rem); }
.js-historia .por-dentro-texto p { font-size: 1.25rem; max-width: 34rem; color: rgb(255 255 255 / .88); }

/* Mosaico com cantos de folha e visor em grande. */
.mosaico { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
.mosaico li { min-width: 0; }
.mosaico-h { grid-column: span 2; }
.mosaico button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--noite); cursor: zoom-in; overflow: hidden; border-radius: 0 3rem 0 3rem; }
.mosaico li:nth-child(even) button { border-radius: 3rem 0 3rem 0; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform .8s var(--suave), opacity .4s; }
.mosaico-v img { aspect-ratio: 3 / 4; }
.mosaico button:hover img, .mosaico button:focus-visible img { transform: scale(1.05); opacity: .9; }
@media (min-width: 56rem) {
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 12rem; }
  .mosaico-h { grid-column: span 2; grid-row: span 2; }
  .mosaico-v { grid-row: span 2; }
  .mosaico img, .mosaico-v img { aspect-ratio: auto; }
}
.visor { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(20 50 50 / .96); color: var(--branco); }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: transparent; }
.visor figure { margin: 0; display: grid; gap: 1rem; justify-items: center; padding: 4rem max(16px, 5vw); }
.visor img { max-width: min(100%, 75rem); max-height: 78svh; object-fit: contain; border-radius: 0 2rem 0 2rem; }
.visor figcaption { font-size: 1rem; color: rgb(255 255 255 / .8); text-align: center; }
.visor .seta { position: absolute; top: 50%; translate: 0 -50%; background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .5); color: var(--branco); }
.visor .seta:hover { background: var(--branco); color: var(--petroleo); }
.visor-anterior { left: max(16px, 2vw); }
.visor-seguinte { right: max(16px, 2vw); }
.visor-fechar { position: absolute; top: 1.25rem; right: max(16px, 2vw); font: 500 1rem var(--sans); color: var(--branco); background: none; border: 1.5px solid rgb(255 255 255 / .5); border-radius: 999px; padding: .55rem 1.2rem; cursor: pointer; }
.visor-fechar:hover { background: var(--branco); color: var(--petroleo); }
.visor-contador { position: absolute; top: 1.6rem; left: max(16px, 2vw); margin: 0; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .7); }
@media (max-width: 40rem) { .visor .seta { top: auto; bottom: 1.5rem; translate: none; } }

/* Página inicial: a entrada da clínica em fundo, com uma folha-fotografia por cima. */
.visita { position: relative; overflow: hidden; isolation: isolate; padding: clamp(6rem, 14vw, 11rem) 0; color: var(--branco); background: var(--noite); }
.visita-foto { position: absolute; inset: -12% 0; z-index: -2; }
.visita-foto img { width: 100%; height: 100%; object-fit: cover; translate: 0 var(--deslocar, 0); }
.visita::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(20 50 50 / .92) 0%, rgb(0 88 84 / .7) 45%, rgb(0 88 84 / .15) 100%); }
.visita-conteudo { display: grid; gap: 3rem; align-items: center; }
.visita-cartao { max-width: 34rem; }
.visita .eyebrow { font: 600 .85rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--folha); margin: 0 0 1rem; }
.visita h2 { color: var(--branco); margin: 0 0 1rem; }
.visita p { color: rgb(255 255 255 / .88); }
.visita .botao { margin-top: 1rem; background: var(--folha); color: var(--noite); }
.visita-folha { display: none; margin: 0; }
@media (min-width: 56rem) {
  .visita-conteudo { grid-template-columns: 1.1fr .9fr; }
  .visita-folha {
    display: block; justify-self: end; width: min(26rem, 100%); aspect-ratio: 1; overflow: hidden;
    border-radius: 0 50% 0 50%; box-shadow: 0 2rem 4rem rgb(0 0 0 / .35); outline: 6px solid rgb(255 255 255 / .12); outline-offset: 10px;
  }
  .visita-folha img { width: 100%; height: 100%; object-fit: cover; }
}

/* Sobre nós: duas fotografias em forma de folha, desencontradas. */
.par-folhas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.folha-foto { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0 4rem 0 4rem; }
.folha-foto img { width: 100%; height: 100%; object-fit: cover; }
.folha-foto-invertida { border-radius: 4rem 0 4rem 0; margin-top: 3rem; }

/* ---------- História: fundo branco com textura e o símbolo numa grande folha escura ---------- */
.historia {
  background-color: var(--branco);
  background-image: radial-gradient(rgb(0 88 84 / .11) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
}
.historia-palco { isolation: isolate; }
.historia-palco::after { /* a folha escura onde o símbolo vive */
  content: ""; position: absolute; z-index: -1; width: 100%; max-width: min(36rem, 100%); aspect-ratio: 1;
  border-radius: 0 42% 0 42%;
  background:
    radial-gradient(circle at 70% 25%, #0b6f68, transparent 60%),
    linear-gradient(150deg, var(--petroleo), var(--noite));
  box-shadow: 0 2.5rem 5rem -1.5rem rgb(20 50 50 / .45);
}
.historia-palco::before { z-index: 0; background: radial-gradient(circle, rgb(117 198 150 / .45), transparent 70%); }
.historia-simbolo { z-index: 1; }
.js-historia .historia .folha path { stroke: var(--folha); stroke-width: .35; stroke-opacity: .7; }
.js-historia .historia .folha:hover path { stroke-opacity: 1; }
.historia .folha.ativa path { filter: drop-shadow(0 0 2.5px rgb(117 198 150 / .6)); }
.js-historia .historia-numero { z-index: 2; inset: auto 7% 5% auto; -webkit-text-stroke: 1px rgb(255 255 255 / .35); }
@media (min-width: 56rem) { /* a folha e o símbolo medem-se pela mesma medida, para o símbolo nunca sair da folha */
  .js-historia .historia-palco { --lado: min(72svh, 100%); }
  .js-historia .historia-palco::after { width: var(--lado); max-width: none; }
  .js-historia .historia-simbolo { width: calc(var(--lado) * .74); }
}
@media (max-width: 55.99rem) {
  .js-historia .historia-simbolo { width: min(20svh, 46vw); }
  .js-historia .historia-palco::after { width: auto; height: 100%; max-width: none; }
  .js-historia .historia-palco { height: min(30svh, 70vw); }
}

/* Menu com seis entradas: aperta o espaço em ecrãs médios para não partir linhas. */
.menu a, .botao-ligar { white-space: nowrap; }
@media (min-width: 56rem) and (max-width: 82rem) {
  .topo-in { gap: 1.25rem; }
  .menu ul { gap: 1.1rem; }
  .menu a { font-size: .95rem; }
  .botao-ligar { padding-inline: 1rem; font-size: .95rem; }
}

/* Fotografia recortada sobre o gradiente da marca, enquadrada pela cara. */
.foto-pessoa.com-foto { place-items: end center; }
.foto-pessoa.com-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }

/* Lares: números grandes por cima da fotografia */
.numeros-lares { list-style: none; padding: 0; margin: 2rem 0 1rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.numeros-lares li { display: grid; gap: .2rem; }
.numeros-lares strong { font: 500 clamp(2.4rem, 5vw, 3.4rem)/1 var(--serif); color: var(--folha); }
.numeros-lares span { font-size: .95rem; color: rgb(255 255 255 / .85); }
.parceiro .parceiro-morada { margin-top: .3rem; font-size: .9rem; color: #5c7070; }
.parceiro:hover .parceiro-morada { color: rgb(255 255 255 / .8); }

/* ---------- Planos geriátricos ---------- */
.cabeca-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.ligacao-clara { color: var(--branco); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--folha); padding-bottom: .1rem; }
.selo { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; padding: .3rem .8rem .3rem .6rem; border-radius: 0 .9rem 0 .9rem; background: var(--petroleo); color: var(--branco); font-size: .9rem; font-weight: 600; }
.selo::before { content: ""; width: .7rem; height: .7rem; border-radius: 0 .45rem 0 .45rem; background: var(--folha); }

.lares-numeros { background: var(--noite); color: var(--branco); }
.lares-numeros ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); margin: 0 auto; padding-block: clamp(2.5rem, 5vw, 3.5rem); gap: 2rem; }
.lares-numeros li { display: grid; gap: .35rem; padding-left: 1.25rem; border-left: 2px solid rgb(117 198 150 / .5); }
.lares-numeros strong { font: 500 clamp(2.6rem, 5vw, 3.6rem)/1 var(--serif); color: var(--folha); }
.lares-numeros span { color: rgb(255 255 255 / .82); font-size: .98rem; }

.passos-folha { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); counter-reset: passo; }
.passos-folha li { position: relative; padding: 2rem 1.75rem 2rem; border: 1.5px solid var(--linha); border-radius: 0 2.5rem 0 2.5rem; background: var(--branco); transition: transform .4s var(--suave), box-shadow .4s, border-color .4s; }
.passos-folha li:hover { transform: translateY(-4px); border-color: var(--folha); box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 88 84 / .35); }
.passo-numero { display: grid; place-items: center; width: 3.25rem; aspect-ratio: 1; margin-bottom: 1.25rem; border-radius: 0 1.4rem 0 1.4rem; background: linear-gradient(150deg, var(--folha), var(--petroleo)); color: var(--branco); font: 500 1.5rem var(--serif); }
.passos-folha h3 { font-size: 1.55rem; margin-bottom: .4rem; }
.passos-folha p { margin: 0; }
@media (min-width: 56rem) {
  .passos-folha li:not(:last-child)::after { /* uma linha a ligar os passos */
    content: ""; position: absolute; top: 3.6rem; left: calc(1.75rem + 3.25rem + .75rem); right: -1.25rem; height: 1.5px;
    background: linear-gradient(90deg, var(--folha), transparent); pointer-events: none;
  }
}

.visita-lares { background: linear-gradient(150deg, var(--petroleo), var(--noite)); }
.visita-simbolo { position: absolute; z-index: -1; right: -6rem; top: 50%; width: min(34rem, 70vw); translate: 0 -50%; opacity: .22; pointer-events: none; }
.visita-simbolo svg { width: 100%; height: auto; }
.visita-lares .visita-cartao { max-width: 40rem; }
.visita-lares h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); }

.lares-equipa { background-color: var(--branco); background-image: radial-gradient(rgb(0 88 84 / .1) 1.2px, transparent 1.4px); background-size: 22px 22px; }
.lares-equipa .eyebrow, .lares-passos .eyebrow { font: 600 .85rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--petroleo); margin: 0 0 1rem; }
.para-quem-titulo { margin: 2rem 0 .75rem; font-weight: 600; color: var(--noite); }
.para-quem { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.para-quem li { padding: .5rem 1rem; border: 1.5px solid var(--linha); border-radius: 999px; background: var(--branco); font-size: .95rem; }
.lares-equipa .pessoas li { padding: 1.5rem; background: var(--branco); border-radius: 0 2rem 0 2rem; box-shadow: 0 1.5rem 3rem -2rem rgb(20 50 50 / .4); }
@media (max-width: 35.99rem) { .lares-equipa .pessoas li { grid-template-columns: 1fr; } }

/* Corpo clínico agrupado por especialidade */
.indice-especialidades { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 3.5rem; }
.indice-especialidades a { padding: .5rem 1rem; border: 1.5px solid var(--linha); border-radius: 999px; color: var(--noite); text-decoration: none; font-size: .95rem; font-weight: 500; transition: border-color .3s, background-color .3s, color .3s; }
.indice-especialidades a:hover { border-color: var(--petroleo); background: var(--petroleo); color: var(--branco); }
.indice-especialidades small { color: rgb(20 50 50 / .5); margin-left: .2rem; }
.indice-especialidades a:hover small { color: rgb(255 255 255 / .7); }
/* Uma especialidade por linha: o nome à esquerda e os médicos ao lado. */
.grelha-especialidades { display: grid; }
.grupo-especialidade { display: grid; gap: 1rem 2.5rem; padding: 2rem 0; border-top: 1px solid var(--linha); scroll-margin-top: calc(var(--topo, 5rem) + 1rem); }
.grupo-especialidade:last-child { border-bottom: 1px solid var(--linha); }
.grupo-especialidade .grupo-local-titulo { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0; }
.grupo-cabeca { align-self: start; display: grid; gap: .75rem; }
.grupo-especialidade .grelha-medicos { margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 40vw), 1fr)); }
@media (min-width: 56rem) {
  .grupo-especialidade { grid-template-columns: 16rem minmax(0, 1fr); }
  .grupo-especialidade .grupo-cabeca { position: sticky; top: calc(var(--topo, 5rem) + 1rem); }
}
.medico h4 { font: 500 1.35rem/1.2 var(--serif); color: var(--petroleo); margin: 1rem 0 .35rem; }
.medico .selo { font-size: .8rem; margin-top: .2rem; color: var(--branco); }
/* Cartão do médico na Clínica: nome em cima, OM e competência logo por baixo, e a próxima vaga no fundo,
   para que os cartões da mesma linha fiquem alinhados. */
.grupo-especialidade .medico { display: flex; flex-direction: column; }
.medico-info { display: grid; gap: .3rem; margin: 0; }
.medico .medico-info span { display: block; }
.medico-cedula { font: 500 .8rem/1.3 var(--sans); letter-spacing: .04em; color: #5b6b6a; }
.medico-extra { position: relative; padding-left: 1rem; font: 600 .82rem/1.3 var(--sans); color: var(--petroleo); }
.medico-extra::before { content: ""; position: absolute; left: 0; top: .28em; width: .6rem; height: .6rem; border-radius: 0 .35rem 0 .35rem; background: var(--folha); }
.medico-vaga { margin-top: auto; padding-top: .9rem; display: grid; justify-items: start; }
.medico-vaga .consulta { margin: 0; }

/* Etiqueta pequena por cima dos títulos de secção */
.planos-casa .eyebrow { font: 600 .85rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--petroleo); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; }
.planos-casa .eyebrow::before { content: ""; width: .8rem; height: .8rem; border-radius: 0 .5rem 0 .5rem; background: linear-gradient(135deg, var(--folha), var(--petroleo)); }
.planos-casa .cabeca-secao > p { max-width: 32rem; }

/* Próxima data de consulta de cada médico, gerida no painel */
.consulta { display: grid; justify-self: start; margin: .5rem 0 0; padding-left: .7rem; border-left: 3px solid var(--folha); color: var(--noite); font-weight: 600; font-size: .95rem; line-height: 1.35; }
.consulta span { font: 600 .7rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--petroleo); }
.consulta small { font-weight: 400; color: #4c6464; font-size: .85rem; }

/* Marcação online */
.grupo-cabeca .botao-pequeno, .botao-pequeno { justify-self: start; min-height: 2.6rem; padding: .45rem 1.1rem; font-size: .95rem; }
.ligacao-marcar { display: inline-block; margin-top: .5rem; font-weight: 600; font-size: .95rem; color: var(--petroleo); }
.marcar-pagina { padding-top: clamp(1.5rem, 4vw, 3rem); }
.marcar-local { margin: 0 0 1rem; font: 600 1.05rem/1.3 var(--sans); color: var(--petroleo); }
.marcar-pagina .eyebrow { font: 600 .85rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--petroleo); margin: 1.5rem 0 .75rem; }
.marcar-pagina h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 .5rem; }
.marcar-quem { color: #4c6464; font-size: 1.1rem; margin: 0 0 2rem; }
.marcar-form { border: 1.5px solid var(--linha); box-shadow: none; }
.marcar-form select { font: inherit; min-height: 3.4rem; padding: .6rem 1rem; border: 1.5px solid var(--linha); border-radius: .75rem; background: var(--branco); color: var(--noite); }
.marcar-dias { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.marcar-dias legend { margin-bottom: .6rem; }
.marcar-dia { display: flex !important; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border: 1.5px solid var(--linha); border-radius: 0 1.2rem 0 1.2rem; cursor: pointer; font-weight: 400 !important; transition: border-color .2s, background-color .2s; }
.marcar-dia:hover { border-color: var(--petroleo); }
.marcar-dia:has(input:checked) { border-color: var(--petroleo); background: var(--petroleo); color: var(--branco); }
.marcar-dia input { width: 1.25rem; height: 1.25rem; accent-color: var(--folha); flex: none; }
.ajuda-site { font-size: .95rem; color: #4c6464; margin: .25rem 0 0; }
.marcar-guardar { padding: 1.25rem 1.5rem; border-left: 4px solid var(--folha); background: #f4f8f7; border-radius: 0 1rem 1rem 0; margin: 1.5rem 0; overflow-wrap: anywhere; }
.marcar-guardar p { margin: 0 0 .5rem; }

/* Área de cliente */
.menu-conta svg { display: inline-block; width: 1.05em; height: 1.05em; margin-right: .35rem; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.conta-duas { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .conta-duas { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.conta-duas h2, .marcar-pagina h2 { font-size: 1.6rem; margin: 0; }
.marcar-pagina h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.marcar-form h2 { margin: 0 !important; }
.conta-nova { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--raio-folha); background: var(--noite); color: rgb(255 255 255 / .85); display: grid; gap: 1rem; justify-items: start; }
.conta-nova h2 { color: var(--branco); }
.conta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 0 0 1rem; }
.conta-sair button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.conta-consultas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.conta-consultas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1.1rem 1.3rem; border: 1.5px solid var(--linha); border-radius: 0 1.2rem 0 1.2rem; }
.conta-consultas div { display: grid; gap: .2rem; }
.conta-consultas strong { font-size: 1.1rem; }
.conta-consultas span { color: #4c6464; font-size: .95rem; }
.conta-consultas.anteriores li { padding: .75rem 1.1rem; opacity: .75; }
.conta-consultas .botao { min-height: 2.6rem; padding: .4rem 1.1rem; }
.campos-opcionais { border: 1.5px solid var(--linha); border-radius: .75rem; padding: .3rem 1rem; }
.campos-opcionais summary { padding: .7rem 0; font-weight: 500; cursor: pointer; }
.campos-opcionais-in { display: grid; gap: 1rem; padding: .5rem 0 1rem; }
@media (min-width: 40rem) { .campos-opcionais-in { grid-template-columns: 1fr 1fr; } .campos-opcionais-in label:last-child { grid-column: 1 / -1; } }
.marcar-form textarea { font: inherit; padding: .75rem 1rem; border: 1.5px solid var(--linha); border-radius: .75rem; resize: vertical; }
.marcar-conta { padding: 1.25rem 1.5rem; border-radius: 0 1.2rem 0 1.2rem; background: #f4f8f7; border-left: 4px solid var(--folha); }
.marcar-conta p { margin: 0 0 .8rem; }
.marcar-conta p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.marcar-como { margin: 0; padding: .9rem 1.1rem; background: #f4f8f7; border-radius: .75rem; }
.marcar-como a { margin-left: .5rem; font-size: .95rem; }

/* Página de marcação: passos e especialidades */
.passos-marcar { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.passos-marcar li { display: flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .45rem; border-radius: 999px; background: #f1f5f4; color: #5c7070; font-size: .92rem; font-weight: 500; }
.passos-marcar li span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0 .8rem 0 .8rem; background: var(--branco); font-weight: 600; }
.passos-marcar li.atual { background: var(--petroleo); color: var(--branco); }
.passos-marcar li.atual span { background: var(--folha); color: var(--noite); }
.passos-marcar li.feito span { background: var(--folha); color: var(--noite); }
.marcar-especialidades { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.marcar-especialidades li { display: grid; gap: .5rem; align-content: start; padding: 1.3rem 1.4rem; border: 1.5px solid var(--linha); border-radius: 0 1.6rem 0 1.6rem; background: var(--branco); }
.marcar-especialidades h2 { font-size: 1.45rem; margin: 0 0 .3rem; }
.marcar-especialidades li.sem-vagas { background: #f7f9f9; }
.marcar-especialidades li.sem-vagas p { margin: 0; color: #5c7070; font-size: .95rem; }
.marcar-opcao { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-radius: .8rem; background: #eef6f2; color: var(--noite); text-decoration: none; transition: background-color .2s, color .2s; }
.marcar-opcao span { font-size: .95rem; }
.marcar-opcao strong { color: var(--petroleo); white-space: nowrap; }
.marcar-opcao:hover { background: var(--petroleo); color: var(--branco); }
.marcar-opcao:hover strong { color: var(--folha); }
.marcar-opcao::after { content: "›"; font-size: 1.4rem; line-height: 1; color: var(--petroleo); }
.marcar-opcao:hover::after { color: var(--branco); }

/* Agregado familiar */
.marcar-para .marcar-nova-pessoa { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--linha); border-radius: 1rem; }
.marcar-para:not(:has(input[value="nova"]:checked)) .marcar-nova-pessoa { display: none; }
.conta-para { margin: 0; font-weight: 600; color: var(--petroleo); }
.familia-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.familia-acoes form { margin: 0; }

/* Telemóvel deitado ou tablet baixo: a abertura não empurra o texto para baixo. */
@media (max-width: 56rem) and (max-height: 40rem) {
  .hero { align-items: center; padding-bottom: 4rem; }
  .hero-texto { padding-top: 0; }
  .hero-simbolo, .hero-brilho { top: 50%; width: 60vw; right: -14vw; }
}
@media (max-height: 34rem) {
  .hero h1 { margin-bottom: .2em; }
  .hero .acoes { margin-top: 1.1rem; }
}
@media (min-width: 56.01rem) and (max-width: 62rem) {
  .topo-in { gap: 1rem; }
  .marca .logo { width: 8rem; }
  .menu ul { gap: .9rem; }
  .menu a { font-size: .92rem; }
  .botao-ligar { padding-inline: .85rem; font-size: .95rem; }
}
@media (min-width: 56.01rem) and (max-height: 34rem) {
  .hero h1 { font-size: clamp(2.6rem, 11.5svh, 8.25rem); }
}

/* Planos: com dois planos a grelha fica com duas colunas, centrada */
@media (min-width: 60rem) { .grelha-planos.grelha-2 { grid-template-columns: repeat(2, minmax(0, 26rem)); justify-content: center; } }
.plano-falta-titulo { font: 600 1rem/1.3 var(--sans); margin: 1.25rem 0 .25rem; color: var(--noite); }

/* Página inicial: textos de 28/10 */
.hero-eyebrow { font: 600 .9rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--folha); margin: 0 0 1.25rem; }
.visita-cartao .acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.planos-casa-acao { margin: 2rem 0 0; }
@media (min-width: 40rem) { .hero h1 > span { display: block; } }
@media (min-width: 56.01rem) and (max-height: 34rem) {
  .hero h1 { font-size: clamp(2.2rem, 9svh, 6rem); }
  .hero .entrada { font-size: 1.05rem; }
}
@media (max-width: 56rem) and (max-height: 45rem) {
  .hero-texto { padding-top: 9vh; }
  .hero .entrada { font-size: 1rem; }
  .hero-eyebrow { margin-bottom: .75rem; }
}

/* Adicionar ao calendário (consulta marcada e as minhas consultas) */
.calendario-cartao { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; align-items: center; margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--linha); border-radius: 0 1.25rem 0 1.25rem; background: var(--branco); }
.calendario-cartao > svg { color: var(--petroleo); }
.calendario-cartao p { margin: 0; font-size: .95rem; color: var(--texto-suave, #5c7070); }
.calendario-cartao > div { grid-column: 2; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.calendario-cartao a, .calendario-menu a { color: var(--petroleo); font-weight: 600; text-decoration: underline; text-decoration-color: var(--folha); text-underline-offset: .25em; text-decoration-thickness: 2px; }
.calendario-cartao a:hover, .calendario-menu a:hover { text-decoration-color: var(--petroleo); }
.calendario-menu { margin-top: .4rem; font-size: .9rem; }
.calendario-menu { border: 0; }
.calendario-menu summary { display: inline-flex; align-items: center; gap: .35rem; padding: 0; font-size: .9rem; color: var(--petroleo); font-weight: 600; border: 0; }
.calendario-menu summary::after { content: none; }
.calendario-menu summary::-webkit-details-marker { display: none; }
.calendario-menu summary svg { width: 18px; height: 18px; }
.calendario-menu[open] summary { margin-bottom: .35rem; }
.calendario-menu > div { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding-left: 1.6rem; }

/* ---------- Marcar: consulta na clínica ou teleconsulta ---------- */
.marcar-tipos { display: inline-flex; gap: .25rem; padding: .3rem; margin: .5rem 0 1rem; border-radius: 99px; background: rgb(20 50 50 / .06); }
.marcar-tipos a { padding: .55rem 1.1rem; border-radius: 99px; font-weight: 600; font-size: .95rem; color: var(--noite); text-decoration: none; }
.marcar-tipos a[aria-current] { background: var(--petroleo); color: var(--branco); }

/* ---------- Modo app (/app): a área do paciente com aspeto de aplicação ---------- */
.modo-app { --app-topo: 3.3rem; --app-barra: 4.3rem; background: var(--branco); font-size: .95rem; line-height: 1.5; }
.modo-app main.app-main { padding: calc(var(--app-topo) + env(safe-area-inset-top)) 0 calc(var(--app-barra) + 1.5rem + env(safe-area-inset-bottom)); }
.app-topo {
  position: fixed; z-index: 40; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: calc(var(--app-topo) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 1rem 0;
  background: rgb(255 255 255 / .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha);
}
.app-topo .marca .logo { width: 8.5rem; }
.app-topo-ligar { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 99px; background: var(--petroleo); color: var(--branco); font-weight: 600; font-size: .9rem; text-decoration: none; }
.app-topo-ligar svg { width: 1rem; height: 1rem; fill: currentColor; }

.app-barra {
  position: fixed; z-index: 40; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(var(--app-barra) + env(safe-area-inset-bottom)); padding: 0 .25rem env(safe-area-inset-bottom);
  background: rgb(255 255 255 / .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linha);
}
.app-barra a { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .55rem 0 .7rem; font-size: .72rem; font-weight: 500; color: rgb(20 50 50 / .62); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.app-barra svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-barra a[aria-current] { color: var(--petroleo); font-weight: 600; }
.app-barra a[aria-current] .app-barra-icone { position: relative; }
.app-barra a[aria-current]:not(.app-barra-marcar) .app-barra-icone::after { content: ""; position: absolute; left: 50%; bottom: -.35rem; width: .3rem; height: .3rem; border-radius: 50%; background: var(--folha); transform: translateX(-50%); }
.app-barra-marcar .app-barra-icone { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-top: -1.6rem; border-radius: 50%; background: var(--petroleo); color: var(--branco); box-shadow: 0 .5rem 1.2rem rgb(0 88 84 / .3), 0 0 0 4px var(--branco); transition: transform .2s var(--suave); }
.app-barra-marcar .app-barra-icone svg { width: 1.7rem; height: 1.7rem; stroke-width: 2.4; }
.app-barra-marcar:active .app-barra-icone { transform: scale(.94); }
.app-barra a.app-barra-marcar { color: var(--petroleo); font-weight: 600; }

.app-pagina { max-width: 40rem; margin: 0 auto; padding: 1.4rem 1rem 0; display: grid; gap: 1rem; }
.app-pagina h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); margin: .2rem 0 .2rem; }
.app-pagina h2 { font: 600 1rem/1.3 var(--sans); color: var(--noite); margin: 1rem 0 0; }
.app-cartao { padding: 1.15rem 1.2rem; border: 1.5px solid var(--linha); border-radius: 0 1.4rem 0 1.4rem; background: var(--branco); }
.app-cartao h2 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font: 600 .82rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--petroleo); }
.app-cartao h2 svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-cartao p { margin: 0 0 .5rem; }
.app-cartao > :last-child { margin-bottom: 0; }
.app-vazio { color: rgb(20 50 50 / .7); }
.app-consulta-quando { font: 500 1.6rem/1.15 var(--serif); color: var(--petroleo); }
.app-consulta-quem { font-weight: 600; }
.app-consulta-onde { color: rgb(20 50 50 / .75); font-size: .95rem; }
.app-novidade { display: inline-block; padding: .2rem .7rem; border-radius: 99px; background: var(--folha); color: var(--noite); font-weight: 600; font-size: .85rem; }
.app-cartao-escuro { background: var(--noite); border-color: var(--noite); color: rgb(255 255 255 / .85); }
.app-cartao-escuro h2 { color: var(--folha); }
.app-botoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem !important; }
.app-botoes .botao-contorno { color: var(--branco); border-color: rgb(255 255 255 / .5); }

.app-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.app-atalho { display: grid; gap: .15rem; padding: 1.05rem 1.1rem; border-radius: 0 1.4rem 0 1.4rem; background: var(--petroleo); color: var(--branco); text-decoration: none; }
.app-atalho + .app-atalho { background: var(--branco); color: var(--petroleo); border: 1.5px solid var(--petroleo); }
.app-atalho svg { width: 1.7rem; height: 1.7rem; margin-bottom: .45rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-atalho + .app-atalho svg { fill: currentColor; stroke: none; }
.app-atalho strong { font-size: 1.05rem; }
.app-atalho span { font-size: .85rem; opacity: .8; }

.app-lista { list-style: none; margin: 0 0 .6rem; padding: 0; }
.app-lista li + li { border-top: 1px solid var(--linha); }
.app-lista a { display: flex; align-items: center; gap: .9rem; padding: .75rem 0; color: inherit; text-decoration: none; }
.app-lista a > span:last-child, .app-lista a { flex-wrap: wrap; }
.app-lista strong { display: block; color: var(--petroleo); }
.app-lista span span, .app-lista a > span:not([class]) { display: block; font-size: .9rem; color: rgb(20 50 50 / .72); }
.app-documentos a { flex-wrap: nowrap; }
.app-doc-icone { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: rgb(0 88 84 / .08); color: var(--petroleo); }
.app-doc-requisicao { background: rgb(117 198 150 / .22); }
.app-doc-icone svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }

.app-perfil-cabeca { display: flex; align-items: center; gap: 1rem; }
.app-perfil-cabeca p { margin: 0; color: rgb(20 50 50 / .72); font-size: .95rem; }
.app-iniciais { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 0 1.4rem 0 1.4rem; background: var(--petroleo); color: var(--branco); font: 500 1.5rem/1 var(--serif); }
.app-menu { list-style: none; margin: 0; padding: 0; border: 1.5px solid var(--linha); border-radius: 1rem; overflow: hidden; }
.app-menu li + li { border-top: 1px solid var(--linha); }
.app-menu a { display: grid; gap: .1rem; padding: .9rem 2.4rem .9rem 1.1rem; position: relative; color: var(--noite); text-decoration: none; }
.app-menu a::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: .5rem; height: .5rem; border: solid var(--petroleo); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
.app-menu strong { font-weight: 600; }
.app-menu span { font-size: .88rem; color: rgb(20 50 50 / .68); }
.app-sair { margin-top: .8rem; }

.app-boas-vindas { min-height: calc(100svh - var(--app-topo) - var(--app-barra) - 3rem); max-width: 30rem; margin: 0 auto; padding: 2rem 1.25rem 0; display: grid; align-content: center; gap: .9rem; text-align: center; }
.app-boas-vindas .app-simbolo { width: 7rem; margin: 0 auto .5rem; color: var(--petroleo); }
.app-boas-vindas h1 { font-size: 2.3rem; margin: 0; }
.app-boas-vindas p { margin: 0 0 .8rem; color: rgb(20 50 50 / .78); }
.app-boas-vindas .botao { justify-content: center; width: 100%; }
.app-ligacao-ligar { margin-top: .4rem; font-weight: 600; }

/* As páginas da conta e da marcação dentro da app: mais compactas, sem os espaços do site. */
.modo-app .secao.marcar-pagina { padding: 1.2rem 0 1rem; }
.modo-app .marcar-pagina .estreito, .modo-app .marcar-pagina .largo { padding: 0 1rem; max-width: 40rem; }
.modo-app .marcar-pagina h1 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
.modo-app .marcar-local, .modo-app .passos-marcar { display: none; }
.modo-app .marcar-especialidades { grid-template-columns: 1fr; margin-top: 1rem; }
.modo-app .conta-duas { grid-template-columns: 1fr; }
.modo-app .cabeca-pagina { padding-top: 2.5rem; }

/* Na app tudo um pouco mais pequeno que no site: letras, títulos e botões de telemóvel. */
.modo-app .botao { min-height: 2.75rem; padding: .55rem 1.25rem; font-size: .95rem; }
.modo-app .app-topo .marca .logo { width: 7.5rem; }
.modo-app .app-topo-ligar { padding: .35rem .8rem; font-size: .82rem; }
.modo-app .app-pagina { gap: .8rem; padding-top: 1.1rem; }
.modo-app .app-pagina h1, .modo-app .marcar-pagina h1 { font-size: 1.65rem; }
.modo-app .marcar-pagina h2 { font-size: 1.25rem; margin-top: 1.6rem; margin-bottom: .7rem; }
.modo-app .marcar-pagina .eyebrow { font-size: .72rem; margin: .6rem 0 .5rem; }
.modo-app .marcar-quem { font-size: .95rem; margin-bottom: 1.2rem; }
.modo-app .ajuda-site { font-size: .82rem; }
.modo-app .app-cartao { padding: .95rem 1rem; }
.modo-app .app-cartao h2 { font-size: .72rem; margin-bottom: .55rem; }
.modo-app .app-consulta-quando { font-size: 1.3rem; }
.modo-app .app-consulta-onde, .modo-app .app-lista span span, .modo-app .app-lista a > span:not([class]) { font-size: .85rem; }
.modo-app .app-atalho { padding: .85rem .95rem; }
.modo-app .app-atalho svg { width: 1.4rem; height: 1.4rem; margin-bottom: .3rem; }
.modo-app .app-atalho strong { font-size: .95rem; }
.modo-app .app-atalho span { font-size: .78rem; }
.modo-app .app-iniciais { width: 3.2rem; height: 3.2rem; font-size: 1.2rem; }
.modo-app .app-perfil-cabeca p, .modo-app .app-menu span { font-size: .82rem; }
.modo-app .app-menu a { padding: .75rem 2.2rem .75rem 1rem; }
.modo-app .app-boas-vindas h1 { font-size: 1.85rem; }
.modo-app .app-boas-vindas .app-simbolo { width: 5.5rem; }
.modo-app .marcar-tipos a { padding: .45rem .95rem; font-size: .85rem; }
.modo-app .marcar-dia { padding: .7rem .9rem; gap: .7rem; }
.modo-app .marcar-especialidades li { padding: 1rem 1.1rem; }
.modo-app .marcar-especialidades h2 { font-size: 1.2rem; margin: 0; }
.modo-app .marcar-opcao { padding: .6rem .85rem; font-size: .9rem; }
.modo-app .conta-consultas li { padding: .9rem 1rem; gap: .5rem 1rem; }
.modo-app .conta-consultas strong { font-size: .98rem; }
.modo-app .formulario input:not([type=checkbox], [type=radio]), .modo-app .formulario select, .modo-app .formulario textarea { font-size: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.modo-app .app-barra a { font-size: .68rem; }
.modo-app .app-barra svg { width: 1.4rem; height: 1.4rem; }
.modo-app .app-barra-marcar .app-barra-icone { width: 3rem; height: 3rem; margin-top: -1.3rem; }
.modo-app .formulario label, .modo-app .caixa, .modo-app legend { font-size: .92rem; }
.modo-app .caixa input { width: 1.1rem; height: 1.1rem; }

/* Ecrã de entrada da app (sem conta): sem barras; as quatro folhas chegam, depois o nome e o texto. */
.app-entrada main.app-main { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.app-entrada .app-boas-vindas { min-height: 100svh; padding: 2rem 1.5rem; gap: 1.6rem; }
.app-entrada-marca { display: grid; justify-items: center; gap: 1.1rem; }
.app-entrada .app-boas-vindas .app-simbolo { width: 7.5rem; height: 7.5rem; margin: 0; }
.app-entrada-logo { width: 11rem; color: var(--petroleo); }
.app-entrada-logo .logo { width: 100%; height: auto; }
.app-entrada-texto { display: grid; gap: .6rem; }
.app-entrada-texto p { margin: 0; }
.app-entrada-botoes { display: grid; gap: .7rem; }
.app-sem-conta main.app-main { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: no-preference) {
  .app-entrada .folha path { animation: folha-chega 1.3s var(--suave) both; }
  .app-entrada .folha-1 path { animation-delay: .15s; }
  .app-entrada .folha-3 path { animation-delay: .3s; }
  .app-entrada .folha-0 path { animation-delay: .45s; }
  .app-entrada .folha-2 path { animation-delay: .6s; }
  .app-entrada .simbolo-rodar { animation: rodar 1.2s var(--suave) .9s both, rodar 120s linear 2.1s infinite; }
  .app-entrada-marca { animation: app-marca-sobe .9s var(--suave) 1.7s both; }
  .app-entrada-logo { animation: app-revela 1s var(--suave) 1.4s both; }
  .app-entrada-texto { animation: surgir .8s var(--suave) 2.2s both; }
  .app-entrada-botoes { animation: surgir .8s var(--suave) 2.45s both; }
}
@keyframes app-revela { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes app-marca-sobe { from { transform: translateY(6rem) scale(1.25); } }

/* Marcar em "qualquer hora": as horas livres de cada dia, para escolher. */
.marcar-dia-horas { display: grid; gap: .5rem; padding: .9rem 0; border-top: 1px solid var(--linha); }
.marcar-dia-horas:first-of-type { border-top: 0; padding-top: .2rem; }
.marcar-dia-horas p { margin: 0; }
.marcar-horas { display: flex; flex-wrap: wrap; gap: .45rem; }
.marcar-horas label { position: relative; cursor: pointer; }
.marcar-horas input { position: absolute; opacity: 0; inset: 0; }
.marcar-horas span { display: block; min-width: 4.4rem; padding: .5rem .8rem; border: 1.5px solid var(--linha); border-radius: 99px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--petroleo); transition: background-color .2s, border-color .2s, color .2s; }
.marcar-horas label:hover span { border-color: var(--petroleo); }
.marcar-horas input:checked + span { background: var(--petroleo); border-color: var(--petroleo); color: var(--branco); }
.marcar-horas input:focus-visible + span { outline: 3px solid var(--folha); outline-offset: 2px; }
.modo-app .marcar-horas span { min-width: 3.9rem; padding: .4rem .6rem; font-size: .9rem; }

/* Renovar receita: escrever, colar o pedido anterior ou enviar uma foto. */
.renovar-form textarea { width: 100%; }
.renovar-form label[for=medicacao] { margin-bottom: -.4rem; }
.renovar-colar { justify-self: start; display: inline-flex; padding: .45rem 1rem; font-size: .95rem; }
.renovar-ou { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 .75rem; color: rgb(20 50 50 / .55); font-size: .9rem; }
.renovar-ou::before, .renovar-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.renovar-foto-botao { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 2px dashed rgb(0 88 84 / .35); border-radius: 1rem; background: rgb(117 198 150 / .08); cursor: pointer; }
.renovar-foto-botao:hover, .renovar-foto-botao:focus-within { border-color: var(--petroleo); background: rgb(117 198 150 / .16); }
.renovar-foto-botao svg { flex: none; width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--petroleo); stroke-width: 1.6; stroke-linejoin: round; }
.renovar-foto-botao span { display: grid; font-size: .92rem; line-height: 1.35; color: rgb(20 50 50 / .75); }
.renovar-foto-botao strong { color: var(--noite); font-size: 1.02rem; }
.renovar-foto-botao input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.renovar-previa { margin: .75rem 0 0; display: flex; align-items: center; gap: 1rem; }
.renovar-previa img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: .75rem; border: 1px solid var(--linha); }
.renovar-texto { white-space: pre-line; }
.renovar-historico li { align-items: center; }
.modo-app .renovar-foto-botao { padding: .85rem .95rem; }
.app-atalho.app-atalho-largo { grid-column: 1 / -1; display: flex; align-items: center; gap: .85rem; background: rgb(117 198 150 / .16); color: var(--noite); border: 0; }
.app-atalho.app-atalho-largo svg { margin: 0; fill: none; stroke: var(--petroleo); stroke-width: 1.7; }
.app-atalho-largo > span { display: grid; gap: .1rem; opacity: 1; font-size: inherit; }
.app-documentos-renovar { margin: 0 0 1rem; text-decoration: none; }
.renovar-form [hidden], .renovar-historico [hidden] { display: none; }
.renovar-previa button { background: none; border: 0; padding: 0; font: inherit; color: var(--petroleo); text-decoration: underline; cursor: pointer; }
.renovar-plano { margin-top: 1rem; padding: 1.4rem 1.3rem; border-radius: 0 1.6rem 0 1.6rem; background: rgb(117 198 150 / .14); }
.renovar-plano-titulo { font-weight: 600; font-size: 1.1rem; color: var(--petroleo); margin-top: 0; }
.renovar-planos { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.renovar-planos li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .8rem 1rem; border-radius: .9rem; background: var(--branco); }
.renovar-planos span { color: var(--petroleo); font-weight: 600; }
.renovar-resposta { margin-top: .3rem; padding: .5rem .75rem; border-radius: .6rem; background: #fff6e0; color: var(--noite); }
.renovar-utente [hidden] { display: none; }
.renovar-utente-ver { margin: 0; padding: .7rem 1rem; border-radius: .8rem; background: rgb(117 198 150 / .12); }
.renovar-utente-ver strong { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.renovar-utente-ver .ligacao { margin-left: .4rem; background: none; border: 0; padding: 0; font: inherit; color: var(--petroleo); text-decoration: underline; cursor: pointer; }

/* ---------- Entrar e criar conta ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.acesso { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 2.5rem; padding: clamp(2rem, 6vw, 4.5rem) var(--margem) clamp(2.5rem, 6vw, 4rem); min-height: calc(100vh - var(--topo)); align-content: start; }
.acesso-fundo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(255 255 255 / .3), rgb(255 255 255 / .7) 55%, #fff 92%), url(../img/clinica/rececao.jpg) center 40% / cover no-repeat; }
.acesso-fundo::after { content: ""; position: absolute; inset: 0; background: rgb(0 88 84 / .12); mix-blend-mode: multiply; }
.acesso-cartao { width: min(100%, 27rem); background: var(--branco); border-radius: 0 2.2rem 0 2.2rem; box-shadow: 0 30px 70px -30px rgb(20 50 50 / .45), 0 0 0 1px rgb(20 50 50 / .06); padding: clamp(1.6rem, 5vw, 2.6rem); display: grid; gap: 1rem; }
.acesso-marca { justify-self: center; width: 3.4rem; height: 3.4rem; }
.acesso-marca .simbolo { width: 100%; height: 100%; }
.acesso h1 { font-size: clamp(1.5rem, 4vw, 1.85rem); line-height: 1.2; text-align: center; margin: 0; color: var(--petroleo); }
.acesso-sub { margin: -.4rem 0 .3rem; text-align: center; font-size: .98rem; color: rgb(20 50 50 / .7); }
.acesso-form { display: grid; gap: .45rem; }
.acesso-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; min-width: 0; }
.acesso-form fieldset[hidden] { display: none; }
.acesso-form label { font-weight: 600; font-size: .95rem; margin-top: .45rem; display: grid; gap: .25rem; }
.acesso-form label .ajuda-site { font-weight: 400; font-size: .85rem; }
.acesso-form input:not([type=checkbox], [type=radio]) { width: 100%; min-width: 0; font: inherit; font-size: 1rem; min-height: 3.1rem; padding: .55rem .95rem; border: 1.5px solid var(--linha); border-radius: .75rem; background: var(--branco); color: var(--noite); transition: border-color .2s, box-shadow .2s; }
.acesso-form input:focus { border-color: var(--petroleo); box-shadow: 0 0 0 4px rgb(117 198 150 / .3); outline: none; }
.acesso-form .caixa { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400; font-size: .92rem; margin-top: .8rem; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 3.2rem !important; }
.olho { position: absolute; right: .35rem; top: 50%; translate: 0 -50%; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 0; background: none; border-radius: .6rem; cursor: pointer; color: rgb(20 50 50 / .6); }
.olho:hover { color: var(--petroleo); background: rgb(117 198 150 / .15); }
.olho svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.olho[aria-pressed=true] .olho-risco { display: none; }
.senha-forca { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; font-size: .8rem; }
.senha-forca[hidden] { display: none; }
.senha-forca span { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--cor, #c0392b) var(--fim, 15%), #e5ecea 0); }
.senha-forca[data-nivel="1"] span { --cor: #e07b00; --fim: 40%; }
.senha-forca[data-nivel="2"] span { --cor: #c8a400; --fim: 70%; }
.senha-forca[data-nivel="3"] span { --cor: #2e9e5b; --fim: 100%; }
.acesso-esqueci { justify-self: end; font-size: .88rem; margin-top: .15rem; }
.acesso-botao { width: 100%; justify-content: center; margin-top: .7rem; }
.acesso-cartao > .acesso-botao { margin-top: 0; }
.acesso-voltar { justify-self: center; background: none; border: 0; font: inherit; color: var(--petroleo); text-decoration: underline; cursor: pointer; padding: .3rem; }
.acesso-ou { display: flex; align-items: center; gap: .8rem; margin: .2rem 0; color: rgb(20 50 50 / .5); font-size: .9rem; }
.acesso-ou::before, .acesso-ou::after { content: ""; flex: 1; border-top: 1.5px dotted rgb(20 50 50 / .25); }
.acesso-ajuda { margin: 0; text-align: center; font-size: .88rem; color: rgb(20 50 50 / .65); }
.acesso-ajuda .ligacao { background: none; border: 0; padding: 0; font: inherit; color: var(--petroleo); text-decoration: underline; cursor: pointer; }
.acesso .erros { margin: 0; font-size: .92rem; }
.acesso-passos { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; font-size: .76rem; color: rgb(20 50 50 / .55); text-align: center; }
.acesso-passos li { display: grid; justify-items: center; gap: .3rem; position: relative; }
.acesso-passos li span { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: #eef3f2; color: rgb(20 50 50 / .55); position: relative; z-index: 1; }
.acesso-passos li + li::before { content: ""; position: absolute; top: .95rem; right: 50%; width: 100%; height: 2px; background: #e5ecea; }
.acesso-passos li.feito::before, .acesso-passos li.atual::before { background: var(--folha); }
.acesso-passos li.atual { color: var(--petroleo); font-weight: 600; }
.acesso-passos li.atual span { background: var(--petroleo); color: #fff; }
.acesso-passos li.feito span { background: var(--folha); color: var(--noite); }
.acesso-email { display: grid; justify-items: center; text-align: center; gap: .5rem; }
.acesso-email svg { width: 3rem; height: 3rem; fill: none; stroke: var(--petroleo); stroke-width: 1.5; }
.acesso-email p { margin: 0; }
.acesso-vantagens { list-style: none; margin: 0; padding: 0; width: min(100%, 60rem); display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.acesso-vantagens li { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start; }
.acesso-vantagens svg { grid-row: span 2; width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 0 .9rem 0 .9rem; background: rgb(117 198 150 / .22); fill: none; stroke: var(--petroleo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.acesso-vantagens strong { color: var(--petroleo); }
.acesso-vantagens span { font-size: .92rem; color: rgb(20 50 50 / .72); line-height: 1.45; }
.modo-app .acesso { min-height: 0; padding: 1rem 1rem 1.5rem; }
.modo-app .acesso-fundo { background: linear-gradient(180deg, rgb(117 198 150 / .14), #fff 60%); }
.modo-app .acesso-fundo::after { display: none; }
.modo-app .acesso-cartao { box-shadow: none; padding: 1.2rem .3rem; background: transparent; }

/* A minha conta (site): cabeçalho com iniciais e cartões de atalho. */
.conta-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin: 1rem 0 1.5rem; }
.conta-iniciais { flex: none; width: 4rem; height: 4rem; border-radius: 0 1.3rem 0 1.3rem; display: grid; place-items: center; background: var(--petroleo); color: #fff; font: 600 1.35rem/1 var(--sans); letter-spacing: .03em; }
.conta-cabeca > div { flex: 1; min-width: 12rem; }
.conta-cabeca h1 { margin: 0 !important; font-size: clamp(1.9rem, 4.5vw, 2.6rem) !important; }
.conta-cabeca p { margin: .2rem 0 0; color: rgb(20 50 50 / .7); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.conta-plano { padding: .1rem .6rem; border-radius: 999px; background: rgb(117 198 150 / .3); color: var(--petroleo); font-weight: 600; font-size: .82rem; }
.conta-ligacoes { display: flex; gap: 1.2rem; align-items: center; font-size: .95rem; }
.conta-ligacoes .conta-sair button { font: inherit; }
.conta-cartoes { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.4rem; }
@media (max-width: 30rem) { .conta-cartao { padding: .95rem; } .conta-cartao strong { font-size: .98rem; } }
.conta-cartao { display: grid; gap: .25rem; align-content: start; padding: 1.15rem 1.2rem; border-radius: 0 1.3rem 0 1.3rem; border: 1.5px solid var(--linha); background: var(--branco); color: var(--noite); text-decoration: none; transition: border-color .2s, transform .2s var(--suave), box-shadow .2s; }
.conta-cartao:hover { border-color: var(--petroleo); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgb(20 50 50 / .4); }
.conta-cartao svg { width: 1.9rem; height: 1.9rem; margin-bottom: .45rem; fill: none; stroke: var(--petroleo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.conta-cartao strong { font-size: 1.05rem; }
.conta-cartao span { font-size: .9rem; color: rgb(20 50 50 / .7); line-height: 1.4; }
.conta-cartao-principal { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.conta-cartao-principal svg { stroke: var(--folha); }
.conta-cartao-principal span { color: rgb(255 255 255 / .82); }

/* ---------- Área de cliente (site): menu ao lado + painel, inspirado na My CUF e na My LUZ ---------- */
.area-conta { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); min-height: calc(100vh - var(--topo)); background: var(--branco); }
.area-menu { background: #f1f5f4; border-right: 1px solid var(--linha); padding: 2rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 1.3rem; position: sticky; top: var(--topo); height: calc(100vh - var(--topo)); overflow-y: auto; }
.area-ola { display: grid; gap: .8rem; }
.area-ola .conta-iniciais { width: 3.6rem; height: 3.6rem; font-size: 1.2rem; }
.area-ola p { margin: 0; }
.area-ola-nome { font: 500 1.35rem/1.2 var(--serif); color: var(--petroleo); }
.area-ola-sub { font-size: .9rem; color: rgb(20 50 50 / .75); }
.area-marcar { display: grid; gap: .4rem; }
.area-marcar .botao { justify-content: center; }
.area-tele { font-size: .82rem; text-align: center; color: rgb(20 50 50 / .7); }
.area-plano { display: grid; gap: .1rem; padding: .85rem 1rem; border-radius: 0 1rem 0 1rem; background: linear-gradient(135deg, #fff 55%, rgb(117 198 150 / .35)); border: 1px solid var(--linha); color: var(--noite); text-decoration: none; font-size: .88rem; }
.area-plano small { color: rgb(20 50 50 / .65); }
.area-plano strong { color: var(--petroleo); }
.area-plano span { color: var(--petroleo); font-weight: 600; font-size: .85rem; }
.area-plano span::after { content: " →"; }
.area-plano.tem { background: var(--petroleo); color: #fff; border-color: var(--petroleo); }
.area-plano.tem small { color: rgb(255 255 255 / .7); }
.area-plano.tem strong, .area-plano.tem span { color: #fff; }
.area-nav { display: grid; gap: .15rem; margin-top: .3rem; flex: 1; align-content: start; }
.area-nav a, .area-sair button { display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem; border-radius: .7rem; color: var(--noite); text-decoration: none; font: 500 1rem/1.2 var(--sans); position: relative; }
.area-nav svg { width: 1.3rem; height: 1.3rem; flex: none; fill: none; stroke: var(--petroleo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.area-nav a:hover, .area-sair button:hover { background: rgb(117 198 150 / .18); }
.area-nav a[aria-current] { background: var(--branco); color: var(--petroleo); font-weight: 600; box-shadow: 0 6px 18px -12px rgb(20 50 50 / .5); }
.area-nav a[aria-current]::after { content: ""; position: absolute; right: -1.45rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 2px; background: var(--petroleo); }
.area-sair { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linha); }
.area-sair button { width: 100%; border: 0; background: none; cursor: pointer; color: rgb(20 50 50 / .75); }
.area-conteudo { padding: clamp(1.5rem, 3.5vw, 2.8rem) clamp(1.25rem, 3.5vw, 3rem) 3rem; min-width: 0; max-width: 72rem; }
.area-conteudo .secao.marcar-pagina { padding: 0; }
.area-conteudo .estreito { max-width: 46rem; margin: 0; padding: 0; }
.area-conteudo .marcar-pagina .eyebrow { margin-top: 0; }
.area-titulo { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 1.3rem; color: var(--petroleo); }
.area-bloco { max-width: 46rem; margin-bottom: 2rem; }
.area-bloco h2 { font-size: 1.3rem; margin: 0 0 .8rem; }
.area-vazio { color: rgb(20 50 50 / .7); margin: 0; }
.area-painel { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.area-coluna { display: grid; gap: 1.2rem; }
.area-cartao { border: 1px solid var(--linha); border-radius: .9rem; overflow: hidden; background: var(--branco); }
.area-cartao header { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; background: #f1f7f6; border-bottom: 1px solid var(--linha); }
.area-cartao header svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--petroleo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.area-cartao h2 { flex: 1; margin: 0; font: 500 1.2rem/1.2 var(--serif); color: var(--petroleo); }
.area-cartao header a { font-size: .85rem; }
.area-cartao > .area-vazio { padding: 1rem 1.1rem; font-size: .95rem; }
.area-lista { list-style: none; margin: 0; padding: .3rem 1.1rem; }
.area-lista li + li { border-top: 1px solid var(--linha); }
.area-lista a { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; color: var(--noite); text-decoration: none; }
.area-lista a:hover strong { color: var(--petroleo); text-decoration: underline; }
.area-lista strong { display: block; font-size: .98rem; }
.area-lista small { display: block; color: rgb(20 50 50 / .65); font-size: .85rem; }
.area-data { flex: none; width: 3.1rem; height: 3.3rem; border-radius: .7rem; background: var(--petroleo); color: #fff; display: grid; place-content: center; text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; line-height: 1.1; }
.area-data b { font-size: 1.25rem; letter-spacing: 0; }
.area-doc { flex: none; width: 3.1rem; height: 3.1rem; border-radius: .7rem; display: grid; place-items: center; background: rgb(117 198 150 / .22); }
.area-doc svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--petroleo); stroke-width: 1.6; }
.area-atalho { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--linha); border-radius: .9rem; text-decoration: none; color: var(--noite); background: var(--branco); transition: border-color .2s, box-shadow .2s; }
.area-atalho:hover { border-color: var(--petroleo); box-shadow: 0 12px 26px -18px rgb(20 50 50 / .45); }
.area-atalho > svg { width: 2rem; height: 2rem; flex: none; fill: none; stroke: var(--petroleo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.area-atalho > span { flex: 1; }
.area-atalho strong { display: block; font: 500 1.2rem/1.2 var(--serif); color: var(--petroleo); }
.area-atalho small { color: rgb(20 50 50 / .7); font-size: .88rem; }
.area-atalho i { font-style: normal; width: 2.2rem; height: 2.2rem; border-radius: .5rem; display: grid; place-items: center; background: var(--petroleo); color: #fff; }
.area-promo { position: relative; display: flex; align-items: flex-end; min-height: 17rem; border-radius: .9rem; overflow: hidden; text-decoration: none; color: #fff; background: linear-gradient(200deg, rgb(0 88 84 / .05) 25%, rgb(0 60 58 / .92) 78%), url(../img/clinica/folhetos.jpg) center 30% / cover no-repeat, var(--petroleo); }
.area-promo-texto { display: grid; gap: .3rem; padding: 1.3rem 1.4rem; text-align: right; justify-items: end; width: 100%; }
.area-promo strong { font: 500 1.9rem/1.1 var(--serif); }
.area-promo span { font-size: .95rem; color: rgb(255 255 255 / .9); max-width: 22rem; }
.area-promo u { font-weight: 700; text-underline-offset: .25em; }
.area-clinica { border-radius: .9rem; background: var(--noite); color: rgb(255 255 255 / .85); padding: 1.2rem 1.3rem; font-size: .92rem; }
.area-clinica h2 { margin: 0 0 .3rem; font: 500 1.2rem/1.2 var(--serif); color: #fff; }
.area-clinica p { margin: 0 0 .9rem; }
/* Ecrãs largos: o conjunto fica centrado (como na CUF); o cinzento do menu continua até à margem esquerda. */
.area-conta { max-width: 80rem; margin-inline: auto; grid-template-columns: 18.5rem minmax(0, 1fr); }
.area-menu { padding-left: 1.8rem; box-shadow: -100vw 0 0 100vw #f1f5f4; clip-path: inset(0 0 0 -100vw); }
.area-conteudo { padding-left: clamp(1.5rem, 4vw, 3.5rem); }
@media (max-width: 70rem) { .area-painel { grid-template-columns: 1fr; } }
@media (max-width: 56rem) {
  .area-conta { grid-template-columns: 1fr; }
  .area-menu { box-shadow: none; clip-path: none; padding-left: 1rem; }
  .area-menu { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linha); padding: 1.2rem 1rem .6rem; gap: .9rem; }
  .area-ola { grid-template-columns: auto 1fr; align-items: center; }
  .area-ola .conta-iniciais { width: 3rem; height: 3rem; font-size: 1rem; }
  .area-plano { display: none; }
  .area-nav { display: none; }
  .area-conteudo { padding: 1.4rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); }
  /* Barra fixa em baixo, como nas apps (CUF): 4 secções e "Mais". */
  .area-barra { position: fixed; z-index: 40; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); background: rgb(255 255 255 / .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--linha); border-radius: 1.2rem; box-shadow: 0 10px 30px -14px rgb(20 50 50 / .45); padding: .35rem .2rem; }
  .area-barra > a, .area-mais > summary { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem .1rem .35rem; color: rgb(20 50 50 / .75); text-decoration: none; font: 500 .74rem/1.1 var(--sans); position: relative; cursor: pointer; list-style: none; }
  .area-mais > summary::-webkit-details-marker { display: none; }
  .area-mais > summary::after { content: none; }
  .area-mais { position: relative; border: 0; }
  .area-barra svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: var(--petroleo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .area-barra > a[aria-current], .area-mais[data-ativo] > summary, .area-mais[open] > summary { color: var(--petroleo); font-weight: 600; }
  .area-barra > a[aria-current] svg, .area-mais[data-ativo] > summary svg { fill: rgb(117 198 150 / .35); }
  .area-barra > a[aria-current]::before, .area-mais[data-ativo] > summary::before { content: ""; position: absolute; top: -.36rem; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--petroleo); }
  .area-mais-lista { position: absolute; right: 0; bottom: calc(100% + .9rem); width: min(16rem, calc(100vw - 2rem)); background: var(--branco); border: 1px solid var(--linha); border-radius: 1rem; box-shadow: 0 16px 40px -16px rgb(20 50 50 / .5); padding: .4rem; display: grid; }
  .area-mais-lista a, .area-mais-lista button { display: flex; align-items: center; gap: .8rem; padding: .75rem .8rem; border-radius: .7rem; color: var(--noite); text-decoration: none; font: 500 1rem/1.2 var(--sans); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
  .area-mais-lista a[aria-current] { color: var(--petroleo); font-weight: 600; background: rgb(117 198 150 / .18); }
  .area-mais-lista form { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--linha); }
  .area-mais-lista button { color: rgb(20 50 50 / .75); }
  .area-mais-lista svg { width: 1.3rem; height: 1.3rem; }
  body:has(.area-barra) .contacto-rapido { bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 56.01rem) { .area-barra { display: none; } }
.caixa.caixa-pequena { margin-top: -.4rem; font-size: .9rem; }
.caixa.caixa-pequena span { color: rgb(20 50 50 / .75); }

/* Foto recortada (fundo transparente): a pessoa inteira, assente no fundo da moldura; o zoom cresce a partir de baixo. */
img.recorte, img[src$="-r.webp"] { object-fit: contain !important; object-position: 50% 100% !important; transform-origin: 50% 100% !important; }