@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --bg: #0f0e1a;
  --bg-elev: #17152a;
  --gold: #d9b866;
  --gold-soft: #b89a58;
  --violet: #9a72e0;
  --blue: #5f8fe0;
  --text: #f3ede0;
  --text-dim: #c6bda8;
  --text-mute: #9a8f77;
  --line: rgba(217, 184, 102, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  line-height: 1.6;
}

h1, h2, h3, h4, .kq-display {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

a { color: inherit; text-decoration: none; }

.kq-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
.kq-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(15, 14, 26, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.kq-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; max-width: 1200px; margin: 0 auto; gap: 24px;
}
.kq-brand { display: flex; flex-direction: column; }
.kq-brand-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; color: var(--gold); font-weight: 700; }
.kq-brand-sub { font-size: 10px; letter-spacing: 3px; color: var(--text-mute); }
.kq-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.kq-nav a { font-size: 14px; color: var(--text-dim); transition: color .2s; }
.kq-nav a:hover { color: var(--gold); }
.kq-header-actions { display: flex; align-items: center; gap: 18px; }
.kq-user-link { font-size: 14px; color: var(--text-dim); transition: color .2s; }
.kq-user-link:hover { color: var(--gold); }
.kq-cart-link { position: relative; font-size: 14px; color: var(--text-dim); }
.kq-cart-badge {
  position: absolute; top: -10px; right: -14px;
  background: var(--gold); color: #1a1730; font-size: 11px;
  border-radius: 999px; padding: 1px 6px; font-weight: 600;
}
.kq-search { display: flex; }
.kq-search input {
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--text);
  padding: 7px 12px; border-radius: 4px 0 0 4px; font-family: 'Jost'; font-size: 13px; width: 150px;
}
.kq-search button {
  background: var(--gold); border: none; color: #1a1730; padding: 0 12px; border-radius: 0 4px 4px 0; cursor: pointer;
}

/* Mega menú: Productos > Categorías > Subcategorías, en columnas en
   cascada — pasás el mouse/dedo por una categoría y se abre la columna
   de subcategorías al lado, como en digitaloutlet.com.uy */
