/* ===========================================================
   EverBlue Events — componentes e layout
   =========================================================== */

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.9375rem 2rem;
  border-radius: var(--raio);
  font-family: var(--f-corpo);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao), transform var(--transicao);
}

.btn--rosa {
  background: var(--rosa);
  color: var(--branco);
}
.btn--rosa:hover,
.btn--rosa:focus-visible {
  background: var(--rosa-hover);
  color: var(--branco);
}

.btn--contorno {
  background: transparent;
  color: var(--azul);
  box-shadow: inset 0 0 0 2px var(--azul);
}
.btn--contorno:hover,
.btn--contorno:focus-visible {
  background: var(--azul);
  color: var(--branco);
}

.btn--pequeno { padding: 0.6875rem 1.375rem; font-size: var(--t-base); }

.btn:active { transform: translateY(1px); }

/* ---------------------------------------------------------
   Etiqueta de secção (pílula rosa)
   --------------------------------------------------------- */
.etiqueta {
  display: inline-block;
  padding: 0.4375rem 1.25rem;
  border-radius: var(--raio-full);
  background: var(--rosa);
  color: var(--branco);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.etiqueta--clara {
  background: var(--branco);
  color: var(--rosa-link);
  box-shadow: inset 0 0 0 1px var(--rosa-suave);
}

/* ---------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--branco);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.header[data-scrolled='true'] {
  border-bottom-color: var(--linha);
  box-shadow: 0 4px 16px -12px rgba(0, 47, 79, .4);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  min-height: var(--altura-header);
}

.header__logo { flex-shrink: 0; }
.header__logo img { width: 190px; height: auto; }

@media (max-width: 900px) {
  .header__logo img { width: 150px; }
}

/* --- Navegação --- */
.nav { display: flex; align-items: center; gap: var(--e-8); }

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__lista > li { position: relative; margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-2) 0;
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-current='page'] { color: var(--rosa-link); }

.nav__link svg { width: 12px; height: 12px; transition: transform var(--transicao); }
.nav__item--tem-submenu[data-aberto='true'] .nav__link svg { transform: rotate(180deg); }

/* --- Submenu (desktop: dropdown) --- */
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  min-width: 264px;
  margin: 0;
  padding: var(--e-2);
  list-style: none;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.nav__item--tem-submenu[data-aberto='true'] .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu li { margin: 0; }
.submenu a {
  display: block;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio);
  color: var(--azul);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.submenu a:hover,
.submenu a[aria-current='page'] { background: var(--rosa-suave); color: var(--rosa-hover); }

/* --- Botão hamburger --- */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio);
  color: var(--azul);
}
.hamburger svg { width: 26px; height: 26px; }
.hamburger .icone-fechar { display: none; }
.hamburger[aria-expanded='true'] .icone-abrir { display: none; }
.hamburger[aria-expanded='true'] .icone-fechar { display: block; }

