/* ════════════════════════════════════════════════════════════════════
   TREINTA Y SEIS RELOJES
   La cuenta atrás de la home dice un número. Al abrirla se ve la verdad:
   no hay una fecha de vendimia, hay treinta y seis, y entre la primera y
   la última pasan siete semanas.

   Todo es tipografía y dos propiedades animables —transform y opacity—,
   de modo que la escena entera corre en el compositor y no baja de 60fps
   en un teléfono modesto. No hay WebGL aquí: el mapa 3D ya existe, y a él
   se llega haciendo clic en una parcela.
   ════════════════════════════════════════════════════════════════════ */

.rl-scrim {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #FBF9F4;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s .5s;
}
.rl-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease, visibility 0s 0s;
}

/* La apertura nace en el punto exacto del clic, como la ceremonia de tinta
   de los popups. Las dos variables las escribe el script. */
@supports (clip-path: circle(1px at 1px 1px)) {
    .rl-scrim {
        clip-path: circle(0% at var(--rl-x, 50%) var(--rl-y, 50%));
        transition: clip-path .85s cubic-bezier(.65, 0, .35, 1),
                    opacity .35s ease, visibility 0s .85s;
    }
    .rl-scrim.is-open {
        clip-path: circle(150% at var(--rl-x, 50%) var(--rl-y, 50%));
        transition: clip-path .95s cubic-bezier(.22, 1, .36, 1),
                    opacity .3s ease, visibility 0s 0s;
    }
}

.rl-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 92px 6vw 120px;
}

/* ── cabecera ────────────────────────────────────────────────────── */
.rl-eyebrow {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 9.5px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold, #B89760);
}
.rl-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(34px, 5.4vw, 68px);
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--ink, #1a1a1a);
    margin: 20px 0 0;
}
.rl-title em { font-style: italic; color: var(--burgundy, #6E1F25); }

.rl-lede {
    max-width: 60ch;
    margin: 26px 0 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    line-height: 1.72;
    color: rgba(26, 26, 26, .62);
}

/* ── filtros ─────────────────────────────────────────────────────── */
.rl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    align-items: center;
    margin: 40px 0 0;
    padding: 0 0 26px;
    border-bottom: 1px solid rgba(26, 26, 26, .12);
}
.rl-filters .sep {
    width: 1px;
    height: 15px;
    margin: 0 10px;
    background: rgba(26, 26, 26, .16);
}
.rl-filters button {
    background: none;
    border: 1px solid transparent;
    padding: 6px 13px;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, .5);
    transition: color .3s ease, border-color .3s ease;
}
.rl-filters button:hover { color: var(--ink, #1a1a1a); }
.rl-filters button.on {
    color: var(--ink, #1a1a1a);
    border-color: rgba(184, 151, 96, .7);
}

/* ── cuenta viva ─────────────────────────────────────────────────── */
.rl-count {
    margin: 22px 0 4px;
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, .42);
}

/* ── la lista ────────────────────────────────────────────────────── */
.rl-list { list-style: none; margin: 0; padding: 0; }

.rl-row {
    display: grid;
    grid-template-columns: 30px minmax(120px, 1.15fr) minmax(96px, .8fr) minmax(90px, 2.4fr) 52px 78px;
    align-items: center;
    gap: 0 16px;
    width: 100%;
    padding: 13px 0;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(26, 26, 26, .07);
    text-align: left;
    cursor: pointer;
    color: inherit;
    /* la entrada escalonada: cada fila llega un poco después que la anterior */
    opacity: 0;
    transform: translateY(9px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1),
                background-color .3s ease;
}
.rl-scrim.is-in .rl-row {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i) * 26ms + 180ms);
}
.rl-row:hover { background: rgba(184, 151, 96, .07); }
/* el filtro esconde la fila entera, y la fila es el <li>, no el botón */
.rl-list li.is-hidden { display: none; }

.rl-num {
    font-family: 'Quicksand', sans-serif;
    font-size: 9.5px;
    letter-spacing: .14em;
    color: rgba(26, 26, 26, .3);
}
.rl-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px;
    line-height: 1.15;
    color: var(--ink, #1a1a1a);
}
.rl-town {
    font-family: 'Quicksand', sans-serif;
    font-size: 9.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, .42);
}

/* la barra: una escala común, de modo que la fila mide lo que falta */
.rl-track {
    position: relative;
    height: 1px;
    background: rgba(26, 26, 26, .1);
}
.rl-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    height: 1px;
    background: var(--gold, #B89760);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.rl-scrim.is-in .rl-bar {
    transform: scaleX(var(--w));
    transition-delay: calc(var(--i) * 26ms + 260ms);
}
.rl-row[data-var="white"] .rl-bar { background: rgba(26, 26, 26, .34); }

