/* ============================================================
   TELEMAX TICKETS — DESIGN TOKENS (propios, sin frameworks)
   ============================================================ */
:root {
  /* Marca = AMARILLO corporativo Telemax #F5C518 */
  --brand-50:  #FEF9E6;
  --brand-100: #FDF0BF;
  --brand-200: #FBE485;
  --brand-300: #F9D74B;
  --brand-400: #F7CC28;
  --brand-500: #F5C518;   /* amarillo Telemax */
  --brand-600: #E0AF00;
  --brand-700: #B88C00;
  /* Texto que va SOBRE el amarillo (negro, para legibilidad) */
  --on-brand: #1A1A1A;

  /* Acento = negro corporativo */
  --accent-500: #1A1A1A;
  --accent-600: #000000;
  --accent-50:  #F3F4F6;

  --danger-500: #EF4444;
  --danger-600: #DC2626;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --success-500: #16A34A;

  /* Tinta / texto — base negro #1A1A1A */
  --ink-900: #141414;
  --ink-800: #1F1F1F;
  --ink-700: #333333;
  --ink-600: #555555;
  --ink-500: #767676;
  --ink-400: #9C9C9C;
  --ink-300: #C9C9C9;

  /* Superficies */
  --surface: #FFFFFF;
  --surface-2: #FAFAF7;
  --bg: #F7F7F4;
  --border: #ECECE6;
  --border-strong: #DEDED6;

  /* Tipografía */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', var(--font-sans);

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3.25rem;

  --lh-tight: 1.15;
  --lh-normal: 1.55;

  /* Espaciado (base 4px) */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;   --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;  --sp-20: 5rem;

  /* Radios — más finos = look corporativo/enterprise */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* Sombras sutiles y sobrias (menos difusas, más definidas) */
  --sh-sm: 0 1px 2px rgba(20, 20, 20, .05);
  --sh-md: 0 2px 8px rgba(20, 20, 20, .06);
  --sh-lg: 0 8px 24px rgba(20, 20, 20, .08);
  --sh-xl: 0 16px 44px rgba(20, 20, 20, .12);
  --sh-brand: 0 4px 14px rgba(245, 197, 24, .28);
  --sh-card-hover: 0 10px 30px rgba(20, 20, 20, .10);

  /* Firma visual: gradiente de marca amarillo + negro corporativo */
  --grad-brand: linear-gradient(120deg, #F5C518 0%, #F7CC28 50%, #E0AF00 100%);
  --grad-night: linear-gradient(135deg, #141414 0%, #1F1F1F 55%, #2B2B2B 100%);
  --grad-warm: linear-gradient(120deg, #F5C518 0%, #FFB800 60%, #E0AF00 100%);

  /* Chip de fecha (neutro sobrio, no amarillo pleno) */
  --mint-bg: #F2F2ED;
  --mint-fg: #333333;

  /* Transiciones */
  --t-fast: 130ms cubic-bezier(.4,0,.2,1);
  --t-base: 240ms cubic-bezier(.4,0,.2,1);
  --t-slow: 420ms cubic-bezier(.4,0,.2,1);

  --container: 1280px;
}
@import './tokens.css';

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }
/* Fondo de marca en TODAS las páginas públicas */
body.tx-public-bg { background: var(--brand-500); }
body.tx-public-bg main { background: var(--brand-500); min-height: calc(100vh - 108px); }
/* alias antiguos, por compatibilidad con vistas que aún los usan */
body.tx-page-home, body.tx-page-brand { background: var(--brand-500); }
body.tx-page-brand main { background: var(--brand-500); min-height: calc(100vh - 108px); }
body.tx-page-brand main > .tx-container > .tx-muted,
body.tx-page-brand main > .tx-shellwrap > .tx-muted { color: var(--ink-700); }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
body.tx-public-bg { padding-top: 108px; }
.tx-navstack { position: fixed; inset: 0 0 auto 0; width: 100%; z-index: 50; background: #F5C518 !important; box-shadow: 0 4px 14px rgba(20,20,20,.10); }
::selection { background: var(--brand-100); color: var(--ink-900); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
a { color: var(--ink-800); text-decoration: none; }
a:hover { color: var(--brand-700); }
img { max-width: 100%; display: block; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--ink-900); font-weight: 700; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
small { font-size: var(--fs-sm); }

.tx-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.tx-muted { color: var(--ink-500); }
.tx-center { text-align: center; }
.tx-mt-2 { margin-top: var(--sp-2); } .tx-mt-4 { margin-top: var(--sp-4); }
.tx-mt-6 { margin-top: var(--sp-6); } .tx-mt-8 { margin-top: var(--sp-8); }
.tx-mt-12 { margin-top: var(--sp-12); }
.tx-mb-4 { margin-bottom: var(--sp-4); } .tx-mb-6 { margin-bottom: var(--sp-6); } .tx-mb-8 { margin-bottom: var(--sp-8); }
.tx-flex { display: flex; } .tx-between { justify-content: space-between; }
.tx-items-center { align-items: center; } .tx-gap-2 { gap: var(--sp-2); } .tx-gap-4 { gap: var(--sp-4); }
.tx-grid { display: grid; gap: var(--sp-6); }
.tx-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tx-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   BOTONES
   ============================================================ */
.tx-btn {
  --btn-bg: var(--brand-500); --btn-fg: #fff; --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: 600 var(--fs-sm)/1 var(--font-sans); letter-spacing: 0;
  padding: .75rem 1.2rem; border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  cursor: pointer; transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  text-decoration: none; white-space: nowrap;
}
.tx-btn:hover { color: var(--btn-fg); }
.tx-btn:active { transform: translateY(.5px); }
.tx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-200); }

/* Primario: amarillo sólido con texto negro (marca), sin gradiente ni shine */
.tx-btn--primary { background: var(--brand-500); color: var(--on-brand); border-color: var(--brand-500); box-shadow: var(--sh-sm); }
.tx-btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); box-shadow: var(--sh-brand); color: var(--on-brand); }
/* Acento: negro corporativo */
.tx-btn--accent { --btn-bg: var(--accent-500); box-shadow: var(--sh-sm); }
.tx-btn--accent:hover { --btn-bg: var(--accent-600); }
.tx-btn--danger { --btn-bg: var(--danger-500); }
.tx-btn--danger:hover { --btn-bg: var(--danger-600); }
.tx-btn--outline { --btn-bg: transparent; --btn-fg: var(--ink-800); --btn-bd: var(--border-strong); box-shadow: none; }
.tx-btn--outline:hover { --btn-bg: var(--surface-2); --btn-fg: var(--ink-900); border-color: var(--brand-300); }
.tx-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-600); box-shadow: none; }
.tx-btn--ghost::after { display: none; }
.tx-btn--ghost:hover { --btn-bg: var(--brand-50); --btn-fg: var(--brand-700); }
.tx-btn--sm { padding: .5rem .85rem; font-size: var(--fs-xs); }
.tx-btn--lg { padding: 1rem 1.7rem; font-size: var(--fs-md); }
.tx-btn--block { width: 100%; }
.tx-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.3); }
.tx-btn[disabled]::after { display: none; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.tx-field { display: block; margin-bottom: var(--sp-4); }
.tx-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); margin-bottom: var(--sp-2); }
.tx-input, .tx-select, .tx-textarea {
  width: 100%; font: 400 var(--fs-md) var(--font-sans); color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: .7rem .85rem; transition: border var(--t-base), box-shadow var(--t-base);
}
.tx-textarea { min-height: 120px; resize: vertical; }
.tx-input:focus, .tx-select:focus, .tx-textarea:focus {
  outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 4px var(--brand-50);
}
.tx-input.is-invalid, .tx-select.is-invalid, .tx-textarea.is-invalid { border-color: var(--danger-500); }
.tx-help { font-size: var(--fs-xs); color: var(--ink-400); margin-top: var(--sp-1); }
.tx-error { font-size: var(--fs-xs); color: var(--danger-600); margin-top: var(--sp-1); }
.tx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* ============================================================
   CARDS
   ============================================================ */
.tx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; }
.tx-card__head { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.tx-card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }
.tx-card__body { padding: var(--sp-6); }
.tx-card__foot { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); background: var(--surface-2); }

.tx-event-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--t-base), box-shadow var(--t-base); }
.tx-event-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.tx-event-card__cover { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--brand-400), var(--accent-500)); display: flex; align-items: flex-end; padding: var(--sp-4); color: #fff; background-size: cover; background-position: center; }
.tx-event-card__body { padding: var(--sp-5); }
.tx-event-card__date { font-size: var(--fs-xs); font-weight: 700; color: var(--brand-600); text-transform: uppercase; letter-spacing: .04em; }
.tx-event-card__title { font-size: var(--fs-lg); margin: var(--sp-2) 0; }

/* ============================================================
   BADGES / ESTADOS
   ============================================================ */
.tx-badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; padding: .25rem .6rem; border-radius: var(--r-full); background: var(--ink-300); color: #fff; }
.tx-badge--success { background: rgba(0,194,168,.14); color: var(--accent-600); }
.tx-badge--warn { background: rgba(245,166,35,.16); color: var(--warning-600); }
.tx-badge--danger { background: rgba(229,72,77,.14); color: var(--danger-600); }
.tx-badge--muted { background: var(--bg); color: var(--ink-500); border: 1px solid var(--border); }

/* ============================================================
   TABLAS
   ============================================================ */
.tx-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
.tx-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.tx-table th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tx-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.tx-table tbody tr:hover { background: var(--surface-2); }
.tx-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   ALERTS
   ============================================================ */
.tx-alert { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); border: 1px solid var(--border); background: var(--surface); margin-bottom: var(--sp-4); }
.tx-alert--success { background: rgba(0,194,168,.08); border-color: rgba(0,194,168,.3); color: var(--accent-600); }
.tx-alert--danger { background: rgba(229,72,77,.08); border-color: rgba(229,72,77,.3); color: var(--danger-600); }
.tx-alert--info { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }

/* ============================================================
   STAT CARDS (dashboard)
   ============================================================ */
.tx-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm);
  display: flex; align-items: center; gap: var(--sp-4); }
.tx-stat__ico { flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; }
.tx-stat__ico--green { background: color-mix(in srgb,#2E7D5B 14%,transparent); }
.tx-stat__ico--brand { background: color-mix(in srgb,var(--brand-500) 22%,transparent); }
.tx-stat__ico--blue  { background: color-mix(in srgb,#3A6EA5 14%,transparent); }
.tx-stat__ico--amber { background: color-mix(in srgb,#B7791F 16%,transparent); }
.tx-stat__label { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 500; }
.tx-stat__value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--ink-900); line-height: 1.1; }
.tx-stat__hint { font-size: var(--fs-xs); color: var(--accent-600); margin-top: var(--sp-1); }

/* ============================================================
   STEPPER (checkout)
   ============================================================ */
.tx-stepper { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.tx-step { flex: 1; text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-400); padding-top: var(--sp-3); border-top: 3px solid var(--border); }
.tx-step.is-active { color: var(--brand-600); border-top-color: var(--brand-500); }
.tx-step.is-done { color: var(--accent-600); border-top-color: var(--accent-500); }

/* ============================================================
   LAYOUT: AUTH
   ============================================================ */
.tx-auth { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6);
  background: radial-gradient(1200px 600px at 50% -10%, var(--brand-50), var(--bg)); }
.tx-auth__card { width: 100%; max-width: 420px; }
.tx-auth__brand { text-align: center; margin-bottom: var(--sp-6); }

/* ============================================================
   LAYOUT: APP (sidebar + topbar)
   ============================================================ */
.tx-shell { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; }
.tx-sidebar { background: var(--grad-night); color: #fff; padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.tx-sidebar__brand { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: #fff; padding: 0 var(--sp-2) var(--sp-6); display: flex; align-items: center; gap: var(--sp-2); }
.tx-sidebar__brand .dot, .tx-sidebar__brand .tx-logo__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad-brand); box-shadow: var(--sh-brand); display: grid; place-items: center; color: var(--on-brand); }
.tx-nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem .9rem; border-radius: var(--r-md); color: var(--ink-300); font-size: var(--fs-sm); font-weight: 500; transition: background var(--t-base), color var(--t-base); }
.tx-nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.tx-nav-item.is-active { background: var(--grad-brand); color: var(--on-brand); box-shadow: var(--sh-brand); font-weight: 700; }
.tx-nav-sep { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); padding: var(--sp-4) var(--sp-3) var(--sp-2); }

/* Menú acordeón: secciones colapsables */
.tx-navgroup { margin-top: 2px; }
.tx-navgroup__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--ink-500, #8a877e); padding: var(--sp-3) var(--sp-3) var(--sp-2); font-family: inherit;
  transition: color .12s;
}
.tx-navgroup__head:hover { color: var(--ink-800, #2a2a28); }
.tx-navgroup__head .tx-nav-icon { flex-shrink: 0; }
.tx-navgroup__head .tx-nav-icon svg { width: 15px; height: 15px; transition: transform .2s ease; }
.tx-navgroup.is-expanded > .tx-navgroup__head { color: var(--ink-900, #141210); }
.tx-navgroup.is-expanded > .tx-navgroup__head .tx-nav-icon svg { transform: rotate(180deg); }
.tx-navgroup__body { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
/* En el sidebar oscuro, texto claro */
.tx-sidebar .tx-navgroup__head { color: rgba(255,255,255,.55); }
.tx-sidebar .tx-navgroup__head:hover,
.tx-sidebar .tx-navgroup.is-expanded > .tx-navgroup__head { color: rgba(255,255,255,.95); }

.tx-main { display: flex; flex-direction: column; min-width: 0; }
.tx-topbar { height: 68px; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-8); position: sticky; top: 0; z-index: 20; }
.tx-content { padding: var(--sp-8); flex: 1; }
.tx-page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-6); flex-wrap: wrap; gap: var(--sp-4); }
.tx-page-head h2 { letter-spacing: -.01em; }

/* ============================================================
   LAYOUT: PUBLIC
   ============================================================ */
.tx-pubnav { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.tx-pubnav__brand { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-900); }
.tx-pubnav__brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 12px var(--brand-400); }
.tx-hero { padding: var(--sp-20) 0 var(--sp-16); text-align: center; background: radial-gradient(1000px 480px at 50% -20%, var(--brand-50), transparent); }
.tx-hero h1 { font-size: var(--fs-4xl); max-width: 18ch; margin: 0 auto var(--sp-4); }
.tx-hero p { font-size: var(--fs-lg); color: var(--ink-500); max-width: 56ch; margin: 0 auto var(--sp-8); }

/* ===== HEADER fijo 88px (logo · Explorar▾ · buscador dominante · acciones) ===== */
.tx-pubheader { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(233,238,244,.8); }
.tx-pubheader__row { display: flex; align-items: center; gap: var(--sp-6); height: 88px; }
.tx-logo { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--ink-900); white-space: nowrap; letter-spacing: -.01em; }
.tx-logo__mark { width: 36px; height: 36px; border-radius: 11px; background: var(--grad-brand); display: grid; place-items: center; color: var(--on-brand); font-size: 18px; box-shadow: var(--sh-brand); transition: transform var(--t-base); }
.tx-logo:hover .tx-logo__mark { transform: rotate(-8deg) scale(1.05); }

/* Menú Explorar + megamenú */
.tx-explore { position: relative; }
.tx-explore__btn { display: inline-flex; align-items: center; gap: .4rem; font: 600 var(--fs-sm) var(--font-sans); color: var(--ink-700); background: transparent; border: 0; cursor: pointer; padding: .6rem .2rem; white-space: nowrap; }
.tx-explore__btn:hover { color: var(--brand-600); }
.tx-mega { position: absolute; top: calc(100% + 14px); left: 0; width: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--sp-6); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all var(--t-base); }
.tx-explore:hover .tx-mega, .tx-mega:hover { opacity: 1; visibility: visible; transform: translateY(0); }
.tx-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3) var(--sp-6); }
.tx-mega__item { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-700); padding: .5rem .25rem; border-radius: 8px; transition: all var(--t-fast); }
.tx-mega__item:hover { color: var(--brand-600); background: var(--brand-50); padding-left: .6rem; }
.tx-mega__item span { opacity: .4; }

