/**
 * Guia Vale a Pena — main.css
 *
 * Este arquivo é carregado depois do style.css (que já tem o reset,
 * as variáveis de cor e os estilos globais de header/menu/rodapé/
 * paginação/breadcrumb — coisas que se repetem em toda página).
 *
 * Aqui entram os estilos específicos de cada template, que serão
 * adicionados conforme construímos cada parte do tema:
 *
 *   [ ] .page-hero / .page-hero-inner / .page-hero-photo  (capa escura das páginas internas)
 *   [ ] .hero (capa grande da home)
 *   [ ] .article-card / .grid-2  (cards de artigo)
 *   [ ] .product-card / .product-grid  (cards de produto)
 *   [ ] .top10-section / .top10-row / .top10-card  (Top 10)
 *   [ ] .ml-embed / .ml-plugin-card  (bloco do plugin do Mercado Livre)
 *   [ ] .article-shell / .prose  (corpo do artigo)
 *   [ ] .tags-accordion / .products-accordion  (Tags e Produtos recolhidos)
 *   [ ] .specs-accordion  (specs recolhidos na página de produto)
 *   [ ] formulário de contato
 *
 * Nada aqui ainda — vem na próxima parte, junto com os templates
 * PHP que vão usar essas classes.
 */

/* ---------- CARD DE ARTIGO ----------
   Usado no index.php (fallback) e em qualquer listagem de posts
   (home, categoria, tag, busca) que a gente construir depois. */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px; min-width:0;}
.grid-2 > *{min-width:0;}

