/* =============================================================================
   LA CARTA — lista de platos
   -----------------------------------------------------------------------------
   Sirve a dos sitios a la vez: el bloque [carrao_menu] de cualquier pagina y la
   plantilla de categoria de producto (taxonomy-product_cat.php). Por eso vive
   aqui y no dentro de un bloque: es un componente que renderiza PHP, no una
   seccion suelta. Se carga SOLO donde aparece.

   Ni un color literal: todo sale de tokens.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   0. PESTAÑAS DE CATEGORIA
   Se pegan bajo la cabecera del sitio. El desplazamiento lateral es
   deliberado: catorce categorias no caben en un telefono, y partirlas en dos
   filas esconde la mitad bajo el pliegue.
   -------------------------------------------------------------------------- */

.cc-menu-nav {
  position: sticky;
  top: var(--cc-header-h);
  z-index: 40;
  margin-bottom: var(--cc-space-8);
  background: color-mix(in srgb, var(--cc-bg) 96%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--cc-border-width) solid var(--cc-line);
  transition: box-shadow var(--cc-dur-fast) var(--cc-ease);
}

.cc-menu-nav.is-stuck { box-shadow: var(--cc-shadow); }

.cc-menu-nav__track {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.cc-menu-nav__track::-webkit-scrollbar { display: none; }

.cc-menu-nav__tab {
  flex-shrink: 0;
  scroll-snap-align: center;
  padding: 15px var(--cc-space-4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-label);
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cc-ink-soft);
  -webkit-appearance: none;
  appearance: none;
  transition:
    color var(--cc-dur-fast) var(--cc-ease),
    border-color var(--cc-dur-fast) var(--cc-ease);
}

.cc-menu-nav__tab:hover { color: var(--cc-ink); }

.cc-menu-nav__tab.is-active {
  color: var(--cc-accent);
  border-bottom-color: var(--cc-accent);
}

.cc-menu-cat[hidden] { display: none; }

.cc-menu-cat__link {
  margin: 0 0 var(--cc-space-6);
}

.cc-menu-cat__link a {
  font-family: var(--cc-font-body);
  font-size: 11px;
  letter-spacing: var(--cc-tracking-btn);
  text-transform: uppercase;
  color: var(--cc-brand);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cc-brand) 45%, transparent);
}

.cc-menu-cat__link a:hover { color: var(--cc-accent); }

/* -----------------------------------------------------------------------------
   1. CABECERA DE CATEGORIA
   -------------------------------------------------------------------------- */

.cc-menu-cat + .cc-menu-cat { margin-top: var(--cc-space-12); }

.cc-menu-cat__title {
  display: flex;
  align-items: center;
  gap: var(--cc-space-4);
  margin: 0 0 var(--cc-space-4);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* El filete que sale del titulo y recorre el ancho. Marca el arranque de cada
   categoria sin gastar un bloque de cabecera entero. */
.cc-menu-cat__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--cc-brand) 55%, transparent),
    var(--cc-line) 40%,
    transparent
  );
}

.cc-menu-cat__desc {
  max-width: 68ch;
  margin: 0 0 var(--cc-space-6);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--cc-ink-soft);
}

/* -----------------------------------------------------------------------------
   2. TIRA DE FOTOS REFERENCIALES
   Se llena sola con los productos de la categoria que tengan imagen.
   -------------------------------------------------------------------------- */

.cc-menu-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cc-space-2);
  margin-bottom: var(--cc-space-8);
}

/* Con una o dos fotos, la rejilla de tres dejaria huecos y las estiraria a
   pantalla completa. Se centran y se limitan a un ancho legible. */
.cc-menu-strip:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 32rem); justify-content: center; }
.cc-menu-strip:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cc-menu-strip__shot {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--cc-bg-alt);
}

.cc-menu-strip__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cc-dur) var(--cc-ease);
}

.cc-menu-strip__shot:hover img { transform: scale(1.04); }

.cc-menu-strip__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--cc-border-width) solid color-mix(in srgb, var(--cc-accent) 22%, transparent);
}

/* -----------------------------------------------------------------------------
   3. LA LISTA
   -------------------------------------------------------------------------- */

