/* Feed da Milena: o perfil do Instagram dela, igualzinho ao app, e em volta uma identidade só dela (18/10/2026):
   amora (vinho) e rosé, títulos em Fraunces suave e texto em Figtree. Saiu do verde e da Cormorant do Feed a Dois
   a pedido do Thiago, para não parecer parte dele. A parte que imita o Instagram usa a fonte e as medidas do app.
   Cantos: botões e chips em pílula; cartões e janelas 14 px; fotos 6 px; campos 12 px. Só tema claro. */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/fraunces-latin-soft-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(/fonts/fraunces-latin-soft-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --fundo: #FFFCFB;
  --papel: #FFFFFF;
  --creme: #F6EAE8;
  --creme-2: #FBF4F2;
  --pinho: #5A2440;
  --pinho-forte: #45182F;
  --texto: #3B1F2C;
  --texto-2: #5F4752;
  --texto-3: #79626C;
  --linha: rgba(90, 36, 64, .11);
  --linha-2: rgba(90, 36, 64, .2);
  --linha-campo: rgba(90, 36, 64, .55);   /* borda de campo: 3:1 contra o branco */
  --salvia: #E3B7B3;
  --salvia-clara: #F9ECEA;
  --salvia-texto: #8A4552;
  --terracota: #B9506F;
  --terracota-clara: #F8E4E9;
  --terracota-texto: #953955;
  --perigo: #B42318;
  --raio: 14px;
  --raio-campo: 12px;
  --raio-foto: 6px;
  --sombra: 0 1px 2px rgba(90, 36, 64, .05), 0 10px 30px rgba(90, 36, 64, .07);
  --sombra-forte: 0 2px 6px rgba(90, 36, 64, .08), 0 24px 60px rgba(90, 36, 64, .14);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ig-fonte: -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ig-cinza: #737373;
  --ig-linha: #dbdbdb;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --topo: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--salvia) transparent; }
body {
  margin: 0; min-height: 100dvh; background: var(--fundo); color: var(--texto);
  font-family: var(--sans); font-size: 16px; line-height: 1.55; font-weight: 400; letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--salvia-clara); color: var(--pinho); }
:focus-visible { outline: 2px solid var(--pinho); outline-offset: 3px; border-radius: 8px; }
a { color: inherit; text-decoration-color: var(--salvia); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; }
[hidden], .oculto { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--serif); font-weight: 430; letter-spacing: -.012em; margin: 0; line-height: 1.14; text-wrap: balance; }
h1, h2, h3, .marca, .nome-postagem, .legenda-topo label, .pessoa-escolha, .avatar { font-variation-settings: 'SOFT' 100; }
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: 23px; }
h3 { font-size: 18px; }
p { text-wrap: pretty; }
.suave { color: var(--texto-3); }
.dica { margin: 10px 0 0; font-size: 13.5px; color: var(--texto-3); }
.ajuda { font-size: 13.5px; color: var(--texto-3); margin: 10px 0 0; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  min-height: 42px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--linha-2); background: var(--papel);
  color: var(--texto); font-size: 15px; font-weight: 450; line-height: 1.2; text-decoration: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}
