/* ==========================================================================
   AZTECH METAL - TIENDA

   Usa las variables de styles.css (paleta, tipografías y bordes), así que
   si cambia el color de la marca, la tienda cambia con él.

   La idea visual: cartel de concierto y funda de disco, no catálogo de
   marketplace. Tipografía grande y calada (solo contorno), numeración de
   cada diseño como pistas de un disco, rejilla asimétrica, foto que se
   "destapa" al pasar el cursor, un sello que gira sobre la foto y ficha
   técnica con puntos guía como un tracklist.

   Todo el movimiento se apaga bajo prefers-reduced-motion, al final.
   ========================================================================== */

/* El último renglón siempre por encima de la barra del reproductor (6.5rem,
   fija abajo); si no, el botón de comprar queda debajo de ella. */
/* 1280 dejaba mucho negro a los lados en pantallas grandes. A 1560 el
   mosaico respira sin que las líneas de texto se vuelvan ilegibles (el texto
   largo lleva su propio tope en `max-width`). */
.tn-main {
  max-width: 1560px; margin: 0 auto; padding: 2.5rem 1.5rem 9rem;
  /* `clip` y no `hidden`: cualquier cosa que se salga de aquí (con 100vw o con
     márgenes negativos) provocaría scroll horizontal. `hidden` lo arreglaría
     pero convierte esto en contenedor de scroll y mataría el `sticky` de la
     barra de filtros; `clip` recorta sin crear ese contenedor.
     OJO: lo que se salga a propósito NO puede vivir aquí dentro — se recorta.
     Por eso el hero a sangre está fuera de `.tn-main`. */
  overflow-x: clip;
}

/* Tipo de cartel: condensada, negra y sólida. Sam no quiere tipo calado. */
.tn-negra { font-family: var(--font-headline); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; }

/* ------------------------------- Cabecera ------------------------------- */
.tn-cabeza { position: relative; margin-bottom: 1.6rem; padding-top: 0.8rem; }
.tn-cabeza-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--neon-crimson);
  margin-bottom: 0.7rem;
}
.tn-titulo {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(3.4rem, 11vw, 8rem);
  line-height: 0.84;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-transform: uppercase;
  margin-left: -0.03em;
}
.tn-titulo em {
  display: block;
  font-style: normal;
  color: var(--neon-crimson);
}
.tn-bajada { max-width: 60ch; color: var(--text-muted); margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.55; }
.tn-bajada strong { color: var(--text-primary); font-weight: 600; }
/* El número de diseños, enorme y casi invisible, detrás del título. */
.tn-cabeza-num {
  position: absolute; right: -0.05em; top: -0.3em;
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(9rem, 26vw, 20rem);
  line-height: 1;
  color: rgba(var(--neon-crimson-rgb), 0.07);
  pointer-events: none;
  user-select: none;
}

/* Cinta que corre: las cinco cosas que importan, sin chips genéricos. */
/* ----------------------------------------------------------------------
   LA CINTA DE LA TIENDA
   Vive en el armazón de la franja de última hora (.nw-breaking), en su mismo
   sitio bajo la cabecera. Quien viene a ver playeras no necesita la agenda de
   conciertos, y sí necesita saber cuánto cuesta el envío.
   ---------------------------------------------------------------------- */
.nw-breaking--tienda .nw-breaking-run { gap: 0; padding: 0; }
.nw-breaking--tienda .nw-breaking-run:first-child,
.nw-breaking--tienda .nw-breaking-run:last-child { padding-left: 0; }
.nw-breaking--tienda .nw-breaking-run span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 0 1.2rem;
  display: inline-flex; align-items: center; gap: 1.2rem;
  white-space: nowrap;
}
/* El rombo separa un dato del siguiente, como los puntos de la franja. */
.nw-breaking--tienda .nw-breaking-run span::after {
  content: ''; width: 6px; height: 6px; flex: none;
  background: var(--neon-crimson); transform: rotate(45deg);
}
@media (max-width: 700px) {
  .nw-breaking--tienda .nw-breaking-run span { font-size: 0.92rem; padding: 0 0.9rem; gap: 0.9rem; }
}

/* ------------------------------- Filtros ------------------------------- */
.tn-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.tn-filtro {
  padding: 0.5rem 1rem; background: transparent; border: var(--border-card); border-radius: var(--radius-button);
  color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.tn-filtro:hover { color: var(--text-primary); border-color: var(--neon-crimson); }
.tn-filtro.activo { background-color: var(--neon-crimson); border-color: var(--neon-crimson); color: #fff; }
.tn-filtro i { font-style: normal; opacity: 0.55; margin-left: 0.3rem; }
.tn-filtro {
  border-radius: 0;
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.06em; padding: 0.4rem 0.95rem 0.3rem;
}

/* ------------------------------- Rejilla ------------------------------- */
/* Rejilla regular. Antes era un mosaico de doce columnas con anchos variables
   "como un cartel", pero para comparar doce playeras hay que poder recorrerlas:
   dejaba huecos y costaba entenderlo. El carácter vive en la tarjeta —número
   calado, foto que se destapa, marco desfasado—, no en la irregularidad. */
/* Tres columnas iguales. Antes eran doce con anchos variables (4, 5, 6, 7) y
   dos proporciones de foto distintas: cada fila medía distinto, los bloques de
   información no encajaban sin dejar hueco, y el ojo no encontraba ritmo. Para
   comparar doce playeras hay que poder recorrerlas, no descifrarlas. */
.tn-rejilla {
  display: grid;
  /* Se ajusta sola al ancho: cuatro en pantalla grande, tres en portátil, dos
     en móvil. Sin media queries y sin huecos, porque todas las celdas miden
     igual. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}

.tn-tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  background-color: var(--bg-charcoal);
  border: var(--border-card);
  clip-path: inset(0 0 100% 0);
  transform: translateY(14px);
  transition: clip-path 0.8s var(--transition-cinematic), transform 0.8s var(--transition-cinematic), border-color 0.25s;
  transition-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), 0s;
}
.tn-tarjeta.visible { clip-path: inset(0 0 0 0); transform: none; }
.tn-tarjeta:hover, .tn-tarjeta:focus-within { border-color: var(--neon-crimson); }
/* Segundo marco desfasado al pasar el cursor: como una impresión con el
   registro corrido. */
.tn-tarjeta::before {
  content: ''; position: absolute; inset: -7px; pointer-events: none;
  border: 1px solid var(--neon-crimson); opacity: 0;
  transform: translate(3px, 3px);
  transition: opacity 0.3s, transform 0.3s var(--transition-cinematic);
}
.tn-tarjeta:hover::before, .tn-tarjeta:focus-within::before { opacity: 0.7; transform: translate(0, 0); }

.tn-tarjeta-liga { display: block; text-decoration: none; color: inherit; outline: none; height: 100%; }

.tn-tarjeta-foto {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--bg-inner);
}
.tn-tarjeta-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block;
  transition: transform 1s var(--transition-cinematic), clip-path 0.7s var(--transition-cinematic);
}
/* La playera sola se destapa de izquierda a derecha, no se funde. */
.tn-tarjeta-foto-alt { clip-path: inset(0 100% 0 0); }
.tn-tarjeta:hover .tn-tarjeta-foto img:first-child { transform: scale(1.05); }
.tn-tarjeta:hover .tn-tarjeta-foto-alt, .tn-tarjeta:focus-within .tn-tarjeta-foto-alt { clip-path: inset(0 0 0 0); }

/* Número de pista, calado, en la esquina de la foto. */
.tn-tarjeta-num {
  position: absolute; z-index: 2; left: 0.55rem; top: 0.2rem;
  font-family: var(--font-headline); font-weight: 900; font-size: 3.4rem; line-height: 1;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}

.tn-tarjeta-cuerpo { display: block; padding: 0.95rem 1rem 1.05rem; }
.tn-tarjeta-nombre {
  display: block;
  font-family: var(--font-headline); font-weight: 800; font-size: 1.7rem; line-height: 0.95; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--text-primary); margin-bottom: 0.45rem;
}
.tn-tarjeta-resumen {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); margin-bottom: 0.75rem;
}
.tn-tarjeta-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; border-top: 1px dotted rgba(var(--neon-crimson-rgb), 0.45); padding-top: 0.6rem; }
.tn-tarjeta-precio { font-family: var(--font-display); font-size: 1.35rem; color: var(--neon-crimson); white-space: nowrap; letter-spacing: 0.02em; }
.tn-tarjeta-precio small { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--text-muted); margin-right: 0.35rem; vertical-align: 0.35em; }
.tn-tarjeta-nota { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); text-align: right; }

/* (Quedó de cuando había tarjetas destacadas; ya no existen.)
   texto va encima. La tarjeta pide 4:3, pero si su vecina de fila es más
   alta, se estira a esa altura y la foto la sigue (por eso va absoluta). */

/* ------------------------------- Producto ------------------------------- */
.tn-producto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
  /* Hueco para el nombre vertical, que cuelga 2.5rem a la izquierda de la
     foto. `.tn-main` solo trae 1.5rem de margen, así que sin esto la
     etiqueta se sale 16 px de la página y las letras salen rebanadas a lo
     largo. Debajo de 860 px la etiqueta se oculta y el hueco sobra. */
  padding-left: 2.5rem;
}
@media (max-width: 860px) { .tn-producto { padding-left: 0; } }
.tn-producto-galeria { position: sticky; top: 96px; }
.tn-producto-foto {
  position: relative;
  background-color: var(--bg-charcoal);
  border: var(--border-card);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.tn-producto-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; transition: opacity 0.3s ease; }
.tn-producto-foto img.cambiando { opacity: 0.35; }

/* El nombre corre vertical por fuera del borde izquierdo de la foto. Cuelga
   de la galería, no de la foto, porque la foto recorta lo que se sale. */
.tn-producto-vertical {
  /* Sin `height: 100%`: con la rotación de 180° el texto queda pegado al
     FINAL de la caja, así que una caja tan alta como la foto lo empujaba
     abajo del pliegue y lo primero que se leía era "...DO POR LOS ALIENS".
     Con la altura del propio texto, empieza arriba y se lee completo. */
  position: absolute; left: -2.5rem; top: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-headline); font-weight: 900; font-size: 2.2rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: rgba(var(--neon-crimson-rgb), 0.35);
  white-space: nowrap; pointer-events: none; user-select: none;
}


.tn-miniaturas { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.tn-mini {
  width: 64px; height: 84px; padding: 0; background: var(--bg-inner); border: var(--border-card);
  overflow: hidden; cursor: pointer; opacity: 0.6; transition: border-color 0.18s, opacity 0.18s;
}
.tn-mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.tn-mini:hover, .tn-mini.activa { border-color: var(--neon-crimson); opacity: 1; }

.tn-migas { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; }
.tn-migas a { color: var(--neon-crimson); text-decoration: none; }
.tn-migas a:hover { text-decoration: underline; }
.tn-migas b { font-weight: 400; color: var(--text-dim); }

.tn-producto-nombre {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.tn-producto-precio {
  display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.tn-producto-precio > span {
  font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--neon-crimson); letter-spacing: 0.01em;
}
.tn-producto-precio small { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.tn-producto-desc { color: var(--text-muted); margin-bottom: 1.9rem; max-width: 56ch; line-height: 1.65; }

.tn-campo { margin-bottom: 1.5rem; }
.tn-etiqueta {
  display: block;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.6rem;
}
.tn-etiqueta b { color: var(--text-primary); font-weight: 600; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-size: 0.78rem; margin-left: 0.35rem; }
.tn-etiqueta-fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tn-liga-guia {
  display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-crimson);
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.tn-liga-guia svg { width: 14px; height: 14px; }
.tn-liga-guia:hover { border-bottom-color: var(--neon-crimson); }

/* Telas como boletos con las esquinas cortadas. */
.tn-telas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem; }
.tn-tela {
  position: relative; text-align: left;
  padding: 0.85rem 1rem 0.8rem;
  background: var(--bg-charcoal);
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background-color 0.2s;
}
/* El borde se pinta con un pseudo, porque clip-path se come el border. */
.tn-tela::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(var(--neon-crimson-rgb), 0.28);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px),
                     0 0, 1px 1px, 1px calc(100% - 12.5px), 12.5px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 12.5px, calc(100% - 12.5px) 1px, 1px 1px);
  transition: background-color 0.2s;
}
.tn-tela:hover::before, .tn-tela.activa::before { background: var(--neon-crimson); }
.tn-tela.activa { background: rgba(var(--neon-crimson-rgb), 0.12); }
.tn-tela.activa::after { content: ''; position: absolute; right: 12px; top: 12px; width: 8px; height: 8px; background: var(--neon-crimson); transform: rotate(45deg); }
.tn-tela b { display: block; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.15rem; padding-right: 1.2rem; }
.tn-tela i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.45; color: var(--text-muted); }
.tn-tela em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; color: var(--neon-crimson); margin-top: 0.5rem; }


/* Tallas como letras de cartel. */
.tn-tallas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tn-talla {
  min-width: 54px; padding: 0.45rem 0.7rem 0.3rem;
  background: transparent; border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-display); font-size: 1.45rem; line-height: 1; letter-spacing: 0.04em;
  cursor: pointer; transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.tn-talla:hover { border-color: var(--neon-crimson); }
.tn-talla.activa { background-color: var(--neon-crimson); border-color: var(--neon-crimson); color: #fff; }

.tn-cantidad, .tn-input {
  width: 100%; padding: 0.75rem 0.8rem;
  background-color: var(--bg-inner); border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); border-radius: 0;
  color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem;
}
.tn-cantidad:focus, .tn-input:focus { outline: none; border-color: var(--neon-crimson); box-shadow: 0 0 0 3px rgba(var(--neon-crimson-rgb), 0.22); }

.tn-fila-compra { display: grid; grid-template-columns: 96px 1fr; gap: 0.8rem; align-items: end; margin-top: 0.4rem; }
.tn-fila-compra .tn-campo { margin-bottom: 0; }
.tn-campo-cantidad .tn-cantidad { text-align: center; font-family: var(--font-display); font-size: 1.4rem; padding: 0.55rem 0.5rem 0.45rem; }

.tn-boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  padding: 0.85rem 1.5rem;
  background-color: var(--red-fill); border: 1px solid var(--neon-crimson-dark); border-radius: 0;
  color: #fff; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; overflow: hidden;
  transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.tn-boton::after { content: '→'; font-family: var(--font-body); font-weight: 700; transition: transform 0.25s var(--transition-cinematic); }
.tn-boton:hover { background-color: var(--red-fill-hover); }
.tn-boton:hover::after { transform: translateX(5px); }
.tn-boton:active { transform: scale(0.985); }
.tn-boton:disabled { opacity: 0.55; cursor: wait; }
.tn-boton-grande { width: 100%; padding: 1rem 1.5rem 0.9rem; font-size: 1.3rem; }

.tn-aviso-envio { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.9rem; }

/* Ficha técnica con puntos guía, como el tracklist de un disco. */
.tn-specs { margin: 2rem 0 0; }
.tn-specs > div { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.84rem; }
.tn-specs dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.tn-specs dt::before { content: counter(spec, decimal-leading-zero); counter-increment: spec; color: var(--neon-crimson); margin-right: 0.7rem; }
.tn-specs { counter-reset: spec; }
.tn-specs > div::after { content: ''; flex: 1; order: 1; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.5); transform: translateY(-4px); }
.tn-specs dd { order: 2; margin: 0; color: var(--text-primary); white-space: nowrap; }

/* "Sigue viendo": cuatro diseños más al pie de la ficha. */
.tn-otros { margin-top: 5rem; }
.tn-otros-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; }
.tn-otros-cabeza h2 { font-family: var(--font-headline); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; text-transform: uppercase; color: var(--text-primary); }
.tn-otros-cabeza a { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-crimson); text-decoration: none; }
.tn-otros-cabeza a:hover { text-decoration: underline; }
.tn-otros .tn-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tn-otros .tn-tarjeta { grid-column: auto; }

/* ---------------------------- Guía de tallas ---------------------------- */
.tn-guia {
  margin: auto; inset: 0;
  width: min(920px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  padding: 0;
  background: var(--bg-inner);
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.45); border-radius: 0;
  color: var(--text-primary);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  overflow: auto;
}
.tn-guia::backdrop { background: rgba(5, 4, 4, 0.8); backdrop-filter: blur(4px); }
.tn-guia[open] { animation: tn-guia-entra 0.35s var(--transition-cinematic); }
@keyframes tn-guia-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tn-guia-caja { padding: 1.5rem 1.6rem 1.7rem; }
.tn-guia-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.tn-guia-cabeza h2 { font-family: var(--font-headline); font-weight: 900; font-size: 2.4rem; line-height: 0.95; text-transform: uppercase; }
.tn-guia-cabeza h2 small { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-muted); margin-top: 0.4rem; }
.tn-guia-cerrar {
  background: transparent; border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); color: var(--text-muted);
  font-size: 1.4rem; line-height: 1; width: 40px; height: 40px; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.tn-guia-cerrar:hover { color: var(--neon-crimson); border-color: var(--neon-crimson); }

