/* Legal pages: the same paper and ink as the site (their printed carta's light wood, the toasted
   oak's ink) under the dark wooden bar, set plainly for reading, in the home page's two faces:
   the logo's wide slab for the title, Forum for the text. */
@font-face {
  font-family: "Stint Ultra Expanded"; src: url("fonts/stint-ultra-expanded-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Forum"; src: url("fonts/forum-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --char: #e6ddcf; --bar: #43301f; --chalk: #3d2a1d; --chalk-2: #5c4636; --fg-rgb: 61, 42, 29; --rule: rgba(61, 42, 29, 0.16); --caps: 0.14em; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
* { box-sizing: border-box; }
html { background: var(--char); color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: #6b4424 var(--char); }
body { margin: 0; color: var(--chalk); font: 400 1.1875rem/1.6 "Forum", "Palatino Linotype", Georgia, serif; }
::selection { background: #7a1c2e; color: #fff4f2; }
a { color: var(--chalk); text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--fg-rgb), 0.45); }
:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
.top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: env(safe-area-inset-top, 0px) max(12px, 3.6vw) 0; min-height: 56px; background: var(--bar); border-bottom: 1px solid rgba(214, 150, 96, 0.14);
  --chalk: #f1ece4; --fg-rgb: 241, 236, 228; color-scheme: dark;   /* the wooden bar stays dark, chalk on it */
}
.back { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--chalk); text-decoration: none; letter-spacing: 0.02em; touch-action: manipulation; }
.back svg { width: 18px; height: 18px; flex: none; transition: transform 160ms var(--ease-out); }
.lang { display: inline-flex; }
.lang button {
  min-width: 44px; min-height: 48px; border: 0; background: none; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  font: 400 0.875rem/1 "Forum", Georgia, serif; letter-spacing: var(--caps); color: #d8d1c7;
}
.lang button[aria-pressed="true"] { color: var(--chalk); text-decoration: underline; text-underline-offset: 0.45em; text-decoration-thickness: 1.5px; }
main { max-width: 46rem; margin: 0 auto; padding: clamp(40px, 10vw, 80px) max(20px, 6vw) 48px; }
h1 { margin: 0 0 14px; font: 400 clamp(1.75rem, 7vw, 2.9rem)/1.12 "Stint Ultra Expanded", "Rockwell", Georgia, serif; letter-spacing: 0.03em; text-transform: uppercase; text-wrap: balance; }
h2 { margin: 38px 0 10px; font: 400 1rem/1.3 "Forum", Georgia, serif; letter-spacing: var(--caps); text-transform: uppercase; }
p { margin: 0 0 12px; max-width: 68ch; }
.upd { color: var(--chalk-2); font-size: 1rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
dt { color: var(--chalk-2); }
dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { dl { grid-template-columns: 1fr; gap: 0; } dd { margin-bottom: 12px; } }
/* the cookie page: one block per stored item, parted by the same fine rule as the footer */
.store { margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--rule); }
.store + .store { margin-top: 12px; }
code { font: inherit; letter-spacing: 0.03em; color: var(--chalk); }
.foot { max-width: 46rem; margin: 0 auto; padding: 22px max(20px, 6vw) 40px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 1rem; color: var(--chalk-2); }
/* the list's page (lista/): where its emails land. One card inside their sign's corners, one act
   in wine, the same buttons as the home page. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px;
  font: 400 1rem/1 "Forum", Georgia, serif; letter-spacing: var(--caps); text-transform: uppercase; text-decoration: none;
  color: var(--chalk); border: 1px solid rgba(var(--fg-rgb), 0.86); background: transparent; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.btn--wine { background: #7a1c2e; border-color: #7a1c2e; color: #ffeeeb; }
.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: default; }
.lista-card { position: relative; margin-top: 8px; padding: clamp(28px, 7vw, 44px) clamp(20px, 6vw, 40px) clamp(26px, 6vw, 38px); }
.lista-card::after {
  --c: rgba(85, 58, 14, 0.8); --t: 1.5px;   /* their logo's brown */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 28px var(--t) no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / var(--t) 28px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 28px var(--t) no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) 28px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 28px var(--t) no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / var(--t) 28px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 28px var(--t) no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) 28px no-repeat;
}
@media (max-resolution: 1.99dppx) { .lista-card::after { --t: 1px; } }
.lista-card h1 { outline: none; }
.lista-card p { color: var(--chalk-2); }
.lista-act { margin-top: 26px; }
.lista-act .btn { width: 100%; }
@media (min-width: 560px) { .lista-act .btn { width: auto; min-width: 300px; } }
.lista-card.is-new > * { animation: listaRise 640ms var(--ease-out) both; }
.lista-card.is-new > p { animation-delay: 60ms; }
.lista-card.is-new > .lista-act { animation-delay: 120ms; }
@keyframes listaRise { from { opacity: 0; transform: translateY(10px); } }
/* a discount (descuento/): what it is in large type; while it is valid, its QR on a chalk tile (ink on
   chalk, the way a phone reads it best) and its code under it */
.lista-card .vale__que { margin: 6px 0 14px; font-size: clamp(1.375rem, 5.8vw, 1.8125rem); line-height: 1.36; color: var(--chalk); }
.lista-card .vale__soon { color: var(--chalk); }
.vale__qr { width: min(100%, 280px); margin: 26px auto 18px; }
.vale__qr svg { display: block; width: 100%; height: auto; }
.lista-card .vale__code { margin: 18px 0 0; text-align: center; }
.vale__code span { display: block; font-size: 0.875rem; letter-spacing: var(--caps); text-transform: uppercase; color: var(--chalk-2); }
.vale__code b { display: block; margin-top: 6px; font-weight: 400; font-size: clamp(1.375rem, 6vw, 1.75rem); letter-spacing: 0.12em; color: var(--chalk); }
.lista-card .vale__how { margin: 16px auto 0; max-width: 34ch; text-align: center; font-size: 1rem; }
.lista-status { margin: 16px 0 0; font-size: 1rem; color: var(--chalk); }
.lista-status:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
  .back:hover svg { transform: translateX(-3px); }
  .lang button:hover { color: var(--chalk); }
  .btn:hover { background: rgba(var(--fg-rgb), 0.08); }
  .btn--wine:hover { background: #922338; border-color: #922338; }
}
@media (prefers-reduced-motion: reduce) {
  .back svg { transition: none; }
  .btn { transition: background-color 200ms linear; }
  .btn:active { transform: none; }
  .lista-card.is-new > * { animation: listaFade 300ms linear both; }
}
@keyframes listaFade { from { opacity: 0; } }
[hidden] { display: none !important; }