/* Catálogo y carro del kiosco. Comparte tokens y temas con kiosco.css (data-tema); aquí solo
   lo propio: barra, portada, grilla, ficha, carro, capas y teclado. Todo táctil: objetivos de
   toque de 44 px o más y sin estados hover. Los tamaños salen de clamp() por --escala. */

.kiosco.catalogo {
  --tarjeta: #FFFFFF;
  --tarjeta-texto: var(--texto);
  --tarjeta-borde: var(--linea);
  --panel: #FFFFFF;
  --panel-texto: #1E1B16;
  --panel-suave: #F3F0E9;
  --panel-linea: #E6E1D6;
  --foto-fondo: #F6F3EC;
  --radio: calc(var(--escala) * clamp(10px, 2.2vmin, 26px));
  --toque: calc(var(--escala) * clamp(44px, 7vmin, 80px));
  --t1: calc(var(--escala) * clamp(22px, 4.2vmin, 52px));
  --t2: calc(var(--escala) * clamp(17px, 2.8vmin, 34px));
  --t3: calc(var(--escala) * clamp(14px, 2.2vmin, 26px));
  --t4: calc(var(--escala) * clamp(12px, 1.8vmin, 20px));
  --margen: calc(var(--escala) * clamp(14px, 3.2vmin, 44px));
  --bolsa: var(--acento);
  --bolsa-texto: #FFFFFF;
  --panel-texto-2: #6B655B;
  --panel-texto-3: #9A9388;
}
.kiosco.catalogo[data-tema="oscuro"] { --panel-texto-2: #9C9484; --panel-texto-3: #6E6858; --tarjeta: #221F17; --tarjeta-borde: #35311F; --panel: #1E1B14; --panel-texto: #F5F1E8; --panel-suave: #2A261C; --panel-linea: #3A362C; --foto-fondo: #F5F1E8; --bolsa: #FFC531; --bolsa-texto: #17150F; }
.kiosco.catalogo[data-tema="nocturno"] { --panel-texto-2: #A7ABC4; --panel-texto-3: #7C819E; --tarjeta: #1C2140; --tarjeta-borde: #2C3150; --panel: #171B36; --panel-texto: #F2F3FA; --panel-suave: #232951; --panel-linea: #2C3150; --foto-fondo: #F2F3FA; }
.kiosco.catalogo[data-tema="color"] { --tarjeta: #FFFFFF; --tarjeta-texto: #1E1B16; --tarjeta-borde: transparent; --bolsa: #FFFFFF; --bolsa-texto: var(--acento); }
.kiosco.catalogo[data-tema="color"] .cat-tarjeta .precio, .kiosco.catalogo[data-tema="color"] .cat-tarjeta .marca { color: #1E1B16; }
.kiosco.catalogo[data-tema="color"] .cat-tarjeta .precio { color: var(--acento); }
.kiosco.catalogo[data-tema="degrade"], .kiosco.catalogo[data-tema="formas"] { --tarjeta-borde: transparent; }
.kiosco.catalogo[data-tema="degrade"] .cat-tarjeta, .kiosco.catalogo[data-tema="formas"] .cat-tarjeta, .kiosco.catalogo[data-tema="degrade"] .categoria, .kiosco.catalogo[data-tema="formas"] .categoria { box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 1.2vmin 3vmin rgba(30, 27, 22, .07); }

/* Reseteo con especificidad mínima (:where) para que cada botón estilizado gane sin escalar selectores. */
:where(.kiosco.catalogo) button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(.kiosco.catalogo) button:disabled { opacity: .45; cursor: default; }
.kiosco.catalogo .pie { padding-top: calc(var(--escala) * 1vmin); }

/* ---------- Barra superior ---------- */
.cat-barra { display: flex; align-items: center; gap: calc(var(--escala) * 2vmin); padding: calc(var(--escala) * clamp(10px, 2.2vmin, 30px)) var(--margen); flex-shrink: 0; }
.cat-logo { display: flex; align-items: center; flex-shrink: 0; }
.cat-logo .logo-caja { display: inline-flex; align-items: center; background: var(--pastilla-logo); border-radius: calc(var(--escala) * 1.4vmin); }
.kiosco[data-tema="oscuro"] .cat-logo .logo-caja, .kiosco[data-tema="color"] .cat-logo .logo-caja, .kiosco[data-tema="nocturno"] .cat-logo .logo-caja { padding: .8vmin 1.6vmin; }
.cat-logo img { display: block; width: auto; max-width: 26vw; object-fit: contain; height: calc(var(--escala) * var(--logo-alto, 10vmin) * .7); }
.cat-buscar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.6vmin; height: var(--toque); padding: 0 calc(var(--escala) * 2.4vmin); border-radius: 999px; background: var(--tarjeta); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-borde); font-size: var(--t2); text-align: left; }
.cat-buscar .lupa { display: inline-flex; color: var(--precio); flex-shrink: 0; }
.kiosco[data-tema="color"] .cat-buscar .lupa { color: var(--acento); }
.cat-buscar .texto { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.cat-buscar.con-texto .texto { color: var(--tarjeta-texto); font-weight: 600; }
.kiosco[data-tema="color"] .cat-buscar .texto { color: #6B655B; }
.cat-buscar .limpiar { width: calc(var(--toque) * .6); height: calc(var(--toque) * .6); border-radius: 50%; background: var(--panel-suave); color: var(--panel-texto); display: inline-flex; align-items: center; justify-content: center; font-size: var(--t3); }
.cat-boton-barra { height: var(--toque); padding: 0 calc(var(--escala) * 2.4vmin); border-radius: 999px; border: 2px solid var(--linea); font-size: var(--t3); font-weight: 700; white-space: nowrap; }
.cat-cliente { font-size: var(--t3); color: var(--texto-2); max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-carro-boton { display: inline-flex; align-items: center; gap: 1.2vmin; height: var(--toque); padding: 0 calc(var(--escala) * 2.2vmin); border-radius: 999px; background: var(--tarjeta); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-borde); font-size: var(--t3); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.cat-carro-boton .icono { display: inline-flex; }
.cat-carro-boton.lleno { background: var(--bolsa); color: var(--bolsa-texto); border-color: transparent; animation: latido-carro .35s ease; }
.cat-carro-boton .cuenta { min-width: 1.6em; padding: .1em .5em; border-radius: 999px; background: rgba(255,255,255,.25); text-align: center; }
.cat-carro-boton.lleno .cuenta { background: rgba(0,0,0,.18); }
@keyframes latido-carro { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---------- Cuerpo ---------- */
.cat-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 var(--margen) var(--margen); scroll-behavior: smooth; overscroll-behavior: contain; }
.cat-titulo { font-size: var(--t1); font-weight: 800; letter-spacing: -0.02em; margin: calc(var(--escala) * 2vmin) 0 calc(var(--escala) * 1.6vmin); }
.cat-vacio { color: var(--texto-2); font-size: var(--t2); text-align: center; padding: 8vmin 4vmin; }
.cat-vacio .ayuda { font-size: var(--t3); color: var(--texto-3); }

/* Portada: promociones en franja y categorías en mosaico con foto o monograma. */
.cat-promos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(46vw, 320px), 1fr); gap: calc(var(--escala) * 1.6vmin); overflow-x: auto; padding: calc(var(--escala) * 1vmin) 0 calc(var(--escala) * 1.4vmin); scrollbar-width: none; }
.cat-promos::-webkit-scrollbar { display: none; }
.cat-promos .promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .4vmin; min-height: calc(var(--escala) * clamp(120px, 24vmin, 260px)); padding: calc(var(--escala) * 2vmin); border-radius: var(--radio); background: var(--tarjeta); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-borde); text-align: left; overflow: hidden; }
.cat-promos .promo img { position: absolute; right: -2%; top: -4%; width: 46%; height: 108%; object-fit: contain; opacity: .95; }
.cat-promos .promo .oferta, .cat-promos .promo .titulo, .cat-promos .promo .precio { position: relative; }
.cat-promos .promo .oferta { align-self: flex-start; background: var(--etiqueta-fondo); color: var(--etiqueta-texto); font-weight: 700; font-size: var(--t4); padding: .35em .8em; border-radius: .4em; }
.kiosco[data-tema="color"] .cat-promos .promo .oferta { background: var(--acento); color: #fff; }
.cat-promos .promo .titulo { font-size: var(--t2); font-weight: 800; line-height: 1.05; max-width: 56%; text-align: left; }
.cat-promos .promo .precio { font-size: var(--t1); font-weight: 900; color: var(--precio); letter-spacing: -0.03em; }
.kiosco[data-tema="color"] .cat-promos .promo .precio { color: var(--acento); }

.cat-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--escala) * clamp(150px, 24vmin, 300px)), 1fr)); gap: calc(var(--escala) * 1.8vmin); }
.categoria { position: relative; aspect-ratio: 1.15; border-radius: var(--radio); background: var(--tarjeta); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-borde); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .4vmin; text-align: left; padding: calc(var(--escala) * 1.6vmin); }
.categoria img { display: block; width: 100%; flex: 1 1 0; min-height: 0; object-fit: contain; background: var(--foto-fondo); border-radius: calc(var(--radio) * .6); padding: 5%; margin-bottom: .8vmin; }
.categoria .monograma { position: absolute; right: 5%; top: 4%; font-size: calc(var(--escala) * clamp(56px, 13vmin, 170px)); font-weight: 900; line-height: 1; color: color-mix(in srgb, var(--acento) 14%, transparent); letter-spacing: -0.05em; pointer-events: none; }
.kiosco[data-tema="color"] .categoria .monograma { color: color-mix(in srgb, var(--acento) 18%, transparent); }
.categoria .nombre { font-size: var(--t2); font-weight: 800; line-height: 1.08; text-wrap: balance; position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.categoria .cuenta { font-size: var(--t4); color: var(--texto-3); margin-top: .3em; position: relative; }
.kiosco[data-tema="color"] .categoria .cuenta { color: #9A9388; }

/* Listado */
.cat-encabezado { display: flex; align-items: baseline; gap: 2vmin; flex-wrap: wrap; margin: calc(var(--escala) * 1.6vmin) 0 calc(var(--escala) * 1.2vmin); }
.cat-encabezado h1 { margin: 0; font-size: var(--t1); font-weight: 800; letter-spacing: -0.02em; flex: 1; min-width: 40%; }
.cat-encabezado .volver { font-size: var(--t3); font-weight: 700; color: var(--texto-2); min-height: calc(var(--toque) * .7); padding: 0 1.4vmin; border-radius: 999px; border: 2px solid var(--linea); }
.cat-encabezado .cuenta { font-size: var(--t4); color: var(--texto-3); }
.cat-filtros { display: flex; gap: 1.2vmin; overflow-x: auto; padding: .4vmin 0 calc(var(--escala) * 1.6vmin); scrollbar-width: none; }
.cat-filtros::-webkit-scrollbar { display: none; }
.cat-filtros .separador { width: 2px; background: var(--linea); flex-shrink: 0; margin: 0 .6vmin; }
.chip { flex-shrink: 0; min-height: calc(var(--toque) * .68); padding: 0 calc(var(--escala) * 2vmin); border-radius: 999px; border: 2px solid var(--linea); font-size: var(--t3); font-weight: 600; white-space: nowrap; color: var(--texto); }
.chip.activo { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.kiosco[data-tema="color"] .chip.activo { background: #fff; color: var(--acento); border-color: #fff; }
.chip.marca { border-style: dashed; }

.cat-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--escala) * clamp(140px, 21vmin, 280px)), 1fr)); gap: calc(var(--escala) * 1.8vmin); }
.cat-tarjeta { position: relative; display: flex; flex-direction: column; gap: .5vmin; border-radius: var(--radio); background: var(--tarjeta); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-borde); padding: calc(var(--escala) * 1.4vmin); text-align: left; animation: aparecer-tarjeta .35s ease both; }
.cat-tarjeta.agotada .foto img, .cat-tarjeta.agotada .foto .monograma { opacity: .35; filter: grayscale(1); }
.cat-tarjeta .foto { position: relative; aspect-ratio: 1; border-radius: calc(var(--radio) * .7); background: var(--foto-fondo); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: .6vmin; }
.cat-tarjeta .foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cat-tarjeta .foto .monograma { font-size: calc(var(--escala) * clamp(40px, 9vmin, 110px)); font-weight: 900; color: color-mix(in srgb, var(--acento) 30%, transparent); }
.cat-tarjeta .insignia { position: absolute; left: 6%; top: 6%; background: var(--etiqueta-fondo); color: var(--etiqueta-texto); font-size: var(--t4); font-weight: 700; padding: .3em .7em; border-radius: .4em; }
.cat-tarjeta .insignia.suave { background: var(--panel-suave); color: var(--panel-texto); }
.cat-tarjeta .nombre { font-size: var(--t3); font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
.cat-tarjeta .marca { font-size: var(--t4); color: var(--texto-2); }
.cat-tarjeta .precio { font-size: var(--t2); font-weight: 900; color: var(--precio); letter-spacing: -0.02em; margin-top: auto; padding-right: calc(var(--toque) * .9); }
.cat-tarjeta .mas { position: absolute; right: calc(var(--escala) * 1.4vmin); bottom: calc(var(--escala) * 1.4vmin); width: calc(var(--toque) * .8); height: calc(var(--toque) * .8); border-radius: 50%; background: var(--bolsa); color: var(--bolsa-texto); font-size: var(--t2); font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 .6vmin 1.6vmin rgba(0,0,0,.18); }
.cat-mas { display: flex; justify-content: center; padding: calc(var(--escala) * 3vmin) 0; }
.cat-mas button { min-height: var(--toque); padding: 0 calc(var(--escala) * 4vmin); border-radius: 999px; border: 2px solid var(--linea); font-size: var(--t2); font-weight: 700; }
@keyframes aparecer-tarjeta { from { opacity: 0; transform: translateY(1.2vmin); } to { opacity: 1; transform: none; } }

/* ---------- Capas (ficha, búsqueda, identificación, avisos) ---------- */
.cat-capa { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: calc(var(--escala) * 2vmin); background: rgba(20, 18, 14, .55); backdrop-filter: blur(6px); animation: fundir-capa .2s ease; }
.cat-capa-caja { position: relative; width: min(100%, 960px); max-height: 100%; overflow: auto; background: var(--panel); color: var(--panel-texto); border-radius: var(--radio); padding: calc(var(--escala) * clamp(16px, 3.2vmin, 40px)); font-family: var(--fuente); }
.cat-capa-caja.angosta { width: min(100%, 520px); }
.cat-capa-caja.centrada { text-align: center; }
.cat-capa-caja.ficha { width: min(100%, 1400px); height: min(100%, 900px); padding: 0; overflow: hidden; display: flex; }
.cat-capa-caja.busqueda { width: min(100%, 1100px); display: flex; flex-direction: column; gap: calc(var(--escala) * 1.6vmin); }
.cat-capa-caja h2 { margin: 0 0 .4em; font-size: var(--t1); font-weight: 800; letter-spacing: -0.02em; }
.cat-capa-caja .ayuda { margin: 0 0 1em; color: var(--panel-texto-2); font-size: var(--t3); }
.cat-capa-caja .cerrar { position: absolute; right: calc(var(--escala) * 1.6vmin); top: calc(var(--escala) * 1.6vmin); width: var(--toque); height: var(--toque); border-radius: 50%; background: var(--panel-suave); color: var(--panel-texto); font-size: var(--t2); display: flex; align-items: center; justify-content: center; z-index: 2; }
.cat-capa-caja .mensaje-error { color: #CA151A; font-size: var(--t3); margin: .4em 0; font-weight: 600; }
.cat-capa-caja .ocupado { position: absolute; inset: 0; background: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; font-size: var(--t2); font-weight: 700; border-radius: var(--radio); }
.cat-capa-botones { display: flex; gap: 1.6vmin; justify-content: center; margin-top: calc(var(--escala) * 2.4vmin); flex-wrap: wrap; }
.cat-capa-botones button, .cat-carro .acciones button { min-height: var(--toque); padding: 0 calc(var(--escala) * 3.6vmin); border-radius: 999px; font-size: var(--t2); font-weight: 700; }
.cat-capa-botones .primario, .cat-carro .acciones .primario { background: var(--acento); color: #fff; }
.cat-capa-botones .secundario, .cat-carro .acciones .secundario { border: 2px solid var(--panel-linea); color: var(--panel-texto); }
@keyframes fundir-capa { from { opacity: 0; } to { opacity: 1; } }

/* Campo de texto simulado (no hay input: se escribe con el teclado en pantalla). */
.campo { display: flex; align-items: center; min-height: var(--toque); padding: 0 calc(var(--escala) * 2vmin); border: 2px solid var(--panel-linea); border-radius: calc(var(--radio) * .6); background: var(--panel-suave); font-size: var(--t2); font-weight: 600; }
.campo.grande { font-size: var(--t1); min-height: calc(var(--toque) * 1.2); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.campo.error { border-color: #CA151A; }
.campo .cursor { width: 2px; height: 1em; background: var(--acento); margin-left: .15em; animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { to { opacity: 0; } }
.campos-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vmin; margin-bottom: 1.6vmin; }
.campos-dos .campo { flex-direction: column; align-items: flex-start; justify-content: center; gap: .2em; padding: 1.2vmin 2vmin; text-align: left; }
.campos-dos .campo.activo { border-color: var(--acento); background: var(--panel); }
.campos-dos .rotulo { font-size: var(--t4); color: var(--panel-texto-2); font-weight: 600; }
.campos-dos .valor { font-size: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pin-puntos.grande { gap: 2vmin; margin: 1.4vmin 0 2vmin; }
.pin-puntos.grande span { width: calc(var(--escala) * 2.4vmin); height: calc(var(--escala) * 2.4vmin); border-color: var(--panel-texto); }
.pin-puntos.grande span.lleno { background: var(--panel-texto); }
.pin-puntos.grande span.opcional:not(.lleno) { opacity: .3; }

/* Búsqueda con sugerencias */
.sugerencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1vmin; }
.sugerencias button { display: flex; align-items: center; gap: 1.4vmin; min-height: var(--toque); padding: .8vmin 1.4vmin; border-radius: calc(var(--radio) * .6); background: var(--panel-suave); text-align: left; }
.sugerencias img { width: calc(var(--toque) * .8); height: calc(var(--toque) * .8); object-fit: contain; border-radius: .6vmin; background: #fff; flex-shrink: 0; }
.sugerencias .nombre { flex: 1; font-size: var(--t3); font-weight: 600; line-height: 1.15; }
.sugerencias .precio { font-weight: 800; color: var(--acento); font-size: var(--t3); white-space: nowrap; }

/* ---------- Teclado en pantalla ---------- */
.teclado { display: flex; flex-direction: column; gap: calc(var(--escala) * .9vmin); user-select: none; }
.teclado .fila { display: flex; gap: calc(var(--escala) * .9vmin); justify-content: center; }
.teclado button { flex: 1 1 0; min-width: 0; min-height: var(--toque); border-radius: calc(var(--radio) * .5); background: var(--panel-suave); color: var(--panel-texto); border: 1px solid var(--panel-linea); font-size: var(--t2); font-weight: 600; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.teclado button:active { transform: translateY(2px); box-shadow: none; background: var(--panel-linea); }
.teclado button.accion { font-size: var(--t3); }
.teclado button.ancha { flex: 1.6 1 0; }
.teclado button.espacio { flex: 5 1 0; font-size: var(--t4); color: var(--panel-texto-2); }
.teclado button.primario { background: var(--acento); color: #fff; border-color: transparent; }
.teclado.numerico, .teclado.rut, .teclado.pin { width: min(100%, 420px); margin: 0 auto; }
.teclado.numerico button, .teclado.rut button, .teclado.pin button { min-height: calc(var(--toque) * 1.05); font-size: var(--t1); }
.teclado.numerico button.accion, .teclado.rut button.accion, .teclado.pin button.accion { font-size: var(--t3); }
.teclado.numerico button.primario, .teclado.rut button.primario, .teclado.pin button.primario { font-size: var(--t2); }

/* ---------- Ficha ---------- */
.cat-ficha { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; min-height: 0; }
.cat-ficha-galeria { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 1.2vmin; padding: calc(var(--escala) * 2.4vmin); background: var(--foto-fondo); min-height: 0; }
.cat-ficha-galeria .foto-grande { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radio); overflow: hidden; }
.cat-ficha-galeria .foto-grande img { max-width: 100%; max-height: 100%; object-fit: contain; animation: aparecer-tarjeta .3s ease; }
.cat-ficha-galeria .foto-grande.sin-foto span { font-size: calc(var(--escala) * clamp(80px, 26vmin, 320px)); font-weight: 900; color: color-mix(in srgb, var(--acento) 28%, transparent); letter-spacing: -0.06em; }
.cat-ficha-galeria .miniaturas { display: flex; gap: 1vmin; justify-content: center; flex-shrink: 0; }
.cat-ficha-galeria .miniaturas button { width: calc(var(--toque) * 1.1); height: calc(var(--toque) * 1.1); border-radius: calc(var(--radio) * .5); background: #fff; border: 2px solid transparent; overflow: hidden; }
.cat-ficha-galeria .miniaturas button.activa { border-color: var(--acento); }
.cat-ficha-galeria .miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.cat-ficha-datos { padding: calc(var(--escala) * 3vmin) calc(var(--escala) * 3vmin) calc(var(--escala) * 1.6vmin); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--escala) * 1.2vmin); }
.cat-ficha-datos .ruta { font-size: var(--t4); color: var(--panel-texto-2); display: flex; gap: .5em; flex-wrap: wrap; padding-right: var(--toque); }
.cat-ficha-datos .ruta .sep { opacity: .5; }
.cat-ficha-datos .nombre { margin: 0; font-size: var(--t1); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; padding-right: var(--toque); }
.cat-ficha-datos .marca { font-size: var(--t2); color: var(--panel-texto-2); }
.cat-ficha-datos .codigo { font-size: var(--t4); color: var(--panel-texto-3); font-variant-numeric: tabular-nums; }
.cat-ficha-datos .titulo-bloque { font-size: var(--t4); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--panel-texto-2); margin-bottom: .6vmin; }
.cat-ficha-datos .chips { display: flex; flex-wrap: wrap; gap: 1vmin; }
.cat-ficha-datos .larga { margin: .6vmin 0 0; font-size: var(--t3); line-height: 1.45; color: var(--panel-texto); white-space: pre-line; }
.cat-ficha-datos .propiedades { margin: .6vmin 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8vmin 2vmin; font-size: var(--t3); }
.cat-ficha-datos .propiedades div { border-top: 1px solid var(--panel-linea); padding-top: .6vmin; }
.cat-ficha-datos dt { font-size: var(--t4); color: var(--panel-texto-2); }
.cat-ficha-datos dd { margin: 0; font-weight: 600; }
.cat-ficha-accion { display: flex; align-items: center; gap: calc(var(--escala) * 2vmin); flex-wrap: wrap; padding: calc(var(--escala) * 2vmin) calc(var(--escala) * 3vmin); border-top: 1px solid var(--panel-linea); background: var(--panel); }
.cat-ficha-accion .precio { font-size: calc(var(--escala) * clamp(30px, 6vmin, 76px)); font-weight: 900; color: var(--precio); letter-spacing: -0.03em; line-height: 1; }
.kiosco[data-tema="color"] .cat-ficha-accion .precio { color: var(--acento); }
.cat-ficha-accion .precio-desde { display: flex; flex-direction: column; }
.cat-ficha-accion .precio-desde .desde { font-size: var(--t4); color: var(--panel-texto-2); }
.cat-ficha-accion .promo-linea { display: flex; flex-direction: column; align-items: flex-start; gap: .4vmin; }
.cat-ficha-accion .promo-linea .etiqueta { background: var(--etiqueta-fondo); color: var(--etiqueta-texto); font-weight: 700; font-size: var(--t4); padding: .35em .8em; border-radius: .4em; }
.cat-ficha-accion .promo-linea .tachado { text-decoration: line-through; color: var(--panel-texto-2); font-size: var(--t3); }
.cat-ficha-accion .por { font-size: var(--t4); color: var(--panel-texto-2); align-self: flex-end; }
.cat-ficha-accion .sin-precio { font-size: var(--t3); color: var(--panel-texto-2); flex: 1; }
.cat-ficha-accion .disponibilidad { font-size: var(--t4); font-weight: 700; padding: .35em .9em; border-radius: 999px; }
.cat-ficha-accion .disponibilidad.hay { background: #E2F5E9; color: #1B7F3B; }
.cat-ficha-accion .disponibilidad.agotado { background: #FBE3E4; color: #B3261E; }
.cat-ficha-accion .restriccion { font-size: var(--t4); font-weight: 600; padding: .5em .9em; border-radius: .6em; line-height: 1.3; }
.cat-ficha-accion .restriccion.bloqueada { background: #FBE3E4; color: #B3261E; }
.cat-ficha-accion .restriccion.edad { background: #FFF3D6; color: #8A5A00; }
.cat-ficha-accion .cantidad { display: inline-flex; align-items: center; border: 2px solid var(--panel-linea); border-radius: 999px; margin-left: auto; }
.cat-ficha-accion .cantidad button { width: var(--toque); height: var(--toque); font-size: var(--t1); font-weight: 600; }
.cat-ficha-accion .cantidad span { min-width: 2.2em; text-align: center; font-size: var(--t2); font-weight: 800; }
.cat-ficha-accion .agregar { flex: 1 1 auto; min-height: var(--toque); padding: 0 calc(var(--escala) * 4vmin); border-radius: 999px; background: var(--acento); color: #fff; font-size: var(--t2); font-weight: 800; }
.kiosco[data-tema="oscuro"] .cat-ficha-accion .agregar { background: #FFC531; color: #17150F; }

/* ---------- Carro ---------- */
.cat-velo { position: fixed; inset: 0; z-index: 70; background: rgba(20, 18, 14, .45); animation: fundir-capa .2s ease; }
.cat-carro { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(100%, 560px); background: var(--panel); color: var(--panel-texto); display: flex; flex-direction: column; box-shadow: -1vmin 0 4vmin rgba(0,0,0,.25); animation: entrar-derecha .25s cubic-bezier(.2,.8,.2,1); font-family: var(--fuente); }
@keyframes entrar-derecha { from { transform: translateX(100%); } to { transform: none; } }
.cat-carro .cabeza { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--escala) * 2.4vmin) calc(var(--escala) * 2.8vmin) calc(var(--escala) * 1.2vmin); }
.cat-carro .cabeza h2 { margin: 0; font-size: var(--t1); font-weight: 800; letter-spacing: -0.02em; }
.cat-carro .cerrar { width: var(--toque); height: var(--toque); border-radius: 50%; background: var(--panel-suave); font-size: var(--t2); display: flex; align-items: center; justify-content: center; }
.cat-carro .vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1vmin; padding: 4vmin; color: var(--panel-texto-2); font-size: var(--t2); }
.cat-carro .vacio .icono { color: var(--panel-texto-3); }
.cat-carro .vacio p { margin: 0; }
.cat-carro .vacio .ayuda { font-size: var(--t3); color: var(--panel-texto-3); }
.cat-carro .lineas { flex: 1; overflow-y: auto; padding: 0 calc(var(--escala) * 2.8vmin); display: flex; flex-direction: column; }
.cat-carro .linea { display: grid; grid-template-columns: auto 1fr auto; gap: 1.6vmin; align-items: start; padding: calc(var(--escala) * 1.6vmin) 0; border-top: 1px solid var(--panel-linea); animation: aparecer-tarjeta .25s ease; }
.cat-carro .linea .foto { width: calc(var(--toque) * 1.3); height: calc(var(--toque) * 1.3); border-radius: calc(var(--radio) * .5); background: var(--foto-fondo); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: var(--t1); font-weight: 900; color: color-mix(in srgb, var(--acento) 35%, transparent); }
.cat-carro .linea .foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cat-carro .linea .nombre { font-size: var(--t3); font-weight: 700; line-height: 1.15; }
.cat-carro .linea .unitario { font-size: var(--t4); color: var(--panel-texto-2); margin-top: .2em; }
.cat-carro .linea .unitario .tachado { text-decoration: line-through; margin-left: .5em; opacity: .7; }
.cat-carro .linea .cantidad { display: inline-flex; align-items: center; margin-top: .8vmin; border: 2px solid var(--panel-linea); border-radius: 999px; }
.cat-carro .linea .cantidad button { width: calc(var(--toque) * .8); height: calc(var(--toque) * .8); font-size: var(--t2); font-weight: 700; }
.cat-carro .linea .cantidad span { min-width: 2em; text-align: center; font-weight: 800; font-size: var(--t3); }
.cat-carro .linea .cantidad .quitar { width: auto; padding: 0 1.4vmin; font-size: var(--t4); color: var(--panel-texto-2); font-weight: 600; border-left: 2px solid var(--panel-linea); }
.cat-carro .linea .total-linea { font-size: var(--t3); font-weight: 800; white-space: nowrap; }
.cat-carro .totales { padding: calc(var(--escala) * 1.6vmin) calc(var(--escala) * 2.8vmin) 0; border-top: 2px solid var(--panel-linea); font-size: var(--t3); color: var(--panel-texto-2); }
.cat-carro .totales .fila { display: flex; justify-content: space-between; padding: .3em 0; }
.cat-carro .totales .ahorro { color: #1B7F3B; font-weight: 600; }
.cat-carro .totales .total { color: var(--panel-texto); font-size: var(--t1); font-weight: 900; letter-spacing: -0.02em; }
.cat-carro .acciones { display: flex; gap: 1.4vmin; padding: calc(var(--escala) * 1.6vmin) calc(var(--escala) * 2.8vmin) calc(var(--escala) * 2.4vmin); }
.cat-carro .acciones .primario { flex: 1; }

/* ---------- Resumen y confirmación ---------- */
.cat-resumen, .cat-confirmacion { max-width: 900px; margin: 0 auto; padding: calc(var(--escala) * 3vmin) 0; }
.cat-resumen h1, .cat-confirmacion h1 { font-size: var(--t1); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 .3em; }
.cat-resumen .ayuda, .cat-confirmacion .ayuda { color: var(--texto-2); font-size: var(--t3); margin: 0 0 1.4em; }
.cat-resumen table { width: 100%; border-collapse: collapse; background: var(--tarjeta); color: var(--tarjeta-texto); border-radius: var(--radio); overflow: hidden; font-size: var(--t3); }
.cat-resumen td { padding: calc(var(--escala) * 1.4vmin) calc(var(--escala) * 2vmin); border-top: 1px solid var(--tarjeta-borde); vertical-align: top; }
.cat-resumen tbody tr:first-child td { border-top: 0; }
.cat-resumen td.cant { width: 3em; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.cat-resumen td.monto { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-resumen td .codigo { display: block; font-size: var(--t4); color: var(--texto-3); }
.cat-resumen tfoot td { font-size: var(--t2); font-weight: 900; border-top: 2px solid var(--texto); }
.cat-confirmacion { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cat-confirmacion .check { width: calc(var(--toque) * 1.6); height: calc(var(--toque) * 1.6); border-radius: 50%; background: #1B7F3B; color: #fff; font-size: var(--t1); font-weight: 900; display: flex; align-items: center; justify-content: center; margin-bottom: 1.6vmin; animation: latido-carro .5s ease; }
.cat-confirmacion .folio { font-size: calc(var(--escala) * clamp(56px, 16vmin, 220px)); font-weight: 900; letter-spacing: -0.04em; color: var(--precio); line-height: 1; margin: 1vmin 0 2vmin; font-variant-numeric: tabular-nums; }
.kiosco[data-tema="color"] .cat-confirmacion .folio { color: #fff; }
.cat-confirmacion .qr { width: calc(var(--escala) * clamp(120px, 22vmin, 260px)); aspect-ratio: 1; background: #fff; border-radius: calc(var(--radio) * .6); padding: 2%; }
.cat-confirmacion .qr:empty { display: none; }
.cat-confirmacion .qr canvas, .cat-confirmacion .qr img { width: 100%; height: 100%; image-rendering: pixelated; }

/* Aviso breve */
.cat-toast { position: fixed; left: 50%; bottom: calc(var(--escala) * 8vmin); transform: translateX(-50%); z-index: 80; max-width: 90vw; padding: calc(var(--escala) * 1.4vmin) calc(var(--escala) * 3vmin); border-radius: 999px; background: rgba(20, 18, 14, .88); color: #fff; font-size: var(--t3); font-weight: 600; text-align: center; animation: subir-toast .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
@keyframes subir-toast { from { opacity: 0; transform: translate(-50%, 2vmin); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Vertical: apilado, carro como hoja inferior ---------- */
.kiosco.catalogo[data-orientacion="vertical"] .cat-ficha, .kiosco.catalogo[data-orientacion="vertical"] .cat-capa-caja.ficha { display: flex; flex-direction: column; }
.kiosco.catalogo[data-orientacion="vertical"] .cat-ficha-galeria { flex: 0 0 38%; }
.kiosco.catalogo[data-orientacion="vertical"] .cat-ficha-datos { flex: 1; }
.kiosco.catalogo[data-orientacion="vertical"] .cat-carro { top: auto; left: 0; width: 100%; max-height: 82vh; border-radius: var(--radio) var(--radio) 0 0; animation: entrar-abajo .25s cubic-bezier(.2,.8,.2,1); }
.kiosco.catalogo[data-orientacion="vertical"] .cat-logo img { max-width: 30vw; }
.kiosco.catalogo[data-orientacion="vertical"] .cat-cliente { display: none; }
@media (orientation: portrait) {
  .kiosco.catalogo[data-orientacion="auto"] .cat-ficha, .kiosco.catalogo[data-orientacion="auto"] .cat-capa-caja.ficha { display: flex; flex-direction: column; }
  .kiosco.catalogo[data-orientacion="auto"] .cat-ficha-galeria { flex: 0 0 38%; }
  .kiosco.catalogo[data-orientacion="auto"] .cat-ficha-datos { flex: 1; }
  .kiosco.catalogo[data-orientacion="auto"] .cat-carro { top: auto; left: 0; width: 100%; max-height: 82vh; border-radius: var(--radio) var(--radio) 0 0; animation: entrar-abajo .25s cubic-bezier(.2,.8,.2,1); }
  .kiosco.catalogo[data-orientacion="auto"] .cat-logo img { max-width: 30vw; }
  .kiosco.catalogo[data-orientacion="auto"] .cat-cliente { display: none; }
}
@keyframes entrar-abajo { from { transform: translateY(100%); } to { transform: none; } }

/* Teléfono: la misma URL en el celular del cliente. */
@media (max-width: 600px) {
  .kiosco.catalogo { --margen: 12px; }
  .cat-barra { flex-wrap: wrap; }
  .cat-buscar { order: 3; flex-basis: 100%; }
  .cat-capa { padding: 0; }
  .cat-capa-caja, .cat-capa-caja.ficha { border-radius: 0; height: 100%; max-height: 100%; width: 100%; }
  .cat-carro { width: 100%; }
  .cat-ficha-accion { flex-direction: column; align-items: stretch; }
  .cat-ficha-accion .cantidad { margin-left: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-tarjeta, .cat-capa, .cat-carro, .cat-toast, .cat-carro-boton.lleno, .cat-confirmacion .check, .cat-ficha-galeria .foto-grande img { animation: none; }
}

/* kiosco.css define .precio para el consultor (enorme, con animación y reglas por orientación de
   mayor especificidad). En el catálogo el precio es texto normal: se neutraliza con más peso. */
.kiosco.catalogo .cat-tarjeta .precio, .kiosco.catalogo .cat-promos .precio, .kiosco.catalogo .sugerencias .precio,
.kiosco.catalogo .cat-ficha-accion .precio, .kiosco.catalogo .cat-ficha-accion .precio-desde .precio {
  display: block; animation: none; line-height: 1.1; font-stretch: normal; letter-spacing: -0.02em; white-space: nowrap; gap: 0;
}
.kiosco.catalogo .cat-tarjeta .precio { font-size: var(--t2); padding-right: calc(var(--toque) * .9); }
.kiosco.catalogo .cat-promos .precio { font-size: var(--t1); }
.kiosco.catalogo .sugerencias .precio { font-size: var(--t3); }
.kiosco.catalogo .cat-ficha-accion .precio, .kiosco.catalogo .cat-ficha-accion .precio-desde .precio { font-size: calc(var(--escala) * clamp(30px, 6vmin, 76px)); line-height: 1; letter-spacing: -0.03em; }

/* La raíz .kiosco es position: fixed y por eso forma su propio contexto de apilamiento: las
   capas (z 60) no pueden pasar por encima de las zonas del gesto de supervisor (z 50, en la
   raíz del documento), que tapan la esquina donde va el botón de cerrar. Con una capa o el
   carro abiertos, las zonas dejan de recibir toques. */
.kiosco-main:has(.cat-capa, .cat-velo) .gesto-zona { pointer-events: none; }
/* En el catálogo las esquinas superiores tienen botones (logo, Inicio, carro): las zonas del
   gesto bajan a las esquinas inferiores, donde solo está el pie. */
.kiosco-main:has(.kiosco.catalogo) .gesto-zona { top: auto; bottom: 0; }

/* ---------- Ficha ampliada (producto_ficha, sql/126) ---------- */
.cat-ficha-datos .sellos { display: flex; gap: 1vmin; flex-wrap: wrap; margin: .4vmin 0; }
/* Sello "ALTO EN" de la Ley 20.606: octágono negro con texto blanco, como en la góndola. */
.cat-ficha-datos .sello { width: calc(var(--escala) * clamp(56px, 9vmin, 104px)); aspect-ratio: 1; background: #111; color: #fff; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.cat-ficha-datos .sello .alto { font-size: calc(var(--escala) * clamp(8px, 1.3vmin, 15px)); }
.cat-ficha-datos .sello .en { font-size: calc(var(--escala) * clamp(7px, 1.1vmin, 13px)); font-weight: 700; }
.cat-ficha-datos .sello .que { font-size: calc(var(--escala) * clamp(8px, 1.35vmin, 16px)); margin-top: .15em; }
.cat-ficha-datos .sello .minsal { font-size: calc(var(--escala) * clamp(5px, .8vmin, 9px)); font-weight: 600; margin-top: .3em; opacity: .85; }
.cat-ficha-datos .etiquetas { display: flex; gap: .8vmin; flex-wrap: wrap; }
.cat-ficha-datos .etiquetas span { font-size: var(--t4); font-weight: 700; padding: .3em .8em; border-radius: 999px; background: #E2F5E9; color: #1B7F3B; }
.cat-ficha-datos .alergenos { font-size: var(--t3); padding: .8vmin 1.4vmin; border-radius: calc(var(--radio) * .5); background: #FFF4E0; color: #8A5A00; }
.cat-ficha-datos .alergenos strong { font-weight: 800; }
.cat-ficha-datos .nutriscore { display: inline-flex; gap: .2em; align-items: center; }
.cat-ficha-datos .nutriscore span { width: 1.7em; height: 1.7em; border-radius: .35em; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: var(--t4); color: #fff; opacity: .3; }
.cat-ficha-datos .nutriscore span.activo { opacity: 1; transform: scale(1.18); }
.cat-ficha-datos .nutriscore .a { background: #038141; } .cat-ficha-datos .nutriscore .b { background: #85BB2F; } .cat-ficha-datos .nutriscore .c { background: #FECB02; color: #1E1B16; }
.cat-ficha-datos .nutriscore .d { background: #EE8100; } .cat-ficha-datos .nutriscore .e { background: #E63E11; }
.cat-ficha-datos details { border-top: 1px solid var(--panel-linea); padding: .8vmin 0; }
.cat-ficha-datos summary { cursor: pointer; font-size: var(--t3); font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: calc(var(--toque) * .7); }
.cat-ficha-datos summary::after { content: "+"; font-size: var(--t2); color: var(--panel-texto-2); }
.cat-ficha-datos details[open] summary::after { content: "−"; }
.cat-ficha-datos details p { margin: .4vmin 0 0; font-size: var(--t3); line-height: 1.4; color: var(--panel-texto); }
.cat-ficha-datos table.nutricion { width: 100%; border-collapse: collapse; font-size: var(--t3); }
.cat-ficha-datos table.nutricion td { padding: .5vmin 0; border-top: 1px solid var(--panel-linea); }
.cat-ficha-datos table.nutricion td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-ficha-datos table.nutricion caption { text-align: left; font-size: var(--t4); color: var(--panel-texto-2); padding-bottom: .4vmin; }

/* ---------- sql/129: código visible, precio neto, vista mayorista y WhatsApp ---------- */
.cat-tarjeta .codigo { font-size: var(--t4); color: var(--texto-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.kiosco[data-tema="color"] .cat-tarjeta .codigo { color: #9A9388; }
.kiosco.catalogo .neto { display: inline-block; margin-left: .4em; font-size: var(--t4); font-weight: 600; color: var(--texto-3); letter-spacing: 0; vertical-align: middle; }
.kiosco.catalogo .cat-carro .neto, .kiosco.catalogo .cat-lista .neto { color: var(--panel-texto-3); }
.kiosco[data-tema="color"] .cat-tarjeta .neto { color: #9A9388; }
.cat-resumen tfoot tr.parcial td { font-size: var(--t3); font-weight: 600; color: var(--texto-2); border-top: 1px solid var(--tarjeta-borde); }

/* Pestañas de categoría (vista mayorista): una fila deslizable arriba del listado. */
.cat-pestanas { display: flex; gap: .8vmin; overflow-x: auto; padding: calc(var(--escala) * 1.2vmin) 0 .4vmin; scrollbar-width: none; border-bottom: 2px solid var(--linea); margin-bottom: .4vmin; }
.cat-pestanas::-webkit-scrollbar { display: none; }
.cat-pestanas .pestana { flex-shrink: 0; display: inline-flex; align-items: center; gap: .6em; min-height: calc(var(--toque) * .8); padding: 0 calc(var(--escala) * 2vmin); border-radius: calc(var(--radio) * .6) calc(var(--radio) * .6) 0 0; font-size: var(--t3); font-weight: 700; color: var(--texto-2); border-bottom: 4px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.cat-pestanas .pestana .cuenta { font-size: var(--t4); font-weight: 600; color: var(--texto-3); }
.cat-pestanas .pestana.activa { color: var(--texto); border-bottom-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, transparent); }
.kiosco[data-tema="color"] .cat-pestanas .pestana.activa { color: #fff; border-bottom-color: #fff; background: rgba(255,255,255,.14); }
.kiosco.catalogo[data-tema="color"] .cat-pestanas { border-bottom-color: rgba(255,255,255,.3); }

/* Lista compacta (vista mayorista): una fila por producto con foto pequeña, código, precio y cantidad. */
.cat-lista { display: flex; flex-direction: column; border-radius: var(--radio); background: var(--panel); color: var(--panel-texto); overflow: hidden; border: 2px solid var(--tarjeta-borde); }
.cat-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(var(--escala) * 1.6vmin); padding: calc(var(--escala) * 1vmin) calc(var(--escala) * 1.6vmin); border-top: 1px solid var(--panel-linea); min-height: calc(var(--toque) * 1.1); cursor: pointer; }
.cat-fila:first-child { border-top: 0; }
.cat-fila.agotada .foto img, .cat-fila.agotada .foto .monograma { opacity: .35; filter: grayscale(1); }
.cat-fila .foto { width: calc(var(--toque) * .95); height: calc(var(--toque) * .95); border-radius: calc(var(--radio) * .45); background: var(--foto-fondo); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.cat-fila .foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.cat-fila .foto .monograma { font-size: var(--t1); font-weight: 900; color: color-mix(in srgb, var(--acento) 35%, transparent); }
.cat-fila .datos { min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.cat-fila .nombre { font-size: var(--t3); font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-fila .detalle { display: flex; align-items: center; gap: 1.2vmin; flex-wrap: wrap; font-size: var(--t4); color: var(--panel-texto-2); }
.kiosco.catalogo .cat-fila .detalle .marca { font-size: var(--t4); color: var(--panel-texto-2); margin: 0; }
.cat-fila .detalle .codigo { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--panel-texto-3); font-weight: 600; }
.cat-fila .insignia { background: var(--etiqueta-fondo); color: var(--etiqueta-texto); font-weight: 700; padding: .2em .6em; border-radius: .4em; }
.cat-fila .insignia.suave { background: var(--panel-suave); color: var(--panel-texto); }
.kiosco.catalogo .cat-fila .precio { display: block; animation: none; font-size: var(--t2); font-weight: 900; color: var(--precio); letter-spacing: -0.02em; white-space: nowrap; text-align: right; line-height: 1.1; padding: 0; margin: 0; }
.kiosco[data-tema="color"] .cat-fila .precio { color: var(--acento); }
.kiosco[data-tema="oscuro"] .cat-fila .precio { color: #FFC531; }
.cat-fila .mas, .cat-fila .elegir { width: calc(var(--toque) * .9); height: calc(var(--toque) * .9); border-radius: 50%; background: var(--bolsa); color: var(--bolsa-texto); font-size: var(--t2); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kiosco[data-tema="color"] .cat-fila .mas, .kiosco[data-tema="color"] .cat-fila .elegir { background: var(--acento); color: #fff; }
.cat-fila .elegir { width: auto; padding: 0 1.6vmin; border-radius: 999px; font-size: var(--t4); }
.cat-fila .cantidad { display: inline-flex; align-items: center; border: 2px solid var(--acento); border-radius: 999px; flex-shrink: 0; }
.cat-fila .cantidad button { width: calc(var(--toque) * .8); height: calc(var(--toque) * .8); font-size: var(--t2); font-weight: 700; }
.cat-fila .cantidad span { min-width: 2em; text-align: center; font-weight: 800; font-size: var(--t3); }

/* Salida por WhatsApp: QR con el enlace wa.me y botón para el teléfono. */
.cat-whatsapp { display: flex; align-items: center; gap: calc(var(--escala) * 2.4vmin); padding: calc(var(--escala) * 2vmin); margin: 0 0 calc(var(--escala) * 2vmin); border-radius: var(--radio); background: var(--tarjeta); color: var(--tarjeta-texto); border: 2px solid var(--tarjeta-borde); text-align: left; }
.cat-confirmacion .cat-whatsapp { margin-top: calc(var(--escala) * 1vmin); width: min(100%, 700px); }
.cat-whatsapp .qr { width: calc(var(--escala) * clamp(110px, 20vmin, 240px)); aspect-ratio: 1; background: #fff; border-radius: calc(var(--radio) * .6); padding: 2%; flex-shrink: 0; }
.cat-whatsapp .qr:empty { display: none; }
.cat-whatsapp .qr svg { width: 100%; height: 100%; }
.cat-whatsapp .texto { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.cat-whatsapp .texto strong { font-size: var(--t2); font-weight: 800; }
.cat-whatsapp .texto span { font-size: var(--t3); color: var(--texto-2); }
.cat-whatsapp .texto small { font-size: var(--t4); color: var(--texto-3); }
.kiosco[data-tema="color"] .cat-whatsapp .texto span, .kiosco[data-tema="color"] .cat-whatsapp .texto small { color: #6B655B; }
.cat-whatsapp .boton-wa { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; min-height: var(--toque); padding: 0 calc(var(--escala) * 3vmin); border-radius: 999px; background: #25D366; color: #073B1C; font-size: var(--t3); font-weight: 800; text-decoration: none; }
.cat-ficha-accion .agregar.caja { flex: 0 1 auto; background: var(--panel-suave); color: var(--panel-texto); border: 2px solid var(--panel-linea); }
@media (max-width: 600px) {
  .cat-whatsapp { flex-direction: column; align-items: stretch; }
  .cat-whatsapp .qr { display: none; }
  .cat-whatsapp .boton-wa { align-self: stretch; justify-content: center; }
  .cat-fila { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: .6vmin; }
  .cat-fila .foto, .cat-fila .datos { grid-row: 1 / 3; }
  .cat-fila .precio { grid-column: 3; grid-row: 1; align-self: end; }
  .cat-fila .mas, .cat-fila .elegir, .cat-fila .cantidad { grid-column: 3; grid-row: 2; justify-self: end; }
  .cat-fila .mas { width: calc(var(--toque) * .75); height: calc(var(--toque) * .75); }
}

/* El botón + flota abajo a la derecha de la tarjeta: marca y precio le dejan el hueco y el "neto" baja de línea si no cabe. */
.cat-tarjeta .marca, .cat-tarjeta .codigo { padding-right: calc(var(--toque) * .9); }
.kiosco.catalogo .cat-tarjeta .precio { white-space: normal; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35em; row-gap: 0; }
.kiosco.catalogo .cat-tarjeta .precio .neto { margin-left: 0; }
.cat-fila .mas:disabled { opacity: .25; }

/* Pestañas, título y filtros quedan fijos arriba mientras se recorre el listado. */
.cat-fijo { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen) .2vmin; background: color-mix(in srgb, var(--fondo) 96%, transparent); }
.kiosco.catalogo[data-tema="color"] .cat-fijo { background: color-mix(in srgb, var(--acento) 96%, transparent); }

/* Arrastre con mouse: sin seleccionar texto ni "levantar" imágenes. */
.cat-cuerpo, .cat-carro, .cat-ficha-datos, .cat-ficha-galeria { user-select: none; }
.kiosco.catalogo img { -webkit-user-drag: none; user-drag: none; }

/* Las fotos suelen venir con fondo blanco (no transparente): la caja de la foto es blanca en todos
   los temas para que no se note el recorte, con un borde tenue para separarla de la tarjeta clara. */
.kiosco.catalogo, .kiosco.catalogo[data-tema="oscuro"], .kiosco.catalogo[data-tema="nocturno"], .kiosco.catalogo[data-tema="color"] { --foto-fondo: #FFFFFF; }
.cat-tarjeta .foto, .categoria img, .cat-fila .foto, .cat-carro .linea .foto, .sugerencias img { border: 1px solid color-mix(in srgb, var(--tarjeta-borde, #E6E1D6) 70%, transparent); }
.kiosco.catalogo[data-tema="color"] .cat-tarjeta .foto, .kiosco.catalogo[data-tema="color"] .categoria img { border-color: #ECE8E0; }

/* Una palabra larga (Salchichonería) no debe salirse de la tarjeta de categoría. */
.categoria .nombre, .cat-tarjeta .nombre, .cat-fila .nombre { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 600px) {
  .cat-ficha-accion .por { align-self: flex-start; margin-top: -.8em; }
}

/* Tarjetas en crema claro y la foto en blanco: la foto con fondo blanco queda como un recuadro
   limpio y la tarjeta se separa del fondo de la página. Los temas oscuros conservan su tarjeta. */
.kiosco.catalogo { --tarjeta-suave: #F5F2EB; --tarjeta-suave-borde: #EBE6DC; }
.kiosco.catalogo[data-tema="color"] { --tarjeta-suave: #F7F4EE; --tarjeta-suave-borde: transparent; }
.kiosco.catalogo[data-tema="oscuro"], .kiosco.catalogo[data-tema="nocturno"] { --tarjeta-suave: var(--tarjeta); --tarjeta-suave-borde: var(--tarjeta-borde); }
.kiosco.catalogo .cat-tarjeta, .kiosco.catalogo .categoria, .kiosco.catalogo .cat-promos .promo, .kiosco.catalogo .cat-whatsapp { background: var(--tarjeta-suave); border-color: var(--tarjeta-suave-borde); }
.kiosco.catalogo .cat-tarjeta .foto, .kiosco.catalogo .categoria img, .kiosco.catalogo .cat-fila .foto, .kiosco.catalogo .cat-carro .linea .foto { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, .05); }
.kiosco.catalogo .cat-tarjeta .insignia.suave { background: #FFFFFF; }

/* Categorías: el nombre reserva siempre dos líneas para que todas las fotos midan lo mismo. */
.categoria .nombre { min-height: 2.16em; }

/* Identificación: el campo del RUT mide lo mismo que el teclado numérico y respira antes de las teclas. */
.cat-identificacion .campo.grande { width: min(100%, 420px); margin: 0 auto calc(var(--escala) * 2vmin); justify-content: center; text-align: center; }
.cat-identificacion .cat-capa-caja h2 { padding-right: var(--toque); }
.cat-identificacion .mensaje-error { text-align: center; }