.tn-guia-tallas { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.3rem; }
.tn-guia-tallas .tn-talla { min-width: 62px; }

.tn-guia-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
.tn-guia-figura { margin: 0; }
.tn-guia-figura svg { width: 100%; height: auto; display: block; }
.tn-guia-playera, .tn-guia-cota { transition: transform 0.55s var(--transition-cinematic); }
.tn-guia-cota line { stroke: var(--neon-crimson); stroke-width: 1.6; }
.tn-guia-cota-ancho line:first-child, .tn-guia-cota-largo line:first-child { stroke-dasharray: 5 4; }
.tn-guia-medidas { display: flex; gap: 1.6rem; margin-top: 0.6rem; }
.tn-guia-medidas span { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-primary); }
.tn-guia-medidas b { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--neon-crimson); font-weight: 400; margin-right: 0.15rem; }
.tn-guia-medidas i { display: block; font-style: normal; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.15rem; }

.tn-guia-tabla { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.82rem; }
.tn-guia-tabla th { text-align: left; padding: 0.45rem 0.6rem; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon-crimson); border-bottom: 1px solid rgba(var(--neon-crimson-rgb), 0.4); }
.tn-guia-tabla td { padding: 0.5rem 0.6rem; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); color: var(--text-muted); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.tn-guia-tabla td:first-child { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-primary); }
.tn-guia-tabla tr:hover td { color: var(--text-primary); }
.tn-guia-tabla tr.activa td { background: rgba(var(--neon-crimson-rgb), 0.12); color: var(--text-primary); }
.tn-guia-nota { font-size: 0.74rem; color: var(--text-muted); margin: 0.6rem 0 1.1rem; }

.tn-guia-calc { border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); padding: 0.85rem 0.9rem; margin-bottom: 1rem; background: var(--bg-charcoal); }
.tn-guia-calc label { display: block; font-size: 0.8rem; color: var(--text-primary); margin-bottom: 0.55rem; line-height: 1.4; }
.tn-guia-calc-fila { display: grid; grid-template-columns: 110px 1fr; gap: 0.7rem; align-items: center; }
.tn-guia-calc output { font-size: 0.86rem; color: var(--text-muted); }
.tn-guia-calc output b { font-family: var(--font-display); font-size: 1.8rem; color: var(--neon-crimson); font-weight: 400; margin-left: 0.25rem; vertical-align: -3px; }

.tn-guia-pasos { margin: 0 0 1.2rem 1.1rem; padding: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.tn-guia-pasos li { margin-bottom: 0.3rem; }
.tn-guia-pasos li::marker { color: var(--neon-crimson); font-family: var(--font-mono); font-weight: 700; }
#tn-guia-elegir span { margin-left: 0.2rem; padding: 0.05rem 0.5rem 0; background: rgba(0, 0, 0, 0.3); }

/* -------------------------------- Preguntas ------------------------------ */
.tn-preguntas { max-width: 820px; margin: 5rem auto 0; counter-reset: pregunta; }
.tn-preguntas-titulo { font-family: var(--font-headline); font-weight: 900; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 0.95; text-transform: uppercase; color: var(--text-primary); margin-bottom: 1.4rem; }
.tn-pregunta { border-top: 1px solid rgba(var(--neon-crimson-rgb), 0.35); }
.tn-pregunta:last-child { border-bottom: 1px solid rgba(var(--neon-crimson-rgb), 0.35); }
.tn-pregunta summary {
  position: relative; display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 2.6rem 1.05rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-primary);
  transition: color 0.2s;
}
.tn-pregunta summary::-webkit-details-marker { display: none; }
.tn-pregunta summary::before { content: counter(pregunta, decimal-leading-zero); counter-increment: pregunta; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--neon-crimson); }
.tn-pregunta summary:hover { color: var(--neon-crimson); }
.tn-pregunta summary::after {
  content: '+'; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 1.8rem; color: var(--neon-crimson);
  transition: transform 0.3s var(--transition-cinematic);
}
.tn-pregunta[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.tn-pregunta p { padding: 0 0 1.2rem 2.4rem; margin: 0; color: var(--text-muted); line-height: 1.65; max-width: 66ch; }

/* -------------------------------- Carrito ------------------------------- */
/* El carrito se queda en 1280 aunque `.tn-main` llegue a 1560: un formulario
   de dirección más ancho no se lee mejor. El tope va en el `<main>` y no solo
   en el bloque de adentro, para que el título "Tu carrito" quede alineado con
   la tabla; centrando solo el bloque, el título se quedaba 56 px a su
   izquierda y se veía torcido. */
.tn-main--angosto { max-width: 1280px; }
.tn-carrito { max-width: 1280px; }
.tn-tabla { width: 100%; border-collapse: collapse; margin-bottom: 1.3rem; }
.tn-tabla th {
  text-align: left; padding: 0.6rem 0.7rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon-crimson);
  border-bottom: 1px solid rgba(var(--neon-crimson-rgb), 0.4);
}
.tn-tabla td { padding: 0.9rem 0.7rem; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); vertical-align: middle; }
.tn-fila-prod { display: flex; align-items: center; gap: 0.9rem; }
.tn-fila-prod img { width: 52px; height: 68px; object-fit: cover; object-position: 50% 15%; border: var(--border-card); flex: none; }
.tn-fila-prod b { display: block; font-family: var(--font-display); font-size: 1.3rem; line-height: 1; text-transform: uppercase; color: var(--text-primary); font-weight: 400; }
.tn-fila-prod b a { color: inherit; text-decoration: none; }
.tn-fila-prod b a:hover { color: var(--neon-crimson); }
.tn-fila-prod span span { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); margin-top: 0.3rem; }
.tn-fila-cant { width: 92px; }
.tn-fila-cant .tn-cantidad { text-align: center; padding: 0.5rem 0.4rem; }
.tn-fila-sub { font-family: var(--font-display); font-size: 1.2rem; white-space: nowrap; color: var(--text-primary); }
.tn-fila-quitar { width: 44px; text-align: right; }
.tn-quitar { background: transparent; border: none; color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; }
.tn-quitar:hover { color: var(--neon-crimson); }

.tn-total { text-align: right; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.tn-total b { display: inline-block; margin-left: 0.8rem; font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--neon-crimson); font-weight: 400; }

.tn-form { margin-top: 2.4rem; border-top: 1px solid rgba(var(--neon-crimson-rgb), 0.4); padding-top: 1.6rem; }
.tn-form h2 { font-family: var(--font-headline); font-weight: 900; font-size: 2.2rem; line-height: 1; text-transform: uppercase; color: var(--text-primary); margin-bottom: 0.6rem; }
.tn-aviso-pago { background-color: var(--bg-charcoal); border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); padding: 0.85rem 1rem; margin-bottom: 1.4rem; font-size: 0.85rem; color: var(--text-muted); }
.tn-estado { margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-muted); min-height: 1.2em; }
.tn-estado-error { color: var(--neon-crimson-bright); }

/* --------------------------------- Vacío -------------------------------- */
.tn-vacio { text-align: center; padding: 3.5rem 1.5rem; background-color: var(--bg-charcoal); border: var(--border-card); }
.tn-vacio h2 { font-family: var(--font-headline); font-weight: 900; font-size: 2.4rem; line-height: 1; text-transform: uppercase; color: var(--text-primary); margin-bottom: 0.6rem; }
.tn-vacio p { color: var(--text-muted); max-width: 48ch; margin: 0 auto 1.2rem; }

/* ------------------------- Contador del carrito ------------------------- */
.tn-contador {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 0.35rem;
  background-color: var(--neon-crimson); border-radius: 999px; color: #fff;
  font-family: var(--font-mono); font-size: 0.64rem; line-height: 18px; text-align: center; vertical-align: middle;
}

/* -------------------------------- Móvil --------------------------------- */
@media (max-width: 1000px) {
  /* Por debajo de 620 px, 300 de mínimo dejaría una sola columna: se baja el
     mínimo para que sigan cabiendo dos. */
  .tn-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* "Sigue viendo" tiene su propio grid de 2 columnas: el span 6 de arriba
     le gana en cascada y estira cada tarjeta a todo el ancho. */
  .tn-otros .tn-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-otros .tn-tarjeta { grid-column: auto !important; }
}
@media (max-width: 860px) {
  .tn-producto { grid-template-columns: 1fr; gap: 1.8rem; }
  .tn-producto-galeria { position: static; }
  .tn-producto-vertical { display: none; }
  .tn-guia-cuerpo { grid-template-columns: 1fr; gap: 1.2rem; }
  .tn-guia-figura { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .tn-main { padding: 1.8rem 1rem 7rem; }
  .tn-cabeza-num { display: none; }
  .tn-cinta span { font-size: 1.05rem; padding: 0 1rem; gap: 1rem; }
  .tn-rejilla { gap: 0.8rem; }
  .tn-tarjeta-cuerpo { padding: 0.8rem 0.8rem 0.9rem; }
  .tn-tarjeta-nombre { font-size: 1.35rem; }
  .tn-tarjeta-num { font-size: 2.6rem; }
  .tn-tarjeta-resumen { display: none; }
  .tn-tarjeta-pie { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .tn-tarjeta-nota { text-align: left; }
  .tn-specs dd { white-space: normal; text-align: right; }
  .tn-tabla th:nth-child(3), .tn-tabla td:nth-child(3) { display: none; }
  .tn-tabla { font-size: 0.9rem; }
  .tn-fila-prod img { display: none; }
  .tn-guia-caja { padding: 1.1rem 1rem 1.3rem; }
  .tn-guia-calc-fila { grid-template-columns: 90px 1fr; }
  .tn-pregunta summary { font-size: 1.1rem; }
  .tn-pregunta p { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-tarjeta { clip-path: none; transform: none; transition: border-color 0.25s; }
  .tn-tarjeta-foto img, .tn-guia-playera, .tn-guia-cota, .tn-pregunta summary::after, .tn-boton::after { transition: none; }
  .tn-tarjeta:hover .tn-tarjeta-foto img:first-child { transform: none; }
  .nw-breaking--tienda .nw-breaking-track { animation: none; }
  .tn-guia[open] { animation: none; }
}

/* ================================ Hero ================================== */
/* Dos columnas: el título calado a la izquierda y un abanico de tres
   playeras a la derecha, cada una con su número y su liga. */
.tn-hero {
  /* Vive FUERA de `.tn-main` desde el 21-sep, así que se centra y se separa
     él solo, con las mismas medidas que tenía dentro. */
  max-width: 1560px;
  margin: 0 auto 1.4rem;
  padding: 3.3rem 1.5rem 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2rem;
  align-items: center;
  min-height: 520px;
}
.tn-hero-texto { position: relative; z-index: 2; }
.tn-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.tn-hero-cta .tn-boton { padding: 0.9rem 1.8rem 0.8rem; font-size: 1.25rem; }
.tn-hero-envio { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.tn-hero-envio b { color: var(--text-primary); font-weight: 700; }

.tn-hero-deck { position: relative; height: 520px; }
@keyframes tn-flota {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -12px; }
}

/* ---------------------------- Etiquetas -------------------------------- */
.tn-etiquetas { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.tn-etiquetas li {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); padding: 0.3rem 0.6rem;
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.3);
}
.tn-etiquetas li::before { content: '#'; color: var(--neon-crimson); margin-right: 0.15rem; }

/* ------------------------- Color fijo del diseño ------------------------ */
.tn-color-fijo { display: inline-flex; align-items: center; gap: 0.6rem; }
.tn-color-fijo svg { width: 40px; height: 40px; overflow: visible; }
.tn-color-fijo path { fill: var(--sw, #000); stroke: var(--neon-crimson); stroke-width: 1.6; stroke-linejoin: round; }
.tn-color-fijo.claro path { stroke: rgba(0, 0, 0, 0.6); }
.tn-color-fijo b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); }
.tn-color-fijo i { font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* Botón de guía de tallas, visible de verdad. */
.tn-boton-guia {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.7rem; padding: 0.6rem 0.95rem 0.55rem;
  background: rgba(var(--neon-crimson-rgb), 0.08);
  border: 1px solid var(--neon-crimson); color: var(--text-primary);
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; transition: background-color 0.2s, transform 0.15s;
}
.tn-boton-guia svg { width: 18px; height: 18px; color: var(--neon-crimson); }
.tn-boton-guia:hover { background: rgba(var(--neon-crimson-rgb), 0.2); }
.tn-boton-guia:active { transform: scale(0.98); }
.tn-talla i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.08em; margin-top: 0.15rem; opacity: 0.8; }

/* Bloques de texto: lo que trae, cuidado. */
.tn-bloque { margin-top: 1.8rem; }
.tn-bloque h2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neon-crimson); margin-bottom: 0.5rem; }
.tn-lista { margin: 0; padding: 0; list-style: none; }
.tn-lista li { position: relative; padding-left: 1.1rem; margin-bottom: 0.35rem; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }
.tn-bloque-texto { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; max-width: 56ch; }
.tn-lista li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--neon-crimson); transform: rotate(45deg); }

/* Foto ampliable. */
button.tn-producto-foto { display: block; width: 100%; padding: 0; cursor: zoom-in; color: inherit; }
.tn-ampliar-pista {
  position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.7rem; background: rgba(5, 4, 4, 0.75); border: 1px solid rgba(var(--neon-crimson-rgb), 0.5);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary);
  opacity: 0.85; transition: opacity 0.2s;
}
.tn-ampliar-pista svg { width: 14px; height: 14px; color: var(--neon-crimson); }
.tn-producto-foto:hover .tn-ampliar-pista { opacity: 1; }

/* ------------------------------ Lightbox -------------------------------- */
.tn-lightbox { margin: 0; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; padding: 0; background: transparent; border: none; }
.tn-lightbox::backdrop { background: rgba(5, 4, 4, 0.94); }
.tn-lightbox-fondo { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.tn-lightbox-foto { max-width: min(92vw, 900px); max-height: 92vh; object-fit: contain; border: 1px solid rgba(var(--neon-crimson-rgb), 0.4); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); }
.tn-lightbox-cerrar, .tn-lightbox-flecha {
  position: absolute; z-index: 2; width: 48px; height: 48px;
  background: rgba(5, 4, 4, 0.8); border: 1px solid rgba(var(--neon-crimson-rgb), 0.5); color: var(--text-primary);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.tn-lightbox-cerrar:hover, .tn-lightbox-flecha:hover { border-color: var(--neon-crimson); color: var(--neon-crimson); }
.tn-lightbox-cerrar { top: 1rem; right: 1rem; }
.tn-lightbox-ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.tn-lightbox-sig { right: 1rem; top: 50%; transform: translateY(-50%); }
.tn-lightbox-cuenta { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--text-muted); }
.tn-lightbox-cuenta b { color: var(--neon-crimson); }

/* ---------------------- Cuentas y barra de envío ------------------------ */
.tn-envio-barra { margin: 0.4rem 0 1.2rem; }
.tn-envio-barra p { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 0.45rem; }
.tn-envio-barra b { color: var(--text-primary); }
.tn-envio-barra span { display: block; height: 4px; background: rgba(var(--neon-crimson-rgb), 0.18); overflow: hidden; }
.tn-envio-barra i { display: block; height: 100%; background: var(--neon-crimson); transition: width 0.6s var(--transition-cinematic); }
.tn-cuentas { margin: 0 0 0.4rem; max-width: 380px; margin-left: auto; }
.tn-cuentas > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); }
.tn-cuentas dt { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.tn-cuentas dd { margin: 0; font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-primary); }
.tn-cuentas dd em { font-style: normal; color: var(--neon-crimson); font-weight: 700; }
.tn-cuentas-total { border-bottom: none !important; }
.tn-cuentas-total dt { color: var(--text-primary); }
.tn-cuentas-total dd { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--neon-crimson); }


@media (max-width: 1000px) {
  .tn-hero { grid-template-columns: 1fr; min-height: 0; }
  .tn-hero-deck { height: 380px; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 620px) {
  .tn-hero-deck { height: 300px; }
  .tn-carrito-liga span { display: none; }
  .tn-carrito-liga { padding: 0.45rem 0.55rem; }
  .tn-cuentas { max-width: none; }
  .tn-lightbox-flecha { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
}

/* ================================ Cuenta ================================ */

.tn-titulo-chico { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.tn-entrada { max-width: 560px; padding-top: 1rem; }
.tn-entrada form { margin-top: 1.6rem; }
.tn-entrada-lista { margin-top: 1.6rem; }

.tn-cuenta-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; padding-top: 0.8rem; }
.tn-cuenta-correo { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-muted); margin-top: 0.4rem; }
.tn-saldo { text-align: right; border: 1px solid var(--neon-crimson); padding: 0.8rem 1.2rem 0.7rem; min-width: 180px; }
.tn-saldo b { display: block; font-family: var(--font-display); font-size: 3.4rem; line-height: 0.9; color: var(--neon-crimson); font-weight: 400; }
.tn-saldo span { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); }
.tn-saldo i { display: block; font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.3rem; }

