/* ==========================================================================
   MEDICARMO — componentes.css
   Blocos reutilizáveis: cabeçalho, navegação, rodapé, cartões, hero,
   selos de confiança, formulários e botão flutuante de WhatsApp.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CABEÇALHO
   Estrutura: barra de contactos (topo, fina) + barra de navegação principal.
   Injetado por js/componentes.js em <div data-componente="cabecalho">.
   -------------------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--transicao);
}
.cabecalho.com-sombra { box-shadow: var(--sombra-baixa); }

/* ---- Barra de topo: contactos rápidos e selo Google ---- */
.barra-topo {
  /* Azul da marca na barra, tinta escura no botão — o inverso do que era.
     Sobre este azul o texto TEM de ser branco a 100%: a 82% de opacidade
     caía para 3,62:1 e falhava o critério WCAG AA. */
  background: var(--azul-escuro);
  color: var(--branco);
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
}
.barra-topo__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
}
.barra-topo__contactos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-block: 7px;
}
.barra-topo__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--branco);
  white-space: nowrap;
}
.barra-topo__item:hover { color: var(--azul-secundario); }
.barra-topo__item svg {
  width: 14px; height: 14px;
  flex: none;
  opacity: 0.9;
}
.barra-topo__item--estatico { cursor: default; }

/* Número de telefone, à direita da barra de topo.
   Sem caixa: é texto na mesma linha dos restantes contactos, apenas com mais
   peso, para não competir visualmente com a barra de navegação por baixo. */
.barra-topo__telefone {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--branco);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-block: 7px;
  transition: color var(--transicao);
}
.barra-topo__telefone:hover,
.barra-topo__telefone:focus-visible { color: var(--azul-secundario); }

/* ---- Barra de navegação ---- */
.barra-nav__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 92px;
  padding-block: 13px;
}

.logotipo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.logotipo img {
  height: 66px;
  width: auto;
}

/* Navegação principal (desktop) */
.nav-principal { margin-inline-start: auto; }
.nav-principal__lista {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.1vw, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principal__lista li { margin: 0; }
.nav-principal__ligacao {
  position: relative;
  display: block;
  padding: 10px 4px;
  font-size: var(--t-pequeno);
  font-weight: 500;
  color: var(--tinta-media);
  white-space: nowrap;
}
.nav-principal__ligacao::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 2px;
  height: 2px;
  background: var(--azul-principal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.nav-principal__ligacao:hover { color: var(--tinta); }
.nav-principal__ligacao:hover::after { transform: scaleX(1); }
.nav-principal__ligacao[aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
}
.nav-principal__ligacao[aria-current="page"]::after { transform: scaleX(1); }

/* Botão hamburguer (apenas em mobile) */
.botao-menu {
  display: none;
  flex: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  color: var(--tinta);
}
.botao-menu__barras {
  position: relative;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color var(--transicao);
}
.botao-menu__barras::before,
.botao-menu__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicao), top var(--transicao);
}
.botao-menu__barras::before { top: -6px; }
.botao-menu__barras::after  { top: 6px; }

/* Estado aberto: transforma-se em "X" */
.botao-menu[aria-expanded="true"] .botao-menu__barras { background: transparent; }
.botao-menu[aria-expanded="true"] .botao-menu__barras::before { top: 0; transform: rotate(45deg); }
.botao-menu[aria-expanded="true"] .botao-menu__barras::after  { top: 0; transform: rotate(-45deg); }


/* --------------------------------------------------------------------------
   2. MENU MOBILE (painel deslizante)
   -------------------------------------------------------------------------- */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
}
.menu-mobile.aberto { visibility: visible; pointer-events: auto; }

.menu-mobile__fundo {
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 46, 0.5);
  opacity: 0;
  transition: opacity var(--transicao);
}
.menu-mobile.aberto .menu-mobile__fundo { opacity: 1; }

.menu-mobile__painel {
  position: relative;
  width: min(400px, 90vw);
  height: 100%;
  background: var(--branco);
  padding: 26px 26px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: var(--sombra-alta);
}
.menu-mobile.aberto .menu-mobile__painel { transform: none; }

.menu-mobile__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linha);
}
/* `width: auto` é essencial: o <img> traz width/height nos atributos HTML
   (para reservar espaço), e sem isto a largura do atributo mantém-se
   enquanto a altura é forçada a 50px, deformando o logótipo. */
.menu-mobile__topo img { width: auto; height: 50px; flex: none; }

.menu-mobile__fechar {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  color: var(--tinta-media);
}
.menu-mobile__fechar:hover { color: var(--tinta); border-color: var(--linha-forte); }

.menu-mobile__lista {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.menu-mobile__lista li { margin: 0; border-bottom: 1px solid var(--linha); }
.menu-mobile__lista a {
  display: block;
  padding: 15px 2px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--tinta);
}
.menu-mobile__lista a[aria-current="page"] {
  color: var(--azul-escuro);
  font-weight: 600;
}

.menu-mobile__contactos {
  display: grid;
  gap: 10px;
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--linha);
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
}
.menu-mobile__contactos a { color: var(--tinta-media); }
.menu-mobile__contactos a:hover { color: var(--azul-escuro); }


/* --------------------------------------------------------------------------
   3. HERO COM SLIDER (página inicial)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--tinta);
  isolation: isolate;
}

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms ease-in-out;
}
.hero__slide.ativo { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Movimento lento tipo "ken burns" apenas no slide ativo */
  transform: scale(1.06);
  transition: transform 8s linear;
}
.hero__slide.ativo img { transform: scale(1); }

/* Em ecrãs estreitos o `cover` corta as laterais da foto. Na da nutrição o
   interesse está à direita (a nutricionista), por isso o enquadramento
   ancora-se nesse lado em vez de ao centro. */
@media (max-width: 768px) {
  .hero__slide--nutricao img { object-position: 82% center; }
}

/* Duplo gradiente: escurece a esquerda para o texto e a base para os controlos */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(6, 26, 38, 0.90) 0%, rgba(6, 26, 38, 0.72) 42%, rgba(6, 26, 38, 0.30) 78%, rgba(6, 26, 38, 0.18) 100%),
    linear-gradient(to top, rgba(6, 26, 38, 0.55) 0%, transparent 45%);
}