.article-card{
	background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:26px;
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.article-card:hover{border-color:var(--blue); box-shadow:0 16px 32px -18px rgba(46,107,255,0.35); transform:translateY(-2px);}
.article-card h3{font-size:18px; font-weight:700; line-height:1.3; margin:0 0 8px; transition:color .18s ease;}
.article-card h3 a{color:inherit;}
.article-card:hover h3{color:var(--blue);}
.article-card p{font-size:13.5px; color:var(--ink-faint); margin-bottom:18px;}
.article-card .cta{font-size:13px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:6px; transition:gap .18s ease, color .18s ease;}
.article-card:hover .cta{color:var(--blue); gap:10px;}

@media (max-width:860px){
	.grid-2{grid-template-columns:1fr;}
}

/* ---------- HERO DA HOME ---------- */
.hero{
	position:relative; overflow:hidden;
	background:
		radial-gradient(ellipse at 15% 20%, rgba(46,107,255,0.35), transparent 55%),
		radial-gradient(ellipse at 85% 15%, rgba(255,61,143,0.25), transparent 50%),
		radial-gradient(ellipse at 70% 90%, rgba(23,165,103,0.2), transparent 50%),
		#14151A;
	clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
	padding:80px 0 96px;
}
.hero::before{
	content:''; position:absolute; inset:0; opacity:0.05;
	background-image: linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
	background-size:42px 42px;
}
.hero-content{position:relative; z-index:10; text-align:center; max-width:640px; margin:0 auto;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#fff; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); padding:7px 14px; border-radius:100px; margin-bottom:26px;}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%; background:var(--green);}
.hero-wordmark{font-family:'Sora',sans-serif; font-weight:800; font-size:42px; letter-spacing:-0.02em; margin-bottom:20px; line-height:1.15; color:#fff;}
.hero-wordmark .grad{background:linear-gradient(90deg, #4C8BFF, #FF3D8F 45%, #2FD98A); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.sub{color:rgba(255,255,255,0.68); font-size:16px;}

/* ---------- CAPA DAS PÁGINAS INTERNAS ---------- */
.page-hero{
	position:relative; overflow:hidden;
	background:
		radial-gradient(ellipse at 15% 20%, rgba(46,107,255,0.35), transparent 55%),
		radial-gradient(ellipse at 85% 15%, rgba(255,61,143,0.25), transparent 50%),
		radial-gradient(ellipse at 70% 90%, rgba(23,165,103,0.2), transparent 50%),
		#14151A;
	padding:44px 0 40px;
}
.page-hero.has-clip{clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);}
.page-hero::before{
	content:''; position:absolute; inset:0; opacity:0.05;
	background-image: linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
	background-size:42px 42px;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero .kicker{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.55); margin-bottom:6px;}
.page-hero h1{font-size:30px; font-weight:800; color:#fff; margin-bottom:6px;}
.page-hero p, .page-hero .subtitle{font-size:13.5px; color:rgba(255,255,255,0.6); max-width:520px;}

/* variante com foto (página de Produto) */
.page-hero-inner{display:flex; align-items:center; gap:28px;}
.page-hero-photo{
	width:170px; aspect-ratio:3/4; border-radius:14px; flex-shrink:0;
	background:linear-gradient(150deg,#2c2e38,#0e0f13); background-size:cover; background-position:center;
	border:1px solid rgba(255,255,255,0.08); position:relative; overflow:hidden;
}
.page-hero-text{flex:1; min-width:0;}

/* ---------- TOP 10 ---------- */
.top10-section{background:var(--ink); padding:72px 0 84px; margin-top:20px;}
.top10-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px;}
.top10-head h2{color:#fff; font-weight:700; font-size:24px;}

[data-gvp-dropdown]{position:relative;}
.period-btn{font-size:12px; font-weight:600; color:rgba(255,255,255,0.7); background:transparent; border:1px solid rgba(255,255,255,0.15); padding:8px 14px; border-radius:100px; display:flex; align-items:center; gap:6px;}
.period-btn:hover{border-color:rgba(255,255,255,0.3); color:#fff;}
.period-btn .chev{font-size:9px; transition:transform .18s ease;}
[data-gvp-dropdown].is-open .period-btn .chev{transform:rotate(180deg);}
.period-menu{position:absolute; top:calc(100% + 8px); right:0; background:#1D1E26; border:1px solid rgba(255,255,255,0.1); border-radius:12px; overflow:hidden; width:180px; box-shadow:0 20px 40px -16px rgba(0,0,0,0.5); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:20;}
[data-gvp-dropdown].is-open .period-menu{opacity:1; transform:translateY(0); pointer-events:auto;}
.period-option{display:block; width:100%; text-align:left; padding:11px 14px; font-size:13px; font-weight:500; color:rgba(255,255,255,0.75); background:transparent; border:none; border-top:1px solid rgba(255,255,255,0.06);}
.period-option:first-child{border-top:none;}
.period-option:hover{background:rgba(255,255,255,0.06); color:#fff;}
.period-option.is-selected{color:var(--blue); font-weight:700;}

.top10-body{transition:opacity .15s ease;}
.top10-row{display:flex; gap:30px; overflow-x:auto; overflow-y:hidden; padding:26px 26px 18px 26px; margin:-26px -26px -18px -26px; scroll-snap-type:x proximity;}
.top10-row::-webkit-scrollbar{height:5px;}
.top10-row::-webkit-scrollbar-track{background:rgba(255,255,255,0.06); border-radius:10px;}
.top10-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.22); border-radius:10px;}
.top10-card{position:relative; flex:0 0 auto; width:200px; display:flex; align-items:flex-end;}
.top10-num{font-family:'Sora',sans-serif; font-weight:800; font-size:110px; line-height:0.75; color:transparent; -webkit-text-stroke:2.5px rgba(255,255,255,0.24); margin-right:-12px; z-index:1; user-select:none;}
.top10-num.is-top3{-webkit-text-stroke:2.5px transparent; background:linear-gradient(180deg,#4C8BFF,#FF3D8F); -webkit-background-clip:text; background-clip:text;}
.top10-poster{
	width:130px; aspect-ratio:3/4; border-radius:12px; z-index:2; position:relative; flex-shrink:0;
	background:linear-gradient(150deg,#2c2e38,#0e0f13); background-size:cover; background-position:center;
	border:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; justify-content:flex-end;
	padding:12px; overflow:hidden; transition:transform .18s ease, border-color .18s ease;
}
.top10-card:hover .top10-poster{transform:translateY(-6px); border-color:rgba(255,255,255,0.28);}
.top10-poster h4{color:#fff; font-size:12.5px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.top10-empty{color:rgba(255,255,255,0.4); font-size:13.5px;}

/* ---------- BLOCO DO PLUGIN (Mercado Livre) — mesmo visual no artigo e na página de produto ---------- */
.gvp-ml-card{
	background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px;
	display:flex; gap:24px; align-items:flex-start; margin:30px 0;
	box-shadow:0 16px 40px -26px rgba(20,21,26,0.18);
}
.gvp-ml-photo{width:180px; height:130px; border-radius:10px; flex-shrink:0; background:var(--alt); background-size:cover; background-position:center;}
.gvp-ml-info{flex:1; min-width:0;}
.gvp-ml-info h3{font-size:19px; font-weight:800; line-height:1.25; margin-bottom:10px;}
.gvp-ml-desc{font-size:13px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px; padding-left:15px; position:relative;}
.gvp-ml-desc::before{content:'•'; position:absolute; left:0; color:var(--ink-faint);}
.gvp-ml-divider{border-top:1px solid var(--line); margin-bottom:14px;}
.gvp-ml-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.gvp-ml-price{font-size:22px; font-weight:800;}
.gvp-ml-btn{background:var(--blue); color:#fff; font-size:13.5px; font-weight:700; padding:11px 20px; border-radius:9px; border:none;}

@media (max-width:600px){
	.gvp-ml-card{flex-direction:column;}
	.gvp-ml-photo{width:100%; height:160px;}
}

/* ---------- SEÇÃO GENÉRICA (produto, arquivo de produtos, categoria...) ---------- */
.section{padding-top:44px; padding-bottom:44px;}
.section-sub{border-top:1px solid var(--line);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px;}
.section-head h2{font-size:20px; font-weight:700;}
.section-head span{font-size:13px; color:var(--ink-faint);}

/* ---------- CORPO DO ARTIGO ---------- */
.article-shell{max-width:740px; margin:0 auto; padding:52px 32px 96px;}
.back-link{font-size:13px; font-weight:700; color:var(--ink-faint); margin-bottom:12px; display:inline-block;}
.back-link:hover{color:var(--blue);}
h1.article-title{font-weight:800; font-size:36px; line-height:1.15; letter-spacing:-0.015em; margin-bottom:18px;}
.meta-row{display:flex; flex-wrap:wrap; align-items:center; gap:18px; font-size:13px; color:var(--ink-faint); padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--line);}
.meta-item{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.meta-item svg{width:14px; height:14px; opacity:0.55; flex-shrink:0;}
.article-cover{width:100%; aspect-ratio:16/9; border-radius:14px; margin-bottom:34px; background:linear-gradient(150deg,#232530,#0e0f13); background-size:cover; background-position:center;}

.prose p{font-size:16.5px; color:var(--ink); margin-bottom:20px;}
.prose h2{font-weight:700; font-size:23px; margin:40px 0 16px; letter-spacing:-0.01em;}
.prose h3{font-weight:700; font-size:19px; margin:30px 0 12px;}
.prose ul, .prose ol{margin:0 0 20px 20px;}
.prose li{font-size:15.5px; margin-bottom:8px; color:var(--ink-soft);}
.prose img{border-radius:12px; margin:20px 0;}
.prose a{color:var(--blue); text-decoration:underline;}

.callout{background:var(--blue-soft); border-left:3px solid var(--blue); border-radius:0 12px 12px 0; padding:16px 20px; margin:28px 0; font-size:14px; color:var(--ink-soft);}
.callout b{color:var(--ink);}
.disclosure-inline{font-size:12.5px; color:var(--ink-faint); border-top:1px solid var(--line); padding:20px 0 0; margin-top:38px; line-height:1.6;}

/* ---------- ACORDEÕES: Tags e Produtos, recolhidos por padrão ---------- */
.gvp-accordion{margin-top:16px; border-top:1px solid var(--line); padding-top:16px;}
.gvp-accordion summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink-soft); user-select:none;}
.gvp-accordion summary::-webkit-details-marker{display:none;}
.gvp-accordion summary .chevron{transition:transform .2s ease; font-size:11px; color:var(--ink-faint);}
.gvp-accordion[open] summary .chevron{transform:rotate(180deg);}
.gvp-accordion summary:hover{color:var(--blue);}
.gvp-pill-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.tag-pill{font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--alt); border:1px solid var(--line); padding:6px 13px; border-radius:100px;}
.tag-pill:hover{border-color:var(--blue); color:var(--blue);}
.product-pill{font-size:12.5px; font-weight:700; color:var(--blue); background:var(--blue-soft); border:1px solid transparent; padding:6px 13px; border-radius:100px; display:inline-flex; align-items:center; gap:5px;}
.product-pill:hover{background:var(--blue); color:#fff;}
.product-pill .arrow{font-size:10px; opacity:0.7;}

/* ---------- ARTIGOS RELACIONADOS (compartilhado: artigo e produto) ---------- */
.related-section{margin-top:44px;}
.related-section h2{font-size:19px; font-weight:700; margin-bottom:18px;}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; min-width:0;}
.grid-3 > *{min-width:0;}
@media (max-width:860px){ .grid-3{grid-template-columns:1fr;} }

/* ---------- GRID DE PRODUTOS (arquivo /produtos/) ---------- */
.product-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; min-width:0;}
.product-grid > *{min-width:0;}
.product-card{background:#fff; border:1.5px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;}
.product-card:hover{border-color:var(--blue); box-shadow:0 16px 32px -18px rgba(46,107,255,0.3); transform:translateY(-3px);}
.product-card-photo{width:100%; aspect-ratio:3/4; background:linear-gradient(150deg,#2c2e38,#0e0f13); background-size:cover; background-position:center;}
.product-card-name{padding:12px 13px; font-size:13px; font-weight:700; line-height:1.35; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; min-height:52px;}
@media (max-width:900px){ .product-grid{grid-template-columns:repeat(3, 1fr);} }
@media (max-width:600px){ .product-grid{grid-template-columns:repeat(2, 1fr); gap:14px;} }

@media (max-width:860px){
	.hero-wordmark{font-size:32px;}
	.page-hero h1{font-size:24px;}
	.page-hero-photo{width:88px;}
	.page-hero-inner{gap:18px;}
	h1.article-title{font-size:27px;}
	.article-shell{padding:36px 20px 64px;}
}