/* The Club Coffee & Bites — carta de autor (template 'theclub').
 *
 * Portada de la propuesta "Mostrador" de la muestra del Grupo Texas, con el
 * corte que pidio el local: la carta abre en el gris hueso del mostrador y a
 * partir de una banda (ajuste menu.dark_from_group de la marca) se va al negro
 * de la propuesta nocturna, pie incluido. Los tokens viven en :root y la zona
 * oscura solo los REDEFINE dentro de .tc-noct: una sola estructura, dos temas.
 *
 * Marca: ocre #bf5c29 y gris #424445 (Colores.txt del local), Monigue para el
 * display y Manrope para el texto.
 */

@font-face {
  font-family: 'Monigue';
  src: url('theclub/monigue.otf') format('opentype');
  font-display: swap;
}

:root {
  --tc-bg: #ECEBE8;
  --tc-tinta: #141414;
  --tc-suave: #6b6b6b;
  --tc-acento: #bf5c29;
  --tc-linea: #b9b6b1;
  --tc-regla: #141414;
  --tc-panel: #ffffff;
  --tc-borde: rgba(0, 0, 0, .12);
  --tc-cat: #bf5c29;
  --tc-chip-borde: #141414;
  --tc-chip-tx: #141414;
  --tc-chip-on-bg: #141414;
  --tc-chip-on-tx: #ECEBE8;
}

/* Segundo tiempo de la carta: mismos nombres de token, valores de la nocturna.
   Al vivir en la clase, todo lo que cuelgue dentro hereda el tema sin duplicar
   una sola regla de maquetado. */
.tc-noct {
  --tc-bg: #0C0C0C;
  --tc-tinta: #F4F2EF;
  --tc-suave: #8a867f;
  --tc-linea: #1d1d1d;
  --tc-regla: #2c2c2c;
  --tc-panel: #171717;
  --tc-borde: #2c2c2c;
  --tc-cat: #F4F2EF;
  background: var(--tc-bg);
  color: var(--tc-tinta);
  padding-top: 4px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--tc-bg);
  color: var(--tc-tinta);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sin overflow-x aqui: con el, el body se vuelve su propio contenedor de
     scroll y scrollTo/scrollY dejan de responder (la rueda sigue andando y
     engana). El recorte de las mascotas va en .menu-root. */
}

.disp {
  font-family: 'Monigue', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  text-transform: uppercase; line-height: .92; letter-spacing: .01em;
  font-weight: 400;
}

.menu-root {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  overflow: clip;
  background: #ECEBE8;
}

/* ---------- portada ---------- */
.tc-hero { padding: clamp(30px, 8vw, 48px) 22px 10px; text-align: center; }
.tc-logo { width: clamp(250px, 76%, 350px); height: auto; }
.tc-ubica {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--tc-suave);
}
/* El aviso de abierto/cerrado trae sus colores en linea (fondo oscuro
   translucido); sobre el gris hueso hay que devolverle contraste. */
.tc-hero .estado-local { background: rgba(0, 0, 0, .06) !important; border-color: rgba(0, 0, 0, .14) !important; }

