/* ─────────────────────────────────────────────────────────────────────────────
   home-mobile.css — Mobile home layout
   Reemplaza el contenido completo de assets/css/home-mobile.css
   Solo aplica a ≤ 768px. No toca nada del desktop.
───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {

  .mobile-app-header {
    display: none !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px 16px;
    background: #F5F5F5;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: none;
  }

  .mah-logo {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mah-logo-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .mah-logo-text {
    font-size: 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #111111;
    letter-spacing: 0.02em;
  }

  .mah-search-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .mah-search-btn svg {
    width: 22px;
    height: 22px;
  }

  .mah-search-btn:active {
    background: rgba(0,0,0,0.05);
  }

  .mobile-streak-banner {
    display: none;
    align-items: center;
    gap: 12px;
    background: #FFF8E1;
    border: 1px solid #F5C400;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 8px 8px 14px 8px;
  }

  .msb-medal {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .msb-text {
    flex: 1;
  }

  .msb-title {
    font-size: 14px;
    font-weight: 500;
    color: #111111;
    margin-bottom: 2px;
  }

  .msb-sub {
    font-size: 12px;
    color: #888888;
    line-height: 1.4;
  }

  /* Global mobile spacing system (home only). */
  body.home-active #app,
  body.home-active #app.container,
  body.home-active .home-web-layout,
  body.home-active .home-web-layout.home-desktop-theme,
  body.home-active #home-lower,
  body.home-active #home-lower .lower-container,
  body.home-active #home-quick-section,
  body.home-active .cyx-new-block,
  body.home-active .cyx-sections-block,
  body.home-active .web-question,
  body.home-active .home-weekly-notes,
  body.home-active .home-riderroom-banner,
  body.home-active .analysis-block,
  body.home-active .continue-block {
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  /* Carousels: keep 16px start, remove right gutter for next-card peek. */
  body.home-active .cyx-new-track,
  body.home-active .quick-cyx-track,
  body.home-active #home-lower .desktop-home-quick-grid,
  body.home-active .web-hero-secondary-row,
  body.home-active .home-carousel,
  body.home-active .home-web-container {
    padding-left: 5px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Titles and labels: always aligned to 16px gutters. */
  body.home-active .web-big-title,
  body.home-active #home-lower .section-title,
  body.home-active .cyx-new-title,
  body.home-active .cyx-sections-title,
  body.home-active .question-label,
  body.home-active .home-weekly-notes-title,
  body.home-active #home-quick-section .h5.mb-0 {
    padding-left: 16px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  /* Antes se ocultaba la barra azul de "Nuevo en Cyclick" en móvil (el
     padding hacía el indent) — Hector pidió (2026-09-08) que TODOS los
     títulos de bloque tengan la barra, igual que "Explora Cyclick"/"Notas
     del pelotón", así que se vuelve a mostrar. */
  body.home-active .cyx-new-head-bar {
    display: block !important;
  }

  /* Hide yellow underline on section-title (Mejora en 5 minutos) on mobile. */
  body.home-active .section-title::after {
    display: none !important;
  }

  /* Match .section-title to .cyx-new-title style on mobile. */
  body.home-active #home-lower .section-title {
    display: block !important;
    position: static !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    color: #111111 !important;
    letter-spacing: normal !important;
    line-height: 1.25 !important;
  }

  /* Zero out nested block padding inside #home-lower to prevent stacking. */
  body.home-active #home-lower .cyx-new-block,
  body.home-active #home-lower .cyx-sections-block,
  body.home-active #home-lower .web-question,
  body.home-active #home-lower > .home-weekly-notes,
  body.home-active #home-lower > .home-riderroom-banner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Reset shell padding on mobile so it doesn't stack with container padding. */
  body.home-active .cyx-new-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home-active #home-lower .lower-band:first-child .cyx-new-shell {
    padding-top: 0 !important;
  }

  body.home-active .cyx-new-head {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* #home-lower titles: 5(layout) + 5(#home-lower) + 5(.lower-container) + 11 = 26px,
     matching Recomendado: 5(layout) + 5(.home-web-container) + 13+3(border) = 26px. */
  body.home-active #home-lower .section-title,
  body.home-active #home-lower .cyx-new-title,
  body.home-active #home-lower .cyx-sections-title,
  body.home-active #home-lower .question-label,
  body.home-active #home-lower .home-weekly-notes-title {
    padding-left: 11px !important;
  }

  /* Recomendado para ti: block and title flush to left edge. */
  body.home-active .home-web-layout .home-web-container {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
  }

  body.home-active .home-web-layout .web-big-title {
    padding-left: 0 !important;
    border-left: 0 !important;
    margin-left: 0 !important;
  }

  body.home-active .home-web-layout .web-hero-secondary-row {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Nuevo en Cyclick: title flush; content starts at 5px. */
  body.home-active #home-lower .cyx-new-block .cyx-new-title {
    padding-left: 0 !important;
  }

  body.home-active #home-lower .cyx-new-block .cyx-new-track {
    padding-left: 0 !important;
    margin-left: -5px !important;
    margin-right: -5px !important;
  }

  /* ── Align ALL content blocks to same left edge as titles ────────────── */

  /* Mejora en 5 minutos: same lateral spacing as Nuevo/Recomendado */
  body.home-active #home-lower .quick-cyx-track,
  body.home-active #home-lower .desktop-home-quick-grid {
    padding-left: 0 !important;
    margin-left: -5px !important;
    margin-right: -5px !important;
  }

  /* #home-lower non-carousel content blocks: same 11px alignment */
  body.home-active #home-lower .cyx-sections-head,
  body.home-active #home-lower .cyx-sections-cards,
  body.home-active #home-lower .cyx-sections-list-wrap,
  body.home-active #home-lower .question-layout,
  body.home-active #home-lower .section-header,
  body.home-active #home-lower .home-weekly-notes-head,
  body.home-active #home-lower .home-weekly-notes-grid,
  body.home-active #home-lower .desktop-home-head {
    padding-left: 11px !important;
    box-sizing: border-box !important;
  }

  /* Rider Room banner: lateral padding on mobile */
  body.home-active #home-lower .home-riderroom-banner,
  body.home-active #home-lower .home-riderroom-banner .lower-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.home-active #home-lower .home-riderroom-banner .home-riderroom-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
  }

  /* Regular non-carousel blocks keep standard breathing room. */
  body.home-active .home-weekly-main-note,
  body.home-active .home-weekly-list,
  body.home-active .question-card,
  body.home-active .question-side-item,
  body.home-active .cyx-section-list-item,
  body.home-active .sidebar-premium,
  body.home-active .desktop-home-video-card,
  body.home-active .cyx-new-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Temporary integration mode: show desktop home structure on mobile. */

  #app.container {
    max-width: 100% !important;
    padding: 8px 0 84px !important;
  }

  .home-mobile-layout {
    display: none !important;
  }

  .home-web-layout,
  .home-web-layout.home-desktop-theme {
    display: block !important;
    padding: 8px 0 18px !important;
    min-height: auto !important;
  }

  .home-web-layout .clips-container {
    max-width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    max-height: 420px !important;
    margin: 0 auto !important;
  }

  .home-web-layout .clip-top-title {
    font-size: 0.92rem !important;
  }

  .home-web-layout .clip-badge {
    font-size: 0.58rem !important;
    padding: 3px 6px !important;
  }

  .home-web-layout .clip-cta {
    font-size: 0.68rem !important;
    padding: 7px 10px !important;
  }

  #home-lower .lower-band {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: none !important;
  }

  #home-lower .lower-band:first-child {
    padding-top: 0 !important;
  }

  #home-lower .lower-container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  #home-lower .section-title,
  #home-lower .cyx-new-title,
  #home-lower .cyx-sections-title,
  #home-lower .question-label,
  #home-lower .home-weekly-notes-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }

  #home-lower .cyx-new-title {
    font-size: 24px !important;
  }

  #home-lower .cyx-sections-subtitle,
  #home-lower .home-weekly-main-desc,
  #home-lower .question-side-sub {
    font-size: 12px !important;
  }

  #home-lower .desktop-home-quick-grid {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scroll-snap-type: x mandatory !important;
  }

  #home-lower .desktop-home-quick-grid::-webkit-scrollbar {
    display: none !important;
  }

  #home-lower .desktop-home-video-card {
    min-width: 220px !important;
    max-width: 220px !important;
    flex: 0 0 220px !important;
    scroll-snap-align: start;
    background: #FFFFFF !important;
    border: 0.5px solid #E0E0E0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: #111111 !important;
    padding: 0 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #home-lower .desktop-home-thumb {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 0 !important;
    background: #1A1A1A !important;
    overflow: hidden !important;
  }

  #home-lower .desktop-home-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  body.home-active .cyx-new-thumb,
  body.home-active #home-lower .cyx-new-thumb {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  #home-lower .desktop-home-video-card .meta {
    padding: 10px 12px 12px !important;
  }

  #home-lower .desktop-home-video-card .title {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    min-height: 35px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  #home-lower .desktop-home-video-card .sub {
    font-size: 11px !important;
    color: #888888 !important;
    margin-top: 8px !important;
    line-height: 1.2 !important;
  }

  #home-lower .home-riderroom-card {
    border-radius: 14px !important;
    padding: 14px !important;
    gap: 12px !important;
  }

  #home-lower .home-riderroom-content {
    background: #1a1a1a !important;
    color: #FFFFFF !important;
    border-radius: 0 0 12px 12px !important;
  }

  #home-lower .home-riderroom-title {
    font-size: 1.12rem !important;
    color: #FFFFFF !important;
  }

  #home-lower .home-riderroom-sub,
  #home-lower .home-riderroom-bullets li {
    font-size: 0.8rem !important;
  }

  #home-lower .home-riderroom-sub {
    color: #BBBBBB !important;
  }

  #home-lower .home-riderroom-included,
  #home-lower .home-riderroom-bullets {
    display: none !important;
    color: #888888 !important;
  }

  #home-lower .home-riderroom-btn {
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 10px !important;
  }

  #home-lower .home-riderroom-actions .home-riderroom-btn-primary {
    display: none !important;
  }

  #home-lower .home-riderroom-actions .home-riderroom-btn-ghost {
    width: 100% !important;
  }

  #home-lower .web-question .question-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #home-lower .web-question .question-card,
  #home-lower .web-question .question-side-container,
  #home-lower .home-weekly-main-note,
  #home-lower .home-weekly-list {
    border-radius: 12px !important;
    padding: 14px !important;
  }

  #home-lower .home-weekly-main-title {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }

  #home-lower .home-weekly-item h4 {
    font-size: 0.86rem !important;
  }

  /* Recomendado para ti - mobile carousel */
  .home-web-layout .home-sidebar,
  .home-web-layout .rider-clips-panel {
    display: none !important;
  }

  .home-web-layout .web-big-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    padding: 0 16px 0 13px !important;
    margin: 18px 0 12px !important;
    border-left: 3px solid #0056A3 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
  }

  /* Mobile-only: remove white shell behind Recomendado para ti. */
  .home-web-layout,
  .home-web-layout.home-desktop-theme,
  .home-web-layout .home-web-container,
  .home-web-layout .home-main {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  body.home-active .home-web-layout,
  body.home-active .home-web-layout.home-desktop-theme,
  body.home-active .home-web-layout.home-desktop-theme .home-web-container,
  body.home-active .home-web-layout.home-desktop-theme .home-main,
  body.home-active .home-web-layout .web-hero-full,
  body.home-active .home-web-layout .web-hero-secondary-row {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .home-web-layout .home-web-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 0 0 16px !important;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    grid-template-columns: unset !important;
  }

  .home-web-layout .home-web-container::-webkit-scrollbar {
    display: none !important;
  }

  .home-web-layout .home-main {
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    display: block !important;
    width: unset !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* 2026-09-03: en movil "Recomendado para ti" es solo un carrusel de
     tarjetas uniformes, sin card grande destacada arriba (a peticion
     explicita de Hector) — se oculta el contenedor completo de la hero. */
  .home-web-layout .web-hero-full {
    display: none !important;
  }

  .home-web-layout .hero-feature-card {
    display: none !important;
  }

  .home-web-layout .hero-feature-card {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .home-web-layout .hero-feature-card img,
  .home-web-layout .hero-feature-card video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .home-web-layout .hero-feature-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%) !important;
  }

  .home-web-layout .hero-feature-content {
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  .home-web-layout .hero-cat {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: #0056A3 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
  }

  /* En móvil .hero-cat se vuelve un badge flotando sobre la imagen (arriba)
     — la fila de fecha (agregada 2026-09-08, Hector) es texto en flujo
     normal pensado para el layout de escritorio (sección → título → fecha
     apiladas), aquí quedaría suelta sobre la miniatura. Se oculta solo en
     la card grande; en las secundarias (.hero-secondary-content) el layout
     se queda en flujo normal (no absolute), ahí sí se ve. */
  .home-web-layout .web-hero-full .hero-date-row {
    display: none !important;
  }

  .home-web-layout .hero-title {
    position: absolute !important;
    bottom: 28px !important;
    left: 10px !important;
    right: 10px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  .home-web-layout .hero-duration {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    background: rgba(0,0,0,0.75) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .home-web-layout .web-hero-secondary-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    padding-right: 0 !important;
  }

  .home-web-layout .web-hero-secondary-row::-webkit-scrollbar {
    display: none !important;
  }

  .home-web-layout .hero-secondary-card {
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    width: auto !important;
    flex: 0 0 calc((100% - 16px) / 1.2) !important;
    max-width: calc((100% - 16px) / 1.2) !important;
    background-color: #FFFFFF !important;
    border: none !important;
  }

  .home-web-layout .hero-secondary-card * {
    text-decoration: none !important;
  }

  .home-web-layout .hero-secondary-card img,
  .home-web-layout .hero-secondary-card video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .home-web-layout .hero-secondary-card::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex: 0 0 auto !important;
  }

  /* flex:1 0 auto (2026-09-08, Hector) — sin esto, cuando una card del
     carrusel es más alta que otra (ej. trae badge PREMIUM y otra no), la
     fila las estira parejo (comportamiento normal de flex) pero el
     contenido de la card corta NO crecía para llenar ese espacio extra —
     se veía un pedazo del thumbnail/fondo de la card asomando debajo de la
     fecha. En escritorio esto ya lo tenía (`style.css`), en móvil faltaba. */
  .home-web-layout .hero-secondary-card .hero-secondary-content {
    position: static !important;
    min-height: auto !important;
    padding: 0 0 12px 0 !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 0 auto !important;
  }

  /* Fecha + badge premium de la card secundaria en móvil (2026-09-08) —
     color explícito con !important: si no, heredan el gris/blanco claro de
     .hero-secondary-content (que trae su propio color de dark-theme, ver
     dark-theme-overrides.css). Aquí sí se queda en flujo normal (no
     absolute como la card grande), por eso no hace falta ocultarla.
     align-self:stretch (mismo motivo que en escritorio, style.css): sin
     esto el badge no tiene a dónde empujar con margin-left:auto y queda
     pegado junto a la fecha en vez de ir al borde derecho de la card. */
  .home-web-layout .hero-secondary-card .hero-date-row {
    display: flex !important;
    align-items: center !important;
    /* margen horizontal 12px, igual que .hero-cat-sm/.hero-title-sm — el
       contenedor no tiene padding lateral (cada hijo trae el suyo), esta
       fila se había quedado sin él: la fecha quedaba pegada a la izquierda
       y el badge pegado a la derecha (Hector, 2026-09-08). */
    margin: 4px 12px 0 !important;
    align-self: stretch !important;
    /* .hero-cat-sm ya traía order:1 y .hero-title-sm order:2 (código
       original) — sin esto la fila de fecha (sin order explícito, o sea 0)
       se colaba ANTES de sección y título (Hector, 2026-09-08). */
    order: 3 !important;
  }
  .home-web-layout .hero-secondary-card .hero-date-sm {
    font-size: 10px !important;
    color: #888888 !important;
    line-height: 1.2 !important;
  }
  /* margin-left:auto del badge — en style.css (escritorio) ya estaba, aquí
     faltaba: sin esto el badge se queda pegado junto a la fecha en vez de
     ir al borde derecho de la card en móvil (Hector, 2026-09-08). */
  .home-web-layout .hero-secondary-card .hero-date-row .section-video-badge-premium {
    margin-left: auto !important;
  }
  .home-web-layout .hero-secondary-card .hero-cat-sm {
    position: static !important;
    display: block !important;
    background: none !important;
    color: #0056A3 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 10px 12px 0 !important;
    line-height: 1.2 !important;
    order: 1 !important;
  }

  .home-web-layout .hero-secondary-card .hero-title-sm {
    position: static !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    margin: 6px 12px 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 35px !important;
    order: 2 !important;
  }

  .home-web-layout .hero-duration-sm {
    position: absolute !important;
    top: -27px !important;
    right: 8px !important;
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    margin: 0 !important;
    z-index: 3 !important;
  }

  /* Unified mobile home spacing: 8px lateral, 14px between blocks, 6px title-row */
  :root {
    --home-lateral: 8px;
    --home-block-gap: 14px;
    --home-title-row-gap: 6px;
    --home-card-gap: 12px;
  }

  body.home-active .mobile-streak-banner {
    margin: 8px var(--home-lateral) var(--home-block-gap) var(--home-lateral) !important;
  }

  body.home-active .home-web-layout,
  body.home-active #home-lower {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .home-web-layout.home-desktop-theme #home-lower,
  body.home-active #home-lower {
    margin-top: 0 !important;
  }

  body.home-active .home-web-layout .home-web-container {
    padding: 0 var(--home-lateral) 0 var(--home-lateral) !important;
  }

  body.home-active .home-web-layout .web-big-title {
    margin: 0 0 var(--home-title-row-gap) 0 !important;
    padding-left: 0 !important;
    line-height: 1.2 !important;
  }

  body.home-active .home-web-layout .web-hero-secondary-row {
    margin: 0 0 var(--home-block-gap) 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home-active #home-lower .lower-container {
    padding-left: var(--home-lateral) !important;
    padding-right: var(--home-lateral) !important;
  }

  body.home-active #home-lower .lower-band {
    padding-top: var(--home-block-gap) !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  body.home-active #home-lower .lower-band:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-bottom: 0 !important;
  }

  body.home-active #home-lower .lower-band.desktop-home-quick-band {
    border-top: 0 !important;
    padding-top: 3px !important;
    margin-top: 0 !important;
  }

  /* Hard remove divider between Nuevo and Mejora in mobile regardless of body state. */
  #home-lower .lower-band:first-child {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  #home-lower .lower-band.desktop-home-quick-band {
    border-top: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-top: 3px !important;
  }

  #home-lower .lower-band.home-riderroom-banner {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
  }

  #home-lower .lower-band:first-child,
  #home-lower .lower-band.desktop-home-quick-band {
    background: #F5F5F5 !important;
  }

  /* Kill any residual divider between Nuevo and Mejora (borders, shadows, pseudos). */
  #home-lower .lower-band:first-child,
  #home-lower .lower-band:nth-child(2),
  #home-lower .lower-band:nth-child(3),
  #home-lower .lower-band.desktop-home-quick-band,
  #home-lower .lower-band.home-riderroom-banner {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  #home-lower .lower-band:first-child::before,
  #home-lower .lower-band:first-child::after,
  #home-lower .lower-band:nth-child(2)::before,
  #home-lower .lower-band:nth-child(2)::after,
  #home-lower .lower-band.desktop-home-quick-band::before,
  #home-lower .lower-band.desktop-home-quick-band::after,
  #home-lower .lower-band.home-riderroom-banner::before,
  #home-lower .lower-band.home-riderroom-banner::after {
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Final mask: hide any sub-pixel divider rendered between Mejora and Rider Room. */
  #home-lower .lower-band.desktop-home-quick-band {
    position: relative !important;
    z-index: 1;
  }

  #home-lower .lower-band.desktop-home-quick-band::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background: #F5F5F5 !important;
    pointer-events: none !important;
  }

  /* Final mask: hide any sub-pixel divider rendered between Nuevo and Mejora. */
  body.home-active #home-lower .lower-band:first-child {
    position: relative !important;
    z-index: 1;
  }

  body.home-active #home-lower .lower-band:first-child::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 1px !important;
    background: #F5F5F5 !important;
    pointer-events: none !important;
  }

  #home-lower .cyx-new-shell {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Keep block spacing consistent even when body.home-active is not present. */
  #home-lower .lower-band {
    padding-bottom: 0 !important;
  }

  #home-lower .lower-band:first-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #home-lower .lower-band:first-child .cyx-new-track {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #home-lower .lower-band:first-child + .lower-band.desktop-home-quick-band {
    margin-top: 0 !important;
    padding-top: 3px !important;
  }

  #home-lower .lower-band:first-child .cyx-new-head,
  #home-lower .lower-band.desktop-home-quick-band .desktop-home-head {
    margin-bottom: 6px !important;
  }

  body.home-active #home-lower .cyx-new-shell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home-active #home-lower .home-riderroom-banner .home-riderroom-card {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  body.home-active #home-lower .section-title,
  body.home-active #home-lower .cyx-new-title,
  body.home-active #home-lower .cyx-sections-title,
  body.home-active #home-lower .question-label,
  body.home-active #home-lower .home-weekly-notes-title {
    margin: 0 !important;
    padding-left: 0 !important;
  }

  body.home-active #home-lower .cyx-new-head,
  body.home-active #home-lower .cyx-sections-head,
  body.home-active #home-lower .desktop-home-head,
  body.home-active #home-lower .section-header,
  body.home-active #home-lower .home-weekly-notes-head {
    margin-bottom: var(--home-title-row-gap) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.home-active #home-lower .cyx-new-track,
  body.home-active #home-lower .desktop-home-quick-grid,
  body.home-active #home-lower .quick-cyx-track {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.home-active #home-lower .cyx-sections-cards,
  body.home-active #home-lower .cyx-sections-list-wrap,
  body.home-active #home-lower .question-layout,
  body.home-active #home-lower .home-weekly-notes-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Single mobile flow: only #home-lower (web-lower structure) is rendered on mobile. */
  :root {
    --home-mobile-block-gap: var(--home-block-gap);
  }

  body.home-active #home-focus-band,
  body.home-active .home-web-layout,
  body.home-active #home-lower {
    display: block !important;
    background: #F5F5F5 !important;
    box-shadow: none !important;
    clip-path: none !important;
  }

  body.home-active #home-lower .desktop-home-sections-band,
  body.home-active #home-lower .web-question {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.home-active #home-lower .desktop-home-sections-band,
  body.home-active #home-lower .desktop-home-sections-wrap,
  body.home-active #home-lower .desktop-home-sections-band .cyx-sections-block,
  body.home-active #home-lower .desktop-home-sections-band .cyx-sections-head,
  body.home-active #home-lower .desktop-home-sections-band .cyx-sections-cards,
  body.home-active #home-lower .web-question,
  body.home-active #home-lower .web-question .section-header,
  body.home-active #home-lower .web-question .question-layout {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    max-height: none !important;
  }

  body.home-active #home-lower .desktop-home-sections-band .cyx-sections-track {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.home-active #home-lower .desktop-home-sections-band .cyx-sections-head,
  body.home-active #home-lower .web-question .section-header {
    display: flex !important;
  }

  body.home-active #home-lower .desktop-home-sections-band .cyx-sections-title,
  body.home-active #home-lower .desktop-home-sections-band .cyx-sections-subtitle,
  body.home-active #home-lower .web-question .question-label,
  body.home-active #home-lower .web-question .section-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.home-active #home-lower .web-question .question-layout {
    display: grid !important;
  }

  body.home-active #home-lower .lower-band {
    margin: 0 !important;
    padding-top: var(--home-mobile-block-gap) !important;
    padding-bottom: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body.home-active #home-lower .lower-band:first-child {
    padding-top: 0 !important;
  }

  /* Canonical spacing in the visible mobile flow. */
  body.home-active #home-lower .desktop-home-quick-band + .home-riderroom-banner,
  body.home-active #home-lower .home-riderroom-banner + .desktop-home-sections-band,
  body.home-active #home-lower .desktop-home-sections-band + .home-weekly-notes {
    padding-top: var(--home-mobile-block-gap) !important;
    margin-top: 0 !important;
  }

  /* Extra air only between Mejora en 5 minutos and The Rider Room. */
  body.home-active #home-lower .desktop-home-quick-band + .home-riderroom-banner {
    margin-top: 12px !important;
  }

  /* Apply card spacing tokens across Home mobile visible flow. */
  body.home-active .home-web-layout .web-hero-secondary-row,
  body.home-active #home-lower .cyx-new-track,
  body.home-active #home-lower .desktop-home-quick-grid,
  body.home-active #home-lower .quick-cyx-track,
  body.home-active #home-lower .cyx-sections-track,
  body.home-active #home-lower .home-weekly-notes-grid,
  body.home-active #home-lower .question-layout {
    gap: var(--home-card-gap) !important;
  }

  /* Hide seam at Rider Room lower edge in active mobile flow. */
  body.home-active #home-lower .home-riderroom-banner {
    position: relative !important;
    z-index: 1;
  }

  body.home-active #home-lower .home-riderroom-banner::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    height: 2px !important;
    background: #F5F5F5 !important;
    pointer-events: none !important;
  }

  /* Final spacing override: more gap between Mejora en 5 minutos and Rider Room. */
  body.home-active #home-lower .lower-band.desktop-home-quick-band + .lower-band.home-riderroom-banner {
    margin-top: 12px !important;
  }

  /* Mobile: hide carousel arrows in Explora sections (use swipe). */
  body.home-active .cyx-sections-arrow {
    display: none !important;
  }

  /* Mobile-only: Explora stays in cards mode, hide Tarjetas/Lista switch. */
  body.home-active .cyx-sections-toggle {
    display: none !important;
  }

  body.home-active .cyx-sections-cards {
    display: block !important;
  }

  body.home-active .cyx-sections-list-wrap {
    display: none !important;
  }

  /* Mobile-only: hide Explora subtitle text in all mobile render paths. */
  .cyx-sections-subtitle,
  #home-lower .cyx-sections-subtitle {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mobile-only: Explora card banners in 16:9 ratio. */
  body.home-active .cyx-section-card-media,
  body.home-active #home-lower .cyx-section-card-media {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Mobile-only: compact icon cards for Explora Cyclick. */
  body.home-active .cyx-sections-block--compact .cyx-sections-title,
  #home-lower .cyx-sections-block--compact .cyx-sections-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    padding: 0 12px !important;
    margin: 0 0 12px !important;
  }

  body.home-active .cyx-sections-block--compact .cyx-sections-track,
  #home-lower .cyx-sections-block--compact .cyx-sections-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 12px !important;
    padding: 0 14px 8px 14px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: none !important;
    scroll-behavior: smooth !important;
    scroll-padding-left: 14px !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
  }

  body.home-active .cyx-sections-block--compact .cyx-sections-track::-webkit-scrollbar,
  #home-lower .cyx-sections-block--compact .cyx-sections-track::-webkit-scrollbar {
    display: none !important;
  }

  /* Keep horizontal pan inside Explora carousel and avoid page drifting sideways. */
  body.home-active,
  body.home-active #app,
  body.home-active .home-web-layout,
  body.home-active #home-lower {
    overflow-x: hidden !important;
  }

  body.home-active .cyx-sections-track,
  #home-lower .cyx-sections-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    scroll-snap-type: none !important;
    scroll-behavior: smooth !important;
  }

  body.home-active .cyx-sections-track::-webkit-scrollbar,
  #home-lower .cyx-sections-track::-webkit-scrollbar {
    display: none !important;
  }

  /* Shared visual tokens for Explora icon cards (fallback large cards only). */
  body.home-active .cyx-section-card:not(.cyx-section-card--compact),
  #home-lower .cyx-section-card:not(.cyx-section-card--compact) {
    background: #FFFFFF !important;
    border: 0.5px solid #E0E0E0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* Explora Cyclick (mobile): foto de la sección + nombre abajo, sin caja. */
  body.home-active .cyx-section-card--compact,
  #home-lower .cyx-section-card--compact {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 2px !important;
    text-align: center !important;
    cursor: pointer !important;
    min-width: 150px !important;
    max-width: 150px !important;
    flex: 0 0 150px !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    text-decoration: none !important;
    color: #111111 !important;
  }

  body.home-active .cyx-section-card--compact:active .cyx-section-compact-photo,
  #home-lower .cyx-section-card--compact:active .cyx-section-compact-photo {
    box-shadow: 0 0 0 2px #0056A3 !important;
  }

  body.home-active .cyx-section-compact-photo,
  #home-lower .cyx-section-compact-photo {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: 12px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #E5E7EB !important;
  }

  body.home-active .cyx-section-compact-icon,
  #home-lower .cyx-section-compact-icon {
    width: 56px !important;
    height: 56px !important;
    display: block !important;
    object-fit: contain !important;
    filter: brightness(0) saturate(100%) invert(24%) sepia(78%) saturate(1300%) hue-rotate(203deg) brightness(102%) contrast(93%);
  }

  body.home-active .cyx-section-compact-title,
  #home-lower .cyx-section-compact-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  body.home-active .cyx-section-card--compact::before,
  #home-lower .cyx-section-card--compact::before {
    content: none !important;
    display: none !important;
  }

  body.home-active .cyx-section-card--compact[data-section="training"]::before,
  #home-lower .cyx-section-card--compact[data-section="training"]::before {
    background-image: url('../img/icons%20sections/icon-entrenamientos.png') !important;
  }

  body.home-active .cyx-section-card--compact[data-section="recovery"]::before,
  #home-lower .cyx-section-card--compact[data-section="recovery"]::before {
    background-image: url('../img/icons%20sections/icon-recovery.png') !important;
  }

  body.home-active .cyx-section-card--compact[data-section="psychology"]::before,
  #home-lower .cyx-section-card--compact[data-section="psychology"]::before {
    background-image: url('../img/icons%20sections/icon-psycology.png') !important;
  }

  body.home-active .cyx-section-card--compact[data-section="nutrition"]::before,
  body.home-active .cyx-section-card--compact[data-section="biomechanics"]::before,
  body.home-active .cyx-section-card--compact[data-section="mechanic"]::before,
  body.home-active .cyx-section-card--compact[data-section="racing"]::before,
  #home-lower .cyx-section-card--compact[data-section="nutrition"]::before,
  #home-lower .cyx-section-card--compact[data-section="biomechanics"]::before,
  #home-lower .cyx-section-card--compact[data-section="mechanic"]::before,
  #home-lower .cyx-section-card--compact[data-section="racing"]::before {
    background-image: url('../img/icons%20sections/cyclick%20black%20logo.png') !important;
  }

  /* Fallback: if legacy large cards render on mobile, collapse them to icon-only cards. */
  body.home-active .cyx-section-card:not(.cyx-section-card--compact),
  #home-lower .cyx-section-card:not(.cyx-section-card--compact) {
    padding: 28px 20px !important;
    text-align: center !important;
    cursor: pointer !important;
    min-width: 144px !important;
    max-width: 144px !important;
    flex: 0 0 144px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: #111111 !important;
    overflow: hidden !important;
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact):active,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact):active {
    border-color: #0056A3 !important;
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact)::before,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact)::before {
    content: '' !important;
    width: 56px !important;
    height: 56px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter: brightness(0) saturate(100%) invert(24%) sepia(78%) saturate(1300%) hue-rotate(203deg) brightness(102%) contrast(93%);
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact)[data-section="training"]::before,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact)[data-section="training"]::before {
    background-image: url('../img/icons%20sections/icon-entrenamientos.png') !important;
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact)[data-section="recovery"]::before,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact)[data-section="recovery"]::before {
    background-image: url('../img/icons%20sections/icon-recovery.png') !important;
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact)[data-section="psychology"]::before,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact)[data-section="psychology"]::before {
    background-image: url('../img/icons%20sections/icon-psycology.png') !important;
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact)[data-section="nutrition"]::before,
  body.home-active .cyx-section-card:not(.cyx-section-card--compact)[data-section="biomechanics"]::before,
  body.home-active .cyx-section-card:not(.cyx-section-card--compact)[data-section="mechanic"]::before,
  body.home-active .cyx-section-card:not(.cyx-section-card--compact)[data-section="racing"]::before,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact)[data-section="nutrition"]::before,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact)[data-section="biomechanics"]::before,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact)[data-section="mechanic"]::before,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact)[data-section="racing"]::before {
    background-image: url('../img/icons%20sections/cyclick%20black%20logo.png') !important;
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-media,
  body.home-active .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-desc,
  body.home-active .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-footer,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-media,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-desc,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-footer {
    display: none !important;
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-body,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-body {
    padding: 0 !important;
    margin: 0 !important;
  }

  body.home-active .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-title,
  #home-lower .cyx-section-card:not(.cyx-section-card--compact) .cyx-section-card-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111111 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Mobile header layout */
  .mobile-app-header {
    display: none !important;
  }

  #mobile-topbar {
    display: none !important;
  }

  #site-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #F5F5F5;
    width: 100%;
    padding: 8px 0;
    box-sizing: border-box;
    overflow: visible;
    transition: transform 0.3s ease;
  }

  #site-header.header-hidden {
    transform: translateY(-100%);
  }

  #site-header > header.header-sticky,
  #site-header .header-sticky {
    width: 100%;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
  }

  #site-header > header.header-sticky > .container,
  #site-header .header-sticky > .container {
    width: 100%;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 10px !important;
  }

  #site-header .navbar-main-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    position: relative;
    padding-right: 44px;
  }

  #site-header .navbar-left-group {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }

  #site-header .navbar-streak-pill,
  #site-header #premium-badge {
    display: none !important;
  }

  #site-header .header-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
    margin-left: 0;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }

  /* Campana visible en móvil, a la IZQUIERDA del ícono de búsqueda
     (2026-09-07, pedido de Hector). El orden del DOM es búsqueda→campana,
     así que se invierte con order. */
  #site-header .notification-wrapper {
    display: flex !important;
    align-items: center;
    order: -1;
    position: relative;
  }
  #site-header .notification-icon {
    width: 26px !important;
    height: 26px !important;
    opacity: 1 !important;
  }
  #site-header .notification-badge {
    top: -4px;
    right: -5px;
  }
  #site-header #home-search-icon { order: 0; }

  #site-header #home-search-icon {
    display: flex !important;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #111111;
    justify-content: center;
    padding: 4px !important;
    min-width: 32px;
    min-height: 32px;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #site-header #home-search-icon svg {
    width: 26px !important;
    height: 26px !important;
    stroke: #111111;
  }

  #mobile-header-search-btn svg {
    width: 26px !important;
    height: 26px !important;
  }

  #site-header #home-search-icon svg circle,
  #site-header #home-search-icon svg path,
  #mobile-header-search-btn svg circle,
  #mobile-header-search-btn svg path {
    stroke-width: 2.2 !important;
  }

  #site-header .logo-link {
    display: inline-flex !important;
    min-width: 0;
    gap: 6px !important;
  }

  #site-header .header-logo-img {
    width: 28px !important;
    height: 28px !important;
  }

  #site-header .logo-link .h2 {
    font-size: 1.45rem !important;
    line-height: 1 !important;
    max-width: 62vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.rider-room-active #site-header > header.header-sticky,
  body.rider-room-active #site-header .header-sticky {
    background: var(--dt-surface, #161D27) !important;
  }

  body.rider-room-active #site-header,
  body.rider-room-active #site-header > header.header-sticky > .container,
  body.rider-room-active #site-header .header-sticky > .container {
    background: var(--dt-surface, #161D27) !important;
  }

  body.rider-room-active #site-header .logo-link .h2 {
    color: #FFFFFF !important;
  }

  body.rider-room-active #site-header #home-search-icon svg {
    stroke: #FFFFFF !important;
  }

  body.rider-room-active #mobile-header-search-btn svg circle,
  body.rider-room-active #mobile-header-search-btn svg path {
    stroke: #FFFFFF !important;
  }

  body.rider-room-active #site-header .notification-icon {
    filter: brightness(0) invert(1) !important;
  }

  body.player-standard #site-header,
  body.player-interview #site-header,
  body.player-standard .mobile-header,
  body.player-interview .mobile-header {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .mobile-app-header {
    display: none !important;
  }

  .home-mobile-layout {
    display: none !important;
  }

  .home-web-layout,
  .home-web-layout.home-desktop-theme {
    display: block !important;
  }

  .home-web-layout .home-web-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 28px !important;
    overflow: visible !important;
    padding: 0 32px !important;
  }

  .home-web-layout .home-main {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    flex-shrink: 1 !important;
  }

  .home-web-layout .home-sidebar,
  .home-web-layout .rider-clips-panel {
    display: block !important;
  }
}

