/* I · Clássica (noite): o formato de hoje com as cores da IDV Argila */
.v-i { --pg: var(--cacau); --t-size: 23px; --cartao-raio: 44px; }

.v-i::before { content: ""; position: fixed; inset: 0; background: radial-gradient(70% 38% at 50% -4%, rgba(201,100,66,.28), transparent 72%); pointer-events: none; }
.v-i .pagina { display: flex; flex-direction: column; justify-content: center; padding: 0 14px 16px; }
.v-i .cartao { height: auto; flex: none; margin-top: 50px; padding: 4px; background: var(--papel); border-radius: 44px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); animation: sobe .7s var(--ease-suave) both; }
.v-i .hero { flex: none; position: relative; overflow: visible; background: var(--argila); color: var(--creme); border-radius: 40px; padding: 0 20px 14px; text-align: center; }
.v-i .hero::after { content: ""; position: absolute; right: 18px; top: 22px; width: 64px; height: 72px; background: url(../img/bg-gotas.svg) center / contain no-repeat; opacity: .22; pointer-events: none; }
.v-i .bolinha { position: relative; z-index: 2; width: 92px; height: 92px; margin: -46px auto 6px; border-radius: 50%; overflow: hidden; border: 4px solid var(--cacau); box-shadow: 0 0 0 4px var(--argila); animation: pop .8s var(--ease-mola) .15s both; }
.v-i .bolinha img { width: 100%; height: 100%; object-fit: cover; }
.v-i .nome { font-size: 28px; }
.v-i .cargo { margin-top: 3px; opacity: .95; }
.v-i .redes { justify-content: center; margin-top: 6px; }
.v-i .corpo { background: transparent; padding: 16px 22px 0; }
.v-i .titulo { font-size: 22px; line-height: 1.12; letter-spacing: -.01em; }
.v-i .titulo em { font-style: italic; }
.v-i .campos { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.v-i .item-input label { font-size: 14px; margin-bottom: 5px; }
.v-i .campo { padding: 2px 4px 2px 14px; }
.v-i input { font-size: 24px; padding: 5px 0; }
.v-i .area-botoes { margin: 14px -18px 0; padding: 16px 18px 10px; background: rgba(232,196,174,.4); border-radius: 40px; }
.v-i .btn-grande { padding: 14px 24px; }
.v-i #area-gota { margin-top: 8px; }
body.estado-sobre.v-i .hero { display: block; }
body.estado-sobre.v-i .corpo { margin-top: 0; padding: 16px 22px 0; border-radius: 0; }
body.estado-sobre.v-i .cartao { margin-bottom: 8px; }
@media (max-height: 700px) {
  .v-i .cartao { margin-top: 46px; }
  .v-i .bolinha { width: 84px; height: 84px; margin-top: -42px; }
  .v-i .nome { font-size: 25px; }
  .v-i .hero { padding-bottom: 10px; }
  .v-i .item-input label { font-size: 13.5px; }
  .v-i .area-botoes { padding-top: 12px; }
}