.hero__conteudo {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(64px, 9vh, 104px);
}

/* Painéis de texto — um por área em destaque.
   Ficam todos na mesma célula de grelha, sobrepostos: assim o hero ganha a
   altura do painel mais alto e não "salta" quando o carrossel muda. */
.hero__paineis { display: grid; }

/* Estado base = painel visível e utilizável.
   Sem JavaScript não há classe .ativo, por isso mostra-se apenas o primeiro
   painel e escondem-se os restantes — o hero continua a fazer sentido. */
.hero__painel {
  grid-area: 1 / 1;
  max-width: 680px;
  transition: opacity 560ms ease,
              transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero__paineis > .hero__painel:not(:first-child) { display: none; }

/* Com JavaScript, todos os painéis entram na grelha e o estado escondido
   passa a ser o normal; a classe .ativo revela um de cada vez.
   Não se usa `visibility` na transição: o comportamento de propriedades
   discretas em transições é pouco fiável entre browsers. O painel inactivo
   deixa de receber cliques por `pointer-events` e é retirado da árvore de
   acessibilidade e da ordem de tabulação pelo atributo `inert`, aplicado
   em js/principal.js — imperativo e previsível. */
.js .hero__paineis > .hero__painel {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
.js .hero__paineis > .hero__painel.ativo {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hero__titulo {
  /* Escala própria, mais contida que --t-display: os títulos do carrossel
     têm duas a três linhas e os botões têm de continuar acima da dobra. */
  font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.4rem);
  margin-top: 0;
  color: var(--branco);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero__titulo em {
  font-style: italic;
  color: var(--azul-secundario);
}

.hero__texto {
  max-width: 52ch;
  margin-bottom: 30px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.86);
}

/* Rodapé do hero: indicadores + setas + horário */
.hero__controlos {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 26, 38, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__controlos-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding-block: 10px;
}

.hero__indicadores {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__indicador {
  position: relative;
  width: 34px; height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  transition: background-color var(--transicao), width var(--transicao);
}
/* A barra visível tem 3px, que é impossível de acertar num telemóvel.
   Este pseudo-elemento alarga a área de toque sem alterar o desenho. */
.hero__indicador::before {
  content: "";
  position: absolute;
  inset: -14px -4px;
}
.hero__indicador[aria-selected="true"] {
  width: 52px;
  background: var(--azul-principal);
}
.hero__indicador:hover { background: rgba(255, 255, 255, 0.6); }

.hero__setas { display: flex; gap: 8px; }
.hero__seta {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--raio-p);
  color: var(--branco);
  transition: background-color var(--transicao), border-color var(--transicao);
}
.hero__seta:hover {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--tinta);
}
.hero__seta svg { width: 16px; height: 16px; }

.hero__nota {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--t-micro);
}
.hero__nota svg { width: 14px; height: 14px; opacity: 0.8; }


/* Ajustes do hero em ecrãs pequenos.
   A barra de controlos é fixa ao fundo do hero: sem folga adicional,
   sobrepunha-se aos botões de acção. */
@media (max-width: 700px) {
  .hero { min-height: clamp(560px, 86vh, 700px); }
  .hero__conteudo { padding-bottom: clamp(110px, 18vh, 150px); }
  /* O horário já aparece na barra de topo e no rodapé — aqui é redundante
     e obrigaria a barra a crescer para duas linhas. */
  .hero__nota { display: none; }
  .hero__controlos-interior { min-height: 56px; }
  /* As quebras de linha são pensadas para desktop; em mobile atrapalham.
     Há um espaço antes de cada <br> no HTML, para as palavras não colarem. */
  .hero__titulo br { display: none; }
}

@media (max-width: 520px) {
  /* Botões a toda a largura: com dois lado a lado, os rótulos mais longos
     partiam-se em duas linhas. */
  .hero__painel .grupo-botoes { flex-direction: column; align-items: stretch; }
  .hero__painel .botao { width: 100%; }
}

@media (max-width: 420px) {
  .hero__seta { width: 38px; height: 38px; }
  .hero__indicador { width: 26px; }
  .hero__indicador[aria-selected="true"] { width: 40px; }
}


/* --------------------------------------------------------------------------
   4. CABEÇALHO DE PÁGINA (páginas interiores)
   -------------------------------------------------------------------------- */

.cabecalho-pagina {
  position: relative;
  background: var(--tinta);
  color: var(--branco);
  overflow: hidden;
}
.cabecalho-pagina::after {
  /* Textura geométrica muito subtil, evoca precisão clínica */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 78% 15%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 15%, #000 10%, transparent 72%);
  pointer-events: none;
}

/* Variante com fotografia de fundo própria (já inclui textura e a marca);
   desliga o padrão geométrico gerado por CSS para não sobrepor os dois. */
.cabecalho-pagina--header-jpg {
  background-image: url("../images/clinica/header.jpg");
  background-size: cover;
  background-position: center;
}
.cabecalho-pagina--header-jpg::after { display: none; }
.cabecalho-pagina__interior {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 8vw, 104px);
  max-width: 780px;
}
.cabecalho-pagina h1 {
  color: var(--branco);
  margin-bottom: 18px;
  text-wrap: balance;
}
.cabecalho-pagina p {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.18rem);
  margin: 0;
}
.cabecalho-pagina .antetitulo { color: var(--azul-secundario); }
.cabecalho-pagina .antetitulo::before { background: var(--azul-principal); }

/* Migalhas de pão */
.migalhas {
  border-bottom: 1px solid var(--linha);
  background: var(--neve);
  font-size: var(--t-micro);
}
.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 12px 0;
}
.migalhas li { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--tinta-suave); }
.migalhas li:not(:last-child)::after { content: "/"; color: var(--linha-forte); }
.migalhas a { color: var(--tinta-media); }
.migalhas a:hover { color: var(--azul-escuro); }
.migalhas [aria-current="page"] { color: var(--tinta); }


