/* Paleta da arte oficial do Love Projeto Social, com layout inspirado em sites retrô */
:root {
  --turquesa: #68e1e1;
  --turquesa-escuro: #1f9e9e;
  --creme: #fcf3ae;
  --papel: #fffbe3;
  --marrom: #391e13;
  --raio: 28px;
  --titulo: "Fredoka", "Quicksand", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 20px; }

body {
  font-family: "Quicksand", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  color: var(--marrom);
  background: var(--papel);
  line-height: 1.65;
  letter-spacing: .01em;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }

.container { width: min(1150px, 100% - 2.5rem); margin-inline: auto; position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.1; color: var(--marrom); }
h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 1rem; }
/* Títulos das seções na mesma fonte serifada do título da abertura */
h2, .missao-titulo { font-family: "Fraunces", Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
h3 { font-size: 1.35rem; font-weight: 600; }
.centro { text-align: center; }
.subtitulo { margin-bottom: 2.8rem; font-size: 1.05rem; }

/* Moldura ondulada das fotos */
.ondulada {
  -webkit-mask: url("imagens/moldura-ondulada.svg") center / 100% 100% no-repeat;
  mask: url("imagens/moldura-ondulada.svg") center / 100% 100% no-repeat;
}

/* Silhuetas e estrelinhas decorativas */
.cao { position: absolute; pointer-events: none; user-select: none; height: auto; z-index: 2; }
.brilho {
  position: absolute; z-index: 2; pointer-events: none; line-height: 1;
  color: var(--marrom); font-size: 1.6rem;
  animation: piscar 3s ease-in-out infinite;
}
@keyframes piscar { 50% { opacity: .35; transform: scale(.75) rotate(20deg); } }

/* Botões em pílula */
.btn {
  display: inline-block;
  background: var(--marrom);
  color: var(--creme);
  padding: .75rem 1.8rem;
  border-radius: 999px;
  border: 2.5px solid var(--marrom);
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform .15s, background .15s, color .15s;
}
.btn:hover { background: var(--creme); color: var(--marrom); transform: translateY(-2px) rotate(-2deg); }
.btn-claro { background: var(--papel); color: var(--marrom); }
.btn-claro:hover { background: var(--marrom); color: var(--creme); }
.btn-pequeno { padding: .45rem 1.3rem; font-size: .95rem; }
.botoes { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Topo: faixa sólida com a logo num selo oval pendurado */
.topo { position: relative; z-index: 20; background: var(--marrom); color: var(--creme); }
.topo-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: min(1250px, 100% - 2.5rem); margin-inline: auto; min-height: 58px;
}
.logo {
  position: relative; align-self: flex-start; margin-bottom: -3.2rem;
  background: var(--papel); border: 2.5px solid var(--marrom); border-top: 0; border-radius: 0 0 22px 22px;
  padding: 1.6rem 1.7rem 1.4rem; box-shadow: 0 4px 0 var(--marrom);
  transform-origin: top center; transition: transform .2s;
}
/* "Parafusos" da plaquinha */
.logo::before, .logo::after {
  content: ""; position: absolute; top: .6rem; width: 7px; height: 7px; border-radius: 50%; background: var(--marrom);
}
.logo::before { left: .6rem; }
.logo::after { right: .6rem; }
.logo:hover { transform: rotate(-3deg); }
.logo img { height: 50px; width: auto; }
.topo-direita { display: flex; align-items: center; gap: 2.2rem; }
.menu {
  display: flex; gap: 2rem; white-space: nowrap;
  font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}
.menu a::before { content: "("; }
.menu a::after { content: ")"; }
.menu a { transition: color .15s; }
.menu a:hover { color: var(--turquesa); }
.topo-whats {
  white-space: nowrap; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--turquesa); color: var(--marrom); border: 2px solid var(--turquesa); border-radius: 999px;
  padding: .45rem 1.2rem; transition: background .15s, border-color .15s, transform .15s;
}
.topo-whats:hover { background: var(--papel); border-color: var(--papel); transform: translateY(-2px) rotate(-2deg); }
.menu-btn {
  display: none; width: 40px; height: 40px; border-radius: 50%; flex: none; place-items: center;
  background: transparent; border: 2px solid var(--creme); color: var(--creme);
  font-size: 1.2rem; font-family: inherit; cursor: pointer;
}
.menu-celular { display: none; }

