/* Container de preview da foto e overlays (barra superior + legenda inferior) */

.preview-section {
  margin: 20px 16px 0;
  display: none;
}

.preview-section.visible {
  display: block;
}

/* Proporção 3:4 forçada — object-fit:cover recorta a foto para preencher */
.photo-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sombra);
  line-height: 0;
}

#photoImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius);
}

/* ── Barra superior: PMES ← texto → BPTran ──
   Flexbox centraliza o texto verticalmente com os brasões.
   Paradas explícitas no gradiente para compatibilidade com iOS Safari/Chrome. */
.ov-top-bar {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(to bottom,
      transparent 20%,
      rgba(0, 50, 100, 0.8) 20%,
      rgba(0, 50, 100, 0.8) 80%,
      transparent 80%);
  padding: 0 28px;
}

/* aspect-ratio força iOS a calcular altura corretamente no flexbox */
.ov-logo-item {
  flex: 0 0 auto;
  width: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Escala proporcional ao container (= canvas: iw*38/680 exibido em containerW):
   containerW ≈ (100vw - 32px)  →  (100vw - 32px)*38/680 = 5.59vw - 1.79px */
.ov-top-text {
  flex: 1;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(14px, calc(5.59vw - 1.79px), 36px);
  line-height: 1.2;
}

/* Escala proporcional ao container (= canvas: iw*32/680 exibido em containerW):
   containerW ≈ (100vw - 32px)  →  (100vw - 32px)*32/680 = 4.71vw - 1.51px
   max-width: 80% espelha iw*0.80 usado no canvas. */
.ov-bot {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(12px, calc(4.71vw - 1.51px), 30px);
  line-height: 1.35;
  white-space: normal;
  max-width: 80%;
  background: rgba(0, 50, 100, 0.8);
  padding: 7px 16px;
  border-radius: 5px;
}