/* ═══════════════════════════════════════════════════════════════
   Cava FAG — tokens en OKLCH (perceptualmente uniforme; iPad de FAG ≤ 2 años, iPadOS 17+).
   Dos temas: día (papel) y salón (oscuro).
   ═══════════════════════════════════════════════════════════════ */
:root, html[data-tema="dia"] {
  --papel: oklch(95.7% 0.015 80.7); --papel-2: oklch(92.8% 0.023 82.1); --tarjeta: oklch(97.7% 0.011 84.6);
  --tinta: oklch(21.7% 0.007 48.4); --tinta-suave: oklch(44.8% 0.014 59.3);
  --burdeos: oklch(36.3% 0.108 16.0); --burdeos-texto: oklch(95.7% 0.015 80.7);
  --oro: oklch(66.4% 0.083 77.4);        /* filetes, bordes y adornos */
  --oro-texto: oklch(48.5% 0.078 72.0);  /* rótulos en versalitas: 5.2:1 sobre papel */
  --rojo-alerta: oklch(50.1% 0.178 28.7); --linea: oklch(85.8% 0.023 78.2);
  --sombra: 0 10px 30px oklch(21.7% 0.007 48.4 / .12);
  --repisa-a: oklch(39.3% 0.048 55.9); --repisa-b: oklch(29.2% 0.038 58.8);
}
html[data-tema="salon"] {
  --papel: oklch(18.1% 0.005 39.3); --papel-2: oklch(21.9% 0.009 43.1); --tarjeta: oklch(21.9% 0.009 43.1);
  --tinta: oklch(94.3% 0.021 81.8); --tinta-suave: oklch(75.6% 0.026 77.4);
  --burdeos: oklch(68.7% 0.086 9.1); --burdeos-texto: oklch(18.1% 0.005 39.3);
  --oro: oklch(78.6% 0.090 84.6); --oro-texto: oklch(78.6% 0.090 84.6);  /* en salón ya mide 9.55:1 */
  --rojo-alerta: oklch(63.5% 0.173 27.6); --linea: oklch(32.4% 0.014 48.3);
  --sombra: 0 14px 34px oklch(0.0% 0.000 0.0 / .45);
  --repisa-a: oklch(30.6% 0.036 51.9); --repisa-b: oklch(22.2% 0.024 54.8);
}
:root {
  --fuente-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fuente-texto: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --toque: 56px; --radio: 14px; --ancho-max: 1320px;
}

/* ── Base ── */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fuente-texto);
  font-size: 21px; line-height: 1.45; -webkit-text-size-adjust: 100%; overflow: hidden; height: 100dvh; }
body { display: flex; flex-direction: column; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 500; margin: 0; letter-spacing: .01em; }
h1 { font-size: 64px; line-height: 1.05; } h2 { font-size: 36px; line-height: 1.15; } h3 { font-size: 28px; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; min-height: var(--toque); min-width: var(--toque); }
img { max-width: 100%; }
.vista { flex: 1; min-height: 0; width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 10px 40px 8px;
  display: flex; flex-direction: column; overflow: hidden; }
.vista > * { min-height: 0; }
.vista--desliza { overflow-y: auto; display: block; }              /* anfitrión: formularios y bitácora sí bajan */
.linea { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.linea .anaquel--linea { flex: 1; min-height: 0; }
/* El plano se mueve: al entrar, la vista llega desde la derecha; al volver, desde la izquierda */
@keyframes desdeDerecha { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: none; } }
@keyframes desdeIzquierda { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
.vista--adelante > * { animation: desdeDerecha .4s cubic-bezier(.16,1,.3,1) both; }
.vista--atras > * { animation: desdeIzquierda .4s cubic-bezier(.16,1,.3,1) both; }

/* ── Barra superior y menú ── */
.barra[hidden] { display: none; }
.barra { display: flex; align-items: center; gap: 24px; padding: 10px 40px; border-bottom: 1px solid var(--linea); background: var(--papel); position: sticky; top: 0; z-index: 5; }
.barra__marca { font-family: var(--fuente-titulo); font-size: 26px; flex: 1; text-align: center; color: var(--burdeos); }
.barra__btn { font-size: 22px; padding: 0 12px; color: var(--burdeos); }
.barra__menu, .menu-flotante { font-size: 28px; color: var(--tinta-suave); border-radius: 12px; }
.menu-flotante { position: fixed; top: 14px; right: 22px; z-index: 6; background: var(--tarjeta); border: 1px solid var(--linea); }
.menu-flotante[hidden] { display: none; }
.ajustes-fondo { position: fixed; inset: 0; background: oklch(0.0% 0.000 0.0 / .45); z-index: 20; }
.ajustes-fondo[hidden] { display: none; }
.ajustes { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw; background: var(--papel); border-left: 1px solid var(--linea); z-index: 21; padding: 20px 28px; box-shadow: var(--sombra); overflow-y: auto; }
.ajustes[hidden] { display: none; }
.ajustes__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ajustes__cabecera h2 { font-size: 32px; color: var(--burdeos); }
.ajustes__cerrar { font-size: 34px; color: var(--tinta-suave); }
.ajustes__grupo { margin: 0 0 26px; }
.ajustes__grupo h3 { font-family: var(--fuente-texto); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); margin: 0 0 10px; }
.ajustes__opciones { display: flex; flex-direction: column; gap: 8px; }
.ajustes__opciones button { text-align: left; padding: 0 18px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--tarjeta); font-size: 20px; }
.ajustes__opciones button[aria-pressed="true"] { background: var(--burdeos); color: var(--burdeos-texto); border-color: var(--burdeos); }
.pie { padding: 8px 40px; text-align: center; color: var(--tinta-suave); font-size: 14px; border-top: 1px solid var(--linea); }