.tn-cuenta-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 3rem; }
.tn-cuenta-bloque h2 { font-family: var(--font-headline); font-weight: 800; font-size: 1.7rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-primary); margin-bottom: 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(var(--neon-crimson-rgb), 0.4); }
.tn-cuenta-bloque h3 { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon-crimson); margin: 1.4rem 0 0.6rem; }
.tn-cuenta-nota, .tn-cuenta-vacio { font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.8rem; }
.tn-cuenta-vacio a { color: var(--neon-crimson); text-decoration: none; }

.tn-pedido { padding: 0.9rem 0; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); }
.tn-pedido-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.4rem; }
.tn-pedido-cabeza b { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.04em; }
.tn-pedido-estado { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.25rem 0.55rem; border: 1px solid rgba(var(--neon-crimson-rgb), 0.4); color: var(--text-muted); }
.tn-pedido-estado--pagado, .tn-pedido-estado--en_produccion { color: var(--text-primary); border-color: var(--neon-crimson); }
.tn-pedido-estado--enviado, .tn-pedido-estado--entregado { background: var(--neon-crimson); color: #fff; border-color: var(--neon-crimson); }
.tn-pedido-estado--cancelado { opacity: 0.5; }
.tn-pedido ul { margin: 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--text-muted); }
.tn-pedido-pie { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-muted); }
.tn-pedido-pie b { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.02em; color: var(--neon-crimson); font-weight: 400; }

.tn-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.8rem; }
.tn-premio { border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); padding: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
.tn-premio img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tn-premio b { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.03em; text-transform: uppercase; }
.tn-premio p { font-size: 0.8rem; color: var(--text-muted); margin: 0; flex: 1; }
.tn-premio .tn-boton { font-size: 0.95rem; padding: 0.6rem 0.8rem 0.5rem; }
.tn-premio .tn-boton::after { content: none; }
.tn-premio.agotado { opacity: 0.45; }

.tn-puntos-lista { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.tn-puntos-lista li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.3); font-size: 0.82rem; color: var(--text-muted); }
.tn-puntos-lista b { font-family: var(--font-display); font-size: 1.15rem; color: var(--neon-crimson); font-weight: 400; }
.tn-puntos-lista b.resta { color: var(--text-muted); }

@media (max-width: 860px) {
  .tn-cuenta-rejilla { grid-template-columns: 1fr; }
  .tn-saldo { text-align: left; }
}

/* ============================ Formas de pago ============================ */
/* Logos oficiales que Mercado Pago publica para sus vendedores. Van sobre una
   tarjeta clara porque así están hechos: en negro sobre negro no se leen. */
.tn-pagos-bloque { margin-top: 1.1rem; }
.tn-pagos { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tn-pagos li {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  background: #fff; border-radius: 4px;
  min-width: 96px;
}
.tn-pagos img { height: 24px; width: auto; display: block; }
.tn-pagos i {
  font-style: normal; font-family: var(--font-mono); font-size: 0.52rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: #5a5a5d; text-align: center;
}
.tn-pagos--chico li { padding: 0.4rem 0.55rem; min-width: 0; }
.tn-pagos--chico img { height: 18px; }

/* ========================== Formulario de pedido ========================= */
.tn-pedido-form h2 { font-size: 1.6rem; margin-bottom: 0.3rem; }
.tn-paso { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); }
.tn-paso-num { width: 44px; height: 44px; display: grid; place-items: center; background: var(--neon-crimson); color: #fff; font-family: var(--font-headline); font-weight: 900; font-size: 1.5rem; }
.tn-paso-nota { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1rem; }
.tn-paso-nota a { color: var(--neon-crimson); }
.tn-campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.tn-campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.tn-etiqueta small { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 0.72rem; color: var(--text-dim); margin-left: 0.3rem; }
.tn-opciones-pago { display: grid; gap: 0.6rem; }
.tn-opcion-pago { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.tn-opcion-pago.activa { border-color: var(--neon-crimson); background: rgba(var(--neon-crimson-rgb), 0.08); }
/* Única forma de pago: se enseña, no se elige. */
.tn-opcion-pago--fija { cursor: default; }
.tn-opcion-pago input { margin-top: 0.3rem; accent-color: var(--neon-crimson); width: 18px; height: 18px; flex: none; }
.tn-opcion-pago input:disabled + span { opacity: 0.5; }
.tn-opcion-pago-cuerpo { display: block; }
.tn-opcion-pago-cuerpo b { display: block; font-family: var(--font-headline); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tn-opcion-pago-cuerpo i { display: block; font-style: normal; font-size: 0.82rem; color: var(--text-muted); margin: 0.2rem 0 0.6rem; }
.tn-pedido-final { padding-top: 1.4rem; }
.tn-vacio-acciones { display: flex; justify-content: center; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.8rem; }
.tn-boton-chico { padding: 0.5rem 0.9rem 0.45rem; font-size: 0.95rem; }
.tn-boton-chico::after { content: none; }
.tn-check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.84rem; color: var(--text-muted); margin: 0.4rem 0 1rem; cursor: pointer; }
.tn-check input { accent-color: var(--neon-crimson); width: 18px; height: 18px; flex: none; margin-top: 0.1rem; }
.tn-formulario-pie { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tn-formulario-pie .tn-estado { margin: 0; }

/* =============================== Acceso ================================= */
.tn-entrada { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; align-items: start; padding-top: 1rem; max-width: none; }
.tn-entrada form { margin-top: 1.4rem; max-width: 460px; }
.tn-campo-icono { position: relative; }
.tn-campo-icono svg { position: absolute; left: 0.8rem; bottom: 0.85rem; width: 18px; height: 18px; color: var(--neon-crimson); pointer-events: none; }
.tn-campo-icono .tn-input { padding-left: 2.5rem; }
.tn-entrada-seguro { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.tn-entrada-seguro svg { width: 14px; height: 14px; color: var(--neon-crimson); }
.tn-entrada-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.tn-entrada-beneficios li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 0.9rem; padding: 1rem 1.1rem; border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); background: var(--bg-charcoal); }
.tn-entrada-beneficios svg { grid-row: span 2; width: 36px; height: 36px; color: var(--neon-crimson); align-self: center; }
.tn-entrada-beneficios b { font-family: var(--font-headline); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tn-entrada-beneficios span { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }
.tn-entrada-listo { border: 1px solid var(--neon-crimson); padding: 1.4rem; text-align: center; }
.tn-entrada-listo svg { width: 40px; height: 40px; color: var(--neon-crimson); margin-bottom: 0.5rem; }
.tn-entrada-listo b { display: block; font-family: var(--font-headline); font-weight: 900; font-size: 1.8rem; text-transform: uppercase; }
.tn-entrada-listo p { color: var(--text-muted); font-size: 0.88rem; margin-top: 0.4rem; }
.tn-entrada-listo em { font-style: normal; color: var(--text-primary); }

/* =========================== Perfil completo ============================ */
.tn-cuenta-quien { display: flex; gap: 1.2rem; align-items: center; }
.tn-avatar { width: 76px; height: 76px; flex: none; display: grid; place-items: center; background: var(--neon-crimson); color: #fff; font-family: var(--font-headline); font-weight: 900; font-size: 2rem; letter-spacing: 0.02em; }
.tn-cuenta-correo a { color: var(--neon-crimson); text-decoration: none; }
.tn-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; list-style: none; margin: 0 0 1.8rem; padding: 0; }
.tn-cifras li { position: relative; padding: 0.9rem 1rem 0.8rem; border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); background: var(--bg-charcoal); }
.tn-cifras li > svg { position: absolute; right: 0.8rem; top: 0.8rem; width: 22px; height: 22px; color: rgba(var(--neon-crimson-rgb), 0.6); }
.tn-cifras b { display: block; font-family: var(--font-headline); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--text-primary); }
.tn-cifras span { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.3rem; }
.tn-cifra-nivel b { color: var(--neon-crimson); }
.tn-cifra-nivel i { display: block; height: 4px; background: rgba(var(--neon-crimson-rgb), 0.18); margin-top: 0.6rem; }
.tn-cifra-nivel em { display: block; height: 100%; background: var(--neon-crimson); }
.tn-cifras--admin { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* overflow-x:auto arrastra también el eje vertical: sin el hidden aparece una
   barra de 1px que no desplaza nada. */
.tn-pestanas { display: flex; gap: 0.3rem; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(var(--neon-crimson-rgb), 0.35); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tn-pestanas::-webkit-scrollbar { display: none; }
.tn-pestanas a { padding: 0.7rem 1rem 0.6rem; font-family: var(--font-headline); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tn-pestanas a:hover { color: var(--text-primary); }
.tn-pestanas a.activa { color: var(--text-primary); border-bottom-color: var(--neon-crimson); }

.tn-rastro { display: flex; list-style: none; margin: 0.6rem 0 0.8rem; padding: 0; position: relative; z-index: 0; }
.tn-rastro li { flex: 1; position: relative; text-align: center; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.tn-rastro li i { display: block; width: 10px; height: 10px; margin: 0 auto 0.35rem; background: rgba(var(--neon-crimson-rgb), 0.25); transform: rotate(45deg); }
.tn-rastro li::before { content: ''; position: absolute; top: 4px; left: -50%; width: 100%; height: 2px; background: rgba(var(--neon-crimson-rgb), 0.2); z-index: -1; }
.tn-rastro li:first-child::before { display: none; }
.tn-rastro li.hecho i { background: var(--neon-crimson); }
.tn-rastro li.hecho { color: var(--text-primary); }
.tn-rastro li.hecho::before { background: var(--neon-crimson); }
.tn-pedido-items { margin: 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--text-primary); }
.tn-pedido-items span { color: var(--text-muted); }
.tn-pedido-acciones { display: flex; align-items: center; gap: 0.8rem; }
.tn-premio-icono { display: grid; place-items: center; aspect-ratio: 1; background: var(--bg-inner); }
.tn-premio-icono svg { width: 40%; height: 40%; color: rgba(var(--neon-crimson-rgb), 0.6); }
.tn-premio i { font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* ================================ Admin ================================= */
.tn-admin-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; padding-top: 0.8rem; }
.tn-admin-vista h2 { font-family: var(--font-headline); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 1.6rem 0 0.7rem; }
.tn-admin-vista h3 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon-crimson); margin: 0.8rem 0 0.4rem; }
.tn-admin-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.tn-lista-admin { list-style: none; margin: 0; padding: 0; }
.tn-lista-admin li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); font-size: 0.86rem; color: var(--text-muted); }
.tn-lista-admin a { color: var(--neon-crimson); text-decoration: none; }
.tn-lista-admin b { color: var(--text-primary); font-family: var(--font-mono); }
.tn-admin-filtros { display: grid; grid-template-columns: 220px 1fr auto; gap: 0.6rem; margin-bottom: 1rem; }
.tn-admin-pedido { border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); margin-bottom: 0.6rem; }
.tn-admin-pedido summary { display: grid; grid-template-columns: 150px 150px 1fr 140px 110px; gap: 0.8rem; align-items: center; padding: 0.8rem 1rem; cursor: pointer; list-style: none; font-size: 0.84rem; color: var(--text-muted); }
.tn-admin-pedido summary::-webkit-details-marker { display: none; }
.tn-admin-pedido summary > b { font-family: var(--font-headline); font-weight: 800; font-size: 1.15rem; color: var(--text-primary); }
.tn-admin-pedido summary > b:last-child { text-align: right; color: var(--neon-crimson); }
.tn-admin-pedido summary i { font-style: normal; color: var(--neon-crimson); }
.tn-admin-pedido-cuerpo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; padding: 0.5rem 1rem 1.2rem; border-top: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); font-size: 0.86rem; }
.tn-admin-pedido-cuerpo p { color: var(--text-muted); line-height: 1.5; }
.tn-admin-montos { font-family: var(--font-mono); font-size: 0.72rem; margin-top: 0.5rem; }
.tn-admin-montos b { color: var(--text-primary); }
.tn-admin-editar .tn-estado { display: inline-block; margin-left: 0.8rem; }
.tn-admin-premio { padding: 0.8rem 1rem 1rem; }
.tn-tabla-admin td span { display: block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); }
.tn-tabla-admin td b { font-weight: 600; }
.tn-admin-marco { width: 100%; height: 78vh; border: 1px solid rgba(var(--neon-crimson-rgb), 0.35); background: #fff; }

@media (max-width: 900px) {
  .tn-entrada { grid-template-columns: 1fr; }
  .tn-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-campos-2, .tn-campos-3 { grid-template-columns: 1fr; }
  .tn-admin-dos { grid-template-columns: 1fr; }
  .tn-admin-filtros { grid-template-columns: 1fr; }
  .tn-admin-pedido summary { grid-template-columns: 1fr 1fr; }
  .tn-admin-pedido-cuerpo { grid-template-columns: 1fr; }
  .tn-tabla-admin th:nth-child(5), .tn-tabla-admin td:nth-child(5) { display: none; }
}

/* Acceso con contraseña */
.tn-pestanas--acceso { margin: 1.2rem 0 1.4rem; max-width: 460px; }
.tn-campo-clave .tn-input { padding-right: 4.2rem; }
.tn-ver-clave { position: absolute; right: 0.6rem; bottom: 0.7rem; background: none; border: none; color: var(--neon-crimson); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; padding: 0.3rem; }
.tn-formulario .tn-liga-guia { margin-top: 0.8rem; }


/* ========================= Cabecera: iconos limpios ===================== */
/* Buscar, cuenta y carrito viven como iconos; el texto solo en pantallas muy
   anchas. "Envía tu música" es el único botón con palabras. */
.header-actions { gap: 0.5rem; }
.tn-cuenta-liga {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  margin-left: 0; padding: 0.5rem 0.62rem;
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.35); color: var(--text-primary); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.2s, background-color 0.2s, transform 0.15s;
}
.tn-cuenta-liga svg { width: 19px; height: 19px; color: var(--neon-crimson); }
.tn-cuenta-liga:hover { border-color: var(--neon-crimson); background: rgba(var(--neon-crimson-rgb), 0.12); }
.tn-cuenta-liga:active { transform: scale(0.95); }
.tn-cuenta-liga span { display: none; }
@media (min-width: 1700px) {
  .tn-cuenta-liga span { display: inline; }
  .tn-cuenta-liga { padding: 0.5rem 0.85rem; }
}
/* El atributo hidden no gana contra display:inline-block: hay que decirlo. */
.tn-contador[hidden] { display: none; }
.tn-contador.salta { animation: tn-salta 0.45s var(--transition-cinematic); }
@keyframes tn-salta {
  0% { transform: scale(1); }
  35% { transform: scale(1.5); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* ============================ Cajón del carrito ========================== */
.tn-sin-scroll { overflow: hidden; }
.tn-cajon { position: fixed; inset: 0; z-index: 9000; }
.tn-cajon[hidden] { display: none; }
.tn-cajon-fondo {
  position: absolute; inset: 0; background: rgba(5, 4, 4, 0.72);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s ease;
}
.tn-cajon.abierto .tn-cajon-fondo { opacity: 1; }
.tn-cajon-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg-inner);
  border-left: 1px solid rgba(var(--neon-crimson-rgb), 0.45);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.9);
  transform: translateX(100%);
  transition: transform 0.34s var(--transition-cinematic);
}
.tn-cajon.abierto .tn-cajon-panel { transform: translateX(0); }

.tn-cajon-cabeza {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.2rem 1.2rem 1rem;
  border-bottom: 1px solid rgba(var(--neon-crimson-rgb), 0.35);
}
.tn-cajon-cabeza h2 { font-family: var(--font-headline); font-weight: 900; font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--text-primary); }
.tn-cajon-cerrar {
  background: transparent; border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); color: var(--text-muted);
  font-size: 1.5rem; line-height: 1; width: 40px; height: 40px; flex: none; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.tn-cajon-cerrar:hover { color: var(--neon-crimson); border-color: var(--neon-crimson); }

.tn-cajon-cuerpo { flex: 1; overflow-y: auto; padding: 0.6rem 1.2rem; }
.tn-cajon-item {
  display: grid; grid-template-columns: 70px 1fr 24px; gap: 0.8rem; align-items: start;
  padding: 0.9rem 0; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.3);
  animation: tn-entra-item 0.35s var(--transition-cinematic) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes tn-entra-item { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.tn-cajon-foto { display: block; border: var(--border-card); overflow: hidden; }
.tn-cajon-foto img { width: 100%; height: 92px; object-fit: cover; object-position: 50% 15%; display: block; transition: transform 0.4s var(--transition-cinematic); }
.tn-cajon-foto:hover img { transform: scale(1.06); }
.tn-cajon-datos b { display: block; font-family: var(--font-headline); font-weight: 800; font-size: 1.1rem; line-height: 1; text-transform: uppercase; }
.tn-cajon-datos b a { color: var(--text-primary); text-decoration: none; }
.tn-cajon-datos b a:hover { color: var(--neon-crimson); }
.tn-cajon-datos > span { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--text-muted); margin: 0.25rem 0 0.5rem; }
.tn-cajon-fila { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.tn-cajon-cantidad { display: inline-flex; align-items: center; border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); }
.tn-cajon-cantidad button {
  width: 28px; height: 28px; background: transparent; border: none; color: var(--text-primary);
  font-size: 1rem; line-height: 1; cursor: pointer; transition: background-color 0.15s, color 0.15s;
}
.tn-cajon-cantidad button:hover { background: rgba(var(--neon-crimson-rgb), 0.18); color: var(--neon-crimson); }
.tn-cajon-cantidad b { min-width: 26px; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; }
.tn-cajon-precio { font-family: var(--font-display); font-size: 1.15rem; color: var(--neon-crimson); font-weight: 400; }
.tn-cajon-quitar { background: transparent; border: none; color: var(--text-dim); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0; transition: color 0.2s; }
.tn-cajon-quitar:hover { color: var(--neon-crimson); }

