/* ════════════════════════════════════════════════════════════════════
   EL SUBSUELO

   Toda la interfaz flota sobre el corte y se aparta de él. Nada de cajas
   ni de paneles: rótulos sueltos en los márgenes, como las anotaciones a
   lápiz de un cuaderno de campo. Al bajar, la página se oscurece con la
   escena, porque el que baja pierde la luz.

   ESTOS RÓTULOS SE ESCRIBIERON PARA UNA ESCENA NEGRA, y la escena ya no lo
   es: el cielo es crema y la roca casi blanca. Un texto hueso al treinta por
   ciento sobre un cielo crema no se lee por mucho que se agrande, así que
   aquí se atacan las tres causas juntas: el cuerpo, la opacidad y el fondo.

   El fondo se resuelve con un velo. Cada grupo de rótulos lleva detrás su
   propio degradado, que nace donde está el texto y muere antes de llegar al
   corte: así la escena no se ensucia con una caja y el texto siempre cae
   sobre algo oscuro. Y encima, un halo de tinta en la propia letra, para los
   bordes donde el velo ya se ha apagado. Nada de paneles: sigue sin haber
   una sola caja en pantalla.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --ink: #1a1a1a;
    --gold: #B89760;
    --burgundy: #6E1F25;
    --hueso: #F4EFE4;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;                 /* aquí no se hace scroll: se desciende */
    background: #0d0a07;
    color: var(--hueso);
    font-family: 'Quicksand', sans-serif;
    -webkit-font-smoothing: antialiased;
}

#rzStage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}
#rzStage:active { cursor: grabbing; }

/* ── cabecera ────────────────────────────────────────────────────── */
.rz-head {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 34px;
    pointer-events: none;
}
.rz-head::before {
    content: '';
    position: absolute;
    inset: 0 0 -50px 0;
    z-index: -1;
    background: linear-gradient(to bottom,
                rgba(12, 9, 6, .60), rgba(12, 9, 6, .26) 54%, transparent);
    pointer-events: none;
}
.rz-head > * { pointer-events: auto; }
.rz-back, .rz-fwd {
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(12, 9, 6, .6);
    color: rgba(248, 244, 235, .9);
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    transition: color .3s ease, border-color .3s ease;
}
.rz-back:hover, .rz-fwd:hover { color: var(--gold); border-bottom-color: var(--gold); }
.rz-brand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(12, 9, 6, .6);
    color: rgba(248, 244, 235, .8);
}

/* ── el título, que se retira en cuanto se empieza a bajar ───────── */
.rz-intro {
    position: fixed;
    left: 34px;
    top: 46%;
    transform: translateY(-50%);
    z-index: 9;
    max-width: 32ch;
    pointer-events: none;
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}
body.rz-deep .rz-intro {
    opacity: 0;
    transform: translateY(-50%) translateX(-24px);
    pointer-events: none;
}
/* el velo del título: un óvalo que se apaga hacia el centro del corte */
.rz-intro::before {
    content: '';
    position: absolute;
    inset: -44px -100px -44px -64px;
    z-index: -1;
    background: radial-gradient(88% 92% at 20% 50%,
                rgba(12, 9, 6, .72), rgba(12, 9, 6, .34) 54%, transparent 82%);
    pointer-events: none;
}
.rz-eyebrow {
    display: block;
    font-size: 12.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(12, 9, 6, .7);
    color: #e8c58e;
}
.rz-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(38px, 5.2vw, 66px);
    line-height: 1.04;
    margin: 18px 0 0;
    text-shadow: 0 2px 12px rgba(12, 9, 6, .55);
    color: #fdfaf2;
}
.rz-title em { font-style: italic; color: var(--gold); }
.rz-lede {
    margin: 22px 0 0;
    max-width: 40ch;
    font-size: 16.5px;
    line-height: 1.7;
    text-shadow: 0 1px 3px rgba(12, 9, 6, .6);
    color: rgba(248, 244, 235, .92);
}

