:root{
  --ink: #1d1d1f;
  --soft: #6e6e73;
  --line: #d2d2d7;
  --gray: #f5f5f7;
  --copper: #a85a35;
  --blue: #0071e3;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--font);
  font-size: 17px; line-height: 1.55; letter-spacing: -0.2px;
  color: var(--ink); background: #fff;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.logo{
  display: block; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: url('assets/logo-mark.png') center / contain no-repeat;
  mask: url('assets/logo-mark.png') center / contain no-repeat;
}
.top{
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 56px; padding: 0 max(20px, calc((100vw - 760px) / 2));
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.top__brand{ display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.top__brand:hover{ text-decoration: none; }
.top__back{ font-size: 14px; }

.doc{ max-width: 760px; margin: 0 auto; padding: clamp(40px, 8vw, 88px) 20px 48px; }
.kicker{ font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--copper); }
h1{ font-size: clamp(34px, 6vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.03em; margin-top: 10px; animation: rise .9s var(--ease-out) both; }
@keyframes rise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
.para{ margin-top: 18px; color: var(--soft); font-size: 19px; line-height: 1.4; }
.para strong{ color: var(--ink); font-weight: 600; }
.meta{ margin-top: 14px; font-size: 14px; color: var(--soft); }

.resumen, .toc, .otros{ margin-top: 36px; background: var(--gray); border-radius: 22px; padding: 24px 26px; }
.resumen h2, .toc h2, .otros h2{ font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); margin-bottom: 12px; }
.resumen ul{ list-style: none; display: grid; gap: 10px; font-size: 16px; line-height: 1.45; }
.resumen li{ padding-left: 18px; position: relative; }
.resumen li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }
.toc ol{ columns: 2; column-gap: 28px; padding-left: 20px; font-size: 15px; line-height: 1.9; }
.toc a{ color: var(--ink); }
.toc a:hover{ color: var(--copper); }

section{ margin-top: clamp(40px, 6vw, 60px); }
h2{ font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 14px; }
h2 span{ flex: none; font-size: 14px; font-weight: 600; color: var(--copper); min-width: 22px; }
h3{ font-size: 18px; font-weight: 600; margin: 26px 0 6px; letter-spacing: -0.2px; }
section p{ margin-top: 14px; }
section ul{ margin: 14px 0 0 0; padding-left: 22px; display: grid; gap: 8px; }
section li::marker{ color: var(--copper); }

.tabla{ margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
table{ width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
th{ text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); background: var(--gray); padding: 12px 16px; }
td{ padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; }
td:first-child{ font-weight: 600; width: 24%; }
td:last-child{ width: 16%; color: var(--soft); }

.cards{ margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card{
  display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 24px;
  background: var(--gray); color: var(--ink);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .3s var(--ease);
}
.card:hover{ text-decoration: none; transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(0,0,0,.35); background: #ececf0; }
.card strong{ font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.card span:last-child{ font-size: 15px; line-height: 1.4; color: var(--soft); }
.otros ul{ list-style: none; display: grid; gap: 8px; font-size: 16px; }

.foot{ max-width: 760px; margin: 0 auto; padding: 24px 20px 56px; font-size: 13px; color: var(--soft); border-top: 1px solid var(--line); }
.foot p + p{ margin-top: 4px; }

@media (max-width: 640px){
  .toc ol{ columns: 1; }
  .cards{ grid-template-columns: 1fr; }
  table, thead, tbody, tr, th, td{ display: block; width: 100% !important; }
  thead{ display: none; }
  tr{ padding: 12px 16px; border-top: 1px solid var(--line); }
  tr:first-child{ border-top: 0; }
  td{ border: 0; padding: 3px 0; }
  td::before{ content: attr(data-label); display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
}
@media print{
  .top, .toc, .otros{ display: none; }
  body{ font-size: 11pt; }
  .resumen{ background: none; border: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce){
  h1{ animation: none; }
  .card{ transition: none; }
  html{ scroll-behavior: auto; }
}