/* Quem somos e as páginas de cada pessoa da equipe.
   A moldura e os componentes (abertura, linha do tempo com a fada, "Hoje", cartões, entradas suaves,
   próximo passo) vêm do compartilhado (estilo.css). Aqui fica só o que é destas páginas:
   o "Nosso jeito" com os dois princípios, os cartões da equipe (o céu da abertura em miniatura com o
   retrato) e a página de cada pessoa (o retrato no céu com a fada, e o depoimento). */

/* O título do "Hoje" daqui é uma frase inteira: quebra em linhas equilibradas */
.historia .hoje h3 { max-width: 720px; margin-inline: auto; text-wrap: balance; }

/* ── Nosso jeito: o texto e, ao lado, os dois princípios (o menino voando por perto) ── */
.jeito__grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.jeito__texto h2 { margin-bottom: 18px; }
.jeito .prosa p { color: #2f4459; }
.jeito__lado { position: relative; padding-top: 58px; }
.jeito__menino { position: absolute; z-index: 2; top: 0; right: 6%; width: 124px; height: auto; max-width: none; filter: drop-shadow(0 14px 14px rgba(11, 74, 115, .16)); }
.principios { padding: 30px 28px 18px; }
.principios h3 { font-size: 1.35rem; margin: 0 0 18px; padding-right: 96px; }
.principios__lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.principios__lista li { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 18px; background: var(--ceu-claro); }
.principios__lista .cartao__icone { flex: none; width: 52px; height: 52px; margin: 0; border-radius: 16px; background: #fff; box-shadow: 0 6px 14px -8px rgba(11, 74, 115, .4); }
.principios__lista li:nth-child(1) .cartao__icone { color: var(--verde-t); }
.principios__lista li:nth-child(2) .cartao__icone { color: var(--laranja-f); }
.principios__lista b { font: 800 1.08rem/1.35 var(--titulo); color: var(--azul-escuro); }

/* ── Os cartões da equipe: o céu com uma nuvem e o chão em onda, o retrato no anel verde e teal
   (as cores do "Hoje" da linha do tempo), o nome, o cargo e "Ler a história" ── */
.equipe__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.equipe__item { display: grid; }
.pessoa { overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px 22px; }
/* (o mesmo céu da abertura, na escala do cartão: o azul que clareia e a luz do sol à direita) */
.pessoa__ceu { position: absolute; left: 0; right: 0; top: 0; height: 118px; overflow: hidden;
  background: radial-gradient(150px 90px at 80% 34%, rgba(255, 248, 222, .85), rgba(255, 248, 222, 0) 70%), linear-gradient(180deg, #bddcff 0%, var(--ceu) 55%, var(--ceu-claro) 100%); }
.pessoa__chao { position: absolute; left: 0; bottom: -1px; width: 100%; height: 30px; }
.pessoa .nuvem { opacity: .9; }
.nuvem--p1 { width: 58px; top: 12px; left: 8%; }
.nuvem--p2 { width: 50px; top: 22px; right: 8%; animation-duration: 30s; }
.nuvem--p3 { width: 54px; top: 10px; left: 12%; animation-duration: 22s; }
.nuvem--p4 { width: 46px; top: 26px; right: 10%; animation-duration: 34s; }
.pessoa__foto { position: relative; z-index: 1; width: 140px; aspect-ratio: 1; margin-bottom: 18px; padding: 5px; border-radius: 50%; background: linear-gradient(135deg, var(--verde), var(--teal)); box-shadow: 0 16px 30px -12px rgba(2, 138, 126, .55); transition: transform .35s var(--mola); }
.pessoa__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid #fff; background: #fff; }
.pessoa:hover .pessoa__foto, .pessoa:hover .pessoa__casa { transform: translateY(-4px) rotate(-3deg); }
.pessoa h3 { position: relative; margin: 0 0 6px; font-size: 1.3rem; }
.pessoa p.pessoa__cargo { margin: 0 0 16px; font-size: .98rem; line-height: 1.45; }
.pessoa .cartao__mais { margin-top: auto; }
/* O cartão da casa (nas páginas das pessoas): a casa flutuando no lugar do retrato */
.pessoa__casa { position: relative; z-index: 1; display: grid; place-items: center; width: 150px; height: 150px; margin-bottom: 8px; transition: transform .35s var(--mola); }
.pessoa__casa img { width: 140px; height: auto; animation: flutua 7s ease-in-out infinite; filter: drop-shadow(0 16px 16px rgba(11, 74, 115, .16)); }

/* ── A página de cada pessoa: o retrato no céu, com os brilhos da casa e a fada voando por perto ── */
.retrato { min-height: 380px; }
.retrato > .retrato__foto { position: relative; z-index: 1; width: 264px; aspect-ratio: 1; padding: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--verde), var(--teal)); box-shadow: 0 26px 44px -18px rgba(2, 138, 126, .6); }
.retrato__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 6px solid #fff; background: #fff; }
.retrato > .retrato__fada { position: absolute; z-index: 2; right: 6%; top: 22px; width: 92px; height: auto; max-height: none; max-width: none; filter: drop-shadow(0 12px 14px rgba(11, 74, 115, .18)); }
/* Os brilhos da casa, na borda do retrato */
.retrato__brilho { z-index: 2; }
.retrato__brilho--1 { left: 9%; top: 8%; width: 26px; }
.retrato__brilho--2 { right: 12%; bottom: 10%; width: 16px; animation-delay: -1.6s; }
/* "Quem somos" com a seta para trás (a mesma link-seta, virada), no azul-escuro dos títulos: sobre o céu da
   abertura, o azul dos links não chega ao contraste mínimo (4,5:1) */
.voltar { color: var(--azul-escuro); }
.voltar svg { transform: scaleX(-1); }
.voltar:hover svg { transform: scaleX(-1) translateX(4px); }

/* O depoimento: as aspas laranja e o primeiro parágrafo maior, "com as próprias palavras" */
.bio { padding-top: 64px; }
.bio__aspas { display: block; width: 54px; height: auto; margin: 0 0 12px -2px; fill: var(--laranja); }
.bio__texto > p:first-of-type { font-size: 1.24rem; line-height: 1.6; color: var(--azul-escuro); }
.bio__texto a { font-weight: 700; text-underline-offset: 3px; }

/* ── Telas médias ── */
@media (max-width: 1080px) {
  .jeito__grade { gap: 40px; }
  .pessoa__foto { width: 128px; }
}
@media (max-width: 960px) {
  .jeito__grade { grid-template-columns: minmax(0, 1fr); }
  .jeito__lado { width: 100%; max-width: 560px; margin-inline: auto; }
  .equipe__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .retrato { min-height: 260px; }
  .retrato > .retrato__foto { width: 210px; }
  .retrato > .retrato__fada { width: 76px; top: 30px; right: calc(50% - 176px); }
}
/* ── Celular ── */
@media (max-width: 760px) {
  .jeito__lado { padding-top: 48px; }
  .jeito__menino { width: 96px; right: 4%; }
  .principios { padding: 24px 18px 12px; }
  .principios h3 { font-size: 1.2rem; padding-right: 84px; }
  .principios__lista li { padding: 12px; gap: 12px; }
  .principios__lista .cartao__icone { width: 44px; height: 44px; border-radius: 14px; }
  .principios__lista .cartao__icone svg { width: 24px; height: 24px; }
  .principios__lista b { font-size: 1rem; }
  .equipe__grade { gap: 12px; }
  .pessoa { padding: 20px 10px 16px; }
  .pessoa__ceu { height: 88px; }
  .pessoa__chao { height: 22px; }
  .nuvem--p1, .nuvem--p3 { width: 40px; top: 8px; left: 6%; }
  .nuvem--p2, .nuvem--p4 { width: 34px; top: 14px; right: 6%; }
  .pessoa__foto { width: 104px; padding: 4px; margin-bottom: 12px; }
  .pessoa__foto img { border-width: 3px; }
  .pessoa__casa { width: 112px; height: 112px; margin-bottom: 4px; }
  .pessoa__casa img { width: 104px; }
  .pessoa h3 { font-size: 1.08rem; }
  .pessoa p.pessoa__cargo { font-size: .86rem; line-height: 1.4; margin-bottom: 12px; }
  .pessoa .cartao__mais { font-size: .9rem; gap: 6px; }
  .pessoa .cartao__mais svg { width: 16px; height: 16px; }
  .retrato { min-height: 184px; }
  .retrato > .retrato__foto { width: 150px; padding: 4px; }
  .retrato__foto img { border-width: 4px; }
  .retrato > .retrato__fada { width: 54px; right: calc(50% - 130px); top: 24px; }
  .retrato__brilho--1 { width: 18px; }
  .retrato__brilho--2 { width: 11px; }
  .bio { padding-top: 40px; }
  .bio__aspas { width: 42px; }
  .bio__texto > p:first-of-type { font-size: 1.1rem; }
}
@media (max-width: 380px) {
  .pessoa__foto { width: 96px; }
  .pessoa h3 { font-size: 1.02rem; }
}