/* ══════════════════════════════════════════════════════════════
   Cerveceras · menú del cliente
   Mobile-first. El acento (--amber) lo define cada negocio.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:         #121013;
  --bg-elev:    #1a171b;
  --bg-elev-2:  #201c20;
  --line:       rgba(255,255,255,0.08);
  --amber:      #d98e3b;
  --amber-soft: rgba(217,142,59,0.16);
  --text:       #f3ede4;
  --text-dim:   #a89f95;
  --text-faint: #6f6862;
  --green:      #7a9a6b;
  --ancho:      480px;
}

*{box-sizing:border-box; margin:0; padding:0;}
/* Sin esto el navegador pinta los enlaces de azul y morado, y el nombre
   de la marca en la esquina —que es un enlace a la portada— acaba
   viéndose como un enlace visitado de 1998. */
a{color:inherit;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}

body{
  background: radial-gradient(ellipse 120% 80% at 50% -10%, #201a16 0%, var(--bg) 45%), var(--bg);
  color: var(--text);
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  min-height:100vh;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  /* Sin overflow-x:hidden a propósito: convertía al body en su propio
     contenedor de scroll y eso rompía la barra de filtros pegajosa. */
}

img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit;}

/* ── Barra superior ─────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding: calc(22px + env(safe-area-inset-top)) 20px 14px;
  max-width: var(--ancho); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-mark{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background: conic-gradient(from 180deg, var(--amber), #7a4a1f, var(--amber));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:600; font-size:14px; color:#12100f;
  text-transform:uppercase;
}
.brand-logo{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.brand-name{
  font-family:'Fraunces', serif; font-weight:500; font-size:16px; letter-spacing:0.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.table-chip{
  flex:0 0 auto;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--amber); border:1px solid var(--amber-soft);
  background: var(--amber-soft); padding:6px 12px; border-radius:20px;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{padding: 18px 20px 8px; max-width: var(--ancho); margin:0 auto;}
.hero-eyebrow{
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:10px;
}
.hero h1{
  font-family:'Fraunces', serif; font-weight:300; font-size:34px;
  line-height:1.08; letter-spacing:-0.01em;
}
.hero h1 em{font-style:italic; font-weight:400; color:var(--amber);}
.hero p{color:var(--text-dim); font-size:14px; margin-top:10px; line-height:1.6; max-width:38ch;}

/* ── Aviso de consumo responsable ───────────────────────────── */
.abv-legal{
  width: calc(100% - 40px); max-width: calc(var(--ancho) - 40px);
  margin: 18px auto 4px;
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:12px;
  background: var(--bg-elev); border:1px solid var(--line);
}
.abv-legal .dot{min-width:6px; height:6px; border-radius:50%; background:var(--amber); margin-top:6px;}
.abv-legal p{font-size:11.5px; color:var(--text-faint); line-height:1.5;}

/* ── Etiqueta de sección ────────────────────────────────────── */
.section-label{
  display:flex; align-items:baseline; gap:12px;
  width: calc(100% - 40px); max-width: calc(var(--ancho) - 40px);
  margin: 30px auto 16px;
}
.section-label h2{
  font-family:'Fraunces', serif; font-weight:400; font-size:13px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim);
}
.section-label .rule{flex:1; height:1px; background:var(--line);}

/* ── Promociones ────────────────────────────────────────────── */
/* Antes eran un carrusel angosto: las tarjetas quedaban a 250px
   contra 320px de las de cerveza y se veían cortadas. Ahora ocupan
   el mismo ancho y se apilan; en pantallas grandes pasan a rejilla. */
.promo-scroll{
  display:flex; flex-direction:column; gap:12px;
  padding: 0 20px; max-width: var(--ancho); margin:0 auto;
}
.promo-card{
  position:relative; border-radius:18px; padding:16px 16px 15px;
  background: linear-gradient(150deg, rgba(217,142,59,0.16) 0%, rgba(217,142,59,0.02) 58%), var(--bg-elev);
  border:1px solid rgba(217,142,59,0.26);
  overflow:hidden;
}
.promo-ghost{
  position:absolute; right:2px; bottom:-14px;
  font-family:'Fraunces', serif; font-weight:600; font-size:62px;
  color:rgba(217,142,59,0.09); line-height:1; letter-spacing:-0.04em; pointer-events:none;
}
.promo-kind{
  font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--amber); font-weight:700; position:relative;
}
.promo-card h3{
  font-family:'Fraunces', serif; font-weight:500; font-size:18px;
  line-height:1.2; margin-top:7px; position:relative;
}
.promo-card p{font-size:12px; color:var(--text-dim); line-height:1.55; margin-top:6px; position:relative; max-width:34ch;}
.promo-when{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:12px; font-size:10px; letter-spacing:0.06em;
  color:var(--text-faint); position:relative;
}
.promo-when .live{
  width:5px; height:5px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(122,154,107,0.16);
}

/* ── Filtros ────────────────────────────────────────────────── */
/* Una sola fila y pegajosa: en celular el alto es lo más caro, y dos
   filas de chips se comerían el doble justo encima del contenido. */
.filters{
  position:sticky; top:0; z-index:15;
  padding: 14px 0 12px; margin-top:8px;
  background: rgba(18,16,19,0.93);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.filters-in{
  display:flex; gap:8px; align-items:center;
  overflow-x:auto; padding: 0 20px;
  max-width: var(--ancho); margin:0 auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.filters-in::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto; padding:9px 16px; border-radius:20px;
  font-size:12.5px; font-weight:600; letter-spacing:0.02em;
  border:1px solid var(--line); color:var(--text-dim);
  white-space:nowrap; transition: background .2s, color .2s, border-color .2s;
}
.chip:hover{color:var(--text);}
.chip.active{background:var(--amber); color:#1a1108; border-color:var(--amber);}
.chip-sep{
  flex:0 0 auto; width:1px; height:22px; margin:0 4px;
  background:var(--line-fuerte, rgba(255,255,255,0.16));
}

/* ── Tarjetas ───────────────────────────────────────────────── */
.cards{
  display:flex; flex-direction:column; gap:18px;
  padding: 0 20px; max-width: var(--ancho); margin:0 auto;
}
.card{
  position:relative;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border:1px solid var(--line); border-radius:22px;
  overflow:hidden; padding:20px 20px 22px;
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-2px);}
.card:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
.card.unavailable{opacity:0.45; filter:grayscale(0.6);}
.card.hidden-filter{display:none;}

.card.featured{
  border-color: rgba(217,142,59,0.3);
  box-shadow: 0 0 0 1px rgba(217,142,59,0.06), 0 18px 40px -28px rgba(217,142,59,0.5);
}
.card.featured::before{
  content:''; position:absolute; top:0; left:12%; right:12%; height:1.5px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
}
.house-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:9.5px; letter-spacing:0.17em; text-transform:uppercase; font-weight:700;
  color:var(--amber); border:1px solid rgba(217,142,59,0.28);
  background:rgba(217,142,59,0.09);
  padding:5px 11px 5px 9px; border-radius:20px; margin-bottom:14px;
}

.card-top{display:flex; gap:16px; align-items:flex-start;}

/* Vaso de pinta */
.glass-wrap{
  position:relative; width:72px; height:124px; flex:0 0 auto;
  display:flex; align-items:flex-end; justify-content:center;
}
.glass-glow{
  position:absolute; left:50%; bottom:6px; width:100px; height:100px;
  transform:translateX(-50%);
  background: radial-gradient(circle, var(--glow-color, rgba(217,142,59,0.35)) 0%, transparent 72%);
  filter: blur(10px);
}
.pint{position:relative; width:100%; height:100%; overflow:visible;}
.beer-photo{width:100%; height:100%; object-fit:contain; position:relative;}

.bubble-c{
  transform-box: fill-box; transform-origin:center;
  animation: riseC linear infinite;
}
@keyframes riseC{
  0%  {transform: translateY(0) scale(1);      opacity:0;}
  12% {opacity:0.85;}
  88% {opacity:0.45;}
  100%{transform: translateY(-118px) scale(0.5); opacity:0;}
}

