/* Landing del Ciclo Semestral · Área E, Humanidades y Ciencias Jurídicas y
   Sociales — San Marcos.

   TODO cuelga de .lp-let. El marco del sitio inyecta en ESTE documento Bootstrap,
   akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: sus reglas conviven con
   las de aquí y, a igualdad de especificidad, ganan las suyas. De ahí el prefijo
   propio, el bloque de neutralización y los !important de la costura.

   DOS IDENTIDADES, Y NO SE MEZCLAN:

     · LA UNIVERSIDAD (--lp-uni-*): granate y dorado, idénticos en todas las
       landings de San Marcos.
     · LA CAMPAÑA (el resto): tinta violeta, crema de papel y terracota.

   El lenguaje es el de un libro y es exclusivo de esta landing: página oscura,
   serif en todo, capitulares, notas al margen, índice con puntos conductores,
   navegación lateral en lugar de barra, y fotografía en duotono en lugar de velada.
   Ninguna de las otras cuatro se compone así. */
.lp-let {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #7A0C2E;
    --lp-uni-claro: #A31D42;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-oro: #D3A85B;
    /* ── Paleta de la campaña ──────────────────────────────────────────── */
    --lp-papel: #1E1830;
    --lp-papel-claro: #262038;
    --lp-papel-hondo: #171223;
    --lp-tinta: #F0E7DA;
    --lp-tinta-suave: #B7ACC4;
    --lp-acento: #C9603F;
    --lp-acento-claro: #E08A66;
    --lp-acento-tinta: #1A0E09;
    --lp-verde: #8C9B69;
    --lp-filete: rgba(240, 231, 218, .16);
    --lp-filete-suave: rgba(240, 231, 218, .09);
    /* Serif del sistema en TODA la página: es la decisión tipográfica que marca el
       carácter. No pide ninguna descarga. */
    --lp-serif: Georgia, "Times New Roman", "Liberation Serif", serif;
    --lp-versal: Georgia, "Times New Roman", serif;
    --lp-ancho: 74rem;
    --lp-ancho-lectura: 38rem;
    margin: 0;
    background: var(--lp-papel);
    color: var(--lp-tinta);
    font-family: var(--lp-serif);
    line-height: 1.72;
    scroll-behavior: smooth;
}

/* Tema claro del sitio: esta landing nace oscura, así que aquí la variante es la
   contraria de lo habitual. Con el tema claro se convierte en papel crema con
   tinta violeta, conservando la misma composición. */
[data-tema="claro"] .lp-let {
    --lp-papel: #F6F1E7;
    --lp-papel-claro: #EFE8DA;
    --lp-papel-hondo: #E7DFCF;
    --lp-tinta: #241C33;
    --lp-tinta-suave: #5F5570;
    --lp-acento: #A8462A;
    --lp-acento-claro: #C9603F;
    --lp-acento-tinta: #FFFFFF;
    --lp-verde: #6B7A47;
    --lp-filete: rgba(36, 28, 51, .18);
    --lp-filete-suave: rgba(36, 28, 51, .1);
}

/* ═══ Costura con la cabecera del sitio ════════════════════════════════════
   El marco inserta su cabecera como hermano justo encima de la landing y deja un
   hueco entre las dos. Por ese hueco asomaba el fondo del cuerpo, que en el sitio
   es claro.

   El hueco no se suprime: se PINTA del color de la franja institucional, y así
   deja de distinguirse sea cual sea su origen. Las anulaciones se quedan porque
   recortan su altura cuando sí vienen de la cabecera.

   El granate va escrito y no como variable porque --lp-uni se declara en .lp-let y
   aquí se pinta su ancestro, que no la ve. */
body:has(> .lp-let) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #7A0C2E;
}

body > :has(+ .lp-let) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

    body > :has(+ .lp-let) > :last-child {
        margin-bottom: 0 !important;
    }

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   Una regla de elemento del sitio gana siempre a un color heredado: sin esto, el
   título tomaba el color de marca de la plataforma y la tipografía del sitio
   pisaba la serif. :where aporta cero especificidad, así que este bloque solo
   derrota a esos selectores y queda por debajo de las clases de más abajo. */
