/* UX Web — Blog index (específico) */

.hero{padding:120px 5% 60px;max-width:1280px;margin:0 auto;text-align:center}
.stats-row{margin-top:36px}

/* SEARCH */
.search-wrap{max-width:520px;margin:0 auto;position:relative;background:#F2F0EB;border:1px solid var(--cb);border-radius:100px;display:flex;align-items:center;padding:0 20px;gap:12px;transition:border-color .2s}
.search-wrap:focus-within{border-color:rgba(0,105,108,.4)}
.search-wrap input{flex:1;background:none;border:none;color:#00696C;font-family:'Sora',sans-serif;font-size:15px;padding:16px 0;outline:none}
.search-wrap input::placeholder{color:rgba(0,105,108,.5)}
.search-clear{background:none;border:none;color:var(--mut);cursor:pointer;font-size:18px;line-height:1;padding:0 4px;display:none}

/* CATEGORIES */
.cats-section{padding:30px 5%;max-width:1280px;margin:0 auto}
.cats-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cat-btn{padding:7px 18px;border:1px solid var(--cb);border-radius:100px;background:var(--card);color:var(--mut);font-family:'Sora',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;backdrop-filter:blur(12px)}
.cat-btn.active{background:var(--g);border-color:var(--g);color:#fff;font-weight:600}

/* PINNED */
.pinned-section{padding:20px 5%;max-width:1280px;margin:0 auto}
.pinned-card{border-radius:24px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:300px;border:1px solid var(--cb);background:var(--card);backdrop-filter:blur(24px);transition:all .3s;text-decoration:none;color:inherit}
.pinned-card:hover{transform:translateY(-3px);border-color:rgba(0,105,108,.35);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.pinned-visual{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:250px}
.pinned-visual-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px}
.pinned-icon{font-size:90px;position:relative;z-index:1}
.pinned-badge{position:absolute;top:20px;left:20px;background:rgba(0,0,0,.5);border-radius:100px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.08em;backdrop-filter:blur(10px)}
.pinned-body{padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.pinned-title{font-size:clamp(1.2rem,2.5vw,1.7rem);font-weight:800;color:var(--txt);line-height:1.25}
.pinned-excerpt{font-size:14px;color:var(--mut);line-height:1.75}
.pinned-meta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}

/* POSTS GRID */
.posts-section{padding:20px 5% 60px;background:rgba(0,105,108,.04);border-top:1px solid rgba(0,105,108,.1)}
.posts-inner{max-width:1280px;margin:0 auto}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-top:40px}

/* PAGINATION */
.pagination{display:flex;justify-content:center;gap:8px;padding:40px 5%;flex-wrap:wrap}
.page-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--cb);background:var(--card);color:var(--mut);font-family:'Sora',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.page-btn.active{background:var(--g);border-color:var(--g);color:#fff;font-weight:700}
.page-btn:hover:not(.active){border-color:rgba(0,105,108,.35);color:var(--txt)}
.page-btn:disabled{opacity:.35;cursor:default}

/* NO RESULTS */
.no-results{grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--mut)}

/* SUBSCRIBE */
.subscribe-section{padding:60px 5%;text-align:center;border-top:1px solid rgba(0,105,108,.1)}
.subscribe-inner{max-width:520px;margin:0 auto}
.subscribe-title{font-size:1.6rem;font-weight:800;margin-bottom:12px;background:linear-gradient(135deg,var(--txt),var(--lav));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subscribe-desc{color:var(--mut);font-size:14px;line-height:1.7;margin-bottom:24px}
.subscribe-form{display:flex;gap:8px;max-width:420px;margin:0 auto}
.subscribe-form input{flex:1;background:#F2F0EB;border:1px solid var(--cb);border-radius:100px;padding:12px 20px;color:#00696C;font-family:'Sora',sans-serif;font-size:14px;outline:none;transition:border-color .2s}
.subscribe-form input:focus{border-color:rgba(0,105,108,.4)}
.subscribe-form input::placeholder{color:rgba(0,105,108,.5)}
.subscribe-form button{background:var(--g);color:#fff;border:none;border-radius:100px;padding:12px 22px;font-family:'Sora',sans-serif;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s}
.subscribe-form button:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,105,108,.4)}

@media(max-width:900px){.pinned-card{grid-template-columns:1fr}.pinned-visual{min-height:180px}}
@media(max-width:768px){.stats-row{gap:20px}.posts-grid{grid-template-columns:1fr}.subscribe-form{flex-direction:column}}