/* Guías de Bloopy: texto largo y legible sobre tokens.css; sigue al tema del sistema.
   Los botones copian los de la landing (rosa Bloop con texto oscuro). */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-x: clip; }
/* Texto largo: sin la capa de esferas detrás (tokens.css), fondo liso del tema. */
body:not(.has-wallpaper)::before { content: none; }
a { color: var(--ap-accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ap-accent); }
:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; }

header.top, main, footer.bottom { width: min(760px, 100% - 2 * var(--ap-gutter)); margin-inline: auto; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: var(--ap-space-4); padding: var(--ap-space-4) 0; }
.brand { display: inline-flex; align-items: center; gap: var(--ap-space-2); color: var(--ap-ink); text-decoration: none; font-family: var(--ap-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.04em; }
.brand i { font-style: normal; color: var(--ap-brand); }

main { padding: var(--ap-space-5) 0 var(--ap-space-6); }
.kicker { margin: 0 0 var(--ap-space-2); color: var(--ap-accent-deep); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { margin: 0 0 var(--ap-space-4); font-family: var(--ap-font-display); font-size: clamp(32px, 5vw, 48px); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; color: var(--ap-ink); text-wrap: balance; }
h2 { margin: var(--ap-space-6) 0 var(--ap-space-3); font-family: var(--ap-font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ap-ink); }
p, li { font-size: 17px; line-height: 1.65; color: var(--ap-ink-2); }
p { margin: 0 0 var(--ap-space-3); }
.lead { font-size: clamp(18px, 2vw, 20px); }
ul, ol { margin: 0 0 var(--ap-space-3); padding-left: 1.3em; }
li { margin-bottom: var(--ap-space-2); }
li::marker { color: var(--ap-accent-deep); font-weight: 700; }
strong { color: var(--ap-ink); }

.cta { display: grid; justify-items: start; gap: var(--ap-space-3); margin-top: var(--ap-space-6); padding: var(--ap-space-5); border-radius: 26px; border: 1px solid var(--ap-glass-edge); background: var(--ap-glass-1); box-shadow: inset 0 1px 0 var(--ap-reflection), var(--ap-shadow-1); }
.cta p { margin: 0; color: var(--ap-ink); font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--ap-space-5); border-radius: var(--ap-radius-pill); font-family: var(--ap-font); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform var(--ap-dur-base) var(--ap-ease-spring); }
.btn:hover { transform: translateY(-2px); }
a.btn-primary, a.btn-primary:hover { color: var(--ap-on-brand); background: var(--ap-brand); box-shadow: inset 0 1px 0 var(--ap-glass-sheen), 0 12px 24px -10px color-mix(in srgb, var(--ap-brand) 70%, transparent); }
.btn-lg { min-height: 54px; padding-inline: 26px; font-size: var(--ap-text-body); }

footer.bottom { display: flex; flex-wrap: wrap; gap: var(--ap-space-2) var(--ap-space-4); padding: var(--ap-space-4) 0 var(--ap-space-6); border-top: 1px solid var(--ap-line); font-size: 13px; }
footer.bottom a { color: var(--ap-ink-2); }

@media (max-width: 560px) {
  header.top .btn { min-height: 40px; padding-inline: var(--ap-space-4); font-size: 14px; }
  .btn-lg { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }