@charset "UTF-8";
/* © MSD Marcelo Soler Diseño   */
/* Versión 5.7                  */
/* Septiembre de 2026           */

/* 1. Restablecimiento ============ */
:where(*, *::before, *::after) {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* 2. Variables ============ */
:root {
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    /* -------- Tipos y medidas -------- */
    font-size: 62.5%;
    --tip-separ: clamp(0.5em, 0.5vw, .75em);
    --tip-interl: 1.618;
    --lh-0: 1.25;
    --lh-1: 1.4;
    --lh-2: var(--tip-interl);
    --cabeza: calc(var(--tam-30) * 3);
    --alto-pie: min(6rem, var(--cabeza));
    --alto-inicio: calc(var(--cabeza) + var(--tam-03));
    --v-100: 100vh;
    --p100: 100%;
    --p133: calc(var(--p100) * 4 / 3);
    --p50: 50%;
    --tam-10: 1rem;
    --tam-03: calc(var(--tam-10) * .3);
    --tam-04: calc(var(--tam-10) * .4);
    --tam-06: calc(var(--tam-03) * 2);
    --tam-09: calc(var(--tam-03) * 3);
    --tam-12: calc(var(--tam-06) * 2);
    --tam-15: calc(var(--tam-03) * 5);
    --tam-18: calc(var(--tam-09) * 2);
    --tam-24: calc(var(--tam-12) * 2);
    --tam-30: calc(var(--tam-15) * 2);
    --tam-36: calc(var(--tam-18) * 2);
    --tam-48: calc(var(--tam-24) * 2);
    /* Jerarquía de títluos */
    --razon-titulos: calc(10 / 9);
    --tam-h6: calc(100% * var(--razon-titulos));
    --tam-h5: calc(var(--tam-h6) * var(--razon-titulos));
    --tam-h4: calc(var(--tam-h5) * var(--razon-titulos));
    --tam-h3: calc(var(--tam-h4) * var(--razon-titulos));
    --tam-h2: calc(var(--tam-h3) * var(--razon-titulos));
    --tam-h1: calc(var(--tam-h2) * var(--razon-titulos));
    /* Espaciado */
    --fnt-wgh: 400;
    --tip-base: clamp(var(--tam-12), 0.8vw + var(--tam-10), var(--tam-18));
    --tip-a-max: min(66ch, 95%);
    --tip-nombre: clamp(var(--tam-15), 2.75cqi, calc(var(--cabeza) * .8));
    --marg-lat: clamp(var(--tam-15), 4vw, var(--tam-30));
    --cuadro: clamp(var(--tam-24), 3.125vw, var(--tam-30));
    /* Disparador del botón de ir arriba para el JS */
    --ir-arriba-minimo: clamp(30rem, 25vh, 60rem);
    --dif-arriba: calc(var(--cabeza) - var(--tam-06));
    /* Colores */
    --gris-0: oklch(0 0 0);
    --gris-10: oklch(.241 0 0);
    --gris-20: oklch(.3 0 0);
    --gris-30: oklch(.37 0 0);
    --gris-40: oklch(.42 0 0);
    --gris-50: oklch(.51 0 0);
    --gris-67: oklch(.75 0 0);
    --gris-80: oklch(.885 0 0);
    --gris-90: oklch(.92 0 0);
    --gris-95: oklch(.96 0 0);
    --gris-97: oklch(.975 0 0);
    --gris-100: oklch(1 0 0);
    --gris-liviano: var(--gris-90);
    /* Resaltado 2026-08-31 */
    --h: 265;
    --azul-0: oklch(.503 .200 var(--h));
    --azul-1: oklch(.475 .200 var(--h));
    --azul-2: oklch(.415 .185 var(--h));
    --azul-3: oklch(.333 .150 var(--h));
    --azul-4: oklch(.250 .115 var(--h));
    --azul-5: oklch(.225 .100 var(--h));
    --peligro: oklch(0.45 0.18 19);
    /* 2026-08-05 */
    --textos: color-mix(in srgb, var(--azul-5) 25%, var(--gris-10));
    --nombre: var(--textos);
    --rotaras: var(--azul-5);
    --gris-tr-1: color-mix(in srgb, var(--gris-100) 95%, transparent);
    --gris-tr-2: color-mix(in srgb, var(--gris-97) 95%, transparent);
    /* 2026-08-07 */
    --gris-tr-3: color-mix(in srgb, var(--gris-100) 97%, transparent);
    --resalta-bg: oklch(0.99 0.049 107);
    /* Identificadores */
    --c01: oklch(0.350 0.175 265);
    --c02: oklch(0.350 0.175 301);
    --c03: oklch(0.371 0.166 337);
    --c04: oklch(0.391 0.158 13);
    --c05: oklch(0.500 0.135 49);
    --c06: oklch(0.650 0.133 85);
    --c07: oklch(0.539 0.130 121);
    --c08: oklch(0.542 0.129 157);
    --c09: oklch(0.650 0.111 193);
    --c10: oklch(0.650 0.128 229);
    /* Bordes */
    --bor1: 1px solid;
    --bor2: 2px solid;
    --bor-d: 1px dotted;
    --borde: var(--bor1) var(--gris-80);
    /* Efectos */
    --somb-1: 0 2px 8px color-mix(in srgb, var(--gris-0) 10%, transparent);
    --somb-2: 0 -2px 8px color-mix(in srgb, var(--gris-0) 10%, transparent);
    --somb-3: 0 2px 4px 1px #0004;
    --somb-4: 2px 2px 4px var(--gris-0);
    --somb-5: 0 3px 4px #0001;
    --somb-ins: inset 0 2px 4px var(--gris-10),
        inset 0 1px 2px var(--gris-0),
        inset 0 -1px 2px var(--gris-100);
    /* Transiciones y filtros */
    --bezier: cubic-bezier(0.34, 1.56, 0.64, 1);
    --trnsic-e: 0.5s ease;
    --trnsic-b: 0.5s var(--bezier);
    --filtr: blur(3px);
    /* Semántica */
    --link: var(--azul-3);
    --hover: var(--azul-1);
    --focus: var(--azul-0);
    --active: var(--azul-5);
    --blink: var(--bor-d) var(--link);
    --bhover: var(--bor1) var(--hover);
    --bfocus: var(--bor2) var(--focus);
    --bactive: var(--bor2) var(--active);
    --to-bg: oklch(0 0 0 / 50%);
    --to-bg-t: oklch(0 0 0 / 25%);
    /* Scrollspy */
    --extra-scrollspy-down: -30px;
}

@media screen {
    :root.cabeza-reducida {
        --cabeza: calc(var(--tam-30) * 2.5);
        --tip-nombre: clamp(var(--tam-12), 2.5vw, calc(var(--cabeza) / 3));
    }
}

/* 3. Base ============ */

/* Fluidez y legibilidad */
body,
p,
li {
    line-height: var(--tip-interl);
}

body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: var(--tip-base);
    font-weight: var(--fnt-wgh);
    color: var(--textos);
    background: var(--gris-100);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: var(--v-100);
    padding-bottom: var(--tam-09);
    width: 100%;
    overflow-x: hidden;
    counter-reset: figura;
}

