/* ============================================================
   KANO GAMER · LAYOUT & ARCHITECTURE (layout.css)
   Central Gamer Setup Column, Wallpaper, Wrappers, Header Layout,
   Mobile Drawer, Native Mobile Bottom Dock & Breakpoints
   ============================================================ */

/* Setup Gamer Column & Lateral Vignette */
/* ============================================================
   KANO GAMER · FONDO SETUP GAMER EN COLUMNA CENTRADA
   ============================================================ */
/* ============================================================
   KANO GAMER · FONDO OFICIAL LATERAL: MUNDO RUST & SURVIVAL
   Flancos vivos, cinematográficos y envolventes con hornos y fuego
   ============================================================ */
@keyframes rustHeatPulse {
  0%, 100% {
    filter: saturate(1.28) brightness(1.0) contrast(1.10);
  }
  50% {
    filter: saturate(1.36) brightness(1.06) contrast(1.12);
  }
}

.bg-lateral-wallpaper{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#070504;
  background-image:
    radial-gradient(ellipse 650px 520px at 5% 25%, rgba(255, 87, 34, 0.26) 0%, rgba(255, 87, 34, 0.08) 45%, transparent 75%),
    radial-gradient(ellipse 650px 520px at 95% 25%, rgba(255, 110, 0, 0.26) 0%, rgba(255, 110, 0, 0.08) 45%, transparent 75%),
    radial-gradient(ellipse 750px 600px at 3% 70%, rgba(255, 61, 0, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 750px 600px at 97% 70%, rgba(255, 152, 0, 0.22) 0%, transparent 70%),
    linear-gradient(90deg, 
      rgba(5, 4, 3, 0.35) 0%, 
      transparent 18%, 
      transparent 82%, 
      rgba(5, 4, 3, 0.35) 100%),
    url('/assets/uploads/rust-lateral-wallpaper-pro.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  filter:saturate(1.28) brightness(1.0) contrast(1.10);
  opacity:1 !important;
  animation:rustHeatPulse 8s ease-in-out infinite;
  transition:filter .5s ease, opacity .5s ease;
}

.lateral-embers-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:1;
  pointer-events:none;
}

@media (max-width: 1160px){
  .bg-lateral-wallpaper,
  .lateral-embers-canvas{
    display:none !important;
  }
}

/* ============================================================
   KANO GAMER · COLUMNA CENTRAL (1160px): MÁXIMO CONTRASTE Y LECTURA
   Doble capa de viñeta oscura semi-transparente para descanso visual
   y resalte perfecto de textos blancos, botones dorados y widgets.
   ============================================================ */
body::after{
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1160px, calc(100% - 16px));
  z-index:1;
  pointer-events:none;
  background-image:
    radial-gradient(ellipse 950px 720px at 50% 32%, rgba(6, 8, 13, 0.74) 0%, rgba(5, 7, 10, 0.88) 75%, rgba(4, 5, 8, 0.95) 100%),
    linear-gradient(180deg, 
      rgba(6, 8, 13, 0.84) 0%, 
      rgba(6, 8, 13, 0.70) 22%, 
      rgba(6, 8, 13, 0.74) 65%, 
      rgba(5, 6, 9, 0.94) 100%),
    url('/assets/uploads/kano-gaming-setup-eagle.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  border-left:1.5px solid rgba(229, 195, 127, 0.42);
  border-right:1.5px solid rgba(229, 195, 127, 0.42);
  box-shadow:
    0 0 75px rgba(0, 0, 0, 0.98),
    0 0 45px rgba(229, 195, 127, 0.16),
    inset 1px 0 0 rgba(255, 238, 185, 0.12),
    inset -1px 0 0 rgba(255, 238, 185, 0.12);
}

@media (max-width: 768px){
  body::after{
    width:100% !important;
    left:0 !important;
    transform:none !important;
    border-left:none !important;
    border-right:none !important;
  }
}



/* Base Containers & Wrappers (Balanced & Symmetrical 1100px Architecture) */
.wrap{
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  position:relative;
  z-index:2;
}
@media (max-width: 960px){
  .wrap{
    width:calc(100% - 24px);
  }
}
@media (max-width: 640px){
  .wrap{
    width:calc(100% - 16px);
  }
}


.section{
  padding:52px 0 40px;
  position:relative;
}
.section + .section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1040px, calc(100% - 32px));
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(229,195,127,0.2) 25%, rgba(229,195,127,0.38) 50%, rgba(229,195,127,0.2) 75%, transparent 100%);
  pointer-events:none;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.section-head h2{font-size:clamp(22px,3.2vw,28px);line-height:1;color:#f8fafc;letter-spacing:.02em;}
.section-head p{
  margin:0;
  max-width:440px;
  color:#94a3b8;
  font-weight:500;
  line-height:1.55;
  font-size:13.5px;
}


/* Background Wallpaper Layering */
.bg-wallpaper{
  position:fixed;
  inset:0;
  z-index:-1;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  opacity:.38;
  filter:saturate(1.2) brightness(.88);
  pointer-events:none;
  transition:background-image .45s ease;
}


/* Section Visual Pacing */
/* Renderizado Ultra-Fluido de Secciones */
.section {
  position: relative;
}


/* Sticky Site Header Layout */
/* ============================================================
   HEADER FLOTANTE FIJO (Acompaña permanentemente en el Scroll)
   ============================================================ */
.site-header{
  position: fixed !important;
  top: 6px !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000 !important;
  pointer-events: none !important;
  display: flex;
  justify-content: center;
  padding: 0 !important;
  isolation: isolate;
  contain: layout style;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.site-header .nav, .nav{
  position: relative !important;
  width: min(1120px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.nav-inner, .nav-cta, .nav-user-container, .nav-user-chip, .nav-user-dropdown, .nav-user-subbar{
  pointer-events: auto !important;
}
.nav-inner{
  width: 100% !important;
  min-height: 50px !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  padding: 6px 14px 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(20, 16, 13, 0.94) 0%, rgba(12, 9, 7, 0.98) 100%) !important;
  border: 1.5px solid rgba(229, 195, 127, 0.65) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 240, 195, 0.5), 0 0 22px rgba(229, 195, 127, 0.22) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  overflow: visible;
  transform: translateZ(0);
}
.site-header.is-scrolled .nav-inner, .nav.is-scrolled .nav-inner{
  background: linear-gradient(135deg, rgba(16, 12, 9, 0.96) 0%, rgba(8, 6, 4, 0.98) 100%) !important;
  border-color: rgba(229, 195, 127, 0.9) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255, 240, 195, 0.6), 0 0 32px rgba(229, 195, 127, 0.35) !important;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15.5px;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  color:inherit;
  flex-shrink:0;
  z-index:2;
}
.nav-brand img{
  width:32px;
  height:32px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid rgba(229, 195, 127, 0.4);
  box-shadow:0 0 14px rgba(229, 195, 127, 0.2);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(2px, 0.4vw, 5px);
  flex:1 1 auto;
  justify-content:center;
  min-width:0;
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px clamp(6px, 0.65vw, 11px);
  border-radius:9px;
  font-size:clamp(12px, 0.8vw, 13px);
  font-weight:700;
  color:#cbd5e1;
  text-decoration:none;
  transition:all .18s ease;
  border:1px solid transparent;
  white-space:nowrap;
  flex-shrink:0;
}
.nav-links a:hover{
  color:#e5c37f !important;
  background:rgba(229, 195, 127, 0.14) !important;
  border-color:rgba(229, 195, 127, 0.35) !important;
}
.nav-links a.active{
  color:#fff !important;
  background:linear-gradient(135deg, rgba(229, 195, 127, 0.32) 0%, rgba(255, 173, 47, 0.18) 100%) !important;
  border-color:rgba(229, 195, 127, 0.75) !important;
  box-shadow:0 4px 14px rgba(229, 195, 127, 0.28), inset 0 1px 0 rgba(255, 240, 195, 0.4) !important;
  font-weight:800;
  transform:translateY(-1px);
}
.nav-cta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
}
.nav-shop-btn{
  padding:7px 14px;
  font-size:12.5px;
  font-weight:800;
  background:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  color:#0c0903 !important;
  border:1px solid rgba(255, 240, 195, 0.9);
  box-shadow:0 4px 14px rgba(229, 195, 127, 0.35);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  transition:all .2s ease;
}
.nav-shop-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(229, 195, 127, 0.55);
  filter:brightness(1.06);
}
.nav-shop-btn .btn-icon{
  width:15px;
  height:15px;
}

