/* ======================================================================
   ALQUIMIA RESTO BAR — Carta digital
   Paleta y tipografía según ADN de marca
   ====================================================================== */
:root {
  --bg:            #171208;   /* papiro oscuro (antes negro #0A0900) */
  --bg-soft:       #1E180C;   /* card / header */
  --gold:          #C9A84C;   /* dorado primario */
  --gold-dark:     #8A6E3A;   /* dorado opaco */
  --gold-subtle:   #3A2E18;   /* separadores */
  --cream:         #E8DCC8;   /* texto claro */
  --cream-dim:     #A79D8B;   /* texto secundario */
  --gray-text:     #6b6252;   /* notas */

  --el-fuego:  #C8552B;
  --el-agua:   #3E8E8A;
  --el-tierra: #8A7A3A;
  --el-madera: #8A5A34;
  --el-metal:  #9A9488;
  --el-default:#8A6E3A;

  --maxw: 660px;
  --font-title: 'Cinzel', serif;
  --font-dish:  'Cormorant Garamond', serif;
  --font-body:  'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
dialog { margin: auto; }   /* el reset de arriba dejaba todo <dialog> pegado a la esquina superior izquierda (revisión del 30-sep-2026) */

html { scroll-behavior: smooth; color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.02 .12' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .85  0 0 0 0 .72  0 0 0 0 .45  0 0 0 .04 0'/></filter><rect width='300' height='300' filter='url(%23p)'/></svg>"),
    radial-gradient(1200px 600px at 50% -10%, rgba(201,168,76,0.12), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(138,90,52,0.08), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%);
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding: 0 18px calc(60px + env(safe-area-inset-bottom));
}

.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ---------- Header ---------- */
.hero {
  text-align: center;
  padding: 54px 0 26px;
}
.hero .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 18px;
  border: 1.5px solid var(--gold-dark);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--font-title);
  font-size: 30px; font-weight: 600;
  box-shadow: 0 0 0 5px rgba(201,168,76,0.06);
}
.hero h1 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(30px, 9vw, 46px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--gold);
}
.hero .tagline {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  font-size:max(11px,var(--fmin,0px));
  color: var(--cream-dim);
  margin-top: 8px;
}
.hero .motto {
  font-family: var(--font-dish);
  font-style: italic;
  font-size: 17px;
  color: var(--gold-dark);
  margin-top: 16px;
}

/* ---------- Nav ---------- */
nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 12px 2px;
  margin-bottom: 8px;
  background: linear-gradient(to bottom, var(--bg) 60%, rgba(23,18,8,0.0));
  scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
nav a {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size:max(11px,var(--fmin,0px)); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid var(--gold-subtle);
  border-radius: 999px;
  transition: all .2s ease;
  white-space: nowrap;
}
nav a:hover, nav a:focus { color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* ---------- Section ---------- */
.section { padding: 30px 0 6px; }
.section-head { text-align: center; margin-bottom: 26px; }
.section-head .kicker {
  font-family: var(--font-dish);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-dark);
}
.section-head h2 {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(22px, 6vw, 30px);
  letter-spacing: 0.2em; text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 4px 0 10px;
}
.section-head .blurb {
  font-size: 12.5px;
  color: var(--cream-dim);
  max-width: 460px; margin: 0 auto;
}

/* diamond divider */
.divider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 6px auto 22px; max-width: 220px;
  color: var(--gold-dark);
}
.divider::before, .divider::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(to right, transparent, var(--gold-subtle), transparent);
}
.divider span { font-size: 12px; }

/* ---------- Item ---------- */
.item { padding: 15px 0; border-bottom: 1px solid rgba(58,46,24,0.55); }
.item:last-child { border-bottom: none; }
.item-top { display: flex; align-items: baseline; gap: 12px; }
.item-name {
  font-family: var(--font-dish);
  font-size: 21px; font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
}
.item-note {
  font-family: var(--font-body);
  font-size:max(9px,var(--fmin,0px)); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--el-fuego);
  border: 1px solid var(--el-fuego);
  border-radius: 4px; padding: 1px 5px;
  vertical-align: middle; margin-left: 8px;
}
.dots {
  flex: 1;
  border-bottom: 1px dotted var(--gold-subtle);
  transform: translateY(-5px);
  min-width: 16px;
}
.item-price {
  font-family: var(--font-body);
  font-weight: 500; font-size: 15px;
  color: var(--gold);
  white-space: nowrap;
}
.item-desc {
  font-size: 13px; font-weight: 300;
  color: var(--cream-dim);
  margin-top: 5px; max-width: 92%;
}
.elements { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.el {
  font-family: var(--font-body);
  font-size:max(9.5px,var(--fmin,0px)); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-dim);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px;
  border: 1px solid var(--gold-subtle);
  border-radius: 999px;
}
.el::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--el-default)); }
.el[data-el="Fuego"]  { --dot: var(--el-fuego); }
.el[data-el="Agua"]   { --dot: var(--el-agua); }
.el[data-el="Madera"] { --dot: var(--el-tierra); }
.el[data-el="Madera"] { --dot: var(--el-madera); }
.el[data-el="Metal"]  { --dot: var(--el-metal); }

/* ---------- Footer ---------- */
footer {
  text-align: center; margin-top: 46px; padding-top: 26px;
  border-top: 1px solid var(--gold-subtle);
}
footer .f-mark { font-family: var(--font-title); color: var(--gold); letter-spacing: .3em; text-indent: .3em; font-size: 15px; }
footer .f-note { font-size:max(11px,var(--fmin,0px)); color: var(--gray-text); margin-top: 10px; }
/* Pie legal único de las páginas públicas (20-oct-2026, publico.pie.nota; docs/COPY-Y-DISENO.md §5): legible, 12 px y contraste AA */
footer .f-legal { font-size: 12px; line-height: 1.5; color: var(--cream-dim); max-width: 520px; margin-left: auto; margin-right: auto; }
footer .f-city { font-family: var(--font-dish); font-style: italic; color: var(--gold-dark); font-size: 14px; margin-top: 6px; }

/* ---------- States ---------- */
#loading, #error { text-align: center; padding: 60px 0; color: var(--cream-dim); font-size: 13px; }
#error { color: var(--el-fuego); }

@media (min-width: 560px) {
  .item-desc { max-width: 80%; }
}

/* enlace a la experiencia + nuevos elementos */
.el[data-el="Tierra"]{--dot:#B8873E}
.el[data-el="Metal"]{--dot:#B4BCC4}
.el[data-el="Quintaesencia"]{--dot:#C9A84C}

/* logo oficial (3 círculos) */
.hero .logo{width:min(340px,84vw);color:var(--gold);display:block;margin:0 auto 6px}

/* ---------- Cabecera: luz cálida, plantas y ornamentos de manuscrito ---------- */
.hero{position:relative;overflow:hidden}
html,body{overflow-x:clip}
.hero-glow{position:absolute;left:50%;top:-140px;width:520px;height:420px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,170,70,.13),rgba(201,168,76,.05) 45%,transparent 70%);animation:edison 6s ease-in-out infinite}
@keyframes edison{0%,100%{opacity:.85}47%{opacity:1}52%{opacity:.7}56%{opacity:1}}
.botanic{position:absolute;bottom:-10px;width:clamp(120px,32vw,190px);color:var(--gold-dark);opacity:.42;pointer-events:none}
.botanic-l{left:-18px;transform:rotate(-6deg)}
.botanic-r{right:-18px;transform:rotate(6deg)}
.botanic path{animation:sway 9s ease-in-out infinite;transform-origin:30px 300px}
.botanic-r path{animation-delay:-4s}
@keyframes sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(1.6deg)}}
.corner{position:absolute;width:44px;height:44px;color:var(--gold-dark);opacity:.7;pointer-events:none}
.corner-tl{left:6px;top:6px}.corner-tr{right:6px;top:6px;transform:scaleX(-1)}.corner-bl{left:6px;bottom:6px;transform:scaleY(-1)}.corner-br{right:6px;bottom:6px;transform:scale(-1)}
.hero>.logo,.hero>.tagline,.hero>.motto,.hero>.exp-card,.hero>.runes-line{position:relative;z-index:1}
.hero>.logo{view-transition-name:logo}

/* ---------- Llamado a la experiencia: sobrio, a la altura ---------- */
.exp-card{position:relative;display:block;width:min(360px,100%);margin:34px auto 0;padding:34px 18px 22px;text-decoration:none;text-align:center;border:0;outline:0;background:none;transition:transform .3s}
.exp-card::before{content:"";position:absolute;inset:-14% -22%;background:radial-gradient(55% 50% at 50% 46%,rgba(201,168,76,.16),rgba(10,9,0,0) 70%);pointer-events:none;z-index:-2}
.exp-bg{position:absolute;left:50%;top:50%;width:min(470px,138%);height:auto;transform:translate(-50%,-57%);z-index:-1;opacity:.6;pointer-events:none;animation:exp-bg-respira 9s ease-in-out infinite}
@keyframes exp-bg-respira{0%,100%{opacity:.5}50%{opacity:.72}}
.exp-card:hover{transform:translateY(-2px)}.exp-card:hover .exp-bg{opacity:1}
@media (max-width:480px){.exp-bg{width:142%}}
.exp-card>span{display:block}
/* compás pequeño con los badges del afiche; al tocar, gira en remolino y se fusiona */
.mini-compass{position:relative;display:block;width:150px;height:150px;margin:14px auto 30px;--orbit:1;--spin:0deg;transform:rotate(var(--spin))}
.mc-geo{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);opacity:.55;animation:ring-spin 60s linear infinite}
.mc-core{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;background:radial-gradient(circle,#F1DE9A,#C9A84C 55%,transparent 72%);opacity:.9;box-shadow:0 0 18px rgba(201,168,76,.6);animation:mc-breathe 3s ease-in-out infinite}
@keyframes mc-breathe{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.1);opacity:1}}
.mc-badge{position:absolute;width:40px;height:40px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#171208,#070500 70%);border:1px solid rgba(201,168,76,.55);box-shadow:0 0 10px rgba(0,0,0,.6);
  left:calc(50% + (var(--x) - 50%) * var(--orbit));top:calc(50% + (var(--y) - 50%) * var(--orbit));transform:translate(-50%,-50%) scale(1);transition:left .9s cubic-bezier(.7,0,.3,1),top .9s cubic-bezier(.7,0,.3,1)}