.kq-mega { position: relative; }
.kq-mega-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none; color: var(--text-dim);
  font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500;
  padding: 6px 2px; cursor: pointer; transition: color .2s;
}
.kq-mega-btn:hover, .kq-mega-btn[aria-expanded="true"] { color: var(--gold); }
.kq-mega-caret { font-size: 11px; color: var(--gold-soft); }
.kq-mega-panel {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
  animation: kqMegaIn .16s ease-out;
}
.kq-mega-mobile-bar { display: none; }
.kq-mega-backdrop { display: none; }
@keyframes kqMegaIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.kq-mega-col {
  list-style: none; margin: 0; padding: 8px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
/* Sin overflow acá: si tuviera scroll, recortaría la columna de
   subcategorías que tiene que "salirse" hacia la derecha.
   El ancho ya no es fijo — se ajusta solo al texto más largo que tenga
   adentro (con un piso y un techo), así la columna queda "un poco más
   grande que la palabra", no una caja enorme siempre del mismo tamaño;
   eso además hace que la cadena completa (categoría > sub > +sub...)
   ocupe mucho menos ancho de pantalla que antes. */
.kq-mega-col-cats { width: max-content; min-width: 170px; max-width: 260px; }
.kq-mega-row { position: relative; display: flex; align-items: stretch; }
.kq-mega-item {
  display: flex; align-items: center; flex: 1;
  color: var(--text); font-family: 'Jost', sans-serif; font-size: 14px;
  padding: 11px 12px; border-radius: 6px; transition: background .15s, color .15s;
}

.kq-mega-caret-btn {
  /* Sin flechita tampoco en la versión de escritorio — alcanza con pasar
     el mouse por la fila (ya abre la columna de subcategorías sola) o
     clickear el nombre para entrar a esa categoría. */
  display: none;
}

/* Resaltado al pasar el mouse (o cuando esa rama quedó abierta con un
   click): toda la fila se ilumina en dorado — antes era un tinte muy
   tenue (12%) y costaba notar por dónde ibas en la cadena. */
.kq-mega-row:hover > .kq-mega-item,
.kq-mega-row.kq-mega-open > .kq-mega-item {
  background: rgba(217, 184, 102, 0.25); color: var(--gold);
}
.kq-mega-row:hover > .kq-mega-caret-btn,
.kq-mega-row.kq-mega-open > .kq-mega-caret-btn {
  background: rgba(217, 184, 102, 0.25); color: var(--gold);
}

.kq-mega-col-subs {
  display: none;
  position: absolute; left: 100%; top: -1px; z-index: 61;
  width: max-content; min-width: 160px; max-width: 240px;
  /* Sin overflow/max-height acá tampoco: esta misma columna puede a su vez
     contener OTRA columna hija (categoría > subcategoría > +subcategoría,
     en cadena) que necesita "salirse" hacia la derecha — un scroll acá
     la recortaría, igual que le pasaba a kq-mega-col-cats. */
  border-radius: 4px 10px 10px 10px;
  margin-left: 6px;
}
/* Desktop: pasar el mouse/trackpad por la fila abre la columna sola */
.kq-mega-row.has-sub:hover > .kq-mega-col-subs,
.kq-mega-row.has-sub.kq-mega-open > .kq-mega-col-subs {
  display: block;
}

/* Carrusel de portada */
.kq-carrusel { padding: 0; }
.kq-carrusel-viewport {
  position: relative; width: 100%; height: 56vh; min-height: 320px; max-height: 560px;
  overflow: hidden; background: var(--bg-elev);
}
.kq-carrusel-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: kqFotoIn .5s ease-out;
}
@keyframes kqFotoIn {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}
.kq-carrusel-viewport::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,14,26,0) 55%, rgba(15,14,26,.75) 100%);
}
.kq-carrusel-caption {
  position: absolute; left: 24px; bottom: 20px; z-index: 2;
  font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--text);
  text-shadow: 0 2px 10px rgba(0,0,0,.6); max-width: 70%;
}
.kq-carrusel-contador {
  position: absolute; right: 20px; bottom: 20px; z-index: 2;
  font-size: 12px; letter-spacing: 1px; color: var(--text-dim);
  background: rgba(15,14,26,.55); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
.kq-carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(15,14,26,.55); color: var(--text); font-size: 20px; line-height: 1;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.kq-carrusel-flecha:hover { background: rgba(217,184,102,.25); border-color: var(--gold); }
.kq-carrusel-prev { left: 18px; }
.kq-carrusel-next { right: 18px; }

@media (max-width: 720px) {
  .kq-carrusel-viewport { height: 42vh; min-height: 240px; }
  .kq-carrusel-caption { font-size: 17px; max-width: 85%; left: 16px; bottom: 14px; }

  /* El "backdrop-filter" del header (el desenfoque de vidrio) hace que
     el navegador lo trate como el "techo" para todo lo que sea
     "position: fixed" adentro — por eso el panel de pantalla completa
     de acá abajo quedaba con la altura del header en vez de la pantalla
     entera. Sacándoselo al header en el celular, el panel se estira
     bien hasta el borde de la pantalla. */
  .kq-header { backdrop-filter: none; }

  /* En el celular el menú deja de ser un cuadradito flotando abajo del
     botón (ahí se veía roto, tapando el título de la página) y pasa a
     ser un cajón que entra desde la izquierda — como el menú de
     cualquier app — con su propia barra arriba ("Productos" + una X
     para cerrar) y la lista de opciones en acordeón — cada nivel un
     poco más indentado que el anterior, todo en una sola columna que
     se puede scrollear. Sin "hover" (no existe en el celular): tocás
     la flechita y se abre/cierra esa rama, sin tocar las de al lado.
     Se puede abrir/cerrar tocando el botón, o deslizando el dedo
     (desde el borde izquierdo para abrir, o para el lado izquierdo
     adentro del cajón para cerrar) — el JS de base.html mueve el
     "transform" a mano mientras el dedo se desliza. */
  .kq-mega-panel {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    display: flex; flex-direction: column;
    /* Mismo ancho relativo que digitaloutlet.com.uy (~73% de la
       pantalla) — deja bien a la vista, atenuado, el resto de la
       página detrás, en vez de tapar casi todo. */
    width: 74%; max-width: 300px;
    background: var(--bg);
    box-shadow: 8px 0 40px rgba(0,0,0,.5);
    animation: none;
    border-radius: 0;
    transform: translateX(-101%);
    transition: transform .28s ease;
  }
  .kq-mega-panel[hidden] { display: none; }
  .kq-mega-panel.kq-mega-panel-abierto { transform: translateX(0); }

  /* Fondo oscuro detrás del cajón — tocarlo también cierra el menú. */
  .kq-mega-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 99;
    background: rgba(8, 7, 18, .6);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .kq-mega-backdrop.kq-mega-backdrop-visible {
    opacity: 1; visibility: visible;
    transition: opacity .28s ease, visibility 0s linear 0s;
  }

  .kq-mega-mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    padding: 18px 20px; border-bottom: 1px solid var(--line);
    font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; font-size: 13px; color: var(--gold);
  }
  .kq-mega-mobile-bar button {
    background: none; border: none; color: var(--text-dim); font-size: 20px;
    line-height: 1; cursor: pointer; padding: 4px 6px;
  }

  .kq-mega-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 40px; }

  .kq-mega-col {
    background: transparent; border: none; box-shadow: none; border-radius: 0;
    padding: 0; margin: 0; width: auto !important;
  }
  .kq-mega-item { border-radius: 0; padding: 15px 20px; font-size: 15.5px; }
  .kq-mega-item:hover { background: transparent; }
  .kq-mega-row { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .kq-mega-row:last-child { border-bottom: none; }

  /* Sin flechita separada para tocar — con el nombre de la categoría ya
     alcanza (ver el JS de base.html), así el "botón" no queda tan
     angosto y difícil de acertar. El link ocupa toda la fila solo. */
  .kq-mega-caret-btn { display: none; }

  /* Fila abierta: relleno sólido dorado de punta a punta (como el rojo
     lleno de "TELEFONOS" en digitaloutlet.com.uy) — antes era apenas un
     tinte, costaba notar por dónde ibas en la cadena. */
  .kq-mega-row.kq-mega-open {
    background: var(--gold);
    box-shadow: none;
  }
  .kq-mega-row.kq-mega-open > .kq-mega-item,
  .kq-mega-row.kq-mega-open > .kq-mega-caret-btn {
    color: #1a1730;
  }

  .kq-mega-col-subs {
    display: none;
    /* La fila de arriba (item + flechita) es "flex", y sin decirle a esto
       que ocupe el 100% del ancho, se achica a su contenido y queda
       flotando al lado en vez de caer como una línea nueva, entera,
       debajo — por eso antes se veía la columna de subcategorías
       recortada/pegada a la derecha en vez de en su propio renglón. */
    position: static; left: auto; top: auto; margin: 0; width: 100%; max-width: none; flex: 1 1 100%;
    /* El "max-width: 240px" de la versión de escritorio (columnas
       flotantes) se colaba acá y dejaba la columna más angosta que la
       fila — quedaba un huequito sin tapar a la derecha por donde se
       veía el dorado de la fila padre asomando. Con "none" ocupa todo
       el ancho de la fila, como corresponde en el celular. */
    /* Fondo sólido (no un tinte semi-transparente) — si no, cuando el
       padre queda pintado de dorado, ese tinte dejaba ver el dorado
       de fondo y las hijas quedaban con un color raro a medio camino.
       Así el dorado se queda solo en la fila que tocaste, como en la
       referencia. */
    border: none; box-shadow: none; border-radius: 0; background: var(--bg);
  }
  .kq-mega-row.has-sub:hover > .kq-mega-col-subs { display: none; }
  .kq-mega-row.has-sub.kq-mega-open > .kq-mega-col-subs { display: block; }

  /* Un poco más de sangría por cada nivel que se baja en la cadena. */
  .kq-mega-col .kq-mega-col .kq-mega-item { padding-left: 38px; }
  .kq-mega-col .kq-mega-col .kq-mega-caret-btn { padding-left: 6px; }
  .kq-mega-col .kq-mega-col .kq-mega-col .kq-mega-item { padding-left: 56px; }
  .kq-mega-col .kq-mega-col .kq-mega-col .kq-mega-col .kq-mega-item { padding-left: 74px; }
}