.cc-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-plato {
  padding: var(--cc-space-5) 0;
  border-bottom: var(--cc-border-width) solid var(--cc-line);
}

.cc-plato:first-child { border-top: var(--cc-border-width) solid var(--cc-line); }

/* -----------------------------------------------------------------------------
   4. LINEA DE NOMBRE Y PRECIO
   El filete de puntos es un elemento flexible entre los dos: se estira hasta
   llenar el hueco, asi que funciona con nombres de cualquier largo y no se
   descuadra cuando el precio cambia de cifras.
   -------------------------------------------------------------------------- */

.cc-plato__head {
  display: flex;
  align-items: baseline;
  gap: var(--cc-space-3);
  margin: 0 0 6px;
}

.cc-plato__name {
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.25;
}

.cc-plato__name a {
  color: var(--cc-ink);
  text-decoration: none;
  transition: color var(--cc-dur-fast) var(--cc-ease);
}

.cc-plato__name a:hover,
.cc-plato__name a:focus-visible { color: var(--cc-accent); }

.cc-plato__leader {
  flex: 1 1 auto;
  min-width: var(--cc-space-5);
  height: 1px;
  transform: translateY(-3px);
  border-bottom: 1px dotted color-mix(in srgb, var(--cc-ink) 32%, transparent);
}

.cc-plato__price,
.cc-plato__price .woocommerce-Price-amount {
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  color: var(--cc-accent);
}

.cc-plato__price del { opacity: 0.5; font-size: 0.85em; }
.cc-plato__price ins { text-decoration: none; }

/* -----------------------------------------------------------------------------
   5. DESCRIPCION
   -------------------------------------------------------------------------- */

.cc-plato__desc {
  max-width: 78ch;
  margin: 0 0 var(--cc-space-3);
  font-size: 14px;
  line-height: 1.65;
  color: var(--cc-ink-soft);
}

/* -----------------------------------------------------------------------------
   6. BOTON PEDIR
   -------------------------------------------------------------------------- */

.cc-plato__add {
  display: inline-flex;
  align-items: center;
  padding: 8px var(--cc-space-5);
  background: var(--cc-brand);
  color: var(--cc-ink-inverse);
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-label);
  font-size: 11px;
  letter-spacing: var(--cc-tracking-btn);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--cc-dur-fast) var(--cc-ease),
    transform var(--cc-dur-fast) var(--cc-ease),
    box-shadow var(--cc-dur-fast) var(--cc-ease);
}

.cc-plato__add:hover,
.cc-plato__add:focus-visible {
  background: var(--cc-accent);
  color: var(--cc-ink-inverse);
  transform: translateY(-2px);
  box-shadow: var(--cc-glow-fire);
}

/* Estados que pinta el carrito AJAX de WooCommerce. Sin esto el boton se queda
   igual tras pulsarlo y el cliente pide dos veces. */
.cc-plato__add.loading { opacity: 0.6; pointer-events: none; }
.cc-plato__add.added { background: var(--cc-accent); }

.cc-plato .added_to_cart {
  display: inline-flex;
  align-items: center;
  margin-left: var(--cc-space-3);
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-label);
  font-size: 10px;
  letter-spacing: var(--cc-tracking-btn);
  text-transform: uppercase;
  color: var(--cc-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.cc-plato__out {
  font-family: var(--cc-font-body);
  font-size: 11px;
  letter-spacing: var(--cc-tracking-btn);
  text-transform: uppercase;
  color: var(--cc-ink-soft);
}

/* -----------------------------------------------------------------------------
   6b. PLATO AGOTADO
   Se apaga, no se esconde: que el cliente vea que el plato existe y que hoy no
   hay evita la pregunta al mesero y le dice que vuelva otro dia. El precio se
   mantiene visible por la misma razon.
   -------------------------------------------------------------------------- */

.cc-plato--out .cc-plato__name a,
.cc-plato--out .cc-plato__price,
.cc-plato--out .cc-plato__desc { opacity: 0.45; }

.cc-plato--out .cc-plato__name a { pointer-events: none; }

.cc-plato__badge {
  display: inline-block;
  margin-left: var(--cc-space-3);
  padding: 2px var(--cc-space-2);
  border: var(--cc-border-width) solid var(--cc-line);
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-label);
  font-size: 9.5px;
  letter-spacing: var(--cc-tracking-tag);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cc-ink-soft);
  vertical-align: middle;
}