/* ── Etiquetas ── */
.etiqueta-roja { display: inline-block; background: var(--rojo-alerta); color: oklch(97.0% 0.013 71.3); font-weight: 600; font-size: 16px;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; }
.etiqueta-gris { display: inline-block; border: 1px solid var(--tinta-suave); color: var(--tinta-suave); font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; }

/* ── Portada (todo cabe en una pantalla de iPad horizontal) ── */
/* 03/10/2026: se fueron la ceja «Colección privada» y el título de las seis botellas (Adrián: «elimina
   esto, aprovecha una mejor distribución vertical de lo demás»). Lo que liberaron se reparte: el gap
   entre bloques sube de 8 a 16 px y el resto queda como aire sobre las botellas (--aire-reservado en
   .joyas .anaquel), de modo que las botellas miden lo mismo que antes y la portada respira. */
.portada { display: flex; flex-direction: column; justify-content: flex-start; text-align: center; gap: 16px; padding: 10px 0 0; flex: 1; min-height: 0; }
.portada__titulo { color: var(--burdeos); font-size: 48px; margin-top: 0; }
.buscador { display: flex; gap: 12px; max-width: 820px; width: 100%; margin: 0 auto; position: relative; }
.buscador__input { flex: 1; min-height: 56px; font: inherit; font-size: 20px; padding: 0 22px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--tarjeta); color: var(--tinta); }
.buscador__input::placeholder { color: var(--tinta-suave); opacity: .8; }
.buscador__input:focus { outline: 3px solid var(--oro); outline-offset: 2px; }
.buscador__btn { min-height: 56px; padding: 0 26px; border-radius: 999px; background: var(--burdeos); color: var(--burdeos-texto); font-size: 19px; letter-spacing: .04em; }
/* Una columna por puerta, las que haya: con dos no queda un hueco a la derecha (03/10/2026). */
.puertas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; max-width: 1000px; width: 100%; margin: 0 auto; }
.puerta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 104px; border-radius: var(--radio); color: oklch(95.7% 0.015 80.7); text-align: center; padding: 14px 20px; box-shadow: var(--sombra); }
.puerta--tinto { background: linear-gradient(160deg, oklch(39.8% 0.119 15.7), oklch(28.3% 0.082 15.4)); }
.puerta--blanco { background: linear-gradient(160deg, oklch(75.0% 0.085 82.1), oklch(60.1% 0.088 78.8)); color: oklch(21.7% 0.007 48.4); }
.puerta--otros { background: linear-gradient(160deg, oklch(39.2% 0.009 39.4), oklch(25.3% 0.009 43.1)); }
.puerta__nombre { font-family: var(--fuente-titulo); font-size: 34px; line-height: 1; }
.puerta__detalle { font-size: 15px; opacity: .9; }
/* «¿De qué año eres?» — la jugada de FAG en la mesa. Una invitación, no una caja más. */
.mosaicos { display: flex; justify-content: center; max-width: 1000px; width: 100%; margin: 2px auto 0; }
.invitacion-anada { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center;
  min-height: var(--toque); padding: 8px 26px; border-radius: 999px; border: 1.5px solid var(--oro);
  transition: background-color .22s ease-out, transform .22s cubic-bezier(.16,1,.3,1); }
