/* iô.io — tudo vermelho + cartas arrumadas */
:root { --ioio-red: #AC0000; }

html, body { background: var(--ioio-red) !important; }

/* fundos claros ficam transparentes p/ o vermelho aparecer */
.ioio-red-bg { background: transparent !important; background-color: transparent !important; background-image: none !important; }

/* com o fundo vermelho, todo texto do site nasce branco (o contraste ajusta depois se precisar) */
body .framer-text { color: #FFFFFF !important; }

/* caixa da DESCRIÇÃO: vermelho um tom mais fundo + texto branco, sempre legível */
.framer-1wtgjpn {
  background: #8E0000 !important;
  background-color: #8E0000 !important;
  background-image: none !important;
}
.framer-1wtgjpn, .framer-1wtgjpn * { color: #FFFFFF !important; }

/* contraste garantido: claro no escuro, escuro no claro */
.ioio-txt-claro { color: #FFFFFF !important; }
.ioio-txt-escuro { color: #1A1A1A !important; }

/* ---- grade das cartas ---- */
.ioio-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 32px 24px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: start !important;
  padding: 8px 0 40px !important;
}
.ioio-grid > * {
  position: relative !important;
  left: auto !important; top: auto !important;
  right: auto !important; bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  flex: none !important;
}

/* ---- a carta ---- */
.ioio-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* moldura da arte — era 390x702 fixo, agora acompanha a carta */
.ioio-media {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 9 / 16 !important;
  max-height: 400px !important;
  flex: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, .18) !important;
}
/* arte da Le inteira, nunca cortada */
.ioio-media > * {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.ioio-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* selo da duração volta pro canto */
.ioio-media .ioio-time {
  position: absolute !important;
  inset: auto 10px 10px auto !important;
  width: auto !important;
  height: auto !important;
}

/* título + avatar embaixo da carta */
.ioio-meta {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}
.ioio-meta * { max-width: 100% !important; }

@media (max-width: 700px) {
  .ioio-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; gap: 24px 14px !important; }
  /* no celular a arte não estica: fica no tamanho certo e centrada */
  .ioio-media {
    max-width: 260px !important;
    max-height: 462px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ioio-meta { padding-left: 4px !important; }
}