.lp-let :where(h1, h2, h3, h4, p, ul, ol, li, a, span, strong, em, small, label, summary, button, textarea, article, aside, figure, figcaption, nav) {
    color: inherit;
    font-family: inherit;
}

.lp-let__ancho {
    width: min(100% - 3rem, var(--lp-ancho));
    margin-inline: auto;
}

.lp-let svg {
    fill: currentColor;
}

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   Más contenida que en las otras landings: en una página que imita un libro, un
   bloque que sube de golpe rompe la ilusión. Solo se desvanece.

   El estado inicial se aplica únicamente cuando el guion ha marcado el documento:
   sin él la clase nunca se añade y todo se ve desde el principio. */
.lp-let--animada [data-revelar] {
    opacity: 0;
    transition: opacity .8s ease;
}

    .lp-let--animada [data-revelar].lp-let--visible {
        opacity: 1;
    }

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

    .lp-let--animada [data-revelar] {
        opacity: 1;
        transition: none;
    }
}

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-let__institucional {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-claro));
    color: var(--lp-uni-tinta);
    box-shadow: inset 0 -2px 0 var(--lp-uni-oro);
}

.lp-let__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0;
}

.lp-let__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid var(--lp-uni-oro);
    color: var(--lp-uni-oro);
}

    .lp-let__emblema svg {
        width: 1.3rem;
        height: 1.3rem;
    }

.lp-let__uni {
    margin: 0 auto 0 0;
    line-height: 1.3;
}

