/* páginas internas: Sobre, Marcas, Contato */
.pag-capa { padding: 14vh var(--margem) 12vh; display: grid; justify-items: center; text-align: center; gap: 18px; }
.pag-capa--curta { padding: 9vh var(--margem) 8vh; }
.pag-capa__coroa { width: 84px; height: auto; margin-bottom: 8px; }
.pag-capa .t-grande { font-weight: 300; }
.pag-capa__texto { margin: 0; max-width: 52ch; font: 300 17px/1.6 var(--f-texto); color: rgba(255,255,255,.8); }

.pag-texto { padding: 12vh var(--margem); background: #fff; }
.pag-texto__miolo { max-width: 680px; margin: 0 auto; display: grid; gap: 22px; }
.pag-texto p { margin: 0; font: 300 18px/1.85 var(--f-texto); color: var(--tinta); }
.pag-texto__destaque { font: 300 clamp(22px, 2.2vw, 30px)/1.4 var(--f) !important; color: var(--marinho) !important; padding-top: 10px; }

.pag-numeros { background: var(--gelo); padding: 8vh var(--margem); }
.pag-numeros ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pag-numeros li { background: #fff; padding: 36px 20px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.pag-numeros strong { font: 300 40px/1 var(--f); color: var(--marinho); }
.pag-numeros span { font: 400 11px/1.4 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
@media (max-width: 760px) { .pag-numeros ul { grid-template-columns: 1fr 1fr; } }

.pag-comunidade { padding: 14vh var(--margem); display: grid; justify-items: center; text-align: center; gap: 22px; }
.pag-comunidade .t-secao { max-width: 22ch; font-weight: 300; }
.pag-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.pag-marcas { padding: 6vh var(--margem) 14vh; background: #fff; }
.pag-marcas__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--calha); max-width: 1300px; margin: 0 auto; }
.marca-card { background: var(--gelo); display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 10px; padding: 0 20px 26px; overflow: hidden; transition: background .3s; }
.marca-card:hover { background: var(--gelo-2); }
.marca-card__foto { position: relative; width: 100%; aspect-ratio: 282 / 250; overflow: hidden; }
.marca-card__foto img { position: absolute; left: 50%; top: -14.5%; height: 121%; width: auto; max-width: none; transform: translateX(-50%); transition: transform .8s var(--curva); }
.marca-card:hover .marca-card__foto img { transform: translateX(-50%) scale(1.03); }
.marca-card__logo { max-width: 56%; max-height: 44px; object-fit: contain; margin-top: 6px; }
.marca-card__conta { font: 400 11px/1.4 var(--f); letter-spacing: .06em; color: var(--tinta-2); }
@media (max-width: 1000px) { .pag-marcas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pag-contato { padding: 6vh var(--margem) 14vh; background: #fff; display: grid; gap: 10vh; }
.pag-contato__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--calha); max-width: 1300px; margin: 0 auto; width: 100%; }
.contato-card { background: var(--gelo); padding: 34px 26px 30px; display: grid; gap: 10px; align-content: start; transition: background .3s; min-width: 0; }
.contato-card:hover { background: var(--gelo-2); }
.contato-card strong { font: 500 15px/1.35 var(--f); color: var(--marinho); overflow-wrap: anywhere; }
.contato-card__nota { font: 300 13px/1.5 var(--f-texto); color: var(--tinta-2); }
@media (max-width: 900px) { .pag-contato__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pag-contato__grade { grid-template-columns: 1fr; } }
.cadastro { max-width: 760px; margin: 0 auto; width: 100%; display: grid; gap: 18px; justify-items: start; }
.cadastro__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.cadastro label { display: grid; gap: 6px; }
.cadastro label span { font: 400 10px/1.4 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.cadastro input { height: 48px; border: 0; background: var(--gelo); padding: 0 16px; font: 300 15px/1 var(--f-texto); color: var(--tinta); border-radius: 0; }
.cadastro input:focus { outline: 2px solid var(--marinho-claro); outline-offset: 0; }
.cadastro__nota { margin: 0; font: 300 12px/1.5 var(--f-texto); color: var(--tinta-2); }
@media (max-width: 640px) { .cadastro__campos { grid-template-columns: 1fr; } .cadastro .pilula { width: 100%; } }