/* --- Navegação em telemóvel --- */
@media (max-width: 900px) {
  .hamburger { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--altura-header) 0 0 0;
    display: block;
    padding: var(--e-6) var(--gutter) var(--e-12);
    background: var(--branco);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .nav[data-aberto='true'] { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__lista { display: block; }
  .nav__lista > li { border-bottom: 1px solid var(--linha); }

  .nav__link {
    justify-content: space-between;
    width: 100%;
    padding: var(--e-4) 0;
    font-size: var(--t-md);
  }

  .submenu {
    position: static;
    translate: none;
    display: none;
    min-width: 0;
    margin: 0 0 var(--e-3);
    padding: 0 0 0 var(--e-4);
    border: 0;
    border-left: 2px solid var(--rosa-suave);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__item--tem-submenu[data-aberto='true'] .submenu { display: block; }

  .nav .btn { width: 100%; margin-top: var(--e-6); }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(72vh, 640px);
  padding: clamp(var(--e-12), 8vw, var(--e-20)) 0;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* O <picture> tem de esticar, senão o img height:100% resolve para auto e a
   fotografia fica pela altura natural — via-se em ecrã pequeno, onde o hero
   cresce com o conteúdo e sobrava faixa lisa por baixo. */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* A fotografia é servida já graduada a quente (hero-quente-*.webp, gerada a
   23/08/2026 a partir de Imagens/por-pagina/home/hero-baby-shower.jpeg). Nada de
   filter nem mix-blend-mode: além de custarem pintura na imagem do LCP, o
   soft-light aqui fazia o Chromium deixar de pintar a fotografia por completo. */

/* Camada de escurecimento — resolve a ilegibilidade do site actual.
   Castanho quente em vez do azul-marinho frio (pedido do cliente, 23/08/2026). */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(72% 62% at 50% 46%, rgba(28, 11, 10, .34) 0%, rgba(28, 11, 10, 0) 76%),
    linear-gradient(180deg, rgba(48, 22, 14, .36) 0%, rgba(40, 17, 14, .58) 55%, rgba(32, 13, 14, .70) 100%);
}

/* Halo quente por trás do título. Construído sobre o rosa da marca — não é
   um segundo acento, é o mesmo tom a fazer de luz. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(44% 38% at 50% 42%,
      color-mix(in srgb, var(--rosa) 15%, transparent) 0%,
      color-mix(in srgb, var(--rosa) 6%, transparent) 50%,
      transparent 78%);
}

.hero__conteudo { display: grid; justify-items: center; gap: var(--e-6); }

/* Título iluminado: contorno escuro a segurar a legibilidade, halo branco quente
   rente à letra e três anéis de rosa da marca a abrir — é o mesmo acento a fazer
   de luz, não um segundo tom.
   O brilho é fixo de propósito. Animar o text-shadow obriga o Chromium a repintar
   a área toda a cada frame e, em ecrãs retina (DPR 2), deixava de pintar a
   fotografia do hero por completo. Verificado a 23/08/2026. */
.hero h1 {
  /* Largo o suficiente para a frase assentar em duas linhas em ecrã grande —
     com 18ch partia em três. O text-wrap:balance do base.css equilibra-as. */
  max-width: 26ch;
  color: var(--branco);
  text-shadow:
    0 1px 2px rgba(28, 8, 10, .55),
    0 0 13px rgba(255, 236, 228, .76),
    0 0 28px color-mix(in srgb, var(--rosa) 86%, transparent),
    0 0 58px color-mix(in srgb, var(--rosa) 56%, transparent),
    0 0 104px color-mix(in srgb, var(--rosa) 38%, transparent);
}


.hero__sub {
  max-width: 42ch;
  margin: 0;
  color: var(--branco);
  font-size: var(--t-md);
  text-shadow: 0 1px 14px rgba(30, 10, 12, .55);
}

/* Em ecrã pequeno a altura segue o conteúdo — sem faixa vazia por baixo */
@media (max-width: 620px) {
  .hero { min-height: 0; padding-block: var(--e-16); }
}

/* --- Selo de avaliação Google --- */
/* ---------------------------------------------------------
   Prova social do Google — estrelas, linha do hero, bloco de avaliações
   --------------------------------------------------------- */
.estrelas { display: inline-flex; gap: 2px; color: var(--estrela); }
.estrelas svg { width: 20px; height: 20px; }

/* Linha do hero, no padrão do Mini & Magic: cápsula translúcida sobre a
   fotografia em vez do cartão branco opaco que aqui estava antes.
   Sem backdrop-filter de propósito — desfocar o fundo de um elemento que
   assenta sobre a imagem do LCP obriga o compositor a mais uma passagem, e
   este hero já mostrou ser sensível a isso (ver a nota do título, mais abaixo).
   A translucidez sozinha dá o mesmo efeito.
   O tom é escuro e não claro: a fotografia aqui é quente e clara, e com o véu
   branco do Mini & Magic o texto ficava a 4,3:1 — abaixo do mínimo AA de 4,5:1.
   O castanho translúcido mantém a cápsula de vidro e põe o contraste em 8:1. */
.hero__prova {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--raio-full);
  background: rgba(30, 12, 12, .34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  color: var(--branco);
  font-size: var(--t-sm);
  text-shadow: 0 1px 10px rgba(30, 10, 12, .55);
}
.hero__prova strong { font-weight: 700; }

/* ---------------------------------------------------------
   Bloco de avaliações do Google
   --------------------------------------------------------- */
.avaliacoes__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4) var(--e-8);
  margin-bottom: var(--e-8);
  padding: var(--e-6);
  border-radius: var(--raio-lg);
  background: var(--branco);
  box-shadow: var(--sombra);
}
.avaliacoes__fonte {
  display: block;
  margin-bottom: var(--e-2);
  color: var(--azul);
  font-family: var(--f-titulo);
  font-weight: 700;
}
.avaliacoes__nota { display: flex; align-items: center; gap: var(--e-3); }
.avaliacoes__nota strong {
  color: var(--azul);
  font-family: var(--f-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.avaliacoes__total { color: var(--texto-suave); font-size: var(--t-sm); }

/* Pista horizontal. Em vez de um carrossel com estado, é só overflow com
   scroll-snap: funciona com o dedo, com a roda do rato e com o teclado
   (a pista tem tabindex), e continua a funcionar sem JavaScript. */
.avaliacoes__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(340px, 82%);
  align-items: stretch;   /* todos os cartões com a altura do mais alto */
  gap: var(--e-6);
  padding-bottom: var(--e-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.avaliacao {
  display: grid;
  gap: var(--e-3);
  height: 100%;
  padding: var(--e-6);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--branco);
  scroll-snap-align: start;
}
.avaliacao__cabecalho { display: flex; align-items: center; gap: var(--e-3); }
.avaliacao__inicial {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-full);
  background: var(--rosa);
  color: var(--branco);
  font-family: var(--f-titulo);
  font-weight: 700;
}
.avaliacao__nome {
  color: var(--azul);
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.25;
}
.avaliacao__data { color: var(--texto-suave); font-size: var(--t-sm); }
.avaliacao__texto { margin: 0; font-size: var(--t-sm); line-height: 1.65; }

.avaliacoes__controlos {
  display: flex;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.avaliacoes__controlos[hidden] { display: none; }
.avaliacoes__controlos button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--rosa);
  border-radius: var(--raio-full);
  background: var(--branco);
  color: var(--rosa-link);
  transition: background var(--transicao), color var(--transicao);
}
.avaliacoes__controlos button svg { width: 22px; height: 22px; }
.avaliacoes__controlos button:hover { background: var(--rosa); color: var(--branco); }
.avaliacoes__controlos button[disabled] { opacity: .4; cursor: default; }
.avaliacoes__controlos button[disabled]:hover { background: var(--branco); color: var(--rosa-link); }

