/* ════════════════════════════════════════════════════════════════════
   EL PARTE DEL VIÑEDO

   La hoja que un viticultor rellena cada mañana: una columna, renglones
   separados por filetes, y los números grandes porque son lo que se lee de
   un vistazo. Nada de tarjetas con sombra ni de iconos del tiempo: esto no
   es un pronóstico, es un parte.

   Papel claro y tinta sepia, el mismo pliego que la lámina de la vendimia,
   para que se reconozca que son del mismo cuaderno.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --pa-papel: #F6F1E6;
    --pa-tinta: #3f3a33;
    --pa-suave: rgba(63, 58, 51, .5);
    --pa-filete: rgba(106, 100, 89, .18);
    --pa-oro: #B89760;
    --pa-vino: #6E1F25;
}

* { box-sizing: border-box; }

body.pa-page {
    background:
        radial-gradient(120% 90% at 20% 8%, rgba(214, 200, 172, .28), transparent 58%),
        radial-gradient(100% 80% at 84% 92%, rgba(198, 186, 160, .24), transparent 60%),
        var(--pa-papel);
    color: var(--pa-tinta);
    font-family: 'Quicksand', sans-serif;
    -webkit-font-smoothing: antialiased;
}


/* ── que se pueda bajar ─────────────────────────────────────────────
   El resto del sitio son pantallas fijas, así que shop-entry.css pone
   overflow:hidden en #swup y, a partir de 1024 px, en el body entero. Esta
   página es una hoja larga: sin esto, todo lo que hay debajo del primer
   pliegue no existe.

   Y la que baja tiene que ser la ventana, no el body: si al body se le pone
   overflow:auto se convierte él en el contenedor, y entonces pageYOffset se
   queda en cero, position:fixed deja de ir con el scroll y la barra de arriba
   nunca se enciende. Al body, visible; el desplazamiento, al documento. */
html:has(body.pa-page),
html.pa-html {                       /* el respaldo, por si :has no está */
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
body.pa-page {
    height: auto !important;
    min-height: 100vh;
    /* los dos ejes a la vez: con overflow-x:hidden, el eje y «visible» se
       calcula como auto y volvemos a tener un contenedor donde no toca */
    overflow: visible !important;
}
body.pa-page #swup,
body.pa-page main.swup-transition-fade {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ── la barra de arriba, al bajar ───────────────────────────────────
   La misma que el Cuaderno: transparente mientras se está arriba y de vidrio
   esmerilado en cuanto se empieza a bajar, para que el logo y el menú no se
   queden flotando sobre el texto. Va por debajo de los dos (z-50) y por
   encima del pliego. */
.scroll-topbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 110px;
    background: rgba(246, 241, 230, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, .42);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .04);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
    z-index: 4;
}
body.scrolled .scroll-topbar { opacity: 1; }
@media (max-width: 1023px) { .scroll-topbar { display: none; } }

/* El logo y el menú van por encima del vidrio. Hay que decirlo aquí: la clase
   z-[50] que llevan en el marcado no sobrevivió a la purga de Tailwind, así
   que su z-index calculado es «auto» y una barra con z-index 4 les pasaría por
   delante, dejándolos borrosos debajo del cristal. */
body.pa-page .pa-logo,
body.pa-page .menu-container { z-index: 60; }

/* ── el pliego ─────────────────────────────────────────────────────
   Vive dentro del <main> del sitio, así que deja sitio arriba al logo y al
   menú, y se ensancha: setecientos veinte píxeles en una pantalla de mil
   ochocientos hacían una columna de periódico mal doblada. */
.pa-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 190px 6vw 110px;
}
@media (min-width: 1024px) {
    .pa-wrap { padding-top: 150px; }
}
@media (max-width: 1023px) {
    .pa-wrap { padding-top: 96px; }
}

.pa-top { padding-bottom: 26px; border-bottom: 1px solid var(--pa-filete); }
.pa-eyebrow {
    display: block;
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--pa-oro);
}
.pa-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(36px, 5.2vw, 66px);
    line-height: 1.04;
    margin: 16px 0 0;
    text-transform: lowercase;
}
/* La caja baja es un recurso de estilo, pero solo funciona donde el idioma la
   permite: en español y en neerlandés el día de la semana y el mes se escriben
   en minúscula, así que «jueves 30 de julio» está bien escrito. En inglés van
   en mayúscula, y «thursday 30 july» se lee como una falta. */