/* Píldora dinámica de emisión / tienda en el Nav */
.nav-live-indicator{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space:nowrap;
}
.nav-live-indicator.is-offline{
  background:rgba(255,173,47,.10);
  border:1px solid rgba(255,173,47,.3);
  color:var(--gold-2);
}
.nav-live-indicator.is-offline:hover{
  background:rgba(255,173,47,.2);
  border-color:var(--gold-2);
}
.nav-live-indicator.is-offline .nav-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold-2);
}
.nav-live-indicator.is-live{
  background:linear-gradient(135deg, rgba(255,65,100,.22), rgba(22,17,13,.95));
  border:1px solid rgba(255,65,100,.6);
  color:#ff5c7c;
  box-shadow:0 0 16px rgba(255,65,100,.3);
  animation:pulseLiveBorder 2s infinite ease-in-out;
}
.nav-live-indicator.is-live.is-kick{
  background:linear-gradient(135deg, rgba(75,255,138,.22), rgba(22,17,13,.95));
  border:1px solid rgba(75,255,138,.6);
  color:var(--kick);
  box-shadow:0 0 16px rgba(75,255,138,.3);
}
.nav-live-indicator.is-live .nav-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px rgba(255,65,100,.3);
  animation:pulse 1.2s infinite;
}
.nav-live-indicator.is-live.is-kick .nav-live-dot{
  box-shadow:0 0 0 3px rgba(75,255,138,.3);
}
@keyframes pulseLiveBorder{
  0%,100%{border-color:rgba(255,65,100,.6);box-shadow:0 0 14px rgba(255,65,100,.25);}
  50%{border-color:rgba(255,65,100,.95);box-shadow:0 0 22px rgba(255,65,100,.5);}
}