/* ---------------------------------------------------------
   Secções
   --------------------------------------------------------- */
.seccao { padding-block: var(--seccao); }
.seccao--creme { background: var(--fundo-creme); }
.seccao--suave { background: var(--fundo-suave); }

.seccao__cabecalho {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  margin-bottom: var(--e-12);
  text-align: center;
}
.seccao__cabecalho p {
  max-width: 58ch;
  margin: 0;
  font-size: var(--t-md);
  color: var(--texto-suave);
}

/* Condição de venda de um serviço. Alinhada à esquerda, ao contrário do resto
   do bloco onde aparece: é uma regra para ler, não uma frase de apresentação, e
   centrada passava despercebida. O filete rosa marca-a sem competir com a caixa
   de notas que aparece mais abaixo na mesma página. */
.aviso-servico {
  max-width: 58ch;
  margin-inline: auto;
  padding: var(--e-4) var(--e-6);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--rosa);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--texto);
  font-size: var(--t-sm);
  text-align: left;
}

/* ---------------------------------------------------------
   Cartões de serviço
   --------------------------------------------------------- */
.grelha-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-8);
}

.cartao-servico {
  display: grid;
  gap: var(--e-4);
  text-decoration: none;
  color: inherit;
}

.cartao-servico__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--raio-lg);
  background: var(--fundo-suave);
}
.cartao-servico__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
.cartao-servico:hover .cartao-servico__media img,
.cartao-servico:focus-visible .cartao-servico__media img { transform: scale(1.04); }

