/*
Theme Name: Produtos Unidos
Theme URI: https://produtosunidos.com.br
Author: Silas
Description: Tema do Produtos Unidos — site de produtos testados com links de afiliado. Estilo Apple, branco, mobile-first.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: produtos-unidos
*/

/* ===== Tokens (azul da Apple, medido de apple.com) ===== */
:root{
  --bg:#FFFFFF; --bg-alt:#F5F5F7; --card:#FFFFFF;
  --text:#1D1D1F; --text-2:#6E6E73; --text-3:#86868B;
  --border:#D2D2D7; --border-soft:#E8E8ED;
  --accent:#0071E3; --accent-ink:#0066CC; --accent-press:#0077ED; --accent-soft:#E8F1FD;
  --gold:#B0820C; --gold-solid:#F2B705;
  --nav-bg:rgba(255,255,255,.72);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 4px 20px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.10);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  font-size:17px; line-height:1.5; letter-spacing:-.011em; -webkit-font-smoothing:antialiased}
.wrap{max-width:1024px; margin:0 auto; padding:0 22px}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.08; text-wrap:balance}
p{text-wrap:pretty; margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ===== Botões / links ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:1rem; font-weight:500;
  padding:12px 22px; border-radius:980px; border:1px solid transparent; cursor:pointer; line-height:1;
  transition:background-color .18s cubic-bezier(.16,1,.3,1), border-color .18s cubic-bezier(.16,1,.3,1); text-align:center}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-press)}
.btn-ghost{background:transparent; color:var(--accent-ink); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-block{width:100%}
.arrow{color:var(--accent-ink); font-weight:500; display:inline-flex; align-items:center; gap:3px}
.arrow:hover{text-decoration:underline; text-underline-offset:3px}
.arrow::after{content:"›"; font-weight:600; transition:transform .18s cubic-bezier(.16,1,.3,1)}
.arrow:hover::after{transform:translateX(2px)}

/* ===== Marca / logo ===== */
.brand{display:inline-flex; align-items:center; gap:12px; color:var(--accent)}
/* O selo transborda o padding vertical: a margem negativa impede que ele
   estique a altura da barra — ele cresce por cima, sem empurrar o layout. */
.brand .seal{width:68px; height:68px; display:block; flex:none}
.brand .nm{display:flex; flex-direction:column; line-height:.93; font-weight:800; letter-spacing:-.026em; font-size:1.16rem}
/* rodapé: tem espaço de sobra, pode ser maior ainda */
.ft .brand .seal{width:86px; height:86px; margin-block:0}
.ft .brand .nm{font-size:1.4rem}
@media (max-width:640px){
  .nav .row{min-height:74px}
  .brand .seal{width:58px; height:58px}
  .brand .nm{font-size:1.02rem}
  .ft .brand .seal{width:70px; height:70px}
  .ft .brand .nm{font-size:1.2rem}
}

/* ===== Nav ===== */
/* A barra tem altura suficiente para conter o logo inteiro — assim a linha
   divisória fica limpa embaixo de tudo, sem cortar as estrelas. */
header.nav{position:sticky; top:0; z-index:50; background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border-soft)}
.nav .row{display:flex; align-items:center; justify-content:space-between; min-height:88px; gap:18px}
.nav nav{display:none; gap:26px}
.nav nav a{font-size:.82rem; color:var(--text-2)}
.nav nav a:hover{color:var(--text)}
@media(min-width:820px){.nav nav{display:flex}}
.nav .navcode{font-size:.82rem; color:var(--accent-ink); font-weight:500; white-space:nowrap}

/* ===== Seções ===== */
section{padding:88px 0}
.sec-alt{background:var(--bg-alt)}
.sec-head{text-align:center; max-width:640px; margin:0 auto 52px}
.sec-head .kick{font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:12px}
.sec-head h2{font-size:clamp(1.9rem,4.6vw,3rem)}
.sec-head p{font-size:clamp(1.05rem,2vw,1.3rem); color:var(--text-2); font-weight:400; margin:14px auto 0; max-width:36ch; line-height:1.4}

/* ===== Hero ===== */
.hero{text-align:center; padding:76px 0 20px}
.hero h1{font-size:clamp(2.6rem,7vw,4.2rem)}
.hero .lede{font-size:clamp(1.15rem,2.4vw,1.5rem); color:var(--text-2); font-weight:400; letter-spacing:-.015em;
  max-width:24ch; margin:16px auto 0; line-height:1.32}
.hero .links{display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:22px; font-size:1.05rem}

