/* Cards de destaque, pagina "Nossos Servicos!" e modo edicao de imagens.
   Vermelho Kea: #E30000. Os controles do modo edicao so existem quando o
   servidor injeta a barra/JS (body.ks-edicao); visitante nunca recebe nada. */

/* ---------- Cards de destaque (Inicio) ---------- */
/* Retrato 4:5 (1080x1350). 1 coluna no celular, 2 no tablet, 3 no desktop;
   largura maxima por card para a pagina nao ficar enorme em telas estreitas. */
.ks-destaques {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1.25rem;
  margin: 0 auto;
  max-width: 72rem;
}
.ks-destaques > .ks-espaco { width: 100%; max-width: 24rem; }
@media (min-width: 640px) {
  .ks-destaques { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .ks-destaques { grid-template-columns: repeat(3, 1fr); }
}
/* Carrossel so no celular, e so se o JS rodou (sem JS: cards empilhados). */
.ks-destaques__pontos { display: none; }
@media (max-width: 767px) {
  .ks-destaques-carrossel--ativo { overflow: hidden; max-width: 24rem; margin: 0 auto; }
  .ks-edicao .ks-destaques-carrossel--ativo { padding: 6px; }
  .ks-destaques-carrossel--ativo .ks-destaques {
    display: flex; gap: 0; max-width: none; touch-action: pan-y;
    transition: transform 0.35s ease;
  }
  .ks-destaques-carrossel--ativo .ks-destaques > .ks-espaco { flex: 0 0 100%; max-width: none; }
  .ks-destaques-carrossel--js + .ks-destaques__pontos { display: flex; justify-content: center; gap: 0.25rem; margin-top: 0.9rem; }
  .ks-destaques__ponto {
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 9999px;
  }
  .ks-destaques__ponto span { width: 0.65rem; height: 0.65rem; border-radius: 9999px; background: #cbd5e1; transition: background 0.2s, transform 0.2s; }
  .ks-destaques__ponto[aria-current="true"] span { background: var(--ks-vermelho, #e30000); transform: scale(1.2); }
  .ks-destaques__ponto:focus-visible { outline: 3px solid var(--ks-vermelho, #e30000); outline-offset: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-destaques-carrossel--ativo .ks-destaques { transition: none; }
}
.ks-espaco { position: relative; }
.ks-card-destaque__link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #0f172a;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ks-card-destaque__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.22);
}
.ks-card-destaque__link picture,
.ks-card-destaque__link .ks-espaco-img {
  display: block;
  width: 100%;
  height: 100%;
}
.ks-card-destaque__link .ks-espaco-img { object-fit: cover; }
.ks-card-destaque__etiqueta {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  max-width: calc(100% - 1.8rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 9999px;
  background: #fff;
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 900;
  color: #0f172a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

/* ---------- Modo edicao ---------- */
.ks-barra-edicao {
  position: fixed; top: 72px; left: 0; right: 0; z-index: 49; height: 44px;
  display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem;
  background: #0f172a; color: #fff; font-size: 0.85rem; overflow: hidden; white-space: nowrap;
}
.ks-barra-edicao__titulo { font-weight: 900; }
.ks-barra-edicao__aviso {
  border-radius: 9999px; background: #e30000; padding: 0.15rem 0.7rem; font-weight: 900;
}
.ks-barra-edicao__dica { color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; }
.ks-barra-edicao__sair { margin-left: auto; }
.ks-barra-edicao__sair button {
  border: 1px solid #fff; border-radius: 9999px; background: transparent; color: #fff;
  padding: 0.25rem 0.9rem; font-weight: 800; cursor: pointer;
}
.ks-barra-edicao__sair button:hover { background: #fff; color: #0f172a; }
@media (max-width: 640px) { .ks-barra-edicao__dica { display: none; } }
.ks-edicao main { padding-top: calc(6rem + 44px); }

.ks-edicao .ks-espaco { outline: 3px dashed #e30000; outline-offset: 3px; border-radius: 1.25rem; }
.ks-trocar-imagem {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5;
  border: 0; border-radius: 9999px; background: #e30000; color: #fff; cursor: pointer;
  padding: 0.45rem 1rem; font-size: 0.8rem; font-weight: 900;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.ks-trocar-imagem:hover { background: #b91c1c; }

.ks-modal-fundo {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 12, 0.7); padding: 1rem;
}
.ks-modal-fundo[hidden] { display: none; }
.ks-modal {
  width: 100%; max-width: 32rem; max-height: 92vh; overflow: auto;
  border-radius: 1.25rem; background: #fff; padding: 1.5rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.ks-modal h2 { font-size: 1.2rem; font-weight: 900; color: #0f172a; }
.ks-modal label[hidden], .ks-modal__seguro[hidden] { display: none; }
.ks-modal small { color: #64748b; }
.ks-modal label { display: block; margin-top: 0.9rem; font-size: 0.8rem; font-weight: 800; color: #334155; }
.ks-modal input[type="text"] {
  width: 100%; margin-top: 0.3rem; border: 1px solid #cbd5e1; border-radius: 0.6rem; padding: 0.5rem 0.7rem;
}
.ks-modal input[type="file"] { display: block; margin-top: 0.3rem; font-size: 0.85rem; }
.ks-modal__seguro { margin-top: 0.5rem; font-size: 0.8rem; color: #475569; }
.ks-drop { position: relative; margin-top: 0.9rem; }
.ks-drop__rotulo { display: block; font-size: 0.8rem; font-weight: 800; color: #334155; }
.ks-drop__input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap;
}
.ks-drop .ks-drop__area {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 0.4rem; min-height: 8.5rem; padding: 1rem; text-align: center; cursor: pointer;
  border: 2px dashed #94a3b8; border-radius: 1rem; background: #f8fafc;
  font-size: 0.85rem; font-weight: 700; color: #475569; transition: border-color 0.15s, background 0.15s;
}
.ks-drop .ks-drop__area:hover, .ks-drop.ks-drop--arrastando .ks-drop__area { border-color: #e30000; background: #fff1f2; color: #b91c1c; }
.ks-drop .ks-drop__input:focus-visible + .ks-drop__area { outline: 3px solid #e30000; outline-offset: 2px; }
.ks-drop .ks-drop__area svg { width: 2rem; height: 2rem; }
.ks-drop.ks-drop--erro .ks-drop__area { border-color: #b91c1c; background: #fef2f2; }
.ks-drop__cheio {
  display: flex; align-items: center; gap: 0.9rem; margin-top: 0.4rem; padding: 0.7rem;
  border: 2px solid #cbd5e1; border-radius: 1rem; background: #f8fafc;
}
.ks-drop__cheio[hidden], .ks-drop .ks-drop__area[hidden], .ks-drop__erro[hidden] { display: none; }
.ks-drop__miniatura { flex: none; width: 5rem; overflow: hidden; border-radius: 0.6rem; background: #e2e8f0; }
.ks-drop__miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ks-drop__info { min-width: 0; flex: 1; }
.ks-drop__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; font-weight: 800; color: #0f172a; }
.ks-drop__botoes { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.ks-drop__botoes button {
  border: 1px solid #cbd5e1; border-radius: 0.6rem; background: #fff; cursor: pointer;
  padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 800; color: #0f172a;
}
.ks-drop__botoes button[data-remover] { color: #b91c1c; border-color: #fecaca; }
.ks-drop__erro { margin-top: 0.4rem; font-size: 0.8rem; font-weight: 800; color: #b91c1c; }
.ks-modal__erro { margin-top: 0.8rem; font-size: 0.85rem; font-weight: 800; color: #b91c1c; }
.ks-modal__acoes { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.2rem; }
.ks-modal__acoes button {
  border-radius: 0.8rem; padding: 0.6rem 1.2rem; font-weight: 900; cursor: pointer; border: 2px solid #cbd5e1; background: #fff;
}
.ks-modal__acoes button[data-confirmar] { border-color: #e30000; background: #e30000; color: #fff; }
.ks-modal__acoes button:disabled { opacity: 0.6; cursor: wait; }