/* --------------------------------------------------------------------------
   5. CARTÕES
   -------------------------------------------------------------------------- */

.cartao {
  position: relative;
  isolation: isolate;              /* ver o padrão .realce-azul em base.css */
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.cartao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--gradiente-realce);
  opacity: 0;
  transition: opacity var(--transicao);
}
.cartao:hover::before,
.cartao:focus-within::before { opacity: 1; }

.cartao:hover,
.cartao:focus-within {
  border-color: transparent;
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
}
/* Todo o conteúdo passa a claro sobre o azul */
.cartao:hover h3,
.cartao:focus-within h3 { color: var(--branco); }

.cartao:hover .cartao__corpo p,
.cartao:focus-within .cartao__corpo p { color: var(--realce-texto); }

.cartao:hover .ligacao-seta,
.cartao:focus-within .ligacao-seta { color: var(--branco); }
.cartao__corpo { padding: clamp(22px, 2.6vw, 32px); flex: 1; display: flex; flex-direction: column; }
.cartao__corpo p { color: var(--tinta-media); font-size: var(--t-pequeno); }
.cartao__corpo .ligacao-seta { margin-top: auto; padding-top: 18px; }
.cartao h3 { margin-bottom: 10px; }

/* Ícone dentro de cartão */
.cartao__icone {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: var(--raio-m);
  background: var(--neve-azul);
  color: var(--azul-escuro);
  transition: background-color var(--transicao), color var(--transicao);
}
.cartao:hover .cartao__icone,
.cartao:focus-within .cartao__icone {
  background: var(--realce-caixa);
  color: var(--branco);
}
.cartao__icone svg { width: 24px; height: 24px; }

/* Cartão com imagem no topo */
.cartao__figura {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--neve);
}
.cartao__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transicao-lenta);
}
.cartao:hover .cartao__figura img,
.cartao:focus-within .cartao__figura img { transform: scale(1.04); }

/* Cartão-ligação: a área toda é clicável através de ::after */
.cartao--ligacao .cartao__ligacao-total::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* --------------------------------------------------------------------------
   6. LISTA DE ESPECIALIDADES / SERVIÇOS
   -------------------------------------------------------------------------- */

.lista-servicos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linha);
}
.lista-servicos li {
  margin: 0;
  border-bottom: 1px solid var(--linha);
}
.lista-servicos__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 8px;
  transition: background-color var(--transicao), padding-left var(--transicao);
}
.lista-servicos li:hover .lista-servicos__item {
  background: var(--neve);
  padding-left: 16px;
}
.lista-servicos__marca {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--azul-principal);
  transform: translateY(-3px);
}
.lista-servicos__nome { font-weight: 500; color: var(--tinta); }
.lista-servicos__desc {
  display: block;
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
  margin-top: 2px;
}

/* Lista simples com marcas de verificação */
.lista-verificada {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lista-verificada li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
}
.lista-verificada li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--neve-azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23037BBA' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}


/* --------------------------------------------------------------------------
   7. SELOS DE CONFIANÇA / NÚMEROS
   -------------------------------------------------------------------------- */

/* TÉCNICA DAS GRELHAS COM SEPARADORES
   Em vez de pintar o fundo do contentor e deixar o gap de 1px revelar a cor
   (o que deixaria células cinzentas vazias sempre que a última linha ficasse
   incompleta), cada célula desenha o seu próprio traço com box-shadow. Os
   traços de células adjacentes sobrepõem-se no gap e formam uma linha única;
   as posições vazias ficam brancas. */
.faixa-confianca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--branco);
  border-radius: var(--raio-m);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--linha);
}
.faixa-confianca__item {
  background: var(--branco);
  box-shadow: 0 0 0 1px var(--linha);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 30px);
}
.faixa-confianca__valor {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--fonte-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  line-height: 1;
  color: var(--azul-escuro);
  margin-bottom: 10px;
}
.faixa-confianca__valor .sufixo {
  font-family: var(--fonte-texto);
  font-size: 1.1rem;
  font-weight: 600;
  /* Azul-escuro em vez do azul-principal: a este corpo de letra,
     o azul-principal não atinge o rácio de contraste de 4.5:1. */
  color: var(--azul-escuro);
}
.faixa-confianca__rotulo {
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
  line-height: 1.5;
}

/* Selo DGS / autorizações */
.selo-oficial {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--azul-principal);
  border-radius: var(--raio-p);
  background: var(--branco);
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
}
.selo-oficial svg { width: 22px; height: 22px; color: var(--azul-escuro); flex: none; }
.selo-oficial strong { color: var(--tinta); font-weight: 600; }


/* --------------------------------------------------------------------------
   8. TESTEMUNHOS
   -------------------------------------------------------------------------- */

.testemunho {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(26px, 3vw, 36px);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
}
.testemunho__estrelas {
  color: #F5B32E;
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 18px;
}
.testemunho__texto {
  font-family: var(--fonte-display);
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--tinta);
  margin-bottom: 22px;
}
.testemunho__autor {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  font-size: var(--t-pequeno);
}
.testemunho__autor strong { display: block; font-weight: 600; color: var(--tinta); }
.testemunho__autor span { color: var(--tinta-suave); font-size: var(--t-micro); }


/* --------------------------------------------------------------------------
   9. BLOCO CTA
   -------------------------------------------------------------------------- */

.bloco-cta {
  position: relative;
  background: var(--tinta);
  color: var(--branco);
  overflow: hidden;
}
.bloco-cta::before {
  content: "";
  position: absolute;
  top: -30%; right: -8%;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 161, 224, 0.30) 0%, transparent 68%);
  pointer-events: none;
}
.bloco-cta__interior {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
  padding-block: clamp(56px, 7vw, 92px);
}
.bloco-cta h2 { color: var(--branco); margin-bottom: 16px; text-wrap: balance; }
.bloco-cta p { color: rgba(255, 255, 255, 0.78); max-width: 52ch; margin: 0; }
.bloco-cta .grupo-botoes { justify-content: flex-end; }

@media (max-width: 860px) {
  .bloco-cta__interior { grid-template-columns: 1fr; }
  .bloco-cta .grupo-botoes { justify-content: flex-start; }
}


/* --------------------------------------------------------------------------
   10. FORMULÁRIOS
   -------------------------------------------------------------------------- */

.formulario { display: grid; gap: 20px; }

.campo { display: grid; gap: 7px; }
.campo--duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) {
  .campo--duplo { grid-template-columns: 1fr; }
}

.campo label {
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--tinta);
}
.campo label .obrigatorio { color: var(--azul-escuro); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p);
  font-size: var(--t-pequeno);
  color: var(--tinta);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 150px; resize: vertical; }

/* Abaixo de 16px o Safari do iPhone amplia a página assim que o campo ganha
   foco, e o utilizador fica com o site fora de enquadramento. */
@media (max-width: 768px) {
  .campo input,
  .campo select,
  .campo textarea { font-size: 16px; }
}

.campo input::placeholder,
.campo textarea::placeholder { color: var(--tinta-suave); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 3px rgba(0, 161, 224, 0.15);
}

/* Estado de erro, aplicado por js/formulario.js */
.campo.tem-erro input,
.campo.tem-erro select,
.campo.tem-erro textarea {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.campo__erro {
  display: none;
  font-size: var(--t-micro);
  color: #C0392B;
}
.campo.tem-erro .campo__erro { display: block; }

/* Consentimento RGPD */
.campo-consentimento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--neve);
}
.campo-consentimento input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--azul-escuro);
  cursor: pointer;
}
.campo-consentimento label {
  font-size: var(--t-micro);
  font-weight: 400;
  line-height: 1.55;
  color: var(--tinta-media);
  cursor: pointer;
}
.campo-consentimento.tem-erro { border-color: #C0392B; background: rgba(192, 57, 43, 0.04); }

/* Mensagem de estado do formulário */
.formulario__estado {
  display: none;
  padding: 15px 18px;
  border-radius: var(--raio-p);
  font-size: var(--t-pequeno);
  line-height: 1.55;
}
.formulario__estado.visivel { display: block; }
.formulario__estado--sucesso {
  background: #EDF7EE;
  border: 1px solid #BEDDC1;
  color: #1E5C25;
}
.formulario__estado--erro {
  background: #FDEDEC;
  border: 1px solid #F0C4C0;
  color: #922B21;
}


/* --------------------------------------------------------------------------
   11. RODAPÉ
   -------------------------------------------------------------------------- */

/* Faixa de acordos e convenções (fundo claro, antes do rodapé escuro) */
.acordos {
  padding-block: clamp(44px, 5.5vw, 68px);
  background: var(--neve);
  border-top: 1px solid var(--linha);
}
.acordos__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 30px;
}
.acordos__cabecalho h2 {
  font-size: var(--t-h3);
  margin: 0;
}
.acordos__cabecalho p {
  margin: 0;
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
}
.acordos__grelha {
  display: grid;
  /* auto-fit (e não auto-fill) para as colunas vazias colapsarem: com seis
     acordos numa fila de sete, sobrava uma célula órfã no fim. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--branco);
  border-radius: var(--raio-m);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--linha);
}
.acordos__item {
  display: grid;
  place-items: center;
  padding: 24px 18px;
  background: var(--branco);
  box-shadow: 0 0 0 1px var(--linha);
  transition: background-color var(--transicao);
}
.acordos__item:hover { background: var(--neve-azul); }
.acordos__item img {
  /* Todos os ficheiros foram normalizados para a mesma tela de 300 x 84 px,
     com o logótipo centrado. Dimensionar pela largura mantém-nos todos à
     mesma escala óptica, independentemente da proporção de cada marca. */
  width: 100%;
  max-width: 172px;
  height: auto;
  /* Cinzento em repouso, cor no hover — mantém a grelha calma sem esconder
     os acordos. O contraste extra compensa as marcas de cores claras (o
     Multicare, por exemplo), que em escala de cinzentos quase desapareciam. */
  filter: grayscale(1) contrast(1.25) brightness(0.92);
  opacity: 0.82;
  transition: filter var(--transicao), opacity var(--transicao);
}
.acordos__item:hover img { filter: none; opacity: 1; }

/* Rodapé principal */
.rodape {
  background: var(--rodape-fundo);
  color: var(--rodape-texto);
  font-size: var(--t-pequeno);
}
.rodape__principal {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 76px);
}
@media (max-width: 980px) {
  .rodape__principal { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .rodape__principal { grid-template-columns: 1fr; }
}

.rodape__logo { margin-bottom: 20px; }
.rodape__logo img {
  height: 58px;
  width: auto;
  /* Usa-se images/logo-claro.png (texto branco), pelo que não é preciso
     qualquer filtro CSS — o símbolo mantém o azul da marca. */
}
.rodape__sobre { max-width: 34ch; line-height: 1.65; margin-bottom: 22px; }

.rodape h3 {
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--branco);
  margin-bottom: 20px;
}

.rodape a { color: var(--rodape-texto); }
.rodape a:hover { color: var(--branco); }

.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.rodape__lista li { margin: 0; }

.rodape__contacto {
  display: grid;
  gap: 14px;
  margin: 0;
}
.rodape__contacto-linha {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  line-height: 1.55;
}
.rodape__contacto-linha svg {
  width: 16px; height: 16px;
  flex: none;
  margin-top: 4px;
  color: var(--azul-principal);
}
.rodape__telefones { display: grid; gap: 3px; }

.rodape__sociais { display: flex; gap: 10px; margin-top: 22px; }
.rodape__sociais a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--raio-p);
  transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao);
}
.rodape__sociais a:hover {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: var(--branco);
}
.rodape__sociais svg { width: 17px; height: 17px; }

/* Nota SNS / convenções */
.rodape__nota-sns {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-left: 3px solid var(--azul-principal);
  border-radius: var(--raio-p);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--t-micro);
  line-height: 1.6;
}
.rodape__nota-sns strong { color: var(--branco); font-weight: 600; }

/* Barra legal */
.rodape__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding-block: 22px;
  font-size: var(--t-micro);
}
.rodape__legal-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
/* Copyright e autoria correm como uma única frase, separados por um ponto
   médio — tal como o resto da barra legal. */