/* Buscador dominante (600-800px, 48px alto) */
.tx-search { flex: 1; max-width: 720px; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); height: 48px; background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--r-md); padding: 0 .5rem 0 1rem; transition: border var(--t-base), box-shadow var(--t-base); }
.tx-search:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 4px var(--brand-50); }
.tx-search__icon { color: var(--ink-400); font-size: 16px; }
.tx-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 var(--fs-sm) var(--font-sans); outline: none; color: var(--ink-900); height: 100%; }
.tx-pubheader__actions { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; white-space: nowrap; }
.tx-link { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
.tx-link:hover { color: var(--brand-600); }
/* Botón premium "Iniciar sesión": fondo blanco, borde, sin color agresivo */
.tx-btn--premium { background: var(--surface); color: var(--ink-900); border: 1.5px solid var(--border-strong); box-shadow: var(--sh-sm); font-weight: 600; }
.tx-btn--premium:hover { background: var(--surface); border-color: var(--brand-400); color: var(--brand-700); transform: translateY(-1px); }

/* ===== Banner de personalización (~160px) ===== */
.tx-pbanner { min-height: 168px; border-radius: var(--r-xl); background: var(--grad-night); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-8) var(--sp-10); overflow: hidden; position: relative; box-shadow: var(--sh-lg); }
/* halos de color tipo luces de escenario */
.tx-pbanner::before { content: ''; position: absolute; width: 320px; height: 320px; right: -60px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(0,209,178,.45), transparent 65%); }
.tx-pbanner::after { content: ''; position: absolute; width: 280px; height: 280px; left: 30%; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(177,75,224,.4), transparent 65%); }
.tx-pbanner__text { position: relative; z-index: 2; }
.tx-pbanner__text h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: .35rem; letter-spacing: -.01em; }
.tx-pbanner__text p { color: rgba(255,255,255,.82); font-size: var(--fs-md); }
.tx-pbanner__art { position: relative; z-index: 2; display: flex; gap: .6rem; font-size: 42px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.tx-pbanner .tx-btn { position: relative; z-index: 2; white-space: nowrap; }

/* ===== Secciones con carrusel horizontal ===== */
.tx-section { margin-top: var(--sp-12); }
.tx-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.tx-section__head h2 { font-size: var(--fs-xl); }
.tx-section__head a { font-size: var(--fs-sm); font-weight: 600; }
.tx-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 270px; gap: var(--sp-5); overflow-x: auto; padding-bottom: var(--sp-3); scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.tx-carousel > * { scroll-snap-align: start; }
.tx-carousel::-webkit-scrollbar { display: none; }
/* En móvil las cards son más angostas para que se vea la siguiente asomando (invita a deslizar) */
@media (max-width: 640px) {
  .tx-carousel { grid-auto-columns: 72%; gap: var(--sp-4); }
}

/* ===== CARD tipo póster (estilo Joinnus, imagen amplia) ===== */
.tx-pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); display: flex; flex-direction: column; }
.tx-pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hover); border-color: var(--brand-200); }
.tx-pcard__poster { display: block; aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--grad-night); }
.tx-pcard__poster::before { /* imagen con zoom suave */
  content: ''; position: absolute; inset: 0;
  background-image: var(--cover, none); background-size: cover; background-position: center;
  transition: transform var(--t-slow);
}
.tx-pcard:hover .tx-pcard__poster::before { transform: scale(1.06); }
.tx-pcard__poster::after { /* overlay degradado para legibilidad y profundidad */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,.05) 0%, transparent 35%, rgba(11,18,32,.45) 100%);
}
.tx-pcard__cat { position: absolute; z-index: 2; top: 10px; left: 10px; background: rgba(255,255,255,.18); color: #fff; font-size: 11px; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); }
.tx-pcard__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.tx-pcard__meta { display: flex; align-items: center; gap: .5rem; }
/* Chip de fecha menta (como Joinnus) */
.tx-pcard__date { background: var(--mint-bg); color: var(--mint-fg); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .5rem; border-radius: var(--r-sm); white-space: nowrap; border-left: 3px solid var(--brand-500); }
.tx-pcard__loc { font-size: var(--fs-xs); color: var(--ink-500); display: flex; align-items: center; gap: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-pcard__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink-900); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; transition: color var(--t-base); }
.tx-pcard:hover .tx-pcard__title { color: var(--ink-900); }
.tx-pcard__foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); }
.tx-pcard__price { min-width: 0; }
.tx-pcard__price small { display: block; font-size: 11px; color: var(--ink-400); margin-bottom: 1px; }
.tx-pcard__price strong { display: block; font-size: var(--fs-lg); color: var(--ink-900); font-weight: 800; white-space: nowrap; }
.tx-pcard__actions { display: flex; gap: .4rem; flex-shrink: 0; }
.tx-iconbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; font-size: 15px; color: var(--ink-500); transition: all var(--t-fast); flex-shrink: 0; }
.tx-iconbtn:hover { border-color: var(--brand-400); color: var(--brand-600); background: var(--brand-50); transform: translateY(-2px) scale(1.05); box-shadow: var(--sh-brand); }
.tx-iconbtn:active { transform: scale(.95); }

/* ===== Layout 75% / 25% con sidebar ===== */
.tx-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; margin-top: var(--sp-8); }
.tx-sidecard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); margin-bottom: var(--sp-5); }
.tx-sidecard h4 { font-size: var(--fs-sm); font-family: var(--font-sans); margin-bottom: var(--sp-2); color: var(--ink-900); }
.tx-sidecard p { font-size: var(--fs-sm); color: var(--ink-600); margin-bottom: var(--sp-4); }
.tx-sidecard--promo { background: linear-gradient(150deg, var(--brand-50), var(--accent-50)); border-color: var(--brand-200); }

/* ===== Libro de reclamaciones (formulario legal) ===== */
.tx-legal { max-width: 880px; margin: 0 auto; }
.tx-legal__info { background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--r-lg); padding: var(--sp-6); margin-bottom: var(--sp-8); }
.tx-legal__info dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-4); }
.tx-legal__info dt { font-size: var(--fs-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.tx-legal__info dd { font-weight: 600; color: var(--ink-900); margin-bottom: var(--sp-2); }
.tx-formsection { margin-top: var(--sp-8); }
.tx-formsection__title { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink-900); margin-bottom: var(--sp-5); }
.tx-formsection__title::before { content: counter(sec); counter-increment: sec; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-500); color: var(--on-brand); display: grid; place-items: center; font-size: var(--fs-sm); }
.tx-legal { counter-reset: sec; }
.tx-note { font-size: var(--fs-sm); color: var(--ink-500); border-left: 3px solid var(--border-strong); padding-left: var(--sp-4); margin-top: var(--sp-4); }

/* ===== Footer columnas ===== */
.tx-footer { border-top: 1px solid var(--border); padding: var(--sp-12) 0 var(--sp-8); color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-16); background: var(--surface); }
.tx-footer__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--sp-6) var(--sp-10); margin-bottom: var(--sp-8); align-items: start; }
.tx-footer__cols h4 { font-size: var(--fs-sm); color: var(--ink-800); margin-bottom: var(--sp-3); font-family: var(--font-sans); }
.tx-footer__cols a { display: block; color: var(--ink-500); padding: .2rem 0; }
.tx-footer__cols a:hover { color: var(--brand-600); }
.tx-footer__bottom { border-top: 1px solid var(--border); padding-top: var(--sp-5); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }

/* Footer oscuro estilo Joinnus */
.tx-footer--dark { background: #0A0E16; color: var(--ink-400); border-top: 0; padding-top: var(--sp-12); }
.tx-footer--dark h4 { color: #fff; }
.tx-footer--dark .tx-footer__cols a { color: var(--ink-400); }
.tx-footer--dark .tx-footer__cols a:hover { color: var(--brand-400); }
.tx-footer--dark .tx-logo { color: #fff; }
.tx-footer--dark .tx-footer__bottom { border-top-color: rgba(255,255,255,.08); color: var(--ink-500); }
.tx-footer__lang { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-full); padding: .45rem 1rem; font-size: var(--fs-sm); font-weight: 600; color: #fff !important; width: max-content; transition: border var(--t-fast); }
.tx-footer__lang:hover { border-color: var(--brand-400); }
.tx-social { display: flex; gap: var(--sp-2); }
.tx-social__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; color: #fff !important; font-weight: 700; transition: all var(--t-fast); }
.tx-social__btn:hover { background: var(--brand-500); border-color: var(--brand-500); transform: translateY(-2px); }
.tx-claimbook { display: inline-flex; align-items: center; gap: .6rem; background: #fff; color: var(--accent-600); border-radius: var(--r-md); padding: .6rem 1rem; font-size: var(--fs-xs); font-weight: 700; line-height: 1.1; text-align: center; }
.tx-claimbook:hover { color: var(--accent-600); box-shadow: var(--sh-md); }
.tx-claimbook__icon { font-size: 22px; }

/* ===== Event detail layout (sticky aside) ===== */
.tx-edetail { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: var(--sp-8); align-items: start; }
.tx-edetail__aside { position: sticky; top: 104px; }
.tx-ehero { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/8; background: linear-gradient(135deg, var(--brand-500), var(--accent-500)); background-size: cover; background-position: center; box-shadow: var(--sh-md); }
.tx-tt { border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: var(--sp-4); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); transition: border var(--t-base); }
.tx-tt:hover { border-color: var(--brand-300); }
.tx-qtt { display: flex; align-items: center; gap: var(--sp-2); }
.tx-qtt button { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-lg); cursor: pointer; color: var(--ink-700); }
.tx-qtt button:hover { border-color: var(--brand-400); color: var(--brand-600); }
.tx-qtt input { width: 44px; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: .35rem 0; font-weight: 600; }
.tx-summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }

@media (max-width: 980px) {
  /* Apila en 1 columna y manda el sidebar SIEMPRE al final (aunque el contenido cargue con Alpine) */
  .tx-layout { display: flex; flex-direction: column; }
  .tx-layout > div:first-child { order: 1; }
  .tx-layout > aside { order: 2; }
  .tx-sidecard { overflow: hidden; }
  .tx-sidecard .tx-btn { max-width: 100%; }
  .tx-mega { width: 92vw; left: -20px; }
}
@media (max-width: 860px) {
  .tx-edetail { grid-template-columns: minmax(0,1fr); }
  .tx-edetail__aside { position: static; }
  .tx-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .tx-search { display: none; }
  .tx-pbanner { flex-direction: column; text-align: center; }
}

/* Telemax: reglas editoriales compartidas; la versión compilada vive en public/assets/css/telemax.css. */
:root { --tx-yellow:#F5C518; --tx-yellow-hover:#E5B50A; --tx-black:#111; --tx-charcoal:#1B1B1B; --tx-paper:#FFFCF2; --tx-line:rgba(17,17,17,.16); }

/* ============================================================
   VALIDATOR (móvil)
   ============================================================ */
.tx-val { min-height: 100vh; background: var(--ink-900); color: #fff; display: flex; flex-direction: column; }
.tx-val__head { padding: var(--sp-5); text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.tx-val__body { flex: 1; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.tx-val__result { border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-5); text-align: center; }
.tx-val__result--valid { background: var(--accent-500); }
.tx-val__result--used { background: var(--warning-500); }
.tx-val__result--bad { background: var(--danger-500); }
.tx-val__result h2 { color: #fff; font-size: var(--fs-3xl); }
.tx-val__kind { display:inline-block; background:rgba(0,0,0,.22); color:#fff; font-weight:700; font-size:var(--fs-xs); padding:.25rem .7rem; border-radius:999px; margin-bottom:.6rem; }
.tx-val__tk { margin-top:12px; display:flex; flex-direction:column; gap:3px; color:#fff; }
.tx-val__tk strong { font-size:var(--fs-lg); line-height:1.2; }
.tx-val__tk span { font-size:var(--fs-sm); opacity:.95; }
.tx-val__tk code { margin-top:4px; font-family:ui-monospace,Consolas,monospace; font-weight:700; letter-spacing:.04em; background:rgba(0,0,0,.2); padding:.2rem .5rem; border-radius:6px; align-self:center; }

/* ============================================================
   QR ticket
   ============================================================ */
.tx-ticket { max-width: 420px; margin: 0 auto; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); border: 1px solid var(--border); }
.tx-ticket__top { background: linear-gradient(135deg, var(--brand-500), var(--accent-500)); color: #fff; padding: var(--sp-6); }
.tx-ticket__qr { padding: var(--sp-6); display: grid; place-items: center; }
.tx-ticket__qr svg, .tx-ticket__qr img { width: 220px; height: 220px; }
.tx-ticket__meta { padding: 0 var(--sp-6) var(--sp-6); }

@media (max-width: 860px) {
  .tx-shell { grid-template-columns: 1fr; }
  .tx-sidebar { display: none; }
  .tx-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tx-grid-3, .tx-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tx-field-row { grid-template-columns: 1fr; }
  .tx-grid-4 { grid-template-columns: 1fr; }
  h1 { font-size: var(--fs-2xl); }
  .tx-hero h1 { font-size: var(--fs-3xl); }
}

/* ============================================================
   MICRODETALLES / POLISH FINAL
   ============================================================ */
/* Animación de entrada suave para cards y secciones */
@keyframes tx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.tx-pcard, .tx-stat, .tx-sidecard { animation: tx-rise var(--t-slow) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Inputs con foco más vivo y agradable */
.tx-input, .tx-select, .tx-textarea { transition: border var(--t-base), box-shadow var(--t-base), background var(--t-base); }
.tx-input:hover, .tx-select:hover, .tx-textarea:hover { border-color: var(--brand-300); }
.tx-input:focus, .tx-select:focus, .tx-textarea:focus { box-shadow: 0 0 0 4px var(--brand-50); }

/* Badges con un poco más de carácter */
.tx-badge--success { background: var(--mint-bg); color: var(--mint-fg); }

/* Cabecera de sección con barra de acento */
.tx-section__head h2 { position: relative; padding-left: .9rem; letter-spacing: -.01em; }
.tx-section__head h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 1.05em; border-radius: 999px; background: var(--grad-brand); }
.tx-section__head a { color: var(--brand-700); transition: gap var(--t-base); }
.tx-section__head a:hover { color: var(--brand-600); }

/* Banner destacado del home con más vida */
.tx-banner { background: var(--grad-night); }
.tx-banner__inner .tx-btn { box-shadow: var(--sh-brand); }

/* Chips de categoría (si se usan) con hover de marca */
.tx-chip:hover { border-color: var(--brand-300); color: var(--brand-700); background: var(--brand-50); }

/* Cards de stat con acento superior */
.tx-stat { position: relative; overflow: hidden; }
.tx-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); opacity: .9; }

/* Tarjeta promo del sidebar más atractiva */
.tx-sidecard--promo { position: relative; overflow: hidden; }
.tx-sidecard--promo::after { content: ''; position: absolute; width: 160px; height: 160px; right: -40px; bottom: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(0,209,178,.18), transparent 70%); }

/* Footer claim book con micro-hover */
.tx-claimbook { transition: transform var(--t-base), box-shadow var(--t-base); }
.tx-claimbook:hover { transform: translateY(-2px); }

/* Hero del detalle de evento con sombra de color */
.tx-ehero { box-shadow: var(--sh-lg); }

/* ============================================================
   SECCIÓN DE 2 LÍNEAS + FLECHA DE CARRUSEL (estilo Joinnus)
   ============================================================ */
.tx-section__heading { display: flex; flex-direction: column; gap: 2px; }
.tx-section__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }
.tx-section__head .tx-section__heading h2 { padding-left: 0; }
.tx-section__head .tx-section__heading h2::before { display: none; }
.tx-carousel__nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-700); font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: all var(--t-fast); flex-shrink: 0; }
.tx-carousel__nav:hover { background: var(--grad-brand); color: var(--on-brand); border-color: transparent; box-shadow: var(--sh-brand); transform: scale(1.06); }

/* ============================================================
   MODAL DE FAVORITO GUARDADO
   ============================================================ */
.tx-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: var(--sp-4); animation: tx-fade var(--t-base) both; }
@keyframes tx-fade { from { opacity: 0; } to { opacity: 1; } }
.tx-modal { background: var(--surface); border-radius: var(--r-xl); max-width: 440px; width: 100%; padding: var(--sp-8); text-align: center; position: relative; box-shadow: var(--sh-xl); animation: tx-rise var(--t-base) both; }
.tx-modal__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 32px; height: 32px; border: 0; background: var(--surface-2); border-radius: 50%; cursor: pointer; color: var(--ink-500); font-size: 16px; }
.tx-modal__close:hover { background: var(--border); color: var(--ink-800); }
.tx-modal__check { width: 56px; height: 56px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; margin: 0 auto var(--sp-4); color: var(--on-brand); font-size: 26px; box-shadow: var(--sh-brand); }
.tx-modal h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.tx-modal p { color: var(--ink-600); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.tx-modal__divider { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
.tx-modal__hint { display: flex; gap: var(--sp-3); text-align: left; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-600); margin-bottom: var(--sp-4); }
.tx-modal__hint .i { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-900); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.tx-iconbtn.is-fav { background: var(--danger-500); border-color: var(--danger-500); color: #fff; }

/* Botón "favoritos guardados" con burbuja menta como en la referencia */
.tx-btn--soft { background: var(--mint-bg); color: var(--mint-fg); box-shadow: none; }
.tx-btn--soft::after { display: none; }
.tx-btn--soft:hover { background: #CDEFE3; color: var(--mint-fg); }

/* ============================================================
   CARRUSEL MEJORADO: cards más anchas + dots de paginación
   ============================================================ */
.tx-pcard__title { -webkit-line-clamp: 2; }
/* En pantallas grandes, las cards del carrusel respiran más */
@media (min-width: 980px) {
  /* Grid 4 columnas × 2 filas (8 cards visibles, como Joinnus) */
  .tx-carousel { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .tx-carousel > *:nth-child(n+9) { display: none; }
}
/* Dots de paginación bajo el carrusel */
.tx-dots { display: flex; gap: 8px; justify-content: center; margin-top: var(--sp-5); }
.tx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); border: 0; cursor: pointer; transition: all var(--t-fast); }
.tx-dot.is-active { width: 26px; border-radius: 999px; background: var(--grad-brand); }

/* ============================================================
   CARRUSEL HERO de eventos destacados
   ============================================================ */
.tx-hero-carousel { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); background: var(--grad-night); }
.tx-hero-track { position: relative; aspect-ratio: 21/8; min-height: 320px; }
.tx-hero-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.tx-hero-slide::before { content: ''; position: absolute; inset: 0; background-image: var(--hcover, none); background-size: cover; background-position: center; }
.tx-hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.5) 45%, transparent 75%); }
.tx-hero-slide__body { position: relative; z-index: 2; padding: var(--sp-10) var(--sp-12); max-width: 60%; color: #fff; }
.tx-hero-slide__cat { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); color: #fff; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; margin-bottom: var(--sp-4); }
.tx-hero-slide__title { color: #fff; font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -.01em; margin-bottom: var(--sp-3); text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.tx-hero-slide__meta { color: rgba(255,255,255,.88); font-size: var(--fs-md); margin-bottom: var(--sp-6); }
/* Flechas sutiles tipo "glass" que no tapan la foto */
.tx-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(15,23,42,.28); backdrop-filter: blur(6px); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: .55; transition: all var(--t-base); }
.tx-hero-carousel:hover .tx-hero-arrow { opacity: 1; }
.tx-hero-arrow:hover { background: rgba(15,23,42,.55); border-color: rgba(255,255,255,.6); transform: translateY(-50%) scale(1.08); }
.tx-hero-arrow--prev { left: var(--sp-5); }
.tx-hero-arrow--next { right: var(--sp-5); }
/* Dots con barra de progreso (temporizador) */
.tx-hero-dots { position: absolute; z-index: 3; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; }
.tx-hero-dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.4); border: 0; cursor: pointer; transition: width var(--t-base), background var(--t-base); padding: 0; overflow: hidden; position: relative; }
.tx-hero-dot.is-active { width: 34px; background: rgba(255,255,255,.35); }
.tx-hero-dot__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 999px; }
@media (max-width: 860px) {
  .tx-hero-track { aspect-ratio: auto; min-height: 380px; }
  .tx-hero-slide__body { max-width: 100%; padding: var(--sp-6); }
  .tx-hero-slide__title { font-size: var(--fs-2xl); }
  .tx-hero-slide::after { background: linear-gradient(180deg, rgba(11,18,32,.3) 0%, rgba(11,18,32,.85) 100%); }
  .tx-hero-arrow { width: 38px; height: 38px; font-size: 20px; }
}

