/* Diseño editorial premium para la cubierta nocturna de lanzamiento. */
:root {
  --paper: #f6f3ec;
  --paper-deep: #ece7dc;
  --ink: #1b2633;
  --ink-dark: #101923;
  --muted: #6b7074;
  --line: #ded8cc;
  --gold: #c9a867;
  --max: 1320px;
}

html { scroll-padding-top: 92px; scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-synthesis: none; }
.header { position: sticky; top: 0; z-index: 40; border-color: #e6dfd3; background: rgb(246 243 236 / 91%); backdrop-filter: blur(16px); }
.nav-wrap { padding-block: 16px; }
.brand { letter-spacing: 1.25px; }
.brand-mark { width: 42px; height: 42px; border-color: #b6a06d; color: #937842; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: -1px; padding: 0; }
.header nav { gap: 27px; }
.header nav a { color: #424c56; }
.header nav .nav-buy { border: 0; border-radius: 999px; background: var(--ink); color: #f9f5ec; padding: 11px 18px; }
.header nav .nav-buy:hover { background: #2a3b4f; color: #fff; }

.hero {
  isolation: isolate;
  position: relative;
  max-width: none;
  padding: 54px max(32px, calc((100vw - var(--max)) / 2)) 0;
  min-height: calc(100svh - 74px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  column-gap: 36px;
  overflow: hidden;
  color: #f7f2e9;
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 34%, rgb(145 122 75 / 22%), transparent 31%),
    radial-gradient(ellipse at 78% 30%, rgb(72 88 105 / 55%), transparent 45%),
    radial-gradient(ellipse at 14% 98%, rgb(117 91 52 / 19%), transparent 43%),
    linear-gradient(125deg, #111a27 0%, #172333 53%, #101722 100%);
  content: "";
}
.hero-copy, .hero-art, .hero-bottom { position: relative; z-index: 1; }
.hero-copy { max-width: 560px; }
.hero .eyebrow { color: #e0c27e; letter-spacing: 2.15px; }
.status-dot { background: #d7b66e; box-shadow: 0 0 0 4px rgb(215 182 110 / 17%); }
.hero h1 { max-width: 580px; font-size: clamp(66px, 6.2vw, 94px); letter-spacing: -4.8px; line-height: .99; }
.hero h1 em { color: #ddc17f; }
.hero-subtitle { color: #e9d9b2; font-size: 16px; }
.hero-description { color: #c7ced3; }
.hero-byline p, .hero-byline p > span { color: #d4d8d9; }
.tiny-rule { background: #c5a75f; }
.hero-year { color: rgb(241 233 213 / 8%); }
.book-stage { perspective: none; }
.book-stage::before { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(110%, 580px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(214 183 112 / 19%) 0%, rgb(214 183 112 / 7%) 35%, transparent 69%); content: ""; transform: translate(-50%, -51%); }
.book { z-index: 1; width: min(100%, 470px); border: 1px solid rgb(255 249 233 / 24%); border-radius: 3px; box-shadow: 0 38px 78px rgb(0 0 0 / 48%), 0 5px 16px rgb(0 0 0 / 30%); transform: rotate(-1deg); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.book:hover { transform: translateY(-5px) rotate(0); box-shadow: 0 40px 72px rgb(0 0 0 / 48%), 0 4px 10px rgb(0 0 0 / 24%); }
.book img { border-radius: 3px; }
.book-spine { opacity: .24; }
.book-stage::after { background: rgb(0 0 0 / 48%); filter: blur(24px); }
.art-caption { color: #e4d7bd; letter-spacing: .45px; font-size: 13px; }
.hero-bottom { border-color: rgb(234 224 202 / 24%); color: #d5d3cc; }
.button-green { background: #d3b56f; color: #17212b; }
.button-green:hover { background: #e2c783; }
.hero-actions .button { min-height: 54px; border-radius: 999px; box-shadow: 0 8px 24px rgb(0 0 0 / 20%); }
.hero-actions .button:hover { box-shadow: 0 12px 30px rgb(0 0 0 / 29%); }
.text-link { border-color: rgb(223 209 176 / 48%); color: #eee5d1; }
.text-link:hover { border-color: #e1c77d; }

.intro { padding-block: 96px; }
.section-label { color: #68747e; }
.section-label .index { color: #a18349; }
.intro h2, .history h2, .excerpt-heading h2, .faq h2 { color: #1b2633; }
.intro h2 em { color: #8d7651; }
.intro .intro-note { color: #7d6945; }
.history { background: #182433; }
.history-copy { color: #e9e5dd; }
.history .section-label, .history .section-label .index { color: #d0b575; }
.history h2 { color: #f7f2e9; }
.history p { color: #cbd0d2; }
.history blockquote { border-left-color: #c4a45c; }
.excerpt { padding-block: 94px; }
.excerpt-paper { border: 1px solid #e4dccd; border-radius: 12px; box-shadow: 0 18px 45px rgb(32 37 40 / 6%); }
.excerpt blockquote { color: #293644; }
.author { padding-block: 96px; }
.author-portrait img { border-radius: 3px; box-shadow: 16px 20px 44px rgb(35 38 39 / 15%); }
.author h2 { color: #1b2633; }
.author h2 em { color: #8d7651; }
.signature { color: #8d7651; }
.purchase { padding-block: 92px; border-color: #e2dccf; }
.purchase-top .eyebrow { color: #8d7651; }
.purchase h2 { color: #1b2633; }
.channels { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-color: #ded8cc; border-radius: 12px; background: #faf8f3; box-shadow: 0 15px 40px rgb(30 37 42 / 5%); }
.channel { padding: 30px 32px 32px; transition: background-color .22s ease; }
.channel:hover { background: #fffdf8; }
.channel + .channel { border-left-color: #ded8cc; }
.channel-tag { color: #8d7651; }
.channel h3 { color: #1b2633; font-size: 32px; }
.channel p { color: #697077; font-size: 12px; max-width: 310px; }
.channel .button { border-radius: 999px; }
.faq { padding-block: 92px; }
.faq .eyebrow { color: #8d7651; }
.faq-items details { border-color: #ded8cc; }
.faq summary { color: #263441; }
.faq summary span { color: #9a7d46; }
.faq details p { color: #5e666e; }
.faq details a { color: #795f30; }
.closing { max-width: none; padding: 64px max(32px, calc((100vw - var(--max)) / 2)); background: #172332; color: #f4eddf; }
.closing p { color: #f4eddf; }
.closing > span { color: #cbb983; }
.footer { background: #101923; color: #e9e4d9; border-color: #2a3540; }
.footer a, .footer-link, .footer p { color: #d0d3d3; }
.reader { border: 1px solid #e5dcc9; border-radius: 12px; box-shadow: 0 28px 90px rgb(0 0 0 / 28%); }
.reader-bar { background: #172332; color: #e7d7ae; }
.reader h2 { color: #1b2633; }
.reader-byline { color: #8d7651; }
.privacy-dialog { border: 1px solid #e5dcc9; border-radius: 12px; box-shadow: 0 28px 90px rgb(0 0 0 / 28%); }
.privacy-dialog h2 { color: #1b2633; }

@media (max-width: 700px) {
  .hero { display: flex; min-height: 0; padding: 46px 24px 0; }
  .hero h1 { font-size: clamp(58px, 12vw, 80px); letter-spacing: -3.2px; }
  .menu-toggle { display: flex; flex: 0 0 40px; color: var(--ink); }
  .hero-art { width: 100%; max-width: 360px; margin: 32px auto 0; }
  .book-stage { padding-inline: 0; }
  .book { width: min(84vw, 320px); margin-inline: auto; }
  .hero-bottom { color: #d8d6cf; }
  .intro, .excerpt, .author, .purchase, .faq { padding-block: 66px; }
  .channels { grid-template-columns: 1fr; }
  .channel + .channel { border-left: 0; border-top: 1px solid #ded8cc; }
  .channel { padding: 26px 24px; }
  .closing { padding: 48px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .book, .channel { transition: none; }
  .book, .book:hover { transform: none; }
}