/* ======================================================================
   Cartel del Domingo de barril (secciones por día), compartido por la portada (index.html → #barril) y la carta
   (carta/index.html → sección por día). Movido tal cual desde inicio.css el 10-oct-2026 (rama carta-barril-dinamico):
   mismos selectores y mismo orden; inicio.css lo trae con @import. Lo propio de la carta (chips elegibles, pie, cuenta
   regresiva, humo, aparición) vive en carta.css bajo .cartel-carta. Fotos, fundido y gesto: src/ui/cartel-barril.js.
   ====================================================================== */
/* ---------- Secciones por día (9-oct-2026, Domingo de barril): anuncio toda la semana, justo debajo de la portada ----------
   Cartel con corte diagonal (10-oct-2026, Mauro: "me gustan imágenes divididas en diagonal"; guía: la pieza de redes del domingo).
   Computador (≥ 900 px): banda de hasta 1120 px; a la izquierda la foto del plato cortada en diagonal con un filete dorado de 2 px y otro
   tenue 8 px más allá (la doble línea del afiche); a la derecha la jerarquía del afiche. Celular: la foto arriba (4:3) con el borde de abajo
   en diagonal y el texto montado 24 px sobre ella. Fotos, fundido y gesto: src/ui/cartel-barril.js. Textos: menu.json → sección → cartel. */
.barril{position:relative;z-index:1;max-width:1152px;margin:22px auto 0;padding:0 16px}
.barril-in{position:relative;overflow:hidden;border:1px solid rgba(201,168,76,.42);outline:1px solid rgba(201,168,76,.14);outline-offset:5px;
  background:radial-gradient(130% 70% at 72% 0%,rgba(201,168,76,.18),transparent 60%),linear-gradient(180deg,rgba(24,20,9,.9),rgba(10,9,0,.85));box-shadow:0 18px 50px rgba(0,0,0,.45)}
.barril-tag{display:inline-block;padding:6px 14px;border:1px solid rgba(226,196,106,.6);border-radius:999px;background:rgba(10,9,0,.72);font:600 max(10px,var(--fmin,0px))/1.3 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.barril.es-hoy .barril-tag{background:linear-gradient(180deg,#E2C46A,#C9A84C 55%,#A98A3C);color:#1a1206;border-color:#E2C46A}
.barril-tag:empty{display:none}

/* la foto (celular primero: arriba, 4:3, borde de abajo en diagonal) */
.cartel{--cf-w:47%}
.cartel-marco{position:relative;aspect-ratio:4/3}
.cartel-foto{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 86%,0 100%);background:#0d0b04}
.cartel-foto.vacia{display:block;background:radial-gradient(70% 60% at 35% 40%,rgba(226,196,106,.22),transparent 70%),repeating-linear-gradient(115deg,rgba(201,168,76,.07) 0 1px,transparent 1px 14px),linear-gradient(160deg,#241c0c,#0d0b04)}
.cartel-foto.vacia::before{content:"🜂";position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:clamp(64px,12vw,120px);line-height:1;color:rgba(201,168,76,.32)}
.cf-pista{position:absolute;inset:0;touch-action:pan-y}
.cf-sl{position:absolute;inset:0;display:block;overflow:hidden;opacity:0;transition:opacity 1.3s ease;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.cf-sl.on{opacity:1;z-index:1}
.cf-sl:not(.on){pointer-events:none}
.cf-sl img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform-origin:50% 60%;user-select:none;-webkit-user-drag:none}
.cf-sl.on img,.cf-sl.sale img{animation:cf-kb 9s ease-out forwards}   /* Ken Burns lento; la que sale lo conserva mientras se funde */
@keyframes cf-kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.cf-sl::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,0,.25),transparent 22%,transparent 42%,rgba(10,9,0,.5) 66%,rgba(10,9,0,.92))}   /* la foto se funde hacia el fondo */
.cf-sl:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.cartel .cf-pie{z-index:1;bottom:calc(14% + 6px);padding:0 14px;background:none}
.cf-puntos{position:absolute;z-index:3;top:10px;right:8px;display:flex;gap:0}
.cf-puntos button{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.cf-puntos button::before{content:"";width:8px;height:8px;border-radius:999px;border:1px solid rgba(226,196,106,.85);background:rgba(10,9,0,.45);transition:width .3s,background .3s}
.cf-puntos button[aria-current]::before{width:20px;background:var(--gold);border-color:var(--gold)}
.cf-puntos button:focus-visible{outline:1px solid var(--gold);outline-offset:-3px;border-radius:999px}
/* doble filete dorado siguiendo la diagonal (el segundo, tenue, 8 px más allá). La capa es 12 px más alta que la foto para que quepa el segundo */
.cartel-filete{position:absolute;z-index:3;left:0;right:0;top:0;height:calc(100% + 12px);pointer-events:none;background:linear-gradient(90deg,#A98A3C,#E2C46A 45%,#C9A84C);
  clip-path:polygon(0 calc(100% - 14px),100% calc((100% - 12px) * .86 - 2px),100% calc((100% - 12px) * .86),0 calc(100% - 12px))}
.cartel-filete.tenue{opacity:.4;clip-path:polygon(0 calc(100% - 5px),100% calc((100% - 12px) * .86 + 7px),100% calc((100% - 12px) * .86 + 8px),0 calc(100% - 4px))}

/* el texto, con la jerarquía del afiche */
.cartel-txt{position:relative;z-index:4;margin-top:-24px;padding:0 16px 20px;text-align:left}
/* la fecha: en el celular es lo primero del texto y queda montada sobre el corte, como un sello; en el computador va sobre la foto, arriba a la izquierda */
.cartel .barril-tag{margin:0 0 14px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.cartel-ante{display:flex;align-items:center;gap:12px;margin:0;font:600 max(10.5px,var(--fmin,0px))/1.3 var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.cartel-ante::before,.cartel-ante::after{content:"";flex:0 0 34px;height:1px;background:linear-gradient(90deg,transparent,#C9A84C)}
.cartel-ante::after{background:linear-gradient(90deg,#C9A84C,transparent)}
.cartel h2{margin:12px 0 0;font-family:var(--font-title);text-transform:uppercase;line-height:1}
.cartel h2 a{display:block;color:inherit;text-decoration:none}
.cartel-l1{display:block;font-weight:500;font-size:clamp(17px,2.1vw,26px);letter-spacing:.24em;line-height:1.25;color:var(--cream)}
.cartel-l2{display:block;margin-top:4px;font-weight:700;font-size:clamp(40px,6vw,84px);letter-spacing:.03em;line-height:.98;color:#C9A84C;transition:filter .2s}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cartel-l2{background:linear-gradient(180deg,#E2C46A 8%,#C9A84C 55%,#A98A3C 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.cartel-l2.largo{font-size:clamp(28px,4vw,54px);letter-spacing:.06em;line-height:1.05}
.cartel h2 a:hover .cartel-l2{filter:brightness(1.15)}
.cartel h2 a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.cartel-lema{margin:12px 0 0;font-family:var(--font-title);font-weight:500;font-size:13px;letter-spacing:.16em;line-height:1.5;color:var(--cream)}   /* Cinzel: las minúsculas salen como versalitas */
.cartel-lema .pt{color:var(--gold);margin:0 .25em}
.cartel-lema:empty,.cartel-blurb:empty{display:none}
/* idiomas (17-oct-2026, docs/IDIOMAS.md → "Contenido del negocio y regla de nombres"): en otro idioma el nombre del evento queda en español y debajo
   va su traducción, pequeña, con la letra del lema y en dorado. En español no existe (no se crea el elemento). */
.cartel-lema.cartel-sub{margin-top:8px;color:var(--gold)}
.cartel-sub + .cartel-lema{margin-top:10px}
.cartel-blurb{margin:10px 0 0;max-width:48ch;font-family:var(--font-dish);font-style:italic;font-size:16.5px;line-height:1.4;color:var(--cream-dim)}
.cartel .toca-pista{margin:16px 0 0}
.cartel-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cartel .toca-pista + .cartel-chips{margin-top:7px}
.cartel-chips li{display:flex}
.cartel-chips a{flex:1;display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 10px 7px 16px;border:1px solid rgba(201,168,76,.42);border-radius:999px;background:rgba(201,168,76,.05);
  text-decoration:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s}
.cartel-chips a:hover,.cartel-chips a:active{background:rgba(201,168,76,.13);border-color:var(--gold)}
.cartel-chips a:hover .chev,.cartel-chips a:focus-visible .chev{opacity:1;transform:translate(3px,-1px)}
.cartel-chips a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cartel-chips .ch-n{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:7px;min-width:0}
.cartel-chips b{font-family:var(--font-dish);font-weight:600;font-size:17px;line-height:1.15;color:var(--cream)}
.cartel-chips small{font:500 max(9.5px,var(--fmin,0px))/1.2 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark)}
.cartel-chips em{font-style:normal;font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--gold);white-space:nowrap}
.cartel-chips .chev{font-size:19px}
.cartel-datos{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;font:500 12px/1.35 var(--font-body);letter-spacing:.05em;color:var(--cream)}
.cartel-datos li{display:flex;align-items:center;gap:9px;min-height:36px}
.cartel-datos a{display:inline-flex;align-items:center;gap:9px;min-height:40px;color:inherit;text-decoration:none;transition:color .15s}
.cartel-datos a:hover{color:var(--gold)}
.cartel-datos a:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.cartel-datos svg{flex:0 0 18px;width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.barril-nota{font-size:max(11px,var(--fmin,0px));letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);margin:12px 0 0}
.barril-nota:empty{display:none}
.barril-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media (prefers-reduced-motion:reduce){
  .cf-sl,.cf-puntos button::before,.cartel-chips a,.cartel-chips .chev,.cartel-l2{transition:none}
  .cf-sl.on img,.cf-sl.sale img{animation:none}
}
/* celular */
@media (max-width:600px){
  .barril{padding:0}
  .cartel-l2{font-size:clamp(40px,12.5vw,56px)}
  .cartel-l2.largo{font-size:clamp(26px,8vw,38px)}
  .cartel-lema{font-size:max(11.5px,var(--fmin,0px));letter-spacing:.08em}
  .cartel-chips{display:grid;grid-template-columns:1fr 1fr}
  .cartel-chips a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n c" "p c";align-items:center;row-gap:3px;column-gap:4px;border-radius:14px;padding:9px 6px 9px 12px}
  .cartel-chips .ch-n{grid-area:n}.cartel-chips em{grid-area:p}.cartel-chips .chev{grid-area:c}
  .cartel-chips b{font-size:16.5px}
  .barril-cta .btn-gold,.barril-cta .btn-ghost{flex:1 1 0;padding:13px 8px;letter-spacing:.14em}
}
/* celular angosto (≤ 360 px): menos aire entre letras para que el antetítulo y la línea 1 no se partan */
@media (max-width:360px){
  .cartel-ante{letter-spacing:.2em;gap:9px}.cartel-ante::before,.cartel-ante::after{flex-basis:22px}
  .cartel-l1{letter-spacing:.14em}
}
/* tableta: la misma pila, con la foto más apaisada */
@media (min-width:601px) and (max-width:899px){
  .cartel-marco{aspect-ratio:16/9}
  .cartel-txt{padding:0 28px 26px}
  .cartel-datos{flex-direction:row;flex-wrap:wrap;column-gap:22px}
}
/* computador: la banda partida en diagonal */
@media (min-width:900px){
  .cartel-marco{position:absolute;inset:0;aspect-ratio:auto}
  .cartel-marco{pointer-events:none}.cartel-foto{pointer-events:auto}
  .cartel .barril-tag{position:absolute;z-index:4;top:18px;left:18px;margin:0}
  .cartel-foto{inset:0 auto 0 0;width:var(--cf-w);clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
  .cf-sl::after{background:linear-gradient(98deg,transparent 48%,rgba(10,9,0,.5) 92%),linear-gradient(180deg,rgba(10,9,0,.25),transparent 20%,transparent 58%,rgba(10,9,0,.85))}
  .cartel .cf-pie{bottom:0;right:30%;padding:0 20px 18px}
  .cf-puntos{top:52px;left:12px;right:auto}   /* bajo la fecha */
  .cartel-filete{height:auto;bottom:0;clip-path:polygon(var(--cf-w) 0,calc(var(--cf-w) + 2px) 0,calc(var(--cf-w) * .72 + 2px) 100%,calc(var(--cf-w) * .72) 100%)}
  .cartel-filete.tenue{clip-path:polygon(calc(var(--cf-w) + 10px) 0,calc(var(--cf-w) + 11px) 0,calc(var(--cf-w) * .72 + 11px) 100%,calc(var(--cf-w) * .72 + 10px) 100%)}
  .cartel-txt{position:static;margin:0 0 0 calc(var(--cf-w) + 10px);min-height:500px;padding:30px 44px 28px 26px;display:flex;flex-direction:column;justify-content:center}   /* static: la fecha se ubica contra la banda */
  .cartel-l2{font-size:clamp(40px,5.6vw,72px)}   /* la columna de texto no pasa de ~460 px: más grande, "Al barril" se parte */
  .cartel-datos{flex-direction:row;flex-wrap:wrap;column-gap:20px;row-gap:0}
  .cartel-datos li{min-height:30px}.cartel-datos a{min-height:32px}
}

/* computador angosto (900–1099 px): la foto cede un poco de ancho para que los platos vayan de a dos y la banda no pase de 560 px */
@media (min-width:900px) and (max-width:1099px){
  .cartel{--cf-w:40%}
  .cartel-txt{padding-right:32px}
  .cartel-chips a{gap:8px;padding:6px 8px 6px 13px}
  .cartel-chips b{font-size:16px}
  .cartel-lema{font-size:12px;letter-spacing:.12em}
  .cartel .cf-pie{right:24%;flex-direction:column;align-items:flex-start;gap:4px}.cartel .cf-pie b{font-size:14px}
}