/* ── Food Service Engine — Public CSS ─────────────────────────────────────────
   Paleta: carbón, rojo horno, ámbar dorado, crema
   ─────────────────────────────────────────────────────────────────────────── */

/* Este stylesheet solo se carga en las 4 páginas del plugin (home, menú,
   checkout, cuenta — ver FSE_Public::is_fse_page()), así que no hace falta
   más scoping: el footer del tema (viajealonatural.com) no pertenece a la
   identidad de marca del restaurante y se oculta en todas ellas. */
#colophon { display: none !important; }

:root {
  /* ── Paleta "premium gastronómico" ─────────────────────────────────────────
     Un solo color de acción (rojo vino) en toda la app; el dorado es de
     soporte (bordes activos, íconos, estados seleccionados), nunca un botón
     principal. Ver la nota de cada componente para el porqué de cada uso. */
  --fse-carbon:   #1c1c1c;  /* Carbón — fondo oscuro / texto sobre fondo claro */
  --fse-smoke:    #2b2b2b;  /* Carbón, un tono más claro — superficies oscuras secundarias */
  --fse-hot:      #8c1c13;  /* Rojo vino — ÚNICO color de acción (CTA, precios, alertas) */
  --fse-fire:     #a52a1e;  /* Rojo vino claro — solo para :hover del CTA */
  --fse-ember:    #8c1c13;  /* Alias del rojo vino — antes era un segundo acento, ahora es el mismo color de acción */
  --fse-gold:     #c9a24b;  /* Dorado — soporte: bordes, íconos, badges, estados seleccionados */
  --fse-gold-dim: #a5843e;  /* Dorado oscurecido — hover/active de acentos dorados */
  --fse-cream:    #faf6f0;  /* Blanco cálido — fondo claro / texto sobre fondo oscuro */
  --fse-sand:     #f2ede4;  /* Hueso — superficies secundarias: tarjetas, inputs */
  --fse-text:     #1c1c1c;
  --fse-muted:    #6b6560;
  --fse-border:   #e2d9c8;
  --fse-surface:  #f2ede4;
  --fse-white:    #faf6f0;
  --fse-success:  #c9a24b; /* No hay verde en la paleta: "éxito" se resuelve en dorado */

  /* Tipografía */
  --fse-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fse-font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fse-font-mono:    "SF Mono", "Fira Code", monospace;

  /* Escala tipográfica */
  --fse-text-xs:  .72rem;
  --fse-text-sm:  .84rem;
  --fse-text-base: .94rem;
  --fse-text-md:  1.05rem;
  --fse-text-lg:  1.2rem;
  --fse-text-xl:  1.5rem;

  /* Radio / sombras */
  --fse-radius-sm: 8px;
  --fse-radius:    12px;
  --fse-radius-lg: 18px;
  --fse-radius-xl: 24px;
  --fse-shadow-xs: 0 1px 4px rgba(28,28,28,.07);
  --fse-shadow-sm: 0 2px 10px rgba(28,28,28,.10);
  --fse-shadow-md: 0 4px 20px rgba(28,28,28,.14);
  --fse-shadow-lg: 0 8px 32px rgba(28,28,28,.18);
  --fse-shadow-card: 0 2px 8px rgba(28,28,28,.08), 0 0 0 1px rgba(28,28,28,.04);

  /* Transición */
  --fse-ease: cubic-bezier(.25,.46,.45,.94);
  --fse-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --fse-duration: 200ms;
}

/* ── Reset mínimo ────────────────────────────────────────────────────────────── */
.fse-home *, .fse-menu-page *, .fse-checkout-page *, .fse-account-page *, .fse-fab *,
.fse-cart-fab, .fse-cart-drawer * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Foco por teclado en dorado (soporte, regla 2) en vez del azul por defecto
   del navegador — en menú/carrito/checkout/cuenta, que son los 3 alcances
   de esta paleta (no toca el foco nativo de checkboxes/radios ocultos). */
.fse-menu-page a:focus-visible, .fse-menu-page button:focus-visible, .fse-menu-page input:focus-visible, .fse-menu-page select:focus-visible, .fse-menu-page textarea:focus-visible,
.fse-checkout-page a:focus-visible, .fse-checkout-page button:focus-visible, .fse-checkout-page input:focus-visible, .fse-checkout-page select:focus-visible, .fse-checkout-page textarea:focus-visible,
.fse-account-page a:focus-visible, .fse-account-page button:focus-visible, .fse-account-page input:focus-visible, .fse-account-page select:focus-visible, .fse-account-page textarea:focus-visible,
.fse-cart-drawer a:focus-visible, .fse-cart-drawer button:focus-visible {
  outline: 2px solid var(--fse-gold);
  outline-offset: 2px;
}

/* ── Layout helpers ──────────────────────────────────────────────────────────── */
.fse-container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}
.fse-container--narrow { max-width: 700px; }

.fse-section { padding-block: clamp(48px, 8vw, 96px); }

.fse-section-header {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.fse-section-header h2 {
  font-family: var(--fse-font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--fse-carbon);
  text-wrap: balance;
}
.fse-home .fse-section-header h2 {
  font-family: var(--fse-font-body);
  font-weight: 800;
  color: var(--fse-carbon);
}

.fse-eyebrow {
  display: inline-block;
  font-family: var(--fse-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fse-hot);
  margin-bottom: 10px;
}
.fse-home .fse-eyebrow { color: var(--fse-gold-dim); }

/* ── Botones ─────────────────────────────────────────────────────────────────── */
/* button.fse-btn (y los duplicados "button.fse-btn--X" de acá para abajo): el
   tema activo (Hello Elementor) trae un reset.css con
   "[type=button],[type=submit],button { border:1px solid #cc3366;
   background-color:transparent; color:#cc3366; border-radius:3px; }" que
   empata en especificidad (una clase = un atributo/tag) con nuestras clases
   y gana por orden de carga en cualquier <button> que tenga el atributo
   type="button" (buena práctica de accesibilidad que sí usamos en varios
   botones nuevos) — mismo mecanismo que el conflicto de "a.fse-btn.fse-btn--X"
   ya documentado más abajo, pero para <button> en vez de <a>. */
.fse-btn, button.fse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fse-font-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  padding: 13px 24px;
  border-radius: 50px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s var(--fse-ease), box-shadow .15s var(--fse-ease), opacity .15s;
  white-space: nowrap;
}
.fse-btn:active { transform: scale(.97) !important; }
.fse-btn--pop { animation: fse-btn-pop .45s var(--fse-ease-spring); }
@keyframes fse-btn-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12) rotate(-2deg); }
  65%  { transform: scale(.95) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fse-btn--pop { animation: none; }
}

/* Único color de acción (rojo vino) — .fse-btn--fire y .fse-btn--ember eran dos
   acentos distintos (rojo/ámbar) en el tema anterior; ahora resuelven al
   mismo rojo vino para no diluir el foco de conversión (regla 1 del brief).
   "a.fse-btn.fse-btn--X" (ver nota más abajo) porque el CTA del hero es <a>. */
.fse-btn--fire,
.fse-btn--ember,
a.fse-btn.fse-btn--fire,
a.fse-btn.fse-btn--ember,
button.fse-btn--fire,
button.fse-btn--ember {
  background: var(--fse-hot);
  color: var(--fse-cream);
  box-shadow: 0 4px 14px rgba(140,28,19,.35);
}
.fse-btn--fire:hover,
.fse-btn--ember:hover,
a.fse-btn.fse-btn--fire:hover,
a.fse-btn.fse-btn--ember:hover,
button.fse-btn--fire:hover,
button.fse-btn--ember:hover {
  background: var(--fse-fire);
  box-shadow: 0 6px 20px rgba(140,28,19,.45);
  transform: translateY(-2px);
}

/* El tema trae ".entry-content a:not([class*=button])  { color: var(--link-color) }"
   — como "fse-btn--ghost"/"fse-btn--outline" no contienen la palabra "button",
   ese selector SÍ matchea, y con 2 clases/atributos + la etiqueta <a> le
   gana en especificidad a un selector de una sola clase. Duplicar la regla
   como "a.fse-btn.fse-btn--X" iguala esa especificidad (2 clases + <a>) y
   gana por orden de carga — necesario en cualquier página con plantilla
   por defecto de WP (envuelve el contenido en .entry-content), como la Home. */
.fse-btn--ghost,
a.fse-btn.fse-btn--ghost,
button.fse-btn--ghost {
  background: rgba(250,246,240,.12);
  color: var(--fse-cream);
  border-color: rgba(250,246,240,.5);
  backdrop-filter: blur(4px);
}
.fse-btn--ghost:hover,
a.fse-btn.fse-btn--ghost:hover,
button.fse-btn--ghost:hover { background: rgba(250,246,240,.22); }

/* ── BORDE GIRATORIO (reutilizable en cualquier CTA importante) ────────────────
   Se agrega a mano solo en el/los botón(es) que de verdad importan — nunca por
   defecto en .fse-btn--fire, para no restarle jerarquía al resto.

   La animación mueve el ÁNGULO del conic-gradient (vía @property), NO un
   transform:rotate() del elemento — en un rectángulo ancho/bajo, rotar el
   elemento entero hace que las esquinas del anillo "vuelen" fuera de la caja
   (centro→esquina es más lejos que centro→borde), y el brillo se ve como un
   cometa disparado en diagonal en vez de un borde parejo. Animar el ángulo
   del degradado deja el anillo perfectamente quieto; solo gira el color. */
@property --fse-shine-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.btn-shine {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.btn-shine::before {
  content: "";
  position: absolute;
  inset: -3px;
  padding: 3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--fse-shine-angle),
    transparent 0%,
    transparent 75%,
    var(--fse-gold) 88%,
    color-mix(in srgb, var(--fse-gold) 100%, white 45%) 92%,
    var(--fse-gold) 96%,
    transparent 100%
  );
  /* Recorta el conic-gradient a un anillo de grosor uniforme en vez de dejar
     que llene todo el rectángulo — sin esto el brillo tapa el botón entero
     en vez de seguir solo su borde. */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  animation: fse-shine-spin 2.6s linear infinite;
  pointer-events: none;
}
@keyframes fse-shine-spin {
  from { --fse-shine-angle: 0deg; }
  to   { --fse-shine-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-shine::before { animation: none; }
}

/* Acción secundaria (cancelar, volver): neutro, borde sin relleno, nunca
   compite en color con el CTA principal en rojo vino (regla 8 del brief). */
.fse-btn--outline,
a.fse-btn.fse-btn--outline,
button.fse-btn--outline {
  background: transparent;
  color: var(--fse-carbon);
  border-color: var(--fse-carbon);
}
.fse-btn--outline:hover,
a.fse-btn.fse-btn--outline:hover,
button.fse-btn--outline:hover { background: var(--fse-carbon); color: var(--fse-cream); }

.fse-btn--muted, button.fse-btn--muted {
  background: var(--fse-sand);
  color: var(--fse-muted);
  cursor: default;
}

.fse-btn--sm { font-size: .8rem; padding: 9px 16px; }
.fse-btn--full { width: 100%; }

.fse-link { color: var(--fse-hot); text-decoration: none; }
.fse-link:hover { text-decoration: underline; }

/* ── Scroll reveal ───────────────────────────────────────────────────────────── */
.fse-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--fse-ease), transform .6s var(--fse-ease);
}
.fse-reveal.fse-visible {
  opacity: 1;
  transform: none;
}
.fse-card.fse-reveal { transition-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) {
  .fse-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── HERO ────────────────────────────────────────────────────────────────────── */
/* Hero = el "header" de la Home (regla 3: carbón), con vetas de dorado muy
   sutiles en vez de los degradados azul-violeta de antes. */
.fse-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--fse-carbon);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 85%, rgba(140,28,19,.25) 0%, transparent 70%),
    radial-gradient(ellipse 55% 40% at 15% 15%, rgba(201,162,75,.18) 0%, transparent 60%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.fse-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(28,28,28,.72) 0%,
    rgba(28,28,28,.5) 50%,
    rgba(28,28,28,.85) 100%);
}

