@font-face{font-family:Instrument;src:url(assets/InstrumentSerif-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:Instrument;src:url(assets/InstrumentSerif-Italic.ttf) format('truetype');font-style:italic;font-display:swap}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/BricolageGrotesque-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root{--paper:#f5f0e3;--dark:#243e32;--olive:#446047;--ink:#24382d;--soft:#546256;--rust:#9a4b34;--line:#d3ccba;--green:#dee6d0;--serif:Instrument,Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,sans-serif}img{display:block;max-width:100%}a{color:inherit}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.98}h2{font-size:clamp(3rem,6.6vw,6.1rem);letter-spacing:-.025em}h3{font-size:2.35rem}.shell{width:min(1180px,calc(100% - 104px));margin-inline:auto}.top{min-height:83px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{font-family:var(--serif);font-size:1.65rem;text-decoration:none;white-space:nowrap}.top nav{display:flex;align-items:center;gap:30px;font-size:.88rem}.top nav a{text-decoration:none}.navbuy{border:1px solid var(--dark);padding:8px 16px;border-radius:24px}
.eyebrow{font-size:.72rem;letter-spacing:.15em;font-weight:750;color:var(--rust)}
.button{display:inline-flex;justify-content:center;align-items:center;gap:20px;border:1px solid transparent;border-radius:28px;background:var(--dark);color:white;font:700 .94rem system-ui;padding:14px 21px;text-decoration:none;cursor:pointer}
.button:hover,.navbuy:hover{background:#41614c;color:#fff}
.textlink{text-underline-offset:5px;font-size:.94rem}
.film{background:var(--dark);color:var(--paper);padding-block:56px}.film-layout{display:grid;grid-template-columns:1fr .76fr;align-items:center;gap:9%}.film .eyebrow{color:#d6dcb1}.film h2,.contents h2,.buy h2{margin-block:14px 20px}.film p:not(.eyebrow){max-width:42ch;color:#e6e8d8}.film details{margin-top:19px;max-width:48ch}.film summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}.film details p{margin-top:12px;font-size:.93rem}.video-wrap{justify-self:center;width:min(100%,286px)}video{display:block;width:100%;aspect-ratio:9/16;border-radius:14px;background:#14241b;object-fit:contain;box-shadow:0 16px 36px #14241ba0}.section-lead{max-width:59ch;color:var(--soft)}.inside{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:31px}.inside p,.buy p{margin-top:10px;color:var(--soft);font-size:.95rem}.buy{padding:45px 48px;background:var(--green);border-radius:14px;margin-bottom:59px}footer{border-top:1px solid var(--line);padding:20px 0 28px;display:flex;justify-content:space-between;align-items:center;gap:1rem}footer>span{font-size:.85rem;color:var(--soft)}:focus-visible{outline:3px solid #ab5e49;outline-offset:5px}
@media(max-width:900px){.shell{width:calc(100% - 56px)}}
@media(max-width:640px){.shell{width:calc(100% - 36px)}.top{min-height:63px}.top nav{gap:12px}.top nav a[href="#reel"]{display:none}.brand{font-size:1.35rem}.navbuy{padding:6px 10px}.film-layout{grid-template-columns:1fr;gap:35px}.film{padding-block:42px}.video-wrap{width:min(80%,268px)}.inside{grid-template-columns:1fr;gap:17px}.buy{padding:26px;margin-bottom:35px}.buy h2{font-size:3.2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

:root {
  --paper: #f7f2e6;
  --dark: #243d30;
  --olive: #436344;
  --soft: #4f604f;
  --rust: #94492f;
  --line: #d9d0bc;
  --green: #e6ebcf;
  --sprout: #d6e2a9;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 1.95rem; letter-spacing: -.035em; line-height: 1; }
.brand img { width: 39px; height: 39px; flex: none; }
.top { min-height: 77px; }
.film { background: var(--dark); }
.film .eyebrow { color: var(--sprout); }
.buy { border-radius: 18px 72px 18px 18px; }
.navbuy:focus-visible, .button:focus-visible { outline-color: var(--rust); }
@media (max-width: 640px) {
  .top { min-height: 63px; }
  .brand { gap: 7px; font-size: 1.55rem; }
  .brand img { width: 32px; height: 32px; }
  footer { flex-wrap: wrap; }
}
@media (max-width: 370px) {
  .top nav a[href="#incluye"] { display: none; }
}

.contents { padding-block: 45px 68px; border-top: 1px solid var(--line); }
.contents h2 { max-width: 16ch; }
.inside { padding-left: 0; margin-bottom: 0; list-style-position: inside; }
.inside li { border-top: 1px solid var(--line); padding-top: 16px; }
.inside li::marker { color: var(--rust); font-size: .94rem; font-weight: 750; }
.inside h3 { display: inline; margin-left: 5px; }
.inside p { max-width: 34ch; }
.buy { margin-top: 54px; }
.buy h2 { margin-top: 0; }
.buy .button { margin-top: 18px; }
@media (max-width: 640px) {
  .contents { padding-block: 34px 44px; }
  .buy { margin-top: 36px; }
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(30px, 5vw, 76px);
  padding-block: clamp(34px, 4.2vw, 64px) 50px;
}
.hero-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .045em;
  color: var(--rust);
}
.hero-label::before {
  content: "";
  width: 24px;
  height: 3px;
  flex: none;
  background: currentColor;
}
.hero h1 {
  font: 700 clamp(2.5rem, 6vw, 5.45rem)/1.03 "Bricolage Grotesque", system-ui, sans-serif;
  color: var(--dark);
  letter-spacing: -.025em;
  margin-block: 17px 20px;
}
.hero h1 > span { display: block; }
.hero h1 strong {
  color: var(--olive);
  font-weight: inherit;
  white-space: nowrap;
}
.hero .lead {
  max-width: 42ch;
  margin-bottom: 20px;
  color: var(--ink);
  font-size: clamp(1rem, 1.48vw, 1.19rem);
  line-height: 1.58;
}
.hero-offer {
  width: fit-content;
  max-width: 100%;
  padding-block: 13px 15px;
  border-block: 1px solid var(--line);
}
.offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 14px;
  color: var(--soft);
}
.offer strong {
  font: 700 2.55rem/1.1 "Bricolage Grotesque", system-ui, sans-serif;
  color: var(--dark);
  white-space: nowrap;
}
.offer strong span { font-size: .96rem; letter-spacing: .045em; vertical-align: .41em; }
.offer small { font-size: .85rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 10px; }
.hero .button { background: var(--rust); border-radius: 5px; }
.hero .button:hover { background: #713821; }
.hero .textlink { text-underline-offset: 5px; }
.offer-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin: 13px 0 0;
  padding: 0;
  color: var(--soft);
  font-size: .83rem;
  list-style: none;
}
.offer-includes li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 7px .16em 0;
  border-radius: 50%;
  background: var(--rust);
}
.hero-art {
  --grid-ink: #5264482b;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(35px, 5.6vw, 78px) clamp(31px, 5vw, 70px);
  border: 1px solid #c2b79a;
  background-color: #ede3cb;
  background-image: linear-gradient(var(--grid-ink) 1px, transparent 1px), linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: 23px 23px;
  background-position: -1px -1px;
}
.hero-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9% 12% 13% 16%;
  background-color: var(--dark);
  background-image: repeating-linear-gradient(0deg, transparent 0 6px, #d6e2a914 6px 7px, transparent 7px 11px);
  transform: rotate(6deg);
}
.book-cover {
  width: min(100%, 292px);
  height: auto;
  border-radius: 2px 4px 4px 2px;
  transform: rotate(-4deg);
  box-shadow: 5px 8px 0 #d9c6a2, 8px 13px 20px #201b164d;
}
.hero-stamp {
  position: absolute;
  right: 17px;
  bottom: 15px;
  width: 50px;
  height: auto;
  transform: rotate(8deg);
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-block: 28px 36px; }
  .hero h1 { font-size: clamp(2.1rem, 9.8vw, 4.45rem); margin-block: 13px 15px; }
  .hero .lead { margin-bottom: 15px; }
  .hero-art { width: min(100%, 520px); justify-self: center; }
  .book-cover { width: min(77%, 255px); }
  .hero-stamp { width: 42px; right: 10px; bottom: 10px; }
}
@media (max-width: 370px) {
  .actions { column-gap: 14px; }
  .hero .button { gap: 11px; padding-inline: 14px; }
}