/* ============================================
   THYNKIA 2026: blog listing + articles + legal pages (light theme)
   The blog publisher writes inline styles from the old dark theme; the rules here
   override them (hence !important) so the words and structure stay untouched.
   ============================================ */

body.blog { --bg-secondary: var(--surface); --text: var(--ink-2); --text-muted: var(--muted); --primary: var(--accent); --dark-border: #e6e5e0; background: var(--frame); }
body.blog .blog-main { margin: 14px; border-radius: var(--r-xl); background: var(--ground); padding-bottom: clamp(56px, 7vw, 110px); }
body.blog .foot-frame { padding: 0 14px 14px; }
body.blog [style*="color:#fff"], body.blog [style*="color: #fff"], body.blog [style*="color:white"], body.blog [style*="color: white"] { color: var(--ink) !important; }
body.blog [style*="rgba(255,255,255"], body.blog [style*="rgba(255, 255, 255"] { color: var(--muted) !important; border-color: #dedcd6 !important; }
body.blog i.fa-solid, body.blog i.fa-brands, body.blog i.fa-regular { color: inherit; }

/* ---------- Listing ---------- */
body.blog .blog-list-wrap { max-width: var(--maxw) !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
body.blog .blog-list-wrap:first-of-type { padding-top: 132px !important; }
body.blog .blog-list-wrap nav, body.blog .blog-list-wrap nav a { font-size: 14px !important; color: var(--muted) !important; }
body.blog .blog-list-wrap h1 { font-size: clamp(48px, 7vw, 112px) !important; font-weight: 500 !important; letter-spacing: -.045em; line-height: .95; margin: 8px 0 18px !important; background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; animation: none !important; }
body.blog .blog-list-wrap > p { font-size: clamp(17px, 1.4vw, 20px) !important; color: var(--ink-2) !important; }
body.blog .blog-list-wrap > a[href="/"] { display: none !important; }
body.blog .blog-list-grid { max-width: var(--maxw) !important; padding: 18px var(--gutter) 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
body.blog .blog-list-card { display: flex; flex-direction: column; background: var(--surface); border: 0; border-radius: var(--r-l); padding: 10px 10px 24px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
body.blog .blog-list-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(11,15,26,.45); border: 0; }
body.blog .blog-list-card .poster, .js body.blog .blog-list-card:not(.has-poster)::before { content: ""; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--tint); margin: 0 0 16px !important; }
body.blog .blog-list-card .poster.empty { background: var(--tint) url('/img/brand/thynkia-logo-96.png') center / 44px no-repeat; }
body.blog .blog-list-card .poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
body.blog .blog-list-card:hover .poster img { transform: scale(1.04); }
body.blog .blog-list-card > * { margin-left: 14px !important; margin-right: 14px !important; }
body.blog .blog-list-card > .poster { margin: 0 0 16px !important; }
body.blog .blog-card-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 0 !important; }
body.blog .blog-card-meta .tag, body.blog .blog-list-card .tag { background: var(--ground) !important; color: var(--ink-2) !important; padding: 5px 11px !important; border-radius: 999px; font-size: 12px !important; font-weight: 500 !important; text-transform: lowercase; letter-spacing: 0 !important; }
body.blog .blog-card-meta .tag::first-letter { text-transform: uppercase; }
body.blog .blog-list-card h3 { font-size: 20px !important; font-weight: 500 !important; letter-spacing: -.02em; line-height: 1.22 !important; color: var(--ink) !important; margin-top: 14px !important; }
body.blog .blog-list-card p { font-size: 15px !important; color: var(--ink-2) !important; }
body.blog .blog-list-card > div:last-child { margin-top: auto !important; padding-top: 6px; font-size: 13px !important; color: var(--muted) !important; }
@media (max-width: 1000px) { body.blog .blog-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { body.blog .blog-list-grid { grid-template-columns: 1fr !important; } }

/* ---------- Article ---------- */
body.blog .blog-article-view { max-width: 860px !important; margin: 0 auto !important; padding: 140px var(--gutter) 0 !important; min-height: 0 !important; }
body.blog .blog-article-view > div[style*="max-width:800px"] { max-width: none !important; padding: 0 !important; }
body.blog .blog-article-view h1 { font-size: clamp(34px, 4.2vw, 56px) !important; line-height: 1.06 !important; font-weight: 500 !important; letter-spacing: -.035em; color: var(--ink) !important; text-wrap: balance; }
body.blog .blog-article-view a[href="/blog/caso-exito/"]:has(i), body.blog .blog-back-btn { color: var(--ink) !important; border: 0 !important; background: var(--surface) !important; padding: 8px 14px !important; border-radius: 999px !important; font-size: 13.5px !important; text-decoration: none; }
body.blog .blog-article-view [style*="letter-spacing:1.2px"], body.blog .blog-article-view [style*="letter-spacing: 1.2px"] { background: var(--surface) !important; color: var(--ink-2) !important; letter-spacing: 0 !important; text-transform: lowercase !important; font-weight: 500 !important; }
body.blog .blog-article-view [style*="letter-spacing:1.2px"]::first-letter { text-transform: uppercase; }
body.blog .blog-article-view nav[style], body.blog .blog-article-view > div > div:first-child[style*="font-size:14px"] { color: var(--muted) !important; }
body.blog .article-content { font-size: 18px !important; line-height: 1.7 !important; color: var(--ink-2) !important; }
body.blog .article-content video, body.blog .article-content img { border-radius: var(--r-l) !important; width: 100%; height: auto; }
body.blog .article-content h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; font-weight: 500; letter-spacing: -.025em; color: var(--ink) !important; margin: 56px 0 18px; padding: 0; border: 0; }
body.blog .article-content h2::after { display: none; }
body.blog .article-content h3 { font-size: 20px !important; font-weight: 600; color: var(--ink) !important; margin: 32px 0 10px !important; padding: 0 !important; border: 0 !important; letter-spacing: -.015em; }
body.blog .article-content p { margin-bottom: 18px; }
body.blog .article-content strong, body.blog .article-content b { color: var(--ink) !important; }
body.blog .article-content em { color: var(--muted); }
body.blog .article-content ul, body.blog .article-content ol { list-style: none; margin: 22px 0 !important; padding: 8px 22px !important; border-radius: var(--r-l); background: var(--surface) !important; border: 0 !important; }
body.blog .article-content li { position: relative; padding: 12px 0 12px 34px !important; color: var(--ink-2) !important; font-size: 17px; border-bottom: 1px solid var(--ground); }
body.blog .article-content li:last-child { border-bottom: 0; }
body.blog .article-content li::before { content: ""; position: absolute; left: 0; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b45e0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }
body.blog .article-content > p:last-of-type { margin-top: 30px; padding: 22px 24px; border-radius: var(--r-l); background: var(--ink); color: #e9e9e4 !important; font-size: 18px; }
body.blog .article-content > p:last-of-type strong { color: #fff !important; }
body.blog .article-content table { width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--surface); border-radius: var(--r-m); overflow: hidden; font-size: 15px; }
body.blog .article-content th { text-align: left; padding: 12px 16px; background: var(--tint); color: var(--ink); font-weight: 600; }
body.blog .article-content td { padding: 11px 16px; border-top: 1px solid var(--ground); color: var(--ink-2) !important; }

/* Share row, CTA box and related cases: restyled in place */
body.blog .blog-article-view a[href*="linkedin.com/sharing"], body.blog .blog-article-view a[href*="twitter.com/intent"], body.blog .blog-article-view a[href*="api.whatsapp.com"] { background: var(--surface) !important; color: var(--ink) !important; border-radius: 999px !important; padding: 10px 18px !important; font-weight: 500 !important; transition: background-color .2s; }
body.blog .blog-article-view a[href*="linkedin.com/sharing"]:hover, body.blog .blog-article-view a[href*="twitter.com/intent"]:hover, body.blog .blog-article-view a[href*="api.whatsapp.com"]:hover { background: var(--ink) !important; color: #fff !important; }
body.blog .blog-article-view [style*="border-top:1px solid rgba(255,255,255,0.1)"] { border-top: 0 !important; }
body.blog .blog-article-view div[style*="border-radius:16px"][style*="text-align:center"] { background: var(--ink) !important; border: 0 !important; border-radius: var(--r-xl) !important; padding: clamp(32px, 4vw, 56px) !important; }
body.blog .blog-article-view div[style*="border-radius:16px"][style*="text-align:center"] h3 { color: #fff !important; font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 500 !important; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
body.blog .blog-article-view div[style*="border-radius:16px"][style*="text-align:center"] p { color: #c9ccd4 !important; }
body.blog .blog-article-view a[href*="calendly.com"] { background: var(--accent) !important; color: #fff !important; border-radius: 999px !important; padding: 15px 28px !important; font-weight: 500 !important; }
body.blog .blog-article-view a[href*="calendly.com"]:hover { background: #4a35c9 !important; }
body.blog .blog-article-view a[href^="/blog/caso-exito/"][style*="display:block"] { background: var(--surface) !important; border: 0 !important; border-radius: var(--r-l) !important; padding: 22px !important; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
body.blog .blog-article-view a[href^="/blog/caso-exito/"][style*="display:block"]:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(11,15,26,.45); }
body.blog .blog-article-view a[href^="/blog/caso-exito/"][style*="display:block"] div { color: var(--ink) !important; }
body.blog .blog-article-view a[href^="/blog/caso-exito/"][style*="display:block"] div:first-child { color: var(--muted) !important; letter-spacing: 0 !important; font-weight: 500 !important; text-transform: lowercase; }
body.blog .blog-article-view h3[style*="font-size:20px"] { color: var(--ink) !important; font-weight: 500 !important; font-size: 24px !important; letter-spacing: -.02em; }

/* ---------- Legal pages + 404 ---------- */
body.blog .legal-content { max-width: 860px; margin: 0 auto; padding: 140px var(--gutter) 0; }
body.blog .legal-content h1 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); }
body.blog .legal-content h2 { color: var(--ink); font-weight: 500; font-size: 24px; letter-spacing: -.02em; margin-top: 44px; }
body.blog .legal-content h3 { color: var(--ink); }
body.blog .legal-content p, body.blog .legal-content li, body.blog .legal-content td, body.blog .legal-content th { color: var(--ink-2); }
body.blog .legal-content th { color: var(--ink); }
body.blog .legal-content a { color: var(--accent); }
body.blog .legal-content .date { color: var(--muted); }
body.blog .legal-content th, body.blog .legal-content td { border-bottom-color: #e3e2dd; }
body.blog .legal-content code { color: var(--accent); }
body.blog .legal-back { color: var(--muted); }

body.blog .nf { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px var(--gutter) 40px; }
body.blog .nf-code { font-size: clamp(120px, 20vw, 260px); font-weight: 600; letter-spacing: -.07em; line-height: .85; color: var(--accent); }
body.blog .nf .lead { margin-top: 20px; }
body.blog .nf-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 760px) {
  body.blog .blog-main { margin: 8px; border-radius: 22px; }
  body.blog .foot-frame { padding: 0 8px 8px; }
  body.blog .blog-article-view, body.blog .legal-content { padding-top: 110px !important; }
  body.blog .blog-list-wrap:first-of-type { padding-top: 108px !important; }
}

/* Article poster on top (added by site.js; the template already preloads this image) */
body.blog .post-poster { aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; margin: 0 0 28px; background: var(--tint); }
body.blog .post-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }