/* ============================================================
   COMPONENTES — peças reutilizadas em mais de uma seção
   ============================================================ */

/* ---- acessibilidade -------------------------------------- */

.pular {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--bordo);
  color: var(--sobre-bordo);
  border-radius: 0 0 var(--r-md) 0;
  font-size: var(--t-sm);
  font-weight: 600;
}
.pular:focus { left: 0; top: 0; }

/* ---- cabeça de seção ------------------------------------- */

.cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: 62ch;
  margin-bottom: var(--e-8);
}
.cabeca h2 em { font-style: italic; color: var(--acento); }

.corpo { color: var(--texto-2); }

/* ---- etiquetas de público -------------------------------- */

.publicos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.publicos span {
  padding: 7px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  font-size: var(--t-sm);
  color: var(--texto-2);
}

/* ---- link com seta --------------------------------------- */

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--acento);
}
.link-seta::after {
  content: "→";
  transition: transform var(--mov-rapido);
}
.link-seta:hover::after { transform: translateX(4px); }

/* ---- filtros de profissão -------------------------------- */

.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.filtro {
  padding: 9px 18px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  background: transparent;
  color: var(--texto-2);
  font-family: var(--f-corpo);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--mov-rapido);
}
.filtro:hover { border-color: var(--acento); color: var(--acento); }
.filtro.ativo {
  background: var(--bordo);
  border-color: var(--bordo);
  color: var(--sobre-bordo);
}

.filtro-aviso {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-2);
  min-height: 1.6em;
}

/* ---- cartão de sala -------------------------------------- */

.grade-salas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--e-5);
}

.cartao-sala {
  display: flex;
  flex-direction: column;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--mov-medio), box-shadow var(--mov-medio),
              opacity var(--mov-medio), border-color var(--mov-medio);
}
.cartao-sala:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-lg);
  border-color: var(--bordo-luz);
}

.cartao-sala figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.cartao-sala img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--mov-lento);
}
.cartao-sala:hover img { transform: scale(1.045); }

.cartao-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  flex: 1;
}
.cartao-num {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--texto-3);
}
.cartao-corpo h3 { font-size: var(--t-xl); }
.cartao-corpo h3 em { font-style: italic; color: var(--bordo); }
.cartao-corpo > p { font-size: var(--t-sm); color: var(--texto-2); }

.cartao-marcas {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cartao-marcas li {
  padding: 5px 11px;
  border-radius: var(--r-sm);
  background: var(--areia);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--tinta-2);
}
.cartao-marcas li.destaque {
  background: color-mix(in srgb, var(--terracota) 15%, transparent);
  color: #8A4F2E;
}

.cartao-link {
  margin-top: auto;
  padding-top: var(--e-2);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--bordo);
}
.cartao-link::after { content: "→"; transition: transform var(--mov-rapido); }
.cartao-sala:hover .cartao-link::after { transform: translateX(4px); }

/* estado apagado quando um filtro está ativo */
.cartao-sala.apagado { opacity: .32; }
.cartao-sala.apagado:hover { opacity: .6; transform: none; box-shadow: none; }

/* ---- grade de fotos -------------------------------------- */

.grade-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-4);
}
.grade-fotos figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.grade-fotos img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--mov-lento);
}
.grade-fotos figure:hover img { transform: scale(1.05); }

/* ---- sanfona --------------------------------------------- */

.sanfona { border-top: 1px solid var(--borda); }

.sanfona details { border-bottom: 1px solid var(--borda); }

.sanfona summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--texto);
  transition: color var(--mov-rapido);
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary:hover { color: var(--acento); }

.sanfona summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-top: 8px;
  border-right: 1.5px solid var(--acento);
  border-bottom: 1.5px solid var(--acento);
  transform: rotate(45deg);
  transition: transform var(--mov-medio);
}
.sanfona details[open] summary::after { transform: rotate(-135deg); }

.sanfona .resposta { padding: 0 0 22px; }
.sanfona .resposta p { font-size: var(--t-base); color: var(--texto-2); max-width: 62ch; }

/* ---- formulário ------------------------------------------ */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-md);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.campo > label,
.campo > legend {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  padding: 0;
}
.opcional { font-weight: 400; color: var(--texto-3); }

