/* Toddli blog: shared styles for /pt-br/blog. Tokens match the rest of the site (see CLAUDE.md). */
:root {
  --nursery: #FDF8F5; --linen: #FAF3EC; --journal: #5A534D; --pencil: #7A736D; --whisper: #9B9690;
  --thread: #E0D5CB; --blush: #E8836B; --blush-soft: #FFF5F3; --twilight: #8B7EC8; --twilight-soft: #F5F3FF;
  --sprout: #5AAF83; --sprout-soft: #F0FDF6; --honey: #E5A84D; --honey-soft: #FFFBEB;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: 'Mulish', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--nursery); color: var(--journal); line-height: 1.6; overflow-x: hidden; }

.t-heading { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 3.8vw, 50px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
.t-heading em { font-style: italic; color: var(--blush); }
.t-subheading { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.t-body { font-size: clamp(16px, 1.4vw, 19px); font-weight: 400; line-height: 1.7; color: var(--pencil); }
.t-body-lg { font-size: clamp(17px, 1.8vw, 21px); font-weight: 400; line-height: 1.65; color: var(--pencil); }
.t-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--whisper); }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s3); }

.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--s2) 0; transition: all 0.4s ease; }
.header.scrolled { background: rgba(253,248,245,0.72); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); box-shadow: 0 1px 0 rgba(224,213,203,0.5); padding: 10px 0; }
.header.scrolled .logo-img { height: 48px; }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.logo { display: flex; align-items: center; gap: var(--s1); text-decoration: none; }
.logo-img { height: 72px; width: auto; transition: height 0.4s ease; }
.header-nav { display: flex; align-items: center; gap: var(--s4); }
.header-nav a { font-size: 14px; font-weight: 600; color: var(--whisper); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; }
.header-nav a:hover, .header-nav a.active { color: var(--journal); }
.header-actions { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; }
.lang-switch { font-size: 13px; font-weight: 700; color: var(--whisper); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; }
.lang-switch:hover { color: var(--journal); }
.header-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; background: var(--blush); color: white; border-radius: 100px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; }
.header-cta:hover { transform: scale(1.04); box-shadow: 0 4px 16px rgba(232,131,107,0.3); }
.header-cta svg { width: 14px; height: 14px; }
.burger { display: none; background: none; border: none; padding: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.burger svg { display: block; }
.mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99; background: var(--nursery); padding: 80px var(--s3) var(--s4); transform: translateY(-100%); transition: transform 0.3s ease; }
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { display: block; padding: 14px 0; font-size: 17px; font-weight: 600; color: var(--journal); text-decoration: none; border-bottom: 1px solid var(--thread); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .mobile-lang { margin-top: var(--s2); font-size: 14px; font-weight: 700; color: var(--whisper); }
.mobile-overlay { display: none; position: fixed; inset: 0; z-index: 98; background: rgba(90,83,77,0.15); }
.mobile-overlay.open { display: block; }

/* Category tones */
.tone-blush { --tone: var(--blush); --tone-soft: var(--blush-soft); }
.tone-twilight { --tone: var(--twilight); --tone-soft: var(--twilight-soft); }
.tone-sprout { --tone: var(--sprout); --tone-soft: var(--sprout-soft); }
.tone-honey { --tone: var(--honey); --tone-soft: var(--honey-soft); }
.chip { display: inline-block; padding: 4px 12px; border-radius: 100px; background: var(--tone-soft); color: var(--tone); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

/* Blog index */
.page-hero { padding: var(--s16) 0 var(--s6); text-align: center; }
.page-hero .t-label { display: block; margin-bottom: var(--s2); }
.page-hero .t-heading { margin-bottom: var(--s3); }
.page-hero .t-body-lg { max-width: 640px; margin: 0 auto; }
.featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s5); align-items: center; padding: var(--s4); background: white; border: 1px solid var(--thread); border-radius: 28px; text-decoration: none; color: inherit; margin-bottom: var(--s4); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.featured:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(90,83,77,0.08); }
.featured-art { aspect-ratio: 4 / 3; border-radius: 20px; background: var(--tone-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.featured-art img { width: 78%; height: 78%; object-fit: contain; }
.featured h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; margin: var(--s2) 0; color: var(--journal); }
.featured p { font-size: 16px; color: var(--pencil); line-height: 1.65; }
.featured .post-meta { display: block; margin-top: var(--s2); font-size: 13px; color: var(--whisper); font-weight: 600; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s3); padding: 0 0 var(--s12); }
.post-card { display: flex; flex-direction: column; background: white; border: 1px solid var(--thread); border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(90,83,77,0.08); }
.post-art { aspect-ratio: 16 / 10; background: var(--tone-soft); display: flex; align-items: center; justify-content: center; }
.post-art img { width: 62%; height: 80%; object-fit: contain; }
.art-cover { overflow: hidden; }
.art-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: var(--s3) var(--s3) var(--s4); display: flex; flex-direction: column; flex: 1; }
.post-card h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; line-height: 1.28; margin: var(--s2) 0 10px; color: var(--journal); }
.post-card p { font-size: 15px; color: var(--pencil); line-height: 1.6; }
.post-card .post-meta { display: block; margin-top: auto; padding-top: var(--s2); font-size: 13px; color: var(--whisper); font-weight: 600; }