.rodape__creditos { margin: 0; }

/* A autoria fica num tom ligeiramente distinto, para se ler como assinatura
   e não como parte do aviso legal do cliente. */
.rodape__autoria {
  color: var(--rodape-autoria);
  white-space: nowrap;
}
.rodape__autoria a {
  color: var(--rodape-autoria);
  font-weight: 500;
  transition: color var(--transicao);
}
.rodape__autoria a:hover { color: var(--branco); }

.rodape__legal-ligacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rodape__legal-ligacoes li { margin: 0; }

/* "Definições de cookies" é um <button>, mas no rodapé tem de se ler como
   as ligações que o rodeiam — herda por isso o tipo, o tamanho e a cor. */
.rodape__legal-ligacoes .rodape__botao-legal {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--transicao);
}
.rodape__legal-ligacoes .rodape__botao-legal:hover { color: var(--branco); }


/* --------------------------------------------------------------------------
   12. BOTÃO FLUTUANTE DE WHATSAPP
   -------------------------------------------------------------------------- */

/* Em repouso é só o ícone, num círculo. Ao passar o rato, cresce para a
   esquerda e revela o texto — como está ancorado à direita com `right`, o
   crescimento da largura empurra sozinho a caixa nessa direcção. */
.whatsapp-flutuante {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: var(--z-flutuante);
  display: inline-flex;
  align-items: center;
  padding: 15px;
  border-radius: 999px;
  background: #1FA855;
  color: var(--branco);
  font-size: var(--t-pequeno);
  font-weight: 600;
  white-space: nowrap;
  /* Sem isto a caixa de texto é mais alta do que o ícone e o botão em
     repouso fica um oval de 52x55 em vez de um círculo. */
  line-height: 1;
  box-shadow: 0 6px 22px rgba(31, 168, 85, 0.36);
  transition: transform var(--transicao), box-shadow var(--transicao),
              background-color var(--transicao), padding var(--transicao);
}
.whatsapp-flutuante svg { width: 22px; height: 22px; flex: none; }

/* O texto continua na árvore de acessibilidade: encolhe-se com max-width,
   não com display:none, para os leitores de ecrã o anunciarem sempre. */
.whatsapp-flutuante__texto {
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--transicao), margin-left var(--transicao),
              opacity var(--transicao);
}

.whatsapp-flutuante:hover,
.whatsapp-flutuante:focus-visible {
  background: #17904A;
  color: var(--branco);
  transform: translateY(-2px);
  padding-right: 22px;
  box-shadow: 0 10px 30px rgba(31, 168, 85, 0.44);
}
.whatsapp-flutuante:hover .whatsapp-flutuante__texto,
.whatsapp-flutuante:focus-visible .whatsapp-flutuante__texto {
  max-width: 200px;
  margin-left: 10px;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   12-b. BARRA DE ACÇÕES FIXA (apenas em mobile)

   Em telemóvel a barra azul de topo sai e a navegação encosta-se ao topo;
   as acções de contacto descem para o fundo do ecrã, ao alcance do polegar.
   O ponto de ruptura é 768 px — alterar aqui e nas três regras marcadas
   com "BARRA MOBILE" para mudar a partir de que largura isto acontece.
   -------------------------------------------------------------------------- */

.barra-mobile {
  /* Escondida por omissão: só existe abaixo do ponto de ruptura */
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-barra-mobile);
  background: var(--azul-escuro);
  /* Respeita a área segura do iPhone (barra de gestos) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 14px rgba(8, 32, 46, 0.18);
}

.barra-mobile__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 62px;
  padding: 9px 6px;
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  transition: background-color var(--transicao);
}
.barra-mobile__item:hover,
.barra-mobile__item:active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--branco);
}
.barra-mobile__item svg {
  width: 23px; height: 23px;
  flex: none;
}
/* Traço separador entre acções */
.barra-mobile__item + .barra-mobile__item {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18);
}


/* --------------------------------------------------------------------------
   13. PONTOS DE RUTURA DA NAVEGAÇÃO
   -------------------------------------------------------------------------- */

/* Abaixo de 1140px o menu horizontal deixa de caber com o CTA */
@media (max-width: 1140px) {
  .nav-principal { display: none; }
  .botao-menu { display: flex; }
  .barra-nav__interior { min-height: 78px; }
  .logotipo img { height: 58px; }
}

@media (max-width: 860px) {
  /* A barra de topo passa a mostrar apenas telefone e selo */
  .barra-topo__item--secundario { display: none; }
}

/* ---- BARRA MOBILE: o comportamento de telemóvel ---- */
@media (max-width: 768px) {
  /* 1. A barra azul de topo sai; a navegação encosta-se ao topo do ecrã. */
  .barra-topo { display: none; }

  /* 2. O botão flutuante de WhatsApp seria redundante com a barra de baixo,
        e taparia conteúdo por cima dela. */
  .whatsapp-flutuante { display: none; }

  /* 3. A barra de acções passa a existir. */
  .barra-mobile { display: flex; }

  /* 4. Espaço no fim da página para a barra não tapar o rodapé.
        A folga é dada ao próprio rodapé — e não ao <body> — para que a faixa
        por trás da barra fique com o azul-escuro do rodapé em vez de branco. */
  .rodape__legal { padding-bottom: calc(22px + 62px + env(safe-area-inset-bottom, 0px)); }

  /* 4b. Os controlos do carrossel ficam no fundo do herói, exactamente onde
         a barra fixa assenta. A faixa translúcida continua a chegar ao fundo;
         só o conteúdo sobe, para os indicadores e as setas ficarem clicáveis. */
  .hero__controlos-interior {
    padding-bottom: calc(10px + 62px + env(safe-area-inset-bottom, 0px));
  }

  /* 5. Com o menu aberto, a barra ficaria meio tapada pelo painel e meio
        visível sob o véu. Como é `fixed`, escondê-la não desloca nada. */
  body.menu-aberto .barra-mobile { display: none; }

  .logotipo img { height: 48px; }

  /* Sem a barra de topo o cabeçalho fixo é mais baixo: as âncoras deixam de
     precisar de tanta folga ao serem alcançadas. */
  html { scroll-padding-top: 92px; }
}

