/* Escritório Digital · variáveis e componentes comuns (o mesmo desenho do painel de Métricas).
   Sem regras soltas para body ou títulos: o Bastidores também carrega este ficheiro
   e as variáveis dele, carregadas depois, mandam no que for dele. */

:root {
  --fundo: #FAF6F7;
  --papel: #FFFFFF;
  --linha: #EFE3E9;
  --vivo: #A81E5B;
  --vinho: #6A1B4D;
  --escuro: #481234;
  --noite: #26091B;
  --ouro: #D6A02F;
  --ouroc: #F0CE86;
  --suave: #7A6A72;
  --sobe: #2E6B4E;
  --atencao: #9A6B12;
  --grad-escuro: linear-gradient(150deg, var(--noite) 0%, var(--escuro) 55%, #5E1943 100%);
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.04 0 0 0 0 0.1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.8 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --serif: "TeX Gyre Termes", "TeXGyreTermes", "Tinos", Times, serif;
  --sans: "Lato", system-ui, sans-serif;
  --raio: 14px;
  --capsula: 999px;
  --sombra: 0 10px 30px -12px rgba(38, 9, 27, .18);
  --sombra-alta: 0 18px 40px -16px rgba(38, 9, 27, .28);
  --curva: cubic-bezier(.2, .7, .3, 1);
  --largura: 1120px;
}

/* ---------- Cabeçalho escuro com grão e brilho a ouro ---------- */
/* O brilho vai no fundo (e não num ::before com overflow escondido) para o menu da engrenagem poder sair do cabeçalho. */
.cabecalho {
  position: relative;
  z-index: 2;
  background:
    var(--grao-claro),
    radial-gradient(circle 190px at calc(100% - 50px) 10px, rgba(214, 160, 47, .25) 0%, rgba(214, 160, 47, 0) 65%),
    var(--grad-escuro);
  color: #fff;
  font-family: var(--sans);
  padding: calc(14px + env(safe-area-inset-top)) 16px 18px;
}
.cabecalho-dentro { position: relative; max-width: var(--largura); margin: 0 auto; }
.cabecalho-linha { display: flex; align-items: center; gap: 8px; }

/* Interruptor em cápsula: um separador de cada lado */
.interruptor {
  flex: 1;
  min-width: 0;
  display: flex;
  padding: 3px;
  border-radius: var(--capsula);
  background: rgba(255, 255, 255, .1);
  font-size: 13px;
}
.interruptor a {
  flex: 1;
  text-align: center;
  padding: 7px 8px;
  border-radius: var(--capsula);
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--curva), color .3s var(--curva);
}
.interruptor a:hover { color: #fff; }
.interruptor a[aria-current="page"] { background: #fff; color: var(--vinho); font-weight: 700; }

/* Engrenagem e o menu dela */
.engrenagem-caixa { position: relative; flex-shrink: 0; }
.cabecalho-engrenagem {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
}
.cabecalho-engrenagem:hover, .cabecalho-engrenagem[aria-expanded="true"] { background: rgba(255, 255, 255, .18); color: #fff; }
.menu-engrenagem {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  display: grid;
  padding: 6px;
  background: var(--papel);
  border-radius: var(--raio);
  border-top: 2px solid var(--ouro);
  box-shadow: var(--sombra-alta);
}
.menu-engrenagem[hidden] { display: none; }
.menu-engrenagem a, .menu-engrenagem button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--noite);
  font: 15px var(--sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-engrenagem a:hover, .menu-engrenagem button:hover { background: var(--fundo); color: var(--vinho); }
.menu-engrenagem button { border-top: 1px solid var(--linha); border-radius: 0 0 10px 10px; color: var(--suave); }

/* Saudação e números */
.cabecalho-corpo { margin-top: 16px; }
.cabecalho h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0;
  color: #fff;
}
.cabecalho h1 small {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}
.kpis { display: flex; gap: 8px; margin-top: 14px; min-height: 20px; }
.kpi {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}
.kpi b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kpi small { font-size: 11px; color: rgba(255, 255, 255, .7); }
.kpi i { font-style: normal; font-size: 11px; color: #9FD7B8; }
.kpis-espera { font-size: 13px; color: rgba(255, 255, 255, .6); }
.kpis-ligar {
  font-size: 13px;
  color: var(--ouroc);
  text-decoration: underline;
  text-decoration-color: var(--ouro);
  text-underline-offset: 4px;
}
.kpis-ligar:hover { color: #fff; }

/* ---------- As quatro portas da Fábrica ---------- */
.portas {
  display: flex;
  gap: 6px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 12px 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.portas::-webkit-scrollbar { display: none; }
.portas a {
  padding: 7px 13px;
  border-radius: var(--capsula);
  border: 1px solid var(--linha);
  background: var(--papel);
  color: var(--suave);
  font: 14px var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--curva), color .3s var(--curva);
}
.portas a:hover { color: var(--vinho); }
.portas a[aria-current="page"] { background: var(--vinho); border-color: var(--vinho); color: #fff; }

/* Telemóvel: as cinco portas sempre todas à vista, numa fila (passam a duas só se não couberem). */
@media (max-width: 480px) {
  .portas { flex-wrap: wrap; justify-content: center; gap: 4px; padding: 12px 8px 4px; overflow-x: visible; }
  .portas a { flex: 1 1 auto; padding: 7px 6px; font-size: 13px; text-align: center; }
}

/* No Bastidores o topo é só o interruptor */
.cabecalho-fino { padding-bottom: 14px; }
.cabecalho-fino .interruptor { max-width: 420px; }

.cabecalho a:focus-visible, .cabecalho button:focus-visible, .portas a:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

/* ---------- PC: as portas sobem para a direita do cabeçalho ---------- */
@media (min-width: 900px) {
  .topo-comum { position: relative; }
  .cabecalho {
    padding: 16px 28px 20px;
    background:
      var(--grao-claro),
      radial-gradient(circle 310px at calc(100% - 130px) 50px, rgba(214, 160, 47, .22) 0%, rgba(214, 160, 47, 0) 65%),
      var(--grad-escuro);
  }
  .interruptor { flex: 0 0 auto; font-size: 14px; }
  .interruptor a { padding: 7px 18px; }
  .cabecalho-linha .engrenagem-caixa { margin-left: auto; }
  .cabecalho-corpo { display: flex; align-items: flex-end; gap: 16px; margin-top: 18px; }
  .cabecalho h1 { flex: 1; display: flex; flex-direction: column; font-size: 30px; }
  .cabecalho h1 small { order: -1; margin: 0 0 2px; }
  .kpis { margin-top: 0; }
  .kpi { flex: 0 0 auto; min-width: 120px; padding: 8px 14px; }
  .kpi b { font-size: 24px; }
  .kpi small { font-size: 12px; }

  /* A mesma lista de portas, posta por cima do cabeçalho, à esquerda da engrenagem */
  .topo-comum .portas {
    position: absolute;
    z-index: 3;
    top: 21px;
    right: max(74px, calc((100% - var(--largura)) / 2 + 46px));
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    overflow: visible;
  }
  .topo-comum .portas a { border-color: transparent; background: none; color: rgba(255, 255, 255, .75); }
  .topo-comum .portas a:hover { color: #fff; }
  .topo-comum .portas a[aria-current="page"] { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
}

/* ---------- Semana: estratégia e dias em acordeão (dia → peças → conteúdo) ---------- */
.semana-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 12px; }
.semana-cab h2 { margin: 0; font: 400 1.3rem/1.2 var(--serif); color: var(--vinho); }
.semana-seta {
  display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--linha); background: var(--papel);
  color: var(--vinho); font: 22px/1 var(--serif); text-decoration: none;
}
.semana-seta:hover { border-color: var(--vivo); }
.semana-hoje { margin-left: auto; font-size: 13px; color: var(--vivo); }
.semana-vazio { margin: 6px 2px; font-size: 14px; font-style: italic; color: var(--suave); }

.estrategia {
  padding: 14px 16px; border-radius: var(--raio); background: var(--papel);
  border-top: 3px solid var(--ouro); box-shadow: 0 10px 30px -14px rgba(38, 9, 27, .2);
}
.semana-ecra .rot { margin: 0; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.estrategia-texto {
  display: block; width: 100%; margin-top: 6px; padding: 0; border: 0; background: none;
  font: 18px/1.35 var(--serif); color: var(--vinho); text-align: left; cursor: text;
}
.estrategia-texto.vazia { font-style: italic; color: var(--suave); }
.estrategia-caixa {
  display: block; width: 100%; margin-top: 6px; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo);
  font: 18px/1.35 var(--serif); color: var(--vinho);
}
.semana-ecra .etq { display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: var(--capsula); background: #F6E8EF; color: var(--vivo); font-size: 12px; }
.semana-ecra .etq[hidden] { display: none; }

.dia-ac { margin-top: 8px; border: 1px solid var(--linha); border-radius: 12px; background: var(--papel); }
.dia-ac.hoje { border-color: var(--vivo); }
.dia-cab, .peca-cab {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 12px 14px;
  border: 0; border-radius: 12px; background: none; color: var(--noite); font: 16px var(--sans); text-align: left; cursor: pointer;
}
.semana-ecra .seta { flex-shrink: 0; width: 18px; font-size: 13px; color: var(--vinho); transition: transform .2s var(--curva); }
.dia-ac.aberto > .dia-cab .seta, .peca-ac.aberta > .peca-cab .seta { transform: rotate(90deg); }
.dia-nome { flex: 1; font-weight: 700; }
.dia-nome small { margin-left: 6px; font-weight: 400; color: var(--suave); }
.bolas { display: flex; gap: 3px; }
.bolas i { width: 8px; height: 8px; border-radius: 50%; background: #E3D4DC; }
.bolas i.ok { background: var(--sobe); }
.bolas i.pa { background: var(--ouro); }
.dia-pecas { padding: 0 10px 10px; }
.dia-pecas[hidden] { display: none; }

.peca-ac { margin-top: 6px; border-radius: 12px; background: var(--fundo); }
.peca-cab { padding: 10px 12px; }
.peca-t { flex: 1; min-width: 0; font-size: 15px; }
/* Títulos compridos: até duas linhas no acordeão; o título inteiro aparece ao abrir a peça. */
.peca-t small { display: -webkit-box; overflow: hidden; font-size: 12px; color: var(--suave); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.est { flex-shrink: 0; padding: 2px 8px; border-radius: var(--capsula); font-size: 11px; white-space: nowrap; }
.est.pa { background: #FBF1DC; color: var(--atencao); }
.est.ok { background: #E3F0E8; color: var(--sobe); }
.est.pu { background: #EDE6EA; color: var(--suave); }
.peca-redes { display: flex; gap: 3px; flex-shrink: 0; }
.rede-ic {
  width: 16px; height: 16px; border: 1px solid var(--vinho); border-radius: 50%;
  font: normal 700 9px/14px var(--sans); color: var(--vinho); text-align: center;
}
.rede-ic.cheio { background: var(--vinho); color: #fff; }

/* O conteúdo da peça: dentro do acordeão (telemóvel) ou no painel da direita (PC) */
.peca-cont { padding: 4px 12px 14px; }
.peca-cont[hidden] { display: none; }
.peca-cont, .semana-detalhe { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.peca-cont h4, .semana-detalhe h4 { margin: 12px 0 4px; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.peca-txt { padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); white-space: pre-wrap; }
.peca-txt.codigo { max-height: 240px; overflow: auto; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre; }
.peca-imagens { display: flex; gap: 6px; padding-bottom: 4px; overflow-x: auto; }
.peca-imagens img { flex: 0 0 auto; width: 92px; height: 164px; object-fit: cover; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); }
.peca-imagens-feed img { width: 110px; height: 138px; }
.peca-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.peca-botoes .botao { min-height: 40px; padding: 8px 15px; font-size: 13px; }
.peca-botoes .botao[hidden] { display: none; }
.peca-botoes .botao:disabled { opacity: .5; cursor: progress; transform: none; }
.peca-var { display: flex; gap: 6px; margin: 4px 0 2px; }
.peca-var button {
  flex: 1; min-height: 36px; padding: 6px; border: 1px solid var(--linha); border-radius: 8px;
  background: var(--papel); color: var(--noite); font: 13px var(--sans); cursor: pointer;
}
.peca-var button[aria-selected="true"] { border-color: var(--vivo); color: var(--vivo); font-weight: 700; }
.peca-nota { margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; background: #FBF1DC; color: var(--atencao); font-size: 13px; }
.peca-nota span { display: block; margin-top: 2px; font-style: italic; }
.peca-pedido { display: grid; gap: 8px; margin-top: 10px; }
.peca-pedido[hidden] { display: none; }
.peca-video { margin-top: 14px; }
.peca-ficha { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--suave); text-underline-offset: 3px; }
.peca-redes-lista[hidden] { display: none; }
.rede-bloco { margin-top: 10px; }
.rede-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rede-nome { flex: 1; font-weight: 700; font-size: 13px; color: var(--vinho); }
.botao-mini {
  min-height: 32px; padding: 5px 12px; border: 1px solid var(--linha); border-radius: var(--capsula);
  background: var(--papel); color: var(--vinho); font: 700 12px var(--sans); cursor: pointer;
}
.botao-mini[aria-pressed="true"] { border-color: var(--sobe); background: var(--sobe); color: #fff; }
.botao-mini:disabled { opacity: .6; cursor: progress; }
.peca-titulo { margin: 2px 0 10px; font: 400 22px/1.2 var(--serif); color: var(--vinho); }
.peca-titulo.pequeno { margin: 4px 0 6px; font-size: 18px; }

.semana-detalhe {
  position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto;
  padding: 18px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel);
}
.semana-detalhe[hidden] { display: none; }
.semana-detalhe .peca-txt { border-color: transparent; background: var(--fundo); }
.semana-detalhe .peca-imagens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.semana-detalhe .peca-imagens img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
.semana-detalhe .peca-imagens-story img { aspect-ratio: 9 / 16; }

/* PC: a lista à esquerda, a peça aberta à direita; a lista não salta */
@media (min-width: 900px) {
  .semana-ecra.largo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
  .largo .dia-pecas { padding: 0; }
  .largo .peca-ac { margin: 0; border-top: 1px solid var(--linha); border-radius: 0; background: none; }
  .largo .peca-ac:last-child .peca-cab { border-radius: 0 0 12px 12px; }
  .largo .peca-cab { padding: 9px 14px 9px 42px; border-radius: 0; font-size: 14px; }
  .largo .peca-ac.aberta .peca-cab { background: #F6E8EF; }
  .largo .peca-cab:hover { background: var(--fundo); }
}

/* ---------- Filtro por rede (Semana e Calendário) ---------- */
.semana-mes { font-size: 13px; color: var(--vivo); }
.semana-cab .semana-hoje + .semana-mes { margin-left: 4px; }
.semana-cab .semana-seta + .semana-mes { margin-left: auto; }
.peca-t small.na-rede { margin-top: 2px; color: var(--atencao); font-style: italic; }
.peca-t small.na-rede.feito { color: var(--sobe); }
/* Telemóvel: as seis cápsulas em duas filas, todas à vista (sem deslizar para o lado). */
@media (max-width: 480px) {
  .capsulas.filtro-redes { flex-wrap: wrap; margin: 0 0 12px; padding: 0; overflow: visible; }
}

/* ---------- Calendário: grelha do mês no PC, lista dos próximos 30 dias no telemóvel ---------- */
.cal-lista { margin: 0; padding: 0; list-style: none; }
.cal-dia-l {
  display: block; margin-top: 8px; padding: 12px 14px 8px; border: 1px solid var(--linha); border-radius: 12px;
  background: var(--papel); color: var(--noite); text-decoration: none;
}
.cal-dia-l.hoje { border-color: var(--vivo); }
.cal-dia-l .dia-nome { display: block; margin-bottom: 4px; }
.cal-linha { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); }
.cal-linha .peca-t small { color: var(--suave); }

.cal-semana, .cal-grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cal-semana li { padding: 0 6px 4px; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.cal-grelha { gap: 4px; }
.cal-dia {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 96px; padding: 6px;
  border: 1px solid var(--linha); border-radius: 10px; background: var(--papel);
}
.cal-dia.fora { background: transparent; opacity: .55; }
.cal-dia.hoje { border-color: var(--vivo); }
.cal-num { font-size: 13px; font-weight: 700; color: var(--vinho); }
.cal-num small { font-weight: 400; color: var(--suave); }
/* Nome curto: tipo e título em até duas linhas; o resto no título ao passar por cima. */
.cal-peca {
  display: -webkit-box; width: 100%; min-height: 26px; padding: 3px 5px; overflow: hidden;
  border: 0; border-radius: 6px; background: var(--fundo); color: var(--noite);
  font: 12px/1.35 var(--sans); text-align: left; overflow-wrap: anywhere; cursor: pointer;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.cal-peca:hover { background: #F6E8EF; }
.cal-peca[aria-pressed="true"] { background: #F6E8EF; box-shadow: inset 0 0 0 1px var(--vivo); }
.cal-tipo { font-weight: 700; color: var(--vinho); }
.cal-bola { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #E3D4DC; vertical-align: 1px; }
.cal-bola.ok { background: var(--sobe); }
.cal-bola.pa { background: var(--ouro); }

@media (min-width: 900px) {
  .cal-ecra.largo { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; align-items: start; }
}

/* ---------- Ideias e Campanhas: o mesmo papel, linhas e cápsulas da Semana ---------- */
.ecra-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.ecra-titulo { margin: 6px 0 12px; font: 400 1.3rem/1.2 var(--serif); color: var(--vinho); }
.ecra-cab .ecra-titulo { margin: 0; }
.ideias-ecra .rot, .camp-ecra .rot { margin: 18px 2px 6px; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }

.capsulas { display: flex; gap: 6px; margin: 0 -16px 12px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.capsulas::-webkit-scrollbar { display: none; }
.capsula {
  flex-shrink: 0; min-height: 36px; padding: 6px 13px; border: 1px solid var(--linha); border-radius: var(--capsula);
  background: var(--papel); color: var(--suave); font: 13px var(--sans); white-space: nowrap; cursor: pointer;
}
.capsula:hover { color: var(--vinho); }
.capsula[aria-pressed="true"] { border-color: var(--vinho); background: var(--vinho); color: #fff; }

.botao-mini.discreto { border-color: transparent; background: none; color: var(--suave); font-weight: 400; }
.botao-mini.discreto:hover { color: var(--vivo); }
.botao-mini.cheio { border-color: var(--vivo); background: var(--vivo); color: #fff; }

/* Ideias */
.ideias { margin: 0; padding: 0; list-style: none; }
.ideia { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--papel); }
.ideia-titulo { display: block; font: 17px/1.3 var(--serif); color: var(--noite); text-decoration: none; overflow-wrap: anywhere; }
.ideia-titulo:hover { color: var(--vivo); }
.ideia-linha { margin: 3px 0 0; font-size: 12px; color: var(--suave); }
.ideia-botoes, .ideia-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ideia-botoes[hidden], .ideia-dia[hidden] { display: none; }
.ideia-dia label { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 13px; color: var(--vinho); }
.ideia-dia input {
  flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid var(--linha); border-radius: 8px;
  background: var(--fundo); color: var(--noite); font: 15px var(--sans);
}

/* Lista de campanhas */
.camp-cartao {
  display: block; margin-top: 8px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 12px;
  background: var(--papel); color: var(--noite); text-decoration: none;
}
.camp-cartao:hover { border-color: var(--vivo); }
.camp-cartao.ativa { border-color: transparent; border-top: 3px solid var(--ouro); box-shadow: 0 10px 30px -14px rgba(38, 9, 27, .2); }
.camp-cartao-nome { display: block; font: 19px/1.25 var(--serif); color: var(--vinho); }
.camp-cartao small { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); }

/* Página da campanha */
.camp-voltar { display: inline-block; margin: 4px 0 6px; font-size: 14px; color: var(--suave); text-decoration: none; }
.camp-voltar:hover { color: var(--vivo); }
.camp-nome {
  display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: none; text-align: left; cursor: text;
  font: 400 1.6rem/1.15 var(--serif); color: var(--vinho); overflow-wrap: anywhere;
}
.camp-bloco { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.camp-bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.camp-bloco h3 { margin: 0; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.camp-periodo { margin: 0 0 8px; font: 16px var(--serif); color: var(--vinho); }
.camp-essencial { margin: 0; font: 17px/1.4 var(--serif); color: var(--noite); white-space: pre-wrap; }
.camp-portas { margin: 0; padding-left: 18px; }
.camp-portas li + li { margin-top: 3px; }

.fases { margin: 0; padding: 0; list-style: none; }
.fase { padding: 9px 10px 9px 14px; border-left: 2px solid var(--linha); }
.fase.agora { border-left-color: var(--vivo); border-radius: 0 10px 10px 0; background: #F6E8EF; }
.fase-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fase-cab b { color: var(--noite); }
.fase-cab small { margin-left: auto; color: var(--suave); font-size: 12px; white-space: nowrap; }
.fase.agora .fase-cab b { color: var(--vivo); }
.fase p { margin: 3px 0 0; color: var(--noite); }

.camp-msg + .camp-msg { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.camp-msg-titulo { margin: 0 0 4px; font-weight: 700; color: var(--vinho); }
.camp-msg .peca-txt { background: var(--fundo); border-color: transparent; }
.camp-bloco > .botao-mini, .camp-msg + .botao-mini { margin-top: 10px; }

.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.numero { display: flex; flex-direction: column; min-width: 0; padding: 10px; border-radius: 12px; background: var(--fundo); text-align: center; }
/* O rótulo ocupa sempre duas linhas: os três números ficam à mesma altura. */
.numero .rot { display: flex; align-items: flex-end; justify-content: center; min-height: 2.6em; margin: 0; font-size: 10px; letter-spacing: .05em; line-height: 1.3; }
.numero-valor { margin: 4px 0 8px; }
.numero-valor b { display: block; font: 400 40px/1 var(--serif); color: var(--vinho); font-variant-numeric: tabular-nums; }
.numero-valor small { display: block; margin-top: 2px; font-size: 12px; color: var(--suave); }
.numero-botoes { display: flex; justify-content: center; gap: 6px; }
.numero-botoes .botao-mini { flex: 1; min-height: 40px; padding: 5px 0; font-size: 14px; }
.numero-mudar-meta { margin-top: 8px; padding: 4px; border: 0; background: none; color: var(--suave); font: 12px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.numero-mudar-meta:hover { color: var(--vivo); }
.numero-meta { margin-top: 8px; text-align: left; }
.numero-meta .numero-botoes { margin-top: 6px; }

.camp-fase-nome { margin: 12px 0 4px; font-weight: 700; color: var(--vinho); }
.camp-fase-nome:first-child { margin-top: 0; }
.camp-pecas { margin: 0; padding: 0; list-style: none; }
.camp-pecas a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--noite); text-decoration: none; }
.camp-pecas a:hover { background: var(--fundo); }
.camp-pecas a > span:first-child { flex: 1; min-width: 0; }
.camp-pecas small { display: block; overflow: hidden; font-size: 12px; color: var(--suave); white-space: nowrap; text-overflow: ellipsis; }

/* Caixas de edição no próprio sítio */
.camp-campo { display: grid; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--vinho); }
.camp-campo:first-child { margin-top: 0; }
.camp-campo input, .camp-campo textarea {
  width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px;
  background: var(--fundo); color: var(--noite); font: 400 15px/1.45 var(--sans);
}
.camp-campo textarea { resize: vertical; }
.camp-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.camp-duas:first-child { margin-top: 0; }
.camp-duas .camp-campo { margin-top: 0; }
.fase-ed { margin: 12px 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--fundo); }
.fase-ed .camp-campo input, .fase-ed .camp-campo textarea { background: var(--papel); }
.fase-ed .botao-mini { margin-top: 6px; }
.camp-nova { margin-bottom: 6px; }

@media (min-width: 900px) {
  .ideias-ecra, .camp-ecra { max-width: 760px; }
  .capsulas { margin: 0 0 12px; padding: 0; flex-wrap: wrap; overflow: visible; }
  .numero-valor b { font-size: 48px; }
}

/* ---------- Preparar a semana: a hora de sexta, de cima para baixo ---------- */
.semana-preparar { width: 100%; margin: 4px 0 10px; }
.prep { max-width: 720px; margin: 0 auto; font-family: var(--sans); color: var(--noite); }
.prep-cab {
  margin: 4px 0 12px; padding: 16px 18px 18px; border-radius: var(--raio); color: #fff;
  background: var(--grao-claro), var(--grad-escuro);
}
.prep-volta { font-size: 13px; color: rgba(255, 255, 255, .7); text-decoration: none; }
.prep-volta:hover { color: #fff; }
.prep-cab h2 { margin: 8px 0 0; font: 400 24px/1.2 var(--serif); }
.prep-sub { margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.prep-passos { display: flex; gap: 4px; margin-top: 12px; }
.prep-passos i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.prep-passos i.on { background: var(--ouro); }

.prep-bloco { margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); overflow-wrap: anywhere; }
.prep-bloco[hidden] { display: none; }
.prep-n { margin: 0; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.prep-bloco h3 { margin: 2px 0 8px; font: 400 19px/1.25 var(--serif); color: var(--vinho); }
.prep-nota { margin: 6px 0; font-size: 13px; color: var(--suave); }
.prep-nota a { color: var(--vivo); }
.prep-ligacao { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--vivo); text-underline-offset: 3px; }

.prep-top { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.prep-top:first-child { border-top: 0; }
.prep-top b { min-width: 54px; font: 400 18px var(--serif); color: var(--sobe); font-variant-numeric: tabular-nums; }
.prep-pecas { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; }
.prep-pecas li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--linha); }
.prep-quando { flex-shrink: 0; min-width: 76px; font-size: 12px; color: var(--suave); }

.prep-fase { padding: 10px 12px; border-radius: 10px; background: #F6E8EF; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.prep-mes { margin: 0; font-size: 14px; line-height: 1.45; }
.prep-mes dt { margin-top: 8px; font-weight: 700; color: var(--vivo); font-size: 12px; }
.prep-mes dt:first-child { margin-top: 0; }
.prep-mes dd { margin: 2px 0 0; white-space: pre-wrap; }

.prep-ideia { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.prep-ideia:first-of-type { border-top: 0; }
.prep-ideia-t { flex: 1; min-width: 0; }
.prep-de { display: block; font-size: 11px; color: var(--suave); }
.prep-mais {
  flex-shrink: 0; min-height: 32px; padding: 4px 12px; border: 1px solid var(--linha); border-radius: var(--capsula);
  background: var(--papel); color: var(--vinho); font: 12px var(--sans); white-space: nowrap; cursor: pointer;
}
.prep-mais[aria-pressed="true"] { border-color: var(--vinho); background: var(--vinho); color: #fff; }
.prep-mais:disabled { opacity: .6; cursor: progress; }

.prep-frase {
  display: block; width: 100%; margin: 0; padding: 10px 12px; border: 1px dashed var(--vivo); border-radius: 10px;
  background: var(--papel); font: 17px/1.35 var(--serif); color: var(--vinho); resize: vertical;
}
.prep-frase.lida { border-style: solid; border-color: var(--linha); white-space: pre-wrap; }
.prep-grelha { margin-top: 10px; font-size: 14px; }
.prep-dia { display: flex; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linha); }
.prep-d { flex-shrink: 0; width: 34px; padding-top: 7px; font-weight: 700; font-size: 13px; color: var(--suave); }
.prep-dia-linhas { flex: 1; min-width: 0; display: grid; gap: 4px; }
/* No telemóvel: o tema numa linha inteira, por baixo o formato e o «sai». No PC tudo na mesma linha. */
.prep-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.prep-linha + .prep-linha { padding-top: 4px; border-top: 1px dotted var(--linha); }
.prep-tipo, .prep-f {
  flex-shrink: 0; max-width: 100%; padding: 3px 7px; border: 0; border-radius: 6px;
  background: var(--fundo); color: var(--vinho); font: 12px var(--sans); white-space: nowrap;
}
.prep-tipo { min-height: 30px; cursor: pointer; }
.prep-titulo {
  order: -1; flex: 1 1 100%; min-width: 0; min-height: 34px; padding: 4px 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--noite); font: 14px/1.4 var(--sans);
  /* Caixa de texto que cresce com o tema (o tamanho vem do preparar.js): sem pega nem barra. */
  display: block; resize: none; overflow: hidden; overflow-wrap: anywhere;
}
.prep-titulo:hover { border-color: var(--linha); }
.prep-titulo:focus { border-color: var(--vivo); background: var(--fundo); }
.prep-tema { order: -1; flex: 1 1 100%; min-width: 0; padding: 4px 0; }
.prep-sai { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 32px; margin-left: auto; font-size: 12px; color: var(--suave); cursor: pointer; }
.prep-sai input { width: 16px; height: 16px; margin: 0; accent-color: var(--sobe); }
.prep-fica { flex-shrink: 0; font-size: 11px; color: var(--suave); font-style: italic; }
.prep-linha.pequena .prep-titulo, .prep-linha.pequena .prep-tema { font-size: 13px; color: var(--suave); min-height: 30px; }
.prep-linha.fora .prep-titulo, .prep-linha.fora .prep-tema { text-decoration: line-through; color: var(--suave); }
.prep-linha.fora .prep-tipo, .prep-linha.fora .prep-f { opacity: .55; }
.prep-ganchos { flex-basis: 100%; font-size: 13px; }
.prep-ganchos summary { width: fit-content; color: var(--vivo); cursor: pointer; }
.prep-ganchos ol { margin: 4px 0 2px; padding-left: 20px; color: var(--noite); }
.prep-ganchos li + li { margin-top: 3px; }

.prep-b { width: 100%; margin-top: 8px; }
.prep-b[hidden] { display: none; }
.prep-b:disabled, .prep-pedido .botao:disabled { opacity: .6; cursor: progress; transform: none; }
.prep-pedido { display: grid; gap: 6px; margin-top: 10px; }
.prep-pedido[hidden] { display: none; }
.prep-rot { font-size: 13px; font-weight: 700; color: var(--vinho); }
.prep-pedido textarea {
  width: 100%; min-height: 70px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px;
  background: var(--fundo); color: var(--noite); font: 15px/1.45 var(--sans); resize: vertical;
}
.prep-pedido-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prep-pedido-botoes .botao { flex: 1; }
.prep-espera { margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: #FBF1DC; color: var(--atencao); font-size: 14px; }
.prep-espera p { margin: 0; }
.prep-espera p + p { margin-top: 4px; font-size: 13px; }
.prep-espera p[hidden] { display: none; }
.prep-feito { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #E3F0E8; color: var(--sobe); font-size: 14px; }
.prep-feito a { color: var(--sobe); font-weight: 700; }

.prep-grav { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.prep-grav li { border-top: 1px solid var(--linha); }
.prep-grav li:first-child { border-top: 0; }
.prep-grav label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; cursor: pointer; }
.prep-grav input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--sobe); }
.prep-grav input:checked + span { color: var(--suave); text-decoration: line-through; }

@media (min-width: 600px) {
  .prep-titulo, .prep-tema { order: 0; flex: 1 1 200px; margin-left: 0; }
  .prep-sai { margin-left: 0; }
}

@media (min-width: 900px) {
  .semana-preparar { width: auto; }
  .prep-cab { padding: 20px 24px 22px; }
  .prep-cab h2 { font-size: 28px; }
  .prep-bloco { padding: 18px 22px; }
  .prep-b { width: auto; min-width: 220px; margin-right: 8px; }
}

/* Vídeo da peça (ficha e Semana): enviar, lista dos enviados, passos da edição, leitor */
.seccao-video { min-width: 0; }
.seccao-video h4 { margin: 4px 0 0; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.seccao-video .botao:disabled { opacity: .5; cursor: progress; transform: none; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-escolher { position: relative; cursor: pointer; }
.v-escolher:focus-within { outline: 2px solid var(--vivo); outline-offset: 2px; }
.v-ponto { margin: 0; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vinho); }
.v-lista { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.v-lista li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); font-size: 13px; }
.v-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-tam { flex-shrink: 0; color: var(--suave); }
.v-envio { display: grid; gap: 6px; }
.v-envio progress { width: 100%; height: 8px; accent-color: var(--vivo); }
.v-progresso, .v-parou, .v-espera { margin: 0; font-size: 14px; }
.v-parou { color: var(--atencao); font-weight: 700; }
.v-espera { padding: 10px 12px; border-radius: 8px; background: var(--fundo); color: var(--vinho); font-style: italic; }
.v-leitor { display: block; width: 100%; max-height: 70vh; border-radius: 10px; background: var(--noite); }
.v-caminho { overflow-wrap: anywhere; }
.pc-desligado { margin: 4px 0 0; font-weight: 700; }
.pc-desligado[hidden] { display: none; }
.nota-campo { font-weight: 400; color: var(--suave); }
.v-substitui { margin: 0; }

/* ---------- Números do topo: tocar abre as Métricas ---------- */
.kpis-link { display: flex; gap: 8px; flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: 12px; }
.kpis-link:hover .kpi { background: rgba(255, 255, 255, .14); }

/* ---------- Estratégia: o mês em cima, as campanhas por baixo ---------- */
.estr-ecra { display: grid; gap: 22px; }
.estr-cab h2 { font-size: 1.1rem; }
.estr-cartao {
  padding: 4px 16px; border-radius: var(--raio); background: var(--papel);
  border-top: 3px solid var(--ouro); box-shadow: 0 10px 30px -14px rgba(38, 9, 27, .2);
}
.estr-campo { padding: 12px 0; border-top: 1px solid var(--linha); }
.estr-campo:first-child { border-top: 0; }
.estr-rot { display: block; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.estr-texto {
  display: block; width: 100%; min-height: 32px; margin: 4px 0 0; padding: 0; border: 0; background: none;
  font: 17px/1.4 var(--serif); color: var(--vinho); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
}
button.estr-texto { cursor: text; }
.estr-texto.vazio { font-style: italic; color: var(--suave); }
.estr-caixa {
  display: block; width: 100%; min-height: 64px; margin-top: 6px; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo);
  font: 17px/1.4 var(--serif); color: var(--vinho);
}
.estr-pedido { margin-top: 10px; }
.estr-pedir { width: 100%; }
.estr-pedido .botao:disabled { opacity: .6; cursor: progress; transform: none; }
.estr-campanhas .camp-ecra { max-width: none; }

/* ---------- Marca: só para consultar ---------- */
.marca-ecra { display: grid; gap: 14px; }
.marca-bloco { padding: 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); font-size: 14px; line-height: 1.5; color: var(--noite); }
.marca-bloco h3 { margin: 0 0 10px; font: 400 1.25rem/1.2 var(--serif); color: var(--vinho); }
.marca-bloco h4 { margin: 16px 0 6px; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.marca-bloco p { margin: 0 0 8px; }
.marca-nota { color: var(--suave); font-size: 13px; }
.marca-falta { font-style: italic; color: var(--suave); }
.marca-lista { margin: 0 0 8px; padding-left: 20px; }
.marca-lista li + li { margin-top: 4px; }
.marca-lista.nao li::marker { content: "✕  "; color: #8E2233; }

.marca-cores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.marca-cor {
  display: grid; align-content: start; gap: 1px; padding: 0 0 10px; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden;
  background: var(--papel); text-align: left; font: 13px var(--sans); color: var(--noite); cursor: pointer;
}
.marca-cor:hover { border-color: var(--vivo); }
.marca-cor:focus-visible { outline: 2px solid var(--vivo); outline-offset: 2px; }
.marca-amostra { display: block; height: 64px; margin-bottom: 7px; }
.marca-amostra.clara { box-shadow: inset 0 -1px 0 var(--linha); }
.marca-cor b, .marca-cor code, .marca-cor small { padding: 0 10px; }
.marca-cor b { font-weight: 700; }
.marca-cor code { font: 12px ui-monospace, monospace; color: var(--suave); }
.marca-cor small { font-size: 12px; color: var(--suave); }

.marca-letras { display: grid; gap: 10px; margin-bottom: 10px; }
.marca-letra { padding: 12px 14px; border-radius: 10px; background: var(--fundo); }
.marca-letra small { display: block; margin-top: 4px; font-size: 12px; color: var(--suave); }
.marca-ex-serif { font: 400 2rem/1.15 "Tinos", "TeX Gyre Termes", Times, serif; color: var(--vinho); }
.marca-ex-sans { font: 400 16px/1.45 "Lato", sans-serif; color: var(--noite); }

.marca-logos { display: grid; gap: 10px; margin: 6px 0 12px; }
.marca-logos figure { margin: 0; }
.marca-logos figcaption { margin-top: 6px; text-align: center; font: 700 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.marca-logo { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 26px 18px; border-radius: 12px; }
.marca-logo img { max-width: 88%; height: auto; }
.marca-logo.claro { background: var(--fundo); border: 1px solid var(--linha); }
.marca-logo.vinho { background: var(--vinho); }
.marca-logo.noite { background: linear-gradient(135deg, var(--noite), var(--escuro)); }
.marca-duas { display: grid; gap: 0 18px; }

.marca-modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.marca-modelo { margin: 0; }
.marca-modelo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--linha); border-radius: 10px; }
.marca-modelo figcaption { margin-top: 6px; font-size: 13px; }
.marca-modelo figcaption b { display: block; color: var(--vinho); }
.marca-modelo figcaption span, .marca-modelo figcaption small { display: block; color: var(--suave); }
.marca-modelo figcaption small { margin-top: 3px; font-size: 12px; }

.marca-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.marca-foto { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.marca-foto img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--fundo); }
.marca-foto figcaption { flex: 1; font-size: 12px; line-height: 1.35; color: var(--suave); }
.marca-foto figcaption b { color: var(--vinho); }
.marca-foto .botao-mini { align-self: flex-start; text-decoration: none; }

.marca-frase { font: 400 1.3rem/1.3 var(--serif); color: var(--vinho); }
.marca-forte { font-weight: 700; color: var(--vinho); }

@media (min-width: 600px) {
  .marca-cores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .marca-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marca-duas { grid-template-columns: 1fr 1fr; }
  .marca-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .marca-modelos { grid-template-columns: repeat(2, minmax(0, 240px)); }
}
@media (min-width: 900px) {
  .estr-ecra, .marca-ecra { max-width: 820px; }
  .estr-pedir { width: auto; }
  .marca-bloco { padding: 20px 24px; }
  .marca-fotos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}