@media (hover: hover) { .btn:hover { border-color: var(--pinho); } }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-primario { background: var(--pinho); border-color: var(--pinho); color: #fff; }
@media (hover: hover) { .btn-primario:hover { background: var(--pinho-forte); border-color: var(--pinho-forte); } }
.btn-fantasma { border-color: transparent; background: transparent; }
@media (hover: hover) { .btn-fantasma:hover { background: var(--creme-2); border-color: transparent; } }
.btn-perigo { color: var(--perigo); }
.btn-perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.btn-pequeno { min-height: 36px; padding: 5px 14px; font-size: 14px; }
.btn-icone { width: 42px; min-height: 42px; padding: 0; }
.btn-largo { width: 100%; min-height: 48px; }

/* ---------- topo (computador) ---------- */
.topo {
  position: sticky; top: 0; z-index: 20; height: var(--topo); display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(16px, 3vw, 36px); background: rgba(255, 252, 251, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.marca { display: inline-flex; align-items: baseline; gap: .24em; text-decoration: none; font-family: var(--serif); font-size: 23px; font-weight: 460; letter-spacing: -.01em; white-space: nowrap; }
.marca em { font-style: italic; color: var(--terracota); font-weight: 380; }
.marca { align-items: center; gap: 10px; }
.marca-nome { display: inline-flex; align-items: baseline; gap: .24em; }
.marca-simbolo { width: auto; height: .8em; flex: none; fill: var(--pinho); }
.marca-simbolo .marca-proximo { fill: var(--terracota); }
.entrada .marca { align-items: center; gap: 14px; }
.topo-nav { display: flex; gap: 22px; }
.topo-nav a { font-size: 15.5px; color: var(--texto-3); text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color .15s var(--ease), border-color .15s var(--ease); }
@media (hover: hover) { .topo-nav a:hover { color: var(--pinho); } }
.topo-nav a[aria-current='page'] { color: var(--pinho); border-bottom-color: var(--pinho); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn-atualizar { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 7px 16px 7px 13px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--papel); color: var(--texto); font-size: 14.5px; font-weight: 450; white-space: nowrap;
  transition: border-color .15s var(--ease), transform .12s var(--ease); }
@media (hover: hover) { .btn-atualizar:hover { border-color: var(--linha-2); } }
.btn-atualizar:active { transform: scale(.97); }
.btn-atualizar svg { width: 18px; height: 18px; color: var(--salvia-texto); }
.btn-atualizar.girando svg { animation: girar .7s linear infinite; }
.btn-atualizar[disabled] { opacity: .7; }
@keyframes girar { to { transform: rotate(360deg); } }

.pagina { --margem: clamp(16px, 3vw, 36px); width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px var(--margem) 120px; }

/* ---------- barra flutuante de baixo (celular), como no app que ela usa ---------- */
.pilula { display: none; }

/* ---------- menu flutuante ---------- */
.menu-flutuante {
  position: absolute; z-index: 150; min-width: 236px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-forte); padding: 6px; display: flex; flex-direction: column;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
@starting-style { .menu-flutuante { opacity: 0; transform: scale(.96); } }
.menu-flutuante button { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: transparent; border-radius: 10px; padding: 11px 12px; font-size: 15px; }
@media (hover: hover) { .menu-flutuante button:hover { background: var(--creme-2); } }
.menu-flutuante button svg { width: 18px; height: 18px; color: var(--texto-3); flex: none; }
.menu-flutuante .perigo { color: var(--perigo); }
.menu-flutuante hr { border: 0; border-top: 1px solid var(--linha); margin: 5px 4px; }

/* ---------- entrada ---------- */
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.entrada-caixa { width: min(420px, 100%); text-align: center; }
.entrada .marca { display: flex; justify-content: center; font-size: clamp(36px, 9.5vw, 48px); margin-bottom: 8px; }
.entrada p.lema { color: var(--texto-2); margin: 0 0 36px; font-size: 16px; }
.entrada form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.entrada .outro-jeito { margin-top: 10px; color: var(--texto-2); }
.entrada .outro-jeito svg { width: 17px; height: 17px; }
.aviso-entrada { background: var(--creme-2); border-radius: var(--raio); padding: 16px 18px; color: var(--texto-2); }
.passo h2 { font-size: 26px; margin-bottom: 6px; }
.passo .suave { margin: 0; }
.pessoas { display: flex; justify-content: center; gap: 22px; margin-top: 10px; flex-wrap: wrap; }
.pessoa-escolha { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: transparent; padding: 8px; border-radius: 18px; font-family: var(--serif); font-size: 22px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--serif); font-size: 18px; background: var(--pinho); }
.pessoa-escolha .avatar { width: 88px; height: 88px; font-size: 40px; }

/* ---------- campos ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 500; color: var(--texto-2); }
.input, textarea.input {
  width: 100%; min-height: 46px; border: 1px solid var(--linha-campo); background: var(--papel); border-radius: var(--raio-campo);
  padding: 10px 14px; font-size: 16px; outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder { color: #7D6A73; }
input, textarea { caret-color: var(--terracota); }
.input:focus { border-color: var(--pinho); box-shadow: 0 0 0 3px rgba(90, 36, 64, .08); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.erro-linha { color: var(--perigo); font-size: 14px; margin: 0; }
.erro-linha:empty { display: none; }
.campo-senha { position: relative; }
.campo-senha .input { padding-right: 48px; }
.campo-senha .btn-icone { position: absolute; right: 3px; top: 2px; }
.form-janela { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.form-janela p { margin: 0; color: var(--texto-2); }

/* ---------- janelas e a folha de opções ---------- */
dialog.janela {
  border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); background: var(--papel); color: var(--texto);
  box-shadow: var(--sombra-forte); overflow: auto;
}
dialog.janela::backdrop { background: rgba(90, 36, 64, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.janela-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 4px 24px; }
.janela-topo h2 { font-size: 22px; }
.janela-topo .btn-icone svg { width: 20px; height: 20px; }
.janela-corpo { padding: 10px 24px 10px; }
.janela-corpo > p { margin: 0 0 12px; color: var(--texto-2); }
.janela-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 24px 22px; flex-wrap: wrap; }
@media (max-width: 600px) {
  dialog.janela { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom); }
  @starting-style { dialog.janela[open] { transform: translateY(24px); opacity: 0; } }
  dialog.janela[open] { transition: transform .28s cubic-bezier(.32, .72, 0, 1), opacity .2s var(--ease); }
}
dialog.janela-folha .janela-topo h2 { font-size: 20px; }
.folha { padding-bottom: 6px; }
.folha-cabeca { display: flex; align-items: center; gap: 12px; padding: 2px 0 12px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; }
.folha-capa { width: 46px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--creme); flex: none; display: grid; place-items: center; color: var(--texto-3); }
.folha-capa img { width: 100%; height: 100%; object-fit: cover; }
.folha-capa svg { width: 20px; height: 20px; }
.folha-cabeca b { display: block; font-weight: 500; line-height: 1.3; }
.folha-cabeca small { display: block; color: var(--texto-3); font-size: 13.5px; }
.folha-lista { display: flex; flex-direction: column; }
.folha-lista hr { border: 0; border-top: 1px solid var(--linha); margin: 6px 0; }
.folha-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 12px;
  padding: 11px 8px; min-height: 52px; transition: background-color .15s var(--ease), transform .12s var(--ease); }
@media (hover: hover) { .folha-item:hover { background: var(--creme-2); } }
.folha-item:active { background: var(--creme-2); transform: scale(.99); }
.folha-icone { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--creme-2); color: var(--pinho); flex: none; }
.folha-icone svg { width: 20px; height: 20px; }
.folha-texto b { display: block; font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.folha-texto small { display: block; color: var(--texto-3); font-size: 13.5px; line-height: 1.35; margin-top: 1px; }
.folha-item.perigo { color: var(--perigo); }
.folha-item.perigo .folha-icone { background: var(--terracota-clara); color: var(--perigo); }
.confirmar { background: var(--terracota-clara); border-radius: var(--raio-campo); padding: 12px 14px; margin: 10px 0; }
.confirmar p { margin: 0 0 10px; color: var(--terracota-texto); font-size: 14.5px; }
.confirmar .linha { display: flex; gap: 8px; }

/* ---------- avisos ---------- */
.toasts { position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--pinho); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14.5px; box-shadow: var(--sombra-forte); max-width: calc(100vw - 32px); text-align: center; }
.toast.erro { background: var(--perigo); }
.toast-acao { border: 0; background: rgba(255, 255, 255, .16); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: subir .25s var(--ease) both; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aviso-versao { position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 24px); top: calc(12px + env(safe-area-inset-top)); z-index: 210;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha-2);
  box-shadow: var(--sombra-forte); font-size: 14.5px; color: var(--texto); transition: opacity .2s var(--ease), transform .2s var(--ease); }
@starting-style { .aviso-versao { opacity: 0; transform: translateY(-8px); } }
body:has(> .ig-cheia) .aviso-versao { display: none; }
.puxar-atualizar { position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); z-index: 15; width: 40px; height: 40px;
  border-radius: 50%; display: grid; place-items: center; background: var(--papel); color: var(--texto-3); border: 1px solid var(--linha);
  box-shadow: var(--sombra-forte); pointer-events: none; opacity: 0; transform: translate(-50%, 0); }