@media (max-width: 400px) {
  /* Em ecrãs muito estreitos os rótulos precisam de mais folga */
  .barra-mobile__item { font-size: 0.7rem; padding-inline: 3px; }
  .barra-mobile__item svg { width: 21px; height: 21px; }
}


/* --------------------------------------------------------------------------
   14. ECRÃ DE CARREGAMENTO  (apenas em index.html)

   O site é estático e abre em muito menos de um segundo: não há espera para
   disfarçar. Isto não é um indicador de carregamento — é um tempo de marca.
   Daí não haver barra de progresso nem nada que prometa espera: o símbolo
   compõe-se, e a página abre.

   O SVG está embutido no HTML (ver index.html) para se poder animar cada
   camada: primeiro o disco, depois a figura azul, por fim os detalhes
   brancos. É a marca da clínica a formar-se.

   O sinal para aparecer vem de um script em linha no <head>, que consulta o
   sessionStorage e coloca `a-carregar` no <html> ANTES da primeira pintura.
   Sem JavaScript a classe nunca é colocada e o ecrã nunca aparece — a
   degradação correcta, já que sem JS não haveria como o retirar.
   -------------------------------------------------------------------------- */

.carregador {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  place-items: center;
  /* Fundo claro: é para este que o logótipo foi desenhado. Num azul-claro o
     disco do símbolo, que é exactamente dessa cor, desapareceria. */
  background: var(--neve);
}

.a-carregar .carregador { display: grid; }
.a-carregar body { overflow: hidden; }

/* Saída */
.carregador--sair {
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.carregador__marca {
  width: clamp(150px, 30vw, 215px);
  aspect-ratio: 480.4 / 500.9;
}
.carregador__marca svg {
  display: block;
  width: 100%;
  height: 100%;
  /* O conjunto assenta enquanto as camadas aparecem */
  animation: mc-assentar 780ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ---- Dois tempos: o disco, depois a figura ----

   A primeira versão tinha três tempos — disco, azul, branco. Não resultou:
   sobre um fundo claro a camada branca é invisível enquanto entra sozinha,
   pelo que durante meio segundo a figura lia-se como uma mancha azul chapada.
   Parecia partida, não em formação. O azul e o branco entram agora juntos e
   a figura aparece sempre completa.

   Só se anima a opacidade. Escalar cada path em separado faria cada bocado
   encolher em torno do seu próprio centro, o que desmancharia o desenho:
   o movimento de conjunto vem do `mc-assentar` acima. */

#marca-loader .mc-disco  { animation: mc-surgir 420ms ease-out  40ms both; }
#marca-loader .mc-azul,
#marca-loader .mc-branco { animation: mc-surgir 480ms ease-out 300ms both; }

@keyframes mc-surgir {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mc-assentar {
  from { transform: scale(0.94); }
  to   { transform: none; }
}

/* Com movimento reduzido, a marca aparece composta e sem animação */
@media (prefers-reduced-motion: reduce) {
  .carregador__marca svg,
  #marca-loader .mc-disco,
  #marca-loader .mc-azul,
  #marca-loader .mc-branco { animation: none; opacity: 1; transform: none; }
}


/* ==========================================================================
   15. CONSENTIMENTO DE COOKIES
   (banner, painel de preferências e cartão de conteúdo bloqueado)

   O banner é uma barra no fundo, não uma janela modal: o site continua
   legível enquanto a decisão não é tomada. "Aceitar" e "Recusar" são
   botões irmãos, lado a lado e com o mesmo tamanho — a recusa não pode
   ser mais difícil do que a aceitação.
   ========================================================================== */

.aviso-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-cookies);
  padding: var(--gutter);
  padding-block-start: 0;
  pointer-events: none;   /* só a caixa interior recebe cliques */
}

.aviso-cookies__caixa {
  pointer-events: auto;
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-alta);

  /* Estado de repouso: ligeiramente descido e transparente. */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transicao), transform var(--transicao);
}
.aviso-cookies.visivel .aviso-cookies__caixa {
  opacity: 1;
  transform: none;
}

.aviso-cookies__texto { flex: 1 1 auto; min-width: 0; }

.aviso-cookies__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: var(--t-h4);
  font-family: var(--fonte-texto);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tinta);
}

.aviso-cookies__icone {
  display: inline-flex;
  color: var(--azul-escuro);
}
.aviso-cookies__icone svg { width: 20px; height: 20px; }

.aviso-cookies__texto p {
  margin: 0;
  font-size: var(--t-pequeno);
  line-height: 1.6;
  color: var(--tinta-media);
  max-width: 70ch;
}
.aviso-cookies__texto a {
  color: var(--azul-escuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aviso-cookies__accoes {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aviso-cookies__accoes .botao { white-space: nowrap; }

/* "Personalizar" é deliberadamente uma ligação e não um terceiro botão:
   não é uma decisão, é um caminho para o detalhe. */
.aviso-cookies__personalizar {
  background: none;
  border: 0;
  padding: 8px 4px;
  font-family: inherit;
  font-size: var(--t-pequeno);
  font-weight: 500;
  color: var(--tinta-media);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transicao);
}
.aviso-cookies__personalizar:hover { color: var(--azul-escuro); }

@media (max-width: 980px) {
  .aviso-cookies__caixa { flex-direction: column; align-items: stretch; gap: 18px; }
  .aviso-cookies__accoes { flex-wrap: wrap; }
  .aviso-cookies__accoes .botao { flex: 1 1 200px; }
}

/* Em mobile a barra fixa de acções ocupa o fundo do ecrã: o aviso sobe
   o suficiente para não a tapar. */
@media (max-width: 860px) {
  .aviso-cookies {
    padding-bottom: calc(14px + 62px + env(safe-area-inset-bottom, 0px));
  }
}

/* O botão flutuante de WhatsApp vive no mesmo canto que o aviso e ficaria
   escondido por baixo dele. Enquanto houver uma decisão por tomar, sai de
   cena — e não se limita a desaparecer: recolhe-se, para a saída ser lida
   como intencional. Regressa assim que o utilizador escolhe.
   `visibility` acompanha a opacidade para o botão não continuar clicável
   enquanto está invisível. */
body.com-aviso-cookies .whatsapp-flutuante {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity var(--transicao), visibility var(--transicao),
              transform var(--transicao);
}


/* --------------------------------------------------------------------------
   15-b. PAINEL DE PREFERÊNCIAS
   -------------------------------------------------------------------------- */

.painel-cookies {
  position: fixed;
  inset: 0;
  z-index: var(--z-cookies-painel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.painel-cookies__fundo {
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 46, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--transicao);
}
.painel-cookies.aberto .painel-cookies__fundo { opacity: 1; }

.painel-cookies__caixa {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--branco);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-alta);

  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transition: opacity var(--transicao), transform var(--transicao);
}
.painel-cookies.aberto .painel-cookies__caixa {
  opacity: 1;
  transform: none;
}

.painel-cookies__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.painel-cookies__topo h2 { margin: 0; font-size: var(--t-h3); }
.painel-cookies__topo .antetitulo { margin-bottom: 10px; }

.painel-cookies__fechar {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--neve);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta-media);
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
              border-color var(--transicao);
}
.painel-cookies__fechar:hover {
  background: var(--branco);
  border-color: var(--azul-principal);
  color: var(--azul-escuro);
}

