/* ========================================================= CONTEÚDO INSTAGRAM — aba "Ideias para o Feed" --------------------------------------------------------- Vale SÓ para essa aba (montada por conteudo-ig.js). Tudo fica sob .ig e toda classe começa com "ig-": a plataforma já tem .btn, .card e .toast globais, e o tema Black estiliza campos e botões em geral — nome próprio é o que impede as duas coisas de se misturarem. Dois temas, só por tokens: o original (azul-marinho, creme e dourado) no .ig e o Black (preto e dourado) em html[data-tema="black"] .ig. Trocar o tema no painel muda esta tela sem repintar nada. Celular: uma coluna; abrir uma ideia troca a tela. Computador, como o Instagram de mesa: cabeçalho do perfil deitado e a grade na largura toda (.ig-largo, área ≥ 680px); a ideia abre numa JANELA por cima (.ig-modal, janela ≥ 900×540), com o post grande à esquerda e as etapas à direita. ⚠️ A primeira versão punha a ideia numa coluna grudada ao lado da grade. Num notebook de 1366×768 a grade começava a 830px do topo (fora da tela), a coluna rolava dentro de si mesma e o post ficava pequeno — o cliente achou "pouco funcional no computador". ========================================================= */ .ig{ --ig-bg:#F6F7F9; --ig-surface:#FFFFFF; --ig-surface-2:#F4F1EA; --ig-elev:#ECE6DA; --ig-text:#0E2740; --ig-text-2:#5B6878; --ig-gold:#C4A97C; --ig-gold-text:#7F6128; --ig-line:#E7E2DA; --ig-line-strong:#D3C5A8; --ig-on-gold:#0E2740; --ig-veil:rgba(14,39,64,.55); --ig-grad-gold:linear-gradient(135deg,#C4A97C,#E4D5BA); --ig-grad-avatar:linear-gradient(135deg,#E4D5BA,#C4A97C 55%,#8A6A2E); --ig-sombra:0 14px 34px -22px rgba(14,39,64,.45); --ig-toast-bg:#0E2740; --ig-toast-fg:#FFFFFF; --ig-link:#1F4F8A; --ig-fs-titulo:22px; --ig-fs-corpo:16px; --ig-fs-meta:13px; color:var(--ig-text); font-family:var(--sans); } html[data-tema="black"] .ig{ --ig-bg:#0B0B0C; --ig-surface:#151417; --ig-surface-2:#1C1B1F; --ig-elev:#26242A; --ig-text:#F5F1E8; --ig-text-2:#B9B4AA; --ig-gold:#C9A24C; --ig-gold-text:#E8CF8E; --ig-line:rgba(201,162,76,.16); --ig-line-strong:rgba(201,162,76,.34); --ig-on-gold:#0B0B0C; --ig-veil:rgba(11,11,12,.6); --ig-grad-gold:linear-gradient(90deg,#8C6A2E,#E8CF8E 52%,#C9A24C); --ig-grad-avatar:linear-gradient(135deg,#E8CF8E,#C9A24C 55%,#8C6A2E); --ig-sombra:0 14px 34px -22px rgba(0,0,0,.8); --ig-toast-bg:#26242A; --ig-toast-fg:#F5F1E8; --ig-link:#E8CF8E; } /* Arte de cada ideia: --c1, --c2 e --ink vêm do JS (vestir()), a partir do par de cores que a equipe escolheu no painel — convertido para a paleta da Black quando é esse o tema, e com o texto claro ou escuro escolhido pelo contraste das duas pontas do degradê. */ .ig *,.ig *::before,.ig *::after{box-sizing:border-box} .ig [hidden]{display:none!important} .ig button,.ig select,.ig textarea{font:inherit;color:inherit} .ig button{cursor:pointer} /* Contorno de foco em ouro ESCURO: o ouro claro dava 2,2:1 sobre o branco do tema original (o mínimo é 3:1). Na Black o gold-text é claro e passa. */ .ig :focus-visible{outline:2px solid var(--ig-gold-text);outline-offset:2px} .ig .ig-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} body.ig-travado{overflow:hidden} /* ---------- Estrutura ---------- */ .ig-raiz{max-width:1120px;margin-inline:auto} .ig .ig-cols{display:block} .ig .ig-tela{display:flex;flex-direction:column;gap:20px;max-width:600px;margin-inline:auto} .ig .ig-entra{animation:ig-entra .22s ease-out} @keyframes ig-entra{from{transform:translateY(6px)}to{transform:none}} /* Computador: a largura do perfil do Instagram de mesa (935px). Mais que isso, os quadros ficam enormes e o mês deixa de caber numa olhada. */ .ig.ig-largo .ig-mes{max-width:935px;gap:18px} /* Cabeçalho deitado: avatar grande à esquerda; à direita o nome com os filtros ao lado, os números e a bio (com a abertura do mês). ⚠️ `.ig-perfil.ig-perfil-largo` com as DUAS classes: a regra base do .ig-perfil vem depois no arquivo e, com a mesma força, ganhava — o cabeçalho continuava em pé. */ .ig .ig-perfil.ig-perfil-largo{flex-direction:row;align-items:flex-start;gap:44px;padding:4px 0 0 12px} .ig .ig-perfil-largo .ig-av{width:136px;height:136px} .ig .ig-perfil-largo .ig-av svg{width:136px;height:136px} .ig .ig-perfil-largo .ig-av-in{inset:10px;font-size:40px} .ig .ig-perfil-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding-top:6px} .ig .ig-perfil-topo{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px} .ig .ig-perfil-usuario{margin:0;font-size:20px;font-weight:500;overflow-wrap:anywhere} .ig .ig-perfil-largo .ig-bio-nome{font-size:15px} .ig .ig-perfil-largo .ig-stats{display:flex;flex-wrap:wrap;gap:8px 32px;text-align:left} .ig .ig-perfil-largo .ig-stats div{flex-direction:row-reverse;align-items:baseline;gap:6px} .ig .ig-perfil-largo .ig-stats dd{font-size:19px} .ig .ig-perfil-largo .ig-stats dt{font-size:15px;color:var(--ig-text)} /* Computador: as semanas à esquerda e os filtros (mês, área) à direita, na mesma linha — no topo do perfil eles disputavam lugar com os botões. */ .ig .ig-semanas-linha{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px} .ig .ig-semanas-linha .ig-semanas{flex:1 1 460px;min-width:0} .ig .ig-semanas-linha .ig-filtros{flex:none;margin-left:auto} .ig .ig-semanas-linha .ig-filtros > *{flex:none} .ig .ig-semanas-linha .ig-sel{width:auto;min-width:150px;height:36px;font-size:14px;background-position:calc(100% - 16px) 15px,calc(100% - 11px) 15px} /* Computador: a abertura do mês numa linha só, com "ver mais" no fim dela em vez de embaixo — cada linha aqui é a grade descendo. */ .ig.ig-largo .ig-frase-area{flex-direction:row;align-items:baseline;gap:10px} .ig.ig-largo .ig-abertura{flex:1;min-width:0;-webkit-line-clamp:1;line-clamp:1;font-size:14px} .ig.ig-largo .ig-abertura.ig-aberta{-webkit-line-clamp:unset;line-clamp:none} .ig.ig-largo .ig-frase-area .ig-link{flex:none;min-height:0;padding:2px 0} /* Tablet (e qualquer tela de toque) usa o cabeçalho deitado do computador, mas com o DEDO: os controles compactos voltam a 44px. Medido no iPad em pé: botões do perfil com 36px e "ver mais" com 25. */ @media (max-width:1024px),(pointer:coarse){ /* Com o .ig-perfil-botoes na frente: a regra base do botão vem DEPOIS no arquivo e, com a mesma força, ganhava — o botão seguia com 36px. */ .ig .ig-perfil-botoes .ig-btn-perfil{min-height:44px} .ig .ig-semanas-linha .ig-sel{height:44px;background-position:calc(100% - 14px) 19px,calc(100% - 9px) 19px} .ig.ig-largo .ig-frase-area{align-items:center} .ig.ig-largo .ig-frase-area .ig-link{min-height:44px;padding:0} } /* ---------- Perfil ---------- */ .ig .ig-perfil{display:flex;flex-direction:column;gap:12px} .ig .ig-perfil-linha{display:flex;align-items:center;gap:20px} .ig .ig-av{position:relative;flex:none;width:88px;height:88px} .ig .ig-av svg{position:absolute;inset:0;width:88px;height:88px;display:block} .ig .ig-anel-trilho{fill:none;stroke:var(--ig-line-strong);stroke-width:3} .ig .ig-anel-arco{fill:none;stroke:var(--ig-gold);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .4s ease} .ig .ig-av-in{position:absolute;inset:7px;border-radius:50%;background:var(--ig-grad-avatar);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ig-on-gold)} .ig .ig-stats{flex:1;min-width:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;text-align:center} .ig .ig-stats div{display:flex;flex-direction:column-reverse;align-items:center;min-width:0} .ig .ig-stats dd{margin:0;font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums} .ig .ig-stats dt{font-size:var(--ig-fs-meta);color:var(--ig-text-2)} .ig .ig-bio{display:flex;flex-direction:column;gap:2px} .ig .ig-bio p{margin:0} .ig .ig-bio .ig-bio-nome{font-weight:600} .ig .ig-bio .ig-bio-arroba{font-size:var(--ig-fs-meta);color:var(--ig-text-2)} /* A bio gerada, linha a linha como no Instagram, e o link do WhatsApp na cor de link (no Instagram ele mora num campo separado da bio). */ .ig .ig-bio-texto{display:flex;flex-direction:column;margin-top:2px;font-size:14px;line-height:1.45;overflow-wrap:anywhere} .ig .ig-perfil-largo .ig-bio-texto{line-height:1.38} .ig .ig-bio .ig-bio-link{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ig-link)} .ig .ig-bio .ig-bio-link svg{flex:none} /* "mais"/"menos" da bio recolhida (celular): discreto como no Instagram, sem sublinhado — é continuação do texto, não um link de navegação. */ .ig .ig-bio .ig-bio-mais{align-self:flex-start;min-height:36px;margin-top:-2px;font-size:14px;font-weight:600;color:var(--ig-text-2);text-decoration:none} /* Celular: 12px entre os blocos da tela do mês, não 20. Eram cinco intervalos de 20px antes da primeira ideia — quase 100px de vazio entre a doutora e o conteúdo. */ .ig:not(.ig-largo) .ig-mes{gap:12px} /* "mais" da bio e "ver mais" da abertura: 32px de altura no celular, não 44. São continuação de texto, com espaço livre em volta (o critério de alvo pequeno da WCAG pede 24px com folga); 44px cada um custavam 24px de tela antes da primeira ideia. */ .ig:not(.ig-largo) .ig-bio .ig-bio-mais, .ig:not(.ig-largo) #ig-abertura-btn{min-height:32px} /* Enquanto os dados dela não chegam: três linhas neutras no lugar da bio, em vez de uma bio genérica que depois muda sozinha. */ .ig .ig-esqueleto{gap:7px;padding-top:4px} .ig .ig-esqueleto span{display:block;height:11px;border-radius:6px;background:var(--ig-line-strong);opacity:.55;animation:ig-pulso 1.2s ease-in-out infinite alternate} .ig .ig-esqueleto span:nth-child(1){width:62%} .ig .ig-esqueleto span:nth-child(2){width:78%} .ig .ig-esqueleto span:nth-child(3){width:48%} @keyframes ig-pulso{to{opacity:.25}} /* Filtros com cara dos botões do perfil (lado a lado, cinza claro). */ /* Lado a lado enquanto cada caixa tem 152px (o que "Outubro 2026" e "Todas as áreas" pedem); num celular de 320px elas empilham em vez de cortar o nome do mês. */ .ig .ig-filtros{display:flex;flex-wrap:wrap;gap:8px} .ig .ig-filtros > *{flex:1 1 152px;min-width:0} .ig .ig-sel{ appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:44px;padding:0 26px 0 10px; border-radius:10px;border:1px solid var(--ig-line);background-color:var(--ig-surface-2);color:var(--ig-text); background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 14px) 19px,calc(100% - 9px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat; font-size:15px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;overflow:hidden; } .ig .ig-sel option{background:var(--ig-surface);color:var(--ig-text)} /* Semanas como os destaques redondos do perfil. */ /* 5 bolinhas (Todas + 4 semanas) cabem até num celular de 350px: 5×58 + 4×6 = 314. Com 66 e 14 a quarta semana ficava fora da tela, escondida atrás da rolagem. space-between espalha nas telas maiores. */ .ig .ig-semanas{display:flex;justify-content:space-between;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--pad,0px));padding:4px var(--pad,0px)} .ig.ig-largo .ig-semanas{margin-inline:0;padding-inline:0} .ig .ig-semanas::-webkit-scrollbar{display:none} .ig .ig-sem{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:58px;padding:0;border:0;border-radius:12px;background:none;color:var(--ig-text-2);font-size:12px;font-weight:500;line-height:1.2} .ig .ig-sem-bola{display:block;width:56px;height:56px;padding:2px;border-radius:50%;background:var(--ig-line-strong)} .ig .ig-sem-in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--ig-surface);border:3px solid var(--ig-bg);font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ig-gold-text)} .ig .ig-sem-rot{white-space:nowrap} .ig .ig-sem[aria-pressed="true"] .ig-sem-bola{background:var(--ig-grad-avatar)} .ig .ig-sem[aria-pressed="true"] .ig-sem-rot{color:var(--ig-text);font-weight:600} /* Celular de 320px: 5×52 + 4×6 = 284 cabe nos 288 que sobram. */ @media (max-width:340px){ .ig .ig-sem{width:52px} .ig .ig-sem-bola{width:50px;height:50px} .ig .ig-sem-in{font-size:19px} } .ig.ig-largo .ig-semanas{gap:28px;padding-left:16px;justify-content:flex-start} .ig.ig-largo .ig-sem{width:68px;font-size:13px} .ig.ig-largo .ig-sem-bola{width:64px;height:64px} .ig.ig-largo .ig-sem-in{font-size:24px} .ig .ig-frase-area{display:flex;flex-direction:column;align-items:flex-start} .ig .ig-frase{margin:0;font-family:var(--serif);font-weight:600;font-size:var(--ig-fs-titulo);line-height:1.25;text-wrap:balance} .ig .ig-abertura{margin:0;color:var(--ig-text-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden} .ig .ig-abertura.ig-aberta{display:block;-webkit-line-clamp:unset;line-clamp:none} .ig .ig-link{min-height:44px;padding:0;border:0;background:none;color:var(--ig-gold-text);font-size:var(--ig-fs-meta);font-weight:600;text-decoration:underline;text-underline-offset:3px} /* Abas do perfil + grade, coladas, como no Instagram. */ .ig .ig-feed{display:flex;flex-direction:column} .ig .ig-pabas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:calc(-1 * var(--pad,0px));border-top:1px solid var(--ig-line)} .ig .ig-paba{height:48px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--ig-text-2);box-shadow:inset 0 1px 0 transparent} .ig .ig-paba[aria-pressed="true"]{color:var(--ig-text);box-shadow:inset 0 1px 0 var(--ig-text)} .ig .ig-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-inline:calc(-1 * var(--pad,0px))} .ig.ig-largo .ig-pabas,.ig.ig-largo .ig-grade{margin-inline:0} .ig.ig-largo .ig-grade{gap:4px} .ig .ig-tile{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:1;padding:0;border:0;border-radius:0;background:var(--ig-surface-2);overflow:hidden;color:var(--ink,#fff);text-align:left} .ig .ig-tile:focus-visible{outline:3px solid var(--ig-gold);outline-offset:-3px} .ig .ig-tile.ig-postado .ig-arte::after{content:"";position:absolute;inset:0;background:var(--ig-veil)} .ig .ig-tile.ig-postado .ig-tile-titulo{color:#FFFFFF} .ig .ig-tile.ig-veu .ig-arte::before{content:"";position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(to top,var(--veu),transparent)} .ig .ig-tile-titulo{position:absolute;left:8px;right:8px;bottom:9px;font-family:var(--serif);font-weight:600;font-size:var(--ig-fs-meta);line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:break-word;hyphens:auto} .ig .ig-tile-formato{position:absolute;top:8px;right:8px;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} .ig .ig-tile-ok{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:var(--ig-gold);color:var(--ig-on-gold);display:grid;place-items:center;box-shadow:0 0 0 2px rgba(0,0,0,.35)} .ig .ig-tile-prox{position:absolute;top:8px;left:8px;padding:1px 8px;border-radius:999px;background:rgba(11,11,12,.82);border:1px solid rgba(232,207,142,.55);color:#E8CF8E;font-size:12px;font-weight:600;line-height:1.4} /* Computador: quadros de ~300px pedem título e ícones maiores, e o mouse ganha retorno ao passar por cima. */ .ig.ig-largo .ig-tile{cursor:pointer} .ig.ig-largo .ig-tile-titulo{left:16px;right:16px;bottom:16px;font-size:18px;line-height:1.22} .ig.ig-largo .ig-tile-formato{top:12px;right:12px} .ig.ig-largo .ig-tile-ok,.ig.ig-largo .ig-tile-prox{top:12px;left:12px} .ig.ig-largo .ig-tile .ig-arte{transition:filter .15s} .ig.ig-largo .ig-tile:hover .ig-arte{filter:brightness(1.12)} .ig .ig-vazio{grid-column:1 / -1;padding:32px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ig-text-2)} .ig .ig-vazio p{margin:0} .ig .ig-arte{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,var(--c1),var(--c2))} /* ---------- Ideia aberta ---------- */ .ig .ig-post{padding-bottom:0} .ig .ig-topo{display:flex;align-items:center;gap:4px;min-height:52px;border-bottom:1px solid var(--ig-line)} .ig .ig-icone-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ig-text)} .ig .ig-topo-titulo{font-size:var(--ig-fs-meta);font-weight:600;color:var(--ig-text-2)} .ig .ig-post-cab{display:flex;flex-direction:column;gap:6px} .ig .ig-post-titulo{margin:0;font-family:var(--serif);font-weight:600;font-size:var(--ig-fs-titulo);line-height:1.2;text-wrap:balance;color:var(--ig-text)} .ig .ig-post-titulo:focus{outline:none} .ig .ig-meta{margin:0;font-size:var(--ig-fs-meta);color:var(--ig-text-2)} .ig .ig-meta-ok{color:var(--ig-gold-text);font-weight:600} .ig .ig-abas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--ig-surface-2);box-shadow:inset 0 0 0 1px var(--ig-line)} .ig .ig-aba{min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;border:0;border-radius:9px;background:transparent;color:var(--ig-text-2);font-weight:500} .ig .ig-aba[aria-selected="true"]{background:var(--ig-surface);color:var(--ig-text);box-shadow:inset 0 -2px 0 var(--ig-gold),0 1px 2px rgba(0,0,0,.06)} html[data-tema="black"] .ig .ig-aba[aria-selected="true"]{background:var(--ig-elev)} .ig .ig-painel{display:flex;flex-direction:column;gap:20px} .ig .ig-painel > .ig-link{align-self:flex-start} .ig .ig-nota{margin:0;color:var(--ig-text-2)} /* Interruptor */ .ig .ig-linha-switch{display:flex;align-items:center;gap:12px;min-height:48px} .ig .ig-switch-rot{flex:1;min-width:0;cursor:pointer} .ig .ig-switch{flex:none;width:58px;height:44px;display:grid;place-items:center;padding:0;border:0;background:transparent;border-radius:999px} .ig .ig-switch-trilho{position:relative;display:block;width:46px;height:28px;border-radius:14px;background:var(--ig-elev);box-shadow:inset 0 0 0 1px var(--ig-line-strong);transition:background .2s} .ig .ig-switch-bola{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--ig-text-2);transition:transform .2s,background .2s} .ig .ig-switch[aria-checked="true"] .ig-switch-trilho{background:var(--ig-gold)} .ig .ig-switch[aria-checked="true"] .ig-switch-bola{transform:translateX(18px);background:var(--ig-on-gold)} /* Cartão de post (feed) */ .ig .ig-previa{display:flex;flex-direction:column;gap:16px} .ig .ig-palco{position:relative} .ig .ig-card{background:var(--ig-surface);border:1px solid var(--ig-line);border-radius:14px;overflow:hidden} .ig .ig-card-cab{display:flex;align-items:center;gap:10px;min-height:52px;padding-inline:14px} .ig .ig-av-mini{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ig-grad-avatar);display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:var(--ig-fs-meta);color:var(--ig-on-gold);box-shadow:0 0 0 2px var(--ig-surface),0 0 0 3px var(--ig-gold)} .ig .ig-card-nome{font-size:var(--ig-fs-meta);font-weight:600} .ig .ig-card-mais{margin-left:auto;display:flex;color:var(--ig-text)} /* No feed o Reels aparece em 4:5, de borda a borda do cartão. */ .ig .ig-reels{position:relative;width:100%;max-width:100%;aspect-ratio:4 / 5;overflow:hidden;color:var(--ink)} .ig .ig-reels-tipo{position:absolute;top:12px;right:12px;display:flex;color:#FFFFFF;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))} .ig .ig-reels-faixa{position:absolute;left:12px;right:12px;top:16%;display:flex;justify-content:center} .ig .ig-reels-gancho{display:inline-block;max-width:100%;padding:8px 12px;border-radius:8px;background:rgba(11,11,12,.82);color:#F5F1E8;font-weight:600;line-height:1.3;text-align:center;text-wrap:balance} .ig .ig-quadro{position:relative;width:100%;max-width:100%;aspect-ratio:1;overflow:hidden;color:var(--ink);container-type:inline-size} .ig .ig-est-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:28px 28px 32px;padding:8cqw 8cqw 9cqw} .ig .ig-est-headline{margin:0;max-width:92%;font-family:var(--serif);font-weight:600;font-size:26px;font-size:7.6cqw;line-height:1.12;text-wrap:balance} .ig .ig-est-apoio{margin:0;max-width:88%;font-size:15px;font-size:4.2cqw;line-height:1.4} .ig .ig-instrucao{font-style:italic} .ig .ig-slide-txt{position:absolute;inset:0;display:flex;align-items:center;padding:40px 52px;padding-block:10cqw;padding-inline:max(52px,12cqw)} .ig .ig-slide-txt p{margin:0;font-family:var(--serif);font-weight:600;font-size:22px;font-size:6.6cqw;line-height:1.18;text-wrap:balance} .ig .ig-slide-txt.ig-capa p{font-size:26px;font-size:7.8cqw} .ig .ig-seta{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#F5F1E8} .ig .ig-seta-ant{left:4px} .ig .ig-seta-prox{right:4px} .ig .ig-seta-bola{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(11,11,12,.66);border:1px solid rgba(232,207,142,.3)} .ig .ig-seta:disabled{opacity:0;pointer-events:none} .ig .ig-acoes{position:relative;display:flex;align-items:center;gap:16px;padding:12px 14px 8px;color:var(--ig-text)} .ig .ig-acoes-fim{margin-left:auto;display:flex} .ig .ig-pontos{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:5px} .ig .ig-ponto{width:6px;height:6px;border-radius:50%;background:var(--ig-line-strong)} .ig .ig-ponto.ig-ativo{background:var(--ig-gold)} .ig .ig-legenda-area{padding:0 14px 12px} .ig .ig-palco.ig-com-numeros .ig-legenda-area{padding-left:36px} .ig .ig-legenda{display:block;width:100%;padding:0;border:0;background:none;color:var(--ig-text);text-align:left;line-height:1.45;font-size:15px} .ig button.ig-legenda{min-height:44px;padding-block:4px} .ig .ig-legenda-curta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden} /* A legenda gerada: um parágrafo por bloco, e a assinatura mantém as quebras de linha (nome · CRO / especialidade / consultório). */ .ig .ig-legenda-p{display:block;white-space:pre-line} .ig .ig-legenda-p + .ig-legenda-p{margin-top:1em} .ig .ig-legenda-tags{color:var(--ig-gold-text)} .ig .ig-legenda-nome{font-weight:600} .ig .ig-legenda-mais{display:block;margin-top:2px;color:var(--ig-text-2)} /* Números de "onde vai cada parte": na borda, nunca sobre texto. */ .ig .ig-marcas{position:absolute;inset:0;pointer-events:none} .ig .ig-marcador{position:absolute;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--ig-gold);color:var(--ig-on-gold);font-size:var(--ig-fs-meta);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px var(--ig-surface)} .ig .ig-conector{position:absolute;height:0;border-top:2px dotted var(--ig-gold)} .ig .ig-nums{list-style:none;margin:0;padding:0;display:grid;gap:12px} .ig .ig-nums li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start} .ig .ig-nums .ig-marcador{position:static;box-shadow:none} .ig .ig-nums strong{display:block;font-weight:600;line-height:1.4} .ig .ig-nums .ig-dica{display:block;font-size:var(--ig-fs-meta);color:var(--ig-text-2)} /* Dobras recolhidas */ .ig .ig-dobras{display:flex;flex-direction:column;border-top:1px solid var(--ig-line)} .ig .ig-dobra{border-bottom:1px solid var(--ig-line)} .ig .ig-dobra summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;font-weight:500} .ig .ig-dobra summary::-webkit-details-marker{display:none} .ig .ig-dobra-ico{display:flex;color:var(--ig-gold-text)} .ig .ig-dobra-seta{margin-left:auto;display:flex;color:var(--ig-text-2);transition:transform .2s} .ig .ig-dobra[open] .ig-dobra-seta{transform:rotate(180deg)} .ig .ig-dobra-corpo{margin:0;padding:0 0 16px;color:var(--ig-text-2);white-space:pre-line} /* Teleprompter: um motor, duas telas (aba Gravar e câmera). Sempre escuro no quadro de leitura, em qualquer tema. */ .ig .ig-tp{--tp-h:clamp(220px,40vh,400px);position:relative;height:var(--tp-h);border-radius:14px;background:#0B0B0C;box-shadow:inset 0 0 0 1px rgba(201,162,76,.34);overflow:hidden} .ig .ig-tp-texto{position:absolute;left:0;right:0;top:0;padding:0 22px;text-align:center;color:#F5F1E8;font-weight:500;will-change:transform} .ig .ig-tp-cena{margin:0 0 .8em;line-height:1.35;color:#B9B4AA;overflow-wrap:anywhere;hyphens:auto} .ig .ig-tp-cena.ig-ativa{color:#F5F1E8} .ig .ig-tp-faixa{position:absolute;left:0;right:0;background:rgba(201,162,76,.12);border-block:1px solid rgba(232,207,142,.55);pointer-events:none} /* Controles do teleprompter (tema aware na página; escuros dentro da câmera) */ .ig .ig-tp-ctrl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center} .ig .ig-tp-est{width:100%;margin:0;font-size:13px;color:var(--ig-text-2);text-align:center} .ig .ig-tp-grupo{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:var(--ig-surface-2)} .ig .ig-tp-t{min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--ig-text);font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer} .ig .ig-tp-t[disabled]{opacity:.35;cursor:default} .ig .ig-tp-t.ig-tp-largo{padding:0 14px;border:1px solid var(--ig-line-strong)} .ig .ig-tp-rot{min-width:112px;text-align:center;font-size:14px;font-weight:600;color:var(--ig-text)} .ig .ig-tp-acoes{display:flex;align-items:center;gap:14px} .ig .ig-tp-play{width:52px;height:52px;border:0;border-radius:50%;background:var(--ig-grad-gold);color:var(--ig-on-gold);display:grid;place-items:center;flex:none;cursor:pointer} .ig .ig-cam-entrada{display:flex;flex-direction:column;gap:8px} .ig .ig-cam-entrada .ig-btn{width:100%} /* ---------- Câmera: tela cheia, texto por cima do vídeo ---------- */ .ig .ig-cam{position:fixed;inset:0;z-index:225;display:flex;flex-direction:column;background:#000;color:#F5F1E8;font-family:var(--sans)} .ig .ig-cam[hidden]{display:none} .ig .ig-cam-topo{flex:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;background:#0B0B0C;border-bottom:1px solid rgba(201,162,76,.2)} .ig .ig-cam-status{flex:1;min-width:0;text-align:center;font-size:14px;font-weight:600;color:#F5F1E8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ig .ig-cam-status.ig-rec{color:#FF8A80} .ig .ig-cam-b{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#F5F1E8;cursor:pointer} .ig .ig-cam-cena{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000} .ig .ig-cam-palco{position:relative;height:100%;max-width:100%;aspect-ratio:9/16;overflow:hidden;background:#101010} /* contain, nunca cover: cortar a imagem para caber no quadro era o "zoom" que a doutora via — e o arquivo gravado nem saía igual. O quadro já toma o formato da câmera (camFormato); contain é a rede de segurança. */ .ig .ig-cam-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .ig .ig-cam-video.ig-espelho{transform:scaleX(-1)} /* A tela (canvas) é o que se vê e o que se grava; o