/* ============================================================
   TOP BAR pública (país + accesos rápidos)
   ============================================================ */
.tx-topbar-pub { position: relative; width: 100%; background: var(--ink-900) !important; color: #fff; font-size: var(--fs-xs); border-bottom: 1px solid rgba(255,255,255,.08); }
.tx-topbar-pub__row { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.tx-topbar-pub__country { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #fff; }
.tx-topbar-pub__country .flag { font-size: 14px; }
.tx-topbar-pub__links { display: flex; align-items: center; gap: var(--sp-6); }
.tx-topbar-pub__links a { color: rgba(255,255,255,.92); font-weight: 700; transition: color var(--t-fast); }
.tx-topbar-pub__links a:hover { color: var(--brand-400); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) {
  .tx-topbar-pub__links a:last-child { display: none; }
}

/* ============================================================
   HERO full-width (edge to edge)
   ============================================================ */
.tx-hero-wrap { width: 100%; background: var(--ink-900); }
.tx-hero-wrap .tx-hero-carousel { border-radius: 0; box-shadow: none; }
.tx-hero-wrap .tx-hero-track { aspect-ratio: auto; height: clamp(280px, 28vw, 400px); min-height: 0; }
/* el contenido del slide se alinea al ancho del container central */
.tx-hero-wrap .tx-hero-slide__body { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--sp-6); padding-right: var(--sp-6); }
/* flechas pegadas a los bordes del viewport */
.tx-hero-wrap .tx-hero-arrow--prev { left: var(--sp-6); }
.tx-hero-wrap .tx-hero-arrow--next { right: var(--sp-6); }
@media (max-width: 860px) {
  .tx-hero-wrap .tx-hero-track { height: 320px; }
}

/* ============================================================
   EXPLORA POR CATEGORÍA (iconos circulares)
   ============================================================ */
/* Fila horizontal compacta (no empuja los eventos hacia abajo) */
.tx-cats { display: flex; gap: var(--sp-5); overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: none; scroll-snap-type: x proximity; }
.tx-cats::-webkit-scrollbar { display: none; }
.tx-cat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; width: 84px; scroll-snap-align: start; }
.tx-cat__icon { width: 62px; height: 62px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--ink-700); transition: all var(--t-base); }
.tx-cat__icon svg { width: 28px; height: 28px; transition: transform var(--t-base); }
.tx-cat:hover .tx-cat__icon { background: var(--grad-brand); border-color: transparent; color: var(--on-brand); box-shadow: var(--sh-brand); transform: translateY(-3px); }
.tx-cat:hover .tx-cat__icon svg { transform: scale(1.1); }
.tx-cat__name { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-600); line-height: 1.2; transition: color var(--t-fast); }
.tx-cat:hover .tx-cat__name { color: var(--brand-700); }

/* ============================================================
   SWITCHER de productos (Eventos / Pasajes) + buscador de viaje
   ============================================================ */
.tx-switcher { max-width: var(--container); margin: 0 auto; }
.tx-switcher__tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-full); margin: 0 auto var(--sp-4); }
.tx-switcher__tab { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: transparent; color: var(--ink-600); font: 600 var(--fs-sm) var(--font-sans); padding: .6rem 1.4rem; border-radius: var(--r-full); cursor: pointer; transition: all var(--t-base); white-space: nowrap; }
.tx-switcher__tab.is-active { background: var(--grad-brand); color: var(--on-brand); box-shadow: var(--sh-brand); }
.tx-switcher__panel { width: 100%; }
.tx-switcher__hint { color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-3); text-align: center; }
/* Pestañas centradas con fondo propio (franja limpia bajo el hero) */
.tx-switcher__tabs { background: var(--ink-100, #EEF1F6); border-color: var(--border); }

/* Barra de búsqueda tipo viaje */
.tx-busbar { display: flex; align-items: stretch; gap: var(--sp-2); background: #fff; border-radius: var(--r-lg); padding: 8px; box-shadow: var(--sh-lg); flex-wrap: wrap; }
.tx-busbar__field { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-radius: var(--r-md); min-width: 150px; transition: background var(--t-fast); }
.tx-busbar__field:hover { background: var(--surface-2); }
.tx-busbar__field--grow { flex: 1 1 180px; }
.tx-busbar__icon { font-size: 18px; flex-shrink: 0; }
.tx-busbar__control { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tx-busbar__control label { font-size: 11px; font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: .03em; }
.tx-busbar__control input { border: 0; outline: none; font: 600 var(--fs-md) var(--font-sans); color: var(--ink-900); background: transparent; width: 100%; padding: 2px 0; }
.tx-busbar__control input::placeholder { color: var(--ink-400); font-weight: 500; }
.tx-busbar__swap { align-self: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--ink-900); color: #fff; cursor: pointer; font-size: 16px; flex-shrink: 0; transition: transform var(--t-fast); }
.tx-busbar__swap:hover { transform: rotate(180deg); }
.tx-busbar__submit { border: 0; background: var(--grad-brand); color: var(--on-brand); font: 700 var(--fs-md) var(--font-sans); padding: 0 1.8rem; border-radius: var(--r-md); cursor: pointer; box-shadow: var(--sh-brand); transition: filter var(--t-base), transform var(--t-fast); white-space: nowrap; }
.tx-busbar__submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.tx-busbar__field + .tx-busbar__field { border-left: 1px solid var(--border); }
.tx-busbar__field--grow + .tx-busbar__swap + .tx-busbar__field--grow { border-left: 0; }

@media (max-width: 860px) {
  .tx-busbar { flex-direction: column; }
  .tx-busbar__field { min-width: 0; }
  .tx-busbar__field + .tx-busbar__field { border-left: 0; border-top: 1px solid var(--border); }
  .tx-busbar__swap { display: none; }
  .tx-busbar__submit { padding: .9rem; }
}

/* Deck del buscador: franja limpia que monta ligeramente sobre el hero */
.tx-search-deck { position: relative; z-index: 5; margin-top: -36px; margin-bottom: var(--sp-8); text-align: center; }
.tx-search-deck .tx-busbar { text-align: left; }
@media (max-width: 860px) {
  .tx-search-deck { margin-top: var(--sp-5); }
}

/* ============================================================
   MODO PASAJES: banner + tarjetas de ruta
   ============================================================ */
.tx-busbanner { height: clamp(280px, 28vw, 400px); background: var(--grad-night); display: flex; align-items: center; position: relative; overflow: hidden; }
.tx-busbanner::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(600px 300px at 80% 20%, rgba(0,209,178,.25), transparent 60%),
  radial-gradient(500px 280px at 20% 90%, rgba(37,99,235,.28), transparent 60%); }
.tx-busbanner__body { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); color: #fff; }

.tx-routecard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); }
.tx-routecard:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); border-color: var(--brand-200); }
.tx-routecard__path { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink-900); }
.tx-routecard__arrow { color: var(--brand-500); }
.tx-routecard__meta { font-size: var(--fs-sm); color: var(--ink-500); margin-top: var(--sp-2); }
.tx-routecard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.tx-routecard__price { font-size: var(--fs-sm); color: var(--ink-600); }
.tx-routecard__price strong { font-size: var(--fs-md); color: var(--ink-900); }

/* ============================================================
   TARJETA DE VIAJE (resultados de búsqueda de pasajes)
   ============================================================ */
.tx-tripcard { display: grid; grid-template-columns: 160px 1fr auto auto; gap: var(--sp-5); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); margin-bottom: var(--sp-4); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); }
.tx-tripcard:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); border-color: var(--brand-200); }
.tx-tripcard__time { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); }
.tx-tripcard__time strong { font-size: var(--fs-lg); color: var(--ink-900); }
.tx-tripcard__time small { color: var(--ink-400); font-size: var(--fs-xs); margin-left: .25rem; white-space: nowrap; }
.tx-tripcard__line { flex: 1; height: 2px; min-width: 24px; background: linear-gradient(90deg, var(--brand-400), var(--accent-500)); border-radius: 999px; position: relative; }
.tx-tripcard__line::after { content: '🚌'; position: absolute; right: -4px; top: -10px; font-size: 12px; }
.tx-tripcard__company { font-weight: 700; color: var(--ink-900); }
.tx-tripcard__bus { font-size: var(--fs-sm); color: var(--ink-600); }
.tx-tripcard__route { font-size: var(--fs-xs); }
.tx-tripcard__buy { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.tx-tripcard__price small { display: block; font-size: 11px; color: var(--ink-400); }
.tx-tripcard__price strong { font-size: var(--fs-xl); color: var(--ink-900); }
@media (max-width: 760px) {
  .tx-tripcard { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .tx-tripcard__buy { align-items: stretch; grid-column: 1 / -1; }
}

/* ============================================================
   SELECTOR DE CIUDAD propio (reemplaza el datalist nativo feo)
   ============================================================ */
.tx-citysel { position: relative; }
.tx-citysel__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px; z-index: 30; }
.tx-citysel__item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; background: transparent; padding: .6rem .7rem; border-radius: var(--r-sm); font: 500 var(--fs-sm) var(--font-sans); color: var(--ink-800); cursor: pointer; transition: background var(--t-fast); }
.tx-citysel__item:hover { background: var(--brand-50); color: var(--brand-700); }
.tx-citysel__menu::-webkit-scrollbar { width: 8px; }
.tx-citysel__menu::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* ============================================================
   DETALLE DE EVENTO: hero cinemático + breadcrumb + infocards
   ============================================================ */