.tn-cajon-vacio { text-align: center; padding: 3rem 1rem; }
.tn-cajon-vacio svg { width: 54px; height: 54px; color: rgba(var(--neon-crimson-rgb), 0.45); margin-bottom: 0.8rem; }
.tn-cajon-vacio b { display: block; font-family: var(--font-headline); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; }
.tn-cajon-vacio p { color: var(--text-muted); font-size: 0.84rem; margin: 0.4rem 0 1.2rem; }

.tn-cajon-pie:not(:empty) { padding: 1rem 1.2rem 1.3rem; border-top: 1px solid rgba(var(--neon-crimson-rgb), 0.35); background: var(--bg-charcoal); }
.tn-cajon-pie .tn-cuentas { max-width: none; margin: 0 0 0.9rem; }
.tn-cajon-pie .tn-cuentas-total dd { font-size: 1.9rem; }
.tn-cajon-pie .tn-liga-guia { display: block; width: 100%; margin-top: 0.7rem; text-align: center; }

/* El botón de agregar confirma sin sacar a nadie de la página. */
.tn-boton.listo { background-color: #1f7a3d; border-color: #1f7a3d; }
.tn-boton.listo::after { content: '✓'; }

@media (max-width: 620px) {
  .tn-cajon-panel { width: 100vw; }
  .tn-cajon-cabeza h2 { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-cajon-fondo, .tn-cajon-panel { transition: none; }
  .tn-cajon-item { animation: none; }
  .tn-contador.salta { animation: none; }
  .tn-cajon-foto img { transition: none; }
}

/* ============================== La calavera ============================= */
/* El emblema nuevo de AzTech, animado, donde antes había un hueco: carrito
   vacío, esperas y la marca de agua del hero. */
.tn-calavera { display: block; margin: 0 auto; }

/* Late como un corazón, con una pausa entre latidos. */
.tn-calavera-late { animation: tn-late 2.6s ease-in-out infinite; }
@keyframes tn-late {
  0%, 60%, 100% { transform: scale(1); }
  12% { transform: scale(1.08); }
  24% { transform: scale(1.01); }
  36% { transform: scale(1.05); }
}

/* Espera: gira despacio y respira. */
.tn-calavera-gira { animation: tn-gira-calavera 2.4s ease-in-out infinite; }
@keyframes tn-gira-calavera {
  0%, 100% { transform: rotate(-7deg) scale(0.96); opacity: 0.75; }
  50% { transform: rotate(7deg) scale(1.04); opacity: 1; }
}
.tn-cargando { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 3.5rem 1rem; }
.tn-cargando span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }

.tn-cajon-vacio .tn-calavera { width: 120px; margin-bottom: 0.9rem; }
.tn-vacio .tn-calavera { width: 140px; margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .tn-calavera-late, .tn-calavera-gira { animation: none; }
}

/* ========================= Pestaña del carrito ========================== */
/* Pegada al borde derecho, a media altura, siempre a la vista. La calavera de
   la marca gira sobre su propio eje y del otro lado está el carrito: una
   moneda de dos caras, no dos iconos que se funden. */
.tn-pestana {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 8000;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.8rem 0.65rem;
  background: var(--bg-charcoal);
  border: 1px solid var(--neon-crimson);
  border-right: none;
  border-radius: 6px 0 0 6px;
  text-decoration: none; cursor: pointer;
  transition: padding-right 0.25s var(--transition-cinematic), background-color 0.2s;
}
.tn-pestana:hover, .tn-pestana:focus-visible { padding-right: 1rem; background: rgba(var(--neon-crimson-rgb), 0.14); }
.tn-pestana:active { padding-right: 0.75rem; }
/* Mientras el cajón está abierto, la pestaña se quita de en medio. */
.tn-cajon-abierto .tn-pestana { transform: translateY(-50%) translateX(110%); pointer-events: none; }

/* La moneda: dos caras en el mismo espacio, una volteada de origen. */
.tn-pestana-moneda { position: relative; display: block; width: 44px; height: 44px; perspective: 600px; }
.tn-pestana-cara {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  backface-visibility: hidden;
  transition: transform 0.55s var(--transition-cinematic);
}
.tn-pestana-calavera { transform: rotateY(0deg); }
.tn-pestana-calavera img { width: 100%; height: 100%; object-fit: contain; }
.tn-pestana-carrito { transform: rotateY(180deg); }
.tn-pestana-carrito svg { width: 28px; height: 28px; color: var(--neon-crimson); }

/* Voltea sola, siempre: no depende del cursor. Cada cara se queda un momento
   quieta y el giro ocurre en el tramo corto de en medio. */
.tn-pestana-calavera { animation: tn-voltea-a 5s var(--transition-cinematic) infinite; }
.tn-pestana-carrito { animation: tn-voltea-b 5s var(--transition-cinematic) infinite; }
@keyframes tn-voltea-a {
  0%, 42% { transform: rotateY(0deg); }
  50%, 92% { transform: rotateY(-180deg); }
  100% { transform: rotateY(-360deg); }
}
@keyframes tn-voltea-b {
  0%, 42% { transform: rotateY(180deg); }
  50%, 92% { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}
/* Al agregar algo, un rebote para señalar dónde cayó. */
.tn-pestana.entra { animation: tn-pestana-entra 0.6s var(--transition-cinematic); }
@keyframes tn-pestana-entra {
  0% { transform: translateY(-50%) scale(1); }
  40% { transform: translateY(-50%) scale(1.14); }
  100% { transform: translateY(-50%) scale(1); }
}

.tn-pestana:hover .tn-pestana .tn-contador {
  margin: 0; min-width: 21px; height: 21px; line-height: 21px; padding: 0 5px;
  box-shadow: 0 0 0 2px var(--bg-outer);
}

@media (max-width: 620px) {
  /* En el teléfono va abajo, arriba de la barra del reproductor. */
  .tn-pestana {
    top: auto; bottom: calc(4.5rem + 12px); right: 12px; transform: none;
    flex-direction: row; gap: 0.45rem;
    padding: 0.55rem 0.7rem; border-radius: 999px; border-right: 1px solid var(--neon-crimson);
  }
  .tn-pestana:hover, .tn-pestana:active { padding-right: 0.7rem; }
  .tn-cajon-abierto .tn-pestana { transform: translateX(160%); }
  .tn-pestana-moneda { width: 30px; height: 30px; }
  .tn-pestana-carrito svg { width: 22px; height: 22px; }
    .tn-pestana.entra { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-pestana, .tn-pestana-cara { transition: none; }
  .tn-pestana-calavera, .tn-pestana-carrito, .tn-pestana.entra { animation: none !important; }
}

/* ===================== Datos en los huecos de la rejilla ================= */
/* Una tarjeta ancha (4:3) junto a una alta (3:4) deja un espacio debajo. La
   columna envuelve a las dos piezas y el dato se estira para llenarlo. */

/* La tarjeta de información, rehecha. La de antes era un cuadro grande con un
   iconito suelto arriba y texto centrado en un mar de vacío: nada que mirar.
   Ahora manda una CIFRA —lo que se busca de un vistazo— con el icono como
   sello a su lado, y el texto explica debajo. */
/* Ocupa una celda como cualquier producto: es parte del ritmo, no una
   interrupción. Por eso sí se estira (todas las celdas miden igual). */
.tn-dato {
  position: relative; min-height: 190px;
  /* No se estira a la altura de la fila: mide lo que mide su contenido. Si
     se estira, junto a una tarjeta alta queda una caja con cientos de píxeles
     vacíos, y da igual si el contenido va centrado o repartido a las orillas
     (lo probé): el hueco solo cambia de sitio. Lo que sobra de la fila queda
     como fondo, que no se lee como un error. */
  display: grid; align-content: center; gap: 0.2rem;
  padding: 1.6rem 1.7rem;
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.3);
  border-left: 3px solid var(--neon-crimson);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(var(--neon-crimson-rgb), 0.12), transparent 55%),
    var(--bg-charcoal);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--transition-cinematic), transform 0.6s var(--transition-cinematic),
              border-color 0.25s, background 0.25s;
  transition-delay: calc(var(--i, 0) * 55ms);
  overflow: hidden;
}
.tn-dato.visible { opacity: 1; transform: none; }
.tn-dato:hover { border-color: var(--neon-crimson); background-color: var(--bg-card-hover); }

/* El sello: el icono deja de flotar suelto y vive dentro de un cuadro, arriba
   a la derecha, para que la cifra tenga el mando. */
.tn-dato-sello {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.45);
  color: var(--neon-crimson);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 0.25s ease, color 0.25s ease;
}
.tn-dato-sello svg { width: 24px; height: 24px; }
.tn-dato:hover .tn-dato-sello { background: var(--neon-crimson); color: #fff; }

.tn-dato-cifra {
  font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  line-height: 0.88; color: var(--neon-crimson); letter-spacing: -0.01em;
}
.tn-dato-unidad {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.55rem;
}
.tn-dato b {
  font-family: var(--font-headline); font-weight: 900; font-size: 1.15rem; line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--text-primary);
}
.tn-dato p { margin: 0.25rem 0 0; font-size: 0.84rem; line-height: 1.55; color: var(--text-muted); max-width: 46ch; }
/* Una línea que cruza el hueco: da qué mirar donde antes no había nada. */
.tn-dato b::before {
  content: ''; display: block; width: 100%; height: 1px; margin-bottom: 0.9rem;
  background: linear-gradient(90deg, rgba(var(--neon-crimson-rgb), 0.55), transparent);
}
.tn-dato-accion {
  margin-top: 0.7rem; justify-self: start;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--neon-crimson); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
.tn-dato-accion:hover { border-bottom-color: var(--neon-crimson); }

@media (max-width: 620px) {
  .tn-dato { padding: 1.2rem 1.2rem; min-height: 0; }
  .tn-dato-sello { width: 38px; height: 38px; top: 1rem; right: 1rem; }
  .tn-dato-sello svg { width: 20px; height: 20px; }
}

@media (max-width: 1000px) {
}
@media (max-width: 620px) {
  .tn-dato p { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-dato { opacity: 1; transform: none; transition: border-color 0.25s; }
}

/* ============================== Gracias ================================= */
.tn-gracias { max-width: 980px; margin: 0 auto; }
.tn-gracias-cabeza { text-align: center; padding: 1rem 0 2rem; }
.tn-gracias-cabeza .tn-calavera { margin-bottom: 1rem; }
.tn-gracias-cabeza .tn-bajada { margin: 0.8rem auto 0; max-width: 56ch; }

/* El rastro del pedido, en grande: cinco pasos con su diamante. */
.tn-rastro-grande { margin: 0 0 2.4rem; padding: 0 0.5rem; }
.tn-rastro-grande li { font-size: 0.6rem; }
.tn-rastro-grande li i { width: 14px; height: 14px; margin-bottom: 0.55rem; }
.tn-rastro-grande li::before { top: 6px; height: 3px; }

.tn-gracias-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
.tn-gracias-bloque h2 {
  font-family: var(--font-headline); font-weight: 800; font-size: 1.5rem; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--text-primary);
  padding-bottom: 0.5rem; margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(var(--neon-crimson-rgb), 0.4);
}
.tn-gracias-items { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.tn-gracias-items li { padding: 0.55rem 0; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.3); font-size: 0.92rem; color: var(--text-primary); }
.tn-gracias-items b { color: var(--neon-crimson); font-family: var(--font-mono); margin-right: 0.3rem; }
.tn-gracias-items span { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 0.15rem; }
.tn-gracias-bloque .tn-cuentas { max-width: none; margin-left: 0; }
.tn-gracias-bloque .tn-specs { margin-top: 0; }
.tn-gracias-acciones { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
.tn-gracias-acciones .tn-liga-guia { align-self: flex-start; }
.tn-buscar-folio { display: flex; gap: 0.6rem; max-width: 420px; margin: 0 auto; }
.tn-buscar-folio .tn-input { text-transform: uppercase; }

@media (max-width: 860px) {
  .tn-gracias-cuerpo { grid-template-columns: 1fr; gap: 1.8rem; }
  .tn-rastro-grande li span { font-size: 0.5rem; }
  .tn-buscar-folio { flex-direction: column; }
}

/* ===================== Cluster de categorías y carruseles =============== */


.tn-carro-item { scroll-snap-align: start; }
.tn-carro-item a { display: block; text-decoration: none; color: inherit; }
.tn-carro-foto {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--bg-inner);
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.25);
  transition: border-color 0.25s;
}
.tn-carro-item a:hover .tn-carro-foto { border-color: var(--neon-crimson); }
.tn-carro-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block;
  transition: transform 0.8s var(--transition-cinematic);
}
.tn-carro-item a:hover .tn-carro-foto img { transform: scale(1.05); }
.tn-carro-foto .tn-tarjeta-num { font-size: 2.6rem; }
.tn-carro-item b {
  display: block; margin-top: 0.6rem;
  font-family: var(--font-headline); font-weight: 800; font-size: 1.15rem; line-height: 1;
  text-transform: uppercase; color: var(--text-primary);
}
.tn-carro-precio { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--neon-crimson); }

