/* marcador salvo pelo bloco permanece no DOM (para o GTranslate ler), mas invisível na tela */
.gqz-i18n{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.gqz-data{ display:none !important; }

/* overlay */
#gate-ov{position:fixed;inset:0;background:rgba(2,6,23,.65);backdrop-filter:blur(2px);z-index:999999;display:none;align-items:center;justify-content:center}
#gate-card{width:92%;max-width:560px;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* header/progresso */
.g-top{display:flex;align-items:center;gap:10px;padding:14px 18px 0}
.g-bar{width:80px;height:8px;border-radius:999px;background:#e6e9f2;position:relative;overflow:hidden}
.g-step{padding:2px 18px 10px;color:#64748b;font-size:12px}

/* conteúdo */
.g-sec{padding:0 18px 18px}
.g-title{margin:0 0 8px 0;font-weight:800;font-size:20px;color:#0f172a}

/* opções (imagem + texto) — inspirado no layout do print, com cor vindo da paleta */
.g-opts{display:grid;grid-template-columns:1fr;gap:14px}

/* modo BOTÕES (sem imagem) */
.g-opts.g-mode-buttons{grid-template-columns:1fr;gap:14px}
.g-mode-buttons .g-opt{border-radius:18px;background:#eef2ff;border-color:#c7d2fe;overflow:hidden}
.g-mode-buttons .g-opt:hover{border-color:#a5b4fc}
.g-mode-buttons .g-opt-media{display:none}
.g-mode-buttons .g-opt-footer{min-height:64px;background:transparent;color:#1e293b;font-size:18px}
.g-mode-buttons .g-opt.sel{background:var(--gqz-grad);border-color:transparent}
.g-mode-buttons .g-opt.sel .g-opt-footer{color:#fff}

/*
  Responsividade (MOBILE):
  Quando o JS adiciona .g-opts-2col (2–4 opções), queremos manter 2 colunas
  também no mobile — reduzindo imagem/spacing para caber.
*/
.g-opts.g-opts-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:420px){.g-opts.g-opts-2col{gap:10px}}

.g-opt{position:relative;display:block;width:100%;padding:0;border:2px solid #e5e7eb;border-radius:18px;background:#fff;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;overflow:hidden;text-align:center}
.g-opt:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.12);border-color:rgba(2,6,23,.12)}
.g-opt:active{transform:translateY(0)}
.g-opt.sel{border-color:transparent;box-shadow:0 18px 46px rgba(0,0,0,.20)}

/* mídia (imagem): formato RETANGULAR EM PÉ (portrait) */
.g-opt-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5; /* mais alto que largo */
  object-fit:cover;
}

.g-opt-footer{display:flex;align-items:center;justify-content:center;min-height:62px;padding:12px 12px;font-weight:900;letter-spacing:.2px;line-height:1.15;color:#fff;background:var(--gqz-grad, #16a34a)}
.g-opt:hover .g-opt-footer{filter:brightness(.98)}
.g-opt.sel .g-opt-footer{filter:brightness(.92)}

/* loading */
#g-loading{display:none;text-align:center;padding:20px 18px 28px}
.g-loader{display:flex;justify-content:center;gap:10px;margin:8px 0 12px}
.g-dot{width:10px;height:10px;border-radius:999px;background:#818cf8;opacity:.6;animation:gqz-b 1s infinite}
.g-dot:nth-child(2){animation-delay:.15s}.g-dot:nth-child(3){animation-delay:.3s}
@keyframes gqz-b{0%,80%,100%{transform:scale(.6)}40%{transform:scale(1)}}
.g-loadmsg{font-weight:800;color:#3949ab}

/* resultado */
#g-result{display:none;padding:16px 18px 24px}
.g-r-title{font-weight:800;font-size:22px;color:#0f172a;text-align:center;margin:0 0 16px 0}
.g-final{display:block;width:100%;text-align:center;padding:16px 18px;border-radius:14px;font-weight:800;color:#fff;text-decoration:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
@media (max-width:420px){.g-title{font-size:18px}}

@media (max-width:420px){.g-opt-footer{min-height:56px;font-size:14px}}
@media (max-width:420px){.g-opts-2col .g-opt-footer{min-height:52px;font-size:13px;padding:10px}}

@media (max-width:420px){
  .g-mode-buttons .g-opt-footer{min-height:56px;font-size:16px}
}


/* desktop: deixa o gate mais estreito (mais "margem" nas laterais) */
@media (min-width: 768px){
  #gate-card{ width: 86%; max-width: 560px; }
}