.fse-hero__content {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vw, 140px) clamp(20px, 6vw, 60px) clamp(60px, 8vw, 100px);
  max-width: 780px;
}

.fse-home .fse-hero__title {
  font-family: var(--fse-font-body);
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  font-weight: 800;
  color: var(--fse-cream);
  line-height: 1.08;
  text-wrap: balance;
  margin-bottom: 18px;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

.fse-hero__tagline {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: rgba(250,246,240,.8);
  line-height: 1.6;
  margin-bottom: 36px;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

.fse-hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* El único CTA rojo vino del hero — regla 1, un solo color de acción. */
.fse-hero__actions .fse-btn--fire {
  background: var(--fse-hot);
  box-shadow: 0 4px 18px rgba(140,28,19,.45);
}
.fse-hero__actions .fse-btn--fire:hover {
  background: var(--fse-fire);
  box-shadow: 0 6px 26px rgba(140,28,19,.6);
}

/* ── Status pill ─────────────────────────────────────────────────────────────── */
.fse-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}
/* Sin verde en la paleta: "abierto" se resuelve en dorado (estado normal/
   positivo), "cerrado" en rojo vino (única alerta real de esta pieza). */
.fse-status-pill--open  { background: rgba(201,162,75,.18); color: var(--fse-gold); border: 1px solid rgba(201,162,75,.4); }
.fse-status-pill--closed { background: rgba(140,28,19,.18); color: #e8877c; border: 1px solid rgba(140,28,19,.4); }

.fse-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fse-status-pill--open  .fse-status-dot { background: var(--fse-gold); animation: fse-pulse 1.8s ease infinite; }
.fse-status-pill--closed .fse-status-dot { background: #e8877c; }

@keyframes fse-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ── Steam / vapor ───────────────────────────────────────────────────────────── */
.fse-hero__steam {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.fse-hero__wisp {
  position: absolute;
  bottom: 0;
  width: clamp(40px, 6vw, 80px);
  height: clamp(100px, 20vw, 200px);
  background: radial-gradient(ellipse at bottom, rgba(250,246,240,.18) 0%, transparent 70%);
  border-radius: 50%;
  animation: fse-steam 5s ease-in infinite;
  filter: blur(8px);
}
.fse-hero__wisp--1 { left:  8%; animation-delay: 0s;   animation-duration: 6s; }
.fse-hero__wisp--2 { left: 22%; animation-delay: 1.2s; animation-duration: 5s; }
.fse-hero__wisp--3 { left: 40%; animation-delay: 2.4s; animation-duration: 7s; }
.fse-hero__wisp--4 { left: 58%; animation-delay: 0.8s; animation-duration: 5.5s; }
.fse-hero__wisp--5 { left: 74%; animation-delay: 1.8s; animation-duration: 6.5s; }
.fse-hero__wisp--6 { left: 88%; animation-delay: 3.2s; animation-duration: 5.8s; }

@keyframes fse-steam {
  0%   { transform: translateY(0)     scaleX(1)   scaleY(1);   opacity: 0; }
  20%  { opacity: .7; }
  80%  { opacity: .3; }
  100% { transform: translateY(-110%) scaleX(1.4) scaleY(.7);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fse-hero__wisp { display: none; } }

/* Flecha de scroll */
.fse-hero__scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.fse-hero__scroll-hint span {
  display: block;
  width: 24px; height: 24px;
  border-right: 2px solid rgba(250,246,240,.5);
  border-bottom: 2px solid rgba(250,246,240,.5);
  transform: rotate(45deg);
  animation: fse-bounce 1.6s ease infinite;
}
@keyframes fse-bounce {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: .6; }
  50%       { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

/* ── Servicios ───────────────────────────────────────────────────────────────── */
/* Claro (hueso) — solo el hero y la confirmación van en carbón (regla 3);
   el resto del recorrido de la Home queda claro para legibilidad. */
.fse-services {
  background: var(--fse-sand);
}
.fse-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.fse-service {
  text-align: center;
  color: var(--fse-carbon);
}
.fse-service__icon { font-size: 2.4rem; margin-bottom: 14px; }
.fse-service h3 { font-family: var(--fse-font-body); font-weight: 800; font-size: 1.1rem; color: var(--fse-carbon); margin-bottom: 8px; }
.fse-service p  { font-size: .88rem; color: var(--fse-muted); line-height: 1.6; }

/* ── Cards de producto ───────────────────────────────────────────────────────── */
.fse-featured { background: var(--fse-cream); }

.fse-featured__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
  align-items: start;
}

.fse-card {
  background: var(--fse-cream);
  border-radius: var(--fse-radius-lg);
  box-shadow: var(--fse-shadow-card);
  overflow: hidden;
  transition: transform var(--fse-duration) var(--fse-ease),
              box-shadow var(--fse-duration) var(--fse-ease);
  cursor: default;
  will-change: transform;
}
.fse-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(28,28,28,.16), 0 0 0 1px rgba(28,28,28,.05);
}

/* La foto del plato es el elemento más saturado de la tarjeta a propósito
   (regla 5 del brief): la tarjeta en sí queda neutra (blanco cálido, halo
   sutil en dorado) para no competirle color a la comida. */
.fse-menu-page .fse-card {
  box-shadow: 0 6px 20px rgba(28,28,28,.14), 0 0 0 1px rgba(201,162,75,.18);
}
.fse-menu-page .fse-card:hover {
  box-shadow: 0 12px 30px rgba(28,28,28,.2), 0 0 0 1px rgba(201,162,75,.35);
}

.fse-card--agotado { opacity: .55; }
.fse-card--agotado .fse-card__img { filter: grayscale(.7); }

.fse-card__img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--fse-sand);
  overflow: hidden;
}
.fse-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--fse-ease), opacity .3s ease;
}
.fse-card:hover .fse-card__img { transform: scale(1.06); }

.fse-card__img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(135deg, var(--fse-sand) 0%, #ddd0be 100%);
}
.fse-card__img[src] + .fse-card__img-placeholder { display: none; }

.fse-card__agotado-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(28,28,28,.85);
  color: var(--fse-cream);
  font-size: var(--fse-text-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  display: none;
  backdrop-filter: blur(4px);
}
.fse-card--agotado .fse-card__agotado-badge { display: block; }

/* Precio badge sobre imagen (solo en home featured) */
.fse-card__img-price {
  position: absolute;
  bottom: 10px; right: 10px;
  background: var(--fse-carbon);
  color: var(--fse-gold);
  font-size: var(--fse-text-sm);
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
  display: none; /* visible solo en home via JS si se quiere */
}

.fse-card__body { padding: 16px 18px 18px; }

.fse-card__cats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.fse-cat-chip {
  font-size: var(--fse-text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--fse-sand);
  color: var(--fse-muted);
  padding: 3px 8px;
  border-radius: 20px;
}

.fse-card__title {
  font-family: var(--fse-font-display);
  font-size: var(--fse-text-md);
  color: var(--fse-carbon);
  margin-bottom: 5px;
  line-height: 1.3;
  font-weight: 700;
}
.fse-card__desc {
  font-size: var(--fse-text-sm);
  color: var(--fse-muted);
  line-height: 1.55;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.fse-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fse-card__price {
  font-size: var(--fse-text-lg);
  font-weight: 900;
  color: var(--fse-hot);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ── Product grid — menú page ─────────────────────────────────────────────────
   Base (mobile, como la referencia): 2 columnas fijas, card vertical con el
   botón "+" superpuesto en la imagen. Desde 900px se suman más columnas para
   no desperdiciar espacio en pantallas grandes — la card sigue siendo la
   misma (vertical), no hay un segundo layout que mantener.
   ─────────────────────────────────────────────────────────────────────────── */
.fse-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 900px) {
  .fse-product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
}

.fse-product-grid .fse-card__img-wrap { aspect-ratio: 1/1; }

.fse-product-grid .fse-card__body {
  padding: 10px 12px 14px;
}
/* Categoría oculta en la grilla del catálogo -- a pedido explícito del
   usuario ("que no salga la categoría para que así se pueda ver más la
   descripción"): la card ya está agrupada por categoría en el sidebar de al
   lado, repetirla en cada tarjeta era espacio de sobra. Sigue visible en la
   grilla de "Destacados" de la home (fuera de .fse-product-grid). */
.fse-product-grid .fse-card__cats { display: none; }
.fse-product-grid .fse-card__title { font-size: var(--fse-text-base); margin-bottom: 3px; }
.fse-product-grid .fse-card__desc {
  font-size: var(--fse-text-xs);
  margin-bottom: 8px;
  -webkit-line-clamp: 3;
}
.fse-product-grid .fse-card__price { font-size: var(--fse-text-md); }
.fse-product-grid .fse-card--agotado { opacity: .6; }
.fse-product-grid .fse-card__agotado-badge { font-size: .65rem; }

/* ── Botón "+" superpuesto en la esquina de la imagen ──────────────────────────
   Reemplaza el botón "Agregar" con texto que vivía en el footer — ahora es un
   círculo compacto sobre la propia foto (regla 5 del brief: la foto es lo más
   saturado de la card, el botón no debe competirle protagonismo). */
.fse-card__add-btn, button.fse-card__add-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fse-carbon);
  color: var(--fse-cream);
  border: none;
  box-shadow: 0 3px 10px rgba(28,28,28,.35);
  transition: transform .18s var(--fse-ease-spring), background .18s var(--fse-ease);
}
.fse-card__add-icon { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.fse-card__add-btn:hover { transform: scale(1.08); }
.fse-card__add-btn:active { transform: scale(.92); }
.fse-card__add-btn--agotado,
.fse-card__add-btn:disabled,
button.fse-card__add-btn--agotado,
button.fse-card__add-btn:disabled {
  background: var(--fse-muted);
  cursor: not-allowed;
}
.fse-card__add-btn--fire, button.fse-card__add-btn--fire { background: var(--fse-hot); }

/* :not([hidden]) es obligatorio acá — una regla de autor con la misma
   especificidad que el [hidden] del user-agent stylesheet siempre gana
   (mismo bug ya documentado en este plugin para .fse-cart-empty), así que
   sin esto el badge se vería "0" siempre en vez de ocultarse de verdad. */
.fse-card__add-badge:not([hidden]) {
  position: absolute;
  right: 3px;
  bottom: 34px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--fse-hot);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(28,28,28,.3);
}

.fse-featured__cta {
  text-align: center;
  margin-top: 40px;
}
/* .fse-btn--outline base (carbón sobre transparente) ya es correcto acá — la
   sección quedó clara, no hace falta pisarla con blanco. */

/* ── Counter strip ─────────────────────────────────────────────────────────────
   Franja dorada como respiro decorativo entre secciones — el dorado es de
   soporte y puede usarse en bloque acá porque no es una acción ni un precio
   (regla 1 solo restringe el rojo vino a eso). */
