/* Porta da demonstração — padrão Stargex: fundo claro, navy, azul de
   destaque, campos e botões em pílula. Fica sozinha de propósito: esta tela
   abre tanto no endereço da Stargex quanto no de uma loja de demonstração,
   e não pode depender do menu de nenhum dos dois. */
:root{
  --navy:#12294A;
  --azul:#1E6BE1;
  --azul-escuro:#1755B4;
  --fundo:#F4F6FA;
  --borda:#E2E7F0;
  --texto:#1B2637;
  --texto-fraco:#69768C;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;padding:24px 16px;
  padding-top:calc(24px + env(safe-area-inset-top,0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(30,107,225,.16), transparent 70%),
    var(--fundo);
  color:var(--texto);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  display:grid;place-items:center;
}
.porta{width:100%;max-width:560px}
.porta-caixa{
  background:#fff;border:1px solid var(--borda);border-radius:28px;
  padding:34px 30px;box-shadow:0 18px 48px rgba(18,41,74,.14);
}
.porta-marca{
  margin:0 0 14px;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);
}
.porta h1{margin:0 0 10px;font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.porta-texto{margin:0 0 20px;color:var(--texto-fraco);line-height:1.55;font-size:.98rem}

.porta-erro{
  margin:0 0 16px;padding:12px 18px;border-radius:999px;
  background:#FDECEC;color:#A32020;font-size:.92rem;font-weight:600;text-align:center;
}

.porta-form{display:grid;gap:14px}
.porta-oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.porta-dupla{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:460px){ .porta-dupla{grid-template-columns:1fr} }

.porta-campo{display:grid;gap:6px}
.porta-campo > span{font-size:.86rem;font-weight:700;padding-left:16px;color:var(--texto)}
.porta-campo > span i{font-style:normal;font-weight:500;color:var(--texto-fraco)}
.porta-campo input{
  width:100%;padding:14px 20px;border-radius:999px;
  border:1.5px solid var(--borda);background:var(--fundo);
  font:inherit;font-size:1rem;color:var(--texto);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.porta-campo input::placeholder{color:#9AA6B8}
.porta-campo input:focus{
  outline:none;background:#fff;border-color:var(--azul);
  box-shadow:0 0 0 4px rgba(30,107,225,.14);
}

.porta-aceite{
  display:flex;gap:11px;align-items:flex-start;
  padding:14px 18px;border-radius:20px;background:var(--fundo);
  font-size:.88rem;line-height:1.5;color:var(--texto-fraco);
}
.porta-aceite input{margin-top:2px;width:18px;height:18px;accent-color:var(--azul);flex:none}

.porta-botao{
  margin-top:4px;padding:15px 24px;border:0;border-radius:999px;
  background:var(--azul);color:#fff;font:inherit;font-size:1.02rem;font-weight:800;
  cursor:pointer;transition:background .15s, transform .08s, box-shadow .15s;
  box-shadow:0 10px 24px rgba(30,107,225,.28);
}
.porta-botao:hover{background:var(--azul-escuro)}
.porta-botao:active{transform:translateY(1px)}

.porta-validade{margin:0;text-align:center;font-size:.82rem;color:var(--texto-fraco)}

.porta-aviso{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--borda);
  font-size:.79rem;line-height:1.6;color:var(--texto-fraco);
}
.porta-aviso b{color:var(--texto)}
.porta-volta{margin:16px 0 0;text-align:center;font-size:.88rem}
.porta-volta a{color:var(--azul);text-decoration:none;font-weight:700}
.porta-volta a:hover{text-decoration:underline}
.porta-caixa > .porta-validade{margin-top:18px;font-size:.9rem;line-height:1.5}
.porta-validade a{color:var(--azul);font-weight:700;text-decoration:none}
.porta-validade a:hover{text-decoration:underline}

/* Recado neutro (o tempo da demonstração acabou). */
.porta-info{
  margin:0 0 16px;padding:12px 18px;border-radius:999px;
  background:#EAF1FD;color:var(--azul-escuro);font-size:.92rem;font-weight:600;text-align:center;
}

/* ------------------------------------------------ o joinha no fim da demonstração */
.avaliacao{text-align:center}
.avaliacao .porta-form,.avaliacao .porta-campo{text-align:left}
.joinhas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 18px}
.joinha{
  display:grid;justify-items:center;gap:10px;padding:24px 12px 20px;border-radius:28px;
  border:1.5px solid var(--borda);background:var(--fundo);color:var(--texto);
  font:inherit;font-size:1.05rem;font-weight:800;cursor:pointer;
  transition:border-color .15s, background .15s, transform .08s, box-shadow .15s;
}
.joinha:active{transform:translateY(1px)}
.joinha-sim svg{color:#128C5A}
.joinha-nao svg{color:#C93B3B}
.joinha-sim:hover,.joinha-sim:focus-visible{border-color:#128C5A;background:#EAF7F0;outline:none;
  box-shadow:0 10px 24px rgba(18,140,90,.16)}
.joinha-nao:hover,.joinha-nao:focus-visible{border-color:#C93B3B;background:#FDEEEE;outline:none;
  box-shadow:0 10px 24px rgba(201,59,59,.14)}
.avaliacao-selo{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;margin:0 auto 14px}
.avaliacao-selo.sim{background:#EAF7F0;color:#128C5A}
.avaliacao-selo.nao{background:#FDEEEE;color:#C93B3B}
.avaliacao-comentario{margin-bottom:18px}
.porta-campo textarea{
  width:100%;min-height:96px;padding:14px 20px;border-radius:24px;resize:vertical;
  border:1.5px solid var(--borda);background:var(--fundo);font:inherit;font-size:1rem;color:var(--texto);
}
.porta-campo textarea:focus{outline:none;background:#fff;border-color:var(--azul);box-shadow:0 0 0 4px rgba(30,107,225,.14)}
.avaliacao-acoes{display:grid;gap:10px}
.porta-botao-whats,.porta-botao-claro{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none}
.porta-botao-whats{background:#128C5A;box-shadow:0 10px 24px rgba(18,140,90,.25);color:#fff}
.porta-botao-whats:hover{background:#0E7349}
.porta-botao-claro{background:#fff;color:var(--navy);border:1.5px solid var(--borda);box-shadow:none}
.porta-botao-claro:hover{background:var(--fundo)}
.avaliacao-trocar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin-top:20px;font-size:.88rem;color:var(--texto-fraco)}
.avaliacao-trocar button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--borda);background:#fff;color:var(--texto);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.avaliacao-trocar button[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
@media (max-width:380px){ .joinha{padding:20px 8px 16px;font-size:.98rem} }