/* Literatura América del Sur — component styles. Values come from tokens.css (tokens.json). */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500&family=Noto+Sans:wght@400;600;700&display=swap");

.lit-root, .lit-root * { box-sizing: border-box; }
.lit-root { background: var(--surface); color: var(--ink-body); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }

/* ---------- SectionTitle: the manual's "| Título" ---------- */
.lit-title { display: flex; align-items: stretch; gap: var(--space-4); margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 38px; color: var(--ink); text-wrap: balance; }
.lit-title::before { content: ""; flex: 0 0 6px; border-radius: 1px; background: var(--pizarra); }
.lit-title--lg { font-size: 44px; line-height: 50px; }
.lit-title--lg::before { flex-basis: 8px; }
.lit-title__sub { display: block; margin: var(--space-2) 0 0 calc(6px + var(--space-4)); font-size: 19px; line-height: 30px; color: var(--ink-body); }
[data-theme="azul"] .lit-title::before { background: var(--turquesa); }

/* ---------- Eyebrow & Tagline ---------- */
.lit-eyebrow { margin: 0; font-family: var(--font-label); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.lit-tagline { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-family: var(--font-label); font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.lit-tagline::before, .lit-tagline::after { content: ""; flex: 1 1 24px; height: 2px; background: var(--ink); opacity: .9; }
.lit-tagline--start::before { flex: 0 0 32px; }

/* ---------- Button ---------- */
.lit-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-6); border: 2px solid transparent; border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 20px; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.lit-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.lit-btn:active { transform: translateY(1px); }
.lit-btn--primary { background: var(--action); color: var(--on-action); }
.lit-btn--primary:hover { background: var(--azul-profundo); }
[data-theme="azul"] .lit-btn--primary:hover { background: #ffffff; }
.lit-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.lit-btn--secondary:hover { border-color: var(--ink); }
.lit-btn--whatsapp { background: var(--whatsapp); color: var(--crema); border-radius: var(--radius-pill); }
.lit-btn--whatsapp:hover { background: #17633d; }
.lit-btn svg { width: 20px; height: 20px; flex: none; }
.lit-btn[disabled], .lit-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- Badge (date / status pill) ---------- */
.lit-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--ink); font-family: var(--font-label); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: .04em; }
.lit-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- BookCard ---------- */
.lit-book { display: grid; grid-template-rows: auto 1fr; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.lit-book__cover { position: relative; aspect-ratio: 4 / 3.6; background: var(--surface-tint); overflow: hidden; }
.lit-book__cover::before { content: ""; position: absolute; inset: auto -20% -55% -20%; height: 90%; border-radius: 50%; background: var(--accent); opacity: .22; }
.lit-book__cover img { position: absolute; left: var(--space-4); right: var(--space-4); top: var(--space-2); width: calc(100% - 2 * var(--space-4)); height: calc(100% - var(--space-2)); object-fit: contain; object-position: center bottom; }
.lit-book__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.lit-book__kicker { margin: 0; font-family: var(--font-label); font-weight: 500; font-size: 13px; line-height: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.lit-book__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; color: var(--ink); }
.lit-book__author { margin: -6px 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.lit-book__text { margin: 0; color: var(--ink-body); }
.lit-book__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.lit-book__was { font-size: 14px; color: var(--ink-muted); text-decoration: line-through; }
.lit-book__now { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 28px; color: var(--ink); }
.lit-book__note { font-family: var(--font-label); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }

/* ---------- Waves: the brand's organic bands ---------- */
.lit-waves { display: block; width: 100%; height: 100%; }
.lit-waves .w1 { fill: var(--azul); }
.lit-waves .w2 { fill: var(--turquesa-claro); }
.lit-waves .w3 { fill: var(--turquesa); }
[data-theme="azul"] .lit-waves .w1 { fill: var(--azul-profundo); }

/* ---------- Form fields (reservation) ---------- */
.lit-field { display: grid; gap: 6px; }
.lit-field label { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink); }
.lit-input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: inherit; }
.lit-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.lit-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); }
.lit-stepper button { width: 40px; height: 40px; border: 0; background: none; color: var(--ink); font: 600 20px/1 var(--font-sans); cursor: pointer; border-radius: var(--radius-sm); }
.lit-stepper button:hover { background: var(--surface-tint); }
.lit-stepper button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lit-stepper output { min-width: 32px; text-align: center; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .lit-btn { transition: none; } }