/* ----------------------------------------------------------------------------
 * Variables y Base
 * ---------------------------------------------------------------------------- */

:root {
  --GW-sidenotes-max-width: 310px;
}

html {
  padding: 0;
  margin: 0;
  background-color: var(--GW-body-background-color);
  color: var(--GW-body-text-color);
  font-weight: 400;
  font-family: "crimson", "Apple Garamond", Baskerville, "Libre Baskerville", "Times New Roman", "Droid Serif", Times, serif;
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 auto;
  padding: 1em;
  box-sizing: border-box;
  min-height: 100vh;
}

#layout {
display: flex;
flex-direction: column;
width: 100%;
max-width: 80ch;
margin: 0 auto;
gap: 2em;
}

#sidebar {
width: 8ch !important;
flex-shrink: 0;
z-index: 100;
pointer-events: auto;
/*! align-content: ; */
/*! text-align: ; */
}

#sidebar code {
border: none;
background-color: transparent;
padding: 0;
}

#sidebar a {
display: block;
transition: color 0.2s ease;
}

#main-content {
flex-grow: 1;
min-width: 0;
width: 100%;
position: relative;
z-index: 1;
}

/* ----------------------------------------------------------------------------
 * Headers (Completo con secciones)
 * ---------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  position: relative;
  margin: 1.25em 0 0.5em 0;
}

h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  border: none;
  padding: 0;
  background-color: inherit;
  font-size: inherit;
  font-weight: normal;
}

h1 {
  font-family: 'et-book';
  font-feature-settings: 'smcp';
  font-size: 1.45em;
  line-height: 1.25;
}

h2 {
  font-style: normal;
  font-size: 1.20em;
  word-spacing: 0.2em;
  padding: 0 0.5em 0 0;
  line-height: 1.25;
  box-shadow: 0 -5px 0 0 var(--GW-H1-box-shadow-background-color) inset, 0 -6px 0 0 var(--GW-H1-box-shadow-line-color) inset;
}

h2::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0.1em;
  pointer-events: none;
}

h3 { font-size: 1.125em; }
h4 { text-transform: capitalize; }
h5, h6 { font-size: 1em; }
h6 { font-style: italic; }

/* Secciones con headers especiales */
section:not(.collapse) > h1:first-child {
  line-height: 1;
  margin: 1em 0 0.375em 0;
  text-align: right;
  font-weight: 600;
  box-shadow: 0 -2px 0 0 var(--GW-H1-box-shadow-background-color) inset,
  0 -3px 0 0 var(--GW-H1-box-shadow-line-color) inset;
  font-style: normal;
}

.markdownBody section:not(.collapse) > h1:first-child a {
  position: relative;
}

.markdownBody section:not(.collapse) > h1:first-child a::after {
  position: absolute;
  top: 0.15em;
}

.markdownBody section:not(.collapse) > h2:first-child a {
  position: relative;
}

.markdownBody section:not(.collapse) > h2:first-child a::after {
  position: absolute;
  top: 0.1em;
  left: unset;
  right: -0.75em;
}

.markdownBody section.collapse > h2:first-child a::after {
  top: -0.2em;
}

section > :first-child a:hover::after,
section > :first-child a:active::after,
section > :first-child a:focus::after,
section.highlighted > :first-child a::after,
section:target > :first-child a::after {
  visibility: visible;
}

section > :first-child a:hover::after,
section > :first-child a:active::after,
section > :first-child a:focus::after,
section.highlighted > :first-child a::after {
  opacity: 0.8;
}

section:target > :first-child a::after {
  opacity: 0.5;
}

#markdownBody section > :first-child a[href^='#']:hover::after,
#markdownBody section > :first-child a[href^='#']:active::after,
#markdownBody section > :first-child a[href^='#']:focus::after,
#markdownBody section:target > :first-child a[href^='#']::after,
#markdownBody section.highlighted > :first-child a[href^='#']::after {
visibility: visible;
opacity: 0.8;
}

#markdownBody section:target > :first-child a[href^='#']::after {
opacity: 0.5;
}

h1 + section > h2:first-child,
h2 + section > h3:first-child {
  margin-top: 0;
}

.markdownBody section > :first-child > a {
  background: none;
}

.markdownBody section:not(.collapse) > h1:first-child a,
.markdownBody section:not(.collapse) > h2:first-child a {
  display: block;
}

/* Page header */
header h1 {
  margin: 0;
  font-size: 2em;
  line-height: 1.15;
  font-weight: 400;
  font-family: 'et-book';
  /*! font-style: italic; */
  position: relative;
  font-variant: small-caps;
}

header h1::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -0.6em;
  pointer-events: none;
  z-index: -1;
}

#page-metadata {
margin: 0 0 2rem -0.5rem;
overflow: auto;
font-size: 0.95em;
line-height: 1.5;
}

#page-metadata hr {
display: none;
}

#page-metadata #page-description {
display: block;
margin: 0 auto 0.75em auto;
}

#page-metadata #page-description ~ * {
font-size: 0.9em;
}

#page-metadata-block span:nth-of-type(n+3) {
white-space: nowrap;
}

#page-metadata-block > span:not(:last-child)::after {
content: "\00B7";
display: inline-block;
margin: 0 0.5em 0 0.75em;
}

/* ----------------------------------------------------------------------------
 * Typography
 * ---------------------------------------------------------------------------- */

p {
  margin: 0;
  font-variant-numeric: oldstyle-nums;
}

