/* Public guide pages (/guia, /en/guide) — on top of styles.css */
.guide-page { background: radial-gradient(1000px 420px at 50% -10%, #ffe1e7 0%, transparent 70%), var(--bg); height: auto; min-height: 100%; }
.lang-switch a { padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .78rem; color: var(--muted); }
.lang-switch a.on { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.guide { max-width: 720px; margin: 0 auto; padding: 4px 16px 10px; }
.crumbs { font-size: .82rem; color: var(--muted); margin: 6px 0 14px; }
.crumbs a { color: var(--muted); font-weight: 600; }
.guide h1 { font-size: clamp(1.6rem, 5.5vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.guide .lead { font-size: 1.05rem; color: var(--muted); margin-bottom: 22px; }

.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.guide-list a { display: grid; gap: 4px; padding: 16px 18px; background: var(--surface); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(60,20,30,.05); color: var(--text); }
.guide-list a:hover { box-shadow: var(--shadow); }
.guide-list b { font-size: 1.05rem; line-height: 1.3; }
.guide-list span { color: var(--muted); font-size: .92rem; }
.guide-list .more { color: var(--primary); font-weight: 700; font-size: .88rem; }

.guide-article { background: var(--surface); border-radius: 22px; padding: 22px 20px; box-shadow: 0 2px 10px rgba(60,20,30,.05); }
.guide-article h2 { font-size: 1.2rem; margin: 26px 0 8px; }
.guide-article p, .guide-article li { color: #3d3438; line-height: 1.6; }
.guide-article ul, .guide-article ol { padding-left: 22px; margin: 0 0 12px; }
.guide-article li { margin-bottom: 6px; }
.guide-article a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.guide-date { color: var(--muted); font-size: .85rem; }

.guide-related { margin: 22px 0 0; }
.guide-related h2 { font-size: 1.05rem; margin-bottom: 8px; }
.guide-related ul { padding-left: 20px; margin: 0; }
.guide-related li { margin-bottom: 6px; }
.guide-related a { font-weight: 600; }

.guide-cta { max-width: 688px; margin: 26px auto 0; padding: 24px 20px; text-align: center; border-radius: 22px; background: var(--primary-soft); }
.guide-cta h2 { font-size: 1.3rem; }
.guide-cta p { color: #5b3a44; margin-bottom: 16px; }
.guide-page .ad-slot { max-width: 720px; margin: 20px auto 0; padding: 0 16px; }

@media (min-width: 600px) { .guide-article { padding: 30px 34px; } .guide-cta { margin-left: auto; margin-right: auto; } }
@media (max-width: 720px) { .guide-cta { margin-left: 16px; margin-right: 16px; } }

/* Home page: reasons, questions and guide links (sent by the server, kept by the app) */
.home-sec { max-width: 640px; margin: 0 auto; padding: 26px 16px 0; }
.home-sec h2 { text-align: center; font-size: 1.4rem; margin-bottom: 16px; }
.why-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.why-grid li { background: var(--surface); padding: 14px 16px; border-radius: var(--radius); box-shadow: 0 2px 10px rgba(60,20,30,.05); display: grid; gap: 3px; }
.why-grid span { color: var(--muted); font-size: .92rem; }
@media (min-width: 600px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.faq { background: var(--surface); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; box-shadow: 0 2px 10px rgba(60,20,30,.05); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin: 8px 0 2px; color: var(--muted); }
.center { text-align: center; margin-top: 14px; }