/* Article */
.article-hero { padding: var(--s16) 0 var(--s5); }
.article-hero .container { max-width: 1040px; display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s6); align-items: center; }
.article-hero .chip { margin-bottom: var(--s2); }
.hero-art { aspect-ratio: 1; max-width: 380px; width: 100%; justify-self: end; border-radius: 32px; background: var(--tone-soft); display: flex; align-items: center; justify-content: center; }
.hero-art img { width: 80%; height: 80%; object-fit: contain; }
.article-hero .crumb { display: inline-block; margin-bottom: var(--s2); font-size: 13px; font-weight: 700; color: var(--whisper); text-decoration: none; letter-spacing: 0.04em; }
.article-hero .crumb:hover { color: var(--journal); }
.article-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--s3); }
.article-hero .lead { font-size: clamp(17px, 1.8vw, 20px); color: var(--pencil); line-height: 1.65; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); font-size: 13px; color: var(--whisper); font-weight: 600; }
.article { max-width: 760px; margin: 0 auto; padding: 0 var(--s3) var(--s10); }
.article h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin: var(--s6) 0 var(--s2); }
.article h3 { font-size: 18px; font-weight: 700; margin: var(--s4) 0 var(--s1); }
.article p { font-size: 17px; line-height: 1.75; color: var(--pencil); margin-bottom: var(--s2); }
.article ul, .article ol { margin: 0 0 var(--s3) var(--s3); color: var(--pencil); font-size: 17px; line-height: 1.7; }
.article li { margin-bottom: 6px; }
.article strong { color: var(--journal); }
.article a { color: var(--blush); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article table { width: 100%; border-collapse: collapse; margin: var(--s2) 0 var(--s4); font-size: 15px; }
.article th { padding: 12px 14px; text-align: left; font-size: 13px; font-weight: 700; background: var(--linen); border-bottom: 2px solid var(--thread); }
.article td { padding: 12px 14px; border-bottom: 1px solid var(--thread); color: var(--pencil); vertical-align: top; }
.article tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }
.fig { margin: var(--s4) 0; display: grid; grid-template-columns: 160px 1fr; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: 20px; background: var(--tone-soft); }
.fig img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.fig figcaption { font-size: 15px; line-height: 1.6; color: var(--journal); }
.fig figcaption strong { display: block; margin-bottom: 4px; }
.callout { padding: var(--s3) var(--s4); border-radius: 16px; margin: var(--s4) 0; border: 1px solid transparent; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout .callout-title { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s1); }
.callout-warn { background: var(--honey-soft); border-color: rgba(229,168,77,0.35); }
.callout-warn .callout-title { color: #B07A1E; }
.callout-app { background: var(--blush-soft); border-color: rgba(232,131,107,0.3); }
.callout-app .callout-title { color: var(--blush); }
.callout-note { background: var(--twilight-soft); border-color: rgba(139,126,200,0.3); }
.callout-note .callout-title { color: var(--twilight); }
.sources { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--thread); }
.sources h2 { font-size: 15px; margin: 0 0 var(--s1); }
.sources ol { font-size: 14px; color: var(--whisper); margin-left: var(--s3); }
.disclaimer { font-size: 13px; color: var(--whisper); margin-top: var(--s3); line-height: 1.6; }
.related { max-width: 760px; margin: 0 auto; padding: 0 var(--s3) var(--s12); }
.related h2 { font-size: 18px; margin-bottom: var(--s2); }
.related a { display: block; padding: 12px 0; border-top: 1px solid var(--thread); color: var(--journal); text-decoration: none; font-weight: 600; font-size: 15px; }
.related a:hover { color: var(--blush); }

.cta { padding: var(--s8) 0 var(--s12); text-align: center; }
.cta-inner { max-width: 640px; margin: 0 auto; }
.cta .t-heading { margin-bottom: var(--s2); }
.cta .t-body-lg { margin-bottom: var(--s5); }
.store-buttons { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
.store-btn { display: inline-flex; align-items: center; gap: var(--s1); padding: 14px 28px; border-radius: 100px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; font-family: inherit; }
.store-btn:hover { transform: translateY(-2px); }
.store-btn-ios { background: var(--journal); color: var(--nursery); }
.store-btn-ios:hover { box-shadow: 0 8px 24px rgba(90,83,77,0.2); }
.store-btn svg { width: 18px; height: 18px; }

.footer { padding: var(--s5) 0; border-top: 1px solid var(--thread); }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--s3); display: flex; justify-content: space-between; align-items: center; }
.footer-text { font-size: 13px; color: var(--whisper); font-weight: 500; }
.footer-links { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: 13px; color: var(--whisper); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.footer-links a:hover { color: var(--journal); }

@media (max-width: 600px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .header-nav, .lang-switch { display: none; }
  .burger { display: block; }
  .header-cta { padding: 8px 16px; font-size: 13px; }
  .mobile-menu { display: block; }
  .footer-inner { flex-direction: column; gap: var(--s2); text-align: center; }
  .article-hero { padding-top: var(--s12); }
  .article-hero .container { grid-template-columns: 1fr; gap: var(--s3); }
  .hero-art { max-width: 100%; aspect-ratio: 16 / 9; justify-self: stretch; order: -1; }
  .featured { grid-template-columns: 1fr; padding: var(--s3); }
  .fig { grid-template-columns: 96px 1fr; gap: var(--s2); }
  .article p, .article ul, .article ol { font-size: 16px; }
}