/* CÓPIA do motor (presenca-social/motor/css/estudio.css). Não editar aqui: editar no motor e correr node presenca-social/sincronizar.mjs */
/* Estúdio de conteúdo (Presença Social): a estratégia, o plano da semana, as ideias, o editor de slides,
   os Reels e o kit da marca.
   Fonte única em presenca-social/motor; cada cliente recebe uma cópia pelo sincronizar.mjs.
   Usa tokens --ec-*: por defeito saem dos tokens do site onde o estúdio vive (--azul, --tinta...),
   e cada cliente pode redefini-los num tema.css carregado a seguir. Classes com o prefixo ec-. */

:root {
  --ec-acento: var(--azul, #2c5fc2);
  --ec-acento-forte: var(--azul-forte, #1d4796);
  --ec-escuro: var(--azul-noite, #13295a);
  --ec-acento-suave: var(--azul-claro, #eaf1fb);
  --ec-fundo: var(--azul-nevoa, #f5f8fd);
  --ec-alerta: var(--rosa, #e8779a);
  --ec-tinta: var(--tinta, #1b2536);
  --ec-texto: var(--texto, #3d4a5e);
  --ec-cinza: var(--cinza, #6b778a);
  --ec-linha: var(--linha, #dfe6f1);
  --ec-linha-forte: #c9d8f4;
  --ec-superficie: var(--branco, #ffffff);
  --ec-sobre-acento: #ffffff;
  /* O botão cheio e o chip ativo: por defeito o acento. Um tema claro cujo acento de texto seja
     mais escuro do que a cor de marca pode pôr aqui a cor de marca pura. */
  --ec-botao: var(--ec-acento);
  --ec-sobre-botao: var(--ec-sobre-acento);
  --ec-sombra: rgba(19, 41, 90, .16);
  --ec-f-titulo: var(--titulo, Georgia, serif);
  --ec-f-corpo: var(--corpo, system-ui, sans-serif);
  --ec-f-marca: var(--marca, system-ui, sans-serif);
}

.visualmente-escondido { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ec-faixa-ia { background: var(--ec-acento-suave); color: var(--ec-tinta); }
.ec-faixa-ia button { background: rgba(127,127,127,.16); color: var(--ec-tinta); }
.entrada-caixa h1 em { font-style: italic; color: var(--ec-acento); }
.ec-entrar .btn { width: 100%; }
.ec-lado-botao { border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; text-align: left; width: 100%; }
.ec-a-carregar { padding: 40px 20px; text-align: center; color: var(--ec-cinza); }
.ec-contador { background: var(--ec-acento); }
.ec-nota { margin-top: 14px; max-width: 760px; }
.ec-intro { max-width: 760px; margin: -6px 0 18px; color: var(--ec-texto); }
.ec-mt { margin-top: 14px; }
.subtitulo svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }

/* começar */
.ec-comecar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.ec-comecar > .ec-pedir { grid-column: 1 / -1; }
@media (max-width: 899px) {
  .ec-atalho { padding: 14px; }
  .ec-atalho strong { font-size: 18px; line-height: 1.2; }
  .ec-atalho span:last-child { font-size: 13.5px; }
}
@media (min-width: 900px) {
  .ec-comecar > .ec-pedir { grid-column: auto; } .ec-comecar { grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; } .ec-comecar-2 { grid-template-columns: repeat(3, 1fr); } }
.ec-pedir { display: grid; gap: 10px; align-content: start; }
.ec-pedir .btn { justify-self: start; }
.ec-pedir-so { margin-bottom: 22px; }
.ec-pedir-linha { display: grid; gap: 10px; }
@media (min-width: 700px) { .ec-pedir-linha { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* criar: o que se pode fazer, e continuar o último */
.ec-escolher { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (min-width: 900px) { .ec-escolher { gap: 14px; } }
.ec-continuar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ec-texto); transition: border-color .2s; }
.ec-continuar:hover { border-color: var(--ec-acento); }
.ec-continuar > svg { width: 20px; height: 20px; color: var(--ec-acento); flex: none; }
.ec-continuar span { display: grid; gap: 2px; min-width: 0; }
.ec-continuar strong { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 19px; color: var(--ec-tinta); }
.ec-continuar small { font-size: 13px; color: var(--ec-cinza); }
.ec-atalho {
  display: grid; align-content: start; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--ec-texto);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ec-atalho:hover { border-color: var(--ec-acento); box-shadow: 0 10px 26px var(--ec-sombra); transform: translateY(-2px); }
.ec-atalho strong { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 21px; color: var(--ec-tinta); }
.ec-atalho span:last-child { font-size: 14.5px; color: var(--ec-cinza); }
.ec-atalho-icone { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ec-acento-suave); color: var(--ec-acento); margin-bottom: 4px; }
.ec-atalho-icone svg { width: 22px; height: 22px; }

.ec-gerando { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--ec-tinta); font-weight: 600; }
.ec-pontos { display: inline-flex; gap: 5px; }
.ec-pontos i { width: 8px; height: 8px; border-radius: 50%; background: var(--ec-acento); animation: ec-pulsa 1s ease-in-out infinite; }
.ec-pontos i:nth-child(2) { animation-delay: .15s; }
.ec-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ec-pulsa { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: none; } }
.ec-resultado { margin-bottom: 26px; }
.ec-resultado .painel-cab h2 { font-size: 24px; }

/* chips e segmentos */
.ec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-temas { margin-bottom: 14px; }
.ec-chip {
  display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--ec-linha);
  background: var(--ec-superficie); font-size: 14px; font-weight: 600; color: var(--ec-texto); cursor: pointer; line-height: 1.2;
}
span.ec-chip { cursor: default; font-weight: 500; }
button.ec-chip:hover { border-color: var(--ec-acento); }
.ec-chip.ativo { background: var(--ec-botao); border-color: var(--ec-botao); color: var(--ec-sobre-botao); }
.ec-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ec-superficie); box-shadow: inset 0 0 0 1.5px var(--ec-linha); }
.ec-seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ec-texto); cursor: pointer; }
.ec-seg button.ativo { background: var(--ec-acento-suave); color: var(--ec-acento-forte); }

/* os cartões da lista (as ideias e o que se criou do zero) */
.ec-ideias { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ec-ideias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .ec-ideias { grid-template-columns: repeat(3, 1fr); } }
.ec-ideia {
  display: grid; grid-template-columns: 120px 1fr; gap: 14px; background: var(--ec-superficie); border: 1px solid var(--ec-linha);
  border-radius: 18px; padding: 12px; min-width: 0;
}
.ec-ideia-previa {
  display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; border: 1px solid var(--ec-linha);
  background: var(--ec-fundo); padding: 0; cursor: pointer; align-self: start;
}
.ec-ideia-previa.story { aspect-ratio: 9 / 16; }
.ec-ideia-previa { position: relative; }
.ec-ideia-previa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ec-previa-reel { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(7, 13, 24, .62); color: #fff; }
.ec-previa-reel svg { width: 15px; height: 15px; }
.ec-ideia-previa canvas, .ec-mini canvas, .ec-publicar-mini canvas { display: block; width: 100%; height: 100%; }
.ec-ideia-corpo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ec-ideia-corpo h3 { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--ec-tinta); }
.ec-ideia-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--ec-cinza); font-weight: 600; }
.ec-tag { font-family: var(--ec-f-marca); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--ec-acento); }
.ec-ideia-porque { font-size: 14px; color: var(--ec-texto); line-height: 1.45; }
.ec-ideia-corpo .btn { justify-self: start; margin-top: 4px; }
.ec-linha-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* editor */
.ec-cabeca-editor { align-items: center; }
.ec-titulo-caixa { min-width: 0; flex: 1 1 360px; }
.ec-titulo input {
  width: 100%; border: 0; border-bottom: 1.5px dashed transparent; background: none; padding: 0 0 2px;
  font-family: var(--ec-f-titulo); font-weight: 400; font-size: clamp(24px, 3.4vw, 32px); color: var(--ec-tinta); line-height: 1.15;
}
.ec-titulo input:hover { border-bottom-color: var(--ec-linha); }
.ec-titulo input:focus { outline: none; border-bottom-color: var(--ec-acento); }

.ec-editor { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 1024px) { .ec-editor { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }
@media (min-width: 1280px) { .ec-editor { grid-template-columns: minmax(0, 1fr) 420px; } }
.ec-palco { min-width: 0; display: grid; justify-items: center; gap: 10px; }
@media (min-width: 1024px) { .ec-palco { position: sticky; top: 16px; } }
.ec-previa-caixa {
  width: 100%; max-width: 440px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--ec-superficie);
  box-shadow: 0 24px 60px var(--ec-sombra), 0 0 0 1px var(--ec-linha);
}
.ec-previa-caixa.story { max-width: 330px; aspect-ratio: 9 / 16; }
@media (min-width: 1024px) { .ec-previa-caixa { max-width: min(460px, calc((100vh - 250px) * .8)); } .ec-previa-caixa.story { max-width: min(340px, calc((100vh - 250px) * .5625)); } }
#ec-previa { display: block; width: 100%; height: 100%; }
/* desde 3 out: com o dedo, a fotografia só se arrasta com o "Mover a fotografia" ligado, para a página deslizar */
#ec-previa.ec-arrastavel { cursor: grab; }
#ec-previa.ec-enquadrar { touch-action: none; }
#ec-previa.a-arrastar { cursor: grabbing; }
.ec-previa-caixa.a-enquadrar { box-shadow: 0 24px 60px var(--ec-sombra), 0 0 0 3px var(--ec-acento); }
/* o botão só aparece em ecrãs de toque; com o rato arrasta-se direto */
.ec-palco .ec-enquadrar-btn { display: none; }
@media (hover: none), (pointer: coarse) {
  .ec-palco .ec-enquadrar-btn { display: inline-flex; }
  .ec-so-rato { display: none; }
}
.ec-estado { font-size: 13px; color: var(--ec-cinza); text-align: center; }

.ec-faixa { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px 2px 8px; scrollbar-width: thin; }
.ec-mini {
  flex: none; width: 64px; aspect-ratio: 4 / 5; position: relative; padding: 0; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; background: var(--ec-superficie); cursor: pointer; box-shadow: 0 0 0 1px var(--ec-linha);
}
.ec-mini.story { width: 48px; aspect-ratio: 9 / 16; }
.ec-mini.ativo { border-color: var(--ec-acento); box-shadow: 0 4px 12px var(--ec-sombra); }
.ec-mini > span { position: absolute; left: 3px; bottom: 3px; min-width: 17px; height: 17px; border-radius: 9px; background: rgba(19,41,90,.78); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.ec-mais { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--ec-acento-forte); background: var(--ec-fundo); border: 1.5px dashed var(--ec-linha-forte); box-shadow: none; }
.ec-mais svg { width: 20px; height: 20px; }
.ec-mais > span { position: static; background: none; color: var(--ec-acento-forte); font-size: 11px; }

.ec-painel { background: var(--ec-superficie); border: 1px solid var(--ec-linha); border-radius: 18px; padding: 4px 16px; min-width: 0; }
.ec-sec { padding: 14px 0; border-bottom: 1px solid var(--ec-linha); display: grid; gap: 10px; }
.ec-sec:last-child { border-bottom: 0; }
.ec-sec .subtitulo { margin-bottom: 0; }
.ec-sec .campo { gap: 5px; }
.ec-sec textarea { resize: vertical; line-height: 1.45; }
.ec-sec-slide { grid-template-columns: 1fr auto; align-items: center; }
.ec-botoes { display: flex; gap: 4px; }
.ec-botoes button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ec-linha); background: var(--ec-superficie); display: grid; place-items: center; cursor: pointer; color: var(--ec-acento-forte); }
.ec-botoes button:hover:not(:disabled) { border-color: var(--ec-acento); background: var(--ec-fundo); }
.ec-botoes button:disabled { opacity: .35; cursor: default; }
.ec-botoes svg { width: 18px; height: 18px; }
/* os botões do slide com texto, e o apagar à vista por baixo das miniaturas (desde 30 set) */
.ec-sec-slide:has(.ec-botoes-texto) { grid-template-columns: 1fr; }
.ec-botoes-texto { flex-wrap: wrap; gap: 6px; }
.ec-botoes-texto button { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ec-tinta); }
.ec-botoes-texto button svg { color: var(--ec-acento-forte); }
.ec-botoes-texto .ec-botao-apagar:not(:disabled) { color: var(--ec-vermelho); border-color: color-mix(in srgb, var(--ec-vermelho) 35%, transparent); }
.ec-botoes-texto .ec-botao-apagar:not(:disabled) svg { color: var(--ec-vermelho); }
.ec-apagar-slide { justify-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ec-vermelho); text-decoration: underline; text-underline-offset: 2px; }
.ec-apagar-slide svg { width: 15px; height: 15px; }
.ec-alt { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: -4px; }
.ec-alt svg { width: 16px; height: 16px; }

.ec-cores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ec-cor { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; }
.ec-cor-amostra {
  width: 100%; max-width: 50px; aspect-ratio: 1; border-radius: 12px; background: var(--f); display: grid; place-items: center; position: relative;
  box-shadow: inset 0 0 0 1px var(--ec-linha-forte);
}
.ec-cor-amostra b { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 18px; color: var(--t); }
.ec-cor-amostra i { position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--d); }
.ec-cor.ativo .ec-cor-amostra { box-shadow: 0 0 0 2px var(--ec-superficie), 0 0 0 4px var(--ec-acento); }
.ec-cor small { font-size: 11.5px; color: var(--ec-cinza); font-weight: 600; }

.ec-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.ec-foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--ec-fundo); cursor: pointer; display: block; }
.ec-foto img { width: 100%; height: 100%; object-fit: cover; }
.ec-foto.ativo { border-color: var(--ec-acento); }
.ec-foto > span { position: absolute; left: 3px; top: 3px; background: var(--ec-alerta); color: #fff; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 5px; }
.ec-foto-nova { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--ec-acento-forte); border: 1.5px dashed var(--ec-linha-forte); font-size: 11.5px; font-weight: 700; }
.ec-foto-nova svg { width: 20px; height: 20px; }
.ec-foto-nova > span { position: static; background: none; color: var(--ec-acento-forte); font-size: 11.5px; padding: 0; }
.ec-sec > .link { justify-self: start; }
.ec-formas { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.ec-forma { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 12px; border: 1.5px solid var(--ec-linha); background: var(--ec-superficie); font-size: 11.5px; font-weight: 600; color: var(--ec-texto); text-align: center; line-height: 1.2; }
button.ec-forma { cursor: pointer; }
button.ec-forma:hover { border-color: var(--ec-acento); }
.ec-forma svg { width: 24px; height: 24px; color: var(--ec-acento); }
.ec-forma.ativo { background: var(--ec-acento-suave); border-color: var(--ec-acento); color: var(--ec-acento-forte); }
.ec-formas-kit { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ec-formas-kit .ec-forma { font-size: 13px; padding: 12px 6px 10px; }
.ec-intervalo input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--ec-acento); }

.ec-sugestoes { display: grid; gap: 6px; }
.ec-sugestoes button { display: grid; gap: 1px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--ec-linha); background: var(--ec-fundo); cursor: pointer; }
.ec-sugestoes button:hover { border-color: var(--ec-acento); }
.ec-sugestoes small { font-family: var(--ec-f-marca); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ec-acento); }
.ec-sugestoes span { font-family: var(--ec-f-titulo); font-size: 17px; color: var(--ec-tinta); line-height: 1.25; }

.ec-legenda { max-width: 100%; }
.ec-legenda textarea { resize: vertical; line-height: 1.5; }
.ec-legenda .painel-cab { align-items: center; }
.ec-legenda .painel-cab .ec-linha-botoes { margin-top: 0; align-items: center; }
.ec-legenda > .ec-ia { margin: 10px 0 14px; }

/* a IA nos textos: o botão de cada texto, as versões e o ajuste do post todo */
.ec-campo-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.ec-ia-botao {
  display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer; flex: none;
  padding: 4px 8px; margin-right: -6px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--ec-acento-forte);
}
.ec-ia-botao svg { width: 15px; height: 15px; }
.ec-ia-botao:hover, .ec-ia-botao.ativo { background: var(--ec-acento-suave); }
.ec-ia { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--ec-fundo); border: 1px solid var(--ec-linha); }
.ec-ia-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ec-ia-fechar { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 0; background: var(--ec-superficie); cursor: pointer; font-size: 19px; line-height: 1; color: var(--ec-tinta); }
.ec-ia-fechar:hover { background: var(--ec-acento-suave); }
.ec-ia .ec-chip:disabled, .ec-janela .ec-chip:disabled { opacity: .5; cursor: default; }
.ec-ia-pedido { display: flex; gap: 6px; }
.ec-ia-pedido input {
  flex: 1; min-width: 0; border: 1.5px solid var(--ec-linha-forte); border-radius: 12px; padding: 8px 12px;
  background: var(--ec-superficie); font-size: 14.5px; color: var(--ec-tinta);
}
.ec-ia-pedido input:focus { outline: none; border-color: var(--ec-acento); }
.ec-ia-pedido input::placeholder { color: var(--ec-cinza); opacity: .8; }
.ec-ia-pedido .btn { flex: none; }
.ec-ia-estado { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--ec-tinta); }
.ec-ia-titulo { font-size: 12.5px; font-weight: 700; color: var(--ec-cinza); }
.ec-ia-versoes { display: grid; gap: 6px; }
.ec-ia-versao {
  text-align: left; padding: 9px 12px; border-radius: 12px; border: 1.5px solid var(--ec-linha); background: var(--ec-superficie);
  cursor: pointer; font-size: 14.5px; line-height: 1.4; color: var(--ec-tinta); white-space: pre-line;
}
.ec-ia-versao:hover { border-color: var(--ec-acento); }
.ec-ia-versao.ativo { border-color: var(--ec-acento); background: var(--ec-acento-suave); }
.ec-ia-versao em { font-style: italic; color: var(--ec-acento-forte); }
.ec-legenda .ec-ia-versao { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ec-ia-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ec-ia-links .link { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; padding: 2px 0; }
.ec-ia-links svg { width: 15px; height: 15px; }
.ec-posicao .ec-seg { align-self: flex-start; flex-wrap: wrap; }
.ec-desfazer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: var(--ec-tinta); background: var(--ec-acento-suave); padding: 6px 12px; border-radius: 999px; }
.ec-desfazer svg { width: 14px; height: 14px; color: var(--ec-acento-forte); }
.ec-desfazer .link { font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
/* o carrossel escrito pela IA (desde 16 out): o aviso num carrossel novo e as duas partes da janela */
.ec-carrossel-ia { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border-radius: 14px; background: var(--ec-acento-suave); border: 1px solid var(--ec-linha); max-width: 520px; }
.ec-carrossel-ia p { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ec-tinta); line-height: 1.45; }
.ec-carrossel-ia p svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ec-acento-forte); }
.ec-ia-modos { margin-bottom: 14px; }
.ec-ajustar { display: grid; gap: 12px; }
.ec-voltar { display: inline-flex; align-items: center; gap: 4px; margin: -6px 0 10px; padding: 0; }
.ec-voltar svg { width: 16px; height: 16px; }

/* janelas */
.ec-janela .gaveta-cab h2 em { font-style: italic; color: var(--ec-acento); }
.ec-publicar-grelha { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ec-publicar-mini { flex: none; width: 104px; display: grid; gap: 4px; justify-items: center; }
.ec-publicar-mini canvas { aspect-ratio: 4 / 5; border-radius: 8px; box-shadow: 0 0 0 1px var(--ec-linha); }
.ec-publicar-mini.story canvas { aspect-ratio: 9 / 16; }
.ec-publicar-mini .link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.ec-publicar-mini .link svg { width: 15px; height: 15px; }
.ec-foto-carregada { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; }
.ec-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ec-opcoes-col { grid-template-columns: 1fr; }
.ec-opcao { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--ec-linha); background: var(--ec-superficie); cursor: pointer; }
.ec-opcao:hover { border-color: var(--ec-acento); background: var(--ec-fundo); }
.ec-opcao strong { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 20px; color: var(--ec-tinta); }
.ec-opcao span { font-size: 14px; color: var(--ec-cinza); }

