/* index.wine map - estilos. Las fuentes van en fonts/fonts.css */
  :root{
    --bg:#F1F1EE;
    --paper:#F1F1EE;
    /* Las tres franjas -sider, informe, mapa- miden lo mismo */
    --col:calc(100vw / 3);
    /* Margen izquierdo unico del sider. Marca, reclamo, mercados, buscador,
       recuento, lecturas y pie cuelgan todos de la misma vertical: antes cada
       bloque llevaba su propio valor (52 la marca, 30 los controles, 22 las
       lecturas) y los bordes izquierdos no coincidian. */
    --pad-x:clamp(22px, calc(var(--col) * .096), 52px);
    --ink:#1c1714;
    --ink-soft:#5c5249;
    --line:#ddd3c4;
    /* Antes rojo (#B42522). Todo lo que iba en rojo va ahora en tinta; el
       color solo aparece en el mouse over, barajado desde HOVER_TONES
       (editorial.js), que escribe --hov y --hov-fg en el elemento. Sin
       ellas, el hover cae en tinta/papel. */
    --wine:#1c1714;
    --wine-deep:#1c1714;
    --wine-light:#B9AFA5;
    --grey:#8c857d;
    /* --hov y --hov-fg no se declaran aqui a proposito: una propiedad
       personalizada se resuelve donde se declara, y un alias en :root
       quedaria fijado en tinta antes de que el elemento reciba su color. Las
       reglas :hover leen var(--hov, ...) directamente. */
    --portfolio:#3F7A4E;
    --portfolio-light:#7faa88;
    --gold:#a8814a;
    --accent:#8a3340;
    --green:#E8590C;
    --green-light:#a39588;
    --manso:#4FA88F;
    --manso-light:#6b85a8;
    --massal:#B5179E;
    --massal-light:#a87aab;
    /* Fondo del cajon del carrito (stocks.js). El del atlas es el papel de la
       pagina; el rosa de la tienda vuelve con un solo cambio: #E9C2BD. */
    --cart-bg:var(--paper);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Circular',sans-serif;
    background:var(--bg);
    color:var(--ink);
    display:flex;
    height:100vh;
    min-height:600px;
    overflow:hidden;
  }
  /* ---------- Sidebar ---------- */
  #panel{
    width:var(--col);min-width:var(--col);height:100%;
    background:var(--paper);
    border-right:1px solid var(--line);
    display:flex;flex-direction:column;
    /* Por encima del #report para que este salga por detras del sider */
    position:relative;z-index:1300;
  }
  /* Cabecera del sider, a proporcion de la captura de referencia (columna de
     ~500px): marca 38px, reclamo 31px, subtitulo 15.5px, margen 48px. Se
     escala con el ancho de la franja para que la proporcion se mantenga. */
  .brand{
    padding:clamp(28px, calc(var(--col) * .096), 52px) var(--pad-x) 8px;
  }
  /* Marca de version. El sitio acaba de publicarse y conviene decirlo, pero
     un cartel de "en construccion" invita a volver otro dia. Esto es lo
     contrario: una nota al margen del wordmark, en el rojo de la casa, que
     dice que lo que hay delante es de verdad y todavia se esta moviendo.
     Para quitarla: borrar los dos <span class="beta"> de index.html. */
  .beta{
    font-size:.26em;line-height:1;vertical-align:.85em;
    margin-left:.16em;letter-spacing:.06em;font-weight:500;
    color:var(--accent);
  }
  /* El logo es un enlace a la landing: se pinta igual que cuando era texto. */
  .brand .logo{
    display:block;text-decoration:none;
    font-size:clamp(28px, calc(var(--col) * .078), 42px);line-height:1;
    letter-spacing:-.5px;color:var(--ink);
    /* El aire que antes separaba marca y reclamo se reparte ahora entre los
       dos lados del filete (el de abajo lo pone .claim con su padding). */
    margin-bottom:clamp(16px, calc(var(--col) * .048), 27px);
  }
  /* El reclamo del sider ya no compite con la marca: cursiva de Albert -la
     fuente de lectura- en tinta suave, y colgando de un filete fino que sale
     de debajo del wordmark. Antes iba en Circular, tinta plena y cuerpo casi
     de titular: dos cosas del mismo peso una encima de otra, y la marca
     perdia. En la puerta el reclamo manda y se queda como estaba (.gt-claim);
     esta regla no le llega, alli no hay .claim. */
  .brand .claim{
    border-top:1px solid var(--line);
    padding-top:clamp(15px, calc(var(--col) * .046), 26px);
    font-family:var(--body-font);font-style:italic;font-weight:300;
    font-size:clamp(21px, calc(var(--col) * .058), 31px);line-height:1.25;
    letter-spacing:-.2px;color:var(--ink-soft);
    margin:0 0 clamp(16px, calc(var(--col) * .05), 28px);
  }
  /* Y el reclamo, tambien: mismo color y sin subrayado hasta el hover. */
  .brand .claim a{color:inherit;text-decoration:none}
  .brand .logo:hover,.brand .claim a:hover{color:var(--hov, var(--accent))}
  .brand .logo,.brand .claim a{transition:color .18s ease}
  .brand .claim u{
    text-decoration:underline;text-decoration-color:#b8a06a;
    text-decoration-thickness:1px;text-underline-offset:.2em;
    transition:text-decoration-color .18s ease;
  }
  .brand .sub{
    font-size:clamp(13px, calc(var(--col) * .032), 17px);line-height:1.5;
    color:var(--ink-soft);margin:0;max-width:39ch;
  }

  select,input,textarea{
    width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--paper);
    color:var(--ink);font-size:16.5px;font-family:'Circular',sans-serif;border-radius:2px;
  }
  select:focus,input:focus,textarea:focus{outline:none;border-color:var(--gold)}

  /* ---------- Selector de mercado ---------- */
  /* Ocho casillas de dos letras bajo el subtitulo. La activa no cambia de
     grosor de filete: si lo hiciera, la fila se desplazaria un pixel a cada
     clic. El peso lo dan el color del filete, un fondo medio tono mas oscuro
     que el papel y una sombra minima. Lo que se mueve es el color, nunca la
     caja. */
  .markets{
    padding:clamp(20px, calc(var(--col) * .052), 34px) var(--pad-x) 0;
  }
  .mkt-row{
    display:flex;flex-wrap:wrap;
    gap:clamp(5px, calc(var(--col) * .0125), 9px);
  }
  .mkt-btn{
    flex:0 0 auto;
    min-width:clamp(34px, calc(var(--col) * .068), 48px);
    height:clamp(28px, calc(var(--col) * .05), 38px);
    padding:0 clamp(5px, calc(var(--col) * .014), 11px);
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;
    border:1px solid var(--line);border-radius:2px;
    font-family:'Circular',sans-serif;
    font-size:clamp(10.5px, calc(var(--col) * .0235), 13px);
    letter-spacing:1.3px;text-transform:uppercase;font-weight:400;
    color:#b3a897;cursor:pointer;
    transition:color .18s ease, border-color .18s ease,
               background-color .18s ease, box-shadow .18s ease;
  }
  .mkt-btn:hover{color:var(--ink-soft);border-color:#cbc1af}
  .mkt-btn:focus-visible{
    outline:none;color:var(--ink-soft);
    box-shadow:0 0 0 2px rgba(168,129,74,.4);
  }
  .mkt-btn.on{
    color:var(--ink);font-weight:500;
    border-color:var(--ink);
    background:color-mix(in srgb, var(--ink) 6%, var(--paper));
    box-shadow:0 1px 2px rgba(28,23,20,.09);
  }
  .mkt-btn.on:hover{color:var(--ink);border-color:var(--ink)}
  /* Mercado abierto sin bodega listada todavia: se marca en el DOM para
     poder actuar sobre el mas adelante, pero no se distingue a la vista. El
     servicio despacha alli igual. */
  .mkt-btn.is-thin{}

  /* El rotulo pasa a encabezar la fila -antes iba debajo-, asi que el aire
     cambia de lado: separa del subtitulo por arriba y de los codigos por
     abajo. */
  .mkt-hint{
    margin:0 0 clamp(7px, calc(var(--col) * .017), 11px);
    font-size:clamp(11.5px, calc(var(--col) * .0255), 13.5px);
    /* Un tono mas claro que el resto de texto secundario: es una instruccion,
       no contenido, y competia con el subtitulo que tiene encima. El grosor lo
       afina el bloque de Albert Sans del final del fichero. */
    line-height:1.4;letter-spacing:.1px;color:var(--grey);
  }
  /* Aviso solo cuando el mercado activo no tiene bodega listada y el filtro
     no se ha llegado a aplicar. Cuando el filtro funciona no se dice nada:
     ver el propio mercado es lo que el visitante acaba de pedir. */
  .mkt-note{
    margin:clamp(5px, calc(var(--col) * .012), 8px) 0 0;
    font-size:clamp(11px, calc(var(--col) * .0235), 12.5px);
    line-height:1.45;color:var(--ink-soft);font-style:italic;
    max-width:39ch;
  }
  .mkt-note[hidden]{display:none}
  /* Aviso para lector de pantalla al cambiar de mercado: la fila de botones
     no lo dice sola. Fuera de pantalla, no fuera del arbol. */
  .mkt-status{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }

  /* ---------- Barra del listado: rotulo + buscador plegado ---------- */
  /* El campo de antes era una caja de 43px de alto cruzando el sider: pesaba
     mas que el reclamo y competia con los mercados. Aqui el buscador es un
     glifo sobre el mismo filete que ya separaba el listado. Se despliega al
     pincharlo y ocupa la barra entera; el rotulo se retira sin moverse de
     sitio. El campo no se destruye al plegarse -solo cambia de opacidad y de
     alcance al raton- para no perder el foco ni el cursor a media palabra. */
  .reads-bar{
    position:relative;flex:0 0 auto;
    display:flex;align-items:center;justify-content:flex-start;gap:0;
    /* El aire de arriba separa el bloque de mercados del listado, y es la
       unica pausa entre los dos: la linea de "Select your market" y el filete
       de PROFILES se quedaban demasiado juntos. */
    margin:clamp(34px, calc(var(--col) * .082), 56px) var(--pad-x) 0;
    /* El rotulo casi tocando su filete: los dos son la misma cabecera. */
    padding:0 0 5px;
    min-height:22px;
    border-bottom:1px solid var(--line);
  }
  .rb-label{
    font-size:11.5px;letter-spacing:1.7px;text-transform:uppercase;
    color:var(--ink-soft);line-height:1;
    transition:opacity .16s ease;
  }
  /* Deja libre el hueco del glifo de la derecha */
  .rb-field{
    position:absolute;left:0;right:26px;top:0;bottom:5px;
    display:flex;align-items:center;
    opacity:0;pointer-events:none;
    transition:opacity .16s ease;
  }
  /* El campo desplegado es texto que se lee, no un rotulo: va en Albert 300
     como los cuerpos. En Circular Book los cinco campos del reclamo hacian una
     linea demasiado negra justo encima del listado. */
  .rb-field input{
    width:100%;padding:0;border:none;background:transparent;border-radius:0;
    font-family:var(--body-font);font-weight:300;
    font-size:clamp(13px, calc(var(--col) * .031), 16px);
    line-height:1.2;color:var(--ink);letter-spacing:0;
  }
  .rb-field input:focus{outline:none;border:none}
  .rb-field input::placeholder{color:#b3a897;font-weight:300}
  .rb-field input::-webkit-search-cancel-button,
  .rb-field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

  .reads-bar.searching .rb-label{opacity:0}
  .reads-bar.searching .rb-field{opacity:1;pointer-events:auto}

  /* Un solo glifo en cada momento: lupa para abrir, aspa para vaciar. Dos a la
     vez sobrarian y obligarian a elegir. */
  .rb-toggle,
  .rb-clear{
    flex:0 0 auto;width:22px;height:22px;padding:0;
    display:flex;align-items:center;justify-content:center;
    border:none;background:transparent;cursor:pointer;
    color:#a89c8d;line-height:1;
    transition:color .16s ease, opacity .16s ease;
  }
  .rb-toggle svg{
    width:15px;height:15px;fill:none;stroke:currentColor;
    stroke-width:1.25;stroke-linecap:round;
  }
  /* La lupa va pegada al rotulo, no en el extremo: "INDEX" y su busqueda son
     una sola cabecera, y en el extremo derecho la lupa quedaba sola a media
     franja de distancia, como si mandara sobre el filete. El aire entre las
     dos se mide en la franja, igual que los margenes del sider. */
  .rb-toggle{margin-left:clamp(18px, calc(var(--col) * .085), 46px)}
  /* El aspa si se queda a la derecha: mientras se escribe, el campo ocupa la
     linea entera y el glifo tiene que estar al final de lo que se escribe, no
     encima. */
  .rb-clear{font-size:11px;display:none;margin-left:auto}
  .rb-toggle:hover,.rb-clear:hover{color:var(--ink)}
  .rb-toggle:focus-visible,.rb-clear:focus-visible{
    outline:none;color:var(--ink);box-shadow:0 0 0 2px rgba(168,129,74,.4);border-radius:2px;
  }
  .reads-bar:has(.rb-field.has-text) .rb-toggle{display:none}
  .reads-bar:has(.rb-field.has-text) .rb-clear{display:flex}

  /* El campo de busqueda deja libre el hueco del unico glifo de la derecha. */

  .reads-empty{
    padding:16px 0 4px;
    font-size:13px;line-height:1.5;color:var(--ink-soft);font-style:italic;
  }

  .count{
    font-family:'Circular',sans-serif;font-size:12.5px;letter-spacing:1.3px;
    text-transform:uppercase;color:var(--ink-soft);
    padding:12px var(--pad-x) 15px;border-bottom:1px solid var(--line);
  }
  /* La tarjeta lleva 16px propios: se descuentan aqui para que el nombre de
     la bodega caiga en la misma vertical que el reclamo. */
  .list{flex:1;min-height:0;overflow-y:auto;padding:0 calc(var(--pad-x) - 16px) 20px}
  .list::-webkit-scrollbar{width:7px}
  .list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

  .card{
    padding:16px 14px 16px 16px;border-bottom:1px solid var(--line);cursor:pointer;
    position:relative;transition:.15s;
  }
  .card:hover{background:#e6e6d6}
  .card .cn{font-size:20.5px;font-weight:400;line-height:1.22}
  .card .cr{
    font-family:'Circular',sans-serif;font-size:13px;letter-spacing:1px;
    text-transform:uppercase;color:var(--wine);margin-top:6px;
  }

  /* ---------- Pie del sider ---------- */
  /* margin-top:auto lo fija abajo del todo cuando el contenido no llena la
     columna, y lo deja en su sitio cuando si la llena, porque lo que crece y
     hace scroll es el bloque de lecturas o el listado, no el panel.
     El anclaje se hace sin filete: una banda de papel que se desvanece hacia
     arriba y se come las ultimas lineas del listado antes de que lleguen al
     pie. Cae fuera de la caja del pie, por eso el ::before sale con top
     negativo; no captura el raton y no genera scroll porque el panel no
     desborda. */
  .panel-foot{
    position:relative;
    margin-top:auto;flex:0 0 auto;
    /* Pie a la misma linea de base que el credito del mapa (#mapCredit):
       ambos con line-height 1; el <a> es item flex, asi que su padding y filete
       (3px) cuentan: 13px aqui equivalen a los 12px + 4px de alli. */
    padding:clamp(20px, calc(var(--col) * .042), 30px) var(--pad-x) 13px;
    display:flex;flex-wrap:wrap;align-items:baseline;
    font-family:'Circular',sans-serif;
    font-size:clamp(9.5px, calc(var(--col) * .021), 11px);
    letter-spacing:1.5px;text-transform:uppercase;line-height:1;
    background:var(--paper);
  }
  .panel-foot::before{
    content:'';position:absolute;left:0;right:0;
    top:clamp(-48px, calc(var(--col) * -.075), -30px);
    height:clamp(30px, calc(var(--col) * .075), 48px);
    background:linear-gradient(to top, var(--paper), rgba(241,241,238,0));
    pointer-events:none;
  }
  /* Un solo enlace en una sola linea: los puntos van dentro del <a>. */
  .panel-foot a{
    color:var(--ink);text-decoration:none;white-space:nowrap;
    border-bottom:1px solid transparent;padding-bottom:2px;
    transition:color .18s ease, border-color .18s ease;
  }
  .panel-foot a:hover{color:var(--hov, var(--ink));border-bottom-color:var(--hov, var(--ink))}
  .panel-foot a:focus-visible{outline:none;color:var(--hov, var(--ink));border-bottom-color:var(--hov, var(--ink))}
  .panel-foot .fs{
    color:#c3b9a7;margin:0 .6em;
    -webkit-user-select:none;user-select:none;
  }

  /* ---------- Map ---------- */
  #map{flex:1;height:100%;min-height:400px;min-width:0;background:#cfd8d6}

  /* Controles operativos: abajo a la derecha, encima del indicador de zoom. */
  /* Los mandos del mapa vuelven abajo a la derecha, y adelgazan: mismo cuerpo
     y mismo tracking que los enlaces del pie, para que se lean como una linea
     de mandos y no como cuatro botones. */
  #baseSwitch{
    /* Por encima del credito del mapa, que ocupa esa misma esquina. */
    position:absolute;bottom:44px;right:14px;z-index:500;
    display:flex;align-items:center;gap:4px;padding:0;
    /* Sin caja: los botones van sueltos sobre el mapa, con su propio gris. */
    background:transparent;border:none;border-radius:0;box-shadow:none;
    font-family:'Circular',sans-serif;
  }

  /* Finos, como los enlaces del pie: mismo cuerpo, mismo tracking y peso
     normal. Sin caja de color ni sombra; sobre el papel del mapa basta con
     una linea de texto y su filete. */
  .bs-btn{
    border:none;background:color-mix(in srgb, var(--paper) 88%, transparent);
    color:var(--ink-soft);cursor:pointer;
    font-family:'Circular',sans-serif;
    font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
    padding:5px 9px 4px;line-height:1;
    border-radius:2px;font-weight:400;transition:color .15s, background .15s;
    box-shadow:none;
  }
  /* Al pasar el raton, fondo gris: sobre el papel del mapa un cambio de color
     de letra se pierde, y el gris deja claro que el rotulo es un mando. */
  .bs-btn:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) 15%, var(--paper))}
  /* Fijado: tinta plena y un filete debajo. Es el unico de los cuatro que
     lleva subrayado, asi que se sabe cual esta puesto sin comparar tonos. */
  .bs-btn.on{
    color:var(--ink);background:var(--paper);
    box-shadow:inset 0 -2px 0 0 var(--gold);
  }
  .bs-btn.on:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) 15%, var(--paper))}
  .bs-btn:focus-visible{
    outline:none;color:var(--ink);box-shadow:0 0 0 2px rgba(168,129,74,.4);
  }
  .bs-btn.on:focus-visible{
    box-shadow:inset 0 -2px 0 0 var(--gold), 0 0 0 2px rgba(168,129,74,.4);
  }

  /* Conmutador de bodegas: barra en tres segmentos, mayusculas finas, el
     encendido en papel sobre tinta.
     Vuelve a flotar sobre el mapa, arriba a la derecha, en la esquina opuesta
     al conmutador de fondos (#baseSwitch, abajo a la derecha): enciende y
     apaga pines, asi que se lee junto a ellos y no en el sider, donde parecia
     un filtro mas del listado. Ancho el que pidan los tres rotulos -aqui no
     hay franja que repartir-, de una linea cada uno, y con fondo de papel para
     que la letra no se pierda sobre el relieve. */
  #wineSwitch{
    position:absolute;top:14px;right:14px;z-index:500;
    display:flex;flex-direction:row;gap:0;padding:0;
    background:rgba(241,241,238,.92);border:1px solid var(--line);border-radius:2px;
    font-family:'Circular',sans-serif;overflow:hidden;
  }
  /* Mismo cuerpo y mismo tracking que los mandos de la otra esquina (.bs-btn):
     los dos conmutadores son la misma clase de instrumento. */
  .ws-btn{
    display:flex;align-items:center;justify-content:center;
    border:none;border-left:1px solid var(--line);background:transparent;
    color:var(--ink-soft);cursor:pointer;
    font-size:10px;letter-spacing:1.2px;text-transform:uppercase;line-height:1;
    padding:7px 11px 6px;font-weight:400;transition:background .12s,color .12s;
    white-space:nowrap;
  }
  .ws-btn:first-child{border-left:0}
  /* Puesto: tinta plena y un filete dorado debajo, el mismo gesto que el
     conmutador de capas (.bs-btn.on). Era una caja negra, y tres cajas negras
     en la esquina del mapa lo ensucian: el negro pesa mas que el pais. */
  .ws-btn.on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 0 var(--gold)}

  /* ---------- Enlace y ventana "About" ---------- */
  /* El credito de la esquina del mapa. */
  /* El credito, en la esquina de abajo a la derecha del mapa, con el
     conmutador de capas justo encima. Texto y nada mas: ni subrayado ni
     hover, que ya no lleva a ninguna parte. */
  #mapCredit{
    position:absolute;right:16px;bottom:12px;z-index:500;
    font-family:'Circular',sans-serif;font-size:10.5px;letter-spacing:1.1px;line-height:1;
    text-transform:uppercase;color:var(--ink-soft);
    -webkit-user-select:none;user-select:none;pointer-events:none;
  }


  /* "About" dentro del informe: texto corrido, sin indice. El tamano y la
     interlinea los fija el bloque de Albert Sans del final del fichero. */
  .rp-about p{color:var(--ink);margin:0 0 18px}
  .rp-about p:last-child{margin-bottom:0}
  .rp-about strong{font-weight:500}

  /* D.O. region labels */
  .region-label{
    background:color-mix(in srgb, var(--paper) 95%, transparent);border:1px solid var(--line);
    box-shadow:0 2px 8px rgba(0,0,0,.15);border-radius:3px;padding:4px 9px;
    color:#3a3a3a;font-family:'Circular',sans-serif;
    font-size:12.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  }

  /* ---------- Popups MapLibre ---------- */
  #map{position:relative}
  .maplibregl-canvas{outline:none}
  .maplibregl-popup-content{
    background:var(--paper);color:var(--ink);border-radius:3px;padding:16px 18px;
    box-shadow:0 6px 26px rgba(0,0,0,.22);font-family:'Circular',sans-serif;
  }
  .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--paper)}
  .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--paper)}
  .maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--paper)}
  .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--paper)}

  /* Etiqueta de hover. La misma para la bodega y para la region: identifica lo
     que hay bajo el cursor y nada mas. Todo lo que haya que leer entero esta a
     un clic, en el sider. Va sin raton para que el clic llegue al pin de
     debajo y para que el lienzo siga recibiendo el mousemove.

     El pointer-events:none tiene que ir tambien en los hijos. La hoja de
     MapLibre trae .maplibregl-popup-content{pointer-events:auto}, y
     pointer-events no se hereda: apagarlo solo en la raiz dejaba la caja del
     texto atrapando el raton. Y la etiqueta persigue al cursor, asi que
     estaba debajo de el casi siempre. Consecuencias, todas medidas: la rueda
     no hacia zoom -MapLibre escucha el wheel en .maplibregl-canvas-container y
     el popup cuelga del contenedor del mapa, que no es su padre, asi que el
     evento no le llegaba-, el arrastre empezaba o no segun donde cayera el
     mousedown, y la propia etiqueta parpadeaba al robarle el mousemove al
     lienzo. La ficha de bodega (.ficha) si tiene raton: lleva enlaces. */
  .maplibregl-popup.tip,
  .maplibregl-popup.tip *{pointer-events:none}
  .maplibregl-popup.tip .maplibregl-popup-content{
    background:var(--ink);color:var(--paper);border-radius:2px;padding:6px 11px 7px;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
  }
  .maplibregl-popup.tip .maplibregl-popup-tip{border-top-color:var(--ink)}
  /* La etiqueta de region sigue al cursor y cambia de lado sola: los cuatro
     anclajes tienen que teñirse, no solo el de abajo. */
  .maplibregl-popup.tip.maplibregl-popup-anchor-top .maplibregl-popup-tip,
  .maplibregl-popup.tip.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
  .maplibregl-popup.tip.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{
    border-bottom-color:var(--ink);border-top-color:transparent;
  }
  .maplibregl-popup.tip.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
  .maplibregl-popup.tip.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
  .maplibregl-popup.tip.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{
    border-top-color:var(--ink);
  }
  .maplibregl-popup.tip.maplibregl-popup-anchor-left .maplibregl-popup-tip{
    border-right-color:var(--ink);border-top-color:transparent;
  }
  .maplibregl-popup.tip.maplibregl-popup-anchor-right .maplibregl-popup-tip{
    border-left-color:var(--ink);border-top-color:transparent;
  }

  /* Nombre a la izquierda, flecha a la derecha, contexto debajo. La flecha
     solo la escribe el motor cuando hay algo que abrir. */
  .map-tip{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:14px}
  .mt-name{font-size:15px;letter-spacing:.2px}
  .mt-go{font-size:11px;opacity:.6;justify-self:end}
  .mt-meta{
    grid-column:1 / -1;margin-top:3px;
    font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;opacity:.72;
  }

  /* ---------- Tarjeta de bodega ---------- */
  /* El recuadro fijo que abre el pin. Fondo de papel como el resto del sitio y
     Circular en todo: el bloque de datos no se separa con un color, se separa
     con dos filetes. Una sola salida abajo a la derecha, en negro, que es lo
     unico que pide ser pulsado. */
  /* `ficha` es solo un asidero de estilo: el recuadro va sin aspa, como en la
     build de referencia, y se cierra al pinchar en otro sitio del mapa. La
     regla del aspa queda por si se vuelve a encender closeButton. */
  .maplibregl-popup.ficha .maplibregl-popup-content{padding:16px 18px 15px}
  .maplibregl-popup.ficha .maplibregl-popup-close-button{
    top:5px;right:6px;width:26px;height:26px;padding:0;
    background:none;border:none;border-radius:2px;
    font-family:'Circular',sans-serif;font-size:17px;line-height:1;
    color:var(--ink-soft);cursor:pointer;
  }
  .maplibregl-popup.ficha .maplibregl-popup-close-button:hover{
    background:none;color:var(--wine);
  }

  /* La tarjeta no crece mas que la ventana. Desde el volcado del 7 de
     septiembre de 2026 las siete filas traen frases y no palabras sueltas, y
     las bodegas mas documentadas pasaban de mil pixeles: el boton de compra
     se quedaba fuera de la pantalla y no habia manera de llegar a el. Ahora
     el nombre, quien hace el vino y el boton se quedan fijos y lo que rueda
     es la lista de datos. */
  .pop-card{
    font-family:'Circular',sans-serif;color:var(--ink);max-width:290px;
    display:flex;flex-direction:column;max-height:min(72vh, 620px);
  }
  .pop-card h4{
    font-size:21px;font-weight:400;line-height:1.08;letter-spacing:-.4px;
    margin:0 26px 4px 0;
  }
  .pop-card .pr{
    font-size:11px;letter-spacing:1.3px;text-transform:uppercase;
    color:var(--wine);margin:0 0 10px;
  }
  /* Cuando bajo el nombre va quien hace el vino y no la region, es un nombre
     propio: en versalitas y con tracking se leeria como un rotulo. Va en la
     fuente de lectura, como el resto de lo textual de la tarjeta. */
  .pop-card .pr.is-people{
    text-transform:none;letter-spacing:0;font-size:13.5px;
    font-family:var(--body-font);font-weight:300;color:var(--ink-soft);
  }
  /* Dos columnas: la etiqueta se ajusta a la mas larga y el valor ocupa el
     resto. Si el valor se parte en dos lineas, la etiqueta se queda arriba. */
  .pop-facts{
    display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:6px;
    margin:0;padding:11px 0 12px;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    /* min-height:0 es lo que deja encoger a un hijo de un flex: sin el, la
       lista se niega a rodar y vuelve a empujar la tarjeta hacia abajo. */
    overflow-y:auto;min-height:0;
  }
  /* La etiqueta es rotulo y se queda en Circular; el valor es lo que se lee
     y va en Albert 300, como los valores de la ficha. Un punto mas compacto
     que antes: la tarjeta cabe mas veces entera sin rodar. */
  .pop-facts dt{font-size:12px;line-height:1.4;color:var(--ink-soft);padding-top:1px}
  .pop-facts dd{
    font-family:var(--body-font);font-weight:300;
    font-size:13px;line-height:1.4;color:var(--ink);margin:0;
  }
  /* Fila sin dato: la etiqueta se apaga para que no pese como las que si
     dicen algo, pero se queda, que es lo que hace que todas las tarjetas se
     lean igual. El hueco del valor no se rellena con nada. */

  .pop-foot{display:flex;justify-content:flex-end;margin-top:12px;flex:none}
  /* Color, filete y letra: "El boton del sitio", al final del fichero. */
  .pop-card .pop-btn{
    display:inline-block;margin:0;padding:9px 14px;
    font-size:11px;letter-spacing:1.5px;
  }
  /* El enlace a la ficha larga solo existe si ENLACE_FICHA esta encendido. */
  .pop-card .pop-sheet{margin-top:13px}

  @media (max-width:760px){
    .pop-card h4{font-size:21px}
    .pop-facts{grid-template-columns:1fr;row-gap:2px}
    .pop-facts dt{padding-top:9px}
    .pop-facts dt:first-of-type{padding-top:0}
  }

  /* ---------- Leyenda de los mapas de clima ---------- */
  /* Abajo a la izquierda, en la esquina que queda libre: los mandos del mapa
     estan a la derecha y el credito, al pie. */
  #climaLegend{
    position:absolute;left:14px;bottom:14px;z-index:500;
    padding:11px 13px 9px;border-radius:3px;
    background:color-mix(in srgb, var(--paper) 92%, transparent);
    border:1px solid var(--line);
    font-family:'Circular',sans-serif;color:var(--ink);
    -webkit-user-select:none;user-select:none;
  }
  #climaLegend .cl-tit{
    font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:8px;
  }
  #climaLegend .cl-tit span{letter-spacing:.6px;text-transform:none}
  /* Los peldanos en columna: las cifras son de anchos muy distintos -"< 250"
     y "1100 +"- y en fila no se alinearian con su color. */
  #climaLegend .cl-escala{display:flex;flex-direction:column;gap:3px}
  #climaLegend .cl-paso{display:flex;align-items:center;gap:7px}
  #climaLegend .cl-paso i{
    width:16px;height:10px;border-radius:1px;flex:0 0 auto;
    border:1px solid rgba(0,0,0,.08);
  }
  #climaLegend .cl-paso span{font-size:11.5px;line-height:1.2;color:var(--ink)}
  #climaLegend .cl-fuente{
    margin-top:8px;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;
    color:var(--ink-soft);
  }
  @media (max-width:760px){
    #climaLegend{left:10px;bottom:10px;padding:9px 10px 7px}
    #climaLegend .cl-paso span{font-size:10.5px}
  }

  .do-pop{font-family:'Circular',sans-serif;color:var(--ink);max-width:292px}
  .do-pop h4{
    font-size:20px;font-weight:400;margin:0 0 10px;color:var(--wine);
    border-bottom:1px solid var(--line);padding-bottom:7px;
  }
  .do-pop p{
    font-family:'Circular',sans-serif;font-size:14px;line-height:1.55;
    color:var(--ink);margin:0 0 8px;
  }
  .do-pop p b{color:var(--ink);font-weight:600;letter-spacing:.3px;text-transform:uppercase;font-size:12px}
  .do-pop p.do-note{
    color:var(--ink-soft);font-style:italic;font-size:13px;margin-top:6px;
    padding-top:7px;border-top:1px dotted var(--line);
  }

  /* La ficha de bodega y la de D.O. son la misma columna de texto. Las dos
     salen de un popup de 540 y el tope se declara aqui, no en el motor.
     292px es lo que mide la fila de acciones sin partirse: por debajo, el
     boton de compra cae siempre a una segunda linea. Si cambia el texto de
     los botones, esta cifra y la de .do-pop se mueven juntas. */
  .pop{max-width:292px}
  .pop h4{font-size:21px;font-weight:400;margin-bottom:3px}
  .pop .pr{font-family:'Circular',sans-serif;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--wine);margin-bottom:9px}
  .pop .pd{font-family:'Circular',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.6;margin-bottom:4px}
  .pop .pd b{color:var(--ink);font-weight:600}
  .pop-grapes{
    margin-top:9px;font-family:'Circular',sans-serif;font-size:12.5px;
    color:var(--ink-soft);font-style:italic;line-height:1.5;
  }
  .pop-grapes .grape-icon{
    color:var(--wine);font-style:normal;font-size:9.5px;
    margin-right:7px;vertical-align:middle;display:inline-block;
    transform:translateY(-1px);
  }

  .pop-distrib{
    display:block;margin-top:10px;padding:3px 8px;
    font-family:'Circular',sans-serif;font-size:10.5px;letter-spacing:.6px;
    text-transform:uppercase;color:var(--ink-soft);
    background:rgba(0,0,0,.04);border-radius:2px;
    width:fit-content;
  }
  .pop a{
    display:inline-block;margin-top:10px;font-family:'Circular',sans-serif;
    font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--wine);
    text-decoration:none;border-bottom:1px solid var(--wine);padding-bottom:2px;
    width:fit-content;
  }
  .pop a:hover{color:var(--hov, var(--ink));border-bottom-color:var(--hov, var(--ink));text-decoration-color:var(--hov, var(--ink))}

  .pop-actions{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14px}
  .pop-actions a{margin-top:0}
  .pop-actions .pop-link{
    display:inline;line-height:1;border:none;padding:0;
    text-decoration:underline;text-decoration-color:var(--wine);
    text-underline-offset:4px;text-decoration-thickness:1px;
  }
  .pop-actions .pop-cta{
    display:inline-block;line-height:1;
    font-size:12px;letter-spacing:1px;
    padding:8px 15px 12px;white-space:nowrap;
  }

  /* Botón hamburguesa oculto en escritorio por defecto */
  #menuBtn{display:none}
  #drawerBackdrop{display:none}
  #mobileHeader{display:none}
  #activeFilters{display:none}

  /* Responsive: stack panel over map on narrow viewports so the map always shows */
  @media (max-width: 760px){
    body{min-height:0;overflow:hidden}

    /* Mapa a pantalla completa */
    #map{flex:1;width:100%;height:100%;min-height:0}
    #mapCredit{right:12px;bottom:10px}

    /* El selector de bodegas cede ancho: en movil el mapa manda */
    #baseSwitch{bottom:40px;right:10px;padding:0}
    .bs-btn{font-size:10px;letter-spacing:.5px;padding:5px 7px}
    /* Arriba a la derecha no cabe: ahi estan la cabecera movil y los chips de
       filtros. Los dos conmutadores se apilan en la esquina de abajo. */
    #wineSwitch{top:auto;bottom:70px;right:10px}
    .ws-btn{font-size:9px;letter-spacing:.6px;padding:6px 7px 5px}

    /* Panel como drawer deslizable desde la izquierda */
    #panel{
      position:fixed;top:0;left:0;height:100%;
      width:88%;max-width:400px;min-width:0;
      z-index:1000;
      transform:translateX(-100%);
      transition:transform .26s ease;
      box-shadow:2px 0 20px rgba(0,0,0,0);
    }
    #panel.open{
      transform:translateX(0);
      box-shadow:2px 0 20px rgba(0,0,0,.22);
    }

    /* Botón hamburguesa */
    #menuBtn{
      display:flex !important;align-items:center;justify-content:center;
      position:fixed;top:14px;left:14px;z-index:1001;
      width:42px;height:42px;border-radius:50%;
      background:var(--paper);border:1px solid var(--line);
      box-shadow:0 2px 8px rgba(0,0,0,.18);
      cursor:pointer;color:var(--ink);font-size:20px;
    }
    #panel.open ~ #menuBtn{
      left:auto;right:14px;background:var(--paper);
    }

    /* Backdrop oscuro al abrir el panel */
    #drawerBackdrop{
      position:fixed;inset:0;background:rgba(0,0,0,.35);
      z-index:999;
    }
    #panel.open ~ #drawerBackdrop{display:block !important}

    /* Compactar brand y controles en móvil */
    :root{--pad-x:22px}
    .brand{padding:60px var(--pad-x) 16px}
    .brand .logo{font-size:28px;margin-bottom:18px}
    .brand .claim{font-size:23px;margin-bottom:14px}
    .brand .sub{font-size:14px}
    .reads-bar{margin:30px var(--pad-x) 0}
    .count{padding:10px var(--pad-x) 4px}
    .list{padding:0 6px 16px}

    /* Mercados: los ocho caben en dos filas de cuatro en un movil de 390px */
    .markets{padding:18px var(--pad-x) 0}
    .mkt-row{gap:6px}
    .mkt-btn{min-width:44px;height:36px;padding:0 8px;font-size:12px}
    .mkt-hint{font-size:12px;margin-top:10px}

    #reads{padding:10px var(--pad-x) 16px 9px}
    /* El indice se aprieta para el raton; el dedo necesita mas alto al que
       apuntar, asi que en movil las lineas recuperan aire. */
    .read-item{padding:7px 0 7px 11px}
    /* Cinco enlaces no caben en una linea del cajon, y encogerlos hasta que
       quepan los deja ilegibles: aqui se parten en dos. Los puntos se apagan
       -uno solo, al principio de la segunda linea, se lee como una errata- y
       separa el hueco, que es lo que hacian ellos. */
    .panel-foot{padding:22px var(--pad-x) 24px;font-size:10px;letter-spacing:1.3px;
                column-gap:15px;row-gap:9px}
    .panel-foot .fs{display:none}

    /* Popups: todo el ancho disponible (el 540 del motor se declara en linea) */
    .maplibregl-popup{max-width:calc(100vw - 50px) !important}
    .maplibregl-popup-content{padding:14px}

    /* Header fijo móvil: logo + caption a la derecha del botón hamburguesa */
    #mobileHeader{
      display:flex !important;align-items:center;gap:12px;
      position:fixed;top:14px;left:68px;right:14px;z-index:1000;
      min-height:42px;padding:6px 16px;
      background:var(--paper);border:1px solid var(--line);border-radius:21px;
      box-shadow:0 2px 8px rgba(0,0,0,.18);
      pointer-events:none;
    }
    #mobileHeader .mh-logo{
      font-family:'Circular',sans-serif;font-size:18px;font-weight:500;
      letter-spacing:-.3px;color:var(--ink);white-space:nowrap;flex-shrink:0;
    }
    #mobileHeader .mh-logo .dot{color:var(--wine)}
    #mobileHeader .mh-tag{
      font-family:'Circular',sans-serif;font-size:10px;letter-spacing:.3px;
      color:var(--ink-soft);font-style:italic;line-height:1.25;
      overflow:hidden;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    }
    #panel.open ~ #mobileHeader{display:none !important}

    /* Chips de filtros activos debajo del header móvil */
    #activeFilters{
      display:none;position:fixed;top:72px;left:14px;right:14px;z-index:1000;
      flex-wrap:wrap;gap:6px;pointer-events:none;
    }
    #activeFilters.show{display:flex}
    .filter-chip{
      display:inline-flex;align-items:center;gap:6px;
      padding:5px 5px 5px 11px;
      background:var(--paper);border:1px solid var(--line);border-radius:14px;
      font-family:'Circular',sans-serif;font-size:12.5px;color:var(--ink);
      box-shadow:0 2px 6px rgba(0,0,0,.12);
      pointer-events:auto;max-width:calc(100vw - 50px);
    }
    .filter-chip .chip-label{
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;
    }
    .filter-chip .chip-key{
      color:var(--ink-soft);font-size:10px;letter-spacing:.8px;
      text-transform:uppercase;margin-right:5px;
    }
    .filter-chip button{
      width:18px;height:18px;border:none;border-radius:50%;
      background:#c8bfae;color:var(--paper);
      font-size:11.5px;line-height:1;cursor:pointer;display:flex;
      align-items:center;justify-content:center;padding:0;
      transition:background .15s;
    }
    .filter-chip button:hover{background:var(--hov, var(--wine-light));color:var(--hov-fg, var(--ink))}
    #panel.open ~ #activeFilters{display:none !important}

  }

  /* ---------- Capa de conocimiento: informes ---------- */
  .do-pop p.do-read{
    margin-top:8px;padding-top:7px;border-top:1px dotted var(--line);
    font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--wine);
  }
  /* Unica salida de la tarjeta hacia el sider. La cuenta de fuentes va al lado
     como pista de lo que hay dentro, no como segundo enlace. */
  .pop-sheet{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    margin-top:13px;padding-top:12px;border-top:1px dotted var(--line);
  }
  .pop-sheet a{margin-top:0}
  .pop-count{
    font-family:'Circular',sans-serif;font-size:10.5px;letter-spacing:1px;
    text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
  }

  .pop-read{margin-top:8px}
  .pop-read a{
    font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;
    color:var(--wine);text-decoration:none;
  }
  .pop-read a:hover{color:var(--hov, var(--ink));text-decoration:underline}

  /* Cobertura critica externa: se lee por debajo de las Reads propias. */
  .pop-jr{margin-top:6px}
  .pop-jr a{
    font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;
    color:var(--ink-soft);text-decoration:none;
  }
  .pop-jr a:hover{color:var(--hov, var(--ink));text-decoration:underline}

  /* Segunda franja, del mismo ancho que el sider y que el mapa */
  #report{
    position:fixed;top:0;left:var(--col);height:100%;
    width:var(--col);min-width:0;max-width:var(--col);
    background:var(--paper);border-right:1px solid var(--line);
    box-shadow:10px 0 44px rgba(0,0,0,.13);
    transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    z-index:1200;display:flex;flex-direction:column;
    font-family:'Circular',sans-serif;color:var(--ink);
    pointer-events:none;
  }
  #report.open{transform:translateX(0);pointer-events:auto}

  .rp-head{
    position:relative;padding:34px 44px 26px 42px;flex:0 0 auto;
    border-bottom:1px solid var(--line);
  }
  /* La columna de texto no crece con el panel: a partir de cierto ancho
     se lee peor, asi que el sobrante se convierte en margen. */
  .rp-head > .rp-kicker,
  .rp-head > h4,
  .rp-head > .rp-stock{max-width:620px}
  .rp-kicker{
    font-size:15.5px;line-height:1.45;font-style:italic;
    letter-spacing:0;text-transform:none;font-weight:400;
    color:var(--ink-soft);margin-bottom:11px;
  }
  .rp-head h4{
    font-size:30px;font-weight:400;line-height:1.16;margin:0;
    letter-spacing:-.2px;
    /* Sitio para la flecha de la esquina. */
    padding-right:38px;
  }
  /* Cierre del informe: una flecha hacia la izquierda, que es por donde se
     retira el panel (bajo el sider). */
  /* La salida de la ficha dice a donde va: al atlas. Era una flecha "<-" y una
     flecha sola, arriba a la derecha, no dice si retrocede, si cierra o si
     deshace. Va en versalitas finas como los demas rotulos de mando, sin caja:
     es una salida, no una accion, y no compite con el boton de compra que
     tiene debajo. */
  /* Cierre del informe: una flecha hacia la izquierda, que es por donde se
     retira el panel (bajo el sider). El rotulo "Atlas" es de la columna de la
     tienda y solo de ella (.st-close): esa tapa el mapa entera, y ahi la
     salida tiene que decir a donde lleva. En la ficha la flecha basta -el mapa
     se esta viendo al lado- y ademas cabe donde no cabe una palabra. */
  .rp-close{
    position:absolute;top:24px;right:20px;z-index:2;
    background:none;border:none;font-size:22px;line-height:1;cursor:pointer;
    color:var(--ink-soft);padding:2px 6px;font-family:'Circular',sans-serif;
    transition:color .15s,transform .15s;
  }
  .rp-close:hover{color:var(--ink);transform:translateX(-3px)}
  .st-close{
    background:var(--paper);cursor:pointer;
    font-family:'Circular',sans-serif;font-size:10px;letter-spacing:1.4px;
    text-transform:uppercase;line-height:1;padding:7px 11px 6px;
    color:var(--ink-soft);border:1px solid var(--line);border-radius:2px;
    transition:color .15s,border-color .15s;
  }
  .st-close:hover{color:var(--ink);border-color:var(--ink)}

  .rp-body{overflow-y:auto;padding:26px 42px 64px;flex:1 1 auto}
  .rp-body > *{max-width:620px}

  .rp-lede{
    font-size:17px;line-height:1.62;color:var(--ink);margin:0 0 4px;
  }
  .rp-sheet{margin-top:22px}
  .rp-sheet p{font-size:15px;line-height:1.7;color:var(--ink-soft);margin-bottom:9px}
  .rp-sheet p b{color:var(--ink);font-weight:400}

  /* Rotulo de seccion: filete con la palabra a la izquierda */
  .rp-block{margin-top:34px}
  .rp-block h5{
    display:flex;align-items:center;gap:12px;
    font-size:10.5px;letter-spacing:1.9px;text-transform:uppercase;
    color:var(--ink-soft);font-weight:400;margin:0 0 16px;opacity:.85;
  }
  .rp-block h5::after{
    content:"";flex:1 1 auto;height:1px;background:var(--line);
  }

  .rp-note{
    font-size:16.5px;line-height:1.68;color:var(--ink);margin:0 0 20px;
  }
  .rp-src{
    display:block;margin-top:8px;
    font-size:14px;line-height:1.5;font-style:italic;
    letter-spacing:0;text-transform:none;color:var(--ink-soft);
  }

  .rp-quote{margin:0 0 24px;padding:0 0 0 20px;border-left:1px solid var(--wine-light)}
  .rp-quote p{
    font-style:italic;font-size:18px;line-height:1.6;color:var(--ink);
    margin:0;letter-spacing:-.1px;
  }
  .rp-quote cite{
    display:block;margin-top:11px;
    font-size:14px;line-height:1.5;font-style:italic;
    letter-spacing:0;text-transform:none;color:var(--ink-soft);
  }

  /* Referencia sin cita literal: el titulo hace de gancho */
  .rp-ref{
    margin:0 0 20px;padding:0 0 0 20px;
    border-left:1px solid var(--wine-light);
  }
  .rp-title{
    display:block;font-size:16.5px;line-height:1.55;color:var(--ink);
  }
  .rp-title a{
    color:inherit;text-decoration:none;
    border-bottom:1px solid var(--line);
    transition:color .2s ease, border-color .2s ease;
  }
  .rp-title a:hover{color:var(--hov, var(--ink));border-bottom-color:var(--hov, var(--ink))}

  .rp-wineries{list-style:none;padding:0;margin:0}
  .rp-wineries li{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:9px 0;border-bottom:1px dotted var(--line);
  }
  .rp-wineries li:last-child{border-bottom:none}
  .rw-name{font-size:16px;color:var(--ink)}
  .rp-wineries a{
    flex:0 0 auto;font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;
    color:var(--wine);text-decoration:none;
  }
  .rp-wineries a:hover{color:var(--hov, var(--ink));text-decoration:underline}
  .rw-links{flex:0 0 auto;display:flex;gap:14px;align-items:baseline}
  .rw-none{
    margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-soft);
  }
  .rw-more{
    margin:12px 0 0;font-size:14px;font-style:italic;color:var(--ink-soft);
  }
  .rw-request{
    margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  }
  .rw-request a{
    display:block;flex:0 0 auto;
    font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--wine);text-decoration:none;
  }
  .rw-request a:hover{color:var(--hov, var(--ink));text-decoration:underline}

  .rp-sources ul{list-style:none;padding:0;margin:0}
  .rp-sources li{margin-bottom:15px}
  .rp-sources a{
    display:block;font-size:15.5px;line-height:1.45;color:var(--ink);
    text-decoration:none;
  }
  .rp-sources a:hover{color:var(--hov, var(--ink))}
  /* Solo la linea de fuente bajo cada enlace: el selector antiguo (.rp-sources
     span) alcanzaba tambien el span del rotulo h5 y dejaba READS, FURTHER
     READING y ELSEWHERE en minuscula cursiva, distintos del resto de titulos. */
  .rp-sources li span{
    display:block;margin-top:3px;
    font-size:14px;line-height:1.5;font-style:italic;
    letter-spacing:0;text-transform:none;color:var(--ink-soft);
  }

  /* Ficha de bodega: datos en dos columnas, con filete de puntos entre filas.
     Es el equivalente del bloque de ficha de una region. */
  .rp-facts{
    margin:0;display:grid;grid-template-columns:128px 1fr;column-gap:20px;
  }
  .rp-facts dt{
    font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--ink-soft);padding:10px 0 9px;border-top:1px dotted var(--line);
  }
  .rp-facts dd{
    margin:0;font-size:15.5px;line-height:1.5;color:var(--ink);
    padding:9px 0;border-top:1px dotted var(--line);
  }
  .rp-facts dt:first-of-type,
  .rp-facts dt:first-of-type + dd{border-top:none;padding-top:0}

  /* Saltos de la ficha a las piezas y colecciones que nombran la bodega */
  .rp-reads{list-style:none;padding:0;margin:0}
  .rp-reads li{padding:10px 0;border-bottom:1px dotted var(--line)}
  .rp-reads li:last-child{border-bottom:none}
  .rp-reads a{
    display:block;font-size:16px;line-height:1.45;color:var(--ink);
    text-decoration:none;
  }
  .rp-reads a:hover{color:var(--hov, var(--ink))}
  .rp-reads span{
    display:block;margin-top:3px;
    font-size:14px;line-height:1.5;font-style:italic;color:var(--ink-soft);
  }

  @media(max-width:760px){
    #report{left:0;width:100%;max-width:100%;border-right:none}
    .rp-facts{grid-template-columns:1fr}
    .rp-facts dt{padding:11px 0 0}
    .rp-facts dd{padding:3px 0 0;border-top:none}
    .rp-facts dt:first-of-type + dd{padding-top:3px}
    .rp-head{padding:26px 24px 20px}
    .rp-body{padding:22px 24px 56px}
    .rp-head h4{font-size:25px}
  }

  /* ---------- Perfil largo de bodega (profiles.js) ---------- */
  /* Mercados, en la cabecera bajo el nombre y encima del boton */
  .rp-avail{
    font-size:12px;letter-spacing:.8px;color:var(--ink);margin:12px 0 0;
  }
  .rp-avail span{
    font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--ink-soft);margin-right:8px;
  }
  /* El peso lo fija el bloque de Albert Sans al final del fichero: esta
     entradilla es el unico texto de cabecera que va en la familia de lectura. */
  .rp-identity{
    font-size:19px;line-height:1.45;color:var(--ink);font-weight:500;
    letter-spacing:-.15px;margin:0 0 14px;
  }
  .rp-editorial{
    font-size:16.5px;line-height:1.68;color:var(--ink);margin:0 0 14px;
  }
  .rp-offered{
    font-size:15px;line-height:1.6;color:var(--ink-soft);font-style:italic;
    margin:0;padding-left:14px;border-left:2px solid var(--wine);
  }
  /* Boton de stocks en la cabecera: la misma caja llena que el boton de la
     tarjeta del mapa (.pop-card .pop-btn), con su barajado de color al pasar. */
  .rp-stock.rp-cta{
    display:inline-block;margin-top:16px;
    padding:11px 16px;
    font-size:11px;letter-spacing:1.5px;
  }
  .rp-reads-all li span{
    display:block;margin-top:3px;
    font-size:14px;line-height:1.5;font-style:italic;color:var(--ink-soft);
  }

  /* Perfil largo, compacto: el informe mide un tercio de pantalla y la ficha
     tiene veinte filas. Se aprieta todo un punto, solo cuando #report lleva
     .is-profile (lo pone openWinery al pintar un perfil de profiles.js). */
  #report.is-profile .rp-head{padding:22px 30px 16px 30px}
  #report.is-profile .rp-head h4{font-size:24px;line-height:1.14}
  /* En los perfiles la region va bajo el titulo, no encima */
  #report.is-profile .rp-kicker{font-size:13.5px;margin:4px 0 0}
  #report.is-profile .rp-close{top:18px;right:14px}
  #report.is-profile .rp-stock.rp-cta{margin-top:9px;padding:8px 12px 7px;font-size:10px;letter-spacing:1.3px;line-height:1.3}
  #report.is-profile .rp-body{padding:16px 30px 40px}
  #report.is-profile .rp-avail{font-size:11.5px;margin:10px 0 0}
  #report.is-profile .rp-avail span{font-size:9.5px;letter-spacing:1.2px;margin-right:6px}
  #report.is-profile .rp-identity{font-size:16.5px;line-height:1.4;margin-bottom:9px}
  #report.is-profile .rp-editorial{font-size:14.5px;line-height:1.55;margin-bottom:10px}
  #report.is-profile .rp-offered{font-size:13.5px;line-height:1.5;padding-left:11px}
  #report.is-profile .rp-block{margin-top:20px}
  /* Sin filete entre cabecera y cuerpo: la linea bajo los mercados sobraba */
  #report.is-profile .rp-head{border-bottom:0;padding-bottom:6px}
  /* Titulos de bloque en caja de titulo, no en versalitas */
  #report.is-profile .rp-block h5{
    font-size:16px;letter-spacing:-.1px;text-transform:none;
    color:var(--ink);font-weight:500;opacity:1;margin-bottom:6px;gap:12px;
  }
  #report.is-profile .rp-facts{grid-template-columns:92px 1fr;column-gap:14px}
  #report.is-profile .rp-facts dt{font-size:9.5px;letter-spacing:1.2px;padding:6px 0 5px}
  #report.is-profile .rp-facts dd{font-size:13.5px;line-height:1.45;padding:6px 0 5px}
  #report.is-profile .rp-sources li{margin-bottom:8px}
  #report.is-profile .rp-sources a{font-size:14px;line-height:1.4}
  #report.is-profile .rp-sources li span{font-size:12.5px;line-height:1.4;margin-top:1px}

  /* Cabecera con standfirst */
  .rp-head.is-piece{padding-bottom:22px}
  /* Va dentro de .rp-body: hace scroll, no queda fijo con el titulo */
  .rp-standfirst{
    font-size:16.5px;line-height:1.55;color:var(--ink);
    margin:0 0 2px;font-weight:500;letter-spacing:-.1px;
  }
  .rp-stock{
    display:block;margin:14px 0 0;
    font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--wine);text-decoration:none;
  }
  .rp-stock:hover{color:var(--hov, var(--ink));text-decoration:underline}

  /* Cuerpo de la pieza */
  .pc-lede{
    font-size:17px;line-height:1.68;color:var(--ink);margin:8px 0 0;
  }
  .pc-sec{margin-top:30px}
  .pc-sec h5{
    display:flex;align-items:center;gap:12px;
    font-size:10.5px;letter-spacing:1.9px;text-transform:uppercase;
    color:var(--wine);font-weight:400;margin:0 0 14px;
  }
  .pc-sec h5::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
  .pc-lead,.pc-after{
    font-size:16.5px;line-height:1.68;color:var(--ink);margin:0 0 18px;
  }
  .pc-after{margin-top:-4px;color:var(--ink-soft)}

  .pc-counter{
    margin-top:34px;padding:22px 24px;max-width:620px;
    background:rgba(28,23,20,.045);border-radius:3px;
  }
  .pc-counter h5{
    font-size:10.5px;letter-spacing:1.9px;text-transform:uppercase;
    color:var(--wine);font-weight:400;margin:0 0 12px;
  }
  .pc-counter p{
    font-size:16px;line-height:1.7;color:var(--ink);margin:0;
  }

  /* Firma de cita: hablante en primera linea, medio debajo */
  .rp-quote cite strong,
  .rp-src strong{
    display:block;font-weight:400;font-style:normal;
    font-size:15px;letter-spacing:0;text-transform:none;
    color:var(--ink);
  }
  .cite-via{
    display:block;margin-top:2px;
  }
  .cite-loc{
    display:inline;margin-left:.35em;opacity:.7;
  }
  .rp-src-title{
    color:inherit;
  }
  /* La firma lleva a la fuente. Filete finisimo en vez de subrayado. */
  .cite-link{
    color:inherit;text-decoration:none;
    border-bottom:1px solid var(--line);
    transition:color .2s ease, border-color .2s ease;
  }
  .cite-link:hover{color:var(--hov, var(--ink));border-bottom-color:var(--hov, var(--ink))}
  /* Citas en castellano dentro de un cuerpo en ingles */
  .rp-quote[lang="es"] p{letter-spacing:0}

  /* ---------- Reads: lista unica del sider ---------- */
  /* Es el bloque que crece: se lleva el sobrante de la columna y hace scroll
     el solo, para que el pie no se descuelgue por debajo del panel. El filete
     de acento de cada entrada come 11px, que se descuentan del margen
     izquierdo para que el titulo caiga en la vertical del resto del sider. */
  #reads{
    flex:1 1 auto;min-height:0;overflow-y:auto;
    /* El aire de arriba era el que pedian las fichas altas de antes; con el
       indice de una linea sobra y se come una entrada. */
    padding:4px var(--pad-x) 4px calc(var(--pad-x) - 13px);
  }
  /* Rotulo de seccion dentro del indice. Va en versalitas finas, un escalon
     por debajo de la cabecera INDEX: ordena sin competir con ella. */
  .ix-seccion + .ix-seccion{margin-top:16px}
  .ix-titulo{
    font-family:'Circular',sans-serif;
    font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
    color:#a89c8d;line-height:1;
    /* Y el rotulo de seccion, despegado: entre el filete de INDEX y la
       primera seccion tiene que haber una pausa, o las dos cabeceras se leen
       como una sola. */
    padding:0 0 9px 11px;margin-top:18px;
  }

  #reads::-webkit-scrollbar{width:7px}
  #reads::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  /* Indice: una linea por perfil y nada mas. El titulo basta para reconocerlo
     y el resto -region y entradilla- esta en la ficha, a un clic. Asi caben
     todos de un vistazo, que es de lo que sirve un indice. */
  .read-item{
    display:block;width:100%;text-align:left;cursor:pointer;
    background:none;border:none;border-left:2px solid transparent;
    padding:2px 0 2px 11px;margin-bottom:0;
    font-family:'Circular',sans-serif;
    --tone:var(--wine);
    transition:border-left-color .3s ease, background-color .3s ease;
  }
  /* Al pasar por encima solo cambia de color el texto: en un indice de lineas
     juntas, la banda de fondo y el filete lateral pesaban mas que la propia
     entrada. El filete se reserva igual (2px transparentes en .read-item) y
     sigue siendo la marca del perfil abierto, que si es un estado y no un
     roce del raton. */
  .read-item.on{border-left-color:var(--wine);background:none}
  .read-item.on .ri-title{color:var(--wine)}
  /* Los titulos del indice van en Albert, la fuente de lectura: es una lista
     de nombres para leer, no una fila de rotulos. */
  .ri-title{
    display:block;font-family:var(--body-font);font-weight:400;
    font-size:15px;line-height:1.32;color:var(--ink);
    letter-spacing:-.2px;
    /* Un titulo largo no parte la linea del indice: se corta con puntos. */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:color .3s ease;
  }
  .read-item:hover .ri-title{color:var(--tone)}
  .read-item.on:hover .ri-title{color:var(--tone)}
  /* .ri-kicker y .ri-lead ya no se pintan: el listado del sider paso a ser un
     indice de una linea (drawReads, appgl.js). Las reglas se dejan porque
     devolver la region o la entradilla es anadir el <span> otra vez. */
  .ri-kicker{
    display:inline;font-size:12px;line-height:1.35;color:var(--ink-soft);
    font-style:italic;white-space:nowrap;
    transition:color .3s ease;
  }
  .ri-kicker::before{
    content:'\00b7';margin:0 6px;color:var(--line);font-style:normal;
  }
  .read-item:hover .ri-kicker{
    color:color-mix(in srgb, var(--tone) 55%, var(--ink-soft));
  }
  .ri-lead{
    display:block;font-size:12.5px;line-height:1.42;color:var(--ink);
    margin-top:4px;letter-spacing:-.1px;
    /* Dos lineas por entrada: el listado se lee de un vistazo y no crece
       con la longitud del lead. El texto entero sigue en la ficha. */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  @media (prefers-reduced-motion:reduce){
    .read-item, .ri-title, .ri-kicker, .ri-lead{transition:none}
  }


  /* ---------- Albert Sans: el texto que se lee, no el que se pulsa ---------- */
  /* Circular Book empasta en parrafo largo: mucho negro, ojo medio bajo y
     aperturas cerradas. Aqui el cuerpo pasa a Albert Sans en 300 -misma
     construccion geometrica, trazo mucho mas fino- y Circular se queda en lo
     que hace de rotulo: wordmark, reclamo, titulos de ficha y de bloque,
     versalitas, botones, mercados, nombres del listado y globos del mapa.

     El reparto es por funcion, no por tamano: entra el texto que se lee de
     corrido o se consulta como dato (ledes, parrafos, valores de ficha, pies
     de fuente); no entra nada sobre lo que se pincha.

     La fuente esta embebida en fonts.css como variable 300-500, con italica.
     Al ser variable, el enfasis usa 500 y no hay que cargar un fichero mas. */
  :root{--body-font:'Albert Sans','Circular',sans-serif}

  /* Cabecera del sider */
  .brand .sub,
  /* Ficha de region y de bodega */
  .rp-lede,
  .rp-identity,
  .rp-sheet p,
  .rp-facts dd,
  .rp-note,
  .rp-editorial,
  .rp-offered,
  .rw-none,
  .rw-more,
  /* Piezas editoriales */
  .pc-lede,
  .pc-lead,
  .pc-after,
  .pc-counter p,
  /* Explicacion del indice ("About"), que es la pieza mas larga de todas */
  .rp-about p,
  /* Firmas y lineas de fuente: autor, medio, fecha */
  .rp-src,
  .rp-quote cite,
  .rp-sources li span,
  .rp-reads span,
  .rp-reads-all li span{
    font-family:var(--body-font);
    font-weight:300;
  }

  /* Pie del selector de mercado: una linea de instruccion, no un rotulo. */
  .mkt-hint{font-family:var(--body-font);font-weight:300}
  /* Elegido el mercado, la fila de codigos se recoge: la respuesta ya esta
     escrita en el rotulo. "change" la devuelve. */
  #markets.is-set .mkt-row{display:none}
  .mkt-change{
    border:none;background:none;padding:0;cursor:pointer;
    font:inherit;color:var(--ink-soft);
    text-decoration:underline;text-underline-offset:.16em;
    transition:color .16s ease;
  }
  .mkt-change:hover{color:var(--ink)}
  .mkt-change:focus-visible{
    outline:none;color:var(--ink);box-shadow:0 0 0 2px rgba(168,129,74,.4);border-radius:2px;
  }

  /* Listado del sider, a medias. El nombre de la bodega es rotulo -es lo que
     se pincha- y se queda en Circular; lo que pasa a Albert es lo que se lee
     antes de decidir: la region que va en la misma linea y el lede de debajo.
     .ri-title no aparece aqui a proposito: hereda el Circular de .read-item. */
  .ri-kicker,
  .ri-lead{font-family:var(--body-font);font-weight:300}

  /* Enfasis dentro del cuerpo. En Circular el <b> iba en 400 porque el Book ya
     pesaba bastante; con un cuerpo en 300 hace falta un escalon real, y 500 es
     el tope del eje cargado. */
  .rp-sheet p b,
  .rp-facts dd b,
  .rp-lede b, .rp-lede strong,
  .rp-note b, .rp-note strong,
  .rp-editorial b, .rp-editorial strong,
  .rp-about b, .rp-about strong,
  .pc-lede strong, .pc-lead strong, .pc-after strong,
  .pc-counter p strong,
  .rp-quote cite strong,
  .rp-src strong{font-weight:500}

  /* El 300 aclara el gris de pagina, asi que los cuerpos largos suben medio
     punto y abren un poco la interlinea para recuperar el color que tenian.
     Los valores de ficha suben tambien: son la fila mas corta y la que antes
     se quedaba palida. */
  .rp-lede{font-size:17.5px}
  /* Entradilla del perfil. De Circular solo estan cargados el Book y el Medium,
     y un navegador no adelgaza trazos por sintesis: pedirle un 300 devolvia el
     Book, es decir el mismo grosor que el cuerpo. Para que sea fino de verdad
     tiene que ir en Albert. Conserva sus 19px, que es lo que la separa del
     texto que viene debajo; el contraste ahora lo da el tamano, no el peso. */
  .rp-identity{font-weight:300}
  .rp-note,
  .rp-editorial,
  .pc-lead,
  .pc-after,
  .rp-about p{font-size:17px;line-height:1.7}
  .pc-lede{font-size:17.5px;line-height:1.7}
  .pc-counter p{font-size:16.5px}
  .rp-facts dd{font-size:16px}

  /* Perfil largo: el panel es estrecho y la ficha tiene veinte filas, asi que
     conserva su escala comprimida, solo un pelo por encima de la anterior. */
  #report.is-profile .rp-editorial{font-size:15px;line-height:1.58}
  #report.is-profile .rp-facts dd{font-size:14px}

  /* Movil: el sider ocupa la pantalla entera y el ancho de columna baja de
     39ch, donde el 300 se lee peor a 14px. */
  @media(max-width:760px){
    .brand .sub{font-size:14.5px}
    .rp-lede{font-size:16.5px}
    .rp-note,.rp-editorial,.pc-lead,.pc-after,.pc-lede,.rp-about p{font-size:16px;line-height:1.62}
    .rp-facts dd{font-size:15.5px}
  }


  /* ---------- La puerta ---------- */
  /* Un panel en la franja del sider -exactamente donde estara el sider al
     entrar- con el atlas vivo a su derecha. No hay velo: el mapa no se tapa,
     se deja ver entero desde el primer momento, y al pulsar el boton no cambia
     el encuadre, cambia el panel. Papel opaco y filete a la derecha, los
     mismos del sider, para que la sustitucion no se note como un salto.

     Todo tiene que caber en 1366x768 sin scroll, que es la pantalla mas
     apretada que hay que servir. De ahi la unidad --gt, acotada por el alto:
     las tres proposiciones van a una linea cada una y el pie a una fila. Lo
     que no cabe esta en How it works, a un clic. */
  /* El sider se apaga, pero no se saca de la fila: sigue ocupando su franja.
     Con display:none el mapa -que es el hueco que queda- pasaba a medir la
     ventana entera, y fitToSpain() centraba el pais en ella: un tercio de la
     peninsula quedaba debajo del panel de la puerta y no se veia. Apagado y
     en su sitio, el hueco del mapa es exactamente la franja visible y el pais
     entra centrado en ella.
     De regalo, entrar deja de mover el mapa: el lienzo no cambia de tamano al
     quitar la puerta, asi que no hay que reencuadrar nada y el pin que se
     estaba mirando se queda donde estaba. */
  body.gate #panel{visibility:hidden}
  /* El informe cerrado no desaparece: se aparta con un translateX(-100%) que
     lo deja sobre el hueco del sider, tapado por el. Sin sider a la vista, ese
     panel de papel opaco quedaba asomando; con la puerta puesta no hay informe
     que ensenar. */
  body.gate #report{display:none}
  /* Los mandos del mapa y el credito se callan: la unica pieza de mando que
     acompana a la puerta es la leyenda de los pines. */
  body.gate #baseSwitch,body.gate #wineSwitch,body.gate #mapCredit,body.gate #activeFilters{visibility:hidden}
  /* La leyenda de los pines salio de la puerta con el rediseno del 8 sep
     2026: la landing la explica con palabras, no con figuras. */

  /* El mapa se queda de fondo, vivo, con un lavado de papel encima: flojo
     arriba y mas cerrado abajo, que es donde van las tarjetas. No intercepta
     el raton, asi que los pines siguen respondiendo. */
  body.gate #map::after{
    content:"";position:absolute;inset:0;z-index:400;pointer-events:none;
    background:linear-gradient(to top,
      color-mix(in srgb, var(--paper) 94%, transparent) 0%,
      color-mix(in srgb, var(--paper) 90%, transparent) 42%,
      color-mix(in srgb, var(--paper) 58%, transparent) 74%,
      color-mix(in srgb, var(--paper) 44%, transparent) 100%);
  }

  #gate{
    position:fixed;inset:0;z-index:1310;
    /* El contenedor no recibe el raton: solo sus dos piezas. Lo que queda
       entre ellas es mapa, y sigue siendo mapa. */
    pointer-events:none;
    color:var(--ink);font-family:'Circular',sans-serif;
  }
  body:not(.gate) #gate{display:none}

  /* ---- La franja de la izquierda ---- */
  /* El ancho del sider, papel opaco, el logo donde va en el atlas (misma
     clase .brand, mismo padding) y el pie pegado abajo (.panel-foot, el
     mismo del sider). */
  .gt-col{
    pointer-events:auto;
    position:absolute;top:0;left:0;height:100%;
    width:var(--col);min-width:var(--col);max-width:var(--col);
    background:var(--paper);border-right:1px solid var(--line);
    display:flex;flex-direction:column;overflow-y:auto;
  }
  .gt-brand{
    flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
    padding-bottom:0;
  }
  /* En el atlas el logo separa del reclamo; aqui el reclamo es enorme y la
     separacion la pone el. */
  .gt-brand .logo{margin-bottom:0}
  .gt-claim{
    font-size:clamp(34px, calc(var(--col) * .128), 68px);
    line-height:1.02;letter-spacing:-.03em;font-weight:400;color:var(--ink);
    margin:clamp(38px, 8.5vh, 104px) 0 clamp(26px, 5.2vh, 58px);
    max-width:11ch;
  }
  .gt-lede{
    font-family:var(--body-font);font-weight:400;
    font-size:clamp(14px, calc(var(--col) * .0345), 18px);line-height:1.5;
    color:var(--ink);margin:0 0 clamp(12px, 2vh, 22px);max-width:34ch;
  }
  .gt-sub{
    font-family:var(--body-font);font-weight:300;
    font-size:clamp(13.5px, calc(var(--col) * .033), 17px);line-height:1.5;
    color:var(--ink-soft);margin:0;max-width:34ch;
  }

  /* ---- Sobre el mapa, abajo a la derecha ---- */
  .gt-over{
    pointer-events:auto;
    position:absolute;left:var(--col);right:0;bottom:0;
    padding:0 clamp(20px, 3.2vw, 58px) clamp(40px, 6.5vh, 76px);
    display:flex;flex-direction:column;align-items:flex-end;
  }
  /* Tres columnas separadas por un filete, como la maqueta. Sin caja: el
     lavado del mapa ya las sostiene. */
  .gt-cards{width:100%;display:grid;grid-template-columns:repeat(3, 1fr)}
  .gt-card{padding:0 clamp(16px, 1.9vw, 32px)}
  .gt-card:first-child{padding-left:0}
  .gt-card:last-child{padding-right:0}
  .gt-card + .gt-card{border-left:1px solid var(--line)}
  .gt-card h2{
    font-size:clamp(14px, .95vw, 17px);font-weight:500;line-height:1.25;
    letter-spacing:-.1px;margin:0 0 clamp(8px, 1.2vh, 14px);
  }
  .gt-card p{
    font-family:var(--body-font);font-weight:300;
    font-size:clamp(13px, .84vw, 15px);line-height:1.5;color:var(--ink-soft);margin:0;
  }

  /* ---- Las dos salidas ---- */
  .gt-actions{
    margin-top:clamp(24px, 4.2vh, 52px);
    display:flex;flex-direction:column;align-items:center;
    gap:clamp(10px, 1.5vh, 18px);
  }
  .gt-cta{
    display:inline-block;
    font-size:clamp(10px, .72vw, 12px);
    letter-spacing:.16em;line-height:1;
    padding:clamp(14px, 1.9vh, 20px) clamp(24px, 2.6vw, 42px) clamp(13px, 1.8vh, 19px);
  }
  /* .gt-how ya no se pinta: la landing dejo una sola salida (8 sep 2026). La
     regla se queda porque devolver el enlace es volver a poner su <a>. */
  .gt-how{
    font-family:'Circular',sans-serif;font-size:clamp(9.5px, .68vw, 11px);
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
    text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;
    transition:color .18s ease, border-color .18s ease;
  }
  .gt-how:hover{color:var(--hov, var(--accent));border-bottom-color:var(--hov, var(--accent))}

  /* ---- Leyenda de los pines ---- */
  /* Arriba a la derecha del mapa, la unica pieza de mando que acompana a la
     puerta. Explica las tres figuras -cuadrado negro, punto rojo, punto gris-
     sin gastar una linea de texto en el panel. Los colores son los mismos de
     appgl.js: PIN_CAJA, PIN_RED y el gris de las bodegas sin stock. */
  #pinLegend{
    display:none;
    position:absolute;top:14px;right:14px;z-index:500;
    align-items:center;gap:14px;
    padding:8px 12px 7px;
    background:rgba(241,241,238,.92);border:1px solid var(--line);border-radius:3px;
    font-family:'Circular',sans-serif;line-height:1;
    font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-soft);
    -webkit-user-select:none;user-select:none;pointer-events:none;
  }
  .pl-it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .pl-sq{width:7px;height:7px;background:#1c1714;display:inline-block}
  .pl-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
  .pl-stock{background:#B42522}
  .pl-cb{background:#5c5249}

  /* En una franja estrecha la leyenda estorba mas de lo que explica. */
  @media (max-width: 980px){
    #pinLegend{display:none !important}
  }

  /* ---- Movil ---- */
  /* Por debajo de 760 px no hay tres franjas: la puerta ocupa la pantalla y el
     mapa queda detras, como pasaba con el sider. Aqui si hace scroll, porque
     el alto de un telefono no da para todo y forzarlo apretaria la letra hasta
     hacerla ilegible. */
  @media (max-width: 760px){
    body.gate #menuBtn,body.gate #mobileHeader{visibility:hidden}
    /* Sin franjas: la puerta se lee de arriba abajo -marca, tarjetas,
       salidas, pie-. `display:contents` saca a los hijos de .gt-col para que
       el pie pueda ir el ultimo, detras de las tarjetas. */
    #gate{
      display:flex;flex-direction:column;pointer-events:auto;
      background:var(--paper);overflow-y:auto;
    }
    .gt-col{display:contents}
    .gt-brand{order:1;display:block;padding:30px var(--pad-x) 0}
    .gt-claim{font-size:34px;margin:22px 0 18px;max-width:none}
    .gt-lede{font-size:15.5px;max-width:none}
    .gt-sub{font-size:15px;max-width:none}
    .gt-over{
      order:2;position:static;align-items:stretch;
      padding:26px var(--pad-x) 0;
    }
    .gt-cards{grid-template-columns:1fr}
    .gt-card{padding:15px 0}
    .gt-card + .gt-card{border-left:none;border-top:1px solid var(--line)}
    .gt-card h2{font-size:16px}
    .gt-card p{font-size:14.5px}
    .gt-actions{align-items:stretch;margin-top:26px}
    .gt-cta{width:100%;font-size:11.5px;padding:16px 20px 15px}
    .gt-how{text-align:center;align-self:center}
    #gate .panel-foot{order:3;margin-top:26px}
  }


  /* ---------- Paginas de texto ---------- */
  /* About -y manana FAQ, Contact, Legal, Privacy, Copyright- no salen en la
     franja del informe. El informe es una ficha: se abre al lado del sider y se
     retira por debajo de el. Esto es una pagina, y se comporta como tal: un
     velo de papel al 80% sobre toda la franja del mapa, con una flecha arriba
     para cerrarla. Va por debajo del sider (1300), que sigue leyendose. */
  #page{
    position:fixed;top:0;right:0;bottom:0;left:var(--col);z-index:1260;
    display:flex;flex-direction:column;overflow-y:auto;
    padding:0 clamp(28px, 6vw, 110px) 0 clamp(36px, 7.2vw, 128px);
    background:color-mix(in srgb, var(--paper) 85%, transparent);
    transition:opacity .5s ease;
  }
  #page.out{opacity:0;pointer-events:none}
  /* Cerrada se queda en la pagina, apagada. Sin esta linea el display:flex
     gana al hidden y seguiria tapando el mapa. */
  #page[hidden]{display:none}

  /* La columna de lectura no se centra en vertical: el texto es largo,
     empieza arriba y corre hacia abajo. */
  .pg-copy{
    margin:0;padding:clamp(26px, 4.5vh, 58px) 0 72px;
    max-width:clamp(400px, 42vw, 620px);
    font-family:var(--body-font);font-weight:300;color:var(--ink);
  }
  /* Cierre: flecha a la izquierda, encima del titulo y alineada con el. En
     Circular, como el resto de mandos. */
  /* La flecha va al borde derecho, como la de la ficha de bodega (.rp-close):
     en las dos se cierra por el mismo sitio y no hay que buscarla. Sale del
     flujo, asi que el titulo ya no baja para dejarle sitio. */
  .pg-close{
    /* Pegada al borde derecho de la franja, no al de la columna de texto: es
       el mismo sitio donde se cierra la ficha de bodega. #page es fixed, asi
       que basta con posicionarla contra el. */
    position:absolute;top:24px;right:clamp(14px, 2vw, 30px);z-index:2;
    padding:2px 6px;margin:0;
    background:none;border:none;cursor:pointer;
    font-family:'Circular',sans-serif;font-size:23px;line-height:1;
    color:var(--ink-soft);transition:color .15s,transform .15s;
  }
  .pg-close:hover{color:var(--hov, var(--ink));transform:translateX(-3px)}
  .pg-close:focus-visible{outline:none;color:var(--ink);transform:translateX(-3px)}
  .pg-kicker{
    font-family:'Circular',sans-serif;font-size:10.5px;letter-spacing:1.9px;
    text-transform:uppercase;color:var(--ink-soft);margin:0 0 13px;
  }
  .pg-title{
    font-family:'Circular',sans-serif;font-weight:400;
    font-size:clamp(25px, 2.35vw, 33px);line-height:1.14;letter-spacing:-.2px;
    margin:0 0 24px;
  }
  .pg-body p{
    font-size:clamp(15.5px, min(1.32vw, 2.35vh), 18.5px);
    line-height:1.62;letter-spacing:-.004em;margin:0 0 17px;
  }
  .pg-body p:last-child{margin-bottom:0}
  .pg-body strong{font-weight:500}
  .pg-body u{
    text-decoration:underline;text-decoration-color:#b8a06a;
    text-decoration-thickness:1px;text-underline-offset:.2em;
  }
  @media (prefers-reduced-motion:reduce){ #page{transition:none} }
  @media (max-width: 760px){
    #page{left:0;padding:0 22px}
    .pg-copy{max-width:none;padding:20px 0 56px}
    .pg-close{font-size:26px}
    .pg-title{font-size:26px}
    .pg-body p{font-size:16.5px;line-height:1.6}
  }

  /* ---------- Tercera columna: stocks de una bodega (stocks.js) ---------- */
  /* Misma regla de reparto que el resto de la pagina: Circular para lo que es
     rotulo o se pulsa (nombres, precios, cantidades, Add, Checkout, titulos);
     Albert Sans 300 para lo que se lee (las etiquetas del vino, las notas, los
     importes del resumen). Filetes punteados como en las filas de la ficha. */
  /* Tercera franja, del mismo ancho que el sider y la ficha: tapa el mapa
     mientras esta abierta. Se abre con el boton de la cabecera de la ficha. */
  #stocks{
    position:fixed;top:0;left:calc(var(--col) * 2);height:100%;
    width:calc(100vw - var(--col) * 2);min-width:var(--col);
    background:var(--paper);border-left:1px solid var(--line);
    box-shadow:-10px 0 44px rgba(0,0,0,.10);
    transform:translateX(100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s;
    z-index:1190;display:flex;flex-direction:column;
    font-family:'Circular',sans-serif;color:var(--ink);
  }
  #stocks.open{transform:translateX(0);visibility:visible;transition:transform .26s cubic-bezier(.4,0,.2,1)}
  .st-head{position:relative;padding:22px 30px 6px;flex:0 0 auto}
  .st-head > *{max-width:620px}
  .st-kicker{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft)}
  /* Sitio para la salida "Atlas" de la esquina, que es una palabra en una caja
     y no una flecha: un nombre largo se le metia debajo. */
  .st-head h4{font-size:24px;font-weight:400;line-height:1.14;margin:4px 0 0;letter-spacing:-.2px;padding-right:78px}
  .st-head .st-kicker{padding-right:78px}
  .st-market{
    font-size:13.5px;line-height:1.45;color:var(--ink-soft);margin:5px 0 0;
    font-style:italic;font-weight:400;
  }
  .st-market a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:.16em}
  .st-market a:hover{color:var(--ink)}
  .st-ships{font-size:11.5px;letter-spacing:.8px;color:var(--ink);margin:10px 0 0}
  .st-ships span{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
  /* Cierre: el mismo boton que la ficha (.rp-close), en el mismo sitio y con
     la flecha apuntando por donde se retira el panel. La ficha se va hacia la
     izquierda (bajo el sider) y lleva <-; la columna de stocks y los cajones
     se van hacia la derecha y llevan ->. */
  .cd-close{
    position:absolute;top:18px;right:14px;z-index:2;
    background:none;border:none;font-size:22px;line-height:1;cursor:pointer;
    color:var(--ink-soft);padding:2px 6px;font-family:'Circular',sans-serif;
    transition:color .15s,transform .15s;
  }
  .cd-close:hover{color:var(--ink);transform:translateX(3px)}
  /* La salida de la columna de la tienda dice "Atlas" y no lleva flecha. Esta
     columna tapa el mapa entero, asi que aqui la salida tiene que decir a
     donde lleva; en la ficha, que se abre al lado del mapa y no lo tapa, la
     flecha basta y sigue siendo una flecha. */
  .st-close{position:absolute;top:18px;right:14px;z-index:2}
  .st-alert{font-family:var(--body-font);font-weight:300;font-size:13.5px;line-height:1.45;color:#B42522;margin:8px 0 0}
  .st-body{overflow-y:auto;padding:6px 30px 40px;flex:1 1 auto}
  .st-body > *{max-width:620px}
  .st-note{font-family:var(--body-font);font-weight:300;font-size:15px;line-height:1.55;color:var(--ink-soft);margin:14px 0}
  .st-note a{color:var(--ink)}
  .st-list{list-style:none;margin:8px 0 0;padding:0}
  .st-row{
    display:grid;grid-template-columns:12px 1fr;column-gap:14px;
    padding:14px 0 13px;border-top:1px dotted var(--line);
  }
  .st-row:first-child{border-top:none;padding-top:6px}
  .st-dot{display:block;width:8px;height:8px;border-radius:50%;margin-top:7px}
  .st-line1{display:flex;align-items:baseline;gap:14px}
  .st-name{font-size:15.5px;font-weight:500;line-height:1.3;letter-spacing:-.1px;flex:1 1 auto}
  .st-price{font-size:13.5px;white-space:nowrap;color:var(--ink)}
  .st-line2{display:flex;align-items:flex-start;gap:14px;margin-top:4px}
  /* Las etiquetas del vino son texto que se lee, no rotulo: Albert 300 y un
     gris mas claro, para que el nombre y el precio manden. */
  .st-meta{
    font-family:var(--body-font);font-weight:300;
    font-size:13.5px;line-height:1.5;color:var(--grey);flex:1 1 auto;
  }
  .st-ctrl{flex:0 0 auto;min-width:96px;text-align:right;padding-top:1px}
  .st-qty,.cd-qty{display:inline-flex;align-items:center;flex:0 0 auto;min-width:96px;justify-content:flex-end}
  .st-qty button,.cd-qty button{
    background:none;border:none;font:inherit;font-size:16px;line-height:1;
    cursor:pointer;color:var(--ink);padding:2px 8px;font-family:'Circular',sans-serif;
  }
  /* Al pasar por encima, el signo se levanta: papel y una sombra gris corta.
     Antes cambiaba de color con el barajado de la casa, y un "-" que se pone
     salmon parece un aviso y no un boton. */
  .st-qty button:hover,.cd-qty button:hover{
    color:var(--ink);background:var(--paper);border-radius:2px;
    box-shadow:0 1px 4px rgba(28,23,20,.22);
  }
  .st-qty button:active,.cd-qty button:active{box-shadow:0 1px 2px rgba(28,23,20,.28)}
  .st-qty button:disabled:hover,.cd-qty button:disabled:hover{box-shadow:none;background:none}
  .st-qty button:disabled,.cd-qty button:disabled,
  .st-qty button:disabled:hover,.cd-qty button:disabled:hover{color:#c3b9a7;cursor:default}
  .st-num,.cd-num{min-width:26px;text-align:center;font-size:14.5px}
  /* Add: la misma caja llena que el boton de la tarjeta del mapa y el de la
     ficha, un punto mas pequena; el color de hover lo baraja editorial.js. */
  .st-add{
    display:inline-block;
    font-size:9.5px;letter-spacing:1.3px;line-height:1.3;padding:7px 11px 6px;
  }
  .st-in{font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-soft);line-height:1.3;display:inline-block;padding:5px 0 4px}
  .st-oos{font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:#c3b9a7;line-height:1.3;display:inline-block;padding:5px 0 4px}
  .st-row.is-busy .st-ctrl,.st-row.is-busy .st-qty{opacity:.45;pointer-events:none}
  .st-foot{
    margin-top:20px;padding-top:12px;border-top:1px solid var(--line);
    font-family:var(--body-font);font-weight:300;font-size:14px;line-height:1.55;color:var(--ink-soft);
  }
  .st-foot a{font-family:'Circular',sans-serif;font-weight:400;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)}
  .st-foot a:hover{color:var(--hov, var(--accent));border-bottom-color:var(--hov, var(--accent))}

  /* Boton de stocks arriba a la derecha de la ficha: la cabecera no hace
     scroll, asi que queda siempre a la vista aunque la ficha sea larga.
     El titulo y el boton comparten fila en una rejilla de dos columnas, y no
     se pisan aunque crezca cualquiera de los dos. Antes el boton iba en
     posicion absoluta y el titulo le reservaba sitio con un padding a ojo:
     bastaba un titulo de dos lineas -"Old vines on granite"- o un rotulo mas
     largo -"Intro case & current stock"- para que se montaran. El resto de la
     cabecera -la zona, los mercados, el dossier, el formulario- cruza las dos
     columnas y corre a todo el ancho. */
  #report.is-profile .rp-head{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;align-items:start;
    /* El hueco de la derecha es el de la flecha de cierre. El de abajo es el
       de la regla de mas arriba (sin filete entre cabecera y cuerpo): esta va
       despues en el fichero y se lleva el atajo entero, asi que lo repite. */
    padding:22px 52px 6px 30px;
  }
  #report.is-profile .rp-head > h4{grid-column:1;grid-row:1;padding-right:0}
  #report.is-profile .rp-head > .rp-stock.rp-cta{
    grid-column:2;grid-row:1;justify-self:end;margin:0;max-width:none;
    white-space:nowrap;
  }
  #report.is-profile .rp-head > *:not(h4):not(.rp-stock):not(.rp-close){
    grid-column:1 / -1;
  }
  /* La entradilla del perfil crece hasta el doble de palabras: baja medio
     punto y abre la interlinea para que sesenta palabras sigan siendo una
     entradilla y no un parrafo. */
  #report.is-profile .rp-identity{font-size:15.5px;line-height:1.52;margin-bottom:12px;letter-spacing:0}

  /* ---------- Cajon del carrito (stocks.js) ---------- */
  #cartDrawer{
    position:fixed;top:0;right:0;height:100%;width:min(440px, 100vw);
    background:var(--cart-bg);color:var(--ink);
    transform:translateX(100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s;
    z-index:1400;display:flex;flex-direction:column;
    box-shadow:-12px 0 40px rgba(0,0,0,.12);border-left:1px solid var(--line);
    font-family:'Circular',sans-serif;
  }
  #cartDrawer.open{transform:translateX(0);visibility:visible;transition:transform .26s cubic-bezier(.4,0,.2,1)}
  .cd-head{
    position:relative;padding:22px 30px 12px;flex:0 0 auto;
    border-bottom:1px solid var(--line);
  }
  .cd-head .cd-kicker{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft)}
  .cd-head h4{font-size:24px;font-weight:400;margin:4px 0 0;letter-spacing:-.2px;line-height:1.14}
  .cd-lines{list-style:none;margin:0;padding:8px 30px 14px;flex:1 1 auto;overflow-y:auto}
  .cd-winery{
    font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-soft);
    margin:14px 0 2px;padding-bottom:6px;border-bottom:1px solid var(--line);
  }
  .cd-winery a{color:var(--ink-soft);text-decoration:none}
  .cd-winery a:hover{color:var(--ink)}
  .cd-line{padding:10px 0 11px;border-top:1px dotted var(--line)}
  .cd-winery + .cd-line{border-top:none}
  .cd-l1{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15.5px;font-weight:500;line-height:1.3;letter-spacing:-.1px}
  .cd-remove{background:none;border:none;font:inherit;font-size:14px;cursor:pointer;color:var(--ink-soft);padding:0 2px;font-family:'Circular',sans-serif}
  .cd-remove:hover{color:var(--ink)}
  .cd-l2{display:flex;align-items:center;gap:12px;margin-top:3px;font-size:14px}
  .cd-unit{flex:1 1 auto;color:var(--ink-soft);white-space:nowrap;font-family:var(--body-font);font-weight:300;font-size:14.5px}
  .cd-total{min-width:84px;text-align:right;font-size:13.5px}
  .cd-line.is-busy .cd-l2{opacity:.5;pointer-events:none}
  .cd-empty{padding:22px 30px;font-family:var(--body-font);font-weight:300;font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0}
  .cd-foot{flex:0 0 auto;padding:12px 30px 24px;border-top:1px solid var(--line)}
  .cd-err{font-family:var(--body-font);font-weight:300;font-size:13.5px;line-height:1.5;color:#B42522;margin:0 0 10px}
  .cd-row{
    display:flex;justify-content:space-between;gap:12px;
    font-family:var(--body-font);font-weight:300;font-size:14.5px;line-height:1.6;color:var(--ink);
  }
  .cd-row.cd-main{font-family:'Circular',sans-serif;font-weight:400;font-size:14.5px}
  .cd-row.cd-sub{color:var(--ink-soft);padding-left:14px;font-size:13.5px}
  .cd-iiee{padding-left:28px;font-family:var(--body-font);font-weight:300;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
  .cd-iiee-l{display:flex;justify-content:space-between;gap:12px}
  .cd-iiee-d{font-size:12px;color:var(--grey);margin-bottom:4px}
  .cd-total-line{
    display:flex;justify-content:space-between;align-items:baseline;
    border-top:1px solid var(--ink);margin-top:10px;padding-top:10px;font-size:14px;
  }
  .cd-total-line span:last-child{font-size:22px;letter-spacing:-.2px}
  /* Checkout: la caja de versalitas del atlas, a todo el ancho */
  .cd-checkout{
    display:block;margin-top:16px;padding:12px 0 11px;text-align:center;
    font-size:10.5px;letter-spacing:1.6px;
  }

  /* Linea del carrito y de la cuenta en el sider, bajo el mercado (stocks.js). */
  .mkt-cart,.mkt-account{
    display:block;margin:12px 0 0;font-size:13px;line-height:1.45;
    color:var(--ink);text-decoration:none;
  }
  /* `display:block` gana al atributo `hidden` del HTML, que solo trae un
     display:none de hoja de usuario. Sin esto, esconder una de estas lineas
     desde JavaScript no la escondia: es lo que pasaba con la del proximo
     lanzamiento, que seguia ofreciendose a quien ya tenia cuenta. */
  .mkt-cart[hidden],.mkt-account[hidden],.mkt-lead[hidden]{display:none}
  .mkt-account{margin-top:6px;color:var(--ink-soft)}
  .mkt-cart b{font-weight:500}
  .mkt-cart:hover,.mkt-account:hover{color:var(--hov, var(--accent))}
  .mkt-account .ma-name{color:var(--ink)}
  .mkt-account .ma-sep{color:#c3b9a7;margin:0 .5em}

  /* Panel de la cuenta: mismo cajon que el carrito, otra pieza dentro. */
  #accountDrawer{
    position:fixed;top:0;right:0;height:100%;width:min(440px, 100vw);
    background:var(--paper);color:var(--ink);
    transform:translateX(100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s;
    z-index:1400;display:flex;flex-direction:column;
    box-shadow:-12px 0 40px rgba(0,0,0,.12);border-left:1px solid var(--line);
    font-family:'Circular',sans-serif;
  }
  #accountDrawer.open{transform:translateX(0);visibility:visible;transition:transform .26s cubic-bezier(.4,0,.2,1)}
  .ac-body{overflow-y:auto;padding:14px 30px 40px;flex:1 1 auto}
  .ac-lede{font-family:var(--body-font);font-weight:300;font-size:16px;line-height:1.55;color:var(--ink);margin:6px 0 18px}
  .ac-list{list-style:none;margin:0;padding:0}
  .ac-list li{padding:12px 0;border-top:1px dotted var(--line)}
  .ac-list li:first-child{border-top:none}
  .ac-list a,.ac-list .ac-soon{display:block;font-size:15.5px;line-height:1.35;color:var(--ink);text-decoration:none}
  .ac-list a:hover{color:var(--hov, var(--accent))}
  .ac-list .ac-soon{color:var(--ink-soft)}
  .ac-list span{display:block;margin-top:3px;font-family:var(--body-font);font-weight:300;font-size:14px;line-height:1.5;color:var(--ink-soft)}
  .ac-list .ac-tag{display:inline-block;margin:0 0 0 8px;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);vertical-align:middle}
  .ac-cta{
    display:inline-block;margin-top:20px;padding:9px 14px 8px;
    font-size:9.5px;letter-spacing:1.1px;line-height:1.3;
  }
  .ac-out{
    margin-left:14px;font-size:12.5px;color:var(--ink-soft);
    background:none;border:none;padding:0;cursor:pointer;font-family:'Circular',sans-serif;
  }
  .ac-out:hover{color:var(--ink)}

  /* Entrar y darse de alta, dentro del cajon. Dos pestanas y un formulario;
     los campos son los mismos de la tienda, con su misma validacion detras. */
  .ac-form{margin-top:18px}
  .ac-tabs{display:flex;gap:18px;margin-bottom:14px;border-bottom:1px solid var(--line)}
  .ac-tab{
    background:none;border:none;padding:0 0 8px;cursor:pointer;
    font-family:'Circular',sans-serif;font-size:12.5px;color:var(--ink-soft);
    border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
  }
  .ac-tab:hover{color:var(--ink)}
  .ac-tab.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
  .ac-form input[type=text],
  .ac-form input[type=email],
  .ac-form input[type=password]{
    width:100%;padding:9px 11px;margin-bottom:8px;
    border:1px solid var(--line);background:var(--paper);color:var(--ink);
    font-family:var(--body-font);font-weight:300;font-size:14.5px;border-radius:2px;
  }
  .ac-form input:focus{outline:none;border-color:var(--ink)}
  .ac-row2{display:flex;gap:8px}
  .ac-row2 input{flex:1 1 0;min-width:0}
  .ac-check{
    display:block;margin:2px 0 10px;
    font-family:var(--body-font);font-weight:300;font-size:13px;line-height:1.45;color:var(--ink-soft);
  }
  .ac-check input{margin-right:7px}
  .ac-submit{
    display:block;width:100%;margin-top:4px;border:none;cursor:pointer;
    font-family:'Circular',sans-serif;
  }
  .ac-submit:disabled{opacity:.5;cursor:default}
  .ac-msg{
    font-family:var(--body-font);font-weight:300;font-size:13px;line-height:1.5;
    color:var(--ink-soft);margin:9px 0 0;min-height:1em;
  }
  .ac-msg.is-err{color:var(--accent)}
  .ac-fine{
    font-family:var(--body-font);font-weight:300;font-size:12.5px;line-height:1.5;
    color:var(--ink-soft);margin:10px 0 0;
  }
  .ac-fine a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:.16em}
  .ac-fine a:hover{color:var(--ink)}

  @media(max-width:760px){
    #stocks{left:0;width:100%;min-width:0;border-left:none;z-index:1260}
    .st-head{padding:22px 24px 6px}
    .st-body{padding:6px 24px 40px}
    #cartDrawer,#accountDrawer{width:100vw}
    .cd-head{padding:22px 24px 12px}
    .cd-lines,.cd-foot,.ac-body{padding-left:24px;padding-right:24px}
    #report.is-profile .rp-head > h4{padding-right:150px}
  }

  /* ---------- Indice por grupos (drawReads / ixGrupos) ---------- */
  .ix-grupo{border-top:1px solid var(--line)}
  .ix-grupo:first-child{border-top:none}
  .ix-cab{
    display:flex;align-items:center;gap:8px;width:100%;
    background:none;border:none;cursor:pointer;text-align:left;
    padding:11px 4px 10px 11px;font-family:'Circular',sans-serif;color:var(--ink);
  }
  /* El rotulo del grupo manda sobre lo que hay dentro, asi que se lee mayor
     que sus entradas (.ri-title, 15px) y no menor, que era lo que pasaba: al
     desplegar, la categoria quedaba por debajo de su propio contenido. */
  .ix-nombre{font-size:15.5px;letter-spacing:-.1px;font-weight:500;line-height:1.2;transition:color .15s}
  .ix-n{
    font-family:var(--body-font);font-weight:300;font-size:12px;
    color:var(--ink-soft);margin-left:auto;white-space:nowrap;
  }
  .ix-chev{
    width:6px;height:6px;flex:0 0 auto;margin:0 4px 0 8px;
    border-right:1px solid var(--ink-soft);border-bottom:1px solid var(--ink-soft);
    transform:rotate(-45deg);transition:transform .2s;
  }
  .ix-grupo.is-open .ix-chev{transform:rotate(45deg) translate(-2px,-2px)}
  .ix-cab:hover .ix-nombre{color:var(--hov, var(--accent))}
  .ix-cuerpo{display:none;padding:0 0 12px}
  .ix-grupo.is-open .ix-cuerpo{display:block}
  /* Cada entrada: nombre (y D.O.) a la izquierda, cifra a la derecha */
  .read-item{display:flex;align-items:baseline;gap:8px}
  /* Y sangradas bajo su rotulo: desplegado, un grupo tiene que verse como un
     grupo -donde empieza y donde acaba- sin mas linea que el escalon. La
     sangria es solo la del indice por grupos; el listado de una busqueda no
     tiene rotulo del que colgar y se queda a la izquierda. */
  .ix-cuerpo .read-item{padding-left:27px}
  .ix-cuerpo .ix-sub{padding-left:27px}
  .read-item .ri-title{flex:1 1 auto;min-width:0}
  .ri-n{
    flex:0 0 auto;font-family:var(--body-font);font-weight:300;
    font-size:11.5px;line-height:1.32;color:var(--ink-soft);white-space:nowrap;padding-right:4px;
  }
  /* Cuadradito de caja de introduccion, la misma figura que el pin */
  .ri-sq{display:inline-block;width:7px;height:7px;background:var(--ink);margin-left:7px;vertical-align:0}
  .read-item.is-grey .ri-title{color:var(--grey)}
  .read-item.is-grey:hover .ri-title{color:var(--tone)}
  /* Subrotulo de region dentro de Carta Blanca */
  .ix-sub{
    display:flex;align-items:baseline;justify-content:space-between;
    font-family:'Circular',sans-serif;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
    color:#a89c8d;padding:10px 4px 4px 11px;
  }
  .ix-sub + .ix-sub{margin-top:0}
  /* Las capas del mapa volvieron a la esquina del mapa el 9 sep 2026: sus
     reglas de dentro del indice (.ix-capas, .ix-nota) se fueron con ellas.
     #baseSwitch y #climaLegend se pintan otra vez con las suyas de arriba. */
  .reads-empty{padding-left:11px}

  /* ---------- Correo a cambio de algo (leads.js) ---------- */
  /* Segunda fila de acciones de la ficha: dossier y estrella, en pequeno */
  .rp-ctas{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
  .rp-cta2{
    display:inline-block;padding:6px 10px 5px;
    font-size:9.5px;letter-spacing:1.2px;line-height:1.3;
  }
  .rp-star{
    background:none;border:none;padding:0;cursor:pointer;
    font-family:'Circular',sans-serif;font-size:11.5px;letter-spacing:.3px;color:var(--ink-soft);
    transition:color .15s;
  }
  .rp-star:hover{color:var(--ink)}
  .rp-star.is-on{color:var(--gold)}
  #report.is-profile .rp-ctas{margin-top:9px}
  /* El formulario en linea, en la cabecera de la ficha o en el indice */
  .rp-lead,.ix-lead,.ld-slot{margin-top:12px}
  .ix-lead{padding:0 4px 4px 11px}
  .ld{max-width:420px}
  .ld-title{
    font-family:'Circular',sans-serif;font-size:13px;line-height:1.35;color:var(--ink);
    margin:0 0 8px;font-weight:500;
  }
  .ld-row{margin-bottom:6px}
  .ld-row input,.ld-row select{
    width:100%;padding:9px 11px;border:1px solid var(--line);background:var(--paper);
    color:var(--ink);font-family:var(--body-font);font-weight:300;font-size:14px;border-radius:2px;
  }
  .ld-field{display:flex;align-items:stretch}
  .ld-field input{
    flex:1 1 auto;min-width:0;padding:9px 11px;border:1px solid var(--line);border-right:none;
    background:var(--paper);color:var(--ink);font-family:var(--body-font);font-weight:300;font-size:14px;
    border-radius:2px 0 0 2px;
  }
  /* Un hueco donde escribir, no una caja de color: el fondo es el papel de la
     pagina y lo que dice que se puede escribir ahi es una sombra corta hacia
     dentro, un punto mas oscura que el papel. */
  .ld-field input,.ld select,
  .ac-form input[type=text],.ac-form input[type=email],.ac-form input[type=password]{
    box-shadow:inset 0 1px 2px rgba(28,23,20,.07);
  }
  .ld input:focus,.ld select:focus{outline:none;border-color:var(--ink)}
  .ld-go{
    flex:0 0 auto;width:40px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
    font-family:'Circular',sans-serif;font-size:16px;cursor:pointer;border-radius:0 2px 2px 0;
    transition:background .15s,color .15s;
  }
  /* El hover lo pone la familia de botones, al final del fichero. */
  .ld-note{
    font-family:var(--body-font);font-weight:300;font-size:12.5px;line-height:1.5;
    color:var(--ink-soft);margin:7px 0 0;
  }
  .ld-note.is-ok{color:var(--ink)}
  .ld-note.is-err{color:var(--accent)}
  /* La accion del indice ("Send my shortlist to my inbox") */
  .read-item.ri-action .ri-title{color:var(--ink);text-decoration:underline;text-underline-offset:.16em;text-decoration-color:var(--line)}
  .read-item.ri-action:hover .ri-title{text-decoration-color:currentColor}
  /* Dossier en la tarjeta del mapa, a la izquierda del boton */
  .pop-foot{gap:14px;align-items:center}
  .pop-dossier{
    font-family:'Circular',sans-serif;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
    color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;
  }
  .pop-dossier:hover{color:var(--ink);border-bottom-color:var(--ink)}
  /* El correo del proximo lanzamiento, en el sider y solo sin cuenta */
  .mkt-lead{
    display:block;margin:6px 0 0;font-size:13px;line-height:1.45;
    color:var(--ink-soft);text-decoration:none;
  }
  .mkt-lead:hover{color:var(--hov, var(--accent))}
  .mkt-leadbox{margin-top:10px}
  .mkt-leadbox .ld{max-width:none}
  .mkt-leadbox .ld-title{font-size:12.5px}
  /* El gancho de la semana de SWL, dentro de ese formulario */
  .ld-hook{
    font-family:var(--body-font);font-weight:300;font-size:12.5px;line-height:1.5;
    color:var(--ink);margin:8px 0 0;padding-left:11px;border-left:2px solid var(--gold);
  }

  /* Boton dentro de una pagina de texto: "Create your trade account" en How it
     works. La misma caja llena que el resto de botones del sitio. */
  .pg-cta{
    display:inline-block;margin-top:6px;
    font-size:11px;letter-spacing:1.5px;line-height:1;
    padding:14px 20px 13px;
  }
  .pg-fine{
    font-family:var(--body-font);font-weight:300;font-size:13.5px;line-height:1.55;
    color:var(--ink-soft);margin:12px 0 0;
  }

  /* ---------- El boton del sitio ---------- */
  /* Uno solo y el mismo en todas partes: la landing, la tarjeta del mapa, la
     ficha, la columna de stocks, el cajon del carrito, entrar y darse de alta,
     y las paginas de texto. Antes habia dos familias -caja llena de tinta y
     caja de filete- y tres colores de filete (tinta, vino, arena), asi que el
     mismo gesto se veia de cuatro maneras segun donde cayera.
     La caja va del color del papel, con el filete y las versalitas en tinta, y
     el color es lo que aparece al pasar por encima o al pulsar: el barajado de
     editorial.js escribe --hov (el fondo) y --hov-fg (la letra encima, blanca
     o tinta segun el tono). Si no hay barajado -sin raton, o si editorial.js
     no carga- cae en tinta sobre papel, que es como se veian antes.
     Aqui solo van color, filete y letra: el tamano y el aire de cada boton se
     quedan donde estaban, que no son lo mismo un "Checkout" a todo el ancho
     del cajon y un "Add" de una fila de vino.
     Los mandos con estado -mercados, capas, las tres figuras del mapa- no son
     de esta familia: no ejecutan nada, dicen como esta puesto el sitio, y su
     fondo tiene que poder decir "encendido". Barajan el color al pasar, eso
     si, que es el gesto de la casa. */
  .idw-btn,
  .gt-cta,
  .pg-cta,
  .pop-card .pop-btn,
  .pop-actions .pop-cta,
  .rp-stock.rp-cta,
  .rp-cta2,
  .st-add,
  .cd-checkout,
  .ac-cta{
    background:var(--paper);color:var(--ink);
    border:1px solid var(--ink);border-radius:2px;
    text-decoration:none;cursor:pointer;
    font-family:'Circular',sans-serif;font-weight:500;text-transform:uppercase;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .idw-btn:hover,.idw-btn:focus-visible,.idw-btn:active,
  .gt-cta:hover,.gt-cta:focus-visible,.gt-cta:active,
  .pg-cta:hover,.pg-cta:focus-visible,.pg-cta:active,
  .pop-card .pop-btn:hover,.pop-card .pop-btn:focus-visible,.pop-card .pop-btn:active,
  .pop-actions .pop-cta:hover,.pop-actions .pop-cta:focus-visible,.pop-actions .pop-cta:active,
  .rp-stock.rp-cta:hover,.rp-stock.rp-cta:focus-visible,.rp-stock.rp-cta:active,
  .rp-cta2:hover,.rp-cta2:focus-visible,.rp-cta2:active,
  .st-add:hover,.st-add:focus-visible,.st-add:active,
  .cd-checkout:hover,.cd-checkout:focus-visible,.cd-checkout:active,
  .ac-cta:hover,.ac-cta:focus-visible,.ac-cta:active{
    background:var(--hov, var(--wine-light));
    color:var(--hov-fg, var(--ink));
    border-color:var(--hov, var(--wine-light));
    text-decoration:none;outline:none;
  }
  /* El de la puerta va sobre el mapa lavado y no sobre papel liso: sin fondo
     propio se leeria el relieve por debajo de las letras. */
  .gt-cta{background:var(--paper)}
  /* El aspa del carrito y el "→" del correo son cajas del mismo palo, pero de
     un solo glifo: heredan el barajado sin entrar en la familia. */
  .ld-go:hover,.ld-go:focus-visible{
    background:var(--hov, var(--wine-light));color:var(--hov-fg, var(--ink));
    border-color:var(--hov, var(--wine-light));outline:none;
  }
  /* Los mandos con estado: el fondo lo pone el barajado solo mientras el raton
     esta encima; puesto o no puesto lo sigue diciendo su propia regla. */
  .ws-btn:hover,.ws-btn.on:hover,
  .mkt-btn:hover{
    background:var(--hov, var(--wine-light));color:var(--hov-fg, var(--ink));
  }
  .mkt-btn:hover{border-color:var(--hov, var(--wine-light))}

  /* El relleno automatico del navegador pinta el campo de amarillo -es suyo,
     no nuestro- y se lleva por delante el papel de la pagina. Se le devuelve
     el fondo con una sombra interior opaca, que es lo unico que Chrome y
     Safari dejan cambiar ahi, y el texto con -webkit-text-fill-color. La
     transicion larga es el truco de siempre: el amarillo se pinta al cargar y
     asi no llega a verse. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  select:-webkit-autofill,
  textarea:-webkit-autofill{
    -webkit-text-fill-color:var(--ink);
    -webkit-box-shadow:inset 0 0 0 1000px var(--paper), inset 0 1px 2px rgba(28,23,20,.07);
    box-shadow:inset 0 0 0 1000px var(--paper), inset 0 1px 2px rgba(28,23,20,.07);
    caret-color:var(--ink);
    transition:background-color 9999s ease-out 0s;
  }

  /* ---------- La portada del dossier ---------- */
  /* Al pasar el raton por "Get the dossier (PDF)": la primera pagina del
     dossier, a 180px de ancho. A ese tamano se reconoce la forma -titulo,
     mapa, columnas- y no se lee una linea, que es justo lo que se quiere
     ensenar sin regalar el documento. Va en position:fixed y la coloca
     appgl.js: el boton esta unas veces en la ficha, que hace scroll, y otras
     en la tarjeta del mapa, que se mueve con el mapa. */
  #dossierVista{
    position:fixed;z-index:1200;pointer-events:none;
    width:180px;padding:6px;
    background:var(--paper);border:1px solid var(--line);border-radius:2px;
    box-shadow:0 6px 22px rgba(28,23,20,.16);
    opacity:0;transform:translateY(4px);
    transition:opacity .14s ease, transform .14s ease;
  }
  #dossierVista.is-on{opacity:1;transform:none}
  #dossierVista img{display:block;width:100%;height:auto;border:1px solid var(--line)}
  @media (prefers-reduced-motion:reduce){
    #dossierVista{transition:none}
  }

  /* ---------- El logotipo de la bodega ---------- */
  /* Arriba de su ficha, encima del nombre. Es el mismo que la tienda ensena en
     la pagina de la bodega (web/logos/, traidos con scripts/traer-logos.py):
     quien llega desde el mapa reconoce la casa antes de leer el nombre, y
     quien viene de la tienda ve lo mismo a los dos lados.
     Se le pone tope de ancho y de alto, no una caja: los logotipos vienen de
     proporciones muy distintas -Barbadillo es una linea larga, Barco del
     Corneta casi un cuadrado- y encajarlos en un rectangulo comun dejaria a
     unos flotando y a otros diminutos. Con dos topes, cada uno crece hasta el
     que le toque y todos pesan parecido en la pagina. */
  .rp-logo{
    display:block;max-width:250px;max-height:72px;width:auto;height:auto;
    margin:0 0 16px;
  }
  /* En la cabecera de rejilla el logotipo ocupa la fila de arriba, entera; el
     nombre y el boton de compra, la segunda. Sin logotipo esa fila mide cero y
     no se nota.
     Las demas piezas llevan fila propia y no se colocan solas: sin fila fija,
     una ficha sin logotipo dejaba libre la primera y el contexto se metia ahi,
     ENCIMA del titulo. Es el orden de la ficha, escrito. */
  #report.is-profile .rp-head > .rp-logo  {grid-column:1 / -1;grid-row:1}
  #report.is-profile .rp-head > h4        {grid-row:2}
  #report.is-profile .rp-head > .rp-stock.rp-cta{grid-row:2}
  #report.is-profile .rp-head > .rp-kicker{grid-row:3}
  #report.is-profile .rp-head > .rp-avail {grid-row:4}
  #report.is-profile .rp-head > .rp-ctas  {grid-row:5}
  #report.is-profile .rp-head > .rp-lead  {grid-row:6}
  @media (max-width:760px){
    .rp-logo{max-width:200px;max-height:58px;margin-bottom:12px}
  }

  /* Un campo de la ficha todavia sin escribir: el rotulo se lee y el hueco se
     queda, con su alto, para que la fila no se colapse ni se lea como un
     error. Es la senal de lo que falta por documentar. */
  .rp-facts dd:empty{min-height:1.35em}

  /* ---------- Las lecturas, una sola maqueta ---------- */
  /* "Related reads" y "Further reading", en la ficha de bodega, de lugar, de
     tema y de region: arriba el titulo entrecomillado y subrayado, y debajo la
     linea de fuente -autor, medio y fecha- en cursiva.
     Antes el titulo no llevaba subrayado, asi que no se veia que llevara a
     alguna parte, y el tamano cambiaba segun la ficha: los tres listados
     (.rp-sources, .rp-reads, .rp-reads-all) tenian sus propias medidas y
     encima el modo compacto los encogia otro punto. Aqui se igualan los tres,
     y va al final del fichero para ganar a esas reglas. */
  .rp-sources li,
  .rp-reads li,
  .rp-reads-all li,
  #report.is-profile .rp-sources li{margin-bottom:17px}
  .rp-sources a,
  .rp-reads a,
  .rp-reads-all a,
  #report.is-profile .rp-sources a{
    display:block;
    font-family:var(--body-font);font-weight:300;
    font-size:15.5px;line-height:1.45;color:var(--ink);
    text-decoration:underline;text-decoration-color:var(--line);
    text-decoration-thickness:1px;text-underline-offset:.22em;
    transition:color .15s ease, text-decoration-color .15s ease;
  }
  .rp-sources a:hover,
  .rp-reads a:hover,
  .rp-reads-all a:hover{
    color:var(--hov, var(--ink));text-decoration-color:currentColor;
  }
  /* Una fuente sin enlace: la misma letra, sin subrayado, que no lleva a nada. */
  .rp-sources .rp-src-title,
  .rp-reads-all .rp-src-title{
    display:block;font-family:var(--body-font);font-weight:300;
    font-size:15.5px;line-height:1.45;color:var(--ink);text-decoration:none;
  }
  .rp-sources li span,
  .rp-reads li span,
  .rp-reads-all li span,
  #report.is-profile .rp-sources li span{
    display:block;margin-top:5px;
    font-family:var(--body-font);font-weight:300;font-style:italic;
    font-size:13.5px;line-height:1.5;letter-spacing:0;text-transform:none;
    color:var(--ink-soft);
  }
  /* El span del rotulo del bloque (h5) no es una linea de fuente. */
  .rp-sources h5 span,
  .rp-reads-all h5 span{display:inline;margin:0;font:inherit;color:inherit;font-style:normal}

  /* Lo que lleva dentro la caja de introduccion, en la columna de la tienda:
     un vino por linea con su numero delante. Ocupa el sitio de las etiquetas
     de una botella, asi que hereda su medida y su tono: es la descripcion del
     producto, no una lista aparte. */
  .st-caja{
    list-style:none;margin:0;padding:0;flex:1 1 auto;
    font-family:var(--body-font);font-weight:300;
    font-size:13.5px;line-height:1.5;color:var(--grey);
  }
  .st-caja li{white-space:normal}