.fse-counter-strip {
  background: var(--fse-gold);
  padding-block: 40px;
}
.fse-counter-strip__inner {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 60px);
  flex-wrap: wrap;
}
.fse-counter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fse-counter-num {
  font-family: var(--fse-font-body);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--fse-carbon);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fse-counter-lbl {
  font-size: .8rem;
  font-weight: 500;
  color: rgba(28,28,28,.7);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fse-counter-sep {
  font-size: 2rem;
  color: rgba(28,28,28,.3);
  flex-shrink: 0;
}

/* ── Info / Horarios ─────────────────────────────────────────────────────────── */
.fse-info { background: var(--fse-sand); }
.fse-info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.fse-info-block { text-align: center; }
.fse-info-block__icon { font-size: 2rem; margin-bottom: 12px; }
.fse-info-block h3 {
  font-family: var(--fse-font-body);
  font-weight: 800;
  font-size: 1rem;
  color: var(--fse-carbon);
  margin-bottom: 8px;
}
.fse-info-block p {
  font-size: .9rem;
  color: var(--fse-muted);
  line-height: 1.65;
}
.fse-info-block .fse-link, .fse-info-block a.fse-link { color: var(--fse-hot); }

/* ── FAB (Pedí ahora) ────────────────────────────────────────────────────────── */
.fse-fab {
  position: fixed;
  bottom: clamp(20px, 4vw, 32px);
  right: clamp(16px, 4vw, 28px);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.fse-fab__main {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fse-hot);
  color: var(--fse-cream);
  font-family: var(--fse-font-body);
  font-size: .9rem;
  font-weight: 700;
  padding: 14px 22px;
  border: none;
  border-radius: 50px;
  box-shadow: 0 6px 24px rgba(140,28,19,.45);
  cursor: pointer;
  transition: transform .2s var(--fse-ease), box-shadow .2s var(--fse-ease);
}
.fse-fab__main:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(140,28,19,.55); background: var(--fse-fire); }
.fse-fab__icon { width: 20px; height: 20px; flex-shrink: 0; }

.fse-fab__options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  transition: opacity .2s var(--fse-ease), transform .2s var(--fse-ease);
}
.fse-fab__options[aria-hidden="true"] { opacity: 0; transform: translateY(10px); pointer-events: none; }
.fse-fab__options[aria-hidden="false"] { opacity: 1; transform: none; }

/* .fse-fab__opt es <a> y no contiene "button" en el nombre — mismo caso que
   .fse-btn--ghost/--outline más arriba, necesita "a.fse-fab__opt" para ganarle
   en especificidad a la regla de enlaces del tema. */
.fse-fab__opt,
a.fse-fab__opt {
  background: var(--fse-carbon);
  color: var(--fse-cream);
  font-size: .85rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: var(--fse-shadow-md);
  transition: transform .15s, background .15s;
  white-space: nowrap;
}
.fse-fab__opt:hover,
a.fse-fab__opt:hover { background: var(--fse-hot); transform: translateX(-4px); }

/* ── MENÚ PAGE ───────────────────────────────────────────────────────────────── */
/* Regla 3 del brief: carbón para el header/nav, blanco cálido/hueso para el
   cuerpo (foco en legibilidad de fotos y productos). */
.fse-menu-page {
  --fse-cat-nav-w: 84px;
  min-height: 60vh;
  padding-bottom: 100px;
  background: var(--fse-cream);
}
@media (min-width: 480px) {
  .fse-menu-page { --fse-cat-nav-w: 96px; }
}

.fse-menu-header {
  background: var(--fse-carbon);
  color: var(--fse-cream);
  padding: clamp(32px, 6vw, 64px) clamp(16px, 4vw, 48px) clamp(24px, 4vw, 40px);
  text-align: center;
}
.fse-menu-page .fse-menu-header__title {
  font-family: var(--fse-font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--fse-cream);
}

/* Variante con foto de portada (misma imagen que el hero de Home) — la
   imagen se pinta vía style inline, acá solo agregamos encuadre + velo
   oscuro para que el título/chip de mesa mantengan contraste AA. */
.fse-menu-header--foto {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.fse-menu-header--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(28,28,28,.78) 0%,
    rgba(28,28,28,.55) 45%,
    rgba(28,28,28,.88) 100%);
}
.fse-menu-header--foto .fse-menu-header__title,
.fse-menu-header--foto .fse-mesa-info {
  position: relative;
  z-index: 2;
}
.fse-mesa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(250,246,240,.12);
  color: var(--fse-gold);
  font-size: .8rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  margin-top: 10px;
  letter-spacing: .04em;
}

/* ── Cuerpo del menú: sidebar de categorías (izquierda) + grid ─────────────────── */
.fse-menu-body {
  display: flex;
  align-items: flex-start;
}

/* ── Category nav — sidebar vertical fija a la izquierda ───────────────────────
   `position:fixed` (no sticky): el tema envuelve el contenido en un ancestro con
   `overflow-y:auto` sin altura fija — nunca hace scroll interno de verdad (la
   ventana es la que se mueve), pero por spec ese overflow ya cuenta como el
   "contenedor de scroll" de referencia para cualquier `position:sticky`
   descendiente, que entonces jamás se despega de su posición natural (mismo bug
   ya documentado para la barra horizontal anterior). `fixed` no depende de
   ningún ancestro con scroll, así que lo evita de raíz sin hacer falta ningún
   IntersectionObserver esta vez. `--fse-header-h` la fija JS (medirAlturaHeader()
   en fse-public.js) porque el alto real del header es responsive (clamp()). */
.fse-cat-nav {
  position: fixed;
  top: var(--fse-header-h, 0px);
  left: 0;
  bottom: 0;
  z-index: 10;
  width: var(--fse-cat-nav-w, 84px);
  background: var(--fse-carbon);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 14px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-right: 2px solid var(--fse-gold);
  box-shadow: 6px 0 18px rgba(0,0,0,.35);
}
.fse-cat-nav::-webkit-scrollbar { display: none; }

/* Tabs neutras: el dorado es de soporte y marca "seleccionado" (regla 2 del
   brief), no hay rotación de colores decorativa por categoría. */
.fse-cat-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: var(--fse-font-body);
  font-size: .68rem;
  font-weight: 700;
  color: rgba(250,246,240,.75);
  background: rgba(250,246,240,.08);
  border: 1px solid rgba(250,246,240,.2);
  border-radius: 14px;
  padding: 10px 4px 8px;
  cursor: pointer;
  transition: transform .18s var(--fse-ease-spring), background .18s var(--fse-ease), color .18s var(--fse-ease), border-color .18s var(--fse-ease), box-shadow .18s var(--fse-ease);
  letter-spacing: .01em;
  text-align: center;
  animation: fse-tab-in .5s var(--fse-ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.fse-cat-tab__emoji { font-size: 1.5rem; line-height: 1; }
/* min-width:0 es el fix real acá — un item flex sin esto no se achica más
   allá del ancho de su contenido ("min-width:auto" implícito), así que un
   nombre de 2 palabras como "Enrollado Árabe" se salía del botón en una sola
   línea en vez de partirse en dos, sin importar que ya tuviera
   word-break/overflow-wrap. */
.fse-cat-tab__label {
  width: 100%;
  min-width: 0;
  /* El reset del tema pone "white-space:nowrap" en TODO <button> — como acá
     no hay pelea de especificidad (es herencia hacia este <span>, no una
     regla compitiendo sobre el propio botón), alcanza con declararlo acá
     directo para que gane sobre la herencia y el break-word de abajo
     realmente pueda partir el texto en 2 líneas en vez de no hacer nada. */
  white-space: normal;
  line-height: 1.15;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
@keyframes fse-tab-in {
  from { opacity: 0; transform: translateX(-10px) scale(.85); }
  to   { opacity: 1; transform: none; }
}
.fse-cat-tab:not(.fse-cat-tab--active):hover { color: var(--fse-cream); background: rgba(250,246,240,.14); border-color: rgba(201,162,75,.5); transform: translateX(2px); }
.fse-cat-tab:not(.fse-cat-tab--active):active { transform: scale(.94); }

.fse-cat-tab--active {
  background: var(--fse-gold);
  color: var(--fse-carbon);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(201,162,75,.4);
  transform: scale(1.04);
}
.fse-cat-tab--pop { animation: fse-tab-pop .38s var(--fse-ease-spring); }
@keyframes fse-tab-pop {
  0%   { transform: scale(1.04); }
  40%  { transform: scale(1.16); }
  100% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .fse-cat-tab { animation: none; }
}

/* ── Product grid wrapper ─────────────────────────────────────────────────────── */
.fse-products {
  flex: 1;
  min-width: 0;
  margin-left: var(--fse-cat-nav-w, 84px);
  padding: clamp(16px, 3vw, 32px) clamp(10px, 3vw, 28px) 120px;
  max-width: 1160px;
}

/* ── Loading spinner ─────────────────────────────────────────────────────────── */
.fse-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px;
  color: var(--fse-muted);
  font-size: .9rem;
}
.fse-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--fse-sand);
  border-top-color: var(--fse-hot);
  border-radius: 50%;
  animation: fse-spin .8s linear infinite;
}
@keyframes fse-spin { to { transform: rotate(360deg); } }

.fse-error-msg {
  text-align: center;
  padding: 40px;
  color: var(--fse-hot);
  font-size: .9rem;
}

/* ── Menú flotante (Inicio / Mi cuenta) ─────────────────────────────────────────
   Mismo criterio visual que retail-commerce-engine (panel glass, arriba a la
   derecha) -- ver public/partials/menu-drawer.php para el porqué de que acá
   sea más simple (sin login embebido, food-service-engine ya tiene su propia
   página de cuenta separada). */
.fse-menu-toggle {
  position: fixed !important; z-index: 1000;
  top: clamp(14px, 3vw, 20px); right: clamp(14px, 3vw, 20px);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(20,20,20,.42) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff !important; padding: 0;
  outline: none;
}
/* Mismo rincón (fixed, arriba-derecha) que la "✕" propia del carrito -- se
   oculta mientras el carrito está abierto para no taparla (ver CartUI.open()
   en fse-public.js). */
body.fse-cart-open .fse-menu-toggle { display: none; }

.fse-menu-buscar {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-family: inherit; font-size: .88rem;
  outline: none;
}
.fse-menu-buscar::placeholder { color: rgba(255,255,255,.55); }
.fse-menu-buscar:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.fse-menu-toggle__icon { width: 22px; height: 22px; }

.fse-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}
.fse-menu-drawer[aria-hidden="false"] { pointer-events: auto; }

.fse-menu-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,17,20,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s var(--fse-ease);
}
.fse-menu-drawer[aria-hidden="false"] .fse-menu-drawer__backdrop { opacity: 1; }

.fse-menu-drawer__panel {
  position: fixed;
  top: calc(clamp(14px, 3vw, 20px) + 54px);
  right: clamp(14px, 3vw, 20px);
  width: min(300px, calc(100vw - 2 * clamp(14px, 3vw, 20px)));
  max-height: min(74vh, 480px);
  display: flex;
  flex-direction: column;
  background: rgba(30,34,40,.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transform-origin: top right;
  transition: opacity .22s var(--fse-ease), transform .22s var(--fse-ease);
  overflow: hidden;
}
.fse-menu-drawer[aria-hidden="false"] .fse-menu-drawer__panel { opacity: 1; transform: none; }

.fse-menu-drawer__close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  background: rgba(255,255,255,.12) !important; border: none !important; color: #fff !important;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fse-menu-drawer__close:hover { background: rgba(255,255,255,.22) !important; }

.fse-menu-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fse-menu-topbar { display: flex; align-items: center; gap: 8px; }

.fse-menu-cta-wa {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 12px; text-decoration: none;
  background: linear-gradient(180deg, rgba(37,211,102,.95), rgba(18,140,126,.95));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
  color: #fff;
  cursor: pointer;
}
.fse-menu-cta-wa:hover { filter: brightness(1.04); }

.fse-menu-item, a.fse-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 14px;
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 14px;
  font-family: inherit; font-size: .92rem; font-weight: 700; color: #fff !important;
  cursor: pointer; text-align: left; text-decoration: none !important;
  box-sizing: border-box;
}
.fse-menu-item:hover, a.fse-menu-item:hover { background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.22) !important; }
.fse-menu-item__emoji { font-size: 1.1rem; }
.fse-menu-item__flecha { margin-left: auto; color: rgba(255,255,255,.5); }

