/* =====================================================================
   Tribfan · Trade · parche 43
   1) Barra de Trade (debajo de las plataformas): clara, en naranja suave (se distingue de la cabecera azul),
      sin icono, mejor repartida en móvil y plegable (abierta por defecto).
   2) Portada de Trade: cada sección con su propio fondo dinámico a todo el ancho.
   Solo estilos: no cambia ninguna función ni enlace.
   ===================================================================== */

/* ---------- 1 · BARRA DE TRADE ---------- */
.tr-bar.trx {
  background: linear-gradient(100deg, #FFF3E6 0%, #FFEBDD 38%, #FFF1E2 70%, #FFE9DC 100%) !important;
  background-size: 220% 100% !important;
  animation: trx-flow 22s ease-in-out infinite;
  border-bottom: 1px solid #F6D9BF !important;
  box-shadow: 0 12px 26px -22px rgba(170, 80, 20, .45);
  color: #4A2410;
}
.tr-bar.trx::before {
  opacity: 1; background-image:
    radial-gradient(420px 120px at 12% 0%, rgba(249, 115, 22, .14), transparent 70%),
    radial-gradient(380px 120px at 88% 100%, rgba(245, 158, 11, .16), transparent 70%),
    radial-gradient(260px 90px at 55% 50%, rgba(236, 72, 153, .06), transparent 70%);
  background-size: 115% 100%; background-position: 0% 0; animation: trx-glow 16s ease-in-out infinite alternate;
}
.tr-bar.trx::after { height: 2px; opacity: .75; background: linear-gradient(90deg, transparent, #F7C95E, #DB2777, #7C3AED, #3B82F6, #06B6D4, transparent); background-size: 200% 100%; }
@keyframes trx-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes trx-glow { to { background-position: 100% 0; } } /* sin transform: no debe salirse del ancho (scroll lateral) */

.tr-bar.trx .tr-in { gap: 14px; min-height: 66px; transition: min-height .25s; }

/* «Trade» sin icono, con el degradado de la marca */
.tr-bar.trx .tr-logo { color: transparent !important; background: linear-gradient(95deg, #2B2BB8, #6D28D9 55%, #B4237A) !important; -webkit-background-clip: text !important; background-clip: text !important;
  text-shadow: none; font-weight: 900; font-size: 1.35rem !important; letter-spacing: -.04em; padding-right: 2px; flex: none; }
.tr-bar.trx .tr-logo::before { content: none !important; display: none !important; }

/* buscador */
.tr-bar.trx .tr-search input[type=search] { background: #fff !important; border: 1.5px solid #F3D3B5 !important; color: #2A1606 !important; backdrop-filter: none; box-shadow: 0 6px 16px -12px rgba(76, 52, 190, .5); }
.tr-bar.trx .tr-search input[type=search]::placeholder { color: #A98468; }
.tr-bar.trx .tr-search input[type=search]:focus { border-color: #F59E0B !important; box-shadow: 0 0 0 4px rgba(245, 158, 11, .18) !important; }
.tr-bar.trx .tr-search .btn { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #fff; box-shadow: 0 8px 18px -10px rgba(79, 70, 229, .9); }

/* enlaces */
.tr-bar.trx .tr-links a { color: #5A2A12; font-weight: 750; border: 1px solid transparent; }
.tr-bar.trx .tr-links a:hover { background: rgba(249, 115, 22, .10); color: #9A3412; }
.tr-bar.trx .tr-links a[aria-current] { background: #fff; color: #C2410C; border-color: #F6D2B2; box-shadow: 0 6px 14px -10px rgba(91, 33, 182, .6); }

/* favoritos y publicar */
.tr-bar.trx .tr-fav { color: #5A2A12; background: #fff; border: 1.5px solid #F3D6BC; backdrop-filter: none; box-shadow: 0 6px 14px -12px rgba(76, 52, 190, .6); }
.tr-bar.trx .tr-fav:hover { background: #FFF8F1; }
.tr-bar.trx .tr-pub { color: #fff; background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #C026D3 100%); box-shadow: 0 10px 22px -12px rgba(109, 40, 217, .95); }
.tr-bar.trx .tr-pub:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* botón plegar / desplegar */
.trx-tog { order: 99; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid #F3D3B5; background: rgba(255, 255, 255, .8);
  color: #9A3412; font: 700 .78rem/1 inherit; cursor: pointer; transition: background .2s, box-shadow .2s; }
.trx-tog:hover { background: #fff; box-shadow: 0 6px 14px -10px rgba(76, 52, 190, .7); }
.trx-tog svg { transition: transform .25s; }
.tr-bar.trx.is-min .trx-tog svg { transform: rotate(180deg); }
.tr-bar.trx.is-min .tr-in { min-height: 46px; padding-block: 4px; }
.tr-bar.trx.is-min .tr-search, .tr-bar.trx.is-min .tr-links, .tr-bar.trx.is-min .tr-actions { display: none !important; }
.tr-bar.trx.is-min .trx-tog { margin-left: auto; }
.tr-bar.trx .tr-actions { order: 50; }

/* tableta */
@media (max-width: 1080px) and (min-width: 861px) { .tr-bar.trx .tr-links a { padding: 8px 10px; } .trx-tog-t { display: none; } .trx-tog { padding: 0 10px; } }

/* móvil: fila 1 marca + favoritos + publicar + plegar · fila 2 buscador · fila 3 enlaces repartidos */
@media (max-width: 860px) {
  .tr-bar.trx .tr-in { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "logo . act tog" "search search search search" "links links links links"; gap: 10px 8px; padding-block: 10px 12px; }
  .tr-bar.trx .tr-in.tr-nosearch { grid-template-areas: "logo . act tog" "links links links links"; }
  .tr-bar.trx .trx-tog { grid-area: tog; height: 40px; width: 40px; padding: 0; justify-content: center; }
  .tr-bar.trx .trx-tog-t { display: none; }
  .tr-bar.trx .tr-links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; overflow: visible; }
  .tr-bar.trx .tr-links a { justify-content: center; background: rgba(255, 255, 255, .75); border: 1px solid #F3D6BC; color: #5A2A12; padding: 9px 8px; font-size: .84rem; }
  .tr-bar.trx .tr-links a[aria-current] { background: #fff; border-color: #F0B98C; }
  .tr-bar.trx.is-min .tr-in { display: flex; min-height: 50px; padding-block: 6px; }
  .tr-bar.trx.is-min .trx-tog { width: auto; padding: 0 12px; height: 36px; }
  .tr-bar.trx.is-min .trx-tog-t { display: inline; }
}
@media (max-width: 380px) { .tr-bar.trx .tr-logo { font-size: 1.15rem !important; } .tr-bar.trx .tr-links a { font-size: .78rem; padding: 8px 4px; } }

/* ---------- 2 · PORTADA: FONDOS DE SECCIÓN ---------- */
main.inner:has(.thb) { padding-top: 0; padding-bottom: 0; }
html:has(.thb), body:has(.thb) { overflow-x: clip; }
.thb { position: relative; isolation: isolate; overflow: hidden; margin-inline: calc(50% - 50vw); padding: clamp(22px, 3.6vw, 46px) calc(50vw - 50%); }
.thb > section, .thb > ul, .thb > div:not(.thb-o) { margin-top: 0 !important; margin-bottom: 0 !important; position: relative; z-index: 1; }
/* luces que se mueven despacio */
.thb > .thb-o { position: absolute; inset: -20%; z-index: -1; pointer-events: none; animation: thb-move 24s ease-in-out infinite alternate;
  background: radial-gradient(34% 46% at 18% 30%, var(--o1, rgba(124, 58, 237, .16)), transparent 70%), radial-gradient(30% 42% at 82% 70%, var(--o2, rgba(59, 130, 246, .14)), transparent 70%), radial-gradient(22% 30% at 55% 15%, var(--o3, rgba(219, 39, 119, .08)), transparent 70%); }
/* trama suave */
.thb::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--tr, .55);
  background-image: radial-gradient(circle, var(--dot, rgba(91, 33, 182, .14)) 1px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
@keyframes thb-move { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 100% { transform: translate3d(3%, 2%, 0) scale(1.08); } }

/* cada sección con su ambiente */
.thb-1 { background: linear-gradient(180deg, #F3F0FF 0%, #ECEBFF 100%); --o1: rgba(124, 58, 237, .22); --o2: rgba(59, 130, 246, .18); --o3: rgba(219, 39, 119, .12); }
.thb-2 { background: linear-gradient(180deg, #ECEBFF 0%, #FFF7E8 100%); --o1: rgba(245, 158, 11, .16); --o2: rgba(124, 58, 237, .12); --o3: rgba(244, 63, 94, .08); --dot: rgba(180, 120, 20, .14); }
.thb-3 { background: linear-gradient(180deg, #FFF7E8 0%, #EEF4FF 100%); padding-block: clamp(14px, 2vw, 24px); --o1: rgba(59, 130, 246, .14); --o2: rgba(124, 58, 237, .10); --tr: .35; }
.thb-4 { background: linear-gradient(180deg, #EEF4FF 0%, #E7F8FC 100%); --o1: rgba(6, 182, 212, .18); --o2: rgba(79, 70, 229, .12); --dot: rgba(8, 112, 140, .14); }
.thb-4::after { background-image: linear-gradient(rgba(8, 112, 140, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 112, 140, .08) 1px, transparent 1px); background-size: 40px 40px; animation: thb-grid 30s linear infinite; }
.thb-5 { background: linear-gradient(180deg, #E7F8FC 0%, #F6F0FF 100%); --o1: rgba(168, 85, 247, .18); --o2: rgba(236, 72, 153, .12); --o3: rgba(59, 130, 246, .10); }
.thb-6 { background: linear-gradient(180deg, #F6F0FF 0%, #F0E6FF 50%, #FCEBF4 100%); --o1: rgba(236, 72, 153, .22); --o2: rgba(124, 58, 237, .24); --o3: rgba(245, 158, 11, .14); }
.thb-7 { background: linear-gradient(180deg, #FCEBF4 0%, #E9F6F4 35%, #EAF2FF 100%); --o1: rgba(20, 184, 166, .18); --o2: rgba(59, 130, 246, .14); --dot: rgba(13, 94, 89, .12); }
.thb-8 { background: linear-gradient(180deg, #EAF2FF 0%, #F7EEFF 60%, #FFEFF6 100%); --o1: rgba(124, 58, 237, .20); --o2: rgba(219, 39, 119, .16); --o3: rgba(245, 158, 11, .12); padding-bottom: clamp(36px, 5vw, 64px); }
@keyframes thb-grid { to { background-position: 40px 40px, 40px 40px; } }

/* separación entre bandas: una línea de luz muy fina */
.thb + .thb::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 0; background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .25), rgba(59, 130, 246, .25), transparent); }

@media (max-width: 760px) { .thb { padding-block: 16px; } .thb-8 { padding-bottom: 28px; } .thb > .thb-o { inset: -40%; } }
@media (prefers-reduced-motion: reduce) { .tr-bar.trx, .tr-bar.trx::before, .thb > .thb-o, .thb-4::after { animation: none !important; } }

/* Buscador de anuncios (/anuncios): nada puede ensanchar la página (sin barra de scroll horizontal). */
html:has(#ttApp), body:has(#ttApp) { overflow-x: clip; }
#ttApp { max-width: 100%; min-width: 0; }