/* ==========================================
RESET BASICO
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

/* ==========================================
BODY
========================================== */

body{
background:#f3f5f8;
color:#1f2937;
}

/* ==========================================
TOPO
========================================== */

.topo{
background:linear-gradient(135deg,#0b2540,#133a63);
padding:42px 20px 28px;
text-align:center;
color:white;
box-shadow:0 8px 20px rgba(11,37,64,0.18);
}

.topo h1{
font-size:48px;
margin-bottom:20px;
letter-spacing:-0.5px;
}

.botoes-topo button{
background:#eef2f7;
border:none;
padding:10px 25px;
border-radius:999px;
margin:5px;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:0.25s ease;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.botoes-topo button:hover{
transform:translateY(-2px) scale(1.02);
background:#ffffff;
}

/* ==========================================
BLOCO STICKY DE NAVEGAÇÃO
========================================== */

.bloco-sticky-navegacao{
position:sticky;
top:0;
z-index:3000;
background:linear-gradient(180deg, rgba(11,37,64,0.98) 0%, rgba(16,45,77,0.98) 100%);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 12px 30px rgba(11,37,64,0.18);
transition:box-shadow 0.28s ease;
}

/* ==========================================
BUSCA PREMIUM GLASS
========================================== */

.busca{
display:flex;
justify-content:center;
background:linear-gradient(135deg,#0b2540,#133a63);
padding:0 20px 16px;
}

.busca-premium{
background:transparent;
padding:14px 20px 12px;
}

.busca-wrap{
position:relative;
width:100%;
max-width:780px;
margin:0 auto;
}

.busca-wrap::before{
content:"";
position:absolute;
inset:-2px;
border-radius:999px;
background:linear-gradient(135deg, rgba(255,255,255,0.30), rgba(125,211,252,0.18), rgba(255,255,255,0.10));
opacity:0.95;
z-index:0;
pointer-events:none;
filter:blur(0.2px);
}

.busca-wrap::after{
content:"";
position:absolute;
left:18px;
right:18px;
top:8px;
height:40%;
border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.06));
pointer-events:none;
z-index:1;
}

.busca-icone{
position:absolute;
left:19px;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
color:#41698f;
z-index:3;
pointer-events:none;
transition:all 0.28s ease;
}

.busca-icone svg{
width:22px;
height:22px;
display:block;
}

.busca input{
width:80%;
max-width:720px;
padding:16px 20px;
border-radius:999px;
border:none;
font-size:16px;
outline:none;
box-shadow:0 8px 24px rgba(0,0,0,0.12);
}

.busca-premium input{
position:relative;
z-index:2;
width:100%;
max-width:none;
padding:19px 56px 19px 56px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.30);
font-size:17px;
font-weight:800;
outline:none;
background:linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(243,248,255,0.82) 100%);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
color:#0f172a;
box-shadow:
0 16px 36px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -1px 0 rgba(255,255,255,0.28);
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease,
background 0.28s ease;
}

.busca-premium input::placeholder{
color:#475569;
font-weight:800;
opacity:1;
transition:opacity 0.22s ease;
}

.busca-premium input:focus{
transform:translateY(-2px) scale(1.005);
border-color:rgba(125,211,252,0.95);
background:linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(240,247,255,0.92) 100%);
box-shadow:
0 20px 44px rgba(0,0,0,0.22),
0 0 0 5px rgba(125,211,252,0.16),
0 0 22px rgba(125,211,252,0.20),
inset 0 1px 0 rgba(255,255,255,0.98);
}

.busca-premium input:focus::placeholder{
opacity:0.75;
}

.busca-premium .busca-wrap:focus-within .busca-icone{
color:#0ea5e9;
transform:translateY(-50%) scale(1.08);
}

.busca-limpar{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%) scale(0.9);
width:34px;
height:34px;
border:none;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(15,23,42,0.08);
color:#334155;
font-size:22px;
font-weight:700;
line-height:1;
cursor:pointer;
z-index:4;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity 0.22s ease,
transform 0.22s ease,
background 0.22s ease,
color 0.22s ease;
}

.busca-limpar.ativo{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(-50%) scale(1);
}

.busca-limpar:hover{
background:rgba(239,68,68,0.12);
color:#dc2626;
}

.busca-limpar:active{
transform:translateY(-50%) scale(0.94);
}

body.busca-em-foco .bloco-sticky-navegacao{
box-shadow:0 16px 36px rgba(11,37,64,0.24);
}

/* ==========================================
MENU CATEGORIAS
========================================== */