.mc-badge .fx-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;filter:blur(.5px);opacity:.9}
/* remolino: todo el compás gira acelerando, los badges caen en espiral al centro y se funden en luz */
.mini-compass.spin{animation:mc-spin 1.05s cubic-bezier(.55,0,.85,.3) forwards;--orbit:0}
.mini-compass.spin .mc-badge{transition:left .95s cubic-bezier(.6,0,.4,1),top .95s cubic-bezier(.6,0,.4,1);animation:mc-fuse .95s ease-in forwards}
@keyframes mc-fuse{70%{opacity:1;filter:brightness(1.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(.3);filter:brightness(3)}}
.mini-compass.spin .mc-core{animation:mc-burst .95s ease-in forwards}
@keyframes mc-burst{0%{transform:scale(1)}70%{transform:scale(1.6);box-shadow:0 0 30px rgba(201,168,76,.9)}100%{transform:scale(7);opacity:0;box-shadow:0 0 80px rgba(201,168,76,1)}}
@keyframes mc-spin{0%{transform:rotate(0deg)}100%{transform:rotate(900deg);filter:blur(1px)}}
/* nombres para que los badges viajen a los medallones grandes */
.mc-badge[data-el="Madera"]{view-transition-name:med-tierra}.mc-badge[data-el="Fuego"]{view-transition-name:med-fuego}.mc-badge[data-el="Tierra"]{view-transition-name:med-aire}
.mc-badge[data-el="Agua"]{view-transition-name:med-agua}.mc-badge[data-el="Metal"]{view-transition-name:med-mercurio}.mc-badge[data-el="Quintaesencia"]{view-transition-name:med-quintaesencia}
@media (prefers-reduced-motion:reduce){.mini-compass,.mc-badge,.mc-core,.mc-geo{animation:none!important}}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.exp-kicker{font-family:var(--font-body);font-size:max(9.5px,var(--fmin,0px));letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--cream-dim)}
.exp-title{font-family:var(--font-title);font-weight:500;font-size:clamp(16px,4.4vw,20px);letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;color:var(--gold);margin-top:0}
.exp-symbols{display:flex;justify-content:center;gap:12px;margin-top:4px}
.exp-symbols i{font-style:normal;font-size:17px;line-height:1;color:var(--gold-dark);animation:sym-glow 7.2s ease-in-out infinite}
.exp-symbols i:nth-child(2){animation-delay:1.2s}.exp-symbols i:nth-child(3){animation-delay:2.4s}.exp-symbols i:nth-child(4){animation-delay:3.6s}.exp-symbols i:nth-child(5){animation-delay:4.8s}.exp-symbols i:nth-child(6){animation-delay:6s}
@keyframes sym-glow{0%,25%,100%{color:var(--gold-dark);text-shadow:none}10%{color:var(--gold);text-shadow:0 0 12px rgba(201,168,76,.6)}}
.exp-sub{font-family:var(--font-dish);font-style:italic;font-size:14px;color:var(--cream-dim);margin-top:10px}
.exp-cta{display:inline-flex!important;align-items:center;gap:10px;margin-top:14px;padding:13px 26px;border:1px solid #E2C46A;border-radius:999px;
  background:linear-gradient(180deg,#E2C46A 0%,#C9A84C 55%,#A98A3C 100%);color:#1a1206;font-family:var(--font-body);font-size:max(11.5px,var(--fmin,0px));font-weight:600;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;position:relative;overflow:hidden;
  box-shadow:0 8px 24px rgba(201,168,76,.35),inset 0 1px 0 rgba(255,255,255,.35);animation:cta-glow 2.6s ease-in-out infinite;transition:transform .2s,box-shadow .2s}
.exp-cta::before{content:"→";order:2;font-size:15px;line-height:1;text-indent:0;animation:exp-arrow 1.4s ease-in-out infinite}
.exp-card:hover .exp-cta,.exp-card:active .exp-cta{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 32px rgba(201,168,76,.5),inset 0 1px 0 rgba(255,255,255,.4)}
@keyframes cta-glow{0%,100%{box-shadow:0 8px 24px rgba(201,168,76,.3),0 0 0 0 rgba(201,168,76,.45),inset 0 1px 0 rgba(255,255,255,.35)}60%{box-shadow:0 8px 28px rgba(201,168,76,.45),0 0 0 12px rgba(201,168,76,0),inset 0 1px 0 rgba(255,255,255,.35)}}
@keyframes exp-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.exp-hint{display:block;margin-top:9px;font-family:var(--font-dish);font-style:italic;font-size:13px;color:var(--cream-dim)}
.exp-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:cta-sheen 4s ease-in-out infinite;pointer-events:none}
@keyframes cta-sheen{0%,60%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.hero-glow,.botanic path,.exp-ring,.exp-symbols i,.exp-cta::after,.exp-bg{animation:none!important}}



/* ---------- símbolo dorado en la barra: directo a los rituales ---------- */
nav a.nav-rituales{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;color:#1a1206;border:1px solid #E2C46A;
  background:linear-gradient(180deg,#E2C46A 0%,#C9A84C 55%,#A98A3C 100%);box-shadow:0 0 14px rgba(201,168,76,.45),inset 0 1px 0 rgba(255,255,255,.35);animation:nr-glow 2.6s ease-in-out infinite}
nav a.nav-rituales:hover,nav a.nav-rituales:focus{color:#1a1206;background:linear-gradient(180deg,#F1DE9A,#C9A84C 60%,#A98A3C);border-color:#F1DE9A}
nav a.nav-rituales .nr-glyph{font-size:16px;line-height:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(10,9,0,.85);color:#FFF4CC;text-shadow:0 0 6px #FFF4CC,0 0 12px #C9A84C;animation:nr-spin 6s linear infinite}
nav a.nav-rituales .nr-lbl{font-weight:600}
@keyframes nr-glow{0%,100%{box-shadow:0 0 10px rgba(201,168,76,.35),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 22px rgba(201,168,76,.7),0 0 0 4px rgba(201,168,76,.12),inset 0 1px 0 rgba(255,255,255,.35)}}
@keyframes nr-spin{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){nav a.nav-rituales,nav a.nav-rituales .nr-glyph{animation:none!important}}

footer .f-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:16px}
/* Grupos y celebraciones en el pie de la carta (12-oct-2026, docs/GRUPOS.md) */
footer .f-grupos{max-width:460px;margin:0 auto 24px}
footer .f-grupos a{display:block;padding:14px 16px;border:1px solid var(--gold-subtle);font-family:var(--font-dish);font-size:16px;line-height:1.4;color:var(--cream-dim);text-decoration:none;transition:border-color .2s}
footer .f-grupos a:hover{border-color:var(--gold-dark)}
footer .f-grupos b{color:var(--gold);font-weight:600}
footer .f-links a{font-size:max(10px,var(--fmin,0px));letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
footer .f-links a:hover{color:var(--gold);border-color:var(--gold-dark)}


/* celulares: el fondo fijo obliga a repintar en cada scroll */
@media (max-width:700px){body{background-attachment:scroll}.logo [filter]{filter:none}}

/* runas bajo el logo (misma línea que en el inicio) */
.runes-line{font-family:'Noto Sans Runic',serif;font-size:13px;letter-spacing:.42em;text-indent:.42em;color:var(--gold-dark);opacity:.75;margin-top:10px}
/* celular: el logo un poco más pequeño */
@media (max-width:600px){.hero .logo{width:min(300px,74vw)}}

/* ---------- Platos con foto y ficha ampliada (Menú 1.0, 14-sep) ---------- */
.item.has-photo{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
@media (min-width:560px){.item.has-photo{grid-template-columns:128px 1fr;gap:18px}}
.item-photo{display:block;width:100%;aspect-ratio:4/3;padding:0;border:1px solid var(--gold-subtle);border-radius:6px;overflow:hidden;background:#0d0a04;cursor:zoom-in;
  box-shadow:0 6px 18px rgba(0,0,0,.45);transition:border-color .25s,transform .25s}
.item-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.02);transition:transform .5s ease}
.item-photo:hover{border-color:var(--gold-dark);transform:translateY(-1px)}
.item-photo:hover img{transform:scale(1.05)}
.item-main{min-width:0}
.item.has-photo .item-desc{max-width:none}
.item-more{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:0;border:0;background:none;cursor:pointer;color:var(--gold);
  font-family:var(--font-body);font-size:max(10px,var(--fmin,0px));font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.item-more::after{content:"";width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.item.open .item-more::after{transform:rotate(-135deg) translateY(-2px)}
.item-more:hover{color:#F1DE9A}
.item-detail{margin-top:12px;padding:14px 16px 12px;border:1px solid var(--gold-subtle);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);animation:detail-in .35s ease}
@keyframes detail-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.d-lema{font-family:var(--font-dish);font-style:italic;font-size:16px;color:var(--gold);margin-bottom:6px}
.d-concepto{font-size:13px;line-height:1.65;color:var(--cream)}
.d-cols{display:grid;grid-template-columns:1fr;gap:10px 18px;margin-top:12px}
@media (min-width:560px){.d-cols{grid-template-columns:1fr 1fr}}
.d-col small{display:block;font-size:max(9px,var(--fmin,0px));letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:4px}
.d-col ul{list-style:none;font-size:12.5px;color:var(--cream-dim)}
.d-col li{padding:2px 0 2px 12px;position:relative}
.d-col li::before{content:"◆";position:absolute;left:0;top:4px;font-size:6px;color:var(--gold-dark)}
.d-ideal{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.d-ideal span{font-size:max(9.5px,var(--fmin,0px));letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);border:1px solid var(--gold-subtle);border-radius:999px;padding:3px 10px}
.d-meta{font-family:var(--font-dish);font-style:italic;font-size:13px;color:var(--gold-dark);margin-top:10px}
@media (max-width:420px){.item.has-photo{grid-template-columns:1fr}.item-photo{max-width:100%;aspect-ratio:16/9}}

/* foto en grande */
.photo-dlg{border:1px solid var(--gold-dark);outline:1px solid rgba(201,168,76,.15);outline-offset:4px;background:#100c05;color:var(--cream);padding:0;max-width:min(92vw,820px);width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.7)}
.photo-dlg::backdrop{background:rgba(6,4,0,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.photo-dlg figure{margin:0}
.photo-dlg{max-height:94vh;max-height:94dvh;overflow:auto}
.photo-dlg img{display:block;width:100%;height:auto;max-height:min(70vh,660px);object-fit:contain;background:#0d0a04}
.photo-dlg figcaption{padding:12px 16px 14px;display:flex;flex-direction:column;gap:2px}
.photo-dlg figcaption b{font-family:var(--font-dish);font-weight:600;font-size:22px;color:var(--cream)}
.photo-dlg figcaption span{font-family:var(--font-dish);font-style:italic;font-size:15px;color:var(--gold)}
.pd-close{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(201,168,76,.5);background:rgba(10,9,0,.75);color:var(--cream);font-size:22px;line-height:1;cursor:pointer}
.pd-close:hover{background:var(--gold);color:var(--bg)}

/* ---------- preapertura: aviso y platos "Próximamente" (menu.json → disponible:false) ---------- */
.aviso-pre{margin:14px auto 4px;max-width:520px;padding:10px 16px;border:1px solid var(--gold-dark);text-align:center;font-family:var(--font-dish);font-style:italic;font-size:15px;color:var(--gold);background:linear-gradient(180deg,rgba(201,168,76,.06),transparent)}
.item.pronto .item-name,.item.pronto .item-desc,.item.pronto .elements{opacity:.5}
.item.pronto .item-price{color:var(--gold-dark);opacity:.6}
.item.pronto .item-photo{filter:grayscale(.6) brightness(.7)}
.item.pronto .item-note{color:var(--gold);border-color:var(--gold-dark);opacity:1}

.item-price.upd{font-family:var(--font-ui,inherit);font-size:max(10px,var(--fmin,0px));letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);opacity:.8}

/* maridaje (25-sep-2026): chips con el cóctel que acompaña cada plato y viceversa */
.marida{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.marida small{font-family:var(--font-body);font-size:max(9.5px,var(--fmin,0px));letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim);margin-right:2px}
.marida-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--gold-subtle);border-radius:999px;font-family:var(--font-dish);font-style:italic;font-size:13.5px;color:var(--gold);text-decoration:none;transition:border-color .2s,background .2s}
.marida-chip i{font-style:normal;font-size:12px;color:var(--gold-dark)}
.marida-chip:hover{border-color:var(--gold);background:rgba(201,168,76,.08)}
.d-marida p{font-family:var(--font-dish);font-style:italic;font-size:14.5px;color:var(--cream);margin:4px 0 0;line-height:1.5}

/* carta → domicilio (25-sep) */
.dom-cta{display:flex;flex-direction:column;align-items:center;gap:3px;width:min(360px,100%);margin:22px auto 0;padding:13px 18px;border:1px solid rgba(226,196,106,.6);border-radius:999px;background:linear-gradient(180deg,rgba(226,196,106,.16),rgba(226,196,106,.04));color:var(--gold);text-decoration:none;font:600 12px/1 'Montserrat',sans-serif;letter-spacing:.18em;text-transform:uppercase;transition:transform .25s,box-shadow .25s}
.dom-cta span{font:italic 14px/1.2 var(--font-dish);letter-spacing:0;text-transform:none;color:var(--cream-dim)}
.dom-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,168,76,.25)}

/* visor de fotos: la imagen aparece solo cuando cargó (antes se veía la anterior un instante) */
#photo-dlg img{opacity:0;transition:opacity .25s ease;background:#0d0a04;min-height:200px}#photo-dlg img.ok{opacity:1}

/* carta al grano (26-sep): intro corta, pista de scroll, Rituales después de los cócteles, sección Botellas */
.hero-intro{margin:14px auto 0;font-family:var(--font-dish);font-style:italic;font-size:clamp(16px,3.8vw,19px);color:var(--cream-dim)}
.hero-cue{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin:16px auto 0;text-decoration:none;color:var(--gold);font:600 max(10.5px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.24em;text-transform:uppercase}
.hero-cue i{width:12px;height:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);animation:cue-baja 1.6s ease-in-out infinite}
@keyframes cue-baja{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(6px) rotate(45deg);opacity:1}}
.hero .dom-cta{margin-top:18px}
.exp-card.inline{margin:34px auto 26px}
.bot-nota{font-family:var(--font-dish);font-style:italic;font-size:16px;color:var(--cream-dim);text-align:center;margin:0 0 16px}
.bot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.bot-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:960px){.bot-grid{grid-template-columns:repeat(4,1fr)}}
.botella{display:grid;justify-items:center;gap:6px;padding:18px 12px 16px;border:1px solid var(--gold-subtle);background:linear-gradient(180deg,rgba(226,196,106,.07),rgba(0,0,0,.25));text-decoration:none;color:var(--cream);text-align:center;transition:border-color .25s,transform .25s}
.botella:hover{border-color:rgba(226,196,106,.6);transform:translateY(-2px)}
.botella svg{width:30px;height:auto;color:var(--gold);opacity:.85}
.botella b{font-family:var(--font-title);font-weight:500;font-size:15px;line-height:1.25;letter-spacing:.03em;color:var(--cream)}
.botella span{font-size:12px;line-height:1.4;color:var(--cream-dim)}
.botella em{font-style:normal;font-family:var(--font-title);font-size:15px;color:var(--gold);margin-top:4px}
.botella.pronto{opacity:.55}
/* Licores (18-oct-2026, docs/BACKOFFICE.md → "Licores: botella, media y trago"): subgrupos por tipo y, en cada tarjeta y en la ficha, una línea
   por presentación con su precio (etiqueta en versalitas, puntos guía dorados y la cifra en Cinzel, alineada a la derecha) */
.lic-grupos{display:grid;gap:28px}
@media (min-width:960px){.lic-grupo .bot-grid{grid-template-columns:repeat(3,1fr)}}   /* tres líneas de precio por tarjeta: tres columnas bastan (con cuatro la cifra no cabía) */
.lic-grupo h3{display:flex;align-items:center;gap:14px;margin:0 0 12px;font:600 max(11px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark)}
.lic-grupo h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,168,76,.45),rgba(201,168,76,0))}
.bot-precios{list-style:none;margin:6px 0 0;padding:10px 0 0;width:100%;display:grid;gap:6px;border-top:1px solid var(--gold-subtle);text-align:left}
.bot-precios li{display:flex;align-items:baseline;gap:6px;min-width:0}
.botella .bot-precios span,.bot-precios span{font:500 max(11px,var(--fmin,0px))/1.2 "Montserrat",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim);white-space:nowrap}
.bot-precios i{flex:1 1 8px;min-width:8px;border-bottom:1px dotted rgba(201,168,76,.4);transform:translateY(-3px)}
.botella .bot-precios b,.bot-precios b{font-family:var(--font-title);font-weight:500;font-size:14px;line-height:1.2;letter-spacing:.02em;color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.botella .bot-precios li[data-p="botella"] b{font-size:15px}
.ficha-dlg .fd-precios{max-width:380px;margin:12px 0 2px;gap:8px}
.ficha-dlg .fd-precios span{font-size:12px}
.ficha-dlg .fd-precios b{font-size:17px}
.ficha-dlg .fd-precios[hidden]{display:none}
@media (max-width:380px){.bot-precios span{letter-spacing:.06em}.botella .bot-precios b{font-size:13px}}

html.js .hero .exp-card:not(.inline){display:none}

/* carta 26-sep: fotos grandes y recomendados en carrusel (Mauro: "que se antojen apenas entren") */
.reco-sec{padding-top:6px}
.reco-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin:0;scrollbar-width:none}
.reco-row::-webkit-scrollbar{display:none}
.reco-card{flex:0 0 min(300px,78vw);scroll-snap-align:start;display:block;text-decoration:none;color:var(--cream);border:1px solid var(--gold-subtle);background:linear-gradient(180deg,rgba(226,196,106,.06),rgba(0,0,0,.3));overflow:hidden;transition:transform .3s,border-color .3s}
.reco-card:hover{transform:translateY(-3px);border-color:var(--gold-dark)}
.reco-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#0d0a04}
.reco-t{display:grid;gap:3px;padding:12px 14px 14px}
.reco-t b{font-family:var(--font-dish);font-weight:600;font-size:20px;line-height:1.15;color:var(--cream)}
.reco-t em{font-family:var(--font-dish);font-style:italic;font-size:14px;color:var(--cream-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:700px){.reco-card{flex-basis:calc(33.333% - 10px)}}
.reco-wrap{position:relative}.reco-polvo{position:absolute;inset:-30px 0 0;width:100%;height:calc(100% + 30px);pointer-events:none;z-index:0}.reco-wrap .reco-row{position:relative;z-index:1;scroll-behavior:smooth}
.reco-t i{font-style:normal;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--gold);margin-top:2px}
/* ítems con foto: la foto manda (grande arriba), texto debajo */
.item.has-photo{display:grid;grid-template-columns:1fr;gap:10px;padding:18px 0 22px}
.item.has-photo .item-photo{width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--gold-subtle);background:#0d0a04;padding:0;cursor:zoom-in}
.item.has-photo .item-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.item.has-photo .item-photo:hover img{transform:scale(1.04)}
@media (min-width:760px){.item.has-photo{grid-template-columns:minmax(280px,42%) 1fr;gap:20px;align-items:start}.item.has-photo .item-photo{aspect-ratio:4/3}}
.item.has-photo .item-name{font-size:24px}
.item-desc{font-size:14px;max-width:none}
.botella .bot-foto{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;background:#0d0a04}.botella .bot-foto+.bot-sil{display:none}.botella:hover .bot-foto{filter:brightness(1.08)}

/* próximamente (26-sep, Mauro: "desde el cel la gente no entiende que no está disponible"): más opaco + cinta diagonal sobre la foto */
.item.pronto{opacity:.72}
.item.pronto .item-photo{position:relative;filter:grayscale(.75) brightness(.55)}
.item.pronto .item-name,.item.pronto .item-desc,.item.pronto .elements{opacity:.6}
.cinta-pronto{position:absolute;left:-40%;top:38%;width:180%;transform:rotate(-18deg);text-align:center;padding:7px 0;background:linear-gradient(90deg,rgba(226,196,106,0),#E2C46A 25%,#E2C46A 75%,rgba(226,196,106,0));color:#1a1206;font:700 max(11px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.32em;text-transform:uppercase;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none}
.item.has-photo .cinta-pronto{font-size:13px;padding:9px 0}
.item.pronto:not(.has-photo) .item-main{position:relative}
.botella{position:relative;overflow:hidden}.botella.pronto{opacity:.6}.botella.pronto .bot-foto{filter:grayscale(.75) brightness(.55)}
.botella .cinta-pronto{top:34%;font-size:max(10px,var(--fmin,0px))}

.reco-flecha{position:absolute;top:calc(50% - 40px);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(226,196,106,.7);background:rgba(10,9,0,.78);color:var(--gold);font:28px/1 Georgia,serif;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.5);transition:background .2s,transform .2s}
.reco-flecha:hover{background:rgba(226,196,106,.18);transform:scale(1.06)}.reco-flecha.izq{left:-8px}.reco-flecha.der{right:-8px}
@media (hover:hover) and (min-width:700px){.reco-flecha{display:flex}}
.reco-row.arrastrando{cursor:grabbing;scroll-behavior:auto;user-select:none}@media (hover:hover){.reco-row{cursor:grab}}
.reco-card img{-webkit-user-drag:none;user-select:none}

/* popup del producto */
.ficha-dlg{max-width:min(94vw,640px)}
.ficha-dlg .fd-foto{position:relative;overflow:hidden}.ficha-dlg .fd-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#0d0a04}
.ficha-dlg .fd-in{padding:16px 18px 20px}
.ficha-dlg .fd-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ficha-dlg h3{margin:0;font-family:var(--font-dish);font-weight:600;font-size:26px;line-height:1.15;color:var(--cream)}
.ficha-dlg .fd-top b{font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--gold);white-space:nowrap}
.ficha-dlg .fd-desc{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--cream-dim)}
.ficha-dlg .fd-elems{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ficha-dlg .fd-ficha{margin-top:14px}
.ficha-dlg .fd-ir{display:inline-block;margin-top:14px;color:var(--gold);text-decoration:none;font:600 max(10.5px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.2em;text-transform:uppercase}

/* fotos verticales (cócteles): foto a un lado a su proporción real, alternando derecha/izquierda */
.item.has-photo.vert{grid-template-columns:minmax(0,44%) 1fr;gap:14px;align-items:center}
.item.has-photo.vert .item-photo{aspect-ratio:3/4;border-radius:12px}
.item.has-photo.vert.der{grid-template-columns:1fr minmax(0,44%)}.item.has-photo.vert.der .item-photo{order:2}
@media (min-width:760px){.item.has-photo.vert{grid-template-columns:minmax(220px,34%) 1fr;gap:24px}.item.has-photo.vert.der{grid-template-columns:1fr minmax(220px,34%)}}
.marida-chip.off{opacity:.4;pointer-events:none;filter:grayscale(1)}
/* bebidas compactas (10-oct-2026): rejilla por subtipo; tarjeta horizontal con miniatura cuadrada a la izquierda y el texto al lado.
   1 columna en celular, 2 desde 560 px y, en pantallas anchas (≥ 1180 px), la rejilla sale de la columna de 660 px para dar 3 por fila. */
.beb-grupos{display:grid;gap:24px}
@media (min-width:1180px){.beb-grupos{--bw:min(1020px,calc(100vw - 200px));width:var(--bw);margin-left:calc((100% - var(--bw)) / 2)}}
.beb-grupo h3{display:flex;align-items:center;gap:14px;margin:0 0 10px;font:600 max(10.5px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark)}
.beb-grupo h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(201,168,76,.45),rgba(201,168,76,0))}
.beb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:560px){.beb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.beb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
.beb{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;min-height:44px;padding:11px 12px 11px 11px;border:1px solid var(--gold-subtle);border-radius:10px;overflow:hidden;
  text-decoration:none;color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,rgba(226,196,106,.07),rgba(0,0,0,.22) 55%);box-shadow:inset 0 1px 0 rgba(226,196,106,.07),inset 0 0 22px rgba(0,0,0,.28);
  transition:border-color .18s,background-color .18s,box-shadow .18s}
.beb::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .18s;
  background:linear-gradient(115deg,rgba(226,196,106,0) 35%,rgba(226,196,106,.09) 55%,rgba(226,196,106,0) 75%)}
.beb:hover,.beb:active{border-color:rgba(226,196,106,.55);background-color:rgba(201,168,76,.07);box-shadow:inset 0 1px 0 rgba(226,196,106,.14),inset 0 0 22px rgba(0,0,0,.22),0 8px 20px rgba(0,0,0,.35)}
.beb:hover::before,.beb:focus-visible::before{opacity:1}
.beb:focus-visible{outline:1px solid var(--gold);outline-offset:2px;background-color:rgba(201,168,76,.07)}
.beb-min{position:relative;display:grid;place-items:center;width:88px;height:88px;border:1px solid rgba(201,168,76,.5);border-radius:6px;overflow:hidden;color:var(--gold);
  background:radial-gradient(circle at 50% 36%,rgba(201,168,76,.16),rgba(10,9,0,.88) 72%);box-shadow:inset 0 0 0 3px rgba(10,9,0,.55)}
.beb-min>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.beb:hover .beb-min>img{transform:scale(1.05)}
.beb-min svg{width:40px;height:40px;opacity:.82}
.beb-min .beb-gl{font-style:normal;font-size:32px;line-height:1;opacity:.75}
.beb-min.sin::after{content:"";position:absolute;inset:6px;border:1px solid rgba(201,168,76,.14);border-radius:3px;pointer-events:none}
.beb-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.beb b{font-family:var(--font-dish);font-weight:600;font-size:18px;line-height:1.15}
.beb small{font:400 12px/1.4 var(--font-body);color:var(--cream-dim);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.beb-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:3px}
.beb em{font-style:normal;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.02em;color:var(--gold)}
.beb .chev{font-style:normal;font-family:var(--font-body);font-size:20px;line-height:1;color:var(--gold);opacity:.6;transition:transform .18s,opacity .18s}
.beb:hover .chev,.beb:focus-visible .chev{opacity:1;transform:translateX(3px)}
.beb.pronto{opacity:.6}.beb.pronto .beb-min>img,.beb.pronto .prod-img{filter:grayscale(.75) brightness(.55)}
.beb.pronto em{font-size:max(10.5px,var(--fmin,0px));letter-spacing:.18em;text-transform:uppercase}
@media (max-width:480px){.beb{gap:12px}.beb-min{width:72px;height:72px}.beb-min svg{width:34px;height:34px}.beb-min .beb-gl{font-size:27px}.beb b{font-size:17px}}
@media (prefers-reduced-motion:reduce){.beb,.beb::before,.beb .chev,.beb-min>img{transition:none}.beb:hover .chev,.beb:focus-visible .chev,.beb:hover .beb-min>img{transform:none}}