.painel-cookies__intro {
  margin: 0 0 24px;
  font-size: var(--t-pequeno);
  line-height: 1.65;
  color: var(--tinta-media);
}
.painel-cookies__intro a {
  color: var(--azul-escuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.painel-cookies__lista {
  display: grid;
  gap: 2px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  overflow: hidden;
  background: var(--linha);
}

.painel-cookies__categoria {
  padding: 18px 20px;
  background: var(--branco);
}

.painel-cookies__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
.painel-cookies__categoria:has(.painel-cookies__campo:disabled) .painel-cookies__linha {
  cursor: default;
}

/* `min-width: 0` anula o mínimo implícito dos itens flex: sem isto, o nome
   da categoria recusa-se a encolher e empurra o interruptor (ou a etiqueta
   "Sempre activos") para fora da caixa em ecrãs estreitos. */
.painel-cookies__nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-corpo);
  font-weight: 600;
  color: var(--tinta);
}

.painel-cookies__sempre {
  flex: none;
  text-align: right;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.painel-cookies__descricao {
  margin: 8px 0 0;
  font-size: var(--t-pequeno);
  line-height: 1.6;
  color: var(--tinta-media);
  max-width: 62ch;
}

/* Interruptor. O <input> continua no DOM e acessível a leitores de ecrã;
   é apenas tornado invisível e desenhado pelo <span> irmão. */
.painel-cookies__campo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.interruptor {
  flex: none;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--linha-forte);
  transition: background-color var(--transicao);
}
.interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: var(--sombra-baixa);
  transition: transform var(--transicao);
}
.painel-cookies__campo:checked + .interruptor {
  background-color: var(--cta-de);
  background-image: var(--gradiente-cta);
}
.painel-cookies__campo:checked + .interruptor::after { transform: translateX(20px); }

/* Foco visível por teclado, já que o input em si está escondido */
.painel-cookies__campo:focus-visible + .interruptor {
  outline: 2px solid var(--azul-principal);
  outline-offset: 3px;
}

.painel-cookies__accoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.painel-cookies__accoes .botao { flex: 1 1 auto; }

/* Em ecrãs estreitos "Estritamente necessários" e "Sempre activos" não
   cabem lado a lado: a etiqueta passa para baixo do nome, em vez de o
   apertar contra a margem. Só a linha que tem etiqueta é que quebra — as
   linhas com interruptor mantêm-no sempre à direita, onde se espera. */
@media (max-width: 480px) {
  .painel-cookies__linha:has(.painel-cookies__sempre) {
    flex-wrap: wrap;
    gap: 2px;
  }
  .painel-cookies__linha:has(.painel-cookies__sempre) .painel-cookies__nome {
    flex: 1 1 100%;
  }
  .painel-cookies__sempre { text-align: left; }
}