/* -----------------------------------------------------------------------------
   7. DOS COLUMNAS EN PANTALLA ANCHA
   Una carta de 20 platos en una sola columna obliga a un scroll larguisimo. A
   partir de lg se reparte en dos, que es como se lee una carta abierta.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .cc-menu-list {
    columns: 2;
    column-gap: var(--cc-space-10);
  }

  .cc-plato {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

  /* Con columnas, el borde superior del primero solo vale para la columna
     izquierda: se quita y cada plato lleva el suyo abajo. */
  .cc-plato:first-child { border-top: 0; }
}

/* -----------------------------------------------------------------------------
   8. CABECERA DE LA PAGINA DE CATEGORIA
   -------------------------------------------------------------------------- */

.cc-cat-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--cc-section-y);
  text-align: center;
  border-bottom: var(--cc-border-width) solid var(--cc-line);
  /* Sin foto: el mismo resplandor de brasa del hero del menu completo. */
  background:
    radial-gradient(ellipse 70% 80% at 50% 115%,
      color-mix(in srgb, var(--cc-brand) 20%, transparent) 0%,
      transparent 62%),
    var(--cc-bg-alt);
}

/* Con foto de categoria: la imagen manda y el texto se apoya en el velo. */
.cc-cat-hero--media {
  min-height: 42vh;
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.cc-cat-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.34);
}

.cc-cat-hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 115%,
      color-mix(in srgb, var(--cc-brand) 26%, transparent) 0%,
      transparent 60%),
    linear-gradient(to top,
      color-mix(in srgb, var(--cc-c-char) 88%, transparent) 0%,
      color-mix(in srgb, var(--cc-c-char) 40%, transparent) 60%,
      color-mix(in srgb, var(--cc-c-char) 60%, transparent) 100%);
}

.cc-cat-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.cc-cat-hero__crumbs {
  margin: 0 0 var(--cc-space-4);
  font-family: var(--cc-font-body);
  font-size: 11px;
  letter-spacing: var(--cc-tracking-tag);
  text-transform: uppercase;
  color: var(--cc-ink-soft);
}

.cc-cat-hero__crumbs a {
  color: var(--cc-brand);
  text-decoration: none;
}

.cc-cat-hero__crumbs a:hover { color: var(--cc-accent); }

.cc-cat-hero__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-cat-hero__desc {
  max-width: 62ch;
  margin: var(--cc-space-4) auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cc-ink-soft);
}

/* Subcategorias, como Arepas y Cachapas dentro de Antojos. */
.cc-cat-subs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cc-space-3);
  margin-top: var(--cc-space-6);
}

.cc-cat-subs a {
  padding: 9px var(--cc-space-5);
  border: var(--cc-border-width) solid var(--cc-line);
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-label);
  font-size: 11px;
  letter-spacing: var(--cc-tracking-btn);
  text-transform: uppercase;
  color: var(--cc-ink);
  text-decoration: none;
  transition:
    border-color var(--cc-dur-fast) var(--cc-ease),
    color var(--cc-dur-fast) var(--cc-ease);
}

.cc-cat-subs a:hover,
.cc-cat-subs a:focus-visible {
  border-color: var(--cc-brand);
  color: var(--cc-brand);
}

/* -----------------------------------------------------------------------------
   9. PIE DE LA PAGINA DE CATEGORIA
   -------------------------------------------------------------------------- */

.cc-cat-foot {
  padding-block: var(--cc-section-y);
  border-top: var(--cc-border-width) solid var(--cc-line);
}

.cc-cat-foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--cc-space-5);
}

.cc-cat-foot__text {
  margin: 0;
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--cc-ink);
}

.cc-cat-foot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-3);
}