/* ---- Enlaces ---- */
a:link,
a:visited {
    color: var(--link);
    font-weight: 500;
    text-decoration: none;
    border-bottom: var(--blink);
    transition: color var(--trnsic-e), border-color var(--trnsic-e);
}

a:hover {
    color: var(--hover);
    border-bottom: var(--bhover);
}

a:focus {
    color: var(--focus);
    border-bottom: var(--bfocus);
}

a:active {
    color: var(--active);
    border-bottom: var(--bactive);
}

/* ---- Listas ----- */
ul {
    list-style: none;
    margin: var(--tam-12) 0;
    display: flex;
    flex-direction: column;
}

ol {
    list-style: decimal;
    padding-left: var(--tam-06);
    display: flex;
    flex-direction: column;
}

ol.parentesis {
    padding-inline-start: 1em;
    padding-bottom: var(--tam-12);
}

ol.parentesis>li::marker {
    content: "("counter(list-item) ")  ";
    font-weight: 700;
}

/* ---- Medios ---- */
img {
    max-width: 100%;
    cursor: pointer;
}

img.ilustra {
    border: var(--bor1) var(--gris-80);
    box-shadow: var(--somb-3);
}

img.inserta {
    display: block;
    height: clamp(27rem, 33vw, 57rem);
    min-width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    margin: var(--tam-24) 0;
}

main img {
    filter:sepia(75%) hue-rotate(170deg) brightness(95%);
    transition: filter 250ms ease;
}

main img:hover {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    main img {
        transition: none;
    }
}

.esq-red {
    border: var(--bor1) var(--gris-0);
    border-radius: var(--tam-12);
    box-shadow: var(--somb-4);
}

figure {
    margin: var(--tam-12) 0 var(--tam-18);
    background: var(--gris-95);
    padding: 0 0 var(--tam-12);
    border-radius: var(--tam-12);
    overflow: hidden;
    counter-increment: figura;
}

figcaption {
    font-size: 85%;
    color: var(--gris-40);
    text-align: left;
    margin-top: var(--tam-06);
    padding: 0 var(--tam-24);
}

figure.rebanada {
    display: grid;
    grid-template-rows: clamp(27rem, 33vw, 57rem) auto;
}

figure.rebanada img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    object-fit: cover;
}

hr {
    margin: var(--tam-12) 0;
}

.plano {
    background: var(--gris-100);
    z-index: -1;
}

/* 4. Tipografía ====== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    color: var(--azul-5);
    text-wrap: balance;
    text-align: left;
    margin: 0 auto .25em 0;
    display: block;
}

h1 {
    font-size: var(--tam-h1);
    line-height: var(--lh-0);
    margin: .25em 0 var(--tam-12);
}

h2 {
    font-size: var(--tam-h2);
    display: block;
    line-height: var(--lh-1);
    margin: .5em 0 0;
    padding: .25em 0;
    border-color: var(--gris-80);
}

h3 {
    font-size: var(--tam-h3);
    line-height: var(--lh-1);
    margin-top: .5em;
}

h4 {
    font-size: var(--tam-h4);
    line-height: var(--lh-2);
    margin-top: .5em;
}

h5 {
    font-size: var(--tam-h5);
    line-height: var(--lh-2);
    margin-top: .5em;
}

h6 {
    font-size: var(--tam-h6);
    line-height: var(--lh-2);
    margin-top: .5em;
}

p {
    max-width: 100%;
    margin-bottom: var(--tip-separ);
}

strong {
    font-weight: 500;
    /* Adaptado a legibilidad */
}

sup {
    font-size: 67%;
    font-weight: 700;
}

.menor {
    font-size: 87.5%;
}

.mayor {
    font-size: 105%;
    font-weight: bold;
}

.reforzado {
    color: var(--gris-10);
    background: var(--resalta-bg);
    padding: 0 var(--tam-03);
    border-radius: var(--tam-03);
}

.centrado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    text-wrap: balance;
}

.centra-texto {
    text-align: center;
    padding-bottom: .5em;
}

.grisado {
    color: var(--gris-30);
}

span.angulo.menor {
    margin: 0 calc(-1 * var(--tam-06));
}

/* Mini lista falsa 2026-08-28 */
span.mini-topicos {
    display: block;
    counter-reset: mini-item;
    padding-left: 1em;
}

span.mini-topicos span {
    display: block;
    counter-increment: mini-item;
    position: relative;
    padding-left: 3ch;
    margin-bottom: 0.2em;
}

span.mini-topicos span::before {
    content: "("counter(mini-item, lower-alpha) ")";
    position: absolute;
    left: 0;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--azul-4);
}

.ladeado {
    border-left: 4px solid var(--azul-4);
    padding-left: 1em;
}

/* 5. Componentes ajustados ====== */

/* Evitar la selección en interactivos */
#inicio,
#institucional {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

/* Estilos para el elemento del nombre que contiene el año */
#nombre .fechado {
    font-weight: 100;
}

/* Título */
#principio {
    margin: 0;
    padding: 0;
    border-bottom: var(--bor1) var(--gris-80);
}

#tpu {
    line-height: 1.1;
    font-weight: 500;
    text-wrap: wrap;
    min-width: 100%;
}

#principio h1,
#principio h2,
#principio h3,
#principio h4,
#principio p {
    margin-bottom: var(--tam-06);
    line-height: 1;
}

/* Auxiliar del título */
label.etiquetado {
    display: block;
    font-size: 120%;
    font-weight: 600;
    color: var(--gris-40);
    margin-bottom: .5em;
}

/* Detalle de la versión v. YYYY-MM-DD */
.version {
    font-size: small;
    display: inline-block;
    color: var(--gris-50);
    font-weight: 400;
}

div.encabezador {
    padding: 0 var(--tam-18) var(--tam-24);
    font-size: 90%;
    filter: grayscale(1);
}

.encabezador h3,
.encabezador h4 {
    font-weight: 400;
}

/* Secciones naipe */
section.naipe {
    position: relative;
    top: 0;
    margin-top: var(--tam-36);
    padding: 0 var(--marg-lat);
    border-radius: 0 0 var(--tam-12) var(--tam-12);
    box-shadow: var(--somb-2);
}

.naipe h2 {
    border-top: 6px solid var(--gris-67);
    border-bottom: var(--bor2) var(--gris-80);
    --marginado: calc(-1 * var(--marg-lat));
    margin: 0 var(--marginado);
    padding: .5em var(--marg-lat);
    background: var(--gris-tr-1) !important;
}

/* ====== Limpiador de .naipe ====== */
#documentos .tarjeta-marcador .titula-tarjeta {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
    animation: none;
}

/* Contenedor principal */
#articulos {
    width: 100%;
    max-width: 100%;
    padding: var(--tam-12) var(--tam-24);
    margin: calc(var(--tam-30) * 3) 0 0;
}