p + p {
  text-indent: 2em;
}

#markdownBody > p:first-of-type:not(.no-cap)::first-letter {
float: left;
font-family: 'CheshireInitials', serif;
font-size: 6em;
line-height: 0.7;
margin-top: 0.15em;
margin-right: 0.1em;
}

#markdownBody > p:first-of-type {
text-indent: 0;
}

.smallcaps {
  font-variant: small-caps;
  font-size: 0.95em;
}

span.smallcaps {
  font-feature-settings: 'smcp';
}

span.smallcaps-auto {
  font-feature-settings: 'smcp', 'c2sc';
  font-variant-numeric: tabular-nums;
}

small {
  font-size: 0.6875em;
}

sub, sup {
  line-height: 0.3em;
  font-feature-settings: 'lnum';
}

hr {
  border: none;
  height: 0;
  border-bottom: 1px solid var(--GW-sidebar-horizontal-rule-color);
  margin: 1em 0;
}

/* ----------------------------------------------------------------------------
 * Links
 * ---------------------------------------------------------------------------- */

a {
  color: var(--GW-body-link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

#markdownBody a {
word-wrap: break-word;
overflow-wrap: break-word;
}

#markdownBody a:link,
footer a {
  background-image: linear-gradient(var(--GW-link-underline-gradient-line-color), var(--GW-link-underline-gradient-line-color));
  background-size: 1px 1px;
  background-repeat: repeat-x;
  background-position: 0% calc(100% - 0.1em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-variant-numeric: lining-nums;
}

#markdownBody a:link,
#markdownBody a:link *,
footer a {
  text-shadow:
  0.00em 0.08em var(--GW-link-underline-background-color),
  -0.00em 0.08em var(--GW-link-underline-background-color),
  0.13em 0.08em var(--GW-link-underline-background-color),
  -0.13em 0.08em var(--GW-link-underline-background-color),
  0.03em 0.08em var(--GW-link-underline-background-color),
  -0.03em 0.08em var(--GW-link-underline-background-color),
  0.05em 0 var(--GW-link-underline-background-color),
  -0.05em 0 var(--GW-link-underline-background-color);
}

#markdownBody a:hover {
background-image: linear-gradient(var(--GW-link-underline-gradient-line-color-hover), var(--GW-link-underline-gradient-line-color-hover));
}

#markdownBody a:focus-visible {
outline: 2px solid var(--GW-body-link-color);
outline-offset: 2px;
border-radius: 2px;
}

a:hover,
footer a:hover,
#sidebar a:hover {
color: var(--GW-body-link-hover-color);
}

/* Internal anchor links */
#markdownBody section > :not(:first-child) a[href^='#']::after,
#markdownBody p a[href^='#']::after {
content: "\00B6";
margin: 0 1px 0 3px;
font-size: 0.75em;
vertical-align: middle;
position: relative;
bottom: 0.15em;
opacity: 0.6;
margin-right: 4px;
display: inline-block;
}

#markdownBody section > :not(:first-child) a[href^='#'].footnote::after,
#markdownBody p a[href^='#'].footnote::after,
#markdownBody section > :not(:first-child) a[href^='#'].reversefootnote::after,
#markdownBody p a[href^='#'].reversefootnote::after {
content: none;
}

/* ----------------------------------------------------------------------------
 * Lists
 * ---------------------------------------------------------------------------- */

#markdownBody ul,
#markdownBody ol {
list-style-type: none;
margin: 1.25em 0 1.5em 0;
padding: 0 0 0 2.5em;
overflow: hidden;
}

#markdownBody li > ul,
#markdownBody li > ol {
margin: 0.5em 0;
}

#markdownBody ul > li,
#markdownBody ol > li {
position: relative;
margin: 0;
}

#markdownBody ul > li:nth-of-type(n+2),
#markdownBody ol > li:nth-of-type(n+2) {
margin: 0.5em 0 0 0;
}

#markdownBody ul > li::before {
content: "\2727";
color: #888;
font-size: 0.875em;
position: absolute;
top: 0.125em;
left: -1.375em;
z-index: 1;
}

#markdownBody ul ul > li::before,
#markdownBody ul ul ul ul > li::before {
content: "\2726";
}

#markdownBody ul ul ul > li::before {
content: "\2727";
}

#markdownBody ol {
counter-reset: ol;
}

#markdownBody ol > li {
counter-increment: ol;
}

#markdownBody ol > li::before {
content: counter(ol) ".";
position: absolute;
width: 2em;
right: calc(100% + 0.5em);
text-align: right;
font-feature-settings: 'onum';
z-index: 1;
}

#markdownBody ol ol {
list-style-type: lower-roman;
}

#markdownBody ol ol > li {
padding: 0 0 0 0.25em;
}

#markdownBody ol ol > li::before {
content: none;
}

#markdownBody ol ol ol {
list-style-type: lower-alpha;
}

li > ul + p,
li > ol + p {
  margin-top: 1em;
}

/* ----------------------------------------------------------------------------
 * Blockquotes
 * ---------------------------------------------------------------------------- */

blockquote {
  --GW-link-underline-background-color: var(--GW-blockquote-background-color);
  --GW-blockquote-background-color: var(--GW-blockquote-background-color-level-one);
  --GW-blockquote-border-color: var(--GW-blockquote-border-color-level-one);
  margin: 1.625em 0 1.75em 0;
  border: 1px solid var(--GW-blockquote-border-color);
  background-color: var(--GW-blockquote-background-color);
  font-size: 0.95em;
  padding: 1em 1.25em;
  border-radius: 2px;
}