.invitacion-anada:active { transform: scale(.985); background: var(--papel-2); }
.invitacion-anada__titulo { font-family: var(--fuente-titulo); font-size: 26px; color: var(--burdeos); }
.invitacion-anada__sub { color: var(--tinta-suave); font-size: 16px; }
.joyas { margin-top: 4px; text-align: left; }
.joyas { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.joyas .anaquel { --alto-botella: clamp(190px, calc(100dvh - 540px), 340px); --pad-sup: 6px; padding: var(--pad-sup) 0 8px; flex: 1; min-height: 0; --aire-reservado: 79px; }  /* 03/10/2026: 37 por la ceja y el título de las seis (medido a 774 px de alto: sin reserva la botella
   pasaba de 274 a 311) + 42 por «Elige por dónde empezar» (renglón de 26,1 px + gap de 16, medido con un
   renglón de prueba inyectado en la portada viva). La botella de la portada mide igual que el 02/10. */
.joyas .botella__nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 17px; margin-top: 18px; }
.joyas .botella__anada { font-size: 14px; }
.joyas .anaquel::after { bottom: 16px; }

/* ── Secciones, rutas y grupos ── */
.seccion__titulo { color: var(--burdeos); margin-bottom: 6px; }
.seccion__sub { margin: 0 0 24px; color: var(--tinta-suave); }
.rutas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.ruta { display: flex; justify-content: space-between; align-items: center; min-height: 96px; padding: 0 28px; border: 1.5px solid var(--linea);
  border-radius: var(--radio); background: var(--tarjeta); font-family: var(--fuente-titulo); font-size: 30px; }
.ruta__flecha { color: var(--oro); font-size: 40px; }
.grupos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.grupo { display: flex; justify-content: space-between; align-items: center; min-height: var(--toque); padding: 12px 22px;
  border: 1px solid var(--linea); background: var(--tarjeta); border-radius: 10px; }
.grupo__nombre { font-family: var(--fuente-titulo); font-size: 27px; }
.grupo__n { color: var(--tinta-suave); font-size: 17px; white-space: nowrap; }

/* ── Chips ── */
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--oro); background: var(--tarjeta); font-size: 15px; color: var(--tinta); }

/* ── Anaquel ── */
.anaquel { --pad-sup: 14px; --escala: 1; position: relative; padding: var(--pad-sup) 0 6px; }
.anaquel__repisa { display: flex; align-items: flex-start; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.anaquel__repisa::-webkit-scrollbar { display: none; }
/* La madera se ancla donde TERMINA la botella: es lo que la sostiene, no un adorno al fondo de la vista.
   El nombre y la añada caen debajo por sí solos, como la cartela de un anaquel de verdad. */
.anaquel::after { content: ""; position: absolute; left: 0; right: 0; height: 13px; border-radius: 3px;
  top: calc(var(--pad-sup) + var(--alto-botella, 330px)); pointer-events: none;
  background: linear-gradient(var(--repisa-a), var(--repisa-b)); box-shadow: 0 10px 22px oklch(0.0% 0.000 0.0 / .32); }
.botella { --h: var(--alto-botella, 330px);
  animation: aparecer .42s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(min(var(--i, 0), 12) * 35ms);
  flex: 0 0 max(146px, calc(var(--h) * .497)); scroll-snap-align: start; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 0; }
/* Formatos (Adrián, 25/09 y 26/09/2026). Medidas reales de una bordelesa: media 27 cm de alto × 6,2 de
   diámetro · botella 30,5 × 7,6 · magnum 35 × 10,2 · doble magnum 40 × 12,5. Aquí van A ESCALA, alto Y
   ancho, tomando el doble magnum como el tope del hueco. Se pudo porque los menús cedieron altura: antes
   el alto iba comprimido para que una repisa de puros 750 no se viera diminuta. Ojo: --fx es el estirón
   EXTRA sobre el que ya da el alto. El ALTO va exacto; el ANCHO va a medio camino (Adrián, 26/09/2026:
   «desproporcionado»). Razón: la foto de un doble magnum casi siempre es en realidad la de una botella
   de 750, porque la etiqueta es la misma, y estirarla el 25 % extra que pide la realidad deforma el
   dibujo de la etiqueta y se nota más de lo que aporta. Con medio estirón el formato se sigue leyendo
   grande sin que la botella parezca inflada. La cava sólo tiene estos cuatro formatos. */
.botella__cuerpo { --f: .7625; --fx: 1; --h: calc(var(--alto-botella, 330px) * var(--f) * var(--escala, 1)); transition: transform .28s cubic-bezier(.16,1,.3,1); position: relative;
  width: calc(var(--h) * .394); height: var(--h); display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 16px 18px oklch(0.0% 0.000 0.0 / .35));
  transform: scaleX(var(--fx)); transform-origin: 50% 100%; }