/* ===== Busca por código ===== */
.codewrap{max-width:520px; margin:38px auto 0}
.codewrap .lbl{font-size:.85rem; color:var(--text-2); margin-bottom:10px}
.codewrap .lbl b{color:var(--accent); font-family:var(--mono); font-weight:600}
.codebar{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border);
  border-radius:980px; padding:6px 6px 6px 20px; box-shadow:var(--shadow-sm); transition:border-color .18s ease-out}
.codebar:focus-within{border-color:var(--accent)}
.codebar .pfx{font-family:var(--mono); font-weight:600; color:var(--text-3); font-size:1.05rem}
.codebar input{flex:1; border:none; background:none; outline:none; font-family:var(--mono); font-weight:600;
  font-size:1.1rem; color:var(--text); letter-spacing:.04em; padding:10px 0; min-width:0}
.codebar input::placeholder{color:var(--text-3); font-weight:500}
.codebar .btn{padding:11px 20px; flex:none}
.codehint{font-size:.82rem; color:var(--text-3); margin-top:12px; min-height:1.2em; text-align:center}
.codehint.err{color:var(--gold)}

/* ===== Cards de produto ===== */
.prods{display:grid; gap:22px}
@media(min-width:640px){.prods{grid-template-columns:1fr 1fr}}
@media(min-width:940px){.prods{grid-template-columns:repeat(3,1fr)}}
.prod{background:var(--card); border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease-out}
.prod:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){.prod,.prod:hover{transition:none; transform:none}}
.pshot{aspect-ratio:5/4; background:var(--bg-alt); display:grid; place-items:center; position:relative; overflow:hidden}
.pshot img{width:100%; height:100%; object-fit:cover}
.pshot .code{position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:.72rem; font-weight:600;
  color:var(--accent-ink); background:var(--card); border:1px solid var(--border-soft); padding:4px 9px; border-radius:8px; z-index:2}
.pshot .ph{opacity:.42; width:42%; height:42%}
.pbody{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; text-align:center}
.pbody h3{font-size:1.22rem; font-weight:600; letter-spacing:-.02em; line-height:1.2}
.pbody .note{color:var(--text-2); font-size:.94rem; margin:9px 0 0; line-height:1.4}
.pbody .rate{font-size:.85rem; color:var(--text-2); margin-top:12px}
.pbody .price{font-size:1.35rem; font-weight:600; letter-spacing:-.02em; margin-top:14px; font-variant-numeric:tabular-nums}
.pbody .price small{font-size:.82rem; color:var(--text-3); font-weight:500; display:block; margin-top:3px}
.pbody .go{margin-top:16px}

/* ===== Método ===== */
.metodo h2{font-size:clamp(1.7rem,4.2vw,2.7rem); text-align:center; max-width:22ch; margin:0 auto}

/* ===== Página de produto ===== */
.crumb{padding:18px 0 0; font-size:.8rem; color:var(--text-3); display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.crumb a:hover{color:var(--accent-ink)} .crumb .sep{opacity:.5}
.crumb .cur{color:var(--text-2); font-family:var(--mono); font-size:.74rem}
.phero{display:grid; gap:34px; padding:22px 0 24px}
@media(min-width:880px){.phero{grid-template-columns:1fr 1fr; gap:44px; align-items:start}}
.gallery{position:sticky; top:78px}
@media(max-width:879px){.gallery{position:static}}
.gmain{position:relative; aspect-ratio:1/1; background:var(--bg-alt); border-radius:22px; display:grid; place-items:center; overflow:hidden}
.gmain img{width:100%; height:100%; object-fit:cover}
.gmain .code{position:absolute; top:14px; left:14px; font-family:var(--mono); font-weight:600; font-size:.74rem;
  color:var(--accent-ink); background:var(--card); border:1px solid var(--border-soft); padding:4px 9px; border-radius:8px; z-index:2}
.gmain .badge{position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:5px; font-size:.68rem;
  font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft);
  padding:5px 10px; border-radius:99px; z-index:2}
.gmain .ph{width:52%; height:52%; opacity:.4}
.pinfo .eyebrow{font-family:var(--mono); font-size:.76rem; font-weight:600; letter-spacing:.04em; color:var(--accent-ink)}
.pinfo h1{font-size:clamp(1.7rem,3.6vw,2.3rem); margin:10px 0 0}
.pmeta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:.9rem; color:var(--text-2)}
.pmeta b{color:var(--text)}
.verdict{margin:18px 0 0; font-size:1.05rem; color:var(--text-2)}
.verdict b{color:var(--text)}
.noteste{display:flex; gap:11px; margin:18px 0 0; padding:15px 16px; background:var(--accent-soft);
  border:1px solid rgba(0,113,227,.22); border-radius:14px}