blockquote blockquote {
  --GW-blockquote-border-color: var(--GW-blockquote-border-color-level-two);
  --GW-blockquote-background-color: var(--GW-blockquote-background-color-level-two);
  margin: 1em 1px;
}

blockquote blockquote blockquote {
  --GW-blockquote-border-color: var(--GW-blockquote-border-color-level-three);
  --GW-blockquote-background-color: var(--GW-blockquote-background-color-level-three);
}

blockquote blockquote blockquote blockquote {
  --GW-blockquote-border-color: var(--GW-blockquote-border-color-level-four);
  --GW-blockquote-background-color: var(--GW-blockquote-background-color-level-one);
}

#markdownBody blockquote blockquote:first-child {
margin: 0.25em 1px 1em 1px;
}

#markdownBody blockquote > :last-child,
#markdownBody blockquote > :last-child > :last-child,
#markdownBody blockquote > :last-child > :last-child > :last-child {
margin-bottom: 0;
}

#markdownBody blockquote > :first-child,
#markdownBody blockquote > :first-child > :first-child,
#markdownBody blockquote > :first-child > :first-child > :first-child {
margin-top: 0;
}

blockquote p > code:first-child,
blockquote p > a:first-child code:first-child {
  border: none;
  background-color: transparent;
  font-weight: bold;
  font-family: inherit;
  padding: 0;
  font-size: inherit;
}

blockquote table {
  font-size: 0.7em;
}

blockquote :not(.small-table) > table {
  --GW-table-zebra-stripe-alternate-row-background-color: var(--GW-body-background-color);
}

blockquote table th + th,
blockquote table td + td {
  border-left: 1px solid var(--GW-blockquote-background-color);
}

.epigraph {
  margin:2em 0 2em 0;
  padding:0.5em 2.5em 0.375em 2.5em
}
.epigraph blockquote {
  --GW-blockquote-background-color: var(--GW-body-background-color);
  padding:0;
  border:none;
  background-color:inherit;
  margin:0;
  font-size:inherit;
  position:relative;
  z-index:1;
  overflow:visible
}
.epigraph p {
  font-style:italic;
  background-color:inherit
}
.epigraph p:nth-child(1) em,
.epigraph p:last-child {
  font-style:normal
}
.epigraph blockquote>p:nth-last-child(2)>span.quote-mark:first-child,
.epigraph blockquote>p:nth-last-child(2)>span.quote-mark:last-child {
  display:inline-block;
  width:0;
  height:0;
  margin:0;
  opacity:0
}
#markdownBody .epigraph p:last-child {
margin:0.5em 0 0 0;
text-align:right;
font-size:0.875em;
text-indent:0
}
.epigraph blockquote::before,
.epigraph blockquote::after {
  display:block;
  position:absolute;
  font-size:2.5em;
  opacity:0.5;
  color:var(--GW-epigraph-quotation-mark-color)
}
.epigraph blockquote::before {
  content:"\201C";
  left:-0.975em;
  top:-0.5em
}
.epigraph blockquote::after {
  content:"\201D";
  right:-0.975em;
  bottom:-1em
}
@media only screen and (max-width: 64.9ch) {
  .epigraph {
    margin:2.125em 1em;
    padding:0;
    font-size:0.95em;
    overflow:visible
  }
  .epigraph blockquote::before {
    left:-0.375em;
    top:-0.75em
  }
  .epigraph blockquote::after {
    right:-0.375em;
    bottom:-1.25em
  }
  .epigraph+.epigraph {
    margin-top:2.75em
  }
}
@media only screen and (min-width: 65ch) {
  h1+.epigraph,
  h3+.epigraph,
  h5+.epigraph {
    margin-top:1.25em
  }
  h2+.epigraph,
  h4+.epigraph,
  h6+.epigraph {
    margin-top:1em
  }
}

/* ----------------------------------------------------------------------------
 * Code
 * ---------------------------------------------------------------------------- */

code {
  padding: 0 4px;
  font-family: "Liberation Mono", Consolas, Courier, monospace;
  font-size: 0.9em;
  border: 1px solid var(--GW-code-element-border-color);
  background-color: var(--GW-code-element-background-color);
  --GW-link-underline-background-color: var(--GW-code-element-background-color);
  word-break: break-all;
  hyphens: none;
}

pre {
  margin: 1.75em auto;
  border: 1px solid var(--GW-pre-element-border-color);
  background-color: var(--GW-pre-element-background-color);
  cursor: text;
  max-height: calc(100vh - 8em);
  overflow: auto;
}

pre code {
  display: block;
  padding: 0.4rem 0.7rem;
  margin: 0;
  border: none;
  background-color: transparent;
}

div.sourceCode {
  margin: 1.5em 0;
  border-radius: 6px;
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
  overflow-x: auto;
}

div.sourceCode pre {
  margin: 0;
  padding: 1em 1.2em;
  font-family: 'Hopf Mono', monospace;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--code-fg);
}

