/* ==========================================================================
   Componentes compartidos por las dos paletas del proyecto
   (assets/style.css y BlackFriday/assets/css/style.css)

   Este bloque estaba duplicado en las dos hojas y ademas en el <style> inline
   de index.html, que no carga la hoja principal. Tres copias del mismo CSS
   que se desincronizaban. Ahora hay una sola, y todas las paginas la cargan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedores del titulo.

   Cada pagina coloca el icono dentro del div que contiene su <h1>, asi que
   hace falta que ese div sea la referencia del posicionamiento. Hay cinco
   estructuras distintas en el proyecto:

     <header class="hero"><div>            portada
     <header class="cabecera"><div.wrap>   catalogos, SEO, ofertas en vivo
     <header class="site-header"><div>     seccion Black Friday
     <main class="error404">               404
   -------------------------------------------------------------------------- */
.cabecera > .wrap,
.hero > div,
.site-header > .wrap,
.error404 {
  position: relative;
}

/* --------------------------------------------------------------------------
   Icono del canal de Telegram.

   Va dentro del contenedor del titulo, no flotando sobre el viewport: asi
   ocupa su sitio en la maquetacion y no tapa contenido al hacer scroll.
   -------------------------------------------------------------------------- */
.icono-tg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  display: block;
  width: 56px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #14181f;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  line-height: 0;
}
.icono-tg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.icono-tg:hover,
.icono-tg:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   Pantallas estrechas: el icono se encoge y se reserva su hueco para que el
   titulo, que va en mayusculas, nunca pase por debajo. El padding simetrico
   en la marca de Black Friday mantiene el centrado optico.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .icono-tg {
    width: 46px;
    height: 40px;
    border-radius: 10px;
  }
  .cabecera h1,
  .hero h1,
  .error404 h1,
  .error404 h2 {
    padding-right: 56px;
  }
  .site-header .brand {
    padding-inline: 56px;
  }
}

/* --------------------------------------------------------------------------
   Accesibilidad: respeta la preferencia de reducir movimiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}