.tx-evhero { position: relative; min-height: 340px; display: flex; align-items: flex-end; background: var(--grad-night); overflow: hidden; }
.tx-evhero::before { content: ''; position: absolute; inset: 0; background-image: var(--cover, none); background-size: cover; background-position: center; }
.tx-evhero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,.25) 0%, rgba(11,18,32,.55) 60%, rgba(11,18,32,.9) 100%); }
.tx-evhero__inner { position: relative; z-index: 2; padding: var(--sp-12) var(--sp-6) var(--sp-8); width: 100%; color: #fff; }
.tx-evhero__title { color: #fff; font-size: var(--fs-3xl); line-height: 1.1; margin: var(--sp-3) 0 var(--sp-2); text-shadow: 0 2px 20px rgba(0,0,0,.4); max-width: 22ch; }
.tx-evhero__meta { color: rgba(255,255,255,.9); font-size: var(--fs-lg); }
.tx-breadcrumb { font-size: var(--fs-sm); color: rgba(255,255,255,.75); margin-bottom: var(--sp-3); display: flex; gap: .4rem; flex-wrap: wrap; }
.tx-breadcrumb a { color: rgba(255,255,255,.9); }
.tx-breadcrumb a:hover { color: var(--brand-300); }
.tx-breadcrumb .tx-muted { color: rgba(255,255,255,.6); }

.tx-infocard { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.tx-infocard__ico { font-size: 26px; }
.tx-infocard__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-400); margin-bottom: 2px; }
@media (max-width: 760px) {
  .tx-evhero__title { font-size: var(--fs-2xl); }
  .tx-evhero { min-height: 280px; }
}

/* Estado vacío con personalidad */
.tx-empty { text-align: center; padding: var(--sp-16) var(--sp-6); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.tx-empty__art { font-size: 56px; margin-bottom: var(--sp-4); }
.tx-empty h3 { margin-bottom: var(--sp-2); }

/* ============================================================
   PÁGINAS LEGALES: tabs + contenido
   ============================================================ */
.tx-legal__tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: var(--sp-3); }
.tx-legal__tabs a { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600); padding: .5rem .9rem; border-radius: var(--r-full); transition: all var(--t-fast); }
.tx-legal__tabs a:hover { background: var(--brand-50); color: var(--brand-700); }
.tx-legal__tabs a.is-active { background: var(--grad-brand); color: var(--on-brand); }
.tx-prose { color: var(--ink-700); line-height: 1.7; }
.tx-prose h3 { margin: var(--sp-6) 0 var(--sp-2); color: var(--ink-900); font-size: var(--fs-lg); }
.tx-prose p { margin-bottom: var(--sp-3); }

/* Índice interno de las páginas legales */
.tx-legal__index { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0 var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; }
.tx-legal__index strong { color: var(--ink-700); font-size: var(--fs-sm); }
.tx-legal__index a { font-size: var(--fs-sm); font-weight: 600; color: var(--brand-700); }
.tx-legal__index a:hover { color: var(--brand-600); text-decoration: underline; }
.tx-prose h3[id] { scroll-margin-top: 110px; }

/* ============================================================
   AUTH: layout split-screen (marca + formulario)
   ============================================================ */
.tx-authpage { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.tx-authpage__brandside { position: relative; background: var(--grad-night); color: #fff; display: flex; align-items: center; overflow: hidden; }
.tx-authpage__brandside::before { content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(0,209,178,.4), transparent 65%); }
.tx-authpage__brandside::after { content: ''; position: absolute; width: 380px; height: 380px; left: -100px; bottom: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.4), transparent 65%); }
.tx-authpage__brandinner { position: relative; z-index: 2; padding: var(--sp-16); max-width: 480px; }
.tx-authpage__brandinner h2 { color: #fff; font-size: var(--fs-2xl); margin: var(--sp-8) 0 var(--sp-3); line-height: 1.2; }
.tx-authpage__brandinner p { color: rgba(255,255,255,.82); font-size: var(--fs-lg); }
.tx-authpage__art { font-size: 38px; margin-top: var(--sp-8); display: flex; gap: var(--sp-3); }
.tx-authpage__formside { display: flex; align-items: center; justify-content: center; padding: var(--sp-8); background: var(--bg); }
.tx-authpage__card { width: 100%; max-width: 420px; }
.tx-authpage__mobilebrand { display: none; justify-content: center; margin-bottom: var(--sp-6); }
@media (max-width: 880px) {
  .tx-authpage { grid-template-columns: 1fr; }
  .tx-authpage__brandside { display: none; }
  .tx-authpage__mobilebrand { display: flex; }
}

/* ============================================================
   HEADER RESPONSIVE: hamburguesa + menú móvil
   ============================================================ */
.tx-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--r-md); cursor: pointer; position: relative; }
.tx-burger span, .tx-burger span::before, .tx-burger span::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 18px; height: 2px; background: var(--ink-800); border-radius: 2px; transition: all var(--t-base); }
.tx-burger span { top: 50%; margin-top: -1px; }
.tx-burger span::before { top: -6px; }
.tx-burger span::after { top: 6px; }
.tx-burger span.is-open { background: transparent; }
.tx-burger span.is-open::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.tx-burger span.is-open::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

.tx-mobilemenu { position: fixed; inset: 0; top: 0; z-index: 50; background: rgba(15,23,42,.5); backdrop-filter: blur(3px); }
.tx-mobilemenu__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 86vw); background: var(--surface); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-1); overflow-y: auto; box-shadow: var(--sh-xl); }
.tx-mobilemenu__panel a { padding: .8rem .6rem; border-radius: var(--r-md); color: var(--ink-800); font-weight: 600; font-size: var(--fs-md); }
.tx-mobilemenu__panel a:hover { background: var(--brand-50); color: var(--brand-700); }
.tx-mobilemenu__panel form { margin-top: var(--sp-2); }
.tx-mobilemenu__sep { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-400); padding: var(--sp-4) var(--sp-2) var(--sp-1); border-top: 1px solid var(--border); margin-top: var(--sp-2); }

@media (max-width: 860px) {
  .tx-hide-mobile { display: none !important; }
  .tx-burger { display: block; }
  .tx-pubheader__row { height: 64px; }
}

/* Footer: bloque de ayuda (botones que envuelven bien sobre fondo negro) */
.tx-footer__help { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* En el footer negro, el botón sin el "shine" para que se vea nítido */
.tx-footer__help .tx-btn { padding: .55rem 1.1rem; font-size: var(--fs-sm); line-height: 1.2; }
.tx-footer__help .tx-btn::after { display: none; }
.tx-footer__help .tx-btn--primary { box-shadow: 0 4px 14px rgba(0,209,178,.3); }
.tx-footer__ghostbtn { display: inline-flex; align-items: center; padding: .5rem .85rem; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; transition: all var(--t-fast); }
.tx-footer__ghostbtn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; }
.tx-footer--dark .tx-social__btn { border-color: rgba(255,255,255,.18); }
.tx-footer--dark .tx-claimbook { color: var(--accent-600); }

/* Selector de servicio (Libro de Reclamaciones: evento / transporte) */
.tx-svcpick { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.tx-svcpick__opt { flex: 1; min-width: 200px; display: flex; align-items: center; gap: .5rem; padding: var(--sp-4); border: 1.5px solid var(--border-strong); border-radius: var(--r-md); font-weight: 600; color: var(--ink-700); cursor: pointer; transition: all var(--t-fast); }
.tx-svcpick__opt:hover { border-color: var(--brand-300); }
.tx-svcpick__opt.is-active { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-50); }

/* ============================================================
   MAPA DE ASIENTOS (selección de pasaje)
   ============================================================ */
.tx-seatlegend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-600); }
.tx-seatlegend span { display: inline-flex; align-items: center; gap: .4rem; }
.tx-seatlegend .tx-seat { width: 20px; height: 20px; pointer-events: none; }
.tx-busmap { border: 2px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--sp-5); max-width: 340px; }
.tx-busmap__driver { text-align: right; font-size: var(--fs-sm); color: var(--ink-500); padding-bottom: var(--sp-4); border-bottom: 1px dashed var(--border-strong); margin-bottom: var(--sp-4); }
.tx-busmap__seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
/* pasillo: separación entre columna 2 y 3 */
.tx-busmap__seats .tx-seat:nth-child(4n+2) { margin-right: var(--sp-4); }
.tx-seat { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--surface); font: 600 var(--fs-sm) var(--font-sans); cursor: pointer; transition: all var(--t-fast); display: inline-flex; align-items: center; justify-content: center; }
.tx-seat--free:hover { border-color: var(--brand-500); background: var(--brand-50); }
.tx-seat--sel { background: var(--grad-brand); color: var(--on-brand); border-color: transparent; box-shadow: var(--sh-brand); }
.tx-seat--occ { background: var(--ink-300); color: var(--ink-500); border-color: transparent; cursor: not-allowed; opacity: .6; }

