:root {
  --ink: #0c2e2c;
  --text: #26302f;
  --muted: #44504e;
  --soft: #5d6866;
  --paper: #fbf8f6;
  --teal: #0f8079;
  --teal-light: #7fe3d8;
  --teal-deep: #0b4f4c;
  --red: #c8203c;
  --red-deep: #8c0f25;
  --line: #e6dfdb;
  --display: "Unbounded", "Arial Black", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--teal); }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; position: relative; }
.deco { position: absolute; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabecera */
.top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 1.5rem 0; font-size: .95rem; }
.brand { font-weight: 600; color: var(--ink); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.top nav a { color: var(--text); text-decoration: none; }
.top nav a:hover { color: var(--red); text-decoration: underline; }

/* Portada */
.hero { position: relative; overflow: hidden; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; padding: 3rem 0 15rem; }
.hero-text { flex: 999 1 32rem; min-width: 0; }
.title { line-height: 1; }
.title .t1 { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 5.5rem); letter-spacing: -.01em; color: var(--ink); }
.title .t2 { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 4.5rem); letter-spacing: -.015em; margin-top: .6rem; color: var(--text); }
.c-teal { color: var(--teal); }
.c-red { color: var(--red); }
.claim { margin-top: 1.75rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.3; color: var(--ink); max-width: 24em; }
.lead { margin-top: 1rem; font-size: 1.125rem; color: var(--muted); max-width: 34em; }

.signup { margin-top: 2rem; max-width: 30rem; background: rgba(255,255,255,.9); border-radius: 16px; padding: 1.4rem; box-shadow: 0 18px 40px -22px rgba(12,46,44,.35); }
.signup p { font-size: .95rem; line-height: 1.5; color: var(--muted); }
.signup form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.signup input[type=email] { flex: 1 1 12rem; min-width: 0; border: 1px solid #cfd8d6; border-radius: 10px; padding: .8rem .9rem; font: inherit; font-size: 1rem; color: var(--text); background: #fff; }
.btn { display: inline-block; border: 0; border-radius: 10px; background: var(--red); color: #fff; font: inherit; font-size: 1rem; font-weight: 600; padding: .8rem 1.4rem; min-height: 48px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--red-deep); color: #fff; }
.btn[disabled] { opacity: .6; cursor: wait; }
.legal { margin-top: .6rem !important; font-size: .8rem !important; color: var(--soft) !important; }
.legal a { color: var(--soft); }
.msg { margin-top: .7rem !important; font-size: .95rem !important; font-weight: 600; }
.msg.ok { color: var(--teal) !important; }
.msg.err { color: var(--red) !important; }

.book-wrap { flex: 1 1 18rem; display: flex; justify-content: center; }
.book { position: relative; width: min(300px, 78vw); aspect-ratio: 148 / 210; background: #fff; border-radius: 3px 8px 8px 3px; box-shadow: 0 40px 70px -30px rgba(12,46,44,.55); display: flex; flex-direction: column; padding: 1.6rem 1.4rem 1.25rem 2.1rem; transform: rotate(3deg); }
.book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--red); border-radius: 3px 0 0 3px; }
.book .b1 { font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--ink); }
.book .b2 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin-top: .4rem; color: var(--text); }
.book img { flex: 1; min-height: 0; width: 100%; object-fit: contain; margin: .75rem 0; }
.book .b3 { font-size: .8rem; font-weight: 600; color: var(--ink); }

/* Técnicas */
.learn { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--teal-deep) 0%, #083a38 70%); color: #d6ebe8; }
.learn .wrap { padding: 6rem 0 7.5rem; }
.sec-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 2.9rem); line-height: 1.1; }
.learn .sec-title { color: #fff; }
.learn .intro { margin-top: .9rem; font-size: 1.125rem; max-width: 36em; }
.tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 2.25rem 4rem; margin-top: 3.25rem; }
.tech h3 { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; line-height: 1.2; color: var(--teal-light); margin-bottom: .5rem; }
.tech p { font-size: 1rem; }

/* Índice */
.toc-sec { position: relative; overflow: hidden; background: linear-gradient(180deg, #fbf8f6 0%, #f7eff0 60%, #eef6f5 100%); }
.toc-sec .wrap { padding: 6rem 0 9rem; }
.toc-sec .sec-title { color: var(--red); }
.toc-sec .intro { margin-top: .75rem; font-size: 1.125rem; color: var(--muted); }
.toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 2rem; margin-top: 2.75rem; font-size: .95rem; line-height: 1.5; }
.toc h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); padding-bottom: .6rem; border-bottom: 2px solid var(--teal); margin-bottom: .75rem; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li + li { margin-top: .4rem; }

/* Autor */
.author { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--red-deep) 0%, #a3132b 55%, var(--red) 100%); color: #fde9ec; }
.author .wrap { padding: 5.5rem 0; display: flex; flex-wrap: wrap; gap: 3.25rem; align-items: center; }
.portrait { flex: 0 0 15rem; max-width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.portrait img { width: 100%; height: auto; }
.author-text { flex: 1 1 28rem; min-width: 0; }
.author .sec-title { color: #fff; margin-bottom: 1.1rem; }
.author p { font-size: 1.125rem; max-width: 36em; }
.author p + p { margin-top: .9rem; }
.author .links { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.4rem; font-weight: 600; }
.author .links a { color: #fff; }
.author .links a:hover { color: #ffd6dc; }

/* Pack */
.pack .wrap { padding: 5rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.75rem; }
.pack h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1.15; color: var(--ink); margin-bottom: .6rem; }
.pack p { font-size: 1.125rem; color: var(--muted); max-width: 34em; }
.pack .txt { flex: 1 1 30rem; }

/* Pie */
.foot { border-top: 1px solid var(--line); }
.foot .wrap { padding: 1.6rem 0 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--soft); }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.foot a { color: var(--soft); }

/* Páginas interiores */
.page .wrap { padding: 3rem 0 5rem; max-width: 46rem; }
.page h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.5vw, 2.8rem); color: var(--ink); line-height: 1.15; margin-bottom: 1.25rem; }
.page h2 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--ink); margin: 2rem 0 .5rem; }
.page p { margin-bottom: .9rem; color: var(--muted); }
.diag-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.diag-list li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; color: var(--ink); font-weight: 600; }
.diag-list span { display: block; font-weight: 400; font-size: .9rem; color: var(--soft); }

@media (max-width: 40rem) {
  .hero-grid { padding: 1.5rem 0 11rem; gap: 2.25rem; }
  .book-wrap { order: -1; }
  .book { width: min(220px, 62vw); }
  .learn .wrap, .toc-sec .wrap { padding-top: 4rem; }
  .portrait { flex-basis: 12rem; }
}