@media (max-width: 768px) {
  #global-search,
  #home-search {
    border: 1.5px solid #E0E0E0 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
  }

  #home-search-list .material-icons,
  #home-search-list .ms-2,
  #global-search-suggestions .material-icons,
  #global-search-suggestions .ms-2 {
    display: none !important;
  }

  #home-search-list .result-row,
  #global-search-suggestions .list-group-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 2px !important;
    border-bottom: 0.5px solid #ECECEC !important;
    border-radius: 0 !important;
  }

  #home-search-list .result-row img,
  #global-search-suggestions .list-group-item img:not(.suggest-thumb) {
    width: 68px !important;
    height: 68px !important;
    border-radius: 7px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
  }

  /* .suggest-thumb aparte (Hector, 2026-09-09): debe quedar 16:9, no
     cuadrado — compartía selector con la regla de arriba (esa img también
     hace match por "#global-search-suggestions .list-group-item img", sin
     necesitar la clase .suggest-thumb) y esa le ganaba por especificidad
     (trae tipo "img" además de las 2 clases) — se excluye arriba con
     :not(.suggest-thumb) para que solo aplique esta regla. */
  #global-search-suggestions .suggest-thumb {
    width: 68px !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    border-radius: 7px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
  }

  #home-search-list .result-row > div:not(.ms-2),
  #global-search-suggestions .list-group-item > div {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #home-search-list .result-row .fw-bold,
  #global-search-suggestions .result-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    margin: 0 0 3px !important;
    line-height: 1.3 !important;
  }

  #home-search-list .result-row .small-muted:not(.result-desc),
  #global-search-suggestions .result-sub {
    font-size: 12px !important;
    color: #5b6675 !important;
    margin: 0 0 2px !important;
  }

  #home-search-list .result-row .result-desc,
  #global-search-suggestions .result-desc {
    font-size: 12px !important;
    color: #6b7482 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* Mobile Refresh v1: visual consistency for Home without changing structure */