/* a estratégia */
.ec-estr-objetivo { font-family: var(--ec-f-titulo); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; color: var(--ec-tinta); max-width: 880px; margin: -4px 0 20px; }
.ec-estr-objetivo em { font-style: italic; color: var(--ec-acento); }
.ec-estr-grelha { display: grid; gap: 14px; }
@media (min-width: 900px) { .ec-estr-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .ec-estr-largo { grid-column: 1 / -1; } }
.ec-estr { display: grid; gap: 10px; }
.ec-estr .subtitulo { margin-bottom: 0; }
.ec-estr-texto { font-size: 15px; line-height: 1.5; color: var(--ec-texto); }
.ec-estr-mistura { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-estr-mistura li { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 10px; padding: 12px 16px; border-radius: 16px; background: var(--ec-acento-suave); }
.ec-estr-mistura strong { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 34px; line-height: 1; color: var(--ec-tinta); }
.ec-estr-mistura li > span:last-child { grid-column: 2; font-weight: 600; font-size: 14px; color: var(--ec-acento-forte); }
.ec-estr-icone { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--ec-acento); }
.ec-estr-icone svg { width: 22px; height: 22px; display: block; }

/* a minha marca */
.ec-kit { margin-bottom: 14px; }
.ec-kit .nota-demo { margin: -4px 0 12px; }
.ec-cores-kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ec-cor-kit { display: grid; gap: 2px; font-size: 13.5px; }
.ec-cor-kit span { height: 64px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ec-linha-forte); margin-bottom: 6px; }
.ec-cor-kit strong { color: var(--ec-tinta); }
.ec-cor-kit code { font-size: 12.5px; color: var(--ec-cinza); }
.ec-cor-kit small { font-size: 12.5px; color: var(--ec-cinza); line-height: 1.35; }
.ec-paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ec-paleta { border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 1px var(--ec-linha-forte); }
.ec-paleta-rotulo { font-family: var(--ec-f-marca); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.ec-paleta-titulo { font-family: var(--ec-f-titulo); font-size: 24px; line-height: 1.15; margin: 8px 0 6px; }
.ec-paleta svg { width: 90px; height: 8px; display: block; }
.ec-letras { display: grid; gap: 14px; }
.ec-letra { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--ec-linha); font-size: 14px; }
.ec-letra:last-child { border-bottom: 0; padding-bottom: 0; }
.ec-letra-amostra { color: var(--ec-tinta); line-height: 1.15; }
.ec-letra-titulo .ec-letra-amostra { font-family: var(--ec-f-titulo); font-size: clamp(28px, 4vw, 40px); }
.ec-letra-titulo em { color: var(--ec-acento); }
.ec-letra-marca .ec-letra-amostra { font-family: var(--ec-f-marca); font-weight: var(--ec-marca-peso, 300); font-size: clamp(22px, 3vw, 30px); letter-spacing: .18em; color: var(--ec-acento-forte); }
.ec-letra-corpo .ec-letra-amostra { font-family: var(--ec-f-corpo); font-size: 22px; }
.ec-elementos { display: grid; gap: 10px; }
.ec-elementos li { display: grid; gap: 2px; font-size: 14.5px; }
.ec-elementos strong { color: var(--ec-tinta); }
.ec-modelos-kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ec-modelo-kit { display: grid; gap: 4px; align-content: start; font-size: 13px; }
.ec-modelo-kit .ec-ideia-previa { cursor: default; margin-bottom: 4px; }
.ec-modelo-kit strong { color: var(--ec-tinta); font-size: 14.5px; }
.ec-modelo-kit small { color: var(--ec-cinza); line-height: 1.35; }
.ec-voz { display: grid; gap: 18px; margin-bottom: 12px; }

/* a Presença Social fechada, para quem tem só a Presença Local (kit: servicoSocial, desde 19 out) */
.sobre svg { width: 13px; height: 13px; vertical-align: -1px; margin-right: 4px; }
.ec-social-amostras { margin-bottom: 14px; }
.ec-social-grelha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.ec-social-grelha .ec-ideia-previa { cursor: default; }
.ec-social-promessa { margin-top: 14px; max-width: 880px; font-family: var(--ec-f-titulo); font-size: clamp(18px, 2vw, 22px); line-height: 1.35; color: var(--ec-tinta); border-left: 3px solid var(--ec-acento); }
.ec-social-acoes { margin-top: 16px; }