.botella__cuerpo--f375 { --f: .675; --fx: .961; }  /* 0,89× de alto · 0,85× de ancho */
.botella__cuerpo--f1500 { --f: .875; --fx: 1.084; } /* 1,15× de alto · 1,24× de ancho */
.botella__cuerpo--f3000 { --f: 1; --fx: 1.127; }    /* 1,31× de alto · 1,48× de ancho */
/* Todas las botellas se PARAN sobre la madera: el hueco reservado es siempre --alto-botella y el cuerpo,
   más corto según el formato, se pega abajo. Sin esto una botella al 88 % flotaba un 12 % sobre la repisa.
   --escala la pone app.js: es 1/el formato más grande de ESA repisa, para que el mayor llegue hasta arriba
   y no quede aire muerto en un anaquel donde no hay ningún doble magnum. No toca la madera, que sigue
   colgada de --alto-botella; sólo estira a todas las botellas en la misma proporción. */
.anaquel .botella__cuerpo { margin-top: calc(var(--alto-botella, 330px) - var(--h)); }
.botella__silueta, .botella__foto { height: var(--h); width: auto; max-width: calc(var(--h) * .4545);
  max-height: 100%; object-fit: contain; }
.etiqueta-foto { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--h) * .19);
  width: calc(var(--h) * .21); height: auto; max-height: calc(var(--h) * .27); object-fit: contain;
  border-radius: 1.5px; box-shadow: 0 1px 4px oklch(0% 0 0 / .35), 0 0 0 .5px oklch(0% 0 0 / .18); }
/* La etiqueta compuesta: correcta por construcción (productor, añada, apelación, clasificación).
   Va donde iría la etiqueta de papel —mismo ancho, misma altura sobre la repisa que la etiqueta
   fotografiada— y se tipografía como una de Burdeos: papel crema envejecido, doble filete, un adorno
   grabado, versalitas, la añada grande. Para que se pueda enseñar sin disculpas cuando la foto de
   esa añada aún no existe. */
.etiqueta-viva { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--h) * .19);
  width: calc(var(--h) * .215); box-sizing: border-box;
  padding: calc(var(--h) * .018) calc(var(--h) * .014) calc(var(--h) * .019);
  background: linear-gradient(180deg, oklch(97.8% .013 86) 0%, oklch(96.4% .017 84) 50%, oklch(93.6% .024 80) 100%);
  color: oklch(24% .014 52); border: 1px solid oklch(72% .045 74);
  outline: 1px solid oklch(83% .035 78); outline-offset: -4px;
  box-shadow: 0 1px 4px oklch(0% 0 0 / .32), 0 0 0 .5px oklch(0% 0 0 / .15), inset 0 0 calc(var(--h) * .035) oklch(82% .045 78 / .45);
  border-radius: 1.5px; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: calc(var(--h) * .004); font-family: var(--fuente-titulo); line-height: 1.06; }