/* Items de listas del cuerpo principal */
#articulos ul {
    list-style: none;
}

#articulos ul li {
    position: relative;
    padding-left: var(--cuadro);
    margin-bottom: var(--tam-06);
    cursor: pointer;
}

/* Viñetas de nivel 1 */
#articulos ul li::before {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0.25em;
    width: 1em;
    height: 1em;
    overflow: hidden;
    clip-path: inset(0);
    background-color: currentColor;
    opacity: 0.5;
    mix-blend-mode: multiply;
    mask: var(--item-circ) center / contain no-repeat;
    -webkit-mask: var(--item-circ) center / contain no-repeat;
}

/* Viñetas de nivel 2 */
#articulos ul ul li::before {
    transform: scale(0.9);
    opacity: 0.75;
    mask-image: var(--item-circ-o);
    -webkit-mask-image: var(--item-circ-o);
}

/* Resaltado al pasar el puntero */
#articulos ul li:hover::before {
    opacity: 1;
}

#articulos>* {
    max-width: calc(var(--tip-a-max) + var(--cuadro)* 5);
    margin-left: auto;
    margin-right: auto;
}

/* Notas genéricas en sup (no-footnote) */

/* Enlace al pie para volver a la nota referida */
.ir-atras {
    font-weight: 800;
    vertical-align: middle;
}

/* Estilo específico (atras ir-atras) */
a[href^="#li-"].atras {
    font-size: 50%;
    vertical-align: text-top;
    border: none;
}

/* ---- Se excluye sup.fn declarado más abajo. ---- */
sup:not(.fn) a[href^="#"] {
    all: unset;
    font: inherit;
    font-weight: 600;
    color: var(--link);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

sup:not(.fn) a[href^="#"]:hover {
    outline-color: var(--resalta-bg);
    outline-offset: var(--tam-04);
    outline-width: var(--tam-04);
    outline-style: solid;
    background-color: var(--resalta-bg);
}

sup:not(.fn) a[href^="#"]::before {
    content: " (";
}

sup:not(.fn) a[href^="#"]::after {
    content: ") ";
}

/* ---- Listas ordenadas ---- */
ol>li::before {
    content: none;
}

ol>li {
    display: list-item;
    margin-left: var(--tam-12);
}

/* Fases */
ol.fases {
    list-style: none;
    counter-reset: mi-contador;
    background: var(--gris-95);
}

ol.fases li {
    font-weight: 500;
    counter-increment: mi-contador;
    position: relative;
    margin-left: 0;
    padding-left: calc(var(--tam-12) * 5);
    border-bottom: var(--borde);
}

ol.fases li a {
    border-color: transparent;
    padding: var(--tam-12) 0;
    display: flex;
    align-items: center;
    gap: var(--tam-12);
    width: var(--p100);
    border: none;
}

ol.fases li a:hover {
    border-color: var(--hover);
}

ol.fases li:first-child {
    border-top: var(--borde);
}

/* Contador automático insertado */
ol.fases li::before {
    position: absolute;
    align-items: center;
    padding: var(--tam-12) 0;
    color: var(--gris-50);
    left: var(--tam-06);
    content: counter(mi-contador, decimal-leading-zero) "|";
    font-weight: 800;
    text-align: right;
    letter-spacing: 1px;
    display: inline-block;
    width: 4ch;
}

/* Punteo */
ol.punteo, ol.listado {
    list-style: none;
    counter-reset: mi-puntero;
    padding: 0 0 var(--tam-12);
}

ol.punteo li, ol.listado li {
    counter-increment: mi-puntero;
    position: relative;
    margin-left: 0;
}

ol.punteo li {
    padding-left: var(--tam-36);
}

ol.punteo li::before {
    position: absolute;
    align-items: center;
    left: calc(-1 * var(--tam-18));
    content: "("counter(mi-puntero, decimal) ") ";
    font-weight: 800;
    color: var(--azul-4);
    text-align: right;
    letter-spacing: 1px;
    display: inline-block;
    width: 4ch;
}

ol.listado li {
    padding: var(--tam-12) var(--tam-36);
    border-bottom: var(--bor1) var(--gris-80);
}

ol.listado li:first-child {
    border-top: var(--bor1) var(--gris-80);
}

ol.listado li::before {
    position: absolute;
    align-items: center;
    left: calc(-1 * var(--tam-12));
    content: counter(mi-puntero, decimal) ". ";
    font-weight: 800;
    text-align: right;
    letter-spacing: 1px;
    display: inline-block;
    width: 4ch;
}

ol.listado.alfabetico li::before {
    content: "("counter(mi-puntero, lower-alpha) ") ";
}

/* ---------- Listas horizontales ---------- */
#articulos ul.secuencial>li::before {
    content: none;
    display: none;
}

ul.secuencial {
    color: var(--azul-5);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 700;
}

ul.secuencial>li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin: 0 calc(-1 * var(--tam-12));
}

#articulos ul.secuencial>li:not(:last-child)::after {
    content: "";
    display: inline-block;
    flex-basis: 1em;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--angulo-der) center / contain no-repeat;
    mask: var(--angulo-der) center / contain no-repeat;
}

/* ---- Fases ---- */
#desarrollo-tp {
    counter-reset: cuenta-fase;
}

/* Falsa ol para Fases */
h3.fase {
    position: relative;
    padding-left: 3ch;
    counter-increment: cuenta-fase;
}

/* Contador */
h3.fase::before {
    position: absolute;
    left: 0;
    color: var(--gris-50);
    content: counter(cuenta-fase, decimal-leading-zero) "|";
}

/* Epígrafe decorado */
figcaption::before {
    content: "▸ Figura "counter(figura) ": ";
    font-weight: 500;
}

/* Indicador interno > */
p .angulo::before {
    width: 1.6em;
    height: 1.6em;
    vertical-align: middle;
    color: currentColor;
}

/* Cuando .atras está directamente en el <a> */
a.atras {
    display: inline-block;
}

a.atras::before {
    background-color: var(--link);
    filter: grayscale(1);
    margin: 0 .25em;
    opacity: .5;
}

/* ---- Estados del enlace ---- */
a.atras:hover::before {
    filter: grayscale(0);
    background-color: var(--hover);
    opacity: 1;
}

a.atras:active::before {
    transform: scale(0.95);
    background-color: var(--active);
}

/* === Contenido principal === */
#articulo section {
    margin-bottom: var(--tam-36);
}

.naipe :is(h1, h2, h3, h4, figure, img)+p {
    padding-top: var(--tam-06);
}

.naipe :is(h1, h2, h3, h4, figure, img)+p::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    vertical-align: -0.15em;
    background-color: var(--gris-67);
    -webkit-mask-image: var(--inicial-p);
    mask-image: var(--inicial-p);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Separador intermedio */
.gap {
    display: block;
    height: 1em;
    border-bottom: var(--borde);
}