code:not(pre code) {
  font-family: 'Hopf Mono', monospace;
  font-size: 0.9em;
  background-color: var(--code-bg);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

pre::-webkit-scrollbar {
  height: 16px;
  background-color: var(--GW-pre-element-scrollbar-track-color);
}

pre::-webkit-scrollbar-thumb {
  background-color: var(--GW-pre-element-scrollbar-thumb-color);
  box-shadow: 0 0 0 3px var(--GW-pre-element-scrollbar-track-color) inset;
}

pre::-webkit-scrollbar-thumb:hover {
  background-color: var(--GW-pre-element-scrollbar-thumb-hover-color);
}

pre {
  scrollbar-color: var(--GW-pre-element-scrollbar-thumb-color) var(--GW-pre-element-scrollbar-track-color);
}

pre:hover {
  scrollbar-color: var(--GW-pre-element-scrollbar-thumb-hover-color) var(--GW-pre-element-scrollbar-track-color);
}

/* ----------------------------------------------------------------------------
 * Tables
 * ---------------------------------------------------------------------------- */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 2em 0;
  font-size: 0.75em;
  border-style: solid;
  border-color: var(--GW-table-border-color);
  border-width: 2px 0;
}

table th,
table td {
  padding: 7px 10px;
  line-height: 1.35;
}

table th {
  font-weight: normal;
  font-variant: small-caps;
  border-bottom: 2px solid #555;
  text-align: left;
  hyphens: none;
}

table td {
  vertical-align: top;
  border-bottom: 1px solid #eee;
}

tr:last-child td {
  border-bottom: 1px solid #555;
}

table th + th,
table td + td {
  border-left: 1px solid var(--GW-table-cell-vertical-border-color);
}

table td > code {
  word-break: normal;
}

table caption {
  padding: 0.25em 0.75em;
  font-style: italic;
  font-size: 1.25em;
  border-top: 2px solid var(--GW-table-caption-border-color);
}

:not(.small-table) > table tr:nth-child(odd) td {
  background-color: var(--GW-table-zebra-stripe-alternate-row-background-color);
  --GW-link-underline-background-color: var(--GW-table-zebra-stripe-alternate-row-background-color);
}

.markdownBody table tbody tr:hover {
  outline: 1px dotted var(--GW-table-row-hover-outline-color);
}

.table-wrapper::-webkit-scrollbar {
  height: 16px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background-image: url("data:image/gif;base64,R0lGODlhBAAEAPAAMXd3d////ywAAAAABAAEAAACBgQShqgJBQA7");
  background-size: 2px;
  box-shadow: 0 2px 0 0 var(--GW-table-scrollbar-track-color) inset,
  0 0 0 1px var(--GW-table-scrollbar-border-color) inset,
  0 2px 0 1px var(--GW-table-scrollbar-border-color) inset;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background-image: url("data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7");
}

.table-wrapper {
  scrollbar-color: var(--GW-table-scrollbar-thumb-color) var(--GW-table-scrollbar-track-color);
}

.table-wrapper:hover {
  scrollbar-color: var(--GW-table-scrollbar-thumb-hover-color) var(--GW-table-scrollbar-track-color);
}

/* ----------------------------------------------------------------------------
 * Figures & Images
 * ---------------------------------------------------------------------------- */

figure {
  margin: 2em auto 1.75em auto;
  max-width: calc(100% - 5em);
  width: fit-content;
  display: block;
  outline: 1px solid var(--GW-figure-caption-outline-color);
}

figure + figure {
  margin-top: 2.75em;
}

figure img,
figure video {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
  margin: 0 auto;
  outline: 1px solid #888;
  border-radius: 2px;
}

figure img {
  max-height: calc(100vh - 8em);
  object-fit: contain;
}

figure video {
  max-height: calc(100vh - 10em);
}

figure audio {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  outline: 1px solid #888;
}

figcaption {
  font-size: 0.9375em;
  font-weight: bold;
  line-height: 1.45;
  margin: auto;
  padding: 0.25em 0.5em calc(0.25em + 1px) 0.5em;
  width: fit-content;
}

figcaption strong {
  font-weight: inherit;
  font-variant-caps: small-caps;
}

.caption-wrapper {
  display: block;
  outline: 1px solid #888;
  margin: 1px auto 0 auto;
  width: 100%;
}

video + .caption-wrapper {
  margin-top: 2px;
}

.columns li figure {
  padding-bottom: 1px;
}

figure.full-width {
  position: relative;
  max-width: 100%;
  width: 100%;
}

img.fleuron-block {
  max-width: 1.8cm;
  height: auto;
  display: block;
  /*! margin: 3rem auto 2.5rem; */
  outline: none;
}

img::before {
  display: block;
  font-family: var(--GW-sans-serif-font-stack, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  padding: 0.5em 0.75em;
  background-color: var(--GW-body-background-color);
  text-align: left;
  content: "🖼️ Imagen no disponible";
  color: #666;
  font-size: 0.9em;
}

/* ----------------------------------------------------------------------------
 * TikZ Diagrams
 * ---------------------------------------------------------------------------- */

.tikz-figure {
  display: block;
  margin: 2em auto;
  max-width: 100%;
  text-align: center;
  clear: both;
}

.tikz-image {
  max-width: 95%;
  height: auto;
  background-color: transparent;
  filter: invert(1) contrast(0.9) drop-shadow(0 0 1px rgba(255,255,255,0.1));
  transition: filter 0.25s ease;
}

.tikz-image:hover {
  filter: invert(1) contrast(1) drop-shadow(0 0 2px rgba(255,255,255,0.3));
  cursor: zoom-in;
}

.tikz-figure figcaption {
  margin-top: 1em;
  font-family: var(--GW-sans-serif-font-stack, sans-serif);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--GW-body-link-hover-color);
  border-top: 1px solid var(--GW-figure-caption-outline-color);
  padding-top: 0.5em;
  display: inline-block;
  min-width: 20%;
}