html[lang="en"] .pa-title { text-transform: none; }
.pa-title em { font-style: italic; color: var(--pa-vino); }
.pa-place {
    margin: 14px 0 0;
    font-size: 12px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--pa-suave);
}

/* ── el estado de la vendimia ──────────────────────────────────────
   Este rótulo flotaba en una esquina de la portada, donde era un adorno
   que se leía de reojo. Aquí abre el parte y va en su sitio: es lo único
   de esta hoja que no cambia en todo el día, así que se puede decir una
   vez, arriba y en grande. Tres estados —en espera, en marcha y hecha— y
   solo el de en marcha late, porque solo ese está pasando ahora. */
.pa-harvest {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    margin-top: 26px;
    padding: 16px 28px 15px;
    border: 1px solid var(--pa-oro);
    background: rgba(184, 151, 96, .10);
    font-size: clamp(12px, 1.15vw, 15px);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--pa-tinta);
    transition: background .25s ease, border-color .25s ease;
}
/* sin guion no hay chip: el hueco no deja un cajón vacío */
.pa-harvest:empty { display: none; }
/* cuando tiene texto, js/relojes.js lo convierte en botón: abre el panel de
   las diecinueve parcelas, una por una, con su fecha */
.pa-harvest[role="button"] { cursor: pointer; }
.pa-harvest[role="button"]:hover { background: rgba(184, 151, 96, .22); }
.pa-harvest.live[role="button"]:hover,
.pa-harvest.hecha[role="button"]:hover { background: rgba(110, 31, 37, .15); }
.pa-harvest:focus-visible {
    outline: 2px solid var(--pa-vino);
    outline-offset: 3px;
}
/* La flecha que avisa de que esto se pulsa. La llevaba el chip cuando vivía
   en la esquina de la portada; se viene con él. */
.pa-harvest[role="button"]::after {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    opacity: .6;
    transition: transform .3s ease, opacity .3s ease;
}
.pa-harvest[role="button"]:hover::after {
    transform: rotate(-45deg) translate(2px, -2px);
    opacity: 1;
}
.pa-harvest i {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pa-oro);
}
.pa-harvest.live,
.pa-harvest.hecha {
    border-color: var(--pa-vino);
    background: rgba(110, 31, 37, .07);
    color: var(--pa-vino);
}
.pa-harvest.live i,
.pa-harvest.hecha i { background: var(--pa-vino); }
.pa-harvest.live i { animation: paVendimiaLate 2.4s ease-in-out infinite; }
@keyframes paVendimiaLate {
    0%, 100% { box-shadow: 0 0 0 0 rgba(110, 31, 37, .30); }
    50%      { box-shadow: 0 0 0 7px rgba(110, 31, 37, 0); }
}
@media (max-width: 620px) {
    .pa-harvest {
        gap: 11px;
        margin-top: 22px;
        padding: 13px 18px 12px;
        letter-spacing: .16em;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pa-harvest.live i { animation: none; }
    .pa-harvest[role="button"]::after { transition: none; }
}

/* ── la oscilación ───────────────────────────────────────────────── */
.pa-swing { padding: 30px 0 26px; border-bottom: 1px solid var(--pa-filete); }
.pa-s-label, .pa-b-label, .pa-n-label {
    display: block;
    font-size: 12.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pa-suave);
}
.pa-s-big {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(64px, 15vw, 128px);
    line-height: .92;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}
.pa-s-big em {
    font-style: normal;
    font-family: 'Quicksand', sans-serif;
    font-size: .17em;
    letter-spacing: .12em;
    color: var(--pa-suave);
    margin-left: 8px;
    vertical-align: super;
}
.pa-s-sub {
    margin: 2px 0 0;
    font-size: 15.5px;
    letter-spacing: .04em;
    color: var(--pa-suave);
}

.pa-s-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0;
    margin: 0;
    border-bottom: 1px solid var(--pa-filete);
}
.pa-s-row > div {
    padding: 16px 16px 16px 0;
    border-right: 1px solid var(--pa-filete);
}
.pa-s-row > div:last-child { border-right: none; }
.pa-s-row dt {
    font-size: 12.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pa-suave);
}
.pa-s-row dd {
    margin: 5px 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 31px;
    font-variant-numeric: tabular-nums;
}

