/* GANK - Header pegado: escritorio en laptops y movil compacto. 2026-09-19
   1) 992-1599px: respiracion lateral del header pegado.
   2) 992-1399px: buscador siempre visible, sin desplegable, entrando sincronizado con el header.
   3) Movil (<=991px): al pegarse, la barra de busqueda ocupa el lugar del logo en la misma fila.
   Se carga despues de gank-header-search.css (gank-staging-search.css en staging). */

/* El header pegado del tema baja con mySticky (margin-top -200 -> 0, 1s ease-in-out).
   El buscador es fixed, asi que necesita su propia entrada con la misma curva y duracion
   para no aparecer antes que el header. Se anima 'top' porque 'margin' va con !important. */
@keyframes gank-sticky-drop{from{top:-200px}to{top:0}}

@media (min-width:992px) and (max-width:1599.98px){
  #header .tvcmsheader-sticky.sticky .tvcms-header-menu.container{padding-left:24px;padding-right:24px}
}

@media (min-width:992px) and (max-width:1399.98px){
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search{position:fixed!important;top:0;left:auto;right:180px;z-index:102;display:block;width:clamp(220px,calc(100vw - 920px),440px);height:59px;margin:0;padding:0;box-sizing:border-box;overflow:visible}
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .search-widget,
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-top-wrapper{position:static;width:100%;margin:0;padding:0}
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper{position:fixed!important;top:0;left:auto;right:180px;z-index:102;display:block!important;width:clamp(220px,calc(100vw - 920px),440px);max-width:none;height:59px;margin:0;padding:3px 0 4px 16px;box-sizing:border-box;border:0;border-left:1px solid #f3f3f3;background:#fff;box-shadow:none;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;transition:none!important;animation:gank-sticky-drop 1s ease-in-out both!important}
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper form,
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper .tvcmssearch-words{width:100%;height:52px}
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvheader-sarch-display,
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvheader-search-display-icon,
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-open,
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-close{display:none!important}
}

/* Sin animacion: se quitan las dos a la vez para que no se desincronicen. */
@media (min-width:992px) and (prefers-reduced-motion:reduce){
  #header .tvcmsheader-sticky.sticky,
  #header:has(.tvcmsheader-sticky.sticky) #_desktop_search .tvsearch-header-display-wrappper{animation:none!important}
}

/* Movil: al pegarse, la barra sustituye al logo y el header pasa de 138px a 80px de alto.
   En el tope de la pagina el header se mantiene tal cual (logo arriba, barra debajo). */
@media (max-width:991px){
  #tvcms-mobile-view-header .tvcmsheader-sticky.sticky #tvcmsmobile-header-logo{visibility:hidden!important}
  #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper{top:0!important;left:55px!important;right:112px!important;width:auto!important;height:80px!important;min-height:0!important;margin:0!important;padding:0!important;display:flex!important;align-items:center;background:transparent!important;box-shadow:none!important}
  #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper .tvcmsmobile-header-search,
  #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper .tvcmsheader-search,
  #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper .tvsearch-top-wrapper{width:100%!important}
  #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper #tvcmsmobile-search .tvsearch-header-display-wrappper{height:48px!important}
  body.mobile-menu-open #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper{display:none!important}
  #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper .tvcmssearch-words,
  #tvcms-mobile-view-header .tvcmsheader-sticky.sticky~.tvcmsmobile-header-search-logo-wrapper input[type="text"]{height:48px!important}
}