.tikz-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1em 0;
  /*! margin: auto; */
  text-align: center;
}

/* ----------------------------------------------------------------------------
 * KaTeX Math
 * ---------------------------------------------------------------------------- */

.katex {
  font-size: 1.1em;
}

.katex-display > .katex {
  white-space: normal !important;
}

.katex-display > .base {
  margin: 0.25em 0 !important;
}

.katex-display {
  margin: 0.5em 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}

.katex-display::-webkit-scrollbar {
  height: 8px;
}

.katex-display::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.katex-display::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------------------------
 * TOC (Table of Contents)
 * ---------------------------------------------------------------------------- */

#toc-sidebar {
font-size: 0.75em;
font-family: "Source Sans 3", "Lucida Sans Unicode", "Helvetica", "Trebuchet MS";
line-height: 1.4;
margin-top: 0.5em;
padding-top: 1em;
border-top: 1px solid var(--gray-light, #eee);
max-width: 100%;
overflow-wrap: break-word;
hyphens: auto;
padding: 8px;
font-variant: small-caps;
}

#toc-sidebar h3 {
font-size: 1em;
font-weight: bold;
margin-bottom: 0.75em;
margin-top: 0;
letter-spacing: 0.05em;
font-variant: normal;
}

#toc-sidebar ul {
list-style-type: none;
padding-left: 0;
margin: 0.5em 0;
font-weight: bold;
}

#toc-sidebar ul ul {
padding-left: 1em;
font-size: 0.95em;
margin-top: 0.3em;
border-left: 1px solid rgba(0, 0, 0, 0.05);
}

#toc-sidebar li {
margin-bottom: 0.5em;
line-height: 1.3;
}

#toc-sidebar a {
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
display: block;
padding: 0.2em 0;
line-height: 0.3;
}

#toc-sidebar > ul > li > a {
text-transform: uppercase;
font-weight: 600;
font-size: 0.9em;
letter-spacing: 0.03em;
}

#toc-sidebar ul ul li a {
text-transform: none;
font-weight: normal;
font-size: 1em;
opacity: 0.85;
}

#toc-sidebar a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
opacity: 1;
background-color: var(--GW-TOC-link-hover-background-color);
color: var(--GW-TOC-link-hover-color);
}

#toc-sidebar a:hover::after {
content: "";
left: 100%;
top: 0;
background-color: var(--GW-TOC-link-hover-indicator-bar-color);
width: 0.25em;
height: 100%;
}

#toc-sidebar ul ul li a:hover {
padding-left: 0.2em;
}

/* ----------------------------------------------------------------------------
 * Footnotes (Completo)
 * ---------------------------------------------------------------------------- */

a.footnote {
  vertical-align: super;
  line-height: 0.3;
  position: relative;
  top: 0.05em;
  padding: 0 0.05em;
  font-feature-settings: 'lnum';
  font-weight: 600;
  z-index: 1;
}

a.footnote sup {
  vertical-align: baseline;
  font-size: 0.75em;
}

a.footnote::before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% + 0.5em);
  height: 190%;
  left: calc(-0.25em - 3px);
  top: -10px;
  z-index: -1;
  border: 3px double transparent;
  transition: background-color 0.15s ease 0.05s, border-color 0.15s ease 0.05s;
}

a.footnote.highlighted::before,
a.footnote:hover::before,
a.footnote:target::before,
a.footnote.targeted::before {
  background-color: var(--GW-footnote-ref-highlight-background-color);
  border-color: var(--GW-footnote-ref-highlight-box-shadow-color);
  outline: none;
}

sup + sup,
a.footnote {
  margin-left: 0.05em;
}

.footnotes {
  font-variant-numeric: tabular-nums;
}

.footnotes > ol > li + li {
  margin: 1em 0 0 0;
}

.footnotes ol li {
  position: relative;
}

.footnotes ol li ol {
  counter-reset: ol;
}

.footnotes ol li ol li {
  list-style-type: none;
  font-variant-numeric: tabular-nums;
}

.footnotes ol li ol li::marker {
  content: counter(ol) ".";
  width: 2em;
  right: calc(100% + 0.5em);
  text-align: right;
  font-feature-settings: 'onum';
  color: var(--GW-footnote-border-color);
}

.footnotes .reversefootnote {
  margin: 0 0 0 10px;
  position: relative;
  font-weight: bold;
  font-family: 'IBM Plex Serif';
  line-height: 1;
  border: 1px dotted var(--GW-footnote-backlink-border-color);
  display: inline-block;
  padding: 2px 5px 0 6px;
  text-indent: 0;
  vertical-align: bottom;
  bottom: 2px;
}

#markdownBody .footnotes a.reversefootnote {
background-image: none;
}

#markdownBody .footnotes a.reversefootnote:hover {
border-color: var(--GW-footnote-backlink-border-hover-color);
}

.footnotes blockquote + p a.reversefootnote,
.footnotes pre + p a.reversefootnote,
.footnotes .highlighter-rouge + p a.reversefootnote {
  position: absolute;
  right: 0.5em;
  top: unset;
  bottom: -0.5em;
  background-color: var(--GW-footnote-backlink-after-bordered-block-background-color);
}

.footnotes figure + p a.reversefootnote {
  position: absolute;
  right: 2.7em;
  top: unset;
  bottom: -0.7em;
  background-color: var(--GW-footnote-backlink-after-bordered-block-background-color);
}

