/* ==========================================================================
   Hospital do Ursinho - LAPUPE / UPE
   componentes.css - cabecalho, hero, cartoes, QR, rodape
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecalho
   -------------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 71, 125, 0.08);
  transition: box-shadow var(--transicao), background-color var(--transicao);
}

.cabecalho--rolado {
  box-shadow: var(--sombra-sm);
  background-color: var(--branco);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  text-decoration: none;
}

.marca:hover {
  text-decoration: none;
}

.marca__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-full);
  background-color: var(--azul);
  flex-shrink: 0;
}

.marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.marca__texto strong {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--azul);
}

.marca__texto small {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

/* Botao do menu mobile */
.menu-botao {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--raio-sm);
}

.menu-botao span {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: var(--raio-full);
  background-color: var(--azul);
  transition: transform var(--transicao), opacity var(--transicao);
}

.menu-botao[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.menu-botao[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-botao[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Navegacao */
.menu__lista {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
}

.menu__lista a {
  position: relative;
  font-weight: 600;
  color: var(--azul);
  padding-block: var(--esp-1);
}

.menu__lista a:not(.menu__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--amarelo);
  transition: width var(--transicao);
}

.menu__lista a:not(.menu__cta):hover::after {
  width: 100%;
  text-decoration: none;
}

.menu__cta {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background-color: var(--amarelo);
  color: var(--azul);
  font-weight: 700;
  border-radius: var(--raio-full);
  transition: background-color var(--transicao), transform var(--transicao);
}

.menu__cta:hover {
  background-color: var(--amarelo-claro);
  transform: translateY(-2px);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Botoes
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.875rem 1.75rem;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  border-radius: var(--raio-full);
  border: 2px solid transparent;
  transition:
    background-color var(--transicao),
    color var(--transicao),
    border-color var(--transicao),
    transform var(--transicao),
    box-shadow var(--transicao);
}

.botao:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.botao:active {
  transform: translateY(0);
}

.botao--primario {
  background-color: var(--azul);
  color: var(--branco);
  box-shadow: var(--sombra-sm);
}

.botao--primario:hover {
  background-color: var(--azul-escuro);
  box-shadow: var(--sombra);
}

.botao--destaque {
  background-color: var(--amarelo);
  color: var(--azul);
  box-shadow: var(--sombra);
}

.botao--destaque:hover {
  background-color: var(--amarelo-claro);
  box-shadow: var(--sombra-gr);
}

.botao--fantasma {
  background-color: transparent;
  color: var(--azul);
  border-color: var(--azul);
}

.botao--fantasma:hover {
  background-color: var(--azul);
  color: var(--branco);
}

.botao--copiar {
  flex-shrink: 0;
  padding: 0.875rem 1.5rem;
  background-color: var(--azul);
  color: var(--branco);
  border-radius: var(--raio-full);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--transicao);
}

.botao--copiar:hover {
  background-color: var(--azul-escuro);
}

.botao--copiar[data-estado="copiado"] {
  background-color: var(--sucesso);
}

.botao--copiar[data-estado="erro"] {
  background-color: var(--erro);
}

/* Texto interno do botao de copiar: o JS troca por "Copiado!" e "Selecione" */
.botao__texto {
  display: inline-block;
}

.botao--copiar:disabled {
  background-color: var(--cinza);
  color: var(--texto-suave);
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: var(--altura-cabecalho);
  padding-bottom: var(--esp-8);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(223, 179, 1, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 80%, rgba(22, 104, 168, 0.14), transparent 60%),
    var(--cinza-claro);
}

.hero__conteudo {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-7);
}

/* Selo pequeno: encolhe junto com o texto em vez de virar uma peca grande
   logo abaixo do cabecalho. O uppercase + letter-spacing ram a largura, entao
   os tres andam juntos.

   `justify-self` e obrigatorio: o selo e item do grid do hero, e item de grid
   nao respeita `display: inline-block` (vira block e estica pela coluna toda,
   623px no desktop). E o justify-self que faz a pilula ter o tamanho do
   proprio texto. No breakpoint de 1024px o hero fica centralizado, entao la
   o selo centraliza tambem. */