/* Início: listras + foto emoldurada / texto no papel */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(calc(100vh - 58px), 800px); }
.hero-foto {
  display: grid; place-items: center; padding: 5rem 2.5rem 4rem;
  background: repeating-linear-gradient(90deg, var(--turquesa) 0 26px, var(--papel) 26px 52px);
  border-right: 5px solid var(--turquesa-escuro);
}
.hero-moldura { position: relative; width: min(500px, 100%); }
.hero-moldura > img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: center; }
.hero-moldura .selo-hero { position: absolute; width: 130px; right: -45px; bottom: -40px; }
.selo-hero circle { fill: var(--papel); }

.hero-texto {
  position: relative; background: var(--papel);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 5rem clamp(1.5rem, 6vw, 6rem) 4rem;
}
.sobretitulo {
  font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--turquesa-escuro); margin-bottom: 1rem;
}
.hero h1 {
  font-family: "Fraunces", Georgia, serif; font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(2.4rem, 4.2vw, 3.9rem); line-height: 1.05; max-width: 11em; margin-bottom: 1.4rem;
}
.hero h1 em { font-style: italic; color: var(--turquesa-escuro); }
.hero-descricao { max-width: 30rem; margin-bottom: 2rem; }
.hero .botoes { justify-content: flex-start; }
.btn-linha {
  font-family: inherit; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .6rem 1.5rem; background: transparent; color: var(--marrom); border: 2px solid var(--marrom);
}
.btn-linha:hover { background: var(--marrom); color: var(--creme); }
.btn-cheio { background: var(--marrom); color: var(--creme); }
.btn-cheio:hover { background: var(--turquesa); color: var(--marrom); }