@media (max-width: 560px) {
  .painel-cookies { padding: 0; }
  .painel-cookies__caixa {
    max-width: none;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }
  .painel-cookies__accoes .botao { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   15-c. CARTÃO DE CONTEÚDO BLOQUEADO
   Ocupa o lugar de um iframe de terceiros ainda não autorizado (o mapa).
   -------------------------------------------------------------------------- */

.bloqueio-cookies {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  background: var(--neve);
  background-image:
    radial-gradient(circle at 1px 1px, var(--linha-forte) 1px, transparent 0);
  background-size: 16px 16px;
}

.bloqueio-cookies__icone {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--azul-escuro);
  opacity: 0.8;
}
.bloqueio-cookies__icone svg { width: 30px; height: 30px; }

.bloqueio-cookies__titulo {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  color: var(--tinta);
}

.bloqueio-cookies__texto {
  margin: 0;
  max-width: 44ch;
  font-size: var(--t-pequeno);
  line-height: 1.6;
  color: var(--tinta-media);
}

.bloqueio-cookies__accoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.bloqueio-cookies__accoes .botao--contorno { background: var(--branco); }


/* --------------------------------------------------------------------------
   15-d. TABELA DE COOKIES (página da Política de Cookies)
   -------------------------------------------------------------------------- */

.tabela-cookies-envolvente {
  overflow-x: auto;
  margin: 22px 0 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
}

.tabela-cookies {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--t-pequeno);
}
.tabela-cookies th,
.tabela-cookies td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha);
}
.tabela-cookies thead th {
  background: var(--neve);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.tabela-cookies tbody tr:last-child td { border-bottom: 0; }
.tabela-cookies td:first-child {
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}

/* A região ganha foco de teclado para que o deslocamento horizontal não
   fique reservado a quem usa rato (WCAG 2.1.1). O contorno só aparece na
   navegação por teclado. */
.tabela-cookies-envolvente:focus-visible {
  outline: 2px solid var(--azul-principal);
  outline-offset: 2px;
}

/* Tabela de duas colunas (finalidade / fundamento): não precisa de largura
   mínima — as duas colunas quebram bem em qualquer ecrã. */
.tabela-cookies--dupla { min-width: 0; }
.tabela-cookies--dupla td:first-child { white-space: normal; }

/* Num telemóvel, uma tabela de quatro colunas obriga a arrastar de lado
   para ler uma única linha. Abaixo dos 720 px cada linha passa a um
   cartão, com o nome da coluna por cima de cada valor. Os `role` no HTML
   repõem a semântica de tabela que o `display: block` desfaz — sem eles,
   um leitor de ecrã deixaria de anunciar isto como tabela. */
@media (max-width: 720px) {
  .tabela-cookies-envolvente { overflow-x: visible; }

  .tabela-cookies,
  .tabela-cookies tbody,
  .tabela-cookies tr,
  .tabela-cookies td { display: block; width: 100%; }

  .tabela-cookies { min-width: 0; }

  /* O cabeçalho deixa de fazer sentido visualmente — cada valor passa a
     trazer o seu rótulo. Continua na árvore de acessibilidade. */
  .tabela-cookies thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabela-cookies tr {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--linha);
  }
  .tabela-cookies tr:last-child { border-bottom: 0; }

  .tabela-cookies td {
    padding: 0;
    border-bottom: 0;
    white-space: normal;
  }
  .tabela-cookies td + td { margin-top: 12px; }

  .tabela-cookies td::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 2px;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
  }
  /* A primeira coluna é o nome do cookie: dispensa rótulo, porque o
     cartão inteiro é sobre ele. */
  .tabela-cookies td:first-child::before { content: none; }
  .tabela-cookies td:first-child {
    font-size: var(--t-corpo);
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* --------------------------------------------------------------------------
   15-e. MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .aviso-cookies__caixa,
  .painel-cookies__caixa,
  .painel-cookies__fundo,
  .interruptor,
  .interruptor::after { transition: none; }
  .aviso-cookies__caixa { transform: none; }
  body.com-aviso-cookies .whatsapp-flutuante { transform: none; }
  .whatsapp-flutuante { transition: none; }
}


/* ==========================================================================
   16. PÁGINAS LEGAIS
   (ficha de identificação, marcadores por preencher e listas de definições)
   ========================================================================== */

/* Marcador de dado em falta. Fica deliberadamente berrante: é para dar
   nas vistas em revisão e não sobreviver à publicação. Ao preencher,
   substituir todo o <span> pelo valor real. */
.por-preencher {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--raio-p);
  background: #FFF3CD;
  border: 1px dashed #C9A227;
  font-family: var(--fonte-texto);
  font-size: 0.9em;
  font-weight: 600;
  color: #7A5B00;
  white-space: nowrap;
}

/* Ficha de identificação legal (DL 7/2004, art. 10.º) */
.ficha-legal {
  margin: 26px 0;
  padding: clamp(22px, 3vw, 32px);
  background: var(--neve);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--azul-principal);
  border-radius: var(--raio-m);
}
.ficha-legal dl {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: 10px 26px;
  margin: 0;
}
.ficha-legal dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-top: 2px;
}
.ficha-legal dd {
  margin: 0;
  font-size: var(--t-pequeno);
  line-height: 1.55;
  color: var(--tinta);
}
.ficha-legal dd a { color: var(--azul-escuro); }

@media (max-width: 620px) {
  .ficha-legal dl { grid-template-columns: 1fr; gap: 2px; }
  .ficha-legal dd { margin-bottom: 14px; }
  .ficha-legal dd:last-child { margin-bottom: 0; }
}

/* Caixa de destaque dentro de texto legal — para avisos que não devem
   passar despercebidos (ex.: o site não substitui consulta médica). */
.nota-legal {
  margin: 26px 0;
  padding: clamp(20px, 2.6vw, 26px);
  background: var(--neve-azul);
  border-radius: var(--raio-m);
}
.nota-legal p { margin: 0; font-size: var(--t-pequeno); line-height: 1.65; color: var(--tinta); }
.nota-legal p + p { margin-top: 10px; }
.nota-legal strong { color: var(--tinta); }

/* Índice de navegação no topo das páginas legais */
.indice-legal {
  margin: 0 0 40px;
  padding: clamp(20px, 2.6vw, 26px) clamp(22px, 3vw, 30px);
  background: var(--neve);
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
}
.indice-legal h2 {
  margin: 0 0 14px;
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.indice-legal ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 7px 26px;
  margin: 0;
  padding-left: 18px;
}
.indice-legal li { margin: 0; }
.indice-legal a {
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
  text-decoration: none;
  transition: color var(--transicao);
}
.indice-legal a:hover { color: var(--azul-escuro); text-decoration: underline; }

/* Corpo de texto das páginas legais: ritmo de leitura mais folgado e
   âncoras que não ficam escondidas por baixo do cabeçalho fixo. */
.texto-legal h2 {
  margin-top: 46px;
  margin-bottom: 14px;
  font-size: var(--t-h3);
  scroll-margin-top: 140px;
}
.texto-legal h2:first-of-type { margin-top: 0; }
.texto-legal h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: 600;
}
.texto-legal p,
.texto-legal li { color: var(--tinta-media); }
.texto-legal p { margin-bottom: 14px; }
.texto-legal a { color: var(--azul-escuro); text-decoration: underline; text-underline-offset: 2px; }
.texto-legal ul { margin: 0 0 18px; padding-left: 20px; }
.texto-legal li { margin-bottom: 8px; line-height: 1.65; }
.texto-legal hr {
  margin: 44px 0 26px;
  border: 0;
  border-top: 1px solid var(--linha);
}

/* Botão que se apresenta como ligação de texto. Usado para abrir o painel
   de cookies a meio de um parágrafo: semanticamente é um botão, porque
   executa uma acção e não navega para lado nenhum. */
.ligacao-botao {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--azul-escuro);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ligacao-botao:hover { color: var(--azul-principal); }