/* ──────────────────────────────────────────────────────────────
   Tienda · estilos propios del catálogo.
   Se apoyan en styles.css (idéntico al de la web principal): mismos
   colores, tipografías, cristal, botones y animaciones.
   ────────────────────────────────────────────────────────────── */

.t-hero { padding-bottom: 2rem; }
@media (min-width: 48rem) { .t-hero { padding-top: 8rem; padding-bottom: 3rem; } }
.t-hero h1 { font-size: clamp(2.5rem, 5.6vw, 5rem); }

/* ───── Buscador ───── */
.t-search {
  position: relative;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  max-width: 39rem;
  border-radius: 999px;
  background: rgba(7, 16, 29, 0.85);
  border: 1px solid rgba(103, 232, 249, 0.3);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.05), 0 18px 60px -20px rgba(34, 211, 238, 0.4);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.t-search:focus-within {
  border-color: #67e8f9;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18), 0 18px 60px -16px rgba(34, 211, 238, 0.55);
}
.t-search > .icon { margin-left: 1.25rem; width: 1.25rem; height: 1.25rem; color: var(--cy); flex: none; }
.t-search-input {
  flex: 1;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0 1rem;
  color: #fff;
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
}
.t-search-input:focus-visible { outline: none; }
.t-search-input::placeholder { color: #6f8199; }
.t-search-input::-webkit-search-cancel-button { display: none; }
.t-search-clear {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-right: 0.5rem;
  border-radius: 999px; color: var(--faint); transition: color 0.2s, background 0.2s;
}
.t-search-clear:hover { color: #fff; background: rgba(148, 163, 184, 0.15); }
.t-search-clear .icon { width: 1rem; height: 1rem; }
.t-kbd {
  display: none; margin-right: 1.1rem; padding: 0.15rem 0.5rem; border-radius: 0.4rem;
  border: 1px solid rgba(148, 163, 184, 0.3); color: var(--faint); font-size: 0.6875rem;
}
@media (hover: hover) and (min-width: 48rem) { .t-kbd { display: block; } }
.t-search:focus-within .t-kbd, .t-search.has-text .t-kbd { display: none; }
.t-stats { max-width: 39rem; }

/* ───── Disposición ───── */
.t-catalog { padding-top: 2rem; }
.t-layout { margin-top: 2.5rem; display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) { .t-layout { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2rem; } }
.t-results { min-width: 0; scroll-margin-top: 6rem; }

/* ───── Filtros ───── */
.t-filters { padding: 1.25rem; }
@media (min-width: 64rem) {
  .t-filters { position: sticky; top: 5.5rem; max-height: calc(100dvh - 6.5rem); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 63.99rem) {
  .t-filters {
    position: fixed; inset: 0 0 0 auto; z-index: 70; width: min(24rem, 92vw); border-radius: 1.5rem 0 0 1.5rem;
    overflow-y: auto; transform: translateX(105%); visibility: hidden;
    transition: transform 0.4s var(--ease-out-expo), visibility 0s linear 0.4s;
    background: linear-gradient(180deg, rgba(10, 18, 34, 0.98), rgba(6, 11, 22, 0.98));
  }
  .t-filters.is-open { transform: none; visibility: visible; transition-delay: 0s; }
}
.t-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(2, 5, 10, 0.7); backdrop-filter: blur(3px); animation: t-fade 0.3s both; }
@keyframes t-fade { from { opacity: 0; } }
.t-filters-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.t-filters-head .t-link { margin-left: auto; }
.t-link { color: var(--cy); font-size: 0.6875rem; letter-spacing: 0.14em; padding: 0.4rem 0.25rem; }
.t-link:hover { color: var(--cy-soft); text-decoration: underline; }
.t-close { display: none; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 999px; color: #fff; border: 1px solid rgba(148, 163, 184, 0.3); }
@media (max-width: 63.99rem) { .t-close { display: grid; } }
.t-open-filters { display: none; }
@media (max-width: 63.99rem) { .t-open-filters { display: inline-flex; } }
.t-count-badge {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px;
  background: var(--cy); color: #04101a; font-size: 0.6875rem; font-weight: 700;
}
.t-group { border: 0; padding: 1rem 0 0.25rem; margin-top: 0.75rem; border-top: 1px solid rgba(148, 163, 184, 0.12); min-width: 0; }
.t-legend { padding: 0; margin-bottom: 0.75rem; color: var(--faint); font-size: 0.6875rem; }
.t-check {
  display: flex; align-items: center; gap: 0.65rem; min-height: 2.25rem; cursor: pointer; font-size: 0.9rem; color: var(--slate-200);
}
.t-check input { position: absolute; opacity: 0; pointer-events: none; }
.t-check .box {
  width: 1.1rem; height: 1.1rem; border-radius: 0.3rem; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.45); background: rgba(2, 6, 14, 0.6); transition: all 0.2s;
}
.t-check input:checked + .box { background: var(--cy); border-color: var(--cy); box-shadow: 0 0 14px rgba(34, 211, 238, 0.55); }
.t-check input:checked + .box::after { content: ""; width: 0.3rem; height: 0.55rem; border: solid #04101a; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.t-check input:focus-visible + .box { outline: 2px solid var(--cy-soft); outline-offset: 2px; }
.t-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; color: var(--faint); }
.t-range .field { min-height: 2.5rem; padding: 0.4rem 0.75rem; font-size: 0.875rem; }
.t-tree, .t-brands { display: grid; gap: 0.1rem; }
.t-brands { max-height: 15rem; overflow-y: auto; scrollbar-width: thin; margin-top: 0.5rem; padding-right: 0.25rem; }
.t-brand-q { min-height: 2.5rem; font-size: 0.875rem; }
.t-opt {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.25rem;
  padding: 0.3rem 0.6rem; border-radius: 0.6rem; font-size: 0.875rem; line-height: 1.3; color: var(--slate-300);
  transition: background 0.2s, color 0.2s;
}
.t-opt:hover { background: rgba(34, 211, 238, 0.08); color: #fff; }
.t-opt.is-on { background: rgba(34, 211, 238, 0.14); color: #fff; box-shadow: inset 2px 0 0 var(--cy); }
.t-opt .n { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--faint); flex: none; }
.t-sub { margin: 0.1rem 0 0.4rem 0.9rem; padding-left: 0.5rem; border-left: 1px solid rgba(34, 211, 238, 0.2); display: grid; gap: 0.1rem; }
.t-more { color: var(--cy); font-size: 0.8125rem; padding: 0.4rem 0.6rem; }
.t-more:hover { text-decoration: underline; }

/* ───── Barra de resultados ───── */
.t-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; }
.t-count { flex: 1 1 auto; font-size: 0.6875rem; color: var(--cy-soft); }
.t-sort .field { min-height: 2.5rem; padding: 0.4rem 2rem 0.4rem 0.9rem; font-size: 0.875rem; appearance: none; -webkit-appearance: none;
  background: rgba(2, 6, 14, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.7rem center; }
.t-sort option { background: #0a0f1a; color: #fff; }
.t-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.t-chips:empty { display: none; }
.t-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.4rem 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8125rem; color: #fff;
  background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.35); transition: background 0.2s;
}
.t-chip:hover { background: rgba(34, 211, 238, 0.2); }
.t-chip .icon { width: 0.9rem; height: 0.9rem; padding: 0.1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); box-sizing: content-box; }

/* ───── Tarjetas de producto ───── */
.t-grid { margin-top: 1rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.t-card {
  --i: 0;
  position: relative; display: flex; flex-direction: column; text-align: left; overflow: hidden; border-radius: 1.25rem;
  cursor: pointer; animation: t-in 0.5s ease-out both; animation-delay: calc(var(--i) * 28ms);
  transition: transform 0.35s var(--ease-out-expo), border-color 0.3s, box-shadow 0.3s;
}
@keyframes t-in { from { opacity: 0; transform: translateY(-6px); filter: blur(6px); } }
.t-card:hover, .t-card:focus-visible {
  transform: translateY(-4px); border-color: rgba(103, 232, 249, 0.5);
  box-shadow: 0 24px 60px -24px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.t-card .spot { z-index: 1; }
.t-card-img {
  position: relative; z-index: 2; display: grid; place-items: center; aspect-ratio: 1 / 0.82; margin: 0.6rem 0.6rem 0;
  border-radius: 0.9rem; background: radial-gradient(circle at 50% 40%, #fff 0%, #e8eef6 100%); overflow: hidden;
}
.t-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; transition: transform 0.5s var(--ease-out-expo); }
.t-card:hover .t-card-img img { transform: scale(1.06); }
.t-card-img.is-empty, .t-gal-main.is-empty { background: rgba(2, 6, 14, 0.7); color: var(--faint); }
.t-card-img .icon, .t-gal-main .icon { width: 2.5rem; height: 2.5rem; opacity: 0.5; }
.t-tag { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 3; }
.t-card-body { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem 1rem; }
.t-brand { font-size: 0.625rem; color: var(--cy); letter-spacing: 0.16em; }
.t-title {
  font-size: 0.9rem; line-height: 1.35; font-weight: 600; color: #fff; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.t-ref { font-size: 0.625rem; color: var(--faint); letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-card-foot { margin-top: auto; padding-top: 0.6rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.t-price { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.t-price small { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.t-stock { display: inline-flex; align-items: center; gap: 0.4rem; }
.t-stock i { width: 0.4rem; height: 0.4rem; border-radius: 99px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge-pink { color: #fda4af; border-color: rgba(251, 113, 133, 0.4); background: rgba(251, 113, 133, 0.08); }
.badge-violet { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.45); background: rgba(167, 139, 250, 0.1); }

/* ───── Paginación y avisos ───── */
.t-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 2rem; }
.t-pager:empty { display: none; }
.t-pg {
  display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.7rem; border-radius: 0.8rem; font-family: var(--font-mono);
  font-size: 0.75rem; color: var(--slate-200); border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(9, 15, 28, 0.7);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.t-pg:hover:not(:disabled) { border-color: rgba(103, 232, 249, 0.55); background: rgba(14, 28, 50, 0.8); transform: translateY(-1px); }
.t-pg[aria-current="page"] { color: #04101a; background: linear-gradient(135deg, #f1f7fb, #bff4fc); border-color: transparent; font-weight: 700; box-shadow: 0 8px 26px -8px rgba(34, 211, 238, 0.7); }
.t-pg:disabled { opacity: 0.35; }
.t-pg-gap { color: var(--faint); padding: 0 0.2rem; }
.t-note { margin-top: 1.5rem; display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.5; color: var(--faint); }
.t-note .icon { margin-top: 0.2rem; flex: none; color: var(--cy); }
.t-empty { margin-top: 1rem; padding: 3rem 1.5rem; text-align: center; }
.t-empty .icon { margin: 0 auto 1rem; width: 2.5rem; height: 2.5rem; color: var(--cy); }
.t-empty h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.t-empty p { margin: 0.6rem auto 0; max-width: 34rem; }
.t-skel { aspect-ratio: 1 / 1.35; border-radius: 1.25rem; background: linear-gradient(100deg, rgba(14, 26, 48, 0.5) 30%, rgba(34, 211, 238, 0.07) 50%, rgba(14, 26, 48, 0.5) 70%); background-size: 250% 100%; animation: t-shim 1.6s linear infinite; border: 1px solid rgba(34, 211, 238, 0.1); }
@keyframes t-shim { to { background-position: -150% 0; } }

/* ───── Ficha del producto ───── */
.t-modal {
  position: fixed; inset: 0; /* .glass lo ponía en relative y al abrir la página saltaba arriba */
  width: min(62rem, calc(100vw - 1.5rem)); max-height: min(92dvh, 56rem); padding: 0; margin: auto; color: var(--body); overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 22, 42, 0.98), rgba(6, 11, 22, 0.98));
}
.t-modal[open] { animation: t-pop 0.45s var(--ease-out-expo) both; display: flex; }
.t-modal::backdrop { background: rgba(2, 5, 10, 0.78); backdrop-filter: blur(5px); animation: t-fade 0.3s both; }
@keyframes t-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(6px); } }
.t-modal-close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 5; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  color: #fff; background: rgba(10, 16, 28, 0.9); border: 1px solid rgba(148, 163, 184, 0.3); transition: border-color 0.2s, transform 0.3s;
}
.t-modal-close:hover { border-color: var(--cy-soft); transform: rotate(90deg); }
.t-modal-body { width: 100%; overflow-y: auto; padding: 1.25rem; scrollbar-width: thin; display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 48rem) { .t-modal-body { padding: 2rem; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; } }
.t-gal-main { display: grid; place-items: center; aspect-ratio: 1; border-radius: 1.1rem; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff, #e8eef6); }
.t-gal-main img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.t-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.t-thumb { width: 3.6rem; height: 3.6rem; border-radius: 0.7rem; background: #fff; overflow: hidden; border: 2px solid transparent; opacity: 0.7; transition: opacity 0.2s, border-color 0.2s; }
.t-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.2rem; }
.t-thumb:hover, .t-thumb[aria-current="true"] { opacity: 1; border-color: var(--cy); }
.t-info h2 { margin-top: 0.6rem; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: #fff; padding-right: 2.5rem; }
.t-meta { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.t-big-price { margin-top: 1.25rem; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.04em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.t-big-price small { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.t-cta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.t-kv { margin-top: 1.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.t-kv > div { padding: 0.6rem 0.8rem; }
.t-kv dt { font-size: 0.5625rem; color: var(--faint); letter-spacing: 0.16em; }
.t-kv dd { margin-top: 0.2rem; font-size: 0.875rem; color: #fff; overflow-wrap: anywhere; }
.t-ficha { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid rgba(148, 163, 184, 0.14); font-size: 0.9rem; line-height: 1.65; }
.t-ficha h3 { font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.t-ficha strong, .t-ficha b { color: var(--slate-100); }
.t-ficha table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.t-ficha td { padding: 0.5rem 0.75rem; vertical-align: top; border-top: 1px solid rgba(148, 163, 184, 0.12); }
.t-ficha tr > td:first-child { width: 28%; min-width: 7rem; color: var(--cy-soft); }
.t-ficha ul { list-style: disc; padding-left: 1.2rem; }
.t-ficha-load { color: var(--faint); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ───── Banda de cifras: 4 columnas iguales y fecha más compacta ───── */
.t-stats .stat { order: 0 !important; grid-column: auto !important; border: 0 !important; min-width: 0; }
.t-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-stats .stat:nth-child(odd) { border-right: 1px solid rgba(148, 163, 184, 0.2) !important; }
.t-stats .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important; }
@media (min-width: 40rem) {
  .t-stats { grid-template-columns: 1.35fr 1fr 1fr 1fr; }
  .t-stats .stat { border-bottom: 0 !important; border-right: 1px solid rgba(148, 163, 184, 0.2) !important; }
  .t-stats .stat:last-child { border-right: 0 !important; }
}
#st-fecha { white-space: nowrap; }
.t-stats .stat .sub { white-space: normal; overflow: visible; text-overflow: clip; }
.t-stats .stat .lbl { white-space: nowrap; }
.t-stats .stat { padding: 1.1rem 1rem; }
@media (min-width: 40rem) {
  .t-stats .stat .val { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
  .t-stats { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; }
}

/* ───── Cabecera del catálogo: título a la izquierda, buscador a la derecha ───── */
.t-catalog { padding-top: 7rem; }
@media (min-width: 48rem) { .t-catalog { padding-top: 8.5rem; } }
.t-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; }
.t-head .section-head { max-width: none; }
.t-head .section-head h1 { margin-top: 1rem; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.04em; }
.t-head-search { flex: 1 1 22rem; max-width: 34rem; margin-left: auto; }
.t-head .t-search { margin-top: 0; max-width: none; }
.t-layout { margin-top: 2rem; }

/* ───── Menú de categorías: grupos → categorías → subcategorías, con iconos ───── */
.t-tree { gap: 0.35rem; }
.t-grp { border-radius: 1rem; transition: background 0.3s; }
.t-grp.is-open { background: rgba(34, 211, 238, 0.04); }
.t-grp-btn {
  display: flex; width: 100%; align-items: center; gap: 0.7rem; min-height: 2.9rem; padding: 0.35rem 0.6rem 0.35rem 0.4rem; border-radius: 1rem;
  color: var(--slate-200); font-weight: 600; font-size: 0.9rem; line-height: 1.25; transition: background 0.25s, color 0.25s;
}
.t-grp-btn:hover { background: rgba(34, 211, 238, 0.08); color: #fff; }
.t-grp-btn.is-on { background: rgba(34, 211, 238, 0.14); color: #fff; }
.t-grp-name { flex: 1; text-align: left; min-width: 0; }
.t-grp-btn .n, .t-fam-btn .n { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; color: var(--faint); flex: none; }
.t-ico {
  display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; color: var(--cy-soft);
  background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.22); transition: background 0.25s, box-shadow 0.25s, color 0.25s;
}
.t-ico .icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-grp-btn:hover .t-ico, .t-grp.is-open .t-ico, .t-grp-btn.is-on .t-ico { background: rgba(34, 211, 238, 0.18); box-shadow: 0 0 16px -2px rgba(34, 211, 238, 0.55); color: #fff; }
.t-grp-btn .chev { width: 1rem; height: 1rem; flex: none; color: var(--faint); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-out-expo), color 0.2s; }
.t-grp.is-open > .t-grp-btn .chev { transform: rotate(180deg); color: var(--cy); }
.t-fams { display: grid; gap: 0.1rem; margin: 0.15rem 0 0.5rem 1.2rem; padding-left: 0.9rem; border-left: 1px solid rgba(34, 211, 238, 0.22); animation: t-open 0.35s var(--ease-out-expo) both; }
@keyframes t-open { from { opacity: 0; transform: translateY(-6px); } }
.t-fam-btn {
  display: flex; width: 100%; align-items: center; gap: 0.6rem; min-height: 2.25rem; padding: 0.25rem 0.5rem; border-radius: 0.7rem;
  font-size: 0.84rem; line-height: 1.3; color: var(--slate-300); transition: background 0.2s, color 0.2s;
}
.t-fam-btn:hover { background: rgba(34, 211, 238, 0.08); color: #fff; }
.t-fam-btn.is-on { background: rgba(34, 211, 238, 0.14); color: #fff; box-shadow: inset 2px 0 0 var(--cy); }
.t-fam-name { flex: 1; text-align: left; min-width: 0; }
.t-fam-ico { width: 1rem; height: 1rem; flex: none; color: var(--cy); opacity: 0.85; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-fams .t-sub { margin: 0.15rem 0 0.35rem 1.2rem; animation: t-open 0.3s var(--ease-out-expo) both; }

/* precio alternativo (sin/con IVA) discreto bajo el precio principal de la ficha */
.t-price-alt { display: block; margin-top: 0.6rem; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--orange-hud); animation: t-fade 0.4s both; }

/* ───── Impresión de la ficha ───── */
.t-print-head, .t-print-foot { display: none; }
.t-print-btn .icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@page { size: A4; margin: 14mm; }
@media print {
  :root { color-scheme: light !important; }
  html, body { background: #fff !important; color: #111 !important; }
  .bg-stage, .site-header, main, .site-footer, .floating, .skip-link, .t-scrim,
  .t-modal-close, .t-cta, .t-thumbs, .t-ficha-load { display: none !important; }
  .page { display: block !important; position: static !important; z-index: auto !important; }
  dialog.t-modal, dialog.t-modal[open], dialog.t-modal:modal {
    position: relative !important; inset: auto !important; margin: 0 !important; transform: none !important; height: auto !important; display: flex !important; flex-direction: column; width: auto !important; max-height: none !important; overflow: visible !important;
    background: #fff !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; animation: none !important; color: #111 !important;
  }
  .t-modal::backdrop { display: none !important; }
  .t-modal-body { display: grid !important; grid-template-columns: 38% 1fr; gap: 6mm; padding: 0 !important; overflow: visible !important; }
  .t-print-head { display: flex !important; align-items: center; gap: 4mm; order: -1; padding-bottom: 4mm; margin-bottom: 5mm; border-bottom: 2px solid #0e7490; }
  .t-print-head img { width: 16mm; height: auto; }
  .t-print-head strong { display: block; font-size: 14pt; color: #0b1426; }
  .t-print-head span { display: block; font-size: 8.5pt; color: #444; line-height: 1.4; }
  .t-print-foot { display: block !important; margin-top: 6mm; padding-top: 3mm; border-top: 1px solid #bbb; font-size: 8pt; color: #555; }
  .t-gal-main { background: #fff !important; border: 1px solid #ddd; border-radius: 3mm; }
  .t-info h2 { color: #0b1426 !important; font-size: 17pt; padding-right: 0; }
  .t-big-price { color: #0b1426 !important; font-size: 24pt; }
  .t-big-price small { color: #555 !important; }
  .t-price-alt { color: #b45309 !important; animation: none !important; }
  .badge { color: #0e7490 !important; background: #fff !important; border: 1px solid #0e7490 !important; }
  .t-kv > div { background: #fff !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .t-kv dt { color: #666 !important; } .t-kv dd { color: #111 !important; }
  .t-ficha { grid-column: 1 / -1; color: #222 !important; border-top: 1px solid #bbb; }
  .t-ficha h3, .t-ficha strong, .t-ficha b { color: #0b1426 !important; }
  .t-ficha td { border-top: 1px solid #ddd !important; break-inside: avoid; }
  .t-ficha tr > td:first-child { color: #0e7490 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ───── Selector de vista (lista / cuadrícula) ───── */
.t-view { display: inline-flex; gap: 0.35rem; }
.t-view-btn {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; color: var(--faint);
  background: rgba(9, 15, 28, 0.7); border: 1px solid rgba(148, 163, 184, 0.22); transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.t-view-btn .icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-view-btn:hover { color: #fff; border-color: rgba(103, 232, 249, 0.5); }
.t-view-btn[aria-pressed="true"] { color: var(--cy-soft); border-color: rgba(34, 211, 238, 0.6); background: rgba(34, 211, 238, 0.12); box-shadow: 0 0 18px -4px rgba(34, 211, 238, 0.55); }

/* ───── Vista en lista: una fila por producto ───── */
.t-grid.is-list { grid-template-columns: 1fr; gap: 0.75rem; }
.t-grid.is-list .t-card { flex-direction: row; align-items: stretch; border-radius: 1.1rem; }
.t-grid.is-list .t-card-img { flex: none; width: 6.5rem; aspect-ratio: auto; align-self: stretch; min-height: 6.5rem; margin: 0.5rem 0 0.5rem 0.5rem; }
.t-grid.is-list .t-card-img img { padding: 0.35rem; }
.t-grid.is-list .t-tag { top: 0.35rem; left: 0.35rem; padding: 0.1rem 0.45rem; font-size: 0.5625rem; }
.t-grid.is-list .t-card-body { min-width: 0; gap: 0.2rem; padding: 0.8rem 1rem; }
.t-grid.is-list .t-title { font-size: 0.95rem; -webkit-line-clamp: 2; line-clamp: 2; }
.t-grid.is-list .t-card-foot { padding-top: 0.5rem; justify-content: space-between; align-items: center; }
@media (min-width: 40rem) {
  .t-grid.is-list .t-card-img { width: 12rem; min-height: 8.5rem; margin: 0.6rem 0 0.6rem 0.6rem; }
  .t-grid.is-list .t-card-body { padding: 1rem 1.4rem; }
  .t-grid.is-list .t-title { font-size: 1.05rem; }
  .t-grid.is-list .t-card-foot { justify-content: flex-end; gap: 1.25rem; }
  .t-grid.is-list .t-price { font-size: 1.6rem; order: 2; }
  .t-grid.is-list .t-stock { order: 1; }
}
.t-skel { min-height: 9rem; }
.t-grid.is-list .t-card-img img { position: absolute; inset: 0; }
@media (min-width: 40rem) { .t-grid.is-list .t-card-img { min-height: 7.5rem; } }
.t-grid.is-list .t-card-img:not(.is-empty) { background: #fff; }

/* ───── Panel móvil: un botón «Categorías» y otro «Filtros» abren el mismo panel en modos distintos ───── */
.t-panel-foot { display: none; }
@media (max-width: 63.99rem) {
  .t-filters[data-modo="cat"] .t-group:not(.t-g-cat) { display: none; }
  .t-filters[data-modo="fil"] .t-g-cat { display: none; }
  .t-filters[data-modo="cat"] #f-reset { display: none; }
  .t-filters[data-modo="cat"] .t-g-cat { border-top: 0; padding-top: 0; margin-top: 0; }
  .t-filters[data-modo="cat"] .t-g-cat .t-legend { display: none; }
  .t-filters { padding-bottom: 0; }
  .t-panel-foot { display: block; position: sticky; bottom: 0; margin: 1rem -1.25rem 0; padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(6, 11, 22, 0) 0%, rgba(6, 11, 22, 0.96) 35%); }
  .t-panel-foot .btn-primary { width: 100%; min-height: 3rem; }
  .t-bar .t-open-filters { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 63.99rem) {
  .t-filters { display: flex; flex-direction: column; }
  .t-filters.is-open { height: 100dvh; }
  .t-panel-foot { margin-top: auto; }
}