.gap-mini {
    width: 100%;
    height: 0;
    border: 0;
    border-top: var(--bor1) var(--gris-80);
    margin: var(--tam-12) 0 0;
    padding: 0;
}

.gap-vac {
    display: block;
    height: 1em;
}

/* Contenedor de tarjetas de tópicos */
.topicos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(35ch, 1fr));
    /* Adapta las columnas para buena legibilidad */
    grid-auto-rows: 1fr;
    gap: var(--tam-18);
    align-items: stretch;
    counter-reset: topicos;
}

/* Tarjeta de datos contenedora de h4 */
.tarjeta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 var(--marg-lat) var(--tam-04);
    border: var(--borde);
    border-radius: var(--tam-12);
    box-shadow: var(--somb-1);
    overflow-wrap: break-word;
    word-break: break-word;
    background: var(--gris-95);
    height: 100%;
    transition: background-color var(--trnsic-b), box-shadow var(--trnsic-b);
}

.tarjeta:hover {
    background: var(--gris-100);
    border-color: var(--gris-40);
    cursor: pointer;
}

/* Numerador de tarjetas */
.tarjeta h4::before {
    counter-increment: topicos;
    content: counter(topicos) ". ";
}

/* Contenedor principal de las notas */
#notas {
    position: relative;
    isolation: isolate;
}

/* Notas al pie (formatos para la lista final) */
.anotado {
    z-index: 40;
    padding: 0 var(--tam-12);
}

.final p {
    text-indent: 0 !important;
    margin-bottom: 1em !important;
}

#notas p, #notas ol {
    font-size: 90%;
}

#notas ol {
    width: 100%;
    max-width: 100%;
    padding: 0;
    list-style: none;
}

#notas li {
    padding: var(--tam-12) 0;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.inserto, .imprenta {
    padding: var(--tam-09) var(--tam-18);
    border-radius: var(--tam-09);
    background: var(--gris-95);
}

.inserto {
    margin: var(--tam-12);
}

.imprenta {
    font-size: smaller !important;
    margin: var(--tam-36) 0;
    border: var(--borde);
}

.al-pie {
    margin-bottom: var(--cabeza);
    z-index: auto;
}

.al-pie ol {
    counter-reset: cuenta-citas;
}

.al-pie li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25em;
    width: 100%;
    padding: var(--tam-06);
    counter-increment: cuenta-citas;
    padding-bottom: var(--tam-12);
    border-bottom: var(--borde);
    line-height: 1.25;
}

.al-pie li:first-child {
    border-top: var(--borde);
}

.al-pie li::before {
    font-weight: 500;
    content: "("counter(cuenta-citas) ") ";
    flex-shrink: 0;
}

/* 2026-09-07 */
.al-pie li a.atras {
    flex: 1;
    word-break: break-word;
    color: var(--gris-20);
    font-weight: normal;
    border: none;
}

.al-pie li a.atras::before {
    opacity: 1;
}

.al-pie li a.atras:focus {
    filter: grayscale(0);
    background: transparent;
    outline: none;
}

.al-pie li a.atras:focus::before {
    background: var(--focus);
}

.al-pie .edicion {
    color: var(--gris-0);
    font-weight: 600;
}

/* Pie de main #articulos */
.conclusion {
    padding: var(--tam-12) 0 var(--tam-36);
}

.conclusion p {
    font-size: 85%;
    margin: 0 !important;
}

.conclusion .version {
    color: inherit;
}

p.marcador {
    font-weight: 600;
}

p.versales {
    color: var(--gris-50);
}

.destacado {
    background-color: var(--gris-97);
    /* 2026-08-27 */
    border: var(--borde);
    border-radius: var(--tam-12);
    box-shadow: var(--somb-1);
    padding: var(--tam-18);
    margin: var(--tam-18) 0;
}

.destacado li {
    padding-bottom: var(--tam-06);
    border-bottom: var(--borde);
}

.destacado li:last-child {
    padding-bottom: 0;
    border: none;
    margin-bottom: 0;
}

.destacado li::after {
    color: var(--azul-4);
}

.bordeado {
    border: var(--bor1) var(--gris-50);
    border-radius: var(--tam-12);
    padding: var(--tam-06) var(--tam-12) 0;
    margin: var(--tam-18) 0;
}

.sombreado {
    box-shadow: var(--somb-1);
}

details {
    padding: var(--tam-03);
}

summary {
    max-inline-size: 72ch;
    text-wrap: balance;
}

summary h3 {
    margin-top: 0;
    padding-top: 0;
}

summary.sumarial {
    margin: var(--tam-06) 0;
    padding: 0 var(--tam-12);
    border-left: 4px solid var(--gris-67);
}

summary.marginal {
    margin: 1em 0;
    padding: var(--tam-06);
    min-width: 100%;
    border: var(--bor1) var(--gris-67);
    border-radius: var(--tam-12);
    box-shadow: var(--somb-1);
}

.pie-num {
    font-weight: 600;
}

.area-impresa {
    display: none;
}

.fuelle {
    min-height: 2vh;
}

#colofon {
    margin-bottom: 50vh;
}

/* 6. Sistema de navegación =============== */
#navegacion {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--p100);
    z-index: 1001;
    padding: 0;
    height: var(--cabeza);
    max-height: var(--cabeza);
    transform: none !important;
}

#inicio {
    --reserva-controles: calc(var(--cuadro) * 3 + var(--tam-12));
    /* 2026-08-25 */
    display: flex;
    flex-direction: row;
    align-items: center;
    height: calc(var(--cabeza) - var(--tam-15));
    max-height: var(--cabeza);
    background: var(--gris-tr-1);
    border-top: 6px solid var(--c01);
    box-shadow: var(--somb-1);
    /*backdrop-filter: var(--filtr);*/
    z-index: 1001;
    /* Contenedor de query para que cqi en --tip-nombre
       resuelva sobre el ancho de la barra de navegación */
    container-type: inline-size;
}

#marca {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    gap: var(--tam-06);
    box-sizing: border-box;
    min-width: 0;
    padding-right: var(--reserva-controles);
}

#marca>a {
    flex: 0 0 auto;
}

.brand a {
    text-decoration: none;
    border: none;
}

#signo {
    /* 2026-08-07 */
    margin: var(--tam-12) 0 var(--tam-12) var(--tam-12);
    height: calc(var(--cabeza) - var(--tam-24));
    transform: translateY(var(--tam-03));
}

#signo, .taller {
    display: inline-block;
    flex-shrink: 0;
    background-image: var(--marca-MM);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

#signo:hover {
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--gris-0) 50%, transparent));
}

/* Nombre completo del documento; elipsis según el espacio disponible. */
#nombre {
    position: static;
    flex: 1 1 0%;
    transform: none;
    display: block;
    min-width: 0;
    font-family: "Oswald", sans-serif;
    font-size: var(--tip-nombre);
    font-weight: 500;
    color: var(--nombre);
    word-spacing: 0.025em;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
    border: 0;
    transition: font-size 240ms cubic-bezier(.22, 1, .36, 1);
}