/* ---------- promo ---------- */
.tc-promo {
  display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 14px;
  margin: 18px 22px 4px; border-radius: 16px; overflow: hidden;
  background: var(--tc-panel); border: 1px solid var(--tc-borde);
}
.tc-promo img { width: 108px; height: 92px; object-fit: cover; display: block; }
.tc-promo-tx { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 10px 0; }
.tc-promo-tx i {
  font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tc-acento);
}
.tc-promo-tx b { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.tc-promo-cta {
  align-self: flex-start; margin-top: 2px;
  font-size: 12.5px; font-weight: 800; color: var(--tc-acento); text-decoration: none;
}

/* ---------- barra de bandas ---------- */
.tc-barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: color-mix(in srgb, #ECEBE8 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tc-chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1;
  /* El ultimo chip se desvanece al borde: avisa que hay mas bandas. */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
  padding-right: 14px;
}
.tc-chips::-webkit-scrollbar { display: none; }
.tc-chip {
  flex: none; padding: 7px 14px; border: 1.5px solid var(--tc-chip-borde); border-radius: 999px;
  background: transparent; color: var(--tc-chip-tx); font-family: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tc-chip.is-on { background: var(--tc-chip-on-bg); border-color: var(--tc-chip-on-bg); color: var(--tc-chip-on-tx); }

/* ---------- bandas ---------- */
.tc-banda { position: relative; scroll-margin-top: 62px; }
/* La mascota asoma por el margen, como en el arte. Se limita por ANCHO Y ALTO:
   con un ancho unico, la pose de la gorra -- que es casi cuadrada -- salia de
   439px de alto y ocupaba media pantalla, mientras la del selfie, apaisada,
   quedaba en 222. Con los dos topes cada dibujo escala hasta el primero que
   toca, conserva su proporcion y todas tienen la misma presencia.
   Va en su color de marca y no en blanco: sobre el gris hueso el blanco casi no
   se distinguia. */
.tc-mascota {
  position: absolute; top: 240px; pointer-events: none; z-index: 0;
  width: auto; height: auto; max-width: 300px; max-height: 230px;
  opacity: .16;
}
.tc-noct .tc-mascota { opacity: .14; }
.tc-banda > :not(.tc-mascota) { position: relative; z-index: 1; }

.tc-cartel { padding: 30px 22px 8px; }
.tc-cartel h2 { font-size: 44px; color: var(--tc-cat); }
.tc-cartel.con-foto {
  padding: 0; margin: 30px 22px 8px; border-radius: 16px; overflow: hidden;
  position: relative; min-height: 118px; display: flex; align-items: flex-end;
}
.tc-cartel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Encuadre por banda: el recorte centrado deja fuera justo lo que identifica a
   estas dos fotos -- la taza de The Club vive en la franja de ARRIBA de la de
   cafeteria, y el vaso frio en el tercio superior de la de helados. Va por id
   de banda porque es una correccion de ESTAS fotos, no del maquetado. */
#grp-cafeteria .tc-cartel-foto { object-position: 50% 0%; }
#grp-helados .tc-cartel-foto { object-position: 50% 22%; }
.tc-cartel.con-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .62));
}
.tc-cartel.con-foto h2 {
  position: relative; z-index: 1; color: #fff; padding: 14px 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.tc-regla { height: 2px; background: var(--tc-regla); margin: 12px 22px 0; }
.tc-noct .tc-regla { height: 1px; }

/* ---------- secciones y filas ---------- */
/* position + z-index: la mascota de la banda es absoluta, y un elemento
   posicionado se pinta ENCIMA de los estaticos aunque tenga z-index 0. Sin esto
   el dibujo tapaba los nombres y las descripciones de las secciones que vienen
   debajo de su banda -- las secciones NO cuelgan de .tc-banda, asi que la regla
   de apilamiento de la banda no las alcanzaba. */
.tc-sec { padding: 16px 22px 6px; scroll-margin-top: 62px; position: relative; z-index: 1; }
.tc-sec-name { font-size: 19px; font-weight: 800; }
.tc-noct .tc-sec-name {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-acento);
}
/* Texto de la seccion: va bajo el titulo, no al lado. Le entra el parrafo
   completo que manda el local ("preparados con 3 huevos y acompanante a
   eleccion...") sin empujar nada fuera de pantalla. */
.tc-sec-nota {
  margin-top: 3px; max-width: 46ch;
  font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--tc-suave);
  text-transform: none; letter-spacing: 0;
}

.tc-fila-tap { display: flex; align-items: center; gap: 10px; padding: 7px 0; width: 100%; }
.tc-fila-tap.is-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tc-noct .tc-fila-tap { padding: 10px 0; border-bottom: 1px solid var(--tc-linea); }
.tc-noct .tc-fila:last-child .tc-fila-tap { border-bottom: 0; }

.tc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tc-txt b { font-weight: 600; font-size: 15.5px; }
.tc-noct .tc-txt { flex: 1; }
.tc-desc {
  font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--tc-suave);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.tc-addon { font-size: 12px; font-weight: 700; color: var(--tc-acento); }
.tc-etq {
  align-self: flex-start; margin-top: 2px; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--tc-acento) 14%, transparent); color: var(--tc-acento);
}
.tc-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.tc-noct .tc-foto { width: 56px; height: 56px; border-radius: 10px; }

.tc-guia {
  flex: 1; border-bottom: 1.5px dotted var(--tc-linea);
  transform: translateY(-3px); align-self: flex-end;
}
.tc-noct .tc-guia { border-bottom: 0; }

.tc-precio-uno, .tc-precio {
  font-weight: 800; font-size: 15.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end;
}
.tc-noct .tc-precio-uno, .tc-noct .tc-precio { font-size: 16.5px; }
.tc-bs { font-size: 11.5px; font-weight: 700; color: var(--tc-suave); }
/* Dos precios (personal / compartir): apilados, con su etiqueta debajo. */
.tc-dual { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.tc-dual .tc-precio:last-child { color: var(--tc-suave); }
.tc-precio small {
  font-size: 10px; font-weight: 700; color: var(--tc-suave);
  text-transform: uppercase; letter-spacing: .06em;
}
.tc-agotado { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--tc-suave); }

/* Boton de agregar al carrito (solo con delivery encendido): reusa el tamano y
   el peso del precio para que la fila no cambie de altura al activarse. */
.tc-add {
  font: inherit; font-weight: 800; color: inherit;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.tc-mas {
  display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--tc-acento); color: #fff; font-size: 12px; line-height: 1;
}

/* densidad compacta (ajuste del panel) */
/* Compacta aprieta la carta ENTERA, no solo la fila: mover el padding de 7px a
   4px no se nota en pantalla, que es tanto como no tener el ajuste. Tambien
   recorta el aire de secciones y carteles y guarda la descripcion -- quien pide
   ver mas platos de un vistazo no la necesita en la fila; sigue completa en la
   ficha del plato. */
.menu-root[data-density="compacta"] .tc-fila-tap { padding-top: 3px; padding-bottom: 3px; }
.menu-root[data-density="compacta"] .tc-noct .tc-fila-tap { padding-top: 5px; padding-bottom: 5px; }
.menu-root[data-density="compacta"] .tc-sec { padding-top: 9px; padding-bottom: 2px; }
.menu-root[data-density="compacta"] .tc-sec-nota { display: none; }
/* Solo en modo panel: en acordeon la descripcion ya la esconde Alpine, y taparla
   tambien desde aqui dejaba la fila abierta sin mostrar nada (x-show quita el
   display en linea al abrir, con lo que vuelve a mandar esta hoja). */
.menu-root[data-detalle="panel"][data-density="compacta"] .tc-desc { display: none; }
.menu-root[data-density="compacta"] .tc-cartel { padding-top: 18px; padding-bottom: 4px; }
.menu-root[data-density="compacta"] .tc-cartel.con-foto { margin-top: 18px; min-height: 92px; }