.hero__selo {
  display: inline-block;
  justify-self: start;
  padding: 0.3rem 0.75rem;
  margin-bottom: var(--esp-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--azul);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--amarelo);
  border-radius: var(--raio-full);
}

.hero__titulo {
  margin-bottom: var(--esp-4);
  animation: entrar-cima 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__texto {
  max-width: 34rem;
  margin-bottom: var(--esp-6);
  font-size: 1.1875rem;
  color: var(--texto-suave);
  animation: entrar-cima 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  animation: entrar-cima 700ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both;
}

.hero__ursinho {
  display: grid;
  place-items: center;
  animation: flutuar 4.5s ease-in-out infinite;
  transform-origin: 50% 92%;
}

/* A foto do ursinho e um retrato (826x1435), muito mais alta que o SVG que
   ela substituiu.

   A largura vai no `picture` e nao no `img` de proposito. O `style.css` tem
   `img, svg, picture { max-width: 100% }`, e o `picture` aqui e item de grid
   com `place-items: center`, entao a largura dele encolhe ate o conteudo. Com
   o `width` no `img`, o `max-width: 100%` do proprio `img` passa a valer
   contra essa largura encolhida e o navegador resolve para 128px em vez dos
   200px pedidos. Medido nas duas formas.

   O `height` fica `auto` e a proporcao sai dos atributos width/height da
   imagem. A sombra substitui a oval que o SVG tinha pintado no chao: ela
   segue o contorno do PNG, que e transparente. */
.hero__ursinho picture {
  width: 12.5rem;
}

.hero__ursinho img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0.6rem 0.5rem rgba(0, 71, 125, 0.18));
}

@keyframes entrar-cima {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* O movimento e o de plush: sobe, inclina e estica no alto do arco, como se o
   ursinho de pelucia amortecesse. O `transform-origin` nos pes (no wrapper
   acima) faz o giro acontecer em torno do ponto de apoio, e nao do meio da
   imagem. Os 16px e os 2deg substituem os 18px e 1,5deg do desenho antigo: a
   foto e mais alta e precisa de um giro um pouco mais marcado para ler como
   pelucia e nao como foto parada. */
@keyframes flutuar {
  0%   { transform: translateY(0) rotate(-2deg) scale(1, 1); }
  50%  { transform: translateY(-16px) rotate(2deg) scale(0.985, 1.015); }
  100% { transform: translateY(0) rotate(-2deg) scale(1, 1); }
}

/* Bolhas decorativas */
.hero__bolhas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__bolhas span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    rgba(255, 255, 255, 0.85),
    rgba(223, 179, 1, 0.28) 60%,
    transparent
  );
  animation: subir var(--dur, 12s) var(--d, 0s) linear infinite;
}