/* ── Cart FAB ────────────────────────────────────────────────────────────────── */
.fse-cart-fab {
  /* !important en position/bottom/right: este botón lleva la clase
     .btn-shine (compartida entre varios plugins de este sitio), y
     gym-manager/assets/css/gm-front.css define su PROPIO `.btn-shine {
     position: relative; ... }` -- misma especificidad, sin !important, pero
     carga después en el <head> y le gana la cascada al `position: fixed` de
     acá, dejando el botón posicionado en el flujo normal del documento (por
     eso aparecía metido en la barra de categorías, en un lugar distinto
     según cuánto contenido hubiera antes). Mismo bug ya encontrado y
     corregido en retail-commerce-engine (`.rce-cart-fab`) en este mismo
     sitio -- se había portado esta regla desde restaurante-manager (que
     nunca tuvo este fix) en vez de desde la versión ya corregida de RCE.
     Confirmado con getBoundingClientRect()/getComputedStyle() contra
     producción: sin esto, `position` computado daba "relative". */
  position: fixed !important;
  /* Más arriba que antes: el sitio tiene otro botón flotante (menú del tema)
     en la misma esquina, y se tapaban entre sí. */
  bottom: clamp(90px, 18vw, 110px) !important;
  right: clamp(16px, 4vw, 28px) !important;
  z-index: 800;
  width: 62px; height: 62px;
  /* Gris traslúcido con blur tipo "vidrio esmerilado" — se lee como gris
     sobre cualquier fondo (foto, card dorada, etc.) y el ícono blanco
     adentro contrasta mucho mejor que el emoji de color sobre cualquiera
     de los fondos sólidos que probamos antes. */
  background: rgba(50, 50, 54, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(28,28,28,.32), 0 0 0 4px rgba(140,28,19,.12), inset 0 1px 0 rgba(255,255,255,.18);
  cursor: pointer;
  transition: transform .2s var(--fse-ease-spring), box-shadow .2s var(--fse-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fse-fab-breathe 2.6s ease-in-out infinite;
}
.fse-cart-fab__icon { width: 26px; height: 26px; }
.fse-cart-fab:hover { transform: scale(1.1) rotate(-6deg); box-shadow: 0 6px 26px rgba(28,28,28,.4), 0 0 0 4px rgba(140,28,19,.18); }
.fse-cart-fab--bump { animation: fse-fab-bump .5s var(--fse-ease-spring); }

@keyframes fse-fab-breathe {
  0%, 100% { box-shadow: 0 4px 20px rgba(28,28,28,.32), 0 0 0 4px rgba(140,28,19,.12), inset 0 1px 0 rgba(255,255,255,.18); }
  50%      { box-shadow: 0 4px 26px rgba(28,28,28,.4), 0 0 0 8px rgba(140,28,19,.06), inset 0 1px 0 rgba(255,255,255,.18); }
}
@keyframes fse-fab-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35) rotate(8deg); }
  55%  { transform: scale(.9) rotate(-4deg); }
  80%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fse-cart-fab { animation: none; }
}

.fse-cart-fab__badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--fse-gold);
  color: var(--fse-carbon);
  font-size: .68rem;
  font-weight: 800;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  padding-inline: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--fse-carbon);
  transition: transform .25s var(--fse-ease-spring);
}
.fse-cart-fab__badge--bump { animation: fse-badge-bump .5s var(--fse-ease-spring); }
@keyframes fse-badge-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* ── Cart Drawer ─────────────────────────────────────────────────────────────── */
.fse-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}
.fse-cart-drawer[aria-hidden="false"] { pointer-events: auto; }

.fse-cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,28,28,.6);
  opacity: 0;
  transition: opacity .25s var(--fse-ease);
  backdrop-filter: blur(2px);
}
.fse-cart-drawer[aria-hidden="false"] .fse-cart-drawer__backdrop { opacity: 1; }

/* Regla 3 del brief: header oscuro (carbón) para el ancla de marca, cuerpo
   claro (blanco cálido) para que el foco quede en los productos/precios. */
.fse-cart-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--fse-cream);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s var(--fse-ease-spring);
  box-shadow: -10px 0 44px rgba(0,0,0,.35);
  border-radius: 18px 0 0 18px;
  overflow: hidden;
}
.fse-cart-drawer[aria-hidden="false"] .fse-cart-drawer__panel { transform: none; }

.fse-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px;
  border-bottom: 2px solid var(--fse-gold);
  background: var(--fse-carbon);
  color: var(--fse-cream);
  flex-shrink: 0;
}
.fse-cart-drawer .fse-cart-drawer__title {
  font-family: var(--fse-font-display);
  font-size: 1.2rem;
  color: var(--fse-cream);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fse-cart-drawer[aria-hidden="false"] .fse-cart-drawer__title {
  animation: fse-cart-title-in .5s var(--fse-ease-spring) .1s backwards;
}
@keyframes fse-cart-title-in {
  0%   { transform: scale(.7) rotate(-8deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.fse-cart-drawer__close {
  background: rgba(250,246,240,.1);
  border: none;
  color: var(--fse-cream);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s var(--fse-ease-spring);
  position: relative;
}
.fse-cart-drawer__close:hover { background: rgba(250,246,240,.22); transform: rotate(90deg); }

.fse-cart-mesa {
  background: var(--fse-sand);
  padding: 10px 22px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--fse-carbon);
  border-bottom: 1px solid var(--fse-border);
  flex-shrink: 0;
}

.fse-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--fse-cream);
}
.fse-cart-empty:not([hidden]) {
  text-align: center;
  color: var(--fse-muted);
  font-size: .9rem;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fse-cart-empty::before {
  content: '🛒';
  font-size: 2.6rem;
  opacity: .35;
}

.fse-cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--fse-sand);
  border: 1px solid var(--fse-border);
  border-left: 4px solid var(--fse-gold);
  border-radius: var(--fse-radius);
  padding: 12px 14px;
  box-shadow: var(--fse-shadow-xs);
  transition: transform .15s var(--fse-ease), box-shadow .15s var(--fse-ease);
  animation: fse-cart-item-in .4s var(--fse-ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.fse-cart-item:hover { transform: translateX(-2px); box-shadow: var(--fse-shadow-sm); }
@keyframes fse-cart-item-in {
  from { opacity: 0; transform: translateX(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fse-cart-item { animation: none; }
}
.fse-cart-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fse-cart-item__nombre {
  /* Button, no span -- ver Cart.abrirComposicion() en fse-public.js */
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  color: var(--fse-carbon);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fse-cart-item__nombre:hover, .fse-cart-item__nombre:active { color: var(--fse-hot); }

/* ── Modal "Qué lleva" (composición) del carrito ──────────────────────────────
   Mismo criterio visual que .fse-menu-drawer (glass) pero en versión clara,
   consistente con el resto del carrito (fondo crema) en vez del glass oscuro
   del menú -- es contenido, no navegación. */
.fse-composicion-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: flex-end; justify-content: center;
}
.fse-composicion-modal[aria-hidden="true"] { display: none; }
.fse-composicion-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20,16,10,.5);
  backdrop-filter: blur(2px);
}
.fse-composicion-modal__panel {
  position: relative;
  width: 100%; max-width: 480px;
  max-height: 70vh; overflow-y: auto;
  background: var(--fse-cream);
  border-radius: 22px 22px 0 0;
  padding: 26px 22px 22px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
}
@media (min-width: 560px) {
  .fse-composicion-modal { align-items: center; }
  .fse-composicion-modal__panel { border-radius: 22px; }
}
.fse-composicion-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--fse-sand); border: none; color: var(--fse-carbon);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#fse-composicion-titulo {
  font-family: var(--fse-font-display);
  font-size: 1.2rem; color: var(--fse-carbon);
  margin: 0 26px 10px 0;
}
#fse-composicion-texto {
  font-size: .92rem; line-height: 1.6; color: var(--fse-muted); margin: 0;
}

/* ── Visor del QR de pago -- mismo patrón que .fse-composicion-modal ────── */
.fse-qr-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.fse-qr-modal[aria-hidden="true"] { display: none; }
.fse-qr-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(20,16,10,.6);
  backdrop-filter: blur(2px);
}
.fse-qr-modal__panel {
  position: relative;
  background: var(--fse-cream);
  border-radius: 18px;
  padding: 22px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.fse-qr-modal__panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.fse-qr-modal__close {
  position: absolute; top: -14px; right: -14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--fse-carbon); border: 2px solid var(--fse-cream); color: var(--fse-cream);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fse-cart-item__precio {
  font-size: .8rem;
  color: var(--fse-hot);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fse-cart-item__config:not([hidden]) {
  font-size: .72rem;
  color: var(--fse-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fse-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fse-qty-btn, button.fse-qty-btn {
  width: 28px; height: 28px;
  background: var(--fse-cream);
  border: 1px solid var(--fse-border);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fse-carbon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, transform .15s var(--fse-ease-spring), border-color .15s;
  flex-shrink: 0;
}
.fse-qty-btn:hover, button.fse-qty-btn:hover { background: var(--fse-hot); border-color: var(--fse-hot); color: var(--fse-cream); transform: scale(1.12); }
.fse-qty-btn:active { transform: scale(.9); }
.fse-qty-num {
  font-size: .95rem;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--fse-carbon);
}

.fse-cart-item__remove {
  background: transparent;
  border: none;
  color: var(--fse-muted);
  font-size: .9rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color .12s, transform .15s var(--fse-ease-spring);
}
.fse-cart-item__remove:hover { color: var(--fse-hot); transform: scale(1.2) rotate(90deg); }

.fse-cart-footer {
  border-top: 1px solid var(--fse-border);
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  background: var(--fse-cream);
}
.fse-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .92rem;
  font-weight: 700;
  color: var(--fse-carbon);
  background: var(--fse-sand);
  border: 1px solid var(--fse-border);
  border-radius: var(--fse-radius-sm);
  padding: 10px 14px;
}
.fse-cart-total__amount {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fse-hot);
}
.fse-cart-footer #fse-cart-checkout {
  animation: fse-cart-checkout-glow 2.2s ease-in-out infinite;
}
@keyframes fse-cart-checkout-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(140,28,19,.35); }
  50%      { box-shadow: 0 4px 24px rgba(140,28,19,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .fse-cart-footer #fse-cart-checkout { animation: none; }
}
.fse-cart-clear {
  background: transparent;
  border: none;
  color: var(--fse-muted);
  font-size: .78rem;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  padding: 4px;
  transition: color .12s;
}
.fse-cart-clear:hover { color: var(--fse-hot); }

/* ══════════════════════════════════════════════════════════════════════════════
   HOJA DE PERSONALIZACIÓN (extras/salsas por producto)
   ══════════════════════════════════════════════════════════════════════════════ */
.fse-sheet {
  position: fixed;
  inset: 0;
  z-index: 960;
  pointer-events: none;
}
.fse-sheet[aria-hidden="false"] { pointer-events: auto; }

.fse-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,28,28,.6);
  opacity: 0;
  transition: opacity .25s var(--fse-ease);
  backdrop-filter: blur(2px);
}
.fse-sheet[aria-hidden="false"] .fse-sheet__backdrop { opacity: 1; }

