
/* === Blog de Audible - Estilo Moderno === */
:root {
  --primary: #f8c102;
  --dark: #1a1a2e;
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #333333;
  --muted: #888888;
  --accent: #ff7b00;
  --radius: 12px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); line-height:1.7; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
header { background:var(--dark); padding:1rem 0; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,0.22); }
.nav-container { max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:1.4rem; padding:0 1.25rem; }
.logo { font-size:1.45rem; font-weight:800; color:var(--primary); line-height:1; flex:0 0 auto; }
.logo span { color:#fff; }
nav ul { list-style:none; display:flex; gap:1.2rem; align-items:center; flex-wrap:nowrap; margin:0; padding:0; }
nav a { color:#fff; font-weight:600; font-size:0.94rem; white-space:nowrap; display:block; line-height:1.2; padding:.2rem 0; }
nav a:hover { color:var(--primary); text-decoration:none; }
.hero { background:linear-gradient(135deg, var(--dark), #16213e); color:#fff; text-align:center; padding:4.4rem 1.5rem 4rem; }
.hero h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero p { font-size:1.1rem; max-width:600px; margin:0 auto 2rem; opacity:0.9; }
.btn-primary { display:inline-block; background:var(--primary); color:var(--dark); padding:0.8rem 2rem; border-radius:50px; font-weight:700; font-size:1rem; transition:transform 0.2s; }
.btn-primary:hover { transform:scale(1.05); text-decoration:none; }
.container { max-width:1000px; margin:0 auto; padding:2rem 1.5rem; }
.section-title { font-size:1.8rem; margin-bottom:1.5rem; color:var(--dark); text-align:center; }
.posts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; margin-bottom:3rem; }
.post-card { background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform 0.2s; }
.post-card:hover { transform:translateY(-4px); }
.post-card img { width:100%; height:180px; object-fit:cover; }
.post-card-body { padding:1.2rem; }
.post-card h3 { font-size:1.2rem; margin-bottom:0.5rem; }
.post-card p { color:var(--muted); font-size:0.9rem; margin-bottom:0.8rem; }
.tag { display:inline-block; background:var(--primary); color:var(--dark); padding:0.2rem 0.7rem; border-radius:20px; font-size:0.75rem; font-weight:600; }
.article { max-width:750px; margin:0 auto; padding:2rem 1.5rem; }
.article h1 { font-size:2rem; margin-bottom:0.5rem; color:var(--dark); }
.article-meta { color:var(--muted); font-size:0.85rem; margin-bottom:2rem; }
.article img { width:100%; border-radius:var(--radius); margin:1.5rem 0; }
.article h2 { font-size:1.4rem; margin:2rem 0 0.8rem; color:var(--dark); }
.article h3 { font-size:1.15rem; margin:1.5rem 0 0.5rem; color:var(--dark); }
.article p { margin-bottom:1rem; }
.article ul { margin-bottom:1rem; padding-left:1.5rem; }
.article li { margin-bottom:0.4rem; }
.cta-box { background:linear-gradient(135deg, #f8c102, #ff7b00); color:var(--dark); padding:2rem; border-radius:var(--radius); text-align:center; margin:2rem 0; }
.cta-box h3 { font-size:1.3rem; margin-bottom:0.5rem; }
.cta-box p { margin-bottom:1rem; }
.cta-box a { display:inline-block; background:var(--dark); color:#fff; padding:0.7rem 2rem; border-radius:50px; font-weight:700; }
.cta-box a:hover { text-decoration:none; opacity:0.9; }
.authors-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem; margin-top:1.5rem; }
.author-card { background:var(--card); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); border-left:4px solid var(--primary); transition:transform 0.2s; }
.author-card:hover { transform:translateY(-3px); }
.author-card h3 { font-size:1.15rem; margin-bottom:0.3rem; color:var(--dark); }
.author-card .author-genre { font-size:0.8rem; color:var(--accent); font-weight:600; margin-bottom:0.5rem; }
.author-card p { font-size:0.9rem; color:var(--text); margin-bottom:0.8rem; }
.author-card .works { font-size:0.85rem; color:var(--muted); }
.author-card .works strong { color:var(--dark); }
.comp-table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.9rem; }
.comp-table th { background:var(--dark); color:#fff; padding:0.8rem; text-align:left; }
.comp-table td { padding:0.8rem; border-bottom:1px solid #ddd; }
.comp-table tr:nth-child(even) { background:#f9f9f9; }
footer { background:var(--dark); color:#aaa; text-align:center; padding:2rem 1.5rem; margin-top:3rem; }
footer a { color:var(--primary); }
.disclosure { font-size:0.8rem; color:#666; margin-top:1rem; padding:1rem; background:#fff3cd; border-radius:8px; text-align:center; }
@media (max-width:600px) {
  .hero h1 { font-size:1.8rem; }
  nav ul { list-style:none; display:flex; gap:1.2rem; align-items:center; flex-wrap:nowrap; margin:0; padding:0; }
  .posts-grid { grid-template-columns:1fr; }
  .authors-grid { grid-template-columns:1fr; }
}

.article-intro{font-size:1.02rem;color:#444;margin-bottom:1.2rem}.note-box{background:#eef6ff;border-left:4px solid #5b9cff;padding:1rem 1.2rem;border-radius:10px;margin:1.5rem 0}.toc-links a{margin-right:.8rem;display:inline-block;margin-bottom:.5rem}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:1.5rem}
.meta-pill{display:inline-block;background:#eef2ff;color:#3949ab;padding:.25rem .7rem;border-radius:999px;font-size:.78rem;font-weight:600;margin-bottom:.7rem}
.section-subtitle{max-width:760px;margin:0 auto 1.4rem auto;text-align:center;color:#666}

.jump-nav{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:1rem 1.1rem;margin:0 auto 1.5rem auto;max-width:920px}
.jump-nav h3{font-size:1rem;color:var(--dark);margin-bottom:.7rem}
.jump-links{display:flex;flex-wrap:wrap;gap:.6rem}
.jump-links a{display:inline-block;background:#f3f4f8;color:var(--dark);padding:.45rem .75rem;border-radius:999px;font-size:.88rem;font-weight:600}
.jump-links a:hover{background:var(--primary);text-decoration:none}
.archive-section{margin-top:2.2rem}
.archive-section h3{font-size:1.25rem;color:var(--dark);margin-bottom:.9rem}
.card-kicker{font-size:.78rem;color:#666;margin-bottom:.45rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}

.meta-pill{display:none}.article-meta{color:var(--muted);font-size:.85rem;margin-bottom:2rem}.card-kicker{display:none}
@media (max-width:900px) { .nav-container { max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:1.4rem; padding:0 1.25rem; } nav ul { list-style:none; display:flex; gap:1.2rem; align-items:center; flex-wrap:nowrap; margin:0; padding:0; } }
.meta-pill{display:none!important}.card-kicker{display:none!important}
.hero .btn-primary{box-shadow:0 10px 24px rgba(248,193,2,.18)}
.posts-grid{align-items:stretch}
.post-card-body{display:flex;flex-direction:column;min-height:215px}
.post-card-body a{margin-top:auto;font-weight:700}
.section-title{letter-spacing:-.01em}
.article h1{line-height:1.15}
.jump-nav{margin-top:-.5rem}
@media (max-width:1040px){ .nav-container{flex-direction:column;align-items:flex-start;gap:.8rem;} nav ul{flex-wrap:wrap;gap:.85rem 1rem;} }
@media (max-width:640px){ .nav-container{padding:0 1rem;} .logo{font-size:1.35rem;} nav ul{gap:.75rem .95rem;} nav a{font-size:.92rem;} .hero{padding:3.5rem 1rem 3.2rem;} }


.cta-box a.cta-disabled, .cta-box a.cta-disabled:visited { display:inline-block; background:var(--dark); color:#fff; padding:0.7rem 2rem; border-radius:50px; font-weight:700; text-decoration:none; cursor:not-allowed; opacity:1; pointer-events:auto; }
.cta-box a.cta-disabled:hover { text-decoration:none; opacity:0.9; }