@keyframes subir {
  0%   { transform: translateY(0) scale(0.9); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-130vh) scale(1.1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Secoes genericas
   -------------------------------------------------------------------------- */
.secao {
  padding-block: var(--esp-9);
}

.secao--equipe {
  background-color: var(--cinza-claro);
}

.secao__cabecalho {
  max-width: 46rem;
  margin: 0 auto var(--esp-8);
  text-align: center;
}

.secao__olho {
  display: inline-block;
  margin-bottom: var(--esp-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul);
}

.secao__olho::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto var(--esp-3);
  background-color: var(--amarelo);
  border-radius: var(--raio-full);
}

.secao__titulo {
  margin-bottom: var(--esp-3);
}

.secao__subtitulo {
  font-size: 1.125rem;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Apresentacao do projeto (Sobre)
   Arte centralizada e limitada a 46rem + texto logo abaixo
   -------------------------------------------------------------------------- */
.sobre-apresentacao {
  margin-bottom: var(--esp-8);
}

.sobre-apresentacao__arte {
  margin: 0 0 var(--esp-6);
}

/* img e display:block no reset do style.css, entao text-align nao centraliza.
   E preciso margin-inline: auto. O max-width limita a arte a 46rem (736px),
   do tamanho do texto ao lado, para a imagem nao dominar a secao. */
.sobre-apresentacao__arte img {
  width: 100%;
  height: auto;
  max-width: 46rem;
  margin-inline: auto;
  border-radius: var(--raio-gr);
}

.sobre-apresentacao__texto {
  max-width: 46rem;
  margin-inline: auto;
}

.sobre-apresentacao__texto p + p {
  margin-top: var(--esp-4);
}

/* --------------------------------------------------------------------------
   Carrossel de fotos (Sobre)
   Faixa horizontal que passa sozinha. Sao exatamente as 9 fotos do HTML: o JS
   nao clona mais nada, entao o `scrollWidth` e a soma delas e o ciclo fecha
   voltando para a primeira (sem animacao) depois da ultima.

   A largura do card e fluida para caberem 4 por vez: em vez de um valor fixo,
   cada card toma 1/4 da faixa menos os espacamentos. Assim as 4 ultimas fotos
   fecham exatamente na borda direita, sem sobra de espaco vazio. Ver o bloco
   responsivo.css para 3 por vez (ate 1024px) e 2 por vez (ate 768px).
   -------------------------------------------------------------------------- */
.carrossel {
  margin-top: var(--esp-6);
}

.carrossel__titulo {
  margin-bottom: var(--esp-4);
  font-size: 1.125rem;
}

.carrossel__trilha {
  display: flex;
  gap: var(--esp-4);
  padding: var(--esp-1) var(--esp-1) var(--esp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--cinza) transparent;
  overscroll-behavior-x: contain;
}

/* Degradê nas pontas: so entra quando tem foto cortada daquele lado.
   O JS alterna data-fim="inicio" e liga/desliga data-fim-fim conforme o
   scrollLeft, entao a primeira foto nao fica "apagada" quando ja esta no canto.

   ATENCAO: os dois seletores de data-fim-fim sao por PRESENCA do atributo
   ([data-fim-fim]), nunca por valor. O JS usa toggleAttribute(), que cria o
   atributo sem valor (""), e nao `setAttribute(..., "1")`. Com [data-fim-fim="1"]
   o degradê da direita nunca casava e a ultima foto aparecia cortada. */
.carrossel__trilha[data-fim="inicio"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3.5rem);
  mask-image: linear-gradient(to right, transparent 0, #000 3.5rem);
}

.carrossel__trilha[data-fim="inicio"][data-fim-fim] {
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%
  );
  mask-image: linear-gradient(
    to right, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%
  );
}

.carrossel__trilha[data-fim-fim] {
  -webkit-mask-image: linear-gradient(
    to right, #000 0, #000 calc(100% - 3.5rem), transparent 100%
  );
  mask-image: linear-gradient(
    to right, #000 0, #000 calc(100% - 3.5rem), transparent 100%
  );
}

.carrossel__trilha::-webkit-scrollbar {
  height: 8px;
}

.carrossel__trilha::-webkit-scrollbar-thumb {
  background-color: var(--cinza);
  border-radius: var(--raio-full);
}

/* 4 cards por vez, preenchendo a faixa: 100% - 3 espacamentos - o padding
   lateral de 0.25rem de cada lado da trilha. A ALTURA da foto nao muda
   (17.5rem abaixo), so a largura acompanha a tela. */
.carrossel__item {
  flex: 0 0 calc((100% - 3 * var(--esp-4) - 0.5rem) / 4);
  margin: 0;
  scroll-snap-align: start;
}

/* A foto e um botao para poder ser ampliada pelo teclado tambem.
   O reset do style.css tira a borda e o fundo do button. */
.carrossel__ampliar {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--raio-gr);
  cursor: zoom-in;
}

.carrossel__ampliar img {
  width: 100%;
  height: 17.5rem;
  object-fit: cover;
  border: 1px solid var(--cinza);
  border-top: 4px solid var(--amarelo);
  border-radius: var(--raio-gr);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.carrossel__ampliar:hover img {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
}

/* --------------------------------------------------------------------------
   Foto ampliada (dialog nativo)
   O showModal() cuida do fundo escuro, do Esc e do foco preso.
   -------------------------------------------------------------------------- */
.ampliada {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background-color: rgba(15, 42, 64, 0.94);
}

.ampliada::backdrop {
  background-color: rgba(15, 42, 64, 0.7);
}

.ampliada__fechar {
  position: absolute;
  top: var(--esp-4);
  right: var(--esp-4);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--branco);
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--raio-full);
  transition: background-color var(--transicao);
}

.ampliada__fechar:hover {
  background-color: rgba(255, 255, 255, 0.28);
}