.cartao-servico__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-lg);
  color: var(--azul);
  transition: color var(--transicao);
}
.cartao-servico:hover .cartao-servico__titulo,
.cartao-servico:focus-visible .cartao-servico__titulo { color: var(--rosa-link); }

.cartao-servico__seta {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--rosa);
  transition: transform var(--transicao);
}
.cartao-servico:hover .cartao-servico__seta { transform: translateX(4px); }

.centro-acao { display: grid; justify-items: center; margin-top: var(--e-12); }

/* ---------------------------------------------------------
   Porque escolher — foto + lista
   --------------------------------------------------------- */
.porque {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(var(--e-8), 5vw, var(--e-20));
}

.porque__media {
  aspect-ratio: 1;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--raio-full);
  background: var(--rosa-suave);
}
.porque__media img { width: 100%; height: 100%; object-fit: cover; }

.porque__texto { display: grid; gap: var(--e-6); justify-items: start; }
.porque__texto h2 { max-width: 22ch; }

.lista-vantagens { display: grid; gap: var(--e-6); margin: 0; padding: 0; list-style: none; }
.lista-vantagens li { display: grid; grid-template-columns: 28px 1fr; gap: var(--e-1) var(--e-3); margin: 0; }
.lista-vantagens__icone {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--rosa);
}
.lista-vantagens h3 { font-size: var(--t-lg); }
.lista-vantagens p { margin: 0; color: var(--texto-suave); }

@media (max-width: 860px) {
  .porque { grid-template-columns: 1fr; }
  .porque__media { max-width: 320px; }
}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq { display: grid; gap: var(--e-3); max-width: var(--wrap-estreito); margin-inline: auto; }

.faq__item {
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.faq__item[open] { background: var(--branco); box-shadow: var(--sombra); }

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-6);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--azul);
  cursor: pointer;
  list-style: none;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--rosa-link); }

.faq__seta {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--rosa);
  transition: transform var(--transicao);
}
.faq__item[open] .faq__seta { transform: rotate(180deg); }

.faq__resposta { padding: 0 var(--e-6) var(--e-6); color: var(--texto); }
.faq__resposta p { margin-bottom: var(--e-3); }

/* ---------------------------------------------------------
   Faixa de chamada à acção
   --------------------------------------------------------- */
/* Faixa clara de propósito: a anterior era do mesmo azul do rodapé
   e os dois blocos colavam-se num só. */
.faixa-cta {
  display: grid;
  justify-items: center;
  gap: var(--e-6);
  padding: var(--seccao) var(--gutter);
  background: var(--fundo-creme);
  border-top: 1px solid #F0E2D2;
  text-align: center;
}
/* Sem limite de largura no título: com 20ch partia em duas linhas e o pedido
   é que fique numa só. O <br> no texto separa as duas frases. */
.faixa-cta h2 { max-width: none; }
.faixa-cta p { max-width: 62ch; margin: 0; color: var(--texto); font-size: var(--t-md); }

/* ---------------------------------------------------------
   Rodapé
   --------------------------------------------------------- */
.footer {
  padding-block: var(--e-16) var(--e-8);
  background: var(--azul);
  color: #BCD3E0;
}

.footer__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: var(--e-12) var(--e-8);
}

.footer__marca { display: grid; justify-items: start; gap: var(--e-4); align-content: start; }
.footer__marca img { width: 180px; height: auto; }
.footer__marca p { margin: 0; max-width: 24ch; color: #BCD3E0; }

.footer h2 {
  margin-bottom: var(--e-4);
  color: var(--branco);
  font-size: var(--t-base);
  letter-spacing: 0.02em;
}

.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); }
.footer li { margin: 0; }

