/* Plum Notes: el blog (prefijo pn-)
   Portada: la lista de notas a oscuras; la que miras se enciende (la luz baja por su canto) y las demás quedan en penumbra.
   Artículo: cabecera de noche con la foto fundida, lectura en claro u oscuro según el dispositivo (sobre la base de v3-legal),
   citas, notas destacadas y un cierre con el siguiente paso */

/* Relleno de la luz animable con CSS (el canto de las filas y las tarjetas), como las puertas de servicios */
@property --fill {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0px;
}

/* ---------- Portada ---------- */

/* Tamaños del titular y del texto de la portada, en un solo sitio: la cabecera los usa para alinear el texto con el titular */
.pn { --pn-title: clamp(4.6rem, 11.5vw, 11.5rem); --pn-lead: clamp(1rem, 1.1vw, 1.12rem); }

/* Escena propia como el resto de portadas: el escritorio junto a la ventana abierta al campo de lavanda (04-11-2026), con la
   brisa en bucle (flores, polvo en el haz de luz y, a los 3 s, una ráfaga que mueve el trapo, la hoja y la pluma). El texto,
   en una columna sobre la pared oscura de la izquierda; la cámara avanza hacia el cuaderno al bajar (v3-cover) y en móvil
   la foto va arriba, centrada en la mesa (--pn-stack-x es la misma posición que --cover-stack-pos, como número) */
.pn-scene { --cover-focus: 62% 84%; --cover-stack-pos: 64% 50%; --pn-stack-x: .64; --cover-stack-pad: 60svh; --cover-stack-h: 68svh; background: var(--carbon); }
/* El vídeo va encima de la foto, del mismo tamaño y recorte; aparece cuando ya pinta (su primer fotograma es la foto) */
.pn-scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.pn-scene__video.is-on { opacity: 1; }
@media (max-width: 820px) {
    .v3-cover--stack .pn-scene__video { object-position: var(--cover-stack-pos, 50% 50%); }
    /* Móvil vertical: el vídeo es solo la mesa (x 633-2422 de 2752, todo el alto). La foto se escala a la altura de la caja
       (--cover-stack-h) y se coloca en --pn-stack-x; el recorte va en el mismo sitio en que está esa parte de la foto */
    .pn-scene__video.is-recorte {
        --pn-foto-w: calc(var(--cover-stack-h, 68svh) * 1.791667);
        right: auto;
        left: calc((100% - var(--pn-foto-w)) * var(--pn-stack-x) + var(--pn-foto-w) * .230015);
        width: calc(var(--pn-foto-w) * .650073);
        max-width: none;
        object-fit: fill;
    }
}
.pn-scene__content { max-width: min(46rem, 56vw); }
.pn-scene .pn-head__side { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.pn-scene .pn-head__lead { color: rgba(245, 244, 241, .78); }
/* El menú (modo diferencia) cae sobre el ventanal, claro: un velo en la esquina de arriba a la derecha para que se lea */
@media (min-width: 821px) {
    .pn-scene .v3-cover__media::after {
        background:
            radial-gradient(ellipse 30% 62% at 100% 0%, rgba(17, 17, 17, .72) 0%, rgba(17, 17, 17, .5) 55%, transparent 100%),
            linear-gradient(90deg, rgba(17, 17, 17, .78) 0%, rgba(17, 17, 17, .38) 40%, transparent 66%),
            linear-gradient(0deg, rgba(17, 17, 17, .75) 0%, transparent 30%),
            linear-gradient(180deg, rgba(17, 17, 17, .35) 0%, transparent 22%);
    }
}

.pn-head__title { margin: 0; font-family: var(--serif); font-size: var(--pn-title); font-weight: 300; letter-spacing: -.045em; line-height: .9; }
.pn-head__title .v3-kicker { margin-bottom: 2.2rem; letter-spacing: .3em; }
.pn-head__title em { color: var(--ciruela-luz); font-style: italic; font-weight: 300; }
/* La línea que entra recorta por arriba: con este interlineado tan corto se comía la parte alta de la P */
.pn-head__title .v3-line { margin-top: -.14em; padding-top: .14em; }
/* El icono de Plum Notes junto a su nombre (libro de marca: en negativo, hueso, sobre oscuro y sobre fotos; pedido por el
   usuario el 31-10-2026). Al entrar el titular escribe como en el menú: la pluma recorre el trazo y la tinta sale detrás
   (pnPen / pnInk de mobile-menu.css, mismos fotogramas). El hueco de la pluma recorta la ciruela con una máscara, así vale
   sobre cualquier fondo. Sale de plum-notes-escribe.svg; la ciruela asienta en la línea base y la tinta queda debajo */
.pn-head__icon { display: inline-block; width: .771em; height: .82em; margin-right: .16em; vertical-align: -.071em; overflow: visible; }
.pn-head__icon > path { fill: var(--hueso); }
.is-lit .pn-head__icon .pn-pen { animation: pnPen 1.15s linear 1.25s both; }
.is-lit .pn-head__icon .pn-ink { animation: pnInk 1.15s linear 1.25s both; }
.pn-head__lead { max-width: 31rem; margin: 0; color: rgba(245, 244, 241, .72); font-size: var(--pn-lead); font-weight: 300; line-height: 1.7; }

.pn-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }

/* El texto de la derecha empieza a la altura del titular (03-11-2026, el usuario: no estaba alineado con él), como en las
   cabeceras de sección: su primera línea, a la altura de la P de «Plum». Antes se alineaba por abajo con la caja del
   titular y caía en un sitio distinto en cada ancho (33 px por encima de «Plum» a 1024; los filtros, 49 px por debajo de
   «Notes.» a 1440). Baja el pretítulo (una línea de .66rem × 1,45) y su margen (2,2rem), lo que hay del alto de línea del
   titular a la tinta de la P (0,04 de su tamaño menos 1,5 px) y sube lo mismo del texto (0,44 del suyo). Medido de 1024
   a 2560 px con la letra real */
.pn-head > .pn-head__side { margin-top: calc(.66rem * 1.45 + 2.2rem + .04 * var(--pn-title) - 1.5px - .44 * var(--pn-lead)); }

.pn-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid rgba(245, 244, 241, .18);
    border-radius: 999px;
    color: rgba(245, 244, 241, .72);
    background: transparent;
    font: 300 .85rem/1.2 var(--sans);
    cursor: pointer;
    transition: border-color .5s ease, background-color .5s ease, color .5s ease;
}

.pn-chip small { color: rgba(245, 244, 241, .4); font-size: .7rem; font-variant-numeric: tabular-nums; }
html:not(.is-touch) .pn-chip:hover { border-color: rgba(245, 244, 241, .4); }
.pn-chip[aria-pressed="true"] { border-color: var(--ciruela-luz); color: var(--hueso); background: rgba(131, 19, 108, .35); }
.pn-chip[aria-pressed="true"] small { color: rgba(245, 244, 241, .7); }
.pn-chip:focus-visible { outline: 1px solid rgba(var(--luz), .8); outline-offset: 2px; }

/* La nota destacada */
.pn-featured { padding: 0 var(--gutter) clamp(4rem, 9vh, 6rem); background: var(--carbon); }
.pn-featured.is-hidden { display: none; }

.pn-featured__link {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding-top: clamp(2.5rem, 6vh, 4rem);
    border-top: 1px solid rgba(245, 244, 241, .12);
}

.pn-featured__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.pn-featured__media .v3-slot { transition: transform 1.6s var(--ease-out), filter 1.2s ease; filter: brightness(.82); }
html:not(.is-touch) .pn-featured__link:hover .v3-slot,
.pn-featured__link:focus-visible .v3-slot { transform: scale(1.03); filter: none; }

.pn-featured__body { display: grid; gap: 1.1rem; justify-items: start; }
.pn-featured__tag { display: flex; align-items: baseline; gap: .8rem; color: rgba(var(--luz), .85); font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.pn-featured__tag b { color: rgb(var(--luz-warm)); font-family: var(--serif); font-size: 1.15rem; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.pn-featured__title { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.05; }
.pn-featured__desc { max-width: 32rem; color: rgba(245, 244, 241, .66); font-size: .98rem; font-weight: 300; line-height: 1.7; }

/* Meta y "leer" compartidos por la destacada, las filas y las tarjetas */
.pn-card__meta,
.pn-row__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; color: rgba(245, 244, 241, .5); font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.pn-card__meta span:first-child,
.pn-row__meta span:first-child { color: rgba(var(--luz), .85); }

.pn-card__go { display: inline-flex; align-items: center; gap: .7rem; margin-top: .4rem; color: var(--hueso); font-size: .82rem; font-weight: 500; }
.pn-card__go svg { width: 1rem; height: 1rem; transition: transform .8s var(--ease-curtain); }
html:not(.is-touch) a:hover .pn-card__go svg,
a:focus-visible .pn-card__go svg { transform: translateX(.4rem); }

/* La lista: la nota que miras se enciende y las demás quedan en penumbra */
.pn-all { padding: 0 var(--gutter) clamp(6rem, 13vh, 9rem); background: var(--carbon); }
.pn-list { margin: 0; padding: 0; border-top: 1px solid rgba(245, 244, 241, .12); list-style: none; counter-reset: pn; }
.pn-row { border-bottom: 1px solid rgba(245, 244, 241, .12); transition: opacity var(--glow-dur) var(--glow-ease); }
.pn-row.is-hidden { display: none; }
html:not(.is-touch) .pn-list:has(.pn-row:hover) .pn-row:not(:hover),
html.is-touch .pn-list:has(.pn-row.is-focus) .pn-row:not(.is-focus) { opacity: .45; }

.pn-row__link {
    position: relative;
    display: grid;
    grid-template-columns: 5.4rem minmax(0, 1fr) minmax(0, .8fr) clamp(9rem, 11vw, 13rem) auto;
    grid-template-rows: auto auto;
    gap: .7rem 2.5rem;
    align-items: baseline;
    padding: 2.2rem 0 2.2rem 1.6rem;
}

/* El canto de la fila: la luz baja por él al encenderla (mismo ritmo en todas sus partes). Se llena hasta el 100 %:
   así su final se funde dentro de la fila, igual que su principio, y nunca se corta en el borde */
.pn-row__edge,
.pn-card__edge { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; }
.pn-row__edge .v3-beam,
.pn-card__edge .v3-beam { --fill: 0%; transition: --fill var(--glow-dur) var(--glow-ease); }
html:not(.is-touch) .pn-row:hover .v3-beam,
.pn-row.is-focus .v3-beam,
.pn-row__link:focus-visible .v3-beam,
html:not(.is-touch) .pn-card:hover .v3-beam,
.pn-card.is-focus .v3-beam,
.pn-card__link:focus-visible .v3-beam { --fill: 100%; }

.pn-row__n { grid-row: 1 / span 2; color: rgba(245, 244, 241, .56); font-family: var(--serif); font-size: 1.1rem; font-style: italic; white-space: nowrap; transition: color var(--glow-dur) var(--glow-ease); }
.pn-row__nota { display: none; }
.pn-row__meta { grid-column: 2; }
.pn-row__title { grid-column: 2; font-family: var(--serif); font-size: clamp(1.5rem, 2.3vw, 2.2rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.12; transition: transform var(--glow-dur) var(--glow-ease); }
.pn-row__desc { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: rgba(245, 244, 241, .58); font-size: .92rem; font-weight: 300; line-height: 1.65; }
.pn-row__go { grid-column: 5; grid-row: 1 / span 2; align-self: center; width: 1.1rem; height: 1.1rem; color: rgba(245, 244, 241, .5); transition: transform var(--glow-dur) var(--glow-ease), color var(--glow-dur) var(--glow-ease); }

/* Miniaturas: en penumbra, como la lista; se encienden con la luz de su fila o su tarjeta */
.pn-row__media,
.pn-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #1a191f; }
.pn-row__media { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
.pn-card__media { margin-bottom: .5rem; aspect-ratio: 16 / 9; }
.pn-row__media img,
.pn-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.72) saturate(.85);
    transform: scale(1.001);
    transition: filter var(--glow-dur) var(--glow-ease), transform 1.6s var(--ease-out);
}
html:not(.is-touch) .pn-row:hover .pn-row__media img,
.pn-row.is-focus .pn-row__media img,
.pn-row__link:focus-visible .pn-row__media img,
html:not(.is-touch) .pn-card:hover .pn-card__media img,
.pn-card.is-focus .pn-card__media img,
.pn-card__link:focus-visible .pn-card__media img { filter: none; transform: scale(1.04); }

html:not(.is-touch) .pn-row:hover .pn-row__n,
.pn-row.is-focus .pn-row__n { color: rgba(var(--luz), .9); }
html:not(.is-touch) .pn-row:hover .pn-row__title,
.pn-row.is-focus .pn-row__title { transform: translateX(.4rem); }
html:not(.is-touch) .pn-row:hover .pn-row__go,
.pn-row.is-focus .pn-row__go { color: rgb(var(--luz-core)); transform: translateX(.4rem); }
.pn-row__link:focus-visible { outline: 1px solid rgba(var(--luz), .6); outline-offset: 4px; }

.pn-empty { margin: 2rem 0 0; color: rgba(245, 244, 241, .5); font-family: var(--serif); font-size: 1.2rem; font-style: italic; }

/* ---------- La nota que falta: la mesa del final ----------
   La portada avanza hacia el escritorio; aquí una película ligada al scroll sale al atardecer y funde con la foto de la mesa, donde la nota
   siguiente a la última publicada ya está escrita, y la cámara se acerca hasta poder rellenarla. Al enviar se pasa la hoja y debajo está la
   respuesta, con su matasellos. Todo se mide en --u (el renglón) y las páginas se colocan sobre las de la foto con su perspectiva (notes-v2.js).
   Lo primero es la versión sin JavaScript: un formulario sobre papel, sin foto; el resto cuelga de .pn-desk, que pone notes-v2.js */
.pn-ask {
    --menu: 12.75rem; /* el menú fijo de la derecha: el cuaderno se centra, pero el menú solo pisa su margen, nunca el texto */
    --u: clamp(1.7rem, min(3.7svh, (100vw - var(--gutter) - var(--menu)) / 37.5), 2.9rem);
    --papel: #e4c4a4;
    --tinta: #24121f;
    --tinta-2: #3a2130;
    --tinta-3: #4a2d3c;
    --sombra: 66, 34, 72;
    --v3-field-text: var(--tinta);
    position: relative;
    background: var(--carbon);
}
.pn-ask__stage { position: relative; display: grid; place-items: center; min-height: 100svh; padding: calc(var(--u) * 1.8) var(--gutter) calc(var(--u) * 2.6); overflow: clip; background: #1d120d; }
.pn-desk__world { display: contents; }
.pn-ask .pn-desk__photo, .pn-ask .pn-desk__quill, .pn-ask .pn-desk__film, .pn-ask .pn-desk__shade, .pn-ask .pn-desk__fade, .pn-ask .pn-luz, .pn-ask .pn-matasellos, .pn-ask .pn-trazo { display: none; }
.pn-book { --w: calc(var(--u) * 37.5); position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: var(--w); max-width: 100%; font-size: calc(var(--u) / 2); }
.pn-page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(var(--u) * 22.5);
    min-width: 0;
    padding: calc(var(--u) * 1.5) calc(var(--u) * 2) calc(var(--u) * 1.5);
    color: var(--tinta);
    background-color: var(--papel);
}
.pn-page > * { position: relative; z-index: 1; }

/* Encabezado y textos de la página */
.pn-page__head { display: flex; align-items: center; gap: .55em; margin: 0; color: var(--tinta-2); font-size: .68em; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.pn-page__head img { width: 1.7em; height: auto; }
.pn-page__head b { font-weight: 600; }
.pn-page__head--right { justify-content: flex-end; }
.pn-page__intro { margin-top: calc(var(--u) * 2.6); }
.pn-page .v3-title { max-width: none; margin: 0; color: var(--tinta); font-size: 3.5em; letter-spacing: -.03em; line-height: 1; text-wrap: balance; }
.pn-page .v3-title em { display: block; color: var(--ciruela); }
.pn-page .v3-body { max-width: 25em; margin-top: 1.5em; color: var(--tinta-2); font-size: 1.02em; line-height: 1.6; }
.pn-page__foot { margin: auto 0 0; padding-top: 1em; color: var(--tinta-2); font-family: var(--serif); font-size: 1.28em; font-style: italic; font-weight: 300; line-height: 1.2; }
.pn-page__foot b { font-style: normal; font-weight: 400; font-variant-numeric: lining-nums; }
.pn-page__foot [data-pn-who] { color: var(--ciruela); }

/* El formulario, sobre el papel: las piezas de .v3-form, en tinta. Letra de escribir y renglones de --u */
.pn-form { --rule: rgba(var(--sombra), .24); --label: 1.3em; position: relative; z-index: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.5) var(--u); margin-top: calc(var(--u) * 2.2); padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pn-form label { min-width: 0; }
.pn-form label > span:not(.contact-form__field-error) { top: 0; color: var(--tinta-2); font: italic 300 var(--label) / var(--u) var(--serif); }
.pn-form input,
.pn-form textarea { display: block; height: var(--u); padding: 0; border: 0; color: var(--tinta); caret-color: var(--ciruela); font: italic 300 var(--label) / var(--u) var(--serif); }
.pn-form input { box-shadow: inset 0 -1px 0 var(--rule); transition: box-shadow .5s ease; }
/* Renglones del campo largo: van con el texto si se escribe más de lo que cabe */
.pn-form textarea { height: calc(var(--u) * 8); min-height: 0; overflow-y: auto; resize: none; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--u) - 1px), var(--rule) calc(var(--u) - 1px) var(--u)) 0 0 / 100% var(--u) local; scrollbar-width: thin; scrollbar-color: rgba(var(--sombra), .3) transparent; }
.pn-form input:focus, .pn-form textarea:focus { border: 0; box-shadow: inset 0 -1px 0 var(--rule); }
.pn-form label:focus-within > span:not(.contact-form__field-error),
.pn-form label:has(input:not(:placeholder-shown)) > span:not(.contact-form__field-error),
.pn-form label:has(textarea:not(:placeholder-shown)) > span:not(.contact-form__field-error) {
    color: var(--ciruela);
    font-family: var(--sans);
    font-style: normal;
    transform: translateY(calc(var(--u) * -.72)) scale(.5);
}
/* La línea que se traza al entrar en un campo, como un trazo de pluma, de izquierda a derecha */
.pn-form label::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) - 1px); height: 1px; background: linear-gradient(90deg, var(--ciruela), rgba(131, 19, 108, .5)); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); pointer-events: none; }
.pn-form label:focus-within::after { transform: scaleX(1); }
.pn-form__notes::after { display: none; }
.pn-form label.is-invalid input, .pn-form label.is-invalid textarea { --rule: rgba(160, 31, 58, .42); }
.pn-form label.is-invalid > span:not(.contact-form__field-error) { color: #a01f3a; }
.pn-form .contact-form__field-error { position: absolute; top: calc(var(--u) + .3em); left: 0; margin: 0; color: #a01f3a; font-size: .8em; font-weight: 500; }
.pn-form__notes .contact-form__field-error { top: calc(var(--u) * 8 + .3em); }
.pn-form .v3-form__foot { flex-direction: column; align-items: flex-start; gap: .7em; margin-top: calc(var(--u) * .1); }
.pn-form .v3-form__promise { color: var(--tinta-2); font-size: .8em; letter-spacing: .02em; line-height: 1.55; }
.pn-form .v3-form__promise span { color: var(--tinta-3); }
.pn-form .v3-form__promise a { color: var(--ciruela); text-decoration: underline; text-decoration-color: rgba(131, 19, 108, .4); text-underline-offset: .2em; }

/* El botón común, sobre papel: la cortina pasa a tinta (la de hueso no se vería) */
.pn-form .v3-button { min-height: calc(var(--u) * 1.6); padding-inline: 1.7em; box-shadow: 0 .9em 1.8em -.9em rgba(131, 19, 108, .85); }
.pn-form .v3-button__curtain { background: var(--tinta); }
:where(html:not(.is-touch)) .pn-form .v3-button:hover,
.pn-form .v3-button:focus-visible { color: var(--hueso); box-shadow: 0 .9em 1.8em -.9em rgba(44, 24, 48, .7); }
.pn-form .v3-button:focus-visible { outline-color: var(--ciruela); }

/* Mientras envía y si falla: el aviso común, en tinta */
/* El aviso cabe en la página: ocupa el sitio de la promesa y lo que queda abajo, y el cuaderno no cambia de alto */
.pn-form.is-trouble .v3-form__promise { display: none; }
.pn-form .v3-trouble { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: calc(var(--u) * -.9); padding-top: calc(var(--u) * .5); }
.pn-form .v3-trouble__icon { display: none; }
.pn-form .v3-trouble__title { font-size: 1.3em; }
.pn-form .v3-trouble__body { margin-top: .2em; font-size: .8em; line-height: 1.4; }
.pn-form .v3-trouble__ways { gap: .3em 1.4em; margin-top: .45em; }
.pn-form .v3-trouble__way { font-size: .8em; }
.pn-form .v3-form__edge { top: 0; bottom: 0; left: calc(var(--u) * -.6); }
.pn-form .v3-trouble { border-top-color: rgba(var(--sombra), .16); }
.pn-form .v3-trouble__icon { color: var(--ciruela); filter: none; }
.pn-form .v3-trouble__title { color: var(--tinta); }
.pn-form .v3-trouble__body { color: var(--tinta-2); }
.pn-form .v3-trouble__way { border-bottom-color: rgba(var(--sombra), .3); color: var(--tinta); }
.pn-form .v3-trouble__way svg { color: var(--ciruela); }
.pn-form .v3-trouble__way:not([href]) { border-bottom-color: transparent; }

/* El acuse, escrito en la misma página */
.pn-form .v3-sent__hello { color: var(--tinta); font-size: 3em; }
.pn-form .v3-sent__quote { border-left-color: var(--ciruela); }
.pn-form .v3-sent__quote p { color: var(--tinta); }
.pn-form .v3-sent__to { color: var(--tinta-2); }
.pn-form .v3-sent__to b { color: var(--tinta); }
.pn-form .v3-sent__foot { border-top-color: rgba(var(--sombra), .16); }
.pn-form .v3-sent__note { color: var(--tinta-3); }
.pn-form .v3-sent__note a { border-bottom-color: rgba(var(--sombra), .4); color: var(--tinta-2); }
.pn-form .v3-textlink { color: var(--ciruela); }
.pn-form .v3-steps > .v3-step:not(:last-child)::before { background: rgba(var(--sombra), .2); }
.pn-form .v3-steps > .v3-step i { border-color: rgba(var(--sombra), .4); }
.pn-form .v3-steps > .v3-step b { color: var(--tinta-3); }
.pn-form .v3-steps > .v3-step > span { color: var(--tinta); }
.pn-form .v3-steps > .v3-step.is-done b { color: var(--ciruela); }
/* Lo que en la web oscura es luz, aquí es tinta: el papel ya está iluminado */
.pn-form .v3-lit { color: var(--ciruela); background: none; -webkit-text-fill-color: currentColor; filter: none; }
.pn-form.is-sending .v3-form__edge i { background: linear-gradient(180deg, rgba(131, 19, 108, 0), var(--ciruela) 50%, rgba(131, 19, 108, 0)); box-shadow: none; }
.pn-form.is-lit-edge .v3-form__edge i { background: linear-gradient(180deg, rgba(131, 19, 108, 0), var(--ciruela) 18%, var(--ciruela) 82%, rgba(131, 19, 108, 0)); box-shadow: none; }
.pn-form.is-trouble .v3-form__edge i { background: linear-gradient(180deg, rgba(131, 19, 108, 0), rgba(131, 19, 108, .5) 30%, rgba(131, 19, 108, .5) 70%, rgba(131, 19, 108, 0)); }
.pn-form .v3-steps > .v3-step i { background: var(--papel); }
.pn-form .v3-steps > .v3-step.is-done::after { background: linear-gradient(90deg, var(--ciruela), rgba(131, 19, 108, .7) 35%, rgba(131, 19, 108, 0) 92%); box-shadow: none; }
.pn-form .v3-sent.is-arrived .v3-steps > .v3-step.is-done i { background: var(--ciruela); box-shadow: 0 0 0 3px rgba(131, 19, 108, .14); }
.pn-form .v3-sent.is-arrived .v3-steps > .v3-step.is-reading i { background: rgba(131, 19, 108, .4); box-shadow: none; }
.pn-form .v3-sent.is-arrived .v3-steps > .v3-step.is-reading.is-open i { background: var(--ciruela); box-shadow: 0 0 0 3px rgba(131, 19, 108, .14); }
.pn-form .v3-textlink::after { background: var(--ciruela); }
:where(html:not(.is-touch)) .pn-form .v3-textlink:hover,
.pn-form .v3-textlink:focus-visible { color: var(--tinta); }

/* La luz que busca dónde escribes: se desliza hasta el campo activo */
.pn-page__pool { position: absolute; left: 0; right: 0; top: 0; display: block; height: calc(var(--u) * 7); background: radial-gradient(60% 50% at 50% 50%, rgba(255, 244, 214, .95), rgba(255, 244, 214, 0) 100%); opacity: 0; transform: translateY(var(--pn-pool-y, 0)); transition: opacity .7s ease, transform .9s var(--ease-out); pointer-events: none; }
.pn-book.is-writing .pn-page__pool { opacity: .34; }
@media (prefers-reduced-motion: reduce) {
    .pn-page__pool, .pn-form label::after { transition: none; }
}

/* Una sola columna sin JavaScript */
@media (max-width: 1359px) {
    .pn-ask { --u: 2rem; }
    .pn-ask__stage { min-height: 0; padding: 4.5rem 1.5rem 5.5rem; }
    .pn-book { --w: min(100%, 34rem); grid-template-columns: minmax(0, 1fr); font-size: 1rem; }
    .pn-page { min-height: 0; padding: 1.7rem 1.45rem 1.7rem 1.75rem; }
    .pn-page--right { padding-top: 2rem; }
    .pn-page__head--right { display: none; }
    .pn-page__intro { margin-top: 2rem; }
    .pn-page .v3-title { font-size: clamp(2.05rem, 10.4vw, 3.4rem); }
    .pn-page__foot { padding-top: 1.6rem; font-size: 1.16rem; }
    .pn-form { --label: 1.2rem; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; margin-top: 1.8rem; }
    .pn-form .v3-trouble { margin-top: 0; padding-top: 1.2rem; }
}

/* ---------- La mesa, con JavaScript ---------- */

/* El nombre que firma la nota, en negrita de verdad. Newsreader es variable: el mismo archivo da el peso 600, sin descargar nada más */
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 600; font-display: swap; src: url(/assets/fonts/newsreader-72c495d39d.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 600; font-display: swap; src: url(/assets/fonts/newsreader-34eec9781a.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* La tinta se mezcla con el papel, que la oscurece: estos colores suben para que sobre él sean la tinta y la ciruela de la marca */
.pn-ask.pn-desk { --tinta: #33202c; --tinta-2: #47303d; --tinta-3: #553a48; --ciruela: #8b18aa; --ask-run: 330svh; height: calc(100svh + var(--ask-run)); }
.pn-desk .pn-ask__stage { position: sticky; top: 0; display: block; height: 100svh; min-height: 0; padding: 0; }
.pn-desk .pn-desk__world { position: absolute; top: 0; left: 0; display: block; width: var(--world-w); height: var(--world-h); transform-origin: 0 0; }
.pn-desk .pn-desk__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.pn-desk .pn-desk__quill { position: absolute; left: 79.6%; top: 57.5%; display: block; width: 21.5%; max-width: none; height: auto; filter: brightness(.82) sepia(.18) drop-shadow(.5rem .4rem .5rem rgba(20, 8, 2, .55)); transform: translate(-50%, -50%) rotate(-82deg); pointer-events: none; }
.pn-desk.is-single .pn-desk__quill, .pn-desk.is-compact.is-short .pn-desk__quill { display: none; }
/* La película, encima de la mesa hasta que funde; al llegar, los lados se apagan un poco para que la mirada se quede en las hojas */
.pn-desk .pn-desk__film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: #1d120d; transform-origin: 56% 42%; pointer-events: none; }
.pn-desk.is-nofilm .pn-desk__film { display: none; }
.pn-desk .pn-desk__shade { position: absolute; inset: 0; display: block; background: radial-gradient(62% 86% at 50% 50%, transparent 62%, rgba(18, 9, 6, .26) 100%); opacity: 0; pointer-events: none; }
.pn-desk .pn-desk__fade { position: absolute; inset: 0; display: block; background: linear-gradient(180deg, var(--carbon), transparent var(--fade-a, 13%), transparent calc(100% - var(--fade-b, 10%)), var(--carbon)); pointer-events: none; }
/* Quieta: sin recorrido; en pantalla baja, la escena mide lo que el cuaderno */
.pn-ask.pn-desk.is-still, .pn-ask.pn-desk.is-short { height: auto; }
.pn-desk.is-short .pn-ask__stage { position: relative; height: var(--stage-h); }

/* El libro no tiene caja propia: es el plano de la foto. Cada página se maqueta a escala --px y su matriz la coloca sobre la de la foto. La
   tinta se multiplica con el papel, así que recibe su luz y sus manchas, y agarra su grano; en una columna, con menos píxeles por letra, menos */
.pn-desk .pn-book { position: absolute; inset: 0; display: block; width: 100%; max-width: none; font-size: var(--em); }
.pn-desk .pn-page {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pw);
    height: var(--ph);
    min-height: 0;
    padding: calc(var(--u) * .95) calc(var(--u) * 1.75) calc(var(--u) * 1.4);
    background: none;
    transform-origin: 0 0;
    will-change: transform;
    mix-blend-mode: multiply;
    -webkit-mask: url("/assets/img/plum-notes/cuaderno/grano-tinta.webp?v=20261105-01") 0 0 / calc(var(--u) * 6.25) calc(var(--u) * 6.25) repeat;
    mask: url("/assets/img/plum-notes/cuaderno/grano-tinta.webp?v=20261105-01") 0 0 / calc(var(--u) * 6.25) calc(var(--u) * 6.25) repeat;
}
.pn-desk .pn-page--left { padding: calc(var(--u) * 1.5) calc(var(--u) * 1.5) calc(var(--u) * 1.4) calc(var(--u) * 1.9); }
.pn-desk .pn-luz { position: absolute; top: 0; left: 0; z-index: 0; display: block; width: var(--pw); height: var(--ph); transform-origin: 0 0; pointer-events: none; }
.pn-desk .pn-page__head { color: var(--tinta-2); }
.pn-desk .pn-page__head--right { display: flex; }
.pn-desk .pn-page .v3-body { color: var(--tinta-2); font-size: 1.1em; line-height: 1.55; }
.pn-desk .pn-page__intro { margin-top: calc(var(--u) * 2.2); }
.pn-desk .pn-page .v3-title { font-size: 3.15em; }
.pn-desk .pn-page__foot { padding-top: 1em; color: var(--tinta); font-size: 1.28em; }
.pn-desk .pn-page__foot [data-pn-who] { color: #7c139c; font-weight: 600; overflow-wrap: anywhere; }

/* El formulario: lo que la hoja común mide en px o rem, aquí va en proporción a la página */
.pn-desk .pn-form { --rule: rgba(36, 18, 31, .34); --label: 1.3em; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.45) var(--u); margin-top: calc(var(--u) * 1.75); }
.pn-desk .pn-form .v3-form__edge { display: none; }
.pn-desk .pn-form label > span:not(.contact-form__field-error) { color: var(--tinta-2); text-shadow: none; }
.pn-desk .pn-form label:focus-within > span:not(.contact-form__field-error),
.pn-desk .pn-form label:has(input:not(:placeholder-shown)) > span:not(.contact-form__field-error),
.pn-desk .pn-form label:has(textarea:not(:placeholder-shown)) > span:not(.contact-form__field-error) { color: #6c128c; }
.pn-desk .pn-form input, .pn-desk .pn-form input:focus, .pn-desk .pn-form textarea:focus { box-shadow: inset 0 calc(var(--px) * -1) 0 var(--rule); }
.pn-desk .pn-form input:-webkit-autofill, .pn-desk .pn-form textarea:-webkit-autofill { -webkit-text-fill-color: var(--tinta); transition: background-color 99999s; }
.pn-desk .pn-form textarea { height: calc(var(--u) * 11); background: repeating-linear-gradient(180deg, transparent 0 calc(var(--u) - var(--px)), var(--rule) calc(var(--u) - var(--px)) var(--u)) 0 0 / 100% var(--u) local; scrollbar-width: thin; scrollbar-color: rgba(58, 33, 48, .42) transparent; transition: height .6s var(--ease-out); }
.pn-desk .pn-form.is-trouble textarea { height: calc(var(--u) * 7); }
.pn-desk .pn-form__notes { position: relative; }
.pn-desk .pn-form__notes .contact-form__field-error { top: calc(var(--u) * 11 + .3em); }
.pn-desk .pn-form label::after { top: calc(var(--u) - var(--px)); height: var(--px); }
.pn-cuenta { position: absolute; right: 0; top: 100%; margin-top: .25em; color: var(--tinta-2); font: italic 300 .95em / 1.2 var(--serif); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.pn-cuenta.is-on { opacity: 1; }
.pn-desk .pn-form .v3-form__promise, .pn-desk .pn-form .v3-form__promise span { color: var(--tinta); }
.pn-desk .pn-form .v3-form__promise { font-size: .86em; }
.pn-desk .pn-form .v3-form__promise a { color: var(--tinta); text-decoration-color: var(--ciruela); }
.pn-desk .pn-form .v3-trouble { margin-top: calc(var(--u) * -.9); padding-top: calc(var(--u) * .5); }

/* El botón es lo último que escribe la pluma: la palabra y un trazo que se dibuja al pasar por encima */
.pn-desk .pn-form .v3-button { width: auto; min-height: 0; padding: .1em .2em .62em 0; overflow: visible; border-radius: 0; color: var(--ciruela); background: none; font: italic 400 2.1em / 1.1 var(--serif); letter-spacing: 0; box-shadow: none; opacity: 1; justify-content: flex-start; }
.pn-desk .pn-form .v3-button__label { position: relative; display: block; min-width: 4.6em; text-align: left; }
.pn-desk .pn-form .v3-button .pn-trazo { position: absolute; left: -.08em; right: -.1em; bottom: -.62em; display: block; width: calc(100% + .18em); max-width: none; height: .56em; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.4; transform: none; }
.pn-trazo path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.pn-trazo path + path { animation-delay: .62s; }
:where(html:not(.is-touch)) .pn-desk .pn-form .v3-button:hover,
.pn-desk .pn-form .v3-button:focus-visible { color: var(--tinta); box-shadow: none; }
:where(html:not(.is-touch)) .pn-desk .pn-form .v3-button:hover .pn-trazo path,
.pn-desk .pn-form .v3-button:focus-visible .pn-trazo path { animation: pnTrazo .95s cubic-bezier(.5, .05, .25, 1) both; }
.pn-desk .pn-form.is-sending .pn-trazo path { animation: pnTrazo 1.5s ease-in-out infinite; }
.pn-desk .pn-form .v3-button:focus-visible { outline: calc(var(--px) * 2) solid var(--ciruela); outline-offset: .22em; }
@keyframes pnTrazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* La hoja que se pasa: lo de debajo no se ve hasta que se levanta */
.pn-ask .pn-hoja-gl { position: absolute; z-index: 2; display: block; pointer-events: none; transition: opacity .28s ease; }
.pn-ask .pn-hoja { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pn-ask .pn-hoja[hidden] { display: none; }
.pn-book.is-turning .pn-page--right .pn-form > [data-v3-item] { opacity: 0 !important; transition: none !important; }
.pn-book.is-turning .pn-hoja .pn-form > [data-v3-item], .pn-book.is-turning .pn-hoja .pn-page__head--right { opacity: 1 !important; transform: none !important; }
.pn-book.is-turning .v3-contact__after { opacity: 0 !important; transition: none !important; }

/* El acuse: el saludo, la nota entera, un registro con filetes, el matasellos y un check a mano en el margen */
.pn-desk .pn-form .v3-sent { padding: 0; }
.pn-desk .pn-form .v3-sent .v3-fx, .pn-desk .pn-form .v3-sent .v3-ln > span { opacity: 1; transform: none; clip-path: none; transition: none; }
.pn-desk .pn-form .v3-sent__hello { position: relative; max-width: calc(100% - var(--u) * 5.1); min-height: calc(var(--u) * 3.05); font-size: 3em; line-height: 1.04; overflow-wrap: anywhere; }
.pn-desk .pn-form .v3-sent__hello .v3-ln { overflow: visible; }
.pn-desk .pn-form .v3-sent__hello .v3-ln > span { display: inline; }
.pn-desk .pn-form .v3-sent__quote { margin: calc(var(--u) * .95) 0 0; padding: 0; border: 0; }
.pn-desk .pn-form .v3-sent__quote p { display: block; -webkit-line-clamp: none; max-height: calc(var(--u) * 5); overflow-y: auto; overflow-wrap: anywhere; color: var(--tinta); font: italic 300 1.3em / var(--u) var(--serif); white-space: pre-line; scrollbar-width: thin; scrollbar-color: rgba(58, 33, 48, .42) transparent; }
.pn-desk .pn-form .v3-sent__quote p.is-sigue { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--u) * 1.3), rgba(0, 0, 0, .12)); mask-image: linear-gradient(180deg, #000 calc(100% - var(--u) * 1.3), rgba(0, 0, 0, .12)); }
.pn-desk .pn-form .v3-sent__quote p:focus-visible { outline: calc(var(--px) * 2) solid var(--ciruela); outline-offset: .2em; }
.pn-desk .pn-form .v3-sent__to { margin: calc(var(--u) * .25) 0 0; color: var(--tinta-2); font: 400 .9em / var(--u) var(--sans); }
.pn-desk .pn-form .v3-sent__to b { color: var(--tinta); font-weight: 500; }
.pn-desk .pn-form .v3-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: calc(var(--u) * .7) 0 0; padding: 0; border-top: var(--px) solid rgba(var(--sombra), .34); }
.pn-desk .pn-form .v3-steps > .v3-step { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: var(--u); padding: calc(var(--u) * .16) 0; border-bottom: var(--px) solid rgba(var(--sombra), .34); }
.pn-desk .pn-form .v3-steps > .v3-step::before, .pn-desk .pn-form .v3-steps > .v3-step::after { content: none; }
.pn-desk .pn-form .v3-steps > .v3-step i { display: none; }
.pn-desk .pn-form .v3-steps > .v3-step.is-done i { position: absolute; left: -1.5em; top: 50%; display: block; width: 1.2em; height: 1.2em; border: 0 !important; color: var(--ciruela); background: none !important; box-shadow: none !important; animation: none !important; transform: translateY(-50%); }
.pn-form .v3-step i svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.pn-form .v3-step.is-done i path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.pn-form .v3-sent.is-arrived .v3-step.is-done i path { stroke-dashoffset: 0; transition: stroke-dashoffset .75s cubic-bezier(.5, .05, .25, 1) .95s; }
.pn-desk .pn-form .v3-steps > .v3-step b { flex: none; color: var(--tinta); font: 600 .64em / 1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.pn-desk .pn-form .v3-steps > .v3-step > span { color: var(--tinta-2); font: italic 300 1.14em / 1.25 var(--serif); text-align: right; }
.pn-desk .pn-form .v3-sent__foot { display: grid; gap: .5em; margin: calc(var(--u) * .9) 0 0; padding: 0; border: 0; }
.pn-desk .pn-form .v3-sent__foot .v3-textlink { padding: 0; color: var(--ciruela); font: italic 400 1.3em / 1.3 var(--serif); }
.pn-desk .pn-form .v3-textlink::after { background: var(--ciruela); }
.pn-desk .pn-form .v3-sent__note { max-width: none; color: var(--tinta-2); font-size: .82em; line-height: 1.5; }
.pn-desk .pn-form .v3-sent__note a { border-bottom: var(--px) solid currentColor; color: var(--tinta); }
/* El matasellos cae cuando la hoja ya se ha posado */
.pn-desk .pn-matasellos { position: absolute; right: calc(var(--u) * 1.55); top: calc(var(--u) * 1.75); z-index: 0; display: block; width: calc(var(--u) * 5); height: calc(var(--u) * 5); max-width: none; opacity: 0; mix-blend-mode: multiply; pointer-events: none; transform: rotate(-8deg) scale(1.18); }
.pn-form.is-handed ~ .pn-matasellos { opacity: .92; transform: rotate(-8deg) scale(1); transition: opacity .08s linear .55s, transform .15s cubic-bezier(.5, 0, 1, .6) .55s; }
@media (prefers-reduced-motion: reduce) {
    .pn-form.is-handed ~ .pn-matasellos, .pn-form .v3-sent.is-arrived .v3-step.is-done i path { transition: none; }
    .pn-desk .pn-form .v3-button .pn-trazo path { animation: none !important; }
}

/* Una página cada vez (móvil y tableta vertical) */
.pn-desk.is-compact .pn-page { padding: 1.4em 1.3em 1.1em 1.5em; -webkit-mask-image: url("/assets/img/plum-notes/cuaderno/grano-tinta.webp?v=20261105-01"), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)); mask-image: url("/assets/img/plum-notes/cuaderno/grano-tinta.webp?v=20261105-01"), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)); }
.pn-desk.is-compact .pn-page__intro { margin-top: 1.5em; }
.pn-desk.is-compact .pn-page .v3-title { font-size: 2.3em; }
.pn-desk.is-compact .pn-form { --label: 1.28em; grid-template-columns: minmax(0, 1fr); gap: 1.8em .95em; margin-top: 1.7em; }
.pn-desk.is-compact .pn-form textarea { height: calc(var(--u) * 5); }
.pn-desk.is-compact .pn-form.is-trouble textarea { height: calc(var(--u) * 2); }
.pn-desk.is-compact .pn-form__notes .contact-form__field-error { top: calc(var(--u) * 5 + .3em); }
.pn-desk.is-compact .pn-form .v3-trouble { margin-top: 0; padding-top: 1em; }
.pn-desk.is-compact .pn-form .v3-sent__hello { max-width: calc(100% - var(--u) * 3.8); min-height: calc(var(--u) * 2.95); font-size: 2.6em; }
.pn-desk.is-compact .pn-form .v3-sent__quote { margin-top: calc(var(--u) * .5); }
.pn-desk.is-compact .pn-form .v3-sent__quote p { max-height: calc(var(--u) * 3); }
.pn-desk.is-compact .pn-form .v3-steps { margin-top: calc(var(--u) * .3); }
.pn-desk.is-compact .pn-form .v3-steps > .v3-step { padding: calc(var(--u) * .05) 0; }
.pn-desk.is-compact .pn-form .v3-steps > .v3-step.is-done i { left: -1.3em; width: 1.05em; height: 1.05em; }
.pn-desk.is-compact .pn-form .v3-steps > .v3-step > span { font-size: 1em; }
.pn-desk.is-compact .pn-form .v3-sent__foot { margin-top: calc(var(--u) * .4); gap: .2em; }
.pn-desk.is-compact .pn-form .v3-sent__foot .v3-textlink { color: #741494; }
.pn-desk.is-compact .pn-form .v3-sent__note { font-size: .74em; line-height: 1.4; }
.pn-desk.is-compact .pn-matasellos { top: 2.5em; right: calc(var(--u) * .8); width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
@media (max-height: 700px) {
    .pn-desk.is-compact .pn-form textarea { height: calc(var(--u) * 3); }
    .pn-desk.is-compact .pn-form__notes .contact-form__field-error { top: calc(var(--u) * 3 + .3em); }
    .pn-desk.is-compact .pn-form.is-trouble textarea { height: var(--u); }
    .pn-desk.is-compact .pn-form.is-trouble .v3-trouble__body { display: none; }
    .pn-desk.is-compact .pn-form .v3-sent__quote p { max-height: calc(var(--u) * 2); font-size: 1.14em; }
    .pn-desk.is-compact .pn-form .v3-sent__hello { font-size: 2.3em; }
    .pn-desk.is-compact .pn-form .v3-steps > .v3-step > span { font-size: .92em; line-height: 1.2; }
}

/* ---------- Artículo ----------
   Cabecera siempre de noche, con la foto fundida en el carbón y el texto centrado en vertical. La lectura y «Sigue leyendo»,
   en claro u oscuro según el dispositivo del lector (.pn-lectura). Una sola columna de texto centrada, con el índice a su lado */

.pn-post {
    --read: clamp(1.125rem, 1rem + .2vw, 1.3125rem);
    --col: calc(var(--read) * 35);
    --lado: 15.5rem;
    --hueco: clamp(2.5rem, 4vw, 4.5rem);
    --ancho: min(100%, 94rem);
    --fondo: var(--carbon);
    --tinta: rgba(245, 244, 241, .86);
    --tinta-fuerte: var(--hueso);
    --tinta-2: rgba(245, 244, 241, .66);
    --linea: rgba(245, 244, 241, .13);
    --acento: #d089c3;
    --acento-suave: rgba(208, 137, 195, .82);
    color: var(--tinta);
    background: var(--carbon);
}

/* La cabecera */
.pn-cab { position: relative; display: flex; align-items: center; min-height: min(100svh, 60rem); padding: clamp(6.5rem, 12vh, 8rem) var(--gutter); overflow: hidden; background: var(--carbon); }
.pn-cab__foto { --borde: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .06) 8%, rgba(0, 0, 0, .22) 16%, rgba(0, 0, 0, .46) 25%, rgba(0, 0, 0, .72) 34%, rgba(0, 0, 0, .92) 44%, #000 54%); --pie: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .8) 72%, rgba(0, 0, 0, .38) 86%, transparent 100%); position: absolute; top: 0; right: 0; bottom: 0; width: 62%; margin: 0; -webkit-mask-image: var(--borde), var(--pie); mask-image: var(--borde), var(--pie); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* El velo oscurece solo la esquina del menú (en modo diferencia), que sobre gris medio desaparecería; el resto de la foto queda limpio */
.pn-cab__foto::after { content: ""; position: absolute; inset: 0; background: radial-gradient(44% 58% at 100% 0, rgba(17, 17, 17, .84), rgba(17, 17, 17, .74) 52%, rgba(17, 17, 17, .3) 82%, transparent 100%); }
/* --foco: qué parte de la foto se ve cuando no cabe entera, para cada nota */
.pn-cab__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
.pn-cab__foto--clara img { filter: brightness(.66) saturate(.92); }
.pn-cab__foto--cielo img { filter: brightness(.46) saturate(.9); }
.pn-cab__txt { position: relative; z-index: 1; width: var(--ancho); margin-inline: auto; }

/* Qué nota es y dónde está. El trazo a mano es el del botón de la portada y se dibuja una vez al llegar */
.pn-ceja { display: flex; flex-wrap: wrap; align-items: center; gap: 1.05rem 1.1rem; margin-bottom: 1.5rem; }
.pn-nota { position: relative; display: inline-block; color: rgb(var(--luz-warm)); font-family: var(--serif); font-size: clamp(1.45rem, 1.25rem + .4vw, 1.75rem); font-style: italic; font-weight: 400; letter-spacing: -.005em; line-height: 1.1; white-space: nowrap; }
.pn-nota svg { position: absolute; left: -.08em; right: -.1em; bottom: -.42em; width: calc(100% + .18em); height: .46em; overflow: visible; fill: none; stroke: rgb(var(--luz)); stroke-linecap: round; stroke-width: 1.5; }
.pn-nota path { vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: pnNota 1.1s cubic-bezier(.5, .05, .25, 1) .5s forwards; }
@keyframes pnNota { to { stroke-dashoffset: 0; } }
.pn-crumbs { position: relative; top: -.3em; display: flex; align-items: center; gap: .7rem; margin: 0; color: rgba(245, 244, 241, .6); font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.pn-crumbs span { color: rgba(245, 244, 241, .3); }
.pn-crumbs a { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none !important; transition: color .4s ease; }
.pn-crumbs a:last-child { color: rgba(var(--luz), .9); }
:where(html:not(.is-touch)) .pn-crumbs a:hover, .pn-crumbs a:focus-visible { color: var(--hueso); }
/* La nota, el icono y el texto, centrados entre sí en vertical: medido sobre la tinta, porque la caja de cada letra no coincide con lo que se ve */
.pn-crumbs .pn-icono { position: relative; top: -.05em; color: rgba(245, 244, 241, .82); }
/* El icono de Plum Notes, del color de lo que tenga alrededor */
.pn-icono { flex: none; display: inline-block; width: 1.95em; height: 2.05em; background: currentColor; -webkit-mask: url("/assets/img/marca/plum-notes-una-tinta.svg") center / contain no-repeat; mask: url("/assets/img/marca/plum-notes-una-tinta.svg") center / contain no-repeat; }

.pn-cab h1 { max-width: min(10.6em, 46vw); margin: 0; color: var(--hueso); font-family: var(--serif); font-size: clamp(2.8rem, 1.6rem + 3vw, 5rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.03; text-wrap: balance; text-shadow: 0 2px 30px rgba(17, 17, 17, .5); }
.pn-cab h1 em { color: #cb7ab8; font-style: italic; font-weight: 400; }
.pn-cab .l3-lead { max-width: 36rem; margin-top: 1.6rem; color: var(--tinta); font-size: calc(var(--read) * 1.02); font-weight: 400; line-height: 1.62; text-wrap: pretty; text-shadow: 0 1px 18px rgba(17, 17, 17, .7); }
.pn-cab .l3-meta { align-items: baseline; gap: .5rem 1.8rem; margin-top: 1.8rem; }
.pn-cab .l3-meta div { display: flex; gap: .55rem; align-items: baseline; }
.pn-cab .l3-meta dt { color: var(--tinta-2); font-size: .62rem; }
.pn-cab .l3-meta dd { font-size: .92rem; }

.pn-resumen { padding: 0 var(--gutter) clamp(3rem, 7vh, 4.5rem); background: var(--carbon); }
.pn-resumen .l3-summary { width: var(--ancho); max-width: none; margin: 0 auto; padding-top: 1.5rem; border-top-color: var(--linea); }
.pn-resumen .l3-summary h2 { color: rgba(var(--luz-warm), .95); }
.pn-resumen .l3-summary li { color: var(--tinta); font-family: var(--sans); font-size: 1.02rem; font-weight: 400; line-height: 1.55; text-wrap: pretty; }

/* La lectura: una sola tabla de colores y el navegador elige según el dispositivo. Quien no entienda light-dark() lee en oscuro */
.pn-lectura {
    --fondo: var(--carbon);
    --nota-fondo: #1d1b22;
    --nota-etiqueta: rgba(255, 206, 140, .95);
    --destaca: #ffce8c;
    --enlace-raya: rgba(208, 137, 195, .5);
    --marca: rgb(232, 172, 104);
    --lit: #ffce8c;
    --haz-halo: rgba(190, 128, 64, .55);
    --haz-cuerpo: rgba(232, 176, 108, .9);
    --haz-nucleo: rgb(254, 243, 202);
    --pista: rgba(245, 244, 241, .16);
    --canto: transparent;
    --canto-halo: transparent;
    color: var(--tinta);
    background: var(--fondo);
}
@supports (color: light-dark(#000, #fff)) {
    .pn-lectura {
        color-scheme: light dark;
        --fondo: light-dark(#f5f4f1, #111111);
        --tinta: light-dark(rgba(17, 17, 17, .86), rgba(245, 244, 241, .86));
        --tinta-fuerte: light-dark(#111111, #f5f4f1);
        --tinta-2: light-dark(rgba(17, 17, 17, .68), rgba(245, 244, 241, .66));
        --linea: light-dark(rgba(17, 17, 17, .12), rgba(245, 244, 241, .13));
        --acento: light-dark(#83136c, #d089c3);
        --acento-suave: light-dark(rgba(131, 19, 108, .78), rgba(208, 137, 195, .82));
        --pista: light-dark(rgba(17, 17, 17, .14), rgba(245, 244, 241, .16));
        --nota-fondo: light-dark(#ece9e2, #1d1b22);
        --nota-etiqueta: light-dark(#83136c, rgba(255, 206, 140, .95));
        --destaca: light-dark(#8f4a12, #ffce8c);
        --enlace-raya: light-dark(rgba(131, 19, 108, .42), rgba(208, 137, 195, .5));
        --marca: light-dark(rgb(214, 140, 70), rgb(232, 172, 104));
        --lit: light-dark(#a85a1c, #ffce8c);
        --haz-halo: light-dark(rgba(232, 172, 104, .62), rgba(190, 128, 64, .55));
        --haz-cuerpo: light-dark(rgba(226, 150, 80, .95), rgba(232, 176, 108, .9));
        --haz-nucleo: light-dark(rgb(214, 140, 70), rgb(254, 243, 202));
        --canto: light-dark(rgba(232, 172, 104, .9), transparent);
        --canto-halo: light-dark(rgba(232, 172, 104, .55), transparent);
    }
}

.pn-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--col)) minmax(0, 1fr); column-gap: var(--hueco); justify-content: normal; padding-inline: var(--gutter); }
.pn-post .l3-body { position: relative; gap: 0 var(--hueco); padding-top: clamp(3.5rem, 8vh, 5rem); padding-bottom: clamp(5rem, 11vh, 7rem); color: var(--tinta); background: var(--fondo); }
/* De día, el papel empieza con una línea de luz: un solo borde, y cuidado */
.pn-post .l3-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 6%, var(--canto) 34%, var(--canto) 66%, transparent 94%); }
.pn-post .l3-body::after { content: ""; position: absolute; left: 16%; right: 16%; top: -7px; height: 15px; filter: blur(7px); background: radial-gradient(50% 50% at 50% 50%, var(--canto-halo), transparent 72%); pointer-events: none; }
.pn-post .l3-toc { grid-column: 1; grid-row: 1; justify-self: end; width: var(--lado); }
.pn-post .l3-article { grid-column: 2; grid-row: 1; }

/* El índice */
.pn-post .l3-toc summary { padding-left: 1.5rem; color: var(--tinta-2); }
.pn-post .l3-toc__list { padding-left: 1.5rem; }
.pn-post .l3-toc a { grid-template-columns: 2.1rem minmax(0, 1fr); padding: .46rem 0; color: var(--tinta-2); font-size: .92rem; line-height: 1.4; }
.pn-post .l3-toc a span { color: var(--acento-suave); }
.pn-post .l3-toc a.is-current { color: var(--tinta-fuerte); }
.pn-post .l3-toc a.is-current span { color: var(--acento); }
html:not(.is-touch) .pn-post .l3-toc a:hover { color: var(--tinta-fuerte); }

/* El texto */
.pn-post .l3-section { padding-bottom: clamp(2.6rem, 6vh, 3.6rem); scroll-margin-top: 6rem; }
.pn-post .l3-section + .l3-section { padding-top: clamp(2.6rem, 6vh, 3.6rem); border-top: 1px solid var(--linea); }
.pn-post .l3-section h2 { position: relative; display: block; margin-bottom: 1.5rem; color: var(--tinta-fuerte); font-size: clamp(1.95rem, 1.5rem + .9vw, 2.75rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.pn-post .l3-section h2 > span { position: absolute; top: .42em; right: calc(100% + 1rem); color: var(--acento); font-size: .5em; font-weight: 400; }
.pn-post .l3-section p,
.pn-post .l3-section li { color: var(--tinta); font-size: var(--read); font-weight: 400; letter-spacing: -.003em; line-height: 1.72; text-wrap: pretty; }
.pn-post .l3-section p { margin-bottom: 1.15em; }
.pn-post .l3-section li { margin-bottom: .55em; }
.pn-post .l3-section ul li::before { top: .86em; background: var(--marca); }
/* Lo importante se ve sin leerlo: en negrita y a la luz, con el color cálido de la marca. Los enlaces son ciruela y subrayados: nunca se confunden */
.pn-post .l3-section strong { color: var(--destaca); font-weight: 600; }
.pn-post .l3-section em { color: var(--tinta-fuerte); }
.pn-post .l3-section ol li::before { color: var(--acento); }
.pn-post .l3-section a[href], .pn-note a[href], .pn-end__link { color: var(--acento); text-decoration: underline; text-decoration-color: var(--enlace-raya); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .3s ease, text-decoration-color .3s ease; }
/* Al pasar por encima, la luz llega al enlace: cambia de color y su raya se enciende */
:where(html:not(.is-touch)) .pn-post .l3-section a[href]:hover, .pn-post .l3-section a[href]:focus-visible,
:where(html:not(.is-touch)) .pn-note a[href]:hover, .pn-note a[href]:focus-visible,
:where(html:not(.is-touch)) .pn-end__link:hover, .pn-end__link:focus-visible { color: var(--destaca); text-decoration-color: currentColor; }
/* Sin página a la que llevar (Big Plum Connect mientras está oculta) es texto normal, no un enlace */
.pn-post .l3-section a:not([href]) { color: inherit; text-decoration: none; }

/* El título que lees se enciende desde el lado del índice */
.pn-post .l3-section .v3-lit {
    padding-left: .02em;
    margin-left: -.02em;
    font-weight: inherit;
    background-image:
        linear-gradient(90deg, color-mix(in srgb, var(--lit) calc(var(--on) * 100%), transparent) 0%, color-mix(in srgb, var(--lit) calc(var(--on) * 50%), transparent) 14%, transparent 42%),
        linear-gradient(var(--tinta-fuerte), var(--tinta-fuerte));
    filter: drop-shadow(-8px 0 22px color-mix(in srgb, var(--marca) calc(var(--on) * 30%), transparent));
}
.pn-post .l3-section.is-current .v3-lit { --on: 1; }

.pn-post .pn-quote {
    margin: 2.4rem 0;
    padding: .3rem 0 .3rem 1.6rem;
    border-left: 1px solid var(--marca);
    color: var(--tinta-fuerte);
    font-family: var(--serif);
    font-size: clamp(1.6rem, 1.3rem + .6vw, 2.1rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1.28;
    text-wrap: balance;
}

.pn-post .pn-note {
    margin: 2rem 0;
    padding: 1.4rem 1.6rem;
    border-radius: .5rem;
    color: var(--tinta);
    background: var(--nota-fondo);
    font-size: calc(var(--read) * .94);
    font-weight: 400;
    line-height: 1.62;
}
.pn-note b { display: block; margin-bottom: .45rem; color: var(--nota-etiqueta); font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }

/* Fin de la nota: el signo de Plum Notes cierra el texto, como en una revista */
.pn-fin { display: flex; align-items: center; gap: 1rem; margin: .4rem 0 2.6rem; color: var(--acento); font-size: 1.1rem; }
.pn-fin::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--linea), transparent); }

/* El cierre del artículo */
.pn-end__kicker { margin: 0 0 1rem; color: var(--tinta-2); font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.pn-end__text { max-width: 30em; margin: 0; color: var(--tinta-fuerte); font-family: var(--serif); font-size: clamp(1.5rem, 2.1vw, 1.9rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.25; }
.pn-end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin: 1.8rem 0 0; }
.pn-end__link { font-size: .88rem; font-weight: 500; }

/* Sigue leyendo */
.pn-more { padding: clamp(5rem, 11vh, 7rem) var(--gutter); border-top: 1px solid var(--linea); }
.pn-more > * { max-width: 86rem; margin-inline: auto; }
.pn-more .v3-kicker { margin-bottom: 2rem; color: var(--tinta-2); }
.pn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); padding: 0; list-style: none; }
.pn-card { border-top: 1px solid var(--linea); }
.pn-card__link { position: relative; display: grid; gap: .9rem; align-content: start; height: 100%; padding: 1.8rem 0 1.8rem 1.4rem; }
.pn-card__title { color: var(--tinta-fuerte); font-family: var(--serif); font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.18; }
.pn-card__desc { color: var(--tinta-2); font-size: .88rem; font-weight: 400; line-height: 1.6; }
.pn-card__meta { align-items: baseline; color: var(--tinta-2); }
.pn-card__meta span:first-child { color: var(--acento); font-family: var(--serif); font-size: 1rem; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
.pn-more .pn-card__go, .pn-more .v3-textlink { color: var(--tinta-fuerte); transition: color .3s ease; }
/* La tarjeta y «Todas las notas» cambian de color con el tema: el hover de la base los dejaría en blanco sobre el papel */
:where(html:not(.is-touch)) .pn-more .v3-textlink:hover, .pn-more .v3-textlink:focus-visible,
:where(html:not(.is-touch)) .pn-card__link:hover .pn-card__title, .pn-card__link:focus-visible .pn-card__title,
:where(html:not(.is-touch)) .pn-card__link:hover .pn-card__go, .pn-card__link:focus-visible .pn-card__go { color: var(--destaca); }
.pn-card__title { transition: color .3s ease; }
.pn-card__link:focus-visible { outline: 1px solid rgba(var(--luz), .6); outline-offset: 4px; }
.pn-more__all { margin-top: 2rem; }
.pn-lectura .v3-beam::before { background: var(--haz-halo); }
.pn-lectura .v3-beam::after { background: var(--haz-cuerpo); }
.pn-lectura .v3-beam i { background: var(--haz-nucleo); }

@media (max-width: 1500px) {
    /* Sin sitio para colgar el número en el margen, va sobre el título */
    .pn-post .l3-section h2 > span { position: static; display: block; margin-bottom: .5rem; font-size: 1rem; }
}

@media (max-width: 1360px) {
    .pn-rejilla { grid-template-columns: var(--lado) minmax(0, var(--col)); justify-content: center; }
}

@media (max-width: 1180px) {
    .pn-cab { display: block; min-height: 0; padding: 0; }
    .pn-cab h1 { max-width: 14em; }
    .pn-cab__foto { position: relative; width: 100%; height: min(62svh, 62vw + 12rem); -webkit-mask-image: var(--pie); mask-image: var(--pie); -webkit-mask-composite: source-over; mask-composite: add; }
    .pn-cab__foto img { object-position: var(--foco-movil, var(--foco, 50% 50%)); }
    /* Aquí la foto ocupa todo el ancho: el menú también pisa la izquierda */
    .pn-cab__foto::after { background: radial-gradient(70% 70% at 100% 0, rgba(17, 17, 17, .84), rgba(17, 17, 17, .72) 50%, rgba(17, 17, 17, .3) 82%, transparent 100%), linear-gradient(180deg, rgba(17, 17, 17, .72), rgba(17, 17, 17, .4) 12%, transparent 24%); }
    .pn-cab__txt { width: auto; margin-top: -3.5rem; padding: 0 var(--gutter) 2.6rem; }
    .pn-resumen { padding: 0 var(--gutter) 2.6rem; }
}

@media (max-width: 1080px) and (min-width: 821px) {
    .pn-resumen .l3-summary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (max-width: 1180px) {
    .pn-row__link { grid-template-columns: 4.6rem minmax(0, 1fr) clamp(8rem, 18vw, 11rem) auto; }
    .pn-row__desc { grid-column: 2; grid-row: auto; }
    .pn-row__media { grid-column: 3; grid-row: 1 / span 3; }
    .pn-row__go { grid-column: 4; grid-row: 1 / span 3; }
    .pn-row__n { grid-row: 1 / span 3; }
    .pn-cards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .pn-featured__link { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .pn-featured, .pn-all, .pn-more { padding-left: 1.5rem; padding-right: 1.5rem; }
    .pn-scene__content { max-width: none; }
    .pn-row__link { grid-template-columns: minmax(0, 1fr) 6.2rem; gap: .6rem 1rem; padding: 1.8rem 0 1.8rem 1.2rem; }
    .pn-row__n, .pn-row__go { display: none; }
    .pn-row__meta, .pn-row__title, .pn-row__desc { grid-column: 1; }
    .pn-row__meta { align-items: baseline; }
    .pn-row__nota { display: inline; order: -1; color: rgb(var(--luz-warm)); font-family: var(--serif); font-size: .95rem; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
    .pn-row__media { grid-column: 2; grid-row: 1 / span 2; align-self: start; aspect-ratio: 1 / 1; }
    .pn-rejilla, .pn-post .l3-body { display: block; padding-inline: 1.25rem; }
    .pn-post .l3-toc { justify-self: stretch; width: auto; margin-bottom: 2.6rem; padding: 1rem 1.1rem; border-color: var(--linea); }
    .pn-post .l3-toc summary { padding-left: 0; }
    .pn-post .l3-toc summary::after { color: var(--acento); }
    .pn-post .l3-toc__list { padding-left: 0; }
    .pn-post .l3-section h2 > span { margin-bottom: .55rem; font-size: .92rem; }
    .pn-end__actions .v3-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-row, .pn-row__title, .pn-row__go, .pn-featured__media .v3-slot { transition: none; }
    .is-lit .pn-head__icon .pn-pen, .is-lit .pn-head__icon .pn-ink { animation: none; }
    .pn-nota path { animation: none; stroke-dashoffset: 0; }
}