.card-head{flex:1; min-width:0;}
.card-eyebrow{font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint);}
.card-title{font-family:'Fraunces', serif; font-weight:500; font-size:21px; line-height:1.15; margin-top:3px;}
.card-style{color:var(--amber); font-size:12.5px; margin-top:4px; font-weight:600;}

.gauges{display:flex; gap:10px; margin-top:12px;}
.gauge{display:flex; flex-direction:column; align-items:center; width:52px;}
.gauge svg{width:44px; height:44px;}
.gauge-val{font-family:'Fraunces', serif; font-size:14px; font-weight:600; margin-top:-30px;}
/* El valor se sube dentro del anillo; la etiqueta baja lo suficiente
   para no encimarse con el borde inferior del medidor. */
.gauge-label{font-size:8.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); margin-top:14px;}

.card-desc{color:var(--text-dim); font-size:13px; line-height:1.6; margin-top:14px;}

/* Radar de perfil de sabor */
.flavor-row{
  display:flex; align-items:center; gap:14px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.flavor-row .radar{flex:0 0 auto;}
.flavor-legend{display:flex; flex-wrap:wrap; gap:6px 10px;}
.flavor-legend span{font-size:10.5px; color:var(--text-dim); display:flex; align-items:center; gap:5px;}
.flavor-legend b{width:5px; height:5px; border-radius:50%; display:inline-block; background:var(--amber);}

.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; flex-wrap:wrap;
}
.pairing{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-faint); flex-wrap:wrap;}
.pairing .icon{color:var(--amber);}
.pairing .items{color:var(--text-dim); font-weight:600;}
.price{font-family:'Fraunces', serif; font-size:16px; font-weight:500; color:var(--text); margin-left:auto;}

