/* Palette taken from the Book 1 cover: forest green title, terracotta Spanish
   title, misty sky, orchid pink, tilcayo gold. */
:root {
  --green: #3c7a5a;
  --green-dark: #2a5c43;
  --terracotta: #c8622a;
  --mist: #eef4f1;
  --cream: #fffaf2;
  --orchid: #d9549a;
  --gold: #f2b43c;
  --ink: #2b2b2b;
  --muted: #5b6660;
  --radius: 20px;
  --font: ui-rounded, "Arial Rounded MT Bold", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--mist); }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--mist);
  line-height: 1.55;
  font-size: 1.05rem;
}

[lang="es"] { color: inherit; }

.hero {
  text-align: center;
  padding: 2.5rem 1rem 3.25rem;
  background:
    radial-gradient(circle at 5% 94%, rgba(217, 84, 154, .85) 0 26px, transparent 27px),
    radial-gradient(circle at 88% 20%, rgba(242, 180, 60, .9) 0 18px, transparent 19px),
    linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff;
  border-bottom: 8px solid var(--gold);
}

.logo { width: 96px; height: auto; }

h1 {
  margin: .25rem 0 .5rem;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  letter-spacing: .01em;
}

.tagline { margin: 0 auto; max-width: 40rem; font-size: 1.15rem; }
.tagline span { display: block; }
.tagline [lang="es"] { color: #ffe3b8; }

main { max-width: 64rem; margin: 0 auto; padding: 2rem 1rem 1rem; }

.book {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: center;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(42, 92, 67, .15);
  margin-top: -3.5rem;
}

.cover {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  transform: rotate(-1.5deg);
}

.kicker {
  display: inline-block;
  margin: 0;
  padding: .2rem .8rem;
  border-radius: 999px;
  background: var(--orchid);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}

h2 { margin: .6rem 0 .8rem; line-height: 1.15; }
.title-en { display: block; color: var(--green); font-size: clamp(1.8rem, 5vw, 2.4rem); }
.title-es { display: block; color: var(--terracotta); font-size: clamp(1.5rem, 4.2vw, 2rem); }

.book-text p[lang="es"] { color: var(--muted); }

.buy { margin: 1.5rem 0 .25rem; }

.btn {
  display: inline-block;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 0 #9c4a1e;
}
a.btn:hover, a.btn:focus-visible { background: #b55522; }
a.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn-soon { background: var(--gold); color: #4a3200; box-shadow: 0 4px 0 #c88e1e; }
[hidden] { display: none !important; }

.next {
  margin: 2rem 0 1rem;
  text-align: center;
  padding: 1.1rem 1rem;
  border: 3px dashed var(--green);
  border-radius: var(--radius);
  color: var(--green-dark);
  font-size: 1.1rem;
}
.next p { margin: 0; }
.sep { margin: 0 .6rem; color: var(--orchid); }

footer {
  text-align: center;
  padding: 1.5rem 1rem 2.5rem;
  color: var(--muted);
  font-size: .95rem;
}

@media (max-width: 720px) {
  .book { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.25rem; }
  .cover { max-width: 320px; margin: 0 auto; display: block; }
  .book-text { text-align: center; }
  .sep { display: none; }
  .next span[lang] { display: block; }
}