.tn-todos { margin-top: 1rem; }
.tn-todos-nota { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

@media (max-width: 900px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* ---------------------- Playera personalizada --------------------------- */
/* El único producto donde el cliente pone el arte. La vista y los controles
   van lado a lado: se ve el diseño sobre la playera mientras se elige todo. */
.tn-perso { display: flex; flex-direction: column; gap: 2.4rem; }

.tn-perso-cabeza { max-width: 62ch; }
.tn-perso-cabeza .tn-bajada { margin-top: 0.7rem; }
.tn-perso-sellos {
  list-style: none; margin: 1.3rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.tn-perso-sellos li {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.14); padding: 0.45rem 0.8rem;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.tn-perso-sellos b { color: var(--neon-crimson); font-weight: 800; }

.tn-perso-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.4rem; align-items: start; }

/* --- La vista: silueta + el arte dentro del área de impresión --- */
.tn-perso-vista { margin: 0; position: sticky; top: 5.5rem; }
.tn-perso-playera {
  position: relative; background: var(--bg-charcoal);
  border: 1px solid rgba(255, 255, 255, 0.08); padding: 1.2rem;
}
.tn-perso-svg { display: block; width: 100%; height: auto; }
/* Las medidas salen de AREA en tienda.js: x 86, y 60, 88 × 110 sobre 260 × 250. */
.tn-perso-area {
  position: absolute; left: calc(1.2rem + (100% - 2.4rem) * 0.3308);
  top: calc(1.2rem + (100% - 2.4rem) * 0.24 * 260 / 250);
  width: calc((100% - 2.4rem) * 0.3385);
  aspect-ratio: 88 / 110;
  display: grid; place-items: center;
  outline: 1px dashed rgba(255, 255, 255, 0.22); outline-offset: 2px;
}
.tn-perso-area img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.tn-perso-hueco {
  display: grid; place-items: center; gap: 0.3rem; text-align: center;
  color: var(--text-muted); padding: 0.4rem;
}
.tn-perso-hueco svg { width: 26px; height: 26px; opacity: 0.5; }
.tn-perso-hueco b { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tn-perso-hueco i { font-style: normal; font-family: var(--font-mono); font-size: 0.55rem; opacity: 0.7; }
.tn-perso-vista figcaption {
  margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.06em; color: var(--text-muted); text-align: center;
}

/* --- Los controles --- */
.tn-perso-controles { display: flex; flex-direction: column; gap: 1.5rem; }

/* La zona de soltar el archivo. */
.tn-suelta {
  display: grid; place-items: center; gap: 0.5rem; text-align: center;
  padding: 1.8rem 1.2rem; cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, 0.24); background: var(--bg-charcoal);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.tn-suelta:hover, .tn-suelta:focus-visible, .tn-suelta.encima {
  border-color: var(--neon-crimson); background: var(--bg-card-hover); outline: none;
}
.tn-suelta.encima { transform: scale(1.01); }
.tn-suelta.con-archivo { border-style: solid; border-color: rgba(255, 255, 255, 0.14); padding: 1.1rem; }
.tn-suelta b { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tn-suelta i { font-style: normal; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); }
.tn-suelta .tn-calavera { opacity: 0.85; }
.tn-suelta-consejo { margin: 0.6rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }

/* El semáforo de calidad del archivo. */
.tn-calidad { line-height: 1.55; }
.tn-calidad b { color: var(--text-primary); }
.tn-calidad i { font-style: normal; opacity: 0.75; }
.tn-calidad::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 0.5rem;
  vertical-align: 1px; border-radius: 50%; background: currentColor;
}
.tn-calidad.buena { color: #4ADE80; }
.tn-calidad.ok { color: #A3E635; }
.tn-calidad.justa { color: #FBBF24; }
.tn-calidad.mala { color: var(--neon-crimson-bright); }
.tn-calidad .tn-liga-guia { margin-left: 0.2rem; }

/* Color de playera: la misma silueta que usa el resto de la tienda. */
.tn-colores { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tn-color {
  display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
  background: var(--bg-charcoal); color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5rem 0.9rem 0.5rem 0.55rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.tn-color svg { width: 30px; height: 30px; overflow: visible; }
.tn-color path { fill: var(--sw, #000); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.6; stroke-linejoin: round; }
.tn-color.claro path { stroke: rgba(0, 0, 0, 0.45); }
.tn-color:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text-primary); }
.tn-color.activa { border-color: var(--neon-crimson); color: var(--text-primary); }

.tn-perso-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.tn-perso-precio .tn-etiqueta { flex-basis: 100%; }
.tn-perso-precio b { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--neon-crimson); }
.tn-perso-precio i { font-style: normal; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); }

.tn-perso-abajo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.tn-lista-pasos { counter-reset: paso; }
.tn-lista-pasos li { counter-increment: paso; }
.tn-lista-pasos li::marker { content: counter(paso, decimal-leading-zero) '  '; color: var(--neon-crimson); font-family: var(--font-mono); }

/* El nombre del archivo, en el carrito y en el cajón. */
.tn-cajon-arte, .tn-fila-arte {
  display: block; font-family: var(--font-mono); font-size: 0.6rem;
  color: var(--neon-crimson); letter-spacing: 0.04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch;
}

/* La franja que lleva a la personalizada desde el catálogo. */
.tn-invita {
  display: block; text-decoration: none; background: var(--bg-charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--neon-crimson);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tn-invita:hover { background: var(--bg-card-hover); border-color: rgba(255, 255, 255, 0.22); border-left-color: var(--neon-crimson); }
.tn-perso-invita { display: grid; place-items: center; gap: 0.6rem; text-align: center; padding: 1.4rem; }
.tn-perso-invita .tn-calavera { width: 64px; height: 64px; }
.tn-perso-invita b {
  font-family: var(--font-headline); font-weight: 900; font-size: 1.5rem;
  line-height: 1; text-transform: uppercase; color: var(--text-primary);
}
.tn-perso-invita i { font-style: normal; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); max-width: 30ch; }
.tn-perso-invita em {
  font-style: normal; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon-crimson);
}

@media (max-width: 900px) {
  .tn-perso-cuerpo { grid-template-columns: 1fr; }
  .tn-perso-vista { position: static; max-width: 420px; margin: 0 auto; }
}
/* El texto largo va en el HTML para que lo lean los rastreadores; en pantalla
   se lee como pie de la entrada, no como muro de texto. */
.tn-perso-larga-bloque { margin-top: 2.4rem; }
.tn-perso-larga-bloque p { max-width: 80ch; }
.tn-perso-sellos-cabeza { margin: 0 0 0.4rem; }

/* ------------------- Carrito y checkout en dos columnas ------------------ */
/* Antes era una sola columna de 820 px pegada a la izquierda: en una pantalla
   de escritorio quedaban 460 px en negro. Ahora a la izquierda va lo que se
   llena y a la derecha el resumen pegado, con el total y el botón siempre
   visibles mientras se escribe la dirección. */
.tn-carrito-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr);
  gap: 2.2rem;
  align-items: start;
}
.tn-carrito-izq { min-width: 0; }

.tn-piezas-titulo {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-headline); font-weight: 900; font-size: 1.5rem;
  line-height: 1; text-transform: uppercase; color: var(--text-primary);
  margin: 0 0 0.9rem;
}
.tn-piezas-titulo i {
  font-style: normal; font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--neon-crimson); border: 1px solid rgba(var(--neon-crimson-rgb), 0.5);
  padding: 0.15rem 0.45rem;
}

.tn-carrito-resumen { position: sticky; top: 5.5rem; }
.tn-resumen-caja {
  background: var(--bg-charcoal);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid var(--neon-crimson);
  padding: 1.4rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.tn-resumen-caja h2 {
  font-family: var(--font-headline); font-weight: 900; font-size: 1.5rem;
  line-height: 1; text-transform: uppercase; color: var(--text-primary); margin: 0;
}
/* Dentro de la caja el resumen ya no se alinea a la derecha: es la columna. */
.tn-resumen-caja .tn-cuentas { max-width: none; margin: 0; }
.tn-resumen-caja .tn-envio-barra { margin: 0; }
.tn-resumen-caja .tn-pedido-final { margin: 0; }
.tn-resumen-caja .tn-boton-grande { width: 100%; }
.tn-resumen-caja .tn-aviso-envio { margin: 0.6rem 0 0; font-size: 0.72rem; }
/* Cupón (0029): el descuento en rojo y la cajita para escribirlo. */
.tn-cuentas-cupon dt, .tn-cuentas-cupon dd { color: var(--neon-crimson); }
.tn-cupon { border: 1px dashed rgba(var(--neon-crimson-rgb), 0.55); padding: 0.85rem 0.9rem; }
.tn-cupon-etiqueta { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
.tn-cupon-fila { display: flex; gap: 0.5rem; }
.tn-cupon-fila .tn-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.tn-cupon-fila .tn-boton { flex: 0 0 auto; min-height: 44px; }
.tn-cupon-ok { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-primary); }
.tn-cupon-ok b { color: var(--neon-crimson); letter-spacing: 0.06em; }
.tn-cupon-quitar { background: none; border: 0; padding: 0 0 0 0.4rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.78rem; min-height: 32px; }
.tn-cupon-quitar:hover { color: var(--text-primary); }
.tn-cupon-error { margin: 0.55rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--neon-crimson); }
.tn-resumen-pagos { border-top: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); padding-top: 0.9rem; }
/* En la columna angosta los seis logos se partían 5 + 1. En rejilla de tres
   quedan dos filas parejas. */
.tn-resumen-pagos .tn-pagos {
  margin-top: 0.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem;
}
.tn-resumen-pagos .tn-pagos li { justify-content: center; }
.tn-resumen-confianza {
  list-style: none; margin: 0; padding: 0.9rem 0 0;
  border-top: 1px dotted rgba(var(--neon-crimson-rgb), 0.35);
  display: grid; gap: 0.45rem;
}
.tn-resumen-confianza li {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em;
  color: var(--text-muted); padding-left: 1.1rem; position: relative;
}
.tn-resumen-confianza li::before {
  content: '✓'; position: absolute; left: 0; color: var(--neon-crimson);
}

/* El formulario ya no arranca con una línea que lo separe del resumen. */
.tn-carrito-izq .tn-form { margin-top: 1.8rem; }

@media (max-width: 1000px) {
  .tn-carrito-rejilla { grid-template-columns: 1fr; gap: 1.6rem; }
  /* En móvil el resumen va después del formulario, que es el orden de lectura,
     pero deja de estar pegado: no vale la pena robar media pantalla. */
  .tn-carrito-resumen { position: static; }
}

/* El diseño del cliente dentro del pedido, en el panel. */
.tn-arte-pedido { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.5rem; }
.tn-arte-pedido img {
  width: 56px; height: 56px; object-fit: contain; background: #111;
  border: 1px solid rgba(255, 255, 255, 0.16); padding: 3px;
}
.tn-arte-bajar {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em;
  color: var(--neon-crimson); text-decoration: none; border-bottom: 1px dotted currentColor;
}
.tn-arte-bajar:hover { color: var(--text-primary); }

/* ------------------------------- Soporte -------------------------------- */
/* Un ticket es una conversación: los mensajes se alinean a un lado o al otro
   según quién escribió, como cualquier chat, para leerlo de un vistazo. */

/* --- Lado del cliente (cuenta.html) --- */
.tn-ticket-form { margin-top: 0; padding-top: 0; border-top: none; }
.tn-ticket-form h3, .tn-tickets-titulo {
  font-family: var(--font-headline); font-weight: 900; font-size: 1.3rem;
  text-transform: uppercase; color: var(--text-primary); margin: 0 0 0.8rem;
}
.tn-tickets-titulo { margin-top: 2rem; }

.tn-ticket { border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0.6rem; background: var(--bg-charcoal); }
.tn-ticket-cabeza {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; cursor: pointer; text-align: left; padding: 0.9rem 1rem; color: inherit;
}
.tn-ticket-cabeza:hover { background: var(--bg-card-hover); }
.tn-ticket-titulo { display: grid; gap: 0.15rem; min-width: 0; }
.tn-ticket-titulo b { font-family: var(--font-headline); font-weight: 800; font-size: 1.05rem; color: var(--text-primary); }
.tn-ticket-titulo i { font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); }
.tn-ticket-cuerpo { padding: 0 1rem 1rem; }

/* El estado, con color según qué tan urgente es. */
.tn-ticket-estado {
  flex: none; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.3rem 0.6rem; border: 1px solid currentColor; white-space: nowrap;
}
.tn-ticket-estado--abierto    { color: var(--neon-crimson); }
.tn-ticket-estado--en_proceso { color: #FBBF24; }
.tn-ticket-estado--esperando  { color: #60A5FA; }
.tn-ticket-estado--resuelto   { color: #4ADE80; }
.tn-ticket-estado--cerrado    { color: var(--text-muted); }

/* --- La conversación, en los dos lados --- */
.tn-charla { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.7rem; }
.tn-charla li { padding: 0.7rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.08); max-width: 85%; }
.tn-charla b { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.3rem; }
.tn-charla p { margin: 0; font-size: 0.88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tn-charla i { display: block; margin-top: 0.35rem; font-style: normal; font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-muted); }
.tn-charla-cliente { background: var(--bg-inner); justify-self: start; }
.tn-charla-cliente b { color: var(--text-muted); }
.tn-charla-equipo { background: var(--bg-card-hover); border-color: rgba(var(--neon-crimson-rgb), 0.35); justify-self: end; }
.tn-charla-equipo b { color: var(--neon-crimson); }

.tn-ticket-responder { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: start; }
.tn-ticket-responder textarea { resize: vertical; }

/* --- Lado del panel (admin.html) --- */
.tn-admin-ficha { border: 1px solid rgba(var(--neon-crimson-rgb), 0.3); padding: 1rem; margin-bottom: 0.8rem; }
.tn-admin-ficha.sin-leer { border-left: 3px solid var(--neon-crimson); background: var(--bg-charcoal); }
.tn-admin-ficha-cabeza { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 0.9rem; }
.tn-admin-ficha-cabeza b { display: block; font-family: var(--font-headline); font-weight: 800; font-size: 1.1rem; color: var(--text-primary); }
.tn-admin-ficha-cabeza span { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); }
.tn-punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--neon-crimson); margin-right: 0.45rem; vertical-align: 2px; }
.tn-ticket-acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dotted rgba(var(--neon-crimson-rgb), 0.3); }
.tn-ticket-acciones button { background: none; border: none; cursor: pointer; padding: 0; }
/* La bandeja filtra con dos campos, no con los tres de pedidos. */
#tn-admin-vista .tn-admin-filtros:has(#tk-filtro) { grid-template-columns: 220px 1fr; }
.tn-cifra-alerta b { color: var(--neon-crimson); }

@media (max-width: 620px) {
  .tn-charla li { max-width: 100%; }
  .tn-ticket-responder { grid-template-columns: 1fr; }
}

/* -------------------------- Contacto y buzón ---------------------------- */
/* El formulario de la página no manda correo: escribe en el buzón del panel. */
.tn-contacto-form { margin-top: 0; padding-top: 0; border-top: none; max-width: 780px; }
.tn-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; }
.tn-tema-opcion {
  text-align: left; cursor: pointer; padding: 0.85rem 1rem;
  background: var(--bg-charcoal); color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.tn-tema-opcion:hover { border-color: rgba(255, 255, 255, 0.3); background: var(--bg-card-hover); }
.tn-tema-opcion.activa { border-color: var(--neon-crimson); background: var(--bg-card-hover); }
.tn-tema-opcion b {
  display: block; font-family: var(--font-headline); font-weight: 800; font-size: 1.05rem;
  text-transform: uppercase; color: var(--text-primary); margin-bottom: 0.2rem;
}
.tn-tema-opcion i { font-style: normal; font-size: 0.76rem; line-height: 1.45; }

/* La trampa para robots: fuera de la pantalla, no `display:none` (algunos
   robots se saltan lo que está oculto de la forma obvia). */
.tn-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tn-contacto-listo { padding: 3rem 1rem; }

/* --- El buzón, en el panel --- */
.tn-mensaje-cuerpo {
  margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-dim);
  padding: 0.8rem 1rem; background: var(--bg-inner); border-left: 2px solid rgba(255, 255, 255, 0.12);
}
.tn-mensaje-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tn-mensaje-pie .tn-boton { padding: 0.5rem 1rem; font-size: 0.7rem; }
.tn-mensaje-notas { display: block; margin-top: 0.9rem; }
.tn-mensaje-notas textarea { resize: vertical; margin-top: 0.3rem; }
.tn-etiquetas-mensaje { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; flex: none; }
.tn-tema {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.25rem 0.55rem; white-space: nowrap;
  border: 1px solid currentColor;
}
.tn-tema--publicidad { color: #4ADE80; }   /* el que deja dinero, que salte */
.tn-tema--prensa     { color: #60A5FA; }
.tn-tema--bandas     { color: #C084FC; }
.tn-tema--tienda     { color: #FBBF24; }
.tn-tema--general    { color: var(--text-muted); }
.tn-admin-ficha a { color: var(--neon-crimson); }

@media (max-width: 620px) {
  .tn-admin-ficha-cabeza { flex-direction: column; }
  .tn-etiquetas-mensaje { flex-direction: row; align-items: center; }
}

/* ------------------------- Banner de temporada ---------------------------
   Lleva de la tienda a `playeras-halloween.html`. Antes era un enlace de
   texto debajo del hero y se perdía entre lo demás; Sam lo pidió como
   banner. Mismo idioma que el resto: cartel, no anuncio de marketplace.

   Todo el bloque es una sola liga, así que se puede tocar en cualquier
   punto, que es lo que uno intenta hacer en el teléfono. */
.tn-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.6rem;
  margin: 0 0 2.4rem;
  padding: 1.5rem 1.6rem;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(100deg, var(--bg-charcoal) 55%, rgba(var(--neon-crimson-rgb), 0.1));
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.4);
  transition: border-color 0.3s, background 0.3s;
}
.tn-banner:hover, .tn-banner:focus-visible { border-color: var(--neon-crimson); }
/* El contenido va en spans (todo el banner es una liga, y una liga no
   puede llevar bloques dentro sin romper el HTML). Hay que volverlos
   bloque a mano. */
.tn-banner-texto-col { display: block; min-width: 0; }
.tn-banner-kicker, .tn-banner-titulo, .tn-banner-texto { display: block; }
.tn-banner-kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--neon-crimson);
}
.tn-banner-titulo {
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0.35rem 0 0.4rem;
}
.tn-banner-titulo em { font-style: normal; color: var(--neon-crimson); }
.tn-banner-texto { max-width: 46ch; font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); margin: 0; }
.tn-banner-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.85rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-primary);
}
.tn-banner-cta::after { content: '→'; transition: transform 0.3s var(--transition-cinematic); }
.tn-banner:hover .tn-banner-cta::after { transform: translateX(6px); }

/* Tres playeras en abanico, como las del hero pero en chico. */
.tn-banner-fotos { display: flex; flex: none; }
.tn-banner-fotos img {
  /* `height: auto` no sobra: el atributo height="1350" del HTML cuenta
     como altura fija y le gana a aspect-ratio. Sin esto la foto mide 1350
     px de alto y el banner entero se estira. */
  width: 108px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.3);
  background: var(--bg-inner);
  transition: transform 0.45s var(--transition-cinematic);
}
.tn-banner-fotos img:nth-child(1) { transform: rotate(-5deg); }
.tn-banner-fotos img:nth-child(2) { margin: 0 -18px; z-index: 2; position: relative; }
.tn-banner-fotos img:nth-child(3) { transform: rotate(5deg); }
.tn-banner:hover .tn-banner-fotos img:nth-child(1) { transform: rotate(-9deg) translateX(-8px); }
.tn-banner:hover .tn-banner-fotos img:nth-child(3) { transform: rotate(9deg) translateX(8px); }

@media (max-width: 720px) {
  /* En el teléfono las fotos estorban más de lo que aportan: el banner se
     queda con el texto, que es lo que hace el trabajo. */
  .tn-banner { grid-template-columns: 1fr; }
  .tn-banner-fotos { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-banner-fotos img, .tn-banner-cta::after { transition: none; }
  .tn-banner:hover .tn-banner-fotos img { transform: none; }
}

/* ------------------- Página de temporada (Halloween) ---------------------
   Sam: "todos los textos alineados a la izquierda". Tenía razón: eran seis
   párrafos pegados al mismo margen. Aquí la información va en tarjetas
   repartidas entre las rejillas de diseños, y los encabezados de grupo van
   centrados, para que la página tenga ritmo en vez de una sola columna.

   Reusa `.tn-dato` de la tienda, con un arreglo: allá esa tarjeta nace
   invisible y la destapa el script al aparecer. Aquí el HTML es estático y
   ese script no corre, así que dentro de esta página nacen visibles. */
.tn-tmp-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 0 0 2.6rem; }
.tn-tmp-datos .tn-dato, .tn-tmp-dos .tn-dato { opacity: 1; transform: none; }