/* ── el aviso ────────────────────────────────────────────────────── */
.pa-note {
    padding: 26px 0;
    border-bottom: 1px solid var(--pa-filete);
}
.pa-n-text {
    margin: 10px 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(23px, 3.1vw, 31px);
    font-style: italic;
    line-height: 1.42;
    color: var(--pa-tinta);
    max-width: 46ch;
}
/* cuando hay algo que decidir, el aviso se subraya en granate */
body.pa-alerta .pa-n-text { color: var(--pa-vino); }


/* ── la oscilación y el aviso, uno al lado del otro ───────────────── */
.pa-hero {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) 1.2fr;
    gap: 0;
    align-items: end;
    padding: 34px 0 30px;
    border-bottom: 1px solid var(--pa-filete);
}
.pa-hero .pa-note {
    padding: 0 0 0 40px;
    margin-left: 40px;
    border-bottom: none;
    border-left: 1px solid var(--pa-filete);
}

/* ── los cuatro bloques, en rejilla ───────────────────────────────── */
.pa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--pa-filete);
}
.pa-grid .pa-block {
    padding: 28px 24px;
    border-left: 1px solid var(--pa-filete);
    display: flex;
    flex-direction: column;
}
.pa-grid .pa-block:first-child { padding-left: 0; border-left: none; }
.pa-grid .pa-block:last-child { padding-right: 0; }
.pa-grid .pa-track { margin-top: auto; }

@media (max-width: 1023px) {
    .pa-hero { grid-template-columns: 1fr; gap: 26px; }
    .pa-hero .pa-note { padding-left: 0; margin-left: 0; border-left: none; }
    .pa-grid { grid-template-columns: repeat(2, 1fr); }
    .pa-grid .pa-block:nth-child(3) { padding-left: 0; border-left: none; }
    .pa-grid .pa-block:nth-child(-n+2) { border-bottom: 1px solid var(--pa-filete); }
}
@media (max-width: 620px) {
    .pa-grid { grid-template-columns: 1fr; }
    .pa-grid .pa-block { padding-left: 0; padding-right: 0; border-left: none;
                         border-bottom: 1px solid var(--pa-filete); }
    .pa-grid .pa-block:last-child { border-bottom: none; }
}

/* ── los bloques de dos en dos ───────────────────────────────────── */
.pa-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--pa-filete);
}
.pa-block { padding: 26px 22px 26px 0; }
.pa-pair .pa-block + .pa-block {
    padding-left: 22px;
    padding-right: 0;
    border-left: 1px solid var(--pa-filete);
}
.pa-b-big {
    margin: 10px 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(35px, 5.2vw, 49px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pa-b-big em {
    font-style: normal;
    font-family: 'Quicksand', sans-serif;
    font-size: .3em;
    letter-spacing: .1em;
    color: var(--pa-suave);
}
.pa-b-text {
    margin: 10px 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20.5px;
    line-height: 1.45;
    color: var(--pa-tinta);
}
.pa-b-fine {
    margin: 6px 0 0;
    font-size: 15.5px;
    line-height: 1.62;
    letter-spacing: .01em;
    color: var(--pa-suave);
}
.pa-verdict { color: var(--pa-vino); font-style: italic; }

.pa-track {
    display: block;
    height: 1px;
    margin-top: 16px;
    background: var(--pa-filete);
}
.pa-track i {
    display: block;
    height: 1px;
    background: var(--pa-oro);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s cubic-bezier(.22, 1, .36, 1) .3s;
}

/* ── la luna ─────────────────────────────────────────────────────── */
.pa-moon { display: flex; flex-direction: column; }
.pa-moon-svg {
    width: 92px;
    height: 92px;
    margin: 14px 0 4px;
    color: var(--pa-tinta);
    opacity: .9;
}

/* ── la semana ───────────────────────────────────────────────────── */
.pa-week { padding: 30px 0 0; }
.pa-days {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
}
.pa-dia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 4px;
    border-right: 1px solid var(--pa-filete);
    opacity: 0;
    transform: translateY(8px);
    animation: pa-entra .6s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(var(--i) * 70ms + 200ms);
}
.pa-dia:last-child { border-right: none; }
@keyframes pa-entra { to { opacity: 1; transform: none; } }

.pa-dia.es-hoy { background: rgba(184, 151, 96, .09); }
.pa-d-dia {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-tinta);
}
.pa-dia.es-hoy .pa-d-dia { color: var(--pa-vino); font-weight: 600; }
.pa-d-fecha {
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--pa-suave);
}
/* la barra: la oscilación de ese día, que es lo que importa aquí */
.pa-d-barra {
    display: flex;
    align-items: flex-end;
    width: 3px;
    height: 74px;
    margin: 4px 0;
    background: rgba(106, 100, 89, .1);
}
.pa-d-barra i {
    display: block;
    width: 3px;
    height: 100%;
    background: var(--pa-oro);
    transform: scaleY(var(--h, 0));
    transform-origin: bottom center;
    transition: transform 1s cubic-bezier(.22, 1, .36, 1) .4s;
}
.pa-dia.es-hoy .pa-d-barra i { background: var(--pa-vino); }
.pa-d-osc {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
}
.pa-d-osc em { font-style: normal; font-size: .6em; color: var(--pa-suave); }
.pa-d-mm, .pa-d-agua {
    font-size: 12px;
    letter-spacing: .03em;
    color: var(--pa-suave);
    white-space: nowrap;
}
.pa-d-agua { color: #5d7f96; }
.pa-week-note { margin-top: 14px; }

/* ── pie ─────────────────────────────────────────────────────────── */
.pa-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 50px;
    padding-top: 22px;
    border-top: 1px solid var(--pa-filete);
}
.pa-foot a {
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pa-suave);
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    transition: color .3s ease, border-color .3s ease;
}
.pa-foot a:hover { color: var(--pa-vino); border-bottom-color: var(--pa-vino); }