.footer a { color: #BCD3E0; text-decoration: none; }
.footer a:hover { color: var(--branco); text-decoration: underline; }

.footer__contacto li { display: grid; grid-template-columns: 20px 1fr; gap: var(--e-3); align-items: start; }
.footer__contacto svg { width: 17px; height: 17px; margin-top: 4px; color: var(--rosa); }

.footer__fim {
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
  font-size: var(--t-sm);
}

@media (max-width: 860px) {
  .footer__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grelha { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Voltar ao topo
   --------------------------------------------------------- */
.ao-topo {
  position: fixed;
  right: var(--e-6);
  bottom: var(--e-6);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--raio-full);
  background: var(--rosa);
  color: var(--branco);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}
.ao-topo[data-visivel='true'] { opacity: 1; visibility: visible; }
.ao-topo:hover { background: var(--rosa-hover); color: var(--branco); }
.ao-topo svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------
   Hero das páginas internas
   --------------------------------------------------------- */
.hero-pagina {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(240px, 34vw, 380px);
  padding: var(--e-16) 0;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.hero-pagina__media { position: absolute; inset: 0; z-index: -2; }
.hero-pagina__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

.hero-pagina::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 32, 54, .46) 0%, rgba(0, 32, 54, .62) 100%);
}

.hero-pagina--liso { background: var(--azul); min-height: clamp(200px, 24vw, 280px); }
.hero-pagina--liso::after { display: none; }

.hero-pagina__conteudo { display: grid; justify-items: center; gap: var(--e-5, 1.25rem); }
.hero-pagina h1 { color: var(--branco); max-width: 20ch; font-size: var(--t-2xl); }
.hero-pagina__sub {
  max-width: 50ch;
  margin: 0;
  color: #DCEAF2;
  font-size: var(--t-md);
}
.hero-pagina .btn { margin-top: var(--e-2); }

/* ---------------------------------------------------------
   Listas com visto / cruz
   --------------------------------------------------------- */
.lista-marcada { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.lista-marcada li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--e-3);
  align-items: start;
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
}
.lista-marcada svg { width: 16px; height: 16px; margin-top: 4px; }
.lista-marcada--sim svg { color: var(--rosa); }
.lista-marcada--nao svg { color: var(--texto-suave); }
.lista-marcada--nao span { color: var(--texto-suave); }
.lista-marcada--larga li { font-size: var(--t-base); gap: var(--e-4); grid-template-columns: 22px 1fr; }
.lista-marcada--larga svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------
   Pacotes de preço — grelha alinhada por linhas
   --------------------------------------------------------- */
.pacotes {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width: 1000px) {
  .pacotes--4 { grid-template-columns: repeat(4, 1fr); }
  .pacotes--2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-inline: auto; }
}

.pacote {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--e-4);
  padding: var(--e-6);
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
}
/* Alinha "Inclui", "Não inclui" e o botão à mesma altura em todos os cartões */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1000px) {
    .pacotes--4, .pacotes--2 { grid-template-rows: auto auto auto auto auto; }
    .pacotes--4 .pacote, .pacotes--2 .pacote { grid-row: span 5; grid-template-rows: subgrid; }
  }
}

.pacote__topo { display: grid; gap: var(--e-1); text-align: center; }
.pacote__nome {
  font-size: var(--t-lg);
  letter-spacing: 0.08em;
  color: var(--azul);
}
.pacote__media {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: var(--e-2);
  background: var(--branco);
  border-radius: var(--raio);
}
.pacote__media img { max-height: 150px; width: auto; }
.pacote__media--vazia { display: none; }

.pacote__subtitulo {
  margin-bottom: var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
/* O cartão FULL não tem "Não inclui". O bloco fica vazio de propósito:
   é ele que mantém o botão alinhado com os dos outros cartões. */
.pacote__bloco:empty { min-height: 0; }
.pacote__accao { display: grid; align-content: end; }

.notas {
  max-width: 74ch;
  margin: var(--e-12) auto 0;
  padding: var(--e-6);
  background: var(--rosa-suave);
  border-radius: var(--raio-lg);
  text-align: center;
}
.notas p { margin: 0 0 var(--e-3); font-size: var(--t-sm); color: var(--texto); }
.notas p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   Cartões de lista
   --------------------------------------------------------- */
.cartoes-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-6);
  align-items: start;
}
.cartao-lista {
  padding: var(--e-6);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}