.lp-let__uni-nombre {
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

.lp-let__uni-lema {
    display: block;
    font-size: .74rem;
    font-style: italic;
    letter-spacing: .04em;
    color: var(--lp-uni-oro);
}

.lp-let__uni-sello {
    padding: .3rem 1rem;
    border: 1px solid var(--lp-uni-oro);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

/* ═══ Índice lateral ═══════════════════════════════════════════════════════
   La navegación de esta landing. Va pegada al margen izquierdo y marca el capítulo
   en el que va la lectura, como el índice abierto de un libro.

   Se muestra solo por encima de 75rem, que es donde sobra margen a la izquierda
   del contenedor: por debajo taparía el texto. */
.lp-let__indice {
    display: none;
}

@media (min-width: 75rem) {
    .lp-let__indice {
        display: block;
        position: fixed;
        top: 50%;
        left: 1.75rem;
        transform: translateY(-50%);
        z-index: 20;
        width: 12rem;
        padding: 1.25rem 1.25rem 1.25rem 1rem;
        border-left: 1px solid var(--lp-filete);
    }
}

.lp-let__indice-titulo {
    margin: 0 0 .9rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-let__indice-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: capitulo;
}

    .lp-let__indice-lista a {
        display: flex;
        gap: .6rem;
        padding: .32rem 0;
        font-size: .88rem;
        text-decoration: none;
        color: var(--lp-tinta-suave);
        transition: color .2s ease;
    }

        .lp-let__indice-lista a span {
            flex: 0 0 1.4rem;
            font-size: .74rem;
            letter-spacing: .06em;
            color: var(--lp-filete);
        }

        .lp-let__indice-lista a:hover {
            color: var(--lp-tinta);
        }

        /* El capítulo en curso: el guion pone esta clase al pasar por su sección. */
        .lp-let__indice-lista a.lp-let__indice--activo {
            color: var(--lp-acento-claro);
            font-style: italic;
        }

            .lp-let__indice-lista a.lp-let__indice--activo span {
                color: var(--lp-acento);
            }

.lp-let__indice-cuenta {
    margin: 1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--lp-filete);
    font-size: .78rem;
    font-style: italic;
    color: var(--lp-uni-oro);
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   Portadilla de volumen: filete doble arriba y abajo, antetítulo en versalitas,
   título a plena caja y epígrafe sangrado. Ni tarjetas ni columnas. */
.lp-let__portada {
    padding: 5rem 0 4rem;
    background: radial-gradient(45rem 30rem at 78% 0%, rgba(201, 96, 63, .14), transparent 62%), var(--lp-papel);
}

.lp-let__portada-caja {
    max-width: 52rem;
    padding: 2.5rem 0;
    border-top: 3px double var(--lp-filete);
    border-bottom: 3px double var(--lp-filete);
}

.lp-let__antetitulo {
    margin: 0 0 1.75rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--lp-acento-claro);
}

.lp-let__titulo {
    margin: 0 0 2rem;
    font-size: clamp(2.3rem, 5.6vw, 4.2rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--lp-tinta);
}

.lp-let__titulo-destacado {
    display: block;
    font-style: italic;
    color: var(--lp-acento-claro);
}

/* Epígrafe: sangrado, en cursiva y con su firma alineada a la derecha, como en la
   página que abre un capítulo. */
.lp-let__epigrafe {
    max-width: 30rem;
    margin: 0 0 2rem auto;
    padding-left: 1.25rem;
    border-left: 2px solid var(--lp-acento);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

.lp-let__epigrafe-firma {
    display: block;
    margin-top: .5rem;
    font-size: .76rem;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: right;
    color: var(--lp-filete);
}

.lp-let__entrada {
    max-width: var(--lp-ancho-lectura);
    margin: 0;
    font-size: 1.12rem;
    color: var(--lp-tinta-suave);
}

.lp-let__colofon {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lp-filete-suave);
    font-size: .86rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

/* ═══ Botones ══════════════════════════════════════════════════════════════
   Rectangulares, sin radio y con la etiqueta en versalitas espaciadas: el botón
   como una cartela impresa, no como un control de aplicación. */
.lp-let__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.lp-let__acciones--centro {
    justify-content: center;
}

.lp-let__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .85rem 1.9rem;
    border: 1px solid var(--lp-acento);
    background: var(--lp-acento);
    color: var(--lp-acento-tinta);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

    .lp-let__accion:hover {
        background: var(--lp-acento-claro);
        border-color: var(--lp-acento-claro);
        color: var(--lp-acento-tinta);
    }

    .lp-let__accion:focus-visible {
        outline: 3px solid var(--lp-uni-oro);
        outline-offset: 3px;
    }

.lp-let__accion--linea {
    background: transparent;
    border-color: var(--lp-filete);
    color: var(--lp-tinta);
}

    .lp-let__accion--linea:hover {
        background: transparent;
        border-color: var(--lp-acento-claro);
        color: var(--lp-acento-claro);
    }

.lp-let__accion--indice {
    display: flex;
    margin-top: 1rem;
    padding: .6rem 1rem;
    font-size: .7rem;
    letter-spacing: .1em;
}

/* Botón para pantalla estrecha. Aparece cuando la portada sale de pantalla y se
   retira al llegar al colofón, donde el propio texto ya ofrece el enlace.

   Va en la esquina inferior IZQUIERDA: la derecha es la de la mascota del sitio,
   que se dibuja por encima y lo taparía. */
.lp-let__flotante {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 30;
    display: none;
    padding: .8rem 1.4rem;
    background: var(--lp-acento);
    color: var(--lp-acento-tinta);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .4);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .3s ease, transform .3s ease;
}

@media (max-width: 74.99rem) {
    .lp-let--con-flotante .lp-let__flotante {
        display: inline-flex;
    }
}

.lp-let__flotante--visible {
    opacity: 1;
    transform: none;
}

/* ═══ Capítulos ════════════════════════════════════════════════════════════ */
.lp-let__capitulo {
    padding: 4.5rem 0;
    border-top: 1px solid var(--lp-filete-suave);
}

.lp-let__capitulo--claro {
    background: var(--lp-papel-claro);
}

.lp-let__capitulo-numero {
    margin: 0 0 .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--lp-acento-claro);
}

.lp-let__h2 {
    margin: 0 0 1.75rem;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--lp-tinta);
}

.lp-let__h2--cierre {
    font-style: italic;
}

.lp-let__texto {
    margin: 0 0 1.25rem;
    font-size: 1.02rem;
}

.lp-let__texto--guia {
    max-width: var(--lp-ancho-lectura);
    font-style: italic;
    color: var(--lp-tinta-suave);
}

.lp-let__texto--cierre {
    max-width: 34rem;
    margin-inline: auto;
    color: var(--lp-tinta-suave);
}