/* ---------- pie ---------- */
.tc-pie { padding: 34px 22px 46px; text-align: center; }
.tc-pie img { width: 150px; opacity: .9; }
.tc-pie-nombre { margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tc-wifi { display: flex; justify-content: center; padding-top: 26px; }
.tc-wifi-btn {
  display: block; width: 100%; max-width: 340px; min-height: 52px; padding: 15px 20px; border-radius: 4px;
  background: var(--tc-acento); color: #fff; text-decoration: none;
  font-size: 19px; font-weight: 800; letter-spacing: .02em;
}
.tc-wifi-btn:focus-visible { outline: 3px solid var(--tc-tinta); outline-offset: 3px; }
.tc-pie-linea { margin-top: 5px; font-size: 12.5px; color: var(--tc-suave); }
.tc-pie-links { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.tc-pie-links a { font-size: 12.5px; font-weight: 700; color: var(--tc-acento); text-decoration: none; }
.tc-grupo { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tc-grupo-pre { font-size: 10.5px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--tc-suave); }
.tc-grupo-logo { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: #171310; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.tc-pie .tc-grupo-logo img { width: 64px; height: auto; opacity: 1; }
.tc-grupo-nombre { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tc-pie-servimi { margin-top: 16px; font-size: 11.5px; color: var(--tc-suave); }
.tc-pie-servimi a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   Bottom-sheet de detalle (partial compartido)

   Los partials traen el markup, NO los estilos: cada plantilla los define en su
   hoja. Sin este bloque el panel se pinta EN EL FLUJO de la pagina (sin
   position:fixed queda al final del documento) y parece que "no abre".
   ============================================================ */
.dish-modal-backdrop {
  animation: dmFade .22s ease both;
  position: fixed; inset: 0; z-index: 70;
  /* Sin backdrop-filter (#530): el desenfoque deformaba la carta detras del
     panel y se recalculaba en cada cuadro de la animacion de apertura. */
  background: rgba(0, 0, 0, .72);
}
/* Panel siempre en el tema oscuro de la carta: la ficha es una capa sobre la
   pagina, no una parte del recorrido claro/oscuro. */
.dish-modal {
  animation: dmSlide .28s cubic-bezier(.2, .8, .3, 1) both;
  position: fixed; z-index: 71; left: 0; right: 0; bottom: 0;
  max-width: 460px; margin: 0 auto;
  background: #171717; color: #F4F2EF;
  border-radius: 16px 16px 0 0; border-top: 1px solid rgba(191, 92, 41, .3);
  max-height: 88dvh; overflow-y: auto;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom));
}
.dm-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; cursor: pointer; z-index: 2;
  border: 0; border-radius: 50%; background: rgba(12, 12, 12, .62); color: #F4F2EF;
}
.dm-photo {
  position: relative; width: 100%; aspect-ratio: 16/11; overflow: hidden;
  background: #0C0C0C; border-radius: 16px 16px 0 0;
}
.dm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-photo--vertical { aspect-ratio: 3 / 4; }
.dm-photo::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(to bottom, transparent, #171717); pointer-events: none;
}
/* Sin foto: el logo del local de marcador, como en las otras cartas. */
.dm-photo--none {
  display: grid; place-items: center; aspect-ratio: 16/7; min-height: 0;
  background: radial-gradient(80% 100% at 50% 0%, rgba(191, 92, 41, .2), #0C0C0C 72%);
}
/* El logo de la marca es el NEGRO (el que manda en la portada clara); sobre el
   fondo oscuro de la ficha hay que darlo vuelta o no se ve. Es un logotipo
   plano de un solo color, asi que invertirlo lo deja limpio en blanco. */
.dm-photo--none img {
  width: auto; height: auto; max-width: 52%; max-height: 64%; object-fit: contain;
  opacity: .92; filter: brightness(0) invert(1);
}
.dm-photo--none::after { content: none; }
.dm-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 22px 0; }
.dm-name {
  font-family: 'Monigue', 'Archivo Narrow', sans-serif; text-transform: uppercase;
  font-weight: 400; font-size: 30px; line-height: .96; color: #F4F2EF; padding-right: 34px;
}
.dm-desc { font-size: 13.5px; line-height: 1.62; color: rgba(244, 242, 239, .68); }
.dm-credit, .dish-credit { font-size: 12px; color: #8a867f; }
.dm-tags, .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-tags .tag, .tags .tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid rgba(191, 92, 41, .5); color: #d9773f;
}
.tags .tag svg { width: 12px; height: 12px; }
.dm-price {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 13px; border-top: 1px solid #2c2c2c;
  font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums;
}
.dm-variants { display: flex; flex-direction: column; gap: 8px; }
.dm-add, .dm-add--variant {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  background: #bf5c29; border: 0; color: #fff;
  font-family: inherit; font-weight: 700; font-size: 14px;
}
.dm-add:hover, .dm-add--variant:hover { background: #a84f22; }
.dm-stamp {
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  font-size: 13px; color: var(--tc-suave);
}
.note { padding: 10px 12px; border-radius: 8px; background: #0C0C0C; border-left: 3px solid #bf5c29; }
.note-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #d9773f; }
.note-text { margin-top: 3px; font-size: 12.5px; color: rgba(244, 242, 239, .8); }
.amounts { display: flex; flex-direction: column; align-items: flex-end; }
/* El numero del sheet vive DENTRO de .amt-ref: sin esta regla el precio de la
   ficha sale mas chico que en la fila de la carta, al reves de lo que
   corresponde en la pantalla donde el comensal decide. */
.dm-price .amt-ref {
  font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums;
  color: #fff; letter-spacing: -.01em;
}
.amt-ref { font-size: 11.5px; color: #8a867f; }

@keyframes dmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dmFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes dmSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes dmSlideOut { from { transform: translateY(0); } to { transform: translateY(100%); } }
.dish-modal-backdrop.closing { animation: dmFadeOut .23s ease both; }
.dish-modal.closing { animation: dmSlideOut .24s cubic-bezier(.4, 0, .7, 1) both; }

/* ============================================================
   Carrito de delivery (partial compartido; hoy apagado por producto)
   ============================================================ */
.cart-fab {
  position: fixed; z-index: 60;
  right: max(16px, calc(50vw - 260px + 16px)); bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px;
  border-radius: 999px; cursor: pointer;
  background: #bf5c29; border: 0; color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.cart-fab svg { width: 19px; height: 19px; }
.cart-fab-label { font-weight: 700; font-size: 12.5px; }
.cart-fab-count {
  min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 999px; background: #fff; color: #bf5c29; font-weight: 800; font-size: 11px;
}
.cart-modal {
  position: fixed; z-index: 71; left: 0; right: 0; bottom: 0;
  max-width: 520px; margin: 0 auto;
  background: #171717; color: #F4F2EF;
  border-radius: 16px 16px 0 0; border-top: 1px solid rgba(191, 92, 41, .3);
  max-height: 88dvh; overflow-y: auto;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
}
.cart-body { display: flex; flex-direction: column; gap: 12px; }
.cart-empty { padding: 22px 0; text-align: center; font-size: 13.5px; color: #8a867f; }
.cart-list { display: flex; flex-direction: column; gap: 9px; }
.cart-line { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid #2c2c2c; }
.cart-line-name { flex: 1; font-size: 13.5px; }
.cart-line-qty { display: flex; align-items: center; gap: 7px; }
.cart-line-qty button {
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  background: #0C0C0C; border: 1px solid #2c2c2c; color: #F4F2EF;
}
.cart-line-price { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.cart-line-del { background: none; border: 0; color: #8a867f; cursor: pointer; }
.cart-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid #2c2c2c;
  font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums;
}
.cart-form { display: flex; flex-direction: column; gap: 9px; }
.cart-field {
  width: 100%; padding: 11px 13px; border-radius: 9px;
  background: #0C0C0C; border: 1px solid #2c2c2c; color: #F4F2EF;
  font-family: inherit; font-size: 14px;
}
.cart-field:focus { outline: none; border-color: #bf5c29; }
.cart-submit {
  width: 100%; padding: 14px; border-radius: 10px; cursor: pointer;
  background: #bf5c29; border: 0; color: #fff;
  font-family: inherit; font-weight: 700; font-size: 15px;
}
.cart-submit:hover { background: #a84f22; }
.cart-errors { padding: 11px 13px; border-radius: 9px; background: rgba(191, 92, 41, .14); border: 1px solid #bf5c29; }
.cart-errors-title { font-weight: 800; font-size: 12.5px; color: #d9773f; }
.cart-errors ul { margin: 5px 0 0 16px; font-size: 12.5px; color: rgba(244, 242, 239, .8); }

/* Ancla del plato (#plato-ID): el banner que apunta a un plato aterriza aca, y
   sin este margen el plato queda debajo de la cabecera fija. Mismo
   desplazamiento que usa la seccion en esta carta. */
.tc-fila{ scroll-margin-top:62px; }

/* Acordeon: la descripcion crece y se recoge en lugar de aparecer de golpe.
   grid-template-rows 0fr->1fr anima a cualquier alto sin medir nada en JS, y
   al ser CSS puro el interruptor de animaciones del panel ya la apaga. */
.desc-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s ease; }
.desc-fold.is-open { grid-template-rows: 1fr; }
.desc-fold > * { overflow: hidden; min-height: 0; margin: 0; padding-top: 0;
  transition: padding-top .26s ease; }
.desc-fold.is-open > * { padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .desc-fold, .desc-fold > * { transition: none; } }
/* La descripcion se recorta a una linea en la fila normal; desplegada se lee entera. */
.desc-fold > .tc-desc { display: block; -webkit-line-clamp: unset; }