/*
  Ofertas Imperdibles MX — V71.2
  Barra original fija, sin clonados ni cambios de altura durante el scroll.

  El logo superior sale naturalmente. La barra ORIGINAL con imagen, redes,
  visitantes queda sticky al llegar a la parte superior. Los accesos de secciones continúan en el flujo normal.
*/

:root {
  --cabecera-fija-alto: 112px;
  --cabecera-fija-sombra: 0 8px 22px rgba(15, 23, 42, .11);
}

/* El encabezado vuelve a contener únicamente logo y estado dinámico. */
.encabezado {
  position: relative !important;
  top: auto !important;
  z-index: 2;
  overflow: hidden;
  background: transparent;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

/* Neutraliza por completo los estados de las versiones V70/V71 anteriores. */
body.cabecera-compacta .encabezado,
body.cabecera-compacta .enlace-logo-inicio,
body.cabecera-compacta .estado-dinamico-cabecera,
body.cabecera-compacta .hero-redes,
body.cabecera-compacta .hero-redes-logo,
body.cabecera-compacta .hero-redes-logo img,
body.cabecera-compacta .hero-redes-contenido > span,
body.cabecera-compacta .hero-redes-botones,
body.cabecera-compacta .hero-redes-boton,
body.cabecera-compacta .hero-redes-visitantes,
body.cabecera-compacta .menu-ofertas-contenedor,
body.cabecera-compacta .menu-ofertas > button,
body.cabecera-compacta .acceso-comunidad-anirona {
  max-height: none !important;
  min-height: initial !important;
  height: auto !important;
  margin: initial !important;
  padding-top: initial !important;
  padding-bottom: initial !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Punto exacto en el que la barra comienza a pegarse. */
.cabecera-fija-centinela {
  display: block;
  width: 1px;
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
  visibility: hidden;
}

/*
  Al permanecer en el flujo, esta barra reserva siempre su propia altura.
  Por ello nunca se superpone al título de sección ni a los cupones.
*/
.cabecera-fija-original {
  position: sticky;
  top: 0;
  z-index: 1100;
  width: 100%;
  padding: 1px 14px 5px;
  background: rgba(255, 255, 255, .985);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
  isolation: isolate;
}

.cabecera-fija-original.esta-pegada {
  border-bottom-color: rgba(94, 63, 105, .10);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--cabecera-fija-sombra);
}

/* Conserva exactamente la barra original, sin una copia reducida. */
.cabecera-fija-original .hero-redes {
  margin-top: 0 !important;
}

.navegacion-principal-flujo {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.navegacion-principal-flujo .menu-ofertas-contenedor,
.navegacion-principal-flujo .acceso-comunidad-anirona {
  position: relative;
  z-index: 1;
}

/*
  Cualquier salto, ancla o scrollIntoView deja visible el título bajo la barra.
  Se aplica también a las vistas que se muestran dinámicamente.
*/
html {
  scroll-padding-top: calc(var(--cabecera-fija-alto) + 14px) !important;
}

.titulo-seccion,
.seccion-ofertas-categoria,
.modulo-ofertas-categoria,
#vista-cupones,
#seccion-ofertas-mercado-libre,
#seccion-ofertas-amazon,
#seccion-comunidad-anirona {
  scroll-margin-top: calc(var(--cabecera-fija-alto) + 14px) !important;
}

/* Evita que el navegador intente recolocar el contenido al activarse sticky. */
.cabecera-fija-original,
.contenedor {
  overflow-anchor: none;
}

@media (min-width: 769px) {
  .cabecera-fija-original {
    padding-inline: max(22px, calc((100vw - 1120px) / 2));
  }
}

@media (max-width: 480px) {
  .cabecera-fija-original {
    padding: 1px 7px 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabecera-fija-original {
    transition: none !important;
  }
}

/* V71.3 — Logo principal horizontal: conserva la marca y reduce altura. */
.enlace-logo-inicio .logo {
  width: min(620px, 91vw) !important;
  max-height: 86px;
  object-fit: contain;
  margin-bottom: 6px !important;
}

@media (max-width: 600px) {
  .enlace-logo-inicio .logo {
    width: min(430px, 94vw) !important;
    max-height: 58px;
    margin-bottom: 4px !important;
  }
}

/* V71.4 — Logo oficial horizontal alineado y recortado. */
.enlace-logo-inicio {
  display: flex !important;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.enlace-logo-inicio .logo {
  display: block;
  width: min(560px, 88vw) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
  margin: 1px auto 5px !important;
}

@media (max-width: 600px) {
  .enlace-logo-inicio .logo {
    width: min(360px, 92vw) !important;
    margin: 1px auto 4px !important;
  }
}

@media (max-width: 390px) {
  .enlace-logo-inicio .logo {
    width: min(330px, 93vw) !important;
  }
}


/* V71.6 — Marca principal editable por elementos: ícono + nombre + eslogan. */
.enlace-logo-inicio {
  line-height: normal !important;
  text-decoration: none;
}

.marca-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 94vw;
  padding: 2px 8px 7px;
}

.marca-principal-icono {
  width: clamp(58px, 7.5vw, 88px);
  height: clamp(58px, 7.5vw, 88px);
  flex: 0 0 auto;
  object-fit: contain;
}

.marca-principal-textos {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.marca-principal-nombre {
  display: block;
  max-width: 100%;
  color: #171717;
  font-size: clamp(30px, 4.8vw, 58px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .98;
  white-space: nowrap;
}

.marca-principal-destacado {
  color: #43b929;
}

.marca-principal-eslogan {
  display: block;
  margin-top: 5px;
  color: #666;
  font-size: clamp(15px, 2vw, 24px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.1;
  white-space: nowrap;
}

.marca-principal-eslogan[hidden] { display: none !important; }

@media (max-width: 600px) {
  .marca-principal { gap: 7px; padding-inline: 4px; }
  .marca-principal-icono { width: 55px; height: 55px; }
  .marca-principal-nombre { font-size: clamp(25px, 8.4vw, 38px); }
  .marca-principal-destacado {
  color: #43b929;
}

.marca-principal-eslogan { margin-top: 3px; font-size: clamp(12px, 4vw, 17px); }
}

@media (max-width: 390px) {
  .marca-principal-icono { width: 48px; height: 48px; }
  .marca-principal-nombre { font-size: clamp(22px, 8vw, 31px); }
  .marca-principal-destacado {
  color: #43b929;
}

.marca-principal-eslogan { font-size: clamp(11px, 3.7vw, 14px); }
}


/* V77.14 — Logo principal completo configurable, sin alterar la altura de la cabecera. */
.enlace-logo-inicio {
  width: min(520px, 94vw) !important;
  height: 104px;
  margin: 0 auto 4px !important;
  overflow: hidden;
}

.marca-principal {
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 4px 8px;
}

.marca-principal-icono.marca-principal-logo-completo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  flex: 1 1 auto;
  object-fit: contain;
  object-position: center;
}

.marca-principal-textos[hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  .enlace-logo-inicio {
    width: min(390px, 94vw) !important;
    height: 78px;
  }

  .marca-principal {
    padding: 3px 5px;
  }
}

@media (max-width: 390px) {
  .enlace-logo-inicio {
    width: min(350px, 95vw) !important;
    height: 70px;
  }
}


/* V77.14.1 — Encabezado limpio: logo grande centrado, fondo blanco y sin estado. */
.encabezado {
  background: #fff !important;
}

.enlace-logo-inicio {
  width: min(650px, 96vw) !important;
  height: 136px;
  margin: 0 auto !important;
  background: #fff;
}

.enlace-logo-inicio::before {
  display: none !important;
  content: none !important;
}

.marca-principal {
  padding: 4px 10px;
}

.estado-dinamico-cabecera {
  display: none !important;
}

@media (max-width: 600px) {
  .enlace-logo-inicio {
    width: min(460px, 96vw) !important;
    height: 104px;
  }

  .marca-principal {
    padding: 3px 6px;
  }
}

@media (max-width: 390px) {
  .enlace-logo-inicio {
    width: min(370px, 97vw) !important;
    height: 92px;
  }
}

/* V77.15.1 — Restaura la barra verde sticky sin fijar el logo ni la navegación. */
.encabezado {
  overflow: visible !important;
}

.encabezado > .cabecera-fija-original {
  position: sticky;
  top: 0;
  z-index: 1100;
}

/* La barra inferior móvil ocupa su propio espacio y no altera el sticky superior. */
.navegacion-principal-oi {
  z-index: 1150;
}


/* ============================================================
   V82.26 — Sticky solo en móvil
   Escritorio/tablet (>600px): encabezado sigue el flujo normal.
   Móvil (<=600px): conserva exactamente el sticky actual.
   ============================================================ */
@media (min-width: 601px) {
  .cabecera-fija-original,
  .encabezado > .cabecera-fija-original {
    position: relative !important;
    top: auto !important;
  }

  .cabecera-fija-original.esta-pegada {
    border-bottom-color: transparent !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: none !important;
  }

  html {
    scroll-padding-top: 14px !important;
  }

  .titulo-seccion,
  .seccion-ofertas-categoria,
  .modulo-ofertas-categoria,
  #vista-cupones,
  #seccion-ofertas-mercado-libre,
  #seccion-ofertas-amazon,
  #seccion-comunidad-anirona {
    scroll-margin-top: 14px !important;
  }
}