/* Faixa com texto correndo */
.faixa {
  background: var(--marrom); color: var(--creme);
  font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  padding-block: .75rem; overflow: hidden; white-space: nowrap;
}
.faixa-trilho { display: flex; width: max-content; animation: correr 55s linear infinite; will-change: transform; }
.faixa-trilho span { padding-right: .4em; }
@keyframes correr { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Como ajudar: selo + patinhas */
.ajude { position: relative; background: var(--turquesa); padding-block: 4.5rem; }
.ajude-inner { display: grid; }
.ajude h2 { text-align: center; margin-bottom: .6rem; }
.ajude-subtitulo { margin-bottom: 2.8rem; }
.selo { position: relative; width: 210px; aspect-ratio: 1; }
.selo svg { width: 100%; height: 100%; overflow: visible; }
.selo circle { fill: var(--creme); stroke: var(--marrom); stroke-width: 3; }
.selo text { font-family: var(--titulo); font-weight: 600; font-size: 17px; fill: var(--marrom); letter-spacing: 1px; }
.selo-texto { transform-origin: 100px 100px; animation: girar 18s linear infinite; }
.selo img { position: absolute; width: 40%; inset: 30%; }
@keyframes girar { to { transform: rotate(360deg); } }

.patas { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 4.2rem 4.5rem; padding: 2.4rem 1.6rem .5rem; }
/* Cada forma de ajudar é uma plaquinha em formato de osso, pendurada */
.item-pata {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .8rem;
  text-align: left; padding: 1.2rem 2.1rem 1.2rem 2.3rem;
  transform-origin: 50% -2.4rem; transition: transform .25s;
}
.item-pata h3 { grid-column: 1; font-size: 1.08rem; margin-bottom: .1rem; }
.item-pata .btn { grid-column: 2; grid-row: 1 / span 2; }
.item-pata:nth-child(odd) { transform: rotate(-1.5deg); }
.item-pata:nth-child(even) { transform: rotate(1.5deg); }
.item-pata:hover { transform: rotate(0); }
.item-pata > * { position: relative; }
.osso {
  position: absolute !important; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0;
  filter: drop-shadow(0 4px 0 var(--marrom));
}
.osso-contorno { fill: var(--marrom); stroke: var(--marrom); stroke-width: 5; }
.osso-miolo { fill: var(--papel); }
.osso-costura { fill: none; stroke: var(--marrom); stroke-width: 1.3; stroke-dasharray: 4 4; opacity: .35; }
.osso-brilho { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.osso-pata { fill: var(--turquesa); }
.osso-coracao { fill: #f28b82; }
/* Cordãozinho com o prego */
.item-pata::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 40%; height: 2.4rem; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpolyline points='3,40 50,5 97,40' fill='none' stroke='%23391e13' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.item-pata::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 1.95rem); width: 10px; height: 10px;
  transform: translateX(-50%); border-radius: 50%; background: var(--marrom);
}
.item-pata p { grid-column: 1; font-size: .82rem; line-height: 1.4; }
.item-pata .btn-claro { background: var(--marrom); color: var(--creme); }
.item-pata .btn-claro:hover { background: var(--creme); color: var(--marrom); }
.chave { font-size: .7rem !important; overflow-wrap: anywhere; }
.item-pata .btn { padding: .38rem .9rem; font-size: .82rem; }
.b5 { top: 10%; right: 4%; color: var(--papel); }
.b6 { bottom: 8%; left: 3%; font-size: 1.2rem; animation-delay: 1s; }

/* Quem somos */
.sobre { background: var(--papel); padding-block: 5rem; }
.sobre-grid { display: grid; grid-template-columns: 1fr 1.05fr .75fr; gap: 3rem; align-items: center; }
.sobre-texto h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.sobre-texto p { margin-bottom: 1rem; }
.sobre-arte { position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--turquesa); overflow: hidden; }
.sobre-arte::before {
  content: ""; position: absolute; left: -25%; right: -25%; bottom: -12%; height: 60%;
  background: var(--creme); border-radius: 55% 45% 0 0 / 70% 55% 0 0; transform: rotate(-8deg);
}
.sa-1 { width: 50%; left: 14%; bottom: 13%; }
.sa-2 { width: 27%; left: 18%; top: 15%; }
.sa-3 { width: 40%; right: 10%; top: 36%; }
.cursiva { font-family: var(--titulo); font-weight: 700; font-size: clamp(2.6rem, 4.5vw, 3.6rem); line-height: .95; transform: rotate(-6deg); margin-bottom: 2rem; }
.cursiva span { display: block; }
.cursiva em { display: block; font-family: "Pacifico", cursive; font-style: normal; font-weight: 400; color: var(--turquesa-escuro); font-size: .85em; margin-left: .6em; }
.numeros { list-style: none; display: grid; gap: .8rem; }
.numeros li { font-weight: 600; border-bottom: 2px dashed var(--marrom); padding-bottom: .6rem; }
.numeros strong { display: block; font-family: var(--titulo); font-size: 2rem; line-height: 1.1; }

/* Marca-texto nos trechos importantes */
mark { background: linear-gradient(transparent 55%, var(--creme) 55%); color: inherit; font-weight: 700; padding-inline: .1em; }