/* Hero */
.kq-hero { text-align: center; padding: 70px 24px 50px; }
.kq-hero-logo { display: block; margin: 0 auto 22px; width: 100%; max-width: 190px; height: auto; }
.kq-hero h1 { font-size: 44px; margin: 0 0 16px; }
.kq-hero p { color: var(--text-dim); max-width: 520px; margin: 0 auto; font-size: 16px; }

/* Grids */
.kq-section { padding: 40px 24px; }
.kq-section-title { text-align: center; font-size: 30px; margin-bottom: 34px; }
.kq-cat-track-wrap {
  overflow: hidden;
  max-width: 1200px; margin: 0 auto;
}
.kq-cat-grid {
  display: flex; flex-wrap: nowrap; gap: 18px;
  width: max-content;
  will-change: transform;
}
.kq-cat-card {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px;
  padding: 28px 16px; text-align: center; transition: transform .2s, box-shadow .2s;
  flex: 0 0 160px; width: 160px;
  animation: kqCatGlow 6s ease-in-out infinite;
}
.kq-cat-card:hover { transform: translateY(-3px); }
.kq-cat-card .kq-icon { font-size: 30px; margin-bottom: 10px; animation: kqCatIconColor 6s ease-in-out infinite; }
.kq-cat-card .kq-cat-name { color: var(--text); font-size: 15px; }