#nombre.nombre {
    line-height: 1.15;
}

#seccion-menu {
    position: relative;
    width: var(--p100);
    height: fit-content;
    z-index: 9;
}

/* Menú hamburguesa */
#gatillo {
    display: none;
}

.hamburgo {
    position: fixed;
    top: calc(var(--alto-inicio) / 2);
    transform: translateY(-50%);
    right: calc(var(--cuadro) / 2);
    width: var(--cuadro);
    height: var(--cuadro);
    cursor: pointer;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
}

.hamburgo::before {
    content: '';
    position: absolute;
    width: var(--cuadro);
    height: calc(var(--tam-10) * .4);
    background-color: var(--gris-0);
    transition: background-color var(--trnsic-e), box-shadow var(--trnsic-e), transform var(--trnsic-e), top var(--trnsic-e);
    top: var(--tam-03);
    box-shadow:
        0 var(--tam-09) 0 var(--gris-0),
        0 var(--tam-18) 0 var(--gris-0);
}

#gatillo:hover+.hamburgo::before {
    background-color: var(--hover);
    box-shadow:
        0 var(--tam-09) 0 var(--hover),
        0 var(--tam-18) 0 var(--hover);
}

#gatillo:checked+.hamburgo::before {
    top: var(--p50);
    transform: translateY(-50%) rotate(45deg);
    box-shadow:
        0 0 0 transparent,
        0 var(--tam-06) 0 transparent;
    background-color: var(--gris-50);
}

#gatillo:checked+.hamburgo::after {
    content: '';
    position: absolute;
    top: var(--p50);
    left: 0;
    width: var(--cuadro);
    height: calc(var(--tam-10) * .4);
    background-color: var(--gris-50);
    transform: translateY(-50%) rotate(-45deg);
    display: block;
}

#gatillo:checked:hover+.hamburgo::before,
#gatillo:checked:hover+.hamburgo::after {
    background-color: var(--gris-20);
}

.lateral-deslizable {
    --menu-posicion: absolute;
    --menu-superior: 0;
    --menu-ancho: clamp(30rem, 50vw, 60rem);
    --menu-borde-superior: none;
    --menu-fondo-item: transparent;
    --menu-tipografia: inherit;
    position: var(--menu-posicion);
    top: var(--menu-superior);
    left: 50%;
    transform: translateX(-50%);
    width: var(--menu-ancho);
    height: fit-content;
    max-height: 0;
    margin: 0;
    padding: 0 var(--tam-06);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--gris-tr-3);
    /*backdrop-filter: var(--filtr);*/
    border-top: var(--menu-borde-superior);
    border-radius: 0 0 var(--tam-12) var(--tam-12);
    box-shadow: inset var(--somb-5), var(--somb-1);
    transition: max-height var(--trnsic-b), opacity var(--trnsic-b), visibility var(--trnsic-b);
    z-index: 3;
}

#gatillo:checked~.lateral-deslizable {
    max-height: 75vh;
    padding: var(--tam-06);
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 5;
}

#gatillo:checked~#overlay-menu {
    opacity: 1;
    pointer-events: auto;
}

#menu-general {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: var(--menu-tipografia);
    letter-spacing: 0.025em;
}

.lateral-deslizable #menu-general li {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: var(--tam-12) 0;
    color: var(--link);
    background: var(--menu-fondo-item);
    border-bottom: var(--bor1) var(--gris-80);
    overflow: hidden;
    transition: color var(--trnsic-b), background-color var(--trnsic-b);
}

.lateral-deslizable #menu-general li:hover a {
    color: var(--hover);
}

.lateral-deslizable #menu-general li:hover {
    background: transparent;
}

.lateral-deslizable #menu-general li:focus-within {
    color: var(--focus);
}

.lateral-deslizable #menu-general li:last-child {
    border-bottom-color: transparent;
}

.lateral-deslizable #menu-general li a {
    display: flex;
    align-items: center;
    color: var(--link);
    width: 100%;
    padding: var(--tam-03) var(--tam-06);
    border: none;
    box-shadow: none;
    background: transparent;
}

.lateral-deslizable #menu-general li a::before {
    content: "";
    display: inline-block;
    flex: 0 0 1.25em;
    width: 1.25em;
    height: 1.25em;
    margin-right: 1em;
    overflow: hidden;
    clip-path: inset(0);
    background-color: currentColor;
    -webkit-mask: var(--angulo-der) center / contain no-repeat;
    mask: var(--angulo-der) center / contain no-repeat;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 0.5s var(--bezier);
}

.lateral-deslizable #menu-general li a:is(:hover, :focus)::before {
    opacity: 1;
    animation: atencion-angulo 0.55s var(--bezier) both;
}

.lateral-deslizable #menu-general li a:focus {
    color: var(--focus);
    outline: none;
    box-shadow: none;
    border-color: inherit;
}

.lateral-deslizable #menu-general li a:active {
    color: var(--active);
    border-color: var(--active);
}

@keyframes atencion-angulo {

    0%,
    100% {
        transform: translateX(0);
    }

    35% {
        transform: translateX(0.3em);
    }

    60% {
        transform: translateX(-0.1em);
    }

    80% {
        transform: translateX(0.1em);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lateral-deslizable #menu-general li a:is(:hover, :focus)::before {
        animation: none;
    }
}

/* =============== Scrollspy lateral =============== */
#sig-nav {
    --bullet: var(--tam-09);
    --enlarg: calc(4 * var(--bullet));
    position: fixed;
    top: calc(var(--cabeza) * 2.5);
    right: var(--tam-15);
    /* 2026-08-24 */
    transition: opacity var(--trnsic-b);
    z-index: 998;
    opacity: .5;
    /* 2026-08-24 */
    outline: none;
}

#sig-nav:hover,
#sig-nav:focus-within {
    opacity: 1 !important;
}

#sig-nav * {
    outline: none !important;
    outline-color: transparent !important;
    -webkit-tap-highlight-color: transparent;
}

#sig-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(var(--tam-06), 3vh + var(--tam-03), calc(var(--tam-36) * 2));
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

#sig-nav li {
    height: fit-content;
    width: auto;
    transition: none;
}

#sig-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    box-shadow: none;
    position: relative;
    padding: var(--bullet);
    margin: calc(-1 * var(--bullet));
    cursor: pointer;
    transition: height 180ms ease, opacity 0.15s ease;
}

#sig-nav a .dot {
    display: block;
    width: var(--bullet);
    height: var(--bullet);
    border-radius: var(--bullet);
    background: var(--gris-67);
    transition: height 180ms ease,
        background 0.5s ease;

}

#sig-nav a.active,
#sig-nav a:target {
    height: var(--enlarg);
}

#sig-nav a.active .dot,
#sig-nav a:target .dot,
#sig-nav a.active:focus .dot {
    width: var(--bullet);
    height: var(--enlarg);
    background: var(--link);
}

#sig-nav li a:hover .dot,
#sig-nav li a.active:hover .dot {
    background: var(--hover);
}

