*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* E-Sumi — washi paper, ink, hanko-red accent (matches mixology.school globals) */
  --paper:#fbf7ef;--paper-d:#f4ecd9;--ink:#17130e;--muted:#574d3f;
  --accent:#b3372a;--accent-wash:rgba(179,55,42,.12);--lime:#767645;
  --line:#e6dcc6;--card:#fcf8f0;
  --gin:#8B9A6B;--whiskey:#6B4F3A;--rum:#B8860B;--agave:#767645;
  --vodka:#8A9BA8;--brandy:#9A7B4F;--vermouth:#a0463a;--amaro:#4A3728;--liqueur:#7B6B8A;
  --bitters:#3D3228;--fortified:#C4A574;
  --font-trazo:"Mixology Trazo Bermellon","Mixology Trazo","Caveat",cursive;
  --font-hand:"Mixology Trazo","Caveat",cursive;
}

/* Mixology Trazo — the house brush typeface (same faces as the React globals.css),
   so the static botellero speaks the new brush voice like the rest of the site. */
@font-face{font-family:"Mixology Trazo";font-weight:300;font-display:swap;src:url("/fonts/trazo/MixologyTrazo-Light.woff2") format("woff2")}
@font-face{font-family:"Mixology Trazo";font-weight:400;font-display:swap;src:url("/fonts/trazo/MixologyTrazo-Regular.woff2") format("woff2")}
@font-face{font-family:"Mixology Trazo";font-weight:700;font-display:swap;src:url("/fonts/trazo/MixologyTrazo-Bold.woff2") format("woff2")}
@font-face{font-family:"Mixology Trazo Bermellon";font-weight:300;font-display:swap;src:url("/fonts/trazo/MixologyTrazoBermellon-Light.woff2") format("woff2")}
@font-face{font-family:"Mixology Trazo Bermellon";font-weight:400;font-display:swap;src:url("/fonts/trazo/MixologyTrazoBermellon-Regular.woff2") format("woff2")}
@font-face{font-family:"Mixology Trazo Bermellon";font-weight:700;font-display:swap;src:url("/fonts/trazo/MixologyTrazoBermellon-Bold.woff2") format("woff2")}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Satoshi','Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.55;min-height:100vh;overflow-x:hidden;
}
/* Washi substrate — the same scanned-paper sheet the rest of mixology.school uses,
   so the botellero reads as ink printed on one continuous sheet. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.9;
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 90% at 12% 0%, #fdf9f1 0%, transparent 55%),
    radial-gradient(120% 90% at 88% 100%, #f0e6cf 0%, transparent 60%),
    url("/brand/textures/paper-texture-01.png");
  background-size:auto,auto,cover;
  background-position:center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-blend-mode:normal,multiply,multiply;
}
a{color:inherit;text-decoration:none}
.shell{max-width:1080px;margin:0 auto;padding:0 24px 100px;position:relative;z-index:1}

.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 0;border-bottom:1px solid var(--line);gap:16px;flex-wrap:wrap
}
.logo{
  font-family:'Satoshi','Inter',system-ui,sans-serif;font-weight:700;font-size:1.05rem;
  letter-spacing:-.02em
}
.logo-dot{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-link{
  font-size:.82rem;font-weight:600;color:var(--muted);padding:8px 14px;
  border-radius:100px;transition:color .2s,background .2s
}
.nav-link:hover,.nav-link.active{color:var(--ink);background:var(--card)}
.nav-cta{
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:100px;
  font-size:.78rem;font-weight:700;transition:transform .2s,background .2s
}
.nav-cta:hover{background:var(--accent);transform:translateY(-1px)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:100px;font-family:var(--font-hand);
  font-size:1.05rem;font-weight:400;letter-spacing:.005em;cursor:pointer;border:none;
  transition:transform .2s,box-shadow .2s,background .2s
}
.btn-primary{background:var(--accent);color:var(--paper)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--accent-wash)}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-ghost{background:var(--card);color:var(--muted);border:1.5px solid var(--line);padding:8px 14px;font-size:.78rem}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink)}
.btn-ghost.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.sec-label{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px
}
.sec-title{
  font-family:'Satoshi','Inter',system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:-.02em;line-height:1.15
}

.site-footer{
  padding:40px 0 48px;font-size:.78rem;color:var(--muted);
  border-top:1px solid var(--line);margin-top:48px
}

/* the animated brand mark, before the wordmark */
.logo{display:inline-flex;align-items:center;white-space:nowrap}
.brand-mark{display:block;width:32px;height:32px;margin-right:10px;border-radius:8px;flex:none}
/* on a phone the mark alone is the signature: the wordmark crowds the nav */
@media(max-width:560px){
  .brand-mark{width:30px;height:30px;margin-right:0}
  .logo,.bar-top .logo{font-size:0}
}

/* ── El botellero a pincel + botones washi (Victor, 29-Oct: «Trazo, botones washi, TODO») ──
   El bundle es un iframe aislado: no tiene el filtro SVG #washi-torn (vive en el
   layout React), así que los botones usan la variante washi --flat: papel de fibra
   (brand/papel/washi-fibra.webp) + radio 12 + sombra, igual que la despensa. */
.sec-title,.cocktail-panel-head h3{font-family:var(--font-hand);font-weight:400;letter-spacing:0}
.sec-label{font-family:var(--font-hand);font-weight:400;letter-spacing:.08em;text-transform:none;font-size:.92rem}

/* botones → hoja de washi; Trazo negro en reposo, Bermellón (destellos) al hover */
.btn{position:relative;isolation:isolate;background:none;border:0;border-radius:12px;color:var(--ink)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:12px;
  background:url("/brand/papel/washi-fibra.webp") center/cover,#f5eddd;
  box-shadow:0 1px 2px rgb(23 19 14 / .08),0 8px 22px rgb(23 19 14 / .05);
  transition:box-shadow .22s ease
}
.btn:hover,.btn:focus-visible{transform:none;font-family:var(--font-trazo)}
.btn:hover::before,.btn:focus-visible::before{box-shadow:0 3px 8px rgb(23 19 14 / .14),0 20px 42px -6px rgb(23 19 14 / .16)}
.btn-secondary,.btn-ghost{background:none;border:0;color:var(--ink)}
.btn-secondary:hover,.btn-ghost:hover{border:0;color:var(--ink)}
/* primario = washi hanko (el papel de fibra teñido del rojo de la casa), letra crema */
.btn-primary{color:var(--paper)}
.btn-primary::before{background:linear-gradient(rgba(179,55,42,.93),rgba(179,55,42,.93)),url("/brand/papel/washi-fibra.webp") center/cover}
.btn-primary:hover,.btn-primary:focus-visible{font-family:var(--font-hand);color:var(--paper)}
.btn-primary:hover::before{filter:brightness(.96)}
/* ghost activo (toggle on) = hoja entintada */
.btn-ghost.on{color:var(--paper)}
.btn-ghost.on::before{background:var(--ink)}

/* La barra de selección es superficie OSCURA (fondo tinta) = chrome: washi NO aplica.
   Se quita la hoja de papel y se conserva el relleno sobre oscuro, con el pincel en crema. */
#selection-bar .btn::before{content:none}
#selection-bar .btn-primary{background:var(--accent);color:var(--paper)}
#selection-bar .btn-ghost{background:transparent;color:var(--paper)}
#selection-bar .btn:hover,#selection-bar .btn:focus-visible{font-family:var(--font-hand)}