.nav-channel-btn{padding:7px 11px; font-size:12px;}


/* Header Mobile Collapse / Toggle */
@media (max-width:960px){
  .nav-links{
    position:fixed;
    top:68px;
    left:12px;
    right:12px;
    flex-direction:column;
    align-items:stretch;
    padding:16px 14px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(22,16,12,.98) 0%, rgba(12,8,6,.99) 100%) !important;
    border:1.5px solid rgba(229,195,127,.6) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.95), 0 0 35px rgba(229,195,127,.25), inset 0 1px 0 rgba(255,240,195,.3) !important;
    display:none;
    max-height:calc(100vh - 84px);
    overflow-y:auto;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    z-index:999999 !important;
    pointer-events:auto !important;
    gap:6px;
  }
  .nav-links.open{
    display:flex !important;
    animation:navLinksSlideDown .22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-links a{
    padding:12px 16px;
    font-size:14.5px;
    font-weight:700;
    border-radius:12px;
    color:#cbd5e1;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .nav-links a:hover, .nav-links a.active{
    background:linear-gradient(135deg, rgba(229,195,127,.28) 0%, rgba(255,173,47,.16) 100%) !important;
    border-color:rgba(229,195,127,.6) !important;
    color:#fff !important;
    box-shadow:0 4px 14px rgba(229,195,127,.2);
  }
  .nav-toggle{
    display:flex !important;
  }
}

