/* Núcleo ES · página · VISS Digital · viss.digital */

/* sprite de ícones: fora do fluxo */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* página em coluna: o rodapé vem logo depois do conteúdo e só desce
   até o fim da tela quando o conteúdo é mais baixo que ela */
body { display: flex; flex-direction: column; }

/* coluna única, centralizada */
.bio {
  flex: 1 0 auto;
  width: 100%;
  padding-inline: var(--gutter);
  background: var(--color-bg);
}
.bio > * { width: 100%; max-width: var(--content); margin-inline: auto; }

/* topo */
.bio__topo {
  display: flex; flex-direction: column; align-items: center;
  padding-top: var(--space-40);
  text-align: center;
}
.bio__logo { width: 5rem; height: 5rem; margin-bottom: var(--space-16); border-radius: 50%; object-fit: cover; }
.bio__nome {
  margin-bottom: var(--space-8);
  font-size: var(--text-24); font-weight: var(--weight-regular); line-height: 1.2;
}
.bio__descricao {
  margin-bottom: var(--space-4);
  color: var(--color-text-soft);
  font-size: var(--text-16); line-height: 1.5;
  text-wrap: balance;
}
.bio__frase {
  color: var(--color-text-muted);
  font-size: var(--text-16); font-weight: var(--weight-light); font-style: italic; line-height: 1.5;
  text-wrap: balance;
}

/* redes */
.redes { margin-top: var(--space-24); }
.redes__lista { display: flex; justify-content: center; gap: var(--space-16); padding: 0; list-style: none; }
.redes__link {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background-color: rgb(255 255 255 / .07);
  color: var(--color-text);
  transition: background-color 200ms ease-out;
}
.redes__icone { width: 1.5rem; height: 1.5rem; fill: currentColor; }

/* cartões das unidades */
.unidades { margin-top: var(--space-32); }
.unidades__lista { display: flex; flex-direction: column; gap: var(--space-12); padding: 0; list-style: none; }
.unidade {
  display: flex; align-items: center; gap: .625rem;
  min-height: 5rem;
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: transform 200ms ease-out, background-color 200ms ease-out, box-shadow 200ms ease-out;
}
/* no celular, ícone e vão menores para "Atendimento via WhatsApp" caber numa linha */
.unidade__icone { flex: none; width: 1.75rem; height: 1.75rem; fill: currentColor; }
.unidade__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.unidade__cidade {
  font-size: var(--text-16); font-weight: var(--weight-medium); line-height: 1.3;
  overflow-wrap: anywhere;
}
.unidade__apoio {
  color: var(--color-text-soft);
  font-size: var(--text-14); line-height: 1.4;
}
.unidade__cta {
  flex: none;
  display: inline-flex; align-items: center;
  height: 2.5rem;
  padding-inline: var(--space-12);
  border-radius: var(--radius-pill);
  background-color: var(--color-text);
  color: var(--color-on-light);
  font-size: var(--text-12); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

/* galeria: 4 quadrados numa fileira, como no site original (pedido da Ge, 10/11) */
.ambiente { margin-top: var(--space-48); }
.ambiente__grade {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
  padding: 0; list-style: none;
}
.ambiente__foto {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: .625rem;
}

/* rodapé */
.rodape {
  display: flex; justify-content: center;
  margin-top: var(--space-64); padding-bottom: var(--space-32);
}
.rodape__assinatura {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  opacity: .5;
  transition: opacity 200ms ease-out;
}
.rodape__simbolo { width: 1.4375rem; height: 1.25rem; }

/* foco: cartão e redes seguem o próprio raio (anel não é cortado: sem overflow) */
.unidade:focus-visible { border-radius: var(--radius-16); }
.redes__link:focus-visible { border-radius: 50%; }
.rodape__assinatura:focus-visible { opacity: 1; }

/* hover só em dispositivo com mouse */
@media (hover: hover) {
  .unidade:hover {
    transform: translateY(-.375rem);
    background-color: var(--color-surface-hover);
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .2);
  }
  .unidade:hover .unidade__cta { background-color: var(--color-primary); color: var(--color-on-accent); }
  .redes__link:hover { background-color: var(--color-primary); }
  .rodape__assinatura:hover { opacity: 1; }
}

/* pressionado: vence o hover pela ordem e pela especificidade */
.unidade:active {
  transform: scale(.98);
  background-color: var(--color-surface-active);
  transition-duration: 100ms;
}
@media (hover: hover) {
  .unidade:hover:active { transform: scale(.98); background-color: var(--color-surface-active); box-shadow: none; }
}

/* movimento reduzido: só troca de cor */
@media (prefers-reduced-motion: reduce) {
  .unidade { transition-property: background-color, box-shadow; }
  .unidade:hover, .unidade:active { transform: none; }
}

/* tablet · frame 768 */
@media (min-width: 768px) {
  .bio__topo { padding-top: var(--space-48); }
  .bio__logo { width: 6rem; height: 6rem; }
  .bio__nome { font-size: 1.75rem; }
  .unidade { min-height: 5.5rem; padding: var(--space-20); gap: var(--space-16); }
  .unidade__icone { width: 2.5rem; height: 2.5rem; }
  .unidade__cidade { font-size: var(--text-18); }
  .unidade__cta { padding-inline: var(--space-16); font-size: var(--text-14); }
  .ambiente__grade { gap: .625rem; }
}

/* desktop · frame 1440 */
@media (min-width: 1280px) {
  .bio__topo { padding-top: var(--space-64); }
  .bio__logo { width: 6.25rem; height: 6.25rem; }
  .bio__descricao, .bio__frase { font-size: var(--text-18); }
}