@media (max-width: 1023px) {
  :root {
    --mh-bg: #f3f5f8;
    --mh-card-bg: #ffffff;
    --mh-card-border: #e2e7ee;
    --mh-text: #111111;
    --mh-muted: #5f6978;
    --mh-accent: #0056A3;
    --mh-radius-lg: 14px;
    --mh-shadow: 0 8px 20px rgba(15, 27, 45, 0.06);
  }

  body.home-active #app,
  body.home-active #app.container,
  body.home-active .home-web-layout,
  body.home-active #home-lower {
    background: var(--mh-bg) !important;
  }

  body.home-active .home-web-layout .web-big-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    margin: 8px 0 10px !important;
    padding: 0 0 0 11px !important;
    border-left: 2px solid var(--mh-accent) !important;
    color: #0f1b2d !important;
  }

  body.home-active .home-web-layout .web-hero-secondary-row {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  body.home-active .home-web-layout .hero-secondary-card {
    flex: 0 0 calc((100% - 20px) / 1.22) !important;
    max-width: calc((100% - 20px) / 1.22) !important;
    border-radius: var(--mh-radius-lg) !important;
    border: none !important;
    background-color: var(--mh-card-bg) !important;
    box-shadow: none !important;
  }

  body.home-active .home-web-layout .hero-secondary-card .hero-secondary-content {
    padding: 2px 0 13px !important;
    background: var(--mh-card-bg) !important;
  }

  body.home-active .home-web-layout .hero-secondary-card .hero-cat-sm {
    color: var(--mh-accent) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
  }

  body.home-active .home-web-layout .hero-secondary-card .hero-title-sm {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    min-height: 36px !important;
    color: var(--mh-text) !important;
  }

  body.home-active .home-web-layout .hero-duration-sm {
    background: rgba(0, 0, 0, 0.80) !important;
    border-radius: 4px !important;
  }

  body.home-active #home-lower .lower-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.home-active #home-lower .section-title,
  body.home-active #home-lower .cyx-new-title,
  body.home-active #home-lower .cyx-sections-title,
  body.home-active #home-lower .question-label,
  body.home-active #home-lower .home-weekly-notes-title {
    font-size: 22px !important;
    line-height: 1.24 !important;
    color: #0f1b2d !important;
  }

  body.home-active #home-quick-section .h5.mb-0,
  body.home-active #home-lower .desktop-home-quick-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.24 !important;
    color: #0f1b2d !important;
    /* Barra azul, igual que "Explora Cyclick"/"Notas del pelotón" — en
       escritorio ya la traía (style.css), en móvil nunca la tuvo
       (Hector, 2026-09-08). */
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  body.home-active #home-lower .desktop-home-quick-title::before {
    content: '' !important;
    display: block !important;
    width: 4px !important;
    height: 22px !important;
    border-radius: 2px !important;
    background: #0056A3 !important;
    flex-shrink: 0 !important;
  }

  body.home-active #home-lower .desktop-home-video-card,
  body.home-active #home-lower .cyx-new-card,
  body.home-active #home-lower .question-card,
  body.home-active #home-lower .home-weekly-main-note,
  body.home-active #home-lower .home-weekly-list {
    background: var(--mh-card-bg) !important;
    border: 1px solid var(--mh-card-border) !important;
    border-radius: var(--mh-radius-lg) !important;
    box-shadow: var(--mh-shadow) !important;
  }

  body.home-active #home-lower .desktop-home-video-card,
  body.home-active #home-lower .cyx-new-card,
  body.home-active #home-quick-section .cyx-new-card {
    border: none !important;
    box-shadow: none !important;
  }

  body.home-active .home-mobile-layout .cyx-new-card,
  body.home-active .home-mobile-layout #home-quick-section .cyx-new-card,
  body.home-active .home-mobile-layout .quick-cyx-track .cyx-new-card,
  body.home-active .home-mobile-layout .cyx-new-track .cyx-new-card {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.home-active #home-lower .cyx-section-card {
    box-shadow: none !important;
  }

  body.home-active .home-carousel-card,
  body.home-active #home-lower .desktop-home-video-card,
  body.home-active #home-lower .cyx-new-card {
    box-shadow: none !important;
  }

  body.home-active .home-carousel-card,
  body.home-active .cyx-new-card,
  body.home-active #home-quick-section .cyx-new-card {
    border: none !important;
  }

  body.home-active #home-section-carousel .home-carousel-card,
  body.home-active .home-mobile-layout #home-section-carousel .home-carousel-card,
  body.home-active #home-lower .cyx-new-card,
  body.home-active #home-quick-section .cyx-new-card,
  body.home-active .quick-cyx-track .cyx-new-card,
  body.home-active .cyx-new-track .cyx-new-card {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }

  body.home-active #home-lower .desktop-home-video-card .meta {
    padding: 11px 12px 13px !important;
  }

  body.home-active #home-lower .desktop-home-video-card .title,
  body.home-active #home-lower .cyx-new-card-title {
    color: var(--mh-text) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }

  body.home-active #home-lower .desktop-home-video-card .sub,
  body.home-active #home-lower .cyx-new-card-meta,
  body.home-active #home-lower .question-side-sub,
  body.home-active #home-lower .home-weekly-main-desc {
    color: var(--mh-muted) !important;
  }

  body.home-active .home-lower .home-riderroom-card {
    border-radius: 16px !important;
    padding: 16px !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.home-active #home-lower .home-riderroom-actions .home-riderroom-btn-ghost {
    background: #f5c400 !important;
    color: #2c2200 !important;
    border: none !important;
    font-weight: 700 !important;
  }
}



/* Rider Room — header en móvil, variante LIGHT THEME (2026-09-07).
   Por defecto (dark) el header de Rider Room en móvil es oscuro; aquí se
   aclara cuando el usuario tiene light theme. */
@media (max-width: 1023px) {
  body:not(.dark-theme).rider-room-active #site-header > header.header-sticky,
  body:not(.dark-theme).rider-room-active #site-header .header-sticky,
  body:not(.dark-theme).rider-room-active #site-header,
  body:not(.dark-theme).rider-room-active #site-header > header.header-sticky > .container,
  body:not(.dark-theme).rider-room-active #site-header .header-sticky > .container {
    background: #FFFFFF !important;
  }
  body:not(.dark-theme).rider-room-active #site-header .logo-link .h2 {
    color: #111111 !important;
  }
  body:not(.dark-theme).rider-room-active #site-header #home-search-icon svg,
  body:not(.dark-theme).rider-room-active #mobile-header-search-btn svg circle,
  body:not(.dark-theme).rider-room-active #mobile-header-search-btn svg path {
    stroke: #111111 !important;
  }
  body:not(.dark-theme).rider-room-active #site-header .notification-icon {
    filter: brightness(0) !important;
  }
}