#sig-nav li a:focus .dot {
    background: var(--focus);
}

#sig-nav a::after {
    font-size: 85%;
    color: var(--link);
    background: var(--gris-100);
    padding: var(--tam-03) var(--tam-12);
    margin: 0 var(--tam-12);
    border: var(--borde);
    border-radius: var(--tam-04);
    box-shadow: var(--somb-1);
    content: attr(title);
    position: absolute;
    right: calc(var(--enlarg) / 2);
    top: calc(-.25 * var(--bullet));
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
    white-space: nowrap;
}

#sig-nav a:hover::after {
    color: var(--hover);
}

#sig-nav a:focus::after {
    color: var(--focus);
}

#sig-nav a.active::after {
    top: 0;
}

#sig-nav li:hover a::after,
#sig-nav a:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

#sig-nav a.active::after {
    background: var(--gris-100);
    font-weight: 500;
}

/* Botón para volver al inicio */
#ir-arriba {
    --ir-arriba: calc(var(--tam-24) * 2);
    position: fixed;
    bottom: calc(var(--alto-pie) * 1.25);
    right: calc(50% - var(--ir-arriba) / 2);
    z-index: 995;
    opacity: 0;
    visibility: hidden;
    transform-origin: center;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#ir-arriba.visible {
    opacity: 1;
    visibility: visible;
}

.ir-arriba-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ir-arriba);
    height: var(--ir-arriba);
    border: var(--bor1) var(--gris-100);
    border-radius: 50%;
    background: var(--to-bg-t);
    cursor: pointer;
    transition: background-color var(--trnsic-b), transform var(--trnsic-b), box-shadow var(--trnsic-b);
    box-shadow: var(--somb-3);
}

.ir-arriba-btn:hover {
    background: var(--to-bg);
    transform: scale(1.1);
    opacity: 1;
}

.ir-arriba-btn:active {
    transform: scale(0.95);
    background: var(--to-bg);
    opacity: 1;
}

.ir-arriba-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus);
    background: var(--focus);
}

.ir-arriba-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
    background: var(--to-bg);
    transform: scale(1);
}

.ir-arriba-icon {
    display: block;
    width: var(--tam-24);
    height: var(--tam-24);
    overflow: hidden;
    clip-path: inset(0);
    background-color: var(--gris-100);
    -webkit-mask-image: var(--angulo-der);
    mask-image: var(--angulo-der);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transform: rotate(-90deg);
}

/* Bloque institucional fijo abajo */
#institucional {
    border-top: var(--bor1) var(--gris-90);
    display: flex;
    flex-direction: row;
    gap: var(--tam-24);
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--gris-95) 95%, transparent);
    /*backdrop-filter: var(--filtr);*/
    box-shadow: var(--somb-2);
    position: fixed;
    bottom: 0;
    left: 0;
    width: var(--p100);
    height: var(--alto-pie);
    z-index: 999;
    padding: var(--tam-12) var(--tam-06);
}

#institucional p {
    font-size: var(--tam-15);
    line-height: var(--p133);
    margin: var(--tam-06);
    max-width: var(--p100);
    overflow-wrap: break-word;
}

.taller {
    display: inline-block;
    width: 2em;
    height: 2em;
    vertical-align: middle;
    transform: translateY(-25%);
    filter: sepia(1) grayscale(1) contrast(5);
}

.taller:hover {
    filter: grayscale(0);
}

#data-info {
    display: flex;
    justify-items: stretch;
    gap: var(--tam-06);
    max-width: 60rem;
}

#ahora:hover {
    color: var(--azul-0);
    cursor: help;
}

#fadu {
    padding: 0 var(--tam-03);
}

#institucional #fadu::after {
    content: "|";
    padding: 0 var(--tam-06);
    color: var(--gris-30);
}

/* resaltado para anclajes */
.resaltado {
    background-color: #ffffb0;
    transition: background 0.25s var(--bezier);
    animation: fadeOut 1s forwards;
}

/* Gestión de notas al pie en página ====== */
sup.fn a {
    all: unset;
    font: inherit;
    color: var(--gris-0);
    background: var(--resalta-bg);
    padding: var(--tam-03) !important;
    cursor: pointer;
}

sup.fn a::before {
    content: "(";
}

sup.fn a::after {
    content: ")";
}

/* Pop-up de nota en texto */
.al-pie-tt {
    --esp-tt: var(--tam-18);
    --medio-tt: calc(var(--esp-tt) / 2);
    --min-tt: calc(var(--esp-tt) / 3);
    position: absolute;
    display: inline-block;
    z-index: 1000;
    font-size: 1.5rem;
    line-height: 1.25;
    word-break: break-word;
    padding: var(--tam-18) var(--esp-tt);
    width: 50%;
    max-width: 60ch;
    min-width: 36ch;
    background: var(--gris-100);
    border: var(--borde);
    border-radius: var(--medio-tt);
    box-shadow: var(--somb-3);
    color: var(--gris-20);
    animation: fadeIn .5s ease-in-out;
}

/* Botón de cierre (arriba a la derecha) 2026-09-10 */
.tt-cierra {
    position: absolute;
    top: calc(-1.5 * var(--min-tt));
    right: var(--min-tt);
    color: var(--link);
    font-weight: bold;
    background: var(--gris-90);
    font-size: var(--esp-tt);
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Dimensiones */
    width: var(--esp-tt);
    height: var(--esp-tt);
    border-radius: 50%;
    z-index: 1;
    transition: color var(--trnsic-b), transform var(--trnsic-b);
}

.tt-cierra::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: transparent;
    border: var(--bor1) var(--link);
    border-radius: 50%;
    z-index: -1;
}

/* Estado hover */
.tt-cierra:hover {
    transform: rotate(90deg) scale(1.08);
}

.tt-cierra:hover::before {
    transform: translate(-50%, -50%) scale(1.18);
}

/* Estado de teclado */
.tt-cierra:focus-visible {
    outline: var(--bor1) currentColor;
    outline-offset: calc(0.5 * var(--min-tt));
    transform: rotate(90deg) scale(1.08);
}

/* Estado active */
.tt-cierra:active {
    transform: rotate(90deg) scale(0.9);
}