/* ── sin red ─────────────────────────────────────────────────────── */
body.pa-sin-red .pa-swing,
body.pa-sin-red .pa-week { opacity: .35; }
body.pa-sin-red .pa-n-text { font-style: normal; color: var(--pa-suave); }

/* ── pantallas estrechas ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .pa-pair { grid-template-columns: 1fr; }
    .pa-pair .pa-block + .pa-block {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--pa-filete);
    }
    .pa-days { grid-template-columns: repeat(4, 1fr); }
    .pa-dia:nth-child(4) { border-right: none; }
    .pa-dia:nth-child(-n+3) { border-bottom: 1px solid var(--pa-filete); }
    .pa-dia:nth-child(4) { border-bottom: 1px solid var(--pa-filete); }
    .pa-d-barra { height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .pa-dia { animation: none; opacity: 1; transform: none; }
    .pa-track i, .pa-d-barra i { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════
   LAS GRÁFICAS

   Se dibujan solas cuando entran en pantalla, trazo a trazo, y en el mismo
   orden en que las haría una mano: primero la retícula, luego la referencia
   punteada, después la curva del año y al final el punto de hoy con su cifra.
   ════════════════════════════════════════════════════════════════════ */
.pa-graf {
    padding: 40px 0 34px;
    border-bottom: 1px solid var(--pa-filete);
}
.pa-graf-svg {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 20px;
    color: var(--pa-tinta);
    overflow: visible;
}

/* la retícula y los pies llegan de un soplo */
.pa-graf-svg .gr-malla,
.pa-graf-svg .gr-pies {
    opacity: 0;
    transition: opacity 1s ease;
}
.pa-graf-svg.is-drawn .gr-malla { opacity: 1; }
.pa-graf-svg.is-drawn .gr-pies { opacity: 1; transition-delay: 1.5s; }

/* la referencia punteada se dibuja primero, y despacio */
.pa-graf-svg .gr-normal {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
}
.pa-graf-svg.is-drawn .gr-normal {
    animation: pa-tinta 2.2s cubic-bezier(.4, .1, .3, 1) .2s forwards;
}

/* y la curva del año detrás, con su propio guion medido por el script */
.pa-graf-svg.is-drawn .gr-curva .pluma-trazo {
    animation: pa-tinta 2.4s cubic-bezier(.45, .05, .3, 1) .5s forwards;
}
@keyframes pa-tinta { to { stroke-dashoffset: 0; } }