.etiqueta-viva__adorno { display: block; width: 58%; color: oklch(50% .055 62); margin: calc(var(--h) * .002) 0 calc(var(--h) * .006); }
.etiqueta-viva__adorno svg { display: block; width: 100%; height: auto; }
.etiqueta-viva__prefijo { font-size: calc(var(--h) * .024); letter-spacing: .16em; text-transform: uppercase; color: oklch(42% .02 55); }
.etiqueta-viva__productor { font-size: calc(var(--h) * .040); font-weight: 600; line-height: 1.02; letter-spacing: .005em;
  max-width: 100%; overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.etiqueta-viva__productor--largo { font-size: calc(var(--h) * .034); }
.etiqueta-viva__productor--muylargo { font-size: calc(var(--h) * .029); }
.etiqueta-viva__filete { width: 46%; height: 1px; background: oklch(62% .05 68); margin: calc(var(--h) * .009) 0 calc(var(--h) * .006);
  box-shadow: 0 2px 0 -1px oklch(78% .04 72); }
.etiqueta-viva__anada { font-size: calc(var(--h) * .062); font-variant-numeric: lining-nums; letter-spacing: .03em; line-height: 1; color: oklch(28% .07 20); }
.etiqueta-viva__lugar { font-family: var(--fuente-texto); font-size: calc(var(--h) * .021); letter-spacing: .12em; margin-top: calc(var(--h) * .006);
  text-transform: uppercase; color: oklch(38% .018 55); line-height: 1.2; max-width: 100%;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.etiqueta-viva__clase { font-family: var(--fuente-texto); font-size: calc(var(--h) * .0195); font-style: italic; color: oklch(46% .02 55);
  line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.etiqueta-roja--botella { position: absolute; top: calc(var(--h, 330px) * .024); right: -6px; font-size: clamp(9px, calc(var(--h, 330px) * .036), 12px); padding: 3px 7px; white-space: nowrap; }
.etiqueta-duda { --d: clamp(20px, calc(var(--h, 330px) * .079), 28px); position: absolute; top: 6px; left: -4px; width: var(--d); height: var(--d); border-radius: 50%;
  background: var(--papel); color: var(--tinta-suave); border: 1.5px solid var(--linea);
  font-family: var(--fuente-texto); font-weight: 600; font-size: calc(var(--d) * .58); line-height: calc(var(--d) - 3px); text-align: center;
  box-shadow: 0 1px 3px oklch(0% 0 0 / .18); cursor: help; }
.ficha__foto .etiqueta-duda { width: 34px; height: 34px; font-size: 19px; line-height: 31px; top: 10px; left: 6px; }
.botella__nombre { margin-top: 11px; font-family: var(--fuente-titulo); font-size: 17px; line-height: 1.08; max-width: calc(var(--alto-botella, 330px) * .4545); }
.botella__anada { font-size: 15px; color: var(--tinta-suave); }

/* ── Rutas de una puerta: un renglón de chips que se desliza de lado ── */
.rutas-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 1px 0 5px; }
.rutas-chips::-webkit-scrollbar { display: none; }
.chip--ruta { min-height: 36px; font-size: 15px; padding: 0 13px 0 15px; gap: 7px; white-space: nowrap; font-family: var(--fuente-titulo); }
.chip__flecha { color: var(--oro); font-size: 26px; line-height: 1; }

/* ── Losetas: las listas (países, uvas, formatos…) corren de lado, en 1–3 filas ── */
.losetas { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--filas, 2), 148px); grid-auto-columns: 272px; gap: 14px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 6px 4px 18px; scrollbar-width: none; flex: 1; min-height: 0; align-content: start; }
.losetas::-webkit-scrollbar { display: none; }
.loseta { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 18px 22px; height: 148px;
  border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); scroll-snap-align: start;
  animation: aparecer .42s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(min(var(--i, 0), 12) * 30ms); transition: transform .22s cubic-bezier(.16,1,.3,1); }
.loseta:active { transform: scale(.985); }
.loseta__nombre { font-family: var(--fuente-titulo); font-size: 27px; line-height: 1.1; color: var(--burdeos); }
.loseta__n { color: var(--tinta-suave); font-size: 16px; }

/* ── Línea de tiempo lateral: un solo anaquel alto, hitos de década dentro, chips para saltar ── */
/* El encabezado de una línea también cede altura: en el anaquel manda la botella (Adrián, 26/09/2026) */
.linea__cabeza { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 0; }
.linea__cabeza h2 { font-size: 30px; }
.linea__cabeza .seccion__sub { font-size: 16px; }
.linea__cabeza .seccion__sub { margin: 0; }
/* La botella usa la altura que quede, MENOS --aire-reservado. Dos casos: con el renglón de rutas (una
   puerta) o sin él (resultados, vertical). :has() basta — el iPad objetivo es iPadOS 17+. Los clamps
   son sólo el respaldo: ajustarAnaquel() mide el hueco de verdad y fija --alto-botella en línea.
   03/10/2026: al quitar la barra de décadas se liberó su renglón. Medía 36 px exactos (chip de 32
   + 1 y 3 de padding; .linea no tiene gap), y ésa es la reserva, para que la botella mida IGUAL que antes.
   Ese hueco se queda como aire y la botella mide igual que antes: la pantalla respira, no crece nada. */
.anaquel--linea { --alto-botella: clamp(320px, calc(100dvh - 245px), 780px); --pad-sup: 2px; }
.linea:has(.rutas-chips) .anaquel--linea { --alto-botella: clamp(280px, calc(100dvh - 344px), 740px); --aire-reservado: 36px; }
.hito { flex: 0 0 64px; scroll-snap-align: start; align-self: stretch; display: flex; align-items: flex-start; justify-content: center;
  border-left: 1px solid var(--linea); margin-left: 8px; padding-top: 6px; }