.tt-cierra:active::before {
    transform: translate(-50%, -50%) scale(1.05);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {

    .tt-cierra,
    .tt-cierra::before {
        transition: none;
    }

    .tt-cierra:hover,
    .tt-cierra:focus-visible,
    .tt-cierra:active {
        transform: none;
    }

    .tt-cierra:hover::before,
    .tt-cierra:active::before {
        transform: translate(-50%, -50%);
    }
}

/* Regulador técnico del scrolling dif-arriba */
[id] {
    scroll-margin-top: var(--dif-arriba);
}

/* Resaltado breve al arribo */
.pie-destino-activo {
    color: var(--gris-0);
    outline: var(--tam-06) solid var(--resalta-bg);
    background: var(--resalta-bg);
    mix-blend-mode: multiply;
    transition: color .5s ease-in-out, background-color .5s ease-in-out, outline-color .5s ease-in-out;
    animation: fadeOut 1s ease-in-out;
}

/* ---- Botón de descarga de PDF ---- */
.btn-pdf {
    color: var(--link);
    background: var(--gris-100);
    width: fit-content;
    height: fit-content;
    border: var(--bor1) var(--link);
    padding: var(--tam-06) var(--tam-12) var(--tam-03);
    border-radius: 3rem;
    font-weight: 600;
    font-size: var(--tip-base);
    cursor: pointer;
    box-shadow: var(--somb-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tam-04);
    transition: border-color var(--trnsic-e),
        color var(--trnsic-e),
        opacity var(--trnsic-e);
}

/* Base inmutable para ambos componentes internos */
.btn-pdf span {
    display: inline-block;
    will-change: transform;
    transform: scale(1);
    transform-origin: center;
    transition: transform var(--trnsic-e);
}

.btn-pdf:hover {
    color: var(--hover);
    border-color: var(--hover);
    opacity: 1;
}

.btn-pdf:hover span {
    transform: scale(1.1);
}

.btn-pdf:active {
    color: var(--active);
    border-color: var(--active);
}

.btn-pdf:active span {
    transform: scale(0.9);
}

/* ---- Botones de accesibiliad ---- */
.accesible {
    display: none;
}

/* ---- Botones de accesibiliad ---- */
.accesible {
    display: none;
}

.btn-txt {
    position: relative;
    display: inline-grid;
    place-items: center;
    isolation: isolate;
    flex: 0 0 auto;
    width: var(--cuadro);
    height: var(--cuadro);
    padding: 0;
    color: var(--link);
    background: transparent;
    border: var(--bor1) var(--link);
    border-radius: 50%;
    box-shadow: var(--somb-1);
    overflow: hidden;
    transform: scale(.95);
    cursor: pointer;
    transition:
        color var(--trnsic-e),
        transform var(--trnsic-e);
}

.btn-txt:hover {
    color: var(--hover);
    transform: scale(1);
}

.btn-txt:active {
    color: var(--active);
    transform: scale(.9);
}

/* SVG enmascarado */
.btn-txt::before {
    --exceso: calc(var(--tam-36) - var(--tam-03));
    content: "" !important;
    position: absolute;
    /* Ajustes para eliminar bordes */
    width: var(--exceso) !important;
    height: var(--exceso) !important;
    background-color: currentColor !important;
    background-image: none !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Asignación de máscaras SVG */
.btn-txt.a-menos::before {
    -webkit-mask-image: var(--A-menos) !important;
    mask-image: var(--A-menos) !important;
}

.btn-txt.a-0::before {
    -webkit-mask-image: var(--A-igual) !important;
    mask-image: var(--A-igual) !important;
}

.btn-txt.a-mas::before {
    -webkit-mask-image: var(--A-mas) !important;
    mask-image: var(--A-mas) !important;
}

.btn-txt::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--gris-100);
    border-radius: 50%;
}

/* ====== Animaciones generales ====== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        scale: 1;
        background-color: rgba(255, 255, 176, 0);
    }

    20%, 80% {
        scale: 1.1;
        background-color: #ffffb0;
    }

    100% {
        scale: 1;
        background-color: rgba(255, 255, 176, 0);
    }
}

@keyframes entra {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateX(var(--tam-24));
    }

    1% {
        visibility: visible;
    }

    100% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

@keyframes sale {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    99% {
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        transform: translateX(var(--tam-24));
    }
}

@keyframes blink {
    0%, 100% {
        opacity: .5;
    }

    20%, 80% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--tam-24));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(300deg);
    }

    50% {
        transform: rotate(360deg);
    }

    75% {
        transform: rotate(660deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

#rotate-warning {
    display: none;
}

/* 7. Consultas de medios ================ */

/* Desktop/tablet (≥769px) */
@media (min-width: 769px) {

    /*
     * Mantiene cada naipe separado como mínimo var(--tam-24) de ambos
     * bordes del viewport. El padding de #articulos aporta esa reserva y
     * este límite impide que una regla de ancho posterior la invada.
     */
    #articulos section.naipe {
        width: 100%;
        max-width: min(calc(var(--tip-a-max) + var(--tam-36) * 5),
                calc(95vw - var(--tam-24) * 2));
        margin-inline: auto;
    }

    .topicos>* {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .sin-txt {
        display: none;
    }

    #articulos>div.encabezador {
        width: 100%;
        min-width: 0;
        max-width: min(calc(var(--tip-a-max) + var(--tam-36) * 5),
                calc(95vw - var(--tam-24)));
        margin-left: auto;
        margin-right: auto;
        padding: 0 var(--marg-lat) var(--tam-24);
        font-size: 100%;
    }

    #articulos>div.encabezador>header {
        font-size: 90%;
    }

    /* Imágenes dinamizadas */
    figure.rebanada {
        display: grid;
        grid-template-rows: 13.5rem auto;
        overflow: hidden;
        transition: max-height 1.5s ease;
        cursor: pointer;
        box-shadow: var(--somb-3);
    }

    figure.rebanada img {
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transition: object-position 1.5s ease;
    }

    figure.rebanada:active {
        display: flex;
        flex-direction: column;
    }

    figure.rebanada:active img {
        object-position: center top;
        width: 100%;
        height: auto;
        animation: rebanada-activa 1.5s ease forwards;
    }

    @keyframes rebanada-activa {
        0% {
            object-position: center center;
        }

        25% {
            object-position: center top;
        }

        100% {
            object-position: center center;
        }
    }

    /* Ajuste de altura de #seccion-menu */
    #seccion-menu {
        height: auto;
    }

    /* Ajustes adicionales de navegación */
    #navegacion {
        height: var(--cabeza);
    }

    /* ---- Bloque de marcado ---- */
    #inicio {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: var(--cabeza);
    }

    /* ---- Ajusta el contenido principal (sin menú horizontal) ---- */

    #articulos section {
        padding: 0 var(--marg-lat) var(--tam-36);
        box-shadow: var(--somb-1);
    }

    .accesible {
        display: grid;
        grid-template-columns: repeat(3, minmax(3rem, 1fr));
        min-width: fit-content;
        column-gap: var(--tam-09);
        padding: 0 var(--tam-12);
        border: none;
        filter: grayscale(0) opacity(1);
    }

    .accesible:hover {
        filter: saturate(1.5);
    }
}