.menu-categorias{
background:#0b2540;
padding:10px;
display:flex;
align-items:center;
position:relative;
top:auto;
z-index:1;
box-shadow:0 4px 12px rgba(0,0,0,0.10);
}

.seta{
background:#eef2f7;
border:none;
padding:8px 12px;
border-radius:10px;
cursor:pointer;
font-size:18px;
margin:5px;
transition:0.2s;
flex-shrink:0;
font-weight:700;
}

.seta:hover{
transform:scale(1.05);
background:#ffffff;
}

.categorias-container{
display:flex;
overflow-x:auto;
gap:30px;
padding:10px;
flex:1;
scroll-behavior:smooth;
}

.categorias-container::-webkit-scrollbar{
display:none;
}

.categoria{
color:white;
font-size:18px;
white-space:nowrap;
cursor:pointer;
transition:0.2s;
font-weight:700;
position:relative;
}

.categoria:hover{
color:#7dd3fc;
}

.categoria::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#7dd3fc;
transition:0.25s ease;
}

.categoria:hover::after{
width:100%;
}

/* ==========================================
SUBCATEGORIAS
========================================== */

.menu-subcategorias{
background:#102d4d;
padding:10px;
display:flex;
align-items:center;
position:relative;
top:auto;
z-index:1;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.subcategorias-container{
display:flex;
overflow-x:auto;
gap:22px;
width:100%;
padding:10px;
scroll-behavior:smooth;
}

.subcategorias-container::-webkit-scrollbar{
display:none;
}

.subcategoria{
color:white;
font-size:15px;
white-space:nowrap;
cursor:pointer;
transition:0.2s;
padding:7px 12px;
border-radius:999px;
background:rgba(255,255,255,0.05);
}

.subcategoria:hover{
color:#ffffff;
background:rgba(125,211,252,0.22);
}

/* ==========================================
PRODUTOS
========================================== */

.produtos{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 310px));
justify-content:center;
align-items:stretch;
gap:24px;
padding:36px 20px 42px;
}

.produto{
background:#ffffff;
width:100%;
border-radius:22px;
padding:16px;
text-align:center;
box-shadow:0 10px 28px rgba(15,23,42,0.08);
position:relative;
transition:0.28s ease;
overflow:hidden;
border:1px solid #e8edf4;
display:flex;
flex-direction:column;
height:100%;
min-height:790px;
}

.produto-conteudo-fixo{
display:flex;
flex-direction:column;
flex:1;
height:100%;
}

.produto:hover{
transform:translateY(-7px);
box-shadow:0 18px 38px rgba(15,23,42,0.14);
}

/* garante comportamento consistente dentro do card */
.produto > *{
width:100%;
}

.produto img{
max-width:100%;
}

/* ==========================================
CARROSSEL PREMIUM
========================================== */

.carrossel{
width:100%;
height:280px;
position:relative;
overflow:hidden;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%, #f7fafc 100%);
margin-bottom:14px;
isolation:isolate;
border:1px solid #edf2f7;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
flex-shrink:0;
}

.carrossel::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom, rgba(255,255,255,0.00) 55%, rgba(0,0,0,0.03) 100%);
pointer-events:none;
z-index:2;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
visibility:hidden;
transition:opacity 0.5s ease;
z-index:1;
pointer-events:none;
padding:12px;
}

.slide.ativo{
opacity:1;
visibility:visible;
z-index:2;
pointer-events:auto;
}

.slide img{
width:100%;
height:100%;
object-fit:contain;
display:block;
border-radius:14px;
background:#ffffff;
transition:transform 0.35s ease;
}

.produto:hover .slide.ativo img{
transform:scale(1.02);
}

.seta-carrossel{
position:absolute;
top:50%;
transform:translateY(-50%);
width:38px;
height:38px;
border:none;
border-radius:50%;
background:rgba(15,23,42,0.56);
color:#fff;
font-size:18px;
cursor:pointer;
z-index:7;
display:flex;
align-items:center;
justify-content:center;
transition:0.22s ease;
backdrop-filter:blur(4px);
box-shadow:0 6px 18px rgba(0,0,0,0.18);
}

.seta-carrossel:hover{
background:rgba(15,23,42,0.78);
transform:translateY(-50%) scale(1.08);
}

.seta-carrossel.esquerda{
left:10px;
}

.seta-carrossel.direita{
right:10px;
}

.indicadores-carrossel{
position:absolute;
left:50%;
bottom:12px;
transform:translateX(-50%);
display:flex;
gap:7px;
z-index:7;
background:rgba(15,23,42,0.22);
padding:6px 10px;
border-radius:999px;
backdrop-filter:blur(5px);
}