@keyframes navLinksSlideDown{
  from{opacity:0; transform:translateY(-10px) scale(0.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}


/* Mobile Navigation Drawer Layout */
/* ============================================================
   DRAWER FLOTANTE DE NAVEGACIÓN MÓVIL (Independiente & Ultra-Fluido)
   ============================================================ */
.mobile-nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(4, 2, 6, 0.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:9999998 !important;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.mobile-nav-backdrop.visible{
  opacity:1;
  pointer-events:auto;
}
.mobile-nav-drawer{
  position:fixed;
  top:12px;
  left:12px;
  right:12px;
  max-width:440px;
  margin:0 auto;
  z-index:9999999 !important;
  background:linear-gradient(180deg, rgba(22, 16, 12, 0.99) 0%, rgba(14, 9, 7, 0.99) 100%);
  border:1.5px solid rgba(229, 195, 127, 0.65);
  border-radius:22px;
  box-shadow:0 24px 80px rgba(0,0,0,0.96), 0 0 35px rgba(229, 195, 127, 0.25), inset 0 1px 0 rgba(255, 240, 195, 0.3);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-16px) scale(0.96);
  transition:all .25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height:calc(100vh - 24px);
  overflow-y:auto;
}
.mobile-nav-drawer.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.mobile-nav-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid rgba(229, 195, 127, 0.2);
}
.mobile-nav-close-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(229, 195, 127, 0.3);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .15s ease;
}
.mobile-nav-close-btn:hover{
  background:rgba(229, 195, 127, 0.2);
  color:var(--gold-2);
  border-color:var(--gold);
}
.mobile-nav-drawer-links{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.mobile-nav-drawer-links a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:12px;
  font-size:14.5px;
  font-weight:700;
  color:#cbd5e1;
  text-decoration:none;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  transition:all .15s ease;
}
.mobile-nav-drawer-links a:hover,
.mobile-nav-drawer-links a.active{
  background:linear-gradient(135deg, rgba(229, 195, 127, 0.25) 0%, rgba(255, 173, 47, 0.15) 100%);
  border-color:rgba(229, 195, 127, 0.6);
  color:#fff;
  transform:translateX(3px);
}
.nav-link-ico{
  font-size:16px;
  width:22px;
  display:inline-flex;
  justify-content:center;
}
.mobile-nav-drawer-footer{
  display:flex;
  gap:10px;
  padding-top:10px;
  border-top:1px solid rgba(229, 195, 127, 0.2);
}


/* Mobile Live Sticky Bar */
/* ============================================================
   MOBILE LIVE STICKY BAR (CRO & FIDELIZACIÓN MÓVIL)
   ============================================================ */
