/* vp-fase1 — Visual Premium Fase 1 (additive, seguro). Direção: fábrica editorial brasileira premium. */
:root{--vp-gold:#C49A28;--vp-gol:#D4AA38;--vp-esp:#1C0D08;--vp-crm:#F5EDE0;--vp-shadow:0 10px 26px rgba(28,13,8,.14);--vp-shadow-s:0 6px 18px rgba(28,13,8,.10)}

/* ===== 1. Contraste / legibilidade (fundo escuro) ===== */
.nav-links a{color:rgba(255,255,255,.72)!important}
.page-nav-links a{color:rgba(255,248,233,.78)!important;transition:color .16s}
.page-nav-links a:hover{color:var(--vp-gol)!important}
.hsu{color:rgba(245,237,224,.78)!important}
.ey{font-size:.72rem!important}
footer .fg a{color:rgba(245,237,224,.62)!important;transition:color .18s}
footer .fg a:hover{color:var(--vp-gol)!important}
footer .fft{color:rgba(245,237,224,.48)!important}
.fb,.fb a{color:rgba(245,237,224,.5)!important}
.article-meta span{opacity:.85}

/* ===== 2. Elementos interativos: radius leve + sombra quente + hover padrão ===== */
.btn,.calc-mode-btn,input,select,textarea{border-radius:6px!important}
.article-card,.product-showcase-card,.product-line-card,.page-card,.acor-color-card,.wide-color-card{border-radius:8px!important;transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){
  .article-card:hover,.product-showcase-card:hover,.product-line-card:hover,.page-card:hover,.acor-color-card:hover,.wide-color-card:hover{transform:translateY(-3px);box-shadow:var(--vp-shadow)}
  .product-line-card:hover .product-line-media img{transform:scale(1.03)}
}
.product-line-media img{transition:transform .3s ease}
.article-card:active,.product-showcase-card:active,.product-line-card:active{transform:scale(.995)}

/* ===== 3. Cards 100% clicáveis (CSS-only stretched link) ===== */
.article-list-public .article-card{position:relative}
.article-list-public .article-card>a.btn::after{content:"";position:absolute;inset:0;z-index:0}
.product-showcase-card{position:relative}
.product-showcase-card .product-card-title-link::after{content:"";position:absolute;inset:0;z-index:0}
.product-showcase-card .product-actions,.product-showcase-card .product-actions a,.product-showcase-card .product-actions button,.product-showcase-card a.btn{position:relative;z-index:1}
/* build atual: cards estáticos .product-line-card — link primário = página do produto */
.product-line-card{position:relative;overflow:hidden}
.product-line-card .product-line-media::after{content:"";position:absolute;inset:0;z-index:0}
.product-line-card a:not(.product-line-media){position:relative;z-index:1}

/* ===== 4. Menu mobile: o sistema NATIVO (js/mobile-menu.js + page-menu-toggle) permanece dono do menu.
   Aqui só refinamos o toggle nativo e damos scroll-lock ao overlay fullscreen da home. ===== */
body.vp-lock{overflow:hidden!important}
.page-menu-toggle{transition:background .16s,border-color .16s}
.page-menu-toggle:hover,.page-menu-toggle[aria-expanded="true"]{background:rgba(212,170,56,.16);border-color:rgba(212,170,56,.5)}

/* ===== 5. Estado ativo da navegação ===== */
.page-nav-links a.vp-current,.nav-links a.vp-current{color:var(--vp-gol)!important;font-weight:600}
.page-nav-links a.vp-current{border-bottom:2px solid var(--vp-gol)}

/* ===== 6. Blog hub: chips de filtro ===== */
.vp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 22px}
.vp-chip{border:1px solid rgba(214,166,45,.45);background:transparent;color:#f8e6bd;border-radius:999px;padding:8px 16px;font-size:.8rem;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:background .16s,color .16s;min-height:38px}
.vp-chip:hover{background:rgba(214,166,45,.14)}
.vp-chip.on{background:#d6a62d;color:#1c0d08}
.vp-chip small{opacity:.7;font-weight:400;margin-left:4px}
.article-card.vp-hide{display:none!important}

/* ===== 7. Card tipográfico (sem thumbnail) ===== */
.article-card--noimg{background:linear-gradient(150deg,#241108 0%,#180905 68%)!important;border-top:3px solid #d6a62d!important}
.article-card--noimg h2{font-size:2.05rem!important;line-height:1.04}
.article-card--noimg .article-card-tag{display:inline-block;background:rgba(214,166,45,.16);padding:5px 12px;border-radius:999px;margin-bottom:6px}
@media(max-width:700px){.article-card--noimg h2{font-size:1.5rem!important}}

/* ===== 8. Artigos: breadcrumb + voltar + relacionados + FAQ ===== */
.vp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.82rem;color:rgba(255,247,232,.62);padding:14px 18px 0;max-width:min(1000px,100%);margin:0 auto}
.vp-crumb a{color:#f8e6bd;text-decoration:none}
.vp-crumb a:hover{color:#d6a62d}
.vp-crumb .sep{opacity:.4}
.vp-back{display:block;max-width:min(1000px,100%);margin:6px auto 0;padding:0 18px;font-size:.86rem;color:#d6a62d;text-decoration:none;font-weight:600}
.vp-back:hover{text-decoration:underline}
.vp-related{max-width:min(1000px,100%);margin:34px auto 8px;padding:0 18px 8px}
.vp-related h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.7rem;color:#fff7e8;margin-bottom:14px}
.vp-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:760px){.vp-related-grid{grid-template-columns:1fr}}
.vp-related-grid a{display:flex;flex-direction:column;gap:6px;background:#241108;border:1px solid rgba(214,166,45,.22);border-radius:8px;padding:16px;text-decoration:none;transition:transform .18s,box-shadow .18s}
@media(hover:hover){.vp-related-grid a:hover{transform:translateY(-3px);box-shadow:var(--vp-shadow)}}
.vp-related-grid .tag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#d6a62d}
.vp-related-grid .tit{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.24rem;line-height:1.15;color:#fff7e8}
details.vp-faq{border:1px solid rgba(214,166,45,.25);border-radius:8px;margin:10px 0;background:rgba(36,17,8,.5)}
details.vp-faq summary{cursor:pointer;padding:14px 16px;font-weight:700;color:#f8e6bd;font-size:1.02rem;list-style:none;position:relative;padding-right:38px}
details.vp-faq summary::-webkit-details-marker{display:none}
details.vp-faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#d6a62d;font-size:1.3rem;transition:transform .2s}
details.vp-faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details.vp-faq>*:not(summary){padding:0 16px}
details.vp-faq p:last-child{padding-bottom:14px}

/* ===== 9. FAB WhatsApp padronizado (páginas sem .wf) ===== */
.vp-wf{position:fixed;bottom:20px;right:20px;z-index:900}
.vp-wf a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#25D366;box-shadow:0 4px 16px rgba(37,211,102,.34);transition:transform .18s}
.vp-wf a:hover{transform:scale(1.08)}
.vp-wf svg{width:26px;height:26px;fill:#fff}
@media(prefers-reduced-motion:no-preference){
  @keyframes vpPulse{0%{box-shadow:0 4px 16px rgba(37,211,102,.34)}50%{box-shadow:0 4px 26px rgba(37,211,102,.6)}100%{box-shadow:0 4px 16px rgba(37,211,102,.34)}}
  .vp-wf a,.wfab{animation:vpPulse 4.5s ease-in-out 3}
}
@media(max-width:480px){.vp-wf a{width:48px;height:48px}}

/* ===== 10. Toque mobile: piso 44px ===== */
@media(max-width:768px){
  .acor-color-card a,.acor-color-card button,.wide-color-card a,.article-card .btn,.vp-chip{min-height:44px}
  .article-card-tag{font-size:.78rem!important}
}
/* Links mortos do footer (precisa validar com Daniel) */
a.vp-dead{opacity:.4;cursor:default;pointer-events:none}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}