.fse-sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--fse-cream);
  border-radius: var(--fse-radius-lg) var(--fse-radius-lg) 0 0;
  box-shadow: 0 -10px 44px rgba(0,0,0,.35);
  transform: translateY(100%);
  transition: transform .38s var(--fse-ease-spring);
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
}
.fse-sheet[aria-hidden="false"] .fse-sheet__panel { transform: none; }

.fse-sheet__close, button.fse-sheet__close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(28,28,28,.55);
  color: var(--fse-cream);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s var(--fse-ease-spring);
}
.fse-sheet__close:hover, button.fse-sheet__close:hover { background: var(--fse-hot); transform: rotate(90deg); }

.fse-sheet__img-wrap {
  position: relative;
  width: 100%;
  height: 34vh;
  max-height: 190px;
  min-height: 130px;
  background: var(--fse-sand);
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.fse-sheet__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.fse-sheet__img-dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.fse-sheet__img-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(250,246,240,.5);
  box-shadow: 0 1px 3px rgba(28,28,28,.4);
  transition: background .15s, transform .15s;
}
.fse-sheet__img-dot--activo {
  background: var(--fse-gold);
  transform: scale(1.3);
}

.fse-sheet__body {
  overflow-y: auto;
  padding: 18px 20px 8px;
  flex: 1;
}
.fse-sheet__title {
  font-family: var(--fse-font-display);
  font-size: 1.25rem;
  color: var(--fse-carbon);
  margin-bottom: 4px;
}
.fse-sheet__desc {
  font-size: var(--fse-text-sm);
  color: var(--fse-muted);
  margin-bottom: 14px;
}
.fse-sheet__desc[hidden] { display: none; }

.fse-sheet__composicion {
  font-size: var(--fse-text-sm);
  color: var(--fse-muted);
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0;
}

.fse-sheet__section { margin-bottom: 18px; }
.fse-sheet__section-title {
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fse-carbon);
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.fse-sheet__section-hint {
  font-size: .72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fse-muted);
}

/* Wrapper solo para el degradado de "hay más, deslizá →" -- position:relative
   necesario para el ::after de abajo. Sin fondo/borde propio a propósito
   (pedido explícito del usuario: "que las salsas queden como están") -- los
   chips se quedan sueltos, igual que siempre, solo con la barra de scroll
   visible y el degradado agregados antes. */
.fse-sheet__options-wrap { position: relative; }
.fse-sheet__options {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar VISIBLE a propósito -- pedido explícito del usuario ("que se
     vea que es una barra con scroll y no que quede como si no fuera una
     barra"): antes se ocultaba (scrollbar-width:none), sin ninguna pista de
     que había más opciones fuera de vista. Fina y del color de acento para
     no romper el estilo. */
  scrollbar-width: thin;
  scrollbar-color: var(--fse-gold) transparent;
}
.fse-sheet__options::-webkit-scrollbar { display: block; height: 5px; }
.fse-sheet__options::-webkit-scrollbar-track { background: transparent; }
.fse-sheet__options::-webkit-scrollbar-thumb { background: var(--fse-gold); border-radius: 10px; }
/* Degradado en el borde derecho -- refuerza visualmente "esto sigue" incluso
   antes de tocar la barra (la barra sola, muy fina, puede pasar
   desapercibida en un vistazo rápido). Se desvanece solo si ya no queda
   nada por scrollear (JS agrega/saca .fse-sheet__options-wrap--fin, ver
   sincronizarFadeOptions() en fse-public.js). */
.fse-sheet__options-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 10px;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--fse-cream));
  pointer-events: none;
  transition: opacity .2s ease;
}
.fse-sheet__options-wrap--fin::after { opacity: 0; }
.fse-sheet-option, button.fse-sheet-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--fse-sand);
  border: 1.5px solid var(--fse-border);
  border-radius: 999px;
  padding: 7px 12px 7px 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .1s;
}
.fse-sheet-option:active { transform: scale(.96); }
.fse-sheet-option__check {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--fse-border);
  background: var(--fse-cream);
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  position: relative;
}
.fse-sheet-option__nombre {
  font-size: .82rem;
  font-weight: 700;
  color: var(--fse-carbon);
  white-space: nowrap;
}
.fse-sheet-option__precio {
  font-size: .74rem;
  font-weight: 700;
  color: var(--fse-hot);
  white-space: nowrap;
}
.fse-sheet-option__precio--gratis { color: var(--fse-gold-dim); }

/* button.fse-sheet-option.fse-sheet-option--activo (no solo "button.fse-sheet-
   option--activo"): el reset del tema trae también "button:focus,
   button:hover { background:#cc3366 }" — con el foco que le queda a un
   <button> después de un click (sin :hover), esa regla empata en
   especificidad con un solo "tipo+clase" y gana por orden de carga. Sumar
   la clase base ".fse-sheet-option" además de ".fse-sheet-option--activo" le
   agrega el punto de especificidad que hace falta para ganarle siempre. */
.fse-sheet-option--activo,
button.fse-sheet-option.fse-sheet-option--activo {
  border-color: var(--fse-gold);
  background: rgba(201,162,75,.14);
}
.fse-sheet-option--activo .fse-sheet-option__check {
  background: var(--fse-gold);
  border-color: var(--fse-gold);
}
.fse-sheet-option--activo .fse-sheet-option__check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 800;
  color: var(--fse-carbon);
}
.fse-sheet-option--disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.fse-sheet__notas {
  /* Pedido explícito del usuario: que no ocupe todo el ancho de pantalla --
     el recuadro (fondo+borde+radio) ya lo tenía desde antes, lo único que
     cambia acá es el ancho. */
  width: 88%;
  background: var(--fse-sand);
  border: 1.5px solid var(--fse-border);
  border-radius: var(--fse-radius-sm);
  padding: 10px 12px;
  font-family: var(--fse-font-body);
  font-size: .86rem;
  color: var(--fse-carbon);
  resize: vertical;
}
.fse-sheet__notas:focus { outline: none; border-color: var(--fse-gold); }

.fse-sheet__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--fse-border);
  background: var(--fse-cream);
  flex-shrink: 0;
}
.fse-sheet__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.fse-sheet__add {
  flex: 1;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHECKOUT
   ══════════════════════════════════════════════════════════════════════════════ */
.fse-co-screen { display: block; }
.fse-co-screen[hidden] { display: none; }

.fse-container--narrow { max-width: 640px; margin: 0 auto; padding: 0 16px 60px; }

/* Checkout y cuenta comparten estas clases .fse-co-*. El formulario de
   checkout y "Mi cuenta" quedan CLAROS (hueso/blanco cálido, foco en
   legibilidad del formulario); la pantalla de "Pedido recibido" es la única
   con fondo carbón oscuro (ver #fseco-confirm más abajo — sensación de
   cierre/ceremonia, regla 3 del brief), aunque vive dentro del mismo
   contenedor .fse-checkout-page. */
.fse-checkout-page, .fse-account-page {
  min-height: 100vh;
  background: var(--fse-cream);
}
.fse-checkout-page #fseco-confirm {
  background: var(--fse-carbon);
  min-height: 100vh;
}

.fse-account-page #fsea-login-btn {
  background: var(--fse-hot);
  color: var(--fse-cream);
  box-shadow: 0 4px 16px rgba(140,28,19,.4);
}
.fse-account-page #fsea-login-btn:hover { background: var(--fse-fire); }

.fse-checkout-page .fse-co-title, .fse-account-page .fse-co-title {
  font-family: var(--fse-font-body);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--fse-carbon);
  margin: 32px 0 18px;
  animation: fse-co-title-in .5s var(--fse-ease-spring) backwards;
}
@keyframes fse-co-title-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.fse-checkout-page .fse-co-subtitle, .fse-account-page .fse-co-subtitle { display: block; font-size: .9rem; font-weight: 400; color: var(--fse-muted); margin-top: 2px; }
.fse-checkout-page .fse-co-section-title, .fse-account-page .fse-co-section-title { font-size: 1.1rem; font-weight: 700; color: var(--fse-carbon); margin: 28px 0 12px; }

/* Tarjetas: hueso sobre el fondo blanco cálido de la página — cada una con
   un acento lateral dorado (soporte, no acción — regla 2 del brief); ya no
   hay rotación de colores decorativa por posición. */
.fse-checkout-page .fse-co-card, .fse-account-page .fse-co-card {
  position: relative;
  background: var(--fse-sand);
  border-radius: var(--fse-radius-lg);
  box-shadow: var(--fse-shadow-card);
  border: 1px solid var(--fse-border);
  color: var(--fse-carbon);
  padding: 22px 22px 22px 25px;
  margin-bottom: 16px;
  transition: box-shadow var(--fse-duration), transform var(--fse-duration);
  overflow: hidden;
  animation: fse-co-card-in .5s var(--fse-ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.fse-checkout-page .fse-co-card::before, .fse-account-page .fse-co-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--fse-gold);
}
@keyframes fse-co-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fse-checkout-page .fse-co-title, .fse-account-page .fse-co-title,
  .fse-checkout-page .fse-co-card, .fse-account-page .fse-co-card { animation: none; }
}
.fse-checkout-page .fse-co-card:focus-within, .fse-account-page .fse-co-card:focus-within { box-shadow: 0 4px 20px rgba(28,28,28,.14), 0 0 0 2px rgba(201,162,75,.4); }
/* .fse-co-card--dark: el panel de resumen (tiempo/total/estado) de la
   confirmación — a propósito más oscuro que el carbón de fondo, con borde
   dorado, para leerse como "el recibo" dentro de la pantalla de cierre. */