/* El punto de variedad viaja en el extremo de la barra: vive dentro de ella,
   pegado a su borde derecho. Como el padre se estira con scaleX(--w), el
   punto se deformaría; se le devuelve la forma con la escala inversa. El
   resultado es que crece desde nada mientras avanza, y llega redondo. */
.rl-dot {
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    margin: -2.5px -2.5px 0 0;
    border-radius: 50%;
    background: var(--burgundy, #6E1F25);
    transform: scaleX(calc(1 / var(--w)));
}
.rl-row[data-var="white"] .rl-dot { background: var(--gold, #B89760); }

.rl-days {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    text-align: right;
    color: var(--ink, #1a1a1a);
    font-variant-numeric: tabular-nums;
}
.rl-date {
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .12em;
    text-align: right;
    color: rgba(26, 26, 26, .5);
    white-space: nowrap;
}

/* parcela ya vendimiada: se apaga, pero no desaparece */
.rl-row.is-picked { opacity: .32; }
.rl-row.is-picked .rl-bar { background: rgba(26, 26, 26, .2); }
.rl-row.is-picked .rl-days { color: var(--burgundy, #6E1F25); font-size: 13px; }
.rl-scrim.is-in .rl-row.is-picked { opacity: .32; }

/* la que se vendimia hoy */
.rl-row.is-today .rl-name { color: var(--burgundy, #6E1F25); font-style: italic; }
.rl-row.is-today .rl-bar { background: var(--burgundy, #6E1F25); height: 2px; }

/* ── la nota que se despliega al pasar por encima ─────────────────── */
.rl-note {
    grid-column: 2 / -1;
    max-height: 0;
    overflow: hidden;
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    line-height: 1.7;
    color: rgba(26, 26, 26, .5);
    transition: max-height .45s ease, margin .45s ease;
}
.rl-row:hover .rl-note,
.rl-row:focus-visible .rl-note { max-height: 60px; margin-top: 7px; }

.rl-hint {
    margin: 34px 0 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, .34);
}

/* ── cerrar ──────────────────────────────────────────────────────── */
.rl-close {
    position: fixed;
    top: 26px;
    right: 30px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(26, 26, 26, .18);
    border-radius: 50%;
    cursor: pointer;
    transition: transform .45s ease, background .3s ease;
}
.rl-close:hover { transform: rotate(90deg); background: rgba(26, 26, 26, .05); }

/* El chip de la vendimia ya no es un adorno de la portada: vive en la
   cabecera del parte y lleva su ropa —los tres estados, el punto, la flecha
   de que se puede pulsar— en css/parte.css, con la clase .pa-harvest. */

/* ── pantallas estrechas ─────────────────────────────────────────── */
@media (max-width: 860px) {
    .rl-inner { padding: 74px 6vw 90px; }
    .rl-row {
        grid-template-columns: 26px 1fr 46px 66px;
        gap: 2px 12px;
    }
    .rl-town { grid-column: 2; font-size: 9px; }
    .rl-track { grid-column: 2 / -1; margin-top: 8px; }
    .rl-days { grid-row: 1; grid-column: 3; }
    .rl-date { grid-row: 1; grid-column: 4; }
    .rl-note { grid-column: 2 / -1; }
    .rl-close { top: 16px; right: 16px; }
}

/* ── quien pide menos movimiento, recibe menos movimiento ────────── */
@media (prefers-reduced-motion: reduce) {
    .rl-scrim,
    .rl-scrim.is-open {
        clip-path: none;
        transition: opacity .25s ease, visibility 0s;
    }
    .rl-row,
    .rl-scrim.is-in .rl-row { transform: none; transition-delay: 0s !important; }
    .rl-bar,
    .rl-dot,
    .rl-scrim.is-in .rl-bar,
    .rl-scrim.is-in .rl-dot { transition-duration: .01ms !important; transition-delay: 0s !important; }
}


/* ════════════════════════════════════════════════════════════════════
   LA HOJA DE DEBAJO, QUIETA
   Con el panel abierto nadie debe desplazar la página que hay detrás. En la
   portada bastaba con el overflow del body, porque era una pantalla que no
   se movía; en el parte la hoja es larga, quien desplaza es el documento y
   parte.css fija su propio overflow con !important —y con :has(), que pesa
   más que una clase suelta—. De ahí que aquí vayan los selectores largos y
   el !important: solo muerden mientras el panel está abierto.
   ════════════════════════════════════════════════════════════════════ */
html.rl-abierto,
html.pa-html.rl-abierto,
html:has(body.pa-page).rl-abierto,
body.rl-abierto,
body.pa-page.rl-abierto {
    overflow: hidden !important;
}