.cartao-lista h3 {
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 2px solid var(--rosa-suave);
  font-size: var(--t-lg);
}

/* ---------------------------------------------------------
   Galeria
   --------------------------------------------------------- */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-6);
}
.galeria__item { margin: 0; overflow: hidden; border-radius: var(--raio-lg); background: var(--linha); }
.galeria__item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.texto-centro { text-align: center; }
.texto-centro .seccao__cabecalho { margin-bottom: var(--e-8); }
.texto-centro p { margin-inline: auto; }

/* ---------------------------------------------------------
   Sobre
   --------------------------------------------------------- */
.sobre-teresa__grelha {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(var(--e-8), 5vw, var(--e-16));
}
.sobre-teresa h1 { margin-bottom: var(--e-6); font-size: var(--t-2xl); }
.sobre-teresa p { font-size: var(--t-md); }
.sobre-teresa__assinatura {
  margin-top: var(--e-8);
  padding-top: var(--e-4);
  border-top: 2px solid var(--rosa-suave);
  font-family: var(--f-titulo);
  font-weight: 700;
  color: var(--azul);
}
.sobre-teresa__assinatura span {
  display: inline-block;
  margin-top: var(--e-1);
  font-family: var(--f-corpo);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--texto-suave);
}
.sobre-teresa__media img { width: 100%; border-radius: var(--raio-lg); }

@media (max-width: 860px) {
  .sobre-teresa__grelha { grid-template-columns: 1fr; }
  .sobre-teresa__media { order: -1; max-width: 420px; margin-inline: auto; }
}

.valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-6);
  counter-reset: valor;
}
.valor {
  counter-increment: valor;
  position: relative;
  padding: var(--e-8) var(--e-6) var(--e-6);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
}
.valor::before {
  content: counter(valor, decimal-leading-zero);
  position: absolute;
  top: var(--e-4);
  right: var(--e-6);
  font-family: var(--f-titulo);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: #F2C9D6;
  font-variant-numeric: tabular-nums;
}
.valor__nome {
  margin-bottom: var(--e-3);
  font-size: var(--t-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.valor p { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------------------------------------------------------
   Contactos
   --------------------------------------------------------- */
.contactos {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--e-8), 5vw, var(--e-16));
  align-items: start;
}
.contactos h2 { margin-bottom: var(--e-8); font-size: var(--t-xl); }

.contactos__itens { display: grid; gap: var(--e-6); margin: 0; padding: 0; list-style: none; }
.contactos__itens li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--e-4);
  align-items: start;
  margin: 0;
}
.contactos__icone {
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 8px 0 0 11px;
  color: var(--rosa);
}
.contactos__itens h3 { margin-bottom: var(--e-1); font-size: var(--t-base); }
.contactos__itens p { margin: 0; color: var(--texto-suave); }
.contactos__itens a { color: var(--texto); text-decoration: underline; }
.contactos__itens a:hover { color: var(--rosa-link); }