.fse-checkout-page .fse-co-card--dark, .fse-account-page .fse-co-card--dark {
  background: var(--fse-smoke);
  color: var(--fse-cream);
  border-color: var(--fse-gold);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.fse-checkout-page .fse-co-card--dark::before, .fse-account-page .fse-co-card--dark::before { background: var(--fse-gold); }
.fse-checkout-page .fse-co-card__title, .fse-account-page .fse-co-card__title {
  font-size: var(--fse-text-sm);
  font-weight: 800;
  color: var(--fse-muted);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fse-checkout-page .fse-co-card--dark .fse-co-card__title, .fse-account-page .fse-co-card--dark .fse-co-card__title { color: var(--fse-gold); }

/* Items summary */
.fse-checkout-page .fse-co-items, .fse-account-page .fse-co-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.fse-checkout-page .fse-co-item, .fse-account-page .fse-co-item { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.fse-checkout-page .fse-co-item__qty, .fse-account-page .fse-co-item__qty { background: var(--fse-gold); color: var(--fse-carbon); border-radius: 6px; padding: 1px 7px; font-size: .8rem; font-weight: 700; flex-shrink: 0; align-self: flex-start; }
.fse-checkout-page .fse-co-item__main, .fse-account-page .fse-co-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fse-checkout-page .fse-co-item__nombre, .fse-account-page .fse-co-item__nombre { color: var(--fse-carbon); }
.fse-checkout-page .fse-co-item__config, .fse-account-page .fse-co-item__config { font-size: .74rem; color: var(--fse-muted); }
.fse-checkout-page .fse-co-item__precio, .fse-account-page .fse-co-item__precio { font-weight: 700; color: var(--fse-hot); flex-shrink: 0; }

/* Subtotals */
.fse-checkout-page .fse-co-subtotals, .fse-account-page .fse-co-subtotals { border-top: 1px solid var(--fse-border); padding-top: 12px; }
.fse-checkout-page .fse-co-subtotal-row, .fse-account-page .fse-co-subtotal-row { display: flex; justify-content: space-between; font-size: .88rem; color: var(--fse-muted); padding: 3px 0; }
.fse-checkout-page .fse-co-discount, .fse-account-page .fse-co-discount { color: var(--fse-gold-dim); font-weight: 700; }
.fse-checkout-page .fse-co-total-row, .fse-account-page .fse-co-total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.1rem; padding-top: 8px; border-top: 1px solid var(--fse-border); margin-top: 6px; color: var(--fse-carbon); }
.fse-checkout-page .fse-co-total-amount, .fse-account-page .fse-co-total-amount {
  color: var(--fse-hot);
}
.fse-checkout-page .fse-co-edit-link, .fse-account-page .fse-co-edit-link,
.fse-checkout-page a.fse-co-edit-link, .fse-account-page a.fse-co-edit-link { font-size: .82rem; color: var(--fse-muted); text-decoration: none; display: inline-block; margin-top: 10px; }
.fse-checkout-page .fse-co-edit-link:hover, .fse-account-page .fse-co-edit-link:hover,
.fse-checkout-page a.fse-co-edit-link:hover, .fse-account-page a.fse-co-edit-link:hover { color: var(--fse-hot); }

/* Tipo buttons — el estado activo usa dorado ("seleccionado", regla 2), no
   el rojo vino que queda reservado solo para la acción de compra. */
.fse-co-tipo-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.fse-checkout-page .fse-co-tipo-btn, .fse-account-page .fse-co-tipo-btn {
  padding: 13px 6px;
  border-radius: var(--fse-radius);
  border: 1.5px solid var(--fse-border);
  background: var(--fse-cream);
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s var(--fse-ease-spring), border-color .18s var(--fse-ease), color .18s var(--fse-ease), background .18s var(--fse-ease), box-shadow .18s var(--fse-ease);
  font-size: 0.86rem;
  color: var(--fse-muted);
  text-align: center;
  line-height: 1.3;
  /* El reset del tema activo pone "white-space:nowrap" en TODO <button> y acá
     no hay ninguna regla propia que lo pise (mismo bug ya documentado para
     .fse-cat-tab__label) — sin esto, "Retiro personal" se salía del botón en
     vez de partirse en 2 líneas. */
  white-space: normal;
}
.fse-checkout-page .fse-co-tipo-btn:hover, .fse-account-page .fse-co-tipo-btn:hover { border-color: var(--fse-gold); color: var(--fse-carbon); background: var(--fse-sand); transform: translateY(-3px); box-shadow: 0 6px 16px rgba(28,28,28,.12); }
.fse-checkout-page .fse-co-tipo-btn:active, .fse-account-page .fse-co-tipo-btn:active { transform: scale(.94); transition-duration: .1s; }
.fse-checkout-page .fse-co-tipo-btn--active, .fse-account-page .fse-co-tipo-btn--active {
  border-color: transparent;
  background: var(--fse-gold);
  color: var(--fse-carbon);
  box-shadow: 0 3px 14px rgba(201,162,75,.45);
  transform: translateY(-2px) scale(1.02);
  animation: fse-tipo-pop .35s var(--fse-ease-spring);
}
@keyframes fse-tipo-pop {
  0%   { transform: translateY(-2px) scale(1.02); }
  40%  { transform: translateY(-4px) scale(1.1); }
  100% { transform: translateY(-2px) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .fse-checkout-page .fse-co-tipo-btn--active, .fse-account-page .fse-co-tipo-btn--active { animation: none; }
}

/* Panels */
.fse-co-panel { margin-top: 4px; }

.fse-checkout-page .fse-co-comprobante-field input[type=file], .fse-account-page .fse-co-comprobante-field input[type=file] { padding: 10px 12px; cursor: pointer; color: var(--fse-carbon); }

/* 3 botones (Tomar foto / Elegir de galería / Ver QR de pago) -- a pedido
   explícito del usuario, reemplazan el <input type=file> nativo (que
   queda oculto, ver checkout.php). Borde punteado + ícono arriba del
   texto, mismo espíritu que la referencia que mandó. */
.fse-co-comprobante-botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fse-checkout-page .fse-co-comprobante-btn, .fse-account-page .fse-co-comprobante-btn {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--fse-cream);
  border: 1.5px solid var(--fse-border);
  border-radius: var(--fse-radius-sm);
  padding: 12px 10px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--fse-carbon);
  cursor: pointer;
  text-align: center;
  /* Pedido explícito del usuario: "más visibles y efecto sombra" -- antes
     era transparente/punteado/gris (fundido con el fondo). Sombra sutil en
     reposo + más marcada al tocar, mismo lenguaje que .fse-co-tipo-btn de
     arriba (En mesa/Envío/Retiro). */
  box-shadow: 0 2px 8px rgba(28,28,28,.1);
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .15s var(--fse-ease-spring);
}
.fse-checkout-page .fse-co-comprobante-btn:hover, .fse-account-page .fse-co-comprobante-btn:hover {
  border-color: var(--fse-gold);
  background: var(--fse-white);
  box-shadow: 0 6px 16px rgba(28,28,28,.16);
  transform: translateY(-2px);
}
.fse-checkout-page .fse-co-comprobante-btn:active, .fse-account-page .fse-co-comprobante-btn:active {
  transform: scale(.96);
  box-shadow: 0 2px 6px rgba(28,28,28,.12);
}
.fse-co-comprobante-preview { margin-top: 8px; }
.fse-checkout-page .fse-co-comprobante-preview img, .fse-account-page .fse-co-comprobante-preview img {
  max-width: 140px;
  max-height: 140px;
  border-radius: var(--fse-radius-sm);
  border: 1.5px solid var(--fse-border);
  display: block;
}

.fse-checkout-page .fse-co-mesa-chip, .fse-account-page .fse-co-mesa-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--fse-cream); color: var(--fse-carbon); border: 1px solid var(--fse-border); border-radius: 20px; padding: 6px 14px; font-size: .9rem; font-weight: 600; }
.fse-checkout-page .fse-co-hint, .fse-account-page .fse-co-hint { font-size: .8rem; color: var(--fse-muted); margin: 8px 0 0; }

/* Form fields */
.fse-co-field { margin-bottom: 16px; }
.fse-checkout-page .fse-co-field label, .fse-account-page .fse-co-field label {
  display: block;
  font-size: var(--fse-text-sm);
  font-weight: 700;
  color: var(--fse-carbon);
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.fse-checkout-page .fse-co-input, .fse-account-page .fse-co-input,
.fse-checkout-page .fse-co-select, .fse-account-page .fse-co-select,
.fse-checkout-page .fse-co-textarea, .fse-account-page .fse-co-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--fse-border);
  border-radius: var(--fse-radius-sm);
  font-size: var(--fse-text-base);
  font-family: inherit;
  background: var(--fse-cream);
  color: var(--fse-carbon);
  box-sizing: border-box;
  transition: border-color var(--fse-duration), box-shadow var(--fse-duration), background var(--fse-duration);
  -webkit-appearance: none;
  appearance: none;
}
.fse-checkout-page .fse-co-input:focus, .fse-account-page .fse-co-input:focus,
.fse-checkout-page .fse-co-select:focus, .fse-account-page .fse-co-select:focus,
.fse-checkout-page .fse-co-textarea:focus, .fse-account-page .fse-co-textarea:focus {
  outline: none;
  border-color: var(--fse-gold);
  background: var(--fse-white);
  box-shadow: 0 0 0 3px rgba(201,162,75,.25);
}
.fse-checkout-page .fse-co-input::placeholder, .fse-account-page .fse-co-input::placeholder,
.fse-checkout-page .fse-co-textarea::placeholder, .fse-account-page .fse-co-textarea::placeholder { color: rgba(28,28,28,.35); }
.fse-co-input--upper { text-transform: uppercase; letter-spacing: .05em; }
.fse-co-textarea { resize: vertical; min-height: 80px; }
.fse-req { color: var(--fse-hot); }

/* Floating label: el texto vive DENTRO del input (placeholder=" " para poder
   usar :placeholder-shown) y sube/achica al enfocar o al quedar completo —
   evita el título fijo arriba del campo y suma la animación de foco. */
.fse-co-field--float { position: relative; margin-bottom: 16px; }
.fse-checkout-page .fse-co-field--float .fse-co-input, .fse-account-page .fse-co-field--float .fse-co-input {
  padding-top: 21px;
  padding-bottom: 7px;
}
.fse-checkout-page .fse-co-field--float label, .fse-account-page .fse-co-field--float label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: var(--fse-text-base);
  font-weight: 500;
  color: rgba(28,28,28,.45);
  letter-spacing: normal;
  pointer-events: none;
  transition: top .16s var(--fse-ease), transform .16s var(--fse-ease), font-size .16s var(--fse-ease), font-weight .16s var(--fse-ease), color .16s var(--fse-ease);
}
.fse-checkout-page .fse-co-field--float .fse-co-input:focus + label,
.fse-account-page .fse-co-field--float .fse-co-input:focus + label,
.fse-checkout-page .fse-co-field--float .fse-co-input:not(:placeholder-shown) + label,
.fse-account-page .fse-co-field--float .fse-co-input:not(:placeholder-shown) + label {
  top: 12px;
  transform: translateY(0);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--fse-gold-dim);
}
.fse-co-field--float .fse-co-hint { margin-left: 2px; }

/* Cuenta guardada */
/* :not([hidden]) obligatorio — mismo patrón ya documentado varias veces en
   este archivo: sin esto, el bloque "cuenta guardada" se ve siempre (vacío,
   sin nombre) para cualquier visitante sin cuenta, no solo para quien
   realmente tiene una guardada. */
.fse-checkout-page .fse-co-cuenta-saved:not([hidden]), .fse-account-page .fse-co-cuenta-saved:not([hidden]) { display: flex; align-items: center; gap: 12px; background: rgba(201,162,75,.1); border: 1px solid rgba(201,162,75,.3); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.fse-co-cuenta-avatar { font-size: 2rem; }
.fse-co-cuenta-info { flex: 1; }
.fse-checkout-page .fse-co-cuenta-info strong, .fse-account-page .fse-co-cuenta-info strong { display: block; color: var(--fse-carbon); }
.fse-co-puntos-badge { background: var(--fse-gold); color: var(--fse-carbon); border-radius: 20px; padding: 2px 9px; font-size: .78rem; font-weight: 700; display: inline-block; margin-top: 3px; }
.fse-checkout-page .fse-co-cuenta-cambiar, .fse-account-page .fse-co-cuenta-cambiar { background: none; border: none; color: var(--fse-muted); font-size: .82rem; cursor: pointer; text-decoration: underline; }
.fse-checkout-page .fse-co-cuenta-cambiar:hover, .fse-account-page .fse-co-cuenta-cambiar:hover { color: var(--fse-hot); }

/* Cupón */
.fse-co-cupon-input-wrap { display: flex; gap: 8px; }
.fse-co-cupon-input-wrap .fse-co-input { flex: 1; }

/* Bloque "Beneficios" más compacto: sin la etiqueta separada arriba del
   cupón (el placeholder + el título "🎁 Beneficios" ya bastan de contexto) y
   con menos padding/margen que el resto de las tarjetas del checkout. */
.fse-checkout-page #fseco-card-beneficios, .fse-account-page #fseco-card-beneficios {
  padding: 14px 16px 14px 19px;
}
.fse-checkout-page #fseco-card-beneficios .fse-co-card__title, .fse-account-page #fseco-card-beneficios .fse-co-card__title {
  margin-bottom: 10px;
  font-size: .78rem;
}
.fse-checkout-page #fseco-card-beneficios .fse-co-cupon-row, .fse-account-page #fseco-card-beneficios .fse-co-cupon-row {
  margin-bottom: 0;
}
/* Pedido explícito del usuario: que la fila de cupón quede más chica que el
   bloque de Notas de al lado -- el input/botón de acá heredaban el mismo
   tamaño "normal" que el resto del checkout, y con el botón outline (borde
   grueso, texto en mayúsculas) terminaba pesando visualmente más que todo
   lo demás en esta tarjeta compacta. */