.noteste svg{flex:none; margin-top:1px; color:var(--accent-ink)}
.noteste p{margin:0; font-size:.94rem; line-height:1.45} .noteste b{color:var(--accent-ink)}
.buybox{margin:22px 0 0; padding:22px; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-sm)}
.priceline{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.price-big{font-size:2rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.price-big .c{font-size:.6em; color:var(--text-3)}
.installq{font-family:var(--mono); font-size:.82rem; color:var(--text-2)}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.chip{font-size:.76rem; font-weight:500; color:var(--text-2); background:var(--bg-alt); border:1px solid var(--border-soft);
  padding:5px 11px; border-radius:99px}
.coupon{margin-top:15px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--accent-soft);
  border:1px dashed rgba(0,113,227,.42); border-radius:12px; padding:12px 14px}
.coupon .ct{flex:1; min-width:150px; font-size:.88rem; color:var(--accent-ink); font-weight:600}
.coupon .ct span{display:block; font-weight:400; color:var(--text-2); font-size:.78rem; margin-top:2px}
.coupon .code{display:flex; align-items:stretch}
.coupon .code .v{font-family:var(--mono); font-weight:600; font-size:.92rem; background:var(--card); border:1px solid var(--border);
  border-right:none; padding:8px 12px; border-radius:9px 0 0 9px}
.coupon .code button{font-size:.8rem; font-weight:600; border:none; background:var(--accent); color:#fff; padding:8px 13px;
  border-radius:0 9px 9px 0; cursor:pointer}
.buys{display:grid; gap:10px; margin-top:18px}
.buys .btn .s{opacity:.82; font-size:.72rem; font-family:var(--mono); font-weight:400; margin-left:2px}
.aff{font-size:.76rem; color:var(--text-3); margin:12px 0 0; line-height:1.5; text-align:center}

section.blk{padding:52px 0; border-top:1px solid var(--border-soft)}
.blk .kick{font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.04em; color:var(--accent-ink); margin-bottom:10px}
.blk h2{font-size:clamp(1.5rem,3.4vw,2rem)}
.blk .intro{color:var(--text-2); max-width:60ch; margin:10px 0 0}
.blk .body{margin-top:20px; color:var(--text-2); line-height:1.65}
.blk .body h3{color:var(--text); font-size:1.15rem; margin:22px 0 8px}
.blk .body ul{padding-left:20px}

.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:16px; margin-top:22px}
table{border-collapse:collapse; width:100%; min-width:460px; background:var(--card); font-size:.92rem}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--border-soft); vertical-align:middle}
thead th{font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); background:var(--bg-alt)}
tbody tr:last-child td{border-bottom:none}
.col-this{background:var(--accent-soft); font-weight:600}
.best{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.64rem; font-weight:600; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:3px 9px; border-radius:99px}

.specs{display:grid; margin-top:22px; border:1px solid var(--border-soft); border-radius:16px; overflow:hidden}
@media(min-width:620px){.specs{grid-template-columns:1fr 1fr}}
.spec{display:flex; justify-content:space-between; gap:14px; padding:13px 16px; border-bottom:1px solid var(--border-soft); font-size:.9rem; background:var(--card)}
.spec span{color:var(--text-2)} .spec b{color:var(--text); font-weight:600; text-align:right}