.indicador{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,0.55);
transition:0.2s;
cursor:pointer;
}

.indicador.ativo{
background:#ffffff;
transform:scale(1.18);
box-shadow:0 0 0 3px rgba(255,255,255,0.15);
}

.badge-topo{
position:absolute;
top:10px;
left:10px;
z-index:8;
background:linear-gradient(45deg,#0ea5e9,#2563eb);
color:#fff;
font-size:11px;
font-weight:800;
padding:7px 10px;
border-radius:999px;
box-shadow:0 6px 16px rgba(37,99,235,0.28);
letter-spacing:0.3px;
max-width:calc(100% - 20px);
}

.contador-imagens{
position:absolute;
top:10px;
right:10px;
z-index:8;
background:rgba(15,23,42,.72);
color:#fff;
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight:800;
backdrop-filter:blur(4px);
box-shadow:0 4px 12px rgba(0,0,0,0.18);
}

/* ==========================================
SELOS E URGÊNCIA
========================================== */

.selo-oferta{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
margin:0 auto 12px;
align-self:center;
min-height:32px;
font-size:12px;
font-weight:900;
letter-spacing:0.2px;
border:1px solid transparent;
box-shadow:0 8px 18px rgba(15,23,42,0.08);
}

.selo-oferta.oferta-tempo{
background:linear-gradient(45deg,#ff5a1f,#ff7a00);
color:#fff;
border-color:#ff7a00;
box-shadow:0 8px 18px rgba(255,100,0,0.24);
}

.selo-oferta.oferta-forte{
background:linear-gradient(135deg,#16a34a,#22c55e);
color:#fff;
border-color:#159447;
box-shadow:0 8px 20px rgba(34,197,94,0.24);
}

.selo-oferta.oferta-destaque{
background:linear-gradient(135deg,#fff7d6,#ffe08a);
color:#8a5200;
border-color:#f2c94c;
box-shadow:0 8px 18px rgba(242,201,76,0.22);
}

.selo-oferta.oferta-competitiva{
background:linear-gradient(135deg,#ecfeff,#d9f8ff);
color:#0f766e;
border-color:#99f6e4;
}

.selo-oferta.oferta-oportunidade{
background:linear-gradient(135deg,#eff6ff,#dbeafe);
color:#1d4ed8;
border-color:#bfdbfe;
}

.selo-desconto{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:13px;
font-weight:900;
padding:6px 12px;
border-radius:999px;
min-height:32px;
border:1px solid transparent;
box-shadow:0 6px 14px rgba(15,23,42,0.08);
letter-spacing:0.2px;
}

.selo-desconto.desconto-baixo{
background:#eefbf2;
color:#15803d;
border-color:#bbf7d0;
}

.selo-desconto.desconto-medio{
background:linear-gradient(135deg,#e8fff1,#d7f9e4);
color:#0f8a43;
border-color:#8ed3a9;
box-shadow:0 8px 18px rgba(22,163,74,0.14);
}

.selo-desconto.desconto-alto{
background:linear-gradient(135deg,#16a34a,#22c55e);
color:#ffffff;
border-color:#159447;
box-shadow:0 10px 22px rgba(34,197,94,0.24);
}

.urgencia-oferta{
margin-top:10px;
font-size:13px;
font-weight:800;
padding:10px 12px;
border-radius:12px;
line-height:1.4;
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border:1px solid transparent;
box-shadow:0 4px 12px rgba(15,23,42,0.04);
}

.urgencia-oferta.urgencia-tempo{
background:#fff4e8;
color:#b45309;
border-color:#fbd3a7;
}

.urgencia-oferta.urgencia-forte{
background:#eefcf3;
color:#166534;
border-color:#bbf7d0;
}

.urgencia-oferta.urgencia-desconto{
background:#f5fdf7;
color:#15803d;
border-color:#ccefd8;
}

.urgencia-oferta.urgencia-competitiva{
background:#eff6ff;
color:#1d4ed8;
border-color:#c7dcff;
}

.urgencia-oferta.urgencia-neutra{
background:#f8fafc;
color:#475569;
border-color:#e2e8f0;
}

.timer-oferta{
margin-top:10px;
background:#fff8e6;
color:#9a6700;
border:1px solid #f4d28b;
font-size:13px;
font-weight:800;
padding:10px 12px;
border-radius:12px;
box-shadow:0 4px 12px rgba(244,210,139,0.16);
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.prova-social{
margin-top:10px;
background:#f7f9fc;
border:1px solid #e5ebf3;
border-radius:12px;
padding:10px 12px;
font-size:13px;
line-height:1.45;
color:#334155;
text-align:center;
min-height:40px;
display:flex;
align-items:center;
justify-content:center;
}

.prova-social strong{
color:#0b2540;
}

.microcopy-compra{
width:100%;
display:flex;
align-items:center;
justify-content:center;
margin-top:8px;
min-height:40px;
text-align:center;
}

.microcopy-compra img{
height:16px;
width:auto;
max-width:70px;
object-fit:contain;
display:block;
flex-shrink:0;
}

.microcopy-compra .check{
color:#16a34a;
font-weight:800;
font-size:13px;
line-height:1;
flex-shrink:0;
}

.microcopy-compra.tem-marketplace{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
width:100%;
max-width:220px;
margin:8px auto 0;
background:linear-gradient(180deg, #fffbe6 0%, #fff3b0 100%);
border:1px solid #f2d94e;
border-radius:999px;
padding:5px 10px;
min-height:32px;
box-shadow:0 2px 8px rgba(0,0,0,0.06);
font-size:12px;
font-weight:600;
color:#1f2937;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
flex-shrink:0;
}

.microcopy-compra.tem-marketplace span{
display:inline-block;
line-height:1.1;
}

.microcopy-compra.ml{
color:#1f2937;
}

.microcopy-compra.shopee{
background:linear-gradient(180deg, #fff1eb 0%, #ffd8c7 100%);
border:1px solid #f59e0b;
color:#9a3412;
}

.microcopy-compra.amazon{
background:linear-gradient(180deg, #f8fafc 0%, #e5e7eb 100%);
border:1px solid #d1d5db;
color:#111827;
}

.microcopy-compra.magalu{
background:linear-gradient(180deg, #eef6ff 0%, #dbeafe 100%);
border:1px solid #93c5fd;
color:#1d4ed8;
}

.microcopy-compra.tem-marketplace:hover{
transform:translateY(-1px);
transition:0.18s ease;
}

/* ==========================================
TEXTOS PRODUTO
========================================== */

.produto h3{
margin-top:4px;
font-size:18px;
line-height:1.32;
min-height:72px;
font-weight:800;
color:#111827;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
letter-spacing:-0.2px;
}

.bloco-precos{
margin-top:8px;
display:flex;
flex-direction:column;
justify-content:flex-start;
min-height:94px;
}

.preco-antigo{
font-size:15px;
color:#8a8a8a;
text-decoration:line-through;
margin-bottom:5px;
font-weight:700;
min-height:18px;
display:flex;
align-items:center;
justify-content:center;
}

.preco{
font-size:28px;
color:#111827;
margin-top:4px;
font-weight:900;
letter-spacing:-0.4px;
min-height:38px;
display:flex;
align-items:center;
justify-content:center;
}

.linha-desconto{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-top:8px;
min-height:34px;
}

/* ==========================================
VENDO AGORA / CONVERSÃO
========================================== */

.vendo-agora-card{
margin-top:10px;
font-size:13px;
color:#5b6472;
font-weight:700;
background:#f8fafc;
border:1px solid #e6edf5;
padding:9px 10px;
border-radius:12px;
min-height:40px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.vendo-agora-card span{
color:#0b2540;
font-weight:800;
}

/* ==========================================
AÇÕES DO CARD
========================================== */

.acoes-produto{
margin-top:auto;
padding-top:12px;
display:flex;
flex-direction:column;
gap:10px;
}

.link-comprar{
display:block;
width:100%;
text-decoration:none;
}

.btn-historico{
width:100%;
padding:12px 14px;
background:#eef4ff;
color:#0b2540;
border:1px solid #cddcf8;
border-radius:12px;
font-size:14px;
font-weight:800;
cursor:pointer;
transition:0.22s ease;
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.btn-historico:hover{
transform:translateY(-1px);
background:#e4eeff;
}

.btn-monitorar{
width:100%;
padding:12px 14px;
background:#f5f0ff;
color:#5b21b6;
border:1px solid #ddd6fe;
border-radius:12px;
font-size:14px;
font-weight:800;
cursor:pointer;
transition:0.22s ease;
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.btn-monitorar:hover{
transform:translateY(-1px);
background:#ede9fe;
}

.btn-comprar{
width:100%;
padding:15px 16px;
background:linear-gradient(45deg,#ff6a00,#ff3300);
color:white;
border:none;
border-radius:12px;
font-size:16px;
font-weight:900;
cursor:pointer;
transition:0.22s ease;
box-shadow:0 8px 18px rgba(255,100,0,0.20);
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.btn-comprar:hover{
transform:translateY(-1px) scale(1.02);
box-shadow:0 12px 24px rgba(255,100,0,0.28);
}

/* ==========================================
MODAL HISTÓRICO
========================================== */

.modal-historico{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(11,37,64,0.72);
justify-content:center;
align-items:center;
z-index:10000;
padding:18px;
backdrop-filter:blur(4px);
}

.modal-historico-box{
background:#ffffff;
width:100%;
max-width:980px;
max-height:92vh;
overflow:auto;
border-radius:22px;
padding:22px;
position:relative;
box-shadow:0 24px 60px rgba(0,0,0,0.24);
}

.fechar-historico{
position:absolute;
top:12px;
right:12px;
width:38px;
height:38px;
border:none;
border-radius:50%;
background:#eff3f8;
color:#0b2540;
font-size:24px;
line-height:1;
cursor:pointer;
font-weight:700;
transition:0.2s;
}

.fechar-historico:hover{
transform:scale(1.06);
background:#e2e8f0;
}

.topo-historico{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
margin-bottom:18px;
padding-right:42px;
}

.historico-kicker{
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.8px;
color:#64748b;
margin-bottom:6px;
}

#historicoTitulo{
font-size:26px;
line-height:1.2;
color:#0f172a;
}

.historico-resumo{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:12px;
margin-bottom:16px;
}

.historico-card-resumo{
background:#f8fafc;
border:1px solid #e5edf6;
border-radius:16px;
padding:14px;
display:flex;
flex-direction:column;
gap:8px;
}

.historico-card-resumo span{
font-size:12px;
font-weight:800;
color:#64748b;
text-transform:uppercase;
letter-spacing:0.4px;
}

.historico-card-resumo strong{
font-size:22px;
color:#0b2540;
}

.historico-mensagem{
margin-bottom:14px;
padding:12px 14px;
border-radius:12px;
font-size:14px;
font-weight:700;
background:#eef4ff;
color:#0b2540;
border:1px solid #cddcf8;
}

.historico-mensagem.sucesso{
background:#ebfff2;
color:#0f8a43;
border-color:#bceccf;
}

.historico-mensagem.aviso{
background:#fff8e6;
color:#9a6700;
border-color:#f4d28b;
}

.historico-mensagem.erro{
background:#fff1f2;
color:#b42318;
border-color:#fecdd3;
}

.grafico-wrap{
width:100%;
background:#ffffff;
border:1px solid #e8eef5;
border-radius:18px;
padding:14px;
margin-bottom:18px;
overflow:hidden;
}

#graficoPreco{
display:block;
width:100%;
height:380px;
background:#fff;
border-radius:12px;
}

.historico-tabela{
margin-top:8px;
border:1px solid #e8eef5;
border-radius:14px;
overflow:hidden;
}

.cabecalho-historico,
.linha-historico{
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:0;
}

.cabecalho-historico{
background:#0b2540;
color:#fff;
font-weight:800;
font-size:14px;
}

.cabecalho-historico .col-historico{
color:#ffffff !important;
font-weight:800 !important;
}

.linha-historico:nth-child(even){
background:#f8fafc;
}

.col-historico{
padding:12px 14px;
border-bottom:1px solid #e8eef5;
font-size:14px;
color:#334155;
word-break:break-word;
}

.col-historico.destaque{
font-weight:800;
color:#0b2540;
}

/* ==========================================
LEGADOS MANTIDOS
========================================== */

.desconto{
position:absolute;
top:10px;
left:10px;
background:#ff0000;
color:#fff;
padding:5px 10px;
font-size:14px;
font-weight:bold;
border-radius:5px;
z-index:10;
}

.avaliacao{
color:#f5a623;
font-size:18px;
margin-top:5px;
}

.preco-original{
text-decoration:line-through;
color:gray;
font-size:14px;
}

.contador-oferta{
margin-top:10px;
background:#000;
color:#00ff88;
font-weight:bold;
padding:8px;
border-radius:6px;
font-size:14px;
animation:pulse 1s infinite;
}

@keyframes pulse{
0%{opacity:1;}
50%{opacity:0.6;}
100%{opacity:1;}
}

.barra-urgencia{
margin-top:10px;
padding:8px;
border-radius:6px;
font-weight:bold;
font-size:14px;
text-align:center;
color:#fff;
background:#28a745;
}

.vendo-agora{
font-size:13px;
color:#555;
margin-top:8px;
font-weight:bold;
}

.estoque-fake{
font-size:13px;
color:#d9534f;
font-weight:bold;
}

/* ==========================================
RODAPÉ
========================================== */

.rodape{
width:100%;
background:#0b2f57;
color:#fff;
text-align:center;
padding:20px 15px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:10px;
clear:both;
}

.rodape p{
margin:0;
color:#fff;
white-space:normal;
}

.social{
display:flex;
gap:20px;
margin-bottom:10px;
}

.social img{
width:35px;
}

#botaoAdminOculto{
display:none;
}

/* ==========================================
MODAIS
========================================== */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
justify-content:center;
align-items:center;
z-index:9999;
padding:15px;
backdrop-filter:blur(4px);
}

.modal-box{
background:#fff;
padding:25px;
border-radius:16px;
width:300px;
max-width:100%;
text-align:center;
animation:fadeIn 0.3s ease;
box-shadow:0 18px 40px rgba(0,0,0,0.20);
}

.modal-box h2{
margin-bottom:15px;
}

.modal-box input{
width:100%;
padding:10px;
margin:6px 0;
border-radius:10px;
border:1px solid #ccc;
}

.modal-box button{
margin-top:8px;
width:100%;
padding:10px;
border:none;
border-radius:10px;
background:#0b2540;
color:white;
cursor:pointer;
transition:0.2s;
font-weight:700;
}

.modal-box button:hover{
background:#133a63;
}

#loginMsg,
#regMsg{
margin-top:10px;
font-size:14px;
color:red;
}

@keyframes fadeIn{
from{opacity:0; transform:scale(0.9);}
to{opacity:1; transform:scale(1);}
}

#botaoAdminOculto{
background:#eef2f7;
border:none;
padding:10px 25px;
border-radius:999px;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:0.2s;
}

#botaoAdminOculto:hover{
transform:scale(1.05);
background:#ffffff;
}

#adminMsg,
#adminSenhaMsg,
#resetMsg,
#loginMsg,
#regMsg{
margin-top:10px;
font-size:14px;
color:red;
}

/* ==========================================
PÁGINA DE MONITORADOS
========================================== */

.pagina-monitorados{
background:#f5f7fb;
color:#1f2937;
}

.painel-layout{
display:flex;
min-height:100vh;
}

.painel-sidebar{
width:260px;
background:#0b2a4a;
color:#ffffff;
padding:24px 20px;
}

.painel-sidebar h2{
font-size:24px;
margin-bottom:8px;
}

.painel-sidebar p{
font-size:14px;
color:#d8e6f7;
margin-bottom:22px;
}

.painel-sidebar nav a{
display:block;
color:#ffffff;
text-decoration:none;
margin:12px 0;
padding:12px 14px;
border-radius:10px;
transition:0.2s;
font-weight:700;
}

.painel-sidebar nav a:hover,
.painel-sidebar nav a.ativo{
background:rgba(255,255,255,0.10);
}

.painel-conteudo{
flex:1;
padding:32px;
}

.monitorados-topo{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
flex-wrap:wrap;
margin-bottom:24px;
}

.monitorados-kicker{
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.8px;
color:#64748b;
margin-bottom:6px;
}

.monitorados-topo h1{
font-size:30px;
color:#0f172a;
margin-bottom:6px;
}

.monitorados-topo p{
color:#64748b;
font-size:15px;
}

.monitorados-resumo-box{
background:#ffffff;
border:1px solid #e8edf5;
border-radius:16px;
padding:18px 20px;
min-width:220px;
box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.monitorados-resumo-box span{
display:block;
font-size:13px;
color:#64748b;
margin-bottom:8px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.5px;
}

.monitorados-resumo-box strong{
font-size:30px;
color:#0b2a4a;
}

.monitorados-alerta{
margin-bottom:18px;
padding:14px 16px;
border-radius:12px;
background:#ebfff2;
border:1px solid #bceccf;
color:#0f8a43;
font-weight:700;
}

.monitorados-vazio{
background:#ffffff;
border:1px solid #e8edf5;
border-radius:18px;
padding:34px 24px;
text-align:center;
box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.monitorados-vazio h3{
font-size:24px;
margin-bottom:10px;
color:#0f172a;
}

.monitorados-vazio p{
color:#64748b;
line-height:1.5;
margin-bottom:18px;
}

.monitorados-botao-voltar{
display:inline-block;
text-decoration:none;
background:#0b2a4a;
color:#ffffff;
padding:12px 16px;
border-radius:10px;
font-weight:700;
transition:0.2s;
}

.monitorados-botao-voltar:hover{
background:#154a7a;
}

.monitorados-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:22px;
}

.monitorado-card{
background:#ffffff;
border:1px solid #e8edf5;
border-radius:18px;
overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,0.08);
display:flex;
flex-direction:column;
}

.monitorado-imagem{
position:relative;
width:100%;
height:240px;
background:#ffffff;
display:flex;
align-items:center;
justify-content:center;
padding:16px;
}

.monitorado-imagem img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

.monitorado-badge{
position:absolute;
top:12px;
left:12px;
background:#e8fff1;
color:#0f8a43;
border:1px solid #bceccf;
font-size:12px;
font-weight:800;
padding:6px 10px;
border-radius:999px;
}

.monitorado-corpo{
padding:18px;
display:flex;
flex-direction:column;
gap:12px;
}

.monitorado-corpo h3{
font-size:18px;
line-height:1.35;
color:#111827;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:72px;
}

.monitorado-precos{
display:flex;
flex-direction:column;
gap:6px;
}

.monitorado-preco-antigo{
font-size:14px;
color:#8a8a8a;
text-decoration:line-through;
font-weight:600;
}

.monitorado-preco-atual{
font-size:24px;
font-weight:800;
color:#0f172a;
}

.monitorado-meta{
font-size:13px;
color:#64748b;
font-weight:700;
}

.monitorado-acoes{
display:flex;
flex-direction:column;
gap:10px;
margin-top:4px;
}

.monitorado-link-comprar{
display:block;
width:100%;
text-decoration:none;
}

.monitorado-form-remover{
width:100%;
}

.btn-remover-monitoramento{
width:100%;
padding:12px 14px;
background:#fff1f2;
color:#b42318;
border:1px solid #fecdd3;
border-radius:10px;
font-size:14px;
font-weight:800;
cursor:pointer;
transition:0.2s;
}

.btn-remover-monitoramento:hover{
background:#ffe4e6;
}

/* ==========================================
BOTÃO JÁ MONITORANDO
========================================== */

.btn-monitorando{
width:100%;
padding:12px 14px;
background:#e8fff1;
color:#0f8a43;
border:1px solid #bceccf;
border-radius:12px;
font-size:14px;
font-weight:800;
cursor:not-allowed;
transition:0.2s;
opacity:0.92;
min-height:46px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.btn-monitorando:hover{
transform:none;
background:#e8fff1;
}

@media(max-width:900px){
.painel-layout{
flex-direction:column;
}

.painel-sidebar{
width:100%;
}

.painel-conteudo{
padding:20px;
}
}

@media(max-width:768px){
.monitorados-topo h1{
font-size:24px;
}

.produto-conteudo-fixo{
height:auto;
}

.bloco-precos,
.preco-antigo,
.preco,
.linha-desconto,
.timer-oferta,
.vendo-agora-card,
.urgencia-oferta,
.microcopy-compra{
min-height:auto;
}

.monitorados-grid{
grid-template-columns:1fr;
}

.monitorado-imagem{
height:220px;
}
}

/* ==========================================
RESPONSIVO
========================================== */

@media(max-width:992px){

.produtos{
grid-template-columns:repeat(auto-fit, minmax(260px, 280px));
gap:20px;
padding:28px 14px 34px;
}

.produto{
min-height:775px;
}

.historico-resumo{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

}

@media(max-width:768px){

.topo{
padding:28px 14px 22px;
}

.topo h1{
font-size:24px;
}

.busca{
padding:0 12px 12px;
}

.busca-premium{
padding:10px 12px 10px;
}

.busca input{
width:90%;
font-size:15px;
padding:14px 16px;
}

.busca-wrap{
max-width:100%;
}

.busca-wrap::after{
left:12px;
right:12px;
top:7px;
}

.busca-premium input{
width:100%;
padding:15px 46px 15px 44px;
font-size:15px;
border-radius:18px;
}

.busca-icone{
left:14px;
width:19px;
height:19px;
}

.busca-icone svg{
width:19px;
height:19px;
}

.busca-limpar{
right:10px;
width:30px;
height:30px;
font-size:20px;
}

.menu-categorias,
.menu-subcategorias{
padding:8px 6px;
}

.categorias-container,
.subcategorias-container{
gap:16px;
padding:8px;
}

.categoria{
font-size:16px;
}

.subcategoria{
font-size:14px;
}

.produtos{
grid-template-columns:1fr;
}

.produto{
width:100%;
max-width:360px;
min-height:auto;
padding:14px;
border-radius:18px;
}

.carrossel{
height:250px;
border-radius:16px;
}

.seta-carrossel{
width:34px;
height:34px;
font-size:15px;
}

.indicadores-carrossel{
bottom:8px;
padding:4px 7px;
}

.produto h3{
min-height:auto;
font-size:17px;
}

.preco{
font-size:23px;
min-height:auto;
}

.bloco-precos{
min-height:auto;
}

.preco-antigo{
min-height:auto;
}

.linha-desconto{
min-height:auto;
}

.vendo-agora-card,
.urgencia-oferta,
.timer-oferta,
.microcopy-compra{
min-height:auto;
}

.btn-comprar{
font-size:15px;
padding:13px 14px;
}

.prova-social{
font-size:12px;
min-height:auto;
}

.timer-oferta,
.urgencia-oferta,
.vendo-agora-card,
.microcopy-compra{
font-size:12px;
}

.modal-historico{
padding:12px;
}

.modal-historico-box{
padding:18px;
max-height:95vh;
}

#historicoTitulo{
font-size:22px;
}

.historico-card-resumo strong{
font-size:18px;
}

#graficoPreco{
height:300px;
}

.cabecalho-historico,
.linha-historico{
grid-template-columns:1fr;
}

.col-historico{
padding:10px 12px;
}

}

.preco-antigo-placeholder,
.linha-desconto-placeholder,
.timer-oferta-placeholder,
.selo-desconto-placeholder{
visibility:hidden;
}

.preco-antigo-placeholder{
display:flex;
align-items:center;
justify-content:center;
min-height:18px;
}

.linha-desconto-placeholder{
display:flex;
align-items:center;
justify-content:center;
min-height:34px;
}

.timer-oferta-placeholder{
display:flex;
align-items:center;
justify-content:center;
min-height:42px;
}

.selo-desconto-placeholder{
min-height:32px;
}

@media(max-width:480px){

.topo h1{
font-size:22px;
}

.busca input{
width:94%;
}

.busca-premium input{
width:100%;
padding:14px 40px 14px 42px;
font-size:14px;
}

.busca-icone{
left:13px;
width:18px;
height:18px;
}

.busca-icone svg{
width:18px;
height:18px;
}

.busca-limpar{
right:8px;
width:28px;
height:28px;
font-size:18px;
}

.produtos{
padding:22px 10px 30px;
gap:16px;
}

.produto{
max-width:100%;
border-radius:16px;
}

.carrossel{
height:230px;
border-radius:14px;
}

.slide img{
border-radius:12px;
}

.badge-topo{
font-size:10px;
padding:6px 9px;
}

.contador-imagens{
font-size:11px;
padding:5px 9px;
}

.selo-oferta{
font-size:11px;
padding:7px 10px;
}

.preco{
font-size:21px;
}

.preco-antigo{
font-size:14px;
}

.btn-comprar{
border-radius:10px;
}

.modal-box{
padding:20px;
}

.historico-resumo{
grid-template-columns:1fr;
}

.btn-historico,
.btn-monitorar,
.btn-monitorando{
font-size:13px;
padding:11px 12px;
}

#graficoPreco{
height:260px;
}

}

/* ==========================================
AVISO DE OFERTA POR TEMPO LIMITADO NO CARD
========================================== */

.aviso-tempo-limitado{
    width:100%;
    margin:8px auto 6px;
    padding:9px 12px;
    border-radius:14px;
    font-size:13px;
    font-weight:900;
    line-height:1.25;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid transparent;
    box-shadow:0 8px 18px rgba(249,115,22,0.14);
}

.aviso-tempo-limitado.aviso-tempo-real{
    background:linear-gradient(135deg,#fff1eb,#ffe1cc);
    color:#9a3412;
    border-color:#fdba74;
    animation:pulseOfertaTempo 1.45s infinite;
}

.aviso-tempo-limitado.aviso-tempo-geral{
    background:linear-gradient(135deg,#fff7ed,#ffedd5);
    color:#b45309;
    border-color:#fed7aa;
}

@keyframes pulseOfertaTempo{
    0%{transform:scale(1); box-shadow:0 8px 18px rgba(249,115,22,0.14);}
    50%{transform:scale(1.025); box-shadow:0 10px 24px rgba(249,115,22,0.24);}
    100%{transform:scale(1); box-shadow:0 8px 18px rgba(249,115,22,0.14);}
}