/* ============================================================
   My Mockup Phone — tema claro, tons pastéis (verde e azul),
   fonte Nunito, sem gradientes.
   ============================================================ */
:root{
  --verde:        #BFE3C6;  /* verde pastel  */
  --verde-claro:  #E7F4EA;
  --verde-escuro: #2F7A4D;
  --azul:         #BFD9F2;  /* azul pastel   */
  --azul-claro:   #EAF2FB;
  --azul-escuro:  #2F5E96;
  --fundo:        #F7FAF9;
  --card:         #FFFFFF;
  --texto:        #2A3733;
  --texto-suave:  #5E6F69;
  --borda:        #DDE8E2;
  --raio:         16px;
  --sombra:       0 4px 18px rgba(47, 94, 150, .08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--fundo);
  color:var(--texto);
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%}
a{color:var(--azul-escuro);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- topo ---------- */
.topo{background:var(--card);border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:50}
.topo-linha{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:700;color:var(--texto)}
.logo b{color:var(--azul-escuro)}
.menu{display:flex;align-items:center;gap:18px;font-weight:700;flex-wrap:wrap}
.menu a{color:var(--texto-suave)}
.menu a:hover{color:var(--azul-escuro)}
.lang{color:var(--texto-suave);font-size:.85rem}
.lang em{margin:0 4px;font-style:normal}
.lang a.ativo{color:var(--verde-escuro);font-weight:900}

/* ---------- botões ---------- */
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:800;
  padding:11px 22px;border-radius:999px;transition:transform .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.btn-principal{background:var(--verde-escuro);color:#fff}
.btn-principal:hover{background:#276742}
.btn-azul{background:var(--azul-escuro);color:#fff}
.btn-azul:hover{background:#264D7C}
.btn-suave{background:var(--azul-claro);color:var(--azul-escuro)}
.btn-suave:hover{background:var(--azul)}
.btn-grande{padding:15px 32px;font-size:1.05rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- hero ---------- */
.hero{padding:72px 0 48px;text-align:center;background:var(--verde-claro);border-bottom:1px solid var(--borda)}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;line-height:1.15;max-width:760px;margin:0 auto 14px}
.hero h1 span{color:var(--verde-escuro)}
.hero p{max-width:560px;margin:0 auto 28px;color:var(--texto-suave);font-size:1.1rem}
.hero-acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-fila{display:flex;gap:26px;justify-content:center;align-items:flex-end;margin-top:44px;flex-wrap:wrap}
.hero-fila canvas{height:190px;width:auto;filter:drop-shadow(0 10px 14px rgba(42,55,51,.18))}

/* ---------- seções ---------- */
.secao{padding:64px 0}
.secao h2{font-size:1.9rem;font-weight:900;text-align:center;margin-bottom:8px}
.secao .sub{color:var(--texto-suave);text-align:center;max-width:520px;margin:0 auto 40px}

/* passos */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.passo{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:26px;box-shadow:var(--sombra)}
.passo .num{display:inline-flex;width:40px;height:40px;border-radius:12px;background:var(--azul);
  color:var(--azul-escuro);font-weight:900;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:14px}
.passo:nth-child(2) .num{background:var(--verde);color:var(--verde-escuro)}
.passo h3{font-size:1.1rem;margin-bottom:6px}
.passo p{color:var(--texto-suave);font-size:.95rem}

/* ---------- grade de aparelhos ---------- */
.aparelhos-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.aparelho{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px 14px 16px;text-align:center;box-shadow:var(--sombra);
  transition:transform .15s ease, border-color .15s ease;display:block;color:var(--texto)}
.aparelho:hover{transform:translateY(-4px);border-color:var(--verde-escuro)}
.aparelho canvas{height:150px;width:auto;margin-bottom:12px}
.aparelho .marca{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--azul-claro);color:var(--azul-escuro);border-radius:999px;padding:2px 10px;margin-bottom:6px}
.aparelho h3{font-size:.98rem;font-weight:800;line-height:1.3}
.aparelho .res{font-size:.78rem;color:var(--texto-suave)}

/* ---------- editor ---------- */
.editor-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:26px 0 18px;flex-wrap:wrap}
.editor-topo h1{font-size:1.5rem;font-weight:900}
.editor-topo .uso{font-size:.9rem;font-weight:700;background:var(--verde-claro);color:var(--verde-escuro);
  border-radius:999px;padding:6px 16px}
.editor-topo .uso.cheio{background:#FCEBE8;color:#A4402F}
.editor{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;margin-bottom:60px}
@media (max-width:860px){.editor{grid-template-columns:1fr}}
.palco{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:26px;display:flex;justify-content:center;min-height:480px;align-items:center}
.palco canvas{max-width:100%;max-height:640px;height:auto}
.painel{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);padding:22px}
.painel h2{font-size:1rem;font-weight:900;margin:18px 0 8px}
.painel h2:first-child{margin-top:0}

.solta{border:2px dashed var(--azul);border-radius:14px;background:var(--azul-claro);
  padding:26px 16px;text-align:center;cursor:pointer;font-weight:700;color:var(--azul-escuro);
  transition:background .15s ease}
.solta:hover,.solta.sobre{background:var(--azul)}
.solta .mini{display:block;font-size:.78rem;font-weight:600;color:var(--texto-suave);margin-top:6px}
.solta input{display:none}

.opcoes{display:flex;gap:8px;flex-wrap:wrap}
.opcao{flex:1;border:2px solid var(--borda);background:var(--card);border-radius:12px;
  padding:9px 10px;font:inherit;font-weight:700;cursor:pointer;color:var(--texto-suave)}
.opcao.ativa{border-color:var(--verde-escuro);color:var(--verde-escuro);background:var(--verde-claro)}
.linha-cor{display:flex;align-items:center;gap:10px;margin-top:8px}
.linha-cor input[type=color]{width:44px;height:34px;border:1px solid var(--borda);border-radius:8px;background:var(--card);cursor:pointer;padding:2px}
.chave{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer;margin-top:6px}
.chave input{width:20px;height:20px;accent-color:var(--verde-escuro)}
.painel .btn{width:100%;margin-top:20px;text-align:center}
.aviso{margin-top:14px;font-size:.85rem;background:var(--verde-claro);color:var(--verde-escuro);
  border-radius:10px;padding:10px 14px;font-weight:700}
.aviso.erro{background:#FCEBE8;color:#A4402F}
.aviso a{text-decoration:underline}

/* ---------- formulários ---------- */
.form-caixa{max-width:420px;margin:56px auto;background:var(--card);border:1px solid var(--borda);
  border-radius:var(--raio);box-shadow:var(--sombra);padding:34px}
.form-caixa h1{font-size:1.5rem;font-weight:900;margin-bottom:20px;text-align:center}
.campo{margin-bottom:16px}
.campo label{display:block;font-weight:800;font-size:.9rem;margin-bottom:6px}
.campo input{width:100%;padding:12px 14px;border:2px solid var(--borda);border-radius:12px;
  font:inherit;background:var(--fundo)}
.campo input:focus{outline:none;border-color:var(--azul-escuro);background:var(--card)}
.campo .dica{font-size:.78rem;color:var(--texto-suave);margin-top:4px}
.form-caixa .btn{width:100%;margin-top:8px}
.form-caixa .alt{text-align:center;margin-top:18px;font-size:.9rem}
.form-erro{background:#FCEBE8;color:#A4402F;border-radius:10px;padding:10px 14px;
  font-weight:700;font-size:.9rem;margin-bottom:16px}

/* ---------- planos ---------- */
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:720px;margin:0 auto}
.plano{background:var(--card);border:2px solid var(--borda);border-radius:var(--raio);padding:30px;box-shadow:var(--sombra)}
.plano.destaque{border-color:var(--verde-escuro)}
.plano .selo{display:inline-block;font-size:.72rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  background:var(--verde);color:var(--verde-escuro);border-radius:999px;padding:3px 12px;margin-bottom:10px}
.plano h3{font-size:1.2rem;font-weight:900}
.plano .preco{font-size:2.4rem;font-weight:900;margin:6px 0 16px}
.plano .preco small{font-size:1rem;color:var(--texto-suave);font-weight:700}
.plano ul{list-style:none;margin-bottom:22px}
.plano li{padding:7px 0;border-bottom:1px dashed var(--borda);font-weight:600}
.plano li::before{content:'✓';color:var(--verde-escuro);font-weight:900;margin-right:9px}
.plano .btn{width:100%;text-align:center}
.plano .atual{display:block;text-align:center;font-weight:800;color:var(--verde-escuro);
  background:var(--verde-claro);border-radius:999px;padding:11px}
.planos-nota{text-align:center;color:var(--texto-suave);font-size:.85rem;margin-top:22px}

/* ---------- conta ---------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:32px}
.cartao{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:22px;box-shadow:var(--sombra)}
.cartao .rotulo{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-suave)}
.cartao .valor{font-size:1.7rem;font-weight:900;color:var(--azul-escuro)}
.cartao .extra{font-size:.85rem;color:var(--texto-suave)}
.tabela{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra)}
.tabela th,.tabela td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--borda);font-size:.92rem}
.tabela th{background:var(--azul-claro);color:var(--azul-escuro);font-weight:800}

/* ---------- retorno de pagamento ---------- */
.retorno{max-width:520px;margin:70px auto;text-align:center;background:var(--card);
  border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);padding:44px 30px}
.retorno .icone{width:72px;height:72px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:2rem;margin-bottom:16px;font-weight:900}
.retorno.ok .icone{background:var(--verde-claro);color:var(--verde-escuro)}
.retorno.pend .icone{background:var(--azul-claro);color:var(--azul-escuro)}
.retorno.erro .icone{background:#FCEBE8;color:#A4402F}
.retorno h1{font-size:1.5rem;margin-bottom:8px}
.retorno p{color:var(--texto-suave);margin-bottom:24px}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--borda);background:var(--card);padding:30px 0;text-align:center;margin-top:40px}
.rodape .mini{font-size:.8rem;color:var(--texto-suave)}