.fse-checkout-page #fseco-card-beneficios .fse-co-input, .fse-account-page #fseco-card-beneficios .fse-co-input {
  padding: 8px 10px;
  font-size: .8rem;
}
.fse-checkout-page #fseco-card-beneficios #fseco-cupon-apply, .fse-account-page #fseco-card-beneficios #fseco-cupon-apply {
  padding: 6px 12px;
  font-size: .72rem;
}
#fseco-puntos-section:not([hidden]) { margin-top: 14px; }
.fse-checkout-page .fse-co-msg, .fse-account-page .fse-co-msg { font-size: .83rem; margin: 6px 0 0; min-height: 1.1em; }
.fse-checkout-page .fse-co-msg--ok, .fse-account-page .fse-co-msg--ok { color: var(--fse-gold-dim); }
.fse-checkout-page .fse-co-msg--error, .fse-account-page .fse-co-msg--error { color: var(--fse-hot); }

/* Puntos toggle */
.fse-checkout-page .fse-co-puntos-info, .fse-account-page .fse-co-puntos-info { font-size: .88rem; color: var(--fse-muted); margin-bottom: 10px; }
.fse-checkout-page .fse-co-toggle-label, .fse-account-page .fse-co-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--fse-carbon); }
.fse-co-toggle-label input[type="checkbox"] { display: none; }
.fse-checkout-page .fse-co-toggle-sw, .fse-account-page .fse-co-toggle-sw {
  width: 42px; height: 24px; border-radius: 12px; background: var(--fse-border);
  position: relative; transition: background .2s; flex-shrink: 0;
}
.fse-co-toggle-sw::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--fse-cream);
  box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: left .2s;
}
.fse-checkout-page .fse-co-toggle-label input:checked + .fse-co-toggle-sw, .fse-account-page .fse-co-toggle-label input:checked + .fse-co-toggle-sw { background: var(--fse-gold); }
.fse-co-toggle-label input:checked + .fse-co-toggle-sw::after { left: 21px; }

/* Error global + submit */
.fse-checkout-page .fse-co-error, .fse-account-page .fse-co-error {
  background: rgba(140,28,19,.08); border: 1px solid rgba(140,28,19,.3); border-radius: 9px;
  padding: 12px 16px; color: var(--fse-hot); font-size: .9rem; margin-bottom: 12px;
}
.fse-co-submit { margin-top: 4px; }
.fse-checkout-page .fse-co-terms, .fse-account-page .fse-co-terms { font-size: .76rem; color: var(--fse-muted); text-align: center; margin-top: 8px; }
.fse-checkout-page .fse-co-muted, .fse-account-page .fse-co-muted { color: var(--fse-muted); font-size: .85rem; }

.fse-checkout-page .fse-co-comprobante-msg, .fse-account-page .fse-co-comprobante-msg {
  border-radius: var(--fse-radius-sm);
  padding: 12px 14px;
  font-size: .86rem;
  margin-bottom: 14px;
  line-height: 1.5;
}
/* --ok solo aparece en la pantalla de confirmación (fondo carbón) — texto
   oscuro (var(--fse-carbon)) ahí adentro casi no se leía sobre el tinte
   dorado translúcido. Blanco cálido + borde/ícono dorado da contraste real. */
.fse-checkout-page .fse-co-comprobante-msg--ok, .fse-account-page .fse-co-comprobante-msg--ok { background: rgba(201,162,75,.14); border: 1.5px solid var(--fse-gold); color: var(--fse-cream); }
/* Mismo motivo que --ok: rojo vino puro no da contraste sobre el fondo
   carbón de esta pantalla (ya documentado para #fseco-conf-total/el badge
   "cancelado") — acá el mismo rojo claro que usa .fse-co-estado-badge--cancelado. */
.fse-checkout-page .fse-co-comprobante-msg--err, .fse-account-page .fse-co-comprobante-msg--err { background: rgba(140,28,19,.16); border: 1.5px solid rgba(255,143,128,.4); color: #ff8f80; }

/* Confirmation screen — única pantalla en fondo carbón (ver #fseco-confirm
   más arriba). */
.fse-checkout-page .fse-co-card--confirm-items, .fse-account-page .fse-co-card--confirm-items {
  border-top: 3px solid var(--fse-gold);
}
.fse-checkout-page .fse-co-card--confirm-items::before, .fse-account-page .fse-co-card--confirm-items::before { display: none; }
.fse-co-card--confirm-items .fse-co-items { margin-bottom: 0; }
.fse-co-card--confirm-items .fse-co-item { padding: 4px 0; }

/* Pantalla de confirmación más compacta en general — menos padding por
   tarjeta y menos margen entre bloques, para que un pedido típico entre
   sin necesidad de scroll. */
#fseco-confirm .fse-co-card { padding: 16px 18px; margin-bottom: 12px; }
#fseco-confirm .fse-co-card__title { margin-bottom: 10px; }
#fseco-confirm .fse-co-puntos-ganados { margin: 0 0 12px; padding: 12px 16px; }
#fseco-confirm .fse-co-confirm-actions { margin-top: 4px; }

.fse-checkout-page .fse-co-confirm-hero, .fse-account-page .fse-co-confirm-hero {
  text-align: center;
  padding: 30px 16px 14px;
}
.fse-co-confirm-check {
  width: 72px; height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--fse-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  color: var(--fse-carbon);
  box-shadow: 0 0 0 8px rgba(201,162,75,.18), 0 8px 24px rgba(201,162,75,.4);
  animation: fse-pop .55s var(--fse-ease-spring) both;
}
@keyframes fse-pop {
  0% { transform: scale(.4) rotate(-15deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.fse-checkout-page .fse-co-confirm-hero h1, .fse-account-page .fse-co-confirm-hero h1 {
  font-family: var(--fse-font-body);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--fse-cream);
  margin: 0 0 8px;
  animation: fse-co-title-in .5s var(--fse-ease-spring) .15s backwards;
}
.fse-co-confirm-num {
  font-size: var(--fse-text-md);
  font-weight: 800;
  color: var(--fse-gold);
  background: rgba(250,246,240,.08);
  display: inline-block;
  padding: 5px 18px;
  border-radius: 20px;
  letter-spacing: .03em;
}

/* Estado en vivo — plato girando en 3D real (perspective + rotateY, no un
   giro plano) mientras el cliente espera que la cocina actualice el estado
   por polling. Va arriba, debajo del número de pedido, para que sea lo
   primero que se vea al confirmar. */
.fse-co-live-status {
  text-align: center;
  padding: 4px 16px 22px;
  animation: fse-co-card-in .5s var(--fse-ease-spring) .1s backwards;
}
.fse-co-live-status__stage {
  width: 76px;
  height: 76px;
  margin: 0 auto 10px;
  perspective: 400px;
}
/* El lockup completo (velero + "La Fragata Resto-Bar") necesita más aire que
   el emoji/ícono solo para que el texto se alcance a leer -- pedido
   explícito del usuario ("que se vean un poco más grandecitos"). */
.fse-co-live-status__stage--logo {
  width: 150px;
  height: 150px;
}
.fse-co-live-status__plate {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  transform-style: preserve-3d;
  animation: fse-plate-spin-3d 3.4s linear infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
@keyframes fse-plate-spin-3d {
  0%   { transform: rotateY(0deg) rotateX(10deg); }
  100% { transform: rotateY(360deg) rotateX(10deg); }
}
/* Logo propio del rubro (FSE_Vertical_Bridge::logo_url()) en vez del emoji
   genérico -- mismo contenedor/animación, solo cambia qué hay adentro. */
/* Pedido explícito del usuario: quieta (no gira) y en blanco (el logo es un
   velero negro sobre transparente -- acá, sobre el fondo oscuro de la
   confirmación, se veía casi invisible; brightness(0) invert(1) lo pinta
   blanco sólido sin necesitar un segundo archivo). */
.fse-co-live-status__plate--logo {
  object-fit: contain;
  padding: 6px;
  animation: none;
  filter: brightness(0) invert(1) drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.fse-checkout-page .fse-co-live-status__msg, .fse-account-page .fse-co-live-status__msg {
  color: rgba(250,246,240,.65);
  font-size: .84rem;
  line-height: 1.4;
  margin: 0 0 12px;
}
.fse-co-estado-badge--lg { font-size: .92rem; padding: 7px 18px; }
@media (prefers-reduced-motion: reduce) {
  .fse-co-live-status__plate { animation: none; }
}

/* ── Pasos del estado del pedido (Pendiente/Preparando/Listo/Entregado) ────────
   Reemplaza la píldora única que antes solo cambiaba de texto -- a pedido
   explícito del usuario, los 4 pasos quedan siempre visibles para que el
   cliente sepa qué esperar, y cada uno pasa a verde a medida que el pedido
   los va cumpliendo (ver actualizarPasosEstado() en fse-checkout.js). Rojo/
   verde son deliberadamente literales acá (semáforo, universal) aunque el
   resto de la paleta del motor no use verde -- es el pedido explícito, y un
   tracker de estado se beneficia más de la convención semafórica que de la
   identidad de marca. */
.fse-co-steps {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.fse-co-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  max-width: 90px;
}
.fse-co-step__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #b0413a;
  box-shadow: 0 0 0 3px rgba(176,65,58,.22);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.fse-co-step__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  color: rgba(250,246,240,.55);
  transition: color .3s ease;
}
/* Línea conectora entre pasos -- pura decoración de --hecho/--actual, no
   necesita JS propio: cada .fse-co-step ya sabe su propio estado. */
.fse-co-step:not(:last-child) {
  position: relative;
}
.fse-co-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: rgba(176,65,58,.35);
  transition: background .3s ease;
  z-index: -1;
}
.fse-co-step--hecho .fse-co-step__dot,
.fse-co-step--actual .fse-co-step__dot {
  background: #3aa76d;
  box-shadow: 0 0 0 3px rgba(58,167,109,.25);
}
.fse-co-step--actual .fse-co-step__dot {
  animation: fse-pulse 1.4s ease-in-out infinite;
}
.fse-co-step--hecho .fse-co-step__label,
.fse-co-step--actual .fse-co-step__label {
  color: var(--fse-cream);
}
.fse-co-step--hecho:not(:last-child)::after { background: rgba(58,167,109,.5); }
.fse-co-step--cancelado .fse-co-step__dot { background: rgba(250,246,240,.25); box-shadow: none; animation: none; }
.fse-co-step--cancelado .fse-co-step__label { color: rgba(250,246,240,.4); }
@media (prefers-reduced-motion: reduce) {
  .fse-co-step--actual .fse-co-step__dot { animation: none; }
}

/* :not([hidden]) obligatorio — misma regla de especificidad ya documentada
   en este archivo para .fse-cart-empty/.fse-card__add-badge: sin esto, la fila
   "Cliente" (oculta cuando no hay nombre/teléfono) se ve igual como una
   fila vacía con su borde. */
.fse-co-confirm-row:not([hidden]) { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(250,246,240,.12); font-size: .95rem; }
.fse-co-confirm-row:last-child { border-bottom: none; }
.fse-checkout-page .fse-co-card--dark .fse-co-confirm-row, .fse-account-page .fse-co-card--dark .fse-co-confirm-row { color: rgba(250,246,240,.75); }
.fse-checkout-page .fse-co-card--dark .fse-co-confirm-row strong, .fse-account-page .fse-co-card--dark .fse-co-confirm-row strong { color: var(--fse-cream); }
/* El total del pedido es la única cifra en rojo vino dentro del recibo — el
   resto del panel se queda en dorado/blanco cálido (regla 1: el rojo vino
   no se usa decorativamente). */
/* Texto rojo vino puro sobre el panel oscuro no llega a AA (rojo vino es un
   tono deliberadamente oscuro) — se resuelve como una insignia sólida en
   rojo vino con texto blanco cálido, que sí da ~8.5:1 de contraste y sigue
   leyéndose como "el número que importa" del recibo. */
#fseco-conf-total {
  background: var(--fse-hot) !important;
  color: var(--fse-cream) !important;
  padding: 3px 12px;
  border-radius: 20px;
  display: inline-block;
}

/* Estado badge — dorado para todo estado normal, rojo vino solo para
   cancelado (alerta real, regla 1 y regla "estados de alerta/urgencia"). */
.fse-co-estado-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 5px 13px; font-size: .82rem; font-weight: 700; background: rgba(201,162,75,.16); color: var(--fse-gold); transition: background .25s, color .25s; }
.fse-co-estado-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: fse-pulse 1.4s ease-in-out infinite; }
@keyframes fse-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.fse-co-estado-badge--pendiente       { background: rgba(201,162,75,.16); color: var(--fse-gold); }
.fse-co-estado-badge--en_preparacion  { background: rgba(201,162,75,.16); color: var(--fse-gold); }
.fse-co-estado-badge--listo           { background: rgba(201,162,75,.28); color: #e0c07e; }
.fse-co-estado-badge--entregado       { background: rgba(250,246,240,.16); color: var(--fse-cream); }
.fse-co-estado-badge--entregado .fse-co-estado-dot { animation: none; }
.fse-co-estado-badge--cancelado       { background: rgba(140,28,19,.28); color: #ff8f80; }
.fse-co-estado-badge--cancelado .fse-co-estado-dot { animation: none; }

/* Puntos ganados — pop de dorado deliberado contra el carbón de fondo. */
.fse-co-puntos-ganados {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--fse-gold);
  border: 2px solid var(--fse-gold-dim);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 12px 0;
  box-shadow: 0 4px 16px rgba(201,162,75,.3);
  animation: fse-co-card-in .5s var(--fse-ease-spring) .2s backwards;
}
.fse-co-puntos-ganados__icon { font-size: 2.1rem; animation: fse-star-spin 1.8s var(--fse-ease-spring) .3s 1; }
@keyframes fse-star-spin {
  0%   { transform: scale(0) rotate(-40deg); }
  60%  { transform: scale(1.25) rotate(15deg); }
  100% { transform: scale(1) rotate(0); }
}
.fse-co-puntos-ganados strong { font-size: 1.3rem; color: var(--fse-carbon); }
.fse-co-puntos-ganados,
.fse-co-puntos-ganados .fse-co-muted { color: var(--fse-carbon); }
@media (prefers-reduced-motion: reduce) {
  .fse-co-puntos-ganados, .fse-co-puntos-ganados__icon { animation: none; }
}

/* Confirm actions */
.fse-co-confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* Dentro de la confirmación (fondo carbón) el botón secundario "Volver al
   menú" necesita la variante clara del outline — el resto de checkout/cuenta
   usa la base (carbón sobre hueso) sin pisar nada acá. */
.fse-checkout-page .fse-co-confirm-actions .fse-btn--outline {
  border-color: rgba(250,246,240,.4);
  color: var(--fse-cream);
}
.fse-checkout-page .fse-co-confirm-actions .fse-btn--outline:hover {
  background: rgba(250,246,240,.12);
  color: var(--fse-cream);
}


/* ══════════════════════════════════════════════════════════════════════════════
   ACCOUNT PAGE  (.fsea-*)
   ══════════════════════════════════════════════════════════════════════════════ */
.fsea-header { display: flex; align-items: center; gap: 14px; margin-bottom: 0; }
.fsea-avatar { font-size: 2.5rem; }
.fsea-header__info { flex: 1; }
.fse-account-page .fsea-nombre { font-size: 1.1rem; font-weight: 800; color: var(--fse-carbon); margin: 0; }
.fse-account-page .fsea-tel { font-size: .85rem; color: var(--fse-muted); }

.fsea-puntos-card__left { display: flex; flex-direction: column; gap: 4px; }

.fsea-ped-item { }

/* Badges — reservados a estado/urgencia; dorado para neutral/positivo, rojo
   vino solo para alertas reales (regla "alerta/urgencia" del brief). */
.fse-badge { border-radius: 20px; padding: 3px 10px; font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; }
.fse-badge--warn    { background: rgba(201,162,75,.18); color: var(--fse-gold-dim); }
.fse-badge--info    { background: rgba(28,28,28,.08); color: var(--fse-carbon); }
.fse-badge--ok      { background: rgba(201,162,75,.28); color: var(--fse-gold-dim); }
.fse-badge--muted   { background: var(--fse-sand); color: var(--fse-muted); }
.fse-badge--danger  { background: rgba(140,28,19,.12); color: var(--fse-hot); }

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS extra
   ══════════════════════════════════════════════════════════════════════════════ */
.fse-btn--full { width: 100%; }
.fse-btn--sm   { padding: 7px 14px; font-size: .85rem; }

/* ── Puntos card en cuenta ─────────────────────────────────────────────────────
   Se deja siempre oscura (carbón) a propósito, como una "tarjeta de socio"
   que resalta incluso sobre el fondo hueso del resto de la página. */
.fsea-puntos-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fse-carbon);
  border: 1px solid var(--fse-gold);
  border-radius: var(--fse-radius-lg);
  padding: 22px 24px;
  color: var(--fse-cream);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}