.reversefootnote.highlighted::before,
.reversefootnote:target::before,
.reversefootnote.targeted::before {
  background-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1px #aaa, 0 0 0 2px #fff, 0 0 0 3px #aaa;
}

/* Footnote popup */
#footnotediv {
z-index: 10001;
font-size: 0.85em;
box-shadow: 0 2.8px 2.2px rgba(0,0,0,0.034),
0 6.7px 5.3px rgba(0,0,0,0.048),
0 12.5px 10px rgba(0,0,0,0.06),
0 22.3px 17.9px rgba(0,0,0,0.072);
position: absolute;
transition: none;
}

#footnotediv.fading {
opacity: 0.0;
transition: opacity 0.5s ease-in 0.03s;
}

#footnotediv > div {
background-color: #fff;
padding: 12px 16px 14px;
max-width: 500px;
max-height: calc(100vh - 32px);
border: 1.6px solid #c2c2c2;
line-height: 1.45;
overflow: auto;
overscroll-behavior: none;
}

#footnotediv > div::-webkit-scrollbar {
width: 14px;
}

#footnotediv > div::-webkit-scrollbar-thumb {
background-color: #ccc;
box-shadow: 0 0 0 3px #fff inset;
}

#footnotediv > div::-webkit-scrollbar-thumb:hover {
background-color: #999;
}

#footnotediv a.reversefootnote {
display: none;
}

#footnotediv blockquote {
margin: 1em 0;
}

#footnotediv > div > blockquote:nth-last-child(2) {
margin-bottom: 2px;
}

#footnotediv > div > blockquote:nth-last-child(2) + p {
margin-top: 1em;
}

#footnotediv > div > code:nth-child(1) {
margin-top: 0px;
}

/* ----------------------------------------------------------------------------
 * Sidenotes (Completo)
 * ---------------------------------------------------------------------------- */

#sidenote-column-left,
#sidenote-column-right {
position: absolute;
max-width: var(--GW-sidenotes-max-width);
font-size: 0.85em;
z-index: 1;
pointer-events: none;
}

#sidenote-column-left > *,
#sidenote-column-right > * {
pointer-events: auto;
}

#sidenote-column-left {
height: calc(100% - 10rem);
width: calc(50vw - (50% + 92px));
top: 10rem;
right: calc(100% + 64px);
}

#sidenote-column-right {
height: 100%;
width: calc(50vw - (50% + 104px));
top: 0;
left: calc(100% + 60px);
}

.sidenote {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0.85;
  line-height: 1.5;
  padding: 2em 0 0 0;
}

.sidenote.hidden {
  display: none;
}

.sidenote.highlighted,
.sidenote:hover,
.sidenote:target,
.sidenote.targeted {
  background-color: var(--GW-sidenote-highlight-background-color);
  opacity: 1.0;
}

.sidenote:target {
  z-index: 1;
}

.sidenote.highlighted,
.sidenote:hover {
  z-index: 2;
}

.sidenote::after {
  content: "";
  position: absolute;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  top: -13px;
  left: -13px;
}

.sidenote.highlighted::after,
.sidenote:hover::after,
.sidenote:target::after,
.sidenote.targeted::after {
  border: 3px double var(--GW-sidenote-highlight-box-shadow-color);
}

.sidenote-outer-wrapper {
  overflow: hidden;
  position: relative;
  z-index: 1;
  border-style: dotted;
  border-color: var(--GW-sidenote-border-color);
  border-width: 1px 0;
}

.sidenote.cut-off .sidenote-outer-wrapper {
  overflow-y: auto;
  overscroll-behavior: none;
  width: 100%;
  padding: 0 1px 0 0;
}

.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar {
  width: 12px;
}

.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb {
  background-image: url("data:image/gif;base64,R0lGODlhBAAEAPAAMXd3d////ywAAAAABAAEAAACBgQShqgJBQA7");
  box-shadow: 0 0 0 2px var(--GW-sidenote-scrollbar-track-color) inset;
  background-size: 2px;
}

.sidenote.cut-off .sidenote-outer-wrapper::-webkit-scrollbar-thumb:hover {
  background-image: url("data:image/gif;base64,R0lGODlhBAAEAPAAMQAAAP///ywAAAAABAAEAAACBgQShqgJBQA7");
}

.sidenote.cut-off .sidenote-outer-wrapper {
  scrollbar-color: var(--GW-sidenote-scrollbar-thumb-color) var(--GW-sidenote-scrollbar-track-color);
}

.sidenote.cut-off .sidenote-outer-wrapper:hover {
  scrollbar-color: var(--GW-sidenote-scrollbar-thumb-hover-color) var(--GW-sidenote-scrollbar-track-color);
}

.sidenote-inner-wrapper {
  position: relative;
  margin: 0.5em 0;
}

.sidenote-inner-wrapper > * {
  position: relative;
  z-index: 1;
}

.sidenote blockquote {
  margin: 1.5em 0 0.75em 0;
}

.sidenote pre {
  margin: 1.75em 0 0.75em 0;
}

.sidenote blockquote + *,
.sidenote pre + * {
  margin-top: 1.75em;
}

.sidenote p + p {
  text-indent: 1em;
}

#markdownBody .sidenote ul,
#markdownBody .sidenote ol {
padding: 0 0 0 1.75em;
}

#markdownBody .sidenote li {
text-align: left;
}