/* Encabezado de grupo, centrado. */
.tn-tmp-cabeza { text-align: center; max-width: 62ch; margin: 0 auto 1.6rem; }
.tn-tmp-cabeza h2 {
  font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 0.95;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--text-primary); margin: 0 0 0.6rem;
}
.tn-tmp-cabeza h2 em { font-style: normal; color: var(--neon-crimson); }
.tn-tmp-cabeza p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--text-muted); }
/* Una regla corta arriba del título, como en un cartel. */
.tn-tmp-cabeza::before {
  content: ''; display: block; width: 46px; height: 2px;
  background: var(--neon-crimson); margin: 0 auto 1.1rem;
}

/* Tarjeta ancha que corta la fila de diseños: va centrada y a todo lo ancho. */
.tn-tmp-nota {
  text-align: center;
  max-width: 76ch;
  margin: 3rem auto;
  padding: 2rem 1.8rem;
  border: 1px solid rgba(var(--neon-crimson-rgb), 0.32);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(var(--neon-crimson-rgb), 0.1), transparent 62%),
    var(--bg-charcoal);
}
.tn-tmp-nota h2 {
  font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1;
  text-transform: uppercase; color: var(--text-primary); margin: 0 0 0.9rem;
}
.tn-tmp-nota h2 em { font-style: normal; color: var(--neon-crimson); }
.tn-tmp-nota p { margin: 0 auto 0.8rem; max-width: 62ch; font-size: 0.95rem; line-height: 1.65; color: var(--text-muted); }
.tn-tmp-nota p:last-child { margin-bottom: 0; }
.tn-tmp-nota strong { color: var(--text-primary); font-weight: 600; }
.tn-tmp-nota .tn-boton { margin-top: 1.2rem; }

/* Dos tarjetas a la par, al cierre. */
.tn-tmp-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; margin: 2.6rem 0 0; }
.tn-tmp-dos .tn-dato { min-height: 0; }
.tn-tmp-dos .tn-dato ul { margin: 0.2rem 0 0; padding: 0; list-style: none; }
.tn-tmp-dos .tn-dato li {
  position: relative; padding-left: 1.05rem; margin-bottom: 0.3rem;
  font-size: 0.85rem; line-height: 1.5; color: var(--text-muted);
}
.tn-tmp-dos .tn-dato li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; background: var(--neon-crimson); transform: rotate(45deg);
}
.tn-tmp-dos .tn-boton-chico { align-self: flex-start; margin-top: 0.7rem; }

/* Cierre centrado. */
.tn-tmp-cierre { text-align: center; margin: 3rem 0 0; }
.tn-tmp-cierre p { margin: 0 auto 1.1rem; max-width: 54ch; font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); }
/* De dónde vino el mensaje: de un correo se contesta por correo; del
   formulario, la persona espera respuesta en su bandeja igual, pero saber cuál
   es evita responder al vacío. */