.cc-cat-foot__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cc-space-3) var(--cc-space-6);
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-label);
  font-size: 12px;
  letter-spacing: var(--cc-tracking-btn);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--cc-dur-fast) var(--cc-ease),
    border-color var(--cc-dur-fast) var(--cc-ease),
    color var(--cc-dur-fast) var(--cc-ease),
    transform var(--cc-dur-fast) var(--cc-ease);
}

.cc-cat-foot__btn--fire {
  background: var(--cc-brand);
  border: none;
  color: var(--cc-ink-inverse);
}

.cc-cat-foot__btn--fire:hover {
  background: var(--cc-accent);
  color: var(--cc-ink-inverse);
  transform: translateY(-2px);
}

.cc-cat-foot__btn--ghost {
  background: transparent;
  border: var(--cc-border-width) solid var(--cc-line);
  color: var(--cc-ink);
}

.cc-cat-foot__btn--ghost:hover {
  border-color: var(--cc-brand);
  color: var(--cc-brand);
  transform: translateY(-2px);
}

.cc-menu-empty {
  padding: var(--cc-space-9);
  border: var(--cc-border-width) dashed var(--cc-line);
  text-align: center;
  color: var(--cc-ink-soft);
}

/* -----------------------------------------------------------------------------
   10. BARRA DE PEDIDO
   Aparece abajo en cuanto hay algo en el carrito. Es la pieza que convierte
   una carta en un pedido: sin ella, quien añade cuatro platos no tiene ninguna
   señal de que el pedido existe.
   -------------------------------------------------------------------------- */

.cc-orderbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  transform: translateY(110%);
  visibility: hidden;
  padding: var(--cc-space-3) var(--cc-gutter);
  padding-bottom: calc(var(--cc-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--cc-surface);
  border-top: 2px solid var(--cc-brand);
  box-shadow: var(--cc-shadow-lg);
  transition:
    transform var(--cc-dur-fast) var(--cc-ease),
    visibility var(--cc-dur-fast) var(--cc-ease);
}

.cc-orderbar.is-on {
  transform: translateY(0);
  visibility: visible;
}

.cc-orderbar.is-bump { animation: cc-orderbar-bump 420ms var(--cc-ease); }

@keyframes cc-orderbar-bump {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-orderbar { transition: none; }
  .cc-orderbar.is-bump { animation: none; }
}

.cc-orderbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-4);
  max-width: var(--cc-container);
  margin-inline: auto;
}

.cc-orderbar__count {
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-label);
  font-size: 11px;
  letter-spacing: var(--cc-tracking-tag);
  text-transform: uppercase;
  color: var(--cc-brand);
}

.cc-orderbar__total {
  display: block;
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cc-ink);
}

.cc-orderbar__total .woocommerce-Price-amount { color: inherit; }

.cc-orderbar__actions {
  display: flex;
  gap: var(--cc-space-2);
}

.cc-orderbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--cc-space-3) var(--cc-space-6);
  font-family: var(--cc-font-body);
  font-weight: var(--cc-weight-label);
  font-size: 12px;
  letter-spacing: var(--cc-tracking-btn);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--cc-dur-fast) var(--cc-ease),
    border-color var(--cc-dur-fast) var(--cc-ease),
    color var(--cc-dur-fast) var(--cc-ease);
}

.cc-orderbar__btn--fire {
  background: var(--cc-brand);
  border: none;
  color: var(--cc-ink-inverse);
}

.cc-orderbar__btn--fire:hover {
  background: var(--cc-accent);
  color: var(--cc-ink-inverse);
}

.cc-orderbar__btn--ghost {
  background: transparent;
  border: var(--cc-border-width) solid var(--cc-line);
  color: var(--cc-ink);
}

.cc-orderbar__btn--ghost:hover {
  border-color: var(--cc-brand);
  color: var(--cc-brand);
}

@media (max-width: 560px) {
  .cc-orderbar__btn--ghost { display: none; }
  .cc-orderbar__btn { flex: 1; }
  .cc-orderbar__actions { flex: 1; }
}

/* La barra tapa el final de la pagina mientras esta visible. */
body:has(.cc-orderbar.is-on) { padding-bottom: 5.5rem; }