.contactos__caixa {
  padding: var(--e-8);
  background: var(--fundo-creme);
  border-radius: var(--raio-lg);
}
.contactos__caixa h2 { margin-bottom: var(--e-4); font-size: var(--t-lg); }
.contactos__caixa .btn { margin-top: var(--e-2); }
.contactos__nota {
  margin: var(--e-6) 0 0;
  padding-top: var(--e-4);
  border-top: 1px solid rgba(0, 47, 79, .12);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

@media (max-width: 860px) {
  .contactos { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Obrigado
   --------------------------------------------------------- */
.obrigado { display: grid; gap: var(--e-6); }
.obrigado h1 { margin: var(--e-4) 0 var(--e-6); }
.obrigado__texto { font-size: var(--t-md); max-width: 46ch; }
.obrigado__assinatura {
  margin: var(--e-8) auto 0;
  padding-top: var(--e-6);
  border-top: 2px solid var(--rosa-suave);
  max-width: 22ch;
}
.obrigado__assinatura strong { font-family: var(--f-titulo); color: var(--azul); }
.obrigado__assinatura span { font-size: var(--t-sm); color: var(--texto-suave); }
.obrigado__accoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-4);
  margin-top: var(--e-8);
}

/* ---------------------------------------------------------
   Texto legal
   --------------------------------------------------------- */
.texto-legal h2 {
  margin: var(--e-12) 0 var(--e-4);
  font-size: var(--t-lg);
}
.texto-legal h2:first-of-type { margin-top: var(--e-8); }
.texto-legal ul { margin-bottom: var(--e-4); }
.texto-legal li { margin-bottom: var(--e-2); }
.texto-legal li::marker { color: var(--rosa); }
.texto-legal a { text-decoration: underline; }
.texto-legal__data {
  padding-bottom: var(--e-6);
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* ---------------------------------------------------------
   Formulário
   --------------------------------------------------------- */
.formulario { display: grid; gap: var(--e-6); }

.formulario__nota { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }

.formulario__seccao {
  margin-top: var(--e-8);
  padding-bottom: var(--e-3);
  border-bottom: 2px solid var(--rosa-suave);
  font-size: var(--t-lg);
}
.formulario__seccao:first-of-type { margin-top: var(--e-2); }

.obrigatorio { color: var(--rosa-link); font-weight: 700; }

.campo { display: grid; gap: var(--e-2); }

.campo > label,
.campo--grupo legend {
  font-family: var(--f-corpo);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--azul);
}

.campo--grupo { margin: 0; padding: 0; border: 0; }
.campo--grupo legend { padding: 0; margin-bottom: var(--e-3); }

.campo input[type='text'],
.campo input[type='email'],
.campo input[type='tel'],
.campo input[type='date'],
.campo input[type='time'],
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { resize: vertical; min-height: 7rem; }

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: #B9CBD6; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px var(--rosa-suave);
  outline: none;
}

.campo input[aria-invalid='true'],
.campo select[aria-invalid='true'],
.campo textarea[aria-invalid='true'] { border-color: #C0392F; }

.campo__ajuda { margin: 0; font-size: var(--t-xs); color: var(--texto-suave); }

.campo__erro {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: #B02A20;
}
.campo__erro::before { content: '!'; display: grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: var(--raio-full);
  background: #B02A20; color: var(--branco); font-size: 12px; font-weight: 700; }

/* display:flex derrotava o atributo hidden e o ícone de erro aparecia sempre */
.campo__erro[hidden] { display: none; }

/* --- Opções (rádio e caixas) --- */
.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e-2); }

.opcao { display: grid; grid-template-columns: 20px 1fr; gap: var(--e-3); align-items: start; }
.opcao input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--rosa); cursor: pointer; }
.opcao label { font-size: var(--t-sm); color: var(--texto); cursor: pointer; }

.campo--consentimento {
  padding: var(--e-5, 1.25rem);
  background: var(--fundo-suave);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
}
.campo--consentimento .opcao label { font-size: var(--t-sm); }
.campo--consentimento a { color: var(--rosa-hover); }

/* Campo anti-spam — invisível para pessoas, mas presente no HTML.
   Sem display:none, porque muitos robôs ignoram campos escondidos assim. */
