/* Modal de produtos — compartilhado por index.html e produtos.html.
   Extraído do <style> inline de produtos.html para não duplicar.

   ESTRUTURA, EM COLUNA ÚNICA:
   título → subtítulo → foto → texto → itens → botões.

   REGRA DESTE COMPONENTE: cabe inteiro na tela, sem rolagem e sem
   remover texto. O conteúdo dava ~880px numa janela de 648px. O ajuste
   é dimensional, não estrutural:
     1. a foto tem a ALTURA controlada e a largura derivada dela,
        preservando o 16:9 original — era o item mais alto (347px);
     2. o modal fica mais largo, então o texto ocupa menos linhas;
     3. fontes e espaçamentos em clamp() presos à ALTURA da viewport,
        para telas baixas encolherem em vez de rolar. */

.produto-card { cursor: pointer; position: relative; }
.produto-card__cta { display: flex; align-items: center; gap: 0.375rem; margin-top: auto; padding-top: 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--verde); opacity: 0.7; transition: opacity 0.3s; }
.produto-card:hover .produto-card__cta { opacity: 1; }
.produto-card__cta svg { transition: transform 0.3s; }
.produto-card:hover .produto-card__cta svg { transform: translateX(3px); }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vh, 2rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal-overlay.is-active { opacity: 1; visibility: visible; pointer-events: all; }

.modal {
  background: var(--bg);
  border-radius: 20px;
  width: 100%;
  /* mais largo que os 680px originais: reduz as linhas do texto */
  max-width: 840px;
  max-height: calc(100dvh - clamp(1.5rem, 6vh, 4rem));
  /* auto e não scroll: no conteúdo atual nunca rola; fica como rede de
     segurança se um texto muito maior for cadastrado no futuro */
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s var(--ease-out);
}

.modal-overlay.is-active .modal { transform: translateY(0) scale(1); }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(1rem, 2.2vh, 1.5rem) clamp(1.25rem, 2.5vw, 2rem) 0;
}

.modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
  flex-shrink: 0;
}

.modal__close:hover { background: var(--verde); color: #fff; border-color: var(--verde); }

/* Ícone não aparece no popup — o título já identifica o produto.
   O JS segue preenchendo o elemento; basta remover esta regra para voltar. */
.modal__icon { display: none; }

.modal__body { padding: clamp(0.7rem, 1.6vh, 1.1rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2.2vh, 1.5rem); }

.modal__title { font-size: clamp(1.125rem, 2.5vh, 1.625rem); font-weight: 800; line-height: 1.15; color: var(--text-primary); margin-bottom: 0.3rem; }
.modal__subtitle { font-size: clamp(0.75rem, 1.6vh, 0.875rem); color: var(--verde); font-weight: 600; margin-bottom: clamp(0.6rem, 1.5vh, 1rem); }

/* A foto é o item mais alto da pilha, então tem a altura controlada.
   ALTURA explícita + aspect-ratio: a largura é derivada dela, o que
   preserva o 16:9 original das fotos. Se fosse largura 100% com
   max-height, a caixa achatava e o object-fit recortava o topo e a base. */
.modal__image {
  /* orçamento de ALTURA; a largura sai dele */
  --foto-h: clamp(160px, 38vh, 440px);
  width: 100%;
  /* teto de largura derivado da altura: assim, quando a tela é estreita
     manda a largura, quando é baixa manda a altura, e o 16:9 nunca quebra */
  max-width: calc(var(--foto-h) * 16 / 9);
  aspect-ratio: 16 / 9;
  height: auto;
  margin-inline: auto;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  margin-bottom: clamp(0.7rem, 1.6vh, 1.1rem);
}

/* contain garante o quadro inteiro mesmo se uma foto vier fora de 16:9 */
.modal__image img { width: 100%; height: 100%; object-fit: contain; }

.modal__text { font-size: clamp(0.8125rem, 1.7vh, 0.9375rem); line-height: 1.6; color: var(--text-secondary); margin-bottom: clamp(0.7rem, 1.6vh, 1.1rem); }

.modal__features { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.35rem, 0.9vh, 0.65rem) 1rem; margin-bottom: clamp(0.8rem, 1.9vh, 1.25rem); }
.modal__feature { display: flex; align-items: center; gap: 0.5rem; font-size: clamp(0.75rem, 1.55vh, 0.8125rem); color: var(--text-primary); }
.modal__feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); flex-shrink: 0; }

.modal__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.modal__actions .btn { padding: clamp(0.55rem, 1.4vh, 0.8rem) clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.8125rem, 1.65vh, 0.9375rem); }

/* ─── Mobile ───
   As features seguem em 2 colunas mesmo em tela estreita: empilhar as 6
   viraria 6 linhas (~90px), mais caro que qualquer redução de fonte. */
@media (max-width: 879px) {
  .modal { max-width: 560px; }
  .modal__header { padding-top: clamp(0.75rem, 1.8vh, 1.25rem); }
  .modal__body { padding-top: clamp(0.5rem, 1.2vh, 0.9rem); }
  .modal__title { font-size: clamp(1.0625rem, 2.4vh, 1.375rem); }
  .modal__subtitle { margin-bottom: clamp(0.5rem, 1.2vh, 0.85rem); }
  .modal__image { --foto-h: clamp(110px, 22vh, 220px); margin-bottom: clamp(0.6rem, 1.4vh, 0.9rem); }
  .modal__text { font-size: clamp(0.78125rem, 1.6vh, 0.875rem); line-height: 1.5; margin-bottom: clamp(0.6rem, 1.4vh, 0.9rem); }
  .modal__features { gap: clamp(0.3rem, 0.8vh, 0.5rem) 0.75rem; margin-bottom: clamp(0.7rem, 1.6vh, 1rem); }
  .modal__feature { font-size: clamp(0.6875rem, 1.45vh, 0.78125rem); align-items: flex-start; }
  .modal__feature-dot { margin-top: 0.45em; }
  .modal__actions { gap: 0.5rem; }
  .modal__actions .btn { padding: clamp(0.5rem, 1.2vh, 0.7rem) 0.9rem; font-size: clamp(0.75rem, 1.5vh, 0.8125rem); }
}

/* Os botões dividem a linha em vez de empilhar.
   nowrap no container + min-width:0 no botão: sem isso eles quebram em
   duas fileiras e custam 40px de altura. */
@media (max-width: 480px) {
  .modal__actions { flex-wrap: nowrap; }
  .modal__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding-inline: 0.5rem;
    font-size: clamp(0.6875rem, 1.4vh, 0.78125rem);
  }
}

/* Aparelhos baixos: a foto encolhe primeiro, é o que menos custa */
@media (max-width: 879px) and (max-height: 660px) {
  .modal__image { --foto-h: 17vh; }
  .modal__title { font-size: 1rem; margin-bottom: 0.2rem; }
  .modal__subtitle { font-size: 0.71875rem; margin-bottom: 0.45rem; }
  .modal__text { line-height: 1.42; margin-bottom: 0.5rem; }
  .modal__features { margin-bottom: 0.6rem; gap: 0.25rem 0.7rem; }
  .modal__header { padding-top: 0.7rem; }
  .modal__body { padding-top: 0.5rem; padding-bottom: 0.8rem; }
}