.status-tag{
  position:absolute; top:18px; right:20px; z-index:2;
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:20px;
}
.status-tag.out{background:rgba(120,60,50,0.18); color:#c9847a; border:1px solid rgba(201,132,122,0.25);}
.status-tag.promo{background:var(--amber-soft); color:var(--amber); border:1px solid rgba(217,142,59,0.32); font-weight:700;}

/* ── Alimentos ──────────────────────────────────────────────── */
.food-card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:18px; padding:14px 16px;
  cursor:pointer; transition: transform .18s ease, border-color .18s ease;
}
.food-card:hover{transform:translateY(-2px); border-color:rgba(217,142,59,0.22);}
.food-card:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
.food-card.hidden-filter{display:none;}
.food-card.unavailable{opacity:0.45; filter:grayscale(0.6);}
.food-thumb{
  width:64px; height:64px; border-radius:14px; flex:0 0 auto; overflow:hidden;
  background: radial-gradient(circle at 40% 30%, #4a3a2c, #221a14);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.food-thumb img{width:100%; height:100%; object-fit:cover;}
.food-info{flex:1; min-width:0;}
.food-title-row{display:flex; align-items:baseline; gap:10px;}
.food-info h3{font-family:'Fraunces', serif; font-weight:500; font-size:15.5px; flex:1; min-width:0;}
.food-info p{font-size:11.5px; color:var(--text-faint); margin-top:3px; line-height:1.5;}
.food-pair{font-size:10.5px; color:var(--amber); margin-top:6px; font-weight:600;}
.food-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.mini-tag{
  font-size:9px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700;
  padding:4px 8px; border-radius:20px; border:1px solid var(--line); color:var(--text-faint);
}
.mini-tag.house,
.mini-tag.promo{color:var(--amber); border-color:rgba(217,142,59,0.28); background:rgba(217,142,59,0.09);}
.mini-tag.out{color:#c9847a; border-color:rgba(201,132,122,0.25);}

.empty-filtro{
  text-align:center; color:var(--text-faint); font-size:12.5px;
  margin:24px auto; max-width: var(--ancho); padding:0 20px;
}

footer{
  text-align:center; margin-top:46px; padding:20px;
  font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint);
  line-height:1.8;
}
.foot-mesa{color:var(--amber);}

/* ── Hoja de detalle ────────────────────────────────────────── */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(8,7,9,0.72);
  backdrop-filter: blur(3px); z-index:40; animation: fadeIn .2s ease;
}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  max-height:88vh; overflow-y:auto;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border:1px solid var(--line); border-bottom:0;
  border-radius:26px 26px 0 0;
  padding: 26px 22px calc(30px + env(safe-area-inset-bottom));
  animation: slideUp .26s cubic-bezier(.22,.9,.3,1);
}
@media (min-width: 720px){
  .sheet{
    left:50%; bottom:auto; top:50%; transform:translate(-50%,-50%);
    width:min(560px, 92vw); border-radius:24px; border-bottom:1px solid var(--line);
    animation: popIn .22s cubic-bezier(.22,.9,.3,1);
  }
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes slideUp{from{transform:translateY(24px); opacity:0} to{transform:translateY(0); opacity:1}}
@keyframes popIn{from{transform:translate(-50%,-48%); opacity:0} to{transform:translate(-50%,-50%); opacity:1}}

.sheet-close{
  position:absolute; top:16px; right:18px; width:32px; height:32px;
  border-radius:50%; background:rgba(255,255,255,0.06); color:var(--text-dim);
  font-size:13px; display:flex; align-items:center; justify-content:center;
}
.sheet-close:hover{color:var(--text);}

.sheet-hero{display:flex; gap:18px; align-items:flex-start;}
.sheet-foto{
  width:110px; height:110px; border-radius:16px; object-fit:cover; flex:0 0 auto;
}
.sheet-emoji{
  width:110px; height:110px; border-radius:16px; flex:0 0 auto;
  background: radial-gradient(circle at 40% 30%, #4a3a2c, #221a14);
  display:flex; align-items:center; justify-content:center; font-size:44px;
}

/* Resalte al llegar desde un maridaje */
.resaltado{box-shadow:0 0 0 2px var(--amber) !important; transition: box-shadow .35s ease;}
.sheet-hero .glass-wrap{width:86px; height:150px;}
.sheet h2{font-family:'Fraunces', serif; font-weight:500; font-size:26px; line-height:1.12; margin-top:4px;}
.sheet .card-style{font-size:13px;}
.sheet .card-desc{font-size:13.5px; margin-top:18px;}
.sheet .gauges{margin-top:14px;}

.sheet-notas{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.sheet-notas h4,
.sheet-marida h4{
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:14px;
}
.sheet-radar-row{display:flex; gap:20px; align-items:center; flex-wrap:wrap;}
.nota-barras{flex:1; min-width:180px; display:flex; flex-direction:column; gap:9px;}
.nota-fila{display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--text-dim);}
.nota-fila .nombre{flex:0 0 96px; display:flex; align-items:center; gap:6px;}
.nota-fila .punto{width:6px; height:6px; border-radius:50%; flex:0 0 auto;}
.nota-fila .barra{
  flex:1; height:4px; border-radius:4px;
  background:rgba(255,255,255,0.07); overflow:hidden; display:block;
}
/* display:block es necesario: si queda en línea, el alto no aplica y la barra se ve vacía */
.nota-fila .relleno{display:block; height:100%; border-radius:4px;}

.sheet-marida{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.marida-chips{display:flex; flex-wrap:wrap; gap:8px;}
.marida-chip{
  font-size:12px; font-weight:600; color:var(--amber);
  border:1px solid rgba(217,142,59,0.28); background:rgba(217,142,59,0.09);
  padding:8px 14px; border-radius:20px; text-decoration:none;
}
.sheet-precio{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.sheet-precio .price{font-size:22px;}

/* ── Tablet y escritorio ────────────────────────────────────── */
@media (min-width: 720px){
  :root{--ancho: 720px;}
  .cards{display:grid; grid-template-columns:repeat(2, 1fr); align-items:start;}
  .promo-scroll{display:grid; grid-template-columns:repeat(2, 1fr); align-items:stretch;}
  .hero h1{font-size:40px;}
  .food-card{grid-column:span 1;}
}

@media (min-width: 1080px){
  :root{--ancho: 1040px;}
  .cards{grid-template-columns:repeat(3, 1fr);}
  .promo-scroll{grid-template-columns:repeat(3, 1fr);}
  .hero{padding-top:28px;}
  .hero h1{font-size:46px; max-width:16ch;}
}

/* ── Accesibilidad: menos movimiento ────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
}

/* ── Impresión: carta en papel como respaldo ────────────────── */
@media print{
  body{background:#fff; color:#000;}
  .promo-scroll, .filters, .sheet, .sheet-backdrop, .glass-wrap{display:none !important;}
  .card, .food-card{border:1px solid #ccc; background:#fff; break-inside:avoid;}
  .card-title, .food-info h3{color:#000;}
  .card-desc, .food-info p{color:#333;}
}

/* ── Selector de idioma ─────────────────────────────────────── */
.topbar-derecha{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.idiomas{display:flex; gap:2px; border:1px solid var(--line); border-radius:20px; padding:2px;}
.idioma{
  padding:5px 10px; border-radius:18px; text-decoration:none;
  font-size:10.5px; font-weight:700; letter-spacing:0.08em; color:var(--text-faint);
}
.idioma:hover{color:var(--text);}
.idioma.active{background:var(--amber); color:#1a1108;}

/* ── Precio con promoción ───────────────────────────────────── */
.precio-bloque{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-left:auto;}
.price-antes{
  font-size:12.5px; color:var(--text-faint); text-decoration:line-through;
  text-decoration-thickness:1px;
}
.price-promo{color:var(--amber);}
.price-hasta{
  width:100%; font-size:10px; letter-spacing:0.06em; color:var(--amber);
  margin-top:2px; text-align:right;
}
.food-info .price-hasta{text-align:left; margin-top:6px;}
.sheet-precio .price-hasta{text-align:right;}

/* La promoción que está corriendo se distingue de la que apenas viene */
.promo-card.corriendo{border-color:rgba(217,142,59,0.42);}
.promo-when strong{color:var(--green);}

/* ── Sucursal en la barra superior y en el pie ───────────────── */
.brand-mesa{
  display:block; font-style:normal;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); margin-top:1px;
}
.pie-sucursales{display:block; margin-top:10px; font-size:11.5px; color:var(--text-faint);}
.pie-sucursales a{color:var(--amber); text-decoration:none; margin:0 2px;}
.pie-directorio{
  display:inline-block; margin-top:12px;
  font-size:11.5px; color:var(--text-dim); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:2px;
}
.pie-directorio:hover{color:var(--amber); border-bottom-color:var(--amber);}

/* ── Eventos ────────────────────────────────────────────────── */
/* Vive en esta hoja y no en la del directorio porque las dos páginas
   que lo usan —la carta y la ficha— cargan ésta. */
.ev-cuando{
  flex:0 0 auto; min-width:104px;
  font-size:11.5px; color:var(--acento, var(--amber)); font-weight:600;
}
.ev-que strong{display:block; font-size:14px; font-weight:600;}
.ev-que em{font-style:normal; font-size:12px; color:var(--text-faint);}

/* En la carta va corto: el cliente vino a pedir cerveza, el evento es
   un recordatorio de que vuelva, no la sección principal. */
.menu-eventos{margin:0 0 28px;}
.menu-evento{
  display:flex; gap:14px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.menu-evento:last-child{border-bottom:0;}

/* Lo que está de barril, como una fila de fichas. El número del grifo va
   con el color del líquido: sirve para pedir «dame la del 4». */
.menu-barril{margin:0 0 26px;}
.barril-fila{display:flex; gap:8px; flex-wrap:wrap;}
.barril-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 7px; border-radius:22px;
  border:1px solid var(--line); background:var(--bg-elev);
  font-size:13px; font-weight:600;
}
.barril-chip em{
  display:flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:50%;
  background:var(--liquido); color:#1a1108;
  font-style:normal; font-size:11px; font-weight:700;
}

/* Medalla de una cerveza premiada, en la carta. Va abajo a la izquierda
   para no pelearse con la etiqueta de promoción, que vive arriba a la
   derecha y es la que cambia todos los días. */
.medal-tag{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px 3px 7px; border-radius:20px;
  font-size:10px; font-weight:700; letter-spacing:.04em;
  color:var(--medalla, #8b8279);
  background:color-mix(in srgb, var(--medalla, #8b8279) 15%, rgba(12,10,13,.86));
  border:1px solid color-mix(in srgb, var(--medalla, #8b8279) 42%, transparent);
}