@keyframes kqCatGlow {
  0%   { border-color: var(--violet); box-shadow: 0 0 16px rgba(154, 114, 224, 0.28); }
  33%  { border-color: var(--blue);   box-shadow: 0 0 16px rgba(95, 143, 224, 0.28); }
  66%  { border-color: var(--gold);   box-shadow: 0 0 16px rgba(217, 184, 102, 0.32); }
  100% { border-color: var(--violet); box-shadow: 0 0 16px rgba(154, 114, 224, 0.28); }
}
@keyframes kqCatIconColor {
  0%   { color: var(--violet); }
  33%  { color: var(--blue); }
  66%  { color: var(--gold); }
  100% { color: var(--violet); }
}

@media (max-width: 720px) {
  .kq-cat-track-wrap { padding: 0 24px; }
}

/* Grilla normal (categoría, "también te puede interesar") — envolvente,
   sin efecto de fila única (ese efecto es solo para "Destacados", abajo). */
.kq-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px;
  max-width: 1200px; margin: 0 auto;
}
.kq-card {
  position: relative;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .2s, transform .2s;
}
.kq-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.kq-card-img {
  aspect-ratio: 1; background: #1c1a30; display: flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: 12px;
}
.kq-card-img img { width: 100%; height: 100%; object-fit: cover; }
.kq-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kq-card-cat { font-size: 11px; letter-spacing: 1.5px; color: var(--text-mute); text-transform: uppercase; }
.kq-card-name { font-size: 16px; }
.kq-card-price { color: var(--gold); font-family: 'Cormorant Garamond'; font-size: 20px; font-weight: 600; margin-top: auto; }

/* Fila única con color cíclico y auto-desplazamiento — solo "Destacados". */
.kq-destacados-track-wrap {
  overflow: hidden;
  max-width: 1200px; margin: 0 auto;
}
.kq-dest-grid {
  display: flex; flex-wrap: nowrap; gap: 22px;
  width: max-content;
  will-change: transform;
}
.kq-dest-card {
  position: relative;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
  flex: 0 0 240px; width: 240px;
  animation: kqCatGlow 6s ease-in-out infinite;
}
.kq-dest-card:hover { transform: translateY(-2px); }
.kq-dest-card-img {
  height: 220px; background: #1c1a30; display: flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: 12px; padding: 12px;
}
.kq-dest-card-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Insignia de descuento, sobre la imagen (categoría, destacados, relacionados). */
.kq-badge-descuento {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--gold); color: #1a1730; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .3px;
}
.kq-precio-tachado { text-decoration: line-through; color: var(--text-mute); font-size: 13px; margin-right: 6px; }
.kq-precio-final { color: var(--gold); }

@media (max-width: 720px) {
  .kq-destacados-track-wrap { padding: 0 24px; }
}

/* Buttons */
.kq-btn {
  display: inline-block; background: var(--gold); color: #1a1730; padding: 11px 28px;
  border: none; border-radius: 4px; font-family: 'Jost'; font-size: 14px; letter-spacing: 1px;
  cursor: pointer; text-align: center;
}
.kq-btn:hover { background: var(--gold-soft); }
.kq-btn-outline {
  display: inline-block; background: transparent; color: var(--gold); border: 1px solid var(--gold);
  padding: 10px 26px; border-radius: 4px; font-size: 14px; cursor: pointer;
}