.puxar-atualizar svg { width: 20px; height: 20px; }
.puxar-atualizar.pronto { background: var(--pinho); border-color: var(--pinho); color: #fff; }
.puxar-atualizar.girando svg { animation: girar .7s linear infinite; }

/* envio das fotos */
.painel-envio {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 160; width: min(360px, calc(100vw - 36px));
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-forte); padding: 14px 16px;
}
.painel-envio h3 { font-family: var(--sans); font-size: 15px; font-weight: 500; }
.painel-envio p { margin: 3px 0 0; font-size: 13.5px; color: var(--texto-2); }
.barra-progresso { height: 4px; border-radius: 4px; background: var(--creme); overflow: hidden; margin-top: 10px; }
.barra-progresso i { display: block; height: 100%; width: 0; background: var(--salvia-texto); border-radius: 4px; transition: width .3s var(--ease); }
body.arrastando::after {
  position: fixed; inset: 12px; z-index: 50; border: 2px dashed var(--salvia); border-radius: 22px; background: rgba(235, 239, 227, .86);
  display: grid; place-items: center; font-family: var(--serif); font-size: 27px; color: var(--pinho); pointer-events: none;
  content: 'Solte para mandar as fotos';
}

.esqueleto { background: linear-gradient(90deg, var(--creme) 0%, var(--creme-2) 50%, var(--creme) 100%); background-size: 200% 100%; border-radius: var(--raio); }
@media (prefers-reduced-motion: no-preference) { .esqueleto { animation: brilho 1.4s ease-in-out infinite; } }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.vazio { border: 1px dashed var(--linha-2); border-radius: var(--raio); padding: 44px 22px; text-align: center; color: var(--texto-2); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vazio > svg { width: 40px; height: 40px; color: var(--salvia-texto); }
.vazio h2 { font-size: 21px; color: var(--texto); }
.vazio p { margin: 0; max-width: 40ch; }
.vazio-simples { margin: 0; color: var(--texto-3); font-size: 14.5px; }

/* =================================================================================================
   O INSTAGRAM (imitado de propósito): fonte do sistema, preto no branco, as medidas do app
   ================================================================================================= */
.ig { position: relative; font-family: var(--ig-fonte); color: #000; letter-spacing: 0; }
.ig-av, .ig-av-p { border-radius: 50%; object-fit: cover; flex: none; background: #efefef; }
.ig-av { width: 86px; height: 86px; }
.ig-av-p { width: 32px; height: 32px; }
.ig-av.sem-foto, .ig-av-p.sem-foto, .reels-disco-av.sem-foto { display: grid; place-items: center; color: #8e8e8e; font-weight: 600; }
.ig-av.sem-foto { font-size: 30px; }

/* perfil: a barra do @, o cabeçalho e as abas */
.ig-perfil { background: #fff; }
.ig-barra { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; height: 50px; padding: 0 4px; background: #fff; }
.ig-barra-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; padding: 0; color: #000; }
.ig-barra-btn svg { width: 26px; height: 26px; }
button.ig-barra-btn:active { transform: scale(.9); }
.ig-barra-nome { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; font-size: 20px; letter-spacing: -.01em; }
.ig-barra-nome b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-barra-nome svg { width: 15px; height: 15px; flex: none; }
.ig-cabeca { display: flex; align-items: center; gap: 22px; padding: 4px 16px 14px; }
.ig-cabeca-info { min-width: 0; flex: 1; }
.ig-cabeca-nome { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-numeros { display: flex; gap: 26px; }
.ig-numeros span { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.25; color: #000; }
.ig-numeros b { font-size: 16.5px; font-weight: 700; }
.ig-abas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #efefef; }
.ig-abas button { height: 46px; display: grid; place-items: center; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; background: none; color: #8e8e8e; padding: 0; }
.ig-abas button[aria-selected='true'] { color: #000; border-bottom-color: #000; }
.ig-abas svg { width: 24px; height: 24px; }

/* a grade: 3 colunas, retângulo em pé 3:4, linhas finas de 2 px */
.ig-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: #fff; }
.ig-cel { position: relative; aspect-ratio: 3 / 4; background: #efefef; overflow: hidden; cursor: pointer; outline: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.ig-grade.reels .ig-cel { aspect-ratio: 9 / 16; }
.ig-cel img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.ig-cel:focus-visible::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--pinho), inset 0 0 0 5px #fff; }
@media (hover: hover) { .ig-cel:hover img { filter: brightness(.94); } }
.ig-tipo { position: absolute; top: 7px; right: 7px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); pointer-events: none; }
.ig-tipo svg { width: 18px; height: 18px; }
.ig-views { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; color: #fff; font-size: 13px; font-weight: 600;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)) drop-shadow(0 0 5px rgba(0, 0, 0, .35)); pointer-events: none; }
.ig-views svg { width: 15px; height: 15px; }
/* As marcas (só com "mostrar as marcas"): planejada e escondida. */
.ig-marca { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--pinho); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); pointer-events: none; }
.ig-marca svg { width: 15px; height: 15px; }
.ig-cel.escondida img { opacity: .32; }
.ig-marca-escondida { position: absolute; inset: 0; display: grid; place-items: center; color: var(--pinho); pointer-events: none; }
.ig-marca-escondida svg { width: 30px; height: 30px; }
.ig-cel.aberta::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--pinho); pointer-events: none; }
.ig-cel.vazio { background: #f4f4f4; }
.ig-cel-sem { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center;
  color: #8e8e8e; font-size: 12px; line-height: 1.25; border: 1.5px dashed #cfcfcf; }
.ig-cel-sem svg { width: 22px; height: 22px; }
.ig-cel-sem span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* arrastando: a casa de onde saiu (ou onde vai cair) e a foto que segue o dedo */
.ig-cel.lugar { background: var(--salvia-clara); }
.ig-cel.lugar > * { opacity: 0; }
.ig-cel.lugar::after { content: ''; position: absolute; inset: 0; border: 2px dashed var(--pinho); }
.ig-cel.lugar img { opacity: .35 !important; }
.arrasto-cel { position: fixed; left: 0; top: 0; z-index: 300; overflow: hidden; pointer-events: none; background: #efefef;
  box-shadow: 0 0 0 2px #fff, 0 18px 40px rgba(0, 0, 0, .28); border-radius: 4px; will-change: transform; transform-origin: center; }
.arrasto-cel img { width: 100%; height: 100%; object-fit: cover; }
.arrasto-postagem { position: fixed; left: 0; top: 0; z-index: 300; width: 80px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; pointer-events: none;
  background: var(--creme); box-shadow: 0 0 0 2px #fff, var(--sombra-forte); will-change: transform; }
.arrasto-postagem img { width: 100%; height: 100%; object-fit: cover; }
body.arrastando-postagem, body.arrastando-postagem * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.ig-vazio-perfil { padding: 34px 28px 24px; text-align: center; color: var(--ig-cinza); font-size: 14px; line-height: 1.45; }
.ig-vazio-perfil p { margin: 0 0 6px; }
.ig-vazio-perfil b { color: #000; font-weight: 600; }
.ig-vazio { text-align: center; color: var(--ig-cinza); font-size: 13.5px; padding: 28px 24px; margin: 0; }

/* o post do feed */
.ig-post { padding-bottom: 14px; background: #fff; }
.ig-post-topo { display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 12px; }
.ig-post-topo b { font-size: 14px; font-weight: 600; }
.ig-mais-topo { margin: -6px -2px -6px auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; padding: 0; color: #000; }
.ig-mais-topo svg { width: 22px; height: 22px; }
button.ig-mais-topo:active { transform: scale(.9); }
.ig-carrossel-caixa { position: relative; }
.ig-carrossel:focus-visible { outline: 2px solid var(--pinho); outline-offset: -2px; border-radius: 0; }
.ig-carrossel { overflow: hidden; aspect-ratio: var(--prop, .8); background: #efefef; outline: none; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; }
.ig-carrossel:active { cursor: grabbing; }
.ig-trilho { display: flex; height: 100%; transition: transform .32s cubic-bezier(.23, 1, .32, 1); will-change: transform; }
.ig-slide { flex: 0 0 100%; height: 100%; }
.ig-slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ig-contador { position: absolute; right: 12px; top: 12px; background: rgba(18, 18, 18, .72); color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; }
.ig-reels-selo { position: absolute; right: 12px; top: 12px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); pointer-events: none; }
.ig-reels-selo svg { width: 22px; height: 22px; }
.ig-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .88); color: #262626; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.ig-seta svg { width: 16px; height: 16px; }
.ig-seta:active { transform: translateY(-50%) scale(.92); }
.ig-seta.esq { left: 10px; }
.ig-seta.dir { right: 10px; }
@media (hover: none) { .ig-seta { display: none; } }
.ig-acoes { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 14px; color: #000; }
.ig-acoes-esq { display: flex; gap: 15px; }
.ig-acoes svg { width: 25px; height: 25px; }
.ig-pontos { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; position: absolute; left: 50%; top: calc(50% + 5px); transform: translate(-50%, -50%); max-width: 40%; }
.ig-pontos i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; transition: background-color .15s var(--ease); }
.ig-pontos i.on { background: #0095f6; }
/* a legenda como o Instagram mostra: o @ em negrito, duas linhas e o "… mais" em cinza */
.ig-legenda { padding: 9px 14px 0; font-size: 14px; line-height: 18px; color: #000; white-space: pre-wrap; overflow-wrap: anywhere; }
.ig-legenda b { font-weight: 600; }
.ig-link { color: #00376b; }
.ig-mais { border: 0; background: none; padding: 0; font: inherit; color: var(--ig-cinza); cursor: pointer; }
.ig-data { margin: 0; padding: 6px 14px 0; font-size: 12px; color: var(--ig-cinza); }
.ig-post-vazio { padding: 22px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #efefef; }
.ig-post-vazio p { margin: 0; flex: 1; font-size: 14px; color: var(--ig-cinza); }

/* a tela do Reels */
.ig-reels { color: #fff; }
.reels-tela { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000; overflow: hidden; margin: 0 auto; }
.reels-tela video, .reels-tela .reels-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reels-vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 30px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .75); }
.reels-sombra { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .4), transparent 18%, transparent 46%, rgba(0, 0, 0, .74)); }
.reels-topo { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 19px; }
.reels-topo b { font-weight: 700; }
.reels-topo svg { width: 25px; height: 25px; }
.reels-lado { position: absolute; right: 10px; bottom: 76px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.reels-lado svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.reels-disco { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; border: 2px solid #fff; display: grid; place-items: center; background: #333; }
.reels-disco-av { width: 100%; height: 100%; object-fit: cover; font-size: 12px; }
.reels-base { position: absolute; left: 12px; right: 58px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.reels-conta { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.reels-conta b { font-weight: 600; }
.reels-seguir { border: 1px solid rgba(255, 255, 255, .7); border-radius: 8px; padding: 2px 9px; font-size: 13px; font-weight: 600; }
.ig-legenda.reels-legenda { padding: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); max-height: 46%; overflow: auto; }
.reels-legenda .ig-link { color: #fff; font-weight: 600; }
.reels-legenda .ig-mais { color: rgba(255, 255, 255, .78); }
.reels-audio { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.reels-audio svg { width: 15px; height: 15px; }
.reels-audio span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reels-som { position: absolute; right: 12px; top: 52px; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; }
.reels-som svg { width: 18px; height: 18px; }

/* a publicação em tela cheia (tocar na foto da grade, como no Instagram) */
.ig-cheia { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #fff; color: #000; outline: none;
  font-family: var(--ig-fonte); transition: opacity .2s var(--ease), transform .26s var(--ease); }
@starting-style { .ig-cheia { opacity: 0; transform: translateY(16px); } }
.ig-cheia-topo { flex: none; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: calc(2px + env(safe-area-inset-top)) 4px 2px; border-bottom: 1px solid #efefef; background: #fff; }
.ig-voltar { width: 48px; height: 48px; border: 0; padding: 0; background: none; color: inherit; display: grid; place-items: center; }
.ig-voltar svg { width: 26px; height: 26px; }
.ig-voltar:active { transform: scale(.92); }
.ig-cheia-titulo { text-align: center; line-height: 1.2; min-width: 0; }
.ig-cheia-titulo span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ig-cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-cheia-titulo b { font-size: 16px; font-weight: 700; }
.ig-cheia-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.ig-cheia-corpo .ig-post { max-width: 470px; margin: 0 auto; }
.ig-cheia.reels { background: #000; color: #fff; }
.ig-cheia.reels .ig-cheia-topo { position: absolute; left: 0; right: 0; top: 0; z-index: 4; border: 0; background: transparent; color: #fff; }
.ig-cheia.reels .ig-voltar { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.ig-cheia.reels .ig-cheia-corpo { padding: 0; overflow: hidden; display: flex; justify-content: center; }
.ig-cheia.reels .ig { height: 100%; width: 100%; max-width: 560px; }
.ig-cheia.reels .reels-tela { width: 100%; height: 100%; aspect-ratio: auto; }
.ig-cheia.reels .reels-topo { left: 56px; right: 56px; top: calc(16px + env(safe-area-inset-top)); }
.ig-cheia.reels .reels-topo svg { visibility: hidden; }
.ig-cheia.reels .reels-som { top: calc(64px + env(safe-area-inset-top)); }
.ig-cheia.reels .reels-base { bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) { .ig-cheia { background: rgba(0, 0, 0, .65); } .ig-cheia:not(.reels) .ig-cheia-topo, .ig-cheia:not(.reels) .ig-cheia-corpo { width: 520px; margin: 0 auto; background: #fff; } .ig-cheia:not(.reels) .ig-cheia-corpo { flex: 1; } }

/* =================================================================================================
   As telas do app (a identidade dela em volta da simulação)
   ================================================================================================= */

/* cabeça das páginas (celular) */
.cabeca-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cabeca-pagina p { margin: 2px 0 0; font-size: 14px; }
.cabeca { margin-bottom: 22px; }
.voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--texto-3); text-decoration: none; min-height: 44px; }
@media (hover: hover) { .voltar:hover { color: var(--pinho); } }
.voltar svg { width: 18px; height: 18px; }

/* cartões das postagens */
.possiveis-bloco { margin-bottom: 30px; }
.possiveis-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.possiveis-cabeca h2 { font-size: 22px; }
.possiveis-cabeca span { font-size: 14px; }
.possiveis { display: flex; gap: 14px; overflow-x: auto; padding: 6px 4px 12px; margin: 0 -4px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--salvia) transparent; }
.possivel { flex: 0 0 108px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 0; background: none; color: inherit; text-align: left; text-decoration: none;
  scroll-snap-align: start; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a.possivel { cursor: pointer; }
.possivel:focus-visible { outline: none; }
.possivel:focus-visible .possivel-capa { outline: 2px solid var(--pinho); outline-offset: 3px; }
.possivel-capa { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--creme);
  box-shadow: 0 0 0 1px var(--linha); transition: box-shadow .18s var(--ease), transform .18s var(--ease); }
.possivel-capa img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
@media (hover: hover) { .possivel:not(.aberta):hover .possivel-capa { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--linha-2), var(--sombra); } }
.possivel:active .possivel-capa { transform: scale(.97); }
.possivel.aberta .possivel-capa { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--pinho); }
.possivel-nome { margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.possivel.aberta .possivel-nome { color: var(--pinho); font-weight: 600; }
.possivel-meta { font-size: 12.5px; line-height: 1.35; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.possivel-sem { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texto-3); }
.possivel-sem svg { width: 26px; height: 26px; }
.possivel-tipo { position: absolute; top: 7px; right: 7px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.possivel-tipo svg { width: 16px; height: 16px; }
.possivel-grade { position: absolute; left: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 252, 251, .95); color: var(--salvia-texto); box-shadow: 0 1px 3px rgba(90, 36, 64, .18); }
.possivel-grade svg { width: 14px; height: 14px; }
.possivel-nova { cursor: pointer; }
.possivel-nova .possivel-capa { display: grid; place-items: center; background: transparent; box-shadow: none; border: 1.5px dashed var(--linha-2); color: var(--texto-2); }
.possivel-nova .possivel-capa svg { width: 26px; height: 26px; }
@media (hover: hover) { .possivel-nova:hover .possivel-capa { border-color: var(--pinho); color: var(--pinho); background: var(--creme-2); transform: none; } }

/* Postagens (celular): os cartões em grade */
.lista-bloco { margin-bottom: 30px; }
.lista-bloco h2 { font-size: 21px; }
.lista-bloco > p { margin: 2px 0 12px; font-size: 14px; }
.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.cartoes .possivel { flex: none; }

/* o editor */
.editor { display: flex; flex-direction: column; gap: 24px; }
.editor-nome { display: flex; flex-direction: column; gap: 2px; }
.editor-nome .suave { font-size: 13px; }
.nome-postagem { display: block; width: 100%; font-family: var(--serif); font-size: 26px; font-weight: 440; line-height: 1.15; letter-spacing: -.01em; color: var(--texto);
  border: 0; border-bottom: 1px dashed var(--linha-2); border-radius: 0; background: transparent; padding: 2px 0 3px; transition: border-color .15s var(--ease); }
.nome-postagem::placeholder { color: var(--texto); opacity: 1; }
@media (hover: hover) { .nome-postagem:hover { border-bottom-color: var(--linha-campo); } }
.nome-postagem:focus { outline: none; border-bottom: 1px solid var(--pinho); }
.nome-postagem:focus::placeholder { color: var(--texto-3); }
.troca-versao { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--linha); background: var(--papel); border-radius: 999px; width: max-content; max-width: 100%; }
.troca-versao button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 999px; padding: 7px 14px; font-size: 14.5px; color: var(--texto-2);
  transition: background-color .15s var(--ease), color .15s var(--ease); }
.troca-versao button svg { width: 16px; height: 16px; }
.troca-versao button[aria-pressed='true'] { background: var(--pinho); color: #fff; }
.editor-bloco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.editor-bloco-topo span { font-size: 14px; }
.editor-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ordem { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.ordem-item { position: relative; aspect-ratio: 4 / 5; border-radius: var(--raio-foto); overflow: hidden; background: var(--creme); cursor: grab;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: box-shadow .2s var(--ease); }
.ordem-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ordem-item:focus-visible { outline: 2px solid var(--pinho); outline-offset: 2px; }
.ordem-num { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: baseline; gap: 5px; background: rgba(255, 252, 251, .94); color: var(--pinho);
  border-radius: 999px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; pointer-events: none; }
.ordem-num span { font-weight: 500; font-size: 11.5px; }
.ordem-item.capa .ordem-num { background: var(--pinho); color: #fff; }
.ordem-tirar { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  background: rgba(255, 252, 251, .94); color: var(--texto-2); opacity: 0; transition: opacity .15s var(--ease), transform .12s var(--ease); }
.ordem-tirar svg { width: 14px; height: 14px; }
.ordem-tirar:active { transform: scale(.92); }
.ordem-item:hover .ordem-tirar, .ordem-item:focus-within .ordem-tirar { opacity: 1; }
@media (hover: none) { .ordem-tirar { display: none; } }
.ordem-item.arrastando { z-index: 5; cursor: grabbing; box-shadow: var(--sombra-forte); opacity: .96; }
.legenda-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.legenda-topo label { font-family: var(--serif); font-size: 19px; font-weight: 440; line-height: 1.15; }
.legenda-conta { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.legenda-conta.passou { color: var(--perigo); font-weight: 600; }
textarea.input.legenda { width: 100%; min-height: 132px; max-height: 70dvh; padding: 12px 14px; font-size: 16px; line-height: 1.55; resize: none; overflow-y: auto; }
.legenda-dica { margin: 8px 0 0; font-size: 13.5px; color: var(--texto-3); min-height: 1.4em; }
.legenda-dica.passou { color: var(--perigo); }
.legenda-dica[data-estado='erro'] { color: var(--terracota-texto); }
.situacao-bloco { border-top: 1px solid var(--linha); padding-top: 18px; }
.situacao-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 14.5px; }
.selo-situacao { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px 4px 9px; background: var(--creme); color: var(--pinho); font-size: 14px; font-weight: 500; }
.selo-situacao svg { width: 16px; height: 16px; }
.selo-situacao.publicada { background: var(--salvia-clara); color: var(--salvia-texto); }
/* Reels: vídeo, capa e recorte */
.reels-bloco h3 { font-size: 18px; margin-bottom: 4px; }
.reels-linha { display: flex; gap: 18px; align-items: flex-start; }
.reels-video { flex: none; width: 120px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #111; display: grid; place-items: center; box-shadow: var(--sombra); }
.reels-video video { width: 100%; height: 100%; object-fit: cover; }
.reels-video.vazio { background: var(--creme); color: var(--texto-3); box-shadow: inset 0 0 0 1.5px var(--linha-2); }
.reels-video.vazio svg { width: 30px; height: 30px; }
.reels-info { flex: 1 1 auto; min-width: 0; }
.reels-info p { margin: 0 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.barra-envio { height: 6px; border-radius: 999px; background: var(--creme); overflow: hidden; margin: 8px 0 4px; }
.barra-envio i { display: block; height: 100%; background: var(--pinho); border-radius: inherit; transition: width .3s var(--ease); }
.reels-capa { border-top: 1px solid var(--linha); padding-top: 18px; margin-top: 18px; }
.capa-linha { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.capa-mini { flex: none; width: 80px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--creme); display: grid; place-items: center; font-size: 12px; color: var(--texto-3); text-align: center; box-shadow: inset 0 0 0 1px var(--linha); }
.capa-mini img { width: 100%; height: 100%; object-fit: cover; }
.capa-opcoes { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.capa-opcoes input[type=range] { width: 100%; }
.rotulo-pequeno { display: block; font-size: 13.5px; font-weight: 500; color: var(--texto-2); }
.recorte-linha { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.recorte-linha input[type=range] { flex: 1 1 auto; }
.recorte-mini { flex: none; width: 56px; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: var(--creme); box-shadow: inset 0 0 0 1px var(--linha); }
.recorte-mini img { width: 100%; height: 100%; object-fit: cover; }
.reels-bloco input[type=range] { accent-color: var(--pinho); }

/* escolher fotos */
dialog.janela.janela-escolher { width: min(860px, calc(100vw - 32px)); }
.escolher-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.escolher-topo .suave { font-size: 14px; }
.escolher-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: min(60dvh, 620px); overflow: auto; padding: 2px; }
.escolher-item { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; border-radius: var(--raio-foto); overflow: hidden; background: var(--creme); }
.escolher-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease), border-radius .2s var(--ease); }
.escolher-item.sim { background: var(--salvia-clara); }
.escolher-item.sim img { transform: scale(.86); border-radius: 5px; }
.escolher-n { position: absolute; top: 6px; right: 6px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--pinho); color: #fff;
  font-size: 12.5px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.escolher-n:empty { display: none; }
.escolher-item.unica .escolher-n { display: none; }

/* preparar para postar */
.passos { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 16px; }
.passos li b { display: block; font-weight: 500; }
.passos li span { display: block; color: var(--texto-3); font-size: 14px; margin-bottom: 8px; }

/* Fotos (biblioteca) */
.fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 14px; }
.foto-cel { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; border-radius: var(--raio-foto); overflow: hidden; background: var(--creme); }
.foto-cel img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease), border-radius .2s var(--ease); }
.foto-cel.sim { background: var(--salvia-clara); }
.foto-cel.sim img { transform: scale(.86); border-radius: 5px; }
.foto-uso { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; background: rgba(255, 252, 251, .94); color: var(--salvia-texto);
  border-radius: 999px; padding: 1px 7px 1px 5px; font-size: 12px; font-weight: 600; }
.foto-uso svg { width: 13px; height: 13px; }
.barra-selecao {
  position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 24px); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: 8px; background: var(--papel); border: 1px solid var(--linha); border-radius: 22px; box-shadow: var(--sombra-forte); padding: 8px 10px;
}
.barra-selecao .n { font-size: 14px; color: var(--texto-2); padding: 0 6px; white-space: nowrap; }
.btn-apagar-sel { color: var(--perigo); border-color: rgba(180, 35, 24, .35); }

/* configurações */
.config { max-width: 680px; display: flex; flex-direction: column; gap: 20px; }
.bloco { border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; background: var(--papel); }
.bloco h2 { font-size: 21px; margin-bottom: 4px; }
.bloco > p { margin: 0 0 14px; color: var(--texto-2); font-size: 15px; text-wrap: wrap; }
.bloco .linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bloco .linha + .linha { margin-top: 10px; }
.bloco .linha .input { flex: 1; min-width: 200px; }
.bloco .btn svg { width: 17px; height: 17px; }
.selo-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; border-radius: 999px; padding: 3px 10px; background: var(--salvia-clara); color: var(--salvia-texto); }
.selo-estado.nao { background: var(--creme); color: var(--texto-3); }
.selo-estado svg { width: 14px; height: 14px; }
.form-senha { margin: 12px 0 10px; }
.pessoa-atual { gap: 12px; }

/* =================================================================================================
   Computador: a mesa (postagens e editor à esquerda, o celular à direita)
   ================================================================================================= */
.mesa { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 44px; align-items: start; }
.mesa-esq { min-width: 0; }
.mesa-dir { position: sticky; top: calc(var(--topo) + 16px); min-width: 0; }
.mesa-dir-topo { display: flex; justify-content: center; margin-bottom: 14px; }
.mesa-editor { border-top: 1px solid var(--linha); padding-top: 24px; }
.mesa-publicada h2 { margin-bottom: 6px; }
.mesa-publicada p { margin: 0 0 4px; }
.celular { width: 100%; max-width: 390px; height: 700px; margin: 0 auto; background: #fff; border: 1px solid var(--linha-2); border-radius: 34px; box-shadow: var(--sombra);
  padding: 14px 0 18px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; transform-origin: top center; transition: box-shadow .2s var(--ease); container-type: inline-size; }
.celular::-webkit-scrollbar { display: none; }
.celular.alvo { box-shadow: 0 0 0 3px var(--salvia), var(--sombra-forte); }
.celular.com-reels { background: #000; padding: 0; }
.celular.com-reels .reels-tela { width: 100%; height: 100%; aspect-ratio: auto; }
.celular-post .ig-post { padding-top: 2px; }
.nota-mesa { margin: 12px auto 0; max-width: 390px; text-align: center; font-size: 13px; color: var(--texto-3); }

/* =================================================================================================
   Celular: a vista principal é o perfil (fundo branco, como o Instagram), com a barra flutuante embaixo
   ================================================================================================= */
@media (max-width: 999px) {
  .topo { display: none; }
  .pagina { padding: 18px 16px calc(110px + env(safe-area-inset-bottom)); }
  .pilula { display: flex; position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
    gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--linha); box-shadow: 0 8px 28px rgba(90, 36, 64, .16), 0 1px 3px rgba(90, 36, 64, .08); }
  .pilula a { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 82px; padding: 7px 12px 6px; border-radius: 999px; color: var(--texto-3);
    text-decoration: none; font-size: 12px; font-weight: 450; line-height: 1.2; transition: background-color .15s var(--ease), color .15s var(--ease), transform .12s var(--ease); }
  .pilula a svg { width: 23px; height: 23px; }
  .pilula a[aria-current='page'] { color: var(--pinho); background: var(--creme-2); font-weight: 500; }
  .pilula a:active { transform: scale(.95); }
  body[data-tela='feed'] { background: #fff; }
  .pagina-feed { padding: 0 0 calc(96px + env(safe-area-inset-bottom)); max-width: none; }
  .perfil-tela .ig-barra { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top); height: calc(50px + env(safe-area-inset-top)); }
  .perfil-tela .ig-grade { min-height: 40dvh; }
  .pagina-postagem { padding-top: 0; }
  .topo-postagem { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; margin: 0 -16px; padding: env(safe-area-inset-top) 8px 0 12px;
    background: rgba(255, 252, 251, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
  .previa-postagem { margin: 0 -16px 22px; background: #fff; border-bottom: 1px solid var(--linha); }
  .previa-postagem .ig-post { padding-bottom: 16px; }
  .previa-postagem.com-reels { background: #000; }
  .previa-postagem.com-reels .reels-tela { max-height: 74dvh; width: auto; }
  .mesa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ordem { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fotos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-inline: -16px; }
  .foto-cel { border-radius: 0; }
  .escolher-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-height: 58dvh; }
  .cabeca-pagina h1 { font-size: 29px; }
  .nome-postagem { font-size: 23px; }
  .bloco { padding: 18px 16px; }
  .barra-selecao { gap: 4px; padding: 6px; bottom: calc(86px + env(safe-area-inset-bottom)); }
  .barra-selecao .btn-pequeno { padding: 5px 11px; }
}
@media (max-width: 480px) { .barra-selecao .so-largo { display: none; } .barra-selecao .btn-pequeno:has(.so-largo) { padding-inline: 10px; } }
@media (max-width: 380px) {
  .ig-cabeca { gap: 16px; }
  .ig-av { width: 76px; height: 76px; }
  .ig-numeros { gap: 18px; }
  .pilula a { min-width: 74px; padding-inline: 8px; }
}
/* iPhone: campo com letra menor que 16 px faz o Safari ampliar a página sozinho ao tocar nele (e não volta). */
@media (pointer: coarse) { .input, textarea.input, .nome-postagem { font-size: 16px; } .nome-postagem { font-size: 23px; } }

/* =================================================================================================
   Revisão de 18/10/2026 (impeccable: design + medições)
   ================================================================================================= */
/* Avisos: o botão do aviso (Desfazer) precisa de toque; no celular o aviso sobe acima da pílula e da barra de seleção. */
.toast.com-acao { pointer-events: auto; padding-right: 8px; }
@media (max-width: 999px) {
  body[data-tela='feed'] .toasts, body[data-tela='postagens'] .toasts, body[data-tela='fotos'] .toasts { bottom: calc(92px + env(safe-area-inset-bottom)); }
  body[data-tela='fotos']:has(.barra-selecao:not([hidden])) .toasts { bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* Toque: alvos de 44 px no celular (o desenho continua do mesmo tamanho). */
@media (pointer: coarse) {
  .btn, .btn-pequeno { min-height: 44px; }
  .btn-icone { width: 44px; min-height: 44px; }
  .troca-versao button { min-height: 44px; }
  .nome-postagem { min-height: 44px; }
}
.reels-som::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }

/* Retorno do toque onde faltava (o iPhone não mostra nada sozinho). */
.menu-flutuante button:active, .troca-versao button:active, .ig-abas button:active, .voltar:active, .toast-acao:active { opacity: .6; }
.reels-som:active { transform: scale(.92); }
.foto-cel:active img, .escolher-item:active img { transform: scale(.95); }
.foto-cel.sim:active img, .escolher-item.sim:active img { transform: scale(.82); }

/* Foco visível também no preto do Reels. */
.ig-cheia.reels :focus-visible { outline-color: #fff; }

/* Postagens no celular: o nome em até duas linhas, em vez de "Exemplo: fim ...". */
.cartoes .possivel-nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Configurações: senha e opções de entrada recolhidas (é coisa do Thiago, não do dia a dia dela). */
.mais-entrada { margin-top: 16px; border-top: 1px solid var(--linha); padding-top: 4px; }
.mais-entrada summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--texto-2); font-weight: 500; font-size: 15px; }
.mais-entrada summary::-webkit-details-marker { display: none; }
.mais-entrada summary::before { content: ''; width: 7px; height: 7px; margin: 0 3px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s var(--ease); }
.mais-entrada[open] summary::before { transform: rotate(45deg); }
.mais-entrada summary:active { opacity: .6; }
.mais-entrada > p { margin: 6px 0 10px; color: var(--texto-2); }
.mais-entrada > .linha, .mais-entrada > form { margin-top: 10px; }

/* Segurar uma foto da grade: ela afunda de leve depois de um instante (um toque rápido ou rolar não mostra nada). */
.ig-cel { transition: transform .15s var(--ease); }
@media (prefers-reduced-motion: no-preference) { .ig-cel.segurando { transform: scale(.96); transition: transform .26s var(--ease) .12s; } }

/* Ajuda */
.como-usar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.como-usar li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto-2); line-height: 1.45; }
.como-usar li svg { width: 22px; height: 22px; flex: none; color: var(--pinho); margin-top: 1px; }
.como-usar b { color: var(--texto); font-weight: 500; }

/* Abrindo o app: o esqueleto do perfil no lugar da tela vazia (internet lenta). */
.carregando-app { max-width: 470px; margin: 0 auto; background: #fff; min-height: 100dvh; }
.carregando-app i, .carregando-app span, .ca-barra::after { display: block; background: linear-gradient(90deg, #efefef 0%, #f7f7f7 50%, #efefef 100%); background-size: 200% 100%; }
.ca-barra { height: 50px; margin: 0 auto; width: 40%; background: transparent !important; position: relative; }
.ca-barra::after { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 16px; border-radius: 8px; }
.ca-cabeca { display: flex; align-items: center; gap: 24px; padding: 12px 16px 22px; background: transparent !important; }
.ca-cabeca .ca-av { width: 86px; height: 86px; border-radius: 50%; flex: none; }
.ca-cabeca .ca-linhas { flex: 1; background: transparent; display: flex; flex-direction: column; gap: 10px; }
.ca-cabeca .ca-linhas i { height: 14px; border-radius: 7px; width: 60%; }
.ca-cabeca .ca-linhas i + i { width: 85%; }
.ca-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 48px; }
.ca-grade i { aspect-ratio: 3 / 4; }
@media (prefers-reduced-motion: no-preference) { .carregando-app i, .carregando-app .ca-av, .ca-barra::after { animation: brilho 1.4s ease-in-out infinite; } }

/* Página de uma postagem no celular: Post | Na grade (a capa entre as vizinhas). */
.topo-postagem .vistas-postagem { margin-inline: auto; }
.vistas-postagem button { padding: 6px 13px; font-size: 14px; }
.mini-grade-caixa { margin: 0 0 22px; }
.mini-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: #fff; }
.mini-cel { position: relative; aspect-ratio: 3 / 4; background: #efefef; overflow: hidden; }
.mini-cel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-cel.esta::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--terracota); }
.mini-fora { padding: 28px 16px; text-align: center; background: #fff; }
.mini-fora p { margin: 0 0 12px; color: var(--texto-2); }
.mini-grade-caixa .dica { padding: 0 2px; }
@media (max-width: 999px) { .mini-grade-caixa { margin: 0 -16px 22px; } .mini-grade-caixa .dica { padding: 0 16px; } }

/* Computador: a mesa. O fim da página não empurra o celular para baixo da barra; em tela baixa, a faixa encolhe
   e a dica some quando já tem postagem aberta. */
@media (min-width: 1000px) {
  .pagina-mesa { padding-bottom: 12px; }
  .mesa.com-aberta .possiveis-bloco .dica { display: none; }
}
@media (min-width: 1000px) and (max-height: 720px) {
  .pagina-mesa { padding-top: 16px; }
  .possiveis-bloco { margin-bottom: 18px; }
  .possiveis-cabeca { margin-bottom: 6px; }
  .possiveis-cabeca h2 { font-size: 19px; }
  .mesa .possiveis .possivel { flex-basis: 84px; }
  .mesa .possivel-nome { margin-top: 5px; font-size: 13px; }
  .mesa-dir-topo { margin-bottom: 8px; }
  .mesa-dir-topo .troca-versao button { padding-block: 5px; }
}
@media (max-height: 620px) { .nota-mesa { display: none; } }

/* Folhas em tela baixa (notebook): cabe a lista inteira. */
@media (max-height: 600px) {
  .janela-topo { padding-top: 12px; }
  .folha-item { min-height: 44px; padding-block: 6px; }
  .folha-icone { width: 32px; height: 32px; }
  .folha-icone svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .06s !important; scroll-behavior: auto !important; }
}