/* Tiendas de ejemplo (1-oct): la grilla de las tiendas y la tienda abierta
   para recorrer. Usa las variables de landing.css. */
.te-nav { display: flex; align-items: center; gap: 22px; }
.te-nav a:not(.lz-boton) { color: var(--tinta-2); font-size: 14px; text-decoration: none; }
.te-nav a:not(.lz-boton):hover { color: var(--tinta); }

.te-cabeza { padding: 56px 0 18px; text-align: center; }
.te-cabeza h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -.03em; margin: 14px auto 12px; max-width: 18ch; text-wrap: balance; }
.te-cabeza p { color: var(--tinta-2); font-size: 17px; max-width: 62ch; margin: 0 auto; text-wrap: pretty; }

.te-cuerpo { padding-bottom: 56px; }
.te-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 26px; }
.te-filtros button { font: inherit; font-size: 13.5px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--borde); background: #fff; color: var(--tinta-2); cursor: pointer; }
.te-filtros button:hover { border-color: var(--acento); color: var(--tinta); }
.te-filtros button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.te-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.te-cargando { text-align: center; color: var(--tinta-3); }

.te-tarj { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borde); border-radius: 16px; overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s; }
.te-tarj:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(22, 19, 45, .45); border-color: #d9d5f0; }
.te-foto { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--fondo-3); border: 0; padding: 0; width: 100%; cursor: pointer; overflow: hidden; }
.te-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.te-foto:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }
.te-ver { position: absolute; inset: auto 12px 12px auto; background: rgba(22, 19, 45, .86); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 99px; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; }
.te-tarj:hover .te-ver, .te-foto:focus-visible .te-ver { opacity: 1; transform: none; }
.te-info { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.te-nombre { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.te-nombre b { font-size: 16px; color: var(--tinta); }
.te-etq { font-size: 11px; font-weight: 600; color: var(--tinta-2); border: 1px solid var(--borde); border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.te-info p { margin: 0; font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }
.te-puntos { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.te-puntos i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }

.te-cierre { background: var(--fondo-2); border-top: 1px solid var(--borde); padding: 48px 0 56px; text-align: center; }
.te-cierre h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; letter-spacing: -.02em; }
.te-cierre p { color: var(--tinta-2); max-width: 56ch; margin: 0 auto 18px; }

/* La tienda abierta. */
.te-velo { position: fixed; inset: 0; z-index: 100; background: #f4f3f9; display: flex; flex-direction: column; }
.te-velo[hidden] { display: none; }
.te-cab { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: #fff; border-bottom: 1px solid var(--borde); }
.te-cab-izq { display: flex; align-items: center; gap: 6px; min-width: 0; }
.te-cab-medio { display: flex; align-items: center; gap: 14px; }
.te-cab-der { display: flex; justify-content: flex-end; }
.te-titulo { display: flex; flex-direction: column; min-width: 0; padding: 0 4px; }
.te-titulo b { font-size: 15px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.te-titulo span { font-size: 12px; color: var(--tinta-3); }
.te-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; cursor: pointer; color: var(--tinta); flex: none; }
.te-ico:hover { border-color: var(--acento); }
.te-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.te-seg { display: flex; background: var(--fondo-3); border-radius: 10px; padding: 3px; }
.te-seg button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; padding: 6px 12px; border-radius: 8px; color: var(--tinta-2); cursor: pointer; }
.te-seg button[aria-pressed="true"] { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(22, 19, 45, .12); }
.te-colores { display: flex; gap: 6px; }
.te-colores button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--borde); cursor: pointer; padding: 0; }
.te-colores button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tinta); }
.te-paginas { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--borde); scrollbar-width: none; }
.te-paginas::-webkit-scrollbar { display: none; }
.te-paginas button { font: inherit; font-size: 13px; white-space: nowrap; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--borde); background: #fff; color: var(--tinta-2); cursor: pointer; }
.te-paginas button[aria-selected="true"] { background: var(--acento); border-color: var(--acento); color: #fff; }
.te-marco-caja { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; padding: 18px; }
.te-marco-caja.compu { padding: 18px 18px 0; }
.te-marco { border: 0; background: #fff; display: block; }
.te-marco-caja.compu .te-marco { width: 100%; height: 100%; border-radius: 12px 12px 0 0; box-shadow: 0 20px 60px -30px rgba(22, 19, 45, .5); }
.te-marco-caja.cel .te-marco { width: 390px; max-width: 100%; height: min(820px, 100%); border-radius: 34px; border: 10px solid #16132d; box-shadow: 0 30px 70px -35px rgba(22, 19, 45, .6); }

@media (max-width: 900px) {
  .te-cab { grid-template-columns: 1fr auto; }
  .te-cab-medio { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .te-cab-der { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  .te-nav a:not(.lz-boton) { display: none; }
  .te-cabeza { padding-top: 36px; }
  .te-grilla { grid-template-columns: minmax(0, 1fr); }
  .te-seg { display: none; }
  .te-ver { opacity: 1; transform: none; }
  #te-ant, #te-sig { width: 32px; height: 32px; }
  .te-cab-der .lz-boton { padding: 8px 12px; font-size: 13px; }
  /* En el teléfono la tienda ocupa todo: ya es un celular. */
  .te-marco-caja, .te-marco-caja.cel { padding: 0; }
  .te-marco-caja.cel .te-marco { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .te-tarj, .te-ver { transition: none; } .te-tarj:hover { transform: none; } }