.sidenote > .sidenote-self-link {
  font-weight: 600;
  position: absolute;
  top: 0;
  border-style: dotted;
  border-color: var(--GW-sidenote-self-link-border-color);
  border-width: 1px 1px 0px 1px;
  width: 2em;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

#markdownBody .sidenote > .sidenote-self-link {
background-image: none;
}

#sidenote-column-left .sidenote > .sidenote-self-link {
right: 0;
}

#sidenote-column-right .sidenote > .sidenote-self-link {
left: 0;
}

.sidenote .footnote-self-link {
  display: none;
}

.sidenote figure {
  margin: 1.5em auto;
  max-width: calc(100% - 2px);
}

.sidenote figure + p a.reversefootnote {
  right: 0.5em;
  bottom: 1em;
}

.sidenote blockquote + p a.reversefootnote {
  bottom: 1.3em;
}

.sidenote .highlighter-rouge + p a.reversefootnote {
  bottom: 0.3em;
}

/* ----------------------------------------------------------------------------
 * Header Anchors
 * ---------------------------------------------------------------------------- */

.header-anchor {
  display: inline-block;
  margin-right: 0.3em;
  font-size: 0.85em;
  font-weight: 400;
  text-decoration: none;
  color: #999;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.has-anchor:hover .header-anchor {
  opacity: 1;
}

.header-anchor:hover {
  color: #333;
}

.header-anchor:focus {
  opacity: 1;
  outline: 2px solid #007acc;
  outline-offset: 2px;
}

h1 .header-anchor { font-size: 0.7em; }
h2 .header-anchor { font-size: 0.75em; }

.has-anchor {
  scroll-margin-top: 2rem;
}

/* ----------------------------------------------------------------------------
 * Selection
 * ---------------------------------------------------------------------------- */

::selection {
  text-shadow: none;
  background: var(--GW-text-selection-background-color);
  color: var(--GW-text-selection-color);
}

::-moz-selection {
  text-shadow: none;
  background: var(--GW-text-selection-background-color);
  color: var(--GW-text-selection-color);
}

/* ----------------------------------------------------------------------------
 * Markdown Body
 * ---------------------------------------------------------------------------- */

#markdownBody {
overflow-wrap: break-word;
word-wrap: break-word;
}

@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
  #markdownBody li,
  #markdownBody p {
  text-align: justify;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  }
}

#abstract > blockquote {
margin: 0 0 1.5em 0;
border-color: #bbb;
padding: 0.9rem 1.25rem 0.95rem 1.25rem;
clear: none;
}

/* ----------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------------- */

footer {
  font-size: 0.75em;
  /*! width: auto; */
  /*! position: static; */
  /*! text-align: center; */
  /*! font-style: italic; */
  -webkit-font-smoothing: subpixel-antialiased;
}

/* ----------------------------------------------------------------------------
 * Responsive - Mobile
 * ---------------------------------------------------------------------------- */

@media only screen and (max-width: 64.9ch) {
  html { font-size: 17px; }

  body {
    padding: 1em;
    margin: 0 1ch;
  }

  #layout { gap: 1.5em; }

  #sidebar {
    position: relative;
    display: block;
    align-items: stretch;
    padding: 0;
    margin-right: -1px;
    border-bottom: 1px solid var(--GW-sidebar-horizontal-rule-color, #eee);
    width: 100% !important;
  }
  
#sidebar .sidebar-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin: 10px;
  }

  #sidebar a {
  border: 1px dotted var(--GW-sidebar-mobile-link-border-color, #ccc);
  padding: 3px 10px;
  text-align: center;
  display: inline-block;
  font-size: 1em;
  }

#sidebar a#logo {
    padding: 0;
    border: none;
    margin: 0;
    flex-shrink: 0;
    display: flex;
  }

  #sidebar a#logo svg,
  #sidebar a#logo img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    margin: 10px;
  }
#site-nav {
    display: flex;
    flex-direction: column;    /* Mantiene los enlaces en columna vertical */
    justify-content: center;
    gap: 0;
  }

  #toc-sidebar { display: none; }

  header h1 { font-size: 2em; }

  h1, h2, h3, h4, h5, h6 {
    margin: 1.25em 0 0.5em 0;
  }

  p + p { text-indent: 1em; }

  figure {
    max-width: calc(100% - 2em);
  }

  figure + figure {
    margin-top: 2em;
  }

  figcaption {
    font-size: 0.875em;
  }

  .header-anchor {
    opacity: 0.6;
    font-size: 0.75em;
  }

  .has-anchor {
    scroll-margin-top: 1rem;
  }

  #markdownBody ul,
  #markdownBody ol {
  padding: 0 0 0 1.75em;
  }

  blockquote {
    margin: 1.25em 0 1.5em 0;
  }

  #page-metadata {
  margin: 0 0 2rem 0 !important;
  text-align: center;
  }

  #footnotediv {
  display: none;
  }
}

@media only screen and (min-width: 650px) {
  body {
    padding: 2em;
  }

  figure.float-right {
    float: right;
    max-width: calc(50% - 1.5em);
    margin: 0 0 1em 1.5em;
  }

  figure.float-left {
    float: left;
    max-width: calc(50% - 1.5em);
    margin: 0 1.5em 1em 0;
  }

  p ~ figure.float-right,
  p ~ figure.float-left {
    margin-top: 0.5em;
  }

  section:not(.collapse) > h1:first-child {
    margin: 0;
    font-size: 2em;
    overflow: hidden;
    padding: 0 0 7px 1.25rem;
    box-shadow: 0 -5px 0 0 var(--GW-H1-box-shadow-background-color) inset, 0 -6px 0 0 var(--GW-H1-box-shadow-line-color) inset;
  }

  .markdownBody section:not(.collapse) > h1:first-child a::after {
    left: -0.75em;
  }

  section:not(.collapse) > h2:first-child {
    overflow: hidden;
  }
}