/* Plano de bus por pisos y tipos de asiento (estilo RedBus) */
.tx-busfloor { margin-top: var(--sp-4); }
.tx-busfloor__label { font: 700 var(--fs-sm) var(--font-sans); color: var(--ink-700); margin-bottom: var(--sp-2); }
.tx-busmap--plan { max-width: 300px; }
.tx-busmap__rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.tx-busrow { display: flex; gap: var(--sp-3); justify-content: flex-start; }
.tx-busaisle { width: 20px; flex: 0 0 20px; }
.tx-busrow .tx-seat { width: 40px; height: 40px; flex: 0 0 40px; }
/* Color del borde/fondo por tipo de asiento (cuando está libre) */
.tx-seat--type-economico.tx-seat--free { border-color: #94a3b8; }
.tx-seat--type-semicama.tx-seat--free { border-color: #38bdf8; }
.tx-seat--type-ejecutivo.tx-seat--free { border-color: #f59e0b; background: #fffbeb; }
.tx-seat--type-cama.tx-seat--free { border-color: #a855f7; background: #faf5ff; }
.tx-seatlegend .tx-seat--type-economico { background: #94a3b8; border-color: #94a3b8; }
.tx-seatlegend .tx-seat--type-semicama { background: #38bdf8; border-color: #38bdf8; }
.tx-seatlegend .tx-seat--type-ejecutivo { background: #f59e0b; border-color: #f59e0b; }
.tx-seatlegend .tx-seat--type-cama { background: #a855f7; border-color: #a855f7; }

/* ============================================================
   HOME SPLIT — "Elige tu servicio" (Entradas / Pasajes)
   ============================================================ */
.tx-welcome { max-width: 1240px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-16); }
.tx-welcome__title { text-align: center; font-size: var(--fs-2xl); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin-bottom: var(--sp-8); color: var(--ink-900); }
.tx-welcome__title span { color: var(--ink-900); }
.tx-welcome__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }

.tx-svcbox__heading { text-align: center; font-size: var(--fs-xl); font-weight: 800; text-transform: uppercase; margin-bottom: var(--sp-4); color: var(--ink-900); }
.tx-svcbox__heading--dark { color: var(--ink-900); }

.tx-svcbox__panel { background: var(--brand-500); border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: var(--sh-lg); }
.tx-svcbox__panel--dark { background: var(--ink-900); }

.tx-svcbox__head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.tx-svcbox__ico { font-size: 44px; line-height: 1; flex-shrink: 0; }
.tx-svcbox__head h3 { font-size: var(--fs-xl); font-weight: 800; margin-bottom: var(--sp-2); color: var(--ink-900); }
.tx-svcbox__head h3.tx-y { color: var(--brand-500); }
.tx-svcbox__sub { color: rgba(255,255,255,.72); font-size: var(--fs-sm); max-width: 42ch; }
.tx-y { color: var(--brand-500); }

/* Buscador de entradas */
.tx-svcbox__search { display: flex; background: #fff; border-radius: var(--r-full); overflow: hidden; box-shadow: var(--sh-sm); }
.tx-svcbox__search input { flex: 1; border: 0; outline: none; padding: .7rem 1rem; font: 500 var(--fs-sm) var(--font-sans); }
.tx-svcbox__search button { border: 0; background: var(--ink-900); color: #fff; width: 46px; cursor: pointer; font-size: 16px; }

/* Mini-cards de eventos en el welcome */
.tx-svcbox__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.tx-wcard { background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); display: flex; flex-direction: column; transition: transform var(--t-base); }
.tx-wcard:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.tx-wcard__img { aspect-ratio: 1/1; background: var(--grad-night); background-size: cover; background-position: center; position: relative; }
.tx-wcard__fav { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; font-size: 13px; color: var(--ink-700); }
.tx-wcard__body { padding: .55rem .6rem; display: flex; flex-direction: column; gap: 3px; }
.tx-wcard__body strong { font-size: 12px; line-height: 1.2; color: var(--ink-900); }
.tx-wcard__date { font-size: 10px; color: var(--ink-500); }
.tx-wcard__btn { margin-top: 4px; background: var(--ink-900); color: var(--brand-500); font-size: 11px; font-weight: 700; text-transform: uppercase; text-align: center; padding: .4rem; border-radius: var(--r-sm); }

/* Formulario de pasajes (negro) */
.tx-busform__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.tx-busform__row label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: #fff; }
.tx-busform__row input { border: 0; border-radius: var(--r-md); padding: .65rem .8rem; font: 500 var(--fs-sm) var(--font-sans); outline: none; }
.tx-busform__exlabel { font-size: var(--fs-sm); color: rgba(255,255,255,.7); display: block; margin-bottom: var(--sp-2); }
.tx-busform__exgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.tx-excard { background: #fff; border-radius: var(--r-md); padding: .6rem .7rem; display: flex; flex-direction: column; gap: 3px; transition: transform var(--t-base); }
.tx-excard:hover { transform: translateY(-2px); }
.tx-excard strong { font-size: 12px; color: var(--ink-900); }
.tx-excard__path { font-size: 10px; color: var(--ink-500); display: flex; align-items: center; gap: 3px; }
.tx-excard__path em { color: var(--brand-600); font-style: normal; }
.tx-excard__price { font-size: 11px; color: var(--ink-600); }
.tx-excard__price b { color: var(--ink-900); }

@media (max-width: 900px) {
  .tx-welcome__grid { grid-template-columns: 1fr; }
  .tx-svcbox__cards { grid-template-columns: repeat(3, 1fr); }
  .tx-busform__row, .tx-busform__exgrid { grid-template-columns: 1fr; }
}

/* Logo como imagen */
.tx-logo--img img { height: 40px; width: auto; display: block; }
.tx-sidebar .tx-logo--img img { height: 34px; }
.tx-footer--dark .tx-logo--img { background: var(--brand-500); padding: 8px 14px; border-radius: var(--r-lg); width: max-content; max-width: 100%; }
.tx-footer--dark .tx-logo--img img { height: 34px; }
@media (max-width: 860px) { .tx-logo--img img { height: 34px; } }
/* ============================================================
   HOME PREMIUM v4 — Design System coherente (escala 8px)
   Grid: contenedor único 1200px. Módulos 6+6 misma altura.
   Espaciado: 8/16/24/32/48/64. Botones: alto 44px.
   ============================================================ */
:root {
  --tx-shell: 1500px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
  --card-radius: 16px;
}
/* Contenedor amplio con márgenes laterales elegantes (48px), toda la home
   comparte esta misma retícula: hero, módulos y beneficios alineados. */
.tx-shellwrap { max-width: var(--tx-shell); margin: 0 auto; padding: 0 var(--s6); }
@media (max-width: 1024px) { .tx-shellwrap { padding: 0 var(--s3); } }

/* ---------- HERO ---------- */
.tx-hero2 { position: relative; border-radius: var(--card-radius); overflow: hidden; min-height: 320px; display: flex; align-items: center; background: #0e0e0e; margin-top: var(--s3); }
.tx-hero2__bg { position: absolute; inset: 0;
  background:
    linear-gradient(100deg, #0e0e0e 0%, rgba(14,14,14,.92) 30%, rgba(14,14,14,.55) 50%, rgba(14,14,14,.05) 78%, transparent 100%),
    url('/assets/img/banner.png') center right / cover no-repeat,
    #0e0e0e;
}
.tx-hero2__inner { position: relative; z-index: 2; padding: var(--s6) var(--s6); max-width: 620px; }
.tx-hero2__eyebrow { color: var(--brand-500); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tx-hero2__title { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3rem); line-height: 1.06; font-weight: 800; margin: var(--s2) 0; letter-spacing: -.02em; }
.tx-hero2__title span { color: var(--brand-500); }
.tx-hero2__sub { color: rgba(255,255,255,.75); font-size: 1.05rem; line-height: 1.5; max-width: 46ch; margin-bottom: var(--s4); }
.tx-hero2__badges { display: flex; gap: var(--s4); flex-wrap: wrap; }
.tx-trust { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.tx-trust i { grid-row: 1/3; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,193,7,.14); border: 1px solid rgba(255,193,7,.32); border-radius: 50%; font-size: 17px; font-style: normal; }
.tx-trust b { color: #fff; font-size: 13px; font-weight: 700; }
.tx-trust small { color: rgba(255,255,255,.5); font-size: 11px; }

/* ---------- MÓDULOS (6 + 6, misma altura) ---------- */
.tx-modules { margin-top: var(--s4); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s3); align-items: stretch; }
.tx-mod { border-radius: var(--card-radius); padding: var(--s4); min-width: 0; display: flex; flex-direction: column; }
.tx-mod--light { background: #fff; border: 1px solid var(--border); box-shadow: var(--sh-md); }
.tx-mod--dark { background: #0e0e0e; }

/* Encabezado del módulo (mismo ritmo en ambos) */
.tx-mod__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.tx-mod__ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; flex-shrink: 0; background: var(--brand-500); }
.tx-mod__head h2 { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.tx-mod__head p { color: var(--ink-500); font-size: 13px; margin-top: 2px; }
.tx-white { color: #fff !important; } .tx-dim { color: rgba(255,255,255,.55) !important; }
.tx-tag { margin-left: auto; background: rgba(255,193,7,.14); color: var(--brand-500); font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 999px; align-self: center; }

/* Buscador de entradas (alto 44) */
.tx-mod__search { display: flex; align-items: center; gap: var(--s1); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0 6px 0 14px; height: 48px; }
.tx-mod__search .ico { color: var(--ink-400); flex-shrink: 0; }
.tx-mod__search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; height: 100%; font: 500 14px var(--font-sans); }
.tx-mod__search .tx-btn { height: 38px; flex-shrink: 0; white-space: nowrap; padding-left: 18px; padding-right: 18px; }

.tx-mod__subhead { display: flex; justify-content: space-between; align-items: center; margin: var(--s4) 0 var(--s2); }
.tx-mod__subhead h3 { font-size: 15px; font-weight: 700; }
.tx-mod__subhead a { font-size: 12px; font-weight: 700; color: var(--brand-600); }
.tx-mod__subhead--dark a { color: var(--brand-500); }

/* Eventos: 4 tarjetas compactas premium */
.tx-evgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.tx-ev { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tx-ev:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--brand-200); }
.tx-ev__img { aspect-ratio: 4/5; background: var(--grad-night); background-size: cover; background-position: center; position: relative; }
.tx-ev__date { position: absolute; top: 6px; left: 6px; background: #fff; color: #111; font-weight: 800; font-size: 12px; line-height: 1; padding: 5px 7px; border-radius: 7px; text-align: center; box-shadow: var(--sh-sm); }
.tx-ev__date small { display: block; font-size: 8px; font-weight: 700; color: var(--ink-500); margin-top: 1px; }
.tx-ev__body { padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.tx-ev__body strong { font-size: 12.5px; line-height: 1.25; color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.tx-ev__city { font-size: 10.5px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-ev__price { font-size: 11px; color: var(--ink-500); margin-top: 3px; }
.tx-ev__price b { color: var(--ink-900); font-size: 13px; }
.tx-mod__all { display: block; text-align: center; margin-top: auto; padding-top: var(--s3); }
.tx-mod__all a, a.tx-mod__all { display: block; border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 700; color: var(--ink-800); transition: all .2s; }
a.tx-mod__all:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--ink-900); }

/* Formulario de pasajes COMPACTO (tipo RedBus) */
.tx-tripform { min-width: 0; }
.tx-tripform__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s2); min-width: 0; }
.tx-tripform label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: rgba(255,255,255,.7); }
.tx-tf { display: flex; align-items: center; gap: 8px; min-width: 0; background: #fff; border-radius: 10px; padding: 0 12px; height: 46px; }
.tx-tf span { color: var(--ink-400); font-size: 14px; flex-shrink: 0; }
.tx-tf input, .tx-tf select { flex: 1; min-width: 0; width: 100%; border: 0; outline: none; background: transparent; height: 100%; font: 500 14px var(--font-sans); color: var(--ink-900); }
.tx-tripform__pax { margin-top: var(--s2); }
.tx-tripform__btn { width: 100%; margin-top: var(--s3); height: 50px; }

/* Rutas populares — tarjetas modernas con más peso */
.tx-routegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); min-width: 0; }
.tx-rt { min-width: 0; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 12px; padding: 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; align-items: center; transition: all .2s; }
.tx-rt:hover { border-color: var(--brand-500); background: #202020; transform: translateY(-2px); }
.tx-rt__path { grid-column: 1/-1; min-width: 0; font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-rt__meta { grid-column: 1; font-size: 10.5px; color: rgba(255,255,255,.5); }
.tx-rt__from { grid-column: 1; font-size: 10px; color: rgba(255,255,255,.45); }
.tx-rt__price { grid-column: 2; grid-row: 2/4; font-size: 1.05rem; font-weight: 800; color: var(--brand-500); text-align: right; white-space: nowrap; }
.tx-rt__bus { width: 40px; height: 26px; border-radius: 5px; background: var(--brand-500); display: grid; place-items: center; font-size: 15px; }

.tx-busbenefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid #2a2a2a; min-width: 0; }
.tx-busbenefits span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; min-width: 0; color: var(--brand-500); font-size: 15px; }
.tx-busbenefits b { color: #fff; font-size: 12px; grid-column: 2; }
.tx-busbenefits small { color: rgba(255,255,255,.5); font-size: 10px; grid-column: 2; }

/* Franja de beneficios */
.tx-benefits { margin: var(--s4) auto var(--s8); padding: var(--s4); background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--sh-sm); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.tx-benefit { display: flex; align-items: center; gap: var(--s2); }
.tx-benefit i { width: 44px; height: 44px; border-radius: 11px; background: var(--brand-50); display: grid; place-items: center; font-size: 20px; font-style: normal; flex-shrink: 0; }
.tx-benefit b { display: block; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.tx-benefit small { color: var(--ink-500); font-size: 12px; }

/* Header nav */
.tx-navlink { font-size: 14px; font-weight: 600; color: var(--ink-700); }
.tx-navlink:hover { color: var(--brand-700); }
.tx-btn--dark { background: #111; color: #fff; border-color: #111; }
.tx-btn--dark:hover { background: #000; color: var(--brand-500); }

@media (max-width: 980px) {
  .tx-modules { grid-template-columns: 1fr; align-items: start; }
  .tx-evgrid { grid-template-columns: repeat(4, 1fr); }
  .tx-benefits { grid-template-columns: repeat(2, 1fr); }
  .tx-tripform__grid { grid-template-columns: 1fr; }
  .tx-hero2__inner { padding: var(--s4) var(--s3); }
}
@media (max-width: 560px) {
  .tx-footer__cols { grid-template-columns: 1fr; }
  /* Eventos: carrusel deslizable horizontal en móvil */
  .tx-evgrid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--s2);
    padding-bottom: 6px;
    margin: 0 calc(-1 * var(--s3));
    padding-left: var(--s3);
    padding-right: var(--s3);
    scrollbar-width: none;
  }
  .tx-evgrid::-webkit-scrollbar { display: none; }
  .tx-evgrid > .tx-ev { flex: 0 0 62%; max-width: 62%; scroll-snap-align: start; }
  .tx-evgrid > p { flex: 1 0 100%; }
  .tx-routegrid, .tx-busbenefits, .tx-benefits { grid-template-columns: 1fr; }
  .tx-hero2__title { font-size: 1.8rem; }
  .tx-hero2__badges { gap: var(--s2); }
}

   HEADER MARCA — franja amarilla + bloque negro diagonal
   ============================================================ */
.tx-pubheader--brand { position: relative !important; inset: auto; width: 100%; max-width: none !important; background-color: #F5C518 !important; background-image: none !important; backdrop-filter: none; border-bottom: 1px solid rgba(20,20,20,.16); padding: 0; box-shadow: none; isolation: isolate; }
.tx-pubheader--brand::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #F5C518; }
.tx-pubheader--brand .tx-pubheader__row { max-width: var(--tx-shell); margin: 0 auto; height: 112px; display: flex; align-items: stretch; padding: 0 var(--s6); gap: 0; overflow: hidden; }
.tx-pubheader--brand .tx-pubheader__row,
.tx-pubheader--brand .tx-topnav { background: var(--brand-500) !important; }
.tx-pubheader--brand .tx-topnav { align-self: center; }

/* Bloque negro con esquina diagonal (clip-path) */
.tx-brandblock { display: flex; align-items: center; background: var(--brand-500); padding: 0 2rem 0 1.4rem; height: 100%; clip-path: none; border-radius: 0; }
.tx-brandblock img { height: 96px; width: auto; display: block; }

/* Menú a la derecha, texto negro sobre amarillo */
.tx-topnav { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; padding-right: var(--sp-4); }
.tx-topnav__link { font-size: var(--fs-sm); font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: .02em; position: relative; padding: .3rem 0; }
.tx-topnav__link:hover { color: #000; }
.tx-topnav__link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #111; border-radius: 2px; }
.tx-pubheader--brand .tx-btn--dark { border-radius: var(--r-full); font-weight: 700; padding: .5rem 1.3rem; }

/* Hamburguesa oscura para la franja amarilla */
.tx-burger--dark { border-color: #111; background: #111; margin-left: auto; margin-right: var(--sp-4); align-self: center; }
.tx-burger--dark span, .tx-burger--dark span::before, .tx-burger--dark span::after { background: var(--brand-500); }

/* En tablet/móvil el logo grande + menú largo no caben: ocultar menú, mostrar hamburguesa */
@media (max-width: 980px) {
  .tx-pubheader--brand .tx-topnav { display: none !important; }
  .tx-pubheader--brand .tx-burger--dark { display: block !important; }
}
@media (max-width: 860px) {
  body.tx-public-bg { padding-top: 96px; }
  .tx-brandblock { padding: 0 1.2rem 0 .8rem; clip-path: none; flex: 0 0 auto; }
  .tx-brandblock img { height: 62px; }
  .tx-pubheader--brand .tx-pubheader__row { height: 82px; padding: 0 var(--s4); }
}

/* ============================================================
   Botón flotante de WhatsApp + campana de notificaciones
   ============================================================ */
.tx-wafloat {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px -4px rgba(37,211,102,.6); transition: transform .15s;
}
.tx-wafloat:hover { transform: scale(1.08); }
@media (max-width: 560px) { .tx-wafloat { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* ============================================================
   Notificaciones del panel (campana + dropdown)
   ============================================================ */
.tx-notif { position: relative; }

.tx-bell {
  position: relative; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  height: 42px; padding: 0 14px 0 12px; border-radius: 12px; background: var(--surface, #fff);
  color: var(--ink-700, #3a3a38); border: 1px solid var(--border, #e6e4dd); cursor: pointer;
  font-family: inherit; transition: background .15s, border-color .15s, color .15s;
}
.tx-bell:hover { background: var(--brand-50, #FEF9E6); border-color: var(--brand-300, #F9D74B); color: var(--ink-900, #141210); }
.tx-bell:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.tx-bell svg { flex-shrink: 0; }

/* Etiqueta de texto junto al ícono */
.tx-bell__label {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  white-space: nowrap; letter-spacing: -.01em;
}
.tx-bell__label b {
  background: #e23b3b; color: #fff; font-size: 11px; font-weight: 800; min-width: 19px; height: 19px;
  padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
/* El badge del número, cuando parpadea, usa negro translúcido: legible sobre rojo, naranja y amarillo */
.tx-bell.has-new .tx-bell__label b { background: rgba(20,18,16,.35); color: #fff; }
/* El badge flotante sobre el ícono solo se usa cuando el botón es compacto (móvil) */
.tx-bell__count--icon { display: none; }

@media (max-width: 720px) {
  .tx-bell { width: 42px; padding: 0; gap: 0; }
  .tx-bell__label { display: none; }
  .tx-bell__count--icon { display: grid; }
}

/* Punto rojo pulsante cuando hay pendientes */
.tx-bell__dot {
  position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: #e23b3b; box-shadow: 0 0 0 2px var(--surface, #fff);
}
.tx-bell.has-new .tx-bell__dot { animation: tx-dot-pulse 1.6s ease-out infinite; }
@keyframes tx-dot-pulse {
  0% { box-shadow: 0 0 0 2px var(--surface,#fff), 0 0 0 0 rgba(226,59,59,.5); }
  70% { box-shadow: 0 0 0 2px var(--surface,#fff), 0 0 0 7px rgba(226,59,59,0); }
  100% { box-shadow: 0 0 0 2px var(--surface,#fff), 0 0 0 0 rgba(226,59,59,0); }
}
/* Campana que parpadea cambiando de color cuando hay pendientes (bien visible) */
.tx-notif .tx-bell.has-new {
  animation: tx-bell-colors 1.4s ease-in-out infinite !important;
  color: #fff !important;
}
.tx-notif .tx-bell.has-new:hover { animation-play-state: paused; }
@keyframes tx-bell-colors {
  0%   { background: #e23b3b; border-color: #e23b3b; transform: scale(1); }
  25%  { background: #F5A200; border-color: #F5A200; transform: scale(1.08); }
  50%  { background: #F5C518; border-color: #F5C518; transform: scale(1); }
  75%  { background: #F5A200; border-color: #F5A200; transform: scale(1.08); }
  100% { background: #e23b3b; border-color: #e23b3b; transform: scale(1); }
}
/* Al llegar uno NUEVO, parpadeo rápido intenso por unos segundos */
.tx-notif .tx-bell.tx-bell--alert { animation: tx-bell-alert .35s steps(1) 9 !important; color:#fff !important; }
@keyframes tx-bell-alert {
  0%   { background:#e23b3b; transform: scale(1.15); }
  50%  { background:#F5C518; transform: scale(1); }
  100% { background:#e23b3b; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin zoom, pero mantenemos el parpadeo de color (más lento) para que se note. */
  .tx-notif .tx-bell.has-new { animation: tx-bell-colors-soft 2.2s ease-in-out infinite !important; }
  .tx-notif .tx-bell.tx-bell--alert { animation: tx-bell-colors-soft .6s steps(1) 6 !important; }
}
@keyframes tx-bell-colors-soft {
  0%   { background: #e23b3b; border-color: #e23b3b; }
  33%  { background: #F5A200; border-color: #F5A200; }
  66%  { background: #F5C518; border-color: #F5C518; }
  100% { background: #e23b3b; border-color: #e23b3b; }
}
.tx-bell__count {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
  background: #e23b3b; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px;
  display: grid; place-items: center; box-shadow: 0 2px 6px -1px rgba(226,59,59,.5);
  font-variant-numeric: tabular-nums;
}

/* Panel desplegable */
.tx-notif__panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-width: 90vw; z-index: 80;
  background: var(--surface, #fff); border: 1px solid var(--border, #e6e4dd); border-radius: 16px;
  box-shadow: 0 12px 40px -8px rgba(20,18,16,.22), 0 2px 8px -2px rgba(20,18,16,.12);
  overflow: hidden;
}
/* flechita del panel */
.tx-notif__panel::before {
  content: ""; position: absolute; top: -6px; right: 14px; width: 12px; height: 12px;
  background: var(--surface, #fff); border-left: 1px solid var(--border,#e6e4dd); border-top: 1px solid var(--border,#e6e4dd);
  transform: rotate(45deg);
}
.tx-notif__enter { transition: opacity .16s ease, transform .16s ease; }
.tx-notif__enter-start { opacity: 0; transform: translateY(-6px); }
.tx-notif__enter-end { opacity: 1; transform: translateY(0); }

.tx-notif__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border, #eee);
}
.tx-notif__title { font-weight: 800; font-size: 14px; color: var(--ink-900, #141210); }
.tx-notif__total {
  background: var(--brand-500); color: #141210; font-weight: 800; font-size: 12px;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.tx-notif__body { padding: 6px; max-height: 320px; overflow-y: auto; }

/* Fila de notificación por tipo */
.tx-notif__row {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 11px;
  text-decoration: none; color: var(--ink-900, #141210); transition: background .12s;
}
.tx-notif__row:hover { background: var(--brand-50, #FEF9E6); }
.tx-notif__row-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 19px; background: var(--surface-2, #f4f2ec); border: 1px solid var(--border, #eee);
}
.tx-notif__row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tx-notif__row-txt strong { font-size: 13.5px; font-weight: 700; }
.tx-notif__row-txt small { font-size: 11.5px; color: var(--ink-500, #8a877e); }
.tx-notif__row-badge {
  background: #e23b3b; color: #fff; font-weight: 800; font-size: 11px; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.tx-notif__row-arrow { color: var(--ink-400, #b3afa4); flex-shrink: 0; }

/* Estado vacío */
.tx-notif__empty { text-align: center; padding: 30px 20px 34px; }
.tx-notif__empty-ico {
  width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%;
  background: color-mix(in srgb, #2E7D5B 14%, transparent); color: #2E7D5B;
  display: grid; place-items: center; font-size: 24px; font-weight: 800;
}
.tx-notif__empty p { font-weight: 700; color: var(--ink-900, #141210); margin: 0 0 3px; }
.tx-notif__empty small { color: var(--ink-500, #8a877e); font-size: 12.5px; }

/* Footer */
.tx-notif__foot {
  display: block; text-align: center; padding: 13px; font-size: 13px; font-weight: 700;
  color: var(--ink-800, #2a2a28); text-decoration: none; border-top: 1px solid var(--border, #eee);
  background: var(--surface-2, #faf9f5); transition: background .12s;
}
.tx-notif__foot:hover { background: var(--brand-50, #FEF9E6); color: var(--ink-900,#141210); }

@media (max-width: 560px) {
  .tx-notif__panel { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; }
  .tx-notif__panel::before { display: none; }
}

/* ============================================================
   MEJORAS v2 — Endurecimiento móvil + pulido
   (el fondo amarillo se mantiene por pedido del cliente;
    aquí solo se adapta lo que lo rodea)
   ============================================================ */

/* Franja de confianza SSL en el footer */
.tx-ssl { display: flex; align-items: center; justify-content: center; gap: 16px;
  background: linear-gradient(180deg,#0e2038,#0a1729); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 14px 22px; margin: 0 auto 28px; max-width: 560px; }
.tx-ssl__seals { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.tx-ssl__txt { display: flex; flex-direction: column; line-height: 1.25; }
.tx-ssl__txt strong { color: #fff; font-size: 15px; font-weight: 800; }
.tx-ssl__txt small { color: #7fb0ff; font-size: 12.5px; }

/* Los inputs nunca imponen su ancho intrínseco (date/number lo hacen) */
.tx-input, .tx-select, .tx-busbar input { max-width: 100%; min-width: 0; box-sizing: border-box; }

/* Íconos de confianza del hero: antes se veían como círculos vacíos */
.tx-trust i {
  color: var(--brand-500);
  background: rgba(255, 193, 7, .18);
  border-color: rgba(255, 193, 7, .55);
  font-weight: 800;
  font-size: 15px;
}

@media (max-width: 860px) {
  /* Regla de oro: nada supera el ancho de la pantalla */
  .tx-shellwrap, .tx-modules, .tx-mod, .tx-hero2, .tx-hero2__inner,
  .tx-edetail, .tx-edetail__aside, .tx-card, .tx-container { max-width: 100%; min-width: 0; }

  /* Hero: menos padding para que el título respire y no se corte */
  .tx-hero2__inner { padding: var(--s4) var(--s3); }
  .tx-hero2__title { font-size: clamp(1.7rem, 8vw, 2.2rem); }

  /* Barra superior: la captación de agente vive en el menú, aquí estorba */
  .tx-topbar-pub__row { font-size: 11px; gap: var(--s2); }
  .tx-topbar-pub__links { gap: var(--s3); }
  .tx-topbar-agent { display: none; }

  /* El texto de los encabezados siempre envuelve, nunca se corta */
  .tx-mod__head p, .tx-mod__head h2, .tx-hero2__sub { overflow-wrap: anywhere; }

  /* Filas de entradas: si el stepper no cabe, baja en vez de cortarse */
  .tx-tt { flex-wrap: wrap; }
  .tx-tt > div:first-child { flex: 1 1 60%; min-width: 0; }
  .tx-qtt { flex: 0 0 auto; }
}

/* Ficha de evento / mapa de asientos: en móvil, columna simple en bloque
   (elimina cualquier ancho mínimo del grid que empujaba fuera de pantalla) */
@media (max-width: 620px) {
  .tx-edetail { display: block; }
  .tx-edetail > * { width: 100%; max-width: 100%; }
  .tx-edetail__aside { margin-top: var(--sp-6); }
  .tx-edetail__aside .tx-card, .tx-edetail__aside .tx-card__body { max-width: 100%; }
  /* Los botones y notas envuelven; nada impone ancho en una línea */
  .tx-edetail .tx-btn { white-space: normal; }
  .tx-edetail p, .tx-edetail .tx-card__title { overflow-wrap: anywhere; }
}

/* ============================================================
   PRO POLISH v3 — el amarillo (marca del cliente) se ve premium
   Depende de: amarillo con profundidad + superficies disciplinadas
   + tipografía con carácter + íconos reales + footer serio
   ============================================================ */

/* 1) Amarillo con PROFUNDIDAD (no un relleno plano y chillón).
   Mantiene el hue de marca; añade luz arriba y sombra abajo. */
body.tx-page-home, body.tx-page-brand, body.tx-public-bg {
  background-color: var(--brand-500);
  background-image:
    radial-gradient(135% 65% at 50% -12%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    radial-gradient(120% 80% at 50% 112%, rgba(120,80,0,.14), rgba(120,80,0,0) 55%);
  background-attachment: fixed, fixed;
}
body.tx-page-home main, body.tx-page-brand main, body.tx-public-bg main { background: transparent !important; }

/* 2) Superficies premium: las tarjetas “flotan” con sombra suave y borde fino */
.tx-mod, .tx-mod--light, .tx-card, .tx-ev, .tx-benefits, .tx-tt {
  box-shadow: 0 10px 30px -18px rgba(20,14,0,.45), 0 2px 8px -4px rgba(20,14,0,.15);
}
.tx-mod--light, .tx-card { border: 1px solid rgba(20,14,0,.08); }

/* 3) Tipografía con más carácter: eyebrows en versalitas espaciadas */
.tx-hero2__eyebrow, .tx-mod__head p, .tx-benefit small, .tx-fnav h4, .tx-fcontact h4 { letter-spacing: .04em; }
.tx-hero2__eyebrow { letter-spacing: .14em; }

/* 4) Trust del hero: sin círculo relleno (menos “plantilla”), ícono limpio */
.tx-trust i { width: auto; height: auto; background: transparent; border: 0; border-radius: 0; color: var(--brand-500); }
.tx-trust i svg { width: 22px; height: 22px; display: block; }

/* ============================================================
   FOOTER PROFESIONAL (referencia del cliente)
   ============================================================ */
.tx-footer--pro { background: #0a1628; color: #cdd6e4; padding: 46px 0 26px; margin-top: 0; }

/* Fila de garantías */
.tx-fpromise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tx-fpromise__item { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px; }
.tx-fpromise__ic { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(245,197,24,.14); color: #f5c518; }
.tx-fpromise__ic svg { width: 20px; height: 20px; }
.tx-fpromise__item b { color: #fff; font-size: 14px; display: block; margin-bottom: 2px; }
.tx-fpromise__item small { color: #8ea0b8; font-size: 12px; line-height: 1.45; }

/* Columnas */
.tx-fcols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 30px; padding: 34px 0 26px; }
.tx-fbrand__logo { display: inline-block; background: #ffffff; border: 1px solid rgba(255,255,255,.12); padding: 8px 14px; border-radius: 10px; }
.tx-fbrand__logo img { height: 34px; display: block; }
.tx-fbrand p { color: #8ea0b8; font-size: 13.5px; line-height: 1.6; margin: 14px 0 16px; max-width: 330px; }
.tx-fsocial { display: flex; gap: 10px; }
.tx-fsocial a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #cdd6e4; transition: all .15s; }
.tx-fsocial a:hover { background: #f5c518; color: #111; transform: translateY(-2px); }
.tx-fsocial svg { width: 18px; height: 18px; }
.tx-fnav h4, .tx-fcontact h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; position: relative; }
.tx-fnav h4::after, .tx-fcontact h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: #f5c518; border-radius: 2px; }
.tx-fnav a { display: block; color: #a7b4c8; font-size: 13.5px; padding: 7px 0; transition: color .15s; }
.tx-fnav a:hover { color: #fff; }
.tx-fcontact__row { display: flex; gap: 10px; align-items: center; color: #a7b4c8; font-size: 13.5px; padding: 7px 0; }
.tx-fcontact__row svg { width: 18px; height: 18px; color: #f5c518; flex: 0 0 18px; }
a.tx-fcontact__row:hover { color: #fff; }
.tx-fhelp { margin-top: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px; }
.tx-fhelp b { color: #fff; display: block; font-size: 14px; }
.tx-fhelp small { color: #8ea0b8; font-size: 12.5px; display: block; margin: 4px 0 12px; }

/* Barra inferior */
.tx-fbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.tx-fbar__ssl { display: flex; align-items: center; gap: 10px; }
.tx-fbar__ssl span { display: flex; flex-direction: column; }
.tx-fbar__ssl b { color: #fff; font-size: 13px; }
.tx-fbar__ssl small { color: #7fb0ff; font-size: 11.5px; }
.tx-fbar__legal { color: #8ea0b8; font-size: 12px; text-align: center; line-height: 1.6; }
.tx-fpay { display: flex; gap: 8px; align-items: center; }
.tx-pay { height: 30px; min-width: 46px; padding: 0 9px; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.tx-pay--visa { color: #1a1f71; font-style: italic; letter-spacing: .02em; }
.tx-pay--yape { color: #742384; }
.tx-pay--plin { color: #00b3a4; }
.tx-pay--mc { gap: 0; }
.tx-pay--mc i { width: 15px; height: 15px; border-radius: 50%; display: block; }
.tx-pay--mc i:first-child { background: #eb001b; }
.tx-pay--mc i:last-child { background: #f79e1b; margin-left: -6px; mix-blend-mode: multiply; }

/* Secciones de valor en la ficha de evento (sobre el amarillo) */
.tx-link { color: var(--ink-900); font-weight: 700; font-size: var(--fs-sm); }
.tx-link:hover { color: var(--ink-700); }
.tx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tx-step { background: #fff; border: 1px solid rgba(20,14,0,.08); border-radius: 14px; padding: 20px; box-shadow: 0 10px 28px -18px rgba(20,14,0,.4); }
.tx-step__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-500); color: #111; font-weight: 800; margin-bottom: 10px; }
.tx-step b { display: block; color: var(--ink-900); margin-bottom: 4px; }
.tx-step small { color: var(--ink-600); font-size: var(--fs-sm); line-height: 1.5; }
.tx-faq__item { background: #fff; border: 1px solid rgba(20,14,0,.08); border-radius: 12px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 8px 22px -18px rgba(20,14,0,.4); }
.tx-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: none; border: 0; cursor: pointer; font: 700 var(--fs-md) var(--font-sans); color: var(--ink-900); text-align: left; }
.tx-faq__q i { font-style: normal; font-size: 1.4rem; color: var(--brand-600); transition: transform var(--t-fast); flex: 0 0 auto; }
.tx-faq__item.is-open .tx-faq__q i { transform: rotate(45deg); }
.tx-faq__a { padding: 0 18px 16px; }
.tx-faq__a p { color: var(--ink-600); font-size: var(--fs-sm); line-height: 1.6; }
.tx-relgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Home: Cómo funciona en 3 pasos */
.tx-howto { margin: var(--s6) 0 var(--s8); text-align: center; }
.tx-howto__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--ink-900); margin: 6px 0 4px; }
.tx-howto__head p { color: var(--ink-800); margin-bottom: var(--sp-6); }
.tx-howto .tx-steps { max-width: 900px; margin: 0 auto; text-align: left; }
.tx-howto__cta { display: flex; gap: 12px; justify-content: center; margin-top: var(--sp-6); flex-wrap: wrap; }
.tx-btn--dark { background: #111; color: #fff; border: 0; }
.tx-btn--dark:hover { background: #000; color: #fff; }
@media (max-width: 560px) { .tx-howto__cta .tx-btn { width: 100%; } }

/* ============================================================
   MICRO-POLISH v4 — escala tipográfica, radios y legibilidad
   (correcciones puntuales medidas con CDP)
   ============================================================ */

/* 1) Escala de títulos de sección consistente (~28px) con Sora.
   Antes: mismos H2 a 20px y 35px. Ahora: un solo tamaño de sección. */
.tx-section > h2,
.tx-howto__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
}

/* 2) Radios normalizados a una escala (12 card · 10 control · 999 pill).
   Antes: 6/7/8/10/11/12/16px mezclados. */
.tx-card, .tx-mod, .tx-mod--light, .tx-mod--dark,
.tx-ev, .tx-infocard, .tx-step, .tx-faq__item, .tx-tt,
.tx-fpromise__item, .tx-fhelp { border-radius: 12px; }
.tx-btn, .tx-input, .tx-select, .tx-busbar__field,
.tx-qtt input, .tx-qtt button { border-radius: 10px; }

/* 3) Legibilidad: nada de texto por debajo de ~11px.
   Antes: mes "AGO." a 8px, ciudad a 10.5px. */
.tx-ev__date small { font-size: 11px; letter-spacing: .06em; opacity: .85; }
.tx-ev__city { font-size: 12px; }
.tx-trust small { font-size: 12px; }
.tx-fpromise__item small, .tx-fhelp small { font-size: 12.5px; }

/* Radios sueltos restantes → escala (8 badge · 12 marco) */
.tx-ev__date { border-radius: 8px; }
.tx-pay { border-radius: 8px; }
.tx-benefit i, .tx-logo__mark { border-radius: 12px; }

/* 4) Ritmo vertical de secciones uniforme */
.tx-section { margin-bottom: var(--sp-8); }
.tx-section + .tx-section { margin-top: 0; }

/* ============================================================
   BUSCADOR UNIFICADO CON PESTAÑAS (reemplaza las dos cajas)
   ============================================================ */
.tx-hub { max-width: 920px; margin: -52px auto 0; position: relative; z-index: 5; }
.tx-hub__tabs { display: flex; gap: 6px; padding: 0 10px; }
.tx-hub__tab { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.72); color: var(--ink-600); border: 0; border-radius: 12px 12px 0 0; padding: 12px 22px; font: 700 var(--fs-sm) var(--font-sans); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.tx-hub__tab svg { width: 18px; height: 18px; }
.tx-hub__tab.is-active { background: #fff; color: var(--ink-900); }
.tx-hub__body { background: #fff; border-radius: 0 16px 16px 16px; padding: 18px; box-shadow: 0 24px 60px -28px rgba(20,14,0,.55); }
.tx-hub__form { display: flex; gap: 12px; align-items: stretch; }
.tx-hub__form--bus { flex-wrap: wrap; }
.tx-hub__field { display: flex; align-items: center; gap: 10px; background: var(--surface-2, #f6f5f2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; flex: 1 1 190px; min-width: 0; }
.tx-hub__field--grow { flex: 1 1 auto; }
.tx-hub__field svg { width: 20px; height: 20px; color: var(--ink-500); flex: 0 0 auto; }
.tx-hub__field > div { flex: 1; min-width: 0; }
.tx-hub__field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); font-weight: 700; }
.tx-hub__field input, .tx-hub__field select { border: 0; background: transparent; width: 100%; font: 600 var(--fs-md) var(--font-sans); color: var(--ink-900); outline: none; padding: 0; }
.tx-hub__form .tx-btn { flex: 0 0 auto; }
.tx-hub__note { text-align: center; color: var(--ink-800); font-size: var(--fs-sm); margin-top: 14px; font-weight: 600; }
@media (max-width: 760px) {
  .tx-hub { margin-top: var(--sp-6); }
  .tx-hub__form { flex-direction: column; }
  .tx-hub__field { flex-basis: auto; }
  .tx-hub__form .tx-btn { width: 100%; }
}

/* Secciones destacadas full-width */
.tx-feat { margin: var(--s6) 0; }
.tx-feat__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: 12px; }
.tx-feat__head h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; color: var(--ink-900); }

/* (Rutas populares vuelven a su estilo original dentro del módulo oscuro) */

/* ============================================================
   SIDEBAR TELEMAX v3 — jerarquía real, amarillo como acento
   ============================================================ */
:root {
  --sb-bg: #121212;
  --sb-bg-2: #181818;
  --sb-hover: #222222;
  --sb-text: #F5F5F5;
  --sb-text-2: #A3A3A3;
  --sb-yellow: #FACC15;
  --sb-border: rgba(255,255,255,.07);
  --sb-red: #EF4444;
  --sb-w: 260px;
  --sb-w-collapsed: 76px;
}

.tx-shell { grid-template-columns: var(--sb-w) 1fr; }
.tx-shell:has(.tx-sidebar.is-collapsed) { grid-template-columns: var(--sb-w-collapsed) 1fr; }

.tx-sidebar {
  background: var(--sb-bg); color: var(--sb-text);
  border-right: 1px solid var(--sb-border);
  padding: 0 12px 12px; gap: 0;
  height: 100vh; position: sticky; top: 0; overflow-y: auto; overflow-x: hidden;
  transition: width 180ms ease;
}
.tx-sidebar::-webkit-scrollbar { width: 6px; }
.tx-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

/* Marca */
.tx-sidebar__brand {
  height: 76px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 4px; margin-bottom: 10px; font-size: inherit;
  border-bottom: 1px solid var(--sb-border);
}
/* El logotipo lleva "MAX" y el tagline en negro/marrón oscuro: sobre el sidebar
   #121212 se pierden y solo se lee "ELE". Necesita fondo claro. La placa blanca
   ajusta al logo (padding mínimo) para no leerse como un segundo marco sobre la
   caja negra que el propio PNG ya trae. */
.tx-sidebar__logo-wrap { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0;
  background: #fff; padding: 5px 8px; border-radius: 10px; }
.tx-sidebar__logo { height: 34px; width: auto; max-width: 100%; display: block; object-fit: contain; }
.tx-sidebar__collapse {
  flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--sb-border); border-radius: 8px;
  color: var(--sb-text-2); cursor: pointer; transition: all 160ms ease;
}
.tx-sidebar__collapse svg { width: 16px; height: 16px; }
.tx-sidebar__collapse:hover { background: var(--sb-hover); color: var(--sb-text); }

/* Navegación */
.tx-sidebar__nav { display: flex; flex-direction: column; gap: 6px; flex: 1; padding-top: 4px; }

/* Enlace / cabecera de sección: mismo componente, misma altura */
.tx-navlink {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 46px; padding: 0 15px; border-radius: 11px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--sb-text-2); font: 600 14px var(--font-sans);
  transition: background 160ms ease, color 160ms ease;
}
.tx-navlink:hover { background: var(--sb-hover); color: var(--sb-text); }
.tx-navlink .tx-nav-icon { flex: 0 0 20px; display: grid; place-items: center; }
.tx-navlink .tx-nav-icon svg { width: 19px; height: 19px; }
.tx-navlink__txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-navlink__chev { flex: 0 0 auto; display: grid; place-items: center; color: var(--sb-text-2); }
.tx-navlink__chev .tx-nav-icon svg { width: 15px; height: 15px; transition: transform 180ms ease; }

/* Activo: pastilla amarilla compacta */
.tx-navlink.is-active { background: var(--sb-yellow); color: #141210; font-weight: 700; }
.tx-navlink.is-active .tx-nav-icon { color: #141210; }

/* Sección expandida */
.tx-navgroup { margin-top: 0; }
.tx-navgroup.is-expanded > .tx-navlink { color: var(--sb-text); }
.tx-navgroup.is-expanded > .tx-navlink .tx-navlink__chev .tx-nav-icon svg { transform: rotate(180deg); }
.tx-navgroup.is-expanded > .tx-navlink .tx-navlink__chev { color: var(--sb-yellow); }

/* Submenú: bloque con guía vertical */
.tx-navsub {
  display: flex; flex-direction: column; gap: 4px;
  margin: 6px 0 6px 26px; padding-left: 12px;
  border-left: 1px solid var(--sb-border);
}
.tx-navsub__item {
  display: flex; align-items: center; gap: 10px; position: relative;
  min-height: 40px; padding: 0 12px; border-radius: 9px;
  color: var(--sb-text-2); font: 500 13.5px var(--font-sans);
  transition: background 160ms ease, color 160ms ease;
}
.tx-navsub__item:hover { background: var(--sb-hover); color: var(--sb-text); }
.tx-navsub__item .tx-nav-icon { flex: 0 0 18px; display: grid; place-items: center; }
.tx-navsub__item .tx-nav-icon svg { width: 16px; height: 16px; }
.tx-navsub__item span:not(.tx-nav-icon):not(.tx-navbadge) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Subitem activo: sutil, con barra amarilla */
.tx-navsub__item.is-active { background: rgba(250,204,21,.12); color: var(--sb-yellow); font-weight: 600; }
.tx-navsub__item.is-active::before {
  content: ''; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 2px; background: var(--sb-yellow);
}

/* Badge de pendientes */
.tx-navbadge {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--sb-red); color: #fff; font: 700 11px var(--font-sans);
}
.tx-navbadge--dot { margin-right: 2px; }

/* Cuenta y logout */
.tx-sidebar__account { margin-top: auto; padding: 12px 0 4px; border-top: 1px solid var(--sb-border); }
.tx-acct { background: var(--sb-bg-2); border: 1px solid var(--sb-border); border-radius: 12px;
  padding: 10px; margin-bottom: 8px; gap: 10px; }
.tx-acct__avatar { background: var(--sb-yellow); color: #141210; }
.tx-acct__info strong { color: var(--sb-text); }
.tx-acct__info small { color: var(--sb-text-2); }
.tx-logout {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 42px; padding: 0 14px; border-radius: 10px;
  background: var(--sb-bg-2); border: 1px solid var(--sb-border);
  color: var(--sb-text-2); font: 600 13.5px var(--font-sans); cursor: pointer;
  transition: all 160ms ease;
}
.tx-logout .tx-nav-icon svg { width: 17px; height: 17px; }
.tx-logout:hover { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.45); color: #fff; }

/* ---- Modo colapsado (solo iconos + tooltip) ---- */
.tx-sidebar.is-collapsed { padding-left: 10px; padding-right: 10px; }
.tx-sidebar.is-collapsed .tx-navlink__txt,
.tx-sidebar.is-collapsed .tx-navlink__chev,
.tx-sidebar.is-collapsed .tx-navsub,
.tx-sidebar.is-collapsed .tx-acct__info,
.tx-sidebar.is-collapsed .tx-logout .tx-navlink__txt,
.tx-sidebar.is-collapsed .tx-navbadge:not(.tx-navbadge--dot) { display: none; }
.tx-sidebar.is-collapsed .tx-navlink,
.tx-sidebar.is-collapsed .tx-logout { justify-content: center; padding: 0; }
.tx-sidebar.is-collapsed .tx-acct { justify-content: center; padding: 8px; }
.tx-sidebar.is-collapsed .tx-sidebar__brand { justify-content: center; }
.tx-sidebar.is-collapsed .tx-sidebar__collapse { display: none; }
/* Colapsado (76px): el PNG es una sola caja negra continua (flecha + lettering),
   no hay isotipo separable, así que recortarlo parte una letra. Se muestra el
   logotipo completo escalado al ancho disponible. */
.tx-sidebar.is-collapsed .tx-sidebar__logo-wrap { padding: 4px 5px; border-radius: 8px; flex: 0 0 auto; }
.tx-sidebar.is-collapsed .tx-sidebar__logo { height: auto; width: 46px; max-width: none; }
.tx-sidebar.is-collapsed .tx-navbadge--dot {
  position: absolute; top: 6px; right: 8px; min-width: 8px; width: 8px; height: 8px;
  padding: 0; font-size: 0; }
.tx-sidebar.is-collapsed .tx-navlink { position: relative; }
/* Tooltip */
.tx-sidebar.is-collapsed [data-tip] { position: relative; }
.tx-sidebar.is-collapsed [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%); white-space: nowrap; z-index: 60;
  background: #2a2a2a; color: #fff; font: 600 12.5px var(--font-sans);
  padding: 7px 11px; border-radius: 8px; border: 1px solid var(--sb-border);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); pointer-events: none;
}

/* ---- Móvil / tablet: drawer ---- */
@media (max-width: 980px) {
  .tx-shell, .tx-shell:has(.tx-sidebar.is-collapsed) { grid-template-columns: 1fr; }
  .tx-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w); z-index: 70;
    transform: translateX(-100%); transition: transform 180ms ease;
  }
  .tx-sidebar.is-open { transform: translateX(0); }
  .tx-sidebar.is-collapsed { width: var(--sb-w); padding: 0 12px 12px; }
  .tx-sidebar.is-collapsed .tx-navlink__txt,
  .tx-sidebar.is-collapsed .tx-navlink__chev,
  .tx-sidebar.is-collapsed .tx-acct__info,
  .tx-sidebar.is-collapsed .tx-logout .tx-navlink__txt { display: flex; }
  .tx-sidebar.is-collapsed .tx-navlink,
  .tx-sidebar.is-collapsed .tx-logout { justify-content: flex-start; padding: 0 15px; }
  .tx-sidebar.is-collapsed .tx-sidebar__collapse { display: none; }
}

/* ============================================================
   DASHBOARD ADMIN v2 — saludo, KPIs con tendencia, gráfica, top
   ============================================================ */
.tx-dash__hello { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.tx-dash__hello h1 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 800; letter-spacing: -.02em; color: var(--ink-900); }
.tx-dash__hello p { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 2px; }
.tx-dash__date { display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; box-shadow: var(--sh-sm); }
.tx-dash__date-ico { display: grid; place-items: center; color: var(--ink-500); }
.tx-dash__date-ico svg { width: 20px; height: 20px; }
.tx-dash__date span { display: flex; flex-direction: column; line-height: 1.25; }
.tx-dash__date small { color: var(--ink-500); font-size: 11px; }
.tx-dash__date strong { color: var(--ink-900); font-size: 13px; }
.tx-dash__date select { border: 0; background: transparent; padding: 0; margin: 0;
  font: 700 13px var(--font-sans); color: var(--ink-900); cursor: pointer; outline: none; }
.tx-dash__sec { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  color: var(--ink-900); margin: var(--sp-6) 0 var(--sp-4); }

/* Selector de vista del dashboard (solo super admin) */
.tx-viewtabs { display: inline-flex; gap: 4px; background: var(--surface-2, #f1f0ec);
  border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: var(--sp-5); }
.tx-viewtabs__tab { display: inline-flex; align-items: center; gap: 7px; border: 0;
  background: transparent; color: var(--ink-600); font: 700 var(--fs-sm) var(--font-sans);
  padding: 9px 16px; border-radius: 9px; cursor: pointer; transition: all var(--t-fast); white-space: nowrap; }
.tx-viewtabs__tab:hover { color: var(--ink-900); }
.tx-viewtabs__tab.is-active { background: var(--surface); color: var(--ink-900);
  box-shadow: 0 2px 8px -3px rgba(20,14,0,.25); }
@media (max-width: 520px) { .tx-viewtabs { display: flex; width: 100%; }
  .tx-viewtabs__tab { flex: 1; justify-content: center; padding: 9px 8px; } }

/* KPIs */
.tx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: var(--sp-5); }
.tx-kpi { display: flex; align-items: flex-start; gap: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 18px;
  box-shadow: 0 10px 28px -20px rgba(20,14,0,.45); }
.tx-kpi__ico { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px; }
.tx-kpi__ico--brand { background: #FEF3C7; }
.tx-kpi__ico--amber { background: #FEF9C3; }
.tx-kpi__ico--pink { background: #FCE7F3; }
.tx-kpi__ico--violet { background: #EDE9FE; }
.tx-kpi__body { display: flex; flex-direction: column; min-width: 0; }
.tx-kpi__label { color: var(--ink-500); font-size: var(--fs-sm); }
.tx-kpi__value { font-size: 1.6rem; font-weight: 800; color: var(--ink-900); line-height: 1.15; margin: 2px 0 6px; }
.tx-kpi__trend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tx-kpi__trend b { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tx-kpi__trend b.is-up { color: #15803d; background: #dcfce7; }
.tx-kpi__trend b.is-down { color: #b91c1c; background: #fee2e2; }
.tx-kpi__trend b.is-flat { color: var(--ink-500); background: var(--surface-2, #f1f0ec); }
.tx-kpi__trend small { color: var(--ink-500); font-size: 11.5px; }

/* Callout de pagos por validar */
.tx-callout { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #FFFBEB; border: 1px solid rgba(245,197,24,.55); border-radius: 14px;
  padding: 16px 18px; margin-bottom: var(--sp-5); }
.tx-callout__ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(245,197,24,.28); display: grid; place-items: center; font-size: 20px; }
.tx-callout__txt { flex: 1 1 260px; display: flex; flex-direction: column; }
.tx-callout__txt strong { color: var(--ink-900); }
.tx-callout__txt small { color: var(--ink-600); font-size: var(--fs-sm); }

/* Grid principal: gráfica + top */
.tx-dash__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.tx-card__sub { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 2px; }
.tx-card__body--flush { padding: 0; }

/* Gráfica de barras con eje */
.tx-chart { display: flex; gap: 12px; }
.tx-chart__axis { display: flex; flex-direction: column; justify-content: space-between;
  height: 210px; color: var(--ink-400, #9aa0a6); font-size: 11px; text-align: right; flex: 0 0 auto; }
.tx-chart__plot { flex: 1; min-width: 0; position: relative; }
.tx-chart__bars { display: flex; align-items: flex-end; gap: 6px; height: 210px;
  border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); padding: 0 4px; }
.tx-chart__col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.tx-chart__bar { width: 100%; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--brand-400, #F7D34D), var(--brand-600, #C99700)); }
.tx-chart__empty { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center; height: 100%; }
.tx-chart__empty span { font-size: 28px; opacity: .35; }
.tx-chart__empty strong { color: var(--ink-700); font-size: var(--fs-md); }
.tx-chart__empty small { color: var(--ink-500); font-size: var(--fs-sm); }
.tx-chart__labels { display: flex; gap: 6px; padding: 6px 4px 0; }
.tx-chart__labels span { flex: 1; text-align: center; font-size: 10px; color: var(--ink-400, #9aa0a6);
  white-space: nowrap; overflow: hidden; }

/* Filas del top */
.tx-toprow { display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--border); }
.tx-toprow__rank { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--surface-2, #f1f0ec); color: var(--ink-600); }
.tx-toprow__rank--1 { background: #FEF3C7; color: #92400e; }
.tx-toprow__rank--2 { background: #F1F5F9; color: #475569; }
.tx-toprow__rank--3 { background: #FFEDD5; color: #9a3412; }
.tx-toprow__thumb { flex: 0 0 44px; width: 44px; height: 34px; border-radius: 8px;
  background: var(--surface-2, #f1f0ec) center/cover no-repeat; }
.tx-toprow__title { flex: 1; min-width: 0; color: var(--ink-900); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-toprow__amount { color: var(--ink-900); font-weight: 800; white-space: nowrap; }
.tx-toprow__all { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm);
  background: var(--surface-2, #faf9f6); transition: background var(--t-fast); }
.tx-toprow__all:hover { background: var(--brand-50, #FEF9E6); color: var(--ink-900); }

@media (max-width: 1100px) {
  .tx-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tx-dash__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tx-kpis { grid-template-columns: 1fr; }
  .tx-chart__labels span:nth-child(even) { display: none; }
}

/* ============================================================
   SIDEBAR ADMIN — bloque de usuario (no tenía estilos)
   ============================================================ */
.tx-sidebar__account {
  margin-top: auto; padding: 14px 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.tx-acct { display: flex; align-items: center; gap: 10px; padding: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; margin-bottom: 10px; }
.tx-acct__avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-500); color: #141210; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; }
.tx-acct__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tx-acct__info strong { color: #fff; font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-acct__info small { color: rgba(255,255,255,.55); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-nav-item--logout { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75); border-radius: 10px; cursor: pointer;
  justify-content: flex-start; transition: all var(--t-fast); }
.tx-nav-item--logout:hover { background: rgba(229,72,77,.14); border-color: rgba(229,72,77,.45); color: #fff; }

/* ============================================================
   BLOQUE "¿CÓMO PAGAR?" — datos de pago del organizador
   ============================================================ */
.tx-payinfo__total { font-size: var(--fs-lg); color: var(--ink-800); margin-bottom: var(--sp-4); }
.tx-payinfo__total strong { font-size: 1.35rem; color: var(--ink-900); }
.tx-payinfo { border: 1px solid var(--brand-300, rgba(245,197,24,.55)); background: var(--brand-50, #FEF9E6);
  border-radius: 14px; padding: 18px 20px; margin-bottom: var(--sp-5); }
.tx-payinfo__head { font-weight: 800; color: var(--ink-900); margin-bottom: 12px; font-size: var(--fs-md); }
.tx-payinfo__grid { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.tx-payinfo__methods { flex: 1 1 260px; min-width: 0; }
.tx-payinfo__yape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tx-payinfo__yape strong { font-size: 1.5rem; font-weight: 800; color: var(--ink-900); letter-spacing: .02em; }
.tx-payinfo__row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px dashed rgba(20,14,0,.12); }
.tx-payinfo__row small { flex: 0 0 78px; color: var(--ink-500); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.tx-payinfo__row span { color: var(--ink-900); font-weight: 600; word-break: break-all; }
.tx-payinfo__qr { flex: 0 0 auto; text-align: center; background: #fff; border: 1px solid rgba(20,14,0,.1); border-radius: 12px; padding: 12px; }
.tx-payinfo__qr svg { width: 130px; height: 130px; display: block; }
.tx-payinfo__qr small { display: block; margin-top: 6px; color: var(--ink-500); font-size: 11px; }
.tx-payinfo__note { margin-top: 12px; color: var(--ink-700); font-size: var(--fs-sm); }
@media (max-width: 560px) { .tx-payinfo__grid { flex-direction: column; } .tx-payinfo__qr { align-self: center; } }

/* Tarjetas de destino/ruta ahora son enlaces reales */
a.tx-routecard, a.tx-pcard { text-decoration: none; color: inherit; }
a.tx-routecard { display: block; transition: transform var(--t-fast), box-shadow var(--t-fast); }
a.tx-routecard:hover { transform: translateY(-3px); }

/* Login / registro: on-brand (amarillo, no verde/azul) + chips de confianza */
.tx-authpage__brandside::before { background: radial-gradient(circle, rgba(245,197,24,.30), transparent 65%); }
.tx-authpage__brandside::after { background: radial-gradient(circle, rgba(245,197,24,.13), transparent 65%); }
.tx-authpage__proof { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-6); }
.tx-authpage__proof span { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); }

/* Alertas: eran flex con gap → partían las frases con <strong> en columnas.
   Bloque = el texto y su énfasis fluyen en línea. */
.tx-alert { display: block; }
.tx-alert strong { color: inherit; }

/* Aire arriba en páginas de contenido sin hero (mis entradas, orden, favoritos) */
body.tx-page-brand main > .tx-container:first-child,
body.tx-public-bg main > .tx-container:first-child { padding-top: var(--sp-6); }
.tx-page-head { padding-top: 4px; }

/* Páginas legales y Libro de Reclamaciones: contenido sobre HOJA blanca
   (texto largo/oficial no debe leerse sobre el amarillo intenso) */
.tx-prose {
  background: #fff; border: 1px solid rgba(20,14,0,.08); border-radius: 14px;
  padding: 30px 34px; box-shadow: 0 16px 44px -26px rgba(20,14,0,.5);
  color: var(--ink-700); line-height: 1.7; max-width: 820px;
}
.tx-prose .tx-legal__index { background: var(--surface-2, #f6f5f2); }
.tx-formsection {
  background: #fff; border: 1px solid rgba(20,14,0,.08); border-radius: 14px;
  padding: 24px 26px; margin-bottom: 16px; box-shadow: 0 12px 34px -22px rgba(20,14,0,.45);
}

@media (max-width: 860px) {
  .tx-steps { grid-template-columns: 1fr; }
  .tx-relgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .tx-fpromise { grid-template-columns: 1fr 1fr; }
  .tx-fcols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tx-fpromise { grid-template-columns: 1fr; }
  .tx-fcols { grid-template-columns: 1fr; gap: 22px; }
  .tx-fbar { flex-direction: column; text-align: center; }
  .tx-fbar__legal { order: 3; }
}

/* ============================================================
   SECCION EVENTOS — listado, ordenes y cola de validacion
   Amarillo de marca solo en acciones y estados que exigen atencion.
   ============================================================ */

/* Utilidades que faltaban */
.tx-fs-xs { font-size: var(--fs-xs); }
.tx-num { text-align: right; }
.tx-queue-sub { font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* --- Tarjetas de indicadores (KPI) --- */
.tx-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-6);
}
.tx-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  display: block; color: inherit;
}
a.tx-kpi { transition: border-color var(--t-fast), box-shadow var(--t-fast); }
a.tx-kpi:hover { border-color: var(--brand-300); box-shadow: var(--sh-md); color: inherit; }
/* Requiere accion: borde de marca, no relleno */
.tx-kpi--next { border-left: 3px solid var(--brand-500); }
.tx-kpi--alert { border-left: 3px solid var(--danger-500); }
.tx-kpi__label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-500); font-weight: 700;
}
.tx-kpi__value {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  margin-top: var(--sp-1); letter-spacing: -.02em; line-height: 1.15;
}
.tx-kpi__value--sm { font-size: var(--fs-lg); margin-top: var(--sp-2); }
.tx-kpi__value--danger { color: var(--danger-600); }
.tx-kpi__hint { color: var(--ink-500); font-size: var(--fs-xs); margin-top: 2px; }
.tx-kpi__hint--brand { color: var(--brand-700); font-weight: 700; }

/* --- Barra de busqueda y filtros --- */
.tx-filterbar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.tx-filterbar__search {
  flex-grow: 1; min-width: 220px; display: flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: .5rem .7rem; background: var(--surface-2); color: var(--ink-500);
}
.tx-filterbar__search input {
  border: 0; background: transparent; outline: none; width: 100%;
  font: 400 var(--fs-sm) var(--font-sans); color: var(--ink-900);
}
.tx-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tx-chip {
  padding: .4rem .8rem; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--surface); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-600); transition: all var(--t-fast);
}
.tx-chip:hover { border-color: var(--brand-300); color: var(--ink-900); }
.tx-chip.is-on { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* --- Listado de eventos --- */
.tx-evlist { display: flex; flex-direction: column; gap: var(--sp-3); }
.tx-evrow {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); overflow: hidden; display: flex; align-items: stretch;
}
.tx-evrow__cover {
  width: 148px; flex-shrink: 0; background: var(--grad-night);
  background-size: cover; background-position: center; position: relative;
}
.tx-evrow__cover--empty {
  background: var(--surface-2); border-right: 1px dashed var(--border-strong);
  display: grid; place-items: center; align-content: center; gap: var(--sp-1);
  color: var(--ink-300); text-align: center;
}
.tx-evrow__cover--empty span { font-size: .5625rem; color: var(--ink-400); font-weight: 600; }
.tx-evrow__date {
  position: absolute; top: 9px; left: 9px; background: rgba(255,255,255,.92);
  color: var(--ink-900); font-size: var(--fs-xs); font-weight: 800;
  padding: 3px 7px; border-radius: var(--r-sm); letter-spacing: .02em;
}
.tx-evrow__body {
  flex-grow: 1; min-width: 0; padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
}
.tx-evrow__main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tx-evrow__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tx-evrow__title strong {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 700; letter-spacing: -.01em;
}
.tx-evrow__where { color: var(--ink-500); font-size: var(--fs-sm); }
.tx-evrow__actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* Barra de avance de venta */
.tx-progress { display: flex; align-items: center; gap: var(--sp-3); }
.tx-progress__bar {
  width: 190px; max-width: 40vw; height: 6px; background: var(--border);
  border-radius: var(--r-full); overflow: hidden;
}
.tx-progress__bar span { display: block; height: 100%; background: var(--brand-500); border-radius: var(--r-full); }
.tx-progress__label { font-size: var(--fs-xs); color: var(--ink-600); font-weight: 600; }

/* --- Cola de validacion de pagos --- */
.tx-queue-title { display: flex; align-items: center; gap: var(--sp-2); }
.tx-queue-count {
  background: #E23B3B; color: #fff; font-size: var(--fs-xs); font-weight: 800;
  min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--r-full);
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}
.tx-queue { display: flex; flex-direction: column; gap: var(--sp-3); }
.tx-qrow {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: var(--sp-4); display: flex;
  align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.tx-qrow__thumb {
  width: 78px; height: 96px; border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--surface-2); flex-shrink: 0; position: relative; overflow: hidden; display: block;
}
.tx-qrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tx-qrow__thumb--empty {
  border-style: dashed; display: grid; place-items: center; align-content: center;
  gap: var(--sp-1); color: var(--ink-300); text-align: center;
}
.tx-qrow__thumb--empty span { font-size: .5625rem; color: var(--ink-400); font-weight: 600; }
.tx-qrow__method {
  position: absolute; bottom: 5px; right: 5px; background: rgba(20,20,20,.78);
  color: #fff; font-size: .5625rem; font-weight: 700; padding: 2px 5px; border-radius: 4px;
}
.tx-qrow__main { flex-grow: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--sp-1); }
.tx-qrow__who { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tx-qrow__who strong { font-size: var(--fs-md); font-weight: 700; }
.tx-qrow__what { color: var(--ink-600); font-size: var(--fs-sm); }
.tx-qrow__meta {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--ink-500); font-size: var(--fs-xs); flex-wrap: wrap;
}
.tx-qrow__code { font-weight: 600; color: var(--ink-700); }
.tx-qrow__amount { text-align: right; flex-shrink: 0; }
.tx-qrow__money { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.tx-qrow__bank { font-size: var(--fs-xs); margin-top: 2px; }
.tx-qrow__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.tx-qrow__actions form { display: contents; }

/* Aprobar/Rechazar: verde y rojo significan si/no, no marca */
.tx-btn--approve { background: var(--success-500); color: #fff; border-color: var(--success-500); font-weight: 700; }
.tx-btn--approve:hover { background: #15803D; border-color: #15803D; color: #fff; }
.tx-btn--reject { background: var(--surface); color: var(--danger-600); border-color: #F0C9C9; }
.tx-btn--reject:hover { background: #FEF2F2; border-color: var(--danger-500); color: var(--danger-600); }

.tx-tag { font-size: var(--fs-xs); font-weight: 700; padding: .18rem .5rem; border-radius: var(--r-full); }
.tx-tag--danger { background: rgba(226,59,59,.12); color: var(--danger-600); }

.tx-queue__empty {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-12) var(--sp-6); text-align: center;
}
.tx-queue__empty-ico {
  width: 44px; height: 44px; margin: 0 auto var(--sp-3); border-radius: var(--r-full);
  background: var(--mint-bg); color: var(--success-500);
  display: grid; place-items: center; font-size: var(--fs-lg); font-weight: 700;
}

/* Tabla compacta de ordenes */
.tx-table--compact td { padding: var(--sp-3) var(--sp-4); }

@media (max-width: 900px) {
  .tx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tx-evrow { flex-direction: column; }
  .tx-evrow__cover { width: 100%; height: 110px; }
  .tx-evrow__cover--empty { border-right: 0; border-bottom: 1px dashed var(--border-strong); }
  .tx-evrow__body { flex-direction: column; align-items: flex-start; }
  .tx-evrow__actions { width: 100%; }
  .tx-qrow { align-items: flex-start; }
  .tx-qrow__amount { text-align: left; }
  .tx-qrow__actions { width: 100%; }
}
@media (max-width: 560px) {
  .tx-kpis { grid-template-columns: 1fr; }
}

/* ============================================================
   PÁGINAS DE ERROR (419 / 404 / 500 / 403)
   Reemplazan la pantalla genérica "PAGE EXPIRED" en inglés por
   una página de marca, en español, con salida clara.
   ============================================================ */
.tx-errpage {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--brand-500);
  background-image:
    radial-gradient(60rem 30rem at 15% -10%, rgba(255,255,255,.42), transparent 62%),
    radial-gradient(48rem 26rem at 100% 110%, rgba(0,0,0,.10), transparent 60%);
}
.tx-errpage__card {
  width: min(560px, 100%); background: #fff; border-radius: var(--r-xl);
  border: 1px solid var(--border); box-shadow: var(--sh-lg);
  padding: clamp(1.75rem, 5vw, 3rem); text-align: center;
}
.tx-errpage__brand { display: block; margin: 0 auto var(--sp-5); width: max-content; }
.tx-errpage__brand img { height: 40px; width: auto; display: block; }
.tx-errpage__code {
  display: block; width: max-content; margin: 0 auto var(--sp-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .12em; color: var(--ink-600);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 999px;
}
.tx-errpage__title {
  font-family: var(--font-display); font-weight: 700; color: var(--ink-900);
  font-size: clamp(1.35rem, 4vw, 1.75rem); line-height: 1.25; margin: 0 0 var(--sp-3);
}
.tx-errpage__text {
  color: var(--ink-600); font-size: var(--fs-md); line-height: 1.6;
  margin: 0 auto var(--sp-6); max-width: 44ch;
}
.tx-errpage__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center;
}
.tx-errpage__actions .tx-btn { min-width: 168px; }
.tx-errpage__help {
  margin: var(--sp-6) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--ink-500);
}
@media (max-width: 480px) {
  .tx-errpage__actions { flex-direction: column; }
  .tx-errpage__actions .tx-btn { width: 100%; }
}
.tx-errpage__help a { color: var(--brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tx-errpage__help a:hover { color: var(--ink-900); }

/* Fecha de salida en la tarjeta de viaje: solo aparece cuando los resultados
   abarcan varios días, para que dos salidas de la misma hora en días distintos
   no se lean como duplicadas. */
.tx-tripcard__time { flex-wrap: wrap; }
.tx-tripcard__date {
  flex: 0 0 100%; font-family: var(--font-sans); font-weight: 600;
  font-size: var(--fs-xs); color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}