/* cócteles de autor compactos (26-sep): rejilla de tarjetas 3:4; el detalle está en el popup y la experiencia en Rituales */
.coc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.coc-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
.coc{position:relative;display:block;overflow:hidden;border:1px solid var(--gold-subtle);border-radius:12px;background:#0d0a04;text-decoration:none;color:var(--cream);aspect-ratio:3/4;transition:transform .3s,border-color .3s}
.coc:hover{transform:translateY(-3px);border-color:var(--gold-dark)}
.coc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.coc:hover img{transform:scale(1.04)}
.coc-sin{position:absolute;inset:0;display:grid;place-items:center;font-size:54px;color:var(--gold);opacity:.6}
.coc-t{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;background:linear-gradient(180deg,rgba(10,9,0,0),rgba(10,9,0,.88) 45%,rgba(10,9,0,.96));display:grid;gap:3px}
.coc-t b{font-family:var(--font-dish);font-weight:600;font-size:19px;line-height:1.15;color:var(--cream)}
.coc-t i{font-style:normal;font-size:max(10px,var(--fmin,0px));letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim)}
.coc-t em{font-style:normal;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--gold)}
.coc.pronto{opacity:.7}.coc.pronto img{filter:grayscale(.75) brightness(.55)}.coc .cinta-pronto{top:36%}
/* Rituales debajo de los cócteles, sin montarse sobre la rejilla */
.exp-card.inline{margin:64px auto 30px;isolation:isolate}.exp-card.inline .exp-bg{z-index:-1;top:52%}
/* secciones: en escritorio caben en dos filas, sin scroll lateral */
@media (min-width:700px){nav#nav{flex-wrap:wrap;overflow:visible;justify-content:center;row-gap:8px}}

/* ===== 27-sep: moverse por la carta sin scroll largo (Mauro: "menú vertical a la izquierda con figuritas flotantes") ===== */
html{scroll-behavior:smooth}
.section{scroll-margin-top:74px}
.hero-home{position:absolute;left:14px;top:12px;z-index:3;font:500 max(10.5px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);text-decoration:none;padding:8px 6px}
.hero-home:hover{color:var(--gold)}
nav a.nav-home{border-color:rgba(226,196,106,.55);color:var(--gold)}
.riel{position:fixed;left:0;top:50%;z-index:70;transform:translate(-110%,-50%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s;pointer-events:none}
.riel.visible{transform:translate(0,-50%);opacity:1;pointer-events:auto}
.riel-lista{display:grid;gap:7px;padding:10px 0 10px calc(10px + env(safe-area-inset-left))}
.riel-it{display:flex;align-items:center;gap:0;text-decoration:none;color:var(--gold);-webkit-tap-highlight-color:transparent}
.riel-ico{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(32,24,6,.96),rgba(10,9,0,.94) 70%);border:1px solid rgba(201,168,76,.42);box-shadow:0 4px 16px rgba(0,0,0,.5);transition:transform .25s,border-color .25s,background .25s,color .25s;animation:riel-flota 5.5s ease-in-out infinite}
.riel-it:nth-child(2n) .riel-ico{animation-delay:-1.8s}.riel-it:nth-child(3n) .riel-ico{animation-delay:-3.4s}
.riel-ico svg{width:22px;height:22px;display:block}
.riel-lbl{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;margin-left:-6px;padding:0;font:500 max(11px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);background:rgba(10,9,0,.9);border:1px solid rgba(201,168,76,.3);border-left:0;border-radius:0 999px 999px 0;transition:max-width .35s cubic-bezier(.2,.8,.2,1),opacity .3s,padding .35s}
.riel-it:hover .riel-lbl,.riel-it:focus-visible .riel-lbl,.riel.abierto .riel-lbl{max-width:230px;opacity:1;padding:9px 16px 9px 14px}
.riel-it:hover .riel-ico,.riel-it:focus-visible .riel-ico{transform:scale(1.1);border-color:#E2C46A}
.riel-it.on .riel-ico{background:linear-gradient(180deg,#F1DE9A,#C9A84C 60%,#A98A3C);color:#1a1206;border-color:#F1DE9A;box-shadow:0 0 18px rgba(226,196,106,.45)}
.riel-it.on .riel-lbl{color:var(--gold)}
@keyframes riel-flota{0%,100%{translate:0 0}50%{translate:0 -3px}}
.riel-asa,.riel-velo{display:none}
@media (max-width:899px){
  .riel{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-110%,0)}
  .riel.visible{transform:none}
  .riel-asa{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 11px 8px 8px;border:1px solid rgba(201,168,76,.5);border-left:0;border-radius:0 18px 18px 0;background:rgba(10,9,0,.92);color:var(--gold);box-shadow:0 6px 22px rgba(0,0,0,.55);font:inherit;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .riel-asa-ico svg{width:24px;height:24px;display:block}
  .riel-asa-t{font:600 8.5px/1 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .riel-lista{position:absolute;left:0;bottom:calc(100% + 8px);max-height:min(66vh,520px);overflow-y:auto;scrollbar-width:none;transform:translateX(-115%);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none}
  .riel-lista::-webkit-scrollbar{display:none}
  .riel.abierto .riel-lista{transform:none;opacity:1;pointer-events:auto}
  .riel.abierto .riel-velo{display:block;position:fixed;inset:-100vh -100vw;background:rgba(0,0,0,.45);z-index:-1}
  .riel-ico{animation:none}
}
@media (prefers-reduced-motion:reduce){.riel-ico{animation:none}html{scroll-behavior:auto}}
@media print{.riel,.sello-rit{display:none}}

/* sello flotante de Rituales: gemelo del de Consciencia, abajo a la izquierda */
.sello-rit{position:fixed;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;text-decoration:none;color:var(--gold);-webkit-tap-highlight-color:transparent}
.sr-box{position:relative;z-index:1;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(20,14,2,.96) 0%,rgba(10,9,0,.9) 70%);border:1px solid rgba(201,168,76,.5);box-shadow:0 6px 24px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.sello-rit:hover .sr-box,.sello-rit:focus-visible .sr-box{transform:scale(1.06);border-color:#E2C46A}
.sr-halo{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(226,196,106,.32) 0%,rgba(201,168,76,.1) 42%,transparent 70%);animation:sr-respira 4.2s ease-in-out infinite;pointer-events:none}
.sr-orb{position:absolute;inset:0;border-radius:50%;animation:sr-gira 14s linear infinite}
.sr-orb i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);transform:rotate(var(--a)) translateY(-22px)}
.sr-g{position:relative;font-size:24px;line-height:1;color:#FFF4CC;text-shadow:0 0 8px #FFF4CC,0 0 16px #C9A84C}
.sr-lbl{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;margin-left:-8px;padding:0;font-family:var(--font-dish);font-style:italic;font-size:15px;color:var(--cream);background:rgba(10,9,0,.86);border:1px solid rgba(201,168,76,.35);border-left:0;border-radius:0 999px 999px 0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .35s,padding .45s}
.sr-lbl b{display:block;font-family:var(--font-title);font-style:normal;font-weight:500;font-size:max(10px,var(--fmin,0px));letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1px}
.sello-rit:hover .sr-lbl,.sello-rit:focus-visible .sr-lbl,.sello-rit.abierto .sr-lbl{max-width:220px;opacity:1;padding:6px 16px 6px 18px}
@keyframes sr-respira{0%,100%{opacity:.5;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes sr-gira{to{transform:rotate(360deg)}}
@media (max-width:640px){.sr-box{width:52px;height:52px}.sr-orb i{transform:rotate(var(--a)) translateY(-19px)}.sr-g{font-size:21px}}
@media (prefers-reduced-motion:reduce){.sr-halo,.sr-orb{animation:none}}

/* Rituales compacta: puerta pequeña antes de la coctelería de autor */
.exp-card .exp-sub{display:none}
.exp-card.inline.compacta{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:18px;width:min(560px,100%);margin:34px auto 6px;padding:14px 20px 14px 14px;text-align:left;border:1px solid rgba(226,196,106,.38);border-radius:18px;background:linear-gradient(120deg,rgba(226,196,106,.1),rgba(10,9,0,.35) 45%,rgba(226,196,106,.07));overflow:hidden;isolation:isolate}
.exp-card.inline.compacta::before{inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,236,170,.13) 50%,transparent 65%);transform:translateX(-120%);animation:rit-brillo 5.5s ease-in-out infinite;z-index:0}
.exp-card.inline.compacta::after{content:"";position:absolute;left:0;top:100%;width:2px;height:2px;border-radius:50%;background:transparent;pointer-events:none;
  box-shadow:12vw -8px 0 0 rgba(255,236,170,.9),30vw -30px 0 .5px rgba(226,196,106,.8),48vw -14px 0 0 rgba(255,236,170,.7),66vw -40px 0 .5px rgba(226,196,106,.9),22vw -52px 0 0 rgba(255,244,204,.8),56vw -64px 0 0 rgba(226,196,106,.7),8vw -70px 0 .5px rgba(255,236,170,.6),40vw -84px 0 0 rgba(255,244,204,.75);animation:rit-polvo 7s linear infinite}
.exp-card.inline.compacta .exp-bg,.exp-card.inline.compacta .exp-symbols{display:none}
.exp-card.inline.compacta>span{position:relative;z-index:1}
.exp-card.inline.compacta .mini-compass{grid-row:1 / span 4;width:96px;height:96px;margin:4px}
.exp-card.inline.compacta .mc-badge{width:27px;height:27px}
.exp-card.inline.compacta .mc-core{width:18px;height:18px;margin:-9px}
.exp-card.inline.compacta .exp-title{font-size:clamp(15px,3.8vw,18px);letter-spacing:.12em;text-indent:0}
.exp-card.inline.compacta .exp-kicker{text-indent:0;letter-spacing:.26em;margin-top:3px}
.exp-card.inline.compacta .exp-sub{display:block;margin-top:6px;font-size:15px;line-height:1.3}
.exp-card.inline.compacta .exp-cta{margin-top:9px;padding:9px 18px;font-size:max(10.5px,var(--fmin,0px));justify-self:start}
@keyframes rit-brillo{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes rit-polvo{0%{transform:translateY(0);opacity:0}12%{opacity:1}100%{transform:translateY(-120px);opacity:0}}
@media (max-width:420px){.exp-card.inline.compacta{column-gap:12px;padding:12px 14px 12px 10px}.exp-card.inline.compacta .mini-compass{width:82px;height:82px}.exp-card.inline.compacta .mc-badge{width:23px;height:23px}}
@media (prefers-reduced-motion:reduce){.exp-card.inline.compacta::before,.exp-card.inline.compacta::after{animation:none}}
.exp-card.inline.compacta .exp-cta{white-space:nowrap}
@media (max-width:480px){.exp-card.inline.compacta .exp-cta{padding:9px 14px;font-size:max(9.5px,var(--fmin,0px));letter-spacing:.14em;gap:7px}.exp-card.inline.compacta .exp-title{letter-spacing:.08em}}

/* llegar a un plato por enlace: queda centrado y se enciende un momento */
.item,.coc,.beb,.botella{scroll-margin-top:150px}
.destino{animation:destino 2.8s ease-in-out 1;position:relative;z-index:1;border-radius:14px}
@keyframes destino{0%,100%{box-shadow:0 0 0 0 rgba(241,222,154,0),0 0 0 0 rgba(226,196,106,0)}35%,60%{box-shadow:0 0 0 1px rgba(241,222,154,.5),0 0 34px 2px rgba(226,196,106,.22)}}
@media (prefers-reduced-motion:reduce){.destino{animation:none;outline:2px solid rgba(241,222,154,.8);outline-offset:4px}}
/* el menú de secciones se monta sobre las fotos al bajar: fondo sólido con desenfoque en vez de un degradado transparente */
nav#nav{background:rgba(16,13,4,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 24px -14px rgba(0,0,0,.9);padding:10px 8px}
/* celular: el asa del riel va abajo, al lado del sello de Rituales, para no tapar el texto de los platos */
@media (max-width:899px){
  .riel{left:calc(74px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));transform:translateY(140%)}
  .riel.visible{transform:none}
  .riel-asa{width:52px;height:52px;padding:0;border-radius:50%;border:1px solid rgba(201,168,76,.5);justify-content:center;gap:0}
  .riel-asa-t{display:none}
  .riel-lista{left:-60px;bottom:calc(100% + 10px);padding-left:calc(10px + env(safe-area-inset-left))}
}

/* ficha emergente corta y que siempre se puede cerrar (28-sep, Mauro: "luego no tengo cómo cerrarlo… más pequeño") */
.ficha-dlg{max-width:min(92vw,460px);max-height:min(86vh,720px);max-height:min(86dvh,720px);overflow:hidden;border-radius:16px;outline-offset:3px}
.ficha-dlg[open]{display:flex;flex-direction:column}
.ficha-dlg .fd-foto{flex:0 0 auto}
.ficha-dlg .fd-foto img{aspect-ratio:16/10!important;max-height:34vh;max-height:34dvh;object-fit:cover}
.ficha-dlg .fd-in{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:none;padding:16px 18px 18px}
.ficha-dlg .pd-close{z-index:3;right:10px;top:10px;width:44px;height:44px;font-size:26px;background:rgba(10,9,0,.88);border-color:rgba(241,222,154,.7);box-shadow:0 4px 16px rgba(0,0,0,.6)}
.ficha-dlg h3{font-size:24px}
.ficha-dlg .fd-desc{font-size:15px}
.ficha-dlg [hidden]{display:none!important}
.fd-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ficha-dlg .fd-acc .fd-ir{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;margin:0;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid #E2C46A;background:linear-gradient(180deg,#E2C46A 0%,#C9A84C 55%,#A98A3C 100%);color:#1a1206;font:600 max(11px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.fd-cerrar{flex:0 0 auto;min-height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--gold-subtle);background:none;color:var(--gold);font:500 max(11px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.fd-acc .fd-ir[hidden]+.fd-cerrar{flex:1 1 auto}
/* sin foto, la X cae sobre la cabecera: se le guarda su espacio a la derecha para que nunca tape el nombre ni el precio (9-oct-2026) */
.ficha-dlg.sin-foto .fd-top{padding-right:44px;min-height:30px}
.ficha-dlg .fd-top{flex-wrap:wrap;row-gap:4px}
.ficha-dlg .fd-top h3{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
/* ficha deslizable (9-oct-2026): ‹ 2 de 4 › al pie de la ficha, siempre a la vista y a mano del pulgar; el dedo desliza en horizontal y la ficha sigue haciendo scroll vertical */
.ficha-dlg{touch-action:pan-y pinch-zoom}
.ficha-dlg .fd-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(201,168,76,.18);background:#0d0a04}
.fd-nav button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 0 3px;border-radius:50%;border:1px solid rgba(201,168,76,.35);background:none;color:var(--gold);font:400 26px/1 var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.fd-nav button:hover:not(:disabled),.fd-nav button:active:not(:disabled){background:rgba(201,168,76,.12);border-color:var(--gold)}
.fd-nav button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fd-nav button:disabled{opacity:.22;cursor:default}
.fd-pos{font:500 max(10.5px,var(--fmin,0px))/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark)}

/* riel: el nombre va al lado de la figurita, no montado encima */
.riel-it{gap:0}
.riel-lbl{margin-left:0;border:1px solid rgba(201,168,76,.3);border-radius:999px}
.riel-it:hover .riel-lbl,.riel-it:focus-visible .riel-lbl,.riel.abierto .riel-lbl{margin-left:8px;padding:10px 16px}
.riel-it.on .riel-lbl{border-color:rgba(241,222,154,.6)}
@media (max-width:899px){.riel.abierto .riel-velo{background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}

/* portada de la carta: Reservar mesa como acción principal */
.dom-cta.reservar{border-color:#E2C46A;background:linear-gradient(180deg,#E2C46A 0%,#C9A84C 55%,#A98A3C 100%);color:#1a1206;font-weight:600;box-shadow:0 8px 24px rgba(201,168,76,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.dom-cta.reservar span{color:rgba(26,18,6,.78)}
.dom-cta[hidden]{display:none}

/* ===== 28-sep (Mauro: "el ícono de Rituales compite con el del menú y le gana"): Rituales a la derecha, pequeño y calmado; el menú manda ===== */
.sello-rit{left:auto;right:calc(20px + env(safe-area-inset-right));bottom:calc(84px + env(safe-area-inset-bottom));flex-direction:row-reverse;z-index:79}
.sr-box{width:46px;height:46px;border-color:rgba(201,168,76,.38);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.sr-halo{display:none}
.sr-orb{animation-duration:46s;opacity:.55}
.sr-orb i{width:4px;height:4px;margin:-2px;box-shadow:none;transform:rotate(var(--a)) translateY(-17px)}
.sr-g{font-size:18px;color:var(--gold);text-shadow:none}
.sr-lbl{margin-left:0;margin-right:-8px;border-left:1px solid rgba(201,168,76,.35);border-right:0;border-radius:999px 0 0 999px}
.sello-rit:hover .sr-lbl,.sello-rit:focus-visible .sr-lbl,.sello-rit.abierto .sr-lbl{padding:6px 18px 6px 16px}
@media (max-width:640px){.sello-rit{right:calc(17px + env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom))}.sr-box{width:42px;height:42px}.sr-orb i{transform:rotate(var(--a)) translateY(-15px)}.sr-g{font-size:16px}}
/* el botón del menú de secciones: solo, abajo a la izquierda, dorado y con un latido suave para que se entienda que ahí se navega */
@media (max-width:899px){
  .riel{left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom))}
  .riel-asa{position:relative;width:58px;height:58px;border:1px solid #F1DE9A;background:linear-gradient(180deg,#F1DE9A,#C9A84C 60%,#A98A3C);color:#1a1206;box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 22px rgba(226,196,106,.35)}
  .riel-asa::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid #F1DE9A;opacity:0;animation:riel-late 3.6s ease-out infinite;pointer-events:none}
  .riel.abierto .riel-asa::after{animation:none}
  .riel-asa-ico svg{width:26px;height:26px}
  .riel-lista{left:0;padding-left:0}
}
@keyframes riel-late{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.55)}}
@media (prefers-reduced-motion:reduce){.riel-asa::after,.sr-orb{animation:none}}

/* ===== 28-sep (Mauro: "es difícil saber qué me lleva allá o me devuelve a la página de inicio"): un solo "Inicio", con casita; acciones de la portada en una fila ===== */
.hero-home{display:inline-flex;align-items:center;gap:7px;left:12px;top:12px;min-height:38px;padding:0 14px 0 11px;border:1px solid rgba(226,196,106,.5);border-radius:999px;background:rgba(10,9,0,.55);color:var(--gold);font:600 max(10.5px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.18em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-home:hover,.hero-home:focus-visible{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.hero-acc{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:20px auto 0}
.ha{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid rgba(226,196,106,.6);background:rgba(10,9,0,.4);color:var(--gold);text-decoration:none;font:600 max(11px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.18em;text-transform:uppercase;transition:transform .2s,box-shadow .2s}
.ha:hover{transform:translateY(-2px)}
.ha-oro{border-color:#E2C46A;background:linear-gradient(180deg,#E2C46A 0%,#C9A84C 55%,#A98A3C 100%);color:#1a1206;box-shadow:0 8px 24px rgba(201,168,76,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.ha[hidden]{display:none}
.hero-estado{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;font:400 12.5px/1.3 'Montserrat',sans-serif;color:var(--cream-dim)}
.hero-estado[hidden]{display:none}
.hero-estado i{width:8px;height:8px;border-radius:50%;background:#9C9280}
.hero-estado.abierto{color:var(--cream)}.hero-estado.abierto i{background:#7BD88F;box-shadow:0 0 8px rgba(123,216,143,.8)}
@media (max-width:420px){.ha{flex:1 1 auto;padding:0 16px;letter-spacing:.14em}}

/* 28-sep · celular: portada corta para que el primer plato se vea sin deslizar (la pauta llega aquí) y secciones con "Ver todo" */
.ver-mas{display:none}
@media (max-width:700px){
  .hero{padding:60px 0 14px}
  .hero .logo{width:min(270px,70vw);margin-bottom:0}
  .hero .runes-line,.hero-cue{display:none}
  .hero-acc{margin-top:20px;flex-wrap:nowrap;gap:8px;padding:0 4px}
  .hero-acc .ha{flex:0 1 auto;min-width:0;min-height:40px;padding:0 20px;font-size:max(10.5px,var(--fmin,0px));letter-spacing:.14em;white-space:nowrap;box-shadow:none}   /* el protagonista es el logo (Mauro, 28-sep): botones discretos, del ancho de su texto */
  .hero-estado{margin-top:10px}
  .section.plegada .item.resto{display:none}
  .section.plegada .ver-mas,.section.desplegada .ver-mas{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin:18px 0 4px;padding:0 18px;border:1px solid rgba(226,196,106,.55);border-radius:999px;background:rgba(226,196,106,.06);color:var(--gold);font:600 max(11px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
  .section.plegada .ver-mas span{opacity:.7;letter-spacing:.04em}
  .section.desplegada .ver-mas{margin-top:22px;border-color:var(--gold-dark);background:none}   /* abierta: el mismo botón dice "Cerrar" (9-oct) */
}

/* Reservar mesa "a nuestro modo" (Mauro, 28-sep: llamativo sin ser gigante): sello dorado con letra Cinzel, rombos a los lados,
   un anillo que respira y un destello que cruza cada tanto. Solo se animan opacidad y posición (liviano en celular). */
.hero-acc .ha-oro{position:relative;isolation:isolate;gap:10px;min-height:44px;padding:0 22px;font:600 12px/1 'Cinzel',Georgia,serif;letter-spacing:.2em;
  background:linear-gradient(180deg,#F1DE9A 0%,#E2C46A 38%,#C9A84C 70%,#A98A3C 100%);border-color:#F1DE9A;
  box-shadow:0 6px 18px rgba(201,168,76,.28),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(90,66,20,.35)}
.hero-acc .ha-oro i{font-style:normal;font-size:7px;opacity:.7;transform:translateY(-.5px)}
.hero-acc .ha-oro::before{content:"";position:absolute;inset:-6px;border-radius:999px;border:1px solid rgba(226,196,106,.7);z-index:-1;pointer-events:none;animation:ha-respira 3.4s ease-in-out infinite}
.ha-luz{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none}
.ha-luz::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-140%) skewX(-18deg);animation:ha-destello 5.5s ease-in-out 1.2s infinite}
.ha-t{position:relative}
@keyframes ha-respira{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.95;transform:scale(1.035)}}
@keyframes ha-destello{0%,62%{transform:translateX(-140%) skewX(-18deg)}88%,100%{transform:translateX(420%) skewX(-18deg)}}
@media (max-width:700px){.hero-acc .ha-oro{font-size:max(11.5px,var(--fmin,0px));padding:0 20px}}
@media (max-width:420px){.hero-acc .ha{padding:0 12px;letter-spacing:.06em}.hero-acc .ha-oro{padding:0 14px;letter-spacing:.08em}.hero-acc .ha-oro i{display:none}}   /* 20-oct-2026: con la letra mínima de 12 px, los dos botones caben en 360–390 px (sin los rombos de adorno) */
@media (prefers-reduced-motion:reduce){.hero-acc .ha-oro::before,.ha-luz::before{animation:none}.hero-acc .ha-oro::before{opacity:.6}}

/* compartir un plato (29-sep): discreto en la lista, claro en la ficha */
.item-share{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:0;border:0;background:none;cursor:pointer;color:var(--gold);opacity:.78;font:500 max(10.5px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.18em;text-transform:uppercase;min-height:28px;transition:opacity .2s,color .2s}
.item-more+.item-share{margin-left:22px}
.item-share:hover,.item-share:focus-visible{opacity:1;color:#F1DE9A}
/* compartir una sección (9-oct, Domingo de barril): el mismo botón, centrado bajo la cabecera, plegada o completa */
.section-head .sec-share{display:flex;width:max-content;margin:12px auto 0;justify-content:center}
.fd-comp{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--gold-subtle);background:none;color:var(--gold);font:500 max(11px,var(--fmin,0px))/1 'Montserrat',sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.fd-comp:hover,.fd-comp:focus-visible{border-color:var(--gold);color:#F1DE9A}
.fd-acc .fd-ir[hidden]~.fd-comp{flex:1 1 auto}
@media (max-width:520px){.fd-acc .fd-comp,.fd-acc .fd-cerrar{flex:1 1 0;padding:0 12px}.fd-acc .fd-ir{flex:1 1 100%}}
/* con la ficha o la foto abiertas, la carta de atrás no se mueve */
html:has(dialog[open]){overflow:hidden}dialog{overscroll-behavior:none}

html:has(dialog[open]) nav#nav{-webkit-backdrop-filter:none;backdrop-filter:none}   /* con un diálogo abierto, sin desenfoque atrás: en Chrome hace destellar la página al desplazar */

/* Mientras la franja de privacidad está a la vista, los sellos flotantes y el asa del riel suben para no quedar debajo (30-sep-2026) */
html:has(#alq-cons.on) :is(.sello-rit,.sello-con,.riel-asa,#sello-con){translate:0 -100px}
/* Llegada a una sección compartida (/carta/s/<id>, 20-oct-2026, auditoría P3): hasta que la persona desplace, sin asa del riel ni sello de Rituales
   (tapaban la primera tarjeta); en el celular, "Reservar para ese día" queda arriba, bajo la fecha del cartel (carta/index.html → irASeccion) */
html.llegada-seccion :is(.riel-asa,.sello-rit){opacity:0;visibility:hidden;pointer-events:none}
.riel-asa,.sello-rit{transition:opacity .3s,visibility .3s}
.cartel-carta .cc-acc.cc-acc-arriba{margin:6px 0 14px}
@media (prefers-reduced-motion:reduce){.riel-asa,.sello-rit{transition:none}}

/* ---------- Secciones por día (9-oct-2026, Domingo de barril) ----------
   .adelanto = los días que no toca: tarjeta plegada con cuándo sale, lema y nombres con precio. .de-hoy = el día que toca, completa y de primera. */
.adel-tag{display:inline-block;margin:0 auto 8px;padding:5px 14px;border:1px solid rgba(226,196,106,.55);border-radius:999px;background:rgba(226,196,106,.07);
  font:600 max(10px,var(--fmin,0px))/1.3 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.section.de-hoy .section-head .kicker,.section.adelanto .section-head .kicker{font-size:17px;color:var(--cream-dim)}
.section.adelanto .adel-in{position:relative;text-align:center;padding:22px 18px 18px;border:1px solid var(--gold-subtle);outline:1px solid rgba(201,168,76,.12);outline-offset:4px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(201,168,76,.09),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.section.adelanto .section-head{margin-bottom:12px}
/* Domingo de barril, arriba y a la vista (9-oct-2026): marco dorado fino con esquinas, etiqueta en Cinzel, título mayor y un brillo lento en el borde.
   El marco es .adel-in (plegado entre semana) o la propia .section.de-hoy (completa el domingo). */
.section.de-hoy{position:relative;margin-top:26px;padding:30px 18px 14px;border:1px solid rgba(201,168,76,.4);
  background:radial-gradient(120% 70% at 50% 0%,rgba(201,168,76,.1),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.section.de-hoy::before,.section.adelanto .adel-in::before,.section.de-hoy::after,.section.adelanto .adel-in::after{content:"";position:absolute;pointer-events:none}
/* esquinas: ocho trazos finos (dos por esquina), apenas por fuera del borde */
.section.de-hoy::before,.section.adelanto .adel-in::before{inset:-5px;
  --e:rgba(226,196,106,.95);
  background:
    linear-gradient(var(--e),var(--e)) left top/22px 1px no-repeat,linear-gradient(var(--e),var(--e)) left top/1px 22px no-repeat,
    linear-gradient(var(--e),var(--e)) right top/22px 1px no-repeat,linear-gradient(var(--e),var(--e)) right top/1px 22px no-repeat,
    linear-gradient(var(--e),var(--e)) left bottom/22px 1px no-repeat,linear-gradient(var(--e),var(--e)) left bottom/1px 22px no-repeat,
    linear-gradient(var(--e),var(--e)) right bottom/22px 1px no-repeat,linear-gradient(var(--e),var(--e)) right bottom/1px 22px no-repeat}
/* brillo dorado sutil y lento que respira en el borde */
.section.de-hoy::after,.section.adelanto .adel-in::after{inset:-1px;border:1px solid rgba(226,196,106,.9);opacity:.15;animation:dia-brillo 7s ease-in-out infinite}
@keyframes dia-brillo{0%,100%{opacity:.12;box-shadow:0 0 0 rgba(226,196,106,0)}50%{opacity:.85;box-shadow:0 0 18px rgba(226,196,106,.28),inset 0 0 14px rgba(226,196,106,.1)}}
.dia-et{display:block;margin:0 auto 6px;font:500 max(11px,var(--fmin,0px))/1.4 var(--font-title);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--gold)}
.section.de-hoy .section-head h2,.section.adelanto .section-head h2{font-size:clamp(27px,7.6vw,40px);margin:2px 0 12px;text-shadow:0 0 22px rgba(201,168,76,.28)}
.section.de-hoy .section-head .adel-tag,.section.adelanto .section-head .adel-tag{margin-bottom:0}
@media (max-width:420px){.dia-et{font-size:max(10px,var(--fmin,0px));letter-spacing:.22em;text-indent:.22em}.section.de-hoy{margin-inline:6px;padding-inline:14px}}
@media (prefers-reduced-motion:reduce){.section.de-hoy::after,.section.adelanto .adel-in::after{animation:none;opacity:.35}}
.adel-det summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid var(--gold-dark);border-radius:999px;cursor:pointer;
  font:600 max(11px,var(--fmin,0px))/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.adel-det summary::-webkit-details-marker{display:none}
.adel-det summary i{font-style:normal;font-size:9px;transition:transform .3s}
.adel-det[open] summary i{transform:rotate(45deg)}
.adel-det summary:hover{background:rgba(201,168,76,.08)}
.adel-cerrar{display:flex;align-items:center;justify-content:center;min-height:44px;margin:12px auto 0;padding:0 22px;border:1px solid var(--gold-dark);border-radius:999px;background:none;color:var(--gold);
  font:600 max(11px,var(--fmin,0px))/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.adel-cerrar:hover,.adel-cerrar:focus-visible{background:rgba(201,168,76,.08)}
@media (prefers-reduced-motion:reduce){.adel-det summary i{transition:none}}
.adel-blurb{font-size:12.5px;color:var(--cream-dim);max-width:460px;margin:14px auto 4px}
.adel-lista{list-style:none;margin:10px 0 0;padding:0;text-align:left}
.adel-lista li{padding:0;border-bottom:1px solid rgba(58,46,24,.55)}
.adel-lista li:last-child{border-bottom:none}
/* cada fila se ve tocable (9-oct-2026, Mauro: "la lista no invita a tocar"): fila entera es el botón, ≥ 48 px, chevron dorado al final,
   fondo dorado muy tenue al pasar o tocar y foco visible con teclado. Lo mismo en la portada (inicio.css → .barril-lista). */
.toca-pista{margin:14px 0 0;font:500 max(10px,var(--fmin,0px))/1.4 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark);text-align:left}
.adel-lista button{display:block;width:calc(100% + 16px);min-height:48px;margin:0 -8px;padding:11px 8px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color .15s}
.adel-lista .fila{display:flex;align-items:baseline;gap:10px}
.adel-lista .chev,.barril-lista .chev{flex:0 0 auto;align-self:center;font-style:normal;font-family:var(--font-body);font-size:22px;line-height:1;color:var(--gold);opacity:.75;transform:translateY(-1px);transition:transform .15s,opacity .15s}
.adel-lista button:hover,.adel-lista button:active{background:rgba(201,168,76,.07)}
.adel-lista button:hover .chev,.adel-lista button:focus-visible .chev{opacity:1;transform:translate(3px,-1px)}
.adel-lista button:focus-visible{outline:1px solid var(--gold);outline-offset:-1px;background:rgba(201,168,76,.07)}
@media (prefers-reduced-motion:reduce){.adel-lista button,.adel-lista .chev{transition:none}}
.adel-lista b{font-family:var(--font-dish);font-size:19px;font-weight:600;color:var(--cream);line-height:1.2}
.adel-lista em{font-style:normal;font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--gold);white-space:nowrap}
.adel-lista small{display:block;font-size:12.5px;font-weight:300;color:var(--cream-dim);margin-top:4px}
.adel-res{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;padding:0 22px;border-radius:999px;border:1px solid #E2C46A;
  background:linear-gradient(180deg,#E2C46A,#C9A84C 55%,#A98A3C);color:#1a1206;text-decoration:none;font:600 max(11px,var(--fmin,0px))/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase}

/* ---------- Carrusel de fotos de una sección por día (9-oct-2026, Domingo de barril) · src/ui/carrusel-barril.js ----------
   Lo usan la portada (#barril) y la carta (adelanto plegado y sección completa): foto a todo el ancho (alto = 62 % del ancho), máx. 720 px. */
.carr-hueco{display:block;width:100%;max-width:720px;margin-inline:auto}
.carr-hueco:empty{aspect-ratio:100/62;background:linear-gradient(180deg,rgba(201,168,76,.06),rgba(201,168,76,.02))}
.carr{position:relative;text-align:left}
.carr-pista{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  border:1px solid var(--gold-subtle);border-radius:3px;background:#0A0900;outline:none}
.carr-pista::-webkit-scrollbar{display:none}
.carr-pista:focus-visible{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,.35)}
.carr-foto{position:relative;flex:0 0 100%;aspect-ratio:100/62;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.carr-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%;user-select:none;-webkit-user-drag:none}
.carr-pie{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:34px 14px 11px;
  background:linear-gradient(180deg,transparent,rgba(10,9,0,.62) 42%,rgba(10,9,0,.9));pointer-events:none}
.carr-pie b{font-family:var(--font-title);font-weight:600;font-size:clamp(13px,3.9vw,17px);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.carr-pie em{font-style:normal;font-family:var(--font-body);font-weight:600;font-size:clamp(13px,3.6vw,15px);letter-spacing:.04em;color:#E2C46A;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.carr-nom{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;row-gap:3px;min-width:0}   /* nombre y porción (9-oct): si no caben, la porción baja */
.carr-gr{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--font-body);font-weight:500;font-size:max(clamp(10px,2.75vw,12px),var(--fmin,0px));letter-spacing:.03em;color:#E8DCC8;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.75)}
.carr-gr i{display:inline-block;width:1px;height:.95em;align-self:center;background:linear-gradient(180deg,transparent,#C9A84C 25%,#C9A84C 75%,transparent)}
.carr-puntos{display:flex;justify-content:center;gap:2px;margin-top:6px;height:26px}
.carr-puntos button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.carr-puntos button::before{content:"";width:7px;height:7px;border-radius:999px;border:1px solid var(--gold-dark);transition:width .3s,background .3s,border-color .3s}
.carr-puntos button[aria-current]::before{width:18px;background:var(--gold);border-color:var(--gold)}
.carr-flecha{display:none;position:absolute;top:calc(50% - 16px - 18px);width:36px;height:36px;border-radius:999px;border:1px solid rgba(226,196,106,.55);
  background:rgba(10,9,0,.6);color:var(--gold);font:400 24px/1 var(--font-body);cursor:pointer;place-items:center;padding:0 0 3px;opacity:0;transition:opacity .25s}
.carr-flecha.izq{left:10px}.carr-flecha.der{right:10px}
.carr-flecha:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){.carr-flecha{display:grid}.carr:hover .carr-flecha{opacity:1}}
.section.adelanto .carr-hueco{margin:2px auto 16px}
.section.de-hoy .carr-hueco{margin:0 auto 20px}
@media (max-width:600px){.section.adelanto .carr-hueco{width:auto;margin:2px -18px 14px}}

/* foto de producto flotante (10-oct-2026): recortes PNG/WebP con transparencia (`imageProducto`). La botella entera (contain) parada sobre
   fondo oscuro, halo dorado detrás, sombra de contacto elíptica y reflejo invertido tenue; se inclina unos grados con el puntero (--rx/--ry los
   pone carta/index.html) y sube 3 px al pasar. Las fotos JPEG de platos no usan nada de esto. */
.prod-esc{position:relative;display:block;overflow:hidden;perspective:520px;--pie:19%;
  background:radial-gradient(ellipse 80% 60% at 50% 45%,rgba(40,32,16,.9),rgba(10,9,0,.96) 75%)}
.prod-halo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 44%,rgba(226,196,106,.26),rgba(201,168,76,.08) 36%,rgba(201,168,76,0) 62%)}
.prod-sombra{position:absolute;left:24%;right:24%;bottom:calc(var(--pie) - 4%);height:8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.78),rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 72%);transition:transform .3s,opacity .3s}
.prod-flota{position:absolute;left:8%;right:8%;top:7%;bottom:var(--pie);transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--sube,0px));transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.prod-esc img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%;display:block;background:none}
.prod-img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(226,196,106,.10))}
.prod-refl{transform:scaleY(-1);transform-origin:50% 100%;opacity:.15;pointer-events:none;-webkit-mask-image:linear-gradient(to top,#000,rgba(0,0,0,0) 30%);mask-image:linear-gradient(to top,#000,rgba(0,0,0,0) 30%)}
.beb:hover .prod-esc,.beb:active .prod-esc,.beb:focus-visible .prod-esc,.botella:hover .prod-esc,.botella:active .prod-esc,.fd-foto.producto:hover .prod-esc{--sube:-3px}
.beb:hover .prod-sombra,.beb:active .prod-sombra,.botella:hover .prod-sombra,.fd-foto.producto:hover .prod-sombra{transform:scaleX(.86);opacity:.8}
.beb-min.producto{background:none}.beb-min.producto::after{display:none}.beb-min .prod-esc{position:absolute;inset:0}
.botella .prod-esc.bot-foto{width:100%;aspect-ratio:3/4;border-radius:6px;background:radial-gradient(ellipse 80% 60% at 50% 45%,rgba(40,32,16,.9),rgba(10,9,0,.96) 75%)}
.ficha-dlg .fd-foto.producto .prod-esc{height:min(40vh,360px);height:min(40dvh,360px);--pie:16%}
.ficha-dlg .fd-foto.producto .prod-esc img{aspect-ratio:auto!important;max-height:none;object-fit:contain;object-position:50% 100%;background:none}
.ficha-dlg .fd-foto.producto .prod-flota{left:12%;right:12%;top:8%}
.botella.pronto .prod-img{filter:grayscale(.75) brightness(.55)}
@media (prefers-reduced-motion:reduce){.prod-flota{transform:none!important;transition:none}.prod-sombra{transition:none}}

/* Ficha de producto en celular (11-oct-2026, Mauro: "que en móvil no se tenga que hacer scroll… mejor la imagen flotando sin recuadro, se vería más pro
   y ahorraría espacio"): la botella flota sobre el fondo de la ficha, sin caja propia, con un halo suave; el área de la foto baja de 40 a 28 % del alto
   y el texto se aprieta un punto para que nombre, precio, descripción y lo que lleva quepan sin desplazar en un teléfono corriente. */
.ficha-dlg .fd-foto.producto{overflow:visible;background:none}
.ficha-dlg .fd-foto.producto .prod-esc{height:min(28vh,250px);height:min(28dvh,250px);--pie:9%;background:none;overflow:visible}
.ficha-dlg .fd-foto.producto .prod-halo{background:radial-gradient(ellipse 46% 62% at 50% 52%,rgba(226,196,106,.22),rgba(201,168,76,.07) 45%,rgba(201,168,76,0) 72%)}
.ficha-dlg .fd-foto.producto .prod-flota{top:6%}
.ficha-dlg .fd-foto.producto .prod-refl{opacity:.1}
@media (max-width:700px){
  .ficha-dlg{max-height:min(92vh,760px);max-height:min(92dvh,760px)}
  .ficha-dlg .fd-in{padding:10px 16px 12px}
  .ficha-dlg h3{font-size:21px}
  .ficha-dlg .fd-top b{font-size:15px}
  .ficha-dlg .fd-desc{margin-top:5px;font-size:14px;line-height:1.45}
  .ficha-dlg .fd-elems{margin-top:8px}
  .ficha-dlg .fd-ficha{margin-top:10px}
  .ficha-dlg .fd-ficha>*{padding-top:10px!important;padding-bottom:10px!important}
  .ficha-dlg .fd-ficha .d-col{margin-bottom:6px}
  .fd-acc{margin-top:12px;gap:8px}
  .ficha-dlg .fd-acc .fd-ir,.fd-cerrar{min-height:44px}
  .ficha-dlg .fd-nav{padding-top:2px;padding-bottom:calc(2px + env(safe-area-inset-bottom,0px))}
}

/* Miniatura de producto en la lista de bebidas (11-oct-2026, Mauro: "en el celular se ven súper pequeñas a la izquierda, algo más fancy"):
   la botella recortada ya no va en un cuadrito de 72 px: flota vertical (3/4), sin marco, con su halo, bastante más grande. Las que no tienen
   foto de producto conservan su cuadro con el ícono. */
.beb-min.producto{width:96px;height:128px;border:0;border-radius:0;overflow:visible;background:none;align-self:center}
.beb-min.producto .prod-esc{overflow:visible;background:none;--pie:8%}
.beb-min.producto .prod-halo{background:radial-gradient(ellipse 60% 62% at 50% 50%,rgba(226,196,106,.24),rgba(201,168,76,.08) 46%,rgba(201,168,76,0) 74%)}
.beb-min.producto .prod-flota{left:4%;right:4%;top:3%}
.beb:has(.beb-min.producto){align-items:center;padding-top:8px;padding-bottom:8px}
@media (min-width:560px){.beb-min.producto{width:88px;height:118px}}

/* ---------- Cartel del Domingo de barril en la carta (10-oct-2026, Mauro: "ya se ve muy sencilla; entre más dinámica mejor; transmuta") ----------
   El cartel diagonal de la portada (src/ui/cartel-barril.css, enlazado ANTES de esta hoja) como VENTANA VIVA: chips que eligen la foto, pie del
   plato elegido, cuenta regresiva, aparición al llegar, humo y, el domingo, brillo en el filete. El marco dorado de la carta queda por fuera
   (.adel-in entre semana, la propia .section.de-hoy el domingo); en computador el bloque sale de la columna de 660 px hasta 960 px (dejando
   75 px a cada lado para el riel). JS en carta/index.html → cartelDia. */
.cartel-carta{position:relative;overflow:hidden;text-align:left;
  background:radial-gradient(130% 70% at 72% 0%,rgba(201,168,76,.16),transparent 60%),linear-gradient(180deg,rgba(24,20,9,.9),rgba(10,9,0,.85))}
.section.adelanto.barril-carta .adel-in{padding:0 0 18px}
.barril-carta .adel-det{margin-top:18px;padding:0 18px}
.section.de-hoy.barril-carta{padding-top:0}
.section.de-hoy.barril-carta > .cartel{margin:0 -18px 22px}
@media (max-width:420px){.section.de-hoy.barril-carta > .cartel{margin-inline:-14px}}
.cartel-carta h2{color:var(--cream)}
.cartel-carta .barril-tag{margin-bottom:8px}
.cartel-carta.es-hoy .barril-tag{background:linear-gradient(180deg,#E2C46A,#C9A84C 55%,#A98A3C);color:#1a1206;border-color:#E2C46A}
/* cuenta regresiva bajo la fecha: punto dorado (verde mientras el barril está abierto, como "Abierto ahora" de la portada) */
.cc-cuenta{display:flex;align-items:center;gap:9px;margin:0 0 14px;font:500 12px/1.45 var(--font-body);letter-spacing:.05em;color:var(--cream-dim);font-variant-numeric:tabular-nums}
.cc-cuenta[hidden]{display:none}
.cc-cuenta::before{content:"";flex:0 0 7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.16)}
.cc-cuenta.abierto{color:var(--cream)}
.cc-cuenta.abierto::before{background:#7BC67B;box-shadow:0 0 0 3px rgba(123,198,123,.18)}
/* chips: botones (no enlaces) que eligen el plato; el elegido, con borde claro y brillo; un segundo toque abre su ficha */
.cartel-carta .cartel-chips button{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);
  color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,box-shadow .2s}
.cartel-carta .cartel-chips button:hover,.cartel-carta .cartel-chips button:active{background:rgba(201,168,76,.13);border-color:var(--gold)}
.cartel-carta .cartel-chips button:hover .chev,.cartel-carta .cartel-chips button:focus-visible .chev,.cartel-carta .cartel-chips button[aria-pressed="true"] .chev{opacity:1;transform:translate(3px,-1px)}
.cartel-carta .cartel-chips button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cartel-carta .cartel-chips button[aria-pressed="true"]{border-color:#E2C46A;background:linear-gradient(180deg,rgba(226,196,106,.24),rgba(201,168,76,.1));box-shadow:inset 0 0 0 1px rgba(226,196,106,.6),0 4px 18px rgba(201,168,76,.2)}
.cartel-carta .cartel-chips button[aria-pressed="true"] b{color:#F1DE9A}
.cartel-carta .cartel-chips .chev{font-size:19px}
/* el pie: el del plato elegido (los de cada foto se esconden); nombre · gramaje · precio y "Ver el plato ›" (o "foto pronto") */
.cartel-carta .cf-sl .cf-pie{display:none}
.cartel-carta .cc-pie{z-index:3;flex-direction:column;align-items:stretch;gap:2px}
.cc-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.cc-acc-pie{justify-content:flex-start;align-items:center;gap:12px}
.cc-ver{min-height:32px;padding:0;border:0;background:none;color:var(--gold);font:600 max(10.5px,var(--fmin,0px))/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.cc-ver:hover,.cc-ver:focus-visible{color:#F1DE9A}
.cc-ver:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.cc-pronto{font:italic 400 14px/1 var(--font-dish);color:var(--cream-dim);text-shadow:0 1px 6px rgba(0,0,0,.85)}
.cc-pronto::before{content:"🜂";font-style:normal;font-size:12px;color:var(--gold);margin-right:6px}
/* Reservar y Compartir */
.cc-acc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:16px}
.cc-acc .adel-res{margin-top:0}
.cc-acc .item-share{margin:0}
/* el fundido corto al elegir un plato (cartel-barril.js → elegir) */
.cartel-carta .cartel-foto.rapido .cf-sl{transition-duration:.32s}
/* humo del barril: volutas lentas que suben desde el borde de abajo de la foto, por debajo del pie; solo con mouse */
.cc-humo{display:none}
@media (hover:hover){
  .cc-humo{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
  .cc-humo i{position:absolute;bottom:-70px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;filter:blur(16px);will-change:transform,opacity;
    background:radial-gradient(circle,rgba(232,220,200,.6),rgba(232,220,200,0) 68%);animation:cc-humo var(--d) linear var(--r) infinite}
  .cc-humo i:nth-child(1){--x:8%;--s:130px;--d:12s;--r:0s;--dx:26px}
  .cc-humo i:nth-child(2){--x:30%;--s:110px;--d:9.5s;--r:-3.5s;--dx:-18px}
  .cc-humo i:nth-child(3){--x:52%;--s:150px;--d:14s;--r:-8s;--dx:34px}
  .cc-humo i:nth-child(4){--x:70%;--s:100px;--d:11s;--r:-5.5s;--dx:-24px}
}
@keyframes cc-humo{0%{transform:translate(0,0) scale(.55);opacity:0}18%{opacity:.17}65%{opacity:.08}100%{transform:translate(var(--dx),-300px) scale(1.7);opacity:0}}
/* aparición al llegar (una vez; el JS solo pone cc-pre sin movimiento reducido): la foto entra desde el corte diagonal y "Al barril" sube */
@media (prefers-reduced-motion: no-preference){
  .cartel-carta.cc-pre .cartel-foto{clip-path:polygon(0 0,100% 0,100% 0,0 14%)}
  .cartel-carta.cc-pre .cartel-filete,.cartel-carta.cc-pre .cartel-l2{opacity:0}
  .cartel-carta.cc-pre .cartel-l2{transform:translateY(18px)}
}
.cartel-carta.cc-entra .cartel-foto{animation:cc-foto .7s cubic-bezier(.2,.7,.3,1) both}
.cartel-carta.cc-entra .cf-pista{animation:cc-desliza .7s cubic-bezier(.2,.7,.3,1) both}
.cartel-carta.cc-entra .cartel-filete{animation:cc-aparece .5s .2s ease-out both}
.cartel-carta.cc-entra .cartel-l2{animation:cc-sube .6s .1s cubic-bezier(.2,.7,.3,1) both}
@keyframes cc-foto{from{clip-path:polygon(0 0,100% 0,100% 0,0 14%)}}
@keyframes cc-desliza{from{transform:translateY(-6%)}}
@keyframes cc-aparece{from{opacity:0}}
@keyframes cc-sube{from{opacity:0;transform:translateY(18px)}}
/* el domingo: un brillo recorre el filete dorado cada 8 s (en el celular a lo ancho, en computador por la diagonal) */
.cartel-carta.es-hoy .cartel-filete:not(.tenue){background-image:linear-gradient(90deg,transparent 42%,#FFF4CC 50%,transparent 58%),linear-gradient(90deg,#A98A3C,#E2C46A 45%,#C9A84C);
  background-size:300% 100%,100% 100%;background-repeat:no-repeat;animation:cc-brillo 8s ease-in-out infinite}
@keyframes cc-brillo{0%{background-position:100% 0,0 0}20%,100%{background-position:0 0,0 0}}
/* computador: el bloque a 960 px; la fecha y la cuenta regresiva arriba del texto (no sobre la foto); el pie dentro de la foto */
@media (min-width:900px){
  .section.barril-carta{--cc-w:min(960px,calc(100vw - 150px));width:var(--cc-w);margin-left:calc((100% - var(--cc-w)) / 2)}
  .section.de-hoy.barril-carta > .item{max-width:calc(var(--maxw) - 36px);margin-inline:auto}
  .cartel-carta .barril-tag{position:static;align-self:flex-start;margin:0 0 8px}
  .cartel-carta .cc-cuenta{margin-bottom:16px}
  .cartel-carta .cf-puntos{top:12px}
  .cartel-carta .cartel-txt{min-height:520px;padding:28px 36px 26px 22px}
  .cartel-carta .cc-pie{left:0;right:auto;bottom:0;width:calc(var(--cf-w) * .74);padding:0 20px 18px;pointer-events:auto}
  .cartel-carta.cc-entra .cartel-foto{animation-name:cc-foto-ancho}
  .cartel-carta.cc-entra .cf-pista{animation-name:cc-desliza-ancho}
  .cartel-carta.es-hoy .cartel-filete:not(.tenue){background-image:linear-gradient(180deg,transparent 42%,#FFF4CC 50%,transparent 58%),linear-gradient(90deg,#A98A3C,#E2C46A 45%,#C9A84C);background-size:100% 300%,100% 100%;animation-name:cc-brillo-ancho}
}
@media (min-width:900px) and (prefers-reduced-motion: no-preference){.cartel-carta.cc-pre .cartel-foto{clip-path:polygon(0 0,28% 0,0 100%,0 100%)}}
@keyframes cc-foto-ancho{from{clip-path:polygon(0 0,28% 0,0 100%,0 100%)}}
@keyframes cc-desliza-ancho{from{transform:translateX(-8%)}}
@keyframes cc-brillo-ancho{0%{background-position:0 100%,0 0}20%,100%{background-position:0 0,0 0}}
@media (min-width:900px) and (max-width:1099px){.cartel-carta .cartel-chips button{gap:8px;padding:6px 8px 6px 13px}}
@media (min-width:1100px){.cartel-carta{--cf-w:44%}.cartel-carta .cartel-txt{padding-right:30px}}   /* la foto cede un poco: los platos van de a dos, como en la portada */
@media (max-width:600px){
  .cartel-carta .cartel-chips button{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}
}
/* movimiento reducido: ni humo, ni aparición, ni brillo (la rotación de fotos ya la apaga cartel-barril.js) */
@media (prefers-reduced-motion: reduce){
  .cc-humo{display:none!important}
  .cartel-carta .cartel-foto,.cartel-carta .cf-pista,.cartel-carta .cartel-filete,.cartel-carta .cartel-l2{animation:none!important}
  .cartel-carta .cartel-chips button,.cartel-carta .cartel-chips .chev,.cartel-carta .cartel-foto.rapido .cf-sl{transition:none}
}

/* Días de venta por producto (18-oct-2026, docs/BACKOFFICE.md → "Días de venta por producto"): etiqueta «Solo domingos» junto al nombre; los días
   que no le tocan, la tarjeta atenuada como «Próximamente» (sin cinta y con su precio) y en la ficha la línea con el próximo día */
.dias-tag{display:inline-block;align-self:flex-start;width:max-content;max-width:100%;margin:2px 0 0;padding:2px 8px;border:1px solid var(--gold-dark,rgba(201,168,76,.6));border-radius:999px;font:500 max(10.5px,var(--fmin,0px))/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);white-space:nowrap;vertical-align:middle}
.item-name .dias-tag{margin-left:8px}
.coc-t .dias-tag{background:rgba(10,9,0,.55)}
.botella .dias-tag{align-self:center}
.dias-linea{margin-top:6px;font:italic 400 15px/1.4 var(--font-dish);color:var(--gold)}
.ficha-dlg .fd-dias{margin:6px 0 0;font:500 13px/1.45 var(--font-body);letter-spacing:.02em;color:var(--gold)}
.ficha-dlg.sin-foto .fd-dias{padding-right:44px}   /* sin foto, la × de cerrar queda a la altura de esta línea */
.beb.fuera-dia,.botella.fuera-dia{opacity:.6}.coc.fuera-dia{opacity:.7}
.beb.fuera-dia .beb-min>img,.beb.fuera-dia .prod-img,.coc.fuera-dia img,.botella.fuera-dia .bot-foto,.botella.fuera-dia .prod-img{filter:grayscale(.75) brightness(.55)}
.item.fuera-dia{opacity:.72}.item.fuera-dia .item-photo{filter:grayscale(.75) brightness(.55)}
.item.fuera-dia .item-name,.item.fuera-dia .item-desc,.item.fuera-dia .elements{opacity:.6}