.campo input[type="text"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-md);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido);
}
.campo textarea { resize: vertical; min-height: 88px; }

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

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--bordo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bordo) 16%, transparent);
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C5453' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 40px;
}

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Os chips crescem para preencher a linha: assim as duas fileiras de
   escolha terminam na mesma margem direita dos inputs, em vez de
   pararem no meio da coluna. A altura mínima iguala a dos campos. */
.opcao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 48px;
  padding: 8px 18px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-pilula);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta-2);
  text-align: center;
  cursor: pointer;
  transition: all var(--mov-rapido);
}
.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao span { pointer-events: none; }
.opcao:hover { border-color: var(--bordo); }
.opcao:has(input:checked) {
  background: var(--bordo);
  border-color: var(--bordo);
  color: var(--sobre-bordo);
}
.opcao:has(input:focus-visible) {
  outline: 2px solid var(--bordo);
  outline-offset: 2px;
}

.btn-largo { width: 100%; padding: 16px 26px; margin-top: var(--e-2); }

.form-erro {
  font-size: var(--t-sm);
  color: #9E3F3F;
  min-height: 1.4em;
  margin: 0;
}

/* ---- botão flutuante do WhatsApp ------------------------- */

.wa-flutuante {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 24px -6px rgba(37,211,102,.7);
  transition: transform var(--mov-rapido);
}
.wa-flutuante:hover { transform: scale(1.08); }
.wa-flutuante svg { width: 27px; height: 27px; fill: #fff; position: relative; z-index: 1; }

/* Anel que pulsa a cada 3s — chama o olho sem virar pisca-pisca.
   O botão em si não se mexe, então não desloca o alvo do dedo. */
.wa-flutuante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: wa-pulso 3s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes wa-pulso {
  0%        { transform: scale(1);   opacity: .55; }
  55%, 100% { transform: scale(1.9); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .wa-flutuante::before { animation: none; opacity: 0; }
}

/* ---- lightbox -------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(38,26,28,.93);
  backdrop-filter: blur(6px);
}
.lightbox.aberto { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px -16px rgba(0,0,0,.7);
}
.lightbox-legenda {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  text-align: center;
  color: rgba(250,245,243,.72);
  font-size: var(--t-sm);
  padding-inline: 20px;
}
.lightbox button {
  position: absolute;
  border: 1px solid rgba(250,245,243,.28);
  background: rgba(250,245,243,.08);
  color: #FAF5F3;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--mov-rapido);
}
.lightbox button:hover { background: rgba(250,245,243,.2); }
.lb-fechar { top: 20px; right: 20px; }
.lb-ant { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-prox { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lb-ant { left: 12px; }
  .lb-prox { right: 12px; }
}

/* No celular o flex quebrava torto e deixava o último chip esticado
   sozinho. Grade de duas colunas resolve: 4 opções viram 2x2, e quando
   o número é ímpar o último ocupa a linha inteira — de propósito. */
@media (max-width: 760px) {
  .opcoes { display: grid; grid-template-columns: repeat(2, 1fr); }
  .opcao:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* campo já preenchido a partir da página da sala */
.campo.pre-selecionado select {
  border-color: var(--bordo);
  background-color: color-mix(in srgb, var(--bordo) 6%, var(--papel));
}

/* ---- ícone do Instagram ---------------------------------- */

.icone-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  color: var(--texto-2);
  flex: none;
  transition: all var(--mov-rapido);
}
.icone-social svg { width: 19px; height: 19px; fill: currentColor; }
.icone-social:hover {
  color: var(--bordo);
  border-color: var(--bordo-luz);
  transform: translateY(-2px);
}

/* sobre a foto do topo o ícone precisa ser claro, como o resto */
.cabecalho.sobre-foto .icone-social {
  color: var(--sobre-bordo);
  border-color: rgba(250,245,243,.4);
}
.cabecalho.sobre-foto .icone-social:hover { border-color: var(--sobre-bordo); }

/* link de texto com o glifo colado antes */
.com-icone { display: inline-flex; align-items: center; gap: 8px; }
.com-icone svg { width: 16px; height: 16px; fill: currentColor; flex: none; }