.hito .decada { margin: 0; color: var(--oro-texto); writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17px; letter-spacing: .14em; }

/* ── Tarjetas (vista lista) ── */
.vinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 18px; }
.vinos--compacto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vino { display: grid; grid-template-columns: 72px 1fr; gap: 18px; padding: 16px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); min-height: 150px; }
.vino__foto { width: 72px; height: 118px; object-fit: contain; }
.vino__nombre { font-size: 26px; }
.vino__meta { margin: 4px 0 0; color: var(--tinta); }
.vino__lugar { margin: 2px 0 0; color: var(--tinta-suave); font-size: 18px; }
.vino__marcas { margin: 8px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Vertical ── */
.decada { margin: 28px 0 12px; color: var(--oro-texto); letter-spacing: .12em; text-transform: uppercase; font-size: 20px; font-family: var(--fuente-texto); }

/* ── Ficha ── */
.ficha--paneles { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: stretch;
  height: calc(100dvh - 184px); min-height: 540px; }
.ficha__lado { --alto-botella: 380px; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; overflow: hidden; }
.ficha__identidad { min-width: 0; }   /* nombre, añada, marcas y acciones de anfitrión: nunca se recortan */
@media (min-height: 940px) { .ficha__lado { --alto-botella: 480px; } }
.ficha__foto { margin: 0 0 10px; text-align: center; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
/* --h NO puede llevar un porcentaje dentro: se usa igual en `height` que en `width` y en
   `max-width`, y el 100% se resuelve contra el eje de cada propiedad. Con `min(380px, 100%)` el
   max-width de la foto salía de 118 px de ancho (100% del cuerpo), no de 380 px de alto, y toda
   botella de la ficha se veía aplastada a 54 px — la mitad de su ancho. El alto se limita con
   max-height, que sí es del eje correcto. */
.ficha__foto .botella__cuerpo { --h: calc(var(--alto-botella) * var(--f)); max-height: 100%; }
.ficha__foto .botella__cuerpo { margin: 0 auto; }
.ficha__foto figcaption { margin-top: 8px; color: var(--tinta-suave); font-size: 15px; }
.ficha__paneles { display: flex; flex-direction: column; min-width: 0; }
.pestanas { display: flex; gap: 6px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { position: relative; min-height: 52px; padding: 0 18px; font-family: var(--fuente-titulo); font-size: 26px; color: var(--tinta-suave); white-space: nowrap; }
.pestana[aria-current="true"] { color: var(--burdeos); }
.pestana[aria-current="true"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; background: var(--burdeos); border-radius: 2px; }
.paneles { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.paneles::-webkit-scrollbar { display: none; }
.panel { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; overflow-y: auto; padding: 16px 6px 24px; }
.panel .datos { margin-bottom: 18px; }
.chips--grandes .chip { min-height: 56px; font-size: 21px; padding: 0 22px; }
.ficha__lugar { margin: 0; color: var(--oro-texto); letter-spacing: .14em; text-transform: uppercase; font-size: 16px; }
.ficha__nombre { font-size: 38px; line-height: 1.08; color: var(--burdeos); margin: 4px 0; }
.ficha__anada { margin: 0; font-size: 24px; }
.ficha__marcas { margin: 12px 0 0; display: flex; gap: 10px; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; margin: 24px 0; }
.dato dt { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); } .dato dd { margin: 2px 0 0; }
.ficha h3 { margin: 28px 0 8px; color: var(--burdeos); }
.ficha__descripcion { margin: 0; font-size: 22px; line-height: 1.55; max-width: 70ch; }
.cata { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cata dt { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-texto); } .cata dd { margin: 4px 0 0; }
.resena { margin: 0 0 14px; padding: 18px 22px 16px; background: var(--papel-2); border: 1px solid var(--linea); border-radius: 10px; font-style: italic; }
.resena p { margin: 0; }
.resena footer { font-style: normal; color: var(--tinta-suave); font-size: 17px; margin-top: 10px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.resena cite { font-style: normal; font-weight: 600; color: var(--tinta); }
.resena__puntos { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--oro-texto);
  border: 1px solid var(--oro); border-radius: 999px; padding: 1px 10px; font-size: 15px; white-space: nowrap; }
.resena__trad { font-size: 14px; opacity: .7; }
.nota-casa { margin: 0; padding: 14px 20px; background: var(--papel-2); border-radius: 10px; color: var(--tinta-suave); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Sugerencias ── */
.sugerencias { list-style: none; margin: 6px auto 0; padding: 6px; max-width: 900px; width: 100%; background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 6; box-shadow: var(--sombra); }
.sugerencias:empty { display: none; }
.sugerencia { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 16px; border-radius: 10px; min-height: var(--toque); text-align: left; width: 100%; }
.sugerencia small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.sugerencia:hover, .sugerencia:focus { background: var(--papel-2); }

/* ── Teclado ¿De qué año eres? ── */
.anio { max-width: 560px; margin: 0 auto; text-align: center; }
.anio__visor { display: flex; justify-content: center; gap: 14px; margin: 28px 0; }
.anio__casilla { width: 84px; height: 110px; border: 2px solid var(--linea); border-radius: 14px; background: var(--tarjeta); display: flex; align-items: center; justify-content: center;
  font-family: var(--fuente-titulo); font-size: 64px; color: var(--burdeos); }
.anio__visor--error .anio__casilla { border-color: var(--rojo-alerta); animation: sacudir .35s; }
@keyframes sacudir { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.teclado button { min-height: 84px; font-family: var(--fuente-titulo); font-size: 40px; background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: var(--radio); color: var(--tinta); }
.teclado button:active { background: var(--papel-2); }
/* La cerradura del anfitrión NO debe parecerse al juego del año: un invitado no debe teclear
   su año de nacimiento en el candado de la bitácora. */
.anio--cerradura { max-width: 420px; }
.anio--cerradura .seccion__titulo { font-size: 30px; }
.anio--cerradura .anio__visor { gap: 12px; margin: 22px 0; }
.anio--cerradura .anio__casilla { width: 58px; height: 62px; border-radius: 10px; border-color: var(--tinta-suave); background: var(--papel-2); font-size: 34px; }
.anio--cerradura .teclado { gap: 10px; max-width: 320px; margin: 0 auto; }
.anio--cerradura .teclado button { min-height: 62px; font-size: 26px; background: var(--papel-2); }
.teclado .teclado__borrar { font-family: var(--fuente-texto); font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.anio__error { min-height: 30px; color: var(--rojo-alerta); }

/* ── Varios ── */
.error { color: var(--rojo-alerta); }
.vacio { color: var(--tinta-suave); }

@media (max-width: 1100px) {
  .vista, .barra, .pie { padding-left: 24px; padding-right: 24px; }
  h1 { font-size: 52px; } .puerta__nombre { font-size: 38px; }
  .ficha--paneles { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
  .ficha__lado { --alto-botella: 340px; }
}

/* Fotos con fondo blanco: fusionar con el fondo del anaquel (el blanco desaparece; la botella queda) */
/* Las fotos de catálogo llegan sin fondo (PNG transparente, tools/fotos.py): heredan la sombra del contenedor */

/* Rutas compactas encima de la línea de tiempo */
.rutas--chicas { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ruta--chica { min-height: 60px; font-size: 22px; padding: 0 18px; } .ruta--chica .ruta__flecha { font-size: 28px; }

/* ── Modo anfitrión ── */
.anfitrion__acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 14px 0 2px; }
.accion { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 26px; border-radius: 14px; font-size: 21px; font-weight: 600; }
.accion--tomamos { background: var(--burdeos); color: var(--burdeos-texto); }
.accion--regale { background: var(--tarjeta); border: 1.5px solid var(--oro); color: var(--tinta); }
.accion--guardar { background: var(--burdeos); color: var(--burdeos-texto); min-width: 200px; }
.mov { max-width: 820px; margin: 0 auto; }
.mov__anada { font-family: var(--fuente-texto); font-size: 20px; color: var(--tinta-suave); font-weight: 400; }
.mov__form { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.mov__form label, .mov__campo { display: flex; flex-direction: column; gap: 8px; }
.mov__form label span, .mov__campo > span { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.mov__form input, .mov__form textarea { font: inherit; font-size: 22px; padding: 12px 16px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--tinta); min-height: 60px; }
.mov__form textarea { min-height: 110px; resize: vertical; }
.mov__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.chip--opcion[aria-pressed="true"] { background: var(--burdeos); color: var(--burdeos-texto); border-color: var(--burdeos); }
.estrellas { display: flex; gap: 6px; } .estrella-vieja-no-usar { font-size: 40px; color: var(--linea); min-width: 56px; } .estrella[aria-pressed="true"] { color: var(--oro); }
.mov__botones { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.mov__estado { min-height: 30px; color: var(--tinta-suave); }
.mov__estado--ok { color: var(--oro); } .mov__estado--error { color: var(--rojo-alerta); }
.ajustes__enlace { display: flex; align-items: center; min-height: var(--toque); padding: 0 18px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--tarjeta); font-size: 20px; }
.tabla-envoltura { overflow-x: auto; } .tabla { width: 100%; border-collapse: collapse; font-size: 18px; }
.tabla th { text-align: left; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 10px; border-bottom: 1px solid var(--linea); } .tabla .n { text-align: right; }
.recuerdos { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.recuerdo { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 20px; } .recuerdo h3 { font-size: 24px; margin-bottom: 8px; } .recuerdo ul { margin: 0; padding-left: 18px; font-size: 17px; }
.bitacora { list-style: none; margin: 0; padding: 0; } .bitacora__fila { padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 19px; } .bitacora__fila a { color: var(--burdeos); }
body.anfitrion .barra__marca::after, body.anfitrion .portada__titulo::after { content: " ●"; color: var(--oro); font-size: .5em; vertical-align: middle; }

/* ── Movimiento: una cascada al cargar el anaquel, tacto al tocar, y respeto a quien lo apaga ── */
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.botella:hover .botella__cuerpo, .botella:focus-visible .botella__cuerpo { transform: translateY(-4px) scaleX(var(--fx)); }
.puerta, .chip, .sugerencia, .tecla { transition: transform .22s cubic-bezier(.16,1,.3,1), background-color .22s ease-out; }
.puerta:active, .chip:active, .tecla:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Confirmar y deshacer: la red de seguridad del único acto irreversible de la carta ── */
.confirma { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: oklch(20% .01 50 / .55); padding: 24px; }
.confirma[hidden] { display: none; }
.confirma__hoja { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra);
  padding: 30px 34px; max-width: 560px; width: 100%; text-align: center;
  animation: aparecer .3s cubic-bezier(.16,1,.3,1) both; }
.confirma__titulo { margin: 0; font-family: var(--fuente-titulo); font-size: 30px; line-height: 1.2; color: var(--tinta); }
.confirma__con { margin: 12px 0 0; color: var(--tinta-suave); font-size: 19px; }
.confirma__aviso { margin: 12px 0 0; color: var(--rojo-alerta); font-size: 19px; font-weight: 600; }
.confirma__botones { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

.brindis { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 35; max-width: min(760px, 92vw); }
.brindis[hidden] { display: none; }
.brindis__caja { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
  background: var(--tinta); color: var(--papel); border-radius: 999px; padding: 12px 26px; box-shadow: var(--sombra);
  animation: aparecer .34s cubic-bezier(.16,1,.3,1) both; }
.brindis__texto { margin: 0; font-size: 19px; }
.brindis__deshacer { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--papel);
  color: var(--papel); font-size: 17px; white-space: nowrap; }

/* Las estrellas medían 1.3:1 contra el papel: cinco fantasmas que no parecían tocables. */
.estrellas { display: flex; gap: 8px; }
.estrella { min-height: var(--toque); min-width: 52px; font-size: 34px; line-height: 1;
  color: var(--linea); transition: transform .18s cubic-bezier(.16,1,.3,1), color .18s ease-out; }
.estrella[aria-pressed="true"] { color: var(--oro); }
.estrella:active { transform: scale(.9); }
.mov__campo > span, .mov__form label > span { color: var(--oro-texto); }

/* iPad: dos segundos sobre el título disparaban la lupa de selección y la vista previa de enlace. */
#marcaPortada, .barra__marca { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Tamaño de letra — el ajuste más obvio que faltaba para unos ojos de 80 años. */
html[data-letra="grande"] { font-size: 23px; }
html[data-letra="mayor"] { font-size: 25px; }
html[data-letra="grande"] .ficha__descripcion, html[data-letra="mayor"] .ficha__descripcion { font-size: 24px; }
html[data-letra="grande"] .botella__nombre { font-size: 21px; } html[data-letra="mayor"] .botella__nombre { font-size: 23px; }
html[data-letra="grande"] .resena p { font-size: 22px; } html[data-letra="mayor"] .resena p { font-size: 24px; }
.resena__fuente { font-size: 15px; color: var(--oro-texto); text-decoration: underline; text-underline-offset: 3px; }

/* Señal de que el renglón continúa: se desvanece en el borde en vez de cortarse en seco. */
.rutas-chips, .pestanas { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 42px), transparent); }