.mobile-live-sticky-bar{
  position:fixed;
  top:78px;
  left:14px;
  right:14px;
  max-width:480px;
  margin:0 auto;
  z-index:997;
  background:rgba(15,10,7,.94);
  border:1px solid rgba(83,252,24,.4);
  box-shadow:0 12px 35px rgba(0,0,0,.75), 0 0 20px rgba(83,252,24,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:999px;
  padding:7px 14px 7px 12px;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transform:translateY(-16px);
  opacity:0;
  pointer-events:none;
  transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .28s ease;
}
.mobile-live-sticky-bar.visible{
  display:flex;
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.mobile-live-sticky-left{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobile-live-sticky-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--kick);
  box-shadow:0 0 10px var(--kick);
  animation:hudPulse 1.4s infinite;
  flex-shrink:0;
}
.mobile-live-sticky-btn{
  background:var(--kick);
  color:#052610;
  font-weight:800;
  font-size:11.5px;
  padding:5px 12px;
  border-radius:20px;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:all .15s ease;
}
.mobile-live-sticky-btn:hover{
  transform:scale(1.04);
}


/* Native Mobile Bottom Navigation Dock (< 600px) */
/* ============================================================
   BOTTOM NAVIGATION BAR (App Nativa Móvil < 600px)
   ============================================================ */
.mobile-bottom-nav{
  display:none;
}
@media (max-width: 600px){
  .mobile-bottom-nav{
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:99998;
    pointer-events:none;
    padding:0 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bottom-nav-inner{
    pointer-events:auto;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    align-items:center;
    background:linear-gradient(180deg, rgba(20, 15, 12, 0.96) 0%, rgba(10, 7, 5, 0.98) 100%);
    border:1.2px solid rgba(229, 195, 127, 0.45);
    border-radius:20px;
    padding:6px 4px;
    box-shadow:0 12px 36px rgba(0, 0, 0, 0.95), 0 0 25px rgba(229, 195, 127, 0.18), inset 0 1px 0 rgba(255, 240, 195, 0.2);
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
  }
  .mobile-bottom-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:6px 2px;
    border-radius:12px;
    color:#94a3b8;
    text-decoration:none;
    background:transparent;
    border:none;
    cursor:pointer;
    transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color:transparent;
    user-select:none;
  }
  .mobile-bottom-nav-item span{
    font-size:10.5px;
    font-weight:700;
    font-family:var(--font-body);
    letter-spacing:0.02em;
    line-height:1;
    transition:color 0.2s ease;
  }
  .mb-nav-icon-wrap{
    position:relative;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all 0.2s ease;
  }
  .mb-nav-icon-wrap svg{
    width:19px;
    height:19px;
    transition:transform 0.2s ease;
  }
  .mobile-bottom-nav-item:active{
    transform:scale(0.92);
  }
  .mobile-bottom-nav-item.active,
  .mobile-bottom-nav-item:hover{
    color:#fff;
  }
  .mobile-bottom-nav-item.active span{
    color:var(--gold-2);
    font-weight:800;
  }
  .mobile-bottom-nav-item.active .mb-nav-icon-wrap{
    background:rgba(229, 195, 127, 0.15);
    color:var(--gold-2);
    box-shadow:0 0 12px rgba(229, 195, 127, 0.35);
  }
  .mobile-bottom-nav-item.active .mb-nav-icon-wrap svg{
    transform:scale(1.1);
  }
  .mb-live-dot{
    position:absolute;
    top:2px;
    right:2px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ef4444;
    box-shadow:0 0 8px #ef4444;
    animation:pulseDotRed 1.8s infinite ease-in-out;
  }
  body{
    padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .back-to-top{
    bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ============================================================
   RESPONSIVE BREAKPOINTS (Layout Foundation <= 768px)
   ============================================================ */
@media (max-width: 768px) {
  .wrap{
    width:100% !important;
    max-width:100% !important;
    padding:0 12px !important;
    box-sizing:border-box !important;
  }
  .section{
    padding:44px 0 32px !important;
  }
  .section-head{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    margin-bottom:18px !important;
  }
  .section-head h2{
    font-size:clamp(22px, 6vw, 28px) !important;
  }
  .section-head p{
    font-size:13px !important;
  }

  /* Header & Navegación Móvil */
  .site-header{
    top:6px !important;
  }
  .nav{
    width:calc(100% - 12px) !important;
  }
  .nav-inner{
    padding:5px 8px !important;
    min-height:46px !important;
    border-radius:14px !important;
    gap:5px !important;
  }
  .nav-brand{
    font-size:13.5px !important;
    gap:6px !important;
  }
  .nav-brand img{
    width:28px !important;
    height:28px !important;
    border-radius:8px !important;
  }
  .nav-user-chip{
    padding:4px 8px !important;
    font-size:11px !important;
    gap:5px !important;
    max-width:130px !important;
  }
  .nav-user-nick{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    max-width:70px !important;
  }
  .nav-channel-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    padding:0 !important;
    justify-content:center !important;
    border-radius:9px !important;
  }
  .nav-channel-btn span{
    display:none !important;
  }

}