/* el punto de hoy, al final: es la conclusión */
.pa-graf-svg .gr-hoy {
    opacity: 0;
    transform: scale(.4);
    transform-origin: center;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.pa-graf-svg.is-drawn .gr-hoy {
    opacity: 1;
    transform: none;
    transition-delay: 2.4s;
}

@media (prefers-reduced-motion: reduce) {
    .pa-graf-svg .gr-normal,
    .pa-graf-svg .pluma-trazo { stroke-dashoffset: 0 !important; animation: none !important; }
    .pa-graf-svg .gr-malla,
    .pa-graf-svg .gr-pies,
    .pa-graf-svg .gr-hoy { opacity: 1; transform: none; transition: none; }
}

/* ── las hileras de cifras: un rotulo y sus datos ──────────────────
   El filete del primer dato cae fuera de la columna de texto y lo recorta
   la propia seccion: asi los datos se pueden reordenar y envolver sin que
   haya que rehacer los bordes en cada tamano de pantalla. */
.pa-set {
    padding: 30px 0 26px;
    border-bottom: 1px solid var(--pa-filete);
    overflow: hidden;
}
.pa-set-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    row-gap: 24px;
    margin: 18px 0 0 -20px;
}
.pa-set-row > div {
    padding: 0 20px;
    border-left: 1px solid var(--pa-filete);
}
.pa-set-row dt {
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-suave);
    line-height: 1.45;
    min-height: 2.9em;
}
.pa-set-row dd {
    margin: 4px 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 34px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pa-set-big dd { font-size: clamp(40px, 5.6vw, 60px); }
.pa-set .pa-b-fine { margin-top: 20px; max-width: 62ch; }
.pa-set .pa-b-fine a {
    color: var(--pa-vino);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

/* el balance del agua, cuando sale en numeros rojos */
.pa-set dd.es-deficit { color: var(--pa-vino); }

@media (max-width: 620px) {
    .pa-set-row { grid-template-columns: 1fr 1fr; }
    .pa-set-row dt { min-height: 0; }
    .pa-set-big dd { font-size: 40px; }
}


/* ── las notas del parte ───────────────────────────────────────────────
   La parte didáctica. No es letra pequeña de contrato: es lo que convierte
   una tabla de números en algo que se entiende, así que va con el mismo
   cuerpo que se lee un artículo, y a dos columnas para que no parezca un
   apéndice legal. */
.pa-notas {
    padding: 40px 0 10px;
    border-top: 1px solid var(--pa-filete);
    margin-top: 46px;
}
.pa-notas-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    row-gap: 38px;
    margin: 26px 0 0;
}
.pa-nota dt {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px;
    line-height: 1.16;
    color: var(--pa-tinta);
}
.pa-nota dt em { font-style: italic; color: var(--pa-vino); }
.pa-nota dd {
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 1.66;
    color: rgba(63, 58, 51, .78);
    max-width: 54ch;
}
.pa-nota dd b { font-weight: 500; color: var(--pa-tinta); }
.pa-nota dd a {
    color: var(--pa-vino);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}
/* la primera nota es la que contesta de dónde sale el dato: va entera */
.pa-nota.es-ancha { grid-column: 1 / -1; }
.pa-nota.es-ancha dt { font-size: 31px; }
.pa-nota.es-ancha dd { max-width: 92ch; }

/* el reparto de las treinta y seis, en cifras.
   El filete de la primera cae fuera de la columna de texto y lo recorta la
   propia nota, igual que en las hileras de datos: así se pueden reordenar y
   envolver sin rehacer los bordes a cada tamaño de pantalla. */
.pa-nota { overflow: hidden; }
.pa-pueblos {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: 24px;
    margin: 22px 0 0 -22px;
}
.pa-pueblo {
    padding: 0 22px;
    border-left: 1px solid var(--pa-filete);
}
.pa-pueblo b {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 38px;
    line-height: 1;
    color: var(--pa-tinta);
}
.pa-pueblo span {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-suave);
}

@media (max-width: 900px) {
    .pa-notas-lista { grid-template-columns: 1fr; row-gap: 32px; }
    .pa-nota.es-ancha dt { font-size: 27px; }
}
@media (max-width: 620px) {
    /* «Fresnillo de las Dueñas» no cabe al lado de otro, y en fila rompía en
       uno, dos y uno. Dos y dos, que además suman treinta y seis a la vista. */
    .pa-pueblos { display: grid; grid-template-columns: 1fr 1fr; }
}

/* mientras una cifra sube va un poco más clara, y al posarse se asienta:
   se nota que ha llegado, sin que nadie tenga que mirar el número */
.pa-set-row dd, .pa-s-row dd { transition: color .5s ease; }
.pa-set-row dd:not(.es-contado), .pa-s-row dd:not(.es-contado) { color: rgba(63, 58, 51, .72); }