/* ======== Mobile (< 769px) ======== */
@media (max-width: 768px) {

    /* Ajustes de marcado */
    #inicio {
        --reserva-controles: calc(var(--cuadro) * 3.125 + var(--tam-12));
        height: calc(var(--cabeza) - var(--tam-12));
    }

    #marca {
        min-width: 0;
        max-height: 90%;
    }

    #signo {
        margin-left: var(--tam-06);
        transform: scale(.9) translateY(var(--tam-03));
    }

    /* El mismo nombre completo también en móvil; sin versión abreviada. */
    #nombre {
        text-wrap: balance;
    }

    /* Ajustes del pie para celulares 2026-09-10 */
    #institucional {
        --resguardo-inferior: var(--tam-12);
        padding-bottom: calc(var(--tam-12) + max(env(safe-area-inset-bottom, 0px), var(--resguardo-inferior)));
    }

    /* ---- Contenido ---- */
    #articulos {
        font-size: 120%;
        padding: 0;
    }

    #articulos h2 {
        font-size: var(--tam-h2);
    }

    #articulos p,
    #articulos li:not(.fases li),
    #articulos figcaption,
    #articulos .tarjeta p,
    #articulos .destacado p {
        font-size: 1.05em;
        line-height: 1.65;
    }

    #articulos ul li::before {
        left: calc(var(--tam-12) * 1.1);
        top: 0.1em;
    }

    #articulos .tarjeta,
    #articulos .destacado {
        font-size: 0.95em;
        padding: var(--tam-15) var(--tam-18);
    }

    #articulos .topicos {
        gap: var(--tam-18);
        grid-template-columns: 1fr;
        grid-auto-rows: unset;
    }

    #articulos .gap {
        margin: 1em 0;
        height: auto;
    }

    #articulos .al-pie li {
        font-size: 0.9em;
        line-height: 1.5;
        padding: var(--tam-09) var(--tam-06);
    }

    #articulos .al-pie li::before {
        width: 2.5ch;
    }

    /* Viñetas  */
    #articulos ul li::before {
        top: .25em !important;
        left: .25em !important;
        opacity: 1;
    }

    /* Condiciona el manejo contextual */
    sup.fn a,
    .al-pie a {
        touch-action: manipulation !important;
        pointer-events: auto !important;
    }

    /* Previene selección de texto en long press */
    sup.fn a {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* Previene selección en enlace */
    a, .fn a {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Lista de fases */
    ol.fases {
        background: transparent;
    }

    ol.fases li {
        font-size: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    ol.fases a {
        max-width: 100%;
        margin: 0;
        padding: 0;
        transform: translateX(4ch);
    }

    ol.fases li::before {
        left: calc(-1 * var(--tam-06));
    }

    /* Notas al pie emergentes */
    .al-pie-tt {
        font-size: calc(var(--tip-base) * 1.2);
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw;
    }

    .hamburgo {
        --alto-inicio: calc(var(--cabeza) / 2 - var(--tam-10));
        top: var(--alto-inicio);
    }

    /* Diferencias responsivas del menú principal */
    .lateral-deslizable {
        --menu-posicion: fixed;
        --menu-superior: calc(var(--cabeza) - var(--tam-12));
        --menu-ancho: 80vw;
        --menu-borde-superior: var(--borde);
        --menu-fondo-item: var(--gris-100);
        --menu-tipografia: 125%;
    }

    /* === Sin scrollspy === */
    #sig-nav {
        display: none;
    }

    #ir-arriba.visible .ir-arriba-btn {
        opacity: 0.5;
    }

    .ir-arriba-btn {
        width: var(--ir-arriba);
        height: var(--ir-arriba);
        opacity: 0.5;
    }

}

/* Detector de orientación landscape en móvil */
@media (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {

    /* Ocultar todo el contenido principal */
    body>*:not(#rotate-warning) {
        display: none !important;
    }

    /* Muestra mensaje de advertencia landscape */
    #rotate-warning {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--rotaras);
        z-index: 9999;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        text-align: center;
        animation: fadeIn 2s var(--bezier);
        overflow: hidden;
    }

    .rotate-message {
        display: flex;
        height: 100%;
        width: fit-content;
        flex-direction: column;
        align-items: center;
        gap: 2vh;
        justify-content: center;
        animation: fadeInUp 2s var(--bezier);
    }

    .rotate-icon {
        --diamet: var(--cabeza);
        display: inline-block;
        width: var(--diamet);
        height: var(--diamet);
        margin: var(--tam-24) auto;
        background-image: var(--rotador);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        animation: rotate 5s linear infinite;
    }

    .rotate-title {
        --grande: 7.5vh;
        font-family: "Oswald", sans-serif;
        font-size: var(--grande);
        font-weight: 600;
        color: var(--gris-100);
    }

    .rotate-text {
        font-size: calc(var(--grande) * .75);
        color: var(--gris-100);
        line-height: 1.2;
    }

    .rotate-small {
        font-size: calc(var(--grande) * .5);
        color: var(--gris-90);
        font-style: oblique;
        animation: blink 2.5s var(--bezier) infinite;
    }
}

/* ======== Mobile (≤ 400px) ======== */
/* 2026-09-010 */
@media (max-width: 400px) {
    #institucional {
        gap: 0;
        padding: var(--tam-06) 0;
    }

    #data-info, .btn-pdf {
        padding: var(--tam-04) var(--tam-09);
        max-width: var(--p50);
        transform: scale(.75);
    }
}

/* Cambio de altura de la cabecera: sólo propiedades que necesitan animarse. */
@media screen {
    #navegacion, #inicio {
        transition: height 240ms cubic-bezier(.22, 1, .36, 1),
            max-height 240ms cubic-bezier(.22, 1, .36, 1);
    }

    #signo {
        transition: height 240ms cubic-bezier(.22, 1, .36, 1);
    }

    #nombre {
        transition: font-size 240ms cubic-bezier(.22, 1, .36, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #navegacion, #inicio, #signo, #nombre {
        transition: none;
    }
}

/* Ajustar inmediatamente la geometría durante un cambio real de ancho.
   Las transiciones de scroll vuelven al terminar el redimensionamiento. */
html.is-resizing :is(#navegacion, #inicio, #signo, #nombre, #sig-nav,
    .hamburgo),
html.is-resizing .hamburgo::before,
html.is-resizing .hamburgo::after {
    transition: none !important;
}

/* Marca: giro breve al reducirse la cabecera */
.cabeza-reducida #signo {
    animation: entrada-signo 750ms ease-in-out both;
    transform-origin: center;
}

@keyframes entrada-signo {
    0% {
        rotate: y -90deg;
    }

    50% {
        rotate: y -45deg;
    }

    83% {
        rotate: y 15deg;
    }

    100% {
        rotate: y 0deg;
    }
}

/* Primer título de cada naipe: entrada lateral con rebote */
section.naipe>h2:first-of-type.is-stuck .naipe-titulo-texto,
section.naipe>h2:first-of-type.is-stuck::before {
    animation: entrada-titulo 1s var(--bezier);
}

@keyframes entrada-titulo {
    0% {
        translate: 32rem 0;
        opacity: .0;
    }

    50% {
        translate: 0 0;
        opacity: .5;
    }

    67% {
        translate: -.25em;
        opacity: .75;
    }

    75% {
        translate: 0 0;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cabeza-reducida #signo,
    section.naipe>h2:first-of-type.is-stuck .naipe-titulo-texto,
    section.naipe>h2:first-of-type.is-stuck::before {
        animation: none;
    }
}