/* os pedidos de avaliação pelo botão do WhatsApp (kit: avaliacoes.canal "whatsapp-link", desde 19 out) */
.ec-av-pedidos { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ec-linha); display: grid; gap: 8px; }
.ec-av-pedidos ul { display: grid; gap: 6px; }
.ec-av-pedidos li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: 14px; }
.ec-av-pedidos li > span:first-child { display: grid; min-width: 0; }
.ec-av-pedidos li strong { color: var(--ec-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-av-pedidos li small { color: var(--ec-cinza); font-size: 12.5px; }
.ec-av-pedido-estado { color: var(--ec-cinza); font-size: 13px; }
.ec-av-pedidos .ec-av-tirar { position: static; width: 28px; height: 28px; font-size: 18px; }
@media (min-width: 700px) { .ec-av-pedir-link .ec-av-pedir-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ec-av-pedir-link .ec-av-pedir-linha .btn { grid-column: 1 / -1; justify-self: start; } }

/* as posições no Google Maps, pelo Local Falcon (kit: posicoes, desde 19 out) */
.ec-pos-scans { margin: 0 0 14px; }
.ec-pos-topo { display: grid; gap: 14px; }
@media (min-width: 1000px) { .ec-pos-topo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.ec-pos-lado { display: grid; gap: 14px; }
.ec-pos-mapa-caixa { display: grid; gap: 12px; }
.ec-pos-mapa { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 620px; border-radius: 12px; overflow: hidden; background: var(--ec-fundo); display: grid; place-items: center; }
.ec-pos-mapa.com-mapa { display: block; z-index: 0; }
.ec-pos-grelha { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(100%, 460px); padding: 12px; }
.ec-pos-grelha .ec-pos-ponto { width: auto; height: auto; aspect-ratio: 1 / 1; }
.ec-pos-ponto { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 13px/1 var(--ec-f-corpo); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); border: 2px solid rgba(255, 255, 255, .9); }
.ec-pos-ponto.top { background: #1E8E4E; }
.ec-pos-ponto.meio { background: #E09B12; }
.ec-pos-ponto.baixo { background: #D9481F; }
.ec-pos-ponto.fora { background: #8A8C88; font-size: 10.5px; }
.ec-pos-aqui { display: block; width: 44px; height: 44px; border-radius: 50%; background: rgba(18, 18, 18, .1); border: 2px dashed rgba(18, 18, 18, .45); }
.ec-pos-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ec-cinza); }
.ec-pos-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ec-pos-legenda i { width: 12px; height: 12px; border-radius: 50%; }
.ec-pos-legenda i.top { background: #1E8E4E; } .ec-pos-legenda i.meio { background: #E09B12; } .ec-pos-legenda i.baixo { background: #D9481F; } .ec-pos-legenda i.fora { background: #8A8C88; }
.ec-pos-mapa .leaflet-control-attribution { font-size: 10px; }
.ec-pos-mapa .leaflet-tile-pane { filter: grayscale(1) contrast(.88) brightness(1.06); }
@media (min-width: 900px) { .ec-voz { grid-template-columns: repeat(3, 1fr); } }
.ec-lista { display: grid; gap: 6px; font-size: 14.5px; }
.ec-lista li { padding-left: 18px; position: relative; }
.ec-lista li::before { content: ""; position: absolute; left: 0; top: .65em; width: 9px; height: 2px; border-radius: 2px; background: var(--ec-acento); }
.ec-lista-nao li::before { background: var(--ec-alerta); }
.ec-convite { font-family: var(--ec-f-titulo); font-size: 19px; color: var(--ec-tinta); }
.ec-fotos-kit { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ec-fotos-kit .ec-foto { cursor: default; overflow: visible; }
.ec-fotos-kit .ec-foto img { border-radius: 8px; }
/* desde 12 out: o X para tirar uma fotografia em "A minha marca" */
.ec-foto-x { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ec-superficie, #fff); background: var(--ec-tinta); color: var(--ec-superficie, #fff); font-size: 17px; line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.ec-foto-x:hover, .ec-foto-x:focus-visible { background: var(--ec-vermelho, #c0392b); }
.ec-fotos-kit + .link { margin-top: 10px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .ec-pontos i { animation: none; opacity: .7; } .ec-atalho:hover { transform: none; } }

/* descarregar e os selos */
.ec-sec-descarregar { display: grid; gap: 10px; justify-items: start; }
.ec-sec-descarregar .subtitulo { margin-bottom: 0; }
.ec-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--ec-acento-suave); color: var(--ec-acento-forte); }
.ec-selo svg { width: 12px; height: 12px; }
.ec-selo-feito { background: rgba(31, 138, 91, .14); color: var(--ec-verde, #1f8a5b); }
.ec-selo-texto { color: var(--ec-acento-forte); }
.ec-reel-pronto-janela { display: grid; gap: 16px; }
@media (min-width: 620px) { .ec-reel-pronto-janela { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.ec-reel-pronto-janela video { width: 100%; max-width: 240px; aspect-ratio: 9 / 16; border-radius: 14px; background: #0d0d0f; object-fit: cover; justify-self: center; }
.ec-reel-pronto-corpo { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.ec-reel-pronto-corpo h3 { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--ec-tinta); }
.ec-reel-plano { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--ec-texto); margin: -2px 0 10px; }
.ec-reel-plano svg { width: 16px; height: 16px; color: var(--ec-verde, #1f8a5b); }
.ec-reel-plano .link { font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
/* o que gravar ou fotografar para um Reel que vem de uma ideia (desde 11 out) */
@media (hover: none) { .ec-reel-setas { display: none; } }
.ec-reel-nota { transition: box-shadow .4s ease, background-color .4s ease; }
.ec-reel-nota.ec-reel-nota-movida { box-shadow: 0 0 0 2px var(--ec-acento); background-color: var(--ec-fundo); }
.ec-reel-leg-lista { display: grid; gap: 8px; margin: 10px 0; }
.ec-reel-leg-ver { margin: 10px 0; }
.ec-reel-leg-ver > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ec-acento-forte, var(--ec-tinta)); padding: 6px 0; }
.ec-reel-leg-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.ec-reel-leg-item input { min-width: 0; }
@media (max-width: 560px) { .ec-reel-leg-item { grid-template-columns: 1fr auto; } .ec-reel-leg-item .ec-reel-num { grid-column: 1 / -1; } }
.ec-reel-erro { color: var(--ec-vermelho, #b3261e); }
/* as duas versões das legendas da fala (desde 17 out): a frase inteira, ou a palavra dita em destaque; à vista
   também no modo simples, ao contrário do sítio das legendas */
.ec-reel-leg-estilo, .ec-reel-leg-letra { flex-wrap: wrap; margin-top: 8px; }
/* a letra das legendas (desde 17 out): cada botão escrito na sua letra */
.ec-reel-leg-letra button { font-size: 15px; }
.ec-reel-leg-estilo button { display: inline-flex; align-items: center; gap: 7px; }
.ec-reel-leg-cor { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); flex: none; }
/* a edição automática de um vídeo falado (desde 17 out): no topo de "Cortar o vídeo" */
.ec-tl-ia { display: grid; gap: 8px; padding: 12px; margin-bottom: 14px; border-radius: 14px; background: var(--ec-acento-suave); }
.ec-tl-ia-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ec-tl-ia-linha .btn svg { width: 16px; height: 16px; }
.ec-tl-ia .ec-reel-marcar { font-size: 14px; gap: 7px; }
.ec-tl-ia .ec-reel-marcar input { width: 17px; height: 17px; }
.ec-tl-ia-feito { font-weight: 600; color: var(--ec-tinta); }
.ec-tl-ia-lista > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ec-acento-forte, var(--ec-tinta)); padding: 4px 0; }
.ec-tl-ia-lista ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--ec-texto); }
.ec-tl-ia-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ec-tl-ia-lista small { display: block; color: var(--ec-cinza); font-size: 12.5px; }
.ec-tl-ia-lista .link { padding: 0; flex: none; }
/* o modo simples do editor dos Reels (desde 12 out): o que é fino fica em "Todas as opções" */
.ec-reel-modo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.ec-reel-simples .ec-reel-todos, .ec-reel-simples #reel-a-ctl, .ec-reel-simples [data-r-dur],
.ec-reel-simples #reel-capa-tipo, .ec-reel-simples .ec-reel-leg-pos { display: none !important; }
/* desde 13 out a capa fica no modo simples (a miniatura, o momento da barra e o descarregar), porque sem ela o
   Instagram usa o primeiro instante do vídeo, ainda sem o título; só o "Com o título / Só a imagem" fica de fora */
.ec-reel-trocar { font-size: 14.5px; margin: -4px 0 12px; color: var(--ec-tinta); }
.ec-reel-como { font-size: 14.5px; line-height: 1.5; color: var(--ec-tinta); background: var(--ec-fundo); border-left: 3px solid var(--ec-acento); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; max-width: 70ch; }

/* a lista das ideias: a contagem da semana, as abas, os cartões e o que cada um faz */
.ec-conta { display: grid; gap: 8px; margin-bottom: 16px; }
.ec-conta .nota-demo { max-width: 760px; }
.ec-progresso { display: grid; gap: 6px; max-width: 420px; }
.ec-progresso p { font-size: 15px; color: var(--ec-texto); }
.ec-progresso strong { color: var(--ec-tinta); }
.ec-progresso span { display: block; height: 6px; border-radius: 6px; background: var(--ec-linha); overflow: hidden; }
.ec-progresso i { display: block; height: 100%; border-radius: 6px; background: var(--ec-verde, #1f8a5b); }
.ec-pedir-ou { font-size: 14px; color: var(--ec-texto); }
.ec-pedir-ou .link { font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.ec-lista-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 14px; }
.ec-abas button { display: inline-flex; align-items: center; gap: 7px; }
.ec-aba-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; background: var(--ec-linha); color: var(--ec-texto); }
.ec-abas button.ativo .ec-aba-n { background: var(--ec-superficie); color: var(--ec-acento-forte); }
@media (min-width: 1180px) { .ec-ideias.ec-ideias-lista { grid-template-columns: repeat(2, 1fr); } }
.ec-ideia.feita { border-color: rgba(31, 138, 91, .45); }
.ec-ideia.feita .ec-ideia-previa { opacity: .75; }
.ec-item-mais { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 2px; }
.ec-item-mais .link { font-size: 13.5px; color: var(--ec-cinza); text-decoration: underline; text-underline-offset: 2px; }
.ec-item-mais .link:hover { color: var(--ec-acento-forte); }
.ec-estr-nivel { display: grid; gap: 8px; }
.ec-estr-nivel + .ec-estr-nivel { margin-top: 6px; }
.ec-estr-nivel-rotulo { font-size: 14.5px; color: var(--ec-texto); }
.ec-estr-nivel-rotulo strong { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 22px; color: var(--ec-tinta); }
/* as três funções (desde 29 set): o bloco da estratégia e a etiqueta de cada ideia */
.ec-funcoes { display: grid; gap: 16px; }
@media (min-width: 900px) { .ec-funcoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.ec-funcoes li { display: grid; gap: 7px; align-content: start; }
.ec-funcao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ec-funcao-cab strong { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 24px; color: var(--ec-tinta); }
.ec-funcao-cab span { font-weight: 700; font-size: 14px; color: var(--ec-acento-forte); }
.ec-funcao-barra { display: block; height: 6px; border-radius: 6px; background: var(--ec-linha); overflow: hidden; }
.ec-funcao-barra i { display: block; height: 100%; border-radius: 6px; background: var(--ec-acento); }
.ec-funcao-texto { font-size: 13.5px; color: var(--ec-cinza); line-height: 1.45; }
.ec-funcao-nota { font-size: 15px; color: var(--ec-texto); line-height: 1.45; }
.ec-funcao-selo { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ec-texto); box-shadow: inset 0 0 0 1.5px var(--ec-linha-forte); }

/* os primeiros passos (desde 3 out): o guia no topo das Ideias, a linha dos editores e o "Mostrar onde" */
.ec-guia { position: relative; display: grid; gap: 10px; max-width: 880px; margin-bottom: 18px; box-shadow: 0 16px 40px -26px var(--ec-sombra); }
.painel.ec-guia { border: 1.5px solid var(--ec-acento); } /* o estudio-base.css vem depois e põe a linha dos painéis */
.ec-guia .subtitulo { margin: 0; padding-right: 44px; }
.ec-guia h2 { font-family: var(--ec-f-titulo); font-weight: 400; font-size: clamp(22px, 2.6vw, 26px); line-height: 1.15; color: var(--ec-tinta); margin-top: -4px; padding-right: 44px; }
.ec-guia h2 em { font-style: italic; color: var(--ec-acento); }
.ec-guia-fechar { top: 10px; right: 10px; }
.ec-guia-intro { max-width: 680px; font-size: 14.5px; line-height: 1.5; color: var(--ec-texto); }
/* O estúdio no ecrã do telemóvel (desde 19 out): o aviso das Ideias e a janela dos passos. */
.ec-app-aviso { position: relative; display: grid; gap: 12px; max-width: 880px; margin-bottom: 18px; }
.ec-app-aviso-txt { display: flex; gap: 12px; align-items: flex-start; padding-right: 40px; font-size: 14.5px; line-height: 1.5; color: var(--ec-texto); }
.ec-app-aviso-txt svg { flex: none; width: 24px; height: 24px; color: var(--ec-acento); margin-top: 1px; }
.ec-app-aviso-txt strong { color: var(--ec-tinta); }
.ec-app-aviso .gaveta-acoes { margin: 0; }
.ec-app-sub { font-size: 15px; font-weight: 700; color: var(--ec-tinta); margin: 14px 0 8px; }
.ec-app-passos { display: grid; gap: 8px; margin: 0 0 6px; padding-left: 22px; list-style: decimal outside; font-size: 14.5px; line-height: 1.5; color: var(--ec-texto); }
.ec-app-passos li { display: list-item; padding-left: 2px; }
.ec-app-passos li::marker { font-weight: 700; color: var(--ec-acento-forte); }
.ec-app-outro { margin: 10px 0 4px; border-top: 1px solid var(--ec-linha); padding-top: 10px; }
.ec-app-outro summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ec-acento-forte); }
.ec-app-url { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.ec-app-url span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; padding: 8px 12px; border-radius: 10px; background: var(--ec-fundo); font-size: 14px; color: var(--ec-tinta); }
.ec-guia-barra { display: block; max-width: 420px; height: 6px; border-radius: 6px; background: var(--ec-linha); overflow: hidden; }
.ec-guia-barra i { display: block; height: 100%; border-radius: 6px; background: var(--ec-verde, #1f8a5b); transition: width .4s ease; }
.ec-guia-passos { display: grid; gap: 6px; margin-top: 4px; }
.ec-guia-passo { border-radius: 14px; background: var(--ec-fundo); }
.ec-guia-passo.aberto { background: var(--ec-acento-suave); }
.ec-guia-passo-cab {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px;
  background: none; cursor: pointer; text-align: left; font-weight: 600; font-size: 15px; color: var(--ec-tinta);
}
.ec-guia-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
  background: var(--ec-superficie); color: var(--ec-acento-forte); box-shadow: inset 0 0 0 1.5px var(--ec-linha-forte);
}
.ec-guia-n svg { width: 16px; height: 16px; }
.ec-guia-passo.feito .ec-guia-n { background: color-mix(in srgb, var(--ec-verde, #1f8a5b) 18%, transparent); color: var(--ec-verde, #1f8a5b); box-shadow: none; }
.ec-guia-passo.feito:not(.aberto) .ec-guia-passo-cab { color: var(--ec-cinza); }
.ec-guia-corpo { display: grid; gap: 10px; justify-items: start; padding: 0 14px 14px 52px; }
.ec-guia-corpo p { max-width: 620px; font-size: 14.5px; line-height: 1.5; color: var(--ec-texto); }
@media (max-width: 520px) { .ec-guia-corpo { padding-left: 14px; } }
.ec-guia-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px;
  background: var(--ec-acento-suave); color: var(--ec-tinta); font-size: 14px; line-height: 1.45;
}
.ec-guia-linha > span:not(.ec-guia-n) { flex: 1 1 240px; min-width: 0; }
.ec-guia-linha > svg { width: 20px; height: 20px; flex: none; color: var(--ec-verde, #1f8a5b); }
.ec-guia-linha .link { font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.ec-guia-alvo { position: relative; z-index: 3; outline: 3px solid var(--ec-acento) !important; outline-offset: 4px; animation: ec-guia-pulso 1.1s ease-in-out 5; }
.ec-guia-alvo[data-guia-rotulo]::after {
  content: attr(data-guia-rotulo); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; font: 700 12.5px/1.2 var(--ec-f-corpo);
  background: var(--ec-toast, var(--ec-escuro)); color: var(--ec-toast-texto, #fff); box-shadow: 0 8px 22px var(--ec-sombra);
}
@keyframes ec-guia-pulso { 50% { outline-offset: 9px; outline-color: color-mix(in srgb, var(--ec-acento) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ec-guia-alvo { animation: none; } .ec-guia-barra i { transition: none; } }

/* Reels (js/estudio-reel.js): a pré-visualização vertical à esquerda e o formulário à direita */
.ec-reel { display: grid; gap: 18px; }
/* O Reel encolhe para caber no ecrã com o que fica por baixo dele (--reel-extra, medido no js) e com a margem
   (--reel-margem: no telemóvel, a barra de cima e o menu de baixo; no computador, o espaço do sticky). */
.ec-reel-palco {
  display: flex; flex-direction: column; align-items: center; gap: 10px; --reel-margem: 150px;
  --reel-larg: min(100%, 340px, max(200px, calc((100vh - var(--reel-extra, 170px) - var(--reel-margem)) * 9 / 16)));
}
.ec-reel-ecra { width: var(--reel-larg); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #0d0d0f; box-shadow: 0 24px 60px -30px var(--ec-sombra); }
.ec-reel-ecra canvas { display: block; width: 100%; height: 100%; }
/* a barra do Reel arrasta-se (desde 30 set): a faixa é fina, mas a zona de toque tem 28 px de altura */
.ec-reel-progresso { position: relative; width: var(--reel-larg); height: 28px; cursor: pointer; touch-action: none; outline: none; }
.ec-reel-progresso::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--ec-linha); border-radius: 4px; }
.ec-reel-progresso span { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: 0; border-radius: 4px; background: var(--ec-botao, var(--ec-acento)); }
.ec-reel-marcas i { position: absolute; top: 50%; width: 2px; height: 12px; margin: -6px 0 0 -1px; background: var(--ec-linha-forte); border-radius: 1px; }
.ec-reel-pega { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ec-botao, var(--ec-acento)); box-shadow: 0 1px 4px var(--ec-sombra); transition: transform .15s; }
.ec-reel-progresso:hover .ec-reel-pega, .ec-reel-progresso.a-arrastar .ec-reel-pega, .ec-reel-progresso:focus-visible .ec-reel-pega { transform: scale(1.25); }
.ec-reel-progresso:focus-visible::before { box-shadow: 0 0 0 3px var(--ec-acento-suave); }
.ec-reel-secoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(100%, 340px); }
.ec-reel-secoes button { min-height: 30px; padding: 0 11px; border: 1px solid var(--ec-linha); background: var(--ec-fundo); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ec-texto); cursor: pointer; }
.ec-reel-secoes button:hover { border-color: var(--ec-linha-forte); }
.ec-reel-secoes button[aria-pressed="true"] { background: var(--ec-acento); border-color: var(--ec-acento); color: var(--ec-sobre-acento); }
.ec-reel-tempo { font-size: 12.5px; color: var(--ec-cinza); }
.ec-reel-controlos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ec-reel.a-gravar .ec-reel-controlos .btn-suave { opacity: .4; pointer-events: none; }
.ec-reel-saida { width: min(100%, 340px); display: grid; gap: 10px; text-align: center; }
.ec-reel-saida video { width: 100%; border-radius: 14px; background: #0d0d0f; }
.ec-reel-painel { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ec-reel-painel .painel { display: grid; gap: 12px; }
.ec-reel-painel .painel-cab { margin-bottom: 0; }
.ec-reel-painel .subtitulo { margin-bottom: 0; }
.ec-reel-campos { display: grid; gap: 12px; }
/* desde 3 out: o Reescrever de cada texto, o tempo de cada fotografia ou texto, e a animação dos textos a meio */
.ec-reel-ia-campo { display: grid; gap: 8px; justify-items: start; margin-top: 2px; }
.ec-reel-ia-campo[hidden] { display: none; }
.ec-reel-ia-campo .ec-ia-botao { margin: 0 0 0 -8px; }
.ec-reel-ia-painel { justify-self: stretch; }
.ec-reel-ia-painel:empty { display: none; }
.ec-reel-dur { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--ec-fundo); font-size: 14.5px; color: var(--ec-tinta); }
.ec-reel-dur-ctl { display: inline-flex; align-items: center; gap: 6px; }
.ec-reel-dur-ctl button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ec-linha-forte); background: var(--ec-superficie); font: inherit; font-size: 18px; line-height: 1; color: var(--ec-tinta); cursor: pointer; }
.ec-reel-dur-ctl button:hover:not(:disabled) { border-color: var(--ec-acento); }
.ec-reel-dur-ctl button:disabled { opacity: .4; cursor: default; }
/* o tempo de cada texto a meio (desde 17 out): à vista também no modo simples */
.ec-reel-dur-nota { padding: 6px 10px; font-size: 14px; }
.ec-reel-dur-nota .ec-reel-dur-ctl button { width: 30px; height: 30px; font-size: 16px; }
.ec-reel-dur-ctl b { min-width: 3.6em; text-align: center; font-weight: 600; }
.ec-reel-anim { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ec-cinza); }
.ec-reel-anim select { border: 1.5px solid var(--ec-linha-forte); border-radius: 10px; padding: 6px 10px; background: var(--ec-fundo); font: inherit; font-size: 14px; color: var(--ec-tinta); }
/* a posição do texto (9 out): uma grelha de 3 x 3, como o ecrã do Reel em pequeno; a escolhida fica cheia */
/* "Aplicar a todos" ao lado do efeito e da posição (desde 11 out) */
.ec-reel-todos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.ec-reel-todos-btn { font-size: 13.5px; padding: 4px 0; }
.ec-reel-todos-btn:disabled { color: var(--ec-cinza); cursor: default; }
.ec-reel-pos { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ec-cinza); }
.ec-reel-pos-grade { display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 22px); gap: 3px; padding: 4px; border: 1.5px solid var(--ec-linha-forte); border-radius: 10px; background: var(--ec-fundo); }
.ec-reel-pos-grade button { display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: none; cursor: pointer; }
.ec-reel-pos-grade button:hover { background: var(--ec-acento-suave); }
.ec-reel-pos-grade button i { width: 14px; height: 6px; border-radius: 2px; background: var(--ec-linha-forte); }
.ec-reel-pos-grade button[aria-pressed="true"] { background: var(--ec-acento); }
.ec-reel-pos-grade button[aria-pressed="true"] i { background: var(--ec-sobre-acento); }
.ec-reel-pos-grade button:focus-visible { outline: 2px solid var(--ec-acento); outline-offset: 1px; }
/* a animação e a posição da abertura (9 out), lado a lado por baixo dos campos */
.ec-reel-abre-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ec-reel-marcar { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ec-tinta); }
.ec-reel-marcar input { width: 20px; height: 20px; accent-color: var(--ec-acento); }
/* o interruptor do fecho com o logótipo (15 out) */
.ec-interruptor { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.ec-interruptor .subtitulo { margin: 0; }
.ec-interruptor input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 46px; height: 26px; margin: 0; border-radius: 13px; background: var(--ec-linha-forte); cursor: pointer; transition: background .2s; }
.ec-interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.ec-interruptor input:checked { background: var(--ec-acento); }
.ec-interruptor input:checked::after { transform: translateX(20px); }
.ec-interruptor input:focus-visible { outline: 2px solid var(--ec-acento); outline-offset: 2px; }
.ec-reel-ficheiro { position: relative; overflow: hidden; justify-self: start; }
.ec-reel-ficheiro input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ec-reel-biblio { display: grid; gap: 6px; }
.ec-reel-biblio-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.ec-reel-biblio-grelha button { aspect-ratio: 1; padding: 0; border: 1.5px solid var(--ec-linha); border-radius: 10px; overflow: hidden; background: var(--ec-fundo); cursor: pointer; }
.ec-reel-biblio-grelha button:hover { border-color: var(--ec-acento); }
.ec-reel-biblio-grelha img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-reel-biblio-item { position: relative; display: block; }
.ec-reel-biblio-item > button[data-i] { width: 100%; }
/* desde 12 out: a biblioteca abre-se com um botão, e as fotografias que já estão no Reel ficam marcadas */
.ec-reel-biblio[hidden] { display: none; }
.ec-reel-biblio { padding: 10px; border-radius: 12px; background: var(--ec-fundo); }
.ec-reel-biblio-grelha button[aria-pressed="true"] { border-color: var(--ec-acento); box-shadow: 0 0 0 2px var(--ec-acento); }
.ec-reel-biblio-grelha button[aria-pressed="true"] img { opacity: .55; }
.ec-reel-biblio-item:has(> button[aria-pressed="true"])::after { content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--ec-acento); color: var(--ec-sobre-acento, #fff); display: grid; place-items: center; font-size: 15px; font-weight: 700; pointer-events: none; }
.ec-reel-lista { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.ec-reel-item { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; }
.ec-reel-item img { width: 72px; height: 92px; object-fit: cover; border-radius: 10px; background: var(--ec-fundo); }
/* trocar uma fotografia (30 set): a miniatura é um botão, e a que está a ser trocada e as fotografias do estúdio ficam marcadas */
.ec-reel-miniatura { padding: 0; border: 0; background: none; border-radius: 12px; cursor: pointer; line-height: 0; }
.ec-reel-miniatura img { outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
.ec-reel-miniatura:hover img { outline-color: var(--ec-linha-forte); }
.ec-reel-item.a-trocar .ec-reel-miniatura img { outline-color: var(--ec-acento); }
.ec-reel-acoes button[aria-pressed="true"] { background: var(--ec-acento); border-color: var(--ec-acento); color: var(--ec-sobre-acento); }
.ec-reel-biblio.a-trocar .ec-reel-biblio-grelha button { border-color: var(--ec-acento); }
.ec-reel-troca { color: var(--ec-tinta); }
/* o que a IA ouviu no vídeo (30 set): fechado por defeito, uma frase por linha com o segundo */
.ec-reel-fala { border: 1px solid var(--ec-linha); border-radius: 10px; padding: 8px 12px; background: var(--ec-fundo); font-size: 14px; }
.ec-reel-fala summary { cursor: pointer; font-weight: 600; color: var(--ec-tinta); }
.ec-reel-fala ol { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.ec-reel-fala li b { display: inline-block; min-width: 3.4em; color: var(--ec-acento); font-weight: 600; }
.ec-reel-item-campos, .ec-reel-dica { display: grid; gap: 6px; }
.ec-reel-dica { padding-bottom: 12px; border-bottom: 1px solid var(--ec-linha); }
/* os textos a meio do Reel de vídeo (30 set): os botões partem linha no telemóvel */
.ec-reel-nota .ec-reel-acoes { flex-wrap: wrap; }
.ec-reel-nota .ec-reel-num b { color: var(--ec-tinta); }
.ec-reel-item input, .ec-reel-dica input, .ec-reel-dica textarea {
  width: 100%; border: 1.5px solid var(--ec-linha-forte); border-radius: 12px; padding: 9px 12px; background: var(--ec-fundo); font: inherit; font-size: 15px; color: var(--ec-tinta);
}
.ec-reel-item input:disabled { opacity: .55; }
.ec-reel-num { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ec-cinza); }
.ec-reel-acoes { display: flex; gap: 6px; }
.ec-reel-acoes button { min-height: 34px; min-width: 38px; padding: 0 10px; border: 1px solid var(--ec-linha); background: var(--ec-fundo); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ec-tinta); cursor: pointer; }
.ec-reel-acoes button:disabled { opacity: .35; cursor: default; }
/* cortar e juntar o vídeo: a linha do tempo (desde 16 out; o corte com botões de 11 out saiu) */
.ec-reel-escolher { display: grid; gap: 6px; }
.ec-reel-escolher[hidden] { display: none; }
.ec-reel-corte { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--ec-fundo); border: 1px solid var(--ec-linha); min-width: 0; }
.ec-reel-corte[hidden] { display: none; }
.ec-reel-corte .ec-reel-acoes { flex-wrap: wrap; }
.ec-reel-corte .ec-reel-acoes button { background: var(--ec-superficie); }
.ec-reel-corte #reel-corte-aviso:empty { display: none; }
.ec-reel-corte #reel-corte-aviso { color: var(--ec-tinta); }
.ec-tl-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ec-tl-cab .campo-rotulo { margin: 0; }
.ec-tl-zoom { display: inline-flex; border: 1px solid var(--ec-linha); border-radius: 999px; overflow: hidden; flex: none; }
.ec-tl-zoom button { width: 36px; height: 30px; border: 0; background: var(--ec-superficie); color: var(--ec-tinta); font: 600 17px/1 var(--ec-f-corpo); cursor: pointer; }
.ec-tl-zoom button + button { border-left: 1px solid var(--ec-linha); }
.ec-tl-zoom button:disabled { opacity: .35; cursor: default; }
/* o espaço dos lados deixa a cabeça da agulha e as pegas caberem nas pontas sem a linha do tempo deslizar à toa */
.ec-tl { position: relative; overflow-x: auto; overflow-y: hidden; padding: 0 9px; margin: 0 -9px; border-radius: 10px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.ec-tl-pista { position: relative; min-width: 100%; padding-bottom: 4px; }
.ec-tl-regua { position: relative; height: 24px; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.ec-tl-regua i { position: absolute; bottom: 2px; width: 1px; height: 6px; background: var(--ec-linha-forte); }
.ec-tl-regua span { position: absolute; top: 3px; transform: translateX(-50%); font: 600 10.5px/1 var(--ec-f-corpo); color: var(--ec-cinza); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.ec-tl-faixa { position: relative; height: 68px; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.ec-tl-clip { position: absolute; top: 0; bottom: 0; overflow: hidden; border-radius: 9px; background: #1c1c1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ec-tl-clip + .ec-tl-clip { border-left: 3px solid var(--ec-fundo); }
.ec-tl-clip canvas { display: block; width: 100%; height: 100%; }
.ec-tl-num { position: absolute; left: 6px; top: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .66); color: #fff; font: 700 11px/20px var(--ec-f-corpo); text-align: center; pointer-events: none; }
.ec-tl-parte { position: absolute; top: 0; bottom: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ec-tl-parte:hover { background: rgba(255, 255, 255, .07); }
.ec-tl-parte.tirada { background: repeating-linear-gradient(135deg, rgba(12, 12, 14, .82) 0 7px, rgba(12, 12, 14, .64) 7px 14px); box-shadow: inset 0 0 0 1px rgba(255, 120, 110, .4); }
.ec-tl-parte.tirada::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(255, 130, 120, .9); }
.ec-tl-parte.escolhida { box-shadow: inset 0 0 0 3px var(--ec-acento); z-index: 2; background: rgba(255, 255, 255, .06); }
/* onde o vídeo está partido (as divisões e as pontas dos cortes): uma fenda escura com uma linha branca */
.ec-tl-div { position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: var(--ec-fundo); z-index: 1; pointer-events: none; }
.ec-tl-div::after { content: ""; position: absolute; left: 2px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: #fff; }
.ec-tl-parte.tirada.escolhida { box-shadow: inset 0 0 0 3px var(--ec-acento); }
.ec-tl-parte:focus-visible { outline: 2px solid var(--ec-acento); outline-offset: -2px; }
.ec-tl-pega { position: absolute; top: -3px; bottom: -3px; width: 16px; margin-left: -8px; border-radius: 6px; background: var(--ec-acento); cursor: ew-resize; touch-action: none; z-index: 3; box-shadow: 0 2px 10px var(--ec-sombra); }
.ec-tl-pega::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 20px; margin: -10px 0 0 -1px; border-radius: 1px; background: var(--ec-sobre-acento); opacity: .75; }
.ec-tl-pega:focus-visible { outline: 2px solid var(--ec-tinta); outline-offset: 2px; }
.ec-tl-agulha { position: absolute; top: 2px; bottom: 0; width: 2px; margin-left: -1px; background: var(--ec-tinta); pointer-events: none; z-index: 4; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.ec-tl-agulha::before { content: ""; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ec-tinta); box-shadow: 0 1px 4px var(--ec-sombra); }
.ec-tl-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-tl-acoes button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid var(--ec-linha); border-radius: 999px; background: var(--ec-superficie); color: var(--ec-tinta); font: 600 13.5px/1 var(--ec-f-corpo); cursor: pointer; }
.ec-tl-acoes button svg { width: 17px; height: 17px; flex: none; }
.ec-tl-acoes button:hover:not(:disabled) { border-color: var(--ec-acento); }
.ec-tl-acoes button:disabled { opacity: .4; cursor: default; }
.ec-tl-acoes button.ativo, .ec-tl-acoes button[data-tl="tirar"]:not(:disabled) { background: var(--ec-acento); border-color: var(--ec-acento); color: var(--ec-sobre-acento); }
.ec-tl-info b { color: var(--ec-tinta); }
.ec-tl-mais { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ec-tl-mais .link { font-size: 13px; }
.ec-tl-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ec-tl-clips li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--ec-superficie); border: 1px solid var(--ec-linha); font-size: 13.5px; color: var(--ec-tinta); }
.ec-tl-clip-n { width: 22px; height: 22px; border-radius: 50%; background: var(--ec-acento); color: var(--ec-sobre-acento); font: 700 12px/22px var(--ec-f-corpo); text-align: center; }
.ec-tl-clip-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-tl-clip-dur { color: var(--ec-cinza); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-tl-clips .ec-reel-acoes button { min-height: 32px; min-width: 34px; padding: 0 8px; }
.ec-tl-juntar { display: inline-flex; align-items: center; gap: 6px; justify-self: start; }
.ec-tl-juntar svg { width: 16px; height: 16px; }
/* os outros ganchos da IA, por baixo do título (desde 16 out) */
.ec-reel-ganchos { display: grid; gap: 6px; margin-top: 2px; }
.ec-reel-ganchos[hidden] { display: none; }
.ec-reel-ganchos-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-reel-ganchos .ec-chip { text-align: left; white-space: normal; line-height: 1.3; }
.ec-reel-ganchos .ec-chip em { font-style: italic; color: var(--ec-acento-forte); }
.ec-reel-capa { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ec-reel-capa canvas { width: 120px; height: 160px; flex: none; border-radius: 10px; background: #0d0d0f; box-shadow: 0 10px 26px -16px var(--ec-sombra); }
.ec-reel-capa-ctl { display: grid; gap: 10px; justify-items: start; flex: 1 1 220px; min-width: 0; }
.ec-reel-capa-ctl .ec-linha-botoes { margin-top: 0; align-items: center; }
.ec-reel-painel textarea#reel-legenda { font-size: 14px; line-height: 1.5; resize: vertical; }
@media (min-width: 1100px) {
  .ec-reel { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; }
  .ec-reel-palco { position: sticky; top: 24px; --reel-margem: 48px; }
  .ec-reel-secoes, .ec-reel-saida { width: 340px; }
}

/* ---------- as avaliações do perfil do Google (kit: avaliacoes) ---------- */
.ec-av-topo { display: grid; gap: 14px; margin-bottom: 14px; }
.ec-av-topo .painel + .painel { margin-top: 0; }
@media (min-width: 1024px) { .ec-av-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; } }
.ec-av-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.ec-av-numero { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-av-numero strong { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 34px; line-height: 1; color: var(--ec-tinta); }
.ec-av-numero small { font-size: 13px; color: var(--ec-cinza); }
.ec-estrelas { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; letter-spacing: 0; }
.ec-estrelas i { font-style: normal; color: var(--ec-linha-forte); }
.ec-estrelas i.on { color: var(--ec-estrela, #e8a33d); }
.ec-av-pedir .nota-demo { margin-bottom: 12px; }
.ec-av-pedir-linha { display: grid; gap: 10px; }
@media (min-width: 700px) { .ec-av-pedir-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: end; } }
.ec-av-aviso { font-size: 14px; color: var(--ec-texto); border-left: 3px solid var(--ec-acento); margin-bottom: 14px; }
.ec-av-seccao { display: flex; align-items: center; gap: 8px; font-family: var(--ec-f-titulo); font-weight: 400; font-size: 22px; color: var(--ec-tinta); margin: 22px 0 12px; }
.ec-av-lista { display: grid; gap: 14px; max-width: 820px; }
.ec-av-lista .painel + .painel { margin-top: 0; }
.ec-av-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ec-av-cab > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ec-av-cab strong { color: var(--ec-tinta); overflow-wrap: anywhere; }
.ec-av-cab small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ec-cinza); }
.ec-av-inicial { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 700; background: var(--ec-acento-suave); color: var(--ec-acento-forte); }
.ec-av-texto { font-size: 15px; line-height: 1.5; color: var(--ec-texto); white-space: pre-line; overflow-wrap: anywhere; }
.ec-av-resposta { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--ec-fundo); border: 1px solid var(--ec-linha); font-size: 14.5px; color: var(--ec-texto); white-space: pre-line; overflow-wrap: anywhere; }
.ec-av-rotulo { font-size: 12.5px; font-weight: 700; color: var(--ec-acento-forte); margin-bottom: 4px; }
.ec-av-responder { margin-top: 12px; display: grid; gap: 10px; }
.ec-av-responder textarea { min-height: 84px; resize: vertical; }
.ec-av.respondida .ec-av-texto { color: var(--ec-cinza); }

/* ---------- os resultados do perfil do Google (kit: metricas) ---------- */
.ec-google-seg { margin: -6px 0 18px; }
.ec-seg a { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ec-texto); text-decoration: none; }
.ec-seg a.ativo { background: var(--ec-acento-suave); color: var(--ec-acento-forte); }
.ec-met-periodos { gap: 6px; }
.ec-met-destaque .ec-met-grande { font-family: var(--ec-f-titulo); font-weight: 400; font-size: clamp(48px, 8vw, 68px); line-height: 1; color: var(--ec-tinta); margin: 4px 0 10px; }
.ec-met-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--ec-cinza); }
.ec-var { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--ec-linha); color: var(--ec-texto); vertical-align: middle; }
.ec-var.sobe { background: rgba(31, 138, 91, .14); color: var(--ec-verde, #1f8a5b); }
.ec-var.desce { background: rgba(185, 48, 48, .10); color: var(--ec-vermelho, #b93030); }
.ec-met-grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
@media (min-width: 900px) { .ec-met-grelha { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.ec-met-grelha .painel + .painel, .ec-met-duas .painel + .painel { margin-top: 0; }
.ec-met-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ec-met-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ec-acento-suave); color: var(--ec-acento-forte); margin-bottom: 4px; }
.ec-met-icone svg { width: 18px; height: 18px; }
.ec-met-n { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 32px; line-height: 1.05; color: var(--ec-tinta); }
.ec-met-rot { font-size: 13.5px; color: var(--ec-cinza); }
.ec-met-duas { display: grid; gap: 12px; }
@media (min-width: 1024px) { .ec-met-duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.ec-met-divisao { margin-top: 16px; }
.ec-met-divisao-rot { font-size: 13px; font-weight: 700; color: var(--ec-tinta); margin-bottom: 6px; }
.ec-met-barra { display: block; height: 10px; border-radius: 999px; background: var(--ec-acento-suave); overflow: hidden; }
.ec-met-barra i { display: block; height: 100%; border-radius: 999px; background: var(--ec-acento); }
.ec-met-legenda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--ec-texto); }
.ec-met-legenda b { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: var(--ec-acento); }
.ec-met-legenda b.b { background: var(--ec-acento-suave); box-shadow: inset 0 0 0 1px var(--ec-linha-forte); }
.ec-met-pal-nota { margin-bottom: 12px; }
.ec-met-palavras { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; }
.ec-met-palavras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; }
.ec-met-palavra { font-size: 14.5px; color: var(--ec-tinta); overflow-wrap: anywhere; }
.ec-met-pn { grid-row: 1; grid-column: 2; font-size: 13px; font-weight: 700; color: var(--ec-texto); text-align: right; white-space: nowrap; }
.ec-met-pbarra { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: var(--ec-linha); overflow: hidden; }
.ec-met-pbarra i { display: block; height: 100%; border-radius: 999px; background: var(--ec-acento); }

/* a lista ou o calendário do mês, e o guião da gravação dos Reels (desde 16 out) */
:root {
  --ec-fn-lembrar: #8a6bd1;
  --ec-fn-chegar: var(--ec-acento);
  --ec-fn-convencer: var(--ec-verde, #1f8a5b);
}
.ec-vista-seg button { display: inline-flex; align-items: center; gap: 6px; }
.ec-vista-seg svg { width: 16px; height: 16px; }
.ec-link-guiao { display: inline-flex; align-items: center; gap: 4px; padding: 0; text-align: left; }
.ec-link-guiao svg { width: 15px; height: 15px; flex: none; }

.ec-cal-topo { display: grid; gap: 12px; margin-bottom: 18px; }
.ec-cal-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ec-cal-linha p { color: var(--ec-texto); }
.ec-cal-linha strong { color: var(--ec-tinta); }
.ec-cal-linha .link { padding: 0; }
.ec-cal-aviso { padding: 10px 12px; border-radius: 12px; background: var(--ec-acento-suave); }
.ec-cal-aviso p { color: var(--ec-tinta); font-weight: 600; }
.ec-cal-ok { display: flex; align-items: center; gap: 6px; color: var(--ec-verde, #1f8a5b); font-weight: 600; font-size: 14.5px; }
.ec-cal-ok svg { width: 17px; height: 17px; }
.ec-cal-gravar ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.ec-cal-gravar li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; font-size: 14.5px; }
.ec-cal-gravar .link { padding: 0; }
.ec-cal-quando { color: var(--ec-cinza); font-weight: 600; font-size: 13px; }
.ec-cal-nome { color: var(--ec-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .ec-cal-gravar li { grid-template-columns: minmax(0, 1fr) auto; } .ec-cal-quando { grid-column: 1 / -1; } }

.ec-cal-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; }
.ec-cal-cab h2 { font-family: var(--ec-f-titulo); font-weight: 400; font-size: 24px; color: var(--ec-tinta); min-width: 9ch; text-align: center; }
.ec-cal-cab .link { padding: 0; }
.ec-cal-seta { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ec-linha); background: var(--ec-superficie); color: var(--ec-tinta); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ec-cal-seta:hover { border-color: var(--ec-acento); }
.ec-cal-seta svg { width: 18px; height: 18px; }

/* no telemóvel, um dia por linha; num ecrã largo, a grelha do mês */
.ec-cal-semana { display: none; }
.ec-cal-grelha { display: grid; gap: 8px; }
.ec-cal-dia { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 4px 10px; align-items: start; background: var(--ec-superficie); border: 1px solid var(--ec-linha); border-radius: 14px; padding: 10px; min-width: 0; }
.ec-cal-dia.hoje { border-color: var(--ec-acento); box-shadow: inset 0 0 0 1px var(--ec-acento); }
.ec-cal-dia.passado { background: var(--ec-fundo); }
.ec-cal-dia.fora, .ec-cal-dia.passado.vazio { display: none; }
.ec-cal-data { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 13px; color: var(--ec-cinza); font-weight: 600; }
.ec-cal-data b { font-size: 18px; color: var(--ec-tinta); font-weight: 700; }
.ec-cal-data em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ec-acento-forte); }
.ec-cal-itens { display: grid; gap: 5px; min-width: 0; }
.ec-cal-item, .ec-cal-falta { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 6px 9px; border-radius: 9px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; line-height: 1.25; }
.ec-cal-item { border: 1px solid var(--ec-linha); border-left: 3px solid var(--ec-cinza); background: var(--ec-superficie); color: var(--ec-tinta); }
.ec-cal-item:hover { border-color: var(--ec-acento); }
.ec-cal-item span, .ec-cal-falta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ec-cal-item svg, .ec-cal-falta svg { width: 15px; height: 15px; flex: none; }
.ec-cal-item.fn-lembrar { border-left-color: var(--ec-fn-lembrar); }
.ec-cal-item.fn-chegar { border-left-color: var(--ec-fn-chegar); }
.ec-cal-item.fn-convencer { border-left-color: var(--ec-fn-convencer); }
.ec-cal-item.fixa { font-weight: 600; }
.ec-cal-item.feita { opacity: .62; color: var(--ec-texto); }
.ec-cal-item.feita svg { color: var(--ec-verde, #1f8a5b); }
/* As datas do kit no calendário e na Estratégia (desde 19 out). */
.ec-cal-marco { display: flex; align-items: flex-start; gap: 5px; margin: 0 0 2px; font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--ec-acento-forte); }
.ec-cal-marco svg { flex: none; width: 13px; height: 13px; margin-top: 1px; }
.ec-cal-marco span { min-width: 0; overflow-wrap: anywhere; }
.ec-datas li.perto strong { color: var(--ec-acento-forte); }
.ec-cal-falta { border: 1.5px dashed var(--ec-linha-forte); background: none; color: var(--ec-cinza); font-weight: 600; }
.ec-cal-falta:hover { border-color: var(--ec-acento); color: var(--ec-acento-forte); }
/* arrastar uma publicação para outro dia (desde 17 out): no telemóvel, o toque longo não seleciona texto nem abre menus */
.ec-cal-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.ec-cal-item.a-arrastar { opacity: .35; }
.ec-cal-fantasma { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; opacity: .96; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); }
body.ec-a-arrastar { -webkit-user-select: none; user-select: none; }
body.ec-a-arrastar, body.ec-a-arrastar * { cursor: grabbing !important; }
body.ec-a-arrastar .ec-cal-dia.passado { opacity: .5; }
.ec-cal-dia.alvo { border-color: var(--ec-acento); background: var(--ec-acento-suave); box-shadow: inset 0 0 0 2px var(--ec-acento); }
@media (min-width: 1100px) {
  .ec-cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-cinza); text-align: center; }
  .ec-cal-grelha { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .ec-cal-dia { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 124px; padding: 7px; border-radius: 12px; }
  .ec-cal-dia.fora, .ec-cal-dia.passado.vazio { display: grid; }
  .ec-cal-dia.fora { opacity: .45; }
  .ec-cal-data span { display: none; }
  .ec-cal-item, .ec-cal-falta { align-items: flex-start; font-size: 12.5px; padding: 5px 7px; }
  .ec-cal-item svg, .ec-cal-falta svg { margin-top: 1px; }
  /* na grelha, o título em duas linhas: numa só, quase nada se lia */
  .ec-cal-grelha .ec-cal-item span, .ec-cal-grelha .ec-cal-falta span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
}
.ec-cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--ec-texto); }
.ec-cal-legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--ec-cinza); }
.ec-cal-legenda .fn-lembrar::before { background: var(--ec-fn-lembrar); }
.ec-cal-legenda .fn-chegar::before { background: var(--ec-fn-chegar); }
.ec-cal-legenda .fn-convencer::before { background: var(--ec-fn-convencer); }
.ec-cal-porplanear { margin-top: 18px; display: grid; gap: 6px; }
.ec-cal-itens-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.ec-cal-itens-linha .ec-cal-item { width: auto; max-width: 280px; }
.ec-cal-mais { align-self: center; font-size: 13px; color: var(--ec-cinza); }

/* as janelas do calendário: uma publicação, um dia com falta e o ritmo */
.ec-cal-dias { margin: 6px 0 10px; }
.ec-cal-dias .ec-chip { padding: 6px 11px; font-size: 13px; }
.ec-cal-outro { display: grid; gap: 4px; max-width: 220px; margin-bottom: 8px; }
.ec-cal-trazer { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.ec-cal-trazer li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ec-cal-trazer .link { padding: 0; text-align: left; }
.ec-cal-trazer span { font-size: 13px; color: var(--ec-cinza); white-space: nowrap; }
/* o dia de uma feita e o "Publiquei fora do estúdio" (desde 17 out) */
.ec-chip-radio { position: relative; }
.ec-chip-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ec-chip-radio:hover { border-color: var(--ec-acento); }
.ec-chip-radio:has(input:checked) { background: var(--ec-botao); border-color: var(--ec-botao); color: var(--ec-sobre-botao); }
.ec-chip-radio:has(input:focus-visible) { outline: 2px solid var(--ec-acento); outline-offset: 2px; }
.ec-fora { display: grid; gap: 8px; }
.ec-fora .ec-cal-dias, .ec-fora .ec-cal-outro { margin: 0; }
.ec-fora-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ec-fora-opcao { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1.5px solid var(--ec-linha); border-radius: 12px; background: var(--ec-superficie); cursor: pointer; }
.ec-fora-opcao:hover { border-color: var(--ec-acento); }
.ec-fora-opcao:has(input:checked) { border-color: var(--ec-acento); background: var(--ec-acento-suave); }
.ec-fora-opcao input { flex: none; margin: 3px 0 0; accent-color: var(--ec-acento); }
.ec-fora-opcao span { display: grid; gap: 2px; min-width: 0; }
.ec-fora-opcao b { font-size: 14.5px; font-weight: 600; color: var(--ec-tinta); overflow-wrap: anywhere; }
.ec-fora-opcao small { font-size: 12.5px; color: var(--ec-cinza); }
.ec-fora-outra { display: grid; gap: 8px; }
.ec-fora:has(input[name="o-que"][value="outra"]:not(:checked)) .ec-fora-outra { opacity: .45; }
/* o cartão da lista de uma publicação feita fora do estúdio: no lugar da pré-visualização, o ícone do formato */
.ec-fora-icone { width: 100%; aspect-ratio: 4 / 5; align-self: start; display: grid; place-items: center; border-radius: 10px; border: 1px dashed var(--ec-linha-forte); background: var(--ec-fundo); color: var(--ec-cinza); }
.ec-fora-icone svg { width: 34px; height: 34px; }
.ec-ritmo { list-style: none; padding: 0; margin: 12px 0 6px; display: grid; gap: 8px; }
.ec-ritmo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--ec-fundo); }
.ec-ritmo-nome { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ec-tinta); }
.ec-ritmo-nome svg { width: 18px; height: 18px; color: var(--ec-acento); }
.ec-passo { display: inline-flex; align-items: center; gap: 10px; }
.ec-passo b { min-width: 2ch; text-align: center; font-size: 18px; color: var(--ec-tinta); }
.ec-passo button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ec-linha-forte); background: var(--ec-superficie); color: var(--ec-tinta); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.ec-passo button:disabled { opacity: .4; cursor: default; }
.ec-ritmo-total { margin-bottom: 12px; color: var(--ec-texto); }
.ec-ritmo-total strong { font-size: 18px; color: var(--ec-tinta); }

/* o guião da gravação: cada cena e cada imagem de apoio com o seu visto */
.ec-guiao-resumo { color: var(--ec-texto); margin-bottom: 8px; }
.ec-guiao-resumo strong { color: var(--ec-tinta); }
.ec-guiao-como { margin-bottom: 10px; color: var(--ec-texto); }
.ec-guiao-antes { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; color: var(--ec-texto); }
.ec-guiao-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ec-guiao-passo { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--ec-linha); border-radius: 14px; background: var(--ec-superficie); }
.ec-guiao-passo > div { display: grid; gap: 4px; font-size: 14.5px; color: var(--ec-texto); line-height: 1.45; min-width: 0; }
.ec-guiao-passo b { color: var(--ec-tinta); }
.ec-guiao-cab { display: flex; justify-content: space-between; gap: 10px; }
.ec-guiao-cab strong { color: var(--ec-tinta); }
.ec-guiao-cab span { font-weight: 700; color: var(--ec-acento-forte); }
.ec-guiao-diz { font-size: 16px; color: var(--ec-tinta); }
.ec-guiao-visto { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ec-linha-forte); background: var(--ec-superficie); color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ec-guiao-visto svg { width: 17px; height: 17px; }
.ec-guiao-visto:hover { border-color: var(--ec-verde, #1f8a5b); }
.ec-guiao-passo.feita { background: var(--ec-fundo); }
.ec-guiao-passo.feita .ec-guiao-visto { background: var(--ec-verde, #1f8a5b); border-color: var(--ec-verde, #1f8a5b); color: #fff; }
.ec-guiao-passo.feita > div { opacity: .7; }
.ec-guiao-pedir { display: grid; gap: 10px; margin-top: 10px; }
.ec-guiao-outro { margin-top: 14px; }
.ec-guiao-outro summary { cursor: pointer; font-weight: 600; color: var(--ec-acento-forte); font-size: 14px; }

/* o que publicámos: os artigos no site e as publicações no perfil do Google (kit: publicacoes, desde 19 out) */
@media (max-width: 560px) {
  .ec-google-seg.quatro { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; width: 100%; }
  .ec-google-seg.quatro a { justify-content: center; }
}
.ec-pub-resumo { max-width: 520px; margin-bottom: 18px; }
.ec-pub-sec { margin-top: 22px; }
.ec-pub-sec > .subtitulo { margin-bottom: 12px; }
.ec-pub-artigos { display: grid; gap: 12px; }
.ec-pub-artigo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; color: inherit; text-decoration: none; }
.ec-pub-artigos .painel + .painel { margin-top: 0; }
.ec-pub-artigo:hover { border-color: var(--ec-acento); }
.ec-pub-artigo img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--ec-fundo); }
.ec-pub-corpo { display: grid; gap: 4px; min-width: 0; }
.ec-pub-corpo small { font-size: 12.5px; color: var(--ec-cinza); }
.ec-pub-corpo strong { color: var(--ec-tinta); font-size: 16px; line-height: 1.3; }
.ec-pub-texto { font-size: 14px; line-height: 1.45; color: var(--ec-texto); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.ec-pub-ir { font-size: 13.5px; font-weight: 600; color: var(--ec-acento-forte); text-decoration: none; margin-top: 2px; }
a.ec-pub-ir:hover { text-decoration: underline; }
.ec-pub-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ec-pub-post { display: grid; gap: 10px; align-content: start; }
.ec-pub-grelha .painel + .painel { margin-top: 0; }
.ec-pub-post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--ec-fundo); }
.ec-pub-mais { margin-top: 12px; }
@media (max-width: 560px) {
  .ec-pub-artigo { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .ec-pub-artigo img { width: 84px; }
}