/* ── la regla de profundidad, pegada al borde ─────────────────────── */
.rz-ruler {
    position: fixed;
    right: 40px;
    top: 42%;
    transform: translateY(-50%);
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.rz-ruler::before {
    content: '';
    position: absolute;
    inset: -34px -46px -34px -46px;
    z-index: -1;
    background: radial-gradient(72% 100% at 62% 50%,
                rgba(12, 9, 6, .62), rgba(12, 9, 6, .3) 52%, transparent 82%);
    pointer-events: none;
}
.rz-r-top, .rz-r-bot {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(12, 9, 6, .7);
    color: rgba(248, 244, 235, .85);
    white-space: nowrap;
}
.rz-r-track {
    position: relative;
    width: 2px;
    height: 32vh;
    background: rgba(248, 244, 235, .32);
}
.rz-r-track i {
    position: absolute;
    inset: 0;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top center;
}

/* ── la lectura: profundidad, capa y nota ─────────────────────────── */
.rz-read {
    position: fixed;
    right: 40px;
    bottom: 106px;
    z-index: 9;
    text-align: right;
    pointer-events: none;
    max-width: 34ch;
}
.rz-read::before {
    content: '';
    position: absolute;
    inset: -34px -50px -40px -76px;
    z-index: -1;
    background: radial-gradient(112% 122% at 94% 92%,
                rgba(12, 9, 6, .72), rgba(12, 9, 6, .38) 48%, transparent 86%);
    pointer-events: none;
}
.rz-depth {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 64px;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(12, 9, 6, .6);
    color: #fdfaf2;
    font-variant-numeric: tabular-nums;
}
.rz-layer {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(12, 9, 6, .7);
    color: #dcb87c;
}
.rz-note {
    display: block;
    margin-top: 8px;
    font-size: 15.5px;
    line-height: 1.62;
    text-shadow: 0 1px 3px rgba(12, 9, 6, .68);
    color: rgba(248, 244, 235, .9);
}

/* al cambiar de capa, el rótulo parpadea una vez: se ha cruzado un límite */
@keyframes rz-flash {
    0%   { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: none; }
}
.rz-flash { animation: rz-flash .55s cubic-bezier(.22, 1, .36, 1); }

/* ── parcelas ────────────────────────────────────────────────────── */
/* ── el índice de las treinta y seis ──────────────────────────────
   Ocho parcelas cabían en una fila; treinta y seis, no. Cerrado es un
   renglón con la finca actual; abierto, tres columnas —una por pueblo— con
   sus doce fincas y la altitud de cada una. Nada amontonado y nada oculto:
   se ve el conjunto de la casa de un vistazo. */
.rz-idx {
    position: fixed;
    left: 34px;
    bottom: 30px;
    z-index: 11;
}
.rz-idx-boton {
    display: flex;
    align-items: baseline;
    gap: 14px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(248, 244, 235, .26);
    padding: 0 0 7px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: border-color .3s ease;
}
.rz-idx-boton:hover { border-bottom-color: #e6c58c; }
/* ── EL VELO ──
   La misma tierra con la que se cerró el mapa: aquí abre la zanja. Sube y
   se va por arriba —seguimos bajando— o baja y tapa, si lo que toca es
   subir. El color lo trae la parcela. */
.rz-velo {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    transition: transform .8s cubic-bezier(.42, 0, .22, 1);
}
.rz-velo.sale { transform: translateY(-100%); }
.rz-velo.espera { transform: translateY(-100%); transition: none; }
.rz-velo.tapa { transform: none; }

/* ── EL SELLO ──
   La silueta de la finca, dibujada a pluma con el mismo generador que la
   lámina de la vendimia y el mapa aéreo: aquí abajo, a dos metros de
   profundidad, recuerda de qué parcela es esta tierra. */
.rz-sello {
    width: 42px; height: 42px;
    flex: 0 0 auto;
    align-self: center;
    opacity: .85;
}
.rz-idx-cual {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 27px;
    font-style: italic;
    color: #e6c58c;
    text-shadow: 0 1px 3px rgba(12, 9, 6, .75);
}
.rz-idx-donde {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(248, 244, 235, .72);
    text-shadow: 0 1px 3px rgba(12, 9, 6, .75);
}
.rz-idx-abre {
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(248, 244, 235, .58);
    text-shadow: 0 1px 3px rgba(12, 9, 6, .75);
}
.rz-idx-abre::after { content: ' 95'; }

/* el panel: sube desde el renglón y se apoya en un vidrio esmerilado */
.rz-idx-panel {
    position: absolute;
    left: -22px;
    bottom: calc(100% + 16px);
    display: flex;
    gap: 30px;
    padding: 26px 30px 22px;
    border-radius: 3px;
    background: rgba(14, 10, 7, .88);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
            backdrop-filter: blur(16px) saturate(130%);
    box-shadow: 0 22px 60px -28px rgba(0, 0, 0, .9);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
    max-height: 68vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
body.rz-idx-on .rz-idx-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.rz-idx-col {
    display: flex;
    flex-direction: column;
    min-width: 176px;
    position: relative;
}
.rz-idx-pueblo {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #e6c58c;
    padding-bottom: 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(248, 244, 235, .18);
}
/* las doce de cada pueblo, contadas: es un dato de la casa */
.rz-idx-cuenta {
    position: absolute;
    top: 0; right: 0;
    font-size: 11px;
    letter-spacing: .1em;
    color: rgba(248, 244, 235, .4);
}
.rz-idx-finca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    padding: 5px 8px 5px 10px;
    margin-left: -10px;
    cursor: pointer;
    text-align: left;
    transition: background .25s ease, border-color .25s ease;
}
.rz-idx-finca em {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: normal;
    font-size: 17px;
    color: rgba(248, 244, 235, .88);
    white-space: nowrap;
}
.rz-idx-finca i {
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: .08em;
    color: rgba(248, 244, 235, .42);
    white-space: nowrap;
}
.rz-idx-finca:hover { background: rgba(248, 244, 235, .07); }
.rz-idx-finca.on {
    border-left-color: #e6c58c;
    background: rgba(230, 197, 140, .1);
}
.rz-idx-finca.on em { color: #e6c58c; font-style: italic; }

.rz-meta {
    position: fixed;
    left: 34px;
    bottom: 92px;
    z-index: 9;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(12, 9, 6, .7);
    color: rgba(248, 244, 235, .8);
    pointer-events: none;
}

.rz-hint {
    position: fixed;
    left: 50%;
    top: 86px;
    transform: translateX(-50%);
    z-index: 9;
    margin: 0;
    padding: 7px 18px;
    border-radius: 20px;
    background: rgba(12, 9, 6, .42);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    font-size: 12.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(12, 9, 6, .7);
    color: rgba(248, 244, 235, .84);
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .6s ease;
}
body.rz-deep .rz-hint { opacity: 0; }

/* ── la frase que espera en la roca madre ────────────────────────── */
.rz-end {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 9;
    margin: 0;
    max-width: 24ch;
    transform: translate(-50%, -50%) translateY(14px);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1.28;
    text-align: center;
    color: var(--hueso);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
body.rz-fondo .rz-end { opacity: 1; transform: translate(-50%, -50%); }

/* ── pantallas estrechas ─────────────────────────────────────────── */
@media (max-width: 820px) {
    .rz-head { padding: 16px 18px; }
    .rz-brand { display: none; }
    .rz-intro { left: 18px; right: 18px; top: 24%; max-width: none; }
    .rz-title { font-size: clamp(28px, 8vw, 40px); }
    .rz-lede { font-size: 12px; }
    .rz-ruler { right: 16px; }
    .rz-r-track { height: 30vh; }
    .rz-r-top, .rz-r-bot { display: none; }
    .rz-read { right: 18px; bottom: 96px; }
    .rz-depth { font-size: 44px; }
    .rz-layer { font-size: 13.5px; }
    .rz-note { font-size: 14px; }
    .rz-plots button { font-size: 17px; }
    .rz-idx { left: 18px; right: 18px; bottom: 26px; }
    .rz-idx-boton { flex-wrap: wrap; gap: 4px 12px; }
    .rz-idx-cual { font-size: 22px; }
    .rz-idx-panel {
        left: 0; right: 0;
        flex-direction: column;
        gap: 18px;
        padding: 20px 18px 16px;
        max-height: 62vh;
    }
    .rz-idx-col { min-width: 0; }
    .rz-idx-finca em { font-size: 15px; }
    .rz-meta { bottom: 84px; font-size: 11px; gap: 12px; padding: 0 18px; }
    /* la pista medía 461 px en un móvil de 375: sin dejarla partir, se
       salía cuarenta y tres píxeles por cada lado */
    .rz-hint {
        top: 58px;
        font-size: 11px;
        letter-spacing: .1em;
        white-space: normal;
        max-width: 84vw;
        text-align: center;
        line-height: 1.5;
        border-radius: 14px;
        padding: 7px 14px;
    }
    body.rz-page::after { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .rz-flash { animation: none; }
    .rz-intro { transition: opacity .2s ease; }
}

/* ════════════════════════════════════════════════════════════════════
   EL COMPARADOR — dos metros, uno al lado del otro

   Treinta y seis calicatas que solo se ven de una en una se callan lo
   único que tenían que decir: que no se parecen. Aquí van hasta tres a la
   misma escala, y la diferencia se ve sin leer una palabra.
   ════════════════════════════════════════════════════════════════════ */
.rz-comp-abre {
    position: fixed;
    left: 34px;
    bottom: 62px;
    z-index: 11;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(248, 244, 235, .26);
    padding: 0 0 4px;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(248, 244, 235, .66);
    transition: color .3s ease, border-color .3s ease;
}
.rz-comp-abre:hover { color: #e6c58c; border-bottom-color: #e6c58c; }

.rz-comp {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(9, 7, 4, .84);
}
.rz-comp[hidden] { display: none; }
.rz-comp-caja {
    width: min(720px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 26px 28px 22px;
    background: #17120b;
    border: 1px solid rgba(230, 197, 140, .22);
}
.rz-comp-tit {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 25px;
    font-style: italic;
    color: #e6c58c;
}
.rz-comp-cols {
    display: flex;
    gap: 16px;
    margin: 20px 0 0;
    height: 300px;
}
/* la regla de los dos metros, marcada cada medio */
.rz-comp-regla {
    position: relative;
    flex: 0 0 46px;
    margin-top: 34px;      /* a la altura de las barras, no de los nombres */
}
.rz-comp-regla span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-family: 'Quicksand', sans-serif;
    font-size: 9.5px;
    letter-spacing: .06em;
    color: rgba(248, 244, 235, .42);
}
.rz-comp-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.rz-comp-nombre {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 17px;
    font-style: italic;
    color: #f0e6d2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rz-comp-donde {
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .06em;
    color: rgba(248, 244, 235, .48);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rz-comp-barra {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(9, 7, 4, .5);
}
.rz-comp-barra span {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 7px;
}
.rz-comp-barra em {
    font-family: 'Quicksand', sans-serif;
    font-style: normal;
    font-size: 10px;
    line-height: 1.25;
    color: rgba(255, 255, 255, .93);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.rz-comp-barra i {
    font-style: normal;
    font-family: 'Quicksand', sans-serif;
    font-size: 9px;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .72);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.rz-comp-pista {
    display: block;
    margin: 20px 0 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: rgba(248, 244, 235, .45);
}
.rz-comp-elige { display: flex; flex-wrap: wrap; gap: 6px; }
.rz-comp-uno {
    background: none;
    border: 1px solid rgba(248, 244, 235, .2);
    padding: 4px 9px;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    color: rgba(248, 244, 235, .62);
    transition: all .25s ease;
}
.rz-comp-uno:hover { border-color: #e6c58c; color: #e6c58c; }
.rz-comp-uno.on { background: #e6c58c; border-color: #e6c58c; color: #17120b; }
.rz-comp-cerrar {
    margin: 18px 0 0;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(248, 244, 235, .3);
    padding: 0 0 3px;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(248, 244, 235, .7);
}
.rz-comp-cerrar:hover { color: #e6c58c; border-bottom-color: #e6c58c; }

@media (max-width: 720px) {
    .rz-comp-abre { left: 20px; bottom: 54px; font-size: 10.5px; }
    .rz-comp-caja { padding: 20px 18px 18px; }
    .rz-comp-cols { height: 240px; gap: 10px; }
    .rz-comp-regla { flex-basis: 34px; }
    .rz-comp-barra em { font-size: 9px; }
    .rz-comp-barra i { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   LA SONDA — la misma regla en el mapa y en la calicata

   El mapa aéreo y el corte del suelo no son dos páginas: son dos alturas
   del mismo sitio. Esta regla lo dice sin explicarlo. La cuarta parte de
   arriba es el aire —de donde se mira el mapa— y las otras tres son los
   dos metros de tierra. La aguja dice dónde estás, y cada marca lleva.
   ════════════════════════════════════════════════════════════════════ */
.vc-sonda {
    position: fixed;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 74px;
    height: 226px;
    z-index: 12;
    pointer-events: none;
}
.vc-sonda-linea {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(128, 128, 128, .18) 0%, rgba(128, 128, 128, .5) 24%,
        rgba(128, 128, 128, .5) 100%);
}
.vc-sonda-marca {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 4px 3px 0;
    background: none;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    font-family: 'Quicksand', sans-serif;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .3s ease, opacity .3s ease;
}
.vc-sonda-marca i {
    display: block;
    width: 11px;
    height: 1px;
    flex: 0 0 auto;
    background: currentColor;
    opacity: .75;
}
.vc-sonda-marca[disabled] { cursor: default; opacity: .3; }
/* la aguja: dónde estás ahora mismo */
.vc-sonda-aguja {
    position: absolute;
    left: 1px;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    transition: top .45s cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 900px) { .vc-sonda { display: none; } }

/* en la zanja la tinta es clara, que el fondo es tierra oscura */
.vc-sonda-marca { color: rgba(248, 244, 235, .55); }
.vc-sonda-marca:not([disabled]):hover { color: #e6c58c; }
.vc-sonda-aguja { background: #e6c58c; box-shadow: 0 0 0 3px rgba(230, 197, 140, .2); }

/* ══ EL MENÚ DEL SITIO ══
   El markup y site-menu.css son los MISMOS que en el resto de la web.
   La hoja Tailwind compilada no puede entrar aquí (su reset global
   pisaría la escena), así que las utilidades que el menú usa vienen
   copiadas de ella con sus valores exactos, y solo ellas. */
.menu-mobile{display:flex;flex-direction:row;justify-content:space-around;align-items:center;
    height:55px;position:fixed;top:0;left:0;width:100%;color:#000;
    background:rgba(244,241,231,.6);z-index:999;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.menu-mobile a{color:#000;letter-spacing:.1em;text-transform:uppercase;text-align:center;
    font-family:'Quicksand',sans-serif;font-size:16px;text-decoration:none}
.menu-container{display:none;font-size:16px}
@media (min-width:1024px){
    .menu-mobile{display:none}
    .menu-container{display:flex;flex-direction:column;position:fixed;top:50px;right:20px;z-index:15}
}
@media (min-width:1280px){.menu-container{right:50px}}
.menu-container .menu-items{letter-spacing:.05em;font-size:80%}
@media (min-width:1280px){.menu-container .menu-items{font-size:100%}}
.menu-container .menu-items a,
.menu-container .menu-items span{position:relative;display:inline-block;margin:0 .75rem;
    text-align:center;color:#000;padding-bottom:.1rem;text-decoration:none}
nav.menu-container .menu-items .menu-item{cursor:pointer;letter-spacing:.2em;
    text-transform:uppercase;transition-duration:.3s;
    transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function:cubic-bezier(.4,0,.2,1)}

/* ══ LA LÁMINA ══
   La capa translúcida tras el menú, pedida expresamente: el mismo marfil
   con desenfoque de la barra móvil, tendido de lado a lado, para que el
   menú se lea sobre cualquier cielo y cualquier tierra. */
.vc-menu-lamina{display:none}
@media (min-width:1024px){
    .vc-menu-lamina{display:block;position:fixed;top:0;left:0;right:0;height:84px;
        background:rgba(244,241,231,.6);z-index:14;
        -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
}

/* la cabecera de la zanja baja para dejar sitio a la lámina y a la barra */
.rz-head { padding-top: 92px; }
@media (max-width: 1023px) { .rz-head { padding-top: 66px; } }
/* y la pista baja con ella: a 86 px se montaba sobre el nombre de la casa */
@media (min-width: 1024px) { .rz-hint { top: 134px; } }

/* ══ EL LOGOTIPO ══
   El mismo wordmark de la esquina de todas las páginas; el tamaño lo
   gobierna site-menu.css (.logo_head), como en el resto del sitio. */
.vc-logo{position:fixed;top:41px;left:26px;z-index:16;display:block}
.vc-logo img{display:block;height:auto;width:100%}
@media (max-width:1023px){
    .vc-logo{top:66px;left:50%;transform:translateX(-50%)}
}