/* rial26 · Blog */
:root {
  --fondo: #fbfaf7; --superficie: #ffffff; --superficie2: #f2f0ea; --borde: #e4e0d6;
  --texto: #1d1f1e; --texto2: #545a57; --texto3: #858b87;
  --acento: #2f6f5e; --acento2: #245a4c; --acento-suave: #e3efe9;
  --aviso: #9a5b00; --aviso-suave: #fbefd9; --privado: #6d3fa8; --privado-suave: #efe7fa;
  --radio: 12px; --sombra: 0 1px 2px rgba(30,30,20,.05), 0 2px 8px rgba(30,30,20,.05);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121513; --superficie: #191d1b; --superficie2: #202623; --borde: #2c3330;
    --texto: #e6e9e7; --texto2: #a9b2ad; --texto3: #7c8681;
    --acento: #6cc3a7; --acento2: #8fd6bf; --acento-suave: #1b2f28;
    --aviso: #f0b85a; --aviso-suave: #3a2c12; --privado: #c4a3f2; --privado-suave: #2a2038;
    --sombra: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 17px/1.65 var(--sans); }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento2); }
img, video { max-width: 100%; height: auto; }
.ancho { max-width: 860px; margin: 0 auto; padding: 0 20px; }

.aviso-privado { background: var(--privado-suave); color: var(--privado); text-align: center; font-size: 13px; padding: 6px 12px; font-weight: 600; }
.aviso-privado a { color: inherit; }
.cab { border-bottom: 1px solid var(--borde); background: color-mix(in srgb, var(--fondo) 88%, transparent); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.cab-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.marca { font: 600 20px/1.2 var(--serif); color: var(--texto); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu { display: flex; gap: 18px; font-size: 15px; }
.menu a { color: var(--texto2); text-decoration: none; }
.menu a:hover { color: var(--acento); }

main { padding-top: 28px; padding-bottom: 40px; min-height: 60vh; }
.intro { padding: 18px 0 26px; }
.intro h1 { font: 600 clamp(30px, 6vw, 44px)/1.1 var(--serif); margin: 0 0 10px; letter-spacing: -.01em; }
.intro p { margin: 0; color: var(--texto2); font-size: 18px; max-width: 60ch; }
.tit-pag { font: 600 30px/1.2 var(--serif); margin: 6px 0 22px; }
.tit-pag a { color: inherit; text-decoration: none; }
.vacio { color: var(--texto3); padding: 30px 0; }

.lista { display: flex; flex-direction: column; gap: 14px; }
.tarj { display: grid; grid-template-columns: 1fr; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.tarj.con-img { grid-template-columns: 220px 1fr; }
.tarj-img { width: 100%; height: 100%; min-height: 150px; max-height: 200px; object-fit: cover; display: block; background: var(--superficie2); }
.tarj-txt { padding: 16px 20px 18px; min-width: 0; }
.tarj h2 { font: 600 22px/1.25 var(--serif); margin: 4px 0 6px; }
.tarj h2 a { color: var(--texto); text-decoration: none; }
.tarj h2 a:hover { color: var(--acento); }
.tarj p { margin: 0; color: var(--texto2); font-size: 15.5px; line-height: 1.55; }
.meta { font-size: 13px; color: var(--texto3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ico-video { color: var(--acento); font-weight: 600; }
.etqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.etq { font-size: 12.5px; padding: 2px 10px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); text-decoration: none; font-weight: 500; }
.etq:hover { background: var(--acento); color: #fff; }
.estado { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 8px; border-radius: 999px; }
.estado-privado { background: var(--privado-suave); color: var(--privado); }
.estado-borrador { background: var(--aviso-suave); color: var(--aviso); }
.temas { display: flex; flex-wrap: wrap; gap: 10px; }
.tema { padding: 8px 16px; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); text-decoration: none; color: var(--texto); font-weight: 500; }
.tema small { color: var(--texto3); margin-left: 4px; }
.tema:hover { border-color: var(--acento); color: var(--acento); }

/* Entrada */
.entrada { max-width: 720px; margin: 0 auto; }
.ent-cab { margin: 6px 0 26px; }
.ent-cab h1 { font: 600 clamp(28px, 5.6vw, 42px)/1.15 var(--serif); margin: 8px 0 10px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.texto { font-size: 18px; line-height: 1.75; overflow-wrap: break-word; }
.texto > :first-child { margin-top: 0; }
.texto h2 { font: 600 26px/1.3 var(--serif); margin: 40px 0 12px; }
.texto h3 { font: 600 21px/1.35 var(--serif); margin: 30px 0 10px; }
.texto h4 { font-size: 17px; margin: 24px 0 8px; }
.texto p, .texto ul, .texto ol, .texto dl { margin: 0 0 18px; }
.texto li { margin: 4px 0; }
.texto li > ul, .texto li > ol { margin: 4px 0; }
.texto blockquote { margin: 22px 0; padding: 4px 20px; border-left: 4px solid var(--acento); color: var(--texto2); font-style: italic; }
.texto hr { border: 0; border-top: 1px solid var(--borde); margin: 36px 0; }
.texto img { border-radius: 8px; display: block; margin: 24px auto; }
.texto figure { margin: 26px 0; }
.texto figure video, .texto figure audio { width: 100%; border-radius: 10px; background: #000; display: block; }
.texto figure audio { background: transparent; }
.texto figcaption { font-size: 14px; color: var(--texto3); text-align: center; margin-top: 8px; }
.texto table { border-collapse: collapse; width: 100%; font-size: 15.5px; margin: 0 0 22px; display: block; overflow-x: auto; }
.texto th, .texto td { border: 1px solid var(--borde); padding: 7px 10px; text-align: left; vertical-align: top; }
.texto th { background: var(--superficie2); font-weight: 600; }
.texto code { font-family: var(--mono); font-size: .86em; background: var(--superficie2); padding: .12em .38em; border-radius: 5px; }
.texto pre, .texto .codigo { background: var(--superficie2); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; overflow-x: auto; line-height: 1.5; margin: 0 0 20px; }
.texto pre code, .texto .codigo code { background: none; padding: 0; font-size: 14.5px; }
.texto .codigo pre { margin: 0; padding: 0; border: 0; background: none; }
.texto kbd { font-family: var(--mono); font-size: .8em; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--superficie); }
.texto details { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin: 0 0 18px; background: var(--superficie); }
.texto summary { cursor: pointer; font-weight: 600; }
.texto .toc { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 18px; font-size: 15.5px; }
.texto .footnote { font-size: 14.5px; color: var(--texto2); }
.vecinas { max-width: 720px; margin: 46px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vecinas a { display: block; padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio); text-decoration: none; color: var(--texto); background: var(--superficie); font-weight: 500; line-height: 1.35; }
.vecinas a:hover { border-color: var(--acento); }
.vecinas small { display: block; color: var(--texto3); font-weight: 400; font-size: 12.5px; margin-bottom: 3px; }
.vecinas .sig { text-align: right; }

.buscador { width: 100%; font: inherit; font-size: 18px; padding: 12px 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--texto); margin-bottom: 20px; }
.buscador:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
mark { background: var(--acento-suave); color: inherit; padding: 0 2px; border-radius: 3px; }

.pie { border-top: 1px solid var(--borde); color: var(--texto3); font-size: 14px; padding-top: 18px; padding-bottom: 40px; }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .ancho { padding: 0 16px; }
  .cab-in { height: 54px; }
  .marca { font-size: 18px; }
  .menu { gap: 14px; font-size: 14.5px; }
  .tarj.con-img { grid-template-columns: 1fr; }
  .tarj-img { max-height: 190px; }
  .tarj-txt { padding: 14px 16px 16px; }
  .tarj h2 { font-size: 20px; }
  .texto { font-size: 17px; line-height: 1.7; }
  .texto h2 { font-size: 23px; margin-top: 32px; }
  .vecinas { grid-template-columns: 1fr; }
  .vecinas .sig { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .cab, .pie, .vecinas, .aviso-privado { display: none; } body { background: #fff; color: #000; } }

/* código */
.texto .codigo .hll {  }
.texto .codigo {  }
.texto .codigo .c { color: #60A0B0; font-style: italic } /* Comment */
.texto .codigo .err { border: 1px solid #F00 } /* Error */
.texto .codigo .k { color: #007020; font-weight: bold } /* Keyword */
.texto .codigo .o { color: #666 } /* Operator */
.texto .codigo .ch { color: #60A0B0; font-style: italic } /* Comment.Hashbang */
.texto .codigo .cm { color: #60A0B0; font-style: italic } /* Comment.Multiline */
.texto .codigo .cp { color: #007020 } /* Comment.Preproc */
.texto .codigo .cpf { color: #60A0B0; font-style: italic } /* Comment.PreprocFile */
.texto .codigo .c1 { color: #60A0B0; font-style: italic } /* Comment.Single */
.texto .codigo .cs { color: #60A0B0;  } /* Comment.Special */
.texto .codigo .gd { color: #A00000 } /* Generic.Deleted */
.texto .codigo .ge { font-style: italic } /* Generic.Emph */
.texto .codigo .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.texto .codigo .gr { color: #F00 } /* Generic.Error */
.texto .codigo .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.texto .codigo .gi { color: #00A000 } /* Generic.Inserted */
.texto .codigo .go { color: #888 } /* Generic.Output */
.texto .codigo .gp { color: #C65D09; font-weight: bold } /* Generic.Prompt */
.texto .codigo .gs { font-weight: bold } /* Generic.Strong */
.texto .codigo .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.texto .codigo .gt { color: #04D } /* Generic.Traceback */
.texto .codigo .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.texto .codigo .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.texto .codigo .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.texto .codigo .kp { color: #007020 } /* Keyword.Pseudo */
.texto .codigo .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.texto .codigo .kt { color: #902000 } /* Keyword.Type */
.texto .codigo .m { color: #40A070 } /* Literal.Number */
.texto .codigo .s { color: #4070A0 } /* Literal.String */
.texto .codigo .na { color: #4070A0 } /* Name.Attribute */
.texto .codigo .nb { color: #007020 } /* Name.Builtin */
.texto .codigo .nc { color: #0E84B5; font-weight: bold } /* Name.Class */
.texto .codigo .no { color: #60ADD5 } /* Name.Constant */
.texto .codigo .nd { color: #555; font-weight: bold } /* Name.Decorator */
.texto .codigo .ni { color: #D55537; font-weight: bold } /* Name.Entity */
.texto .codigo .ne { color: #007020 } /* Name.Exception */
.texto .codigo .nf { color: #06287E } /* Name.Function */
.texto .codigo .nl { color: #002070; font-weight: bold } /* Name.Label */
.texto .codigo .nn { color: #0E84B5; font-weight: bold } /* Name.Namespace */
.texto .codigo .nt { color: #062873; font-weight: bold } /* Name.Tag */
.texto .codigo .nv { color: #BB60D5 } /* Name.Variable */
.texto .codigo .ow { color: #007020; font-weight: bold } /* Operator.Word */
.texto .codigo .w { color: #BBB } /* Text.Whitespace */
.texto .codigo .mb { color: #40A070 } /* Literal.Number.Bin */
.texto .codigo .mf { color: #40A070 } /* Literal.Number.Float */
.texto .codigo .mh { color: #40A070 } /* Literal.Number.Hex */
.texto .codigo .mi { color: #40A070 } /* Literal.Number.Integer */
.texto .codigo .mo { color: #40A070 } /* Literal.Number.Oct */
.texto .codigo .sa { color: #4070A0 } /* Literal.String.Affix */
.texto .codigo .sb { color: #4070A0 } /* Literal.String.Backtick */
.texto .codigo .sc { color: #4070A0 } /* Literal.String.Char */
.texto .codigo .dl { color: #4070A0 } /* Literal.String.Delimiter */
.texto .codigo .sd { color: #4070A0; font-style: italic } /* Literal.String.Doc */
.texto .codigo .s2 { color: #4070A0 } /* Literal.String.Double */
.texto .codigo .se { color: #4070A0; font-weight: bold } /* Literal.String.Escape */
.texto .codigo .sh { color: #4070A0 } /* Literal.String.Heredoc */
.texto .codigo .si { color: #70A0D0; font-style: italic } /* Literal.String.Interpol */
.texto .codigo .sx { color: #C65D09 } /* Literal.String.Other */
.texto .codigo .sr { color: #235388 } /* Literal.String.Regex */
.texto .codigo .s1 { color: #4070A0 } /* Literal.String.Single */
.texto .codigo .ss { color: #517918 } /* Literal.String.Symbol */
.texto .codigo .bp { color: #007020 } /* Name.Builtin.Pseudo */
.texto .codigo .fm { color: #06287E } /* Name.Function.Magic */
.texto .codigo .vc { color: #BB60D5 } /* Name.Variable.Class */
.texto .codigo .vg { color: #BB60D5 } /* Name.Variable.Global */
.texto .codigo .vi { color: #BB60D5 } /* Name.Variable.Instance */
.texto .codigo .vm { color: #BB60D5 } /* Name.Variable.Magic */
.texto .codigo .il { color: #40A070 } /* Literal.Number.Integer.Long */
@media (prefers-color-scheme: dark) {
.texto .codigo .hll {  }
.texto .codigo {  color: #F8F8F2 }
.texto .codigo .c { color: #959077 } /* Comment */
.texto .codigo .err { color: #ED007E;  } /* Error */
.texto .codigo .esc { color: #F8F8F2 } /* Escape */
.texto .codigo .g { color: #F8F8F2 } /* Generic */
.texto .codigo .k { color: #66D9EF } /* Keyword */
.texto .codigo .l { color: #AE81FF } /* Literal */
.texto .codigo .n { color: #F8F8F2 } /* Name */
.texto .codigo .o { color: #FF4689 } /* Operator */
.texto .codigo .x { color: #F8F8F2 } /* Other */
.texto .codigo .p { color: #F8F8F2 } /* Punctuation */
.texto .codigo .ch { color: #959077 } /* Comment.Hashbang */
.texto .codigo .cm { color: #959077 } /* Comment.Multiline */
.texto .codigo .cp { color: #959077 } /* Comment.Preproc */
.texto .codigo .cpf { color: #959077 } /* Comment.PreprocFile */
.texto .codigo .c1 { color: #959077 } /* Comment.Single */
.texto .codigo .cs { color: #959077 } /* Comment.Special */
.texto .codigo .gd { color: #FF4689 } /* Generic.Deleted */
.texto .codigo .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
.texto .codigo .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.texto .codigo .gr { color: #F8F8F2 } /* Generic.Error */
.texto .codigo .gh { color: #F8F8F2 } /* Generic.Heading */
.texto .codigo .gi { color: #A6E22E } /* Generic.Inserted */
.texto .codigo .go { color: #66D9EF } /* Generic.Output */
.texto .codigo .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
.texto .codigo .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
.texto .codigo .gu { color: #959077 } /* Generic.Subheading */
.texto .codigo .gt { color: #F8F8F2 } /* Generic.Traceback */
.texto .codigo .kc { color: #66D9EF } /* Keyword.Constant */
.texto .codigo .kd { color: #66D9EF } /* Keyword.Declaration */
.texto .codigo .kn { color: #FF4689 } /* Keyword.Namespace */
.texto .codigo .kp { color: #66D9EF } /* Keyword.Pseudo */
.texto .codigo .kr { color: #66D9EF } /* Keyword.Reserved */
.texto .codigo .kt { color: #66D9EF } /* Keyword.Type */
.texto .codigo .ld { color: #E6DB74 } /* Literal.Date */
.texto .codigo .m { color: #AE81FF } /* Literal.Number */
.texto .codigo .s { color: #E6DB74 } /* Literal.String */
.texto .codigo .na { color: #A6E22E } /* Name.Attribute */
.texto .codigo .nb { color: #F8F8F2 } /* Name.Builtin */
.texto .codigo .nc { color: #A6E22E } /* Name.Class */
.texto .codigo .no { color: #66D9EF } /* Name.Constant */
.texto .codigo .nd { color: #A6E22E } /* Name.Decorator */
.texto .codigo .ni { color: #F8F8F2 } /* Name.Entity */
.texto .codigo .ne { color: #A6E22E } /* Name.Exception */
.texto .codigo .nf { color: #A6E22E } /* Name.Function */
.texto .codigo .nl { color: #F8F8F2 } /* Name.Label */
.texto .codigo .nn { color: #F8F8F2 } /* Name.Namespace */
.texto .codigo .nx { color: #A6E22E } /* Name.Other */
.texto .codigo .py { color: #F8F8F2 } /* Name.Property */
.texto .codigo .nt { color: #FF4689 } /* Name.Tag */
.texto .codigo .nv { color: #F8F8F2 } /* Name.Variable */
.texto .codigo .ow { color: #FF4689 } /* Operator.Word */
.texto .codigo .pm { color: #F8F8F2 } /* Punctuation.Marker */
.texto .codigo .w { color: #F8F8F2 } /* Text.Whitespace */
.texto .codigo .mb { color: #AE81FF } /* Literal.Number.Bin */
.texto .codigo .mf { color: #AE81FF } /* Literal.Number.Float */
.texto .codigo .mh { color: #AE81FF } /* Literal.Number.Hex */
.texto .codigo .mi { color: #AE81FF } /* Literal.Number.Integer */
.texto .codigo .mo { color: #AE81FF } /* Literal.Number.Oct */
.texto .codigo .sa { color: #E6DB74 } /* Literal.String.Affix */
.texto .codigo .sb { color: #E6DB74 } /* Literal.String.Backtick */
.texto .codigo .sc { color: #E6DB74 } /* Literal.String.Char */
.texto .codigo .dl { color: #E6DB74 } /* Literal.String.Delimiter */
.texto .codigo .sd { color: #E6DB74 } /* Literal.String.Doc */
.texto .codigo .s2 { color: #E6DB74 } /* Literal.String.Double */
.texto .codigo .se { color: #AE81FF } /* Literal.String.Escape */
.texto .codigo .sh { color: #E6DB74 } /* Literal.String.Heredoc */
.texto .codigo .si { color: #E6DB74 } /* Literal.String.Interpol */
.texto .codigo .sx { color: #E6DB74 } /* Literal.String.Other */
.texto .codigo .sr { color: #E6DB74 } /* Literal.String.Regex */
.texto .codigo .s1 { color: #E6DB74 } /* Literal.String.Single */
.texto .codigo .ss { color: #E6DB74 } /* Literal.String.Symbol */
.texto .codigo .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */
.texto .codigo .fm { color: #A6E22E } /* Name.Function.Magic */
.texto .codigo .vc { color: #F8F8F2 } /* Name.Variable.Class */
.texto .codigo .vg { color: #F8F8F2 } /* Name.Variable.Global */
.texto .codigo .vi { color: #F8F8F2 } /* Name.Variable.Instance */
.texto .codigo .vm { color: #F8F8F2 } /* Name.Variable.Magic */
.texto .codigo .il { color: #AE81FF } /* Literal.Number.Integer.Long */
}