/* Estilos comunes de las guías y páginas de contenido (complementa a tailwind.css) */
html, body { background: #F7F4ED; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.font-display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }

/* Cuerpo del artículo */
.article { color: #2A2A2A; font-size: 1.0625rem; line-height: 1.75; }
.article > * + * { margin-top: 1.1em; }
.article h2 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-size: 1.75rem; color: #0F0F0F; margin-top: 2.4em; scroll-margin-top: 88px; }
.article h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: 1.25rem; color: #0F0F0F; margin-top: 1.8em; scroll-margin-top: 88px; }
.article p { color: #3D3D3D; }
.article a { color: #1F4D2B; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article a:hover { text-decoration-thickness: 2px; }
.article strong { color: #0F0F0F; font-weight: 700; }
.article ul, .article ol { padding-left: 1.4em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li + li { margin-top: 0.45em; }
.article li::marker { color: #1F4D2B; }
.article blockquote { border-left: 3px solid #1F4D2B; padding-left: 1em; color: #525252; font-style: italic; }

/* Tablas con scroll horizontal propio en móvil */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #E5E0D5; border-radius: 1rem; background: #fff; }
.article table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.5; min-width: 560px; }
.article th { text-align: left; padding: 0.8rem 1rem; background: #EDF3EE; color: #0F0F0F; font-weight: 700; }
.article td { padding: 0.8rem 1rem; border-top: 1px solid #E5E0D5; color: #3D3D3D; vertical-align: top; }

/* Cajas */
.callout { border-radius: 1.25rem; padding: 1.25rem 1.4rem; background: #EDF3EE; border: 1px solid #D8E4D9; }
.callout-warn { background: #F4E5CC; border-color: #E9D2A8; }
.checklist { list-style: none !important; padding-left: 0 !important; }
.checklist li { position: relative; padding-left: 2em; }
.checklist li::before { content: '✓'; position: absolute; left: 0; top: 0.1em; width: 1.35em; height: 1.35em; border-radius: 999px; background: #1F4D2B; color: #F7F4ED; font-size: 0.75em; font-weight: 900; display: flex; align-items: center; justify-content: center; }

/* Índice */
.toc a { color: #525252; text-decoration: none; font-weight: 500; }
.toc a:hover { color: #1F4D2B; }

/* FAQ */
details summary::-webkit-details-marker { display: none; }

.appstore-btn { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease, background-color 0.3s ease; }
.appstore-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(15,15,15,0.35); }
@media (prefers-reduced-motion: reduce) { .appstore-btn:hover { transform: none; } }