/* Tienda (tienda.js) y su mosaico en Hoy (hoy.js). Medidas y colores del sistema (sistema.css): nada suelto.
   Fotos y logos van sobre blanco en los dos temas: así se ven igual en claro y en oscuro. */
.tn .tn-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);margin:0 0 var(--esp-3)}
.tn .tn-atras{background:none;border:0;padding:var(--esp-2) 0;color:var(--menta);font:700 var(--t-3)/1 var(--f);text-decoration:none;cursor:pointer}
.tn .tn-prueba{padding:var(--esp-1) var(--esp-3);border:1px solid var(--linea2);border-radius:var(--radio-pildora);color:var(--gris);font-size:var(--t-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tn .tn-busca{margin:var(--esp-4) 0 0;max-width:none}
html .tn .tn-busca input{padding-left:44px!important}
.tn .tn-marcas{display:flex;gap:var(--esp-2);overflow-x:auto;padding:var(--esp-1) 0 var(--esp-2);margin:var(--esp-3) 0 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tn .tn-marcas::-webkit-scrollbar{display:none}
.tn .tn-chip{flex:none;display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:76px;padding:0 var(--esp-3);border-radius:var(--radio-pildora);border:2px solid transparent;background:#fff;color:#14181F;font:800 var(--t-2)/1 Archivo,sans-serif;cursor:pointer;transition:border-color var(--dur-1) var(--curva-entra)}
.tn .tn-chip img{height:18px;max-width:84px;object-fit:contain;filter:brightness(0);opacity:.85} /* hay logos blancos y de color: todos en negro sobre blanco */
.tn .tn-chip.on{border-color:var(--menta)}
.tn .tn-cats{display:flex;gap:var(--esp-2);overflow-x:auto;margin:var(--esp-2) 0 0;padding-bottom:var(--esp-1);scrollbar-width:none;-webkit-overflow-scrolling:touch} /* en el celular, una sola fila que se desliza */
.tn .tn-cats::-webkit-scrollbar{display:none}
.tn .tn-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--esp-1);min-height:84px;padding:var(--esp-2);border:1px solid var(--linea2);border-radius:var(--radio-2);background:var(--sup);color:var(--texto);font:600 var(--t-1)/1.2 var(--f);text-align:center;cursor:pointer;transition:border-color var(--dur-1) var(--curva-entra);flex:none;width:104px}
.tn .tn-cat svg{width:28px;height:28px;color:var(--menta)}
.tn .tn-cat.on{border-color:var(--menta);box-shadow:0 0 0 1px var(--menta) inset}
@media (min-width:760px){.tn .tn-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}.tn .tn-cat{width:auto}}
@media (min-width:1100px){.tn .tn-cats{grid-template-columns:repeat(9,minmax(0,1fr))}}
.tn .tn-cuenta{margin:var(--esp-4) 0 var(--esp-2);color:var(--gris);font-size:var(--t-2);min-height:1em}
.tn .tn-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-3)}
@media (min-width:760px){.tn .tn-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.tn .tn-rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tn .tn-t{display:flex;flex-direction:column;gap:var(--esp-1);min-width:0;padding:var(--esp-2) var(--esp-2) var(--esp-3);border:1px solid var(--linea2);border-radius:var(--radio-2);background:var(--sup);color:var(--texto);text-decoration:none;transition:border-color var(--dur-1) var(--curva-entra)}
.tn .tn-t:hover{border-color:var(--menta)}
.tn .tn-foto{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:var(--radio-1);background:#fff;overflow:hidden;margin-bottom:var(--esp-1)}
.tn .tn-foto img{width:100%;height:100%;object-fit:contain}
.tn .tn-m{color:var(--gris);font-size:var(--t-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn .tn-n{font-size:var(--t-2);font-weight:600;line-height:var(--t-linea);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3em * 1.4)}
.tn .tn-precio{margin-top:auto;padding-top:var(--esp-1);font:800 var(--t-4)/1.1 Archivo,sans-serif;color:var(--menta)}
.tn .tn-precio small{font-size:var(--t-1);font-weight:600;color:var(--gris)}
.tn .tn-precio s{font-size:var(--t-1);font-weight:600;color:var(--gris)}
.tn .tn-precio.grande{font-size:var(--t-7)}
.tn .tn-precio.grande s{font-size:var(--t-3)}
.tn .tn-pedido{color:var(--gris);font-size:var(--t-1)}
.tn .tn-mas{display:flex;justify-content:center;margin-top:var(--esp-4)}.tn .tn-mas .btn{margin:0}
.tn .tn-pie{margin-top:var(--esp-4)}
.tn .tn-ficha{display:grid;grid-template-columns:1fr;gap:var(--esp-4)}
@media (min-width:760px){.tn .tn-ficha{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.tn .tn-foto.grande{margin:0;border-radius:var(--radio-3)}
.tn .tn-fm{display:flex;align-items:center;gap:var(--esp-2);color:var(--gris);font-size:var(--t-2)}
.tn .tn-fm .tn-chip{cursor:default;height:36px}
.tn .tn-titulo{margin:var(--esp-2) 0 var(--esp-3);font-size:var(--t-5);line-height:var(--t-linea-titulo)}
.tn .tn-iva{margin:var(--esp-1) 0 var(--esp-4);color:var(--gris);font-size:var(--t-2)}
.tn .tn-iva .tn-si{color:var(--menta)}
.tn .tn-comprar,.tn .tn-wa{display:flex;align-items:center;justify-content:center;gap:var(--esp-2);width:100%;margin:0 0 var(--esp-2);text-decoration:none}
.tn .tn-wa svg{width:20px;height:20px}
.tn .tn-h2{margin:var(--esp-6) 0 var(--esp-3);font-size:var(--t-4)}

/* mosaico grande en Hoy */
.hoy-tienda{position:relative;display:flex;align-items:center;gap:var(--esp-3);min-height:96px;margin:0;padding:var(--esp-3) var(--esp-4);border:1px solid var(--linea2);border-radius:var(--radio-2);background:var(--sup);color:var(--texto);text-decoration:none;overflow:hidden;transition:border-color var(--dur-1) var(--curva-entra)}
.hoy-tienda:hover{border-color:var(--menta)}
.hoy-tienda .ht-ico{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radio-2);background:var(--menta);color:var(--sup)}
.hoy-tienda .ht-ico svg{width:30px;height:30px}
.hoy-tienda .ht-txt{flex:1;min-width:0;position:relative;z-index:1}
.hoy-tienda b{display:block;font:800 var(--t-5)/1.1 Archivo,sans-serif}
.hoy-tienda small{display:block;margin-top:var(--esp-1);color:var(--gris);font-size:var(--t-2)}
.hoy-tienda .ht-foto{flex:none;width:84px;height:84px;object-fit:contain;margin:-6px -6px -6px 0}
.hoy-tienda .ht-ir{flex:none;color:var(--menta);font:700 var(--t-5)/1 var(--f)}