.tn-origen {
  display: inline-block; font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.45rem;
  margin-right: 0.4rem; border: 1px solid currentColor;
}
.tn-origen--correo { color: #60A5FA; }
.tn-origen--formulario { color: var(--text-muted); }

/* =========================== Escaparate ================================= */
/* Vive dentro del hero, en el hueco donde antes había un abanico de tres
   cartas. Mismo espacio, doce diseños. La ficha va encima de la foto para no
   robarle ancho al texto de la izquierda. */
.tn-escaparate { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; height: 100%; }

/* Se estira a lo que sobre del hueco del hero en vez de imponer su alto por
   proporción: con `aspect-ratio` se desbordaba y se montaba sobre la cinta. */
.tn-esc-marco {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: var(--bg-charcoal); border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Las láminas van apiladas y solo se ve la activa. Cada pase entra con una
   transición distinta (funde, desliza, acerca, cortina) para que el ojo no se
   acostumbre, y mientras está a la vista la foto deriva despacio: quieta se
   nota que es una foto; moviéndose apenas, parece que la playera respira. */
.tn-esc-lamina {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.tn-esc-lamina.activa { opacity: 1; visibility: visible; z-index: 1; }
.tn-esc-lamina img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  display: block; will-change: transform;
}
/* La deriva: --deriva vale 1 o -1 y alterna el lado en cada pase. */
.tn-esc-lamina.activa img { animation: tn-esc-deriva 9s ease-out forwards; }
@keyframes tn-esc-deriva {
  from { transform: scale(1.09) translate3d(calc(var(--deriva, 1) * -1.2%), 0, 0); }
  to   { transform: scale(1.01) translate3d(calc(var(--deriva, 1) * 1.2%), 0, 0); }
}

/* --- Las cuatro formas de entrar --- */
.tn-esc-lamina.entra-funde { animation: tn-entra-funde 0.75s ease both; }
@keyframes tn-entra-funde { from { opacity: 0; } to { opacity: 1; } }

.tn-esc-lamina.entra-desliza { animation: tn-entra-desliza 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tn-esc-lamina.entra-desliza.al-reves { animation-name: tn-entra-desliza-atras; }
@keyframes tn-entra-desliza { from { opacity: 0.4; transform: translate3d(9%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes tn-entra-desliza-atras { from { opacity: 0.4; transform: translate3d(-9%, 0, 0); } to { opacity: 1; transform: none; } }

.tn-esc-lamina.entra-acerca { animation: tn-entra-acerca 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes tn-entra-acerca { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1); } }

/* La cortina descubre la foto de un lado al otro, como un telón. */
.tn-esc-lamina.entra-cortina { animation: tn-entra-cortina 0.85s cubic-bezier(0.65, 0, 0.35, 1) both; }
.tn-esc-lamina.entra-cortina.al-reves { animation-name: tn-entra-cortina-atras; }
@keyframes tn-entra-cortina {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes tn-entra-cortina-atras {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

.tn-esc-num {
  position: absolute; left: 1.1rem; top: 0.7rem; z-index: 3;
  font-family: var(--font-headline); font-weight: 900; font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* La ficha encima de la foto, con un velo para que el texto se lea sobre
   cualquier imagen. */
.tn-esc-ficha {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; gap: 0.2rem; padding: 3rem 1.2rem 1.1rem;
  text-decoration: none;
  /* Sobre una foto clara (llamas, ladrillo rosa) el texto se perdía: el velo
     sube más y arranca más opaco. */
  background: linear-gradient(to top,
    rgba(5, 4, 4, 0.97) 0%, rgba(5, 4, 4, 0.88) 45%, rgba(5, 4, 4, 0) 100%);
}
.tn-esc-kicker {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--neon-crimson);
}
.tn-esc-nombre {
  font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1;
  text-transform: uppercase; color: var(--text-primary);
}
.tn-esc-precio { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.tn-esc-precio b { font-family: var(--font-display); font-size: 1.3rem; color: var(--neon-crimson); margin-left: 0.3rem; }
.tn-esc-ver {
  margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary);
}
.tn-esc-ficha:hover .tn-esc-ver { color: var(--neon-crimson); }

/* Las flechas van encima de la foto y casi no se ven hasta que acercas el
   ratón: el escaparate pasa solo, son para quien quiera adelantar. */
.tn-esc-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; cursor: pointer;
  background: rgba(5, 4, 4, 0.55); color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.95rem;
  opacity: 0; transition: opacity 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.tn-esc-flecha--izq { left: 0.7rem; }
.tn-esc-flecha--der { right: 0.7rem; }
.tn-esc-marco:hover .tn-esc-flecha,
.tn-esc-flecha:focus-visible { opacity: 1; }
.tn-esc-flecha:hover { background: var(--red-fill); border-color: var(--red-fill); }
/* En pantallas de tocar no hay "acercar el ratón": se ven siempre, tenues. */
@media (hover: none) {
  .tn-esc-flecha { opacity: 0.75; }
}

/* ========================= Barra de filtros ============================== */
/* Se queda pegada arriba: filtrar y tener que volver a subir para cambiar de
   filtro es lo que hace que la gente se rinda. */
.tn-barra {
  position: sticky; top: 4.2rem; z-index: 20;
  background: var(--bg-inner);
  border-top: 2px solid var(--neon-crimson);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 1.2rem; margin-bottom: 1.6rem;
  backdrop-filter: blur(8px);
}
.tn-barra-filtros { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.tn-grupo-filtro { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.tn-grupo-etiqueta {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.tn-grupo-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tn-chip {
  display: inline-flex; align-items: baseline; gap: 0.35rem; cursor: pointer;
  background: var(--bg-charcoal); color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.14); padding: 0.45rem 0.8rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.tn-chip i { font-style: normal; font-size: 0.58rem; opacity: 0.65; }
.tn-chip:hover { border-color: rgba(255, 255, 255, 0.35); color: var(--text-primary); }
.tn-chip.activo {
  background: var(--red-fill); border-color: var(--red-fill); color: #fff;
}
.tn-chip.activo i { opacity: 0.85; }

.tn-barra-pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px dotted rgba(var(--neon-crimson-rgb), 0.3);
}
.tn-barra-cuenta {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted);
}
.tn-barra-orden { display: flex; align-items: center; gap: 0.5rem; }
.tn-barra-orden .tn-input { padding: 0.4rem 0.6rem; font-size: 0.72rem; width: auto; }

.tn-sin-resultados { text-align: center; padding: 3.5rem 1rem; display: grid; gap: 0.6rem; justify-items: center; }
.tn-sin-resultados b { font-family: var(--font-headline); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: var(--text-primary); }
.tn-sin-resultados p { margin: 0; color: var(--text-muted); }

@media (max-width: 1000px) {
  .tn-esc-marco { aspect-ratio: 4 / 5; }
  /* En móvil la barra pegada se comería media pantalla; ahí sí se queda quieta. */
  .tn-barra { position: static; padding: 0.9rem; }
  .tn-barra-filtros { gap: 1rem; }
  /* Cada grupo de chips se desliza a lo ancho en vez de partirse en tres filas. */
  .tn-grupo-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 0.2rem; margin: 0 -0.9rem; padding-left: 0.9rem; padding-right: 0.9rem;
  }
  .tn-grupo-chips::-webkit-scrollbar { display: none; }
  .tn-barra-orden .tn-input { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-esc-lamina { transition: none; }
  .tn-esc-lamina.activa img { animation: none; }
  .tn-esc-lamina.entra-funde, .tn-esc-lamina.entra-desliza,
  .tn-esc-lamina.entra-acerca, .tn-esc-lamina.entra-cortina { animation: none; }
}

/* El atributo `hidden` no vence a un `display` explícito: hay que decirlo. */
.tn-liga-guia[hidden], .tn-chip[hidden], .tn-sin-resultados[hidden] { display: none !important; }

/* Las preguntas eran una columna de 820 px contra pantallas de 1920: mil cien
   píxeles de negro al lado. En ancho grande van en dos columnas, que además
   deja la respuesta más cerca de la pregunta. */
@media (min-width: 1280px) {
  .tn-preguntas { max-width: 1280px; }
  .tn-preguntas-lista { columns: 2; column-gap: 3rem; }
  .tn-pregunta { break-inside: avoid; }
}

/* ===================== Tarjeta clara, como la referencia ================== */
/* La playera es negra y la página es negra: sobre tarjeta oscura el producto
   se disolvía en el fondo. Con la tarjeta clara el negro del algodón se
   recorta y se ve la prenda, que es lo que se está vendiendo. Es lo que hace
   RAVEN y por eso su rejilla se lee de un vistazo. */
.tn-tarjeta {
  background-color: #F2F0EF;
  border: 1px solid transparent;
}
.tn-tarjeta:hover, .tn-tarjeta:focus-within { border-color: var(--neon-crimson); }
.tn-tarjeta-cuerpo { background: #F2F0EF; }
.tn-tarjeta-nombre { color: #0B0708; }
.tn-tarjeta-resumen { color: #4A4244; }
.tn-tarjeta-pie { border-top-color: rgba(11, 7, 8, 0.18); }
.tn-tarjeta-precio { color: #B3120F; }
.tn-tarjeta-precio small { color: #6B6164; }
.tn-tarjeta-nota { color: #6B6164; }
/* El número calado se mezclaba contra negro; sobre foto clara va sólido. */
.tn-tarjeta-num { mix-blend-mode: normal; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }

/* ======================= Tira de información ============================== */
/* La información NO va entre los productos: va en su propia fila debajo del
   catálogo, como el "WHY CHOOSE" de la referencia. Mezclada obligaba a cambiar
   de modo de lectura cada tres tarjetas y dejaba huecos. */
.tn-tira { margin-top: 3.5rem; }
.tn-tira-titulo {
  font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1;
  text-transform: uppercase; color: var(--text-primary);
  text-align: center; margin: 0 0 0.5rem;
}
/* Subrayado corto y centrado, como los títulos de sección de la referencia. */
.tn-tira-titulo::after {
  content: ''; display: block; width: 54px; height: 2px;
  margin: 0.7rem auto 0; background: var(--neon-crimson);
}
/* Cuatro en fila, como el "WHY CHOOSE" de la referencia. Con `auto-fit`
   quedaba una columna de más y los bloques desalineados. */
.tn-tira-datos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem; margin-top: 1.8rem;
}
@media (max-width: 1000px) { .tn-tira-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .tn-tira-datos { grid-template-columns: 1fr; } }
/* Dentro de la tira los bloques son más sobrios: la fila ya da el contexto. */
.tn-tira .tn-dato {
  min-height: 0; text-align: center;
  padding: 1.8rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left-width: 1px;
  background: var(--bg-charcoal);
  justify-items: center;
}
.tn-tira .tn-dato-sello {
  position: static; margin-bottom: 0.9rem;
  width: 54px; height: 54px; border-color: rgba(var(--neon-crimson-rgb), 0.5);
}
.tn-tira .tn-dato-sello svg { width: 28px; height: 28px; }
.tn-tira .tn-dato-cifra { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.tn-tira .tn-dato p { max-width: 34ch; }
.tn-tira .tn-dato b::before { margin-left: auto; margin-right: auto; width: 34px;
  background: rgba(var(--neon-crimson-rgb), 0.55); }

/* ======================================================================
   PORTADA DE LA TIENDA: FAMILIAS Y SELECCIÓN
   Con 49 diseños la portada dejó de ser una rejilla y pasó a ser un mapa.
   ====================================================================== */

.tn-seccion-cabeza { text-align: center; margin: 0 0 1.6rem; }
.tn-seccion-titulo {
  font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--text-primary); margin: 0 0 0.45rem;
}
.tn-seccion-titulo::after {
  content: ''; display: block; width: 46px; height: 3px;
  background: var(--neon-crimson); margin: 0.6rem auto 0;
}
.tn-seccion-bajada {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin: 0;
}
.tn-seccion-pie { text-align: center; margin: 2rem 0 0; }

.tn-familias { margin: 2.5rem 0 3.5rem; }
.tn-familias-rejilla {
  display: grid;
  /* Doce columnas para poder repartir 3 arriba y 4 abajo (Sam, 21-sep). Con
     `repeat(3, 1fr)` y siete familias, la séptima se quedaba sola en su fila
     con dos huecos negros al lado. Las tres de arriba ocupan 4 columnas cada
     una y las de abajo 3: las más importantes salen más grandes. */
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;                      /* el corte entre paneles, como en el cartel */
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
/* Fila de abajo: cuatro por fila. */
.tn-familia { grid-column: span 3; }
/* Fila de arriba: las tres primeras, más anchas. */
.tn-familia:nth-child(-n+3) { grid-column: span 4; }

.tn-familia {
  position: relative; display: block; background: #000;
  text-decoration: none; overflow: hidden;
}
.tn-familia-foto {
  /* Las fotos de familia se recortan en 4:5 (assets/tienda/familias/*.webp),
     pero aquí se enseñan en 4:3: en 4:5 un panel medía más de 500 px de alto
     y la familia se veía MÁS grande que la playera que vende (Sam, 21-sep).
     El recorte extra lo absorbe `object-fit: cover`, que come cielo y suelo,
     no el dibujo del pecho. */
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
}
.tn-familia-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* El cartel va en blanco y negro porque su figura es blanca sobre negro.
     Aquí la figura es una playera NEGRA sobre fondo negro: quitarle el color
     la borra, y probándolo se veía un panel vacío. Se queda el color, subido
     de contraste y de luz. Lo que trae el aire del cartel no es la ausencia
     de color: es el negro de verdad, el corte de luz, el rojo una sola vez y
     la mayúscula muy separada. Todo eso sigue. */
  filter: contrast(1.32) brightness(1.15) saturate(0.9);
  transform: scale(1.02);
  transition: filter 0.5s var(--transition-cinematic),
              transform 0.6s var(--transition-cinematic);
}
/* La lámpara. El panel nace apagado y esta capa es la luz que sigue al
   puntero: un círculo suave centrado en (--lx, --ly) que aclara lo que toca.
   `screen` suma luz en vez de pintar blanco encima, así el diseño se ve, no
   se tapa. */
.tn-familia-luz {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 190px at var(--lx, 50%) var(--ly, 42%),
              rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10) 45%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.35s var(--transition-cinematic);
}
/* Solo hay lámpara si hay ratón. Sin ella los paneles se ven encendidos. */
.con-lampara .tn-familia-foto img { filter: contrast(1.3) brightness(0.62) saturate(0.78); }
.con-lampara .tn-familia.encendido .tn-familia-luz { opacity: 1; }
.con-lampara .tn-familia.encendido .tn-familia-foto img { filter: contrast(1.3) brightness(0.88) saturate(0.95); }
.tn-familia:hover .tn-familia-foto img,
.tn-familia:focus-visible .tn-familia-foto img { transform: scale(1.05); }
/* Con el teclado no hay puntero: el panel enfocado se enciende entero. */
.con-lampara .tn-familia:focus-visible .tn-familia-foto img { filter: contrast(1.3) brightness(1.08) saturate(1); }

/* El nombre va dentro de la pieza, como el título del cartel. */
.tn-familia-texto {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: block; text-align: center; padding: 3.5rem 0.8rem 1.4rem;
  background: linear-gradient(to top, #000 8%, rgba(0, 0, 0, 0.82) 45%, transparent);
  pointer-events: none;
}
.tn-familia-nombre {
  display: block; font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.22em;   /* el tracking del cartel */
  color: var(--text-primary); text-indent: 0.22em;     /* compensa el tracking final */
}
.tn-familia-cuantos {
  display: block; margin-top: 0.5rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
/* El rojo del cartel: dos bloques y nada más. Aquí, uno por fila (cada tercer
   panel), para que siga siendo un acento y no una decoración. */
/* El rojo del cartel: dos bloques y nada más. Uno por fila, y las filas ya no
   son de tres: la primera lleva 3 paneles y la segunda 4. */
.tn-familia:nth-child(1)::after,
.tn-familia:nth-child(4)::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 34px; height: 8px; background: var(--neon-crimson);
}
.tn-familia:focus-visible { outline: 2px solid var(--neon-crimson-bright); outline-offset: -2px; }

.tn-seleccion { margin: 3.5rem 0 0; }

/* ---------------------- Filas por familia (carruseles) --------------------
   Sam, 21-sep: "están más grandes las categorías que los productos, hay pocos
   productos, la quiero más dinámica". Cada familia es una fila que se desliza
   a mano; la tarjeta de producto manda y el nombre de la familia pasa a ser
   un encabezado. */
.tn-filas { margin: 3rem 0 0; }
.tn-fila { margin: 0 0 2.6rem; }
.tn-fila-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin: 0 0 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.5rem;
}
.tn-fila-quien { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.tn-fila-titulo {
  font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-primary); margin: 0;
}
.tn-fila-cuantos {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.tn-fila-mandos { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.tn-fila-todas {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid transparent; margin-right: 0.3rem;
}
.tn-fila-todas:hover, .tn-fila-todas:focus-visible {
  color: var(--text-primary); border-bottom-color: var(--neon-crimson);
}
.tn-fila-flecha {
  width: 34px; height: 34px; flex: none; cursor: pointer;
  background: transparent; color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 1.2rem; line-height: 1; padding: 0;
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.tn-fila-flecha:hover:not(:disabled) {
  border-color: var(--neon-crimson); background: rgba(var(--neon-crimson-rgb), 0.12);
}
/* Una flecha que no hace nada al pulsarla se siente rota: en los extremos se
   apaga en vez de quedarse encendida. */
.tn-fila-flecha:disabled { opacity: 0.28; cursor: default; }

.tn-fila-pista {
  display: flex; gap: 1.1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  scrollbar-width: none;            /* la barra la sustituyen las flechas */
  -ms-overflow-style: none;
}
.tn-fila-pista::-webkit-scrollbar { display: none; }
.tn-fila-pista:focus-visible { outline: 2px solid var(--neon-crimson-bright); outline-offset: 4px; }
/* La tarjeta dentro de la fila no la coloca la rejilla, así que necesita su
   propio ancho; `flex: none` evita que se aplaste cuando caben pocas. */
.tn-fila-pista > .tn-tarjeta {
  flex: 0 0 clamp(228px, 23vw, 300px);
  scroll-snap-align: start;
}

@media (max-width: 560px) {
  .tn-fila-pista > .tn-tarjeta { flex-basis: 74vw; }
  /* En el teléfono se arrastra con el dedo: los botones estorban. */
  .tn-fila-flecha { display: none; }
}

/* Cabeza de una página de familia. */
.tn-cat-cabeza { text-align: center; margin: 0 0 1.2rem; }
.tn-cat-kicker {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--neon-crimson); margin: 0 0 0.5rem;
}
.tn-cat-titulo {
  font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 0.95;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-primary); margin: 0 0 0.6rem;
}
.tn-cat-bajada { color: var(--text-muted); margin: 0 auto 1.2rem; max-width: 56ch; }
.tn-cat-otras {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tn-cat-otras a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.tn-cat-otras a:hover, .tn-cat-otras a:focus-visible { color: var(--text-primary); border-bottom-color: var(--neon-crimson); }

@media (max-width: 560px) {
  /* En el teléfono los paneles van de dos en dos: uno por fila deja la
     portada larguísima y hace falta recorrer seis pantallas para ver el mapa. */
  .tn-familias-rejilla { grid-template-columns: 1fr 1fr; }
  .tn-familia, .tn-familia:nth-child(-n+3) { grid-column: auto; }
  .tn-familia-texto { padding: 3rem 0.4rem 1.1rem; }
  .tn-familia-nombre {
    font-size: 0.82rem; letter-spacing: 0.1em; text-indent: 0.1em;
    line-height: 1.15; overflow-wrap: anywhere;
  }
}

@media (max-width: 900px) {
  /* De dos en dos: aquí no hay fila grande ni fila chica, así que se sueltan
     los `span` de la rejilla de doce columnas. */
  .tn-familias-rejilla { grid-template-columns: 1fr 1fr; }
  .tn-familia, .tn-familia:nth-child(-n+3) { grid-column: auto; }
}

/* El botón de "ver los 49" es un botón, no una franja: `.tn-boton` es flex y
   dentro de un párrafo centrado se estiraba de borde a borde. */
.tn-seccion-pie .tn-boton { display: inline-flex; width: auto; }

@media (prefers-reduced-motion: reduce) {
  .tn-familia-foto img, .tn-familia-luz { transition: none; }
}

/* ------------------------- Páginas legales -------------------------------
   El aviso de privacidad y los términos. Son documentos para leer, así que
   aquí sí manda la columna de texto angosta; lo que no puede pasar es que
   alguien tenga que atravesar todo el documento para saber en cuántos días
   devuelve. Por eso arriba van las tarjetas con lo que de verdad se consulta
   y un índice que lleva a cada apartado. */
.tn-legal { --ancho-lectura: 72ch; }
.tn-legal .tn-bajada { max-width: var(--ancho-lectura); }

.tn-legal-indice {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
  margin: 0 0 2.4rem; padding: 1.1rem 1.2rem;
  border-left: 2px solid var(--neon-crimson);
  background: var(--bg-charcoal);
}
.tn-legal-indice a {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); text-decoration: none;
  padding: 0.28rem 0.6rem; border: 1px solid rgba(var(--neon-crimson-rgb), 0.28);
  transition: color 0.18s, border-color 0.18s;
}
.tn-legal-indice a:hover, .tn-legal-indice a:focus-visible { color: var(--text-primary); border-color: var(--neon-crimson); }

.tn-legal-bloque { margin: 0 0 2.6rem; scroll-margin-top: 110px; }
.tn-legal-bloque h2 {
  font-family: var(--font-headline); font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.05;
  letter-spacing: -0.005em; text-transform: uppercase;
  color: var(--text-primary); margin: 0 0 0.9rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid rgba(var(--neon-crimson-rgb), 0.3);
}
.tn-legal-bloque p {
  max-width: var(--ancho-lectura); margin: 0 0 0.9rem;
  font-size: 0.95rem; line-height: 1.7; color: var(--text-muted);
}
.tn-legal-bloque strong { color: var(--text-primary); font-weight: 600; }
.tn-legal-bloque a { color: var(--neon-crimson); }
.tn-legal-bloque .tn-lista { max-width: var(--ancho-lectura); margin-bottom: 1rem; }
.tn-legal-bloque .tn-lista li { font-size: 0.92rem; line-height: 1.65; }

/* La tabla de qué datos se guardan. En el teléfono se desplaza sola en vez
   de comprimir las celdas hasta que no se lean. */
.tn-legal-tabla-marco { overflow-x: auto; margin-bottom: 1.1rem; }
.tn-legal-tabla-marco .tn-tabla { min-width: 520px; margin-bottom: 0; }
.tn-legal-tabla-marco td { font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); }
.tn-legal-tabla-marco td:first-child {
  width: 30%; color: var(--text-primary);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
}

/* ======================================================================
   HERO DE LA PORTADA — dos capas y el texto en el hueco
   El fondo trae la mitad izquierda vacía a propósito: ahí cae el texto, y
   por eso el titular no necesita caja ni sombra para leerse.
   ====================================================================== */
.tn-cartel {
  position: relative;
  /* Ancho completo sin trucos: fuera del contenedor ya ocupa toda la pantalla.
     Con `100vw` y márgenes negativos se salía de `.tn-main` y el `overflow-x:
     clip` de ese contenedor lo volvía a cortar, comiéndose las primeras letras
     del titular en pantallas de 1608 px para arriba. */
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: clamp(420px, 44vw, 660px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}
.tn-cartel-capas { position: absolute; inset: 0; z-index: 0; }
.tn-cartel-fondo,
.tn-cartel-modelos { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.tn-cartel-fondo { object-position: center; }
/* Los modelos van pegados a la derecha y no se estiran: se recortan por la
   izquierda, que es donde no hay nada. */
.tn-cartel-modelos {
  width: auto; left: auto; right: 0;
  object-fit: contain; object-position: right bottom;
  max-width: min(58%, 940px);
}
/* Un velo que se oscurece hacia la izquierda: sostiene el texto sin taparlo. */
.tn-cartel-capas::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 28%,
              rgba(0,0,0,0.25) 52%, transparent 68%);
}

.tn-cartel-texto {
  position: relative; z-index: 1;
  /* El texto respeta el ancho del contenido aunque la sección vaya a sangre. */
  width: min(1560px, 100% - 3rem);
  margin-inline: auto;
  padding: 3.5rem 0;
  max-width: min(1560px, calc(100% - 3rem));
}
.tn-cartel-texto > * { max-width: 20ch; }
.tn-cartel-texto .tn-cartel-kicker { max-width: none; white-space: nowrap; }
.tn-cartel-texto .tn-bajada { max-width: 30ch; }
.tn-cartel-texto .tn-hero-cta { max-width: none; }

.tn-cartel-kicker {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--neon-crimson); margin: 0 0 0.9rem;
}
.tn-cartel-liga {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.tn-cartel-liga:hover, .tn-cartel-liga:focus-visible {
  color: var(--text-primary); border-bottom-color: var(--neon-crimson);
}

/* ---- La entrada. Menos de dos segundos en total: una entrada que se hace
   esperar deja de ser bonita y empieza a estorbar. ---- */
@keyframes tn-cartel-fondo-entra {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tn-cartel-modelos-entra {
  from { opacity: 0; transform: translateX(46px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tn-cartel-sube {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.tn-cartel-fondo   { animation: tn-cartel-fondo-entra 1.3s var(--transition-cinematic) both; }
.tn-cartel-modelos { animation: tn-cartel-modelos-entra 1s var(--transition-cinematic) 0.22s both; }
.tn-cartel-texto > * { animation: tn-cartel-sube 0.7s var(--transition-cinematic) both; }
.tn-cartel-kicker            { animation-delay: 0.10s; }
.tn-cartel-texto .tn-titulo  { animation-delay: 0.24s; }
.tn-cartel-texto .tn-bajada  { animation-delay: 0.38s; }
.tn-cartel-texto .tn-hero-cta{ animation-delay: 0.50s; }

@media (max-width: 900px) {
  /* En el teléfono los modelos no caben al lado del texto: se quedan detrás,
     más apagados, y el velo se cierra para que el titular siga legible. */
  .tn-cartel { min-height: 520px; }
  .tn-cartel-modelos { max-width: 78%; opacity: 0.5; }
  .tn-cartel-capas::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.92) 100%);
  }
  .tn-cartel-texto > * { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-cartel-fondo, .tn-cartel-modelos, .tn-cartel-texto > * { animation: none; }
}

/* ======================================================================
   BARRA DE FAMILIAS — pegada bajo la cabecera, solo en la tienda
   Ocupa la franja que queda libre cuando la cabecera se pega. El alto va
   aquí y no en el contenido para que no haya salto mientras se llena.
   ====================================================================== */
.tn-cats {
  position: sticky;
  /* `--cab-alto` lo mide tienda.js: la cabecera no siempre mide lo mismo. */
  top: var(--cab-alto, 64px);
  z-index: 998;                      /* debajo de la cabecera (1000) */
  min-height: 44px;
  display: flex;
  align-items: stretch;
  background: rgba(8, 5, 6, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.tn-cats-pista {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: min(1560px, 100%);
  margin-inline: auto;
  padding-inline: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tn-cats-pista::-webkit-scrollbar { display: none; }

.tn-cat {
  display: inline-flex; align-items: center; gap: 0.45rem;
  flex: none;
  padding: 0 1.05rem;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.tn-cat i {
  font-style: normal; font-size: 0.6rem;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.34rem;
}
.tn-cat:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
.tn-cat:hover i { color: var(--text-primary); }
.tn-cat.activa {
  color: var(--text-primary);
  border-bottom-color: var(--neon-crimson);
}
.tn-cat.activa i { background: var(--neon-crimson); color: #fff; }
.tn-cat:focus-visible { outline: 2px solid var(--neon-crimson-bright); outline-offset: -2px; }

/* Un degradado al final avisa de que hay más pestañas a la derecha: sin él,
   "Favoritos" queda cortado y parece que se acabó la lista. */
.tn-cats::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 42px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(8, 5, 6, 0.96));
}
.tn-cats { position: sticky; }

@media (max-width: 700px) {
  .tn-cats { min-height: 40px; }
  .tn-cats-pista { padding-inline: 0.8rem; }
  .tn-cat { padding: 0 0.75rem; font-size: 0.62rem; letter-spacing: 0.1em; }
}

/* ======================================================================
   FILTROS — una franja del mismo alto que la barra de familias
   Antes eran diecinueve fichas en tres renglones: media pantalla gastada y,
   con la barra de familias encima, encimadas. Tres listas y el orden.
   ====================================================================== */
.tn-barra {
  position: sticky;
  /* Justo debajo de la barra de familias, que a su vez cuelga de la cabecera.
     Las dos alturas las mide tienda.js, porque ninguna es fija. */
  top: calc(var(--cab-alto, 64px) + var(--cats-alto, 44px));
  z-index: 997;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  min-height: 44px;
  padding: 0.4rem 0;
  margin-bottom: 1.6rem;
  background: rgba(8, 5, 6, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.tn-barra-filtros,
.tn-barra-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }

.tn-filtro { display: inline-flex; align-items: center; gap: 0.5rem; }
.tn-filtro-eti {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim);
}
.tn-filtro-sel {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.38rem 1.9rem 0.34rem 0.7rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer;
  /* La flecha, dibujada en el propio fondo: una imagen menos que pedir. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  max-width: 210px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.tn-filtro-sel:hover { border-color: rgba(var(--neon-crimson-rgb), 0.5); }
.tn-filtro-sel:focus-visible { outline: 2px solid var(--neon-crimson-bright); outline-offset: 1px; }
/* Con algo elegido, la lista se marca: se ve de un vistazo que hay filtro. */
.tn-filtro-sel:not([value=""]):not(:invalid) { border-color: rgba(255, 255, 255, 0.14); }
.tn-filtro-sel option { background: #0B0708; color: #fff; text-transform: none; }
.tn-filtro-sel option:disabled { color: #6B6164; }

.tn-filtro-limpiar {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--neon-crimson);
  border-bottom: 1px solid transparent; padding: 0 0 2px;
}
.tn-filtro-limpiar:hover { border-bottom-color: var(--neon-crimson); }
.tn-barra-cuenta {
  margin: 0;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}

@media (max-width: 700px) {
  /* En el teléfono las dos barras llegaron a comerse el 40% de la pantalla
     antes del primer producto. Todo en un solo renglón que se desliza: el
     contador y el orden dejan de ocupar una fila propia. */
  .tn-barra {
    gap: 0 0.55rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.3rem 0;
    min-height: 40px;
  }
  .tn-barra::-webkit-scrollbar { display: none; }
  .tn-barra-filtros,
  .tn-barra-pie { flex-wrap: nowrap; gap: 0.55rem; }
  .tn-filtro-eti { display: none; }   /* la lista ya dice qué es */
  .tn-filtro-sel { font-size: 0.62rem; padding: 0.32rem 1.6rem 0.28rem 0.55rem; max-width: 150px; }
  /* El contador estorba en el teléfono: la propia lista ya dice cuántos hay. */
  .tn-barra-cuenta { display: none; }
}

/* ======================================================================
   MENÚ FIJO ABAJO — solo en el teléfono, solo en la tienda
   Optimizado de verdad: cero peticiones (los iconos van escritos en la
   página), sin escuchar el scroll, y reservando su alto para que nada
   salte al aparecer.
   ====================================================================== */
.tn-nav-app { display: none; }

@media (max-width: 760px) {
  :root { --nav-app-alto: 56px; }

  .tn-nav-app {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1001;                    /* encima del reproductor */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--nav-app-alto) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(8, 5, 6, 0.97);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* "Buscar" es un <button> porque abre una capa, no una página: se le quita
     el aspecto de botón para que sea uno más de la fila. */
  .tn-nav-app a,
  .tn-nav-app button {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.22rem;
    text-decoration: none;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.55rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .tn-nav-app button {
    background: none; border: none; padding: 0; cursor: pointer;
    /* Sin `font: inherit`: esta regla va después de la compartida y le borraba
       el tamaño y la familia, dejando "BUSCAR" enorme entre los otros cuatro. */
    font-family: inherit;
  }
  .tn-nav-app svg { width: 21px; height: 21px; }
  .tn-nav-app a.activa { color: var(--text-primary); }
  .tn-nav-app button:active { color: var(--text-primary); }
  .tn-nav-app a.activa::before {
    content: ''; position: absolute; top: 0; left: 28%; right: 28%;
    height: 2px; background: var(--neon-crimson);
  }
  .tn-nav-cuenta {
    position: absolute; top: 6px; left: 56%;
    min-width: 15px; height: 15px; padding: 0 3px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--neon-crimson); color: #fff;
    font-size: 0.5rem; font-weight: 700; border-radius: 999px;
  }
  .tn-nav-cuenta[hidden] { display: none; }

  /* El reproductor de radio ya vive abajo: en vez de taparse, sube lo que mide
     el menú. Va con `:has()` para no tocar su CSS, que es de todo el sitio. */
  body:has(.tn-nav-app) .global-radio-bar {
    bottom: calc(var(--nav-app-alto) + env(safe-area-inset-bottom, 0px));
  }
  /* Y el contenido deja sitio para los dos, para que el pie no quede tapado. */
  body:has(.tn-nav-app) .tn-main { padding-bottom: calc(9rem + var(--nav-app-alto)); }

  /* La pestaña lateral del carrito sobra si el carrito ya está en el menú. */
  body:has(.tn-nav-app) .tn-pestana { display: none; }
}

/* ======================================================================
   TRANSICIONES ENTRE PÁGINAS — APAGADAS (21-sep-2026)

   Fundían la salida con la entrada al cambiar de página, sin JavaScript. Se
   apagaron porque CONGELAN LA PESTAÑA después de comprar.

   Qué pasa: si el pago en línea no abre a la primera (red lenta, un
   bloqueador, la función caída) el carrito manda al acuse con
   `location.href`. Desde ahí el navegador deja de producir fotogramas: la
   página responde por dentro pero no vuelve a pintarse hasta recargar.
   Quien compró se queda viendo una pantalla muerta.

   Medido con `requestAnimationFrame`, que es lo único que no miente aquí
   (una captura o un clic solo se quedan colgados y parecen otra cosa):

     con `navigation: auto`   →   0 fotogramas en el acuse, 0 en cuenta.html
     con esto apagado         →  52 fotogramas en el acuse, 78 en cuenta.html

   Y NO es cosa del navegador de pruebas: pasa igual con ventana visible.
   Tampoco son los `view-transition-name` de aquí abajo (se probó quitándolos
   y seguía congelada); es la transición de navegación en sí.

   Si alguien la quiere de vuelta: primero reproducir con
   `requestAnimationFrame` el camino compra → pago que no abre → acuse, y
   comprobar que siguen entrando fotogramas. Lo demás de este bloque queda
   inerte mientras esta línea diga `none`.
   ====================================================================== */
@view-transition { navigation: none; }

/* En su lugar: el contenido ENTRA al cargar. Es una animación de CSS normal,
   sin API de navegación de por medio, así que no puede dejar nada a medias ni
   congelar la pestaña. Da la misma sensación de "la página entró".
   El hero de la portada se queda fuera: ya tiene su propia entrada y dos
   animaciones sobre lo mismo se pelean. */
@keyframes tn-entra-pagina {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* `backwards`, NO `both`: con `both` Chrome deja un transform identidad en
   <main> al terminar, y un ancestro con transform vuelve a los `position:
   fixed` de adentro (la barra de compra de la ficha) relativos a él: la barra
   dejaba de estar pegada a la pantalla y aparecía al fondo, junto al pie. */
.tn-main { animation: tn-entra-pagina 0.42s var(--transition-cinematic) backwards; }
.tn-cartel { animation: none; }

::view-transition-old(root) {
  animation: tn-sale 0.22s var(--transition-cinematic) both;
}
::view-transition-new(root) {
  animation: tn-entra 0.34s var(--transition-cinematic) both;
}
@keyframes tn-sale { to { opacity: 0; transform: translateY(-6px); } }
@keyframes tn-entra { from { opacity: 0; transform: translateY(10px); } }

/* La cabecera, la barra de familias y el menú de abajo NO se funden: son los
   muebles de la casa, y verlos parpadear en cada clic marea. Se quedan
   quietos mientras el resto cambia. */
.cinematic-header { view-transition-name: tn-cabecera; }
.tn-cats { view-transition-name: tn-cats; }
.tn-nav-app { view-transition-name: tn-nav; }
.global-radio-bar { view-transition-name: tn-radio; }
::view-transition-group(tn-cabecera),
::view-transition-group(tn-cats),
::view-transition-group(tn-nav),
::view-transition-group(tn-radio) { animation-duration: 0.01s; }

/* La foto del diseño viaja de la tarjeta a su ficha en vez de desaparecer y
   reaparecer. El nombre se lo pone tienda.js a la tarjeta que se va a abrir. */
.tn-tarjeta.tn-viaja .tn-tarjeta-foto img:first-child,
.tn-producto-foto #tn-foto { view-transition-name: tn-foto-diseno; }
::view-transition-group(tn-foto-diseno) { animation-duration: 0.42s; }

/* ======================================================================
   ANIMACIONES DE LOS ELEMENTOS
   ====================================================================== */

/* Las tarjetas de una fila entran escalonadas, no todas de golpe: el ojo
   sigue el orden y la fila se lee como una fila, no como un bloque. El tope
   de 7 evita que la última de una fila de doce tarde casi un segundo. */
.tn-fila-pista .tn-tarjeta { transition-delay: calc(min(var(--i, 0), 7) * 55ms); }

/* Los botones responden al PULSAR, no solo al pasar encima: en el teléfono no
   hay "pasar encima" y sin esto no hay ninguna respuesta al tocar. */
.tn-boton:active,
.tn-cat:active,
.tn-fila-flecha:active,
.tn-tela:active,
.tn-talla:active,
.tn-color:active { transform: scale(0.97); }
.tn-boton, .tn-fila-flecha, .tn-tela, .tn-talla, .tn-color {
  transition: transform 0.12s var(--transition-cinematic),
              border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* Las flechas de las filas: la que no lleva a ningún lado se apaga de verdad,
   en vez de quedarse encendida y no hacer nada al pulsarla. */
.tn-fila-flecha { transition: opacity 0.25s ease, transform 0.12s var(--transition-cinematic), border-color 0.2s ease; }
.tn-fila-flecha[disabled] { opacity: 0.28; cursor: default; }

/* El título de una sección se subraya solo al entrar en pantalla. */
.tn-fila-titulo { position: relative; }
.tn-fila-titulo::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px;
  width: 0; background: var(--neon-crimson);
  transition: width 0.6s var(--transition-cinematic) 0.15s;
}
.tn-fila.visible .tn-fila-titulo::after { width: 42px; }

@media (prefers-reduced-motion: reduce) {
  /* Quien pidió menos movimiento no ve nada de esto. */
  .tn-main { animation: none; }
  @view-transition { navigation: none; }
  .tn-fila-pista .tn-tarjeta { transition-delay: 0s; }
  .tn-fila-titulo::after { transition: none; width: 42px; }
  .tn-boton:active, .tn-cat:active, .tn-fila-flecha:active,
  .tn-tela:active, .tn-talla:active, .tn-color:active { transform: none; }
}

/* ======================================================================
   FICHA DE PRODUCTO — lo que trae la referencia de Sam
   ====================================================================== */

/* "Recién llegado", como el NEW ARRIVAL de la referencia. Sale solo en los
   seis primeros del catálogo, que son los últimos que entraron. */
.tn-nuevo {
  display: inline-block; margin: 0 0 0.5rem;
  padding: 0.22rem 0.6rem 0.18rem;
  background: var(--neon-crimson); color: #fff;
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* El rótulo y su enlace, en la misma línea: "Talla ......... Guía de medidas >" */
.tn-etiqueta--fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; width: 100%;
}
.tn-boton-guia {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--neon-crimson);
  border-bottom: 1px solid transparent;
}
.tn-boton-guia:hover, .tn-boton-guia:focus-visible { border-bottom-color: var(--neon-crimson); }
.tn-boton-guia svg { display: none; }   /* el icono sobra en una línea de texto */

/* El color, en círculos. Ocupa un tercio y se lee de un vistazo. */
.tn-color--punto {
  padding: 4px; border-radius: 999px; border: 2px solid transparent;
  background: none; line-height: 0;
}
.tn-color--punto .tn-color-bola {
  display: block; width: 26px; height: 26px; border-radius: 999px;
  background: var(--sw, #000);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.tn-color--punto.claro .tn-color-bola { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); }
.tn-color--punto:hover { border-color: rgba(255, 255, 255, 0.3); }
.tn-color--punto.activa { border-color: var(--neon-crimson); }
.tn-color--punto svg { display: none; }
/* El círculo no dice cómo se llama el color: al lado va la palabra. */
.tn-color-dicho {
  align-self: center; margin-left: 0.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-primary);
}
.tn-solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tn-campo-color .tn-colores { align-items: center; }

/* La cantidad, chica y al lado del botón, sin competir con él. */
.tn-fila-compra { display: flex; align-items: flex-end; gap: 0.8rem; }
.tn-campo-cantidad { flex: none; width: 92px; }
.tn-fila-compra .tn-boton { flex: 1; }

/* ---- La barra fija de compra ----
   Es el cambio que más pesa de la referencia: el botón deja de estar a mil
   píxeles, después de toda la descripción. */
.tn-comprar-fija {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1002;
  display: none;
  align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.2rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 5, 6, 0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(var(--neon-crimson-rgb), 0.45);
  transform: translateY(0);
  transition: transform 0.28s var(--transition-cinematic), opacity 0.28s ease;
}
.tn-comprar-fija.escondida { transform: translateY(110%); opacity: 0; pointer-events: none; }
.tn-comprar-precio { display: flex; flex-direction: column; line-height: 1.1; }
.tn-comprar-precio i {
  font-style: normal; font-family: var(--font-display); font-size: 1.5rem;
  color: var(--neon-crimson);
}
.tn-comprar-precio small {
  font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.tn-comprar-fija .tn-boton { padding: 0.75rem 1.4rem 0.65rem; }

@media (max-width: 760px) {
  /* Solo en el teléfono: en escritorio el botón ya se ve sin bajar. */
  .tn-comprar-fija { display: flex; }
  /* Mientras se ve, sustituye al menú de la app en vez de apilarse encima:
     apiladas, la de abajo quedaba sin poder pulsarse (medido) y entre las tres
     franjas fijas se comían un tercio de la pantalla. */
  body.tn-comprando .tn-nav-app { transform: translateY(100%); pointer-events: none; }
  /* El reproductor se apoya en la barra de compra, como se apoyaba en el menú. */
  body.tn-comprando .global-radio-bar {
    bottom: calc(var(--compra-alto, 74px) + env(safe-area-inset-bottom, 0px));
  }
  /* Las dos franjas juntas miden más que el colchón del pie: sin esto, la
     línea de Términos quedaba debajo de la radio (15-oct-2026). */
  body.tn-comprando .main-footer { padding-bottom: calc(4.5rem + var(--compra-alto, 74px) + 2rem); }
  .tn-nav-app { transition: transform 0.28s var(--transition-cinematic); }
  /* Sitio para que el pie no quede tapado por las franjas de abajo. */
  .tn-producto-datos { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-comprar-fija { transition: none; }
}

/* ------------------------------------------ Organiza eventos (cuenta) ---
   El formulario del organizador (org-datos.js) usa las clases del panel
   (crm-campo, ev-campos…): aquí se visten con los colores del sitio. */
.tn-organiza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; align-items: start; }
.tn-organiza-titulo { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-primary); margin: 0 0 1rem; line-height: 1.05; }
.tn-organiza-lista { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.7rem; }
.tn-organiza-lista li { position: relative; padding-left: 1.4rem; color: var(--text-secondary, #cfc6c6); line-height: 1.5; }
.tn-organiza-lista li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--neon-crimson); transform: rotate(45deg); }
.tn-organiza-listo { grid-column: 1 / -1; }
.tn-organiza-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.2rem; }
.tn-organiza .crm-form { display: flex; flex-direction: column; gap: 0.9rem; }
.tn-organiza .ev-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.9rem; }
.tn-organiza .crm-campo { display: flex; flex-direction: column; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.tn-organiza .crm-campo input, .tn-organiza .crm-campo select {
  padding: 0.75rem 0.85rem; background: var(--bg-inner, #0c0707); border: 1px solid rgba(var(--neon-crimson-rgb), 0.3);
  color: var(--text-primary); font: 400 1rem var(--font-body); letter-spacing: normal; text-transform: none; border-radius: 0;
}
.tn-organiza .crm-campo input:focus, .tn-organiza .crm-campo select:focus { outline: none; border-color: var(--neon-crimson); box-shadow: 0 0 0 3px rgba(var(--neon-crimson-rgb), 0.22); }
.tn-organiza .org-nota { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.tn-organiza .org-acepto { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; color: var(--text-secondary, #cfc6c6); line-height: 1.5; }
.tn-organiza .org-acepto input { margin-top: 0.25rem; accent-color: var(--neon-crimson); }
.tn-organiza .org-acepto a { color: var(--neon-crimson); }
.tn-organiza .crm-form-error { margin: 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--neon-crimson); background: rgba(var(--neon-crimson-rgb), 0.1); color: var(--neon-crimson); font-size: 0.88rem; }
.tn-organiza .crm-form-error[hidden] { display: none; }
@media (max-width: 860px) { .tn-organiza { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; } }

/* Mis boletos en la cuenta (0034): una tarjeta por compra, fecha en bloque. */
.tn-bo-cuenta { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px dotted rgba(var(--neon-crimson-rgb), 0.35); }
.tn-bo-cuenta--paso { opacity: 0.65; }
.tn-bo-cuenta-fecha { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.6rem 0.3rem; background: var(--neon-crimson); color: #fff; text-align: center; align-self: flex-start; }
.tn-bo-cuenta-fecha b { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; }
.tn-bo-cuenta-fecha span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; }
.tn-bo-cuenta-cuerpo { flex: 1 1 auto; min-width: 0; }
.tn-bo-cuenta-donde { margin: 0.2rem 0 0.35rem; font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary, var(--text-muted)); text-transform: capitalize; }
.tn-bo-cuenta-cuantos { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.tn-bo-cuenta-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.tn-bo-cuenta-acciones b { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-primary); }
.tn-bo-cuenta-nota { font-size: 0.8rem; color: var(--text-muted); }
.tn-bo-cuenta-cupon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; margin-top: 0.75rem; padding: 0.6rem 0.75rem; border: 1px dashed rgba(var(--neon-crimson-rgb), 0.6); font-size: 0.8rem; color: var(--text-primary); }
.tn-bo-cuenta-cupon b { color: var(--neon-crimson); letter-spacing: 0.06em; }
.tn-bo-cuenta-cupon a { color: var(--neon-crimson); text-decoration: none; font-weight: 700; }
.tn-bo-cuenta-cupon--fuera { opacity: 0.6; border-style: dotted; }
@media (max-width: 480px) { .tn-bo-cuenta-fecha { flex-basis: 54px; } .tn-bo-cuenta-fecha b { font-size: 1.6rem; } }

/* Soporte sin cuenta (soporte.html, 0036): la misma charla de la cuenta, sola. */
.tn-soporte-pagina { padding-top: 1.5rem; }
.tn-soporte-solo { max-width: 760px; margin: 0 auto; }
.tn-soporte-solo .tn-cuenta-cabeza { align-items: flex-start; }
.tn-soporte-solo .tn-charla { margin-top: 1.2rem; }
.tn-soporte-previos { margin-top: 2rem; }
.tn-soporte-liga { display: inline-block; margin-top: 0.6rem; color: var(--neon-crimson); text-decoration: none; font-weight: 700; }