.ampliada__conteudo {
  display: grid;
  place-items: center;
  gap: var(--esp-4);
  height: 100%;
  margin: 0;
  padding: var(--esp-7) clamp(var(--esp-5), 8vw, 6rem);
}

.ampliada__img {
  max-width: 100%;
  max-height: min(78vh, 46rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--raio);
  box-shadow: var(--sombra-gr);
}

.ampliada__navegacao {
  position: absolute;
  left: 50%;
  bottom: var(--esp-5);
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  transform: translateX(-50%);
}

.ampliada__seta {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--branco);
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--raio-full);
  transition: background-color var(--transicao);
}

.ampliada__seta:hover {
  background-color: rgba(255, 255, 255, 0.28);
}

.ampliada__contador {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Grade de cartoes (Sobre)
   Sem max-width: os cards ocupam a largura do container, como antes de
   ficarem limitados a 46rem. Com minmax(280px, 1fr) sao 3 colunas no
   desktop, 2 no tablet e 1 no celular.
   -------------------------------------------------------------------------- */
.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-5);
}

.cartao {
  padding: var(--esp-6);
  background-color: var(--branco);
  border: 1px solid var(--cinza);
  border-top: 4px solid var(--amarelo);
  border-radius: var(--raio-gr);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao-lenta), box-shadow var(--transicao-lenta);
}

.cartao:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
}

.cartao__icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--esp-4);
  border-radius: var(--raio);
}

.cartao__icone--amarelo {
  background-color: rgba(223, 179, 1, 0.2);
}

/* h3 sem font-size proprio: usa o clamp do reset, que cresce com a tela */
.cartao h3 {
  margin-bottom: var(--esp-2);
}

.cartao p {
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Passos
   -------------------------------------------------------------------------- */
.passos {
  margin-top: var(--esp-8);
}

.passos__titulo {
  margin-bottom: var(--esp-5);
  text-align: center;
}

/* Sem max-width: com minmax(230px, 1fr) os 4 passos ficam em uma linha no
   desktop, do mesmo tamanho dos cards de acolhimento. */
.passos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--esp-5);
  counter-reset: passo;
}

.passo {
  position: relative;
  padding: var(--esp-5);
  padding-top: var(--esp-7);
  background-color: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: var(--raio);
}

.passo__numero {
  position: absolute;
  top: calc(var(--esp-4) * -1);
  left: var(--esp-5);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--azul);
  background-color: var(--amarelo);
  border-radius: var(--raio-full);
  box-shadow: var(--sombra-sm);
}

.passo h4 {
  margin-bottom: var(--esp-2);
  font-size: 1.0625rem;
}

.passo p {
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Doar
   -------------------------------------------------------------------------- */
.secao--doar {
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(223, 179, 1, 0.1), transparent 60%),
    var(--branco);
}

.doar {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--esp-7);
  align-items: start;
}

/* Card do QR */
.qr-card {
  padding: var(--esp-6);
  text-align: center;
  background-color: var(--branco);
  border: 2px solid var(--cinza);
  border-radius: var(--raio-gr);
  box-shadow: var(--sombra);
}

.qr-card__rotulo {
  margin-bottom: var(--esp-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.qr-card__moldura {
  display: inline-grid;
  place-items: center;
  padding: var(--esp-3);
  background-color: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: var(--raio);
  line-height: 0;
}

/* 969px = 57 unidades (49 modulos + 4 de quiet zone) x 17px.
   228px = 57 x 4: cada modulo cai em 4px de exibicao inteiros, o que mantem
   a grade nitida com `image-rendering: pixelated`. */
.qr-card__moldura img {
  display: block;
  width: 228px;
  height: 228px;
  image-rendering: pixelated;
}

.qr-card__beneficiario {
  margin-top: var(--esp-4);
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.qr-card__beneficiario strong {
  color: var(--azul);
}

/* Formulario / campos */
.doar__form {
  display: grid;
  gap: var(--esp-5);
}

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

.campo__rotulo {
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--azul);
}

.campo__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.campo__input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.875rem 1.125rem;
  font-size: 1rem;
  color: var(--texto);
  background-color: var(--cinza-claro);
  border: 2px solid var(--cinza);
  border-radius: var(--raio-full);
  transition: border-color var(--transicao), background-color var(--transicao);
}

.campo__input::placeholder {
  color: #8A9AA6;
}

.campo__input:focus {
  outline: none;
  background-color: var(--branco);
  border-color: var(--azul);
}

.campo__input[readonly] {
  cursor: default;
}

.campo__aviso {
  min-height: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sucesso);
}

