/* MASTERTICKETS v2 - Full Responsive + Micro-Animaciones */
:root{--bg-app:#F8FAFC;--bg-surface:#FFFFFF;--bg-subtle:#F1F5F9;--bg-dark:#0A0E1A;--text-primary:#0F172A;--text-secondary:#475569;--text-muted:#64748B;--text-inverse:#FFFFFF;--border-subtle:#E2E8F0;--border-strong:#CBD5E1;--border-dark:#2A3447;--primary:#4F46E5;--primary-hover:#4338CA;--primary-light:#EEF2FF;--primary-text:#3730A3;--success:#059669;--success-light:#ECFDF5;--success-text:#065F46;--warning:#D97706;--warning-light:#FFFBEB;--warning-text:#92400E;--danger:#E11D48;--danger-light:#FFF1F2;--danger-text:#9F1239;--font-display:'Space Grotesk',-apple-system,sans-serif;--font-body:'Plus Jakarta Sans',-apple-system,sans-serif;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;--shadow-xs:0 1px 2px rgba(15,23,42,.05);--shadow-sm:0 1px 3px rgba(15,23,42,.08),0 1px 2px -1px rgba(15,23,42,.04);--shadow-md:0 4px 6px -1px rgba(15,23,42,.07);--shadow-lg:0 10px 15px -3px rgba(15,23,42,.08);--shadow-xl:0 20px 25px -5px rgba(15,23,42,.08);--ease-out:cubic-bezier(0,0,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-smooth:cubic-bezier(.4,0,.2,1);--dur-fast:120ms;--dur-normal:200ms;--dur-slow:350ms}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{font-family:var(--font-body);color:var(--text-primary);background-color:var(--bg-app);line-height:1.6;font-size:15px;min-height:100vh}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;color:var(--text-primary);line-height:1.2;letter-spacing:-.02em}
h1{font-size:clamp(1.6rem,5vw,2.75rem)}h2{font-size:clamp(1.25rem,3.5vw,2rem)}h3{font-size:clamp(1rem,2vw,1.25rem)}h4{font-size:1.05rem}
a{color:var(--primary);text-decoration:none;transition:color var(--dur-fast) var(--ease-smooth)}a:hover{color:var(--primary-hover)}
p{color:var(--text-secondary);margin-bottom:1rem}p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.container{padding:0 24px}}
@media(min-width:1200px){.container{padding:0 32px}}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes pulseUrgent{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}
@keyframes shimmer{from{background-position:-400px 0}to{background-position:400px 0}}
@keyframes badgePop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes tickerPulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.3)}50%{box-shadow:0 0 0 8px rgba(79,70,229,0)}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.4)}50%{box-shadow:0 0 0 6px rgba(5,150,105,0)}}
.anim-fade-up{animation:fadeInUp var(--dur-slow) var(--ease-out) both}
.anim-fade-in{animation:fadeIn var(--dur-slow) var(--ease-out) both}
.anim-scale-in{animation:scaleIn var(--dur-slow) var(--ease-spring) both}
.anim-delay-1{animation-delay:60ms}.anim-delay-2{animation-delay:120ms}.anim-delay-3{animation-delay:180ms}.anim-delay-4{animation-delay:240ms}.anim-delay-5{animation-delay:300ms}.site-header{background-color:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(15,23,42,.06);position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(15,23,42,.02);animation:slideDown var(--dur-slow) var(--ease-out);transition:box-shadow var(--dur-normal) ease,border-color var(--dur-normal) ease,background-color var(--dur-normal) ease}
.site-header.scrolled{background-color:rgba(255,255,255,.94);border-bottom-color:var(--border-subtle);box-shadow:var(--shadow-sm)}
.header-row{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px;position:relative}
@media(min-width:768px){.header-row{height:78px;gap:20px}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;transition:opacity var(--dur-fast) ease}
.brand:hover{opacity:.85}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(15,23,42,.12)) drop-shadow(0 4px 10px rgba(79,70,229,.18));transition:transform var(--dur-normal) var(--ease-spring),filter var(--dur-normal) ease}
.brand-mark .logo-mark-svg{display:block}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.08);filter:drop-shadow(0 2px 4px rgba(15,23,42,.16)) drop-shadow(0 8px 18px rgba(79,70,229,.3))}
@media(min-width:768px){.brand-mark{width:40px;height:40px}}
.brand-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}
.brand-name strong{color:var(--primary);font-weight:800}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .brand-name strong{background:linear-gradient(90deg,#4F46E5,#8B5CF6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
@media(min-width:480px){.brand-name{font-size:19px}}
.main-nav{display:none;align-items:center;gap:2px;flex:1;margin-left:14px;min-width:0}
/* 900px, no 768px: a las 4 rutas del nav + logo + acciones de header (con
   sesión iniciada: campana, botón "Mi cuenta", cerrar sesión) NO les cabe
   en 768px (iPad portrait real) — se midió overflow real de ~110px ahí.
   Antes de esta anchura, el menú hamburguesa (ya construido) sigue activo. */
@media(min-width:900px){.main-nav{display:flex}}
.main-nav a{text-decoration:none;font-weight:600;font-size:14.5px;color:var(--text-secondary);padding:9px 16px;border-radius:var(--radius-full);transition:color var(--dur-fast) ease,background-color var(--dur-fast) ease;white-space:nowrap}
.main-nav a:hover{color:var(--text-primary);background-color:rgba(15,23,42,.045)}
.main-nav a.active{color:var(--primary-text);background-color:var(--primary-light)}
.favorite-btn{width:44px;height:44px;border-radius:50%;background-color:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:17px;display:grid;place-items:center;cursor:pointer;transition:transform var(--dur-normal) var(--ease-spring),background var(--dur-fast) ease,color var(--dur-fast) ease;-webkit-tap-highlight-color:transparent}
.favorite-btn:hover{transform:scale(1.1);background-color:rgba(255,255,255,.18)}
.favorite-btn.active{color:#FB7185;background-color:rgba(251,113,133,.15);border-color:rgba(251,113,133,.4)}
.favorite-btn:active{transform:scale(.92)}
.notif-bell{position:relative;display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-md);color:var(--text-secondary);font-size:16px;transition:background var(--dur-fast) ease,color var(--dur-fast) ease}
.notif-bell:hover{background-color:var(--bg-subtle);color:var(--text-primary)}
.notif-dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 3px;border-radius:9px;background-color:var(--danger);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;line-height:1;border:2px solid var(--bg-surface)}
@media(min-width:600px){.notif-bell{display:inline-flex}}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.header-actions::before{content:'';width:1px;height:22px;background-color:var(--border-subtle);margin-right:2px;display:none}
@media(min-width:600px){.header-actions::before{display:block}}
.header-actions .btn-ghost{display:none;border-color:transparent;background-color:var(--bg-subtle)}
.header-actions .btn-ghost:hover{background-color:var(--border-subtle);border-color:transparent}
@media(min-width:600px){.header-actions .btn-ghost{display:inline-flex}}
.nav-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:16px;color:var(--text-primary);cursor:pointer;transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-fast) ease;-webkit-tap-highlight-color:transparent}
.nav-toggle:hover{background-color:var(--bg-subtle);border-color:var(--border-strong)}
.nav-toggle:active{transform:scale(.92)}
.nav-toggle .icon-close{display:none}
.nav-toggle.active .icon-open{display:none}
.nav-toggle.active .icon-close{display:block}
.nav-toggle.active{background-color:var(--primary-light);border-color:#C7D2FE;color:var(--primary)}
@media(min-width:900px){.nav-toggle{display:none}}
.mobile-menu{display:none;position:absolute;top:calc(100% + 8px);left:12px;right:12px;background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);z-index:99;overflow:hidden;padding:8px}
.mobile-menu.open{display:block;animation:slideDown var(--dur-normal) var(--ease-out)}
.mobile-menu a{display:flex;align-items:center;gap:12px;padding:12px 12px;font-weight:600;font-size:15px;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-md);transition:background var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) ease}
.mobile-menu a i{width:32px;height:32px;border-radius:9px;background-color:var(--bg-subtle);color:var(--primary);display:grid;place-items:center;font-size:14px;flex-shrink:0;transition:background var(--dur-fast) ease,color var(--dur-fast) ease}
.mobile-menu a:hover{background-color:var(--primary-light);color:var(--primary-text)}
.mobile-menu a:hover i{background-color:var(--primary);color:#FFF}
.mobile-menu a.active{background-color:var(--primary-light);color:var(--primary-text)}
.mobile-menu a.active i{background-color:var(--primary);color:#FFF}
.mobile-menu-actions{padding:12px 8px 4px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border-subtle);margin-top:8px}
.inline-form{display:inline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:var(--radius-md);font-family:var(--font-body);font-weight:600;font-size:14px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.4;position:relative;overflow:hidden;transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease,box-shadow var(--dur-normal) ease,transform var(--dur-fast) ease;-webkit-tap-highlight-color:transparent;user-select:none}
/* Cualquier clase que fije su propio `display` (como .btn de arriba) le
   gana al `[hidden]` del user-agent stylesheet — misma especificidad,
   pero la hoja del sitio siempre gana sobre la del navegador. Sin esto,
   `el.hidden = true` en JS no ocultaba un <button class="btn">. */
.btn[hidden]{display:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.15);opacity:0;transition:opacity var(--dur-fast) ease;border-radius:inherit}
.btn:active::after{opacity:1}
.btn-primary{background-color:var(--primary);color:#FFF;box-shadow:0 1px 2px rgba(79,70,229,.2)}
.btn-primary:hover{background-color:var(--primary-hover);color:#FFF;box-shadow:0 4px 14px rgba(79,70,229,.3);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px)}
.btn-dark{background-color:var(--text-primary);color:#FFF}
.btn-dark:hover{background-color:#1E293B;color:#FFF;transform:translateY(-1px)}
.btn-ghost{background-color:transparent;color:var(--text-primary);border-color:var(--border-subtle)}
.btn-ghost:hover{background-color:var(--bg-subtle);border-color:var(--border-strong);color:var(--text-primary)}
.btn-danger{background-color:var(--danger);color:#FFF}
.btn-danger:hover{background-color:#BE123C;color:#FFF;transform:translateY(-1px)}
.btn-success{background-color:var(--success);color:#FFF}
.btn-success:hover{background-color:#047857;color:#FFF}
.btn-block{width:100%}
.btn-lg{padding:13px 24px;font-size:15px}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:var(--radius-sm)}
/* Reducida a propósito (~30% menos de alto) para darle más protagonismo a
   las boletas de abajo, que son el contenido que realmente vende — pedido
   explícito, en mobile y desktop. */
.hero-discovery{background-color:var(--bg-surface);border-bottom:1px solid var(--border-subtle);padding:12px 0 10px;animation:fadeIn var(--dur-slow) ease}
@media(min-width:640px){.hero-discovery{padding:22px 0 20px}}
.hero-clean-title{color:var(--text-primary);font-size:clamp(1.05rem,4vw,1.7rem);font-weight:800;letter-spacing:-.02em;margin:0 0 4px;line-height:1.2;animation:fadeInUp var(--dur-slow) var(--ease-out) 60ms both}
.hero-clean-sub{color:var(--text-secondary);font-size:12.5px;line-height:1.4;max-width:68ch;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;animation:fadeInUp var(--dur-slow) var(--ease-out) 120ms both}
@media(min-width:640px){.hero-clean-sub{font-size:13.5px}}
.search-bar-wrap{background-color:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:7px 9px;max-width:820px;animation:fadeInUp var(--dur-slow) var(--ease-out) 180ms both}
.search-box-v2{display:flex;align-items:center;gap:8px;background-color:#FFF;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);padding:4px 6px 4px 12px;box-shadow:var(--shadow-xs);transition:border-color var(--dur-fast) ease,box-shadow var(--dur-normal) ease}
.search-box-v2:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12),var(--shadow-sm)}
.search-box-v2 i.search-icon{color:var(--text-muted);font-size:14px;flex-shrink:0}
.search-box-v2 input{flex:1;min-width:0;border:none;padding:6px 4px;font-size:14px;font-family:var(--font-body);color:var(--text-primary);background:transparent}
@media(min-width:640px){.search-box-v2 input{font-size:15px}}
.search-box-v2 input::placeholder{color:var(--text-muted)}
.search-box-v2 input:focus{outline:none}
.search-box-v2 .btn{padding:6px 14px;font-size:13px;flex-shrink:0}
.search-box-v2 .btn span{display:none}
@media(min-width:480px){.search-box-v2 .btn{padding:6px 18px;font-size:14px}.search-box-v2 .btn span{display:inline}}
.filter-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.filter-pills-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:4px;margin-right:2px;flex-shrink:0}
.filter-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-full);font-size:12px;font-weight:600;color:var(--text-secondary);background-color:#FFF;border:1px solid var(--border-subtle);text-decoration:none;white-space:nowrap;transition:all var(--dur-fast) ease;-webkit-tap-highlight-color:transparent}
.filter-pill:hover,.filter-pill.active{background-color:var(--primary-light);border-color:#C7D2FE;color:var(--primary-text);transform:translateY(-1px);box-shadow:var(--shadow-xs)}
#boletas{padding-top:16px}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:16px 0 18px;flex-wrap:wrap;gap:8px}
.section-title h2{font-size:clamp(1.1rem,3vw,1.5rem);margin-bottom:0}
/* 2 columnas ya desde mobile (pedido explícito: las boletas son el
   contenido central de la homepage y con 1 sola por fila se veían
   perdidas) — el gap se reduce en mobile para que cada tarjeta tenga
   más aire, y sube de nuevo en pantallas grandes junto con las columnas. */
.tickets-spotlight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:32px}
@media(min-width:480px){.tickets-spotlight-grid{gap:14px}}
@media(min-width:640px){.tickets-spotlight-grid{gap:16px}}
@media(min-width:780px){.tickets-spotlight-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.tickets-spotlight-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.ticket-item-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:12px 12px 14px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;position:relative;overflow:hidden;text-decoration:none;color:var(--text-primary);transition:transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal) ease,border-color var(--dur-normal) ease;animation:fadeInUp var(--dur-slow) var(--ease-out) both;-webkit-tap-highlight-color:transparent}
.ticket-item-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary) 0%,#818CF8 100%);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-normal) ease}
.ticket-item-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.ticket-item-card:hover::before{transform:scaleX(1)}
.ticket-item-card:active{transform:translateY(-1px)}
@media(min-width:480px){.ticket-item-card{padding:18px 20px}}
/* space-between + wrap: si algún día vuelve a haber 2 badges del lado
   derecho, siguen bajando de línea en vez de desbordar (ver bug real
   corregido: "Comprobada" se cortaba a la mitad en las tarjetas de 3
   columnas porque el footer, no este header, forzaba una sola línea). */
.ticket-head{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.ticket-item-card h3{font-size:.92rem;margin-bottom:4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:480px){.ticket-item-card h3{font-size:1.05rem}}
@media(min-width:640px){.ticket-item-card h3{font-size:1.1rem}}
.ticket-meta-line{font-size:11.5px;color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ticket-meta-line i{color:var(--text-muted);font-size:10.5px}
.ticket-seat-line{font-size:12px;color:var(--text-secondary);margin-bottom:12px;font-weight:600}
.ticket-seat-line i{color:var(--primary);margin-right:2px}
/* Footer apilado (precio arriba, botón ancho completo debajo) en vez de
   precio+botón lado a lado: con lado a lado, en tarjetas angostas (3-4
   columnas, o las 2 columnas de mobile) el botón —que nunca se achica,
   `.btn` es white-space:nowrap— empujaba todo el ancho disponible hacia
   el precio, y "$350.000 COP" terminaba partido en 3-4 líneas encima del
   botón (bug real reportado). Apilar es inmune a ese problema en
   cualquier ancho, y de paso le da más protagonismo al precio y al CTA. */
.ticket-footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--border-subtle)}
.ticket-price-row{margin-bottom:10px}
.ticket-price-label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:2px}
.price-val{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--text-primary);transition:color var(--dur-fast) ease}
@media(min-width:480px){.price-val{font-size:21px}}
.ticket-item-card:hover .price-val{color:var(--primary)}
.ticket-buy-btn{font-size:13px;padding:11px 14px;font-weight:700}
@media(min-width:480px){.ticket-buy-btn{font-size:14px;padding:12px 16px}}
.event-featured-banner{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 24px;box-shadow:var(--shadow-xs);border-left:4px solid var(--primary);flex-wrap:wrap;animation:fadeInUp var(--dur-slow) var(--ease-out) 120ms both;transition:box-shadow var(--dur-normal) ease}
.event-featured-banner:hover{box-shadow:var(--shadow-md)}
@media(min-width:640px){.event-featured-banner{padding:22px 26px;margin-bottom:28px}}
.event-featured-left{display:flex;align-items:center;gap:14px;flex:1 1 240px;min-width:0}
.event-featured-date{background-color:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px 12px;text-align:center;min-width:58px;flex-shrink:0}
.event-featured-date .month{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);display:block}
.event-featured-date .day{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text-primary);line-height:1.1;display:block}
.trust-bar{display:grid;grid-template-columns:1fr;gap:12px;padding:18px;background-color:var(--bg-subtle);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);margin:0 0 40px;animation:fadeInUp var(--dur-slow) var(--ease-out) 200ms both}
@media(min-width:540px){.trust-bar{grid-template-columns:repeat(3,1fr);gap:16px;padding:22px}}
@media(min-width:640px){.trust-bar{padding:24px;gap:20px}}
.trust-bar-item{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:var(--radius-md);transition:background var(--dur-fast) ease,transform var(--dur-normal) var(--ease-spring)}
.trust-bar-item:hover{background-color:var(--bg-surface);transform:translateY(-2px)}
.trust-bar-item .icon{width:38px;height:38px;border-radius:10px;background-color:var(--bg-surface);border:1px solid var(--border-subtle);display:grid;place-items:center;color:var(--primary);flex-shrink:0;font-size:17px;transition:background var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-normal) var(--ease-spring),border-color var(--dur-fast) ease}
.trust-bar-item:hover .icon{background-color:var(--primary);color:#FFF;border-color:var(--primary);transform:rotate(-6deg) scale(1.12)}
.trust-bar-item strong{display:block;font-size:13.5px;color:var(--text-primary);margin-bottom:2px}
.trust-bar-item p{margin:0;font-size:12px;color:var(--text-secondary);line-height:1.5}
/* Carrusel de estadísticas reales (homepage) — una sola línea que rota,
   así ocupa mucho menos alto que la tira de 3 columnas que reemplaza. */
.stats-carousel{display:flex;align-items:center;gap:14px;background-color:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:12px 16px;margin:0 0 28px;min-height:34px;animation:fadeInUp var(--dur-slow) var(--ease-out) 200ms both}
.stats-carousel-track{position:relative;flex:1;min-height:34px}
.stats-slide{position:absolute;inset:0;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.stats-slide.active{opacity:1;transform:translateY(0);pointer-events:auto}
.stats-icon{width:32px;height:32px;border-radius:9px;background-color:var(--bg-surface);border:1px solid var(--border-subtle);display:grid;place-items:center;color:var(--primary);flex-shrink:0;font-size:13.5px}
.stats-text{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.stats-text strong{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--text-primary);flex-shrink:0}
.stats-text span{font-size:12px;color:var(--text-secondary);line-height:1.3}
@media(min-width:480px){.stats-carousel{padding:14px 20px}.stats-icon{width:36px;height:36px;font-size:15px}.stats-text strong{font-size:20px}.stats-text span{font-size:12.5px}}
.stats-dots{display:flex;gap:5px;flex-shrink:0}
.stats-dot{width:6px;height:6px;border-radius:50%;background-color:var(--border-strong);transition:background-color var(--dur-normal) ease,transform var(--dur-normal) ease}
.stats-dot.active{background-color:var(--primary);transform:scale(1.3)}
.event-grid{display:grid;grid-template-columns:1fr;gap:16px;padding-bottom:48px}
@media(min-width:540px){.event-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.event-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
.ticket-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;text-decoration:none;color:var(--text-primary);display:flex;flex-direction:column;transition:transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal) ease;-webkit-tap-highlight-color:transparent}
.ticket-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl)}
.ticket-card .thumb{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#1E1B4B 0%,#312E81 50%,#4338CA 100%);position:relative;display:flex;align-items:center;justify-content:center}
.ticket-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) ease}
.ticket-card:hover .thumb img{transform:scale(1.06)}
.stage-placeholder{width:100%;height:100%;background:linear-gradient(145deg,#0F172A 0%,#1E1B4B 50%,#312E81 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#FFF;position:relative;overflow:hidden}
.stage-placeholder::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(99,102,241,.4) 0%,transparent 60%)}
.stage-placeholder-icon{width:44px;height:44px;color:#A5B4FC;z-index:1}
.stage-placeholder-tag{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C7D2FE;background-color:rgba(0,0,0,.3);padding:3px 9px;border-radius:var(--radius-full);z-index:1;margin-top:8px}
.ticket-card .body{padding:16px 18px;display:flex;flex-direction:column;flex:1}
@media(min-width:640px){.ticket-card .body{padding:20px 22px}}
.ticket-card h3{font-size:1rem;font-weight:700;margin-bottom:6px;line-height:1.3}
.ticket-card .meta{font-size:13px;color:var(--text-secondary);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.ticket-card .price-row{margin-top:auto;padding-top:12px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:center;gap:8px}
.ticket-card .from{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.ticket-card .price{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text-primary)}
/* Evento destacado (admin, uno solo a la vez) — misma .ticket-card de
   siempre, pero más grande (ocupa 2 columnas donde el grid lo permite),
   borde con gradiente y una sombra violeta suave para que salte a la
   vista sin gritar demasiado ("un poco más", no un cartel de neón). */
.ticket-card.is-featured{position:relative;border:2px solid transparent;background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,linear-gradient(135deg,#4F46E5,#818CF8,#C7D2FE) border-box;box-shadow:0 10px 34px rgba(79,70,229,.22)}
@media(min-width:540px){.ticket-card.is-featured{grid-column:span 2}}
.ticket-card.is-featured .thumb{aspect-ratio:21/9}
.featured-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#4F46E5,#818CF8);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;padding:5px 12px;border-radius:var(--radius-full);box-shadow:0 4px 14px rgba(79,70,229,.45)}
.card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px;animation:fadeInUp var(--dur-slow) var(--ease-out) both}
@media(min-width:640px){.card{padding:32px}}
.card-title{margin-top:0;font-size:1.35rem;margin-bottom:6px}
.lede{font-size:1rem;color:var(--text-secondary);line-height:1.65;max-width:65ch}
/* padding-top/bottom (NO shorthand): esta clase va combinada con .container
   en el mismo elemento (ver ticket.php) — el shorthand `padding:X 0 Y`
   pondría padding-left/right en 0 y pisaría el padding horizontal
   responsive de .container, dejando el contenido pegado al borde. */
.ticket-detail-wrap{padding-top:24px;padding-bottom:56px}
@media(min-width:640px){.ticket-detail-wrap{padding-top:40px;padding-bottom:80px}}
/* Orden pedido explícitamente: encabezado → vendedor → boleta/CTA (lo que
   importa para decidir/comprar) arriba, "cómo funciona" comprimido y
   relegado al final — en mobile todo se apila en una sola columna, así
   que el orden real de la página depende 100% de grid-template-areas,
   no del orden en el HTML. En desktop, la boleta vuelve a quedar fija a
   la derecha (grid-area "stub" ocupando las 3 filas) como ya funcionaba. */
.ticket-detail{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;grid-template-areas:"header" "seller" "stub" "howitworks"}
.ticket-header{grid-area:header}
.seller-card{grid-area:seller}
.ticket-stub{grid-area:stub}
.ticket-howitworks{grid-area:howitworks}
@media(min-width:900px){.ticket-detail{grid-template-columns:1.15fr .85fr;gap:48px;grid-template-areas:"header stub" "seller stub" "howitworks stub"}}
.ticket-stub{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:22px;position:relative;overflow:hidden;animation:scaleIn var(--dur-slow) var(--ease-spring) 100ms both}
@media(min-width:640px){.ticket-stub{padding:32px}}
@media(min-width:900px){.ticket-stub{position:sticky;top:96px}}
.ticket-stub .kicker{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);background-color:var(--primary-light);padding:4px 10px;border-radius:var(--radius-full)}
.ticket-stub h2{font-size:1.25rem;margin:12px 0 8px}
.ticket-stub .loc{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:13.5px;margin-bottom:5px}
.stub-divider{border:none;border-top:2px dashed var(--border-strong);margin:20px -22px;position:relative}
@media(min-width:640px){.stub-divider{margin:24px -32px}}
.stub-divider::before,.stub-divider::after{content:'';position:absolute;top:-12px;width:24px;height:24px;background-color:var(--bg-app);border-radius:50%;border:1px solid var(--border-subtle)}
.stub-divider::before{left:-12px}.stub-divider::after{right:-12px}
.stub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.stub-field{background-color:var(--bg-subtle);padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);transition:background var(--dur-fast) ease}
.stub-field:hover{background-color:var(--primary-light)}
.stub-field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--text-muted);margin-bottom:2px}
.stub-field span{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-primary)}
.stub-price-wrap{margin:18px 0;padding:14px;background-color:var(--primary-light);border-radius:var(--radius-md);text-align:center;border:1px solid #C7D2FE;animation:tickerPulse 3s ease infinite}
.stub-price-wrap .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--primary-text);margin-bottom:4px}
.stub-price{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--primary-text);line-height:1}
@media(min-width:640px){.stub-price{font-size:32px}}
.stub-barcode{display:flex;justify-content:center;align-items:flex-end;gap:2px;height:36px;margin-top:16px;opacity:.45}
.stub-barcode span{background-color:var(--text-primary);width:2px;height:100%}
.stub-barcode span:nth-child(2n){width:3px}.stub-barcode span:nth-child(3n){width:1px}.stub-barcode span:nth-child(5n){width:4px}.stub-barcode span:nth-child(7n){height:75%}
.countdown-panel{text-align:center;background:var(--bg-dark);color:#FFF;border-radius:var(--radius-lg);padding:22px 18px;margin-bottom:18px;border:1px solid var(--border-dark);box-shadow:var(--shadow-lg);animation:scaleIn var(--dur-slow) var(--ease-spring)}
.countdown-panel .label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#94A3B8;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:8px}
.countdown-panel .label::before{content:'';width:8px;height:8px;border-radius:50%;background-color:#10B981;animation:dotPulse 1.5s ease infinite}
.countdown-digits{font-family:var(--font-display);font-size:48px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;line-height:1.1;color:#FFF;transition:color .3s ease}
@media(min-width:640px){.countdown-digits{font-size:54px}}
.countdown-panel[data-level="normal"] .countdown-digits{color:#FFF}
.countdown-panel[data-level="attention"] .countdown-digits{color:#FBBF24}
.countdown-panel[data-level="warning"] .countdown-digits{color:#FB923C}
.countdown-panel[data-level="critical"] .countdown-digits{color:#F43F5E;animation:pulseUrgent 1s ease-in-out infinite}
.status-timeline{list-style:none;margin:0 0 22px;background-color:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-subtle);padding:14px 18px;box-shadow:var(--shadow-xs)}
.status-timeline li{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px;color:var(--text-muted);position:relative}
.status-timeline li:not(:last-child)::after{content:'';position:absolute;left:11px;top:28px;bottom:-4px;width:2px;background-color:var(--border-subtle)}
.status-timeline li .dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;flex-shrink:0;font-size:11px;font-weight:700;background-color:var(--bg-surface);z-index:1;transition:background var(--dur-fast) ease,transform var(--dur-normal) var(--ease-spring)}
.status-timeline li.done{color:var(--text-primary);font-weight:600}
.status-timeline li.done .dot{background-color:var(--success);border-color:var(--success);color:#FFF;transform:scale(1.1)}
.status-timeline li.done::after{background-color:var(--success)}
.status-timeline li.current{color:var(--primary);font-weight:700}
.status-timeline li.current .dot{background-color:var(--primary);border-color:var(--primary);color:#FFF;box-shadow:0 0 0 4px var(--primary-light);animation:tickerPulse 2s ease infinite}
.narrow-form{max-width:480px;margin:36px auto 64px;padding:0 4px}
@media(min-width:640px){.narrow-form{margin:48px auto 80px}}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.form-group input[type=text],.form-group input[type=email],.form-group input[type=tel],.form-group input[type=password],.form-group input[type=file],.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);font-family:var(--font-body);font-size:15px;color:var(--text-primary);background-color:var(--bg-surface);transition:border-color var(--dur-fast) ease,box-shadow var(--dur-normal) ease;appearance:none;-webkit-appearance:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.form-group textarea{resize:vertical;min-height:90px}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:480px){.form-row{grid-template-columns:1fr 1fr}}
.payment-method-tabs{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.payment-method-tabs label{flex:1;min-width:110px;text-align:center;padding:12px 14px;border:2px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;font-weight:700;font-size:14px;color:var(--text-secondary);transition:all var(--dur-fast) ease;background-color:var(--bg-surface);-webkit-tap-highlight-color:transparent}
.payment-method-tabs label:hover{border-color:var(--border-strong);color:var(--text-primary);transform:translateY(-1px)}
.payment-method-tabs input{display:none}
.payment-method-tabs input:checked~*,.payment-method-tabs label:has(input:checked){border-color:var(--primary);background-color:var(--primary-light);color:var(--primary-text)}
.payment-instructions{background-color:var(--bg-subtle);border-radius:var(--radius-md);padding:16px 18px;font-size:14px;margin-bottom:18px;border:1px solid var(--border-subtle)}
.payment-instructions dt{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:12px}
.payment-instructions dt:first-child{margin-top:0}
.payment-instructions dd{margin:3px 0 0;color:var(--text-primary);font-weight:600}
.card-brand-logos{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.card-brand-logos i{font-size:26px;color:var(--primary)}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.15)}
.btn:disabled:hover{transform:none}

/* Fila copiable: valor + botón. Reduce errores de digitación al pasar la
   referencia/llave/monto a mano en la app del banco — la causa más común
   de comprobantes rechazados por datos mal transcritos. */
.copy-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border:1.5px solid var(--border-strong);background-color:var(--bg-surface);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--dur-fast) ease}
.copy-btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.copy-btn.copied{border-color:var(--success);color:var(--success);background-color:var(--success-light)}

/* Zona de subida de comprobante: reemplaza el <input type=file> nativo (que
   no confirma visualmente qué se eligió) por una tarjeta con estado vacío/
   elegido claro, y acepta arrastrar-y-soltar. */
.file-drop{position:relative;display:block;border:2px dashed var(--border-strong);border-radius:var(--radius-md);background-color:var(--bg-subtle);cursor:pointer;transition:all var(--dur-fast) ease;padding:22px 16px;text-align:center}
.file-drop:hover{border-color:var(--primary);background-color:var(--primary-light)}
.file-drop.is-dragover{border-color:var(--primary);background-color:var(--primary-light);transform:scale(1.01)}
.file-drop.has-file{border-style:solid;border-color:var(--success);background-color:var(--success-light)}
.file-drop input[type="file"]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.file-drop-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-secondary)}
.file-drop-empty i{font-size:26px;color:var(--primary);margin-bottom:2px}
.file-drop-empty strong{color:var(--text-primary);font-size:14.5px}
.file-drop-empty span{font-size:12.5px;color:var(--text-muted)}
.file-drop-chosen{display:flex;align-items:center;gap:12px;text-align:left}
/* Un selector de igual especificidad que .file-drop-empty/.file-drop-chosen
   pero que llega después en la cascada gana sobre el estilo [hidden] del
   navegador (display:none es del user-agent stylesheet, la hoja del sitio
   siempre le gana) — sin esto, marcar `hidden` en JS no ocultaba nada. */
.file-drop-empty[hidden],.file-drop-chosen[hidden]{display:none}
.file-drop-chosen i.fa-file-lines{font-size:26px;color:var(--success);flex-shrink:0}
.file-drop-info{flex:1;min-width:0;display:flex;flex-direction:column}
.file-drop-name{font-size:14px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-drop-size{font-size:12px;color:var(--text-muted)}
.file-drop-clear{position:relative;z-index:1;width:28px;height:28px;flex-shrink:0;border:none;border-radius:50%;background-color:var(--bg-surface);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all var(--dur-fast) ease}
.file-drop-clear:hover{background-color:var(--danger-light);color:var(--danger)}
.file-drop-error{color:var(--danger)}

/* Spinner en el botón mientras se sube el comprobante — evita el doble clic
   ("¿le di o no le di?") y confirma que el envío sí está en curso. */
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none;opacity:.85}
.btn.is-loading .btn-label{visibility:hidden}
.btn.is-loading::before{content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#FFF;animation:spin .7s linear infinite}

/* Salida a soporte cuando algo salió mal (reserva expirada/rechazada, o sin
   método de pago activo) — nadie debería quedar sin un siguiente paso claro
   después de haber transferido dinero de verdad. */
.reservation-support-note{display:flex;gap:14px;background-color:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:18px 20px;margin-top:18px}
.reservation-support-note>i{font-size:20px;color:var(--primary);flex-shrink:0;margin-top:2px}
.reservation-support-note strong{display:block;color:var(--text-primary);font-size:14.5px;margin-bottom:4px}
.reservation-support-note p{font-size:13.5px;margin-bottom:12px}
.reservation-support-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Confirmación de entrega (comprador) — ver ReservationController::confirmDelivery().
   El pago al vendedor queda retenido hasta que esta tarjeta pase de "pendiente" a "is-done". */
.delivery-confirm-card{display:flex;gap:14px;background-color:var(--warning-light);border:1px solid #FDE68A;border-radius:var(--radius-md);padding:18px 20px;margin-top:18px;animation:scaleIn var(--dur-slow) var(--ease-spring)}
.delivery-confirm-card>i{font-size:22px;color:var(--warning);flex-shrink:0;margin-top:2px}
.delivery-confirm-card strong{display:block;color:var(--text-primary);font-size:14.5px;margin-bottom:4px}
.delivery-confirm-card p{font-size:13.5px;margin-bottom:12px}
.delivery-confirm-card.is-done{background-color:var(--success-light);border-color:#A7F3D0}
.delivery-confirm-card.is-done>i{color:var(--success)}
.delivery-confirm-card.is-done p{margin-bottom:0}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-full);font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;transition:transform var(--dur-fast) var(--ease-spring)}
.badge:hover{transform:scale(1.05)}
.badge-green{background-color:var(--success-light);color:var(--success-text);border:1px solid #A7F3D0}
.badge-amber{background-color:var(--warning-light);color:var(--warning-text);border:1px solid #FDE68A}
.badge-red{background-color:var(--danger-light);color:var(--danger-text);border:1px solid #FECDD3}
.badge-violet{background-color:var(--primary-light);color:var(--primary-text);border:1px solid #C7D2FE}
.badge-neutral{background-color:#F1F5F9;color:#64748B;border:1px solid #E2E8F0}
.flash{padding:12px 18px;border-radius:var(--radius-md);margin:16px auto;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-sm);animation:slideDown var(--dur-normal) ease}
.flash-error{background-color:var(--danger-light);color:var(--danger-text);border:1px solid #FECDD3}
.flash-success{background-color:var(--success-light);color:var(--success-text);border:1px solid #A7F3D0}
.site-footer{background-color:var(--bg-surface);border-top:1px solid var(--border-subtle);margin-top:32px;padding:24px 0 16px}
@media(min-width:640px){.site-footer{margin-top:72px;padding:56px 0 32px}}
.footer-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
@media(min-width:960px){.footer-grid{grid-template-columns:2fr 1fr 1fr;gap:48px}}
/* En mobile, "Plataforma" y "Seguridad & Legal" van lado a lado en vez de
   apiladas — evita que el footer se sienta interminable en pantallas
   angostas. display:contents en desktop hace que el wrapper "desaparezca"
   y las dos columnas vuelvan a ser ítems directos de .footer-grid, sin
   tocar el layout de 2/3 columnas que ya existía ahí. */
.footer-links-row{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
@media(min-width:640px){.footer-links-row{display:contents}}
.footer-grid h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-muted);margin-bottom:8px}
@media(min-width:640px){.footer-grid h4{margin-bottom:14px}}
.footer-col a,.footer-grid a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text-secondary);font-size:13px;margin-bottom:7px;transition:color var(--dur-fast) ease,transform var(--dur-fast) ease}
@media(min-width:640px){.footer-col a,.footer-grid a{font-size:14px;margin-bottom:11px}}
.footer-col a:hover,.footer-grid a:hover{color:var(--text-primary);transform:translateX(3px)}
.footer-col a i{color:var(--text-muted);font-size:12px;width:14px;text-align:center;flex-shrink:0;transition:color var(--dur-fast) ease}
.footer-col a:hover i{color:var(--primary)}
.footer-brand-col{max-width:360px}
.footer-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
@media(min-width:640px){.footer-brand-row{margin-bottom:14px}}
.brand-mark-sm{width:32px;height:32px;flex-shrink:0}
.footer-lede{font-size:12.5px;line-height:1.5;margin-bottom:10px}
@media(min-width:640px){.footer-lede{font-size:14px;line-height:1.65;margin-bottom:18px}}
.footer-trust-row{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;font-weight:600;color:var(--text-muted)}
.footer-trust-row span{display:inline-flex;align-items:center;gap:6px}
.footer-trust-row i{color:var(--success)}
.footer-bottom{color:var(--text-muted);font-size:11.5px;line-height:1.5;margin-top:16px;padding-top:12px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:4px}
@media(min-width:640px){.footer-bottom{font-size:12.5px;line-height:1.6;margin-top:36px;padding-top:18px;gap:16px;flex-direction:row;justify-content:space-between;align-items:center}.footer-bottom>div:last-child{text-align:right}}
/* Mobile (<640px): burbuja circular simple — el texto completo no cabe sin
   chocar con el cookie-banner, que en mobile deja justo 76px libres a la
   derecha (ver más abajo) calculados para este mismo tamaño de 52px. */
.whatsapp-fab{position:fixed;right:14px;bottom:14px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#16A34A 0%,#2DD4BF 55%,#22D3EE 100%);color:#FFF;box-shadow:0 8px 24px rgba(22,163,74,.45);z-index:50;transition:transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal) ease;animation:scaleIn var(--dur-slow) var(--ease-spring) 500ms both;text-decoration:none}
.whatsapp-fab:hover{transform:scale(1.12) rotate(8deg);box-shadow:0 12px 32px rgba(22,163,74,.55);color:#FFF}
.whatsapp-fab-icon{font-size:24px;line-height:1;display:grid;place-items:center}
.whatsapp-fab-text{display:none}

/* ≥640px: pastilla con anillo degradado (blanco por dentro, gradiente por
   el borde) + bubble del ícono + texto — hay espacio de sobra para que no
   choque con nada. */
@media(min-width:640px){
  .whatsapp-fab{
    right:24px;bottom:24px;width:auto;height:auto;border-radius:var(--radius-full);
    display:inline-flex;align-items:center;gap:12px;padding:6px 22px 6px 6px;
    border:2px solid transparent;background-color:#fff;
    background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,#16A34A 0%,#2DD4BF 55%,#22D3EE 100%);
    background-origin:border-box;background-clip:padding-box,border-box;
    box-shadow:0 8px 24px rgba(16,185,129,.3);
  }
  .whatsapp-fab:hover{transform:scale(1.04);box-shadow:0 12px 30px rgba(16,185,129,.42)}
  .whatsapp-fab-icon{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#16A34A 0%,#2DD4BF 55%,#22D3EE 100%);color:#FFF;font-size:21px;box-shadow:0 2px 8px rgba(22,163,74,.4)}
  .whatsapp-fab-text{display:block;font-size:13.5px;font-weight:600;color:var(--text-secondary);line-height:1.3;white-space:nowrap}
  .whatsapp-fab-text strong{display:block;font-weight:800;color:var(--text-primary);font-size:14.5px}
}
/* Ancla abajo-izquierda con ancho limitado a propósito: nunca se cruza
   con el FAB de WhatsApp (abajo-derecha) sin importar el ancho de
   pantalla — en mobile deja 76px libres a la derecha (52px del FAB +
   margen), en desktop el max-width la mantiene lejos de todas formas. */
.cookie-banner{position:fixed;left:12px;right:76px;bottom:12px;z-index:60;background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:12px 14px;display:flex;flex-direction:column;gap:8px;animation:fadeInUp var(--dur-slow) var(--ease-out) 500ms both}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;font-size:11.5px;color:var(--text-secondary);line-height:1.45}
.cookie-banner p i{color:var(--primary);margin-right:2px}
.cookie-banner a{color:var(--primary);font-weight:600;text-decoration:underline}
.cookie-banner .btn{align-self:flex-end}
@media(min-width:640px){.cookie-banner{left:16px;right:auto;bottom:16px;max-width:380px;flex-direction:row;align-items:center;padding:14px 18px}.cookie-banner p{font-size:12.5px}.cookie-banner .btn{align-self:auto}}
.admin-shell{display:flex;min-height:100vh;flex-direction:column}
@media(min-width:900px){.admin-shell{flex-direction:row}}
.admin-sidebar{width:100%;background-color:var(--bg-dark);color:#F8FAFC;padding:18px 16px;display:flex;flex-direction:column;border-bottom:1px solid var(--border-dark)}
@media(min-width:900px){.admin-sidebar{width:260px;flex-shrink:0;border-bottom:none;border-right:1px solid var(--border-dark);padding:28px 20px}}
.admin-sidebar .brand-name{color:#FFF}
.admin-sidebar nav{margin-top:20px;display:flex;flex-direction:column;gap:4px;flex:1}
@media(max-width:900px){.admin-sidebar nav{flex-direction:row;flex-wrap:wrap;margin-top:12px;gap:4px}}
.admin-sidebar nav a{padding:9px 12px;border-radius:var(--radius-md);text-decoration:none;color:#94A3B8;font-weight:600;font-size:13.5px;transition:all var(--dur-fast) ease;display:flex;align-items:center;gap:9px;white-space:nowrap}
.admin-sidebar nav a:hover,.admin-sidebar nav a.active{background-color:rgba(255,255,255,.08);color:#FFF}
@media(min-width:900px){.admin-sidebar nav a:hover,.admin-sidebar nav a.active{transform:translateX(2px)}}
.admin-main{flex:1;padding:20px 16px;background-color:var(--bg-app);min-width:0}
@media(min-width:640px){.admin-main{padding:32px 28px}}
@media(min-width:900px){.admin-main{padding:40px 48px}}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}
@media(min-width:640px){.metric-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:36px}}
.metric-card{background-color:var(--bg-surface);border-radius:var(--radius-lg);padding:16px 18px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);transition:transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal) ease;animation:fadeInUp var(--dur-slow) var(--ease-out) both}
.metric-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
@media(min-width:640px){.metric-card{padding:24px}}
.metric-card .n{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--text-primary);line-height:1.1;margin-bottom:4px}
@media(min-width:640px){.metric-card .n{font-size:36px}}
.metric-card .l{font-size:12.5px;font-weight:600;color:var(--text-muted)}
.admin-table{width:100%;border-collapse:collapse;background-color:var(--bg-surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}
.admin-table th,.admin-table td{text-align:left;padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--border-subtle)}
@media(min-width:640px){.admin-table th,.admin-table td{padding:16px 20px;font-size:14px}}
.admin-table th{background-color:var(--bg-subtle);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.admin-table tbody tr{transition:background var(--dur-fast) ease}
.admin-table tbody tr:hover{background-color:var(--bg-subtle)}
.admin-table tr:last-child td{border-bottom:none}

/* Variante "apilable" del admin-table para páginas de cliente en mobile
   (Mi cuenta) — abajo de 680px, cada fila se vuelve una tarjeta en vez de
   forzar scroll horizontal para ver la última columna. Requiere
   data-label="..." en cada <td> (ver resources/views/profile.php). */
@media(max-width:680px){
  .stack-table thead{display:none}
  .stack-table,.stack-table tbody,.stack-table tr,.stack-table td{display:block;width:100%}
  .stack-table{border:none;box-shadow:none;background:transparent}
  .stack-table tr{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:12px;padding:4px 0;box-shadow:var(--shadow-xs)}
  .stack-table tr:last-child{margin-bottom:0}
  .stack-table td{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:10px 16px;text-align:right;border-bottom:1px solid var(--border-subtle)}
  .stack-table td:last-child{border-bottom:none}
  .stack-table td::before{content:attr(data-label);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:left;flex-shrink:0;padding-top:2px}
}

/* Resumen de datos de entrega ya guardados (Mi cuenta) — reemplaza el
   formulario vacío por una tarjeta legible una vez el usuario ya llenó sus
   datos; "Editar" (ver toggle en site.js) la vuelve a cambiar por el form. */
.delivery-summary{background:linear-gradient(160deg,var(--primary-light) 0%,var(--bg-surface) 60%);border:1.5px solid #C7D2FE;border-radius:var(--radius-lg);padding:18px 20px;animation:scaleIn var(--dur-slow) var(--ease-spring)}
.delivery-summary[hidden]{display:none}
.delivery-summary-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--success-text);background-color:var(--success-light);border:1px solid #A7F3D0;padding:3px 10px;border-radius:var(--radius-full);margin-bottom:14px}
.delivery-summary-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px dashed #C7D2FE}
.delivery-summary-row:first-of-type{border-top:none;padding-top:0}
.delivery-summary-row i{width:32px;height:32px;border-radius:50%;background-color:var(--bg-surface);color:var(--primary);display:grid;place-items:center;flex-shrink:0;font-size:13px;box-shadow:var(--shadow-xs)}
.delivery-summary-row>div{min-width:0}
.delivery-summary-row strong{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:3px}
.delivery-summary-row span{font-size:14px;color:var(--text-primary);font-weight:600;word-break:break-word}
#deliveryFormWrap[hidden]{display:none}

/* Foto de perfil — /mi-cuenta/editar */
.avatar-upload{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.avatar-preview{position:relative;width:92px;height:92px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#1E1B4B 0%,#4F46E5 60%,#6366F1 100%);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:32px;box-shadow:0 4px 14px rgba(79,70,229,.25);overflow:hidden}
.avatar-preview img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar-upload-actions{display:flex;flex-direction:column;gap:8px}
.avatar-upload-label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.avatar-upload-actions input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.receipt-preview{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;margin-bottom:16px;background-color:var(--bg-subtle)}
.receipt-preview img{width:100%;display:block}
.receipt-preview iframe{width:100%;height:420px;border:none}
@media(min-width:640px){.receipt-preview iframe{height:520px}}
.hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--primary-text);background-color:var(--primary-light);border:1px solid #C7D2FE;padding:4px 12px;border-radius:var(--radius-full);margin-bottom:8px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(.96);transition:opacity var(--dur-slow) var(--ease-spring),transform var(--dur-slow) var(--ease-spring)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.skeleton{background:linear-gradient(90deg,var(--bg-subtle) 25%,var(--border-subtle) 50%,var(--bg-subtle) 75%);background-size:400px 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-md)}
.text-center{text-align:center}
.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.two-col-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.two-col-grid{grid-template-columns:repeat(2,1fr)}}
.review-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:960px){.review-grid{grid-template-columns:1.2fr .8fr;gap:32px}}
@media(max-width:480px){.btn-lg{padding:12px 20px;font-size:14px}.stub-price{font-size:22px}.countdown-digits{font-size:38px}.search-bar-wrap{border-radius:var(--radius-md)}.trust-bar{margin-bottom:28px}.badge{font-size:11px;padding:3px 8px}}

/* ---------------------------------------------------------------------
   Páginas informativas (Eventos / Cómo funciona / Contacto): hero,
   timeline de pasos, acordeón de preguntas, tarjetas de método de pago.
   --------------------------------------------------------------------- */
/* padding-top/bottom (NO shorthand) — misma razón que .ticket-detail-wrap:
   va combinada con .container (ver contact.php / how_it_works.php). */
.page-hero{padding-top:40px;padding-bottom:36px;text-align:center}
@media(min-width:640px){.page-hero{padding-top:56px;padding-bottom:44px}}
.page-hero .lede{margin:0 auto;max-width:60ch}
.page-hero h1{margin:8px 0 12px}

.steps-timeline{list-style:none;margin:0;padding:0}
.steps-timeline .step{display:flex;gap:16px;position:relative;padding-bottom:26px}
.steps-timeline .step:last-child{padding-bottom:0}
.steps-timeline .step:not(:last-child)::before{content:'';position:absolute;left:21px;top:44px;bottom:2px;width:2px;background:repeating-linear-gradient(to bottom,var(--border-strong) 0,var(--border-strong) 4px,transparent 4px,transparent 9px)}
.steps-timeline .step-num{width:42px;height:42px;border-radius:50%;background:var(--primary-light);color:var(--primary-text);display:grid;place-items:center;font-weight:800;font-family:var(--font-display);font-size:15px;flex-shrink:0;z-index:1;border:3px solid var(--bg-surface);box-shadow:0 0 0 1px var(--border-subtle);transition:transform var(--dur-normal) var(--ease-spring),background var(--dur-fast) ease}
.steps-timeline .step:hover .step-num{transform:scale(1.1) rotate(-4deg);background:var(--primary);color:#fff}
.steps-timeline.variant-success .step-num{background:var(--success-light);color:var(--success-text)}
.steps-timeline.variant-success .step:hover .step-num{background:var(--success);color:#fff}
.steps-timeline .step-body{padding-top:7px}
.steps-timeline .step-body strong{display:block;font-size:15.5px;color:var(--text-primary);margin-bottom:4px}
.steps-timeline .step-body p{margin:0;font-size:14px;line-height:1.6}

.section-heading{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.section-heading .icon-badge{width:38px;height:38px;border-radius:var(--radius-md);display:grid;place-items:center;flex-shrink:0;font-size:16px}
.section-heading h2{margin:0;font-size:1.4rem}

.accordion-item{border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden;background-color:var(--bg-surface);transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.accordion-item:hover{border-color:var(--border-strong)}
.accordion-item[open]{border-color:#C7D2FE;box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.accordion-item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:700;font-size:14.5px;color:var(--text-primary);display:flex;justify-content:space-between;align-items:center;gap:14px;transition:background var(--dur-fast) ease;-webkit-tap-highlight-color:transparent}
.accordion-item summary::-webkit-details-marker{display:none}
.accordion-item summary:hover{background-color:var(--bg-subtle)}
.accordion-item summary i{color:var(--text-muted);font-size:13px;flex-shrink:0;transition:transform var(--dur-normal) ease,color var(--dur-fast) ease}
.accordion-item[open] summary i{transform:rotate(180deg);color:var(--primary)}
.accordion-item .accordion-body{padding:0 18px 18px;font-size:14px;color:var(--text-secondary);line-height:1.7;animation:fadeIn var(--dur-normal) ease}

.payment-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;transition:transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal) ease,border-color var(--dur-fast) ease}
.payment-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.payment-card .icon-badge{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:19px;margin-bottom:14px}
.payment-card h3{margin:0 0 6px;font-size:1.05rem}
.payment-card p{font-size:13.5px;margin-bottom:0}

/* ===================== /vende-con-nosotros ===================== */
.sell-hero-banner{background:linear-gradient(150deg,var(--bg-dark) 0%,#1E1B4B 60%,#312E81 100%);border-radius:var(--radius-xl);padding:36px 26px;display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center;overflow:hidden;position:relative;margin-bottom:24px;box-shadow:var(--shadow-xl)}
.sell-hero-banner-text{position:relative;z-index:1}
.sell-hero-illustration{width:170px;height:auto;flex-shrink:0;overflow:visible}
.sell-hero-ticket{transform-origin:center;animation:sellTicketFloat 4s ease-in-out infinite}
.sell-hero-shield{transform-origin:150px 66px;animation:sellShieldPop 3s ease-in-out infinite}
@keyframes sellTicketFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes sellShieldPop{0%,45%,100%{transform:scale(1)}22%{transform:scale(1.08)}}
@media(min-width:768px){
  .sell-hero-banner{flex-direction:row;justify-content:space-between;text-align:left;padding:44px 48px}
  .sell-hero-illustration{width:220px}
}

.sell-benefits-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:8px}
@media(min-width:560px){.sell-benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sell-benefits-grid{grid-template-columns:repeat(4,1fr)}}

.sell-calculator{padding:26px 24px;margin-bottom:44px;display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:768px){.sell-calculator{grid-template-columns:1fr 1.25fr;align-items:center;gap:40px;padding:32px 36px}}
.sell-calculator-input label{display:block;font-weight:700;font-size:13px;color:var(--text-secondary);margin-bottom:8px}
.sell-calculator-input-wrap{display:flex;align-items:center;gap:8px;border:2px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 16px;transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.sell-calculator-input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.sell-calculator-input-wrap span{font-weight:700;color:var(--text-muted);font-size:18px}
.sell-calculator-input-wrap input{border:none;outline:none;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-primary);width:100%;background:transparent;padding:0}
.sell-calculator-input-wrap input::-webkit-outer-spin-button,.sell-calculator-input-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#calcFaceValueRange{width:100%;margin-top:14px;accent-color:var(--primary);cursor:pointer}
.sell-calculator-results{display:flex;flex-direction:column;gap:2px;background-color:var(--bg-subtle);border-radius:var(--radius-md);padding:4px 18px}
.sell-calculator-result{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dashed var(--border-strong)}
.sell-calculator-result:last-child{border-bottom:none}
.sell-calculator-result label{font-size:13px;color:var(--text-secondary);font-weight:600}
.sell-calculator-result span{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-primary);white-space:nowrap}
.sell-calculator-result span.is-negative{color:var(--danger)}
.sell-calculator-result.is-highlight span{color:var(--success);font-size:21px}
.sell-calculator-result.is-highlight label{font-size:14px;font-weight:800;color:var(--text-primary)}

.sell-requirements{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:8px}
@media(min-width:640px){.sell-requirements{grid-template-columns:repeat(2,1fr)}}
.sell-requirement{display:flex;gap:12px;align-items:flex-start;background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px 18px;transition:transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal) ease}
.sell-requirement:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.sell-requirement i{color:var(--success);font-size:19px;margin-top:2px;flex-shrink:0}
.sell-requirement strong{display:block;font-size:14px;color:var(--text-primary);margin-bottom:3px}
.sell-requirement p{margin:0;font-size:12.5px;color:var(--text-secondary)}

.ribbon-best-price{position:absolute;top:12px;right:-30px;background:linear-gradient(90deg,var(--success) 0%,#10B981 100%);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 34px;transform:rotate(35deg);box-shadow:0 2px 8px rgba(5,150,105,.35);z-index:2}

.mini-steps-strip{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 32px}
@media(min-width:640px){.mini-steps-strip{grid-template-columns:repeat(3,1fr);gap:14px}}
.mini-step{display:flex;align-items:center;gap:12px;background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px 16px;transition:transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal) ease}
.mini-step:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.mini-step .num{width:28px;height:28px;border-radius:50%;background-color:var(--primary);color:#fff;font-family:var(--font-display);font-weight:800;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.mini-step strong{display:block;font-size:13.5px;color:var(--text-primary)}
.mini-step span{display:block;font-size:12px;color:var(--text-muted)}

.event-hero-card{background:linear-gradient(150deg,#0F172A 0%,#1E1B4B 55%,#312E81 100%);border-radius:var(--radius-xl);padding:26px 24px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-xl)}
.event-hero-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 0%,rgba(129,140,248,.35) 0%,transparent 55%)}
.event-hero-card>*{position:relative;z-index:1}
.event-hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.event-hero-fact{background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:10px 12px}
.event-hero-fact label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#A5B4FC;font-weight:700;margin-bottom:3px}
.event-hero-fact span{display:block;font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#fff}

.contact-primary-card{background:linear-gradient(135deg,#052e1f 0%,#059669 140%);border-radius:var(--radius-xl);padding:32px 28px;color:#fff;position:relative;overflow:hidden;box-shadow:0 20px 40px -12px rgba(5,150,105,.4)}
.contact-primary-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 100%,rgba(255,255,255,.16) 0%,transparent 60%)}
.contact-primary-card>*{position:relative;z-index:1}
.contact-primary-card .response-chip{display:inline-flex;align-items:center;gap:6px;background-color:rgba(255,255,255,.16);padding:4px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:700;margin-bottom:14px}
.contact-primary-card .icon-badge{width:52px;height:52px;border-radius:var(--radius-lg);background-color:rgba(255,255,255,.16);display:grid;place-items:center;font-size:24px;margin-bottom:16px}
.contact-primary-card h3{color:#fff;margin:0 0 6px;font-size:1.4rem}
.contact-primary-card p{color:rgba(255,255,255,.85);margin-bottom:20px}
.contact-primary-card .btn-primary{background-color:#fff;color:var(--success-text);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.contact-primary-card .btn-primary:hover{background-color:#F0FDF4;color:var(--success-text)}

/* ---------------------------------------------------------------------
   Panel financiero (dashboard admin)
   --------------------------------------------------------------------- */
.finance-panel{display:flex;flex-direction:column;gap:16px}
.finance-hero{background:linear-gradient(135deg,#0F172A 0%,#1E1B4B 55%,#312E81 100%);border-radius:var(--radius-xl);padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:var(--shadow-xl)}
.finance-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(129,140,248,.35) 0%,transparent 55%)}
.finance-hero>*{position:relative;z-index:1}
.finance-hero label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#A5B4FC;margin-bottom:6px}
.finance-hero .amount{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.4rem);color:#fff;line-height:1.1}
.finance-hero .sub{font-size:12.5px;color:#CBD5E1;margin-top:6px}
.finance-stat-row{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.finance-stat-row{grid-template-columns:repeat(3,1fr)}}
.finance-stat{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px 18px;transition:transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal) ease}
.finance-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.finance-stat label{display:block;font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.finance-stat span{display:block;font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text-primary)}
.finance-stat small{display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px}
.seller-rank-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--radius-md);transition:background var(--dur-fast) ease}
.seller-rank-item:hover{background-color:var(--bg-subtle)}
.seller-rank-item .rank{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--text-muted);width:26px;flex-shrink:0}
.seller-rank-item .who{flex:1;min-width:0}
.seller-rank-item .who strong{display:block;font-size:13.5px;color:var(--text-primary)}
.seller-rank-item .who small{display:block;font-size:11.5px;color:var(--text-muted)}
.seller-rank-item .amt{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--success-text);flex-shrink:0}

/* ---------------------------------------------------------------------
   Ficha de boleta: vendedor verificado + señales de decisión (todas con
   datos reales — nada de contadores o "gente viendo esto" inventados).
   --------------------------------------------------------------------- */
.seller-card{display:flex;align-items:center;gap:14px;background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px 18px;transition:box-shadow var(--dur-normal) ease,border-color var(--dur-fast) ease,transform var(--dur-normal) var(--ease-spring)}
.seller-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);transform:translateY(-2px)}
.seller-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#1E1B4B 0%,#4F46E5 60%,#6366F1 100%);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:17px;flex-shrink:0;position:relative;box-shadow:0 2px 6px rgba(79,70,229,.3)}
.seller-avatar .verified-dot{position:absolute;bottom:-2px;right:-2px;width:17px;height:17px;border-radius:50%;background-color:var(--success);border:2px solid var(--bg-surface);display:grid;place-items:center;color:#fff;font-size:8px}
.seller-info{min-width:0}
.seller-info .seller-name-row{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--text-primary);font-weight:700;flex-wrap:wrap}
.seller-info .seller-name-row .badge{font-size:10px;padding:2px 8px}
.seller-meta{font-size:12.5px;color:var(--text-muted);margin-top:3px;display:flex;gap:12px;flex-wrap:wrap}
.seller-meta span{display:inline-flex;align-items:center;gap:5px}
.seller-meta i{font-size:11px;color:var(--text-muted)}
/* Comprimido a propósito: queda al final de la página, ya no es lo
   primero que ve el comprador, así que no necesita tanto espacio. */
.ticket-howitworks{padding:16px 18px}
.ticket-howitworks h3{margin:0 0 10px;font-size:1rem}
.howitworks-steps{display:flex;flex-direction:column;gap:10px}
.howitworks-step{display:flex;gap:10px;align-items:flex-start}
.howitworks-num{width:22px;height:22px;border-radius:50%;background-color:var(--primary-light);color:var(--primary);font-weight:700;display:grid;place-items:center;flex-shrink:0;font-size:11px}
.howitworks-step strong{display:block;color:var(--text-primary);font-size:13px}
.howitworks-step p{margin:2px 0 0;font-size:12px;color:var(--text-secondary);line-height:1.4}
@media(min-width:640px){.ticket-howitworks{padding:20px 22px}.ticket-howitworks h3{font-size:1.05rem;margin-bottom:12px}.howitworks-steps{gap:12px}.howitworks-num{width:25px;height:25px;font-size:12px}.howitworks-step strong{font-size:13.5px}.howitworks-step p{font-size:12.5px}}

.trust-mini-row{display:flex;flex-wrap:wrap;gap:7px 14px;justify-content:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border-subtle)}
.trust-mini-row span{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em}
.trust-mini-row i{color:var(--success);font-size:11px}

.scarcity-badge{display:inline-flex;align-items:center;gap:6px;background-color:var(--danger-light);color:var(--danger-text);border:1px solid #FECDD3;font-size:11.5px;font-weight:800;padding:6px 13px;border-radius:var(--radius-full);margin-bottom:12px;animation:badgePop var(--dur-slow) var(--ease-spring) both}
.urgency-badge{display:inline-flex;align-items:center;gap:6px;background-color:var(--warning-light);color:var(--warning-text);border:1px solid #FDE68A;font-size:11.5px;font-weight:800;padding:6px 13px;border-radius:var(--radius-full);margin-bottom:12px}

.btn-urgent{animation:urgentGlow 2.2s ease-in-out infinite}
@keyframes urgentGlow{0%,100%{box-shadow:0 1px 2px rgba(79,70,229,.2)}50%{box-shadow:0 4px 22px rgba(79,70,229,.5)}}

.price-emphasis{background:linear-gradient(135deg,var(--primary-light) 0%,#F5F3FF 100%);border:1px solid #C7D2FE;border-radius:var(--radius-md);padding:2px}

/* Popup promocional (homepage) — la imagen la sube el admin desde
   /admin/promocion, así que el diseño es solo un marco: fondo oscuro con
   blur, tarjeta centrada, botón de cerrar flotando sobre la imagen (visible
   contra cualquier fondo) y una barra de marca abajo. */
.promo-modal-backdrop{position:fixed;inset:0;background:rgba(8,8,12,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .35s ease both}
.promo-modal-backdrop[hidden]{display:none}
.promo-modal-card{position:relative;width:100%;max-width:440px;max-height:90vh;background:#0F0F14;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);animation:promoPop .45s cubic-bezier(.16,1,.3,1) both;display:flex;flex-direction:column}
@keyframes promoPop{from{opacity:0;transform:scale(.93) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.promo-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background var(--dur-fast) ease,transform var(--dur-fast) ease;z-index:2;-webkit-tap-highlight-color:transparent}
.promo-modal-close:hover{background:rgba(0,0,0,.65);transform:scale(1.08)}
.promo-modal-img-link{display:block;cursor:pointer}
.promo-modal-img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#0F0F14}
.promo-modal-brand{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;font-size:11.5px;color:#94A3B8;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}

/* Paginación de "Boletas disponibles" (home.php) — enlaces normales
   (?pagina=N), sin JS. Mismo lenguaje visual que .filter-pill (píldora,
   hover con fondo primary-light) para sentirse parte del mismo sistema
   en vez de un componente "de librería" pegado encima. */
.pagination-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin:36px 0 8px;flex-wrap:wrap}
.pagination-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 15px;border-radius:var(--radius-full);border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-secondary);font-weight:700;font-size:13.5px;text-decoration:none;transition:all var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}
.pagination-btn:hover{border-color:#C7D2FE;background-color:var(--primary-light);color:var(--primary-text);transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.pagination-btn.is-current{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow-sm);cursor:default}
.pagination-btn.is-current:hover{transform:none;background:var(--primary);color:#fff}
.pagination-btn.is-disabled{opacity:.35;pointer-events:none}
.pagination-ellipsis{color:var(--text-muted);font-weight:700;padding:0 2px;user-select:none}
.promo-modal-brand .brand-mark{width:20px;height:20px;flex-shrink:0}
.promo-modal-brand strong{color:#fff}