/* Capitular: la letra que abre el capítulo, en el color de acento y ocupando tres
   líneas. Es un recurso de libro que ninguna otra landing usa. */
.lp-let__texto--capitular::first-letter {
    float: left;
    margin: .35rem .6rem 0 0;
    font-size: 3.6em;
    line-height: .78;
    font-weight: 700;
    color: var(--lp-acento);
}

.lp-let__pie-capitulo {
    max-width: var(--lp-ancho-lectura);
    margin: 2rem 0 0;
    font-size: .9rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

/* ═══ Contrapunto ══════════════════════════════════════════════════════════
   Sin el guion, los dos argumentos de cada dilema se ven a la vez: la sección se
   lee entera, solo que sin el juego de elegir. */
.lp-let__contrapunto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

@media (min-width: 62rem) {
    .lp-let__contrapunto {
        grid-template-columns: minmax(0, 1fr) 15rem;
        align-items: start;
    }
}

.lp-let__dilema {
    padding: 1.75rem 0;
    border-top: 1px solid var(--lp-filete-suave);
}

    .lp-let__dilema:first-child {
        border-top: 0;
        padding-top: 0;
    }

.lp-let__dilema-pregunta {
    margin: 0 0 1.25rem;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-style: italic;
    color: var(--lp-tinta);
}

.lp-let__posturas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .75rem;
}