/* ----------------------------------------------------------------------------
 * Responsive - Desktop
 * ---------------------------------------------------------------------------- */

@media only screen and (min-width: 65ch) {
  body {
    padding: 2em 2.5ch 2em 0.5ch;
    margin: 0;
  }

  #layout {
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  max-width: none;
  }

  #sidebar {
  width: 18ch;
  position: static;
  top: 2em;
  flex-shrink: 0;
  font-variant: small-caps;
  font-size: 16px;
  padding-left: 2em;
  }

  #sidebar a#logo {
  margin: 0 0 1em 0;
  padding: 0;
  }

  #sidebar a#logo svg,
  #sidebar a#logo img {
  width: 60px;
  height: 60px;
  }

  #main-content {
  flex-grow: 1;
  max-width: 60ch;
  padding: 0;
  }

  article,
  main {
    width: 100%;
    margin: 0;
  }

  main {
    min-height: 100vh;
    display: flex;
    flex-flow: column;
  }

  article {
    flex: 1 1 auto;
  }

  #markdownBody {
  line-height: 1.45;
  }

  h1 {
    margin: 1.25em 0 0.5em -0.5rem;
  }
}

@media only screen and (min-width: 118.5ch) {
  body {
    padding: 2em 6ch 2em 0.5ch;
  }

  #layout {
  gap: 3rem;
  }

  #sidebar {
  width: 20ch;
  }
}

@media only screen and (min-width: 130.1ch) {
  main {
    position: relative;
    right: 0;
  }

  #markdownBody {
  position: relative;
  }

  #sidenote-column-left,
  #sidenote-column-right {
  display: block;
  pointer-events: none;
  }

  #sidenote-column-left > *,
  #sidenote-column-right > * {
  pointer-events: auto;
  }
}

@media only screen and (max-width: 130ch) {
  #sidenote-column-left,
  #sidenote-column-right {
  display: none;
  }
}

@media only screen and (max-width: 176ch) {
  .reversefootnote:target::before {
    background-color: inherit;
    box-shadow: none;
  }
}

@media only screen and (max-width: 649px) {
  #markdownBody figure {
  max-width: 100%;
  }
}

@media only screen and (max-width: 64.9ch), not screen and (hover: hover) and (pointer: fine) {
  #footnotediv {
  display: none;
  }
}

/* ----------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------------- */

@media print {
  .header-anchor {
    display: none !important;
  }

  #markdownBody a:link {
  background-image: none;
  text-decoration: underline;
  }

  a {
    color: #000;
  }

  header h1::after {
    border-bottom-color: #000;
  }

  figure img,
  figure video {
    outline-color: #000;
    page-break-inside: avoid;
  }

  figure {
    page-break-inside: avoid;
  }
}

/* ----------------------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
}

/* ----------------------------------------------------------------------------
 * Dark Mode
 * ---------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  .header-anchor {
    color: white;
  }

  .header-anchor:hover {
    color: #aaa;
  }

  img.fleuron-block {
    filter: invert(95%) sepia(8%) saturate(114%) hue-rotate(106deg) brightness(102%) contrast(91%);
  }
}

/* ----------------------------------------------------------------------------
 * SVG
 * ---------------------------------------------------------------------------- */

svg {
  fill: currentColor;
}

/* ----------------------------------------------------------------------------
 * Font Faces
 * ---------------------------------------------------------------------------- */

@font-face {
  font-family: 'et-book';
  src: url("../fonts/et-book-roman-line-figures.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'et-book';
  src: url("../fonts/et-book-display-italic-old-style-figures.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'et-book';
  src: url("../fonts/et-book-bold-line-figures.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'crimson';
  src: url("../fonts/crimson-roman-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'crimson';
  src: url("../fonts/crimson-italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'crimson';
  src: url("../fonts/crimson-semibold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'crimson';
  src: url("../fonts/crimson-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CheshireInitials';
  src: url('../fonts/CheshireInitials.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hopf Mono';
  src: url('../fonts/hopf-mono-Regular.woff2') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------------------
 * Site Footer
 * ---------------------------------------------------------------------------- */

#site-footer {
  /*! margin-top: 4rem; */
  /*! padding: 2rem 0 1rem 0; */
  /*! border-top: 1px solid var(--GW-sidebar-horizontal-rule-color); */
  font-size: 0.85em;
  color: #6a6a6a;
}

#site-footer nav {
  display: flex;
  /*! text-align: left; */
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5em;
}

#site-footer a {
  color: #8a8a8a;
  text-decoration: none;
  transition: color 0.2s ease;
}

#site-footer a:hover {
  color: #b8b8b8;
}

#site-footer .separator {
  color: #4a4a4a;
  padding: 0 0.5em;
}

@media only screen and (max-width: 64.9ch) {
  #site-footer {
    /*! margin-top: 3rem; */
    padding: 1.5rem 0 1rem 0;
    font-size: 0.8em;
  }
  
  #site-footer nav {
    /*! flex-direction: column; */
    gap: 0.75em;
  }
  
  #site-footer .separator {
    display: none;
  }
}