.fsea-puntos-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(201,162,75,.1);
}
.fsea-puntos-num {
  font-size: clamp(2rem, 8vw, 2.8rem);
  font-weight: 900;
  color: var(--fse-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fsea-puntos-lbl { font-size: var(--fse-text-xs); color: rgba(250,246,240,.6); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.fsea-puntos-val { font-size: var(--fse-text-sm); color: rgba(250,246,240,.6); margin-top: 4px; }
.fsea-puntos-card__right { font-size: 3rem; opacity: .2; position: relative; }

/* Orden cards mejoradas */
.fsea-pedido-card { }
.fsea-pedido-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fse-border);
}
.fse-account-page .fsea-ped-num { font-size: var(--fse-text-base); font-weight: 800; color: var(--fse-carbon); flex: 1; }
.fse-account-page .fsea-ped-fecha { font-size: var(--fse-text-xs); color: var(--fse-muted); }
.fse-account-page .fsea-ped-items { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; font-size: var(--fse-text-sm); color: var(--fse-muted); }
.fsea-pedido-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--fse-border);
  padding-top: 12px;
}
.fse-account-page .fsea-ped-total { font-weight: 800; font-size: var(--fse-text-md); color: var(--fse-carbon); font-variant-numeric: tabular-nums; }

/* ── Checkout — vacío mejorado ───────────────────────────────────────────────── */
.fse-co-empty {
  text-align: center;
  padding: 80px 20px 100px;
}
.fse-co-empty__icon {
  font-size: 4rem;
  margin-bottom: 16px;
  display: block;
  opacity: .5;
}
.fse-checkout-page .fse-co-empty h2, .fse-account-page .fse-co-empty h2 {
  font-family: var(--fse-font-body);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--fse-carbon);
  margin-bottom: 8px;
}
.fse-checkout-page .fse-co-empty p, .fse-account-page .fse-co-empty p { color: var(--fse-muted); font-size: var(--fse-text-sm); margin-bottom: 24px; }

/* ── Total row más prominente ────────────────────────────────────────────────── */
.fse-checkout-page .fse-co-total-row, .fse-account-page .fse-co-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: var(--fse-text-lg);
  padding-top: 12px;
  border-top: 2px solid var(--fse-border);
  margin-top: 8px;
  color: var(--fse-carbon);
}
.fse-checkout-page .fse-co-total-amount, .fse-account-page .fse-co-total-amount {
  font-size: 1.35rem;
}

/* ── Submit button área ──────────────────────────────────────────────────────── */
.fse-checkout-page .fse-co-submit, .fse-account-page .fse-co-submit {
  margin-top: 8px;
  font-size: var(--fse-text-md);
  padding: 16px 24px;
  border-radius: var(--fse-radius);
  letter-spacing: .01em;
  /* Más vivo que el rojo vino del resto del sitio a propósito: es la única
     acción de cierre del checkout, le conviene destacar más que un botón
     secundario. Degradé en vez de un color plano para que se note incluso
     más "vivo" sin salirse de la familia de rojos de la marca. */
  background: linear-gradient(135deg, #e6402c, #c81f13);
  color: var(--fse-cream);
  animation: fse-co-submit-glow 1.8s ease-in-out infinite;
  transition: transform .18s var(--fse-ease-spring), box-shadow .18s var(--fse-ease), background .18s var(--fse-ease);
}
.fse-checkout-page .fse-co-submit:hover, .fse-account-page .fse-co-submit:hover {
  background: linear-gradient(135deg, #f04f3a, #d92a1b);
  transform: translateY(-2px);
}
.fse-checkout-page .fse-co-submit:active, .fse-account-page .fse-co-submit:active {
  transform: scale(.96);
  transition-duration: .1s;
}
@keyframes fse-co-submit-glow {
  0%, 100% { box-shadow: 0 4px 18px rgba(200,31,19,.5); }
  50%      { box-shadow: 0 6px 30px rgba(200,31,19,.8); }
}
@media (prefers-reduced-motion: reduce) {
  .fse-checkout-page .fse-co-submit, .fse-account-page .fse-co-submit { animation: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fse-featured__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 600px) {
  .fse-hero__actions { flex-direction: column; align-items: center; }
  .fse-featured__grid { grid-template-columns: 1fr; }
  .fse-counter-strip__inner { flex-direction: column; gap: 24px; }
  .fse-counter-sep { display: none; }
  .fse-container--narrow { padding-inline: 14px; }
}

@media (max-width: 400px) {
  .fse-fab__label { display: none; }
  /* Colapsado a solo ícono, mismo tratamiento "vidrio esmerilado" que
     .fse-cart-fab (catálogo) -- a pedido explícito del usuario ("el carrito
     de la home debe ser igual al del catálogo, con borde giratorio y color
     translúcido y el ícono blanco"), antes era un círculo rojo sólido sin
     btn-shine, se leía como un botón distinto en vez de la misma acción. */
  .fse-fab__main {
    width: 56px; height: 56px; padding: 0;
    justify-content: center;
    background: rgba(50, 50, 54, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 4px 20px rgba(28,28,28,.32), 0 0 0 4px rgba(140,28,19,.12), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .fse-fab__main:hover { background: rgba(50, 50, 54, .55); }
  .fse-cart-drawer__panel { width: 100vw; }
}