.lp-let__postura {
    display: block;
    padding: 1rem 1.1rem;
    background: transparent;
    border: 1px solid var(--lp-filete);
    color: var(--lp-tinta);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

    .lp-let__postura:hover {
        border-color: var(--lp-acento);
    }

    .lp-let__postura:focus-visible {
        outline: 3px solid var(--lp-acento-claro);
        outline-offset: 2px;
    }

/* La postura elegida se marca con el filete grueso además del color: el estado no
   depende solo del tono. */
.lp-let__postura--elegida {
    border-color: var(--lp-acento);
    border-left-width: 4px;
    background: rgba(201, 96, 63, .12);
}

.lp-let__postura-nombre {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
}

.lp-let__postura-pista {
    display: block;
    margin-top: .2rem;
    font-size: .86rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

.lp-let__argumentos {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.lp-let__argumento {
    margin: 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--lp-filete);
    font-size: .98rem;
    color: var(--lp-tinta-suave);
}

    .lp-let__argumento span {
        display: block;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--lp-tinta-suave);
    }

/* Con el guion vivo, los argumentos nacen ocultos y solo se muestra el CONTRARIO
   al elegido: es el ejercicio que da nombre al capítulo. */
.lp-let--con-contrapunto .lp-let__argumento {
    display: none;
}

.lp-let--con-contrapunto .lp-let__argumento--revelado {
    display: block;
    border-left-color: var(--lp-verde);
    animation: lp-let-aparece .4s ease;
}

    .lp-let--con-contrapunto .lp-let__argumento--revelado span {
        color: var(--lp-verde);
    }

@keyframes lp-let-aparece {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.lp-let__marcador {
    padding: 1.5rem;
    border: 1px solid var(--lp-filete);
    background: var(--lp-papel-hondo);
}

@media (min-width: 62rem) {
    .lp-let__marcador {
        position: sticky;
        top: 2rem;
    }
}

.lp-let__marcador-rotulo {
    margin: 0;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-let__marcador-cifra {
    margin: .3rem 0 .75rem;
    font-size: 1.8rem;
    color: var(--lp-acento-claro);
    font-variant-numeric: tabular-nums;
}

.lp-let__marcador-texto {
    margin: 0 0 1.25rem;
    font-size: .88rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

.lp-let__marcador .lp-let__accion {
    display: flex;
}

/* ═══ Página anotada ═══════════════════════════════════════════════════════
   Columna de lectura estrecha con las notas en el margen derecho, como un libro
   anotado. En pantalla estrecha las notas bajan y se convierten en un bloque
   aparte, no desaparecen. */
.lp-let__anotado {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@media (min-width: 62rem) {
    .lp-let__anotado {
        grid-template-columns: minmax(0, var(--lp-ancho-lectura)) 14rem;
        gap: 3rem;
    }
}

.lp-let__nota-margen {
    margin: 0 0 1.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--lp-acento);
    font-size: .86rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

    .lp-let__nota-margen span {
        display: block;
        font-style: normal;
        font-weight: 700;
        letter-spacing: .1em;
        color: var(--lp-acento-claro);
    }

/* ═══ Lámina en duotono ════════════════════════════════════════════════════
   La fotografía se tiñe con el color de la página en lugar de cubrirse con un
   velo: el fondo violeta se mezcla en modo luminosidad, así que la imagen aporta
   su luz y su textura pero no su color. Es el tratamiento propio de esta landing.

   Si el archivo faltara queda el fondo teñido y el pie sigue teniendo sentido. */
.lp-let__lamina {
    margin: 0;
    padding: 0 0 4.5rem;
    background: var(--lp-papel);
}

.lp-let__lamina-imagen {
    height: clamp(13rem, 32vw, 24rem);
    background-color: var(--lp-acento);
    background-image: url("imagenes/biblioteca.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    border-block: 1px solid var(--lp-filete);
    /* Baja el contraste de la imagen para que el pie y el texto de alrededor
       sigan siendo lo que se lee primero. */
    opacity: .82;
}

.lp-let__lamina-pie {
    max-width: 42rem;
    margin-top: 1rem;
    font-size: .9rem;
    font-style: italic;
    color: var(--lp-tinta-suave);
}

/* ═══ Catálogo de carreras ═════════════════════════════════════════════════
   Fichas de catálogo de biblioteca: signatura arriba, nombre, descripción y nota
   al pie. La perforación inferior es el guiño a la ficha de cartón. */
.lp-let__catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.lp-let__ficha {
    position: relative;
    padding: 1.5rem 1.5rem 2.25rem;
    background: var(--lp-papel-hondo);
    border: 1px solid var(--lp-filete);
}

    /* El agujero de la ficha, centrado abajo. */
    .lp-let__ficha::after {
        content: "";
        position: absolute;
        bottom: .9rem;
        left: 50%;
        transform: translateX(-50%);
        width: .7rem;
        height: .7rem;
        border-radius: 50%;
        border: 1px solid var(--lp-filete);
    }

.lp-let__ficha-signatura {
    margin: 0 0 .5rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--lp-uni-oro);
}

.lp-let__ficha-nombre {
    margin: 0 0 .6rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--lp-filete-suave);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--lp-tinta);
}

.lp-let__ficha-texto {
    margin: 0 0 .75rem;
    font-size: .93rem;
    color: var(--lp-tinta-suave);
}

.lp-let__ficha-nota {
    margin: 0;
    font-size: .82rem;
    font-style: italic;
    color: var(--lp-verde);
}

/* ═══ Temario como índice ══════════════════════════════════════════════════
   Puntos conductores entre el título y la semana, como en el índice de un libro.
   Los puntos son un fondo repetido y no caracteres escritos: así se estiran solos
   al cambiar el ancho y no se leen en voz alta. */
.lp-let__temario {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    counter-reset: entrada;
}

.lp-let__entrada-indice {
    counter-increment: entrada;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: .5rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--lp-filete-suave);
}

.lp-let__entrada-titulo {
    font-size: 1.02rem;
}

    .lp-let__entrada-titulo::before {
        content: counter(entrada, upper-roman) ". ";
        color: var(--lp-tinta-suave);
    }

.lp-let__entrada-puntos {
    height: 1px;
    align-self: end;
    margin-bottom: .3rem;
    background-image: radial-gradient(circle, var(--lp-filete) 1px, transparent 1px);
    background-size: .45rem 1px;
    background-repeat: repeat-x;
}

.lp-let__entrada-semana {
    font-size: .88rem;
    letter-spacing: .06em;
    color: var(--lp-acento-claro);
    font-variant-numeric: tabular-nums;
}

.lp-let__entrada-indice--final .lp-let__entrada-titulo {
    font-style: italic;
    color: var(--lp-uni-oro);
}

/* ═══ Decálogo del método ══════════════════════════════════════════════════
   Numeración romana en el margen: una columna estrecha de lectura, no una rejilla
   de tarjetas. */
.lp-let__decalogo {
    list-style: none;
    counter-reset: punto;
    max-width: 44rem;
    margin: 2rem 0 0;
    padding: 0;
}

    .lp-let__decalogo li {
        counter-increment: punto;
        position: relative;
        padding: 1.5rem 0 1.5rem 4rem;
        border-top: 1px solid var(--lp-filete-suave);
    }

        .lp-let__decalogo li::before {
            content: counter(punto, upper-roman);
            position: absolute;
            left: 0;
            top: 1.5rem;
            font-size: 1.2rem;
            letter-spacing: .06em;
            color: var(--lp-acento);
        }

        .lp-let__decalogo li p {
            margin: 0;
            font-size: .98rem;
            color: var(--lp-tinta-suave);
        }

.lp-let__decalogo-titulo {
    margin: 0 0 .4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--lp-tinta);
}

/* ═══ Notas al pie ═════════════════════════════════════════════════════════
   details y summary: se despliegan sin JavaScript. La numeración va en volada,
   como una llamada de nota. */
.lp-let__notas {
    counter-reset: nota;
    max-width: 46rem;
    margin-top: 2rem;
    border-top: 1px solid var(--lp-filete);
}

.lp-let__nota {
    counter-increment: nota;
    border-bottom: 1px solid var(--lp-filete-suave);
}

    .lp-let__nota summary {
        position: relative;
        padding: 1.05rem 2.5rem 1.05rem 2.25rem;
        font-size: 1rem;
        color: var(--lp-tinta);
        cursor: pointer;
        list-style: none;
    }

        .lp-let__nota summary::-webkit-details-marker {
            display: none;
        }

        /* La llamada de nota, en volada y a la izquierda. */
        .lp-let__nota summary::before {
            content: counter(nota);
            position: absolute;
            left: 0;
            top: .85rem;
            font-size: .78rem;
            color: var(--lp-acento-claro);
        }

        .lp-let__nota summary::after {
            content: "+";
            position: absolute;
            right: .4rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.3rem;
            line-height: 1;
            color: var(--lp-acento-claro);
        }

        .lp-let__nota summary:focus-visible {
            outline: 3px solid var(--lp-acento-claro);
            outline-offset: -3px;
        }

    .lp-let__nota[open] summary::after {
        content: "−";
    }

    .lp-let__nota p {
        margin: 0;
        padding: 0 2.5rem 1.2rem 2.25rem;
        font-size: .95rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Colofón ══════════════════════════════════════════════════════════════
   Cierre centrado sobre el papel hondo, como la última página de un volumen. */
.lp-let__cierre {
    padding: 5rem 0;
    background: var(--lp-papel-hondo);
    border-top: 3px double var(--lp-filete);
    text-align: center;
}

.lp-let__cierre-caja {
    max-width: 46rem;
}

.lp-let__cierre-marca {
    margin: 0 0 1rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--lp-acento-claro);
}

.lp-let__nota-legal {
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lp-filete-suave);
    font-size: .78rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Adaptación a pantallas estrechas ═════════════════════════════════════ */
@media (max-width: 35.99rem) {
    .lp-let__capitulo {
        padding: 3.25rem 0;
    }

    .lp-let__portada {
        padding: 3rem 0;
    }

    .lp-let__institucional-contenido {
        justify-content: center;
        text-align: center;
    }

    .lp-let__uni {
        margin: 0;
    }

    .lp-let__accion {
        width: 100%;
    }

    .lp-let__flotante {
        width: auto;
    }

    /* El epígrafe deja de ir sangrado a la derecha: en una columna estrecha se
       leería como un bloque descolgado. */
    .lp-let__epigrafe {
        margin-left: 0;
    }

    /* La semana baja a su propia línea y los puntos conductores sobran. */
    .lp-let__entrada-indice {
        grid-template-columns: minmax(0, 1fr);
        gap: .15rem;
    }

    .lp-let__entrada-puntos {
        display: none;
    }

    .lp-let__decalogo li {
        padding-left: 2.75rem;
    }

    .lp-let__ficha,
    .lp-let__marcador {
        padding: 1.25rem;
    }

    .lp-let__ficha {
        padding-bottom: 2rem;
    }
}