/* Brand meaning */
.kq-meaning { text-align: center; max-width: 640px; margin: 0 auto; padding: 60px 24px; }
.kq-meaning-arabic { font-size: 15px; letter-spacing: 2px; color: var(--gold); margin-bottom: 10px; }
.kq-meaning p { color: var(--text-dim); font-size: 16px; }

/* Footer */
.kq-footer { border-top: 1px solid var(--line); padding: 34px 24px; text-align: center; color: var(--text-mute); font-size: 13px; }

/* Product detail */
.kq-detalle { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 44px 24px; max-width: 1100px; margin: 0 auto; }
.kq-galeria-principal { aspect-ratio: 1; background: var(--bg-elev); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.kq-galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.kq-galeria-miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.kq-galeria-miniaturas img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; }
.kq-info h1 { font-size: 32px; margin: 4px 0 12px; }
.kq-info .kq-precio { font-size: 28px; color: var(--gold); font-family: 'Cormorant Garamond'; margin-bottom: 16px; }
.kq-info .kq-desc { color: var(--text-dim); margin-bottom: 20px; }
.kq-precio-tachado-grande { text-decoration: line-through; color: var(--text-mute); font-size: 19px; margin-right: 10px; }
.kq-badge-descuento-inline { position: static; margin-left: 12px; vertical-align: middle; }
.kq-stock-si { color: #8fbf8f; font-size: 13px; }
.kq-stock-no { color: #c96b6b; font-size: 13px; }

@media (max-width: 720px) {
  .kq-detalle { grid-template-columns: 1fr; }
  .kq-search { display: none; }
}

/* Tablas de carrito */
.kq-tabla-carrito { width: 100%; border-collapse: collapse; margin: 0 auto 30px; max-width: 900px; }
.kq-tabla-carrito th, .kq-tabla-carrito td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.kq-tabla-carrito th { color: var(--text-mute); font-weight: 400; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
.kq-tabla-carrito input[type=number] { width: 60px; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text); padding: 5px; border-radius: 4px; }

.kq-breadcrumb { font-size: 13px; color: var(--text-mute); padding: 18px 24px 0; max-width: 1200px; margin: 0 auto; }
.kq-breadcrumb a:hover { color: var(--gold); }

.kq-mensajes { max-width: 1200px; margin: 12px auto 0; padding: 0 24px; }
.kq-mensaje { background: var(--bg-elev); border: 1px solid var(--gold); color: var(--text); padding: 10px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 8px; }

.kq-vacio { text-align: center; padding: 60px 24px; color: var(--text-mute); }

.kq-form input, .kq-form textarea {
  width: 100%; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text);
  padding: 10px 12px; border-radius: 6px; font-family: 'Jost'; margin-bottom: 14px;
}
.kq-form label { font-size: 13px; color: var(--text-mute); display: block; margin-bottom: 6px; }

/* --- Mi cuenta (clientes) --- */
.kq-cuenta-shell { display: flex; justify-content: center; padding: 50px 24px; }
.kq-cuenta-card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 34px 32px; text-align: center; }
.kq-cuenta-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 22px; }
.kq-cuenta-card .kq-form { text-align: left; margin: 0; }
.kq-cuenta-error { background: rgba(217,112,102,.14); border: 1px solid rgba(217,112,102,.4); color: #f3cdc8; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; }
.kq-btn-full { width: 100%; }

.kq-cuenta-bonificacion {
  background: rgba(217,184,102,.1); border: 1px solid rgba(217,184,102,.35); color: var(--text);
  border-radius: 10px; padding: 16px 20px; margin: 18px 0; font-size: 15px; max-width: 1200px; margin-left: auto; margin-right: auto;
}
.kq-cuenta-historial { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 1200px; margin-left: auto; margin-right: auto; }
.kq-cuenta-pedido { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; }
.kq-cuenta-pedido-cab { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--text-dim); margin-bottom: 8px; flex-wrap: wrap; }
.kq-cuenta-pedido-total { margin-left: auto; color: var(--gold); font-family: 'Cormorant Garamond'; font-size: 17px; }
.kq-cuenta-pedido-detalle { color: var(--text-mute); font-size: 13.5px; white-space: pre-line; }

.kq-pill { font-size: 11px; padding: 3px 10px; border-radius: 999px; }
.kq-pill.si { background: rgba(127,174,107,.18); color: #a9d19a; }
.kq-pill.no { background: rgba(217,112,102,.18); color: #e3a8a1; }