.mel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formulario__accao {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-4);
}
.formulario__botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.formulario__botoes .btn[hidden] { display: none; }
.formulario--passos .formulario__botoes { justify-content: space-between; }
.formulario--passos .formulario__botoes .btn { flex: 1 1 auto; min-width: 150px; }
.formulario__estado { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.formulario__estado[data-tipo='erro'] { color: #B02A20; }
.formulario__estado[data-tipo='ok'] { color: var(--azul); }

.formulario button[disabled] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------
   Banner de cookies
   --------------------------------------------------------- */
.cookies {
  position: fixed;
  left: var(--e-4);
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 120;
  display: grid;
  justify-items: center;
}
.cookies[hidden] { display: none; }

.cookies__caixa {
  display: grid;
  gap: var(--e-3);
  width: 100%;
  max-width: 620px;
  padding: var(--e-6);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}
.cookies__titulo { font-size: var(--t-base); }
.cookies__texto { margin: 0; font-size: var(--t-sm); color: var(--texto); }
.cookies__botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-1); }
.cookies__botoes .btn { flex: 1 1 auto; }

/* Serviço aberto: destaca o item "Serviços" no menu, sem abrir o submenu */
.nav__item--tem-submenu[data-seccao-activa='true'] > .nav__link { color: var(--rosa-link); }

/* ---------------------------------------------------------
   Formulário em passos
   --------------------------------------------------------- */
.passos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-2);
  margin: 0 0 var(--e-8);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.passos[hidden] { display: none; }

.passos__item {
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding-top: var(--e-3);
  border-top: 3px solid var(--linha);
  color: var(--texto-suave);
  transition: border-color var(--transicao), color var(--transicao);
}
.passos__item[data-estado='feito'] { border-top-color: var(--rosa); color: var(--texto); }
.passos__item[data-estado='actual'] { border-top-color: var(--rosa); color: var(--azul); }

.passos__numero {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--raio-full);
  background: var(--fundo-suave);
  color: var(--texto-suave);
  font-family: var(--f-corpo);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.passos__item[data-estado='actual'] .passos__numero { background: var(--rosa); color: var(--branco); }

/* Passo já preenchido: o número dá lugar a um visto, centrado por cima dele */
.passos__item[data-estado='feito'] .passos__numero { background: var(--rosa-suave); color: transparent; }
.passos__item[data-estado='feito'] .passos__numero::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--rosa-link);
  font-size: 14px;
  line-height: 1;
}

.passos__nome {
  font-family: var(--f-titulo);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.3;
}

.passos__estado {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .passos__nome { display: none; }
  .passos { grid-template-columns: repeat(4, 1fr); gap: var(--e-3); }
  .passos__item { justify-items: center; }
}

/* --- Cada passo --- */
.passo {
  display: grid;
  gap: var(--e-6);
  margin: 0;
  padding: 0;
  border: 0;
}
.passo[hidden] { display: none; }

.passo__titulo {
  display: grid;
  gap: var(--e-1);
  width: 100%;
  padding: 0 0 var(--e-3);
  margin-bottom: var(--e-2);
  border-bottom: 2px solid var(--rosa-suave);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--azul);
}
.passo__conta {
  font-family: var(--f-corpo);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rosa-link);
}
.passo__sub {
  font-family: var(--f-corpo);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--texto-suave);
}

/* Sem JavaScript os passos ficam todos visíveis, um a seguir ao outro */
.formulario:not(.formulario--passos) .passo + .passo { margin-top: var(--e-8); }

/* ---------------------------------------------------------
   Mini & Magic — o espaço de festas
   --------------------------------------------------------- */
.mm { background: var(--fundo-suave); }

.mm__grelha {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(var(--e-8), 5vw, var(--e-16));
}

.mm__media { display: grid; gap: var(--e-3); }
.mm__media > img { width: 100%; border-radius: var(--raio-lg); }
.mm__miniaturas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.mm__miniaturas img { width: 100%; border-radius: var(--raio); }

.mm__texto { display: grid; gap: var(--e-5, 1.25rem); justify-items: start; }
/* 20ch partia o título em três linhas; 30ch chega para duas e ainda cabe na coluna. */
.mm__texto h2 { max-width: 30ch; font-size: var(--t-xl); }
.mm__intro { margin: 0; font-size: var(--t-md); }

.mm .btn svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .mm__grelha { grid-template-columns: 1fr; }
  .mm__media { order: -1; }
}

/* Ligação externa no menu */
.nav__link--externo svg { width: 13px; height: 13px; opacity: .65; }