/* Quem somos: história + frase em destaque */
.sobre-historia { display: flex; justify-content: center; margin-top: 5rem; }
.frase-destaque {
  width: 100%; max-width: 920px; text-align: center;
  position: relative; background: var(--turquesa); border: 2.5px solid var(--marrom); border-radius: var(--raio);
  box-shadow: 0 6px 0 var(--marrom); padding: 3rem clamp(1.5rem, 5vw, 4rem) 2.6rem; transform: rotate(1.5deg);
}
.frase-destaque::before, .frase-destaque::after {
  position: absolute; font-family: "Pacifico", cursive; font-size: 5rem; line-height: 1; color: var(--marrom);
}
.frase-destaque::before { content: "“"; top: -1.9rem; left: 1.3rem; }
.frase-destaque::after { content: "”"; bottom: -4.8rem; right: 1.3rem; }
.frase-destaque p { font-family: var(--titulo); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.25; }
.frase-destaque p { text-wrap: balance; }
.frase-destaque p + p { margin-top: 1rem; }
.frase-destaque em { font-style: normal; background: var(--papel); border-radius: 8px; padding: 0 .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.b13 { top: -1rem; right: 1.2rem; font-size: 1.8rem; }

/* Quem somos: missão */
.missao { margin-top: 7.5rem; text-align: center; }
.missao-titulo { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 2rem; }
.missao-titulo em { font-style: italic; color: var(--turquesa-escuro); }
.missao-itens { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; }
.missao-itens li { padding: .5rem 2rem 1rem; border-left: 2px dashed var(--marrom); }
.missao-itens li:first-child { border-left: 0; }
.missao-num { display: block; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 4.5rem; line-height: 1; color: var(--turquesa-escuro); }
/* Ícones desenhados nas cores do site */
.missao-icone { display: block; width: 52px; height: 52px; margin: .6rem auto .8rem; overflow: visible; }
.missao-icone .ic-linha { fill: none; stroke: var(--marrom); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.missao-icone .ic-papel { fill: var(--papel); }
.missao-icone .ic-creme { fill: var(--creme); }
.missao-icone .ic-turquesa { fill: var(--turquesa); }
.missao-icone .ic-coracao { fill: #f28b82; }
.missao-icone .ic-ponto { fill: var(--marrom); }
.missao-itens strong { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 2rem; line-height: 1.1; }
.missao-itens li > span:last-child { font-family: var(--titulo); font-weight: 600; font-size: 1.05rem; }

/* Adote */
.adote { position: relative; background: var(--creme); padding-block: 7rem 5rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.2rem; }
.card { background: var(--papel); border-radius: var(--raio); padding: 1.2rem 1.2rem 1.6rem; text-align: center; transition: transform .2s; }
.card:hover { transform: translateY(-5px) rotate(-1deg); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 1rem; }
.card h3 { font-size: 1.7rem; margin-bottom: .5rem; }
.card p { margin-bottom: 1rem; }
.tags { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.tags span { background: var(--turquesa); font-family: var(--titulo); font-weight: 600; font-size: .85rem; padding: .15rem .8rem; border-radius: 999px; }
.b7 { top: 6%; left: 5%; font-size: 2.2rem; }
.b8 { bottom: 6%; right: 5%; animation-delay: 1.2s; }

/* Seções divididas em dois painéis */
.dividido { display: grid; grid-template-columns: 1fr 1fr; }
.painel { position: relative; padding: 4.5rem clamp(1.5rem, 5vw, 4.5rem); }
.painel-marrom { background: var(--marrom); color: var(--creme); }
.painel-marrom h2 { color: var(--creme); }

/* Cadastro de voluntário: formulário numa carta saindo do envelope */
.cadastro { position: relative; background: var(--papel); padding: 7rem 1.25rem 6rem; }
/* Ondinhas nas divisões entre seções (a cor é a da seção de cima) */
.onda-divisao { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; }
.onda-creme { fill: var(--creme); }
.onda-papel { fill: var(--papel); }
.cadastro h2 em { font-style: italic; color: var(--turquesa-escuro); }
.envelope-topo { text-align: center; max-width: 34rem; margin: 0 auto 7.5rem; }
.envelope-topo h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.envelope { position: relative; max-width: 600px; margin: 0 auto; }
.envelope-aba {
  position: absolute; left: 0; right: 0; top: -70px; height: 140px;
  background: var(--turquesa); clip-path: polygon(0 50%, 50% 0, 100% 50%, 100% 100%, 0 100%);
}
.envelope-aba::after {
  content: ""; position: absolute; inset: 0; background: var(--marrom);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 100% 52%, 50% 2.5%, 0 52%);
}
/* Selo de cera com patinha */
.envelope-selo {
  position: absolute; z-index: 2; left: 50%; top: -82px; transform: translateX(-50%) rotate(-10deg);
  width: 64px; height: 64px; border-radius: 50%; background: var(--marrom); display: grid; place-items: center;
  box-shadow: 0 0 0 5px rgba(57, 30, 19, .25);
}
.envelope-selo svg { width: 34px; height: 34px; fill: var(--creme); }
.envelope-carta {
  position: relative; z-index: 1; border: 2.5px solid var(--marrom); border-radius: 8px;
  box-shadow: 0 7px 0 var(--marrom); padding: 2.4rem clamp(1.4rem, 5vw, 2.6rem);
  background: repeating-linear-gradient(transparent 0 31px, rgba(104, 225, 225, .35) 31px 32px), var(--papel);
}
.envelope-para { font-family: "Pacifico", cursive; color: var(--turquesa-escuro); font-size: 1.2rem; margin-bottom: 1.2rem; }
.envelope-carta .formulario { max-width: none; }
.b9 { top: 12%; right: 10%; font-size: 2.2rem; }

/* Formulário de voluntário */
.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; max-width: 520px; margin-inline: auto; }
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo-duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.campo label { font-family: var(--titulo); font-weight: 600; font-size: 1.02rem; }
.campo input[type="text"], .campo input[type="tel"] {
  width: 100%; min-width: 0;
  font: inherit; color: var(--marrom); padding: .75rem 1.1rem;
  border: 2.5px solid var(--marrom); border-radius: 999px; background: #fffef6;
}
.campo input:focus { outline: none; box-shadow: 0 0 0 4px var(--creme); }
.campo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.arquivo {
  border: 2.5px dashed var(--marrom); border-radius: 20px; padding: 1.2rem;
  text-align: center; cursor: pointer; background: var(--creme);
}
.arquivo:hover { background: #f8e98e; }
.campo-check label { font-family: inherit; font-weight: 500; font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start; }
.campo-check input { margin-top: .3rem; accent-color: var(--marrom); }
.erro { color: #b3261e; font-weight: 700; }
.invalido input[type="text"], .invalido input[type="tel"], .invalido .arquivo { border-color: #b3261e; }
.escondido { display: none; }
.formulario .btn { justify-self: start; }
.formulario .btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* Contato: xadrez ondulado + cartão */
.painel-xadrez { overflow: hidden; display: grid; place-items: center; min-height: 480px; }
.xadrez { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--creme); }
.xadrez-creme { fill: var(--creme); }
.xadrez-turquesa { fill: var(--turquesa); }
.cartao-redes {
  position: relative; z-index: 1; width: min(430px, 100%);
  background: var(--papel); padding: 3.2rem 2.6rem; text-align: center;
  -webkit-mask: url("imagens/moldura-ondulada.svg") center / 100% 100% no-repeat;
  mask: url("imagens/moldura-ondulada.svg") center / 100% 100% no-repeat;
}
.cartao-redes h2 { font-size: 1.8rem; }
.cartao-redes p { font-size: .92rem; }
.redes { display: flex; justify-content: center; gap: .8rem; margin-block: 1rem 1.2rem; }
.redes a {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--turquesa); border: 2.5px solid var(--marrom); font-size: 1.4rem; transition: transform .15s;
}
.redes a:hover { transform: rotate(-10deg) scale(1.08); }
.b10 { top: 1.6rem; right: 2.2rem; font-size: 1.3rem; }
.b11 { bottom: 1.6rem; left: 2.2rem; font-size: 1.1rem; animation-delay: 1s; }
.b12 { top: 12%; right: 10%; color: var(--turquesa); font-size: 2rem; }
.contato-info { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1rem; }
.contato-info p { max-width: 26rem; }
.dados { font-weight: 700; line-height: 2; }

.obrigado { min-height: 100vh; display: grid; place-items: center; padding: 3rem 1.25rem; }

/* Rodapé */
.rodape { background: var(--papel); text-align: center; padding-block: 2.2rem; border-top: 2.5px solid var(--marrom); font-size: .9rem; }
.rodape img { width: 140px; margin: 0 auto .6rem; }

/* WhatsApp flutuante */
.whatsapp-flutuante {
  position: fixed; right: 1.2rem; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center;
  font-size: 1.7rem; box-shadow: 0 6px 18px rgba(0,0,0,.2); z-index: 30;
}

@media (prefers-reduced-motion: reduce) {
  .brilho, .faixa-trilho, .selo-texto { animation: none; }
  html { scroll-behavior: auto; }
}

/* Topo em telas menores */
@media (max-width: 1100px) {
  .menu { display: none; }
  .menu-btn { display: grid; }
  .topo-direita { gap: .8rem; }
  .menu-celular.aberto {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column; gap: .9rem;
    width: min(1250px, 100% - 2.5rem); margin: .8rem auto 0; padding: 1.3rem 1.6rem;
    background: var(--papel); border: 2.5px solid var(--marrom); border-radius: 26px;
    box-shadow: 0 4px 0 var(--marrom);
    font-family: var(--titulo); font-weight: 600; font-size: 1.2rem;
  }
}

/* Tablet */
@media (max-width: 1000px) {
  .patas { width: 100%; }
  .sobre-grid { grid-template-columns: 1fr 1fr; }
  .sobre-lado { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
  .numeros { grid-template-columns: repeat(3, 1fr); }
}

/* Celular */
@media (max-width: 820px) {
  .hero, .dividido { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero-foto { padding: 4.5rem 2.5rem 4rem; border-right: 0; border-bottom: 5px solid var(--turquesa-escuro); }
  .hero-moldura { width: min(360px, 88%); }
  .hero-moldura .selo-hero { width: 100px; right: -32px; bottom: -30px; }
  .hero-texto { padding: 3.5rem 1.5rem 7rem; }
  .sobre-grid { grid-template-columns: 1fr; }
  .sobre-arte { max-width: 340px; margin-inline: auto; }
  .sobre-lado { grid-template-columns: 1fr; text-align: center; }
  .cursiva { margin-bottom: .5rem; }
  .numeros { grid-template-columns: 1fr; }
  .missao-itens { grid-template-columns: minmax(0, 320px); }
  .missao-itens li { border-left: 0; border-top: 2px dashed var(--marrom); padding-top: 2rem; }
  .missao-itens li:first-child { border-top: 0; }
  .cadastro { padding: 5.5rem 1rem 4.5rem; }
  .onda-divisao { height: 40px; }
  .b9 { display: none; }
  .painel-xadrez { min-height: 440px; padding-inline: 1.25rem; }
  .campo-duplo { grid-template-columns: minmax(0, 1fr); }
  .formulario .btn { justify-self: stretch; }
}

@media (max-width: 620px) {
  .patas { grid-template-columns: minmax(0, 340px); padding-inline: 1.6rem; }
  .item-pata { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: .4rem; padding-block: 1.4rem; }
  .item-pata .btn { grid-column: 1; grid-row: auto; }
}

@media (max-width: 480px) {
  .logo { padding: .9rem 1.1rem .8rem; margin-bottom: -2rem; }
  .logo img { height: 34px; }
  .topo-whats { padding: .5rem .9rem; font-size: .92rem; }
  .topo-whats span { display: none; }
  .faixa { font-size: 1.1rem; }
}