.final{margin:52px 0 0; background:var(--accent); border-radius:22px; padding:40px 28px; text-align:center; color:#fff}
.final h2{color:#fff; font-size:clamp(1.5rem,3.4vw,2rem)}
.final p{color:rgba(255,255,255,.85); margin:10px auto 0; max-width:44ch}
.final .fb{display:inline-flex; margin-top:22px; background:#fff; color:var(--accent-ink); font-weight:600; font-size:1.0625rem;
  padding:13px 28px; border-radius:980px}

/* ===== Rodapé ===== */
footer.ft{border-top:1px solid var(--border-soft); background:var(--bg-alt); font-size:.82rem; color:var(--text-2)}
.ft .cols{display:flex; flex-wrap:wrap; gap:40px; padding:48px 0 26px; justify-content:space-between}
.ft .col h4{font-size:.78rem; color:var(--text-3); margin:0 0 12px; font-weight:600}
.ft .col a{display:block; color:var(--text-2); padding:5px 0}
.ft .col a:hover{color:var(--text)}
.ft .disc{border-top:1px solid var(--border); padding:20px 0 48px; line-height:1.55}
.ft .disc b{color:var(--text)}

/* ===== Estado vazio / 404 ===== */
.empty{text-align:center; padding:90px 0}
.empty h1{font-size:clamp(1.8rem,4.4vw,2.6rem)}
.empty p{color:var(--text-2); margin:14px auto 0; max-width:44ch}
.empty .btn{margin-top:24px}

/* ===== Mobile compacto ===== */
@media (max-width:640px){
  section{padding:52px 0}
  .hero{padding:44px 0 6px}
  .hero h1{font-size:2.35rem}
  .hero .lede{font-size:1.08rem; max-width:30ch; margin-top:12px}
  .hero .links{gap:20px; margin-top:18px; font-size:1rem}
  .codewrap{margin-top:26px}
  .sec-head{margin-bottom:30px}
  .sec-head h2{font-size:1.72rem}
  .sec-head p{font-size:1.02rem}
  .prods{gap:11px}
  .prod{flex-direction:row; border-radius:16px}
  .prod:hover{transform:none}
  .pshot{width:36%; min-width:116px; aspect-ratio:auto; border-right:1px solid var(--border-soft)}
  .pshot .ph{width:50%; height:50%}
  .pshot .code{top:9px; left:9px; font-size:.63rem; padding:3px 7px}
  .pbody{text-align:left; padding:13px 15px}
  .pbody h3{font-size:1.03rem}
  .pbody .note{font-size:.85rem; margin-top:5px}
  .pbody .rate{margin-top:7px}
  .pbody .price{font-size:1.14rem; margin-top:9px}
  .pbody .price small{display:inline; margin-left:6px}
  .pbody .go{margin-top:9px; align-self:flex-start}
  .ft .cols{gap:24px; padding:34px 0 22px}
}

/* ===== Listagem: categorias, filtros e SEO ===== */
.listagem{padding:26px 0 80px}
.lista-head{max-width:70ch; margin:22px 0 26px}
.lista-head .kick{font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px}
.lista-head h1{font-size:clamp(1.9rem,4.4vw,2.8rem)}
.lista-intro{color:var(--text-2); font-size:1.08rem; line-height:1.55; margin-top:14px}
.lista-intro p{margin:0 0 12px}

/* chips de categoria */
.catchips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.cchip{display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:500; padding:8px 15px;
  border-radius:980px; border:1px solid var(--border); color:var(--text-2); background:var(--card);
  transition:border-color .18s ease-out, color .18s ease-out}
.cchip:hover{border-color:var(--accent); color:var(--accent-ink)}
.cchip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.cchip .fn{font-family:var(--mono); font-size:.72rem; opacity:.65}

/* barra de filtros */
.filtros{border:1px solid var(--border-soft); border-radius:16px; background:var(--bg-alt);
  padding:14px 18px; display:grid; gap:12px; margin-bottom:26px}
.filtro-linha{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.filtro-rot{font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-3); min-width:64px}
.filtro-chips{display:flex; flex-wrap:wrap; gap:7px}
.fchip{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:500; padding:7px 13px;
  border-radius:980px; border:1px solid var(--border); background:var(--card); color:var(--text-2);
  transition:border-color .18s ease-out, color .18s ease-out}
.fchip:hover{border-color:var(--accent); color:var(--accent-ink)}
.fchip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.fchip .fn{font-family:var(--mono); font-size:.7rem; opacity:.6}

.lista-contagem{color:var(--text-3); font-size:.88rem; margin-bottom:16px}
.lista-contagem b{color:var(--text-2); font-variant-numeric:tabular-nums}

.paginacao{margin-top:38px; text-align:center}
.paginacao .nav-links{display:inline-flex; gap:7px; flex-wrap:wrap; align-items:center}
.paginacao .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px;
  padding:0 12px; border-radius:980px; border:1px solid var(--border); color:var(--text-2); font-size:.9rem; font-weight:500}
.paginacao .page-numbers:hover{border-color:var(--accent); color:var(--accent-ink)}
.paginacao .page-numbers.current{background:var(--accent); border-color:var(--accent); color:#fff}
.paginacao .screen-reader-text{display:none}

.vazio{text-align:center; padding:56px 0; color:var(--text-2)}
.vazio .btn{margin-top:16px}

.lista-rodape{margin-top:60px; padding-top:30px; border-top:1px solid var(--border-soft); max-width:70ch; color:var(--text-2)}
.lista-rodape h2{font-size:1.3rem; color:var(--text); margin-bottom:12px}
.lista-rodape p{margin:0 0 12px; line-height:1.6}

/* categoria no card e na página do produto */
.pcat{display:inline-flex; align-items:center; font-size:.7rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:7px}
.pbody .pcat{justify-content:center}
@media (max-width:640px){
  .pbody .pcat{justify-content:flex-start}
  .filtro-rot{min-width:0; width:100%}
  .listagem{padding:18px 0 56px}
  .lista-head{margin:16px 0 20px}
}