.campo__aviso[data-estado="erro"] {
  color: var(--erro);
}

/* Observacoes e outras formas de doar */
.doar__observacoes,
.doar__outras {
  padding: var(--esp-5);
  background-color: var(--cinza-claro);
  border-left: 4px solid var(--amarelo);
  border-radius: var(--raio);
}

.doar__observacoes h3,
.doar__outras h3 {
  margin-bottom: var(--esp-3);
  font-size: 1.0625rem;
}

.doar__observacoes ul {
  display: grid;
  gap: var(--esp-2);
}

.doar__observacoes li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.doar__observacoes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background-color: var(--amarelo);
  border-radius: 50%;
}

.doar__outras-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

/* --------------------------------------------------------------------------
   Equipe
   -------------------------------------------------------------------------- */
.sobre-lapupe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--esp-8);
}

.sobre-lapupe__texto {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-6);
  background-color: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: var(--raio-gr);
  box-shadow: var(--sombra-sm);
}

.sobre-lapupe__texto p {
  color: var(--texto-suave);
}

.sobre-lapupe__texto strong {
  color: var(--azul);
}

/* Integrantes */
.integrantes {
  text-align: center;
}

.integrantes__titulo {
  margin-bottom: var(--esp-5);
}

.integrantes__grade {
  display: grid;
  /* Os cards hugam o nome em vez de esticar: sao 8 coordenadores, em
     4 colunas de 2 linhas (4+4), sem sobra na segunda. No celular a
     regra passa a ser 2 colunas esticadas (ver css/responsivo.css). */
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  gap: var(--esp-3);
}

.integrante {
  padding: var(--esp-3) var(--esp-5);
  background-color: var(--branco);
  border: 1px solid var(--cinza);
  border-radius: var(--raio);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.integrante:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
}

.integrante__nome {
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--azul);
}

.integrante__papel {
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.integrantes__nota {
  margin-top: var(--esp-5);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

/* --------------------------------------------------------------------------
   Rodape
   -------------------------------------------------------------------------- */
.rodape {
  padding-top: var(--esp-8);
  color: #C8DCEA;
  background-color: var(--azul-escuro);
}

.rodape__interno {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-6);
  padding-bottom: var(--esp-7);
}

.rodape .marca__icone {
  background-color: var(--amarelo);
}

.rodape .marca__texto strong {
  color: var(--branco);
}

.rodape .marca__texto small {
  color: #9DBBD4;
}

.rodape__marca p {
  margin-top: var(--esp-4);
  max-width: 26rem;
  font-size: 0.9375rem;
}

.rodape h3 {
  margin-bottom: var(--esp-3);
  font-size: 1rem;
  color: var(--amarelo);
}

.rodape__links ul {
  display: grid;
  gap: var(--esp-2);
}

.rodape a {
  color: #C8DCEA;
  font-size: 0.9375rem;
}

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

.rodape__contato h3 {
  margin-bottom: var(--esp-3);
}

.rodape__bloco + .rodape__bloco {
  margin-top: var(--esp-5);
}

.rodape__social {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.rodape__base {
  padding-block: var(--esp-4);
  background-color: var(--azul);
}

.rodape__base p {
  font-size: 0.875rem;
  text-align: center;
  color: #A9C6DC;
}

/* --------------------------------------------------------------------------
   Voltar ao topo
   -------------------------------------------------------------------------- */
.voltar-topo {
  position: fixed;
  right: var(--esp-5);
  bottom: var(--esp-5);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--branco);
  background-color: var(--azul);
  border: 2px solid var(--amarelo);
  border-radius: 50%;
  box-shadow: var(--sombra);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transicao), transform var(--transicao), background-color var(--transicao);
}

.voltar-topo.visivel {
  opacity: 1;
  transform: none;
}

.voltar-topo:hover {
  background-color: var(--azul-escuro);
}