/* =====================================================
   OFERTONA.ONLINE
   PRODUTO.CSS
   TEMPLATE MESTRE DE PRODUTO V2.0
===================================================== */

.pagina-produto{
    width:100%;
    max-width:1280px;
    margin:40px auto;
    padding:0 20px;
}

.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:30px;
    color:#999;
    font-size:14px;
}

.breadcrumb a{
    color:#ffb400;
    transition:color .2s ease;
}

.breadcrumb a:hover{
    color:#ffd04d;
}

.produto-topo{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:42px;
    align-items:start;
    padding:34px;
    background:#0b0b0b;
    border:1px solid rgba(255,180,0,.16);
    border-radius:24px;
}

/* =====================================================
   GALERIA
===================================================== */

.galeria-produto{
    width:100%;
    min-width:0;
    position:sticky;
    top:110px;
}

.imagem-principal{
    width:100%;
    min-height:430px;
    padding:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fff;
    border-radius:20px;
}

.imagem-principal img{
    width:100%;
    max-width:520px;
    max-height:380px;
    object-fit:contain;
    transition:transform .3s ease;
}

.imagem-principal:hover img{
    transform:scale(1.035);
}

.miniaturas{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:16px;
}

.miniaturas button{
    width:78px;
    height:78px;
    padding:7px;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
    border:2px solid transparent;
    border-radius:12px;
    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.miniaturas button:hover,
.miniaturas button:focus,
.miniaturas button.miniatura-ativa{
    border-color:#ffb400;
    transform:translateY(-2px);
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    outline:none;
}

.miniaturas img{
    width:100%;
    height:100%;
    object-fit:contain;
}

/* =====================================================
   INFORMAÇÕES DO PRODUTO
===================================================== */

.info-produto{
    min-width:0;
}

.nota-ofertona{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 17px;
    background:#ffb400;
    color:#000;
    border-radius:999px;
    font-size:15px;
    font-weight:900;
}

.categoria-superior{
    margin:18px 0 6px;
    color:#999;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.info-produto h1{
    margin:10px 0 20px;
    color:#fff;
    font-size:46px;
    line-height:1.08;
}

.resumo-produto{
    margin-bottom:24px;
    color:#d6d6d6;
    font-size:18px;
    line-height:1.75;
}

.resumo-geo{
    margin-bottom:24px;
    padding:22px;
    background:#111;
    border:1px solid rgba(255,180,0,.16);
    border-radius:17px;
}

.resumo-geo h2{
    margin-bottom:10px;
    color:#ffb400;
    font-size:23px;
}

.resumo-geo p{
    color:#ddd;
}

/* =====================================================
   ONDE COMPRAR
===================================================== */

.onde-comprar{
    padding:24px;
    background:#111;
    border:1px solid rgba(255,180,0,.18);
    border-radius:19px;
}

.titulo-onde-comprar{
    margin-bottom:18px;
}

.titulo-onde-comprar h2{
    margin-bottom:5px;
    color:#ffb400;
    font-size:25px;
}

.titulo-onde-comprar p{
    color:#aaa;
    font-size:14px;
}

.lista-ofertas{
    display:grid;
    gap:16px;
}

.card-oferta{
    position:relative;
    padding:20px;
    background:#0b0b0b;
    border:1px solid #252525;
    border-radius:16px;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.card-oferta:hover{
    transform:translateY(-2px);
    border-color:rgba(255,180,0,.5);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.card-oferta.oferta-destaque{
    border-color:#ffb400;
    box-shadow:0 0 0 1px rgba(255,180,0,.18);
}

.selo-melhor-opcao{
    display:inline-block;
    margin-bottom:14px;
    padding:6px 11px;
    background:#ffb400;
    color:#000;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.oferta-loja{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.oferta-loja h3{
    margin:0;
    color:#fff;
    font-size:22px;
}

.status-oferta{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    background:#171717;
    color:#d7d7d7;
    border:1px solid #2c2c2c;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.oferta-detalhes{
    margin-bottom:16px;
}

.oferta-detalhes p{
    margin:5px 0;
    color:#bdbdbd;
    font-size:14px;
}

.preco-oferta{
    color:#fff !important;
    font-size:20px !important;
    font-weight:900;
}

.oferta-detalhes small{
    display:block;
    margin-top:8px;
    color:#777;
}

.botao-comprar{
    display:block;
    width:100%;
    padding:15px 20px;
    background:#ffb400;
    color:#000;
    border-radius:11px;
    text-align:center;
    font-size:14px;
    font-weight:900;
    letter-spacing:.02em;
    transition:
        background .2s ease,
        transform .2s ease;
}

.botao-comprar:hover{
    background:#ffd04d;
    transform:translateY(-1px);
}

.aviso-afiliado{
    margin-top:16px;
    color:#777;
    font-size:12px;
    line-height:1.5;
}

/* =====================================================
   SEÇÕES GERAIS
===================================================== */

.secao-produto{
    margin-top:42px;
    padding:30px;
    background:#0b0b0b;
    border:1px solid rgba(255,180,0,.12);
    border-radius:19px;
}

.secao-produto h2{
    margin-bottom:20px;
    color:#ffb400;
    font-size:30px;
    line-height:1.2;
}

.secao-produto h3{
    color:#fff;
}

.secao-produto p{
    color:#d2d2d2;
    line-height:1.75;
}

.lista-destaques,
.lista-fontes{
    display:grid;
    gap:12px;
}

.lista-destaques li,
.lista-fontes li{
    position:relative;
    padding-left:24px;
    color:#ddd;
}

.lista-destaques li::before,
.lista-fontes li::before{
    content:"•";
    position:absolute;
    left:5px;
    color:#ffb400;
    font-weight:900;
}

/* =====================================================
   TABELA TÉCNICA
===================================================== */

.tabela-responsiva{
    width:100%;
    overflow-x:auto;
}

.tabela-tecnica{
    width:100%;
    border-collapse:collapse;
}

.tabela-tecnica tr:nth-child(even){
    background:#101010;
}

.tabela-tecnica th,
.tabela-tecnica td{
    padding:16px;
    border:1px solid #262626;
    text-align:left;
    vertical-align:top;
}

.tabela-tecnica th{
    width:34%;
    background:#111;
    color:#ffb400;
    font-weight:800;
}

.tabela-tecnica td{
    color:#ddd;
}

/* =====================================================
   PRÓS E CONTRAS
===================================================== */

.pros-contras{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.pros-contras .secao-produto{
    margin-top:42px;
}

.bloco-pros{
    border-color:rgba(66,201,116,.25);
}

.bloco-contras{
    border-color:rgba(238,93,93,.25);
}

.bloco-pros h2{
    color:#6ad497;
}

.bloco-contras h2{
    color:#ff8585;
}

.bloco-pros ul,
.bloco-contras ul{
    display:grid;
    gap:13px;
}

.bloco-pros li,
.bloco-contras li{
    position:relative;
    padding-left:28px;
    color:#ddd;
}

.bloco-pros li::before{
    content:"✓";
    position:absolute;
    left:3px;
    color:#6ad497;
    font-weight:900;
}

.bloco-contras li::before{
    content:"!";
    position:absolute;
    left:7px;
    color:#ff8585;
    font-weight:900;
}

/* =====================================================
   CARDS DE CONTEÚDO
===================================================== */

.grade-conteudos,
.grade-relacionados{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.card-conteudo,
.card-relacionado{
    padding:22px;
    background:#111;
    border:1px solid #242424;
    border-radius:16px;
    transition:
        transform .2s ease,
        border-color .2s ease;
}

.card-conteudo:hover,
.card-relacionado:hover{
    transform:translateY(-3px);
    border-color:rgba(255,180,0,.5);
}

.card-conteudo h3,
.card-relacionado h3{
    margin:0 0 12px;
    color:#fff;
    font-size:20px;
}

.card-conteudo p{
    margin-bottom:16px;
    color:#aaa;
    font-size:14px;
}

.card-conteudo a,
.card-relacionado a{
    color:#ffb400;
    font-weight:800;
}

.card-relacionado img{
    width:100%;
    height:190px;
    margin-bottom:16px;
    padding:12px;
    background:#fff;
    border-radius:12px;
    object-fit:contain;
}

/* =====================================================
   FAQ
===================================================== */

.faq-produto{
    overflow:hidden;
}

.faq-item{
    margin-bottom:12px;
    background:#111;
    border:1px solid #252525;
    border-radius:13px;
}

.faq-item:last-child{
    margin-bottom:0;
}

.faq-item summary{
    position:relative;
    padding:18px 52px 18px 18px;
    color:#fff;
    cursor:pointer;
    font-size:17px;
    font-weight:800;
    list-style:none;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:"+";
    position:absolute;
    top:50%;
    right:18px;
    transform:translateY(-50%);
    color:#ffb400;
    font-size:26px;
    font-weight:400;
}

.faq-item[open] summary::after{
    content:"−";
}

.faq-item p{
    padding:0 18px 18px;
    color:#bbb;
}

/* =====================================================
   SISTEMA OMEGA
===================================================== */

.omega-explicacao{
    margin-top:-8px;
    margin-bottom:22px;
    color:#999 !important;
    font-size:14px;
}

.omega-principal{
    margin-bottom:24px;
    padding:24px;
    background:#111;
    border:1px solid rgba(255,180,0,.18);
    border-radius:16px;
}

.omega-principal strong{
    display:block;
    margin-bottom:4px;
    color:#fff;
    font-size:18px;
}

.omega-principal > span{
    display:block;
    margin-bottom:14px;
    color:#ffb400;
    font-size:36px;
    font-weight:900;
}

.barra-omega{
    width:100%;
    height:13px;
    overflow:hidden;
    background:#242424;
    border-radius:999px;
}

.barra-omega > span{
    display:block;
    height:100%;
    background:#ffb400;
    border-radius:999px;
}

.omega-grade{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:15px;
}

.omega-grade div{
    padding:20px 14px;
    background:#111;
    border:1px solid rgba(255,180,0,.16);
    border-radius:14px;
    text-align:center;
}

.omega-grade strong{
    display:block;
    margin-bottom:7px;
    color:#ffb400;
}

.omega-grade span{
    color:#fff;
    font-size:25px;
    font-weight:900;
}

/* =====================================================
   BLOCO GEO E FONTES
===================================================== */

.geo-lista{
    display:grid;
    gap:0;
    overflow:hidden;
    border:1px solid #242424;
    border-radius:14px;
}

.geo-lista > div{
    display:grid;
    grid-template-columns:220px 1fr;
    border-bottom:1px solid #242424;
}

.geo-lista > div:last-child{
    border-bottom:0;
}

.geo-lista dt,
.geo-lista dd{
    margin:0;
    padding:16px;
}

.geo-lista dt{
    background:#111;
    color:#ffb400;
    font-weight:800;
}

.geo-lista dd{
    color:#ddd;
}

.data-editorial{
    margin-top:20px;
    color:#777 !important;
    font-size:14px;
}

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

@media(max-width:1050px){

    .produto-topo{
        grid-template-columns:1fr;
    }

    .galeria-produto{
        position:static;
    }

    .grade-conteudos,
    .grade-relacionados{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .omega-grade{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media(max-width:760px){

    .pagina-produto{
        margin-top:24px;
        padding:0 14px;
    }

    .produto-topo{
        gap:28px;
        padding:20px;
    }

    .imagem-principal{
        min-height:330px;
        padding:20px;
    }

    .info-produto h1{
        font-size:36px;
    }

    .pros-contras{
        grid-template-columns:1fr;
        gap:0;
    }

    .grade-conteudos,
    .grade-relacionados{
        grid-template-columns:1fr;
    }

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

    .geo-lista > div{
        grid-template-columns:1fr;
    }

    .geo-lista dt{
        padding-bottom:7px;
    }

    .geo-lista dd{
        padding-top:7px;
    }

}

@media(max-width:480px){

    .produto-topo,
    .secao-produto{
        padding:18px;
        border-radius:15px;
    }

    .imagem-principal{
        min-height:260px;
        padding:14px;
    }

    .miniaturas button{
        width:64px;
        height:64px;
    }

    .info-produto h1{
        font-size:30px;
    }

    .resumo-produto{
        font-size:16px;
    }

    .oferta-loja{
        align-items:flex-start;
        flex-direction:column;
    }

    .omega-grade{
        grid-template-columns:1fr 1fr;
    }

    .tabela-tecnica th,
    .tabela-tecnica td{
        padding:13px;
    }

}