html:has(body #tt-loader:not(.tt-out)),
html:has(body #tt-loader:not(.tt-out)) body {
  background: #F7BFD3 !important;
  background-color: #F7BFD3 !important;
}

html body #tt-loader {
  background: #F7BFD3 !important;
  background-color: #F7BFD3 !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

html body #tt-loader:not(.tt-out) {
  opacity: 1 !important;
  visibility: visible !important;
}

html body #tt-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  background: #F7BFD3 !important;
  background-color: #F7BFD3 !important;
  background-image: none !important;
  opacity: 1 !important;
  pointer-events: none;
}

html body #tt-loader > * {
  position: relative;
  z-index: 1;
}

/* La marca visible se toma directamente del PNG oficial. Esta URL propia
   evita reutilizar en caché el SVG generado que se retiró del repositorio. */
html body #tt-loader-spin-wrap::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: var(--tt-loader-brand-width);
  max-width: 100%;
  aspect-ratio: 4 / 5;
  background-image: url("../../assets-tintin/images/general/logo.png?v=tintin-20260731-loader-official-instant-2");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0) invert(1) drop-shadow(0 8px 18px rgba(125, 23, 58, .16));
  opacity: 0;
  transform: scale(1.09);
  pointer-events: none;
}

/* Entrada elegida por el equipo: fade + escala (no es el revelado vertical
   que se sacó antes). Corre una sola vez apenas el logo está listo, dura
   600ms y no bloquea el "instantáneo": el logo sigue apareciendo enseguida,
   solo con un pequeño acabado en vez de aparecer seco. */
html body #tt-loader-spin-wrap.tt-ready::before {
  animation: tt-logo-fade-scale-in .6s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes tt-logo-fade-scale-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #tt-loader-spin-wrap::before {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* El elemento anterior queda fuera de la composición. Ya no puede mostrar
   el SVG viejo ni ejecutar el revelado de arriba hacia abajo. */
html body #tt-loader-logo,
html body #tt-loader-spin-wrap.tt-ready #tt-loader-logo {
  display: none !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  filter: none !important;
}

/* Debajo del ícono va la palabra Tintin y, debajo de esa, la sección a la
   que se está entrando (Página Principal, Catálogo - X, Producto - X, etc.).
   Nunca deben quedar ocultas; la animación de entrada (igual a la del logo)
   la define cargador-pagina.js. */
html body #tt-loader-wordmark,
html body #tt-loader-brand-subtitle {
  visibility: visible !important;
}

/* El cargador usa una sola marca blanca, sin corazones decorativos ni tonos
   rosas mezclados: así conserva contraste sobre el fondo de marca en cada
   página y en todos los tamaños. */
html body #tt-loader-wordmark,
html body #tt-loader-wordmark .tt-loader-wordmark-i,
html body #tt-loader-brand-subtitle,
html body #tt-loader-title,
html body #tt-loader-subtitle {
  color: #fff !important;
}

html body #tt-loader-wordmark .tt-loader-wordmark-i::before,
html body #tt-loader-wordmark .tt-loader-wordmark-i::after {
  content: none !important;
  display: none !important;
}

html body #tt-loader .tt-loader-spinner::before {
  border-color: #fff #fff transparent transparent !important;
  mix-blend-mode: normal !important;
}

html body #tt-loader .tt-loader-spinner::after {
  border-color: transparent transparent rgba(255,255,255,.38) rgba(255,255,255,.38) !important;
  mix-blend-mode: normal !important;
}

/* Login funciona como pantalla independiente. El shell público puede montarse
   técnicamente mientras cargan los scripts, pero jamás debe verse ni reservar
   espacio alrededor del formulario. */
html body:has(.login-page) #tt-header-desktop-tablet,
html body:has(.login-page) #search-panel,
html body:has(.login-page) #mobile-menu,
html body:has(.login-page) #tt-tabbar,
html body:has(.login-page) #cart-overlay,
html body:has(.login-page) #cart-drawer,
html body:has(.login-page) #collections-sheet,
html body:has(.login-page) #sheet-backdrop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body:has(.login-page).tt-public-shell-mounted {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* En escritorio el header público permanece fixed antes y después del mount,
   y las páginas ya reservan su offset mediante --header-h en sus propios
   heroes/breadcrumbs. Agregar 88px al body solo antes del mount introducía
   una geometría transitoria que desaparecía al añadir
   .tt-public-shell-mounted y se contabilizaba como CLS. En tableta sí se
   conserva la reserva estable de 84px porque forma parte del layout fijo de
   ese breakpoint y no cambia durante el montaje. */
 @media (min-width: 768px) and (max-width: 1024px) {
   html body:not(:has(.login-page)):not(:has(.adm-main)):not(.tt-home-premium) {
     padding-top: 84px !important;
   }
 }

/* La pantalla normal de Login usa el mismo loader oficial que el resto del
   sitio. Esta regla final anula únicamente la excepción visual antigua; el
   estado interno tt-auth-silent-transition conserva su comportamiento. */
html:has(.login-page) body #tt-loader {
  background: #F7BFD3 !important;
  background-color: #F7BFD3 !important;
}

html:has(.login-page) body #tt-loader-spin-wrap {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body:has(.login-page) .login-page {
  min-height: 100dvh !important;
  position: relative;
  z-index: 1;
}